/* Snack Stakes — tokens, ticket-stub motif, layout and screens. */
:root{
  --ink:#231A2E; --cream:#FFF6E6; --ketchup:#E4412F; --mustard:#F6B92B; --soda:#22B8C7; --grape:#6A3FB5;
  --pickle:#4FA33A; --tote:#1E2A3A; --flap:#F9F3E3; --gold:#FFCF4A;
  --paper:#FFFDF7; --muted:#6B6078; --line:#E7DAC4; --shadow:rgba(35,26,46,.18);
  --font:ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --n:8px; --r:14px; --gap:12px; --safe-b:env(safe-area-inset-bottom, 0px); --safe-t:env(safe-area-inset-top, 0px);
  color-scheme: light;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{ background:#FFD9A8; color:var(--ink); font:600 16px/1.35 var(--font); overflow:hidden; overscroll-behavior:none;
  background-image: radial-gradient(circle at 20% 10%, #FFE9C7 0 18%, transparent 19%), radial-gradient(circle at 85% 30%, #FFE4BD 0 12%, transparent 13%),
    linear-gradient(160deg, #FFB86B 0%, #FF8F6B 45%, #E4412F 100%); }
button,input,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3{ margin:0; font-weight:900; letter-spacing:.01em; }
.noscript{ padding:24px; }
#stage{ position:fixed; inset:0; z-index:0; }
#stage canvas.stage3d{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#stage.sepia canvas{ filter:sepia(.75) saturate(.6) contrast(1.05); }
#ui{ position:fixed; inset:0; z-index:1; overflow:hidden; }

/* ---- ticket-stub motif ---------------------------------------------------- */
.stub{ -webkit-mask: radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,
    radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat;
  mask: radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,
    radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat; }
.perf{ background-image: linear-gradient(90deg, currentColor 50%, transparent 50%); background-size:10px 2px; background-repeat:repeat-x; height:2px; opacity:.35; }

/* ---- buttons ------------------------------------------------------------------ */
.btn{ --bg:var(--ketchup); --fg:#FFF; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; min-width:48px; padding:10px 20px; border:0; background:var(--bg); color:var(--fg);
  font-weight:900; font-size:18px; letter-spacing:.02em; text-transform:none; border-radius:4px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), inset 0 0 0 3px var(--ink); transition: transform 90ms ease, filter 120ms; user-select:none; }
.btn.stub{ border-radius:0; }
.btn:active{ transform:scale(.94); }
.btn:disabled{ filter:grayscale(.85) opacity(.55); cursor:not-allowed; transform:none; }
.btn.secondary{ --bg:var(--soda); }
.btn.mustard{ --bg:var(--mustard); --fg:var(--ink); }
.btn.cream{ --bg:var(--cream); --fg:var(--ink); }
.btn.grape{ --bg:var(--grape); }
.btn.pickle{ --bg:var(--pickle); }
.btn.ink{ --bg:var(--ink); --fg:var(--cream); box-shadow: inset 0 -5px 0 rgba(0,0,0,.35); }
.btn.small{ min-height:44px; padding:6px 12px; font-size:16px; }
.btn.big{ min-height:60px; font-size:22px; padding:12px 26px; }
.btn.wide{ width:100%; }
.btn .sub{ display:block; font-size:13px; font-weight:700; opacity:.85; }
.iconbtn{ min-width:44px; min-height:44px; display:inline-grid; place-items:center; border:0; background:transparent; border-radius:10px; }
.iconbtn:active{ transform:scale(.92); }

/* ---- panels & cards ----------------------------------------------------------- */
.panel{ background:var(--cream); color:var(--ink); padding:16px; box-shadow: inset 0 0 0 3px var(--ink); }
.panel.paper{ background:var(--paper); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; min-height:28px; border-radius:999px; background:var(--ink); color:var(--cream); font-weight:800; font-size:14px; white-space:nowrap; }
.chip.gold{ background:var(--gold); color:var(--ink); }
.chip.soft{ background:rgba(35,26,46,.08); color:var(--ink); }
.chip.grape{ background:var(--grape); color:#fff; }
.muted{ color:var(--muted); }
.small{ font-size:15px; }
.tiny{ font-size:14px; }
.row{ display:flex; align-items:center; gap:10px; }
.col{ display:flex; flex-direction:column; gap:10px; }
.grow{ flex:1 1 auto; min-width:0; }
.center{ text-align:center; }
.hidden{ display:none !important; }

/* ---- screens ------------------------------------------------------------------ */
.screen{ position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; will-change:transform; }
.screen.enter{ animation: slideIn 220ms ease-out both; }
.screen.leave{ animation: slideOut 220ms ease-in both; pointer-events:none; }
@keyframes slideIn{ from{ transform:translateX(24%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes slideOut{ to{ transform:translateX(-18%); opacity:0; } }
.rm .screen.enter{ animation: fadeIn 220ms both; } .rm .screen.leave{ animation: fadeOut 220ms both; }
@keyframes fadeIn{ from{ opacity:0; } } @keyframes fadeOut{ to{ opacity:0; } }
.scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.wrap{ width:100%; max-width:560px; margin:0 auto; padding:16px 16px calc(16px + var(--safe-b)); }
.topbar{ display:flex; align-items:center; gap:8px; padding:calc(8px + var(--safe-t)) 12px 8px; min-height:56px; }
.topbar h2{ font-size:20px; }
.backbtn{ background:var(--cream); box-shadow: inset 0 0 0 3px var(--ink); border-radius:12px; }
.footer{ padding:10px 16px calc(12px + var(--safe-b)); background:var(--cream); box-shadow: 0 -3px 0 var(--ink); }
.on-stage{ background:transparent; pointer-events:none; }
.on-stage > *{ pointer-events:auto; }

/* ---- title -------------------------------------------------------------------- */
.title-screen{ align-items:center; }
.logo{ width:min(86vw, 420px); margin: calc(48px + var(--safe-t)) auto 8px; display:block; filter: drop-shadow(0 6px 0 rgba(35,26,46,.25)); }
.title-menu{ width:min(92vw, 400px); display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-bottom:calc(20px + var(--safe-b)); }
.title-menu .btn{ width:100%; }
.join-row{ display:flex; gap:8px; }
.join-row .btn{ width:auto; flex:none; }
.join-row input{ flex:1; min-width:0; min-height:48px; padding:0 14px; border:0; background:var(--cream); box-shadow: inset 0 0 0 3px var(--ink); border-radius:4px;
  font-weight:900; font-size:22px; letter-spacing:.3em; text-transform:uppercase; }
.title-links{ display:flex; gap:10px; }
.title-links .btn{ flex:1; }
.levelchip{ position:absolute; top:calc(12px + var(--safe-t)); right:12px; z-index:3; }
.newbie{ animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform:scale(1.03); } }
.banner{ margin:8px 16px 0; padding:10px 14px; background:var(--ink); color:var(--cream); font-weight:800; text-align:center; border-radius:10px; }

/* ---- forms -------------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:800; font-size:14px; }
.input{ min-height:48px; padding:0 12px; border:0; background:#fff; box-shadow: inset 0 0 0 3px var(--ink); border-radius:6px; font-weight:800; font-size:18px; width:100%; }
.input.bad{ box-shadow: inset 0 0 0 3px var(--ketchup); background:#FFF0EE; }
.seg{ display:flex; background:var(--ink); padding:3px; border-radius:10px; gap:3px; }
.seg button{ flex:1; min-height:44px; border:0; background:transparent; color:var(--cream); font-weight:900; border-radius:8px; }
.seg button[aria-pressed="true"]{ background:var(--mustard); color:var(--ink); }
.switch{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
.switch input{ width:52px; height:30px; appearance:none; background:#CFC3B0; border-radius:99px; position:relative; box-shadow: inset 0 0 0 3px var(--ink); cursor:pointer; flex:none; }
.switch input::after{ content:""; position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:50%; background:var(--ink); transition:left 140ms; }
.switch input:checked{ background:var(--pickle); } .switch input:checked::after{ left:27px; background:#fff; }
.section-title{ font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:14px 0 6px; }

/* ---- seat rows ---------------------------------------------------------------- */
.seatrow{ display:flex; align-items:center; gap:8px; padding:6px; background:#fff; box-shadow: inset 0 0 0 3px var(--ink); border-radius:10px; }
.seatrow .input{ box-shadow:none; background:transparent; min-height:44px; padding:0 6px; }
.seatbadge{ width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; color:#fff; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.seatbadge svg{ width:22px; height:22px; }
.botbadge{ display:inline-flex; width:20px; height:20px; vertical-align:-3px; }
.star{ color:#C9BCA8; } .star.on{ color:var(--mustard); }
.err{ color:var(--ketchup); font-size:15px; font-weight:800; }

/* ---- handoff ------------------------------------------------------------------ */
.handoff{ align-items:center; justify-content:center; text-align:center; color:#fff; padding:24px; }
.handoff h1{ font-size:clamp(30px, 9vw, 48px); line-height:1.05; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.handoff .glyphbig svg{ width:72px; height:72px; }
.hold{ position:relative; width:168px; height:168px; margin:28px auto 8px; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff;
  font-weight:900; font-size:18px; box-shadow: inset 0 0 0 4px #fff; touch-action:none; user-select:none; -webkit-user-select:none; }
.hold svg.ring{ position:absolute; inset:0; transform:rotate(-90deg); }
.hold.armed{ background:#fff; color:var(--ink); }
.hidden-card{ align-items:center; justify-content:center; background:var(--ink); color:var(--cream); text-align:center; gap:16px; }
.hidden-card .big{ font-size:44px; font-weight:900; }
.seat-timer{ position:absolute; top:calc(10px + var(--safe-t)); right:12px; }

/* ---- bet slip ------------------------------------------------------------------ */
.slip{ background:var(--paper); }
.slip-head{ display:flex; align-items:center; gap:8px; padding:calc(8px + var(--safe-t)) 12px 8px; background:var(--cream); box-shadow: 0 3px 0 var(--ink); z-index:2; }
.slip-head .who{ font-weight:900; font-size:18px; }
.lineup-strip{ display:flex; gap:6px; overflow-x:auto; padding:8px 12px; background:var(--tote); scrollbar-width:none; }
.lineup-strip .mchip{ flex:none; }
.mchip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border-radius:999px; background:var(--cream); font-weight:900; font-size:14px; box-shadow: inset 0 0 0 2px var(--ink); white-space:nowrap; }
.mchip .mg{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.mchip .mg svg{ width:18px; height:18px; }
.lane{ display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:6px; background:var(--ink); color:var(--cream); font-size:13px; font-weight:900; padding:0 4px; }
.form-p{ color:var(--pickle); } .form-s{ color:var(--muted); } .form-l{ color:var(--ketchup); }
.mrow{ display:grid; grid-template-columns: 52px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:2px dashed var(--line); }
.mrow .portrait{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; box-shadow: inset 0 0 0 3px var(--ink); position:relative; }
.mrow .portrait svg{ width:30px; height:30px; }
.mrow .portrait .lane{ position:absolute; bottom:-6px; right:-6px; }
.mname{ font-weight:900; font-size:17px; line-height:1.1; }
.mquirk{ font-size:15px; color:var(--muted); line-height:1.25; }
.mquirk b{ color:var(--ink); }
.stepper{ display:flex; align-items:center; gap:4px; }
.stepper button{ width:44px; height:44px; border:0; border-radius:10px; background:var(--ink); color:var(--cream); font-weight:900; font-size:22px; touch-action:manipulation; }
.stepper button:disabled{ opacity:.3; }
.stake{ min-width:52px; text-align:center; font-weight:900; font-size:20px; font-variant-numeric:tabular-nums; }
.stake.zero{ color:#BDB2A2; }
.maxchip{ min-height:32px; padding:0 8px; border:0; border-radius:8px; background:var(--mustard); font-weight:900; font-size:13px; margin-left:4px; }
.siderow{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; padding:10px 12px; border-bottom:2px dashed var(--line); }
.mult{ display:inline-block; background:var(--grape); color:#fff; font-weight:900; border-radius:6px; padding:1px 6px; font-size:14px; }
.slip-foot{ display:grid; grid-template-columns: repeat(3,1fr); gap:6px; text-align:center; font-weight:800; font-size:14px; }
.slip-foot b{ display:block; font-size:22px; font-variant-numeric:tabular-nums; }
.hint{ color:var(--ketchup); font-weight:800; font-size:16px; text-align:center; min-height:20px; }
.locked-stamp{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) rotate(-8deg); font-size:54px; font-weight:900; color:var(--ink);
  border:6px solid var(--ink); padding:4px 18px; border-radius:10px; opacity:.85; pointer-events:none; animation: stamp 260ms cubic-bezier(.2,1.6,.4,1) both; background:rgba(255,246,230,.7); }
@keyframes stamp{ from{ transform:translate(-50%,-50%) rotate(-8deg) scale(2); opacity:0; } }
.slip.is-locked .slip-body{ filter:grayscale(.8); opacity:.6; pointer-events:none; }
.drawer{ position:absolute; left:0; right:0; bottom:0; transform:translateY(calc(100% - 52px)); transition:transform 220ms ease; z-index:5; background:var(--tote); color:var(--cream);
  box-shadow: 0 -3px 0 var(--ink); max-height:78%; display:flex; flex-direction:column; }
.drawer.open{ transform:none; }
.drawer .handle{ min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900; border:0; background:transparent; color:var(--cream); width:100%; }
.drawer .body{ overflow-y:auto; padding:8px 12px calc(12px + var(--safe-b)); }

/* ---- chaos cards ---------------------------------------------------------------- */
.ccard{ --set:var(--ketchup); position:relative; width:150px; min-height:208px; background:var(--cream); color:var(--ink); display:flex; flex-direction:column; box-shadow: inset 0 0 0 3px var(--ink); user-select:none; }
.ccard .band{ background:var(--set); color:#fff; font-weight:900; font-size:15px; padding:8px 10px 6px; line-height:1.1; min-height:44px; display:flex; align-items:center; gap:6px; box-shadow: inset 0 3px 0 var(--ink), inset 3px 0 0 var(--ink), inset -3px 0 0 var(--ink); }
.ccard .neg{ margin-left:auto; font-size:14px; }
.ccard .pic{ display:grid; place-items:center; height:70px; }
.ccard .pic svg{ width:62px; height:62px; }
.ccard .perf{ margin:0 10px; color:var(--ink); }
.ccard .txt{ font-size:14px; line-height:1.25; padding:6px 10px 10px; font-weight:700; }
.ccard .tt{ position:absolute; top:52px; right:8px; }
.tbadge{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--ink); color:var(--cream); font-size:13px; font-weight:900; }
.ccard.set-kitchen{ --set:#D99A0B; } .ccard.set-staff{ --set:var(--soda); }
.ccard.picked{ transform:translateY(-12px) rotate(-2deg); box-shadow: inset 0 0 0 4px var(--ink), 0 0 0 4px var(--gold); }
.ccard.dim{ opacity:.45; }
.hand{ display:flex; gap:10px; overflow-x:auto; padding:18px 12px 10px; scrollbar-width:none; }
.hand .ccard{ flex:none; transition: transform 160ms ease; }
.hand.mini .ccard{ width:124px; min-height:170px; } .hand.mini .ccard .pic{ height:52px; } .hand.mini .ccard .pic svg{ width:46px; height:46px; }
.flip-overlay{ position:absolute; left:50%; top:22%; z-index:30; transform:translateX(-50%); pointer-events:none; }
.flip-overlay .ccard{ animation: slam 600ms cubic-bezier(.2,1.4,.4,1) both; }
.flip-overlay .res{ position:absolute; left:50%; bottom:-14px; transform:translateX(-50%) rotate(-6deg); background:var(--ink); color:var(--cream); font-weight:900; padding:4px 10px; border-radius:8px; white-space:nowrap; }
@keyframes slam{ 0%{ transform: translate(-60vw, 40vh) scale(.4) rotate(-30deg); opacity:0; } 60%{ transform: scale(1.3) rotate(4deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
.rm .flip-overlay .ccard{ animation: fadeIn 250ms both; }

/* ---- rig ------------------------------------------------------------------------ */
.rig-picks{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.pickslot{ min-height:64px; border:3px dashed #BFAF96; border-radius:12px; display:flex; flex-direction:column; justify-content:center; padding:6px 10px; font-weight:800; font-size:15px; }
.pickslot.full{ border-style:solid; border-color:var(--ink); background:#fff; }
.chooser{ background:#fff; box-shadow: inset 0 0 0 3px var(--ink); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:10px; }
.choices{ display:flex; flex-wrap:wrap; gap:6px; }
.choice{ min-height:44px; padding:6px 10px; border:0; border-radius:10px; background:var(--cream); box-shadow: inset 0 0 0 2px var(--ink); font-weight:800; display:inline-flex; align-items:center; gap:6px; }
.choice[aria-pressed="true"]{ background:var(--mustard); box-shadow: inset 0 0 0 3px var(--ink); }
.deckbox{ display:inline-flex; align-items:center; gap:8px; }
.tip{ font-size:16px; color:var(--muted); font-weight:700; }

/* ---- odds board ------------------------------------------------------------------- */
.board{ background:var(--tote); color:var(--flap); padding:12px; box-shadow: inset 0 0 0 3px var(--ink); }
.board h3{ font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--mustard); margin-bottom:8px; }
.orow{ display:grid; grid-template-columns: 36px 1fr auto; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid rgba(249,243,227,.12); }
.orow .nm{ font-weight:900; font-size:17px; line-height:1.1; }
.orow .pool{ height:6px; background:rgba(249,243,227,.15); border-radius:3px; margin-top:4px; overflow:hidden; }
.orow .pool i{ display:block; height:100%; background:var(--mustard); }
.flaps{ display:flex; gap:3px; }
.flap{ width:26px; height:38px; background:#0E1622; color:var(--flap); display:grid; place-items:center; font-weight:900; font-size:24px; border-radius:4px; position:relative; font-variant-numeric:tabular-nums;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.05); }
.flap::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.6); }
.flap.dot{ width:10px; background:transparent; } .flap.x{ width:18px; background:transparent; font-size:20px; }
.flap.spin{ animation: flapflip 70ms linear; }
@keyframes flapflip{ 50%{ transform:scaleY(.1); } }
.tag{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.08em; padding:2px 6px; border-radius:5px; margin-left:6px; vertical-align:2px; }
.tag.fav{ background:var(--gold); color:var(--ink); box-shadow: 0 0 12px var(--gold); } .tag.long{ background:var(--grape); color:#fff; }
.board.compact .orow{ padding:3px 0; } .board.compact .flap{ width:18px; height:26px; font-size:16px; }

/* ---- race HUD ------------------------------------------------------------------------ */
.race-hud{ position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; }
.race-hud > *{ pointer-events:auto; }
.hud-top{ display:flex; align-items:center; gap:8px; padding:calc(8px + var(--safe-t)) 10px 6px; }
.hud-pill{ background:rgba(35,26,46,.82); color:var(--cream); font-weight:900; padding:6px 12px; border-radius:999px; font-size:15px; }
.standings{ position:absolute; left:8px; top:calc(56px + var(--safe-t)); display:flex; flex-direction:column; gap:4px; }
.stand{ display:flex; align-items:center; gap:6px; background:rgba(255,246,230,.94); box-shadow: inset 0 0 0 2px var(--ink); border-radius:999px; padding:3px 10px 3px 3px; font-weight:900; font-size:14px;
  transition: transform 300ms ease; min-width:112px; }
.stand .gap{ margin-left:auto; color:var(--muted); font-size:12px; }
.stand.lead{ background:var(--gold); }
.rail{ position:absolute; right:0; top:calc(52px + var(--safe-t)); bottom:150px; width:min(46vw, 230px); overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:6px; transition: transform 200ms; }
.rail.closed{ transform:translateX(calc(100% - 34px)); }
.railtoggle{ position:sticky; top:0; align-self:flex-start; }
.slipcard{ background:rgba(255,253,247,.95); box-shadow: inset 0 0 0 2px var(--ink); border-radius:10px; padding:6px 8px; font-size:13px; font-weight:800; }
.slipcard.me{ box-shadow: inset 0 0 0 3px var(--mustard), 0 0 0 2px var(--ink); }
.slipcard .who{ display:flex; align-items:center; gap:6px; font-weight:900; font-size:14px; }
.ucoin{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--ink); font-weight:900; font-size:13px; box-shadow: inset 0 0 0 2px var(--ink); }
.ucoin.spin{ animation: coinspin 900ms ease-out both; }
@keyframes coinspin{ from{ transform:rotateY(720deg) scale(1.6); } }
.hud-bottom{ margin-top:auto; padding:0 10px calc(10px + var(--safe-b)); display:flex; flex-direction:column; gap:8px; }
.ticker{ background:var(--ink); color:var(--cream); font-weight:900; font-size:clamp(17px, 4.6vw, 22px); padding:10px 14px; min-height:48px; display:flex; align-items:center; border-radius:10px;
  box-shadow: inset 0 0 0 3px var(--mustard); }
.ticker span{ animation: tickIn 220ms ease-out both; }
@keyframes tickIn{ from{ transform:translateY(40%); opacity:0; } }
.reacts{ display:flex; gap:10px; }
.reacts .btn{ flex:1; min-height:56px; }
.reacts svg{ width:30px; height:30px; }
.countdown{ position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); font-size:120px; font-weight:900; color:#fff; -webkit-text-stroke: 6px var(--ink); paint-order:stroke; pointer-events:none;
  animation: countIn 900ms ease-out both; text-shadow:0 8px 0 rgba(0,0,0,.2); }
@keyframes countIn{ 0%{ transform:translate(-50%,-50%) scale(2.2); opacity:0; } 30%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 100%{ opacity:0; } }
.stamp-photo{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%) rotate(-10deg); font-size:64px; font-weight:900; color:var(--ketchup); border:8px solid var(--ketchup); padding:0 20px; border-radius:12px; background:rgba(255,246,230,.8); animation: stamp 300ms both; pointer-events:none; }
.race2d{ position:absolute; inset:0; width:100%; height:100%; }
.catching{ position:absolute; left:50%; top:64px; transform:translateX(-50%); }
.ctxbanner{ position:absolute; left:50%; top:calc(56px + var(--safe-t)); transform:translateX(-50%); z-index:10; }

/* ---- payout ---------------------------------------------------------------------------- */
.result-head{ display:flex; gap:8px; overflow-x:auto; padding:8px 0; }
.place{ flex:none; min-width:84px; text-align:center; background:#fff; box-shadow: inset 0 0 0 3px var(--ink); border-radius:12px; padding:6px; font-weight:900; }
.place .n{ font-size:13px; color:var(--muted); } .place.first{ background:var(--gold); }
.prow{ display:grid; grid-template-columns: 36px 1fr auto; gap:8px; align-items:center; padding:8px 0; border-bottom:2px dashed var(--line); }
.net{ font-weight:900; font-size:20px; font-variant-numeric:tabular-nums; }
.net.up{ color:var(--pickle); } .net.down{ color:var(--ketchup); }
.bank{ font-size:13px; color:var(--muted); font-weight:800; text-align:right; }
.report{ display:flex; flex-direction:column; gap:6px; }
.rep{ display:grid; grid-template-columns: 30px 1fr auto; gap:8px; align-items:center; background:#fff; border-radius:10px; padding:6px 8px; box-shadow: inset 0 0 0 2px var(--ink); font-size:15px; font-weight:800; position:relative; }
.rep.unplayed{ opacity:.5; }
.rep .res{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.changer{ position:absolute; right:8px; top:50%; transform:translateY(-50%) rotate(-6deg); color:var(--ketchup); border:3px solid var(--ketchup); font-weight:900; font-size:12px; padding:1px 6px; border-radius:6px; background:#fff; animation: stamp 320ms both; }
.youbanner{ font-size:24px; font-weight:900; padding:12px; text-align:center; border-radius:12px; box-shadow: inset 0 0 0 3px var(--ink); }
.youbanner.win{ background:var(--pickle); color:#fff; } .youbanner.lose{ background:var(--cream); }

/* ---- final ------------------------------------------------------------------------------ */
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:10px; height:200px; margin:10px 0; }
.tower{ width:76px; border-radius:10px 10px 0 0; box-shadow: inset 0 0 0 3px var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:6px; color:#fff; font-weight:900;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 3px, transparent 3px 12px); animation: grow 900ms cubic-bezier(.2,1.2,.4,1) both; transform-origin:bottom; }
@keyframes grow{ from{ transform:scaleY(0); } }
.award{ display:grid; grid-template-columns: 44px 1fr; gap:10px; align-items:center; background:#fff; border-radius:12px; padding:8px; box-shadow: inset 0 0 0 3px var(--ink); }
.award .ic{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--mustard); font-size:24px; }
.xpbar{ height:18px; background:rgba(35,26,46,.12); border-radius:9px; overflow:hidden; box-shadow: inset 0 0 0 2px var(--ink); }
.xpbar i{ display:block; height:100%; background:linear-gradient(90deg, var(--mustard), var(--ketchup)); transition: width 1200ms ease; }

/* ---- lobby ---------------------------------------------------------------------------------- */
.code{ font-size:56px; font-weight:900; letter-spacing:.16em; text-align:center; line-height:1; }
.qr{ background:#fff; padding:10px; border-radius:12px; box-shadow: inset 0 0 0 3px var(--ink); display:grid; place-items:center; }
.qr svg{ width:100%; height:auto; display:block; }
.dot{ width:10px; height:10px; border-radius:50%; background:var(--pickle); display:inline-block; }
.dot.off{ background:var(--ketchup); }
.menu-grid{ display:grid; gap:10px; }

/* ---- coach bubbles / toasts -------------------------------------------------------------------- */
.coach{ position:absolute; z-index:40; max-width:min(86vw, 320px); background:var(--mustard); color:var(--ink); font-weight:900; padding:12px 14px; border-radius:14px; box-shadow: inset 0 0 0 3px var(--ink), 0 6px 0 rgba(0,0,0,.2);
  left:50%; transform:translateX(-50%); animation: pop 240ms cubic-bezier(.2,1.5,.4,1) both; }
.coach .ok{ display:block; margin-top:6px; font-size:13px; opacity:.8; }
@keyframes pop{ from{ transform:translateX(-50%) scale(.6); opacity:0; } }
#toasts{ position:fixed; left:50%; bottom:calc(90px + var(--safe-b)); transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:var(--ink); color:var(--cream); font-weight:900; padding:10px 16px; border-radius:12px; box-shadow: 0 4px 0 rgba(0,0,0,.25); animation: pop2 220ms both; max-width:90vw; text-align:center; }
@keyframes pop2{ from{ transform:translateY(20px); opacity:0; } }
.modal-back{ position:absolute; inset:0; background:rgba(35,26,46,.55); z-index:50; display:grid; place-items:center; padding:16px; }
.modal{ width:min(94vw, 440px); max-height:86vh; overflow:auto; }

/* ---- timers ----------------------------------------------------------------------------------- */
.timer{ display:inline-grid; place-items:center; width:48px; height:48px; position:relative; font-weight:900; font-size:15px; }
.timer svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.timer.red{ color:var(--ketchup); }

/* ---- stream view (1920×1080 box) ------------------------------------------------------------ */
.stream-root{ position:fixed; inset:0; background:#000; overflow:hidden; cursor:none; }
.stream-box{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform-origin:0 0; background:#2A1F33; color:var(--cream); overflow:hidden; font-size:28px; }
.stream-stage{ position:absolute; left:0; top:0; width:1344px; height:984px; overflow:hidden; }
.stream-panel{ position:absolute; left:1344px; top:0; width:576px; height:984px; background:var(--cream); color:var(--ink); padding:24px; display:flex; flex-direction:column; gap:16px; box-shadow: inset 6px 0 0 var(--ink); }
.stream-ticker{ position:absolute; left:0; right:0; bottom:0; height:96px; background:var(--ink); color:var(--cream); display:flex; align-items:center; padding:0 32px; font-size:44px; font-weight:900; box-shadow: inset 0 6px 0 var(--mustard); }
.stream-qr{ position:absolute; right:24px; bottom:120px; width:252px; background:#fff; color:var(--ink); padding:16px; border-radius:16px; text-align:center; font-weight:900; font-size:18px; box-shadow: inset 0 0 0 4px var(--ink); }
.stream-qr .qrbox{ width:220px; height:220px; margin:0 auto 8px; }
.stream-logo{ position:absolute; left:24px; top:20px; display:flex; align-items:center; gap:18px; }
.stream-logo .where{ background:rgba(35,26,46,.85); padding:8px 18px; border-radius:12px; font-weight:900; font-size:30px; }
.sticker{ position:absolute; font-size:64px; font-weight:900; color:#fff; -webkit-text-stroke:8px var(--ink); paint-order:stroke; animation: stick 1.6s ease-out both; pointer-events:none; }
@keyframes stick{ 0%{ transform:scale(.2) rotate(-20deg); opacity:0; } 15%{ transform:scale(1.2) rotate(6deg); opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(-40px) scale(1); opacity:0; } }

@media (prefers-reduced-motion: reduce){ .screen.enter,.screen.leave{ animation-duration:1ms; } }
.rm *{ scroll-behavior:auto; }
@media (min-width: 900px){ .wrap{ max-width:620px; } }

/* ---- see-through screens (3D parade / podium above a bottom sheet) ---- */
.slip.see-through{ background:transparent; }
.stage-area{ flex:1 1 auto; min-height:34%; position:relative; pointer-events:none; }
.sheet{ flex:0 1 auto; max-height:62%; display:flex; flex-direction:column; background:var(--paper); box-shadow: 0 -3px 0 var(--ink); border-radius:18px 18px 0 0; overflow:hidden; }
.namecard{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); min-width:min(88vw,340px); background:var(--cream); box-shadow: inset 0 0 0 3px var(--ink), 0 6px 0 rgba(0,0,0,.2); padding:10px 14px; animation: slideCard 320ms cubic-bezier(.2,1.3,.4,1) both; }
@keyframes slideCard{ from{ transform:translate(40%,0); opacity:0; } }
.namecard .mname{ font-size:20px; }
.dom-podium{ display:flex; align-items:flex-end; justify-content:center; height:100%; padding-bottom:10px; }

/* ---- tip jar (DEV/tip-jar.md): small, never a big button ---------------------- */
.tip-home{ align-self:center; min-height:44px; padding:6px 14px; border:0; background:transparent; color:#fff; font:800 15px/1 var(--font);
  text-shadow:0 2px 0 rgba(35,26,46,.45); cursor:pointer; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5); text-underline-offset:3px; }
.tip-home:focus-visible, .tip-link:focus-visible, .tip-x:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; border-radius:6px; }
.tip-line{ display:flex; align-items:center; justify-content:center; gap:4px; margin-top:6px; }
.tip-link{ min-height:44px; padding:4px 8px; border:0; background:transparent; color:var(--muted); font:700 14px/1.2 var(--font); cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.tip-x{ min-width:44px; min-height:44px; border:0; background:transparent; color:var(--muted); font:800 20px/1 var(--font); cursor:pointer; }