:root {
  --bg: #1a0b2e; --surface: #2a1445; --surface-2: #3b1f5f; --ink: #fff3fb; --ink-2: #cdaee3; --line: #4f2d7c;
  --accent: #ff6b9d; --accent-ink: #2a0a1e; --ok: #5be27a; --warn: #ffd23f; --bad: #ff4d6d; --info: #b57bff;
  --candy-pink: #ff4d6d; --candy-lemon: #ffd23f; --candy-mint: #5be27a; --candy-sky: #4aa8ff; --candy-grape: #b57bff; --candy-aqua: #38e8e0;
  --font-display: "Baloo 2", "Quicksand", system-ui, sans-serif; --font-ui: "Quicksand", system-ui, sans-serif;
}
:root[data-theme="light"] { --bg: #fff4fa; --surface: #ffffff; --surface-2: #f6e3f2; --ink: #2a1040; --ink-2: #7a5591; --line: #e6cde0; --accent: #e0357a; --accent-ink: #ffffff; --ok: #1f9d5f; --warn: #b97400; --bad: #d1246d; --info: #7c3aed; }
body { background: radial-gradient(ellipse at 50% 20%, #3a1a5e 0%, #1a0b2e 55%, #0f0620 100%); background-attachment: fixed; font-family: var(--font-ui); }
:root[data-theme="light"] body { background: radial-gradient(ellipse at 50% 20%, #ffffff 0%, #fff0f8 55%, #f1def0 100%); background-attachment: fixed; }
.logo { display: flex; justify-content: center; margin-bottom: -10px; } .logo canvas { width: 224px; height: 77px; }
.title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.8rem, 14vw, 5rem); line-height: .88; letter-spacing: .01em; text-transform: none; color: #fff; text-shadow: 0 3px 0 #b8103a, 0 0 18px rgba(255,107,157,.75), 0 0 48px rgba(181,123,255,.45); }
:root[data-theme="light"] .title { color: #e0357a; text-shadow: 0 3px 0 #fbc6dc, 0 0 16px rgba(224,53,122,.25); }
.tagline { font-weight: 700; letter-spacing: .04em; font-size: .86rem; }
.arcade-home { gap: var(--s-4); }
.modes { grid-template-columns: 1fr 1fr; }
.mode { min-height: 56px; padding: 9px 12px; border-radius: 16px; background: color-mix(in oklab, var(--surface) 85%, transparent); border-color: color-mix(in oklab, var(--line) 70%, transparent); backdrop-filter: blur(6px); } .mode span { font-size: .74rem; font-weight: 600; }
.mode b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; }
.seg-line [role="radio"] { font-family: var(--font-ui); font-weight: 700; font-size: .86rem; }
.cta { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; text-transform: none; border-radius: 18px; }
.btn-continue { grid-column: 1 / -1; background: color-mix(in oklab, var(--surface-2) 75%, var(--candy-grape) 25%); font-weight: 700; }
.best-line { font-weight: 600; }
/* play */
.play { background: radial-gradient(ellipse at 50% 30%, #3a1a5e 0%, #1a0b2e 60%, #0f0620 100%); }
:root[data-theme="light"] .play { background: radial-gradient(ellipse at 50% 30%, #fff8fc 0%, #f6e3f2 60%, #e9d3ea 100%); }
.play .stage { padding: calc(var(--hud-h) + 14px + 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: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 40px rgba(0,0,0,.45), 0 0 90px rgba(255,107,157,.16); }
:root[data-theme="light"] .play .stage-canvas { box-shadow: 0 0 0 1px rgba(90,40,110,.15), 0 10px 30px rgba(90,40,110,.18); }
.hud-pill { font-family: var(--font-display); font-weight: 800; font-size: .95rem; padding: 0 11px; gap: 5px; background: color-mix(in oklab, #1a0b2e 70%, transparent); border: 1px solid rgba(255,255,255,.1); }
:root[data-theme="light"] .hud-pill { background: color-mix(in oklab, #ffffff 80%, transparent); border-color: rgba(90,40,110,.15); }
.hud-pill small { font-family: var(--font-ui); font-size: .6rem; font-weight: 700; }
#hud-shots-pill[data-danger="1"] { color: var(--bad); box-shadow: 0 0 0 1px var(--bad), 0 0 16px rgba(255,77,109,.6); animation: shots-pulse .9s ease-in-out infinite; }
@keyframes shots-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--bad), 0 0 10px rgba(255,77,109,.35); } 50% { box-shadow: 0 0 0 2px var(--bad), 0 0 22px rgba(255,77,109,.85); } }
:root[data-motion="reduced"] #hud-shots-pill[data-danger="1"] { animation: none; }
.hud-fx { position: absolute; left: 0; right: 0; top: calc(var(--hud-h) + max(8px, env(safe-area-inset-top))); z-index: 3; display: flex; justify-content: center; gap: 6px; padding: 0 10px; pointer-events: none; min-height: 0; }
.fx-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; border-radius: 999px; font-family: var(--font-display); font-weight: 800; font-size: .68rem; letter-spacing: .06em; color: #1a0b2e; background: var(--c, var(--candy-aqua)); box-shadow: 0 0 14px color-mix(in oklab, var(--c, var(--candy-aqua)) 60%, transparent); animation: fade var(--t-base); }
.fx-pill b { font-variant-numeric: tabular-nums; font-weight: 800; }
.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"] { font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em; background: color-mix(in oklab, var(--candy-pink) 45%, var(--surface)); border-color: var(--candy-pink); width: 68px; height: 68px; }
#tc [data-action="b"] { font-family: var(--font-display); font-size: .74rem; letter-spacing: .04em; background: color-mix(in oklab, var(--candy-grape) 40%, var(--surface)); border-color: var(--candy-grape); }
#ready { pointer-events: none; backdrop-filter: none; background: transparent; align-content: end; padding-bottom: 150px; }
@media (pointer: coarse) { :root[data-touch="buttons"] #ready { padding-bottom: 236px; } }
.overlay h2 { font-family: var(--font-display); font-weight: 800; text-transform: none; letter-spacing: 0; color: #fff; text-shadow: 0 2px 0 rgba(184,16,58,.8), 0 0 14px rgba(255,107,157,.8), 0 0 30px rgba(181,123,255,.5); }
#ready h2 { font-size: clamp(1.4rem, 7vw, 2.1rem); }
#ready p { font-size: .84rem; }
.overlay p { color: var(--ink); font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
:root[data-theme="light"] .overlay h2 { color: #2a1040; text-shadow: 0 2px 0 rgba(255,255,255,.8); } :root[data-theme="light"] .overlay p { text-shadow: none; }
#paused { background: color-mix(in oklab, #1a0b2e 72%, transparent); backdrop-filter: blur(5px); }
:root[data-theme="light"] #paused { background: rgba(255,244,250,.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: 800; letter-spacing: 0; text-transform: none; }
.score-total { font-family: var(--font-display); font-weight: 800; color: var(--accent); text-shadow: 0 0 18px rgba(255,107,157,.5); }
:root[data-theme="light"] .score-total { text-shadow: none; }
@container screen (min-width: 640px) { .arcade-home .modes { grid-template-columns: 1fr 1fr; } }