/* Layout: one upright play column (race lanes -> board -> number row), like a phone in hand. */
:root{
  --bg:#E9EDF3; --surface:#FFFFFF; --raised:#F2F4F8; --ink:#151B28; --muted:#5D6678;
  --line:#CFD5E0; --line-strong:#151B28; --entry:#3046C5; --select:#FFE7A0;
  --clash:#D3352B; --clash-bg:#FCE3E1; --ok:#1E9E57; --off:#9AA3B2;
  --p1:#E89A0C; --p2:#12968C; --accent:#3046C5; --on-accent:#FFFFFF;
  --shadow:rgba(21,27,40,.14); --scrim:rgba(15,19,27,.5); --on-scrim:#FFFFFF;
  --font-score:"Big Shoulders Display","Arial Narrow","Roboto Condensed",sans-serif;
  --font-ui:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F131B; --surface:#171D29; --raised:#202838; --ink:#E9EDF5; --muted:#8F99AD;
    --line:#2C3547; --line-strong:#A3AEC2; --entry:#9DB4FF; --select:#4A3D14;
    --clash:#FF6A5C; --clash-bg:#43201F; --ok:#3DD47F; --off:#5C6578;
    --p1:#F5B53A; --p2:#36C2B6; --accent:#8FA2FF; --on-accent:#0F131B;
    --shadow:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.62); color-scheme:dark;
  }
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:15px; line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:max(16px, env(safe-area-inset-top, 0px)); padding-bottom:max(40px, env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color:transparent;
}
button,input{font:inherit; color:inherit}
button{cursor:pointer}
button:disabled{cursor:default; opacity:.55}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.page{max-width:520px; margin:0 auto}
.col{display:flex; flex-direction:column; gap:14px; min-width:0}

.banner{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; margin-bottom:12px; background:var(--ink); color:var(--surface);
  border-radius:10px; padding:8px 12px; font-weight:600; font-size:13.5px; text-align:center}

/* ---------- shared pieces ---------- */
.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px}
.seg button{border:0; background:transparent; text-align:center; padding:8px 6px; border-radius:9px; font-weight:600; color:var(--muted); font-size:14px}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px var(--shadow)}
.btn-primary{border:0; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:17px; padding:14px 18px; border-radius:12px; width:100%}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:16px; padding:13px 18px; border-radius:12px; width:100%}
.link-btn{border:0; background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; padding:4px 2px}
.link-btn:hover{color:var(--clash)}
.card{background:var(--surface); border-radius:20px; box-shadow:0 10px 30px -12px var(--shadow)}

/* ---------- avatars: Memoji in a glossy tilting bubble ---------- */
.avatar{--size:44px; width:var(--size); height:var(--size); flex:none; position:relative}
.avatar.xl{--size:96px}
.avatar.xl::after{content:""; position:absolute; left:20%; right:20%; bottom:-11px; height:8px; border-radius:50%; background:var(--shadow); filter:blur(3px)}
.avatar.away .bubble{filter:grayscale(.85); opacity:.7}
.bob,.hopper{width:100%; height:100%}
.hopper{position:relative}
.avatar.xl .bob{animation:float 4.6s ease-in-out infinite}
.avatar.hop .hopper{animation:hop .5s cubic-bezier(.3,1.5,.5,1)}
.bubble{
  width:100%; height:100%; border-radius:50%; overflow:hidden; position:relative;
  background:radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--pc) 42%, #fff) 0%, var(--pc) 52%, color-mix(in srgb, var(--pc) 66%, #000) 100%);
  box-shadow:0 8px 18px -6px var(--shadow), 0 2px 4px var(--shadow), inset 0 -5px 12px rgba(0,0,0,.2);
  transform:perspective(260px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s ease-out, filter .3s;
}
.bubble::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse 62% 40% at 32% 16%, rgba(255,255,255,.55), rgba(255,255,255,0) 72%)}
.bubble svg,.bubble img{position:absolute; inset:0; width:100%; height:100%; display:block}
.bubble img{object-fit:contain; padding-top:6%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hop{0%{transform:none}35%{transform:translateY(-6px) scale(1.1)}100%{transform:none}}
/* The record leader wears a crown. */
.crown{position:absolute; left:50%; top:-25%; width:56%; transform:translateX(-50%) rotate(-10deg); z-index:3; pointer-events:none; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}

/* ---------- blocked ---------- */
.blocked-card{padding:28px 22px; text-align:center}
.blocked-card h1{margin:0 0 6px; font-size:20px}
.blocked-card p{margin:0; color:var(--muted)}

/* ---------- lobby ---------- */
.topbar{display:flex; align-items:center; gap:10px}
.logo{display:flex; align-items:center; gap:8px; font-family:var(--font-score); font-weight:800; font-size:27px; letter-spacing:.04em; line-height:1}
.logo svg{width:26px; height:26px}
.playing-as{margin-left:auto; color:var(--muted); font-size:13.5px}
.playing-as b{color:var(--ink)}
.versus{padding:22px 16px 20px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px}
.vs-player{display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0}
.vs-name{font-weight:700; font-size:16px; text-align:center; overflow-wrap:anywhere; line-height:1.2}
.vs-name small{display:block; font-weight:500; font-size:12.5px; color:var(--muted); margin-top:3px}
.status{display:inline-flex; align-items:center; gap:5px}
.status i{width:7px; height:7px; border-radius:50%; background:var(--off)}
.status.on i{background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent)}
.status.ready{color:var(--ink); font-weight:700}
.vs-mid{text-align:center; padding-bottom:18px}
.record{font-family:var(--font-score); font-weight:800; font-size:64px; line-height:.95; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; justify-content:center; gap:6px}
.record .dash{color:var(--muted); font-weight:600}
.record-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.streak{margin-top:8px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.streak i{width:8px; height:8px; border-radius:50%; flex:none}
.rejoin{padding:14px 16px; display:flex; align-items:center; gap:12px}
.rejoin p{margin:0; flex:1; min-width:0; font-weight:600}
.rejoin .btn-primary{width:auto; font-size:15px; padding:10px 16px}
.start-card{padding:18px 16px; display:flex; flex-direction:column; gap:12px}
.field-label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.ready-note{margin:0; min-height:1.45em; text-align:center; color:var(--muted); font-size:14px}
.ready-note.hot{color:var(--ink); font-weight:700}
.fine{margin:0; color:var(--muted); font-size:13px; text-align:center}
.panel{padding:16px}
.panel h2{margin:0 0 10px; font-size:15px; font-weight:700}
.empty{margin:0; color:var(--muted); font-size:14px}
.best{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.best th,.best td{padding:8px 6px; text-align:right; border-top:1px solid var(--line); font-size:14.5px}
.best thead th{border-top:0; font-size:12.5px; color:var(--muted); font-weight:600; padding-top:0}
.best tbody th{text-align:left; font-weight:600}
.best td{color:var(--muted)}
.best td.fast{color:var(--ink); font-weight:700}
.history{list-style:none; margin:0; padding:0}
.history li{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line)}
.history li:first-child{border-top:0; padding-top:2px}
.history .wdot{width:9px; height:9px; border-radius:50%}
.history .who{font-weight:600; min-width:0}
.history .meta{display:block; font-weight:400; font-size:12.5px; color:var(--muted)}
.history .times{font-variant-numeric:tabular-nums; font-size:14px; color:var(--muted); text-align:right; white-space:nowrap}
.history .times b{color:var(--ink)}

/* ---------- race ---------- */
.raceboard{padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; border-radius:18px}
.race-top{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px}
.race-diff{justify-self:start; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 7px}
.race-top .link-btn{justify-self:end}
.clock{font-family:var(--font-score); font-weight:700; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.02em}
.lane{display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px}
.lane-body{min-width:0; display:flex; flex-direction:column; gap:5px}
.lane-name{display:flex; align-items:center; gap:7px; font-size:14px; min-width:0}
.lane-name b{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tag{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:0 5px; white-space:nowrap}
.track{position:relative; height:12px; border-radius:999px; background:var(--raised); border:1px solid var(--line); overflow:hidden}
.fill{height:100%; width:0; border-radius:inherit; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.flag{position:absolute; right:0; top:0; bottom:0; width:12px; opacity:.5;
  background:repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0/6px 6px}
.pct{font-family:var(--font-score); font-weight:700; font-size:24px; font-variant-numeric:tabular-nums; min-width:3.1ch; text-align:right; line-height:1; margin-bottom:-3px}
/* Vehicles: Deepak drives, Ishita flies. The head rides at the front of the bar. */
.course{position:relative; padding-top:39px}
.rider{--vw:56px; position:absolute; bottom:11px; width:var(--vw); height:32px; pointer-events:none; z-index:1;
  left:clamp(0px, calc(var(--pct, 0) * 1% - var(--vw) / 2), calc(100% - var(--vw))); transition:left .5s cubic-bezier(.2,.8,.2,1)}
.rider.plane{--vw:62px; bottom:12px}
.ride-in{position:absolute; inset:0}
.rider .avatar{--size:24px; position:absolute; top:-6px; left:11px}
.rider.plane .avatar{--size:23px; top:-4px; left:31.5px}
.ride{position:absolute; left:0; bottom:0; width:100%; height:100%; overflow:visible}
.ride .paint{fill:var(--pc)}
.ride .paint-d{fill:color-mix(in srgb, var(--pc) 74%, #000)}
.ride .paint-dd{fill:color-mix(in srgb, var(--pc) 56%, #000)}
.ride .wheel,.ride .prop{transform-box:fill-box; transform-origin:center}
.rider.moving .wheel{animation:spin .4s linear infinite}
.rider.car.moving .ride-in{animation:rumble .18s ease-in-out infinite alternate}
.rider.plane .ride-in{animation:fly 2.8s ease-in-out infinite}
.ride .prop{animation:prop .16s linear infinite}
.course.car .track{background:repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 14px) 0 50%/100% 2px no-repeat, var(--raised)}
.course.plane .track{background:radial-gradient(circle, var(--line) 1.3px, transparent 1.8px) 0 50%/9px 100% repeat-x, var(--raised)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rumble{from{transform:translateY(0)}to{transform:translateY(-1px)}}
@keyframes fly{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-1.5deg)}}
@keyframes prop{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.15)}}

.board{
  width:100%; aspect-ratio:1; max-width:100%; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr);
  background:var(--surface); border:2.5px solid var(--line-strong); border-radius:12px; overflow:hidden;
  container-type:inline-size; box-shadow:0 14px 34px -14px var(--shadow); user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.cell{
  border:0; padding:0; margin:0; background:transparent; display:grid; place-items:center; min-width:0; min-height:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0;
  font-size:6.6cqi; font-weight:500; color:var(--entry); font-variant-numeric:tabular-nums; line-height:1; transition:background-color .12s;
}
.cell.c3{border-right:2px solid var(--line-strong)}
.cell.r3{border-bottom:2px solid var(--line-strong)}
.cell.c9{border-right:0}
.cell.r9{border-bottom:0}
.cell.given{color:var(--ink); font-weight:650}
.cell.sel{background:var(--select)}
.cell.clash{color:var(--clash); background:var(--clash-bg)}
.cell.sel.clash{background:color-mix(in srgb, var(--clash-bg) 55%, var(--select))}
.cell:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
.cell span.pop{animation:pop .16s ease-out}
.board.veiled .cell{color:transparent}
@keyframes pop{from{transform:scale(.5); opacity:.3}to{transform:none; opacity:1}}

.pad{display:flex; flex-direction:column; gap:8px}
.pad-tools{display:flex; align-items:center; gap:10px}
.tool{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:8px 13px; font-weight:600; font-size:14px}
.tool svg{width:17px; height:17px}
.kbd-hint{color:var(--muted); font-size:12.5px}
.reacts{margin-left:auto; display:flex; gap:6px}
.react{border:1px solid var(--line); background:var(--surface); border-radius:10px; width:38px; height:36px; padding:0; font-size:19px; line-height:1; display:grid; place-items:center}
.react:active{transform:scale(.9)}
@media (hover:none), (max-width:480px){.kbd-hint{display:none}}
.digits{display:grid; grid-template-columns:repeat(9,1fr); gap:6px}
.digit{border:1px solid var(--line); background:var(--surface); color:var(--entry); font-size:27px; font-weight:600; height:58px; border-radius:12px; box-shadow:0 2px 0 var(--line); min-width:0; padding:0; touch-action:manipulation}
.digit:active{transform:translateY(2px); box-shadow:none}

/* ---------- overlays ---------- */
.overlay{position:fixed; inset:0; background:var(--scrim); display:grid; place-items:center; z-index:50;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.sheet{background:var(--surface); border-radius:22px; padding:26px 22px 20px; width:min(380px, 100%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.sheet h2{margin:12px 0 0; font-size:22px; text-wrap:balance}
.sheet p{margin:0; color:var(--muted); max-width:30ch}
.big-time{font-family:var(--font-score); font-weight:800; font-size:56px; line-height:1; font-variant-numeric:tabular-nums}
.sheet .row{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:8px}
.sheet .row.one{grid-template-columns:1fr}
.pause-icon{width:56px; height:56px; border-radius:50%; background:var(--raised); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent)}
.pause-icon svg{width:22px; height:22px}
.sheet p.pause-status{color:var(--ink); font-weight:600}
.sheet p.end-note{color:var(--ink)}
.sheet p.end-note.hot{font-weight:700}
.pause-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; margin-top:4px}
.sheet p.tip{font-size:13px}
.sheet .diff-tag{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.countdown{position:fixed; inset:0; background:var(--scrim); display:grid; place-items:center; z-index:60}
.countdown span{font-family:var(--font-score); font-weight:800; font-size:min(42vw, 190px); color:var(--on-scrim); line-height:1}
.countdown span.go{animation:cd .9s ease-out both}
@keyframes cd{0%{transform:scale(1.5); opacity:0}20%{opacity:1}100%{transform:scale(.92); opacity:.25}}
/* Pops that rise and fade: a cauliflower from Ishita's red numbers, and quick reactions over a car or plane. */
.float-pop{position:fixed; z-index:56; pointer-events:none; animation:rise 1.3s cubic-bezier(.2,.9,.3,1) forwards}
.float-pop.cauli{width:60px; height:60px; margin:-30px 0 0 -30px}
.float-pop.cauli img{width:100%; height:100%; display:block; filter:drop-shadow(0 4px 5px rgba(0,0,0,.28))}
.float-pop.emoji{width:40px; height:40px; margin:-20px 0 0 -20px; font-size:30px; line-height:40px; text-align:center}
@keyframes rise{0%{transform:translateY(6px) scale(.2) rotate(-25deg); opacity:0}16%{transform:translateY(-8px) scale(1.22) rotate(10deg); opacity:1}30%{transform:translateY(-13px) scale(.94) rotate(-7deg)}44%{transform:translateY(-17px) scale(1.04) rotate(4deg)}76%{transform:translateY(-28px) scale(1) rotate(0); opacity:1}100%{transform:translateY(-44px) scale(.9); opacity:0}}
/* Win confetti; a soft glow instead when the device asks for less motion. */
.confetti{position:fixed; inset:0; width:100%; height:100%; z-index:55; pointer-events:none}
.sheet.glow{box-shadow:0 0 0 3px var(--glow), 0 0 56px 4px color-mix(in srgb, var(--glow) 50%, transparent), 0 30px 60px -20px rgba(0,0,0,.45)}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:70;
  background:var(--ink); color:var(--surface); padding:12px 18px; border-radius:12px; font-weight:600; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); max-width:calc(100vw - 32px); text-align:center}

@media (max-width:420px){
  .record{font-size:52px}
  .avatar.xl{--size:84px}
  .digit{height:54px; font-size:24px}
  .digits{gap:4px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}