/* ═══════════════════════════════════════════════════════════════════════
   DASH-ON — game.jonahtebaa.com
   Brand: Dr. Jonah Tebaa · "Tech-Thriller Oracle"
   Tokens are verbatim from game_ui_spec.md §2. Never introduce a hue
   that is not defined here. Three hues on screen, maximum.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts (self-hosted, subset to latin + the punctuation we use) ── */
@font-face{font-family:'Montserrat';src:url('vendor/montserrat-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('vendor/montserrat-900.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('vendor/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('vendor/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
/* metric-matched fallback so the score never reflows on font swap */
@font-face{font-family:'FB-Inter';src:local('Arial'),local('Helvetica'),local('Roboto');
  size-adjust:107%;ascent-override:96%;descent-override:24%;line-gap-override:0%}

:root{
  /* ── 2.1 BRAND (production values — verbatim) ───────────────────── */
  --bg-primary:        #0a1a1f;
  --bg-deep:           #060f12;
  --accent-cyan:       #00e5d4;
  --accent-orange:     #f05a1a;
  --text-primary:      #ffffff;
  --text-secondary:    #a0c4c0;
  --text-muted:        #5a8a84;

  --accent-cyan-rgb:   0, 229, 212;
  --accent-orange-rgb: 240, 90, 26;
  --bg-deep-rgb:       6, 15, 18;

  /* ── 2.2 CYAN OPACITY LADDER ───────────────────────────────────── */
  --cy-03: rgba(var(--accent-cyan-rgb), 0.03);
  --cy-06: rgba(var(--accent-cyan-rgb), 0.06);
  --cy-08: rgba(var(--accent-cyan-rgb), 0.08);
  --cy-12: rgba(var(--accent-cyan-rgb), 0.12);
  --cy-18: rgba(var(--accent-cyan-rgb), 0.18);
  --cy-25: rgba(var(--accent-cyan-rgb), 0.25);
  --cy-35: rgba(var(--accent-cyan-rgb), 0.35);
  --cy-45: rgba(var(--accent-cyan-rgb), 0.45);
  --cy-60: rgba(var(--accent-cyan-rgb), 0.60);
  --or-08: rgba(var(--accent-orange-rgb), 0.08);
  --or-18: rgba(var(--accent-orange-rgb), 0.18);
  --or-35: rgba(var(--accent-orange-rgb), 0.35);

  /* ── 2.3 GLASS ─────────────────────────────────────────────────── */
  --glass-bg:           rgba(var(--accent-cyan-rgb), 0.03);
  --glass-border:       rgba(var(--accent-cyan-rgb), 0.08);
  --glass-bg-hover:     rgba(var(--accent-cyan-rgb), 0.06);
  --glass-border-hover: rgba(var(--accent-cyan-rgb), 0.18);
  --glass-blur:         blur(14px) saturate(120%);
  --glass-solid:        #0d2026;

  /* ── 2.4 GAME SEMANTICS ────────────────────────────────────────── */
  --danger:      #ff3b30;
  --danger-rgb:  255, 59, 48;
  --danger-deep: #7a1a14;
  --ok:          var(--accent-cyan);   /* NO GREEN IN THIS SYSTEM */
  --warn:        var(--accent-orange);

  --hazard:       var(--accent-orange);
  --hazard-core:  #ffd9c4;
  --hazard-fill:  rgba(var(--accent-orange-rgb), 0.10);
  --terrain-edge: var(--accent-cyan);
  --terrain-fill: rgba(var(--bg-deep-rgb), 0.92);

  --ink-on-bright: #060f12;

  /* ── 2.5 RANK METALS ───────────────────────────────────────────── */
  --rank-1: #ffc861;  --rank-1-dark: #b8862c;
  --rank-2: #c9dedb;  --rank-2-dark: #7e9a97;
  --rank-3: #d98a52;  --rank-3-dark: #8f5227;

  /* ── 2.6 GLOW SYSTEM — always layered, never a single blob ─────── */
  --glow-cyan-sm: 0 0 0 1px rgba(var(--accent-cyan-rgb), .30),
                  0 0 18px -6px rgba(var(--accent-cyan-rgb), .40);
  --glow-cyan-md: 0 0 0 1px rgba(var(--accent-cyan-rgb), .35),
                  0 8px 24px -8px rgba(var(--accent-cyan-rgb), .45),
                  0 0 60px -20px rgba(var(--accent-cyan-rgb), .50);
  --glow-cyan-lg: 0 0 0 1px rgba(var(--accent-cyan-rgb), .45),
                  0 12px 40px -10px rgba(var(--accent-cyan-rgb), .55),
                  0 0 110px -30px rgba(var(--accent-cyan-rgb), .60);
  --glow-orange:  0 0 0 1px rgba(var(--accent-orange-rgb), .40),
                  0 8px 28px -10px rgba(var(--accent-orange-rgb), .50);
  --glow-danger:  0 0 0 1px rgba(var(--danger-rgb), .45),
                  0 0 40px -12px rgba(var(--danger-rgb), .55);
  --glow-gold:    0 0 0 1px rgba(255, 200, 97, .45),
                  0 0 80px -20px rgba(255, 200, 97, .55);

  --hud-text-glow: 0 0 1px rgba(var(--bg-deep-rgb), .9),
                   0 0 20px rgba(var(--accent-cyan-rgb), .35);
  --hud-scrim-top: linear-gradient(180deg,
                     rgba(var(--bg-deep-rgb), .82) 0%,
                     rgba(var(--bg-deep-rgb), .55) 45%,
                     rgba(var(--bg-deep-rgb), 0) 100%);
  --hud-scrim-bot: linear-gradient(0deg,
                     rgba(var(--bg-deep-rgb), .70) 0%,
                     rgba(var(--bg-deep-rgb), 0) 100%);

  /* ── 2.7 RADII (exactly five) ──────────────────────────────────── */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
  --r-pill: 999px;

  /* ── 2.8 MOTION — durations + eases, shared with js/ui.js ───────── */
  --m-instant:   90ms;  --m-fast:     140ms; --m-base:     220ms;
  --m-slow:     340ms;  --m-cinematic:900ms; --m-ambient: 6000ms;
  --m-exit-fast:100ms;  --m-exit-base:150ms; --m-exit-slow:230ms;

  --e-entrance: cubic-bezier(0.05, 0.7, 0.1, 1);
  --e-exit:     cubic-bezier(0.3, 0, 1, 1);
  --e-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --e-impact:   cubic-bezier(0.19, 1, 0.22, 1);
  --e-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --e-ambient:  cubic-bezier(0.37, 0, 0.63, 1);

  /* ── 2.9 Z-INDEX (only these six values exist) ─────────────────── */
  --z-canvas: 0; --z-hud: 10; --z-overlay: 20;
  --z-modal: 30; --z-toast: 40; --z-focus: 50;

  /* ── 2.10 SAFE AREAS + LAYOUT ──────────────────────────────────── */
  --sa-t: env(safe-area-inset-top,    0px);
  --sa-r: env(safe-area-inset-right,  0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left,   0px);

  --hud-top:     calc(var(--sa-t) + 12px);
  --thumb-pad:   calc(var(--sa-b) + 20px);
  --gutter:      clamp(16px, 4.5vw, 32px);
  --container:   1200px;
  --tap-min:     48px;
  --tap-primary: 56px;

  /* ── 2.11 FONTS ────────────────────────────────────────────────── */
  --font-display: 'Montserrat', 'FB-Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'FB-Inter', system-ui, -apple-system, sans-serif;

  /* ── 3.1 TYPE SCALE — fluid, 375px → 1280px ────────────────────── */
  --fs-hero-1:      clamp(2.125rem, 1.35rem + 3.30vw, 4.00rem);
  --fs-hero-2:      clamp(2.500rem, 1.40rem + 4.70vw, 5.00rem);
  --fs-h1:          clamp(1.750rem, 1.20rem + 2.34vw, 2.75rem);
  --fs-h2:          clamp(1.375rem, 1.05rem + 1.38vw, 2.00rem);
  --fs-h3:          clamp(1.125rem, 1.00rem + 0.53vw, 1.375rem);
  --fs-score:       clamp(1.750rem, 1.10rem + 2.77vw, 3.00rem);
  --fs-score-final: clamp(3.250rem, 2.00rem + 5.32vw, 5.50rem);
  --fs-otp:         clamp(1.500rem, 1.20rem + 1.28vw, 1.875rem);
  --fs-lead:        clamp(1.000rem, 0.95rem + 0.21vw, 1.125rem);
  --fs-body:        clamp(0.9375rem, 0.91rem + 0.11vw, 1.0625rem);
  --fs-sm:    0.875rem;
  --fs-xs:    0.750rem;
  --fs-micro: 0.6875rem;

  --lh-hero: 0.95; --lh-display: 1.10; --lh-heading: 1.25;
  --lh-body: 1.55; --lh-tight: 1.20;

  --ls-hero:  -0.022em;
  --ls-tight: -0.012em;
  --ls-none:   0;
  --ls-micro:  0.140em;

  --fw-body: 400; --fw-body-md: 400; --fw-body-sb: 600;
  --fw-display: 800; --fw-display-max: 900;

  /* ── 3.2 SPACING — 4px base ────────────────────────────────────── */
  --s-0:0; --s-1:2px; --s-2:4px;  --s-3:8px;  --s-4:12px; --s-5:16px;
  --s-6:20px; --s-7:24px; --s-8:32px; --s-9:40px; --s-10:48px;
  --s-11:64px; --s-12:80px; --s-13:96px; --s-14:128px;
}

/* ── 2.12 CONDITIONAL OVERRIDES ─────────────────────────────────── */
@media (prefers-reduced-transparency: reduce){
  :root{ --glass-bg: var(--glass-solid); --glass-blur: none;
         --glass-bg-hover: #10262c; }
}
@media (prefers-contrast: more){
  :root{ --text-muted:#7fb0aa; --glass-border: var(--cy-25); --cy-08: var(--cy-18); }
}
:root[data-cvd="deut"], :root[data-cvd="tri"]{
  --hazard:#fff; --hazard-core:#fff;
  --hazard-fill:rgba(255,255,255,.14); --warn:#fff;
}
:root[data-cvd="tri"]{ --rank-1:#fff; --rank-3:#9fb3b0; }
:root[data-hazard-outline="on"]{ --hazard-core:#fff; }
@supports not (backdrop-filter: blur(2px)){
  :root{ --glass-bg: var(--glass-solid); }
}

/* ═══ RESET / PAGE PLUMBING (feel spec §8.1) ═══════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  position:fixed; inset:0;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
input,textarea{ user-select:text; -webkit-user-select:text; touch-action:auto; }
canvas{ display:block; touch-action:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer;
        -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── 8.4 focus ─────────────────────────────────────────────────── */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(var(--accent-cyan-rgb), .18);
  border-radius:inherit;
  z-index:var(--z-focus);
}

/* ═══ STAGE + CANVAS ══════════════════════════════════════════════ */
#stage{
  position:fixed; inset:0; overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 88%, rgba(var(--accent-cyan-rgb), .055), transparent 62%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-primary) 62%, #071317 100%);
}
#game{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  z-index:var(--z-canvas);
  image-rendering:auto;
  box-shadow:0 0 0 1px var(--cy-08), 0 0 90px -30px rgba(var(--accent-cyan-rgb), .45);
}
/* the letterbox never reads as a hard crop: the bloom continues into it */
#stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(100% 55% at 50% 62%, rgba(var(--accent-cyan-rgb), .05), transparent 70%);
}
#shakeWrap{ position:absolute; inset:0; will-change:transform; }
/* attract mode: the game plays itself behind the hero */
#game.attract{ opacity:.35; transition:opacity var(--m-slow) var(--e-emphasis); }
/* On laptop the attract layer is full-bleed, so it is masked back out from
   under the hero copy — the headline never loses contrast to it. */
@media (min-width:1024px){
  #game.attract{ opacity:.26;
    -webkit-mask-image:linear-gradient(90deg, transparent 4%, rgba(0,0,0,.30) 26%, #000 56%);
    mask-image:linear-gradient(90deg, transparent 4%, rgba(0,0,0,.30) 26%, #000 56%); }
}
body.playing #screens{ pointer-events:none; }
.bhead__back.is-spin .ph-arrows-clockwise{ animation:spin 600ms linear; }

/* ═══ TYPE PRIMITIVES ═════════════════════════════════════════════ */
.eyebrow{
  font:600 var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-micro); text-transform:uppercase;
  color:var(--accent-cyan); margin:0 0 var(--s-4);
}
.eyebrow--muted{ color:var(--text-muted); }
/* §9.15 — the two-line headline: white setup over cyan punchline. Never inverted. */
.hl{ margin:0; font-family:var(--font-display); line-height:var(--lh-hero);
     letter-spacing:var(--ls-hero); text-wrap:balance; }
.hl .a{ display:block; font-weight:var(--fw-display); color:var(--text-primary); }
.hl .b{ display:block; font-weight:var(--fw-display-max); color:var(--accent-cyan); }
.hl--sm{ font-size:var(--fs-h1); letter-spacing:var(--ls-tight); line-height:var(--lh-display); }
.lead{ margin:var(--s-4) 0 0; max-width:62ch; font-size:var(--fs-body);
       color:var(--text-secondary); line-height:var(--lh-body); }
.fine{ font-size:var(--fs-xs); color:var(--text-muted); line-height:1.45; }
.micro{ font:600 var(--fs-micro)/1 var(--font-body); letter-spacing:var(--ls-micro);
        text-transform:uppercase; color:var(--text-secondary); }

/* ═══ 4.1 BUTTONS ═════════════════════════════════════════════════ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-3); min-height:var(--tap-primary); padding:0 28px;
  border-radius:var(--r-md);
  font-family:var(--font-display); font-weight:var(--fw-display);
  font-size:16px; letter-spacing:var(--ls-micro); text-transform:uppercase;
  transition:transform var(--m-fast) var(--e-emphasis),
             background var(--m-instant) var(--e-emphasis),
             border-color var(--m-instant) var(--e-emphasis),
             color var(--m-instant) var(--e-emphasis);
  overflow:hidden; isolation:isolate;
}
.btn--block{ display:flex; width:100%; }
.btn .ph,.btn .ph-bold,.btn .ph-fill{ font-size:19px; transition:transform var(--m-fast) var(--e-emphasis); }
.btn:active .ph,.btn:active .ph-bold,.btn:active .ph-fill{ transform:translateY(1px); }

/* primary */
.btn--pri{
  background:linear-gradient(180deg,#00f0de 0%,#00c9ba 100%);
  color:var(--ink-on-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--glow-cyan-md);
}
/* glow lives on a pseudo so we animate opacity, never box-shadow (motion §8.1) */
.btn--pri::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:var(--glow-cyan-lg); opacity:0;
  transition:opacity var(--m-base) var(--e-emphasis);
}
.btn--pri::after{ /* rim sweep on release, §5.1 */
  content:''; position:absolute; top:0; bottom:0; width:45%; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:translateX(-160%); opacity:0; pointer-events:none;
}
.btn--pri.is-sweep::after{ animation:rimsweep 420ms var(--e-impact) forwards; }
@keyframes rimsweep{ from{transform:translateX(-160%);opacity:1}
                     to  {transform:translateX(320%); opacity:0} }
.btn--pri:active{ transform:scale(.96); }
.btn--pri:active::before{ opacity:0; }

/* secondary + ghost */
.btn--sec{
  background:var(--glass-bg); border:1px solid var(--cy-18); color:var(--accent-cyan);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.btn--sec:active{ transform:scale(.96); }
.btn--ghost{
  min-height:var(--tap-min); padding:0 var(--s-5);
  font-family:var(--font-body); font-weight:var(--fw-body-sb);
  font-size:15px; letter-spacing:var(--ls-none); text-transform:none;
  color:var(--text-secondary);
}
.btn--ghost:active{ transform:scale(.96); color:var(--accent-cyan); }
.btn--danger{ color:var(--danger); font-family:var(--font-body); font-weight:600;
  text-transform:none; letter-spacing:0; font-size:15px; padding:0; min-height:var(--tap-min); }
.btn--sm{ min-height:var(--tap-min); padding:0 var(--s-5); font-size:14px; }

@media (hover:hover) and (pointer:fine){
  .btn--pri:hover{ transform:translateY(-1px);
    background:linear-gradient(180deg,#0affe9 0%,#00d8c8 100%); }
  .btn--pri:hover::before{ opacity:1; }
  .btn--sec:hover{ background:var(--glass-bg-hover); border-color:var(--cy-35);
    box-shadow:var(--glow-cyan-sm); }
  .btn--ghost:hover{ color:var(--text-primary);
    text-decoration:underline; text-underline-offset:4px;
    text-decoration-color:var(--cy-25); }
}
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--cy-08); color:var(--text-muted); border-color:transparent;
  box-shadow:none; cursor:not-allowed; transform:none;
}
.btn[disabled]::before,.btn[disabled]::after{ display:none; }
.btn.is-nudge{ animation:nudge 340ms var(--e-emphasis); }
@keyframes nudge{ 0%{transform:translateX(0)} 22%{transform:translateX(-5px)}
  46%{transform:translateX(4px)} 70%{transform:translateX(-3px)} 100%{transform:translateX(0)} }

/* loading state — width is locked by js before the swap */
.btn .btn__label{ display:inline-flex; align-items:center; gap:var(--s-3); }
.btn .btn__spin{ display:none; }
.btn.is-busy .btn__label{ display:none; }
.btn.is-busy .btn__spin{ display:inline-flex; align-items:center; }
.btn.is-busy .ph-spinner-gap{ animation:spin 700ms linear infinite; font-size:20px; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.btn.is-busy{ transform:scale(.96); }

/* Keyboard affordances appear only where there is a keyboard (spec §7.2) */
.hint{ display:none; margin-top:var(--s-4); font-size:var(--fs-xs);
       color:var(--text-muted); text-align:center; letter-spacing:.02em; }
@media (min-width:1024px) and (hover:hover) and (pointer:fine){ .hint{ display:block; } }
.hint kbd{ font:inherit; padding:1px 5px; border-radius:6px;
  background:var(--cy-06); border:1px solid var(--cy-12); color:var(--text-secondary); }

/* ═══ 4.2 GLASS CARD ══════════════════════════════════════════════ */
.card{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  padding:var(--s-6);
  transition:background var(--m-base) var(--e-emphasis),
             border-color var(--m-base) var(--e-emphasis);
}
.card::before{ /* specular top edge — this one line is what makes it read as glass */
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cy-35),transparent);
}
.card--flush{ padding:0; overflow:hidden; }
.subcard{ background:var(--cy-03); border-radius:var(--r-sm); padding:var(--s-5); }

/* ═══ SCREEN SYSTEM ═══════════════════════════════════════════════ */
#screens{ position:absolute; inset:0; z-index:var(--z-overlay); }
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:calc(var(--sa-t) + var(--s-5)) max(var(--gutter),var(--sa-r))
          var(--thumb-pad) max(var(--gutter),var(--sa-l));
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.screen[hidden]{ display:none; }
.screen__inner{ width:100%; max-width:520px; margin:0 auto; }
.scanline{
  position:absolute; left:0; right:0; top:0; height:1px; z-index:var(--z-focus);
  background:var(--accent-cyan); opacity:0; transform-origin:left center;
  transform:scaleX(0); pointer-events:none;
}

/* ═══ 1.1 LANDING ═════════════════════════════════════════════════ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); margin-bottom:var(--s-8);
}
.wordmark{
  display:flex; align-items:center; gap:var(--s-3);
  font-family:var(--font-display); font-weight:var(--fw-display-max);
  font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-primary);
}
.wordmark__mark{
  width:10px; height:10px; flex:none; transform:rotate(45deg);
  background:var(--accent-cyan); border-radius:2px;
  box-shadow:0 0 0 1px rgba(var(--accent-cyan-rgb),.3), 0 0 18px -4px var(--accent-cyan);
}
.clock{
  display:inline-flex; align-items:center; gap:6px;
  font:600 var(--fs-xs)/1 var(--font-body); color:var(--text-muted);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  letter-spacing:.04em; white-space:nowrap;
}
.clock .ph{ font-size:14px; }
.clock.is-soon{ color:var(--accent-orange); }
.clock.is-urgent{ color:var(--accent-orange); animation:clockpulse 1s var(--e-ambient) infinite; }
@keyframes clockpulse{ 0%,100%{opacity:1} 50%{opacity:.7} }

.hero{ margin-bottom:var(--s-8); }
.hero .hl{ font-size:var(--fs-hero-1); }
.hero__cta{ margin-top:var(--s-7); }
.hero__sub{ display:flex; align-items:center; justify-content:center;
  gap:var(--s-3); margin-top:var(--s-4); }

.prize{
  display:inline-flex; align-items:center; gap:var(--s-3);
  margin-top:var(--s-5); padding:6px 12px 6px 10px;
  border-radius:var(--r-pill);
  background:var(--or-08); border:1px solid var(--or-18);
  font:600 var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-micro); text-transform:uppercase;
  color:var(--accent-orange);
}
.prize .ph-fill{ font-size:15px; }

/* ── leaderboard block ── */
.sect{ margin-top:var(--s-9); }
.sect__head{
  display:flex; align-items:center; gap:var(--s-4);
  margin-bottom:var(--s-4);
}
.sect__head .micro{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); }
.sect__rule{ flex:1; height:1px; background:var(--cy-12); }
.live{
  display:inline-flex; align-items:center; gap:6px;
  font:600 var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-micro); color:var(--accent-cyan);
}
.live__dot{ font-size:9px; }
.live.is-on .live__dot{ animation:livepoll 2600ms var(--e-ambient) infinite; }
@keyframes livepoll{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ═══ 4.3 LEADERBOARD ROW ═════════════════════════════════════════ */
.board{ display:block; }
.row{
  display:grid; grid-template-columns:36px 1fr auto;
  align-items:center; column-gap:var(--s-4);
  height:56px; padding-inline:var(--s-5);
  border-bottom:1px solid var(--cy-06);
  position:relative;
}
.row:last-child{ border-bottom:0; }
.rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--r-xs);
  background:var(--cy-06);
  font:600 13px/1 var(--font-body); color:var(--text-secondary);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.row--m1 .rank,.row--m2 .rank,.row--m3 .rank{
  width:32px; height:32px; color:var(--ink-on-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40);
}
.row--m1 .rank{ background:linear-gradient(155deg,var(--rank-1) 0%,var(--rank-1-dark) 52%,var(--rank-1) 100%);
                box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 0 22px -6px var(--rank-1); }
.row--m2 .rank{ background:linear-gradient(155deg,var(--rank-2) 0%,var(--rank-2-dark) 52%,var(--rank-2) 100%);
                box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 0 22px -6px var(--rank-2); }
.row--m3 .rank{ background:linear-gradient(155deg,var(--rank-3) 0%,var(--rank-3-dark) 52%,var(--rank-3) 100%);
                box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 0 22px -6px var(--rank-3); }
.row--m1{ background:linear-gradient(90deg,rgba(255,200,97,.10),transparent 60%);
          border-left:2px solid var(--rank-1); padding-left:14px; }
.row__id{ display:flex; align-items:baseline; gap:var(--s-3); min-width:0; }
.row__name{
  font:600 16px/1.2 var(--font-body); color:var(--text-primary);
  max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:transform var(--m-instant) var(--e-emphasis);
}
.row__digits{
  font:400 15px/1 var(--font-body); color:var(--text-secondary);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; white-space:nowrap;
}
.row__digits i{ font-style:normal; color:var(--text-muted); }
.row__score{
  font:800 17px/1 var(--font-display); color:var(--text-primary);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.row--m1 .row__score{ color:var(--rank-1); }
.row__badge{ font-size:15px; margin-left:2px; }
.row--m1 .row__badge{ color:var(--rank-1); }
.row--m2 .row__badge{ color:var(--rank-2); }
.row--m3 .row__badge{ color:var(--rank-3); }
.row--you{
  border-left:2px solid var(--accent-cyan); padding-left:14px;
  background:rgba(var(--accent-cyan-rgb),.07);
}
.pill-you{
  display:inline-block; margin-left:var(--s-3); padding:2px 7px;
  border-radius:var(--r-pill); background:var(--accent-cyan);
  color:var(--ink-on-bright);
  font:600 11px/1.4 var(--font-body); letter-spacing:.08em;
}
.row__delta{
  font:600 11px/1 var(--font-body); margin-left:6px;
  font-variant-numeric:tabular-nums;
}
.row__delta--up{ color:var(--accent-cyan); }
.row__delta--down{ color:var(--text-muted); }
/* ── §6c Top-10 arrival ─────────────────────────────────────────── */
.row{ overflow:hidden; }                 /* contains the rim-light sweep */
.row__rim{
  position:absolute; top:0; bottom:0; left:0; width:55%;
  background:linear-gradient(100deg, transparent,
             rgba(var(--accent-cyan-rgb),.30), transparent);
  transform:translateX(-100%); opacity:0; pointer-events:none;
}
.row--arrive .row__rim{ animation:rimsweep-row 380ms var(--e-impact) forwards; }
@keyframes rimsweep-row{
  from{ transform:translateX(-100%); opacity:1 }
  to  { transform:translateX(200%);  opacity:0 }
}
/* 3 breaths then stop — a loop that never ends stops being a reward */
.row--breathe{ animation:row-breathe 2400ms var(--e-ambient) 3; }
@keyframes row-breathe{
  0%,100%{ background-color:rgba(var(--accent-cyan-rgb),.06) }
  50%    { background-color:rgba(var(--accent-cyan-rgb),.13) }
}
:root[data-motion="reduce"] .row--arrive .row__rim{ animation:none; }
/* reduced motion: no travel, no sweep — the row simply holds a tint */
.row--held{ background-color:rgba(var(--accent-cyan-rgb),.13) !important;
  transition:background-color 400ms var(--e-emphasis); }

.board__pin{ border-top:1px dashed var(--cy-08); }
.board__foot{ padding:var(--s-4) var(--s-5); border-top:1px solid var(--cy-06); }
@media (hover:hover) and (pointer:fine){
  .board--interactive .row:hover{ background:rgba(var(--accent-cyan-rgb),.09); }
  .board--interactive .row:hover .row__name{ transform:translateX(2px); }
  .board--interactive .row:hover .rank{ color:var(--text-secondary); }
}
/* empty state — designed, never a spinner (§9.10) */
.row--ghost .row__name-bar{ display:block; width:90px; height:12px;
  border-radius:var(--r-pill); background:var(--cy-08); }
.row--ghost .row__score{ color:var(--text-muted); letter-spacing:.2em; }
.board__empty{ padding:var(--s-5); text-align:center; }

.linkrow{ display:flex; justify-content:center; gap:var(--s-5); margin-top:var(--s-7); }
.linkrow button{ font-size:var(--fs-xs); color:var(--text-muted); padding:var(--s-4) 0; }
@media (hover:hover) and (pointer:fine){ .linkrow button:hover{ color:var(--text-secondary); } }

/* ═══ 4.7 MODAL / SHEET ═══════════════════════════════════════════ */
/* The UA stylesheet gives <dialog> `height: fit-content`, which collapses to
   zero once the panel is taken out of flow — the panel then lands above the
   viewport. Height is set explicitly, and the panel is centred with FLEX, not
   a transform: the motion engine owns `transform` on this element. */
dialog.sheet{
  position:fixed; inset:0; width:100%; height:100%;
  max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; overflow:hidden;
  color:inherit; z-index:var(--z-modal);
}
dialog.sheet[open]{ display:flex; align-items:flex-end; justify-content:center; }
dialog.sheet::backdrop{ background:rgba(var(--bg-deep-rgb),.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sheet__panel{
  position:relative; width:100%;
  max-height:88dvh; display:flex; flex-direction:column;
  padding:var(--s-4) max(var(--gutter),var(--sa-l)) var(--thumb-pad) max(var(--gutter),var(--sa-r));
  background:#0b1d22; border-top:1px solid var(--cy-18);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -1px 0 var(--cy-25), 0 -30px 80px -40px rgba(var(--accent-cyan-rgb),.5);
  overflow:hidden;
}
.sheet__handle{
  width:40px; height:4px; border-radius:var(--r-pill);
  background:var(--cy-25); margin:0 auto var(--s-6);
}
.sheet__body{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  touch-action:pan-y; padding-bottom:var(--s-3); }
/* while a finger is on the sheet the panel follows it 1:1 — any easing here
   is input lag, so no transition until the release */
.sheet__panel.is-dragging{ transition:none; will-change:transform; }
.sheet__handle{ cursor:grab; }
.sheet__panel.is-dragging .sheet__handle{ cursor:grabbing; }
.sheet__close{
  position:absolute; top:var(--s-4); right:var(--s-4);
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-pill); color:var(--text-muted); font-size:20px;
}
.sheet__foot{ padding-top:var(--s-6); }

/* wizard card: one persistent card, contents swap (motion §3.2) */
.wizstep[hidden]{ display:none; }
.wizstep{ min-height:1px; }

/* ═══ 4.5 PHONE FIELD ═════════════════════════════════════════════ */
.field{ margin-top:var(--s-5); }
.field__label{ display:flex; align-items:center; gap:6px; margin-bottom:var(--s-3); }
.phone{
  display:flex; align-items:stretch; height:var(--tap-primary);
  border-radius:var(--r-md); background:var(--glass-bg);
  border:1px solid var(--cy-08);
  transition:border-color var(--m-instant) var(--e-emphasis),
             box-shadow var(--m-instant) var(--e-emphasis);
}
.phone:focus-within{ border-color:var(--accent-cyan);
  box-shadow:0 0 0 3px rgba(var(--accent-cyan-rgb),.15); }
.phone.is-invalid{ border-color:var(--danger); }
.phone__cc{
  display:flex; align-items:center; gap:var(--s-3); width:110px; flex:none;
  padding-inline:var(--s-4); border-right:1px solid var(--cy-08);
  border-radius:var(--r-md) 0 0 var(--r-md); color:var(--text-primary);
}
.iso{
  display:inline-grid; place-items:center; width:26px; height:18px; flex:none;
  border-radius:var(--r-xs); border:1px solid var(--cy-18);
  font:600 10px/1 var(--font-body); letter-spacing:.02em; color:var(--text-secondary);
}
.phone__dial{ font:600 15px/1 var(--font-body);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.phone__cc .ph{ font-size:12px; color:var(--text-muted); margin-left:auto; }
.phone__num{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  padding-inline:var(--s-5); color:var(--text-primary);
  font:400 17px/1 var(--font-body);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  letter-spacing:.02em;
}
.phone__num::placeholder{ color:var(--text-muted); }
.phone__ok{ display:grid; place-items:center; padding-right:var(--s-5);
  color:var(--accent-cyan); font-size:16px; opacity:0;
  transition:opacity var(--m-base) var(--e-emphasis); }
.phone.is-valid .phone__ok{ opacity:1; }
.err{ display:flex; align-items:center; gap:6px; margin-top:var(--s-3);
  font-size:var(--fs-xs); color:var(--danger); min-height:16px; }
.err:empty{ display:none; }

.checkrow{
  display:flex; align-items:center; gap:var(--s-4);
  min-height:var(--tap-min); margin-top:var(--s-5); cursor:pointer;
}
.checkrow input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox{
  width:24px; height:24px; flex:none; border-radius:var(--r-xs);
  border:1px solid var(--cy-25); background:var(--cy-03);
  display:grid; place-items:center; color:var(--ink-on-bright); font-size:14px;
  transition:background var(--m-fast) var(--e-emphasis),
             border-color var(--m-fast) var(--e-emphasis);
}
.checkbox .ph-bold{ opacity:0; transform:scale(.6);
  transition:opacity var(--m-fast) var(--e-emphasis), transform var(--m-fast) var(--e-spring); }
.checkrow input:checked + .checkbox{ background:var(--accent-cyan); border-color:var(--accent-cyan); }
.checkrow input:checked + .checkbox .ph-bold{ opacity:1; transform:scale(1); }
.checkrow input:focus-visible + .checkbox{ outline:2px solid var(--accent-cyan); outline-offset:3px; }
.checkrow span{ font-size:var(--fs-sm); color:var(--text-secondary); }
.checkrow u{ color:var(--accent-cyan); text-decoration-color:var(--cy-25);
  text-underline-offset:3px; }

/* ═══ 4.4 OTP ═════════════════════════════════════════════════════ */
.otp{ position:relative; margin-top:var(--s-6); }
.otp__cells{ display:flex; gap:var(--s-3); justify-content:space-between; }
.otp__cell{
  flex:1; height:56px; max-width:56px; border-radius:var(--r-sm);
  background:var(--cy-03); border:1px solid var(--cy-08);
  display:grid; place-items:center;
  font:800 var(--fs-otp)/1 var(--font-display); color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--m-instant) var(--e-emphasis),
             background var(--m-instant) var(--e-emphasis);
}
.otp__cell b{ display:block; font-weight:inherit; opacity:0; transform:scale(.7);
  transition:opacity var(--m-fast) var(--e-impact), transform var(--m-fast) var(--e-impact); }
.otp__cell.is-filled{ border-color:var(--cy-25); background:rgba(var(--accent-cyan-rgb),.08); }
.otp__cell.is-filled b{ opacity:1; transform:scale(1); }
.otp__cell.is-live{ border-color:var(--accent-cyan);
  box-shadow:0 0 0 3px rgba(var(--accent-cyan-rgb),.15); }
.otp__cell.is-live::after{
  content:''; width:2px; height:26px; background:var(--accent-cyan);
  animation:caret 1s steps(1) infinite; position:absolute;
}
.otp__cell.is-filled.is-live::after{ display:none; }
@keyframes caret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
.otp.is-err .otp__cell{ border-color:var(--danger); }
.otp.is-ok .otp__cell{ border-color:var(--accent-cyan);
  background:var(--accent-cyan); color:var(--ink-on-bright); }
.otp__input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:0; background:transparent; color:transparent;
  font-size:16px; /* iOS will not zoom at >=16px */
  letter-spacing:2em; caret-color:transparent; cursor:pointer;
}
.otp.is-shake{ animation:otpshake 340ms var(--e-emphasis); }
@keyframes otpshake{
  0%{transform:translateX(0)} 18%{transform:translateX(-10px)}
  38%{transform:translateX(8px)} 58%{transform:translateX(-6px)}
  80%{transform:translateX(4px)} 100%{transform:translateX(0)} }
.otp__seal{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--accent-cyan); font-size:56px; opacity:0; pointer-events:none;
}
.resend{ display:block; margin:var(--s-6) auto 0; text-align:center;
  font-size:var(--fs-sm); color:var(--text-muted);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.resend[data-ready="1"]{ color:var(--accent-cyan); }
.sentto{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  margin-top:var(--s-4); font-size:var(--fs-sm); color:var(--text-muted); }
.sentto b{ color:var(--text-secondary); font-weight:400;
  font-variant-numeric:tabular-nums; }
.textbtn{ color:var(--accent-cyan); font:600 var(--fs-sm)/1 var(--font-body);
  padding:var(--s-3) 0; }

/* ═══ NAME FIELD ══════════════════════════════════════════════════ */
.tfield{
  width:100%; height:var(--tap-primary); border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--cy-08);
  padding-inline:var(--s-5); color:var(--text-primary);
  font:400 17px/1 var(--font-body); outline:none;
  transition:border-color var(--m-instant) var(--e-emphasis),
             box-shadow var(--m-instant) var(--e-emphasis);
}
.tfield::placeholder{ color:var(--text-muted); }
.tfield:focus{ border-color:var(--accent-cyan);
  box-shadow:0 0 0 3px rgba(var(--accent-cyan-rgb),.15); }
.counter{ display:block; margin-top:var(--s-3); text-align:right;
  font-size:var(--fs-xs); color:var(--text-muted);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.preview{ margin-top:var(--s-5); border-radius:var(--r-sm); overflow:hidden;
  background:var(--cy-03); }

/* ═══ 1.5 COUNTDOWN ═══════════════════════════════════════════════ */
#countdown{
  position:absolute; inset:0; z-index:var(--z-overlay);
  display:grid; place-items:center; pointer-events:none;
  background:rgba(var(--bg-deep-rgb),.55);
  opacity:0;
}
#countdown.is-flash{ background:transparent; }
.cd__ring{
  position:relative; width:128px; height:128px; display:grid; place-items:center;
}
.cd__ring svg{ position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg); overflow:visible; }
.cd__ring circle{ fill:none; stroke:var(--accent-cyan); stroke-width:3;
  stroke-linecap:round; }
.cd__num{
  font:var(--fw-display-max) 88px/1 var(--font-display);
  color:var(--text-primary); letter-spacing:var(--ls-hero);
  font-variant-numeric:tabular-nums;
  text-shadow:var(--hud-text-glow);
}
.cd__hint{
  position:absolute; left:0; right:0; top:calc(50% + 96px); text-align:center;
  display:flex; align-items:center; justify-content:center; gap:var(--s-3);
  color:var(--text-secondary);
}
.cd__hint .ph{ font-size:16px; }

/* ═══ 1.6 IN-GAME HUD ═════════════════════════════════════════════ */
#hud{
  position:absolute; inset:0; z-index:var(--z-hud);
  pointer-events:none; opacity:0;
}
#hud::before{
  content:''; position:absolute; left:0; right:0; top:0; height:120px;
  background:var(--hud-scrim-top);
}
.hud__band{
  position:absolute; left:max(var(--gutter),var(--sa-l)); right:max(var(--gutter),var(--sa-r));
  top:var(--hud-top);
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-5);
}
.hud__left{ display:flex; flex-direction:column; gap:6px; }
:root[data-hudside="right"] .hud__band{ flex-direction:row-reverse; }
.tierbar{ display:flex; gap:3px; }
.tierbar i{ display:block; width:14px; height:4px; border-radius:var(--r-pill);
  background:var(--cy-12); transition:background var(--m-base) var(--e-emphasis); }
.tierbar i.on{ background:var(--accent-cyan); }
.hud.is-over .tierbar i.on,#hud.is-over .tierbar i.on{ background:var(--accent-orange); }
.hud__tier{ display:block; color:var(--text-secondary); }
#hud.is-over .hud__tier{ color:var(--accent-orange); }
/* which form you are in is the single most load-bearing fact on screen —
   the button means something different in each */
.hud__row{ display:flex; align-items:center; gap:var(--s-3); }
.hud__form{
  display:inline-block; padding:3px 8px; border-radius:var(--r-xs);
  background:rgba(var(--accent-cyan-rgb),.14);
  border:1px solid var(--cy-35); color:var(--accent-cyan);
  font:600 var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-micro); text-transform:uppercase;
  transition:background var(--m-fast) var(--e-emphasis),
             border-color var(--m-fast) var(--e-emphasis),
             color var(--m-fast) var(--e-emphasis);
}
.hud__form.is-swap{ animation:formswap 420ms var(--e-spring); }
@keyframes formswap{
  0%  { transform:scale(1);    background:var(--accent-cyan); color:var(--ink-on-bright) }
  40% { transform:scale(1.18); background:var(--accent-cyan); color:var(--ink-on-bright) }
  100%{ transform:scale(1) }
}
:root[data-motion="reduce"] .hud__form.is-swap{ animation:none; }
.hud__speed{ font:600 13px/1 var(--font-body); color:var(--text-muted);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.hud__score{
  position:absolute; left:50%; top:calc(var(--hud-top) + 26px);
  transform:translateX(-50%);
  font:var(--fw-display) var(--fs-score)/1 var(--font-display);
  color:var(--text-primary); letter-spacing:var(--ls-tight);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  text-shadow:var(--hud-text-glow); white-space:nowrap;
  transition:color var(--m-base) var(--e-emphasis);
}
.hud__score.is-pb{ color:var(--accent-orange); }
.hud__score.is-flash{ animation:msflash 180ms var(--e-spring); }
@keyframes msflash{ 0%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.06)} 100%{transform:translateX(-50%) scale(1)} }
.hud__pause{
  position:absolute; right:calc(var(--sa-r) + 12px); bottom:calc(var(--sa-b) + 12px);
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-pill); color:var(--text-primary); font-size:20px;
  opacity:.5; pointer-events:auto;
  transition:opacity var(--m-fast) var(--e-emphasis), transform var(--m-fast) var(--e-emphasis);
}
.hud__pause:active{ opacity:1; transform:scale(.96); }
.hud__note{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(var(--hud-top) + 78px);
  font:600 var(--fs-micro)/1 var(--font-body); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--accent-orange); opacity:0; white-space:nowrap;
}

/* ═══ PAUSE PANEL ═════════════════════════════════════════════════ */
#pausePanel{
  position:absolute; inset:0; z-index:var(--z-overlay);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-4); background:rgba(var(--bg-deep-rgb),.55);
}
#pausePanel .btn{ min-width:220px; }
#pausePanel .hl{ margin-bottom:var(--s-6); text-align:center; }

/* ═══ 1.7 DEATH ═══════════════════════════════════════════════════ */
#death{
  position:absolute; inset:0; z-index:var(--z-overlay);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--sa-t) max(var(--gutter),var(--sa-r)) var(--thumb-pad) max(var(--gutter),var(--sa-l));
  background:rgba(var(--bg-deep-rgb),.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.death__inner{ width:100%; max-width:460px; margin:0 auto; }
.death__lead{ text-align:center; margin-bottom:var(--s-6); }
.death__label{
  display:flex; align-items:center; justify-content:center; gap:var(--s-3);
  font-family:var(--font-display); font-weight:var(--fw-display);
  font-size:var(--fs-h2); color:var(--text-primary); letter-spacing:var(--ls-tight);
  text-transform:uppercase;
}
.death__label .ph-fill{ font-size:.8em; color:var(--text-muted); }
.death__score{
  display:block; margin-top:var(--s-2);
  font:var(--fw-display-max) var(--fs-score-final)/1 var(--font-display);
  color:var(--accent-cyan); letter-spacing:var(--ls-tight);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}
.death__score.is-pb{ color:var(--accent-orange); }
.pbpill{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--s-3);
  padding:4px 10px; border-radius:var(--r-pill);
  background:var(--or-08); border:1px solid var(--or-35); color:var(--accent-orange);
  font:600 var(--fs-micro)/1.4 var(--font-body); letter-spacing:var(--ls-micro);
}
.leadbar{
  margin-bottom:var(--s-5); padding:10px var(--s-5); border-radius:var(--r-sm);
  background:var(--accent-orange); color:var(--ink-on-bright);
  font:600 var(--fs-micro)/1.4 var(--font-body); letter-spacing:var(--ls-micro);
  text-transform:uppercase; text-align:center;
}
.stats{ display:flex; flex-direction:column; }
/* dividers go on the TOP of each following row, so hiding the last row cannot
   leave a rule hanging under nothing */
.stat{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:10px 0; }
.stat + .stat{ border-top:1px solid var(--cy-06); }
.stat__k{ font:600 var(--fs-micro)/1 var(--font-body); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--text-muted); }
.stat__v{ display:flex; align-items:baseline; gap:var(--s-3);
  font:800 17px/1 var(--font-display); color:var(--text-primary);
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.chip{ font:600 11px/1 var(--font-body); padding:3px 7px; border-radius:var(--r-pill);
  background:var(--cy-08); color:var(--accent-cyan); }
.chip--warn{ background:var(--or-08); color:var(--accent-orange); }
.chip--mute{ background:var(--cy-06); color:var(--text-muted); }
.death__tier{ display:flex; align-items:center; gap:var(--s-4); margin:var(--s-5) 0; }
.death__actions{ margin-top:var(--s-6); }
.death__sec{ display:flex; gap:var(--s-4); margin-top:var(--s-4); }
.death__sec .btn{ flex:1; }
.retryhint{ opacity:.8; font-family:var(--font-body); font-weight:400;
  font-size:12px; letter-spacing:0; text-transform:none; margin-left:auto; }

/* ═══ 1.8 FULL LEADERBOARD ════════════════════════════════════════ */
.bhead{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:var(--s-4);
  height:56px; margin:0 calc(-1 * var(--gutter)) var(--s-5);
  padding-inline:var(--gutter);
  background:rgba(11,29,34,.86);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--cy-08);
}
.bhead h2{ margin:0; font:var(--fw-display) var(--fs-h3)/1 var(--font-display);
  letter-spacing:var(--ls-micro); text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bhead__back{ flex:none; }
/* the contest clock is already in the HUD and on the landing; on a narrow
   phone it pushed the refresh control clean off the right edge */
@media (max-width:479px){ .bhead .clock{ display:none; } }
.bhead__back{ width:44px; height:44px; margin-left:-10px; display:grid;
  place-items:center; font-size:20px; color:var(--text-secondary); }
.bhead__prog{ position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent-cyan); transform-origin:left center; transform:scaleX(0); }
.board__count{ margin-top:var(--s-4); text-align:center; }
.board__stickyfoot{
  position:sticky; bottom:0; margin-top:var(--s-6);
  padding-top:var(--s-4);
  background:linear-gradient(0deg, #0a1a1f 40%, rgba(10,26,31,0));
}

/* ═══ 1.9 SETTINGS ════════════════════════════════════════════════ */
.setgroup{ margin-top:var(--s-7); }
.setgroup__head{ display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-2); }
.setgroup__head .micro{ color:var(--text-muted); }
.setgroup__rule{ flex:1; height:1px; background:var(--cy-12); }
.setrow{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  min-height:56px; border-bottom:1px solid var(--cy-06);
}
.setrow:last-child{ border-bottom:0; }
.setrow__k{ display:flex; align-items:center; gap:var(--s-4);
  font-size:var(--fs-body); color:var(--text-primary); }
.setrow__k .ph{ font-size:18px; color:var(--text-muted); }
.setrow__v{ font-size:var(--fs-sm); color:var(--text-secondary);
  font-variant-numeric:tabular-nums; }
.switch{
  position:relative; width:52px; height:32px; flex:none;
  border-radius:var(--r-pill); background:var(--cy-12);
  border:1px solid var(--cy-18); cursor:pointer;
  transition:background var(--m-fast) var(--e-emphasis),
             border-color var(--m-fast) var(--e-emphasis);
}
.switch::after{
  content:''; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:var(--r-pill); background:var(--text-secondary);
  transition:transform var(--m-fast) var(--e-emphasis), background var(--m-fast) var(--e-emphasis);
}
.switch[aria-checked="true"]{ background:var(--accent-cyan); border-color:var(--accent-cyan); }
.switch[aria-checked="true"]::after{ transform:translateX(20px); background:var(--ink-on-bright); }
.seg{ display:flex; gap:2px; padding:2px; border-radius:var(--r-sm);
  background:var(--cy-06); border:1px solid var(--cy-08); }
.seg button{
  min-height:40px; padding:0 var(--s-4); border-radius:var(--r-xs);
  font:600 var(--fs-xs)/1 var(--font-body); color:var(--text-muted);
  transition:background var(--m-fast) var(--e-emphasis), color var(--m-fast) var(--e-emphasis);
}
.seg button[aria-pressed="true"]{ background:var(--cy-18); color:var(--accent-cyan); }
.build{ margin-top:var(--s-7); text-align:center; font-size:10px; color:var(--text-muted);
  font-variant-numeric:tabular-nums; }

/* ═══ 1.10 CONTEST ENDED ══════════════════════════════════════════ */
.endedbar{
  margin:0 calc(-1 * var(--gutter)) var(--s-8);
  padding:12px var(--gutter);
  background:var(--accent-orange); color:var(--ink-on-bright);
  font:600 var(--fs-micro)/1.4 var(--font-body);
  letter-spacing:var(--ls-micro); text-transform:uppercase; text-align:center;
}
.winner{
  position:relative; text-align:center; padding:var(--s-9) var(--s-6);
  border-radius:var(--r-lg); background:var(--glass-bg);
  border:1px solid rgba(255,200,97,.35);
  box-shadow:0 0 80px -20px rgba(255,200,97,.55);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.winner__crown{ font-size:34px; color:var(--rank-1); }
.winner__name{ margin:var(--s-4) 0 0;
  font:var(--fw-display-max) var(--fs-h1)/1 var(--font-display);
  letter-spacing:var(--ls-tight); text-transform:uppercase; }
.winner__digits{ color:var(--text-muted); font-family:var(--font-body);
  font-weight:400; font-size:.5em; letter-spacing:0; margin-left:8px; }
.winner__score{ display:block; margin-top:var(--s-4);
  font:var(--fw-display-max) var(--fs-score-final)/1 var(--font-display);
  color:var(--rank-1); font-variant-numeric:tabular-nums; letter-spacing:var(--ls-tight); }
.winner__claim{ margin-top:var(--s-5); color:var(--rank-1); }
.frozen .rank{ filter:saturate(.55); }

/* ═══ 4.6 TOASTS ══════════════════════════════════════════════════ */
#toasts{
  position:fixed; z-index:var(--z-toast);
  /* clears a 56px sticky screen header, so a toast can never sit on top
     of a back or refresh control */
  top:calc(var(--sa-t) + 68px); left:var(--gutter); right:var(--gutter);
  display:flex; flex-direction:column; gap:var(--s-3);
  align-items:center; pointer-events:none;
}
.toast{
  width:100%; max-width:420px; pointer-events:auto;
  display:flex; align-items:flex-start; gap:var(--s-4);
  padding:12px var(--s-5); border-radius:var(--r-sm);
  background:var(--glass-solid); border:1px solid var(--glass-border);
  border-left:3px solid var(--accent-cyan);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  font:400 15px/1.35 var(--font-body); color:var(--text-primary);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
}
.toast .ph,.toast .ph-fill{ font-size:18px; flex:none; margin-top:1px; color:var(--accent-cyan); }
.toast--warn{ border-left-color:var(--accent-orange); }
.toast--warn .ph-fill,.toast--warn .ph{ color:var(--accent-orange); }
.toast--err{ border-left-color:var(--danger); }
.toast--err .ph-fill,.toast--err .ph{ color:var(--danger); }
.toast--info .ph,.toast--info .ph-fill{ color:var(--text-secondary); }

/* ═══ BOOT ════════════════════════════════════════════════════════ */
#boot{
  position:fixed; inset:0; z-index:var(--z-focus);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-5); background:var(--bg-deep);
}
#boot .micro{ color:var(--text-muted); }
.bootbar{ width:min(220px,50vw); height:2px; background:var(--cy-08);
  border-radius:var(--r-pill); overflow:hidden; }
.bootbar i{ display:block; height:100%; width:100%; background:var(--accent-cyan);
  transform-origin:left center; transform:scaleX(.05);
  transition:transform 220ms var(--e-emphasis); }

/* ═══ 7.2 RESPONSIVE ══════════════════════════════════════════════ */
@media (min-width:768px){
  .card{ padding:var(--s-7); }
  .screen__inner{ max-width:620px; }
  .row{ height:60px; }
  .otp__cell{ height:60px; max-width:60px; }
  dialog.sheet[open]{ align-items:center; }
  dialog.sheet .sheet__panel{
    width:min(440px, calc(100vw - 2*var(--gutter)));
    max-height:86dvh;
    border-radius:var(--r-lg); border:1px solid var(--cy-18);
    padding:var(--s-8) var(--s-7) var(--s-7);
  }
  .sheet__handle{ display:none; }
}
@media (min-width:1024px){
  .btn{ min-height:52px; font-size:15px; }
  .btn--pri{ padding:0 32px; }
  .screen--landing .screen__inner{
    max-width:var(--container);
    display:grid; grid-template-columns:7fr 5fr; gap:var(--s-11);
    align-items:start; padding-top:var(--s-9);
  }
  .screen--landing .topbar{ grid-column:1 / -1; }
  .screen--landing .sect{ margin-top:0; position:sticky; top:88px; }
  .hero .hl{ font-size:var(--fs-hero-2); }
  .hero__cta .btn{ display:inline-flex; width:auto; min-width:240px; }
  .hero__sub{ justify-content:flex-start; }
}
/* landscape phone — driven by height, never width */
@media (max-height:450px){
  /* score moves to the top-left corner and the cluster sits beside it —
     it must still clear the notch, so the inset is a safe-area max() */
  .hud__score{ left:max(var(--gutter),var(--sa-l)); right:auto; top:var(--hud-top);
    transform:none; font-size:var(--fs-h2); line-height:1.1; }
  :root[data-hudside="right"] .hud__score{ right:max(var(--gutter),var(--sa-r)); left:auto; }
  .hud__band{ align-items:center; padding-left:132px; }
  :root[data-hudside="right"] .hud__band{ padding-left:0; padding-right:132px; }
  .hud__note{ top:calc(var(--hud-top) + 42px); }
  .hud__clock{ display:none; }
  .hud__left{ flex-direction:row; align-items:center; gap:var(--s-4); }
  dialog.sheet[open]{ align-items:center; }
  dialog.sheet .sheet__panel{
    width:min(420px, calc(100vw - 2*var(--gutter)));
    border-radius:var(--r-lg); max-height:92dvh;
    padding:var(--s-6) var(--s-6) var(--s-6);
  }
  .sheet__handle{ display:none; }
  .screen{ padding-top:calc(var(--sa-t) + var(--s-4)); }
  .hero .hl{ font-size:var(--fs-h1); }
  .lead{ display:none; }
  .death__lead{ margin-bottom:var(--s-4); }
  .death__score{ font-size:var(--fs-h1); }
}

/* ═══ 8.2 REDUCED MOTION — CSS backstop before JS runs ════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}
:root[data-motion="reduce"] .live.is-on .live__dot,
:root[data-motion="reduce"] .clock.is-urgent,
:root[data-motion="reduce"] .btn--pri.is-sweep::after{ animation:none !important; }

/* ═══ PRACTICE MODE ═══════════════════════════════════════════════
 * Practice is a mode of a RUN, not a mode of the page: the landing keeps its
 * prize, its clock and its leaderboard, and only the run itself is marked.
 * Everything here is presentation. The guarantee that a practice run cannot
 * reach the contest lives in net.js, on the one function every endpoint goes
 * through — a class on <body> is a label, never a control.
 * body.practice is set for the length of the run and cleared when it ends. */
.practiceOnly { display: none; }
body.practice .practiceOnly { display: block; }
body.practice span.practiceOnly { display: inline-flex; }

/* The badge rides under the score, where the eye already is. */
#hudPractice{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(var(--hud-top) + 78px);
  color:var(--accent-cyan); border-color:var(--accent-cyan);
  white-space:nowrap; z-index:3;
}
@media (max-width: 560px){ #hudPractice{ top:calc(var(--hud-top) + 42px); } }

/* A practice death panel must not show a rank, a gap to first, or a way onto
   the board: those are all claims that this run counted. */
body.practice #deathRankRow,
body.practice #deathToBeatRow,
body.practice #btnDeathBoard,
body.practice #leaderBanner,
body.practice #hudNote { display: none !important; }
body.practice #practiceBanner{ color:var(--accent-cyan); }

/* ═══ SHORT VIEWPORTS ═════════════════════════════════════════════
 * Wide but SHORT is a real device class and it had been missed: the
 * min-width:1024px landing uses a 70px headline and 40px of top padding, which
 * on a 1024x600 netbook — or any laptop window that is not maximised — pushed
 * "Start game" to y=598 in a 600px viewport. The primary call to action was
 * below the fold on all three engines, measured 2026-09-11.
 *
 * Phones in landscape were already handled by max-height:450px, and tall
 * screens are fine; this is the band in between. Driven by HEIGHT, because the
 * problem is height — a width breakpoint cannot see it. */
@media (min-width:700px) and (max-height:720px){
  .screen--landing .screen__inner{ padding-top:var(--s-4); }
  .hero{ margin-bottom:var(--s-5); }
  .hero .hl{ font-size:clamp(30px, 5.2vh, 46px); }
  .hero #heroRule{ margin-bottom:12px !important; }
  .hero .lead{ font-size:14px; margin-top:10px; }
  .hero .prize{ margin-top:8px; }
  .hero__cta{ margin-top:14px; }
  .hero__sub{ margin-top:8px; }
}


/* ═══ WHO BUILT IT ════════════════════════════════════════════════
 * Jonah, 2026-09-11: "i want it to be clear at the landing page that the game
 * was created by brian." It started life as .fine and read as a disclaimer —
 * grey, 12px, the size of a footnote. It is not a footnote: the thing you can
 * win is the thing that wrote the game, so it sits at lead weight with the
 * name in the accent colour. */
#builtBy{
  margin:10px 0 0; font:600 15px/1.5 var(--font-body);
  color:var(--text-secondary); letter-spacing:.1px;
}
#builtBy strong{ color:var(--accent-cyan); font-weight:800; }
@media (min-width:700px) and (max-height:720px){ #builtBy{ font-size:13px; margin-top:6px; } }


/* ═══ RANKED TRIES — rules card, out-of-tries, rewards ═════════════
 * Jonah, 2026-09-17. The five-try rules shipped with markup and logic but no
 * styles: the landing line ran into the paragraph above it and the reward
 * panels rendered as bare text. Everything here uses the existing tokens —
 * cyan for "you can", orange only for "you are out". */

/* ── landing rules card ── */
.rules-card{
  margin-top:var(--s-5); padding:var(--s-4) var(--s-5);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); max-width:520px;
}
.rules-card__top{ display:flex; align-items:center; gap:var(--s-4); }
.rules-card__n{
  flex:none; min-width:44px; height:44px; padding:0 8px;
  display:grid; place-items:center; border-radius:var(--r-md);
  background:var(--cy-08); border:1px solid var(--cy-25);
  font:900 24px/1 var(--font-display); color:var(--accent-cyan);
  font-variant-numeric:tabular-nums;
}
.rules-card__t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.rules-card__t strong{ font:800 15px/1.2 var(--font-display); color:var(--text-primary);
  letter-spacing:var(--ls-none, 0); }
.rules-card__t small{ font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.35; }
.rules-card__list{ list-style:none; margin:var(--s-4) 0 0; padding:var(--s-4) 0 0;
  border-top:1px solid var(--cy-06); display:grid; gap:var(--s-3); }
.rules-card__list li{ display:flex; align-items:flex-start; gap:var(--s-3);
  font-size:13px; line-height:1.4; color:var(--text-secondary); }
.rules-card__list li i{ flex:none; font-size:16px; margin-top:1px; color:var(--accent-cyan); }
.rules-card__list strong{ color:var(--text-primary); font-weight:var(--fw-body-sb); }
.rules-card[data-state="empty"]{ border-color:var(--or-35); background:var(--or-08); }
.rules-card[data-state="empty"] .rules-card__n{
  background:var(--or-08); border-color:var(--or-35); color:var(--accent-orange); }

/* ── shared ── */
.eyebrow--warn{ color:var(--accent-orange); }
.rankedOnly{ display:inline; }
body.practice .rankedOnly{ display:none; }
#btnRestartRun .retryhint{ margin-left:var(--s-3); }
.trycount{ display:inline-flex; align-items:center; gap:6px;
  font:600 var(--fs-micro)/1 var(--font-body); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--text-secondary); }
.trycount .ph-fill{ color:var(--accent-cyan); font-size:14px; }
.trycount b{ color:var(--text-primary); font-weight:800; }
body.practice .trycount{ display:none; }

/* ── reward panels (death panel zone + sheet) ── */
.reward-zone{ margin-top:var(--s-2); }
.reward-zone__head .eyebrow{ margin-bottom:var(--s-2); }
.reward-zone__head .fine{ margin:0 0 var(--s-4); color:var(--text-secondary); }
.reward-zone > .btn, #rewardsBody > .btn{ margin-top:var(--s-4); }
#rewardsBody .lead strong{ color:var(--text-primary); }
.reward-balance{ display:flex; align-items:baseline; gap:var(--s-3); margin:var(--s-5) 0 var(--s-4);
  font:600 var(--fs-micro)/1 var(--font-body); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--text-muted); }
.reward-balance__n{ font:900 22px/1 var(--font-display); color:var(--accent-orange); letter-spacing:0; }
.reward-zone .reward-balance{ display:none; }   /* the zone's heading already says it */
.reward-grid{ display:grid; gap:var(--s-3); }
.reward-grid > .reward-balance + .reward-grid{ margin-top:0; }
.reward-card{
  padding:var(--s-4); border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-border);
}
.reward-card__head{ display:flex; align-items:center; gap:var(--s-3); }
.reward-card__head i{ font-size:18px; color:var(--accent-cyan); }
.reward-card h3{ margin:0; font:800 14px/1.2 var(--font-display); color:var(--text-primary); }
.reward-card p{ margin:6px 0 0; font-size:13px; line-height:1.4; color:var(--text-secondary); }
.reward-card__btn{ margin-top:var(--s-4); min-height:var(--tap-min); font-size:13px; }
.reward-card.is-done{ opacity:.7; }
.reward-done{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-3);
  font:600 var(--fs-micro)/1 var(--font-body); letter-spacing:var(--ls-micro);
  text-transform:uppercase; color:var(--accent-cyan); }
.ref-progress{ height:6px; margin-top:var(--s-4); border-radius:var(--r-pill); background:var(--cy-08); overflow:hidden; }
.ref-progress span{ display:block; height:100%; background:var(--accent-cyan); border-radius:inherit; }
.ref-meta{ margin-top:var(--s-3); }
/* on the death panel space is tight: two columns where there is room */
@media (min-width:520px){ .reward-grid--compact .reward-grid{ grid-template-columns:1fr 1fr; } }

/* ── practice-first sheet ── */
.rules-update-list{ display:grid; gap:var(--s-4); margin:var(--s-5) 0 var(--s-6); }
.rules-update-list p{ display:flex; align-items:flex-start; gap:var(--s-4); margin:0;
  font-size:var(--fs-body); line-height:1.45; color:var(--text-secondary); }
.rules-update-list i{ flex:none; font-size:20px; color:var(--accent-cyan); margin-top:1px; }
.rules-update-list strong{ color:var(--text-primary); }
.rules-update-go{ margin-top:var(--s-3); }

@media (min-width:700px) and (max-height:720px){
  .rules-card{ margin-top:8px; padding:10px var(--s-4); }
  .rules-card__list{ margin-top:10px; padding-top:10px; gap:6px; }
}
/* the card follows the buttons: it must never push Start game below the fold */
.hero__cta + .rules-card{ margin-top:var(--s-5); }
@media (min-width:1024px){
  .rules-card__list{ grid-template-columns:repeat(3, 1fr); gap:var(--s-4); }
  .rules-card{ max-width:none; }
}