:root {
  --bg: #03061a; --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;
  --cyan: #22d3ee; --magenta: #f472b6; --orange: #fb923c; --violet: #c084fc; --lime: #a3e635;
  --font-display: "Audiowide", "Rajdhani", system-ui, sans-serif; --font-ui: "Rajdhani", system-ui, sans-serif;
}
:root[data-theme="light"] { --bg: #eef3fb; --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 70% -10%, #1b1650 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 10% 90%, #0b2a4a 0%, transparent 60%), #03061a; background-attachment: fixed; font-family: var(--font-ui); }
:root[data-theme="light"] body { background: radial-gradient(ellipse 120% 70% at 70% -10%, #dbe4ff 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 10% 90%, #d6f2fb 0%, transparent 60%), #eef3fb; 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(2.2rem, 11vw, 4rem); line-height: 1; letter-spacing: .04em; color: #fff; text-shadow: 0 0 10px rgba(34,211,238,.9), 0 0 32px rgba(34,211,238,.55), 0 0 70px rgba(244,114,182,.35); }
:root[data-theme="light"] .title { color: #0891b2; text-shadow: 0 0 12px rgba(8,145,178,.3); }
.tagline { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.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: 1.02rem; letter-spacing: .06em; 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: .76rem; }
.seg-line [role="radio"] { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; letter-spacing: .04em; }
.cta { font-family: var(--font-ui); font-weight: 700; }
.btn { font-family: var(--font-ui); font-weight: 700; letter-spacing: .03em; }
.btn-continue { grid-column: 1 / -1; background: color-mix(in oklab, var(--surface-2) 75%, var(--magenta) 25%); font-weight: 700; }
.best-line { font-weight: 600; }
/* play */
.play { background: radial-gradient(ellipse 100% 40% at 50% 0%, #141a4a 0%, transparent 70%), #03061a; }
:root[data-theme="light"] .play { background: radial-gradient(ellipse 100% 40% at 50% 0%, #dbe4ff 0%, transparent 70%), #eef3fb; }
.play .stage { padding: calc(var(--hud-h) + 8px + 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 rgba(34,211,238,.18), 0 0 60px rgba(34,211,238,.12), 0 0 120px rgba(244,114,182,.08); }
.hud-pill { font-family: var(--font-ui); font-weight: 700; font-size: .92rem; 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: .6rem; letter-spacing: .14em; }
#hud-lives-pill[data-danger="1"] { color: var(--bad); box-shadow: 0 0 0 1px var(--bad), 0 0 16px rgba(251,113,133,.6); animation: danger-pulse .9s ease-in-out infinite; }
@keyframes danger-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--bad), 0 0 10px rgba(251,113,133,.35); } 50% { box-shadow: 0 0 0 2px var(--bad), 0 0 22px rgba(251,113,133,.85); } }
:root[data-motion="reduced"] #hud-lives-pill[data-danger="1"] { animation: none; }
.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-ui); font-size: .82rem; letter-spacing: .08em; background: color-mix(in oklab, var(--magenta) 45%, var(--surface)); border-color: var(--magenta); width: 68px; height: 68px; }
#tc [data-action="b"] { display: none; }
#ready { pointer-events: none; backdrop-filter: none; background: transparent; align-content: center; padding-top: 22%; }
.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,.5); }
#ready h2 { font-size: clamp(1.3rem, 6.5vw, 2rem); letter-spacing: .06em; }
#ready p { font-size: .9rem; }
.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, #03061a 72%, transparent); backdrop-filter: blur(4px); }
:root[data-theme="light"] #paused { background: rgba(238,243,251,.78); }
.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: .04em; text-transform: uppercase; font-size: 1.2rem; }
.score-total { font-family: var(--font-display); font-weight: 400; color: var(--cyan); 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; } }

/* ---- glass HUD (shared/styles/glass-hud.css) themed for Star Defender: deep-space glass, cyan rim, pink glow ---- */
.play { --g-tint: #0a1240; --g-edge: #67e8f9; --g-glow: #22d3ee; --g-lab: #8fb3d9; --g-font: var(--font-display); --g-lab-font: var(--font-ui); }
.g-tr { --g-glow: #f472b6; }
.hud-hi .g-val { color: #fde68a; }
:root[data-theme="light"] .hud-hi .g-val { color: #a16207; }
.st-ships { display: flex; gap: .25em; }
.st-ships svg { width: 1.1em; height: 1.1em; display: block; fill: none; stroke: #22d3ee; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(34,211,238,.8)); }
:root[data-theme="light"] .st-ships svg { stroke: #0e7490; filter: none; }
.st-more { font-size: .75em; font-weight: 700; color: var(--g-lab); }
.st-more:empty { display: none; }
.st-lives { align-items: center; min-height: 1.2em; }
.st-lives[data-danger="1"] .st-ships svg { stroke: var(--bad); filter: drop-shadow(0 0 4px rgba(251,113,133,.9)); animation: st-pulse .9s ease-in-out infinite; }
@keyframes st-pulse { 50% { opacity: .35; } }
.st-gun { align-items: center; }
.st-ammo { display: flex; gap: .22em; }
.st-ammo i { width: .38em; height: .95em; border-radius: 2px; background: rgba(34,211,238,.18); box-shadow: inset 0 0 0 1px rgba(34,211,238,.35); }
.st-ammo i[data-on="1"] { background: linear-gradient(#e0fbff, #22d3ee); box-shadow: 0 0 6px rgba(34,211,238,.8); }
.st-ammo[data-rapid="1"] i[data-on="1"] { background: linear-gradient(#fff8d6, #facc15); box-shadow: 0 0 6px rgba(250,204,21,.8); }
.st-ammo[data-spread="1"] { padding: 0 2px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(34,211,238,.6); }
.st-power .fx-pill { position: relative; display: inline-flex; align-items: center; height: 1.6em; padding: 0 .6em; border-radius: .5em; font-size: .66em; font-weight: 800; letter-spacing: .1em; overflow: hidden;
  color: var(--c); background: color-mix(in oklab, var(--c) 16%, color-mix(in oklab, #0a1240 50%, transparent)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent), 0 0 12px color-mix(in oklab, var(--c) 30%, transparent); }
.st-power .fx-pill::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--k, 1) * 100%); background: var(--c); box-shadow: 0 0 6px var(--c); }
.st-power .fx-pill[data-low="1"] { animation: st-pulse .5s ease-in-out infinite; }
.st-power { top: calc(var(--g-gap) + 2.2em); }
.st-combo { font-family: var(--font-ui); }
.st-combo b { font-size: .85em; color: var(--g-ink); min-width: 2.2em; text-align: right; }
.st-combo b[data-hot="1"] { color: #facc15; text-shadow: 0 0 8px rgba(250,204,21,.7); }
.st-acc { font-size: .66em; color: var(--g-lab); }
.st-progress[data-boss="1"] i { background: linear-gradient(90deg, #c084fc, #f472b6); }
@media (max-width: 350px) { .st-acc { display: none; } }
:root[data-motion="reduced"] .st-lives[data-danger="1"] .st-ships svg, :root[data-motion="reduced"] .st-power .fx-pill[data-low="1"] { animation: none; }