/* 2BIT pulse: the bands under the stage (DESIGN_SPEC §5.4, §8).
   Score Tape · On the floor · Moving Day · Pots and chases · Fresh off the
   bench · House numbers. Shared components come from base.css; everything
   here is prefixed .pu-. Cabinet colours arrive from JS as --c.
   Live mode builds fewer bands out of the same parts, plus the few rules
   under "live mode" below. */

/* ---------- shared ---------- */
.pu-card{ display:flex; flex-direction:column; }
.pu-card > .card-b{ flex:1 1 auto; display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }
.pu-foot{ margin-top:auto; }
.pu-none{ padding:var(--s-3) 0; }
.pu-name{ font-weight:700; color:var(--tx-1); }
.pu-ago{ color:var(--tx-3); font:500 12px/1.2 var(--f-mono); white-space:nowrap; }
.pu-unit{ font:700 12px/1 var(--f-ui); letter-spacing:.1em; color:var(--tx-3); }
.pu-wide{ min-width:0; }
.pu ul, .pu ol{ list-style:none; padding:0; }

/* ---------- Band 0: score tape ---------- */
.pu-tape-wrap{ max-width:var(--page-max); margin:var(--s-4) auto 0; padding:0 var(--s-4); }
.pu-tape{
  display:flex; height:44px; overflow:hidden;
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-2);
}
.pu-tape-cell{
  flex:none; display:flex; align-items:center; padding:0 var(--s-3);
  background:var(--bg-card); border-right:1px solid var(--line-1);
}
.pu-tape-led{ position:relative; flex:1 1 auto; min-width:0; }
.pu-tape-c{ width:100%; height:100%; }
/* the same ten entries as real links: read by screen readers always, shown
   in place of the dots while the keyboard is inside the tape */
.pu-tape-list{
  position:absolute; inset:0; display:flex; align-items:center; gap:var(--s-4);
  margin:0; padding:0 var(--s-3); overflow:hidden; white-space:nowrap;
  background:var(--bg-screen); opacity:0; pointer-events:none;
}
.pu-tape:focus-within .pu-tape-list{ opacity:1; pointer-events:auto; }
.pu-tape-list a{
  display:inline-flex; align-items:center; height:44px; padding:0 var(--s-1);
  font:700 13px/1 var(--f-mono); color:var(--tx-1); text-decoration:none;
}
.pu-tape-list a:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); border-radius:var(--r-1); }

/* ---------- cabinet figure ---------- */
.pu-fig{ position:relative; flex:none; }
.pu-fig-c{ position:absolute; inset:0; width:100%; height:100%; max-width:none; }
.pu-fig-s{ position:absolute; max-width:none; }

/* ---------- cabinet of the hour ---------- */
.pu-hour > .card-b{ align-items:stretch; }
.pu-hour .pu-fig{ align-self:center; margin:var(--s-2) 0; }
.pu-hour-id{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2); }
.pu-hour-title{ font:700 17px/1.2 var(--f-ui); letter-spacing:.03em; text-transform:uppercase; min-width:0; }
.pu-hour-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-2); }
.pu-hour .btn{ margin-top:auto; }

/* ---------- floor counters ---------- */
.pu-counts{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-3); }
.pu-count{ justify-content:space-between; min-height:96px; }
.pu-count-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; }
.pu-spark{ display:block; flex:none; color:var(--tx-2); }

/* ---------- now playing ---------- */
.pu-now{ min-height:0; max-height:336px; overflow-y:auto; overscroll-behavior:contain; margin:0; }
.pu-now-row{
  display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto auto; align-items:center;
  column-gap:var(--s-2); row-gap:6px; padding:var(--s-2) 0;
  border-bottom:1px solid var(--line-1);
  transition:opacity var(--d-3) linear;
}
.pu-now-next{ color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pu-now-score{ font-weight:700; text-align:right; color:var(--tx-1); }
.pu-now-meter{ grid-column:1 / -1; height:4px; border:0; }
.pu-now-row.is-over .pu-now-next{ color:var(--tx-1); font-weight:700; letter-spacing:.08em; }
.pu-now-row.is-over .pu-now-meter{ visibility:hidden; }
.pu-now-row.is-out{ opacity:0; }
.pu-now-row.is-you{ grid-template-columns:auto auto minmax(0, 1fr) auto; background:var(--sel-wash); padding-left:var(--s-2); padding-right:var(--s-2); border-radius:var(--r-1); }
.pu-tag-you{ background:var(--sel); color:var(--tx-ink); }

/* ---------- fresh high scores ---------- */
.pu-feed{ height:336px; overflow-y:auto; overscroll-behavior:contain; margin:0; }
.pu-feed-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  min-height:40px; padding:6px var(--s-1);
  border-bottom:1px solid var(--line-1);
  font:500 13px/1.45 var(--f-ui); color:var(--tx-2);
}
.pu-feed-row .pu-name{ color:inherit; }
.pu-feed-row.is-top{ color:var(--tx-1); }
.pu-feed-row.is-1{ color:var(--tx-1); }
.pu-feed-row.is-1 b, .pu-feed-row.is-1 .pu-feed-score{ color:var(--coin); }
.pu-feed-score{ margin-left:auto; font-weight:700; }

/* ---------- Band B: moving day ---------- */
.pu-move{
  display:grid; grid-template-columns:132px minmax(0, 1fr); height:220px;
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-2);
}
.pu-move-labels{
  display:grid; grid-template-rows:repeat(5, 44px); align-items:center;
  padding:0 var(--s-2) 0 var(--s-3); border-right:1px solid var(--line-1);
}
.pu-move-labels .micro{ color:var(--tx-2); }
.pu-move-plot{ position:relative; margin:0 var(--s-5); }
.pu-move-rail{ position:absolute; left:calc(var(--s-5) * -1); right:calc(var(--s-5) * -1); height:1px; background:var(--line-1); }
.pu-move-layer{ position:absolute; inset:0; pointer-events:none; }
.pu-move-dot{
  position:absolute; z-index:1; width:24px; height:44px; margin:-22px 0 0 -12px;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
}
.pu-move-dot > i{
  width:8px; height:8px; border-radius:var(--r-round); background:var(--c, var(--tx-3));
  transition:transform var(--d-2) var(--e-out);
}
@media (hover: hover){
  .pu-move-dot:hover > i{ transform:scale(1.6); }
}
.pu-move-dot.is-sel > i{ box-shadow:0 0 0 2px var(--bg-screen), 0 0 0 4px var(--sel); }
.pu-move-dot:focus-visible{ box-shadow:none; }
.pu-move-dot:focus-visible > i{ transform:scale(1.6); box-shadow:0 0 0 2px var(--bg-screen), 0 0 0 4px var(--sel); }
.pu-move-arrow{ position:absolute; width:2px; margin-left:-1px; background:currentColor; }
.pu-move-arrow.is-up{ color:var(--up); }
.pu-move-arrow.is-down{ color:var(--down); }
.pu-move-arrow::after{
  content:""; position:absolute; left:-4px; width:10px; height:7px; background:currentColor;
}
.pu-move-arrow.to-top::after{ top:-2px; clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.pu-move-arrow.to-bottom::after{ bottom:-2px; clip-path:polygon(0 0, 100% 0, 50% 100%); }
.pu-move-badge{ position:absolute; transform:translate(8px, -50%); border:1px solid var(--line-2); }
.pu-move-badge.is-left{ transform:translate(calc(-100% - 8px), -50%); }
.pu-move-tip{
  position:absolute; z-index:3; width:max-content; max-width:min(340px, 76vw);
  padding:6px var(--s-2); pointer-events:none;
  background:var(--bg-card); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-1);
  font:500 13px/1.4 var(--f-ui);
  transform:translateX(-50%);
}
.pu-move-tip[data-align="l"]{ transform:none; }
.pu-move-tip[data-align="r"]{ transform:translateX(-100%); }
.pu-move-list{ display:none; margin:0; }
.pu-move-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2);
  min-height:48px; padding:var(--s-2) 0; border-bottom:1px solid var(--line-1);
  font:500 13px/1.45 var(--f-ui);
}
.pu-move-row .pu-ago{ margin-left:auto; }
.pu-move ~ .pu-foot{ margin-top:var(--s-3); }

/* ---------- prize pots ---------- */
.pu-pots{ display:flex; flex-direction:column; margin:0; }
.pu-pot{
  display:grid; grid-template-columns:minmax(88px, auto) minmax(0, 1fr) auto; align-items:center;
  column-gap:var(--s-3); row-gap:var(--s-1); padding:var(--s-2) 0;
  border-bottom:1px solid var(--line-1);
}
.pu-pot .cab-chip{ justify-self:start; }
.pu-pot-sol{ font-weight:700; text-align:right; min-width:9ch; }
.pu-pot-src{ grid-column:1 / -1; }
.pu-split{ color:var(--tx-1); font-weight:700; white-space:nowrap; }

/* ---------- score chase ---------- */
.pu-chases{ display:flex; flex-direction:column; gap:var(--s-3); margin:0; }
.pu-chase{
  display:flex; flex-direction:column; gap:6px;
  padding:var(--s-3); background:var(--bg-raise); border-radius:var(--r-2);
}
.pu-chase-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; margin-bottom:2px; }
.pu-chase-bar{
  display:grid; grid-template-columns:4ch minmax(0, 1fr) 8ch; align-items:center; gap:var(--s-2);
  font-size:13px;
}
.pu-chase-bar > :last-child{ text-align:right; }
.pu-chase-bar .meter{ height:8px; }

/* ---------- window race ---------- */
.pu-race{ display:flex; flex-direction:column; margin:0; }
.pu-race-row{
  display:grid; grid-template-columns:3ch minmax(0, auto) minmax(0, 1fr) auto; align-items:center;
  column-gap:var(--s-2); row-gap:var(--s-1); padding:6px 0;
}
.pu-race-rank{ color:var(--tx-3); font-size:13px; }
.pu-race-cap{ text-align:right; font-size:14px; }
.pu-race-row .cab-chip{ justify-self:start; }
.pu-race-meter{ grid-column:1 / -1; height:6px; overflow:visible; }
.pu-race-meter .meter-fill{ border-radius:inherit; }
/* the cut line */
.pu-race-meter::after{
  content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--tx-1);
}
.pu-race-row.is-ch .pu-race-rank, .pu-race-row.is-ch .pu-race-cap{ color:var(--tx-2); }
.pu-race-row.is-first-ch{ margin-top:var(--s-2); padding-top:var(--s-3); border-top:1px dashed var(--line-2); }
.pu-tag-warn{ color:var(--warn); border:1px solid var(--warn); background:transparent; }

/* ---------- forge log ---------- */
.pu-log-filter{ display:flex; gap:var(--s-1); flex-wrap:wrap; }
.pu-log{
  height:360px; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s-3); color:var(--tx-2);
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-2);
}
.pu-log:focus-visible{ box-shadow:inset 0 0 0 2px var(--sel); }
.pu-log-e{ padding:6px 0; }
.pu-log-h{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:var(--tx-1); }
.pu-log-l{ padding-left:2ch; text-indent:-2ch; }
.pu-log-l::before{ content:"> "; color:var(--tx-3); }
.pu-log-done{ color:var(--tx-1); margin-top:2px; }
.pu-log-done .chip{ text-indent:0; height:24px; margin-left:var(--s-1); font-size:12px; }
.pu-log-cur{ color:var(--tx-3); padding-top:6px; }
.pu-cursor{
  display:inline-block; width:8px; height:14px; vertical-align:-2px; background:var(--tx-2);
  animation:pu-blink 1.1s step-end infinite; animation-play-state:var(--loop-state);
}
@keyframes pu-blink{ 0%{ opacity:1; } 50%{ opacity:0; } 100%{ opacity:1; } }
.pu-log.no-build .pu-log-e[data-kind="build"],
.pu-log.no-tier .pu-log-e[data-kind="tier"],
.pu-log.no-move .pu-log-e[data-kind="move"]{ display:none; }

/* ---------- just plugged in ---------- */
.pu-plug{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-3); margin:0; }
.pu-tile{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2); min-width:0;
  padding:var(--s-3) var(--s-2); background:var(--bg-raise); border-radius:var(--r-2); text-align:center;
}
.pu-tile-meta{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.pu-tile-cta{ margin-top:auto; padding-bottom:var(--s-1); max-width:100%; }
.pu-tile-cta .btn{ max-width:100%; padding:0 var(--s-2); font-size:12px; letter-spacing:.04em; }
/* CRT power-on for a tile that has just arrived */
.pu-wipe .pu-fig-s{ animation:pu-power var(--d-4) var(--e-out) both; }
@keyframes pu-power{
  0%{ transform:scale(.04, .03); }
  45%{ transform:scale(1, .03); }
  100%{ transform:none; }
}

/* ---------- template mix ---------- */
.pu-mix-bar{ display:flex; gap:2px; height:44px; }
.pu-mix-seg{
  position:relative; flex:1 1 44px; min-width:44px;
  display:flex; align-items:center; justify-content:center; gap:var(--s-1);
  color:var(--tx-ink); font-size:12px; font-weight:700;
  /* six neutral steps from --tx-3 to --tx-1; never the cabinet colours */
  background:var(--tx-2);
  background:color-mix(in srgb, var(--tx-3), var(--tx-1) calc(var(--i, 0) * 20%));
  -webkit-tap-highlight-color:transparent;
}
.pu-mix-seg:first-child{ border-radius:var(--r-1) 0 0 var(--r-1); }
.pu-mix-seg:last-child{ border-radius:0 var(--r-1) var(--r-1) 0; }
.pu-mix-seg::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--sel); opacity:0;
}
.pu-mix-seg[aria-pressed="true"]::after{ opacity:1; }
.pu-mix-seg[aria-pressed="true"]{ background:var(--sel); }
@media (hover: hover){
  .pu-mix-seg:hover::after{ opacity:1; }
}
.pu-mix-seg:focus-visible{ z-index:1; box-shadow:var(--focus); }
.pu-ico{ display:block; }
.pu-mix-tbl{ overflow-x:auto; margin:0 calc(var(--s-2) * -1); }
.pu-mix-tbl .tbl th{ position:static; }
.pu-mix-tbl .tbl th, .pu-mix-tbl .tbl td{ padding:var(--s-2); }
.pu-mix-name{
  display:inline-flex; align-items:center; gap:var(--s-2); min-height:28px;
  font:700 13px/1 var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-1);
  border-radius:var(--r-1);
}
.pu-mix-name .pu-ico{ color:var(--tx-2); }
@media (hover: hover){
  .pu-mix-name:hover{ text-decoration:underline; text-decoration-color:var(--sel); text-underline-offset:3px; }
}

/* ---------- your card ---------- */
.pu-me{ display:flex; flex-direction:column; gap:var(--s-3); }
.pu-me-top{ display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:var(--s-3); }
.pu-me-tag{ font-size:40px; line-height:1; color:var(--tx-1); min-width:3ch; }
.pu-me-list{ display:flex; flex-direction:column; margin:0; }
.pu-me-list li{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:var(--s-2);
  padding:6px 0; border-bottom:1px solid var(--line-1);
}
.pu-me-list .small{ text-align:right; }
.pu-me-mine{ display:flex; flex-wrap:wrap; gap:var(--s-2); }

/* ---------- how it works ---------- */
.pu-how{ display:flex; flex-direction:column; gap:var(--s-3); margin:0; }
.pu-how li{ display:flex; align-items:center; gap:var(--s-3); font:500 15px/1.4 var(--f-ui); }
.pu-how-n{
  flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  background:var(--bg-raise); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:var(--r-1);
  font-weight:700; font-size:14px; color:var(--tx-1);
}
.pu-how-link{
  align-self:flex-start; margin-top:auto; min-height:32px;
  font:700 13px/1 var(--f-ui); letter-spacing:.08em; border-radius:var(--r-1);
}
.pu-rules{ padding:var(--s-5); }
.pu-rules h2{ margin:0 var(--s-7) var(--s-4) 0; font-size:22px; }
.pu-rules-list{ display:flex; flex-direction:column; gap:var(--s-3); list-style:none; padding:0; }
.pu-rules-list h4{ text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--tx-1); }
.pu-rules-demo{ margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line-1); color:var(--tx-2); }

/* ---------- live mode ----------
   The cards only live mode builds: most played, floor numbers (five figures,
   no trend lines), top market caps, and the one block of an empty floor.
   They reuse the hour card's parts (.pu-hour-id, .pu-hour-kpis), the
   counters grid and the race rows. */
.pu-most-top{ display:flex; flex-direction:column; gap:var(--s-3); }
.pu-most-top .pu-fig{ align-self:center; margin:var(--s-2) 0; }
.pu-most-list{ display:flex; flex-direction:column; margin:0; }
.pu-most-row{
  display:grid; grid-template-columns:3ch minmax(0, auto) minmax(0, 1fr) auto; align-items:center;
  column-gap:var(--s-2); min-height:44px; padding:6px 0;
  border-top:1px solid var(--line-1);
}
.pu-most-row .cab-chip{ justify-self:start; }
.pu-most-n{ text-align:right; font-size:13px; color:var(--tx-2); white-space:nowrap; }

.pu-counts-5{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
.pu-counts-5 .kpi-n{ overflow:hidden; text-overflow:ellipsis; }

.pu-cap-chg{ min-width:7ch; text-align:right; font-size:13px; }
.pu-cap-meter{ grid-column:1 / -1; height:6px; }

.pu-open-b{ gap:var(--s-4); padding:var(--s-7) var(--s-4); }
.pu-open-b h2{ color:var(--tx-1); }
.pu-open-b p{ max-width:56ch; }
.pu-open-rules{
  display:inline-flex; align-items:center; min-height:44px;
  font:700 13px/1 var(--f-ui); letter-spacing:.08em; border-radius:var(--r-1);
}

/* ---------- breakpoints (§5.4, §8) ---------- */
@media (max-width: 1179px){
  .pu-hour > .card-b{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:var(--s-5); }
  .pu-hour .pu-fig{ grid-row:1 / span 4; margin:0; }
  .pu-hour .btn{ margin-top:0; }
  .pu-plug{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .pu-most-top{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:var(--s-5); }
  .pu-most-top .pu-fig{ grid-row:1 / span 3; margin:0; }
}

@media (max-width: 899px){
  .pu-tape-wrap{ margin-top:var(--s-3); padding:0 var(--s-3); }
  .pu-hour > .card-b{ display:flex; }
  .pu-hour .pu-fig{ margin:var(--s-2) 0; }
  .pu-most-top{ display:flex; }
  .pu-most-top .pu-fig{ margin:var(--s-2) 0; }
  /* §8: the counters move below the pots band as a 2x2 */
  .pu-counts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-2); }
  /* live: five figures, so the last one takes the full row */
  .pu-counts-5 > :last-child{ grid-column:1 / -1; }
  /* §8: Just Plugged In comes before the Forge Log, as a snap scroller */
  .pu-plugged{ order:-1; }
  .pu-plug{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0 calc(var(--s-4) * -1); padding:0 var(--s-4) var(--s-2); scroll-padding:0 var(--s-4);
  }
  .pu-tile{ flex:0 0 152px; scroll-snap-align:start; }
  .pu-log{ height:240px; }
  .pu-now, .pu-feed{ max-height:300px; height:auto; }
  .pu-feed-row{ min-height:44px; }
  .pu-move{ grid-template-columns:104px minmax(0, 1fr); }
  .pu-move-plot{ margin:0 var(--s-4); }
  .pu-move-rail{ left:calc(var(--s-4) * -1); right:calc(var(--s-4) * -1); }
  .pu-move-dot{ width:44px; margin-left:-22px; }
  .pu-mix-name, .pu-how-link{ min-height:44px; }
  .pu-log-done .chip{ height:32px; }
}

@media (max-width: 559px){
  .pu-move{ display:none; }
  .pu-move-list{ display:block; }
  .pu-hour-kpis{ gap:6px; }
  .pu-hour-kpis .kpi{ padding:var(--s-2); }
  .pu-count .kpi-n{ font-size:24px; }
  .pu-pot{ grid-template-columns:minmax(0, auto) minmax(0, 1fr) auto; column-gap:var(--s-2); }
  .pu-me-top{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .pu-me-tag{ grid-column:1 / -1; }
  .pu-rules{ padding:var(--s-4); }
}

/* ---------- calm (§7): no wipe, no fade, the cursor holds solid ---------- */
:root[data-calm="1"] .pu-wipe .pu-fig-s{ animation:none; }
:root[data-calm="1"] .pu-now-row, :root[data-calm="1"] .pu-move-dot > i{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .pu-wipe .pu-fig-s{ animation:none; }
  .pu-now-row, .pu-move-dot > i{ transition:none; }
}