/* ============================================================
   TOKENS, three layers. Components consume the semantic layer
   only; zero hardcoded hex below this block.
   Legend (fixed, reused page-wide):
     gold   = the currency, escrow, prize pool
     ember  = players and entry fees; "Coming Soon" forge status
     teal   = winners and payouts; "Live" status
     violet = developer share, Dungeon Labs; "Teaser" status
   ============================================================ */
:root{
  /* --- primitive --- */
  --p-graphite-975:#0d0f13;
  --p-graphite-850:#1a1e26;
  --p-paper-50:#f2efe8;
  --p-ember-300:#ff7a59;
  --p-teal-300:#4fd1b5;
  --p-violet-300:#b699ff;
  --p-graphite-760:#232a36;
  --p-graphite-995:#07080b;
  --p-coin-hi:#f7d372;
  --p-coin-mid:#e6b845;
  --p-coin-lo:#c08d1e;
  --p-coin-deep:#7a5a08;
  --p-relief-900:#433709;
  --p-relief-key:#f6ce55;
  --p-line-warm-dark:rgba(50,42,28,.32);

  /* --- semantic --- */
  --surface:var(--p-graphite-950);
  --surface-deep:var(--p-graphite-975);
  --surface-raised:var(--p-graphite-900);
  --surface-panel:var(--p-graphite-850);
  --surface-inset:var(--p-graphite-800);
  --surface-veil:color-mix(in srgb, var(--p-graphite-975) 88%, transparent);
  --flip-surface:var(--p-paper-100);
  --metal-hi:var(--p-graphite-760);
  --metal-lo:var(--p-graphite-995);
  --metal-edge:var(--p-graphite-800);
  --spark:var(--p-gold-160);
  --coin-hi:var(--p-coin-hi);
  --coin-mid:var(--p-coin-mid);
  --coin-lo:var(--p-coin-lo);
  --coin-deep:var(--p-coin-deep);
  --relief:var(--p-relief-900);
  --relief-key:var(--p-relief-key);
  --ink:var(--p-white);
  --ink-muted:var(--p-mist-300);
  --line:var(--p-line-cool);
  --accent-text:var(--p-gold-300);
  --accent-fill:var(--p-gold-300);
  --accent-press:var(--p-gold-500);
  --on-accent:var(--p-gold-ink);
  --legend-gold:var(--p-gold-300);
  --legend-ember:var(--p-ember-300);
  --legend-teal:var(--p-teal-300);
  --legend-violet:var(--p-violet-300);
  --motion-base:220ms;
  color-scheme:dark;
}
/* S4 teardown is the page's single dark-to-light flip (warm light gray). */
.lit{
  --surface:var(--p-paper-100);
  --surface-deep:var(--p-paper-200);
  --surface-raised:var(--p-paper-50);
  --surface-panel:var(--p-paper-50);
  --surface-inset:var(--p-paper-200);
  --ink:var(--p-ink-warm);
  --ink-muted:var(--p-ink-warm-mut);
  --line:var(--p-line-warm-dark);
  --accent-text:var(--p-gold-700);
  --legend-gold:var(--p-gold-700);
  --legend-ember:var(--p-ember-700);
  --legend-teal:var(--p-teal-700);
  --legend-violet:var(--p-violet-700);
}

/* --- component layer --- */
*{box-sizing:border-box;margin:0;padding:0}
/* no CSS smooth scrolling: it feeds back into Lenis's programmatic scroll */
html{scrollbar-color:var(--surface-inset) var(--surface-deep)}
body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:18px;line-height:1.65;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-fill);color:var(--on-accent)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent-fill);color:var(--on-accent);padding:.6rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:12px;top:12px}

h1,h2,h3{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;line-height:.94;letter-spacing:.005em}
.mono{font-family:'Martian Mono',monospace}
.wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- header ---------- */
main,footer{position:relative;z-index:1}
header{position:fixed;inset:0 0 auto 0;z-index:50;height:62px;display:flex;align-items:center;
  background:var(--surface-veil);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:20px;width:100%}
.wordmark{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.ticker{font-family:'Martian Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--on-accent);background:var(--accent-text);padding:3px 9px;border-radius:2px;display:inline-flex;align-items:center}
nav{margin-left:auto}
nav ul{display:flex;gap:26px;list-style:none}
nav a{color:var(--ink-muted);text-decoration:none;font-size:15px;transition:color var(--motion-fast) var(--ease-out)}
nav a:hover{color:var(--accent-text)}
@media (max-width:900px){nav{display:none}}

/* ---------- mobile nav: burger + dropdown panel (<=900px) ---------- */
.burger{display:none;margin-left:auto;width:44px;height:44px;flex:none;position:relative;padding:0;
  background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer}
.burger span{position:absolute;left:11px;right:11px;top:50%;height:1.5px;margin-top:-0.75px;background:var(--ink);
  transition:transform var(--motion-base) var(--ease-out),opacity var(--motion-fast) var(--ease-out)}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(3){transform:translateY(6px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
@media (max-width:900px){.burger{display:block}}
#mnav{display:block;position:fixed;inset:62px 0 auto 0;z-index:49;background:var(--surface-deep);border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
  transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out),
    visibility 0s linear var(--motion-base)}
#mnav.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
#mnav ul{display:block;list-style:none}
#mnav li + li a{border-top:1px solid var(--line)}
#mnav a{display:flex;align-items:center;gap:14px;min-height:56px;padding:15px clamp(20px,4vw,48px);
  font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:700;font-size:26px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);text-decoration:none}
#mnav a:hover,#mnav a:active{color:var(--accent-text)}
/* the row for the section being read carries the eyebrow dash, driven by the
   same scroll derivation as the HUD */
#mnav a.on{color:var(--accent-text)}
#mnav a.on::before{content:"";width:18px;height:2px;flex:none;background:var(--accent-text)}
@media (min-width:901px){#mnav{display:none}}
html[data-rm="1"] .burger span,html[data-rm="1"] #mnav{transition:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:2px;
  font:inherit;font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out)}
.btn.btn-sm{min-height:40px;padding:8px 16px;font-size:14px}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--accent-fill);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-press)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent-text);color:var(--accent-text)}

/* ---------- HUD ---------- */
/* the section indicator sits on the content side; the right gutter belongs to the coin */
#hud{position:fixed;left:18px;bottom:18px;z-index:55;font-family:'Martian Mono',monospace;font-size:12px;line-height:1.8;
  background:var(--surface-veil);border:1px solid var(--line);padding:10px 14px;color:var(--ink-muted);min-width:250px}
#hud .k{color:var(--accent-text)}
#hud .sec{color:var(--ink)}
#hud.off{opacity:0;transition:opacity var(--motion-base) var(--ease-out);pointer-events:none}
@media (max-width:900px){#hud{display:none}}

/* ---------- hero ---------- */
#hero{min-height:100dvh;display:flex;align-items:center;position:relative;
  background:radial-gradient(1200px circle at 78% 40%, var(--surface-raised), var(--surface) 60%)}
#hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:80px;padding-bottom:40px;width:100%}
#hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:28px;color:var(--ink-muted);font-size:13px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
#hero .eyebrow .mark{color:var(--accent-text);font-size:16px;line-height:1}
#hero h1{font-size:clamp(40px,5.6vw,86px);line-height:1.02}
#hero h1 .row{display:block;white-space:nowrap}
#hero h1 .row.take{color:var(--accent-text)}
#hero .hero-rule{width:64px;height:1px;margin-top:28px;background:var(--line)}
#hero .sub{margin-top:26px;max-width:38ch;color:var(--ink-muted);font-size:clamp(17px,1.45vw,19px);line-height:1.6}
#hero .ctas{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
#hero .btn{min-height:46px;padding:11px 20px;font-family:'Martian Mono',monospace;font-size:13px;line-height:1.1;letter-spacing:.025em;text-transform:uppercase}

/* ---------- the resident instrument ----------
   One die lives on the page. Mobile: in the hero flow. Tablet: absolute in the
   hero's right column. Desktop >=1100px: fixed in a page-wide right gutter,
   persisting across sections and re-reading per section (its center, segment
   emphasis, rotation, and reading line change); it yields during the S4 flip
   and retires at the footer. */
/* 32px, matching the hero's own largest step (sub -> ctas). The 8px this
   replaced left the die crowding the buttons on the stacked layout; above
   900px the die is positioned out of flow and this margin is overridden. */
/* the die is decoration — it holds no link, button or focusable node. It is a
   400x478 fixed box over the right of the page, so without this it swallows
   clicks on whatever sits under it. `away` only fades the inner tween slots;
   the container itself never gets the class, so the rule below can never be
   what stops it. */
#diedock{pointer-events:none}
#diedock{position:static;margin:32px auto 0;width:min(78vw,380px);transition:opacity .3s var(--ease-out)}
#diedock.away{opacity:0}
#diedock svg{width:100%;height:auto;display:block}
/* dimensional instrument (graphite, R5 shell) carrying a real 3D gold coin
   medallion at its center: own thickness, stronger parallax, cast shadow */
.c3d{perspective:1100px}
.c3d-inner{position:relative;transform-style:preserve-3d;transform:rotateX(4deg) rotateY(-6deg)}
.c3d-inner svg{position:relative;transform:translateZ(14px)}
.c3d-back{position:absolute;inset:2.5%;border-radius:50%;transform:translateZ(-16px);
  background:radial-gradient(circle at 40% 32%, var(--metal-edge), var(--metal-lo) 78%)}
.c3d-rim{position:absolute;inset:1%;border-radius:50%;transform:translateZ(-6px);
  background:radial-gradient(circle at 38% 30%, var(--metal-hi), var(--metal-lo) 85%)}
.c3d-shadow{height:22px;margin:2px auto 0;width:62%;border-radius:50%;
  background:radial-gradient(closest-side, var(--metal-lo), transparent 72%);
  filter:blur(10px);opacity:.8}
/* the ghost coin: fixed behind content on narrow screens, washed out and blurred */
#coinghost{position:fixed;z-index:0;pointer-events:none;display:none;
  right:-16vw;top:50%;width:88vw;aspect-ratio:1;margin-top:-44vw;border-radius:50%;
  background:radial-gradient(circle at 40% 34%, var(--coin-mid), var(--coin-lo) 58%, var(--coin-deep) 88%, transparent 92%);
  filter:blur(18px) saturate(.6);opacity:.34;
  transition:transform 1.1s var(--ease-out), opacity .55s var(--ease-out);will-change:transform}
#coinghost.away{opacity:0}
#coinghost img{position:absolute;left:50%;top:50%;width:44%;transform:translate(-50%,-50%);
  filter:blur(3px) saturate(.5) brightness(.7);opacity:.85}
@media (max-width:1099px){#coinghost{display:block}}
html[data-rm="1"] #coinghost{transition:none}
/* the medallion: a coin object floating above the instrument center */
.coinmed{position:absolute;left:50%;top:48.5%;width:44%;aspect-ratio:1;margin:-22% 0 0 -22%;
  transform-style:preserve-3d;transform:translateZ(46px);pointer-events:none}
.coinmed-cast{position:absolute;inset:-4%;border-radius:50%;transform:translateZ(-28px) translate(10px,14px);
  background:radial-gradient(closest-side, var(--metal-lo) 40%, transparent 74%);filter:blur(7px);opacity:.85}
.coinmed-back{position:absolute;inset:1.5%;border-radius:50%;transform:translateZ(-8px);
  background:radial-gradient(circle at 40% 32%, var(--coin-mid), var(--coin-lo) 66%, var(--coin-deep) 98%)}
.coinmed-edge{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.coinmed-edge span{position:absolute;left:50%;top:50%}
.coinmed-fill{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 40% 32%, var(--coin-lo), var(--coin-deep) 85%)}
.coinmed-face{position:absolute;inset:0;transform:translateZ(8px)}
.coinmed-face svg{width:100%;height:100%;display:block}
.coinmed-core{position:absolute;inset:0;transform-style:preserve-3d;opacity:0}
@media (hover:hover) and (pointer:fine){
  .gmedal img{transition:transform .25s var(--ease-out)}
  .rrow:hover .gmedal img{transform:scale(1.16) rotate(-8deg)}
  .rrow[data-die="db"]:hover .gmedal img{transform:scale(1.16) rotate(26deg)}
}
.coinmed-core{position:absolute;inset:0;transform-style:preserve-3d;opacity:0}
.dockcap{margin-top:6px;text-align:center;font-size:11px;letter-spacing:.11em;color:var(--ink-muted);line-height:2}
.dockcap .rd{color:var(--accent-text);font-size:13px;letter-spacing:.16em}
@media (max-width:899px){
  #hero{flex-direction:column;justify-content:center}
  #hero .wrap{grid-template-columns:1fr;padding-top:104px;padding-bottom:0}
}
@media (min-width:900px) and (max-width:1099px){
  #diedock{position:absolute;top:50%;right:3vw;transform:translateY(-50%);width:min(36vw,380px);margin:0}
}
@media (min-width:1100px){
  #diedock{position:fixed;top:50%;right:max(28px,calc((100vw - 1220px)/2 + 28px));transform:translateY(-50%);width:400px;margin:0;z-index:30}
  #hero .wrap{grid-template-columns:1fr;padding-right:500px}
  #games .wrap,#assurance .wrap,#faq .wrap,#close .wrap{padding-right:500px}
  /* room for the die to read GRID before the money band reaches its zone:
     the dissipate trigger is contact-based, so the last roster row needs
     clear track between its reading window and the band's approach */
  #games.band{padding-bottom:380px}
}

/* die shared styles */
.die .ring{fill:none;stroke:var(--ink-muted);stroke-width:1.5}
.die .tickring{fill:none;stroke:var(--ink-muted);stroke-width:12;opacity:.6}
.die .tickring.fine{stroke-width:7;opacity:.3}
.die .spoke{stroke:var(--ink-muted);stroke-width:1.5;opacity:.55}
.die .seg{fill:none;stroke-width:5}
.die .seg.gold{stroke:var(--legend-gold)}
.die .seg.ember{stroke:var(--legend-ember)}
.die .seg.teal{stroke:var(--legend-teal)}
.die .seg.violet{stroke:var(--legend-violet)}
.die .inscr{font-family:'Martian Mono',monospace;font-size:17px;font-weight:700;letter-spacing:.13em;fill:var(--ink);opacity:.92}
.die .pulse{fill:none;stroke:var(--accent-text);stroke-width:2;opacity:0}
.die .glyphc{color:var(--accent-text)}

.px{image-rendering:pixelated}
/* engraved section glyphs + real-art game medallions */
.gmedal{width:96px;height:96px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--surface-panel);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gmedal img{width:108px;height:108px;flex:none}

/* ---------- sections ---------- */
section{position:relative}
section > .wrap{position:relative}
/* per-section instrument-paper textures (very faint; the die's absence on small
   screens is carried by these grounds instead) */
#fieldbg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#games::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 26px)}
#close::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 54px)}
/* the pointer carries a lamp: each ground brightens to gold around the cursor,
   in its own pattern (revealed via a moving radial mask on a bright twin layer) */
#games::after,#close::after{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:0;transition:opacity .35s var(--ease-out);
  -webkit-mask-image:radial-gradient(260px circle at var(--gx,-999px) var(--gy,-999px), black, transparent 72%);
  mask-image:radial-gradient(260px circle at var(--gx,-999px) var(--gy,-999px), black, transparent 72%)}
#games::after{background:repeating-linear-gradient(135deg, var(--accent-text) 0 1px, transparent 1px 26px)}
#close::after{background:repeating-linear-gradient(90deg, var(--accent-text) 0 1px, transparent 1px 54px)}
#games.lamp::after,#close.lamp::after{opacity:.3}
html[data-rm="1"] #games::after,html[data-rm="1"] #close::after{display:none}
.band{padding:clamp(76px,10vw,150px) 0}
.bandtitle{font-size:clamp(44px,6.2vw,92px);margin-bottom:16px}
.bandkicker{color:var(--ink-muted);max-width:58ch;margin-bottom:54px;font-size:19px}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- S4 assurance strip ---------- */
#assurance{background:var(--surface-deep)}
/* three rows, not three columns: the resident die reserves a 500px gutter on this
   band, so a 3-up strip squeezed each claim into 224px and wrapped it to 3 lines */
.assure{border-top:1px solid var(--line)}
/* emblem scroll pacing, golden-ratio step (233 x 1.618 = 377) */
.acell{border-bottom:1px solid var(--line);padding:26px 0 28px;min-height:377px;display:flex;flex-direction:column;justify-content:center}
.acell .idx{font-family:'Martian Mono',monospace;font-size:12px;color:var(--accent-text);letter-spacing:.2em}
.acell h3{font-size:clamp(26px,2.1vw,34px);margin:12px 0 0;line-height:1.15;max-width:26ch}
.acell h3 .tint-gold{color:var(--legend-gold)}
.acell h3 .tint-ember{color:var(--legend-ember)}
.acell h3 .tint-violet{color:var(--legend-violet)}
.acell .proof{margin-top:18px;font-family:'Martian Mono',monospace;font-size:12.5px;color:var(--ink);border:1px dashed var(--line);padding:11px 13px;word-break:break-word}
.deep{margin-top:16px;font-family:'Martian Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-muted);
  text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start;min-height:44px;display:inline-flex;align-items:center}
.deep:hover{color:var(--accent-text);border-color:var(--accent-text)}
@media (max-width:900px){.acell{padding:22px 0 24px;min-height:auto}}

/* ---------- S3 roster ---------- */
#games{background:var(--surface)}
.roster{border-top:1px solid var(--line)}
.rrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(16px,2.5vw,36px);align-items:center;min-height:377px;
  padding:32px 6px;border-bottom:1px solid var(--line);transition:background var(--motion-base) var(--ease-out);position:relative;isolation:isolate}
.rrow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;filter:saturate(.85) brightness(1);background-image:linear-gradient(to right,var(--surface) 0%,var(--surface) 40%,color-mix(in srgb,var(--surface) 18%,transparent) 100%),var(--row-art);background-size:100% 100%,cover;background-position:center,center;background-repeat:no-repeat}
.rrow[data-die="gd"]{--row-art:url("../assets/row-art-gilded-dungeon.jpg")}
.rrow[data-die="db"]{--row-art:url("../assets/row-art-dungeon-breaker.jpg")}
.rrow[data-die="grid"]{--row-art:url("../assets/row-art-grid.jpg")}
.rrow[data-die="gd"]::before{background-position:center,35% center}
.rrow[data-die="db"]::before{background-position:center,center}
.rrow[data-die="grid"]::before{background-position:center,20% center}
.rrow > *{position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
  .rrow:has(.btn):hover{background:var(--surface-raised)}
}
.rrow .gl{display:flex;flex-direction:column;align-items:center;gap:8px}
/* the roster index leads the title (same voice as the assurance idx) */
.rrow .rnum{font-family:'Martian Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent-text)}
/* the play action closes the card at every width: title line, description,
   then the button (rhead dissolves so its children join the column) */
.rrow .rcontent{display:flex;flex-direction:column;align-items:flex-start}
.rrow .rhead{display:contents}
.rrow .rhead .btn{order:3;margin-top:18px}
.rrow .desc{order:2}
.rrow .rtitle{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.rrow h3{font-size:clamp(24px,2.6vw,36px);display:inline}
.rrow .desc{color:var(--ink-muted);font-size:16.5px;max-width:62ch;margin-top:10px}
.rrow .desc .m{display:block;font-family:'Martian Mono',monospace;font-size:12.5px;letter-spacing:.14em;color:var(--ink);margin-bottom:6px;text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:'Martian Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.12em;padding:3px 8px;border:1px solid currentColor;border-radius:2px}
.pill.live{color:var(--legend-teal)}
.pill.soon{color:var(--legend-ember)}
.pill.tease{color:var(--legend-violet)}
@media (max-width:900px){
  /* narrow rows read text-first: content left, medallion right — which also
     parks the copy over the solid end of the row art (it fades in from the
     right), and the medallion over the artwork */
  .rrow{gap:12px;padding:26px 2px;min-height:auto;grid-template-columns:minmax(0,1fr) 72px}
  /* the title line spans the full card so index + name + pill share one
     line; the medallion reserves width only beside the description */
  .rrow .rcontent{display:contents}
  .rrow .rtitle{grid-column:1 / -1;grid-row:1}
  .rrow .desc{grid-column:1;grid-row:2}
  .rrow .gl{grid-column:2;grid-row:2}
  .rrow .rhead .btn{grid-column:1 / -1;grid-row:3;justify-self:start}
  .gmedal{width:72px;height:72px}
  .gmedal img{width:82px;height:82px}
  .rrow::before{background-image:linear-gradient(to right,var(--surface) 0%,var(--surface) 40%,color-mix(in srgb,var(--surface) 18%,transparent) 100%),var(--row-art)}
}

/* ---------- S4 season cycle (pinned scrub + light flip) ----------
   The money story as an instrument, sibling of the hero die: entry fees
   wind onto the escrow wheel as a gold ring, the season seals, the ring
   unwinds into three payout streams, and the next-season share rolls
   back onto the rim. SVG carries structure and labels (theme-aware via
   tokens); the canvas carries the ring, the particles and the pulses.
   Everything the canvas draws is a pure function of scrub progress. */
#circuit{height:320vh}
/* padding-top clears the fixed header so the pinned heading is never veiled */
#circuit .stage{position:sticky;top:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:var(--surface);color:var(--ink);padding-top:66px}
#circuit .lightlayer{position:absolute;inset:0;background:var(--flip-surface);opacity:0;pointer-events:none}
#circuit .wrap{position:relative;z-index:2}
#circuit h2{font-size:clamp(40px,5.4vw,76px)}
#circuit .caption{color:var(--ink-muted);max-width:60ch;margin-top:12px;font-size:17px}
.cyc{position:relative;margin-top:28px}
/* the pinned stage must hold heading + caption + diagram + legend inside
   one viewport: cap the diagram by the height the chrome leaves over */
@media (min-width:901px){
  .cyc{max-width:min(100%,calc((100dvh - 410px)*1.92));margin-left:auto;margin-right:auto}
}
.cycsvg{display:block;width:100%;height:auto}
#cycfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cycsvg text{font-family:'Martian Mono',monospace;font-size:13px;letter-spacing:.1em;fill:var(--ink)}
.cycsvg .sub{font-size:10px;fill:var(--ink-muted);letter-spacing:.05em}
.cycsvg .rail{fill:none;stroke-width:1.5;opacity:.38}
.cycsvg .rail.loop{opacity:.3}
.cycsvg .node{fill:none;stroke-width:2}
.cycsvg .wring{fill:none;stroke:var(--ink-muted);stroke-width:1.5}
.cycsvg .tickring{fill:none;stroke:var(--ink-muted);stroke-width:10;opacity:.55}
.cycsvg .tickring.fine{stroke-width:6;opacity:.3}
.cycsvg .spokes line{stroke:var(--ink-muted);stroke-width:1.5;opacity:.55}
.cycsvg .hub line{stroke:var(--legend-gold);stroke-width:3;stroke-linecap:round}
.cycsvg .gold{stroke:var(--legend-gold)} .cycsvg text.gold{fill:var(--legend-gold);stroke:none}
.cycsvg .ember{stroke:var(--legend-ember)} .cycsvg text.ember{fill:var(--legend-ember);stroke:none}
.cycsvg .teal{stroke:var(--legend-teal)} .cycsvg text.teal{fill:var(--legend-teal);stroke:none}
.cycsvg .violet{stroke:var(--legend-violet)} .cycsvg text.violet{fill:var(--legend-violet);stroke:none}
/* static ring: the no-motion end state (reduced motion, no JS, no anime) */
.cycarc-s{fill:none;stroke:var(--legend-gold);stroke-width:7;opacity:0}
/* the vertical plate exists only for portrait screens; its labels are sized
   for a 520-unit viewBox rendered at phone width */
#cycsvg-v{display:none}
/* phone-size type is wider than the node circles, so every label carries a
   surface-colored under-stroke: the ring reads as breaking behind the
   lettering instead of striking through it (tracks the S4 light flip via
   --surface) */
#cycsvg-v text{font-size:18px;paint-order:stroke;stroke:var(--surface);stroke-width:10;stroke-linejoin:round}
#cycsvg-v .sub{font-size:14px}
html[data-rm="1"] #cycfx{display:none}
html[data-rm="1"] .cycarc-s{opacity:1}
#circuit .legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;font-family:'Martian Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--ink-muted)}
#circuit .legend b{display:inline-block;width:10px;height:10px;margin-right:8px}
@media (max-width:900px){
  #circuit{height:auto}
  #circuit .stage{position:static;height:auto;padding:84px 0}
  /* the stage is a column flexbox and .wrap carries margin:0 auto: auto
     cross-axis margins veto flex stretching, so the wrap falls back to
     fit-content and a wide child inflates it past the viewport (the body
     clips it, cutting the caption off). Pin the wrap to the viewport. */
  #circuit .stage .wrap{margin:0;width:100%;min-width:0}
  /* portrait screens read the season top-to-bottom: the horizontal plate
     swaps for the vertical one and nothing scrolls sideways */
  #cycsvg{display:none}
  #cycsvg-v{display:block}
}

.contractline{margin-top:22px;font-family:'Martian Mono',monospace;font-size:14px;color:var(--ink-muted);border:1px dashed var(--line);padding:14px 0;display:flex;flex-wrap:wrap;align-items:center}
.contractline .k{color:var(--accent-text)}
.contractline .seg{padding:2px 18px;border-left:1px solid var(--line)}
.contractline .seg:first-child{border-left:0}
.launchpad{margin-top:22px;border:1px solid var(--line);background:var(--surface-panel);padding:22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.launchpad .lamp{width:11px;height:11px;flex:none;border:1px solid var(--line)}
.launchpad[data-state="pre"] .lamp{background:var(--surface-inset)}
.launchpad[data-state="live"] .lamp{background:var(--legend-teal)}
.launchpad[data-state="closed"] .lamp{background:var(--legend-ember)}
.launchpad .mono{font-size:13px;letter-spacing:.12em;color:var(--ink)}
.launchpad p{flex-basis:100%;color:var(--ink-muted);font-size:15.5px}

/* ---------- S5 FAQ (from the whitepaper; index tokens throughout) ---------- */
#faq{background:var(--surface)}
#faq .faq{border-top:1px solid var(--line);max-width:66ch}
#faq details{border-bottom:1px solid var(--line)}
#faq summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:16px;position:relative;
  padding:19px 44px 19px 0;font-weight:700;font-size:18px;line-height:1.45;min-height:44px}
#faq summary::-webkit-details-marker{display:none}
#faq .qn{font-family:'Martian Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent-text);flex:none}
#faq summary::after{content:"";position:absolute;right:8px;top:33px;width:10px;height:10px;
  border-right:1.5px solid var(--accent-text);border-bottom:1.5px solid var(--accent-text);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--motion-fast) var(--ease-out)}
#faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
#faq summary:hover{color:var(--accent-text)}
#faq .ans{padding:0 0 22px;color:var(--ink-muted);font-size:16.5px;line-height:1.6;max-width:62ch}
html[data-rm="1"] #faq summary::after{transition:none}

/* ---------- S6 the doors ---------- */
#close{background:var(--surface)}
.doors{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.reviewrow{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding:16px 0;
  font-family:'Martian Mono',monospace;font-size:12.5px;letter-spacing:.06em}
.reviewrow .rk{color:var(--accent-text);letter-spacing:.16em;text-transform:uppercase;flex:0 0 auto}
.reviewrow a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--line);
  min-height:44px;display:inline-flex;align-items:center}
.reviewrow a:hover{color:var(--ink);border-color:var(--accent-text)}
/* the nav's emphasised item. It shares its colour with `nav a:hover`, so
   without a hover of its own, pointing at it does nothing at all. */
.wpout{color:var(--accent-text)!important}
.wpout:hover{color:var(--ink)!important}

/* ---------- footer ---------- */
footer{background:var(--surface);border-top:1px solid var(--line)}
footer .inner{padding:60px 0 44px;display:grid;grid-template-columns:1.4fr 1fr;gap:36px}
footer .fm{font-family:'Big Shoulders Display','Arial Narrow',sans-serif;font-weight:800;font-size:clamp(36px,4.2vw,58px);text-transform:uppercase;line-height:1}
footer .legal{color:var(--ink-muted);font-size:14.5px;max-width:52ch;margin-top:14px}
footer ul{list-style:none;display:grid;gap:10px;justify-self:end;text-align:right}
footer ul a{color:var(--ink-muted);text-decoration:none;font-size:15px;position:relative}
footer ul a:hover{color:var(--accent-text)}
/* the type sets a 16px line: too short to hit on a phone. The overlay takes the
   tap target to 24px without moving anything. Rows sit 40px apart, so adjacent
   targets keep 16px of clearance and never overlap. */
footer ul a::after{content:"";position:absolute;inset:-4px}
footer .base{border-top:1px solid var(--line);padding:16px 0 22px;font-family:'Martian Mono',monospace;font-size:12px;color:var(--ink-muted);letter-spacing:.1em;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){footer .inner{grid-template-columns:1fr}footer ul{justify-self:start;text-align:left}}

/* ---------- entrance states ----------
   Visible is the CSS default: JS adds .gate to hide, the
   observer adds .in to reveal, and a watchdog reveals everything if the
   observer never delivers. An observer failure costs the flourish, never
   the content. .in is declared after .gate so it wins when both are set. */
.rise{opacity:1}
.rise.gate{opacity:0;transform:translateY(26px)}
.rise.in{opacity:1;transform:none;transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}

/* ---------- reduced motion (media query + data-rm mirror for QA) ---------- */
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none}
  #circuit{height:auto}
  #circuit .stage{position:static;height:auto;padding:84px 0}
  #diedock{transition:none}
}
html[data-rm="1"] .rise{opacity:1;transform:none}
html[data-rm="1"] #circuit{height:auto}
html[data-rm="1"] #circuit .stage{position:static;height:auto;padding:84px 0}
/* narrow screens: translucent band grounds so the ghost coin reads through them
   (declared last so it beats the section rules above; text sits above the ghost) */
@media (max-width:1099px){
  #assurance{background:color-mix(in srgb, var(--surface-deep) 48%, transparent)}
  #games,#faq,#close{background:color-mix(in srgb, var(--surface) 42%, transparent)}
  footer{background:color-mix(in srgb, var(--surface) 66%, transparent)}
}
html[data-rm="1"] #diedock{transition:none}