:root {
  color-scheme: dark;
  --bg: #030611;
  --panel: rgba(7, 13, 31, 0.82);
  --line: rgba(118, 210, 255, 0.28);
  --text: #edf9ff;
  --muted: #9db6c7;
  --cyan: #54dcff;
  --blue: #4c72ff;
  --orange: #ffad42;
  --danger: #ff5f6d;
  --ok: #62f7af;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
body { user-select: none; }
button, select, input { font: inherit; }
button { border: 1px solid rgba(112, 205, 255, .32); color: var(--text); background: linear-gradient(180deg, rgba(20, 42, 75, .92), rgba(7, 18, 39, .95)); border-radius: 10px; min-height: 44px; padding: 10px 16px; cursor: pointer; letter-spacing: .03em; transition: transform .12s ease, border-color .12s ease, filter .12s ease; }
button:hover, button:focus-visible { border-color: var(--cyan); filter: brightness(1.15); outline: none; }
button:active { transform: translateY(1px) scale(.99); }
button.primary { background: linear-gradient(135deg, #1872c9, #1d44c9 62%, #582fbd); border-color: rgba(119, 224, 255, .82); box-shadow: 0 0 28px rgba(48, 164, 255, .25); font-weight: 800; }
button.icon-button { width: 42px; min-height: 42px; padding: 0; border-radius: 50%; font-size: 28px; }
#app, #glCanvas, #hudCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#glCanvas { background: radial-gradient(circle at 50% 25%, #0c1b3a, #02040d 70%); }
#hudCanvas { pointer-events: none; z-index: 3; }
.screen { position: absolute; inset: 0; z-index: 10; }
.hidden { display: none !important; }
.active { display: flex; }
.boot-screen { align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(circle at 50% 40%, rgba(17, 70, 119, .65), rgba(2, 5, 15, .98) 65%); }
.boot-mark { width: 94px; height: 94px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 28px 4px 28px 4px; color: var(--cyan); font-size: 46px; font-weight: 900; box-shadow: inset 0 0 28px rgba(71, 218, 255, .15), 0 0 45px rgba(71, 218, 255, .28); animation: bootPulse 1.8s ease-in-out infinite; }
.boot-title { margin-top: 22px; font-size: clamp(24px, 4vw, 50px); font-weight: 900; letter-spacing: .18em; }
.boot-subtitle { color: var(--cyan); letter-spacing: .62em; margin-left: .62em; font-size: clamp(11px, 1.4vw, 16px); }
.boot-line { width: min(460px, 70vw); margin-top: 32px; border-top: 1px solid rgba(85, 220, 255, .38); text-align: center; padding-top: 12px; color: var(--muted); font-size: 13px; }
@keyframes bootPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.04); filter: brightness(1.35); } }
.menu-screen { display: grid; grid-template-columns: minmax(360px, 620px) 280px; gap: 22px; align-content: center; justify-content: center; padding: 5vh 5vw; background: linear-gradient(90deg, rgba(1,4,12,.68), rgba(1,4,12,.12) 54%, rgba(1,4,12,.62)); }
.glass-panel { background: linear-gradient(145deg, rgba(9, 20, 44, .9), rgba(4, 9, 24, .77)); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 0 50px rgba(53, 143, 210, .06); backdrop-filter: blur(12px); border-radius: 18px; }
.menu-panel { padding: clamp(24px, 4vw, 54px); }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(38px, 5vw, 76px); line-height: .92; letter-spacing: -.05em; margin: 14px 0 4px; }
h1 span { color: var(--cyan); text-shadow: 0 0 24px rgba(83, 221, 255, .55); }
.subtitle { color: #c1eaff; letter-spacing: .5em; font-weight: 700; font-size: clamp(12px, 1.2vw, 17px); }
.menu-copy { max-width: 52ch; color: var(--muted); line-height: 1.55; margin: 25px 0; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-actions .primary { grid-column: 1 / -1; min-height: 56px; font-size: 17px; }
.quick-info { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-info div { border-top: 1px solid rgba(92, 200, 255, .2); padding-top: 10px; display: flex; flex-direction: column; }
.quick-info b { font-size: 13px; }
.quick-info span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.status-panel { align-self: stretch; padding: 24px; display: flex; flex-direction: column; }
.panel-title { font-size: 12px; letter-spacing: .2em; font-weight: 800; color: var(--cyan); margin-bottom: 12px; }
.panel-title.small { margin-top: 24px; }
.gamepad-list { display: grid; gap: 8px; }
.pad-row { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; padding: 8px 9px; border: 1px solid rgba(107, 185, 229, .14); border-radius: 8px; }
.pad-dot { width: 8px; height: 8px; border-radius: 50%; background: #445; box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
.pad-row.connected .pad-dot { background: var(--ok); box-shadow: 0 0 10px rgba(99, 247, 175, .7); }
.best-score { font-size: 38px; font-variant-numeric: tabular-nums; font-weight: 900; }
.tip { margin-top: auto; color: var(--muted); font-size: 11px; line-height: 1.5; padding-top: 20px; border-top: 1px solid rgba(100, 190, 230, .15); }
.modal-screen { align-items: center; justify-content: center; padding: 24px; background: rgba(1, 4, 12, .72); backdrop-filter: blur(5px); }
.modal { width: min(560px, 96vw); max-height: 92vh; overflow: auto; padding: 28px; }
.modal.wide { width: min(980px, 96vw); }
.modal.compact { width: min(420px, 94vw); text-align: center; }
.modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.modal h2 { font-size: clamp(28px, 4vw, 46px); margin: 4px 0 0; }
.modal footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.settings-grid label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; padding: 12px; border: 1px solid rgba(99, 186, 233, .13); border-radius: 10px; background: rgba(2, 8, 20, .5); }
.settings-grid select, .settings-grid input[type=range] { width: 100%; }
select { min-height: 38px; border-radius: 7px; border: 1px solid rgba(117, 202, 246, .24); background: #08142a; color: var(--text); padding: 6px 8px; }
input[type=range] { accent-color: var(--cyan); }
.settings-grid output { color: var(--cyan); font-variant-numeric: tabular-nums; }
.settings-grid label.toggle { flex-direction: row; align-items: center; min-height: 52px; color: var(--text); }
.toggle input { width: 20px; height: 20px; accent-color: var(--cyan); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.help-grid article { padding: 18px; border: 1px solid rgba(96, 192, 238, .15); border-radius: 12px; background: rgba(1, 7, 18, .48); }
.help-grid h3 { color: #dff7ff; font-size: 15px; letter-spacing: .04em; }
dl { display: grid; grid-template-columns: minmax(110px, .8fr) 1.4fr; gap: 8px 12px; margin: 0; font-size: 12px; }
dt { color: var(--cyan); font-weight: 700; } dd { margin: 0; color: var(--muted); }
.help-grid p { color: var(--muted); line-height: 1.55; font-size: 12px; }
.weapon-help-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; margin: 8px 0; font-size: 12px; }
.weapon-help-icon { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.weapon-help-row b { display: block; } .weapon-help-row span { color: var(--muted); }
.score-list { display: grid; gap: 8px; min-height: 180px; }
.score-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; padding: 12px; border-bottom: 1px solid rgba(105, 196, 237, .15); align-items: center; }
.score-row .rank { color: var(--cyan); font-weight: 900; } .score-row small { color: var(--muted); }
.vertical-actions { display: grid; gap: 10px; margin-top: 24px; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.result-card { padding: 16px; border-radius: 12px; border: 1px solid rgba(100, 197, 240, .18); background: rgba(2, 8, 19, .58); }
.result-card b { display: block; font-size: 26px; margin-bottom: 4px; } .result-card span { color: var(--muted); font-size: 11px; }
.wave-banner { position: absolute; z-index: 6; top: 16%; left: 50%; transform: translateX(-50%); padding: 14px 24px; min-width: 280px; text-align: center; border: 1px solid rgba(92, 222, 255, .55); border-radius: 10px; background: rgba(3, 13, 32, .78); box-shadow: 0 0 35px rgba(57, 198, 255, .2); font-size: clamp(20px, 3vw, 38px); font-weight: 900; letter-spacing: .12em; pointer-events: none; }
.toast-stack { position: absolute; z-index: 8; right: 18px; top: 104px; display: grid; gap: 8px; width: min(340px, 80vw); pointer-events: none; }
.toast { padding: 11px 14px; border-radius: 9px; border: 1px solid rgba(97, 210, 255, .35); background: rgba(4, 13, 31, .9); box-shadow: 0 12px 28px rgba(0,0,0,.35); font-size: 12px; animation: toastIn .22s ease-out; }
.toast.good { border-color: rgba(99, 247, 175, .6); } .toast.warn { border-color: rgba(255, 173, 66, .7); } .toast.bad { border-color: rgba(255, 95, 109, .7); }
@keyframes toastIn { from { transform: translateX(25px); opacity: 0; } }
.fatal-error { position: absolute; z-index: 100; inset: 20px; padding: 24px; overflow: auto; white-space: pre-wrap; background: #22070c; border: 2px solid #ff5f6d; color: #fff; font-family: ui-monospace, monospace; }
@media (max-width: 900px) {
  .menu-screen { grid-template-columns: 1fr; align-content: center; overflow: auto; }
  .status-panel { display: none; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .help-grid { grid-template-columns: 1fr; }
  .result-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .menu-screen { padding: 18px; }
  .menu-panel { padding: 24px; }
  .menu-actions { grid-template-columns: 1fr; }
  .menu-actions .primary { grid-column: auto; }
  .quick-info, .settings-grid { grid-template-columns: 1fr; }
  .modal footer { flex-wrap: wrap; }
}