/* ===========================================================================
   CONTRA
   Seen from inside a 16 bit console. Painted scenes, game surfaces,
   one accent taken from the fire in the title.

   Contents
     01  Tokens
     02  Reset and base
     03  The tube
     04  Layout primitives
     05  Scenes
     06  Idle sprites
     07  HUD
     08  Dialogue plate
     09  Stage titles
     10  Title screen menu
     11  The liquidity moment
     12  Scoreboard
     13  Route tracer
     14  Status screen: the receipts
     15  Stage 1  the title screen
     16  Stage 2  the code
     17  Beats, notices, ticker, quote
     18  Footer
     19  Buttons and copy controls
     20  Touch pad and the payoff
     21  Motion
     22  Breakpoints
   ======================================================================== */


/* --- 01  Tokens ---------------------------------------------------------- */

@font-face {
  font-family: 'Pixel';
  src: url('pixel.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Grotesk';
  src: url('grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Readout';
  src: url('mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette.
     Night and steel for structure, the title's fire for every accent, the
     bandana red for danger, cream for reading. The only greens in this file
     are the three jungle silhouettes in section 19: deep, desaturated, and
     never used for text, borders, glows or state. */
  --bg:        #06080a;
  --bg-2:      #090c0f;
  --panel:     #0d1013;
  --panel-2:   #12171c;
  --bezel:     #1e262c;
  --bezel-2:   #2f3a42;
  --ink:       #f0ebe0;
  --ink-2:     #a89f92;
  --ink-3:     #8a847a;
  --fire:      #ff5a1f;
  --fire-2:    #c4410f;
  --gold:      #ffc24a;
  --red:       #e8352b;
  --flash:     #fffaf0;

  /* Type */
  --f-pixel:   'Pixel', 'Courier New', monospace;
  --f-body:    'Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'Readout', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:      0.75rem;
  --t-sm:      0.875rem;
  --t-base:    1rem;
  --t-md:      1.25rem;
  --t-lg:      1.5625rem;
  --t-xl:      1.9531rem;
  --t-2xl:     2.4414rem;

  /* Spacing, 8 px scale. Nothing in this file uses a value off this scale. */
  --s-1:       0.25rem;
  --s-2:       0.5rem;
  --s-3:       0.75rem;
  --s-4:       1rem;
  --s-5:       1.5rem;
  --s-6:       2rem;
  --s-7:       3rem;
  --s-8:       4rem;
  --s-9:       6rem;
  --s-10:      8rem;

  /* Structure */
  --gut:       var(--s-4);
  --measure:   68ch;
  --max:       1120px;
  --radius:    2px;
  --hud-h:     40px;
  --frame:     0px;

  /* Motion. One curve, three durations. */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-1:       150ms;
  --d-2:       220ms;
  --d-3:       300ms;

  /* Elevation */
  --bevel:     inset 0 1px 0 rgba(255, 255, 255, 0.05),
               inset 0 -1px 0 rgba(0, 0, 0, 0.55);
  --lift:      0 1px 0 rgba(0, 0, 0, 0.6), 0 8px 24px -16px rgba(0, 0, 0, 0.9);
  --glow:      0 0 18px rgba(255, 90, 31, 0.32);
}


/* --- 02  Reset and base -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html.is-locked { overflow: hidden; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hud-h) + var(--frame) + var(--s-5));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  overflow-x: hidden;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: var(--fire); text-decoration-color: rgba(255, 90, 31, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--gold); text-decoration-color: currentColor; }

code, .mono { font-family: var(--f-mono); font-size: 0.92em; font-variant-ligatures: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 1px;
}

::selection { background: var(--fire); color: var(--bg); }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: calc(var(--hud-h) + var(--frame) + var(--s-2));
  z-index: 90;
  transform: translateY(-200px);
  padding: var(--s-3) var(--s-4);
  background: var(--fire);
  color: var(--bg);
  font-family: var(--f-pixel);
  font-size: 10px;
  text-decoration: none;
  transition: transform var(--d-2) var(--ease);
}
.skip:focus { transform: translateY(0); color: var(--bg); }

/* --- 03  The tube -------------------------------------------------------- */
/* One fixed stack, never per element: shadow mask, scanlines, bloom, the
   curve implied by corner falloff, and a console bezel on desktop. */

.tube {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  /* Promoted once. The tube never repaints while the page scrolls under it. */
  will-change: transform;
  transform: translateZ(0);
  contain: strict;
}

/* Aperture grille. A real one is three coloured subpixels; this one is drawn
   in luminance only, so the texture is there without introducing a hue the
   palette does not allow. */
.tube__mask {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255, 250, 240, 0.030) 0 1px,
    rgba(0, 0, 0, 0.045) 1px 3px);
  mix-blend-mode: overlay;
}

/* Scanlines, and the retrace band that runs when a stage changes. */
.tube__lines {
  position: absolute;
  inset: 0;
  background-image: url('scanlines.png');
  background-repeat: repeat;
  background-size: 4px 3px;
  image-rendering: pixelated;
}

.tube__retrace {
  position: absolute;
  inset-inline: 0;
  height: 22vh;
  top: 0;
  transform: translate3d(0, -22vh, 0);
  background: linear-gradient(180deg,
    rgba(255, 250, 240, 0) 0%,
    rgba(255, 250, 240, 0.05) 45%,
    rgba(255, 250, 240, 0.10) 50%,
    rgba(255, 250, 240, 0.05) 55%,
    rgba(255, 250, 240, 0) 100%);
  opacity: 0;
}
.tube__retrace[data-run='1'] { will-change: transform; animation: retrace 760ms linear; }

/* The glass: corners fall away, which reads as a curve without warping a
   single element underneath. */
.tube__glass {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.82) 100%),
    radial-gradient(60% 40% at 50% 8%,
      rgba(255, 250, 240, 0.045) 0%, rgba(255, 250, 240, 0) 70%);
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.6),
    inset 0 0 22px rgba(0, 0, 0, 0.8);
}

/* A phone has no bezel and no curve to imply, and the extra compositing
   layers cost more than they are worth on a small screen. */
@media (max-width: 37.49rem) {
  .tube__mask { display: none; }
  /* The idle sprites are positioned against a wide stage and land on top of
     the copy on a phone, so they stay on the desktop layout. */
  .idle { display: none; }
  .tube__glass {
    background: radial-gradient(130% 130% at 50% 50%,
      rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.38) 100%);
    box-shadow: none;
  }
}

/* Console bezel, desktop only. Dark moulded plastic with a lit power dot. */
.bezel { display: none; }

body { position: relative; }


/* --- 04  Layout primitives ----------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5);
}

.stack > * + * { margin-top: var(--s-4); }
.prose { max-width: var(--measure); }
.mono { font-family: var(--f-mono); }
.t-dim { color: var(--ink-2); }


/* --- 05  Scenes ---------------------------------------------------------- */
/* Painted at 320 by 180 and scaled by whole multiples, so the pixel grid
   survives. Never a photograph, never a gradient standing in for art. */

.stage {
  position: relative;
  padding-block: var(--s-9);
  isolation: isolate;
}

.scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.scene__art {
  position: absolute;
  inset-inline: -8%;
  inset-block: -12%;
  background-repeat: repeat-x;
  background-position: 50% 50%;
  background-size: 1280px 720px;
  image-rendering: pixelated;
  transform: translateZ(0);
}

/* Parallax is a scroll driven animation where the browser supports one, so
   no scroll handler runs and nothing reads layout. Two small offsets, and
   nothing at all on a phone or under reduced motion. */
@supports (animation-timeline: view()) {
  @media (min-width: 37.5rem) and (prefers-reduced-motion: no-preference) {
    .scene__art {
      will-change: transform;
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
.scene__art--jungle { background-image: url('bg-jungle.png'); }
.scene__art--fortress { background-image: url('bg-fortress.png'); }
.scene__art--lair { background-image: url('bg-lair.png'); }

/* The scene is set dressing, so it never competes with the copy. */
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 8, 10, 0.34) 0%,
    rgba(6, 8, 10, 0.62) 35%,
    rgba(6, 8, 10, 0.80) 100%);
}
.scene--light::after {
  background: linear-gradient(180deg,
    rgba(6, 8, 10, 0.22) 0%, rgba(6, 8, 10, 0.66) 100%);
}


/* --- 06  Idle sprites ---------------------------------------------------- */
/* One small thing breathes per stage. All frames, all steps(). */

.idle {
  position: absolute;
  z-index: -1;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Torch: a two frame flame on a bracket. */
.idle--torch {
  inset-block-start: 12%;
  inset-inline-end: 8%;
  width: 16px;
  height: 28px;
  background:
    linear-gradient(var(--fire), var(--fire)) 4px 0 / 8px 10px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 6px 2px / 4px 5px no-repeat,
    linear-gradient(#2f3a42, #2f3a42) 6px 10px / 4px 18px no-repeat;
  filter: drop-shadow(0 0 10px rgba(255, 90, 31, 0.55));
  animation: torch 380ms steps(2) infinite;
}

/* Fortress lamp: a rotating warning light, four frames. */
.idle--lamp {
  inset-block-start: 8%;
  inset-inline-start: 6%;
  width: 20px;
  height: 12px;
  background: linear-gradient(var(--red), var(--red)) 0 0 / 20px 12px no-repeat;
  animation: lamp 1.4s steps(4) infinite;
}

/* Lair eye: opens and closes on a slow four frame cycle. */
.idle--eye {
  inset-block-start: 22%;
  inset-inline-end: 14%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--red) 0 30%, #3d0d10 30% 60%, rgba(0, 0, 0, 0) 60%);
  animation: eye 2.8s steps(4) infinite;
}


/* --- 07  HUD ------------------------------------------------------------- */

.hud {
  position: fixed;
  inset-block-start: var(--frame);
  inset-inline: var(--frame);
  z-index: 60;
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-inline: var(--gut);
  background: linear-gradient(180deg, rgba(6, 8, 10, 0.96), rgba(6, 8, 10, 0.82));
  border-bottom: 2px solid var(--bezel-2);
  font-family: var(--f-pixel);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.hud__lives { display: flex; align-items: center; gap: var(--s-2); color: var(--fire); }
.hud__lives b { font-weight: 400; color: var(--ink-3); }
.hud__n {
  min-width: 2ch;
  color: var(--gold);
  text-shadow: var(--glow);
}
.hud__n[data-flicker='1'] { animation: flicker 420ms steps(2) 2; }

.hud__score { display: none; align-items: baseline; gap: var(--s-2); color: var(--ink-3); }
.hud__score b { font-weight: 400; }
.hud__v { color: var(--gold); font-feature-settings: 'tnum' 1; }

.hud__start {
  margin-inline-start: auto;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: var(--s-2);
  font: inherit;
  cursor: pointer;
  animation: attract 2.4s steps(2) infinite;
}
.hud__start:hover { color: var(--fire); }

.segs { display: flex; gap: 3px; opacity: 0; transition: opacity var(--d-3) var(--ease); }
.segs[data-on='1'] { opacity: 1; }
.segs[data-wobble='1'] { animation: wobble 320ms var(--ease); }
.segs i {
  width: 7px;
  height: 12px;
  background: var(--bezel-2);
  transition: background-color var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.segs i[data-lit='1'] { background: var(--fire); box-shadow: var(--glow); }

.trail {
  position: fixed;
  inset-block-start: calc(var(--hud-h) + var(--frame));
  inset-inline-start: var(--frame);
  z-index: 61;
  height: 3px;
  width: calc(100% - var(--frame) * 2);
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--fire-2), var(--fire) 60%, var(--gold));
}
@supports (animation-timeline: scroll()) {
  .trail {
    transform: scaleX(0);
    animation: trail linear both;
    animation-timeline: scroll(root block);
  }
}

/* Lives as pips: an original soldier silhouette. */
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i {
  width: 6px;
  height: 10px;
  background: var(--fire);
  clip-path: polygon(38% 0, 62% 0, 62% 22%, 100% 34%, 100% 52%, 68% 44%, 68% 66%, 86% 100%, 62% 100%, 50% 74%, 38% 100%, 14% 100%, 32% 66%, 32% 44%, 0 52%, 0 34%, 38% 22%);
}
.pips--big {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  max-width: 22rem;
  margin: var(--s-5) auto 0;
}
.pips--big i { width: 9px; height: 15px; background: var(--gold); }


/* --- 08  Dialogue plate -------------------------------------------------- */
/* The classic text window: chunky double border, cream text, one typewriter
   pass per stage, skippable by clicking it or pressing any key. */

.dlg {
  position: relative;
  padding: var(--s-5);
  background: #0a0c10;
  border: 4px solid var(--ink);
  box-shadow:
    0 0 0 4px #0a0c10,
    0 0 0 6px var(--bezel-2),
    0 8px 0 6px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.8;
  cursor: default;
}
.dlg + .dlg { margin-top: var(--s-6); }
.dlg__speaker {
  position: absolute;
  inset-block-start: calc(var(--s-4) * -1);
  inset-inline-start: var(--s-4);
  padding: 0 var(--s-2);
  background: #0a0c10;
  font-family: var(--f-pixel);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--fire);
}
.dlg p + p { margin-top: var(--s-4); }
.dlg[data-typing='1'] { cursor: pointer; }
.dlg__more {
  display: block;
  margin-top: var(--s-3);
  text-align: end;
  color: var(--fire);
  font-family: var(--f-pixel);
  font-size: 9px;
  animation: attract 900ms steps(2) infinite;
}
.dlg__more[hidden] { display: none; }


/* --- 09  Stage titles ---------------------------------------------------- */

.stage__head { margin-bottom: var(--s-7); position: relative; }
.kicker {
  font-family: var(--f-pixel);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.stage__title {
  margin-top: var(--s-4);
  font-family: var(--f-pixel);
  font-size: clamp(1rem, 4.6vw, var(--t-lg));
  line-height: 1.45;
  color: var(--flash);
  text-shadow: 3px 3px 0 var(--fire-2), 0 0 24px rgba(255, 90, 31, 0.3);
}
.stage__sub { margin-top: var(--s-4); max-width: var(--measure); color: var(--ink-2); }

/* Level intro: a black slate wipes off the title. */
.slate::after {
  content: '';
  position: absolute;
  inset: -6px -12px;
  will-change: transform;
  background: var(--bg);
  border-left: 4px solid var(--fire);
  transform-origin: 100% 50%;
  transform: scaleX(1);
  transition: transform 420ms var(--ease);
}
.slate[data-seen='1']::after { transform: scaleX(0); will-change: auto; }


/* --- 10  Title screen menu ----------------------------------------------- */

.menu { display: grid; gap: var(--s-2); max-width: 26rem; }
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-2);
  font-family: var(--f-pixel);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  background: rgba(10, 12, 16, 0.72);
  border: 2px solid transparent;
  border-left-color: var(--bezel-2);
  transition: color var(--d-1) var(--ease),
              border-color var(--d-1) var(--ease),
              background-color var(--d-1) var(--ease);
}
.menu__item::before {
  content: '\25B6';
  width: 1em;
  color: var(--fire);
  opacity: 0;
  transition: opacity var(--d-1) var(--ease);
}
.menu__item:hover,
.menu__item:focus-visible {
  color: var(--gold);
  border-color: var(--fire-2);
  background: rgba(255, 90, 31, 0.07);
}
.menu__item:hover::before,
.menu__item:focus-visible::before { opacity: 1; animation: attract 700ms steps(2) infinite; }
.menu__slot {
  font-size: 9px;
  color: var(--ink-3);
  min-width: 2.5em;
}
.menu__note { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--ink-3); }


/* --- 11  The liquidity moment -------------------------------------------- */

.hold { margin-top: var(--s-7); max-width: 34rem; }
.hold__cry {
  font-family: var(--f-pixel);
  font-size: clamp(0.8125rem, 3.4vw, var(--t-md));
  line-height: 1.6;
  color: var(--flash);
  text-shadow: 3px 3px 0 var(--fire-2);
  margin-bottom: var(--s-4);
}
.hold__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  min-height: 52px;
  overflow: hidden;
  font-family: var(--f-pixel);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--flash);
  background: linear-gradient(180deg, var(--fire), var(--fire-2));
  border: 3px solid var(--gold);
  box-shadow: 5px 5px 0 rgba(196, 65, 15, 0.45);
  transition: transform var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}
.hold__btn:hover, .hold__btn:focus-visible { color: var(--flash); }
.hold__btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
/* Hover fires a spread shot across the face of the button. */
.hold__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 250, 240, 0.95) 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 34% 28%, rgba(255, 250, 240, 0.9) 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 56% 70%, rgba(255, 250, 240, 0.9) 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 78% 36%, rgba(255, 250, 240, 0.85) 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 94% 62%, rgba(255, 250, 240, 0.8) 0 2px, rgba(0, 0, 0, 0) 3px);
  opacity: 0;
  transform: translateX(-30%);
  pointer-events: none;
}
.hold__btn:hover::after,
.hold__btn:focus-visible::after { animation: spreadshot 520ms steps(5) 1; }
.hold__note { margin-top: var(--s-4); font-size: var(--t-xs); line-height: 1.8; color: var(--ink-2); }


/* --- 12  Scoreboard ------------------------------------------------------ */
/* The pool numbers read as a stage score, not as dashboard tiles. */

.score {
  background: rgba(10, 12, 16, 0.82);
  border: 3px solid var(--bezel-2);
  box-shadow: inset 0 0 0 2px #0a0c10;
}
.score__hd {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--bezel-2);
  font-family: var(--f-pixel);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.score__hd span:last-child { color: var(--ink-3); }
.score__list { padding: var(--s-3) var(--s-4) var(--s-4); }
.score__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-2);
}
.score__k {
  font-family: var(--f-pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.score__dots {
  flex: 1 1 auto;
  height: 1px;
  min-width: var(--s-4);
  background-image: linear-gradient(90deg, var(--bezel-2) 0 2px, rgba(0, 0, 0, 0) 2px 5px);
  background-size: 5px 1px;
  transform: translateY(-3px);
}
.score__v {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--gold);
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
.score__v[data-state='err'] { color: var(--ink-3); }
.score__row[data-sweep='1'] .score__v { animation: flicker 220ms steps(2) 2; }

.chart {
  /* A phone gets a tall frame: the embed is unreadable in a letterbox.
     Height is set directly rather than through aspect-ratio, which would
     derive the width from it and push the panel past the viewport. */
  width: 100%;
  max-width: 100%;
  height: 70vh;
  min-height: 24rem;
  background: #0a0c10;
  border: 3px solid var(--bezel-2);
  box-shadow: inset 0 0 0 2px #0a0c10;
}
.chart iframe { display: block; width: 100%; height: 100%; border: 0; }
.chart__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
}

.feed { max-height: 16rem; overflow-y: auto; padding: var(--s-2) var(--s-4) var(--s-4); }
.feed__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
}
.feed__amt { color: var(--gold); font-feature-settings: 'tnum' 1; }
.feed__to { color: var(--ink-3); margin-inline-start: var(--s-3); }
.feed__t { color: var(--ink-2); white-space: nowrap; }
.feed__empty { padding: var(--s-4) 0; color: var(--ink-3); font-size: var(--t-sm); }


/* --- 13  Route tracer ---------------------------------------------------- */

.route { position: relative; height: 80px; margin-bottom: var(--s-7); }
.route__svg { width: 100%; height: 100%; display: block; }
.route__line { fill: none; stroke: var(--bezel-2); stroke-width: 2; }
.route__node {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: var(--panel-2);
  border: 2px solid var(--fire-2);
}
.route__node--a { left: 16.6%; }
.route__node--b { left: 50%; }
.route__node--c { left: 83.4%; }
.route__shot {
  position: absolute;
  top: 50%;
  left: 16.6%;
  width: 8px;
  height: 4px;
  transform: translate(-50%, -50%);
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold), -10px 0 12px -4px var(--fire);
}
.route[data-seen='1'] .route__shot { animation: fly 2.6s steps(20) forwards; }


/* --- 14  Status screen: the receipts ------------------------------------- */
/* A pause menu, not a table. No rules, a cursor on the active row. */

.status { width: 100%; border-collapse: collapse; }
.status thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.status tbody tr {
  transition: background-color var(--d-1) var(--ease);
}
.status tbody tr:hover { background: rgba(255, 90, 31, 0.06); }
.status th, .status td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4);
  border: 0;
}
.status tbody th {
  position: relative;
  width: 36%;
  padding-inline-start: var(--s-6);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink);
}
.status tbody th::before {
  content: '\25B6';
  position: absolute;
  inset-inline-start: var(--s-3);
  color: var(--fire);
  opacity: 0;
  transition: opacity var(--d-1) var(--ease);
}
.status tbody tr:hover th::before,
.status tbody tr:focus-within th::before { opacity: 1; }
.status td { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gold); }
.status td span { min-width: 0; word-break: break-all; line-height: 1.7; }
.status td.status__look { font-family: var(--f-body); white-space: nowrap; }
.status__val { display: flex; align-items: flex-start; gap: var(--s-2); }
.status__live { color: var(--fire); }
.status__live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: var(--s-2);
  vertical-align: middle;
  background: var(--fire);
  box-shadow: var(--glow);
  animation: pulse 2.4s steps(2) infinite;
}
.status__stamp { margin-top: var(--s-5); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); max-width: var(--measure); }
.status-scroll { overflow-x: auto; }

/* Under 600 px the three column layout produced a 7400 px tall table of
   broken strings. Each row becomes a small card instead: label, value,
   copy, link. */
@media (max-width: 37.49rem) {
  .status, .status tbody, .status tbody tr, .status tbody th, .status tbody td { display: block; width: 100%; }
  .status-scroll { overflow-x: visible; }
  .status tbody tr {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--bezel);
  }
  .status tbody tr:last-child { border-bottom: 0; }
  .status tbody tr:hover { background: none; }
  .status tbody th {
    width: auto;
    padding: 0 0 var(--s-3);
    color: var(--ink);
    font-size: var(--t-sm);
  }
  .status tbody th::before { content: none; }
  .status tbody td { padding: 0; }
  .status tbody td + td { padding-top: var(--s-3); }
  .status td span { word-break: break-all; }
  .status__val { flex-wrap: wrap; gap: var(--s-3); }
}

/* Rows rise into place one after another. */
.reveal-rows tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.reveal-rows[data-seen='1'] tbody tr { opacity: 1; transform: none; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(1)  { transition-delay: 0ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(2)  { transition-delay: 45ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(3)  { transition-delay: 90ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(4)  { transition-delay: 135ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(5)  { transition-delay: 180ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(6)  { transition-delay: 225ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(7)  { transition-delay: 270ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(8)  { transition-delay: 315ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(9)  { transition-delay: 360ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(10) { transition-delay: 405ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(11) { transition-delay: 450ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(12) { transition-delay: 495ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(13) { transition-delay: 540ms; }
.reveal-rows[data-seen='1'] tbody tr:nth-child(14) { transition-delay: 585ms; }


/* --- 15  Stage 1: the title screen --------------------------------------- */

.stage--title { margin-block-start: calc(var(--hud-h) + var(--frame)); padding-block: 0; }

.plate { position: relative; aspect-ratio: 16 / 9; background: var(--bg); }
.plate img { width: 100%; height: 100%; object-fit: cover; object-position: 96% 50%; }
.plate::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 8, 10, 0) 0%, var(--bg) 100%);
}

.stage__inner { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-8); }
.lede { max-width: 42ch; font-size: var(--t-md); line-height: 1.55; color: var(--ink); }

.ca { display: grid; gap: var(--s-3); max-width: 34rem; }
.ca__row { display: flex; align-items: center; gap: var(--s-3); }
.ca__mark { width: 44px; height: 44px; flex: none; border: 2px solid var(--bezel-2); image-rendering: pixelated; }
.ca__val {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--gold);
  word-break: break-all;
}
.ca__note { font-size: var(--t-xs); color: var(--ink-2); }

.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 2px solid var(--bezel-2);
  background: rgba(6, 8, 10, 0.86);
}
.strip__cell { padding: var(--s-4) var(--gut); border-inline-end: 1px solid var(--bezel); }
.strip__cell:nth-child(even) { border-inline-end: 0; }
.strip__cell:nth-child(-n+2) { border-block-end: 1px solid var(--bezel); }
.strip__k {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--f-pixel);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.strip__v { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--gold); }

.t-1, .t-2, .t-3, .t-4, .t-5 { opacity: 0; animation: settle var(--d-3) var(--ease) forwards; }
.t-2, .t-3, .t-4, .t-5 { transform: translateY(10px); }
.t-1 { animation-delay: 0ms; }
.t-2 { animation-delay: 320ms; }
.t-3 { animation-delay: 460ms; }
.t-4 { animation-delay: 700ms; }
.t-5 { animation-delay: 860ms; }


/* --- 16  Stage 2: the code ----------------------------------------------- */

.stage--code { text-align: center; overflow: hidden; }
.code { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3); }
.code__g {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--f-mono);
  font-size: var(--t-md);
  color: var(--gold);
  background: rgba(10, 12, 16, 0.8);
  border: 2px solid var(--bezel-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.code__g--ab { font-family: var(--f-pixel); font-size: var(--t-xs); color: var(--red); }
.reveal-stagger[data-seen='1'] .code__g { opacity: 1; transform: none; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(8) { transition-delay: 630ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(9) { transition-delay: 720ms; }
.reveal-stagger[data-seen='1'] .code__g:nth-child(10) { transition-delay: 810ms; }

.code__stage { position: relative; margin-top: var(--s-6); }
.code__burst { position: absolute; inset: -40% -10%; width: 120%; height: 180%; pointer-events: none; }
.code__out {
  position: relative;
  font-family: var(--f-pixel);
  font-size: clamp(1.5rem, 8vw, var(--t-2xl));
  line-height: 1.3;
  color: var(--flash);
  text-shadow: 4px 4px 0 var(--fire-2);
  transition-delay: 900ms;
}
.code__tie { margin-top: var(--s-6); margin-inline: auto; max-width: 46ch; }

/* The only shake left is the one shot on the payoff overlay. */
.egg__screen.shake { animation: power-on 680ms var(--ease) forwards, shake 360ms steps(2) 2; }


/* --- 17  Beats, notices, ticker, quote ----------------------------------- */

.beats { display: grid; gap: var(--s-5); }
.beat__n {
  font-family: var(--f-pixel);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-bottom: var(--s-3);
}
.beat__p { color: var(--ink); font-size: var(--t-sm); line-height: 1.8; }
.prose > p { text-shadow: 0 1px 3px rgba(6, 8, 10, 0.9); }

.notice {
  padding: var(--s-4);
  background: rgba(10, 12, 16, 0.82);
  border: 2px solid var(--bezel-2);
  border-left: 5px solid var(--gold);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.8;
}
.notice strong { color: var(--gold); font-weight: 600; }
.notice--warn { border-left-color: var(--red); }
.notice--warn strong { color: var(--red); }

.ticker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-4);
  background: rgba(10, 12, 16, 0.82);
  border: 3px solid var(--bezel-2);
}
.ticker__ex {
  font-family: var(--f-pixel);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--bg);
  background: var(--ink-2);
  padding: var(--s-1) var(--s-2);
}
.ticker__sym { font-family: var(--f-mono); font-size: var(--t-md); color: var(--ink); letter-spacing: 0.06em; }
.ticker__px { font-family: var(--f-mono); font-size: var(--t-md); color: var(--gold); font-feature-settings: 'tnum' 1; }
.ticker__note { font-size: var(--t-xs); color: var(--ink-3); }

.pull {
  margin: var(--s-7) 0 0;
  padding-left: var(--s-5);
  border-left: 5px solid var(--fire);
  font-family: var(--f-pixel);
  font-size: clamp(0.875rem, 3.8vw, var(--t-md));
  line-height: 1.7;
  color: var(--flash);
}
.pull cite {
  display: block;
  margin-top: var(--s-4);
  font: 400 var(--t-xs) / 1.6 var(--f-mono);
  font-style: normal;
  color: var(--ink-3);
}

.fineprint { margin-top: var(--s-5); font-size: var(--t-xs); color: var(--ink-3); max-width: var(--measure); }
.live { margin-top: var(--s-7); }
.live > * { grid-column: 1 / -1; }


/* --- 18  Footer ---------------------------------------------------------- */

.foot { position: relative; padding-block: var(--s-8); border-top: 2px solid var(--bezel-2); }
.foot__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.foot__mark { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.foot__ca { min-width: 0; flex: 1 1 auto; }
.foot__ca .kicker { margin-bottom: var(--s-2); }
.foot__prompt {
  font-family: var(--f-pixel);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  animation: attract 2.4s steps(2) infinite;
}
.foot__note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }

.hint {
  margin-inline-start: var(--s-2);
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  vertical-align: middle;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  background: transparent;
  border: 2px solid var(--bezel-2);
  cursor: pointer;
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.hint:hover { color: var(--fire); border-color: var(--fire-2); }
.hint-line { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gold); }
.hint-line[hidden] { display: none; }


/* --- 19  Buttons and copy controls --------------------------------------- */

.btn {
  --btn: var(--fire);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  min-height: 48px;
  font-family: var(--f-pixel);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--btn);
  background: rgba(10, 12, 16, 0.85);
  border: 3px solid var(--btn);
  cursor: pointer;
  transition: transform var(--d-1) var(--ease),
              box-shadow var(--d-1) var(--ease),
              background-color var(--d-1) var(--ease);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--btn) 35%, transparent);
}
.btn:hover { background: color-mix(in srgb, var(--btn) 14%, rgba(10, 12, 16, 0.85)); color: var(--btn); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.btn--ghost { --btn: var(--ink-2); font-size: 9px; padding: var(--s-3) var(--s-4); min-height: 40px; }

.copy {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-pixel);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: rgba(10, 12, 16, 0.85);
  border: 2px solid var(--bezel-2);
  cursor: pointer;
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}
.copy:hover { color: var(--gold); border-color: var(--fire-2); }
.copy[data-done='1'] { color: var(--bg); background: var(--fire); border-color: var(--fire); }


/* --- 20  Touch pad and the payoff ---------------------------------------- */

.hud-pad {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline-end: var(--s-4);
  z-index: 62;
  display: none;
  padding: var(--s-3);
  background: rgba(10, 12, 16, 0.94);
  border: 2px solid var(--bezel-2);
}
.hud-pad[data-on='1'] { display: block; animation: fade-in var(--d-3) var(--ease); }
.hud-pad__grid { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); gap: 2px; }
.pad {
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--fire);
  border: 2px solid var(--bezel-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  cursor: pointer;
  touch-action: manipulation;
}
.pad:active { background: var(--fire); color: var(--bg); }
.pad--up { grid-area: 1 / 2; }
.pad--left { grid-area: 2 / 1; }
.pad--right { grid-area: 2 / 3; }
.pad--down { grid-area: 3 / 2; }
.hud-pad__ab { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.pad--ab { width: 40px; height: 40px; border-radius: 50%; color: var(--red); font-family: var(--f-pixel); font-size: 9px; }
.pad--ab:active { background: var(--red); color: var(--bg); }

.egg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--gut); text-align: center; }
.egg[hidden] { display: none; }
.egg__screen {
  position: relative;
  width: 100%;
  max-width: 44rem;
  padding: var(--s-8) var(--s-5);
  background: #06070a;
  border: 4px solid var(--bezel-2);
  box-shadow: 0 0 0 100vmax #06070a, 0 0 80px rgba(255, 90, 31, 0.12);
  transform: scaleY(0.004) scaleX(0.6);
  opacity: 0;
  animation: power-on 680ms var(--ease) forwards;
}
.egg__burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.egg__big {
  position: relative;
  font-family: var(--f-pixel);
  font-size: clamp(1.5rem, 9vw, var(--t-2xl));
  line-height: 1.3;
  color: var(--flash);
  text-shadow: 4px 4px 0 var(--fire-2), 0 0 34px rgba(255, 90, 31, 0.4);
}
.egg__count { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s-5); margin-top: var(--s-6); }
.egg__mark { width: 6rem; height: 6rem; image-rendering: pixelated; clip-path: inset(0 0 100% 0); animation: draw-in 900ms 300ms var(--ease) forwards; }
.egg__n { font-family: var(--f-pixel); font-size: clamp(1.75rem, 10vw, 3rem); color: var(--gold); font-feature-settings: 'tnum' 1; }
.egg__n[data-tick='1'] { animation: flicker 90ms steps(2); }
.egg__seq { position: relative; margin-top: var(--s-6); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.egg__tie { position: relative; margin-top: var(--s-5); margin-inline: auto; max-width: 40ch; font-size: var(--t-sm); color: var(--ink-2); }
.egg__actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-7); }


/* --- 21  Motion ---------------------------------------------------------- */

@keyframes attract  { 50% { opacity: 0.25; } }
@keyframes flicker  { 50% { opacity: 0.3; } }
@keyframes pulse    { 50% { opacity: 0.25; } }
@keyframes fade-in  { from { opacity: 0; transform: translateY(6px); } }
@keyframes settle   { to { opacity: 1; transform: none; } }
@keyframes wobble   { 25% { transform: translateX(-3px) skewX(6deg); } 75% { transform: translateX(3px) skewX(-6deg); } }
@keyframes draw-in  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fly      { from { left: 16.6%; } to { left: 83.4%; } }
@keyframes drift    { from { transform: translate3d(0, -14px, 0); } to { transform: translate3d(0, 14px, 0); } }
@keyframes trail    { to { transform: scaleX(1); } }
@keyframes retrace  { from { transform: translate3d(0, -22vh, 0); opacity: 1; } to { transform: translate3d(0, 100vh, 0); opacity: 1; } }
@keyframes torch    { 50% { transform: scaleY(0.82) translateY(2px); filter: drop-shadow(0 0 6px rgba(255, 194, 74, 0.6)); } }
@keyframes lamp     { 0% { opacity: 1; transform: scaleX(1); } 25% { opacity: 0.35; transform: scaleX(0.4); } 50% { opacity: 0.15; transform: scaleX(0.1); } 75% { opacity: 0.35; transform: scaleX(0.4); } }
@keyframes eye      { 0% { transform: scaleY(1); } 25% { transform: scaleY(0.55); } 50% { transform: scaleY(0.12); } 75% { transform: scaleY(0.55); } }
@keyframes spreadshot { from { opacity: 1; transform: translateX(-30%); } to { opacity: 0; transform: translateX(30%); } }
@keyframes shake    { 0%, 100% { translate: 0 0; } 25% { translate: -3px 2px; } 50% { translate: 2px -2px; } 75% { translate: -1px -1px; } }
@keyframes power-on {
  0%   { transform: scaleY(0.004) scaleX(0.6); opacity: 0; }
  32%  { transform: scaleY(0.004) scaleX(1); opacity: 1; }
  100% { transform: scaleY(1) scaleX(1); opacity: 1; }
}

.reveal, .reveal-stagger, .reveal-rows, .route {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.reveal[data-seen='1'], .reveal-stagger[data-seen='1'],
.reveal-rows[data-seen='1'], .route[data-seen='1'] { opacity: 1; transform: none; }


/* --- 22  Breakpoints ----------------------------------------------------- */

@media (min-width: 40rem) {
  :root { --gut: var(--s-5); }

  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip__cell:nth-child(even) { border-inline-end: 1px solid var(--bezel); }
  .strip__cell:last-child { border-inline-end: 0; }
  .strip__cell:nth-child(-n+2) { border-block-end: 0; }
  .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .code__g { width: 3rem; height: 3rem; font-size: var(--t-lg); }
  .plate { aspect-ratio: 1600 / 533; }
  .plate img { object-position: 50% 50%; }
  .hud__score { display: flex; }
  .dlg { padding: var(--s-6); font-size: var(--t-base); }
  .chart { aspect-ratio: 16 / 11; height: auto; min-height: 0; }
}

@media (min-width: 64rem) {
  :root { --gut: var(--s-6); }

  .stage { padding-block: var(--s-10); }
  .stage--title { padding-block: 0; }

  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
  .live > .col-7 { grid-column: span 7; }
  .live > .col-5 { grid-column: span 5; }
  .live > .col-12 { grid-column: span 12; }

  .stage__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--s-7); }
  .stage__inner .kicker { grid-column: 1 / -1; }
  .stage__inner .lede { grid-row: span 4; align-self: start; }

  .status tbody th { width: 32%; }

  /* The console bezel: moulded plastic around the picture, power light on.
     --frame is what it covers, so the fixed chrome can sit inside it. */
  :root { --frame: 14px; }

  .bezel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 71;
    pointer-events: none;
    border: 14px solid #0b0d10;
    box-shadow:
      inset 0 0 0 2px #05070a,
      inset 0 0 0 3px #1a1f25,
      inset 0 0 26px rgba(0, 0, 0, 0.9),
      0 0 0 2px #05070a;
  }
  .bezel::after {
    content: '';
    position: absolute;
    inset-block-end: 3px;
    inset-inline-end: 22px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fire);
    box-shadow: 0 0 8px var(--fire);
  }
}

/* Reduced motion: every animated selector is named rather than swept up by a
   universal rule, so no override here has to shout to win the cascade. The
   content never changes, only the movement does. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .btn, .copy, .skip, .segs, .hud__n, .hint, .code__g, .menu__item,
  .status tbody tr, .status tbody th::before, .hold__btn { transition: none; }

  .hud__start,
  .foot__prompt,
  .dlg__more,
  .hud__n[data-flicker='1'],
  .segs[data-wobble='1'],
  .hud-pad[data-on='1'],
  .status__live::before,
  .egg__n[data-tick='1'],
  .idle--torch, .idle--lamp, .idle--eye,
  .menu__item:hover::before,
  .hold__btn:hover::after,
  .hold__btn:focus-visible::after,
  .tube__retrace[data-run='1'],
  .route[data-seen='1'] .route__shot { animation: none; }

  .scene__art { transform: none; }
  .route__shot { left: 83.4%; }
  .egg__screen.shake { animation: none; }
  .t-1, .t-2, .t-3, .t-4, .t-5 { animation: none; opacity: 1; transform: none; }
  .egg__screen { animation: none; transform: none; opacity: 1; }
  .egg__mark { animation: none; clip-path: none; }
  .slate::after { transition: none; transform: scaleX(0); }
  .trail { transition: none; }

  .reveal, .reveal-stagger, .reveal-rows, .route,
  .code__g, .reveal-rows tbody tr { opacity: 1; transform: none; transition: none; }
}