:root {
  --bg: #050914; --surface: #0b1230; --surface-2: #131c44; --ink: #e8f4ff; --ink-2: #8ea4c8; --line: #22306a;
  --accent: #22d3ee; --accent-ink: #03111a; --ok: #a3e635; --warn: #facc15; --bad: #fb7185; --info: #c084fc;
  --font-display: "Michroma", system-ui, sans-serif; --font-ui: "Sora", system-ui, sans-serif;
}
:root[data-theme="light"] { --bg: #dfe8fb; --surface: #ffffff; --surface-2: #e2eaf7; --ink: #0b1230; --ink-2: #4d5f88; --line: #c7d3ea; --accent: #0891b2; --accent-ink: #ffffff; --ok: #4d7c0f; --warn: #a16207; --bad: #be123c; --info: #7c3aed; }
body { background: radial-gradient(ellipse 120% 70% at 30% -10%, #10173f 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 90% 90%, #0e2a3a 0%, transparent 60%), #050914; background-attachment: fixed; font-family: var(--font-ui); }
:root[data-theme="light"] body { background: radial-gradient(ellipse 120% 70% at 30% -10%, #dbe4ff 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 90% 90%, #d6f2fb 0%, transparent 60%), #dfe8fb; background-attachment: fixed; }
.logo { display: flex; justify-content: center; margin-bottom: -6px; } .logo canvas { width: 224px; height: 77px; }
.title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 10vw, 3.4rem); line-height: 1; letter-spacing: .02em; color: #fff; text-shadow: 0 0 10px rgba(34,211,238,.9), 0 0 32px rgba(34,211,238,.5), 0 0 70px rgba(244,114,182,.3); }
:root[data-theme="light"] .title { color: #0891b2; text-shadow: 0 0 12px rgba(8,145,178,.3); }
.tagline { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .76rem; }
.mode { background: color-mix(in oklab, var(--surface) 82%, transparent); border-color: color-mix(in oklab, var(--line) 70%, transparent); backdrop-filter: blur(6px); }
.mode b { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; }
.arcade-home { gap: var(--s-4); }
.modes { grid-template-columns: 1fr 1fr; }
.mode { min-height: 56px; padding: 9px 12px; } .mode span { font-size: .74rem; }
.seg-line [role="radio"] { font-family: var(--font-ui); font-weight: 700; font-size: .88rem; letter-spacing: .03em; }
.cta, .btn { font-family: var(--font-ui); font-weight: 700; letter-spacing: .02em; }
.btn-continue { grid-column: 1 / -1; background: color-mix(in oklab, var(--surface-2) 75%, var(--accent) 25%); font-weight: 700; }
.best-line { font-weight: 600; }
/* play */
.play { background: radial-gradient(ellipse 100% 40% at 50% 0%, #10193f 0%, transparent 70%), #050914; }
:root[data-theme="light"] .play { background: radial-gradient(ellipse 100% 40% at 50% 0%, #dbe4ff 0%, transparent 70%), #dfe8fb; }
.play .stage { padding: calc(var(--hud-h) + 46px + env(safe-area-inset-top)) 6px calc(10px + env(safe-area-inset-bottom)); }
.play .stage-canvas { border-radius: 10px; box-shadow: 0 0 0 1px rgba(34,211,238,.16), 0 0 60px rgba(34,211,238,.1), 0 0 120px rgba(244,114,182,.06); cursor: crosshair; }
.hud-pill { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; padding: 0 10px; gap: 5px; background: color-mix(in oklab, #060b26 72%, transparent); }
:root[data-theme="light"] .hud-pill { background: color-mix(in oklab, #ffffff 78%, transparent); }
.hud-pill small { font-size: .58rem; letter-spacing: .12em; }
.skyfall-status { position: absolute; left: 0; right: 0; top: calc(var(--hud-h) + max(6px, env(safe-area-inset-top))); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 10px; pointer-events: none; }
.cities-row, .ammo-row { display: flex; gap: 4px; align-items: center; justify-content: center; height: 18px; }
.city-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--info); box-shadow: 0 0 6px color-mix(in oklab, var(--info) 70%, transparent); }
.city-dot[data-alive="false"] { background: color-mix(in oklab, var(--ink-2) 40%, transparent); box-shadow: none; opacity: .5; }
.ammo-pill { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .68rem; min-width: 16px; text-align: center; padding: 1px 4px; border-radius: 6px; color: var(--accent-ink); background: var(--accent); }
.ammo-pill[data-silo] { background: var(--accent); }
#ready { pointer-events: none; backdrop-filter: none; background: transparent; align-content: center; padding-top: 20%; }
.overlay h2 { font-family: var(--font-display); font-weight: 400; color: #fff; text-shadow: 0 0 12px rgba(34,211,238,.9), 0 0 30px rgba(34,211,238,.45); }
#ready h2 { font-size: clamp(1.15rem, 6vw, 1.8rem); letter-spacing: .04em; }
#ready p { font-size: .88rem; }
.overlay p { color: var(--ink); font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
:root[data-theme="light"] .overlay h2 { color: #0b1230; text-shadow: none; } :root[data-theme="light"] .overlay p { text-shadow: none; }
#paused { background: color-mix(in oklab, #050914 72%, transparent); backdrop-filter: blur(4px); }
:root[data-theme="light"] #paused { background: rgba(223,232,251,.8); }
.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 { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; font-size: 1.1rem; }
.score-total { font-family: var(--font-display); font-weight: 400; color: var(--accent); text-shadow: 0 0 18px rgba(34,211,238,.5); }
:root[data-theme="light"] .score-total { color: #0891b2; text-shadow: none; }
@container screen (min-width: 640px) { .arcade-home .modes { grid-template-columns: 1fr 1fr; } }