:root {
  --ink: #f4f7ff;
  --muted: #8190ad;
  --dim: #3e4a69;
  --bg: #070b18;
  --panel: #0d1325;
  --panel-2: #101a31;
  --cyan: #45f5e0;
  --pink: #ff4f9a;
  --amber: #ffca63;
  --danger: #ff5b72;
  --line: rgba(104, 146, 204, .22);
  font-family: 'Chakra Petch', sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at 12% 8%, #15244c 0, transparent 34%), radial-gradient(circle at 88% 78%, #241537 0, transparent 28%), var(--bg); overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.scanlines { position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 5; background: repeating-linear-gradient(0deg, transparent 0 3px, #cbe4ff 4px); mix-blend-mode: screen; }
.shell { position: relative; z-index: 1; width: min(1380px, calc(100% - 56px)); margin: 0 auto; padding: 38px 0 24px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 34px; }
.brand-lockup { display: flex; align-items: center; gap: 16px; }
.brand-mark { width: 30px; height: 33px; display: flex; align-items: end; gap: 4px; transform: skew(-18deg); }
.brand-mark span { display: block; width: 7px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.brand-mark span:nth-child(1) { height: 18px; opacity: .5; }.brand-mark span:nth-child(2) { height: 27px; }.brand-mark span:nth-child(3) { height: 33px; background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.eyebrow { font: 700 10px/1 'Space Mono', monospace; letter-spacing: .19em; color: var(--cyan); margin: 0 0 8px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(24px, 3vw, 35px); line-height: .9; letter-spacing: .08em; font-weight: 700; }
h1 em { color: var(--pink); font-style: normal; }
.topbar-status { color: var(--muted); font: 10px 'Space Mono', monospace; letter-spacing: .12em; }.status-dot { display: inline-block; width: 7px; height: 7px; background: var(--cyan); border-radius: 100%; margin-right: 8px; box-shadow: 0 0 9px var(--cyan); }.slash { color: var(--pink); margin: 0 8px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 25px; align-items: start; }
.game-frame { position: relative; background: #080e20; border: 1px solid #2f4268; box-shadow: 0 25px 70px rgba(0,0,0,.3), 0 0 0 5px rgba(25,42,76,.28); overflow: hidden; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #080e20; }
.frame-corner { position: absolute; width: 20px; height: 20px; z-index: 2; pointer-events: none; border-color: var(--cyan); border-style: solid; }.corner-tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }.corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }.corner-bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }.corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hud { position: absolute; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: start; padding: 22px 26px; pointer-events: none; background: linear-gradient(#081024dd, transparent); }.hud > div { min-width: 100px; }.hud-center { text-align: center; }.lives-readout { text-align: right; }.hud-label { display: block; font: 9px 'Space Mono', monospace; letter-spacing: .18em; color: var(--muted); margin-bottom: 5px; }.hud strong { font: 700 25px/1 'Space Mono', monospace; letter-spacing: .08em; color: var(--ink); text-shadow: 0 0 13px rgba(69,245,224,.35); }.lives-readout strong { color: var(--pink); text-shadow: 0 0 14px rgba(255,79,154,.45); }.phase-chip { display: inline-block; border: 1px solid #3b527d; padding: 6px 10px; color: var(--cyan); font: 9px 'Space Mono', monospace; letter-spacing: .12em; background: #101a32b8; }
.game-overlay { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 35px; background: linear-gradient(120deg, rgba(5,10,25,.91), rgba(11,14,36,.8)); }.game-overlay.hidden { display: none; }.overlay-kicker { color: var(--cyan); font: 10px 'Space Mono', monospace; letter-spacing: .18em; margin-bottom: 19px; }.overlay-kicker.danger { color: var(--pink); }.game-overlay h2 { font-size: clamp(36px, 6vw, 68px); line-height: .92; letter-spacing: -.03em; margin-bottom: 15px; }.game-overlay h2 span { color: var(--pink); }.game-overlay > p { color: #aab6d0; font-size: 14px; line-height: 1.55; }.game-overlay > p strong { color: var(--cyan); font-family: 'Space Mono', monospace; }.primary-button { border: 0; color: #081020; background: var(--cyan); padding: 14px 22px; margin: 27px 0 21px; font-weight: 700; font-size: 12px; letter-spacing: .15em; box-shadow: 0 0 25px rgba(69,245,224,.28); transition: transform .15s, box-shadow .15s; }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(69,245,224,.52); }.button-icon { margin-right: 8px; }.keyboard-hint { color: var(--muted) !important; font: 9px 'Space Mono', monospace !important; letter-spacing: .08em; }.keyboard-hint span { display: inline-block; width: 20px; }.keyboard-hint kbd { color: var(--ink); border: 1px solid #586887; padding: 3px 5px; font: 9px 'Space Mono', monospace; }
#score-form { width: min(390px, 100%); margin-top: 24px; text-align: left; }.score-form label, #score-form label { display: block; color: var(--muted); font: 9px 'Space Mono', monospace; letter-spacing: .12em; margin-bottom: 8px; }.name-row { display: flex; gap: 8px; }.name-row input { min-width: 0; flex: 1; color: var(--ink); background: #060b18; border: 1px solid #405477; padding: 11px 12px; outline: none; letter-spacing: .08em; text-transform: uppercase; }.name-row input:focus { border-color: var(--cyan); box-shadow: 0 0 13px rgba(69,245,224,.17); }.compact { margin: 0; padding: 0 15px; font-size: 10px; }.form-message { min-height: 20px; margin-top: 8px; color: var(--amber); font: 10px 'Space Mono', monospace; }.text-button { border: 0; background: none; color: var(--muted); margin-top: 9px; font: 10px 'Space Mono', monospace; letter-spacing: .1em; }.text-button:hover { color: var(--cyan); }
.touch-controls, .mobile-controls-note { display: none; }
.lower-bar { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px 0; }.difficulty-meter { display: flex; align-items: center; gap: 14px; color: var(--muted); font: 9px 'Space Mono', monospace; letter-spacing: .12em; }.difficulty-meter i { display: block; width: 145px; height: 4px; background: #202b45; overflow: hidden; }.difficulty-meter b { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, var(--cyan), var(--pink)); transition: width .3s; }.mute-button { border: 0; background: none; padding: 4px 0; color: var(--muted); font: 9px 'Space Mono', monospace; letter-spacing: .11em; }.mute-button:hover { color: var(--ink); }.mute-button span { color: var(--cyan); font-size: 15px; margin-right: 5px; }.mute-button b { color: var(--cyan); font-weight: 400; }
.leaderboard-panel { min-height: 520px; background: linear-gradient(140deg, rgba(18,28,53,.93), rgba(10,16,32,.93)); border: 1px solid #2a3d62; padding: 25px 21px 18px; position: relative; }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }.panel-heading h2 { font-size: 24px; letter-spacing: .06em; }.live-pill { border: 1px solid rgba(69,245,224,.4); color: var(--cyan); padding: 5px 7px; font: 8px 'Space Mono', monospace; letter-spacing: .1em; }.live-pill i { display: inline-block; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; margin-right: 5px; box-shadow: 0 0 6px var(--cyan); }.leaderboard-rule { margin: 24px 0 9px; border-top: 1px solid var(--line); }.leaderboard-state { color: var(--muted); min-height: 22px; font: 9px 'Space Mono', monospace; letter-spacing: .1em; }.leaderboard-state.error { color: var(--amber); line-height: 1.5; }.leaderboard-state.empty { color: var(--muted); padding: 27px 0; line-height: 1.6; }.loader { display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 1px solid var(--dim); border-top-color: var(--cyan); border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
#leaderboard { list-style: none; margin: 3px 0 0; padding: 0; }.score-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 7px; align-items: center; min-height: 43px; border-bottom: 1px solid rgba(104,146,204,.1); }.score-rank { color: var(--dim); font: 11px 'Space Mono', monospace; }.score-row:nth-child(1) .score-rank { color: var(--amber); }.score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9e1f4; font-size: 13px; letter-spacing: .06em; }.score-value { color: var(--cyan); font: 700 12px 'Space Mono', monospace; }.score-row:nth-child(1) .score-value { color: var(--amber); }.panel-footer { display: flex; justify-content: space-between; margin-top: 17px; color: var(--dim); font: 8px 'Space Mono', monospace; letter-spacing: .1em; }.briefing { display: flex; gap: 12px; border-top: 1px solid var(--line); margin-top: 29px; padding-top: 19px; color: var(--muted); font: 10px/1.5 'Space Mono', monospace; }.briefing strong { color: var(--pink); font-size: 9px; letter-spacing: .1em; }.briefing-icon { color: var(--pink); font-size: 21px; }
.footer { display: flex; justify-content: space-between; margin-top: 31px; color: #3d4b6b; font: 8px 'Space Mono', monospace; letter-spacing: .13em; }
@media (max-width: 950px) { .shell { width: min(760px, calc(100% - 32px)); padding-top: 24px; }.game-layout { grid-template-columns: 1fr; }.leaderboard-panel { min-height: 0; }.leaderboard-panel ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }.briefing { display: none; } }
@media (max-width: 560px) { .shell { width: calc(100% - 22px); padding-top: 18px; }.topbar { margin-bottom: 20px; }.topbar-status { display: none; }.eyebrow { font-size: 8px; }.hud { padding: 14px 14px; }.hud strong { font-size: 17px; }.hud > div { min-width: 70px; }.phase-chip { font-size: 7px; padding: 5px 6px; }.game-overlay { padding: 22px; }.game-overlay h2 { font-size: 41px; }.game-overlay > p { font-size: 12px; }.keyboard-hint { display: none; }.lower-bar { padding-top: 12px; }.difficulty-meter { gap: 8px; font-size: 7px; }.difficulty-meter i { width: 80px; }.mobile-controls-note { display: flex; color: var(--dim); align-items: center; justify-content: center; gap: 8px; margin: 13px 0 0; font: 8px 'Space Mono', monospace; letter-spacing: .13em; }.signal-line { width: 22px; height: 1px; background: var(--dim); }.touch-controls { display: flex; position: absolute; z-index: 3; left: 15px; right: 15px; bottom: 13px; justify-content: space-between; align-items: end; pointer-events: none; }.d-pad { width: 116px; height: 94px; position: relative; pointer-events: auto; }.d-pad button, .fire-button { -webkit-tap-highlight-color: transparent; touch-action: none; border: 1px solid rgba(69,245,224,.4); background: rgba(10,20,44,.75); color: var(--cyan); }.d-pad button { position: absolute; width: 37px; height: 32px; font-size: 13px; }.d-pad button:nth-child(1) { left: 39px; top: 0; }.d-pad button:nth-child(2) { left: 0; top: 31px; }.d-pad button:nth-child(3) { left: 39px; top: 31px; }.d-pad button:nth-child(4) { left: 78px; top: 31px; }.fire-button { pointer-events: auto; width: 72px; height: 72px; border-color: rgba(255,79,154,.55); color: var(--pink); border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: .1em; box-shadow: inset 0 0 18px rgba(255,79,154,.1); }.d-pad button:active, .fire-button:active { background: rgba(69,245,224,.25); }.footer { font-size: 7px; margin-top: 22px; }.footer span:last-child { display: none; }.leaderboard-panel { padding: 20px 15px 15px; }.leaderboard-panel ol { grid-template-columns: 1fr; }.panel-heading h2 { font-size: 20px; } }