:root {
  --ink: #f2f4ff;
  --muted: #8790bd;
  --panel: rgba(15, 17, 48, .82);
  --line: rgba(105, 120, 209, .25);
  --cyan: #53e8ff;
  --pink: #ff5b9d;
  --lime: #b5ff5c;
  --mono: "Space Mono", monospace;
  --display: "Barlow Condensed", sans-serif;
}
* { box-sizing: border-box; }
html { background: #060817; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 12% 8%, #171746 0, transparent 34rem), #060817; font-family: var(--display); letter-spacing: .04em; }
button, input { font: inherit; }
button { cursor: pointer; }
.scanlines { pointer-events: none; position: fixed; inset: 0; z-index: 10; opacity: .035; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #fff 4px); mix-blend-mode: screen; }
.page-shell { max-width: 1380px; margin: 0 auto; padding: 28px 42px 22px; }
.topbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 600; letter-spacing: .14em; }
.brand strong { color: var(--cyan); font-weight: 800; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 22px; height: 22px; transform: skew(-15deg); }
.brand-mark i { display: block; width: 5px; background: var(--pink); box-shadow: 0 0 9px var(--pink); }
.brand-mark i:nth-child(1) { height: 11px; opacity: .65; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 8px; opacity: .8; }
.topbar-meta { display: flex; align-items: center; gap: 22px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .15em; }
.signal { display: flex; align-items: center; gap: 8px; }.signal b { width: 6px; height: 6px; border-radius: 100%; background: var(--lime); box-shadow: 0 0 9px var(--lime); animation: pulse 1.6s infinite; }
.icon-button { border: 1px solid var(--line); background: transparent; color: var(--cyan); min-width: 38px; height: 32px; font-family: var(--mono); font-size: 11px; }.icon-button:hover, .icon-button:focus-visible { border-color: var(--cyan); background: rgba(83,232,255,.1); }.sound-off { display: none; }.is-muted .sound-on { display: none; }.is-muted .sound-off { display: inline; color: var(--pink); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 34px; padding: 48px 0 32px; }
.game-column { min-width: 0; }.hud { display: flex; justify-content: space-between; align-items: end; max-width: 940px; padding: 0 5px 12px; }.hud-stat { min-width: 135px; }.hud-stat-center { text-align: center; }.hud-stat-right { text-align: right; }.hud-label, .eyebrow { display: block; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .2em; margin-bottom: 4px; }.hud-stat strong { color: var(--cyan); text-shadow: 0 0 12px rgba(83,232,255,.5); font-family: var(--mono); font-size: 20px; letter-spacing: .08em; }.hud-stat-center strong { color: var(--lime); }.hud-stat-right strong { color: var(--pink); font-size: 13px; letter-spacing: .18em; }
.canvas-frame { position: relative; overflow: hidden; border: 1px solid rgba(93, 212, 255, .42); background: #090b25; box-shadow: 0 0 0 1px rgba(255,91,157,.11), 0 20px 70px rgba(0,0,0,.42), 0 0 40px rgba(83,232,255,.08); }.canvas-frame::before, .canvas-frame::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--cyan); border-style: solid; pointer-events: none; z-index: 2; }.canvas-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }.canvas-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
canvas { width: 100%; display: block; touch-action: none; }
.game-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(90deg, rgba(7,9,29,.45), rgba(7,9,29,.78)); transition: opacity .25s, visibility .25s; }.game-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }.overlay-kicker { color: var(--lime); font-family: var(--mono); font-size: 9px; letter-spacing: .28em; margin-bottom: 14px; }.game-overlay h1 { margin: 0; color: var(--ink); font-size: clamp(50px, 8vw, 92px); line-height: .78; letter-spacing: -.02em; font-weight: 800; text-shadow: 4px 4px 0 rgba(255,91,157,.23); }.game-overlay h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 24px rgba(83,232,255,.45); }.game-overlay p { color: #b4bbdf; line-height: 1.55; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; margin: 20px 0 24px; }.final-score { display: block; color: var(--lime); font-size: 22px; margin: 7px 0; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 25px; min-width: 214px; border: 1px solid var(--cyan); padding: 13px 18px; color: #06101e; background: var(--cyan); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; box-shadow: 0 0 20px rgba(83,232,255,.22); transition: transform .2s, box-shadow .2s, background .2s; }.primary-button b { font-size: 18px; line-height: 10px; }.primary-button:hover, .primary-button:focus-visible { background: #d0fdff; transform: translateY(-2px); box-shadow: 0 0 32px rgba(83,232,255,.48); }.primary-button.compact { min-width: 0; padding: 11px 13px; gap: 0; font-size: 9px; }
.control-hint { margin-top: 22px; color: #737ca9; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.control-hint span { display: inline-block; height: 8px; border-left: 1px solid var(--line); margin: 0 13px -2px; }.control-hint kbd { border: 1px solid rgba(135,144,189,.45); padding: 3px 4px; color: #b4bbdf; font-size: 8px; }
.score-form { width: min(300px, 80%); margin-top: 17px; text-align: left; }.score-form.hidden { display: none; }.score-form label { display: block; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .16em; margin-bottom: 6px; }.name-row { display: flex; gap: 6px; }.score-form input { min-width: 0; flex: 1; border: 1px solid rgba(83,232,255,.42); outline: 0; padding: 10px; color: var(--ink); background: rgba(4,7,22,.8); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }.score-form input:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(83,232,255,.2); }.form-error { min-height: 13px; margin: 6px 0 0; color: var(--pink) !important; font-size: 8px !important; }.form-error.success { color: var(--lime) !important; }
.leaderboard-panel { align-self: start; min-height: 440px; border: 1px solid var(--line); padding: 25px 22px 18px; background: var(--panel); box-shadow: inset 0 0 50px rgba(79,67,178,.08); }.panel-heading { display: flex; justify-content: space-between; align-items: start; }.panel-heading h2 { margin: 3px 0 0; color: var(--ink); font-size: 26px; font-weight: 700; letter-spacing: .03em; line-height: 1; }.online-dot { width: 8px; height: 8px; border-radius: 100%; background: var(--lime); box-shadow: 0 0 12px var(--lime); margin-top: 7px; }.panel-copy { color: var(--muted); font-family: var(--mono); font-size: 9px; line-height: 1.6; margin: 19px 0 18px; }.leaderboard-status { min-height: 16px; color: var(--cyan); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.leaderboard-status.error { color: var(--pink); }.leaderboard-status.empty { color: var(--muted); }.leaderboard-status.live { color: var(--lime); }.leaderboard { padding: 7px 0 0; margin: 0; list-style: none; }.score-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid rgba(105,120,209,.14); color: #bec4e5; font-family: var(--mono); font-size: 10px; }.score-row .rank { color: #6b74a6; }.score-row .pilot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.score-row strong { color: var(--cyan); font-size: 10px; letter-spacing: .02em; }.score-row.top-score { background: linear-gradient(90deg, rgba(181,255,92,.08), transparent); }.score-row.top-score .rank, .score-row.top-score strong { color: var(--lime); }.panel-footer { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: #646d9a; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; }.footer-line { flex: 1; height: 1px; background: var(--line); }
.touch-controls, .mobile-instruction { display: none; }.footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; color: #5d668e; font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }.footer b { color: var(--pink); font-weight: 400; }
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 900px) { .page-shell { padding: 21px 22px 17px; }.game-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; }.leaderboard-panel { min-height: 0; }.leaderboard { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }.panel-footer { margin-top: 16px; } }
@media (max-width: 560px) { .page-shell { padding: 16px 12px 13px; }.topbar { padding-bottom: 13px; }.brand { font-size: 15px; gap: 9px; }.topbar-meta { gap: 9px; }.signal { font-size: 7px; }.game-layout { padding-top: 24px; gap: 18px; }.hud { padding-bottom: 8px; }.hud-stat { min-width: auto; }.hud-label { font-size: 7px; }.hud-stat strong { font-size: 15px; }.hud-stat-right strong { font-size: 10px; }.canvas-frame { margin: 0 -1px; }.game-overlay h1 { font-size: 58px; }.game-overlay p { margin: 16px 0 19px; font-size: 8px; }.control-hint { display: none; }.mobile-instruction { display: block; margin: 8px 0 0; color: #68719c; text-align: center; font-family: var(--mono); font-size: 7px; letter-spacing: .15em; }.mobile-instruction span { color: var(--pink); margin: 0 7px; }.touch-controls { display: flex; align-items: center; justify-content: space-between; padding: 17px 12px 0; }.touch-pad { position: relative; width: 116px; height: 93px; }.touch-key, .fire-button { border: 1px solid rgba(83,232,255,.35); color: var(--cyan); background: rgba(15,17,48,.8); font-family: var(--mono); }.touch-key { position: absolute; width: 34px; height: 29px; font-size: 12px; }.touch-key:hover, .touch-key.pressed, .fire-button.pressed { color: #071122; background: var(--cyan); }.touch-up { top: 0; left: 41px; }.touch-left { top: 32px; left: 4px; }.touch-down { top: 32px; left: 41px; }.touch-right { top: 32px; left: 78px; }.fire-button { width: 82px; height: 58px; border-color: var(--pink); color: var(--pink); border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: .1em; box-shadow: 0 0 15px rgba(255,91,157,.12); }.fire-button:active { background: var(--pink); color: #19091e; }.leaderboard-panel { padding: 20px 15px 15px; }.panel-heading h2 { font-size: 22px; }.leaderboard { grid-template-columns: 1fr; }.footer { margin-top: 19px; font-size: 6px; }.footer span:nth-child(2) { display: none; } }