:root {
  --bg: #070b1c; --surface: #10173a; --surface-2: #1a2350; --ink: #eaf0ff; --ink-2: #8d9bc7; --line: #22305e;
  --accent: #22e6ff; --accent-ink: #03111a; --ok: #4dff7c; --warn: #ffe94a; --bad: #ff4d6d; --info: #4d7cff;
  --well: #060a1a; --well-line: rgba(120,160,255,.08); --glass: rgba(140,180,255,.16);
  --font-display: "Orbitron", "Exo 2", system-ui, sans-serif; --font-ui: "Exo 2", system-ui, sans-serif;
}
:root[data-mode="sprint"] { --accent: #4dff7c; --accent-ink: #04140a; }
:root[data-mode="ultra"] { --accent: #ff9a3c; --accent-ink: #1a0c00; }
:root[data-mode="daily"] { --accent: #d05cff; --accent-ink: #ffffff; }
:root[data-mode="zen"] { --accent: #4d7cff; --accent-ink: #ffffff; }
:root[data-theme="light"] { --bg: #eef1fb; --surface: #ffffff; --surface-2: #dde3f7; --ink: #0e1330; --ink-2: #4f5c8a; --line: #c3cced; --well: #f6f8ff; --well-line: rgba(40,60,140,.12); --glass: rgba(40,60,140,.14); --accent-ink: #ffffff; }
:root[data-theme="light"][data-mode="marathon"] { --accent: #0891b2; } :root[data-theme="light"][data-mode="sprint"] { --accent: #15803d; } :root[data-theme="light"][data-mode="ultra"] { --accent: #c2410c; } :root[data-theme="light"][data-mode="daily"] { --accent: #9333ea; } :root[data-theme="light"][data-mode="zen"] { --accent: #2f55d4; }
body { background: radial-gradient(ellipse 80% 50% at 50% -10%, #182458 0%, var(--bg) 60%), linear-gradient(180deg, transparent 0, transparent 100%); }
:root[data-theme="light"] body { background: radial-gradient(ellipse 80% 50% at 50% -10%, #ffffff 0%, var(--bg) 60%); }
.logo { display: flex; justify-content: center; margin-bottom: -4px; } .logo canvas { width: 200px; height: 70px; }
.title { font-size: clamp(2rem, 10vw, 3.6rem); font-weight: 900; line-height: .92; text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 44px color-mix(in oklab, var(--accent) 35%, transparent); }
.tagline { font-weight: 600; letter-spacing: .04em; }
.mode { background: color-mix(in oklab, var(--surface) 88%, transparent); border-color: color-mix(in oklab, var(--line) 60%, transparent); }
.mode b { font-family: var(--font-display); font-size: .92rem; letter-spacing: .04em; }
.arcade-home { gap: var(--s-4); }
.modes { grid-template-columns: 1fr 1fr; }
.mode { min-height: 52px; padding: 9px 12px; } .mode span { font-size: .74rem; }
.mode[data-mode="zen"] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
.seg-line [role="radio"] { font-family: var(--font-display); font-size: .8rem; }
.cta { font-family: var(--font-display); font-weight: 700; }
/* play */
.play .stage { padding: calc(var(--hud-h) + 10px + env(safe-area-inset-top)) 6px calc(100px + env(safe-area-inset-bottom)); }
@media (pointer: fine) { .play .stage { padding-bottom: 12px; } }
:root[data-touch="swipe"] .play .stage { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.play .stage-canvas { border-radius: 10px; box-shadow: 0 0 0 1px var(--glass), 0 0 60px rgba(60,120,255,.14); }
.hud-pill { font-family: var(--font-display); font-weight: 500; font-size: .86rem; padding: 0 10px; gap: 5px; }
.hud-pill small { font-size: .62rem; }
#hud-time-pill[data-urgent="1"] { color: var(--bad); box-shadow: 0 0 14px rgba(255,77,109,.5); }
.controls-row { position: relative; display: none; align-items: flex-end; justify-content: space-between; min-height: 58px; }
@media (pointer: coarse) { :root[data-touch="buttons"] .controls-row { display: flex; } }
#tc { --tc: 56px; width: 100%; }
#tc [data-action="a"], #tc [data-action="b"] { font-size: 1.6rem; }
#tc [data-action="b"] { color: var(--accent); }
.hold-btn { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: color-mix(in oklab, var(--surface) 70%, transparent); border: 2px solid color-mix(in oklab, var(--ink) 25%, transparent); color: var(--ink); font-family: var(--font-display); font-size: .58rem; letter-spacing: .06em; display: grid; place-items: center; backdrop-filter: blur(6px); touch-action: none; }
.hold-btn.on { transform: translateX(-50%) scale(.92); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#ready { pointer-events: none; backdrop-filter: none; background: color-mix(in oklab, var(--bg) 35%, transparent); }
.overlay h2 { color: var(--accent); text-shadow: 0 0 20px color-mix(in oklab, var(--accent) 60%, transparent); }
.overlay p { color: var(--ink-2); font-weight: 600; }
.result-verdict { text-align: center; color: var(--ink-2); font-weight: 600; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--s-2); }
.result-actions .btn-primary { grid-column: 1 / -1; }
.sheet-title, .score-total { font-family: var(--font-display); }
@container screen (min-width: 640px) { .arcade-home .modes { grid-template-columns: 1fr 1fr; } }