/* MarbleRush: the 2026-09-25 look.
 *
 * Sanjay's brief: Apple-minimal as the base, F1 TV broadcast graphics for the
 * race data, sportsbook energy for betting and winning.
 *
 *   Apple      one quiet glass material, generous radius, Inter, a strict
 *              8-point rhythm, colour only where it means something
 *   F1 TV      the timing tower: position blocks, team-colour stripes,
 *              condensed caps, gaps to the leader in tabular figures, race
 *              control messages, the start-light gantry
 *   Sportsbook the market: big odds, a bet slip, a gold call to action that
 *              glows, and a proper celebration when you win
 *
 * Every panel that sits over the course carries data-hud, and the renderer
 * frames the course into whatever they leave clear (render2d.js resize).
 */

/* The design tokens live in tokens.css (linked first). The names below are the
   OLD ones, kept as aliases so the rest of this file can be restyled piece by
   piece (design/HANDOFF.md section 2). Remove an alias once nothing uses it. */
:root {
  --glass-hi: var(--surface-2);
  --stroke: var(--line);
  --stroke-hi: var(--line-strong);
  --text: var(--text-1);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --gold: var(--accent);
  --gold-2: var(--accent);
  --gold-dim: var(--accent-soft);
  --gold-line: color-mix(in srgb, var(--accent) 34%, transparent);
  --good: #43c98b;               /* odds-up arrow only */
  --bad: #e0564d;                /* odds-down arrow, knockouts (restyled in S3) */
  --ice: #9fe3ff;
  --radius: var(--r-md);
  --radius-s: var(--r-sm);
  /* tokens.css owns --shadow (a colour); the old box-shadow VALUE is --elev. */
  --elev: 0 8px 24px color-mix(in srgb, var(--shadow) 80%, transparent), 0 24px 60px color-mix(in srgb, var(--shadow) 60%, transparent), 0 1px 0 var(--line-soft) inset;
  --display: var(--font-ui);
  --sans: var(--font-ui);
  --cond: var(--font-data);
  --data: var(--font-data);
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;   /* addresses and hashes only */
  /* A panel that is NOT glass: the same warm surface, no blur. At most three
     backdrop-filter panels may be on screen (topbar, tower, market). */
  --panel: color-mix(in srgb, var(--surface-1) 94%, transparent);
  --rail-w: 340px;
  --tower-w: 288px;
  --top-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font: 400 var(--fs-sm)/1.4 var(--font-ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
code { font-family: var(--mono); }
.muted { color: var(--muted); font-weight: 500; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; }
#board { display: block; }
#stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 46%, rgba(14,12,10,.34) 80%, rgba(14,12,10,.66) 100%),
    linear-gradient(to bottom, rgba(14,12,10,.45) 0%, transparent 14%, transparent 82%, rgba(14,12,10,.5) 100%);
}

/* The one glass material: --glass, --blur (12px), a hairline. Hard rule from
   the brief: at most THREE backdrop-filter panels on screen, never nested, the
   canvas animates underneath. So only the top bar, the timing tower and the
   market panel blur; every other panel is the same warm surface without blur. */
.topbar, .tower, .card, .cambar, .banner, .overlay .card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--elev);
}
.topbar, .tower, .card.market {
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* ============================== top bar ============================== */

.topbar {
  position: fixed; z-index: 10; top: 12px; left: 12px; right: 12px; height: var(--top-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 14px 0 18px; border-radius: var(--radius);
}
.brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.lockup { display: flex; align-items: center; gap: var(--s1); margin: 0; flex: none; }
.lockup .mark { display: block; flex: none; }
.lockup .mark-drop { display: none; }
.lockup .word { font: 600 28px/1 var(--font-data); letter-spacing: -0.01em; color: var(--text-1); white-space: nowrap; }
.lockup .word em { font-style: normal; font-weight: 700; color: var(--celebrate); }
.brand-sep { width: 1px; height: var(--s3); background: var(--line-strong); flex: none; }
.brand .tag { font: 600 var(--fs-sm) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.devnet {
  height: var(--s3); display: inline-flex; align-items: center; padding: 0 var(--s1); flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: 700 var(--fs-xs) var(--font-data); letter-spacing: .16em; color: var(--text-2);
}

.clock { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.clock .phase { display: flex; align-items: center; gap: 7px; font: 600 var(--fs-xs) var(--data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.clock strong { font: 700 var(--fs-xl)/1 var(--data); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.live {
  display: none; font: 700 var(--fs-xs) var(--data); letter-spacing: 0.12em; font-style: normal;
  padding: 2px 6px; border-radius: var(--r-xs); background: var(--bad); color: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
body.racing .live { display: inline-block; }
@keyframes pulse { 50% { opacity: 0.55; } }

.topbar .right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.fair {
  display: flex; align-items: center; gap: var(--s1); min-height: var(--tap); padding: 0 var(--s2) 0 var(--s1);
  border-radius: var(--r-pill); color: var(--text-1); background: var(--surface-2); border: 1px solid var(--line-strong);
  font: 600 var(--fs-md) var(--font-ui); white-space: nowrap; cursor: default;
}
.fair svg { flex: none; margin-left: var(--s-half); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fair .dot { font-style: normal; color: var(--text-3); }
.fair code { font: 600 var(--fs-lg) var(--font-data); letter-spacing: .02em; color: var(--text-2); }
.fair.link { cursor: pointer; }
.fair.link:hover { background: var(--surface-3); }
.fair.sealing { color: var(--text-2); border-style: dashed; }
.wallet { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; column-gap: var(--s1); line-height: 1; }
.wallet .lbl { grid-area: 1 / 2; font: 600 var(--fs-xs) var(--font-data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.wallet strong { grid-area: 2 / 1 / 3 / 3; font: 600 var(--fs-xl)/1 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet strong .cur { font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.lowtag {
  grid-area: 1 / 1; height: 20px; display: inline-flex; align-items: center; padding: 0 var(--s-half);
  border: 1px solid var(--text-2); border-radius: var(--r-xs); font: 700 var(--fs-xs) var(--font-data); font-style: normal; letter-spacing: .08em; color: var(--text-1);
}
.wallet:has(.lowtag:not([hidden])) { row-gap: var(--s-half); }
.walletbtn {
  height: var(--tap); display: none; align-items: center; gap: var(--s1); padding: 0 var(--s2) 0 var(--s1); border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-1);
  font: 600 var(--fs-md) var(--font-data); letter-spacing: .04em; cursor: pointer; white-space: nowrap; transition: background .15s, filter .15s;
}
.walletbtn:hover { background: var(--surface-3); }
.walletbtn .av {
  position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: conic-gradient(from 40deg, var(--text-3), var(--text-1), var(--text-3));
}
.walletbtn .av i { display: none; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.walletbtn.low .av i { display: block; }
.walletbtn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
.walletbtn .off, .walletbtn .watch { display: none; }
/* Signed out on desktop: the accent Connect button. */
.walletbtn.out { padding: 0 var(--s3) 0 var(--s2); border: 0; background: var(--accent); color: var(--accent-ink); font: 600 var(--fs-md) var(--font-ui); letter-spacing: 0; }
.walletbtn.out:hover { background: var(--accent); filter: brightness(1.08); }
body.net .walletbtn { display: inline-flex; }
body.net.guest .wallet { display: none; }
/* ---- the wallet card (W1 to W5): centred on desktop, a bottom sheet on phones ---- */
.overlay.sheetov { background: var(--scrim); }
#helpCard { width: min(480px, 100%); }
.sheetcard { width: min(440px, 100%); padding: var(--s3); border-radius: var(--r-xl); background: var(--surface-1); border: 1px solid var(--line-strong); outline: 0; }
.sheetcard .whandle { display: none; }
.sheetcard .wtitle { margin: 0 0 var(--s1); font: 600 var(--fs-lg) var(--font-ui); letter-spacing: -.01em; }
.sheetcard .wnote { margin: 0 0 var(--s1); font: 400 var(--fs-sm)/1.5 var(--font-ui); color: var(--text-2); }
.sheetcard .wnote.dim { color: var(--text-3); }
.sheetcard .wlabel { margin: var(--s2) 0 var(--s1); font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.sheetcard .wlabel:first-child { margin-top: 0; }
.wlist { display: flex; flex-direction: column; gap: var(--s1); margin: var(--s2) 0 var(--s1); }
.walletopt {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--s7); padding: 0 var(--s2); margin: 0; box-sizing: border-box;
  border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface-2); text-decoration: none;
  color: var(--text-1); font: 600 var(--fs-md) var(--font-ui); cursor: pointer; transition: background .15s;
}
.walletopt:hover { background: var(--surface-3); }
.walletopt:disabled { opacity: .6; cursor: default; }
.walletopt.off { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.htile.off { opacity: .45; filter: grayscale(1); }
.walletopt .wn { flex: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; text-align: left; }
.walletopt small { color: var(--text-3); font: 500 var(--fs-sm) var(--font-ui); }
.walletopt .chev { flex: none; fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.walletopt .inst { font: 600 var(--fs-sm) var(--font-ui); color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.wg { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line-strong) inset; font: 700 var(--fs-md) var(--font-data); color: var(--text-1); }
.wlink { display: block; width: 100%; min-height: var(--tap); margin-top: var(--s-half); border: 0; background: transparent; color: var(--text-2); font: 600 var(--fs-md) var(--font-ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.wlink:hover { color: var(--text-1); }
.wbtn { display: flex; align-items: center; justify-content: center; gap: var(--s1); width: 100%; min-height: var(--s6); padding: 0 var(--s2); margin-top: var(--s1); box-sizing: border-box;
  border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: 600 var(--fs-md) var(--font-ui); text-decoration: none; cursor: pointer; }
.wbtn:hover { filter: brightness(1.08); }
.wbtn.ghost { background: transparent; color: var(--text-1); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.wbtn.ghost:hover { background: var(--surface-2); filter: none; }
.wbtn.sm { width: auto; flex: none; min-height: var(--tap); margin: 0; padding: 0 var(--s2); font-size: var(--fs-sm); white-space: nowrap; }
.wbtn.busy { background: var(--surface-3); color: var(--text-2); cursor: default; box-shadow: 0 0 0 1px var(--line) inset; }
.wbtn svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wstate { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s2) 0 var(--s1); }
.wstate .wnote { max-width: 32ch; }
.wspin { position: relative; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: var(--s2); }
.wspin .wring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: mr-spin 1s linear infinite; }
.wtag { margin: var(--s-half) 0 var(--s1); font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.wbang { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--s1); border: 2px solid var(--text-2); font: 700 var(--fs-xl) var(--font-data); color: var(--text-1); }
.waddr { display: flex; align-items: center; gap: var(--s1); }
.waddr code { font: 600 var(--fs-lg) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; color: var(--text-1); }
.wcopy { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); }
.wcopy.head { width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.wcopy.head:hover { background: var(--surface-2); color: var(--text-1); }
.wcopy svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wcopy.done { color: var(--text-1); }
.wcopy.foot { display: none; }
.devnet { margin-left: auto; height: 24px; padding: 0 var(--s1); display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .16em; color: var(--text-2); }
.wtokens { display: flex; flex-direction: column; gap: var(--s1); }
.tokgrp { border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); overflow: hidden; }
.tokrow { display: flex; align-items: center; gap: var(--s2); min-height: var(--s7); padding: 0 var(--s2); }
.tokrow .sym { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tokrow .symt { display: flex; align-items: center; gap: var(--s1); font: 600 var(--fs-md) var(--font-ui); }
.tokrow .sym small { font: 500 var(--fs-sm) var(--font-ui); color: var(--text-3); }
.tokrow .bal { font: 600 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; }
.wtag2 { font-style: normal; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; border-radius: var(--r-xs); background: var(--surface-3); color: var(--text-2); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; }
.wtag2.low { background: transparent; box-shadow: 0 0 0 1px var(--text-2) inset; color: var(--text-1); }
.faucet { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); border-top: 1px dashed var(--line-strong); background: var(--surface-2); }
.faucet[hidden] { display: none; }
.faucet .ftxt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.faucet .ftxt b { font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; color: var(--text-2); }
.faucet .ftxt b em { font-style: normal; color: var(--text-1); }
.faucet .ftxt small { font: 400 var(--fs-sm)/1.4 var(--font-ui); color: var(--text-2); }
.faucet .ftxt small a { color: var(--text-1); }
.faucet .fgot, .faucet .fnext { flex: none; font: 600 var(--fs-md) var(--font-data); font-variant-numeric: tabular-nums; }
.faucet[data-s="success"] { border-top-style: solid; }
.faucet[data-s="failed"] { border-top: 1px solid var(--text-2); }
.faucet .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--text-1); animation: mr-spin 1s linear infinite; }
.wfoot { display: flex; gap: var(--s1); margin-top: var(--s2); }
.wfoot .wbtn { margin-top: 0; }
.walleterr { color: var(--text-1); font-size: var(--fs-sm); margin: var(--s1) 0 0; min-height: 0; }
.walleterr:empty { display: none; }
.walleterr a { color: var(--text-1); }
@media (prefers-reduced-motion: reduce) { .wspin .wring, .faucet .spin { animation: none; } }
.iconbtn {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface-2); font: 600 var(--fs-md) var(--font-ui); cursor: pointer; transition: background .15s; flex: none;
}
.iconbtn:hover { background: var(--surface-3); }

/* ========================= the timing tower ========================= */

.tower {
  position: fixed; z-index: 9; left: 12px; top: calc(var(--top-h) + 24px); width: var(--tower-w);
  border-radius: var(--r-lg); padding: var(--s2);
  display: flex; flex-direction: column; gap: var(--s1);
}
.tower-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-half); }
.tower-title { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.tower-state { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .2em; color: var(--accent); }
.tower-sec { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: 0 var(--s-half); }
.tower-sec .lbl { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.sector {
  font: 700 var(--fs-lg) var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--text-1);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tower-prog { display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s-half) var(--s-half); }
.tower-prog .bar { flex: 1; height: 4px; border-radius: var(--r-hair); background: var(--line-strong); overflow: hidden; display: block; }
.tower-prog .bar i { display: block; height: 100%; width: 0; background: var(--text-1); }
.tower-prog .pct { font: 600 var(--fs-sm) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 32px; text-align: right; }
/* Rows are placed by transform, so a change of places SLIDES, like the tower on TV. */
.tower-rows { --row-gap: 4px; list-style: none; margin: 0; padding: 0; position: relative; }
.tower-rows li {
  position: absolute; left: 0; right: 0; top: 0; height: 56px; display: grid; grid-template-columns: 24px 4px minmax(0, 1fr) auto; align-items: center; gap: var(--s1);
  padding: 0 var(--s2); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s;
}
.tower-rows li.mine { background: var(--surface-accent); border-color: var(--accent); }
.tower-rows li .pos { font: 700 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }
.tower-rows li.p1 .pos, .tower-rows li.mine .pos { color: var(--text-1); }
.tower-rows li.p1 .pos { color: var(--accent); }
.tower-rows li .stripe { width: 4px; height: 32px; border-radius: var(--r-hair); background: var(--c); }
.tower-rows li .who { display: flex; align-items: baseline; gap: var(--s1); min-width: 0; white-space: nowrap; }
.tower-rows li .who .num { font: 600 var(--fs-sm) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }
.tower-rows li .nm { font: 600 var(--fs-md) var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; }
.tower-rows li .tk { font: 600 var(--fs-xs) var(--font-data); font-style: normal; letter-spacing: .14em; color: var(--text-2); }
.tower-rows li .rt { display: flex; align-items: center; gap: var(--s1); }
.tower-rows li .mine-tag {
  display: none; height: 20px; align-items: center; padding: 0 var(--s1); border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink);
  font: 700 var(--fs-xs) var(--font-data); font-style: normal; letter-spacing: .12em;
}
.tower-rows li.mine .mine-tag { display: inline-flex; }
.tower-rows li .gap {
  min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--s1); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); font: 700 var(--fs-lg) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap;
}
.tower-rows li .gap:empty { display: none; }
.tower-rows li .gap.lead { border-color: transparent; color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .1em; }
.tower-rows li .flag { font: 700 var(--fs-xs) var(--font-data); font-style: normal; letter-spacing: .1em; }
.tower-rows li .flag.out { color: var(--text-2); }
.tower-rows li .flag.ice { color: var(--ice); }
.tower-rows li .flag.warp { color: #c7b8ff; }
.tower-rows li .flag.fin { color: var(--text-1); }
.tower-rows li.out { opacity: 0.6; }
.tower-rows li.out .gap { border-color: var(--text-2); }
.tower-rows li.out .nm { text-decoration: line-through; }
.tower-rows li.gain { animation: gain .9s ease-out; }
.tower-rows li.loss { animation: loss .9s ease-out; }
@keyframes gain { 0% { background: rgba(67,201,139,0.45); } 100% { } }
@keyframes loss { 0% { background: rgba(224,86,77,0.35); } 100% { } }

/* Course progress: a thin rail in the course column's off-track margin. JS places it (layoutRail) from
   renderer.courseRect(). Named events to the right, passed ones filled; the marbles as numbered dots to the left. */
:root { --lane-w: 32px; }
.raillane { display: none; position: fixed; left: calc(12px + var(--tower-w) + 4px); top: calc(var(--top-h) + 24px); width: var(--lane-w); height: 160px; pointer-events: none; }
body.race-on .raillane { display: block; }
.coursemap { position: fixed; z-index: 8; width: 0; pointer-events: none; }
body:not(.race-on) .cm-dots { display: none; }
.cm-track { position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; border-radius: var(--r-hair); background: var(--line-strong); }
.cm-track i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--text-1); border-radius: var(--r-hair); }
.cm-marks .mk { position: absolute; left: 0; height: 0; }
.cm-marks .mk i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; box-sizing: border-box; transform: rotate(45deg);
  background: var(--bg); border: 2px solid var(--text-3);
}
.cm-marks .mk:not(.lb) i { left: -3px; top: -3px; width: 6px; height: 6px; border-width: 1px; }
.cm-marks .mk.passed i { background: var(--text-1); border-color: var(--text-1); }
.cm-marks .mk b {
  position: absolute; left: 14px; top: -10px; height: 20px; display: flex; align-items: center; padding: 0 var(--s1); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent); font: 600 var(--fs-xs) var(--font-data); letter-spacing: .12em; color: var(--text-2); white-space: nowrap;
  transition: opacity .2s;
}
.cm-marks .mk.passed b { color: var(--text-1); }
.cm-marks .mk.under b { opacity: 0; }
.cm-dots .tk { position: absolute; left: -4px; width: 8px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--c); }
.cm-dots .tk.out { background: var(--text-3); }
.cm-dots .dt { position: absolute; left: -26px; margin-top: -10px; }
.cm-dots .dt, .tok {
  width: 20px; height: 20px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c); background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; font: 700 var(--fs-xs) var(--font-data); color: var(--text-1);
}
.cm-dots .dt.mine { box-shadow: 0 0 0 2px var(--accent); }
.cm-dots .dt.out { border-style: dashed; color: var(--text-2); }

/* A racer's marble, anywhere in the HUD: a glass sphere in its colour (the
   course's own, from MARBLE_DATA), a soft highlight, an inner shade, NO rim. */
.coin { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-block;
        background:
          radial-gradient(ellipse 34% 24% at 34% 24%, rgba(255,255,255,0.85), rgba(255,255,255,0) 100%),
          radial-gradient(circle at 50% 42%, var(--c) 30%, var(--d) 100%);
        box-shadow: inset 0 -3px 5px rgba(0,0,0,0.32), inset 0 1px 2px rgba(255,255,255,0.28), 0 2px 4px var(--shadow); }

/* ======================= right rail: market & slip ======================= */

.rail {
  position: fixed; z-index: 9; right: 12px; top: calc(var(--top-h) + 24px); bottom: 12px; width: var(--rail-w);
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* Betting phase on desktop (anything that is not the race): the market is 416 wide at top 96, the left column
   and the clock ring appear, the tower and the side cam step out. body.race-on is set from countdown on. */
@media (min-width: 901px) {
  body:not(.race-on) { --rail-w: 416px; }
  body:not(.race-on) .rail { top: 96px; bottom: var(--s3); right: var(--s3); }
  body:not(.race-on) .rail > .cam { display: none; }
  body:not(.race-on) .leftcol, body:not(.race-on) .ring { display: flex; }
  /* Invisible, but it keeps its layout (the tower's rows are placed by measuring them) and the renderer ignores it. */
  body:not(.race-on) .tower { visibility: hidden; pointer-events: none; --hud: overlay; }
  /* The ring carries the betting clock, so the top bar's own copy steps aside. */
  body:not(.race-on) .topbar .clock { visibility: hidden; }
  body:not(.race-on) .cm-dots { display: none; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .ring { width: 128px; height: 128px; top: var(--s2); }
  .ring strong { font-size: var(--fs-3xl); }
  .ring-cap { display: none; }
}
.card { border-radius: var(--radius); padding: 14px; flex: none; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px;
  font: 600 var(--fs-sm) var(--data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.card-head .muted { font: 400 var(--fs-xs) var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.card-head strong { color: var(--text); font-family: var(--data); letter-spacing: 0; }

.cam { padding: var(--s1); }
.cam .card-head { margin: 0 0 var(--s1); padding-left: var(--s2); align-items: center; justify-content: flex-start; gap: var(--s1); }
.cam .card-head .lbl { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.cam .card-head .who { flex: 1; min-width: 0; font: 600 var(--fs-sm) var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collapse {
  width: var(--tap); height: var(--tap); flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
}
.collapse svg { fill: none; stroke: var(--text-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.cam.collapsed .collapse svg { transform: rotate(180deg); }
.cam.collapsed canvas { display: none; }
.cam.collapsed .card-head { margin-bottom: 0; }
.cam canvas { display: block; width: 100%; height: 140px; border-radius: var(--r-md); background: var(--ground); }
.cam.live { border-color: var(--line-strong); }
.cam.live .card-head .who { color: var(--bad); font-weight: 800; }

/* ---- betting phase, desktop (frame 1): left column | course | market. Phones keep the sheet until S6. ---- */

/* The market panel: pool header, five tote rows, and the dock. */
.card.market { border-radius: var(--r-lg); padding: var(--s3); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.rail { --mk-cols: minmax(0, 1fr) 64px 40px 48px 32px; }
.mk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.mk-pool { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.mk-pool .lbl, .mk-cols, .slip-head .lbl, .proofcard .lbl, .fg-block .lbl { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.mk-pool .amt b { font: 700 var(--fs-2xl)/1 var(--font-data); font-variant-numeric: tabular-nums; }
.mk-pool .amt small { font: 600 var(--fs-md) var(--font-data); color: var(--text-2); }
.mk-rules { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-half); text-align: right; }
.mk-rules b { font: 600 var(--fs-sm) var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--text-1); }
.mk-rules span { font-size: var(--fs-xs); color: var(--text-3); }
.mk-cols, .runners li { display: grid; grid-template-columns: var(--mk-cols); gap: var(--s1); align-items: center; }
.mk-cols { padding: var(--s2) var(--s2) var(--s1); }
.mk-cols span:not(:first-child) { text-align: right; }

/* A runner is a row: team stripe, number, name and ticker, then WIN large, 2ND, pool share, backers. */
.runners { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.runners li {
  height: 64px; padding: 0 var(--s2); border-radius: var(--r-md); cursor: pointer;
  background: var(--surface-2); border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.runners li:hover { background: var(--surface-3); }
.runners li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.runners li.sel { border-color: var(--accent); background: var(--surface-accent); }
.runners li.locked { cursor: default; }
.runners li.locked:not(.sel):hover { background: var(--surface-2); }
.runners li .who { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.runners li .stripe { width: 4px; height: 36px; flex: none; border-radius: var(--r-hair); background: var(--c); }
.runners li .n { width: 20px; flex: none; font: 600 var(--fs-lg) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }
.runners li.sel .n { color: var(--text-1); }
.runners li .id { display: flex; flex-direction: column; min-width: 0; }
.runners li .nm { font: 600 var(--fs-md) var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runners li .tk { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; color: var(--text-2); }
.runners li .win, .runners li .pl, .runners li .bk { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.runners li .win { position: relative; font: 700 var(--fs-2xl)/1 var(--font-data); }
.runners li .win.long { font-size: var(--fs-xl); }
.runners li.sel .win { color: var(--accent); }
.runners li .win.none { color: var(--text-3); font-weight: 600; }
.runners li .win .arrow { position: absolute; top: -6px; right: 0; font-size: 8px; line-height: 1; }
.runners li .win.up .arrow { color: var(--good); }
.runners li .win.down .arrow { color: var(--bad); }
.runners li .win.up { animation: flashup .8s; }
.runners li .win.down { animation: flashdown .8s; }
.runners li .pl, .runners li .bk { font: 600 var(--fs-lg) var(--font-data); color: var(--text-2); }
.runners li .sh { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); font: 600 var(--fs-lg) var(--font-data); font-variant-numeric: tabular-nums; }
.runners li .bar { width: 40px; height: 3px; border-radius: var(--r-hair); background: var(--line-strong); overflow: hidden; display: block; }
.runners li .bar i { display: block; height: 100%; background: var(--c); transition: width .5s cubic-bezier(.2,.8,.2,1); }
/* An odds move tints the number once (green longer, red shorter) and the arrow stays; no boxes, no sustained colour. */
@keyframes flashup { 0% { color: var(--good); } }
@keyframes flashdown { 0% { color: var(--bad); } }

/* The betting clock: a ring that hangs from the top bar's centre (frame 1). Solid, so it is not a blur panel. */
.ring {
  position: fixed; z-index: 11; left: 50%; top: var(--s3); width: 176px; height: 176px; transform: translateX(-50%);
  display: none; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--surface-1); box-shadow: 0 0 0 1px var(--line), 0 16px 40px -16px var(--shadow);
}
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .rk, .ring .rf { fill: none; stroke-width: 6; }
.ring .rk { stroke: var(--line-strong); }
.ring .rf { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 502.65; stroke-dashoffset: 0; }
.ring.soon .rf { stroke: var(--text-1); }
.ring-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-half); }
.ring-lbl { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ring strong { font: 700 var(--fs-4xl)/.9 var(--font-data); font-variant-numeric: tabular-nums; }
.ring-cap { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ring.now strong { animation: pulse .8s infinite; }

/* The dock keeps ONE height in every state: status row 40, chips 48, button 56, hint 20. */
.slip { display: flex; flex-direction: column; gap: var(--s2); margin-top: auto; padding-top: var(--s2); }
.slip-row { height: 40px; display: flex; align-items: center; }
.slip-head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.slip-head .lbl { color: var(--text-2); white-space: nowrap; }
.slip-head .for { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-head .for b { color: var(--text-1); font-weight: 600; }
.steps3 { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.steps3 .st { display: flex; flex-direction: column; gap: var(--s-half); }
.steps3 .bar { position: relative; height: 4px; border-radius: var(--r-hair); background: var(--line-strong); overflow: hidden; display: block; }
.steps3 .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--accent); }
.steps3 .bar i.ind { width: 40%; animation: mr-indet 1.2s ease-in-out infinite; }
.steps3 .st.done .bar { background: var(--text-1); }
.steps3 .t { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.steps3 .st.cur .t { font-weight: 700; color: var(--text-1); }
.notice {
  width: 100%; min-height: 40px; display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--text-2);
}
.notice.refund { border-color: var(--line-strong); }
.notice .tag { height: 20px; flex: none; display: inline-flex; align-items: center; padding: 0 var(--s-half); border: 1px solid var(--text-1); border-radius: var(--r-xs); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .08em; }
.notice .msg { min-width: 0; font-size: var(--fs-sm); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stakes { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--s1); }
.stakes button {
  height: var(--s6); padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2);
  font: 600 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s;
}
.stakes button:hover:not(:disabled) { background: var(--surface-3); }
.stakes button.on { background: var(--surface-accent); color: var(--text-1); border-color: var(--accent); }
.stakes button:disabled { opacity: .35; cursor: not-allowed; }
/* Locked (sent, in flight, closed, or signed out): the pick stays readable, nothing answers a tap. */
.stakes.lock button { cursor: default; }
.stakes.lock button:disabled { opacity: .5; }
.stakes.lock button.on:disabled { opacity: 1; }

.cta {
  width: 100%; min-height: var(--s7); padding: 0 var(--s2); border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 700 var(--fs-xl) var(--data); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--accent-ink);
  background: linear-gradient(180deg, var(--sheen), transparent 60%), var(--accent);
  box-shadow: 0 0 0 1px var(--line-inner) inset;
  transition: transform .12s, filter .2s;
}
.cta:hover:not(:disabled) { filter: brightness(1.08); }
.cta:active:not(:disabled) { transform: translateY(1px); }
/* Unavailable states are a quiet outline, never red. */
.cta:disabled { background: var(--surface-3); color: var(--text-3); box-shadow: 0 0 0 1px var(--line) inset; cursor: default; }
.slip .cta { height: var(--s7); display: flex; align-items: center; justify-content: center; gap: var(--s1); }
.slip .cta svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.slip .cta[data-k="ready"] { animation: mr-breathe 2.8s ease-in-out infinite; }       /* the one glow: ready to bet */
.slip .cta[data-k="idle"], .slip .cta[data-k="idle"]:disabled { background: var(--surface-2); color: var(--text-2); border: 1px dashed var(--line-strong); box-shadow: none; }
.slip .cta[data-k="busy"], .slip .cta[data-k="busy"]:disabled { background: var(--surface-3); color: var(--text-1); border: 1px solid var(--line-strong); box-shadow: none; font-size: var(--fs-lg); }
.slip .cta[data-k="done"], .slip .cta[data-k="done"]:disabled { background: var(--surface-2); color: var(--text-1); border: 1px solid var(--line-strong); box-shadow: none; font-size: var(--fs-lg); }
.slip .cta[data-k="retry"] { background: transparent; color: var(--text-1); border: 1px solid var(--text-1); box-shadow: none; font-size: var(--fs-lg); }
.slip .cta[data-k="retry"]:hover:not(:disabled) { background: var(--surface-2); filter: none; }
.spin { animation: mr-spin 1s linear infinite; }
.spin circle { stroke: var(--line-strong); }
.spin path { stroke: var(--accent); }
.glyph { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font: 700 var(--fs-xs) var(--font-data); color: var(--text-1); }
.fineprint { min-height: 20px; margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--s1); text-align: center; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); }
.fineprint .dot { color: var(--text-3); }
.fineprint .tagbox { height: 20px; padding: 0 var(--s-half); border-radius: var(--r-xs); }
.linkbtn { height: var(--tap); margin: -12px 0; padding: 0 var(--s2); border: 0; background: transparent; color: var(--text-1); font: 600 var(--fs-sm) var(--font-ui); text-decoration: underline; cursor: pointer; }
.sealpill { height: 28px; display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s1); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); animation: mr-seal 1.6s ease-in-out infinite; }
.sealpill b { font-weight: 600; color: var(--text-1); }
.sealpill code { font: 600 var(--fs-xs) var(--font-data); color: var(--text-2); }
@keyframes mr-breathe {
  0%, 100% { box-shadow: 0 0 0 1px var(--line-inner) inset, 0 8px 32px -6px var(--glow); }
  50% { box-shadow: 0 0 0 1px var(--line-inner) inset, 0 8px 48px -2px var(--glow); }
}
@keyframes mr-spin { to { transform: rotate(360deg); } }
@keyframes mr-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes mr-seal { 0%, 100% { box-shadow: 0 0 0 0 var(--glow); } 50% { box-shadow: 0 0 0 6px var(--glow); } }
@keyframes mr-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* The left column: proof summary, live bets, a folded form guide. Only the proof card blurs (top bar + proof + market = 3). */
.leftcol {
  position: fixed; z-index: 9; left: var(--s3); top: 96px; bottom: var(--s3); width: 344px;
  display: none; flex-direction: column; gap: var(--s2); overflow-y: auto; scrollbar-width: none;
}
.leftcol::-webkit-scrollbar { display: none; }
.leftcol .card { border-radius: var(--r-lg); padding: var(--s3); }
.proofcard { display: flex; flex-direction: column; gap: var(--s2); background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
.proofpill {
  min-height: var(--s6); display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface-2); font: 600 var(--fs-md) var(--font-ui); white-space: nowrap; overflow: hidden;
}
.proofpill svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.proofpill .dot { font-style: normal; color: var(--text-3); }
.proofpill code { font: 600 var(--fs-lg) var(--font-data); letter-spacing: .04em; color: var(--text-2); }
.proofpill.sealing { border-style: dashed; color: var(--text-2); }
#proofText { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.ghost { align-self: flex-start; min-height: var(--tap); padding: 0 var(--s2); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--text-1); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; transition: background .15s; }
.ghost:hover { background: var(--surface-2); }

.feedcard { padding: var(--s2) var(--s3) var(--s1) !important; }
.feedcard .card-head { height: 32px; margin: 0; align-items: center; }
.feedcard .count { margin-left: var(--s-half); color: var(--text-2); }
.livedot { display: flex; align-items: center; gap: var(--s1); font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; color: var(--text-2); }
.livedot i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-1); animation: mr-blink 1.6s ease-in-out infinite; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li { min-height: 56px; display: flex; align-items: center; gap: var(--s1); border-top: 1px solid var(--line); }
.feed li:first-child { animation: slidein .35s ease-out; }
.feed li.empty { min-height: 72px; flex-direction: column; justify-content: center; gap: var(--s-half); text-align: center; color: var(--text-2); font-size: var(--fs-sm); }
.feed li.empty b { color: var(--text-1); font-weight: 600; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }
.feed .stripe { width: 4px; height: 28px; flex: none; border-radius: var(--r-hair); background: var(--c); }
.feed .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-half); }
.feed .who b { font: 600 var(--fs-md) var(--font-data); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .who span { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed li.mine .who b { color: var(--accent); }
.feed .whale { font-style: normal; height: 20px; flex: none; display: inline-flex; align-items: center; padding: 0 var(--s1); border-radius: var(--r-sm); border: 1px solid var(--text-2); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; color: var(--text-1); }
.feed .amt { font: 600 var(--fs-lg) var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed .amt small { font-size: var(--fs-xs); color: var(--text-3); }

.formguide { padding: 0 !important; }
.formguide summary { min-height: var(--s7); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s3); cursor: pointer; list-style: none; font: 600 var(--fs-sm) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.formguide summary::-webkit-details-marker { display: none; }
.formguide summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.formguide[open] summary::after { transform: rotate(-135deg); }
.formguide summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-lg); }
.fg-block { padding: 0 var(--s3) var(--s2); }
.fg-block .lbl { display: block; margin-bottom: var(--s1); }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.history li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.history .who { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history .amt { font: 600 var(--fs-lg) var(--data); font-variant-numeric: tabular-nums; }
.history .who i { font-style: normal; color: var(--text-3); font-size: var(--fs-xs); margin-left: 4px; }
.history .amt.win { color: var(--text-1); }
.history .amt.lose { color: var(--text-2); }
.history .amt.none { color: var(--text-3); }
.history li.empty { grid-template-columns: 1fr; color: var(--muted); }
.record { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; text-align: center; }
.record dt { font: 600 var(--fs-xs) var(--data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); grid-row: 1; }
.record dd { margin: 4px 0 0; font: 600 var(--fs-xl) var(--data); font-variant-numeric: tabular-nums; grid-row: 2; }
.record dd.good { color: var(--text-1); }
.record dd.bad { color: var(--text-2); }

/* During the race the right stack is: My marble, the side cam, the closed pool. The market, the slip,
   live bets and the form guide fold away so the course and the tower have the stage. */
.finalpool { display: none; padding: var(--s2) var(--s3); flex-direction: column; gap: var(--s1); }
body.race-on .finalpool { display: flex; }
body.race-on .rail > .card:not(.cam):not(.finalpool) { display: none; }
.fp-head { display: flex; align-items: baseline; justify-content: space-between; }
.fp-head .lbl { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.fp-head .amt b { font: 700 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; }
.fp-head .amt small { font: 600 var(--fs-sm) var(--font-data); color: var(--text-2); }
.fp-note { font-size: var(--fs-xs); color: var(--text-2); }
.fp-cols, .fp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 56px 48px; gap: var(--s1); align-items: center; }
.fp-cols { padding-top: var(--s-half); font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.fp-cols span:not(:first-child) { text-align: right; }
.fp-rows { list-style: none; margin: 0; padding: 0; }
.fp-rows li { height: 26px; border-top: 1px solid var(--line); }
.fp-rows .l { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.fp-rows .stripe { width: 3px; height: 14px; border-radius: var(--r-hair); background: var(--c); }
.fp-rows .num { font: 600 var(--fs-sm) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }
.fp-rows .tk { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .1em; }
.fp-rows em { font: 700 var(--fs-xs) var(--font-data); font-style: normal; letter-spacing: .12em; }
.fp-rows em.mine { color: var(--accent); }
.fp-rows em.o { color: var(--text-2); }
.fp-rows .w, .fp-rows .p { text-align: right; font: 600 var(--fs-md) var(--font-data); font-variant-numeric: tabular-nums; }
.fp-rows .p { color: var(--text-2); }

/* My marble: the one card that is about ME. The third blurred panel (top bar, tower, this). */
.mycard {
  display: none; flex-direction: column; gap: var(--s2); padding: var(--s3); border-radius: var(--r-lg); flex: none;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--glass); border: 1px solid var(--accent);
  box-shadow: 0 16px 48px -20px var(--glow);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
body.race-on .mycard:not([hidden]) { display: flex; }
.mycard.watch { background: var(--glass); border-color: var(--line); box-shadow: none; }
.mycard.mine { cursor: pointer; }
.mycard.out { border-color: var(--line-strong); box-shadow: none; background: var(--glass); }
.mycard.out .mc-pos { color: var(--text-2); }
.mycard.following { box-shadow: 0 0 0 2px var(--accent), 0 16px 48px -20px var(--glow); }
.mycard .lbl { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.mc-top { display: flex; align-items: center; justify-content: space-between; }
.mc-id { display: flex; align-items: center; gap: var(--s1); }
.mc-id .tok { width: 24px; height: 24px; }
.mc-id b { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .14em; color: var(--text-2); }
.mc-main { display: flex; align-items: center; gap: var(--s2); }
.mc-pos { font: 700 var(--fs-4xl)/.85 var(--font-data); font-variant-numeric: tabular-nums; }
.mc-txt { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.mc-title { font: 600 var(--fs-xl)/1.2 var(--font-ui); letter-spacing: -.01em; margin: 0; text-wrap: pretty; }
.mc-detail { font: 600 var(--fs-md) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }
.mc-rule { height: 1px; background: var(--line-strong); }
.mc-pay { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: var(--s2); }
.mc-pay > div { display: flex; flex-direction: column; gap: var(--s-half); }
.mc-pay b { font: 600 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; }
.mc-bet { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mc-follow { font-size: var(--fs-xs); color: var(--text-3); }
.mc-follow b { color: var(--accent); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; }
.mycard.watch .mc-title { font-size: var(--fs-xl); }
.mc-sub { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.tagbox { height: 24px; display: inline-flex; align-items: center; padding: 0 var(--s1); border-radius: var(--r-sm); border: 1px solid var(--text-2); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .08em; color: var(--text-1); }

/* ============================== camera bar ============================== */

.cambar {
  position: fixed; z-index: 11; left: 50%; bottom: var(--s3); transform: translateX(-50%);
  display: none; align-items: center; gap: var(--s-half); padding: var(--s1); border-radius: var(--r-pill);
  background: var(--surface-1); border: 1px solid var(--line);     /* solid: the blurred panels are the top bar, tower and My marble */
}
body.race-on .cambar { display: flex; }
.cambar button {
  border: 1px solid transparent; background: transparent; color: var(--text-1); font: 600 var(--fs-sm) var(--font-ui);
  min-height: var(--tap); padding: 0 var(--s2); border-radius: var(--r-pill); cursor: pointer; transition: background .15s, border-color .15s;
}
.cambar button:hover { background: var(--surface-2); }
.cambar button.on { background: var(--surface-accent); border-color: var(--accent); }
.cambar .camcoins { display: flex; align-items: center; gap: 0; padding-left: var(--s-half); margin-left: var(--s-half); border-left: 1px solid var(--line-strong); }
.cambar .camcoins button { width: var(--tap); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-color: transparent; background: transparent; }
.cambar .camcoins .tok { width: 30px; height: 30px; border-width: 3px; font-size: var(--fs-sm); }
.cambar .camcoins button.on .tok { box-shadow: 0 0 0 2px var(--accent); }
.cambar .camcoins button.out { cursor: default; }
.cambar .camcoins button.out .tok { border-style: dashed; color: var(--text-2); }
.cambar .camwhy { color: var(--text-2); font: 600 var(--fs-sm) var(--font-data); letter-spacing: 0.1em; text-transform: uppercase; padding: 0 var(--s1) 0 var(--s2); white-space: nowrap; }
.cambar .camwhy:empty { display: none; }

/* ===================== race control (the banner) ===================== */

.banner {
  position: fixed; z-index: 12; left: 50%; top: calc(var(--top-h) + 24px); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s1); max-width: min(720px, calc(100vw - 32px)); min-height: 48px;
  padding: 0 var(--s3); border-radius: var(--r-pill); border: 0; pointer-events: none;
  background: var(--text-1); color: var(--bg); box-shadow: 0 16px 40px -12px var(--shadow);
  animation: drop .4s cubic-bezier(.2,.9,.3,1.25);
}
.banner::before {
  content: 'RACE CONTROL'; padding-right: var(--s1); margin-right: var(--s-half); border-right: 1px solid var(--text-3); align-self: center; line-height: 20px;
  font: 700 var(--fs-xs) var(--font-data); letter-spacing: .16em; color: var(--page); white-space: nowrap;
}
.banner .bk { font: 700 var(--fs-xl) var(--font-data); letter-spacing: .06em; white-space: nowrap; }
.banner .sep { font: 700 var(--fs-xl) var(--font-data); }
.banner .coin { width: 20px; height: 20px; margin-left: 2px; flex: none; }
.banner .msg { padding: var(--s1) 0; font: 600 var(--fs-md) var(--font-ui); }
.banner .msg b { font-weight: 700; }
.banner .msg b.up { color: color-mix(in srgb, var(--m-vnm) 55%, #000); }
.banner .msg b.down { color: color-mix(in srgb, var(--m-blz) 60%, #000); }
.banner .msg a { color: inherit; }
.banner small { color: var(--page); font-size: var(--fs-xs); }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -12px); } }

/* =============================== overlays =============================== */

.overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(8,7,6,0.35), var(--scrim));
  animation: fade .3s ease-out;
}
@keyframes fade { from { opacity: 0; } }
#confetti { position: fixed; inset: 0; z-index: 25; pointer-events: none; width: 100vw; height: 100vh; }
.overlay .card { border-radius: var(--r-lg); padding: var(--s3) var(--s3) var(--s2); width: min(430px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.kicker { margin: 0 0 12px; text-align: center; font: 600 var(--fs-sm) var(--data); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.lbl { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

/* ------------- countdown (frames 9 and 10): three ivory lamps, one per second, out at GO ------------- */
/* Below the top bar (z 10 is the bar, this is 9): the bar stays readable at the edges while the centre darkens. */
.overlay.lights {
  z-index: 9; padding: 0; pointer-events: none; animation: none;
  background: radial-gradient(30% 56% at 50% 40%, transparent 45%, var(--scrim) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.gantry-wrap { display: flex; flex-direction: column; align-items: center; }
.wires { display: flex; gap: 192px; }
.wires i { width: 2px; height: 72px; background: var(--line-strong); }
.gantry { display: flex; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line-strong); }
.gantry i { width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%; background: var(--light-off); border: 1px solid var(--line-strong); }
.gantry i.on { background: var(--light); border-color: transparent; box-shadow: 0 0 32px 8px var(--light-glow); transition: box-shadow .15s, background .15s; }
.gantry.go i, .gantry.go i.on { background: var(--light-off); border: 1px solid var(--line-strong); box-shadow: none; transition: none; }   /* lights OUT: instant */
.overlay.lights .count { margin-top: var(--s4); font: 700 var(--fs-6xl)/1 var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-1); text-shadow: 0 0 48px var(--light-glow); }
/* The note sits above the Riding chip, clear of the marbles in the gate (the number is the one thing over the course). */
.overlay.lights p { position: fixed; left: 0; right: 0; bottom: 96px; margin: 0; text-align: center; font: 500 var(--fs-md) var(--font-ui); color: var(--text-2); }
.ridingchip {
  position: fixed; z-index: 11; left: 50%; bottom: var(--s4); transform: translateX(-50%); height: var(--s6);
  display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s3) 0 var(--s1); border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line-strong); white-space: nowrap;
}
.ridingchip .tok { width: 32px; height: 32px; border-width: 3px; font-size: var(--fs-xs); }
.ridingchip b { font: 600 var(--fs-md) var(--font-ui); }
.ridingchip .dot { color: var(--text-3); }
.ridingchip .amt { font: 600 var(--fs-lg) var(--font-data); font-variant-numeric: tabular-nums; }
/* Only the countdown: the tower and the right stack are hidden but keep their boxes, so the course keeps its framing. */
body.countdown .tower, body.countdown .rail, body.countdown .coursemap, body.countdown .cambar, body.countdown .banner { visibility: hidden; }
body.countdown .topbar { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--text-2); }
body.countdown .topbar :is(.fair, .walletbtn, .iconbtn, .devnet, .brand-sep, .clock strong, .lowtag, .live) { visibility: hidden; }
body.countdown .topbar :is(.lockup .word, .wallet strong, .wallet .lbl, .clock .phase) { color: var(--text-2); }

/* ------------- results (frames 11a to 11d) ------------- */
.results { position: fixed; inset: 0; z-index: 12; pointer-events: none; animation: fade .3s ease-out; }
.results > * { pointer-events: auto; }
body.results .tower, body.results .rail, body.results .coursemap, body.results .cambar, body.results .banner { display: none; }
/* The paid-out pill hangs from the top bar's centre, like the betting ring does. */
.paidpill {
  position: absolute; top: var(--s3); left: 50%; transform: translateX(-50%); height: var(--s6); display: flex; align-items: center; gap: var(--s1);
  padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: var(--text-1); color: var(--bg); cursor: pointer; white-space: nowrap;
  box-shadow: 0 16px 40px -12px var(--shadow); font: 700 var(--fs-lg) var(--font-data); letter-spacing: .08em; text-transform: uppercase;
}
.paidpill svg { flex: none; fill: none; stroke: var(--bg); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.paidpill u { font-weight: 600; letter-spacing: .04em; text-transform: none; }
body.paid .topbar .clock { visibility: hidden; }

.tok.lg { width: 48px; height: 48px; border-width: 3px; font-size: var(--fs-md); }
.tok.sm { width: 24px; height: 24px; }
.tok.mine { box-shadow: 0 0 0 2px var(--accent); }

.podiumcard {
  position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: 440px; padding: var(--s3); border-radius: var(--r-lg);
  background: var(--surface-1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2);
}
.pc-head { display: flex; align-items: baseline; justify-content: space-between; }
.pc-tag { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .2em; text-transform: uppercase; color: var(--celebrate); }
.podiumcard.void .pc-tag { color: var(--text-2); }
.podiumcard .winner { display: flex; align-items: center; gap: var(--s2); }
.podiumcard .wn { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.podiumcard h2 { margin: 0; font: 600 var(--fs-2xl)/1 var(--font-ui); }
.podiumcard .sub { font: 600 var(--fs-sm) var(--font-data); letter-spacing: .14em; color: var(--text-2); text-transform: uppercase; }
.wintime { margin-left: auto; font: 700 var(--fs-2xl) var(--font-data); font-variant-numeric: tabular-nums; }
.podium { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line-strong); }
.podium:empty { display: none; }
.podium .pd { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.podium .pd .p { font: 700 var(--fs-lg) var(--font-data); color: var(--text-2); }
.podium .pd b { font: 700 var(--fs-md) var(--font-data); letter-spacing: .08em; }
.podium .pd .t { margin-left: auto; font: 600 var(--fs-md) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }

.resleft { position: absolute; left: 12px; top: calc(var(--top-h) + 24px); width: calc(var(--tower-w) + 4px + var(--lane-w)); display: flex; flex-direction: column; gap: var(--s2); }
.finalpanel { padding: var(--s2); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s1); background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
.fo-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--s1); }
.fo-head b { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .2em; color: var(--text-1); }
.final { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-half); }
.final li { height: var(--s6); display: grid; grid-template-columns: 24px 4px minmax(0, 1fr) auto; align-items: center; gap: var(--s1); padding: 0 var(--s2); border-radius: var(--r-md); border: 1px solid transparent; }
.final li.mine { background: var(--surface-accent); border-color: var(--accent); }
.final li .pos { font: 700 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; }
.final li .stripe { width: 4px; height: 28px; border-radius: var(--r-hair); background: var(--c); }
.final li .who { display: flex; align-items: baseline; gap: var(--s1); white-space: nowrap; min-width: 0; }
.final li .who .num { font: 600 var(--fs-sm) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }
.final li .nm { font: 600 var(--fs-md) var(--font-ui); overflow: hidden; text-overflow: ellipsis; }
.final li .tk { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; color: var(--text-2); }
.final li .mt { align-self: center; height: 20px; display: inline-flex; align-items: center; padding: 0 var(--s-half); border-radius: var(--r-xs); background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .08em; }
.final li .ft { font: 600 var(--fs-lg) var(--font-data); font-variant-numeric: tabular-nums; }
.final li.out .pos, .final li.out .nm { color: var(--text-2); }
.final li .oo { height: 24px; display: inline-flex; align-items: center; padding: 0 var(--s1); border-radius: var(--r-sm); border: 1px solid var(--text-2); font: 700 var(--fs-md) var(--font-data); letter-spacing: .08em; }

.koreplay { padding: var(--s2); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--line); display: flex; align-items: center; gap: var(--s2); }
.koreplay canvas { width: 88px; height: 64px; flex: none; border-radius: var(--r-sm); background: var(--ground); display: block; }
.koreplay .kt { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.koreplay .kt .lbl { color: var(--text-3); }
.koreplay .kl { font: 600 var(--fs-sm) var(--font-ui); }

.proofbar { position: absolute; left: 12px; bottom: var(--s3); display: flex; align-items: center; gap: var(--s1); }
.proofpill.sm { min-height: var(--tap); padding: 0 var(--s2); }
.proofpill.sm span { font-size: var(--fs-sm); }
.proofpill.sm code { font-size: var(--fs-md); }

.resstack { position: absolute; right: 12px; top: calc(var(--top-h) + 24px); width: 340px; display: flex; flex-direction: column; gap: var(--s2); }
.myres {
  position: relative; padding: var(--s3); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s2);
  background: var(--glass); border: 1px solid var(--line-strong); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
.myres.win { background: linear-gradient(var(--celebrate-soft), var(--celebrate-soft)), var(--glass); border-color: var(--celebrate); box-shadow: 0 16px 56px -16px var(--celebrate-glow); }
.myres.place { box-shadow: 0 16px 48px -24px var(--celebrate-glow); }
.myres.quiet { border-color: var(--line); }
.myres.watch { background: var(--surface-1); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.mr-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.mr-tag { height: 24px; display: inline-flex; align-items: center; padding: 0 var(--s1); border-radius: var(--r-sm); border: 1px solid var(--text-2); color: var(--text-1); font: 700 var(--fs-sm) var(--font-data); letter-spacing: .08em; }
.myres.win .mr-tag { background: var(--celebrate); border-color: var(--celebrate); color: var(--celebrate-ink); }
.myres.place .mr-tag { background: var(--surface-3); border-color: var(--surface-3); }
.mr-head { display: flex; align-items: center; gap: var(--s2); }
.mr-head h3 { margin: 0; font: 600 var(--fs-2xl)/1.1 var(--font-ui); letter-spacing: -.01em; text-wrap: balance; }
.mr-line { margin: 0; font-size: var(--fs-md); color: var(--text-2); text-wrap: pretty; }
.mr-pay { display: flex; flex-direction: column; gap: var(--s-half); }
.mr-pay .big b { font: 700 var(--fs-4xl)/.9 var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-pay .big small { font: 600 var(--fs-lg) var(--font-data); color: var(--text-2); }
.myres.win .mr-pay .big b, .myres.place .mr-pay .big b { color: var(--celebrate); }
.myres.quiet .mr-pay .big b { font-size: var(--fs-3xl); color: var(--text-2); }
.myres.quiet.void .mr-pay .big b { color: var(--text-1); }
.mr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line-strong); }
.mr-stats div { display: flex; flex-direction: column; gap: var(--s-half); }
.mr-stats b { font: 600 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; }
.mr-stats b.dim { color: var(--text-2); }
.paidlink code { font: 600 var(--fs-md) var(--font-data); color: var(--text-2); }
.paidlink svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.myres.watch .mr-pay, .myres.watch .mr-stats { display: none; }
.burst { position: relative; height: 0; }
.burst i { position: absolute; left: 50%; top: -40px; width: 8px; height: 8px; border-radius: 2px; background: var(--celebrate); animation: burst .9s ease-out forwards; }
.burst i:nth-child(3n) { background: var(--celebrate-soft); } .burst i:nth-child(3n+1) { background: var(--light); }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }

/* The next-round ring: the primary element when the round was lost or voided (bigger, accent border). */
.nextcard { padding: var(--s3); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); }
.nring { position: relative; width: 72px; height: 72px; flex: none; }
.nring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nring .rk, .nring .rf { fill: none; stroke-width: 5; }
.nring .rk { stroke: var(--line-strong); }
.nring .rf { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 263.9; stroke-dashoffset: 0; }
.nring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 var(--fs-xl) var(--font-data); font-variant-numeric: tabular-nums; }
.ntxt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-half); min-width: 0; }
.ntxt strong { font: 600 var(--fs-xl) var(--font-ui); letter-spacing: -.01em; }
.ntxt .ghost { margin-top: var(--s1); }
.ntxt .ghost.go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.resstack.hero .nextcard { order: -1; border-color: var(--accent); box-shadow: 0 16px 48px -24px var(--glow); }
.resstack.hero .nring { width: 96px; height: 96px; }
.resstack.hero .nring b { font-size: var(--fs-3xl); }
.resstack.hero .ntxt strong { font-size: var(--fs-2xl); }

/* Appearance: the palette switch (Ivory | Champagne), in the wallet card and at the end of the onboarding. */
.appear { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s2) 0; padding-top: var(--s2); border-top: 1px solid var(--line); }
.appear .lbl { font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.seg { display: flex; padding: var(--s-half); gap: var(--s-half); border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-strong); }
.seg button {
  min-height: var(--tap); padding: 0 var(--s2) 0 var(--s1); display: inline-flex; align-items: center; gap: var(--s1);
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2);
  font: 600 var(--fs-md) var(--font-ui); cursor: pointer; transition: background .15s, color .15s;
}
.seg button:hover { color: var(--text-1); }
.seg button[aria-checked="true"] { background: var(--surface-3); color: var(--text-1); box-shadow: 0 0 0 1px var(--line-strong) inset; }
/* The swatch previews each palette's accent, so it must not follow the live palette. */
.seg .sw { width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--line-strong); }
.seg [data-p="ivory"] { --sw: #F4EFE6; }
.seg [data-p="champagne"] { --sw: #D9C08C; }

.help .steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; color: var(--text-2); font-size: var(--fs-sm); }
.help .steps b { color: var(--text-1); }
.help .note { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 14px; }

/* Phone-only pieces are hidden everywhere else; the phone block below turns them on. */
.grab, .betpeek, .mk-short, .m-only, .mproof, .ring-rnd, .peekbar, .walletrow, .podm, .kopull, #nextConnect, .runners li .more { display: none; }
.resshell { display: contents; }
.results > *, .resshell > * { pointer-events: auto; }

/* ================================ mobile ================================ */

@media (max-width: 900px) {
  :root { --top-h: 56px; }
  .topbar { top: 8px; left: 8px; right: 8px; padding: 0 var(--s1); gap: var(--s1); grid-template-columns: auto 1fr auto; }
  /* Brand mark only (Drop v2 compact at 32px); the word, round tag and DEVNET badge give way. */
  .lockup .mark-hyb, .lockup .word, .brand-sep, .brand .tag, .devnet, .tablechip { display: none; }
  .lockup .mark-drop { display: block; }
  .clock strong { font-size: 18px; }
  .clock .phase { font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; }
  /* The proof pill collapses to its shield, still a 44px target. */
  .fair, .walletbtn, .iconbtn { flex: none; }
  .fair { width: var(--tap); min-height: var(--tap); padding: 0; justify-content: center; }
  .fair svg { margin: 0; }
  .fair #fairLabel, .fair .dot, .fair code { display: none; }
  .topbar .right { gap: var(--s-half); }
  /* Balance as a pill next to the avatar; the label goes, LOW stays as text. */
  .wallet { display: flex; align-items: center; gap: var(--s-half); height: 40px; padding: 0 var(--s1); border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-strong); }
  .wallet .lbl { display: none; }
  .wallet strong { font-size: var(--fs-lg); }
  .wallet strong .cur { font-size: var(--fs-sm); }
  .lowtag { order: 3; }
  /* Chip: avatar only when signed in, "Not connected" when not. Still tappable (it opens the wallet)
     until the mobile peek bar and sheet (S6/S7) carry Connect and the account. */
  .walletbtn { padding: 0; width: var(--tap); justify-content: center; }
  .walletbtn .addr { display: none; }
  .walletbtn.out { width: auto; padding: 0 var(--s2) 0 var(--s1); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font: 600 var(--fs-sm) var(--font-ui); }
  .walletbtn.out:hover { background: var(--surface-3); filter: none; }
  .walletbtn.out .on { display: none; }
  .walletbtn.out .off { display: inline; }

  /* Betting: the ring carries the clock, so the top bar's own copy and its shield step aside. */
  body:not(.race-on) .topbar .clock { visibility: hidden; }
  body:not(.race-on) .topbar .fair { display: none; }
  /* The chip is display-only here: Connect lives on the Bet button and the spectator bar, the account at the foot of the full sheet. */
  .walletbtn { pointer-events: none; }
  body.race-on .walletbtn.out .off { display: none; }
  body.race-on .walletbtn.out .watch { display: inline; }

  /* ---------------- betting: ring, proof pill, and the bottom sheet (frame 3) ---------------- */
  body:not(.race-on) .ring { display: flex; width: 128px; height: 128px; top: calc(var(--top-h) + var(--s2)); }
  .ring strong { font-size: var(--fs-3xl); }
  .ring-lbl { font-size: var(--fs-xs); letter-spacing: .2em; }
  .ring-cap:not(.ring-rnd) { display: none; }
  .ring-rnd { display: block; letter-spacing: .12em; }
  body:not(.race-on) .mproof {
    position: fixed; z-index: 11; left: 0; right: 0; top: calc(var(--top-h) + var(--s2) + 128px + var(--s1));
    display: flex; align-items: center; justify-content: center; gap: var(--s1); pointer-events: none;
  }
  .mproof > * { pointer-events: auto; }
  .mproof .proofpill { position: relative; min-height: 36px; padding: 0 var(--s2) 0 var(--s1); gap: var(--s1); }
  .mproof .proofpill::after { content: ''; position: absolute; inset: -4px 0; }          /* a 44px target for a 36px pill */
  .mproof .proofpill span { font-size: var(--fs-sm); }
  .mproof .proofpill code { font-size: var(--fs-md); }
  .mproof .devnet { display: inline-flex; margin-left: 0; background: var(--bg); }   /* the topbar's auto margin would split the row */
  body.sheet-full .ring, body.sheet-full .mproof { visibility: hidden; }

  /* The rail IS the sheet: peek (88px + safe area), half (opens here), full. Its height is --sheet-h, set by the
     sheet controller in main2d.js; the renderer re-frames the course when it lands. */
  .rail {
    left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: none; height: var(--sheet-h, min(520px, 66dvh));
    padding: 0 var(--s2); gap: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden;
    background: color-mix(in srgb, var(--surface-1) 90%, transparent); border: 1px solid var(--line); border-width: 1px 0 0 0;
    box-shadow: 0 -16px 48px -24px var(--shadow);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    transition: height .28s cubic-bezier(.2, .8, .2, 1), background .2s, border-color .2s;
  }
  .rail.dragging { transition: none; }
  .rail[data-snap="full"] { overflow-y: auto; overscroll-behavior: contain; }
  .rail > * { margin-top: var(--s1); }
  .rail > .cam, .rail > .mycard, .rail > .finalpool { display: none !important; }      /* race furniture: the peek bar replaces it */
  .rail > .grab, .rail > .betpeek { margin-top: 0; }
  .grab {
    position: relative; display: block; flex: none; width: 100%; height: var(--s2); padding: 0; border: 0; background: transparent;
    cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
  }
  .grab span { position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: var(--r-hair); background: var(--line-strong); }
  .grab::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: var(--tap); }   /* a 44px grab zone over the first rows */
  .grab:focus-visible span { background: var(--accent); }
  .rail.locked > .grab, .resshell.locked > .grab { pointer-events: none; cursor: default; }
  .rail.locked > .grab span, .resshell.locked > .grab span { opacity: .5; }
  .rail[data-snap="full"] > .grab, .resshell[data-snap="full"] > .grab { position: sticky; top: 0; z-index: 2; background: var(--surface-1); margin: 0 calc(-1 * var(--s2)); width: auto; }

  .betpeek {
    display: flex; flex: none; align-items: center; gap: var(--s1); width: 100%; min-height: var(--tap); padding: 0 var(--s2); border: 0; border-radius: var(--r-md);
    background: var(--surface-2); color: var(--text-1); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden;
  }
  .betpeek .pulse { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--text-1); animation: mr-blink 1.6s ease-in-out infinite; }
  .betpeek .stripe { width: 3px; height: 16px; flex: none; border-radius: var(--r-hair); background: var(--c); }
  .betpeek b { font: 600 var(--fs-md) var(--font-data); letter-spacing: .02em; }
  .betpeek .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); color: var(--text-2); }
  .betpeek .whale { height: 18px; flex: none; display: inline-flex; align-items: center; padding: 0 var(--s-half); border-radius: var(--r-sm); border: 1px solid var(--text-2); font: 700 var(--fs-xs) var(--font-data); font-style: normal; letter-spacing: .1em; color: var(--text-1); }
  .betpeek .more { margin-left: auto; font: 600 var(--fs-xs) var(--font-data); letter-spacing: .12em; color: var(--text-2); }

  /* The market card dissolves into the sheet: its rows are the sheet's own, and the dock is pinned to the sheet's foot. */
  .card.market { display: contents; }
  .rail { --mk-cols: minmax(0, 1fr) auto; }
  .mk-head { order: 2; flex: none; height: 24px; margin-top: var(--s-half); padding: 0 var(--s-half); border: 0; align-items: baseline; }
  .mk-pool { flex-direction: row; align-items: baseline; gap: var(--s1); }
  .mk-pool .lbl, .mk-rules { display: none; }
  .mk-pool .amt::before { content: 'Pool '; font: 700 var(--fs-lg) var(--font-data); }
  .mk-pool .amt b { font-size: var(--fs-lg); }
  .mk-pool .amt small { font-size: var(--fs-sm); }
  .mk-short { display: block; font: 600 var(--fs-sm) var(--font-data); letter-spacing: .06em; color: var(--text-2); white-space: nowrap; }
  .mk-cols { order: 3; flex: none; display: flex; justify-content: space-between; align-items: center; height: 16px; margin-top: var(--s1); padding: 0 var(--s2); }
  .mk-cols span:nth-child(n+3) { display: none; }
  .m-only { display: inline; text-transform: none; letter-spacing: 0; font-style: normal; font-family: var(--font-ui); font-weight: 400; }
  .runners { order: 4; flex: none; gap: var(--s-half); margin-top: var(--s-half); }
  .runners li { height: var(--tap); padding: 0 var(--s2); grid-template-columns: var(--mk-cols); }
  .runners li .who { display: grid; grid-template-columns: 4px 24px minmax(0, 1fr); gap: var(--s1); }
  .runners li .stripe { height: 28px; }
  .runners li .n { width: auto; font-size: var(--fs-md); }
  .runners li .id { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s1); align-items: baseline; line-height: 1.2; }
  .runners li .nm { font-size: var(--fs-md); }
  .runners li .more { display: none; grid-column: 1 / -1; font: 600 var(--fs-xs) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .runners li.sel .more { display: block; }
  .runners li .win { font-size: var(--fs-2xl); }
  .runners li .win.long { font-size: var(--fs-xl); }
  .runners li .pl, .runners li .sh, .runners li .bk { display: none; }

  /* The rest of the sheet, at full: the proof card, live bets, form guide, wallet. */
  body:not(.race-on) .rail .leftcol {
    --hud: overlay; order: 5; position: static; z-index: auto; display: none; width: auto; overflow: visible; gap: var(--s1);
  }
  body:not(.race-on) .rail[data-snap="full"] .leftcol { display: flex; }
  .rail .leftcol .card { padding: var(--s2); border-radius: var(--r-lg); background: var(--surface-2); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .rail .leftcol .proofcard { background: var(--surface-2); }
  .rail .leftcol .formguide { padding: 0; }
  .rail .leftcol .feedcard { padding: var(--s1) var(--s2) var(--s-half) !important; }
  .walletrow {
    display: none; align-items: center; justify-content: space-between; width: 100%; min-height: var(--s7); padding: 0 var(--s2);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: transparent; color: var(--text-1); cursor: pointer;
  }
  body.net .walletrow { display: flex; }
  .walletrow b { font: 600 var(--fs-md) var(--font-data); letter-spacing: .04em; }
  .rail[data-snap="peek"] #slip { visibility: hidden; }

  /* The dock: one block in the thumb zone. A 24px status row, then the stake chips beside the Bet button (frame 3). */
  .slip {
    order: 6; margin: auto calc(-1 * var(--s2)) 0; padding: var(--s1) var(--s2) calc(var(--s1) + var(--safe-b));
    position: sticky; bottom: 0; z-index: 3; background: var(--surface-1); border-top: 1px solid var(--line);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "row row" "stakes cta" "hint hint"; gap: var(--s1);
  }
  .slip-row { grid-area: row; height: 24px; }
  .notice { min-height: 24px; height: 24px; padding: 0 var(--s1); border-radius: var(--r-sm); }
  .notice .tag { height: 16px; }
  .stakes { grid-area: stakes; grid-template-columns: repeat(var(--n, 4), 44px); gap: var(--s-half); }
  .stakes button { height: var(--s7); border-radius: var(--r-md); font-size: var(--fs-lg); }
  .slip .cta { grid-area: cta; height: var(--s7); min-height: var(--s7); padding: 0 var(--s1); font-size: var(--fs-lg); line-height: 1.1; text-align: center; text-wrap: balance; }
  .slip .cta[data-k="ready"] { white-space: nowrap; }
  .slip .cta .bl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .slip .cta .bt { font-size: var(--fs-xl); line-height: 1; }
  .slip .cta .bp { font-size: var(--fs-md); font-weight: 600; line-height: 1; }
  .slip .cta[data-k="busy"], .slip .cta[data-k="done"], .slip .cta[data-k="retry"], .slip .cta[data-k="idle"] { font-size: var(--fs-md); }
  .slip[data-k="cta"] .stakes { display: none; }
  .slip[data-k="cta"] .cta { grid-column: 1 / -1; font-size: var(--fs-xl); }
  .slip.stack { grid-template-areas: "row row" "stakes stakes" "cta cta" "hint hint"; }
  .slip.stack .stakes { grid-template-columns: repeat(var(--n, 4), 1fr); }
  .fineprint { grid-area: hint; }

  /* ---------------- race: the strip, the banner, the camera chips and the peek bar (frame 7) ---------------- */
  /* The tower becomes a slim classification strip under the top bar. --hud: overlay, so the course is NOT framed around it. */
  .tower {
    --hud: overlay; display: none; left: var(--s1); right: var(--s1); top: calc(var(--top-h) + var(--s2)); width: auto;
    padding: var(--s-half); gap: 0; border-radius: var(--r-lg); background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.race-on .tower { display: flex; }
  .tower-head, .tower-sec, .tower-prog { display: none; }
  .tower-rows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-half); height: auto !important; }
  .tower-rows li {
    position: relative !important; transform: none !important; height: auto; padding: 6px var(--s1) 4px; border-radius: var(--r-md);
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: baseline; column-gap: var(--s-half); row-gap: 0;
  }
  .tower-rows li .stripe { position: absolute; left: 0; right: 0; top: 0; width: auto; height: 3px; border-radius: 0; }
  .tower-rows li .pos { grid-area: 1 / 1; font-size: var(--fs-lg); line-height: 1; text-align: left; }
  .tower-rows li .who { grid-area: 1 / 2; }
  .tower-rows li .who .num, .tower-rows li .who .nm, .tower-rows li .mine-tag { display: none !important; }
  .tower-rows li .tk { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .06em; color: var(--text-1); }
  .tower-rows li .rt { grid-area: 2 / 1 / 3 / 3; }
  .tower-rows li .gap { height: auto; min-width: 0; padding: 0; border: 0; font-size: var(--fs-xs); line-height: 1.3; justify-content: flex-start; color: var(--text-2); }
  .tower-rows li .gap.lead { font-size: var(--fs-xs); letter-spacing: .06em; }
  .tower-rows li.mine .tk, .tower-rows li.mine .gap { color: var(--text-1); }
  /* The rail on a phone: in the off-track margin left of the wall, small dots, no labels (the strip names the order). */
  .raillane { display: none !important; }
  body:not(.race-on) .coursemap, body.results .coursemap { display: none; }
  .coursemap { z-index: 7; }
  .cm-track { width: 2px; left: -1px; }
  .cm-marks .mk b { display: none; }
  .cm-marks .mk i { left: -4px; top: -4px; width: 8px; height: 8px; border-width: 1.5px; }
  .cm-dots .dt { left: -17px; width: 14px; height: 14px; margin-top: -7px; border-width: 1.5px; font-size: 9px; }
  .cm-dots .dt.mine { box-shadow: 0 0 0 1.5px var(--accent); }
  .cm-dots .tk { left: -3px; width: 6px; }

  /* Race control drops under the strip. */
  .banner {
    top: calc(var(--top-h) + var(--s2) + 56px + var(--s1)); bottom: auto; left: var(--s1); right: var(--s1); transform: none;
    width: fit-content; max-width: calc(100vw - var(--s2)); margin-inline: auto; min-height: 44px; padding: 0 var(--s2);
    animation-name: dropm;
  }
  @keyframes dropm { from { opacity: 0; transform: translateY(-12px); } }
  .banner::before { display: none; }
  .banner .bk, .banner .sep { font-size: var(--fs-lg); }
  .banner .msg { font-size: var(--fs-sm); }

  /* Camera chips: a panel just above the peek bar, never inside it. Auto / Pack / Leader, then one chip per marble. */
  .cambar {
    left: var(--s1); right: var(--s1); bottom: calc(88px + var(--safe-b) + var(--s1)); transform: none; max-width: none; overflow: visible;
    grid-template-columns: repeat(3, 1fr); gap: var(--s-half); padding: var(--s-half); border-radius: var(--r-lg);
  }
  body.race-on .cambar { display: grid; }
  .cambar .camwhy { display: none; }
  .cambar button { padding: 0; }
  .cambar .camcoins { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; padding: 0 var(--s1); border-left: 0; }
  .cambar .camcoins button { width: var(--tap); }
  .cambar .camcoins .tok { width: 30px; height: 30px; }

  /* The race peek bar: the sheet, locked at peek (88px + safe area), is the ONLY bottom band. */
  body.race-on .rail > :not(.grab):not(.peekbar) { display: none; }
  body.race-on .rail { overflow: visible; }
  body.race-on .rail.mine { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--glass); border-top-color: var(--accent); box-shadow: 0 -16px 48px -20px var(--glow); }
  body.race-on .peekbar { display: flex; flex-direction: column; justify-content: center; flex: none; margin-top: 0; min-height: 0; position: relative; }
  .pk { display: flex; align-items: center; gap: var(--s2); height: var(--s7); cursor: pointer; }
  .pk .tok { width: 40px; height: 40px; border-width: 3px; font-size: var(--fs-md); }
  .pk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-half); }
  .pk-t { display: flex; align-items: baseline; gap: var(--s1); white-space: nowrap; font: 600 var(--fs-md) var(--font-ui); }
  .pk-t b { font: 700 var(--fs-lg) var(--font-data); font-variant-numeric: tabular-nums; }
  .pk-s { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  .pk-pay { display: flex; flex-direction: column; align-items: flex-end; }
  .pk-pay .lbl { font-size: var(--fs-xs); }
  .pk-pay b { font: 700 var(--fs-2xl)/1 var(--font-data); font-variant-numeric: tabular-nums; color: var(--win); }
  .pk-follow {
    position: absolute; top: -28px; right: var(--s1); height: 24px; display: inline-flex; align-items: center; gap: var(--s-half); padding: 0 var(--s1);
    border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; white-space: nowrap;
  }
  .pk-follow svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .pk.spec { cursor: default; }
  .pk.spec .pk-txt { gap: var(--s-half); align-items: flex-start; }
  .pk.spec .pk-s { font: 600 var(--fs-md) var(--font-ui); color: var(--text-1); }
  .pk.spec .cta { width: auto; flex: none; min-height: var(--s6); height: var(--s6); padding: 0 var(--s3); font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: var(--s1); }
  .pk.spec .cta svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

  /* Countdown on a phone: the sheet collapses to the peek bar and carries the Riding chip. */
  body.countdown .rail { visibility: visible; background: var(--surface-1); border-top-color: var(--line-strong); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.countdown .rail .peekbar { visibility: hidden; }
  .overlay.lights { background: radial-gradient(60% 50% at 50% 40%, transparent 40%, var(--scrim) 100%); }
  .wires { gap: 120px; } .wires i { height: 40px; }
  .gantry i { width: 40px; height: 40px; }
  .gantry { gap: var(--s2); padding: var(--s1) var(--s2); }
  /* The number sits below the gate, so the marbles stay in view; the top bar gets out of the lamps' way (frame 10). */
  .overlay.lights .count { margin-top: 132px; font-size: var(--fs-6xl); }
  body.countdown .topbar .clock { visibility: hidden; }
  body.countdown .topbar .wallet { background: none; border-color: transparent; }
  .overlay.lights p { bottom: calc(88px + var(--safe-b) + var(--s2)); }
  .ridingchip { bottom: calc(var(--safe-b) + var(--s1) + 4px); max-width: calc(100vw - var(--s2)); }

  /* ---------------- results: the bottom result sheet (brief section 7) ---------------- */
  .results { background: none; }
  .results .paidpill { top: calc(var(--top-h) + var(--s2)); height: 40px; padding: 0 var(--s2); font-size: var(--fs-sm); max-width: calc(100vw - var(--s2)); }
  .resshell {
    position: fixed; z-index: 13; left: 0; right: 0; bottom: 0; height: var(--sheet-h, 60dvh); display: flex; flex-direction: column; gap: var(--s1);
    padding: 0 var(--s2); overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; border: 1px solid var(--line); border-width: 1px 0 0 0;
    background: color-mix(in srgb, var(--surface-1) 90%, transparent); box-shadow: 0 -16px 48px -24px var(--shadow);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    transition: height .28s cubic-bezier(.2, .8, .2, 1);
  }
  .resshell.dragging { transition: none; }
  .resshell:not([data-snap="peek"]) { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .resshell > .grab { order: 0; }
  .kopull { order: 1; display: block; margin: 0; text-align: center; font: 600 var(--fs-xs) var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
  .kopull[hidden] { display: none; }
  .resshell[data-snap="full"] .kopull { display: none; }
  .resleft, .resstack { display: contents; }
  .podiumcard { display: none; }
  .myres { order: 2; flex: none; padding: var(--s2); gap: var(--s1); border-radius: var(--r-lg); background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .myres.win { background: linear-gradient(var(--celebrate-soft), var(--celebrate-soft)), var(--surface-2); }
  .myres.watch { background: var(--surface-2); }
  .mr-top .lbl { display: none; }
  .mr-head { gap: var(--s1); }
  .mr-head .tok.lg { width: 40px; height: 40px; }
  .mr-head h3 { font-size: var(--fs-xl); }
  .mr-pay .big b { font-size: var(--fs-3xl); }
  .mr-stats { padding-top: var(--s1); gap: var(--s1); }
  .mr-stats b { font-size: var(--fs-lg); }
  .myres #resConnect { display: none; }
  .myres.watch .mr-head h3 { font-size: var(--fs-lg); }
  .podm { order: 3; flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
  .podm .pt { padding: var(--s1); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
  .podm .pt.p1 { border-color: var(--line-strong); }
  .podm .pt .r { display: flex; align-items: center; gap: var(--s1); white-space: nowrap; }
  .podm .pt .r b { font: 700 var(--fs-md) var(--font-data); font-variant-numeric: tabular-nums; }
  .podm .pt .r i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c); }
  .podm .pt .r span { font: 700 var(--fs-sm) var(--font-data); letter-spacing: .08em; }
  .podm .pt .t { font: 600 var(--fs-sm) var(--font-data); font-variant-numeric: tabular-nums; color: var(--text-2); }
  .podm .pt.none { grid-column: 1 / -1; text-align: center; color: var(--text-2); }
  .finalpanel { order: 4; flex: none; padding: 0; gap: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fo-head { padding: 0 var(--s1) var(--s-half); }
  .final { gap: 0; }
  .final li { height: 24px; grid-template-columns: 16px 3px minmax(0, 1fr) auto; padding: 0 var(--s1); border-radius: var(--r-sm); gap: var(--s1); }
  .final li .pos { font-size: var(--fs-sm); }
  .final li .stripe { width: 3px; height: 14px; }
  .final li .who { gap: var(--s-half); }
  .final li .nm { font-size: var(--fs-sm); }
  .final li .ft { font-size: var(--fs-sm); font-weight: 700; }
  .final li .oo { height: 18px; font-size: var(--fs-xs); }
  .proofbar { order: 5; position: static; flex: none; flex-wrap: wrap; }
  .proofbar .proofpill.sm { min-height: var(--tap); }
  .koreplay { order: 6; flex: none; }
  .nextcard {
    order: 9; position: sticky; bottom: 0; z-index: 1; margin: auto calc(-1 * var(--s2)) 0; padding: var(--s1) var(--s2) calc(var(--s1) + var(--safe-b));
    border-radius: 0; border: 0; border-top: 1px solid var(--line); background: var(--surface-1); gap: var(--s2); min-height: calc(72px + var(--safe-b));
  }
  .resstack.hero .nextcard { order: 9; border-top-color: var(--accent); box-shadow: none; }
  .nring, .resstack.hero .nring { width: 48px; height: 48px; }
  .nring b, .resstack.hero .nring b { font-size: var(--fs-xl); }
  .ntxt strong, .resstack.hero .ntxt strong { font-size: var(--fs-md); }
  /* The pinned bar: ring | label over note | (Start round, local only) or Connect for a spectator. */
  .nextcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring lbl act" "ring note act"; align-items: center; column-gap: var(--s2); row-gap: 2px; }
  .nring { grid-area: ring; }
  .ntxt { display: contents; }
  .ntxt .lbl { grid-area: lbl; align-self: end; }
  .ntxt strong { grid-area: note; align-self: start; white-space: nowrap; }
  .ntxt .ghost { grid-area: act; margin: 0; }
  #nextConnect:not([hidden]) { grid-area: act; display: inline-flex; align-items: center; justify-content: center; width: auto; flex: none; height: var(--s7); padding: 0 var(--s2); font-size: var(--fs-md); }
  .resshell[data-snap="peek"] > :not(.grab):not(.myres):not(.resstack):not(.nextcard) { display: none; }
  body.paid .topbar .clock { visibility: visible; }
}

/* Narrowest phones: LOW is text, so it replaces the currency suffix rather than overflow the bar. */
@media (max-width: 420px) {
  .wallet:has(.lowtag:not([hidden])) .cur { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail, .resshell { transition: none; }
  .betpeek .pulse { animation: none; }
  .live, .livedot i, .ring.now strong, .sealpill, .spin, .steps3 .bar i.ind, .slip .cta[data-k="ready"], .feed li:first-child { animation: none; }
  .steps3 .bar i.ind { width: 40%; }
}

/* Results hide the tower on phones too (the mobile rule that shows it while racing has the same weight, so this one is stronger). */
body.results.race-on .tower { display: none; }

/* The wallet card as a bottom sheet (W1b to W5b): controls in the thumb zone, close by dragging the handle or tapping the scrim. */
@media (max-width: 900px) {
  .overlay.sheetov { place-items: end center; padding: 0; }
  .sheetcard { width: 100%; max-height: calc(100dvh - 72px); padding: 0 var(--s2) calc(var(--s2) + var(--safe-b)); border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
    animation: wsheet .28s cubic-bezier(.2, .8, .2, 1); transition: transform .2s; }
  .sheetcard.dragging { transition: none; }
  .sheetcard .whandle { display: flex; justify-content: center; align-items: center; height: var(--tap); margin: 0 calc(-1 * var(--s2)); touch-action: none; cursor: grab; }
  .sheetcard .whandle i { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line-strong); }
  .wcopy.head { display: none; }
  .wcopy.foot { display: inline-flex; }
  .wfoot .wbtn { flex: 1; }
  .walletopt { min-height: var(--s7); }
}
@keyframes wsheet { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .sheetcard { animation: none; } }

/* ---- round proof card (B1 to B3) ---- */
.proofhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s1); }
.proofhead .wlabel { margin: 0; }
.xbtn { width: var(--tap); height: var(--tap); margin-right: calc(-1 * var(--s1)); display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.xbtn:hover { background: var(--surface-2); color: var(--text-1); }
.xbtn svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.pstate { display: flex; align-items: center; gap: var(--s1); margin: var(--s1) 0; font: 600 var(--fs-lg) var(--font-ui); }
.pstate svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pstate .wtag2 { margin-left: var(--s-half); }
.pstate.none svg { stroke-dasharray: 3 3; color: var(--text-2); }
.prows { margin: var(--s2) 0; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); }
.prow { display: flex; align-items: center; gap: var(--s1); min-height: var(--s6); padding: 0 var(--s2); }
.prow + .prow { border-top: 1px solid var(--line); }
.prow .k { flex: none; width: 96px; font: 600 var(--fs-xs) var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.prow .v { flex: 1; min-width: 0; font: 500 var(--fs-md) var(--font-ui); color: var(--text-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.prow .v.mono { font: 500 var(--fs-sm) ui-monospace, SFMono-Regular, Menlo, monospace; }
.prow .v.later { color: var(--text-3); }
.prow .v a { color: var(--text-1); text-underline-offset: 3px; }
.prow .wcopy.head { display: inline-flex; flex: none; width: var(--tap); height: var(--tap); margin-right: calc(-1 * var(--s1)); }
.wbtn.dashed:disabled { background: transparent; color: var(--text-3); box-shadow: none; border: 1px dashed var(--line-strong); cursor: default; }
.presult { margin: var(--s1) 0 0; font: 500 var(--fs-sm)/1.5 var(--font-ui); color: var(--text-1); }
.pdev { margin-top: var(--s2); }
.pdev code { display: block; margin-top: var(--s1); padding: var(--s1) var(--s2); border-radius: var(--r-sm); background: var(--surface-2); font: 500 var(--fs-sm) ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); overflow-wrap: anywhere; }
.pdev .pcmd { display: flex; align-items: center; gap: var(--s1); }
.pdev .pcmd code { flex: 1; }

/* ---- onboarding stepper (C1 to C5) ---- */
.hstep { overflow: hidden; }
.hmeta { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
.hmeta .wlabel { margin: 0; }
.hskip { min-height: var(--tap); padding: 0 var(--s1); border: 0; background: transparent; color: var(--text-2); font: 600 var(--fs-md) var(--font-ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.hslide { animation: hin .2s ease-out; }
.hslide.back { animation-name: hinb; }
@keyframes hin { from { opacity: 0; transform: translateX(24px); } }
@keyframes hinb { from { opacity: 0; transform: translateX(-24px); } }
.hart { display: grid; place-items: center; height: 144px; margin: var(--s1) 0 var(--s2); border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); padding: 0 var(--s2); box-sizing: border-box; }
.hart.bars { align-content: center; gap: 6px; }
.hbar { display: flex; align-items: center; gap: var(--s1); width: 100%; font: 600 var(--fs-sm) var(--font-data); letter-spacing: .06em; color: var(--text-2); }
.hbar i { height: 12px; border-radius: var(--r-pill); background: var(--c); }
.hbar b { width: 20px; color: var(--text-1); }
.hring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) 0 75%, var(--surface-3) 0); position: relative; }
.hring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-1); }
.hring b { position: relative; font: 700 var(--fs-2xl) var(--font-data); font-variant-numeric: tabular-nums; }
.hart.clock { grid-auto-flow: column; gap: var(--s3); justify-content: center; }
.hchip { padding: 0 var(--s2); height: 32px; display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font: 600 var(--fs-sm) var(--font-ui); color: var(--text-2); }
.htiles { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.htile { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 var(--s2); border-radius: var(--r-sm); background: var(--surface-3); font: 600 var(--fs-sm) var(--font-ui); }
.htile em { font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; font-style: normal; color: var(--text-1); border: 1px solid var(--text-2); border-radius: var(--r-xs); padding: 1px 6px; }
.hpool { width: 100%; }
.hpool .strip { display: flex; height: 32px; border-radius: var(--r-sm); overflow: hidden; font: 700 var(--fs-xs) var(--font-data); letter-spacing: .08em; }
.hpool .strip span { display: grid; place-items: center; }
.hpool .rk { width: 5%; background: var(--surface-3); color: var(--text-2); }
.hpool .p1 { width: 71.25%; background: var(--accent); color: var(--accent-ink); }
.hpool .p2 { width: 23.75%; background: var(--surface-accent); color: var(--text-1); }
.hpool .cap { display: flex; justify-content: space-between; margin-top: var(--s1); font: 500 var(--fs-xs) var(--font-data); letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }
.hflow { display: flex; align-items: center; gap: var(--s1); }
.hflow span { display: grid; place-items: center; width: 72px; height: 56px; border-radius: var(--r-sm); background: var(--surface-3); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; }
.hflow i { width: 16px; height: 2px; background: var(--line-strong); }
.hbody h2 { margin: 0 0 var(--s1); font: 600 var(--fs-xl) var(--font-ui); letter-spacing: -.01em; }
.hbody p { margin: 0 0 var(--s1); font: 400 var(--fs-md)/1.5 var(--font-ui); color: var(--text-2); }
.hbody p.ex { font-size: var(--fs-sm); color: var(--text-1); }
.hnote { display: flex; align-items: center; gap: var(--s1); margin: var(--s1) 0 0; padding: var(--s1) var(--s2); border-radius: var(--r-sm); background: var(--surface-1); border: 1px solid var(--line); font: 500 var(--fs-sm) var(--font-ui); color: var(--text-1); }
.hdots { display: flex; justify-content: center; gap: var(--s1); margin: var(--s2) 0 var(--s1); }
.hdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.hdots i.on { background: var(--text-1); }
.hnav { display: flex; gap: var(--s1); }
.hnav .wbtn { margin-top: 0; }
.hnav .wbtn.ghost { flex: 0 0 38%; }
.helppulse { animation: hpulse 1.2s ease-out 1; }
@keyframes hpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 10px var(--accent-glow); } }
@media (prefers-reduced-motion: reduce) { .hslide, .hslide.back, .helppulse { animation: none; } }

/* ---- system states (A1 to A5) ---- */
.connbar { position: fixed; z-index: 13; top: calc(12px + var(--top-h) + 8px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--s1);
  min-height: 36px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line-strong); box-shadow: var(--elev);
  font: 600 var(--fs-md) var(--font-ui); white-space: nowrap; animation: fade .2s ease-out; }
.connbar[hidden] { display: none; }
.connbar .sub { font-weight: 400; color: var(--text-2); }
.connbar .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--text-1); animation: mr-spin 1s linear infinite; }
.connbar svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The panels hold their last update and cannot be pressed until the link is back. */
body.reconnecting :is(.tower, .rail, .leftcol, .resstack, .cambar, .results) { opacity: .55; pointer-events: none; transition: opacity .2s; }
.fair.none, .proofpill.none { border-style: dashed; color: var(--text-2); }
.fair.none svg path:last-child { display: none; }
/* skeleton rows: the real 40px height */
.runners li.skel, .feed li.skel { min-height: 40px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); pointer-events: none; }
.skel i { height: 12px; border-radius: var(--r-pill); background: var(--surface-3); animation: mr-blink 1.4s ease-in-out infinite; }
.skel i:first-child { width: 28px; } .skel i:last-child { flex: 1; max-width: 55%; }
@media (prefers-reduced-motion: reduce) { .skel i, .connbar .spin, .connbar { animation: none; } }
@media (max-width: 900px) { .connbar { top: calc(12px + var(--top-h) + 4px); max-width: calc(100vw - 24px); } .connbar .sub { display: none; } }

/* Short landscape phones (844x390): the strip and the camera chips step out to the sides so the course column in the middle stays clear. */
@media (max-width: 900px) and (max-height: 500px) {
  .coursemap { display: none !important; }
  .tower { right: auto; left: var(--s1); width: 120px; top: calc(12px + var(--top-h) + var(--s1)); }
  .tower-rows { grid-template-columns: 1fr; }
  .tower-rows li { padding: 3px var(--s1); }
  .cambar { left: auto; right: var(--s1); width: 248px; top: calc(12px + var(--top-h) + var(--s1)); bottom: auto; }
  .banner { top: calc(12px + var(--top-h) + var(--s1)); }
}

/* Reduced motion, the rest: row flashes, the race banner's drop and the win burst hold still (the state still reads from text and colour). */
@media (prefers-reduced-motion: reduce) {
  .tower-rows li.gain, .tower-rows li.loss, .runners li .win.up, .runners li .win.down, .banner, .burst i { animation: none !important; }
}

/* ---- tables: the chip beside the round tag, the picker sheet, house stakes in the feed, table notices ---- */
.tablechip { display: inline-flex; align-items: center; gap: var(--s-half); height: var(--s3); padding: 0 var(--s1); flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--text-1); font: 600 var(--fs-sm) var(--font-data); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.tablechip[hidden] { display: none; }
.tablechip:hover { background: var(--surface-2); }
.tablechip svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.walletopt[aria-current="true"] { border-color: var(--text-1); }
.walletopt .wn small { white-space: normal; }
.tables-note { margin: var(--s1) 0 0; }
.feed .house, .betpeek .house { font-style: normal; height: 20px; flex: none; display: inline-flex; align-items: center; padding: 0 var(--s1); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); font: 700 var(--fs-xs) var(--font-data); letter-spacing: .12em; }
.betpeek .house { height: 18px; padding: 0 var(--s-half); letter-spacing: .1em; }
.banner.table::before { content: 'TABLE'; }
@media (max-width: 900px) { .tablechip { display: none; } }