/* Flappy Robin: dark-only page, tokens from DESIGN.md */
/* Geist and Geist Mono (OFL, /fonts/OFL.txt), self-hosted: Geist is one variable file per subset */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --ink: #110E08;
  --ledger: #1D1A14;
  --rule: #35322D;
  --chalk: #FFFFFF;
  --smoke: #B4B0AA;
  --ash: #888784;
  --neon: #CCFF00;
  --up: #00C805;
  --up-lit: #5CF060;  /* Up green as a lit number: the prize pool only */
  --down: #FF5000;

  --f-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  --t-xs: 0.8rem;     /* 12.8 */
  --t-s: 1rem;        /* 16 */
  --t-m: 1.25rem;     /* 20 */
  --t-l: 1.5625rem;   /* 25 */
  --t-xl: 1.953rem;   /* 31.25 */
  --t-xxl: 2.441rem;  /* 39 */

  --top-h: 56px;
  --gutter: 40px;
  --side: minmax(220px, 280px);
  --gap: clamp(32px, 4.5vw, 80px);
  --row: 36px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* money glow: a near halo and a wide soft one in Up green, drawn around the rendered digits */
  --glow: drop-shadow(0 0 6px rgba(0, 200, 5, 0.4)) drop-shadow(0 0 20px rgba(0, 200, 5, 0.2));
  --glow-hi: drop-shadow(0 0 8px rgba(0, 200, 5, 0.6)) drop-shadow(0 0 28px rgba(0, 200, 5, 0.34));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font: 400 var(--t-s)/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100svh;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
code, .mono { font-family: var(--f-mono); font-weight: 400; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── one column system for header, play, how it works and footer ──
   left 220–280 | game: widest bezel the height allows (chrome 14 × 48 px) | rail 220–280 */
.cols {
  --stage-track: calc((100svh - var(--top-h) - 24px - 48px) * 0.5625 + 14px);
  display: grid;
  grid-template-columns: var(--side) minmax(0, var(--stage-track)) var(--side);
  justify-content: center;
  column-gap: var(--gap);
  padding-inline: var(--gutter);
}


/* ── header: brand | CA over the game | docs + wallet ─── */
.top { height: var(--top-h); align-items: center; border-bottom: 1px solid var(--rule); }
.brand { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 12px; }
.wordmark { display: block; width: 160px; height: 14px; color: var(--chalk); }
.ca-slot { grid-column: 2; justify-self: center; min-width: 0; max-width: 100%; }
.nav { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 24px; color: var(--smoke); }
.nav a { transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--chalk); }

/* CA field: the same box before and after the address exists, so nothing moves */
.ca-field {
  width: 100%; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 6px 0 20px; border-radius: 999px;
  background: var(--ledger); border: 1px solid var(--rule);
  text-align: left;
}
.ca-copy { transition: border-color .15s; }
.ca-copy:hover { border-color: var(--ash); }
.ca-addr { font-size: var(--t-m); color: var(--chalk); letter-spacing: -0.01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ca-action {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; min-width: 80px; padding: 0 16px; border-radius: 999px;
  background: var(--neon); color: var(--ink); font-weight: 600; font-size: 0.875rem;
}
.ca-copy.is-copied .ca-action::before {
  content: ''; width: 10px; height: 6px; margin-top: -3px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}
.ca-field.is-soon .ca-addr { color: var(--ash); }
.ca-field.is-soon .ca-action { background: none; color: var(--ash); font-weight: 500; min-width: 0; }
.ca-pill { height: 40px; width: auto; gap: 12px; padding: 0 4px 0 16px; }
.ca-pill .ca-k { flex: none; color: var(--ash); font-size: var(--t-xs); font-weight: 500; }
.ca-pill .ca-addr { font-size: 0.9375rem; }
.ca-pill .ca-action { height: 30px; min-width: 64px; padding: 0 14px; font-size: var(--t-xs); }
.ca-pill.is-soon { padding-right: 16px; }
.ca-pill.is-soon .ca-action { padding: 0; }

/* wallet: Connect (chalk, neon stays a signal), then the account pill and its menu */
.wallet { position: relative; }
.btn-connect {
  height: 36px; padding: 0 16px; border-radius: 999px; background: var(--chalk); color: var(--ink);
  font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: background-color .15s;
}
.btn-connect:hover { background: #E8E7E4; }
.btn-connect:disabled { background: var(--rule); color: var(--smoke); }
.acct {
  height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-radius: 999px;
  background: var(--ledger); border: 1px solid var(--rule); color: var(--chalk); transition: border-color .15s;
}
.acct:hover, .acct[aria-expanded="true"] { border-color: var(--ash); }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); flex: none; }
.acct.is-wrong .acct-dot { background: var(--down); }
.acct-addr { font-size: 0.8125rem; }
.acct svg { fill: none; stroke: var(--ash); stroke-width: 1.5; }
.pop.menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; transform: none; width: 240px; padding: 8px; display: grid; gap: 2px; }
.menu-head { display: grid; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.menu-addr { font-size: 0.8125rem; color: var(--chalk); }
.menu-net { font-size: var(--t-xs); color: var(--smoke); }
.menu-net.is-wrong { color: var(--down); }
.menu-item { height: 36px; padding: 0 10px; border-radius: 8px; text-align: left; font-size: 0.875rem; color: var(--smoke); }
.menu-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--chalk); }
.menu-item.is-primary { color: var(--chalk); font-weight: 500; }

.demo-tag {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ash); font-size: var(--t-xs); font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.demo-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px dashed var(--ash); }

/* ── play: trading pane ─────────────────────────────── */
.play {
  height: calc(100svh - var(--top-h));
  min-height: 600px;
  grid-template-rows: minmax(0, 1fr);
  padding-block: 12px;
}
.side { align-self: center; height: var(--bezel-h, 816px); min-height: 0; display: flex; flex-direction: column; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 18px; }
.side-head h2 { color: var(--ash); font-size: var(--t-xs); font-weight: 400; line-height: 1.4; }
.k-inline { color: var(--ash); font-size: var(--t-xs); font-weight: 400; }
.tag {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--smoke); font: 500 0.6875rem/1.3 var(--f-sans); vertical-align: 1px;
}

/* odometer: digit windows taller than the glyphs, so a neighbour never peeks in */
.odo { display: flex; height: 1.2em; line-height: 1.2; overflow: hidden; color: var(--chalk); }
.odo-d { display: inline-block; height: 1.2em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 17%, #000 83%, transparent); mask-image: linear-gradient(transparent, #000 17%, #000 83%, transparent); }
.odo-s { display: flex; flex-direction: column; transition: transform 160ms var(--ease-out); }
.odo-s b { font-weight: inherit; height: 1.2em; line-height: 1.2; }
.odo-sep { width: 0.3em; }

/* left: this hour. The pool is the one big number beside the game: US dollars in Up green with a soft glow.
   The glow is a filter on the whole odometer (text-shadow would be cut by each digit's window). */
.pool { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; font-size: var(--t-xxl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pool-odo { color: var(--up-lit); filter: var(--glow); }
.pool-odo.is-rising { animation: pool-swell 1.6s var(--ease-out); }
@keyframes pool-swell { from { filter: var(--glow-hi); } }
.pool-odo .odo-sep { width: 0.26em; }
.pool-unit { color: var(--ash); font-size: var(--t-m); font-weight: 500; letter-spacing: 0; }
.pool-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; font-size: var(--t-xs); }
.pool-eth { color: var(--smoke); font-variant-numeric: tabular-nums; }

/* money cells: dollars first, the ETH beside or under them, smaller and quiet */
.m-usd { font-variant-numeric: tabular-nums; }
.m-eth { color: var(--ash); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ends b { color: var(--chalk); font-size: var(--t-s); font-weight: 500; font-variant-numeric: tabular-nums; }

/* the 50 / 25 / 10 / 9 / 6 split, drawn to scale; your share is the brightest (neon stays for signals) */
.split { display: flex; gap: 2px; height: 6px; margin: 20px 0 8px; }
.split i { background: var(--rule); border-radius: 1px; }
.split i:nth-child(1) { flex: 50; } .split i:nth-child(2) { flex: 25; } .split i:nth-child(3) { flex: 10; }
.split i:nth-child(4) { flex: 9; } .split i:nth-child(5) { flex: 6; }
.split i.is-filled { background: var(--ash); }
.split i.is-you { background: var(--chalk); }

.ladder { display: grid; }
.lad {
  position: relative; height: 36px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto minmax(64px, auto); column-gap: 8px; align-items: center;
  border-bottom: 1px solid var(--rule); font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.lad-rank { color: var(--ash); font-weight: 500; }
.lad-who { min-width: 0; display: flex; align-items: center; white-space: nowrap; color: var(--smoke); }
/* the address gives way before the Review tag does */
.lad-who > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lad-who .tag { flex: none; }
.lad-addr { font-size: 0.8125rem; }
.lad-you { color: var(--chalk); font-weight: 600; }
.lad-empty { color: var(--ash); }
.lad-score { color: var(--chalk); font-weight: 500; text-align: right; }
.lad-eth { display: grid; justify-items: end; color: var(--chalk); text-align: right; line-height: 1.15; }
.lad-eth .m-usd.is-eth { color: var(--smoke); }
.lad-eth .m-eth { font-size: 0.6875rem; }
.lad-eth .m-usd.is-eth + .m-eth { display: none; }
.lad.is-empty .lad-eth, .lad.is-empty .lad-eth .m-usd { color: var(--ash); }
.lad.is-you::before { content: ''; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 2px; background: var(--neon); }
.lad.is-extra { border-top: 1px dashed var(--rule); margin-top: -1px; }
.lad.is-chase .lad-score { color: var(--smoke); font-weight: 400; }
.lad.is-chase .lad-addr { color: var(--ash); }
.lad:nth-child(6) { margin-top: 12px; border-top: 1px solid var(--rule); }

.result { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; margin-top: 8px; padding-top: 16px; }
.result dt { color: var(--ash); font-size: var(--t-xs); }
.result dd { font-size: var(--t-l); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.result dd small { color: var(--ash); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; }
.result dd .m-eth { display: block; margin-top: 2px; font-weight: 400; }
.result dd .m-usd.is-eth + .m-eth { display: inline; margin: 0; }

/* ── stage ─────────────────────────────────────────── */
.stage-col { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; min-width: 0; }
.stage-sizer { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; visibility: hidden; pointer-events: none; min-height: 0; }
.bezel {
  grid-area: 1 / 1;
  position: relative;
  padding: 6px 6px 0;
  border-radius: 20px;
  background: var(--ledger);
  border: 1px solid var(--rule);
}
.screen {
  position: relative; border-radius: 14px; overflow: hidden; background: #0B0906;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.screen:focus-visible { outline-offset: 3px; }
.screen canvas { display: block; width: 432px; height: 768px; image-rendering: pixelated; image-rendering: crisp-edges; }

/* boot overlay */
.boot {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--ink);
  background-image:
    linear-gradient(var(--ledger) 1px, transparent 1px),
    linear-gradient(90deg, var(--ledger) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center;
  transition: opacity .2s ease-out;
  cursor: default;
}
.boot.is-leaving { opacity: 0; }
.boot-inner { width: min(220px, 78%); display: grid; gap: 22px; justify-items: start; }
.boot-bar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; width: 100%; }
.boot-bar i { aspect-ratio: 1; background: var(--rule); }
.boot-bar i.on { background: var(--chalk); }
.boot-checks { display: grid; gap: 10px; }
.boot-checks li { display: flex; align-items: center; gap: 12px; color: var(--ash); font-weight: 500; font-variant-numeric: tabular-nums; }
.boot-checks i { position: relative; width: 14px; height: 14px; flex: none; }
.boot-checks i::before { content: ''; position: absolute; inset: 4px; background: var(--rule); }
.boot-checks li[data-state="active"] { color: var(--chalk); }
.boot-checks li[data-state="active"] i::before { background: var(--chalk); animation: blink 1.2s steps(2, jump-none) infinite; }
.boot-checks li[data-state="ok"] { color: var(--chalk); }
.boot-checks li[data-state="ok"] i::before {
  inset: 2px 1px 5px 3px; background: none;
  border-left: 2px solid var(--neon); border-bottom: 2px solid var(--neon); transform: rotate(-45deg);
}
.boot-checks li[data-state="fail"] { color: var(--down); }
.boot-checks li[data-state="fail"] i::before, .boot-checks li[data-state="fail"] i::after {
  content: ''; position: absolute; inset: 6px 0 auto; height: 2px; background: var(--down); transform: rotate(45deg);
}
.boot-checks li[data-state="fail"] i::after { transform: rotate(-45deg); }
@keyframes blink { 50% { opacity: 0.25; } }
.boot-msg { display: grid; gap: 14px; justify-items: start; width: 100%; }
.boot-title { font-weight: 500; color: var(--chalk); }
.boot[data-mode="refused"] .boot-title { color: var(--down); }
.boot-detail { width: 100%; color: var(--ash); font-size: var(--t-xs); }
.boot-detail summary { cursor: pointer; width: max-content; list-style: none; }
.boot-detail summary::-webkit-details-marker { display: none; }
.boot-detail summary::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.boot-detail[open] summary::after { transform: rotate(-135deg); margin-bottom: 0; }
.boot-detail summary:hover { color: var(--smoke); }
.boot-detail p { margin-top: 8px; color: var(--smoke); overflow-wrap: anywhere; max-height: 9em; overflow: auto; }
.boot[data-mode="stopped"] { background: rgba(17, 14, 8, 0.88); background-image: none; }
.boot[data-mode="stopped"] .boot-bar, .boot[data-mode="stopped"] .boot-checks { display: none; }
.boot-empty { display: none; place-items: center; }
.boot[data-mode="unpublished"] .boot-inner { display: none; }
.boot[data-mode="unpublished"] .boot-empty { display: grid; }
.btn-ghost {
  height: 32px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); color: var(--chalk); font-weight: 500; font-size: var(--t-xs);
}
.btn-ghost:hover { border-color: var(--ash); }


/* chin: proof chip centred, sound at the edge */
.chin { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; }
.verified {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px;
  color: var(--ash); font-size: var(--t-xs); font-weight: 500; transition: color .15s, background-color .15s;
}
.verified .chk { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; display: none; }
.verified[data-state="ok"], .verified[data-state="preview"] { color: var(--smoke); }
.verified[data-state="ok"] .chk { display: block; stroke: var(--neon); }
.verified[data-state="ok"]:hover, .verified[data-state="preview"]:hover, .verified[aria-expanded="true"] { color: var(--chalk); background: rgba(255, 255, 255, 0.06); }
.verified[data-state="refused"], .verified[data-state="stopped"] { color: var(--down); }
.mute {
  position: absolute; right: 4px; top: 6px;
  width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center;
  color: var(--ash); transition: color .15s, background-color .15s;
}
.mute:hover { color: var(--chalk); background: rgba(255, 255, 255, 0.06); }
.mute svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mute .spk { fill: currentColor; stroke: none; }
.mute .cross { display: none; }
.mute[data-muted="true"] .wave { display: none; }
.mute[data-muted="true"] .cross { display: inline; }
[data-game="none"] .mute { visibility: hidden; }

.pop {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: min(320px, calc(100vw - 32px)); z-index: 5;
  padding: 16px; border-radius: 14px;
  background: var(--ledger); border: 1px solid var(--rule);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.facts { display: grid; gap: 10px; }
.facts div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.facts dt { color: var(--ash); font-size: var(--t-xs); white-space: nowrap; }
.facts dd { font-size: var(--t-xs); color: var(--chalk); text-align: right; font-variant-numeric: tabular-nums; }
.facts a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.facts a:hover { text-decoration-color: var(--chalk); }
.btn-check {
  margin-top: 16px; width: 100%; height: 36px; border-radius: 999px;
  border: 1px solid var(--rule); font-weight: 500; font-size: var(--t-xs);
}
.btn-check:hover:not(:disabled) { border-color: var(--ash); }
.btn-check:disabled { color: var(--ash); }
.check-result { margin-top: 10px; min-height: 1.4em; font-size: var(--t-xs); color: var(--smoke); text-align: center; }
.check-result[data-state="ok"] { color: var(--chalk); }
.check-result[data-state="ok"]::before {
  content: ''; display: inline-block; width: 9px; height: 5px; margin: 0 8px 3px 0;
  border-left: 2px solid var(--neon); border-bottom: 2px solid var(--neon); transform: rotate(-45deg);
}
.check-result[data-state="bad"] { color: var(--down); }


/* the demo marker: the page's own "this is simulated" signifier (dashed ring, §8.7), one word, over the sky corner
   of the frame so it reads on both pixel palettes and never covers the score or the card */
.demo-mark {
  position: absolute; left: 14px; top: 14px; z-index: 4; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px;
  border-radius: 999px; background: rgba(17, 14, 8, 0.66); border: 1px solid var(--rule);
  color: var(--smoke); font-size: 0.75rem; font-weight: 500; line-height: 1;
}
.demo-mark::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px dashed var(--ash); }
.screen.is-demo { cursor: default; }

/* gate: over the get-ready screen only. The card stands on the ground line (the engine draws it at 200 of 256 px),
   in the skyline band, so the wordmark, the robin and the SPACE / TAP hint above it stay whole. Presses outside the
   card fall through to the game, which nudges the card. */
.gate {
  position: absolute; inset: 6px 6px 40px; border-radius: 14px; z-index: 3;
  background: rgba(17, 14, 8, 0.38); pointer-events: none;
}
.gate-card {
  position: absolute; left: 12px; right: 12px; bottom: calc(21.875% + 8px); pointer-events: auto;
  display: grid; justify-items: center; gap: 12px; padding: 16px 18px;
  border-radius: 16px; background: var(--ledger); border: 1px solid var(--rule);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); text-align: center;
}
.gate-title { font-weight: 600; line-height: 1.3; text-wrap: balance; }
.gate-meta { margin-top: -6px; color: var(--smoke); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.gate-meta.is-error { color: var(--down); }
.gate-actions { display: flex; gap: 8px; justify-content: center; }
.gate-actions:not(:has(> :not([hidden]))) { display: none; }
.btn-neon {
  height: 36px; min-width: 112px; padding: 0 20px; border-radius: 999px;
  background: var(--neon); color: var(--ink); font-size: 0.875rem; font-weight: 600;
}
.btn-neon:hover { background: #ADD907; }
.btn-neon:disabled { background: var(--rule); color: var(--smoke); }
a.btn-neon { display: inline-flex; align-items: center; justify-content: center; }
.gate-actions .btn-ghost { height: 36px; display: inline-flex; align-items: center; font-size: 0.875rem; }
/* Copy CA on the hold card answers like the CA field in the header: a check for 1.4 s, same shape, same ink */
.gate-actions .btn-neon.is-copied { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.gate-actions .btn-neon.is-copied::before {
  content: ''; width: 10px; height: 6px; margin-top: -3px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}
.gate-card.is-nudged { animation: nudge .32s var(--ease-out); }
.gate-title[hidden] + .gate-meta { margin-top: 0; }
.gate-check:empty { display: none; }
.gate-check { display: grid; place-items: center; max-width: 100%; overflow: hidden; }

/* ranked run overlay: presses go through to the game; only the result card takes clicks */
.run { position: absolute; inset: 6px 6px 40px; border-radius: 14px; z-index: 3; pointer-events: none; overflow: hidden; }
.run[data-phase="result"] { background: rgba(17, 14, 8, 0.42); }
.run-pill {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px;
  background: var(--ink); border: 1px solid var(--rule); color: var(--chalk);
  font: 600 0.75rem/1 var(--f-mono); letter-spacing: 0.08em; white-space: nowrap;
}
.run-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--smoke); animation: blink 1s steps(2, jump-none) infinite; }
.run-pill[data-kind="sync"] { border-color: var(--neon); }
.run-pill[data-kind="sync"] i { background: var(--neon); }
.run-count {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center;
  font: 600 clamp(4.5rem, 30cqw, 9rem)/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
  color: var(--neon); text-shadow: 0 5px 0 var(--ink), 0 0 28px rgba(204, 255, 0, 0.35);
}
.run { container-type: inline-size; }
.run-count.is-tick { animation: tick .42s var(--ease-out); }
@keyframes tick { from { transform: scale(1.22); opacity: 0.4; } }
.run-card {
  position: absolute; left: 12px; right: 12px; bottom: calc(21.875% + 8px); pointer-events: auto;
  display: grid; justify-items: center; gap: 6px; padding: 18px 18px 16px;
  border-radius: 16px; background: var(--ledger); border: 1px solid var(--rule);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); text-align: center;
}
.run-score { font: 600 var(--t-xxl)/1 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--chalk); }
.run-status { font: 600 0.8125rem/1.2 var(--f-mono); letter-spacing: 0.1em; }
.run-card[data-tone="up"] .run-status { color: var(--up); }
.run-card[data-tone="wait"] .run-status { color: var(--smoke); }
.run-card[data-tone="down"] .run-status { color: var(--down); }
.run-meta { color: var(--smoke); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: pre; }
.run-card .gate-actions { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .run-pill i { animation: none; }
}
@keyframes nudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* wallet picker */
.picker {
  width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: 16px;
  background: var(--ledger); border: 1px solid var(--rule); color: var(--chalk);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.picker::backdrop { background: rgba(8, 6, 3, 0.66); }
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.picker-head h2 { font-size: var(--t-s); font-weight: 600; }
.icon-btn { width: 32px; height: 32px; margin-right: -6px; border-radius: 8px; display: grid; place-items: center; color: var(--ash); }
.icon-btn:hover { color: var(--chalk); background: rgba(255, 255, 255, 0.05); }
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.picker-list { display: grid; gap: 6px; }
.picker-item {
  width: 100%; height: 56px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule); text-align: left; transition: border-color .15s, background-color .15s;
}
.picker-item:hover:not(:disabled) { border-color: var(--ash); background: rgba(255, 255, 255, 0.03); }
.picker-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-wait { color: var(--ash); font-size: var(--t-xs); }
.wmark { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.wmark-mono { display: grid; place-items: center; background: var(--rule); color: var(--chalk); font-weight: 600; }
.picker-empty { display: grid; gap: 12px; padding: 8px 0 4px; color: var(--smoke); }
.picker-get { display: flex; gap: 20px; }
.picker-app { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; }
.picker-error { margin-top: 12px; color: var(--down); font-size: var(--t-xs); }

/* ── rail: the network on top, then settled hours down to the bezel's foot ─── */
.rail { position: relative; }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--ash); font-size: var(--t-xs); font-weight: 500; line-height: 1.4; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.live[data-state="live"] { color: var(--smoke); }
.live[data-state="live"] i { background: var(--neon); box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.14); }
.live[data-state="offline"] i { background: var(--ash); }
.net-block { margin-top: 2px; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px 16px; margin-top: 16px; }
.stats dt { color: var(--ash); font-size: var(--t-xs); line-height: 1.4; white-space: nowrap; }
.stats dd { margin-top: 2px; font-size: var(--t-m); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.stats small { color: var(--ash); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; }
.st-today { grid-column: 1 / 3; }
.st-next { text-align: right; }
.milestone { height: 2px; margin-top: 10px; background: var(--rule); overflow: hidden; }
.milestone i { display: block; height: 100%; background: var(--smoke); transform-origin: left; transform: scaleX(0); transition: transform .4s linear; }

.paid { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
.paid-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin-top: 6px; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.paid-item { border-bottom: 1px solid var(--rule); }
.paid-line {
  width: 100%; height: 36px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 12px; column-gap: 10px; align-items: center;
  text-align: left; font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.paid-chev { fill: none; stroke: var(--ash); stroke-width: 1.4; transition: transform .15s, stroke .15s; }
.paid-line[aria-expanded="true"] .paid-chev { transform: rotate(180deg); stroke: var(--smoke); }
button.paid-line:hover .paid-pool { color: var(--chalk); }
button.paid-line:hover .paid-chev { stroke: var(--chalk); }
.paid-total { margin-left: auto; font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paid-sum .m-usd { color: var(--chalk); font-size: var(--t-s); font-weight: 500; }
.paid-sum .m-eth { margin-left: 2px; }
.demo-tag.is-narrow { display: none; }
.paid-state svg { display: inline-block; fill: none; stroke: var(--up); stroke-width: 1.6; vertical-align: -1px; }
.paid-hour { color: var(--ash); }
.paid-pool { color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paid-pool .m-eth { margin-left: 2px; }
.paid-state { color: var(--smoke); font-size: var(--t-xs); text-align: right; }
.paid-state[data-kind="held"] { color: var(--chalk); }
.paid-state[data-kind="rolled"] { color: var(--ash); }
.is-review .paid-state { grid-column: 3 / 5; color: var(--chalk); }
.winners { padding: 2px 0 8px; }
.win {
  min-height: 34px; padding-block: 3px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 64px 16px; column-gap: 8px; align-items: center;
  font-size: var(--t-xs); font-variant-numeric: tabular-nums;
}
.win-rank { color: var(--ash); padding-left: 2px; }
.win-who { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--smoke); }
.win-who .lad-addr { font-size: 0.75rem; }
.win-eth { display: grid; justify-items: end; color: var(--chalk); text-align: right; line-height: 1.2; }
.win-eth .m-eth { font-size: 0.6875rem; }
.win-eth .m-usd.is-eth + .m-eth { display: none; }
.win-state { color: var(--smoke); text-align: right; }
a.win-state { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a.win-state:hover { color: var(--chalk); text-decoration-color: var(--chalk); }
.win[data-status="held"] .win-state { color: var(--chalk); }
.win[data-status="rejected"] .win-state, .win[data-status="rolled"] .win-state { color: var(--ash); }
.win[data-status="rejected"] .win-eth .m-usd, .win[data-status="rolled"] .win-eth .m-usd { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--rule); }
.win-replay { display: grid; place-items: center; width: 16px; height: 16px; color: var(--ash); border-radius: 4px; }
.win-replay:hover { color: var(--chalk); }
.win-replay svg { fill: currentColor; }
.paid-more { align-self: flex-start; margin-top: 12px; }

/* ── how it works ──────────────────────────────────── */
.how { padding-block: 56px; border-top: 1px solid var(--rule); align-items: start; }
.how-head { display: grid; gap: 8px; justify-items: start; }
.how h2 { font-size: var(--t-m); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.text-link { color: var(--smoke); font-size: var(--t-xs); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.text-link:hover { color: var(--chalk); text-decoration-color: var(--chalk); }
.how-body { grid-column: 2 / 4; display: grid; gap: 32px; }
.how-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; }
.how-row h3 { color: var(--ash); font-size: var(--t-xs); font-weight: 400; line-height: 1.5; padding-top: 2px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; align-content: start; }
.steps .n { grid-row: span 2; color: var(--ash); font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.5; }
.steps b { font-weight: 600; }
.steps span:last-child { color: var(--smoke); font-size: var(--t-xs); }

/* ── footer ────────────────────────────────────────── */
.foot { padding-block: 24px 32px; border-top: 1px solid var(--rule); color: var(--ash); font-size: var(--t-xs); row-gap: 8px; }
.foot p:last-child { grid-column: 2 / 4; justify-self: end; text-align: right; }

.dev-badge {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ink); border: 1px solid var(--down); color: var(--down);
  font-size: var(--t-xs); font-weight: 500;
}
/* the preview label sits on the bezel's top edge, like a sticker on the cartridge */
.dev-badge[data-kind="preview"] {
  position: absolute; right: auto; bottom: auto; left: 50%; top: -11px; transform: translateX(-50%); z-index: 4;
  padding: 0 10px; height: 22px; line-height: 20px; white-space: nowrap; font-size: 0.75rem;
  border-color: var(--rule); color: var(--smoke); background: var(--ink);
}

/* ── narrower desktop ──────────────────────────────── */
@media (max-width: 1279px) {
  :root { --gutter: 28px; --side: minmax(220px, 250px); --gap: 32px; }
  .cols { grid-template-columns: var(--side) minmax(0, 1fr) var(--side); }
  .wordmark { width: 120px; height: 10.5px; }
  .nav { gap: 16px; }
  .pool { font-size: var(--t-xl); }
  .ca-pill .ca-addr { font-size: 0.875rem; }
}
@media (max-width: 1279px) and (min-width: 1100px) {
  .stats dd { font-size: var(--t-s); }
}

/* ── mobile / tablet ───────────────────────────────── */
@media (max-width: 1099px) {
  :root { --top-h: 56px; --gutter: 16px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .top { display: flex; justify-content: space-between; column-gap: 10px; }
  .page-play .wordmark { display: none; }
  .ca-slot { margin-left: auto; }
  .ca-pill { gap: 8px; padding-left: 12px; }
  .nav { gap: 16px; }
  .play {
    height: auto; min-height: 0; display: flex; flex-direction: column; gap: 28px;
    padding-block: 12px 40px;
  }
  .stage-col { order: 1; display: flex; justify-content: center; }
  .screen canvas { width: 288px; height: 512px; }
  .stage-sizer { position: absolute; left: 0; right: 0; top: 0; height: calc(100svh - var(--top-h) - 72px); min-height: 360px; }
  .bezel { margin: 0 auto; }
  .side { height: auto; align-self: center; width: 100%; max-width: max(var(--bezel-w, 100%), 358px); }
  .hour { order: 2; }
  .rail { order: 3; }
  .pool { font-size: var(--t-xl); }
  .lad.is-you::before { left: -8px; }
  .result { margin-top: 0; padding-top: 16px; }
  .stats { grid-template-columns: repeat(3, auto); }
  .stats dd { font-size: var(--t-s); }
  .paid-list { overflow: visible; }
  .demo-tag.is-narrow { display: inline-flex; }
  .how { padding-block: 40px; row-gap: 24px; }
  .how-body { grid-column: 1; gap: 28px; }
  .how-row { grid-template-columns: 1fr; row-gap: 12px; }
  .steps { grid-template-columns: 1fr; row-gap: 16px; }
  .foot { padding-block: 24px 32px; }
  .foot p:last-child { grid-column: 1; justify-self: start; text-align: left; }
}
@media (max-width: 1099px) and (min-width: 600px) {
  .how { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; max-width: calc(var(--bezel-w, 600px) + 2 * var(--gutter)); margin-inline: auto; }
  .how-body { grid-column: 2; }
  .page-play .wordmark { display: block; }
}
@media (max-width: 599px) {
  .ca-pill .ca-addr { display: none; }
}
@media (max-width: 420px) {
  .nav-docs { display: none; }
  .gate-card { gap: 10px; padding: 14px 14px 12px; }
  .gate-card .btn-neon { height: 34px; }
}

/* ── replay viewer ─────────────────────────────────── */
.rp-screen { cursor: default; }
.rp-verdict { display: grid; gap: 6px; margin-top: 18px; }
.rp-score { font: 600 var(--t-xxl)/1 var(--f-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rp-word { font: 600 0.8125rem/1.2 var(--f-mono); letter-spacing: 0.1em; color: var(--smoke); }
.rp-verdict[data-state="ok"] .rp-word { color: var(--up); }
.rp-verdict[data-state="fail"] .rp-word { color: var(--down); }
.rp-verdict[data-state="fail"] .rp-score { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--down); }
.rp-checks { margin-top: 28px; }
.rp-checks li[data-state] { color: var(--chalk); }
.rp-checks li[data-state="fail"] { color: var(--down); }
.rp-checks code { color: var(--smoke); font-size: 0.8125rem; }
.rp-facts { display: grid; gap: 14px; }
.rp-facts dt { color: var(--ash); font-size: var(--t-xs); }
.rp-facts dd { margin-top: 2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rp-facts code { font-size: 0.875rem; }
.rp-chin { gap: 10px; }
.rp-btn {
  height: 28px; min-width: 28px; padding: 0 8px; border-radius: 6px; display: inline-grid; place-items: center;
  color: var(--ash); font-size: var(--t-xs); font-weight: 500; font-variant-numeric: tabular-nums; transition: color .15s, background-color .15s;
}
.rp-btn:not(:disabled):hover { color: var(--chalk); background: rgba(255, 255, 255, 0.06); }
.rp-btn[aria-pressed="true"] { color: var(--chalk); background: rgba(255, 255, 255, 0.08); }
.rp-btn:disabled { opacity: 0.35; cursor: default; }
.rp-btn svg { fill: currentColor; }
.rp-restart svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.rp-play[data-state="play"] .i-pause, .rp-play[data-state="pause"] .i-play { display: none; }
.rp-speed { display: inline-flex; gap: 2px; }
@media (max-width: 1099px) {
  .page-replay .rp-proof { order: 0; }                 /* the verdict first: that is why a replay link gets opened */
  .page-replay .rp-checks { margin-top: 16px; }
  .page-replay .rp-info { order: 3; }
  .rp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── docs ──────────────────────────────────────────── */
.docs-cols { display: grid; grid-template-columns: 200px minmax(0, 68ch); column-gap: 80px; justify-content: center; padding-inline: var(--gutter); }
.page-docs .top { grid-template-columns: 200px minmax(0, 68ch); column-gap: 80px; }
.page-docs .brand { grid-column: 1 / 2; }
.page-docs .nav { grid-column: 2; }
.docs { padding-block: 16px 112px; }
.toc { position: sticky; top: 32px; align-self: start; padding-top: 64px; }
.toc ol { display: grid; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 5px 0 5px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--ash); font-size: var(--t-xs); transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--chalk); }
.toc a.is-current { color: var(--chalk); border-left-color: var(--chalk); }
.prose section { padding-top: 56px; scroll-margin-top: 16px; }
.prose h2 { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px; }
.prose p, .prose li { color: var(--smoke); }
.prose p + p { margin-top: 12px; }
.prose p + table, .prose p + .table-wrap, .prose table + p, .prose .table-wrap + p, .prose ol + p, .prose ul + p,
.prose p + ol, .prose p + ul, .prose table + ul, .prose .table-wrap + .table-wrap, .prose table + ol, .prose ol + table { margin-top: 20px; }
#rewards .kv th { width: 112px; }
.prose b { color: var(--chalk); font-weight: 500; }
.prose code { font-size: 0.875em; color: var(--chalk); overflow-wrap: anywhere; }
.muted, .prose .muted { color: var(--ash); }
.prose .muted { font-size: var(--t-xs); }
.notice { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 4px; color: var(--ash); font-size: var(--t-xs); }
.notice::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.5em; border-radius: 50%; border: 1px solid var(--ash); }
a.inline { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--ash); text-underline-offset: 3px; }
a.inline:hover { text-decoration-color: var(--chalk); }
.prose pre {
  margin: 12px 0 20px; padding: 16px 20px; overflow-x: auto;
  background: var(--ledger); border: 1px solid var(--rule); border-radius: 10px;
  font: 400 0.8125rem/1.7 var(--f-mono); color: var(--smoke); tab-size: 2;
}
.prose pre code { font-size: inherit; color: inherit; overflow-wrap: normal; white-space: pre; }
.prose table { width: 100%; border-collapse: collapse; }
.kv th { width: 1%; padding: 11px 32px 11px 0; text-align: left; vertical-align: baseline; white-space: nowrap; color: var(--ash); font-weight: 400; font-size: var(--t-xs); }
.kv td { padding: 11px 0; vertical-align: baseline; color: var(--chalk); overflow-wrap: anywhere; }
.kv tr + tr > * { border-top: 1px solid var(--rule); }
.facts-table td code, .facts-table td .mono { font-size: 0.8125rem; }
.table-wrap { overflow-x: auto; }
.grid th { padding: 0 20px 10px 0; text-align: left; color: var(--ash); font-weight: 400; font-size: var(--t-xs); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.grid td { padding: 11px 20px 11px 0; vertical-align: top; color: var(--smoke); font-size: 0.875rem; border-bottom: 1px solid var(--rule); }
.grid td:last-child, .grid th:last-child { padding-right: 0; }
.grid td code { font-size: 0.8125rem; }
.table-wrap .grid td code { overflow-wrap: normal; }
.table-wrap .grid td:first-child code { white-space: nowrap; }
.abi td:first-child code { color: var(--ash); }
.list { display: grid; gap: 10px; }
.list li { position: relative; padding-left: 20px; }
.list li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; background: var(--rule); }
.numbered { display: grid; gap: 10px; counter-reset: step; }
.numbered li { position: relative; padding-left: 28px; counter-increment: step; }
.numbered li::before { content: counter(step); position: absolute; left: 0; top: 0; color: var(--ash); font-variant-numeric: tabular-nums; font-weight: 500; }
#token .ca { margin-bottom: 12px; }
#token .ca-field { height: auto; min-height: 52px; padding-block: 6px; }
#token .ca-addr { font-size: 0.8125rem; }

/* ── docs: how the money moves (ARCHITECTURE §8.5c) ──
   Six stations on one horizontal rail, read left to right, with one quiet 20 s loop: a coin walks the rail and draws
   it in money green behind itself, and the dashed arrow returns to Play. Below 600 px the same six stations stack.
   Sizes are viewBox units, so the diagram scales with the column and stays legible at 390 px and 1440 px. */
.flow { margin: 24px 0 0; }
/* one class per variant, never `.flow svg`: a descendant selector would outrank the display switch below */
.flow-wide, .flow-tall { width: 100%; }   /* left-aligned with the prose: the rail starts under the heading */
.flow-wide text, .flow-tall text { font-family: var(--f-sans); }
.flow-wide { display: block; max-width: 700px; }
.flow-tall { display: none; max-width: 360px; }
.f-mid { text-anchor: middle; }
.f-step { font-size: 12px; font-weight: 500; fill: var(--chalk); }
.f-line { font-size: 10.5px; fill: var(--smoke); }
.f-catch { font-size: 10.5px; font-weight: 500; fill: var(--chalk); }
.f-small { font-size: 10.5px; fill: var(--ash); }
.flow-tall .f-step { font-size: 13px; }
.flow-tall .f-line, .flow-tall .f-catch, .flow-tall .f-small { font-size: 11px; }
.f-rail { stroke: var(--rule); stroke-width: 1.5; }
.f-node { fill: var(--ink); stroke: var(--rule); stroke-width: 1.5; }
.f-loop { fill: none; stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 5; }
.f-loop-tip { fill: var(--rule); }
.f-trace { stroke: var(--up-lit); stroke-width: 1.5; stroke-dasharray: 500; stroke-dashoffset: 500; animation: flow-draw 20s ease-in-out infinite; }
.f-coin { animation: flow-coin 20s ease-in-out infinite; }
.f-coin-dot { fill: var(--up-lit); }
.f-coin-halo { fill: none; stroke: var(--up-lit); stroke-width: 1; opacity: 0.3; }
/* stacked: same six stations, 54 units apart instead of 100 (no !important, so the reduced-motion block below wins) */
.f-trace-v { stroke-dasharray: 270; stroke-dashoffset: 270; animation-name: flow-draw-v; }
.f-coin-v { animation-name: flow-coin-v; }
@media (max-width: 599px) {
  .flow-wide { display: none; }
  .flow-tall { display: block; }
}
/* the six stations, as offsets from the first: 0 100 200 300 400 500 */
@keyframes flow-coin {
  0% { transform: translateX(0); opacity: 0; }
  2%, 5% { transform: translateX(0); opacity: 1; }
  14%, 19% { transform: translateX(100px); }
  28%, 33% { transform: translateX(200px); }
  42%, 47% { transform: translateX(300px); }
  56%, 61% { transform: translateX(400px); }
  70%, 88% { transform: translateX(500px); opacity: 1; }
  94%, 100% { transform: translateX(500px); opacity: 0; }
}
@keyframes flow-draw {
  0%, 5% { stroke-dashoffset: 500; opacity: 1; }
  14%, 19% { stroke-dashoffset: 400; }
  28%, 33% { stroke-dashoffset: 300; }
  42%, 47% { stroke-dashoffset: 200; }
  56%, 61% { stroke-dashoffset: 100; }
  70%, 88% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes flow-coin-v {
  0% { transform: translateY(0); opacity: 0; }
  2%, 5% { transform: translateY(0); opacity: 1; }
  14%, 19% { transform: translateY(54px); }
  28%, 33% { transform: translateY(108px); }
  42%, 47% { transform: translateY(162px); }
  56%, 61% { transform: translateY(216px); }
  70%, 88% { transform: translateY(270px); opacity: 1; }
  94%, 100% { transform: translateY(270px); opacity: 0; }
}
@keyframes flow-draw-v {
  0%, 5% { stroke-dashoffset: 270; opacity: 1; }
  14%, 19% { stroke-dashoffset: 216; }
  28%, 33% { stroke-dashoffset: 162; }
  42%, 47% { stroke-dashoffset: 108; }
  56%, 61% { stroke-dashoffset: 54; }
  70%, 88% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (max-width: 1099px) {
  .docs-cols, .page-docs .top { grid-template-columns: minmax(0, 1fr); }
  .page-docs .top { display: flex; }
  .docs { padding-block: 0 72px; }
  .toc { display: none; }
  .prose section { padding-top: 44px; }
  .kv th { padding-right: 16px; }
  #token .ca-field { border-radius: 16px; padding-left: 16px; }
  #token .ca-addr { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
}
/* three-column tables become stacked rows on phones */
@media (max-width: 599px) {
  .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .grid, .grid tbody, .grid tr, .grid td { display: block; }
  .grid tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .grid tbody tr:first-child { border-top: 1px solid var(--rule); }
  .grid td { padding: 0; border: 0; }
  .grid td + td { margin-top: 4px; }
  .grid td:empty { display: none; }
  .table-wrap .grid td code { white-space: normal; overflow-wrap: anywhere; }
  .table-wrap .grid td:first-child code { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* the flowchart at rest: the whole rail drawn, no coin travelling it */
  .f-trace, .f-trace-v { stroke-dashoffset: 0; opacity: 0.6; }
  .f-coin { display: none; }
}