[hidden] { display: none !important; }
:root {
  --bg: oklch(0.25 0.006 275);
  --wall: oklch(0.17 0.006 275);
  --wall-2: oklch(0.21 0.007 275);
  --line: oklch(0.36 0.008 275);
  --text: oklch(0.95 0.004 275);
  --muted: oklch(0.74 0.008 275);
  --yellow: oklch(0.88 0.17 98);
  --yellow-deep: oklch(0.62 0.13 95);
  --ink-on-yellow: oklch(0.2 0.02 95);
  --purple: oklch(0.68 0.2 305);
  --purple-hi: oklch(0.76 0.17 305);
  --green: oklch(0.8 0.19 150);
  --red: oklch(0.63 0.22 27);
  --red-hi: oklch(0.72 0.18 27);
  --display: 'Anybody', 'Archivo', system-ui, sans-serif;
  --text-font: 'Archivo', system-ui, sans-serif;
  --mono: 'Azeret Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --edge: max(16px, env(safe-area-inset-left));
  --glass-panel: linear-gradient(180deg, oklch(0.2 0.007 275 / 0.88), oklch(0.15 0.006 275 / 0.92));
  --tab-h: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--text-font); font-size: 16px; overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.num, .tw-t, .pb-v, .rh-main { font-variant-numeric: tabular-nums; }
.c-purple { color: var(--purple-hi); } .c-green { color: var(--green); } .c-yellow { color: var(--yellow); } .c-red { color: var(--red-hi); }
.muted { color: var(--muted); }

#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; cursor: grab; }
#stage:active { cursor: grabbing; }
body[data-phase="racing"] #stage { cursor: default; }

/* ---------- top HUD ---------- */
.hud-top { position: fixed; top: 0; left: 0; right: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: max(14px, env(safe-area-inset-top)) var(--edge) 14px; pointer-events: none; z-index: 6;
  background: linear-gradient(180deg, oklch(0.16 0.006 275 / 0.6), transparent); }
.hud-top > * { pointer-events: auto; min-width: 0; }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.mark svg { width: 40px; height: 27px; flex: none; }
.mark-word { font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 150; font-size: 30px; letter-spacing: 0.02em; line-height: 1; }
.day-tag { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 110; font-size: 13px; padding: 4px 7px 3px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rule { margin: 0; font-size: 15px; color: var(--muted); max-width: 40ch; text-wrap: balance; }
.topnav { display: flex; gap: 2px; }
.topnav a { text-decoration: none; padding: 9px 12px; font-size: 15px; font-weight: 600; color: var(--muted); border-radius: 5px; position: relative; font-stretch: 108%; }
.topnav a:hover { color: var(--text); }
.topnav a[aria-current="page"] { color: var(--text); }
.topnav a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; background: var(--yellow); }
.top-right { display: flex; gap: 10px; align-items: center; }
.chip { display: inline-flex; align-items: baseline; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--glass-panel); border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; align-items: center; }
.chip-sym { font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 125; font-size: 15px; }
.chip-val { font-size: 14px; color: var(--muted); white-space: nowrap; }
.btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--line); background: var(--glass-panel); cursor: pointer; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.btn-quiet:hover { border-color: var(--muted); }
.btn-quiet:active { transform: translateY(1px); }
.btn-quiet:disabled { opacity: 0.6; cursor: progress; }
.how-mini { display: none; width: 40px; padding: 0; font-family: var(--display); font-weight: 800; }

/* the one action: a pit board */
.btn-race { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, oklch(0.92 0.16 99), var(--yellow) 55%, oklch(0.8 0.16 96)); color: var(--ink-on-yellow);
  font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 140; font-size: 18px; letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), inset 0 -3px 0 oklch(0.55 0.12 95), 0 10px 24px -12px oklch(0.88 0.17 98 / 0.7); transition: transform 0.18s var(--ease), filter 0.18s var(--ease); }
.btn-race:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-race:active { transform: translateY(1px); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), inset 0 -1px 0 oklch(0.55 0.12 95); }
.btn-race:disabled { background: var(--wall-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; transform: none; font-size: 16px; }
.wide { width: 100%; }

/* ---------- coin sheet ---------- */
.coin-sheet { position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 52px); right: var(--edge); width: min(340px, calc(100vw - 24px)); z-index: 20; padding: 16px; background: var(--wall); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 30px 60px -20px oklch(0.05 0.01 275 / 0.9); }
.cs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cs-name { font-weight: 600; } .cs-name b { font-family: var(--display); font-variation-settings: 'wdth' 125; margin-left: 4px; }
.x { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; font-size: 20px; line-height: 1; text-decoration: none; color: var(--muted); }
.x:hover { color: var(--text); }
.cs-price { display: flex; align-items: baseline; gap: 10px; }
.cs-price b { font-family: var(--display); font-variation-settings: 'wdth' 130; font-size: 26px; font-weight: 800; }
.spark { width: 100%; height: 56px; display: block; margin: 8px 0; }
.cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.cs-stats dt { font-size: 13px; color: var(--muted); } .cs-stats dd { margin: 2px 0 0; font-weight: 600; }
.cs-ca { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; min-width: 0; }
.cs-ca .addr { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.btn-mini { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--wall-2); border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; }
.cs-buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cs-buy label { font-size: 13px; color: var(--muted); }
.cs-in { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--wall-2); padding: 0 12px; }
.cs-in input { flex: 1 1 0; width: 0; min-width: 0; height: 42px; background: none; border: 0; color: var(--text); font: 600 16px var(--text-font); font-variant-numeric: tabular-nums; outline: none; }
.cs-in:focus-within { border-color: var(--yellow); }
.cs-in span { color: var(--muted); font-size: 14px; }
.cs-err { margin: 8px 0 0; color: var(--red-hi); font-size: 14px; }
.cs-note, .cs-soon { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.cs-note a { color: var(--text); }

/* ---------- garage HUD ---------- */
.tower { position: fixed; right: var(--edge); top: 96px; width: 264px; z-index: 5; background: var(--glass-panel); border: 1px solid oklch(0.32 0.008 275 / 0.8); border-radius: 8px; overflow: hidden; }
.tower-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: oklch(0.13 0.006 275 / 0.9); font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 130; font-size: 15px; }
.tower-head a { font-family: var(--text-font); font-weight: 600; font-size: 13px; color: var(--muted); font-variation-settings: normal; }
.tower-list { list-style: none; margin: 0; padding: 4px 0; }
.tower-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 0; font-size: 14px; }
.tower-list li:nth-child(odd) { background: oklch(1 0 0 / 0.025); }
.tw-pos { height: 100%; display: grid; place-items: center; background: oklch(0.95 0.004 275 / 0.92); color: var(--wall); font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 120; }
.lead .tw-pos { background: var(--purple); color: oklch(0.98 0.01 305); }
.mine .tw-pos { background: var(--green); color: oklch(0.2 0.04 150); }
.tw-name { font-family: var(--mono); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-name em { font-family: var(--text-font); font-style: normal; font-size: 11px; color: var(--muted); margin-left: 6px; }
.mine .tw-name { font-family: var(--text-font); font-weight: 700; color: var(--green); }
.tw-t { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 110; font-size: 14px; }
.lead .tw-t { color: var(--purple-hi); }
.tw-sep { height: 6px !important; background: none !important; border-top: 1px dashed var(--line); }
.tw-empty { display: block !important; height: auto !important; padding: 12px !important; color: var(--muted); line-height: 1.45; }
.tower-list .sk { display: block; margin: 6px 12px; height: 22px; border-radius: 3px; background: linear-gradient(90deg, var(--wall-2), oklch(0.26 0.007 275), var(--wall-2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.tower-foot { margin: 0; padding: 8px 12px 10px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }

.paint { position: fixed; left: var(--edge); bottom: max(20px, env(safe-area-inset-bottom)); width: min(430px, calc(100vw - 32px)); padding: 16px 18px 18px; background: var(--glass-panel); border: 1px solid oklch(0.32 0.008 275 / 0.8); border-radius: 10px; z-index: 5; box-shadow: 0 30px 60px -30px oklch(0.05 0.01 275 / 0.9); }
.paint-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.paint-tabs { display: flex; gap: 4px; }
.paint-tabs button { position: relative; background: none; border: 0; padding: 8px 10px 10px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--muted); font-stretch: 112%; }
.paint-tabs button[aria-selected="true"] { color: var(--text); }
.paint-tabs button::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.paint-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.swatch-name { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.swatch { position: relative; aspect-ratio: 3 / 4; min-height: 44px; border: 0; border-radius: 4px; cursor: pointer; background: var(--c); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), inset 0 -10px 16px oklch(0 0 0 / 0.35), 0 6px 14px -8px oklch(0 0 0 / 0.8); overflow: hidden; }
.swatch::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, oklch(1 0 0 / 0.42) 0%, oklch(1 0 0 / 0.08) 38%, transparent 40%, oklch(0 0 0 / 0.18) 100%); }
.swatch:hover { transform: translateY(-3px); }
.swatch[aria-checked="true"] { transform: translateY(-6px); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), inset 0 -10px 16px oklch(0 0 0 / 0.35), 0 0 0 2px var(--wall), 0 0 0 4px var(--yellow); }

/* pit board: pot, countdown, Race */
.pitboard { position: fixed; right: var(--edge); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 5; display: grid; grid-template-columns: auto auto auto; align-items: stretch; gap: 0;
  background: oklch(0.13 0.006 275 / 0.94); border: 1px solid oklch(0.32 0.008 275 / 0.8); border-radius: 10px; padding: 8px; box-shadow: 0 30px 60px -30px oklch(0.05 0.01 275 / 0.9); }
.pb-cell { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 18px; min-width: 0; }
.pb-cell + .pb-cell { border-left: 1px solid var(--line); }
.pb-k { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pb-v { font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 125; font-size: 26px; line-height: 1; white-space: nowrap; }
.pb-pot .pb-v { color: var(--yellow); }
.pitboard .btn-race { margin-left: 10px; min-height: 60px; padding: 0 34px; font-size: 22px; }

.scene-hint { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font-size: 14px; color: var(--muted); pointer-events: none; z-index: 4; white-space: nowrap; }

body[data-view="race"] .paint, body[data-view="race"] .tower, body[data-view="race"] .pitboard, body[data-view="race"] .scene-hint { display: none; }
body[data-phase="racing"] .rule, body[data-phase="racing"] .topnav, body[data-phase="racing"] .top-right, body[data-phase="racing"] .tabbar { display: none; }
body[data-phase="racing"] .hud-top { background: none; }

/* ---------- race HUD: broadcast graphics ---------- */
.racehud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.racehud > * { pointer-events: auto; }
.rh-lap { position: fixed; left: var(--edge); top: calc(max(14px, env(safe-area-inset-top)) + 52px); display: flex; align-items: stretch; background: oklch(0.13 0.006 275 / 0.9); border-radius: 6px; overflow: hidden; }
.rh-k { display: grid; place-items: center; padding: 0 10px; background: var(--text); color: var(--wall); font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 120; font-size: 14px; }
.rh-lapn { padding: 6px 12px; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 130; font-size: 22px; color: var(--muted); }
.rh-lapn b { color: var(--text); font-size: 30px; font-weight: 900; }
.rh-time { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rh-main { padding: 8px 18px 6px; background: oklch(0.13 0.006 275 / 0.9); border-radius: 6px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 135; font-size: 40px; line-height: 1; min-width: 7.2ch; text-align: center; border-bottom: 3px solid var(--yellow); }
.rh-laps { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.rh-laps li { padding: 5px 9px; background: oklch(0.13 0.006 275 / 0.9); border-radius: 4px; font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 115; font-size: 15px; font-variant-numeric: tabular-nums; }
.rh-laps li span, .res-laps li span { color: var(--muted); margin-right: 6px; font-weight: 600; }
.rh-speed { position: fixed; right: var(--edge); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; background: oklch(0.13 0.006 275 / 0.9); border-radius: 6px; }
.rh-speed b { font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 140; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.rh-speed span { color: var(--muted); font-size: 14px; }
.rh-mode { position: fixed; left: var(--edge); top: calc(max(14px, env(safe-area-inset-top)) + 104px); padding: 4px 8px; border-radius: 3px; font-size: 13px; font-weight: 700; background: oklch(0.13 0.006 275 / 0.9); color: var(--muted); }
.rh-mode[data-mode="ranked"] { color: var(--ink-on-yellow); background: var(--yellow); }
.rh-retire { position: fixed; right: var(--edge); top: max(14px, env(safe-area-inset-top)); height: 36px; padding: 0 14px; font-size: 14px; }
.rh-flag { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); margin: 0; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 150; font-size: 44px; letter-spacing: 0.02em; text-shadow: 0 4px 30px oklch(0 0 0 / 0.6); pointer-events: none; white-space: nowrap; }
.rh-flag[data-kind="neg"] { color: var(--red-hi); font-size: 30px; top: 30%; }
.rh-flag[data-kind="pos"] { color: var(--green); }
.lights { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); display: flex; gap: 12px; padding: 12px 16px; background: oklch(0.1 0.005 275 / 0.92); border-radius: 10px; transition: opacity 0.6s var(--ease) 0.6s, transform 0.6s var(--ease) 0.6s; pointer-events: none; }
.lights i { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, oklch(0.3 0.04 27), oklch(0.16 0.02 27)); box-shadow: inset 0 0 0 2px oklch(0.08 0.005 275); }
.lights i.on { background: radial-gradient(circle at 40% 35%, oklch(0.85 0.14 30), var(--red) 55%, oklch(0.45 0.2 27)); box-shadow: 0 0 22px oklch(0.63 0.22 27 / 0.8), inset 0 0 0 2px oklch(0.08 0.005 275); }
.lights.gone { opacity: 0; transform: translate(-50%, -12px); }

.pedals { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 12px max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
.pedals > div { display: flex; gap: 10px; pointer-events: auto; }
.pedals button { width: 76px; height: 96px; border-radius: 14px; border: 1px solid oklch(0.45 0.008 275 / 0.7); background: oklch(0.14 0.006 275 / 0.62); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 110; font-size: 14px; color: var(--muted); }
.pedals svg { width: 34px; height: 34px; fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pedals .ped-gas { height: 128px; color: var(--ink-on-yellow); background: oklch(0.88 0.17 98 / 0.82); border-color: var(--yellow); }
.pedals .ped-brake { color: var(--text); }
.pedals button.down { transform: scale(0.95); filter: brightness(1.3); }
body[data-phase="racing"] .rh-speed { bottom: calc(150px + env(safe-area-inset-bottom)); }
@media (pointer: fine) and (min-width: 761px) { body[data-phase="racing"] .rh-speed { bottom: max(24px, env(safe-area-inset-bottom)); } }

/* ---------- panels on the circuit ---------- */
.panel { position: fixed; z-index: 8; background: var(--wall); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 40px 80px -30px oklch(0.03 0.01 275 / 0.95); }
.keys.touch { display: none; }
.prerace { left: var(--edge); top: 88px; width: 380px; max-height: calc(100dvh - 110px); overflow: auto; padding: 22px; }
.prerace h2, .drawer-head h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 140; font-size: 28px; line-height: 1; }
.steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.steps li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.3; font-weight: 600; }
.steps svg { width: 100%; height: 40px; fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: var(--wall-2); border-radius: 6px; padding: 4px; }
.steps svg .f { fill: var(--yellow); }
.steps.big { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.steps.big li { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; font-size: 16px; }
.steps.big svg { grid-row: 1 / 3; height: 58px; }
.steps.big b { font-family: var(--display); font-variation-settings: 'wdth' 120; font-size: 18px; }
.steps.big span { font-weight: 400; color: var(--muted); line-height: 1.45; }
.pre-opt { padding: 14px 0; border-top: 1px solid var(--line); }
.pre-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pre-opt h3 { margin: 0; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 125; font-size: 19px; }
.pre-tag { font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 3px; background: var(--yellow); color: var(--ink-on-yellow); }
.pre-tag.muted { background: var(--wall-2); color: var(--muted); }
.pre-tag.pos { background: var(--green); color: oklch(0.2 0.04 150); }
.pre-tag.neg { background: oklch(0.63 0.22 27 / 0.2); color: var(--red-hi); }
.pre-note { margin: 8px 0 12px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; color: var(--yellow); text-decoration: underline; cursor: pointer; font-weight: 600; }
.keys { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 2; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; margin: 0 2px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 4px; background: var(--wall-2); color: var(--text); font: 600 13px var(--text-font); }

.results { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px)); padding: 24px; text-align: center; animation: land 0.45s var(--ease); }
@keyframes land { from { opacity: 0; transform: translate(-50%, -46%) scale(0.98); } }
.res-kind { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.res-time { margin: 6px 0 14px; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 145; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.res-laps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.res-laps li { padding: 6px 10px; border-radius: 4px; background: var(--wall-2); font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 115; font-variant-numeric: tabular-nums; }
.verdict { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 8px; background: var(--wall-2); text-align: left; line-height: 1.45; margin-bottom: 18px; }
.verdict span { color: var(--muted); font-size: 15px; }
.verdict.pending b::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.verdict.ok { box-shadow: inset 0 0 0 1px oklch(0.8 0.19 150 / 0.5); }
.verdict.ok b { color: var(--green); padding-right: 96px; }
.verdict.bad { box-shadow: inset 0 0 0 1px oklch(0.63 0.22 27 / 0.6); }
.verdict.bad b { color: var(--red-hi); }
.stamp { position: absolute; right: 12px; top: 12px; padding: 4px 8px; border: 2px solid var(--green); border-radius: 4px; color: var(--green) !important; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 130; font-size: 14px !important; transform: rotate(-6deg); animation: stamp 0.35s var(--ease); }
@keyframes stamp { from { transform: rotate(-6deg) scale(1.8); opacity: 0; } }
.res-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- drawer sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 9; background: oklch(0.1 0.005 275 / 0.35); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 10; background: var(--wall); border-left: 1px solid var(--line); display: flex; flex-direction: column; animation: slide 0.35s var(--ease); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: max(18px, env(safe-area-inset-top)) 24px 8px; }
.drawer-head h2 { margin: 0; }
.drawer-body { flex: 1; overflow: auto; padding: 8px 24px 40px; line-height: 1.55; }
.drawer-body p { margin: 0 0 14px; max-width: 62ch; }
.sheet-lede { color: var(--muted); }
.sheet-note { color: var(--muted); font-size: 15px; }
.sheet-h { margin: 28px 0 12px; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 125; font-size: 19px; }
.table-wrap { overflow-x: auto; margin: 0 -8px; }
.timing { width: 100%; border-collapse: collapse; font-size: 15px; }
.timing th { position: sticky; top: 0; background: var(--wall); text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); }
.timing td { padding: 9px 8px; border-bottom: 1px solid oklch(0.3 0.008 275 / 0.6); white-space: nowrap; }
.timing .num { text-align: right; font-variant-numeric: tabular-nums; }
.timing .pos { width: 36px; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 120; }
.timing .t { font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 115; }
.timing .gap { color: var(--muted); }
.timing .laps span { margin-left: 8px; font-size: 13px; color: var(--muted); }
.timing .laps span.c-purple { color: var(--purple-hi); }
.timing tr.lead .t { color: var(--purple-hi); }
.timing tr.mine td { background: oklch(0.8 0.19 150 / 0.08); }
.addr { font-family: var(--mono); font-size: 13px; text-decoration: none; }
a.addr:hover { text-decoration: underline; }
.tag { font-size: 11px; font-weight: 700; padding: 2px 5px; border-radius: 3px; background: var(--wall-2); color: var(--muted); }
.tag.you { background: var(--green); color: oklch(0.2 0.04 150); }
.empty { display: grid; gap: 8px; justify-items: start; padding: 18px; border: 1px dashed var(--line); border-radius: 8px; }
.empty span { color: var(--muted); }
.empty.small { padding: 14px; }
.hist { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid oklch(0.3 0.008 275 / 0.6); font-size: 15px; }
.hist-day { color: var(--muted); font-variant-numeric: tabular-nums; }
.hist.paid .hist-amt { color: var(--yellow); font-weight: 700; }
.hist-why { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.sol-link { font-size: 14px; color: var(--muted); }
.sol-link:hover { color: var(--text); }
.sk-rows i { display: block; height: 30px; margin: 8px 0; border-radius: 4px; background: linear-gradient(90deg, var(--wall-2), oklch(0.26 0.007 275), var(--wall-2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
.sk-inline { display: inline-block; width: 140px; height: 40px; border-radius: 4px; background: var(--wall-2); }
.pot-hero { padding: 20px; border-radius: 10px; background: linear-gradient(180deg, oklch(0.24 0.03 98 / 0.35), var(--wall-2)); border: 1px solid oklch(0.88 0.17 98 / 0.3); }
.pot-big { display: block; margin: 6px 0 12px; font-family: var(--display); font-weight: 900; font-variation-settings: 'wdth' 140; font-size: 52px; line-height: 1; color: var(--yellow); }
.pot-hero p { margin: 0; color: var(--muted); }
.split-bar { display: flex; height: 16px; border-radius: 3px; overflow: hidden; gap: 2px; }
.split-bar i { display: block; }
.split-legend { list-style: none; margin: 12px 0; padding: 0; }
.split-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid oklch(0.3 0.008 275 / 0.6); }
.split-legend li > i { width: 12px; height: 12px; border-radius: 2px; }
.split-legend em { font-style: normal; color: var(--muted); font-size: 14px; min-width: 9ch; text-align: right; }

/* ---------- phone tab bar ---------- */
.tabbar { display: none; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + 60px); transform: translateX(-50%); z-index: 30; display: grid; gap: 8px; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 8px; background: var(--wall); border: 1px solid var(--line); box-shadow: 0 20px 40px -20px oklch(0.03 0.01 275 / 0.9); pointer-events: auto; font-size: 15px; animation: tin 0.3s var(--ease); transition: opacity 0.3s, transform 0.3s var(--ease); }
.toast.ok { border-color: oklch(0.8 0.19 150 / 0.6); }
.toast.err { border-color: oklch(0.63 0.22 27 / 0.7); }
.toast a { color: var(--yellow); font-weight: 600; white-space: nowrap; }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }

/* fallback */
.fallback { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 40%, oklch(0.32 0.006 275), var(--bg) 70%); z-index: 3; }
.fallback-car { width: min(560px, 90vw); height: auto; }
.fallback-title { margin: 12px 0 0; font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 125; font-size: 26px; }
.fallback-text { margin: 0; max-width: 46ch; color: var(--muted); }

@media (max-width: 1180px) {
  .rule { display: none; }
  .hud-top { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 900px) {
  .topnav { display: none; }
  .how-mini { display: inline-flex; }
  .hud-top { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .rule { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 14px; max-width: none; }
  body[data-view="race"] .rule { display: none; }
  .tower { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); background: oklch(0.13 0.006 275 / 0.96); border-top: 1px solid var(--line); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; text-decoration: none; font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 6px; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current="page"] { color: var(--yellow); }
  .paint { left: 12px; right: 12px; width: auto; bottom: calc(146px + env(safe-area-inset-bottom)); padding: 10px 12px 12px; }
  .paint-head { margin-bottom: 10px; }
  .paint-tabs button { padding: 6px 8px 9px; font-size: 14px; }
  .swatches { gap: 6px; }
  .swatch { min-height: 36px; aspect-ratio: 1 / 1; }
  .pitboard { left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px; row-gap: 8px; }
  .pb-cell { padding: 2px 10px; }
  .pb-clock { align-items: flex-end; text-align: right; }
  .pb-k { font-size: 12px; }
  .pb-v { font-size: 24px; }
  .pitboard .btn-race { grid-column: 1 / -1; min-height: 50px; padding: 0 22px; font-size: 20px; margin-left: 0; }
  .paint { bottom: calc(210px + env(safe-area-inset-bottom)); }
  .pre-opt .pre-note { font-size: 14px; margin: 6px 0 10px; }
  .keys.kb { display: none; }
  .keys.touch { display: block; }
  .scene-hint { display: none; }
  .prerace { left: 12px; right: 12px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 150px); padding: 18px; }
  .drawer { top: 0; width: 100vw; border-left: 0; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .results { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); animation: none; }
  body[data-phase="done"] .tabbar { display: flex; }
}
@media (max-width: 560px) {
  .mark-word { font-size: 24px; }
  .mark svg { width: 32px; height: 22px; }
  .day-tag { font-size: 12px; padding: 3px 5px 2px; }
  .chip { height: 36px; padding: 0 10px; gap: 6px; }
  .chip .chip-ch { display: none; }
  .top-right { gap: 6px; }
  .chip-val { font-size: 13px; }
  .btn-quiet { height: 36px; padding: 0 12px; font-size: 14px; }
  .how-mini { width: 36px; padding: 0; }
  .day-tag, .chip-val { display: none; }
  .prerace .steps { display: none; }
  .prerace h2 { font-size: 22px; margin-bottom: 6px; }
  .prerace { padding: 14px 16px; }
  .pre-opt { padding: 10px 0; }
  .rh-main { font-size: 30px; padding: 6px 12px 4px; }
  .rh-laps li { font-size: 13px; padding: 4px 6px; }
  .rh-lap { top: calc(max(14px, env(safe-area-inset-top)) + 96px); }
  .rh-mode { top: calc(max(14px, env(safe-area-inset-top)) + 146px); }
  .rh-time { top: calc(max(14px, env(safe-area-inset-top)) + 44px); }
  .rh-retire { top: max(12px, env(safe-area-inset-top)); }
  .rh-speed b { font-size: 34px; }
  .lights i { width: 30px; height: 30px; }
  .lights { gap: 8px; padding: 10px 12px; }
  .res-time { font-size: 48px; }
  .hist { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .hist > span:nth-child(4) { grid-column: 2 / -1; }
  .timing .laps { display: none; }
  .timing th:last-child { display: none; }
  .drawer-body { padding: 8px 16px 40px; }
  .drawer-head { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }