/* Neon Hopper: a night city crossing. Deep indigo sky, cyan lane markings, magenta and amber headlights, a lime frog. */
:root {
  --bg: #070a1f; --surface: #10143a; --surface-2: #1a1f52; --ink: #eef0ff; --ink-2: #8f97cf; --line: #262c6e;
  --accent: #a3e635; --accent-ink: #0b1400; --ok: #a3e635; --warn: #fbbf24; --bad: #ff4d6d; --info: #22d3ee;
  --frog: #a3e635; --cyan: #22d3ee; --magenta: #f472b6; --amber: #fbbf24; --water: #0b2a5c; --asphalt: #12152e; --log: #8a5a2b;
  --font-display: "Bungee", "Nunito Sans", system-ui, sans-serif; --font-ui: "Nunito Sans", system-ui, sans-serif;
}
:root[data-theme="light"] { --bg: #eef1ff; --surface: #ffffff; --surface-2: #dde3ff; --ink: #10143a; --ink-2: #4b5290; --line: #c4cbf5; --accent: #4d7c0f; --accent-ink: #ffffff; --ok: #4d7c0f; --warn: #b45309; --bad: #be123c; --info: #0e7490; --frog: #65a30d; --cyan: #0891b2; --magenta: #db2777; --amber: #d97706; --water: #bfdbfe; --asphalt: #cbd5e1; }
body { background: radial-gradient(ellipse 90% 55% at 50% -5%, #1b1f66 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 50% 105%, #2a0f3f 0%, transparent 60%), var(--bg); background-attachment: fixed; font-family: var(--font-ui); }
:root[data-theme="light"] body { background: radial-gradient(ellipse 90% 55% at 50% -5%, #dde3ff 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 50% 105%, #ffe4f1 0%, transparent 60%), var(--bg); background-attachment: fixed; }
/* home */
.arcade-home { gap: var(--s-4); }
.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.2rem); line-height: 1.02; letter-spacing: .02em; color: var(--frog); text-shadow: 0 0 10px rgba(163,230,53,.8), 0 0 30px rgba(163,230,53,.4), 0 0 70px rgba(34,211,238,.45); }
:root[data-theme="light"] .title { color: #4d7c0f; text-shadow: 0 0 12px rgba(77,124,15,.25); }
.tagline { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; }
.modes { grid-template-columns: 1fr 1fr; }
.mode { min-height: 58px; padding: 9px 12px; background: color-mix(in oklab, var(--surface) 85%, transparent); border-color: color-mix(in oklab, var(--line) 70%, transparent); backdrop-filter: blur(6px); }
.mode b { font-family: var(--font-display); font-weight: 400; font-size: .82rem; letter-spacing: .02em; line-height: 1.3; } .mode span { font-size: .76rem; }
.mode[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgba(34,211,238,.45); }
.seg-line [role="radio"] { font-family: var(--font-ui); font-weight: 800; font-size: .9rem; }
.cta { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; box-shadow: 0 0 24px rgba(163,230,53,.4); }
.btn { font-family: var(--font-ui); font-weight: 700; }
.best-line { font-weight: 600; }
/* play */
.play { background: radial-gradient(ellipse 100% 45% at 50% 0%, #161a58 0%, transparent 70%), var(--bg); }
:root[data-theme="light"] .play { background: radial-gradient(ellipse 100% 45% at 50% 0%, #dde3ff 0%, transparent 70%), var(--bg); }
.play .stage { padding: calc(var(--hud-h) + 18px + env(safe-area-inset-top)) 6px calc(14px + env(safe-area-inset-bottom)); }
@media (pointer: coarse) { :root[data-touch="buttons"] .play .stage { padding-bottom: calc(184px + env(safe-area-inset-bottom)); } }
.play .stage-canvas { border-radius: 8px; box-shadow: 0 0 0 1px rgba(34,211,238,.2), 0 0 50px rgba(34,211,238,.16), 0 0 120px rgba(163,230,53,.06); }
:root[data-theme="light"] .play .stage-canvas { box-shadow: 0 0 0 1px rgba(8,145,178,.25), 0 8px 30px rgba(16,20,58,.15); }
.play .hud { gap: 5px; padding-left: 6px; padding-right: 6px; }
.play .hud .btn-icon { flex: none; }
.hud-pill { font-family: var(--font-display); font-weight: 400; font-size: .72rem; padding: 0 8px; gap: 5px; height: 32px; white-space: nowrap; background: color-mix(in oklab, #070a1f 75%, transparent); }
:root[data-theme="light"] .hud-pill { background: color-mix(in oklab, #ffffff 85%, transparent); }
.hud-pill small { font-family: var(--font-ui); font-size: .6rem; letter-spacing: .12em; font-weight: 800; }
.hud-score { padding: 0 10px; }
.hud-lives { padding: 0 7px; } #hud-lives { display: inline-flex; gap: 3px; align-items: center; min-width: 10px; min-height: 10px; }
#hud-lives i { display: inline-block; width: 11px; height: 9px; border-radius: 50% 50% 40% 40%; background: var(--frog); box-shadow: 0 0 8px rgba(163,230,53,.7); position: relative; }
#hud-lives i::before, #hud-lives i::after { content: ""; position: absolute; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: inset 1px 0 0 1px #0b1400; } #hud-lives i::before { left: 1px; } #hud-lives i::after { right: 1px; }
#hud-lives i.inf { clip-path: none; width: auto; height: auto; background: none; box-shadow: none; font-style: normal; color: var(--frog); } #hud-lives i.inf::before, #hud-lives i.inf::after { display: none; }
#hud-lives-pill[data-danger="1"] { box-shadow: 0 0 0 1px var(--bad), 0 0 14px rgba(255,77,109,.55); animation: danger-pulse .9s ease-in-out infinite; }
@keyframes danger-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--bad), 0 0 8px rgba(255,77,109,.3); } 50% { box-shadow: 0 0 0 2px var(--bad), 0 0 20px rgba(255,77,109,.8); } }
:root[data-motion="reduced"] #hud-lives-pill[data-danger="1"] { animation: none; }
.hud-bays { padding: 0 8px; } #hud-bays { display: inline-flex; gap: 3px; align-items: center; min-height: 12px; }
#hud-bays i { display: inline-block; width: 9px; height: 11px; border-radius: 5px 5px 2px 2px; background: color-mix(in oklab, var(--cyan) 25%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cyan) 60%, transparent); }
#hud-bays i.on { background: var(--frog); box-shadow: 0 0 8px rgba(163,230,53,.8); }
.timer-bar { position: absolute; z-index: 3; left: 14px; right: 14px; top: calc(var(--hud-h) + 6px + max(8px, env(safe-area-inset-top))); height: 5px; border-radius: 4px; background: color-mix(in oklab, var(--cyan) 18%, transparent); overflow: hidden; pointer-events: none; }
.timer-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--frog), var(--cyan)); box-shadow: 0 0 10px rgba(34,211,238,.9); transform-origin: left; transition: none; }
.timer-bar[data-warn="1"] i { background: linear-gradient(90deg, var(--bad), var(--amber)); box-shadow: 0 0 12px rgba(255,77,109,.9); animation: timer-pulse .5s ease-in-out infinite; }
@keyframes timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
:root[data-motion="reduced"] .timer-bar[data-warn="1"] i { animation: none; }
.controls-row { display: flex; align-items: flex-end; justify-content: center; }
:root[data-touch="swipe"] #dpad { display: none !important; }
#dpad[data-layout="dpad"] { --tc: 52px; }
@media (pointer: coarse) { :root[data-touch="buttons"] #dpad[data-layout="dpad"] { display: grid; } }
.tc-btn { background: color-mix(in oklab, var(--surface) 78%, transparent); border-color: color-mix(in oklab, var(--cyan) 55%, transparent); color: var(--cyan); }
.tc-btn.on { background: var(--frog); border-color: var(--frog); color: var(--accent-ink); }
#ready { pointer-events: none; backdrop-filter: none; background: transparent; padding: inherit; place-items: center; }
#ready .stack { gap: 6px; padding: 10px 14px; border-radius: 12px; background: color-mix(in oklab, var(--bg) 82%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 45%, transparent), 0 0 30px rgba(34,211,238,.25); max-width: 86%; }
.overlay h2 { font-family: var(--font-display); font-weight: 400; color: var(--frog); text-shadow: 0 0 12px rgba(163,230,53,.8), 0 0 30px rgba(163,230,53,.4); }
#ready h2 { font-size: clamp(1rem, 5vw, 1.4rem); letter-spacing: .02em; line-height: 1.3; }
#ready p { font-size: .84rem; color: var(--ink); font-weight: 600; }
:root[data-theme="light"] .overlay h2 { color: #4d7c0f; text-shadow: none; }
#paused { background: color-mix(in oklab, var(--bg) 75%, transparent); backdrop-filter: blur(4px); }
#paused h2 { font-size: clamp(1.3rem, 6vw, 1.9rem); }
.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; font-size: 1.05rem; line-height: 1.4; }
.score-total { font-family: var(--font-display); font-weight: 400; color: var(--frog); text-shadow: 0 0 18px rgba(163,230,53,.5); }
:root[data-theme="light"] .score-total { color: #4d7c0f; text-shadow: none; }
@container screen (min-width: 640px) { .arcade-home .modes { grid-template-columns: 1fr 1fr; } }