button,input { font: inherit; }button { cursor:pointer; color:inherit; touch-action:manipulation; }button:disabled { opacity:.4; cursor:default; }button:focus-visible,input:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }[hidden] { display:none!important; }
nav { display:flex; gap:22px; }nav button,#invite,#pause,#share { background:none; border:0; min-height:44px; font-size:12px; padding:6px 0; }
.run-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:6%; max-width:1400px; padding-top:28px; padding-bottom:20px; }.run-intro { padding-top:6px; }.back { color:var(--gold); display:inline-flex; min-height:36px; align-items:center; font-size:10px; letter-spacing:1px; }
.run-intro h1 { font-size:clamp(80px,8vw,116px); margin:12px 0 22px; }.lede { font-size:18px; color:var(--muted); line-height:1.7; }.lede em { font:italic 23px var(--serif); }.rules { list-style:none; padding:0; margin:28px 0; display:grid; gap:15px; font-size:14px; }.rules span { font:11px 'Courier New',monospace; color:var(--gold); margin-right:14px; }
.name-label { display:block; font-size:10px; letter-spacing:1px; color:var(--muted); margin-bottom:10px; }#nickname { width:min(100%,290px); border:0; border-bottom:1px solid var(--line); padding:8px 0; background:none; color:var(--paper); font:14px 'Courier New',monospace; }#name-error { display:block; color:#efb392; font-size:12px; margin-top:5px; }.fine-print { font-size:11px; line-height:1.6; color:var(--muted); }.record { display:grid; gap:8px; border-top:1px solid var(--line); padding-top:20px; margin-top:26px; max-width:290px; }.record>span { font-size:10px; color:var(--gold); letter-spacing:1px; }.record strong { font:36px var(--serif); }.record small { font-size:10px; color:var(--muted); }
.machine { min-width:0; }.modes { display:flex; border:1px solid var(--line); padding:4px; gap:4px; }.modes button { flex:1; min-height:42px; border:0; background:none; color:var(--muted); font-size:12px; padding:8px; }.modes button[aria-pressed=true] { color:var(--paper); background:#30291a; }.room-line { display:flex; align-items:center; justify-content:space-between; gap:12px; font:10px 'Courier New',monospace; color:var(--gold); }
.scoreboard { display:flex; justify-content:space-between; align-items:center; padding:2px 8px 12px; gap:18px; }.scoreboard strong { font:42px var(--serif); font-variant-numeric:tabular-nums; }.scoreboard span { color:var(--muted); font-size:12px; }.scoreboard small { display:block; font-size:9px; letter-spacing:1px; color:var(--muted); }.cargo { text-align:center; }#bottles { color:var(--gold); font-size:24px; letter-spacing:4px; }.caps { text-align:right; }.caps strong { font-size:28px; color:var(--gold); }
.course { position:relative; height:420px; background:#191b13; overflow:hidden; border:1px solid var(--line); }#road { display:block; width:100%; height:100%; }#lane-glow path { fill:var(--gold); opacity:0; }#lane-glow path.selected { opacity:.09; }.panel { position:absolute; top:12%; left:50%; transform:translateX(-50%); width:min(360px,90%); text-align:center; padding:20px; background:#19170ff0; border:1px solid var(--line); }.panel h2,dialog h2 { font:40px/1.1 var(--serif); color:var(--paper); letter-spacing:-1px; margin:12px 0; }.panel p { font-size:13px; color:var(--muted); line-height:1.6; }.gold { background:var(--gold); color:var(--night); border:0; padding:13px 20px; min-height:46px; font-weight:600; }.gold:hover { background:#e7c147; }#restart { display:block; margin-top:12px; font:10px 'Courier New',monospace; color:var(--gold); }#share { color:var(--gold); }#share-link { width:100%; background:var(--night); color:var(--paper); border:1px solid var(--gold); padding:8px; }
#banner { position:absolute; bottom:8px; left:0; width:100%; text-align:center; color:var(--paper); background:#19170fe8; padding:6px; font:italic 21px var(--serif); pointer-events:none; }.progress { height:4px; background:#c6a54a25; }.progress i { display:block; height:100%; background:var(--gold); width:0; }
#bottles { display:block; width:88px; height:40px; margin:0 auto 3px; }#bottles .lost { opacity:.18; }#cargo-label.danger { color:#efb392; }#pace { margin-top:3px; color:var(--gold); font-size:9px; letter-spacing:.4px; }.pop-label { font:bold italic 23px var(--serif); fill:#f2ede2; stroke:#29251c; stroke-width:4px; paint-order:stroke; }#effects { pointer-events:none; }
#voting { position:relative; height:29px; padding:8px 0; font-size:10px; color:var(--gold); }#vote-clock { position:absolute; bottom:0; left:0; height:2px; width:100%; background:var(--gold); transform-origin:left; }
.bonus-line { display:flex; justify-content:space-between; gap:10px; padding-top:9px; font:10px 'Courier New',monospace; color:var(--muted); }#near-bonus { color:var(--gold); }.cheers { font-size:48px; fill:#e7c147; }#celebration { pointer-events:none; }
.controls { display:flex; gap:8px; margin-top:10px; }.controls button { position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:12px; min-height:64px; padding:9px; border:1px solid var(--line); color:var(--paper); background:#211e15; }.controls button[aria-pressed=true] { background:var(--gold); color:var(--night); }.controls button:hover { border-color:var(--gold); }.controls button:active { transform:translateY(2px); }.controls b { font-size:28px; font-weight:400; }.controls span { font-size:13px; }.controls small { display:block; margin-top:4px; font-size:9px; opacity:.65; }.controls i { position:absolute; top:4px; right:7px; font:10px 'Courier New',monospace; }
.under-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; }#activity { font-size:11px; line-height:1.5; color:var(--muted); margin:8px 0; }
dialog { width:min(500px,calc(100% - 32px)); max-height:calc(100dvh - 40px); background:#19170f; color:var(--paper); border:1px solid var(--gold); padding:30px; }dialog::backdrop { background:#000b; }dialog p { font-size:13px; line-height:1.75; color:var(--muted); }#close-help { position:absolute; right:10px; top:8px; width:44px; height:44px; font-size:26px; background:none; border:0; }#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--paper); color:var(--night); padding:14px 20px; max-width:calc(100% - 30px); width:max-content; font-size:13px; z-index:4; }
@media(max-width:760px) {
  .run-page header { min-height:76px; padding-top:8px; padding-bottom:8px; }.run-page header img { width:100px; height:55px; }.run-page header>.eyebrow { display:none; }nav { gap:15px; }
  .run-layout { display:block; padding-top:8px; }.run-intro { padding:0; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }.run-intro h1 { font-size:42px; letter-spacing:-1.5px; margin:0; }.run-intro h1 br { display:none; }.run-intro h1 em { margin-left:.12em; }.back { font-size:9px; }
  .lede,.rules,.name-label,#nickname,#name-error,.fine-print,.record { display:none; }.modes button { font-size:11px; min-height:40px; padding:6px; }.room-line { font-size:9px; }#invite { font-size:11px; }.scoreboard { padding-bottom:8px; }.scoreboard strong { font-size:32px; }.caps strong { font-size:23px; }
  .course { height:clamp(255px,40dvh,355px); }.panel { top:9%; padding:14px; }.panel h2 { font-size:31px; }.panel p { font-size:12px; margin:8px 0; }.controls { gap:6px; }.controls button { gap:8px; min-height:58px; }.controls b { font-size:23px; }.run-page footer { padding-top:18px; padding-bottom:18px; }
}
@media(prefers-reduced-motion:reduce) { .controls button:active { transform:none; } }