/* 2BIT stage: the home hero (the roller sign and the LED ticker behind it)
   and the chrome around the floor canvas. Classes are prefixed .st-.

   State classes, all set by js/ui/stage.js:
     .st.is-rolled     the sign is retracted, the LED ticker shows   (>= 900px only)
     .st.is-engaged    the floor has the wheel and the keys
     .st.is-full       ENTER FLOOR: the canvas fills the screen      (< 900px only)
     .st.is-empty      live mode: no cabinet on the floor
     .st-frame.is-panel  a cabinet is selected: the panel column is open (>= 900px)
     html.st-lock      page scroll is held while .is-full

   Above 900px everything is laid over one fixed-height frame; below it the
   same nodes stack as normal blocks (sign, chips, canvas, strip, tray). */

.st{ --st-cover:calc(var(--marquee-h) - var(--ticker-h)); margin:var(--s-4) var(--s-4) 0; }
html.st-lock{ overflow:hidden; }

.st-frame{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); }
.st-main{ position:relative; min-width:0; min-height:0; }
.st-slot{ position:relative; }
.st-view{ position:absolute; inset:0; overflow:hidden; background:var(--bg-void); }

/* the floor: sized by its box, never by the hero */
.st-canvas{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
/* an inset shadow would paint under the pixels, so the ring is an outline here */
.st-canvas:focus-visible{ outline:2px solid var(--sel); outline-offset:-6px; box-shadow:none; }

/* vignette + scanlines: one static layer, never repainted */
.st-fx{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background:var(--scanlines), radial-gradient(ellipse at 50% 55%, transparent 60%, var(--bg-void) 135%);
}

/* engaged: a cyan inner ring (frame above 900px, canvas box below) */
.st-view::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 2px var(--sel); opacity:0; transition:opacity var(--d-2) linear;
}

/* ---------- the sign ---------- */
.st-sign{ position:relative; }
.st-kicker{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.st-lede{ max-width:76ch; }
.st-cta{ display:flex; align-items:center; gap:var(--s-3); }
.st-keys{ display:flex; gap:var(--s-3); list-style:none; padding:0; color:var(--tx-3); font:500 13px/1.45 var(--f-ui); }
.st-keys li{ display:flex; align-items:center; gap:6px; white-space:nowrap; }

/* One row of bulbs, painted once on its own layer; the chase is that layer
   stepping sideways by one bulb. */
.st-bulbs{ height:11px; overflow:hidden; background:var(--bg-screen); contain:paint; position:relative; }
.st-bulbs > i{
  position:absolute; top:0; bottom:0; left:-36px; right:0; will-change:transform;
  background:
    radial-gradient(circle at 6px 50%, var(--house) 0 2.5px, transparent 3px) 0 0 / 36px 100%,
    radial-gradient(circle at 6px 50%, var(--house-lo) 0 2.5px, transparent 3px) 0 0 / 12px 100%;
  animation:st-chase .5s steps(3, end) infinite; animation-play-state:var(--loop-state);
}
@keyframes st-chase{ to{ transform:translateX(36px); } }

/* ---------- LED ticker ---------- */
.st-ticker{
  display:flex; align-items:center; gap:var(--s-2); height:var(--ticker-h); padding:0 var(--s-3);
  background:var(--bg-screen); border-bottom:1px solid var(--line-1);
}
.st-led-w{ flex:1 1 auto; min-width:0; }
.st-led{ width:100%; height:27px; }

/* ---------- chrome tiles ---------- */
.st-tl{
  position:absolute; z-index:2; left:var(--s-3); top:var(--s-3); max-width:calc(100% - 2 * var(--s-3));
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2);
}
.st-tl-row{ display:flex; align-items:center; gap:var(--s-2); }
.st-sticker{
  position:relative; display:inline-flex; align-items:center; min-height:32px; padding:4px 6px;
  background:var(--bg-card); border:1px solid var(--line-2); border-radius:var(--r-1);
}
@media (hover: hover){
  .st-sticker:hover{ border-color:var(--sel); }
}

/* what the hidden cabinet list has focused, shown for sighted keyboard users */
.st-kb{
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; max-width:min(520px, 100%);
  padding:6px var(--s-3); background:var(--bg-card); color:var(--tx-1);
  border:2px solid var(--sel); border-radius:var(--r-1);
  font:500 13px/1.45 var(--f-ui); letter-spacing:.01em;
}
.st-kb span{ color:var(--tx-3); }

.st-empty{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%, -50%);
  width:max-content; max-width:calc(100% - 2 * var(--s-4)); padding:var(--s-3) var(--s-4); text-align:center;
  background:var(--bg-card); color:var(--tx-2); border:1px dashed var(--line-2); border-radius:var(--r-2);
}
/* live mode, nothing on the floor: a headline, one sentence and the one
   thing to do next (or, when the floor never loaded, only what is wrong) */
.st-empty-live{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  width:min(400px, calc(100% - 2 * var(--s-4))); padding:var(--s-5) var(--s-4);
  box-shadow:var(--sh-float);
}
.st-empty-t{ display:flex; flex-direction:column; gap:var(--s-2); }
.st-empty-h{ font:400 32px/1 var(--f-pix); letter-spacing:.01em; text-transform:uppercase; color:var(--tx-1); }
.st-empty-live p{ font:400 15px/1.45 var(--f-ui); }
/* the label may wrap on a narrow phone; the 4px is room for the pressed-plastic shelf */
.st-empty-live .btn{
  max-width:100%; height:auto; min-height:44px; margin-bottom:4px; padding-top:6px; padding-bottom:6px;
  line-height:1.2; text-align:center; white-space:normal;
}

/* live mode: the floor loaded once and has stopped refreshing */
.st-stale{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px var(--s-2);
  background:var(--bg-card); color:var(--tx-2); border:1px solid var(--line-2); border-radius:var(--r-1);
  font:500 13px/1.45 var(--f-ui); letter-spacing:.01em;
}
.st-stale::before{ content:""; flex:none; width:6px; height:6px; background:var(--warn); }

/* an empty floor has nothing to count, tap or swipe to */
.st.is-empty .st-tray, .st.is-empty .st-hint-m, .st.is-empty .st-strip-w{ display:none; }

.st-chips{ display:flex; gap:6px; }

/* FLOOR PLAN: a tiny monochrome CRT */
.st-map{
  position:absolute; z-index:2; left:var(--s-3); bottom:var(--s-3);
  border:2px solid var(--line-1); border-radius:var(--r-2);
}
.st-map-c{ width:184px; height:130px; max-width:none; cursor:crosshair; }
.st-map-l{
  position:absolute; z-index:4; left:0; top:0; padding:3px 6px; pointer-events:none;
  background:var(--bg-screen); color:var(--tx-3); border-bottom-right-radius:var(--r-1);
}

.st-zoom{
  position:absolute; z-index:2; right:var(--s-3); bottom:var(--s-4);
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.st-zoom-row{ display:flex; gap:6px; }
.st-zoom .btn-icon{ font:700 20px/1 var(--f-mono); letter-spacing:0; }

/* engagement hint: informational, never in the way of a click */
.st-hint{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:40px; padding:6px var(--s-4); text-align:center; pointer-events:none;
  background:var(--bg-card); color:var(--tx-1);
  border:2px solid var(--sel); border-radius:var(--r-1);
  font:700 14px/1.3 var(--f-ui); letter-spacing:.06em; text-transform:uppercase;
  transition:opacity var(--d-2) linear;
}
.st-hint::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:var(--sel-wash); box-shadow:var(--glow-sel); opacity:0;
}
.st-hint.is-pulse::after{ animation:st-pulse 600ms var(--e-out) 1; }
@keyframes st-pulse{ 30%{ opacity:1; } to{ opacity:0; } }
.st.is-engaged .st-hint{ opacity:0; }

/* coin tray */
.st-tray{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-1);
  padding:var(--s-1); background:var(--bg-card);
  border:1px solid var(--line-2); border-radius:var(--r-2); box-shadow:0 2px 0 0 var(--shelf);
}
.st-tray > .demo{ margin:0 6px; }
.st-cell{
  display:flex; align-items:center; gap:var(--s-2); height:36px; padding:0 10px;
  background:var(--bg-screen); border:1px solid var(--line-1); border-radius:var(--r-1); white-space:nowrap;
}
.st-cell-n{ font-weight:700; font-size:15px; line-height:1; color:var(--tx-1); }
.st-cell-n.coin{ color:var(--coin); }

.st-enter, .st-strip-w{ display:none; }

/* ============ 900px and up: one framed unit ============ */
@media (min-width: 900px){
  .st-frame{
    height:clamp(440px, calc(100vh - var(--header-h) - 32px), 868px);
    height:clamp(440px, calc(100dvh - var(--header-h) - 32px), 868px);
    overflow:hidden; background:var(--bg-void);
    border:2px solid var(--line-1); border-radius:var(--r-stage);
  }
  /* The panel is a grid column. The switch is instant (no size transition),
     so the canvas is resized exactly once per open and once per close. */
  .st-frame.is-panel{ grid-template-columns:minmax(0, 1fr) var(--panel-w); }
  .st-frame:not(.is-panel) > .st-panel{ display:none !important; }
  .st-panel{ min-width:0; min-height:0; overflow:hidden; }

  .st-frame::after{
    content:""; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:18px;
    box-shadow:inset 0 0 0 2px var(--sel); opacity:0; transition:opacity var(--d-2) linear;
  }
  .st.is-engaged .st-frame::after{ opacity:1; }

  .st-main{ overflow:hidden; container:st / inline-size; }
  .st-slot{ position:absolute; left:0; right:0; top:var(--ticker-h); bottom:0; }

  .st-ticker{ position:absolute; z-index:1; left:0; right:0; top:0; }

  /* The Marquee covers the ticker row and the top of the canvas (the back
     wall in the default framing) and retracts like a roller sign. */
  .st-sign{
    position:absolute; z-index:4; left:0; right:0; top:0; height:var(--marquee-h); overflow:hidden;
    display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--s-5);
    padding:10px var(--s-5) 17px;
    background:var(--bg-card);
    transition:transform var(--d-3) var(--e-inout), opacity var(--d-3) var(--e-inout);
  }
  .st.is-rolled .st-sign{ transform:translateY(calc(var(--st-cover) * -1)); opacity:0; pointer-events:none; }
  .st-sign-l{ display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; }
  .st-sign-r{ display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:10px; min-width:0; }
  /* sized by the floor column (it narrows when the panel opens), one line */
  .st-h1{ font-size:clamp(34px, 3.8vw, 60px); font-size:clamp(34px, 5.2cqi, 60px); white-space:nowrap; }
  .st-lede{
    font-size:15px; line-height:1.35;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  }
  .st-bulbs{ position:absolute; left:0; right:0; bottom:0; }

  /* top tiles sit under the sign while it is down, and follow it up */
  .st-tl, .st-chips{ transition:transform var(--d-3) var(--e-inout); }
  .st:not(.is-rolled) .st-tl, .st:not(.is-rolled) .st-chips{ transform:translateY(var(--st-cover)); }
  /* the empty-floor card keeps to the middle of what the sign leaves showing */
  .st-empty-live{ transition:transform var(--d-3) var(--e-inout); }
  .st:not(.is-rolled) .st-empty-live{ transform:translate(-50%, calc(-50% + var(--st-cover) / 2)); }

  .st-chips{
    position:absolute; z-index:2; right:var(--s-3); top:calc(var(--ticker-h) + var(--s-3));
    flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 430px);
  }

  /* bottom-centre: hint over the tray, between the minimap and the zoom keys */
  .st-bc{
    position:absolute; z-index:2; left:212px; right:172px; bottom:var(--s-3);
    display:flex; flex-direction:column; align-items:center; gap:var(--s-2); pointer-events:none;
  }
  .st-bc > .st-tray{ pointer-events:auto; }
  .st-hint-m{ display:none; }

  /* the tray no longer fits one row beside the plan and the zoom keys: the
     sticker rides the tray's top edge and the cells tighten, so it holds one
     row for longer and wraps into two short ones after that */
  @container st (max-width: 1039px){
    .st-bc{ gap:var(--s-3); }
    .st-tray{ position:relative; }
    .st-tray > .demo{ position:absolute; z-index:1; left:var(--s-2); top:0; margin:0; transform:translateY(-50%) rotate(-2deg); }
    .st-cell{ height:30px; padding:0 var(--s-2); gap:6px; }
  }
  @container st (max-width: 999px){
    .st-keys{ display:none; }
    .st-cta{ flex-direction:column; align-items:stretch; gap:var(--s-2); }
  }
  /* a narrow floor (small window with the panel open): the plan gives way */
  @container st (max-width: 719px){
    .st-map{ display:none; }
    .st-bc{ left:var(--s-3); }
    .st-sticker-more{ display:none; }
    .st-chips{ max-width:calc(100% - 160px); }
  }
}

/* ============ below 900px: normal blocks ============ */
@media (max-width: 899px){
  .st{ margin:var(--s-4) var(--s-2) 0; }
  .st-frame{ display:block; }
  .st-main{ display:flex; flex-direction:column; gap:var(--s-3); }

  .st-sign{ padding:0 var(--s-1); }
  .st-sign-l{ display:flex; flex-direction:column; gap:var(--s-2); }
  .st-sign-r{ margin-top:var(--s-4); }
  .st-cta{ flex-direction:column; align-items:stretch; gap:var(--s-3); }
  .st-cta .btn{ width:100%; }
  .st-keys, .st-ticker, .st-hint-d{ display:none; }
  .st-bulbs{ margin-top:var(--s-4); border-radius:var(--r-1); }

  /* template chips: a scroller above the canvas */
  .st-chips{
    overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
    margin:0 calc(var(--s-2) * -1); padding:6px var(--s-2);
  }
  .st-chips::-webkit-scrollbar{ display:none; }

  .st-slot{ height:max(380px, 62vh); height:max(380px, 62dvh); }
  .st-view{ border:2px solid var(--line-1); border-radius:16px; }
  .st.is-engaged .st-view::after{ opacity:1; }

  .st-tl{ left:var(--s-2); top:var(--s-2); max-width:calc(100% - 2 * var(--s-2)); }
  /* above the middle: ENTER FLOOR and the plan hold the bottom of the box */
  .st-empty-live{ top:44%; gap:var(--s-3); padding:var(--s-4); }
  .st-empty-h{ font-size:26px; }
  .st-sticker::before{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
  .st-map{ left:var(--s-2); bottom:var(--s-2); }
  .st-map-c{ width:120px; height:86px; }
  .st-zoom{ right:var(--s-2); bottom:var(--s-3); }
  .st-zoom-row{ flex-direction:column; }

  .st-hint-m{
    position:absolute; z-index:2; left:var(--s-2); right:60px; bottom:106px;
    font-size:13px;
  }
  .st-enter{
    display:inline-flex; position:absolute; z-index:2; left:140px; right:60px; bottom:var(--s-3);
    width:fit-content; height:48px; margin:0 auto;
  }

  /* ENTER FLOOR: the canvas box leaves the flow and takes the screen. It
     stays under the cabinet sheet (--z-sheet) and over the tab bar. */
  .st.is-full .st-view{
    position:fixed; inset:0; height:100vh; height:100dvh; z-index:calc(var(--z-sheet) - 2);
    border:0; border-radius:0;
  }
  .st.is-full .st-canvas{ touch-action:none; }
  .st.is-full .st-hint-m{ display:none; }
  .st.is-full .st-tl{ top:calc(var(--s-2) + env(safe-area-inset-top, 0px)); left:calc(var(--s-2) + env(safe-area-inset-left, 0px)); }
  .st.is-full .st-map{ bottom:calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); left:calc(var(--s-2) + env(safe-area-inset-left, 0px)); }
  .st.is-full .st-zoom{ bottom:calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); right:calc(var(--s-2) + env(safe-area-inset-right, 0px)); }

  /* cabinet strip: centring a chip flies the camera there */
  .st-strip-w{ display:block; position:relative; margin:0 calc(var(--s-2) * -1); }
  .st-strip-w::before, .st-strip-w::after{
    content:""; position:absolute; z-index:1; top:0; bottom:0; width:40px; pointer-events:none;
  }
  .st-strip-w::before{ left:0; background:linear-gradient(to right, var(--bg-page), transparent); }
  .st-strip-w::after{ right:0; background:linear-gradient(to left, var(--bg-page), transparent); }
  .st-strip-l{ padding:0 var(--s-2); text-align:center; }
  .st-strip{
    position:relative; display:flex; gap:var(--s-2); overflow-x:auto; scrollbar-width:none;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    padding:10px calc(50% - 40px);
  }
  .st-strip::-webkit-scrollbar{ display:none; }
  .st-strip .cab-chip{ scroll-snap-align:center; height:32px; padding:0 var(--s-3) 0 var(--s-2); }
  .st-strip .cab-chip.is-at{ border-color:var(--line-2); background:var(--bg-card); }
  .st-strip .cab-chip.is-sel{ border-color:var(--sel); box-shadow:inset 0 0 0 1px var(--sel); }

  /* coin tray: 2 x 2 under the canvas, the sticker is its caption */
  .st-tray{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; padding:var(--s-2);
    justify-items:stretch;
  }
  .st-tray > .demo{ grid-column:1 / -1; justify-self:start; margin:0 0 2px 2px; }
  .st-cell{ height:44px; justify-content:space-between; }
}

@media (max-width: 559px){
  .st-sticker-more{ display:none; }
  /* the bulb strip is dropped for a static rule */
  .st-bulbs{ height:2px; background:var(--house); }
  .st-bulbs > i{ display:none; }
}

/* ---------- calm: explicit, per component ---------- */
:root[data-calm="1"] .st-sign, :root[data-calm="1"] .st-tl, :root[data-calm="1"] .st-chips, :root[data-calm="1"] .st-empty-live{ transition:none; }
:root[data-calm="1"] .st-hint.is-pulse::after{ animation:none; }
/* bulbs static and all lit */
:root[data-calm="1"] .st-bulbs > i{
  animation:none;
  background:radial-gradient(circle at 6px 50%, var(--house) 0 2.5px, transparent 3px) 0 0 / 12px 100%;
}
@media (prefers-reduced-motion: reduce){
  .st-sign, .st-tl, .st-chips, .st-empty-live{ transition:none; }
  .st-hint.is-pulse::after{ animation:none; }
  .st-bulbs > i{
    animation:none;
    background:radial-gradient(circle at 6px 50%, var(--house) 0 2.5px, transparent 3px) 0 0 / 12px 100%;
  }
}