:root {
  color-scheme: dark;
  --paper: #f1eee7;
  --muted: #919eab;
  --surface: #141c25;
  --line: #2a3643;
  --accent: #ffb45e;
  font-family: 'Inter', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #080e15; color: var(--paper); }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button:disabled { opacity: .45; cursor: wait; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
.panelwrap {
  position: fixed; inset: 0; z-index: 5; overflow: auto; overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 75% 15%, #203243aa, transparent 65%), #080e15f5;
  display: grid; align-items: center; justify-items: center; min-height: 0;
}
.panel { width: min(1120px, 100%); min-width: 0; }
.lobby-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 28px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 17px; letter-spacing: .19em; font-weight: 800; }
.brand img { width: 38px; height: 38px; }
.lobby-nav { display: flex; gap: 8px; }
.nav-button, .sound { border: 1px solid var(--line); color: var(--paper); background: #131d28; border-radius: 9px; min-height: 44px; padding: 10px 16px; font-size: 12px; }
.nav-button:hover, .sound:hover { background: #263544; }
.hangar { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface); }
.flight-art { position: relative; min-height: 455px; background: #10192a; overflow: hidden; }
.flight-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.ship-label { position: absolute; inset: auto 24px 24px; display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.ship-label strong { display: block; font-size: 18px; margin-top: 6px; }
.ship-label small, .eyebrow { font: 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--accent); }
.ship-tag { background: #132531e6; border: 1px solid #4b626e; border-radius: 30px; font-size: 10px; padding: 8px 10px; color: #c7e6d0; }
.mission-card { padding: clamp(26px,4vw,48px); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.panel h1 { font-size: clamp(36px,4.2vw,62px); line-height: 1.04; letter-spacing: -.055em; font-weight: 600; margin: 0; }
.panel h1 em { color: var(--accent); font-style: normal; }
.panel p { font-size: 14px; line-height: 1.75; color: #adbac6; margin: 0; }
.mission-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mission-facts small { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; }
.mission-facts strong { font-size: 17px; font-weight: 500; }
.button { min-height: 50px; border: 0; border-radius: 10px; background: var(--accent); color: #24170a; padding: 14px 22px; font-weight: 650; font-size: 13px; }
.button:hover { background: #ffd198; }
.button.secondary { color: var(--paper); background: #243140; border: 1px solid #425165; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.launch-button { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.lobby-footer { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 22px; color: var(--muted); font-size: 11px; }
kbd { font: 11px 'IBM Plex Mono', monospace; color: #dae0e6; border: 1px solid #3c4a58; border-bottom-width: 2px; border-radius: 4px; padding: 3px 7px; }
.command-keys { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; line-height: 2; }
.dialog-card { width: min(660px,100%); padding: clamp(24px,4vw,44px); border: 1px solid var(--line); background: var(--surface); border-radius: 20px; margin: auto; display: grid; gap: 22px; }
.dialog-card h1 { font-size: clamp(34px,5vw,52px); }
.dialog-card .eyebrow { margin: 0; }
.help-panel .dialog-card { width: min(850px,100%); }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-card { border-top: 1px solid var(--line); padding: 17px 0; }
.help-card h3 { margin: 0 0 9px; font-size: 14px; font-weight: 600; }
.help-card p { font-size: 12px; }
.upgrades { display: grid; gap: 10px; }
.upgrade { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; min-height: 60px; border: 1px solid #3a4958; border-radius: 10px; color: white; background: #202e3c; text-align: left; }
.upgrade span { color: var(--accent); font: 11px 'IBM Plex Mono'; }
.hud { position: absolute; inset: 0; pointer-events: none; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; justify-content: space-between; }
.top { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.logo { display: flex; gap: 8px; align-items: center; font-size: 14px; letter-spacing: .14em; font-weight: 700; }
.logo img { width: 30px; height: 30px; }.logo small { display: none; }
.stats { display: flex; flex-wrap: wrap; gap: 18px; background: #101b2ce6; border: 1px solid #36455a; border-radius: 12px; padding: 12px 16px; font: 9px 'IBM Plex Mono'; color: #aab7c8; }
.stats b { display: block; font: 600 20px 'Inter'; color: var(--paper); margin-top: 5px; }
.health { min-width: 80px; }.bar { height: 5px; border-radius: 3px; background: #344051; margin-top: 12px; overflow: hidden; }.bar i { display: block; height: 100%; width: 100%; background: #b7dfb7; transition: width .15s; }
.hudbottom { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.wave { max-width: 48%; font: 10px/1.7 'IBM Plex Mono'; color: #d0dce9; }
.hud-actions { display: flex; gap: 6px; }.sound { pointer-events: auto; }
.controls { position: absolute; bottom: max(84px, calc(env(safe-area-inset-bottom) + 70px)); left: max(16px,env(safe-area-inset-left)); right: max(16px,env(safe-area-inset-right)); display: none; justify-content: space-between; pointer-events: none; }
.control-group { display: flex; gap: 10px; }.touch { pointer-events: auto; touch-action: none; min-width: 54px; height: 54px; border: 1px solid #6c7889; color: white; background: #1d2e42d9; border-radius: 16px; font-size: 21px; user-select: none; -webkit-user-select: none; }
#fire { background: #cd8b40e6; color: #111; width: 68px; }
.announce { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); width: 90%; text-align: center; pointer-events: none; text-shadow: 0 3px 24px #000; }
.announce span { color: var(--accent); font: 10px 'IBM Plex Mono'; letter-spacing: .1em; }.announce b { display: block; font-size: clamp(24px,5vw,46px); margin-top: 8px; }
#intro { z-index: 6; }#skipIntro { z-index: 7 !important; }
body:has(.panelwrap:not(.hidden)) .controls { display: none; }
@media(pointer:coarse),(max-width:900px) { .controls { display: flex; } }
@media(max-width:760px) {
  .panelwrap { padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); align-items: start; }
  .lobby-header { padding: 4px 0 18px; }.brand { font-size: 14px; gap: 7px; }.brand img { width: 30px; height: 30px; }
  .nav-button { padding: 8px 12px; }.hangar { grid-template-columns: 1fr; border-radius: 16px; }
  .flight-art { min-height: 235px; }.flight-art img { object-fit: contain; object-position: 50% 42%; transform: scale(1.16); }
  .ship-label { inset: auto 16px 15px; }.ship-label strong { font-size: 14px; }
  .mission-card { padding: 24px; gap: 16px; }.panel h1 { font-size: 38px; }.mission-facts { padding: 16px 0; }
  .lobby-footer { padding-bottom: 8px; }.top { flex-direction: column; gap: 8px; }.stats { width: 100%; justify-content: space-between; gap: 8px; padding: 10px 12px; }
  .stats b { font-size: 17px; }.sound { padding: 8px 10px; font-size: 10px; }.hudbottom { align-items: center; }.wave { max-width: 40%; font-size: 8px; }
  .help-grid { grid-template-columns: 1fr; }.dialog-card { gap: 18px; }.lobby-footer>span { display: none; }
}
@media(max-width:380px) { .panelwrap { padding: 12px; }.mission-card { padding: 20px; }.stats { font-size: 8px; }.stats b { font-size: 15px; }.health { min-width: 64px; }.touch { min-width: 48px; height: 48px; }.control-group { gap: 7px; }.sound { padding: 8px; }.wave { max-width: 34%; } }
@media(max-height:540px) and (min-width:600px) {
  .panelwrap { padding: 16px 24px; align-items: start; }.lobby-header { padding-bottom: 14px; }.hangar { grid-template-columns: .7fr 1fr; }.flight-art { min-height: 290px; }.mission-card { padding: 22px; gap: 12px; }.panel h1 { font-size: 34px; }.mission-facts { padding: 10px 0; }.lobby-footer { padding-top: 12px; }.top { flex-direction: row; }.stats { width: auto; }.controls { bottom: 70px; }
}
@media(horizontal-viewport-segments:2) {
  .panelwrap { padding: 0; }.panel { width: 100%; }.lobby-header,.lobby-footer { margin: 20px; }.hangar { border: 0; border-radius: 0; grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0); column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); }.flight-art { min-height: 380px; }.mission-card { padding: 24px; }.dialog-card { max-width: calc(env(viewport-segment-width 0 0) - 24px); margin: 12px; }.help-grid { grid-template-columns: 1fr; }
}
@media(vertical-viewport-segments:2) {
  .panelwrap { padding: 16px; }.hangar { grid-template-columns: 1fr; }.flight-art { min-height: max(180px,calc(env(viewport-segment-height 0 0) - 100px)); }.mission-card { margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)); }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; transition: none !important; } }