/* ═════════════════════════════════════════════════════════════
   FOMO4D — photographic vaporwave / VHS glitch
   Visual context: ./DESIGN.md · strategy: ./PRODUCT.md
   Zero external requests: no webfonts, no image files — the whole
   scene is painted live in CSS/SVG.
   ═════════════════════════════════════════════════════════════ */

:root {
  /* ground: dusk purple-black, never pure black */
  --ink:      oklch(0.105 0.030 285);
  --ink-2:    oklch(0.155 0.038 288);
  --ink-3:    oklch(0.215 0.045 290);
  --haze:     oklch(0.310 0.052 292);

  /* light: magenta is the only light source */
  --mag:      oklch(0.700 0.285 330);
  --mag-hi:   oklch(0.800 0.230 332);
  --mag-lo:   oklch(0.520 0.230 328);

  --cyan:     oklch(0.840 0.135 205);
  --sun:      oklch(0.800 0.180  50);
  --acid:     oklch(0.870 0.210 150);

  --text:     oklch(0.965 0.016 300);
  --text-2:   oklch(0.800 0.040 298);
  --text-3:   oklch(0.615 0.045 296);

  --font-display:"Avenir Next","Helvetica Neue","Segoe UI",Roboto,"Noto Sans",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --font-num:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;

  /* ambience dials — driven by body.s-* tier classes */
  --ab:1px;            /* chromatic aberration amplitude */
  --noise:.16;         /* grain opacity */
  --gridspeed:5.5s;    /* perspective floor scroll period */

  --ease:cubic-bezier(.16,1,.3,1);
  --shell:min(1180px, 100% - 2.5rem);
  --wide:min(1360px, 100% - 2.5rem);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:4.5rem; }
body {
  margin:0;
  background:var(--ink);
  color:var(--text-2);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── ambience tiers ───────────────────────────────────────── */
body.s-calm     { --ab:1px; --noise:.16; --gridspeed:5.5s; }
body.s-warm     { --ab:2px; --noise:.22; --gridspeed:4s; }
body.s-hot      { --ab:3px; --noise:.30; --gridspeed:1.5s; }
body.s-critical { --ab:4px; --noise:.34; --gridspeed:1s; }

/* ── VHS overlay: scanlines + grain + tracking bar ────────── */
.vhs { position:fixed; inset:0; z-index:9000; pointer-events:none; }
.vhs::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,
    oklch(1 0 0 / .030) 0 1px, transparent 1px 3px);
}
.vhs::after {
  content:""; position:absolute; left:0; right:0; height:14vh;
  background:linear-gradient(180deg, transparent, oklch(1 0 0 / .045) 45%, transparent);
  animation:tracking 8.5s linear infinite;
}
@keyframes tracking { from { top:-16vh; } to { top:104vh; } }

.grain {
  position:fixed; inset:-50%; z-index:8999; pointer-events:none;
  opacity:var(--noise); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .9s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform:translate(0,0); }
  25%  { transform:translate(-3%,2%); }
  50%  { transform:translate(2%,-3%); }
  75%  { transform:translate(-2%,-2%); }
  100% { transform:translate(0,0); }
}

/* ── scene: full-page fixed backdrop — starfield + grid ───── */
.scene { position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.scene::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 60% at 50% 110%, oklch(0.30 0.14 325 / .5) 0%, transparent 62%),
    radial-gradient(60% 45% at 78% -6%, oklch(0.20 0.10 310 / .55) 0%, transparent 70%),
    linear-gradient(180deg, oklch(0.105 0.04 288) 0%, oklch(0.125 0.06 300) 48%,
      oklch(0.185 0.10 318) 78%, oklch(0.24 0.13 325) 100%);
}
/* stars: two inline SVG tiles at different scales — depth without images */
.stars {
  position:absolute; inset:0; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23e8e4f2'%3E%3Ccircle cx='18' cy='32' r='1'/%3E%3Ccircle cx='84' cy='12' r='.7'/%3E%3Ccircle cx='140' cy='58' r='1.2' opacity='.9'/%3E%3Ccircle cx='205' cy='26' r='.7'/%3E%3Ccircle cx='246' cy='84' r='1'/%3E%3Ccircle cx='36' cy='118' r='.8'/%3E%3Ccircle cx='112' cy='146' r='1' opacity='.8'/%3E%3Ccircle cx='178' cy='112' r='.6'/%3E%3Ccircle cx='232' cy='164' r='.9'/%3E%3Ccircle cx='58' cy='204' r='1.1' opacity='.85'/%3E%3Ccircle cx='150' cy='226' r='.7'/%3E%3Ccircle cx='214' cy='238' r='.6'/%3E%3Ccircle cx='96' cy='250' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size:260px 260px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 78%);
  mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 78%);
}
.stars-2 {
  opacity:.32; background-size:470px 470px;
  background-position:130px 60px;
  animation:twinkle 7s ease-in-out infinite;
}
@keyframes twinkle { 50% { opacity:.18; } }

/* jagged mountain silhouettes on the horizon */
.mountains { position:absolute; left:0; right:0; }
.m-far {
  bottom:41%; height:9%;
  background:oklch(0.145 0.055 302);
  clip-path:polygon(0% 100%, 0% 52%, 7% 72%, 14% 40%, 22% 66%, 31% 46%, 40% 74%,
    50% 34%, 60% 64%, 69% 44%, 78% 70%, 87% 50%, 94% 66%, 100% 56%, 100% 100%);
}
.m-near {
  bottom:41%; height:5.5%;
  background:oklch(0.105 0.045 296);
  clip-path:polygon(0% 100%, 0% 70%, 9% 44%, 18% 74%, 28% 52%, 37% 78%, 47% 46%,
    57% 72%, 66% 54%, 76% 80%, 85% 48%, 93% 72%, 100% 60%, 100% 100%);
}

/* the occasional meteor */
.meteor {
  position:absolute; top:10%; left:-8%;
  width:150px; height:2px; opacity:0;
  background:linear-gradient(90deg, transparent, oklch(0.92 0.06 300 / .9));
  transform:rotate(14deg);
  animation:meteor 12s linear infinite 4s;
}
@keyframes meteor {
  0%   { transform:translate(0,0) rotate(14deg); opacity:0; }
  1.5% { opacity:.85; }
  7%   { transform:translate(62vw,17vh) rotate(14deg); opacity:0; }
  100% { opacity:0; }
}
.scene::after {                                    /* veil + corner vignette */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(130% 100% at 50% 38%, transparent 52%, oklch(0.05 0.02 285 / .55) 100%),
    oklch(0.09 0.03 285 / .26);
}
.glowfloor {                                       /* horizon glow line */
  position:absolute; left:0; right:0; bottom:40%; height:14%;
  background:radial-gradient(60% 100% at 50% 100%, oklch(0.72 0.28 330 / .34), transparent 70%);
}
.grid-floor {
  position:absolute; left:-60%; right:-60%; bottom:-6%; height:48%;
  background:
    repeating-linear-gradient(90deg, transparent 0 5.4%, oklch(0.72 0.26 330 / .48) 5.4% 5.55%),
    repeating-linear-gradient(0deg,  transparent 0 46px, oklch(0.72 0.26 330 / .36) 46px 47px);
  transform:perspective(300px) rotateX(76deg);
  transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 26%);
  animation:floorRun var(--gridspeed) linear infinite;
}
@keyframes floorRun { to { background-position:0 0, 0 47px; } }

/* ── giant clock: s-critical only, the countdown IS the page ─ */
#giantClock {
  display:none; position:fixed; inset:0; z-index:1; pointer-events:none;
  align-items:center; justify-content:center;
  font-family:var(--font-num); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:clamp(8rem,26vw,24rem); letter-spacing:-.02em;
  color:oklch(0.80 0.23 332 / .17);
  text-shadow:calc(var(--ab) * -3) 0 oklch(0.84 0.135 205 / .5), calc(var(--ab) * 3) 0 oklch(0.70 0.285 330 / .5);
}
body.s-critical #giantClock { display:flex; animation:flick 1s steps(2) infinite; }
body.s-critical .panel {
  background:oklch(0.14 0.04 310 / .72);
  backdrop-filter:blur(7px) saturate(1.2);
}
@keyframes flick { 50% { opacity:.55; } }

/* ── links / selection / code ─────────────────────────────── */
a { color:var(--mag); text-decoration:none; }
a:hover { color:var(--mag-hi); }
code { font-family:var(--font-num); font-size:.85em; color:var(--cyan); }
::selection { background:var(--mag); color:oklch(0.12 0.03 285); }

/* ── buttons ──────────────────────────────────────────────── */
button {
  font:inherit; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  min-height:2.6rem; padding:.55rem 1rem; border-radius:4px;
  border:1px solid var(--haze); background:transparent; color:var(--text-2);
  cursor:pointer; transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
button:hover:not(:disabled) { color:var(--text); border-color:var(--mag); background:oklch(0.70 0.285 330 / .1); }
button:disabled { opacity:.3; cursor:not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline:2px solid var(--mag); outline-offset:3px; }

#connect { border-color:var(--mag); color:var(--mag); }
#connect:hover { background:var(--mag); color:oklch(0.12 0.03 285); }

.primary-action {
  width:100%; min-height:3.3rem; margin-top:.7rem;
  border:1px solid oklch(0.82 0.24 332 / .8);
  background:linear-gradient(180deg, oklch(0.72 0.29 330), oklch(0.56 0.26 324));
  color:oklch(0.99 0.005 330); font-size:.94rem; letter-spacing:.18em;
  text-shadow:0 1px 8px oklch(0.35 0.18 325 / .8);
  box-shadow:0 0 26px oklch(0.70 0.285 330 / .45), 0 4px 18px oklch(0.05 0.02 285 / .5),
    inset 0 1px 0 oklch(0.9 0.15 332 / .5);
}
.primary-action:hover:not(:disabled) { filter:brightness(1.12); color:oklch(1 0 0); }
.primary-action:disabled { background:oklch(0.30 0.06 310); border-color:var(--haze); box-shadow:none; text-shadow:none; }

/* ── sticky HUD ───────────────────────────────────────────── */
#hud {
  position:sticky; top:0; z-index:100;
  background:oklch(0.105 0.030 285 / .84); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--ink-3);
}
#hud::after {                                      /* glowing hairline under the HUD */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent 4%, oklch(0.70 0.285 330 / .6) 50%, transparent 96%);
}
.hud-row { width:var(--wide); margin:0 auto; height:3.9rem; display:flex; align-items:center; gap:1.2rem; }
.brand { display:flex; align-items:baseline; font-family:var(--font-display); font-weight:200; font-size:1.14rem; letter-spacing:.3em; color:var(--text); }
.brand i { font-style:normal; color:var(--mag); }
.hud-stats { display:flex; gap:1.8rem; margin-right:auto; }
.hud-stat { display:flex; align-items:baseline; gap:.45rem; white-space:nowrap; }
.hud-stat small { color:var(--text-3); font-size:.6rem; letter-spacing:.2em; }
.hud-stat b {
  font-family:var(--font-num); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:.95rem; color:var(--text);
}
#hudClock { text-shadow:calc(var(--ab) * -1) 0 oklch(0.84 0.135 205 / .8), var(--ab) 0 oklch(0.70 0.285 330 / .8); }
body.s-warm #hudClock, body.s-hot #hudClock, body.s-critical #hudClock { color:var(--mag-hi); }
body.s-hot #hudClock, body.s-critical #hudClock { animation:flick 1s steps(2) infinite; }
#hudPot { color:var(--sun); }
/* claim chip — earnings live in a tab, so the HUD advertises them */
.hud-claim {
  min-height:1.9rem; padding:.25rem .7rem; border-radius:4px;
  border:1px solid var(--acid); background:oklch(0.87 0.21 150 / .14);
  color:var(--acid); font-size:.6rem; letter-spacing:.16em;
  box-shadow:0 0 18px oklch(0.87 0.21 150 / .25);
  animation:claimPulse 2.4s ease-in-out infinite;
}
.hud-claim b { font-family:var(--font-num); font-weight:500; font-size:.82rem; margin:0 .15rem; }
.hud-claim:hover:not(:disabled) { background:var(--acid); border-color:var(--acid); color:oklch(0.16 0.04 150); }
.hud-claim[hidden] { display:none; }
@keyframes claimPulse { 50% { box-shadow:0 0 26px oklch(0.87 0.21 150 / .5); } }

.tab-dot {
  display:inline-block; width:.42rem; height:.42rem; margin-left:.4rem;
  border-radius:50%; background:var(--acid); vertical-align:middle;
  box-shadow:0 0 8px var(--acid);
}
.tab-dot[hidden] { display:none; }

/* earnings block at the top of the vault tab */
.earnbox {
  padding:.9rem 1rem 1rem; border-radius:5px;
  border:1px solid oklch(0.87 0.21 150 / .35); background:oklch(0.87 0.21 150 / .06);
}
.earn-figure { margin-top:.15rem; display:flex; align-items:baseline; gap:.4rem; }
.earn-figure b {
  font-family:var(--font-num); font-weight:500; font-size:clamp(1.8rem,4.5vw,2.6rem);
  color:var(--acid); line-height:1;
  text-shadow:0 0 22px oklch(0.87 0.21 150 / .4);
}
.earn-unit { color:var(--acid); font-size:1.1rem; opacity:.75; }
.earnbox .primary-action { margin-top:.8rem; }

.hud-right { display:flex; align-items:center; gap:.5rem; }
.hud-wp { padding:.4rem .55rem; color:var(--text-3); font-size:.62rem; letter-spacing:.16em; }
.hud-wp:hover { color:var(--mag); }
.hud-back {
  padding:.45rem .75rem; border:1px solid var(--mag); border-radius:4px;
  color:var(--mag); font-size:.62rem; letter-spacing:.16em; white-space:nowrap;
}
.hud-back:hover { background:var(--mag); color:oklch(0.12 0.03 285); }
.hud-back i { display:none; font-style:normal; }

/* reference-page header (rules.html) */
.page-head { width:var(--shell); margin:0 auto; padding:clamp(2.6rem,6vw,4.5rem) 0 0; position:relative; z-index:2; }
.page-title {
  margin:0; font-family:var(--font-display); font-weight:200;
  font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.02; letter-spacing:.01em; color:var(--text);
  text-shadow:calc(var(--ab) * -1) 0 oklch(0.84 0.135 205 / .55), var(--ab) 0 oklch(0.70 0.285 330 / .55);
}
.page-deck { max-width:60ch; margin:1.1rem 0 0; color:var(--text-2); font-size:1.06rem; line-height:1.65; }
.page-head + .fold { border-top:0; }

/* table of contents */
.toc { margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.toc a {
  padding:.4rem .7rem; border:1px solid var(--ink-3); border-radius:4px;
  color:var(--text-3); font-size:.7rem; letter-spacing:.06em;
}
.toc a:hover { border-color:var(--mag); color:var(--mag); background:oklch(0.70 0.285 330 / .08); }

/* rule reference tables */
.rule-table { width:100%; border-collapse:collapse; margin-top:1.6rem; }
.rule-table th {
  text-align:left; padding:.5rem .9rem .5rem 0; border-bottom:1px solid var(--haze);
  color:var(--text-3); font-weight:400; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
}
.rule-table td {
  padding:.85rem .9rem .85rem 0; border-bottom:1px solid var(--ink-3);
  color:var(--text-2); font-size:.88rem; line-height:1.6; vertical-align:top;
}
.rule-table tbody tr:last-child td { border-bottom:1px solid var(--haze); }
.rule-table td:first-child { width:15rem; }
.rule-table td b { color:var(--text); font-weight:500; }
.rule-table th.num, .rule-table td.num {
  text-align:right; white-space:nowrap; width:auto;
  font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text);
}
.rule-table td.mono { color:var(--text-3); font-size:.8rem; }
.rule-table em { color:var(--sun); font-style:normal; }

.fold-note {
  max-width:72ch; margin:1.2rem 0 0; color:var(--text-3); font-size:.85rem; line-height:1.68;
}
.fold-note b { color:var(--text-2); font-weight:500; }
.fold-note em { color:var(--sun); font-style:normal; }
.cite {
  display:inline-block; margin-left:.3rem; padding:.1rem .45rem;
  border:1px solid var(--ink-3); border-radius:3px;
  color:var(--cyan); font-family:var(--font-num); font-size:.68rem; white-space:nowrap;
}

@media (max-width:720px) {
  .rule-table td:first-child { width:auto; }
  .rule-table, .rule-table tbody, .rule-table tr, .rule-table td { display:block; width:100%; }
  .rule-table thead { display:none; }
  .rule-table tr { padding:.7rem 0; border-bottom:1px solid var(--ink-3); }
  .rule-table td { border-bottom:0; padding:.15rem 0; }
  .rule-table td.num { text-align:left; }
}
.network { padding:.32rem .6rem; border:1px solid var(--ink-3); color:var(--cyan); font-size:.6rem; letter-spacing:.18em; white-space:nowrap; cursor:help; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  position:relative;
  padding:clamp(1rem,2.2vh,1.8rem) 0 clamp(2.2rem,5vh,3.5rem);
}
.hero > * { position:relative; z-index:2; }

.hero-head { text-align:center; }
.wordmark {
  margin:0; font-family:var(--font-display); font-weight:200;
  font-size:clamp(2.2rem,6vw,4rem); line-height:.98;
  letter-spacing:.16em; text-indent:.16em;
  color:var(--text);
  text-shadow:calc(var(--ab) * -2) 0 oklch(0.84 0.135 205 / .85), calc(var(--ab) * 2) 0 oklch(0.70 0.285 330 / .85);
}
.wordmark i { font-style:normal; color:var(--mag); }
/* split-in entrance: chars rise, unblur, settle (ReactBits SplitText, vanilla) */
.wm-char {
  display:inline-block; opacity:0;
  animation:wmIn .95s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wmIn {
  from { opacity:0; transform:translateY(.5em); filter:blur(7px);
         text-shadow:-10px 0 oklch(0.84 0.135 205 / .9), 10px 0 oklch(0.70 0.285 330 / .9); }
  to   { opacity:1; transform:none; filter:none; text-shadow:none; }
}
.tagline { margin:.5rem 0 0; color:var(--text-3); font-size:clamp(.62rem,1.5vw,.74rem); letter-spacing:.4em; text-transform:uppercase; }

/* pot + clock — the loudest thing on the page */
.pot-hero { margin-top:clamp(.7rem,1.8vh,1.2rem); text-align:center; position:relative; }
.pot-hero::before {                                 /* halo behind the number */
  content:""; position:absolute; left:50%; top:44%; translate:-50% -50%;
  width:min(56vw,620px); height:min(30vh,260px); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, oklch(0.62 0.27 330 / .28), transparent 70%);
}
.pot-label { color:var(--text-3); font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; }
.pot-figure {
  margin-top:.2rem; display:flex; align-items:baseline; justify-content:center; gap:.6rem;
  font-family:var(--font-num); font-weight:500; font-variant-numeric:tabular-nums;
  line-height:.95;
}
.pot-figure b {
  font-weight:500; font-size:clamp(3rem,7.5vw,5.4rem); color:var(--text);
  text-shadow:0 0 24px var(--mag), 0 0 70px oklch(0.70 0.285 330 / .55),
    calc(var(--ab) * -1) 0 oklch(0.84 0.135 205 / .6), var(--ab) 0 oklch(0.70 0.285 330 / .6);
}
.pot-unit { font-size:clamp(1.4rem,3.2vw,2.2rem); color:var(--mag-hi); opacity:.9; }
.pot-sub { margin-top:.2rem; color:var(--text-2); font-size:clamp(.7rem,1.6vw,.82rem); letter-spacing:.14em; text-transform:uppercase; }
.clock-line { margin-top:.35rem; display:flex; align-items:center; justify-content:center; gap:1rem; }
.clock-big {
  font-family:var(--font-num); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,4vw,2.7rem); color:var(--text); letter-spacing:-.01em;
  text-shadow:calc(var(--ab) * -1) 0 oklch(0.84 0.135 205 / .9), var(--ab) 0 oklch(0.70 0.285 330 / .9);
}
body.s-warm .clock-big { color:var(--mag-hi); }
body.s-hot .clock-big, body.s-critical .clock-big { color:var(--mag-hi); animation:jitter .28s steps(2) infinite; }
.clock-big.dead { color:var(--text-3); text-shadow:none; animation:none; }
@keyframes jitter {
  0%   { transform:translate(0,0); }
  33%  { transform:translate(-2px,1px); }
  66%  { transform:translate(2px,-1px); }
  100% { transform:translate(0,0); }
}

.badge { display:inline-block; padding:.2rem .6rem; border:1px solid var(--haze); color:var(--text-2); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; }
.badge.dim { color:var(--text-3); }
.badge.hot { border-color:var(--mag); color:var(--mag-hi); animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.35; } }

/* taunt banner — magenta, full width, rotates */
.taunt {
  width:var(--wide); margin:clamp(.7rem,1.8vh,1.1rem) auto 0;
  padding:.5rem 1.2rem; border-radius:4px;
  border:1px solid oklch(0.85 0.2 332 / .5);
  background:
    repeating-linear-gradient(180deg, oklch(1 0 0 / .05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, oklch(0.70 0.285 330 / .94), oklch(0.58 0.27 324 / .94));
  color:oklch(0.985 0.01 330); text-align:center;
  font-size:clamp(.82rem,2vw,1.02rem); letter-spacing:.1em;
  box-shadow:0 0 34px oklch(0.70 0.285 330 / .4), inset 0 1px 0 oklch(0.95 0.1 332 / .4);
}
.taunt::before { content:"🔑 "; }
body.s-hot .taunt, body.s-critical .taunt { animation:tauntPulse 1.1s steps(2) infinite; }
@keyframes tauntPulse { 50% { filter:brightness(1.35); } }

/* who's winning */
.verdict {
  width:var(--wide); margin:.35rem auto 0; padding:.3rem 0;
  border-bottom:1px solid var(--ink-3);
  color:var(--text-2); font-size:clamp(.78rem,1.9vw,.92rem); letter-spacing:.05em; text-align:center;
}
.verdict b { color:var(--mag); font-weight:400; }
.verdict.you { color:var(--acid); }
.verdict.you b { color:var(--acid); }
.verdict.lost b { color:var(--mag-hi); }

/* ── cockpit: two-column command deck ─────────────────────── */
.cockpit {
  width:var(--wide); margin:clamp(.7rem,1.8vh,1.1rem) auto 0;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1rem,2.4vw,1.8rem); align-items:start;
}
.panel {
  min-width:0; padding:clamp(.85rem,1.8vw,1.2rem); border-radius:6px;
  border:1px solid oklch(0.33 0.03 280 / .9);
  background:linear-gradient(180deg, oklch(0.195 0.026 270 / .95), oklch(0.15 0.02 266 / .93));
  box-shadow:0 12px 44px oklch(0.05 0.02 285 / .55), inset 0 1px 0 oklch(0.42 0.04 285 / .5);
  position:relative; z-index:2;
}
.panel::before {                                   /* hairline accent on top */
  content:""; position:absolute; top:-1px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, oklch(0.70 0.285 330 / .55), transparent);
}
.panel.lit { border-color:oklch(0.70 0.285 330 / .35); box-shadow:0 12px 44px oklch(0.05 0.02 285 / .55), 0 0 34px oklch(0.70 0.285 330 / .16), inset 0 1px 0 oklch(0.42 0.04 285 / .5); }
.panel h3 { margin:.7rem 0 .9rem; font-family:var(--font-num); font-weight:400; font-size:1rem; color:var(--text); }
.panel-kicker { display:block; color:var(--text-3); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; }

/* Buttons carry a 4px radius, so tabs are separate chips with a gap — the old
   shared-seam trick (border-right-width:0 on all but the last) leaves the
   selected chip visibly open on its right edge. */
.tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.4rem; }
.tabs button { font-size:.68rem; min-height:2.15rem; }
.tabs button[aria-pressed="true"] { border-color:var(--mag); color:var(--mag); background:oklch(0.70 0.285 330 / .16); }
.tabpane { margin-top:.6rem; }

/* keys-first buy row */
.keyrow {
  display:flex; align-items:center; gap:.6rem; border-radius:4px;
  border:1px solid var(--haze); background:oklch(0.095 0.03 285);
  padding:.4rem .8rem;
}
.keyrow-icon { font-size:1.3rem; }
.keyrow input {
  flex:1 1 3rem; min-width:0; height:2.6rem; margin:0; padding:0 .3rem;
  border:0; background:transparent; color:var(--text);
  font-family:var(--font-num); font-size:1.55rem; font-weight:500; text-align:right;
}
.keyrow-word { color:var(--text-3); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.keyrow-eth { margin-left:auto; color:var(--text-3); font-size:.78rem; white-space:nowrap; }
.keyrow-eth b { color:var(--sun); font-family:var(--font-num); font-weight:400; }
.keyrow:focus-within { border-color:var(--mag); }

.quick-row { margin:.5rem 0 .2rem; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.35rem; }
.quick-row button { min-height:2.1rem; padding:.3rem; font-size:.68rem; letter-spacing:.06em; }
.warn-line { color:var(--sun); }
.warn-line[hidden] { display:none; }
.keymeta { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.keymeta b { color:var(--text-2); font-family:var(--font-num); font-weight:400; }

/* the 80/20 cost box — every key is 80% ETH + 20% $4D burned */
.costbox {
  margin-top:.5rem; padding:.5rem .75rem .45rem; border-radius:5px;
  border:1px solid oklch(0.70 0.285 330 / .35);
  background:oklch(0.70 0.285 330 / .05);
}
.cost-bar { display:flex; height:7px; border-radius:3px; overflow:hidden; }
.cost-bar .leg-e { flex:0 0 80%; background:linear-gradient(90deg, oklch(0.68 0.13 210), oklch(0.80 0.135 205)); }
.cost-bar .leg-t { flex:0 0 20%; background:linear-gradient(90deg, oklch(0.66 0.28 328), oklch(0.76 0.25 332)); }
.cost-legs { display:flex; justify-content:space-between; align-items:baseline; margin-top:.35rem; gap:.8rem; }
.cost-leg small { display:block; color:var(--cyan); font-size:.6rem; letter-spacing:.16em; }
.cost-leg b { font-family:var(--font-num); font-weight:500; font-size:.98rem; color:var(--text); }
.cost-leg.tok { text-align:right; }
.tok-link {
  display:inline-block; margin-top:.25rem; padding:.14rem .5rem;
  border:1px solid oklch(0.70 0.285 330 / .45); border-radius:3px;
  color:var(--mag-hi); font-size:.6rem; letter-spacing:.08em; white-space:nowrap;
}
.tok-link:hover { background:oklch(0.70 0.285 330 / .15); color:var(--mag-hi); }
.tok-link[hidden] { display:none; }
.cost-leg.tok small { color:var(--mag-hi); }
.cost-leg.tok b { color:var(--mag-hi); }
.pay-seg { margin-top:.45rem; }
.pay-seg button { font-size:.64rem; letter-spacing:.1em; min-height:2rem; }
.payhint { margin-top:.3rem; font-size:.66rem; line-height:1.45; }

/* "?" bubbles */
details.why { display:inline-block; position:relative; }
details.why > summary {
  list-style:none; cursor:help; display:inline-flex; align-items:center; justify-content:center;
  width:1.15rem; height:1.15rem; border:1px solid var(--haze); border-radius:50%;
  color:var(--text-3); font-size:.62rem;
}
details.why > summary::-webkit-details-marker { display:none; }
details.why[open] > summary { border-color:var(--mag); color:var(--mag); }
details.why > *:not(summary) { display:contents; }
details.why[open]::after { content:""; }
details.why[open] {
  display:block; margin:.5rem 0; padding:.7rem .9rem;
  border:1px solid oklch(0.70 0.285 330 / .3); background:oklch(0.70 0.285 330 / .06);
  color:var(--text-2); font-size:.74rem; line-height:1.6; letter-spacing:normal;
  text-transform:none;
}
details.why[open] > summary { position:absolute; top:.5rem; right:.6rem; }

/* team character cards */
.teamhead { margin-top:.8rem; display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.head-link { color:var(--text-3); font-size:.66rem; letter-spacing:.04em; white-space:nowrap; }
.head-link:hover { color:var(--mag); }
.hint a { color:var(--mag); white-space:nowrap; }
.team-grid { margin-top:.45rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; }
.team-grid button {
  min-height:5.8rem; padding:.4rem .25rem .35rem;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.1rem;
  font-size:.64rem; letter-spacing:.14em; color:var(--text-3);
  transition:transform .2s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.team-grid button:hover { transform:translateY(-2px); }
.team-grid button svg { width:42px; height:31px; display:block; opacity:.8; }
.team-grid button .team-art {
  width:48px; height:48px; display:block; object-fit:contain;
  opacity:.85; filter:drop-shadow(0 2px 8px oklch(0.05 0.02 285 / .6));
  transition:opacity .3s var(--ease), filter .3s var(--ease);
}
.team-grid button[aria-pressed="true"] .team-art {
  opacity:1; filter:drop-shadow(0 0 12px oklch(0.70 0.285 330 / .65));
}
#t-body .trow .team-art { width:40px; height:40px; object-fit:contain; }
.team-grid button b { font-weight:400; color:var(--text-2); }
.team-grid button em { font-style:normal; font-size:.56rem; letter-spacing:.02em; text-transform:none; color:var(--text-3); line-height:1.3; }
.team-grid button small { font-size:.54rem; letter-spacing:.05em; text-transform:none; color:var(--text-3); opacity:.75; }
.team-grid button[aria-pressed="true"] { color:var(--text); background:oklch(0.70 0.285 330 / .1); }
.team-grid button[aria-pressed="true"] svg { opacity:1; }
.team-grid button[data-team="0"][aria-pressed="true"] { border-color:oklch(.78 .16 240); box-shadow:inset 0 0 26px oklch(.6 .2 240 / .3), 0 0 16px oklch(.6 .2 240 / .3); }
.team-grid button[data-team="1"][aria-pressed="true"] { border-color:var(--mag);  box-shadow:inset 0 0 26px oklch(.6 .26 330 / .3), 0 0 16px oklch(.6 .26 330 / .3); }
.team-grid button[data-team="2"][aria-pressed="true"] { border-color:var(--acid); box-shadow:inset 0 0 26px oklch(.7 .2 150 / .26), 0 0 16px oklch(.7 .2 150 / .26); }
.team-grid button[data-team="3"][aria-pressed="true"] { border-color:var(--sun);  box-shadow:inset 0 0 26px oklch(.7 .17 50 / .3), 0 0 16px oklch(.7 .17 50 / .3); }
.team-grid button[aria-pressed="true"] b { color:inherit; }

.refline { margin-top:1rem; }

/* fields / inputs */
label.field { display:block; margin-bottom:.9rem; color:var(--text-3); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; }
input {
  width:100%; height:2.9rem; display:block; margin-top:.45rem; padding:0 .85rem;
  border-radius:4px;
  border:1px solid var(--haze); background:oklch(0.095 0.03 285); color:var(--text);
  font-family:var(--font-num); font-size:1rem; outline:0;
  transition:border-color .3s var(--ease);
}
input::placeholder { color:var(--text-3); }
input:focus { border-color:var(--mag); }
input[readonly] { color:var(--text-3); }

/* key-value stacks */
.kv { margin-top:.9rem; }
.kv div { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--ink-3); color:var(--text-2); font-size:.8rem; }
.kv div:last-child { border-bottom:0; }
.kv b { color:var(--text); font-family:var(--font-num); font-weight:400; text-align:right; overflow-wrap:anywhere; }
.kv div.hi b { color:var(--sun); }
.kv div.total { margin-top:.3rem; padding-top:.8rem; border-top:1px solid var(--haze); border-bottom:0; }
.kv div.total b { color:var(--sun); font-size:1.1rem; }
.kv.tall div { padding:.62rem 0; }
.kv.tall div.hi b { font-size:1.35rem; }

.hint { margin-top:.6rem; color:var(--text-3); font-size:.76rem; line-height:1.6; }
.hint.err { color:var(--mag-hi); }
.hint b { color:var(--text-2); font-weight:400; }
.rule { border:0; border-top:1px solid var(--ink-3); margin:1.3rem 0 1rem; }

/* mini money-flow strip */

/* ── the tape ─────────────────────────────────────────────── */
.tape {
  margin:0; padding:0; list-style:none;
  max-height:24rem; overflow-y:auto;
  font-family:var(--font-num); font-size:.74rem; line-height:1.5;
}
.tape li {
  display:flex; align-items:baseline; gap:.55rem;
  padding:.42rem .2rem; border-bottom:1px solid var(--ink-3);
  color:var(--text-2); white-space:nowrap; overflow:hidden;
}
.tape li .t-ic { flex:0 0 auto; }
.tape li .t-tx { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.tape li time { flex:0 0 auto; color:var(--text-3); font-size:.66rem; }
.tape li.k-buy .t-tx { color:var(--text); }
.tape li.k-end .t-tx { color:var(--sun); }
.tape li.k-limit .t-tx, .tape li.k-wd .t-tx { color:var(--text-3); }
.tape li.rgbsplit { animation:split .5s var(--ease); }

/* number bump: RGB split then converge */
.flash { animation:split .62s var(--ease); }
@keyframes split {
  0%   { text-shadow:-10px 0 oklch(0.84 0.135 205 / .95), 10px 0 oklch(0.70 0.285 330 / .95); }
  100% { text-shadow:none; }
}

/* teams tab table */
#t-body .trow {
  display:grid; grid-template-columns:auto 1fr auto; gap:.3rem .8rem; align-items:center;
  padding:.6rem 0; border-bottom:1px solid var(--ink-3);
}
#t-body .trow svg { width:40px; height:30px; }
#t-body .trow b { font-weight:400; color:var(--text); font-size:.8rem; letter-spacing:.12em; }
#t-body .trow em { font-style:normal; color:var(--text-3); font-size:.68rem; display:block; }
#t-body .trow .tnum { display:grid; gap:.15rem; text-align:right; white-space:nowrap; }
#t-body .trow .tnum span { color:var(--text-3); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }
#t-body .trow .tnum b { font-family:var(--font-num); font-weight:500; font-size:.86rem; color:var(--text); margin-left:.35rem; }
#t-body .trow .tnum span:first-child b { color:var(--acid); }
#t-body .trow .tnum span:last-child b { color:var(--sun); }

/* ── below the fold ───────────────────────────────────────── */
.fold {
  width:var(--shell); margin:0 auto; padding:clamp(2.4rem,5vw,4rem) clamp(1.2rem,3vw,2.4rem);
  border:1px solid oklch(0.32 0.03 280 / .7); border-radius:8px;
  background:oklch(0.125 0.03 285 / .86);
  position:relative; z-index:2;
}
.fold + .fold, main .fold:first-of-type { margin-top:clamp(1.6rem,3.5vw,2.6rem); }
main .fold:last-of-type { margin-bottom:clamp(1.6rem,3.5vw,2.6rem); }
/* eyebrow → heading → deck: a real hierarchy, not one flat weight */
.eyebrow {
  margin:0 0 .5rem; display:flex; align-items:center; gap:.7rem;
  color:var(--mag); font-size:.64rem; letter-spacing:.34em; text-transform:uppercase;
}
.eyebrow::after { content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, oklch(0.70 0.285 330 / .5), transparent); }
.fold h2 {
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(2rem,5vw,3.2rem); line-height:1.1; letter-spacing:-.005em; color:var(--text);
}
.fold-copy { max-width:62ch; margin:1rem 0 0; color:var(--text-2); font-size:1.02rem; line-height:1.62; }
.subhead {
  display:flex; align-items:center; gap:.7rem; margin:3rem 0 0;
  font-family:var(--font-display); font-weight:500; font-size:1.06rem;
  letter-spacing:.02em; color:var(--text);
  padding-bottom:.6rem; border-bottom:1px solid var(--ink-3);
}

.steps { margin-top:2.2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); }
.step { padding:1.5rem 1.6rem 1.7rem; background:oklch(0.14 0.03 285 / .92); }
.step-n {
  display:block; font-family:var(--font-num); font-size:1.55rem; font-weight:500;
  color:var(--mag); line-height:1; margin-bottom:.7rem;
  text-shadow:0 0 18px oklch(0.70 0.285 330 / .5);
}
.step b {
  display:block; color:var(--text); font-family:var(--font-display);
  font-weight:500; font-size:1.12rem; letter-spacing:.01em;
}
.step p { margin:.55rem 0 0; color:var(--text-2); font-size:.92rem; line-height:1.6; }
.step p b, .step p em { display:inline; color:var(--sun); font-family:inherit; font-size:inherit; font-weight:600; font-style:normal; }

/* maintenance buttons */
.action-grid { margin-top:1.2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.action-grid button { min-height:4.2rem; padding:.8rem; font-size:.66rem; line-height:1.5; }
.action-grid button em { display:block; margin-top:.3rem; font-style:normal; font-size:.6rem; letter-spacing:.02em; text-transform:none; color:var(--text-3); }

/* rail (spec section) */
.rail { margin:2rem 0 0; }
.rail > div {
  display:grid; grid-template-columns:minmax(9rem,1fr) minmax(7rem,auto) minmax(0,1.4fr);
  gap:.6rem 1.6rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--ink-3);
}
.rail > div:first-child { border-top:1px solid var(--ink-3); }
.rail .k { color:var(--text-3); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.rail .v { margin:0; font-family:var(--font-num); font-size:1.05rem; color:var(--text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.rail .n { color:var(--text-3); font-size:.74rem; }
.rail .v.money { color:var(--sun); }
.rail .v.brand { color:var(--mag); }

.table-scroll { margin-top:1.6rem; overflow-x:auto; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table td { padding:.8rem 1rem .8rem 0; border-bottom:1px solid var(--ink-3); font-size:.78rem; color:var(--text-2); vertical-align:baseline; }
.spec-table td:first-child { width:14rem; color:var(--text-3); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.spec-table td:last-child { font-family:var(--font-num); overflow-wrap:anywhere; }
.spec-table td b { color:var(--mag); font-weight:400; }

/* ── SIM drawer ───────────────────────────────────────────── */
#simDrawer {
  position:fixed; right:1.2rem; bottom:0; z-index:200; width:min(21rem, calc(100vw - 2rem));
  border:1px solid var(--haze); border-bottom:0;
  background:oklch(0.125 0.035 288 / .94); backdrop-filter:blur(10px);
}
#simDrawer.hidden { display:none; }
#simToggle { width:100%; border:0; border-bottom:1px solid var(--ink-3); color:var(--cyan); font-size:.64rem; }
#simDrawer.collapsed #simToggle { border-bottom:0; }
#simDrawer.collapsed .sim-body { display:none; }
.sim-body { padding:1rem 1rem 1.2rem; display:flex; flex-direction:column; gap:1rem; }
.seg { display:grid; grid-auto-flow:column; margin-top:.45rem; gap:.35rem; }
.seg button { min-height:2.3rem; padding:.4rem; font-size:.64rem; }
.seg button[aria-pressed="true"] { border-color:var(--mag); color:var(--mag); background:oklch(0.70 0.285 330 / .14); }
.sim-actions { display:grid; grid-template-columns:1fr; gap:.4rem; }
.sim-actions button { font-size:.62rem; min-height:2.3rem; }

/* ── footer ───────────────────────────────────────────────── */
.app-footer {
  width:var(--shell); margin:0 auto; padding:2rem clamp(1.2rem,3vw,2.4rem) 3rem;
  border-radius:8px 8px 0 0; background:oklch(0.125 0.03 285 / .86);
  border:1px solid oklch(0.32 0.03 280 / .7); border-bottom:0;
  display:flex; justify-content:space-between; gap:2rem; color:var(--text-3); font-size:.7rem;
  position:relative; z-index:2;
}
.app-footer a { color:var(--text-2); letter-spacing:.2em; text-transform:uppercase; }
.app-footer a:hover { color:var(--mag); }
.app-footer-links { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; min-width:0; }
.app-footer > span { max-width:56ch; text-align:right; }

/* ── hot-state tear ───────────────────────────────────────── */
body.s-hot .hero::after, body.s-critical .hero::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent 48%, oklch(0.70 0.285 330 / .16) 48.4%, transparent 49.4%);
  animation:tear 2.6s steps(1) infinite;
}
@keyframes tear { 0%,88% { opacity:0; } 90%,93% { opacity:1; transform:translateY(-18%); } 95% { opacity:1; transform:translateY(26%); } 96%,100% { opacity:0; } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:960px) {
  .cockpit { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .action-grid { grid-template-columns:1fr 1fr; }
  .rail > div { grid-template-columns:1fr auto; }
  .rail .n { grid-column:1 / -1; }
  .app-footer { flex-direction:column; }
  .app-footer > span { max-width:none; text-align:left; }
}
@media (max-width:640px) {
  :root { --shell:calc(100% - 1.6rem); --wide:calc(100% - 1.6rem); }
  .hud-row { height:3.2rem; gap:.4rem; }
  .hud-stats { gap:.55rem; min-width:0; }
  .hud-stat small { display:none; }
  .hud-stat b { font-size:.8rem; }
  /* the hero already shows the pot at full size — the HUD keeps clock + claim */
  .hud-keys, .hud-pot { display:none; }
  .hud-claim { padding:.2rem .4rem; font-size:0; letter-spacing:0; }
  .hud-claim b { font-size:.7rem; margin:0; }
  #connect { padding:.4rem .45rem; }
  .brand { font-size:.82rem; letter-spacing:.12em; }
  .hud-wp { display:none; }
  .hud-back { padding:.32rem .55rem; font-size:.8rem; line-height:1; }
  .hud-back span { display:none; }
  .hud-back i { display:inline; }
  .network { padding:.22rem .35rem; font-size:.52rem; }
  #connect { padding:.4rem .5rem; font-size:.6rem; min-height:2.2rem; }
  .wordmark { letter-spacing:.1em; text-indent:.1em; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .spec-table td:first-child { width:auto; }
  #simDrawer { right:.8rem; }
}

/* ── reduced motion: page goes still, stays fully usable ──── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .grain, .vhs::after, .grid-floor, .stars-2, .meteor, .wm-char, .hud-claim,
  .clock-big, #hudClock, .badge.hot, .taunt, .flash, .tape li.rgbsplit,
  body.s-hot .hero::after, body.s-critical .hero::after,
  #giantClock { animation:none !important; }
  .grain { opacity:.1; }
  .wm-char { opacity:1; }
  body.s-critical #giantClock { display:none; }
}