/* Wager: black and gold. Owner: SITE.
   Near black ground, a gold coin, a cool ice white for the second player. Player one is ALWAYS gold, player two is ALWAYS ice.
   The finish: THE SPLIT (one diagonal hairline between a gold field and an ice field), REEDING (the ridged edge of a coin
   as a band of fine gold ticks), THE PASS (black glass, a gold hairline, cut corners, the ticket notch) and LIGHT, NOT
   NEON (one slow sweep, a glow under the winner, a live dot). Orbitron for short headlines, Chakra Petch for reading,
   JetBrains Mono for numbers. No inline styles anywhere (CSP): classes here, or CSSOM / Web Animations from the stage modules. */
:root {
  --bg: #060709; --bg-2: #0b0d11; --panel: #0f1217; --panel-2: #161a21; --panel-3: #1d222b;
  --gold: #f4b40c; --gold-2: #ffd028; --gold-3: #ffe066; --gold-deep: #a4660a; --gold-ink: #140d02;
  --ice: #dfe9f5; --ice-2: #8fa9c7;
  --text: #f4f1e8; --mute: #9aa3ad; --faint: #5b636d;
  --line: rgba(244,180,12,.30); --line-soft: rgba(255,255,255,.08);
  --win: #2bd98f; --lose: #ff4d5e;
  --font-display: "Orbitron", "Eurostile", "Arial Black", system-ui, sans-serif;
  --font-ui: "Chakra Petch", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* the old names, kept as aliases so nothing breaks */
  --paper: var(--bg); --paper-2: var(--bg-2); --card: var(--panel); --ink: var(--text); --navy: var(--panel-2); --navy-2: var(--panel-3);
  --cherry: var(--gold-2); --cherry-2: var(--gold); --mustard: var(--ice); --mustard-2: var(--ice-2);
  --font-poster: var(--font-display); --font-stamp: var(--font-ui); --font-brush: var(--font-ui);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font-ui); font-weight: 500; font-size: 16px; line-height: 1.45;
  background-color: var(--bg);
  /* never flat: a gold light from above and the faintest grid */
  background-image:
    radial-gradient(900px 520px at 50% -160px, rgba(244,180,12,.13), transparent 70%),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px; background-repeat: no-repeat, repeat, repeat;
}
::selection { background: var(--gold); color: var(--gold-ink); }
a { color: var(--gold-2); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-3); outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.08; margin: 0 0 10px; color: var(--text); }
h1 { font-size: clamp(28px, 7.6vw, 44px); } h2 { font-size: 19px; letter-spacing: .06em; }
h3 { font-family: var(--font-ui); font-weight: 700; font-size: 18px; letter-spacing: .08em; }
p { margin: 0 0 12px; }
.brush { font-family: var(--font-ui); font-weight: 600; color: var(--gold-2); font-size: 15px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.stamp { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); } .small { font-size: 14px; } .center { text-align: center; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--panel); color: var(--text); padding: 8px; z-index: 50; }
[hidden] { display: none !important; }

/* ---- the three pieces of the finish, as values every panel can use ----
   THE PASS: black glass, a gold hairline, two 45 degree cut corners (top left, bottom right) with the hairline carried
   along the cut. REEDING: the ridged edge of a coin, a band of fine gold ticks. THE SPLIT: one diagonal hairline, about
   18 degrees off vertical, with a gold light field on one side and an ice light field on the other. */
.marquee, .strip, .ticket, .versus, .verdict, dialog {
  --cut: 14px; --d: calc(var(--cut) * .7071);
  --glass: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 44%), var(--panel);
  --cut-a: linear-gradient(135deg, transparent calc(var(--d) - .3px), var(--gold) calc(var(--d) - .3px), var(--gold) calc(var(--d) + 1.2px), transparent calc(var(--d) + 1.2px)) top left / 44px 44px no-repeat;
  --cut-b: linear-gradient(315deg, transparent calc(var(--d) - .3px), var(--gold) calc(var(--d) - .3px), var(--gold) calc(var(--d) + 1.2px), transparent calc(var(--d) + 1.2px)) bottom right / 44px 44px no-repeat;
  --reed: repeating-linear-gradient(90deg, rgba(244,180,12,.85) 0 1.5px, transparent 1.5px 5px) top left / 100% 6px no-repeat;
  /* the split under two names (the versus header): dead centre, and faint enough to pass behind a letter */
  --split: linear-gradient(108deg, rgba(244,180,12,.15) 0%, rgba(244,180,12,.03) 49.75%, rgba(255,255,255,.14) 49.75%, rgba(255,255,255,.14) 50.05%, rgba(223,233,245,.03) 50.05%, rgba(223,233,245,.13) 100%);
  /* the split behind a panel of centred words (hero, result, dialogs): the hairline passes to the right of the headline */
  --split-off: linear-gradient(108deg, rgba(244,180,12,.15) 0%, rgba(244,180,12,.03) 64%, rgba(255,255,255,.14) 64%, rgba(255,255,255,.14) 64.3%, rgba(223,233,245,.03) 64.3%, rgba(223,233,245,.13) 100%);
  background: var(--cut-a), var(--cut-b), var(--glass); background-origin: border-box;
  border: 1px solid var(--line); border-radius: 0; color: var(--text);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---- always-visible mode badge + sample banner ---- */
.mode {
  position: sticky; top: 0; z-index: 30; text-align: center; padding: 6px 10px; font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; background: #0a0b0e; color: var(--gold-2); border-bottom: 1px solid var(--line);
}
.mode::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); margin-right: 9px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(255,208,40,.6); animation: live 2s ease-out infinite; }
.mode.sol { background: var(--lose); color: #fff; }
.mode.sol::before { background: #fff; }
.mode small { letter-spacing: .02em; text-transform: none; font-weight: 500; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255,208,40,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255,208,40,0); } }
.sample {
  text-align: center; padding: 5px 10px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--gold-3);
  background: repeating-linear-gradient(135deg, #120e05 0 14px, #1a1406 14px 28px); border-bottom: 1px solid var(--line-soft);
}

/* ---- top bar ---- */
.top { max-width: 760px; margin: 0 auto; padding: 12px 16px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-decoration: none; line-height: 1; }
/* the logo mark: the gold coin */
.brand::before { content: ""; width: 32px; height: 32px; flex: none; background: url(/favicon.svg) center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(244,180,12,.45)); }
.brand small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--gold-2); font-weight: 700; border: 1px solid var(--line); padding: 3px 6px; }
.top .grow { flex: 1; }
.chip-pill { border: 1px solid var(--line); border-radius: 3px; padding: 5px 9px; background: rgba(255,255,255,.035); font-family: var(--font-mono); font-weight: 700; font-size: 13px; text-decoration: none; color: var(--text); white-space: nowrap; }
.net.up { color: var(--win); } .net.down { color: var(--lose); }
.nav { width: 100%; display: flex; gap: 2px; overflow-x: auto; padding: 4px 0 0; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; padding: 9px 12px 10px; text-decoration: none; color: var(--mute); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--gold-2); border-bottom-color: var(--gold); background: linear-gradient(0deg, rgba(244,180,12,.14), transparent 80%); }
.nav a:focus-visible { outline-offset: -2px; }
/* the page body takes focus after a tab change (for the skip link and screen readers): it needs no ring of its own */
.view:focus, .view:focus-visible { outline: none; }
.view { max-width: 760px; margin: 0 auto; padding: 14px 16px 8px; min-height: 55vh; border-top: 1px solid var(--line); }
.foot { max-width: 760px; margin: 28px auto 0; padding: 16px 16px 28px; font-size: 13px; border-top: 1px solid var(--line-soft); color: var(--mute); }

/* ---- buttons + fields. Secondary: black glass with a gold hairline. Primary: solid gold, dark words, a reeded top edge. ---- */
.btn {
  appearance: none; font: inherit; font-weight: 700; letter-spacing: .05em; cursor: pointer; padding: 12px 18px; min-height: 46px; border-radius: 3px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), var(--panel); color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s, border-color .12s, box-shadow .12s;
}
.btn:hover { border-color: var(--gold); }
.btn:active { transform: translateY(2px); }
.btn.primary {
  color: var(--gold-ink); font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; border-color: var(--gold-3);
  background: repeating-linear-gradient(90deg, rgba(20,13,2,.5) 0 1.5px, transparent 1.5px 5px) top left / 100% 5px no-repeat, linear-gradient(180deg, var(--gold-3), var(--gold-2) 30%, var(--gold) 72%, #d99a06);
  box-shadow: 0 0 0 1px #000, 0 10px 28px -10px rgba(244,180,12,.75);
}
.btn.primary:hover { border-color: #fff3b0; box-shadow: 0 0 0 1px #000, 0 10px 34px -8px rgba(244,180,12,.95); }
.btn.gold { background: linear-gradient(180deg, rgba(244,180,12,.2), rgba(244,180,12,.07)), var(--panel); border-color: var(--gold); color: var(--gold-3); }
.btn.small { padding: 6px 12px; min-height: 34px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row > .grow { flex: 1 1 160px; }
.stack > * + * { margin-top: 12px; }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; color: var(--text); }
input[type="text"], input[type="number"], input[type="password"], textarea, select {
  width: 100%; font: inherit; font-family: var(--font-mono); font-size: 15px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; background: #07080a; color: var(--text);
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
textarea { min-height: 84px; resize: vertical; }
.hash { font-family: var(--font-mono); font-size: 12px; word-break: break-all; background: #07080a; color: var(--gold-3); border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px; display: block; }

/* ---- the frame over the door (it was a sign with light bulbs; now it is a pass with a reeded edge, the split behind
   it, corner brackets, and one slow gold light that crosses it every six seconds) ---- */
.marquee {
  position: relative; padding: 30px 22px 22px; text-align: center; margin: 4px 0 16px; overflow: hidden; --cut: 20px;
  background: var(--cut-a), var(--cut-b), var(--reed), var(--split-off), var(--glass); background-origin: border-box;
}
.marquee > * { position: relative; z-index: 1; }
/* the light sweep: a soft band, tilted like the split, that crosses the frame and then rests */
.marquee::before {
  content: ""; position: absolute; z-index: 3; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,224,102,.1) 30%, rgba(255,246,204,.3) 50%, rgba(255,224,102,.1) 70%, transparent);
  transform: translateX(-140%) skewX(-18deg); animation: chase 6s ease-in-out infinite;
}
/* corner brackets on the two square corners */
.marquee::after {
  content: ""; position: absolute; z-index: 2; inset: 12px 7px 7px; pointer-events: none;
  background:
    linear-gradient(var(--gold-2), var(--gold-2)) top right / 20px 2px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) top right / 2px 20px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) bottom left / 20px 2px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) bottom left / 2px 20px no-repeat;
}
.marquee h1 { margin: 0 0 6px; color: var(--gold-2); }
.marquee p { margin: 10px 0 0; font-size: 15px; color: var(--text); }
.marquee .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.marquee .tag, .tag { display: inline-block; border: 1px solid var(--gold); color: var(--gold-2); border-radius: 2px; padding: 2px 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.marquee .tag.hot, .tag.hot { background: var(--gold-2); color: var(--gold-ink); }
@keyframes chase { 0%, 52% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(440%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .marquee::before { animation: none; } }

/* ---- hero: the frame over the door is a stage. A practice round of any game plays here, no wallet. ----
   Phone order: headline (two short lines), the stage, ONE fat button, then the offer, the terms and the fairness
   line: the game is the first screen, the words come after it. From 620px the words and the button sit on the left
   and the stage on the right, so the whole thing is on the first screen of a laptop too. */
.hero { display: grid; gap: 8px; padding: 24px 18px 22px; grid-template-areas: "head" "stage" "act" "floor" "terms" "fair"; }
.hero-head { grid-area: head; min-width: 0; }
.hero h1 {
  font-weight: 900; font-size: clamp(38px, 11.4vw, 58px); line-height: 1; margin: 0; letter-spacing: .04em; color: var(--gold-2);
  background: linear-gradient(180deg, #fff6cc 8%, var(--gold-2) 46%, var(--gold) 70%, var(--gold-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(244,180,12,.4));
}
.hero .hero-sub { margin: 7px 0 0; font-size: clamp(11px, 3.1vw, 14px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); text-wrap: balance; }
.hero-terms { grid-area: terms; min-width: 0; }
.hero .hero-offer { margin: 4px 0 0; font-size: clamp(15px, 4vw, 17px); font-weight: 700; color: var(--gold-3); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: center; }
.hero .hero-fine { margin: 4px 0 0; font-size: 15px; color: var(--text); }
.practice { grid-area: stage; min-width: 0; }
.hero .practice-label { margin: 0 0 5px; font-size: clamp(13px, 3.4vw, 14px); font-weight: 700; letter-spacing: .03em; color: var(--gold-2); text-wrap: balance; }
/* the resting coin bobs until a round starts, so the stage is never a still picture */
.practice-stage.idle svg > g:last-of-type > g { animation: bob 1.5s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(2px); } to { transform: translateY(-9px); } }
.practice-frame { position: relative; }
.hero .stage .cap {
  min-height: 76px; padding: 5px 12px; font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--gold-3);
  display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center;
  border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(244,180,12,.11), rgba(244,180,12,.02) 70%), #07080a;
}
/* the live dot: the strip is the stage's own voice, and it is never a blank black bar */
.hero .stage .cap::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); animation: live 2s ease-out infinite; }
.hero .stage .cap:empty::before { display: none; }
/* the practice frame prints its own big verdict: a stage's own small winner banner would say it twice */
.practice-stage .result-banner { display: none; }
/* The result lands big, on the caption strip at the foot of the stage and exactly as tall as it (76px), so it never
   covers a pixel of the drawing above: the winner's banner, the totals and the pieces all stay in view. */
.practice-verdict {
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 76px; padding: 4px 10px 5px; text-align: center; border-top: 1px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #07080a; transform-origin: 50% 100%; animation: pop .4s cubic-bezier(.2, 1.6, .4, 1) both;
}
.practice-verdict strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 8.4vw, 36px); line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.practice-verdict span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.practice-verdict.win { background: radial-gradient(120% 160% at 50% 110%, rgba(244,180,12,.3), transparent 62%), #07080a; }
.practice-verdict.win strong { color: var(--gold-3); text-shadow: 0 0 22px rgba(244,180,12,.75); }
.practice-verdict.lose strong { color: var(--lose); }
.practice-verdict.neutral strong { color: var(--ice); }
.hero-actions { grid-area: act; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; min-height: 68px; }
.hero-actions .btn { min-height: 56px; }
/* after the first round: the real flow on top, another practice game under it, both full width (the labels are long) */
.hero-actions .btn.grow { flex: 1 1 100%; }
.btn.fat { width: 100%; flex-direction: column; gap: 4px; padding: 10px 18px 10px; min-height: 68px; font-weight: 900; font-size: 25px; line-height: 1; animation: nudge 2.6s ease-in-out 3s infinite; }
.btn.fat small { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.btn.fat[disabled], .btn.fat:active { animation: none; }
/* the one fat button breathes: a gold glow under it, never a wobble */
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 1px #000, 0 10px 28px -10px rgba(244,180,12,.75); } 50% { box-shadow: 0 0 0 1px #000, 0 12px 44px -6px rgba(255,208,40,1); } }
.hero .hero-fair { grid-area: fair; margin: 0; font-size: 15px; line-height: 1.4; color: var(--mute); }
.hero, .ticket.stub.picked, #play { scroll-margin-top: 44px; }
.picked .watch { margin-top: 8px; }
@media (min-width: 620px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head stage" "act stage" "floor stage" "terms stage" "fair fair"; grid-template-rows: 1fr auto auto 1fr auto; gap: 12px 24px; padding: 34px 30px 28px; text-align: left; }
  .hero-head { align-self: end; }
  .hero h1 { font-size: 50px; }
  .hero .hero-sub { font-size: 13px; }
  .hero-actions { align-self: start; justify-content: flex-start; }
  .hero-terms { align-self: start; }
  .hero .hero-offer { justify-content: flex-start; font-size: 17px; margin-top: 0; }
  .hero .practice-label, .hero .hero-fair { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .btn.fat, .practice-stage.idle svg > g:last-of-type > g, .mode::before, .floor-clock::before, .hero .stage .cap::before, .rt-seal .rt-badge::before { animation: none; } }
/* phone: a tighter shell, so the stage and its one button sit on the first screen */
@media (max-width: 619px) {
  .top { padding-top: 8px; gap: 6px 6px; } .view { padding-top: 10px; } .hero.marquee { margin-top: 0; }
  .brand { font-size: 19px; } .brand::before { width: 28px; height: 28px; }
  .chip-pill { font-size: 12px; padding: 4px 7px; }
  /* signed in: the three figures get a row of their own under the logo instead of wrapping one by one */
  .top .grow:has(+ .chip-pill) { flex: 0 0 100%; height: 0; margin-top: -6px; }
  /* the wallet sits beside the logo on the first row, so the figures never need a third row */
  .top .brand { order: -2; } .top a.chip-pill[href="#/me"] { order: -1; margin-left: auto; }
  .sample { font-size: 10.5px; letter-spacing: .04em; }
  /* all five tabs on one row of a 360px phone: nothing is cut off at the right edge */
  .nav { justify-content: space-between; } .nav a { padding: 8px 6px 9px; font-size: 12.5px; letter-spacing: .04em; }
}

/* ---- coin strip: the first thing in the hero, drawn ONLY when the coin's address is set (core/brand.js LAUNCH).
   The whole address is always readable: it wraps inside its box on a phone, it is never cut short. ---- */
.hero.has-coin { grid-template-areas: "coin" "head" "stage" "act" "floor" "terms" "fair"; }
@media (min-width: 620px) {
  .hero.has-coin { grid-template-areas: "coin coin" "head stage" "act stage" "terms stage" ". floor" "fair fair"; grid-template-rows: auto 1fr auto 1fr auto auto; }
}
/* Two short rows on a phone (ticker + links, then the whole address + COPY), one row from 620px: the strip must not
   push the stage and its one fat button off the first screen. */
.coin-strip {
  grid-area: coin; min-width: 0; position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tick links links" "ca ca copy";
  gap: 6px 8px; align-items: center; background: rgba(6,7,9,.72); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px;
}
.coin-tick { grid-area: tick; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .06em; line-height: 1; color: var(--gold-2); text-align: left; }
.coin-ca {
  grid-area: ca; min-width: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1.3; text-align: left; overflow-wrap: anywhere; word-break: break-all;
  background: #07080a; color: var(--gold-3); border: 1px solid var(--line); border-radius: 2px; padding: 5px 7px; -webkit-user-select: all; user-select: all;
}
.coin-strip > .btn { grid-area: copy; }
.coin-strip .btn.small { padding: 4px 10px; min-height: 30px; font-size: 12px; }
.coin-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.coin-strip .btn.buy { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); border-color: var(--gold-3); }
/* phone: the Buy button already carries the ticker, so the ticker word itself is left out and the three links share one row */
@media (max-width: 619px) {
  .hero.has-coin { padding-top: 18px; } .hero.has-coin h1 { font-size: clamp(32px, 9.4vw, 40px); }
  .coin-strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links links" "ca copy"; }
  .coin-tick { display: none; }
  .coin-links { flex-wrap: nowrap; justify-content: center; }
}
@media (min-width: 620px) { .coin-strip { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "tick ca copy links"; padding: 8px 10px; } .coin-ca { font-size: 12px; text-align: center; } }

/* ---- the floor: exhibition rounds between the visitor's own. Two house bots, labelled, nothing staked.
   On a phone it sits UNDER the one fat button (the button stays on the first screen and never moves); from 620px it
   sits under the stage. Its lines are sized to stay on one line each from 360px up. ---- */
.floor { grid-area: floor; min-width: 0; display: grid; gap: 6px; justify-items: center; text-align: center; }
.floor[hidden] { display: none; }
.hero .floor p { margin: 0; }
.hero .floor-label { font-size: clamp(13px, 3.4vw, 14px); font-weight: 700; letter-spacing: .03em; color: var(--gold-2); text-wrap: balance; }
.floor-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; }
.hero .floor-clock { font-family: var(--font-mono); font-size: clamp(13px, 3.4vw, 14px); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* the live dot: the clock is running */
.floor-clock::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); margin-right: 8px; vertical-align: 1px; animation: live 2s ease-out infinite; }
.floor-call { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--text); }
.floor .btn.small { padding: 5px 14px; }
/* Both call buttons look the same: a seat has no colour of its own (some games deal the colours at random). */
.floor .call[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); border-color: var(--gold-3); }
.floor .call:disabled { opacity: .5; }
.hero .floor-streak { font-size: 14px; font-weight: 700; color: var(--gold-3); }
.practice-verdict.exhibit strong { font-size: clamp(20px, 6.4vw, 28px); }
/* an exhibition is won by a seat: the headline is in the winner's own colour (Bot A gold, Bot B ice) */
.practice-verdict.exhibit.seat0 strong { color: var(--gold-3); text-shadow: 0 0 22px rgba(244,180,12,.6); }
.practice-verdict.exhibit.seat1 strong { color: var(--ice); text-shadow: none; }

/* ---- the three lobby strips: where the fee goes, sealed in public, house rules ---- */
.strip-title h2 { font-size: 17px; }
.strip { padding: 16px 14px 14px; }
.strip .strip-line { margin: 12px 0 0; font-size: 15px; }
/* four passes in a row, linked by a gold line that ends in an arrow head */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.flow-stub {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 58px; padding: 8px 3px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(9px, 2.6vw, 13px); line-height: 1.15; letter-spacing: .04em;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent), var(--panel-2); color: var(--text); border: 1px solid var(--line); border-left-style: dashed; border-right-style: dashed; border-radius: 2px;
}
.flow-stub:nth-child(2) { color: var(--gold-3); border-color: var(--gold); }
.flow-stub.last { background: linear-gradient(180deg, var(--gold-3), var(--gold) 70%); color: var(--gold-ink); border-color: var(--gold-3); box-shadow: 0 6px 22px -8px rgba(244,180,12,.8); }
.flow-stub + .flow-stub::before { content: ""; position: absolute; right: calc(100% + 8px); top: 50%; width: 12px; border-top: 2px dotted var(--gold); transform: translateY(-50%); }
.flow-stub + .flow-stub::after { content: ""; position: absolute; right: calc(100% + 3px); top: 50%; border: 5px solid transparent; border-left-color: var(--gold); border-right-width: 0; transform: translateY(-50%); }
.sealed { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: seal; }
.sealed li { counter-increment: seal; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.sealed li:last-child { border-bottom: 0; }
.sealed b { font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.sealed b::before { content: "0" counter(seal) " "; font-family: var(--font-mono); color: var(--mute); }
.rules-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); font-size: 15px; }
.rules-table th, .rules-table td { padding: 10px 12px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line-soft); }
.rules-table tr:last-child th, .rules-table tr:last-child td { border-bottom: 0; }
.rules-table th { width: 32%; font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--gold-2); background: var(--panel-2); }
.rules-table td { font-weight: 600; overflow-wrap: anywhere; }

/* ---- tickets: passes. The half-round bite on both sides at the dashed divider is Wager's ticket notch. ---- */
.ticket { --tear: 100%; position: relative; padding: 22px 16px 14px; }
.ticket.stub { --tear: 66%; padding-bottom: 12px;
  --notch-a: radial-gradient(circle 12px at 0 var(--tear), transparent 8.4px, var(--gold) 8.7px, var(--gold) 10px, transparent 10.3px) left / 51% 100% no-repeat;
  --notch-b: radial-gradient(circle 12px at 100% var(--tear), transparent 8.4px, var(--gold) 8.7px, var(--gold) 10px, transparent 10.3px) right / 51% 100% no-repeat;
  background: var(--notch-a), var(--notch-b), var(--cut-a), var(--cut-b), var(--glass); background-origin: border-box;
  -webkit-mask: radial-gradient(circle 9px at 0 var(--tear), transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% var(--tear), transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 var(--tear), transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% var(--tear), transparent 97%, #000) right / 51% 100% no-repeat;
}
.ticket .tear { border-top: 1px dashed var(--gold); margin: 10px -16px; opacity: .6; }
.ticket .serial { position: absolute; top: 5px; right: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: .1em; }
.ticket .serial.inline { position: static; display: block; text-align: right; margin-bottom: 2px; overflow-wrap: anywhere; }
.ticket h2 { color: var(--gold-2); } .ticket h3 { color: var(--text); }
.ticket.red { --glass: linear-gradient(180deg, rgba(244,180,12,.2), rgba(244,180,12,.04) 60%), var(--panel); border-color: var(--gold); } .ticket.red h2, .ticket.red h3 { color: var(--gold-3); }
.ticket.navy { --glass: linear-gradient(180deg, rgba(255,255,255,.05), transparent 50%), var(--panel-2); } .ticket.navy h2, .ticket.navy h3 { color: var(--gold-2); }
.ticket.navy a { color: var(--gold-3); }
.grid { display: grid; gap: 12px; }
/* 25 small tickets: five rows of five from 620px up; three across on a phone, where the one left over sits in the
   middle column. The grid is part of the page and scrolls with it: never sideways. */
.games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.games > :last-child:nth-child(3n + 1) { grid-column: 2; }
@media (min-width: 620px) {
  .games { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .games > :last-child:nth-child(3n + 1) { grid-column: auto; }
}
/* very narrow phones: two across, and the one left over spans the row */
@media (max-width: 339px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games > :last-child:nth-child(3n + 1) { grid-column: auto; }
  .games > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* a tile is a small pass: a dark tile with a gold hairline and one cut corner; the picked one is lit in gold */
.game {
  appearance: none; font: inherit; text-align: center; color: inherit; cursor: pointer; width: 100%; min-width: 0; display: block;
  padding: 20px 6px 12px; transition: transform .12s, border-color .12s; --cut: 9px;
  --glass: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 50%), var(--panel);
}
.game:hover { transform: translateY(-2px); border-color: var(--gold); }
.game:focus-visible { outline-offset: -4px; }
.game svg { width: 100%; max-width: 120px; height: auto; aspect-ratio: 120 / 76; display: block; margin: 0 auto; }
.game .serial { top: 5px; right: 8px; font-size: 10px; }
.game .name { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.12; min-height: 2.24em; margin-top: 4px; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
@media (min-width: 620px) { .game .name { font-size: 14px; } }
.game[aria-pressed="true"] {
  border-color: var(--gold-2);
  --glass: radial-gradient(120% 90% at 50% 0%, rgba(255,208,40,.34), rgba(244,180,12,.08) 70%), var(--panel-2);
  background: var(--cut-a), var(--cut-b), repeating-linear-gradient(90deg, rgba(255,208,40,.9) 0 1.5px, transparent 1.5px 5px) top left / 100% 4px no-repeat, var(--glass); background-origin: border-box;
}
.game[aria-pressed="true"] .name, .game[aria-pressed="true"] .serial { color: var(--gold-3); }
/* the picked game's full ticket: art, name, the rules line, and the stub */
.ticket.stub.picked { --tear: calc(100% - 37px); margin-top: 12px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 12px; align-items: center; }
.picked svg { width: 72px; height: auto; aspect-ratio: 120 / 76; display: block; }
.picked h3 { margin: 0 0 4px; padding-right: 54px; color: var(--gold-2); }
.picked .blurb { margin: 0; font-size: 15px; }
.picked .tear { grid-column: 1 / -1; display: block; margin: 8px -16px 8px; }
.picked .odds { grid-column: 1 / -1; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .1em; white-space: nowrap; color: var(--gold-2); }
@media (min-width: 620px) { .ticket.stub.picked { grid-template-columns: 120px minmax(0, 1fr); gap: 0 16px; } .picked svg { width: 120px; } }
/* the 25 rules lines on the How it works page: the name on its own line above the rule */
.list.rules li { display: block; }
.list.rules li b { display: block; color: var(--gold-2); letter-spacing: .04em; }
.stakes { display: flex; flex-wrap: wrap; gap: 8px; }
.stake { flex: 1 1 70px; font-size: 14px; padding: 12px 4px; white-space: nowrap; }
@media (max-width: 400px) { .stake { font-size: 13px; letter-spacing: 0; } }
.stake[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); border-color: var(--gold-3); box-shadow: 0 8px 22px -10px rgba(244,180,12,.9); }
.sums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.sums div { border: 1px solid var(--line-soft); border-top: 1px solid var(--line); border-radius: 2px; padding: 9px 4px 8px; background: rgba(6,7,9,.6); }
.sums b { display: block; font-size: 16px; color: var(--gold-3); } .sums span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
/* a section divider: the headline, then a reeded band that fades out */
.section-title { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.section-title h2 { margin: 0; }
.section-title::after {
  content: ""; flex: 1; height: 7px; background: repeating-linear-gradient(90deg, rgba(244,180,12,.7) 0 1.5px, transparent 1.5px 5px);
  -webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent);
}

/* ---- lists / tables ---- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.list li > .grow { flex: 1; min-width: 0; }
.empty { padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 3px; color: var(--mute); background: rgba(255,255,255,.02); }
.kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 5px 12px; font-size: 15px; margin: 0; }
.kv dt { color: var(--mute); } .kv dd { margin: 0; word-break: break-word; font-weight: 600; }
.note { border-left: 3px solid var(--gold); background: rgba(244,180,12,.08); padding: 10px 12px; border-radius: 0 3px 3px 0; font-size: 15px; }
.note.warn { border-color: var(--lose); background: rgba(255,77,94,.1); }
.note.stamp { font-size: 13px; }
.view > .ticket + .note, .view > .note + *, .view > .marquee + .note { margin-top: 12px; }
.ok { color: var(--win); font-weight: 700; } .bad { color: var(--lose); font-weight: 700; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 2px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 14px 46px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-3), var(--gold) 70%); color: var(--gold-ink); font-family: var(--font-display); font-weight: 800; font-size: 14px; display: grid; place-items: center; box-shadow: 0 0 0 2px #07080a, 0 0 0 3px var(--gold-deep); }

/* ---- match ---- */
/* The versus header is the split: player one's gold side, player two's ice side, one diagonal hairline between them
   and the coin's word (VS) sitting on it. A seat keeps its colour everywhere: seat one gold, seat two ice. */
.versus {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; margin: 12px 0; padding: 12px 12px; --cut: 12px;
  background: var(--cut-a), var(--cut-b), var(--split), var(--glass); background-origin: border-box;
}
.versus .who { padding: 4px 2px; font-weight: 700; font-size: 16px; letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--gold-2); text-align: left; }
.versus .who.s1 { color: var(--ice); text-align: right; }
.versus .who::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--gold-2); box-shadow: 0 0 10px rgba(244,180,12,.9); }
.versus .who.s1::before { background: var(--ice); box-shadow: 0 0 10px rgba(223,233,245,.8); }
.versus .who.me { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.versus .who.won { color: var(--gold-3); text-shadow: 0 0 16px rgba(244,180,12,.85); } .versus .who.s1.won { color: #fff; text-shadow: 0 0 16px rgba(223,233,245,.85); }
.versus .who.lost { opacity: .6; }
.versus .vs { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .06em; color: var(--gold-ink); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--gold-3), var(--gold) 68%, var(--gold-deep)); box-shadow: 0 0 0 2px #07080a, 0 0 18px rgba(244,180,12,.55); }
.stage { position: relative; background: radial-gradient(120% 90% at 50% 0%, #1a1e27, #0a0b0f 72%); border: 1px solid var(--gold); border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px #000, 0 18px 40px -22px rgba(244,180,12,.5); }
.stage svg { display: block; width: 100%; height: auto; }
/* The caption sits UNDER the drawing, never on top of it: on a phone an overlaid caption (two lines) hid the bottom of
   the newer stages (win banners, WINS tags, prize slots). 60px holds two lines, so the page does not jump. */
.stage .cap {
  display: flex; align-items: center; justify-content: center; padding: 8px 12px; text-align: center; font-weight: 600; color: var(--text);
  background: #07080a; border-top: 1px solid var(--line); min-height: 60px; font-size: 15px;
}
.stage .ask { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; background: rgba(6,7,9,.9); color: var(--text); text-align: center; padding: 16px; }
.stage .ask .row { justify-content: center; }
.clock { height: 4px; border-radius: 0; background: var(--panel-3); overflow: hidden; margin: 10px 0; }
.clock i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-3)); transform-origin: left; }
.verdict { text-align: center; padding: 20px 14px; margin: 14px 0; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; background: var(--cut-a), var(--cut-b), var(--split-off), var(--glass); background-origin: border-box; }
.verdict h2 { font-weight: 900; font-size: clamp(34px, 10.5vw, 60px); margin: 0; color: inherit; }
.verdict.win { border-color: var(--gold-2); color: var(--gold-3); background: var(--cut-a), var(--cut-b), var(--reed), radial-gradient(110% 120% at 50% 0%, rgba(255,208,40,.3), rgba(244,180,12,.05) 62%, transparent), var(--glass); background-origin: border-box; }
.verdict.win h2 { text-shadow: 0 0 26px rgba(244,180,12,.85), 0 0 60px rgba(244,180,12,.45); }
.verdict.lose { color: var(--lose); }
.verdict.neutral { color: var(--ice); }
.verdict p { color: var(--text); }
.verdict .amt { font-size: 22px; font-weight: 700; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- dialog (18+ gate, wallet picker, confirms) ---- */
dialog { padding: 26px 20px 20px; max-width: min(92vw, 460px); width: 100%; font: inherit; border-color: var(--gold); background: var(--cut-a), var(--cut-b), var(--reed), var(--glass); background-origin: border-box; }
dialog::backdrop { background: rgba(3,4,6,.86); }
dialog h2 { color: var(--gold-2); }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--panel-3); color: var(--text); padding: 11px 16px; border-radius: 3px; border: 1px solid var(--gold); box-shadow: 0 12px 34px -8px #000, 0 0 24px -8px rgba(244,180,12,.7); z-index: 60; max-width: 92vw; font-weight: 600; font-size: 15px; }

/* ---- stage art helpers (SVG classes). Player one is ALWAYS gold (.f-cherry), player two is ALWAYS ice (.f-mustard). ---- */
.ink-stroke { stroke: #07080a; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.line-stroke { stroke: rgba(255,255,255,.28); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gold-stroke { stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.f-paper { fill: var(--text); } .f-cherry { fill: var(--gold-2); } .f-navy { fill: var(--panel-2); } .f-mustard { fill: var(--ice); } .f-gold2 { fill: var(--gold-3); }
.f-panel { fill: var(--panel); }
.f-none { fill: none; } .f-win { fill: var(--win); }
.t-poster { font-family: var(--font-display); font-weight: 800; } .t-stamp { font-family: var(--font-mono); font-weight: 700; }
.pip { fill: #07080a; } .glow { filter: drop-shadow(0 0 8px var(--gold-3)); }
.dim { opacity: .35; }
/* a dimmed NAME still has to be read (who lost): shapes go to .35, words only to .62 */
.stage svg text.dim { opacity: .62; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---- wide screens: the lobby takes the room; every other page keeps the 760px reading column ---- */
@media (min-width: 620px) {
  .hero .floor { justify-items: start; text-align: left; align-self: start; }
  .hero .floor-row, .hero .floor-call { justify-content: flex-start; }
}
@media (min-width: 1100px) {
  body:has(.view > .hero) .top, body:has(.view > .hero) .foot, .view:has(> .hero) { max-width: 1080px; }
  .view:has(> .hero) .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px 40px; padding: 40px 40px 30px; }
}