:root {
  color-scheme: dark;
  --ink: #f4f7fb;
  --muted: #909aac;
  --dim: #596274;
  --void: #05070c;
  --panel: rgba(12, 17, 27, 0.88);
  --panel-strong: rgba(15, 21, 34, 0.97);
  --line: rgba(172, 194, 224, 0.15);
  --line-hot: rgba(88, 243, 223, 0.5);
  --pilot: #58f3df;
  --pilot-rgb: 88, 243, 223;
  --pilot-2: #788cff;
  --gold: #ffd166;
  --danger: #ff647c;
  --lime: #b8ff77;
  --display: "Arial Narrow", "Roboto Condensed", Impact, ui-sans-serif, sans-serif;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--void); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(51, 80, 124, 0.22), transparent 28rem),
    radial-gradient(circle at 92% 82%, rgba(var(--pilot-rgb), 0.08), transparent 34rem),
    linear-gradient(145deg, #090c14, #04060a 70%);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
body[data-pilot="atlas"] { --pilot: #ffd166; --pilot-rgb: 255, 209, 102; --pilot-2: #ff7a8c; }
body[data-pilot="nyx"] { --pilot: #bd7cff; --pilot-rgb: 189, 124, 255; --pilot-2: #42d9ff; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--pilot); outline-offset: 4px; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
[hidden] { display: none !important; }

.game-app { width: min(1580px, 100%); margin: 0 auto; padding: 17px clamp(12px, 2.6vw, 38px) 32px; }
.command-header { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); background: var(--pilot); color: #06100f; box-shadow: 0 0 24px rgba(var(--pilot-rgb), 0.34); transition: background 240ms ease, box-shadow 240ms ease; }
.brand-mark svg { width: 26px; height: 26px; stroke-width: 2.2; }
.brand-copy { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; font-family: var(--display); font-size: 20px; font-weight: 900; letter-spacing: 0.11em; line-height: 1; }
.brand-copy strong { color: var(--pilot); font-weight: inherit; }
.brand-copy small { grid-column: 1 / -1; margin-top: 4px; color: var(--dim); font-family: var(--font); font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; }
.network-status { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.network-status i, .auto-control i { width: 6px; height: 6px; border-radius: 50%; background: var(--pilot); box-shadow: 0 0 12px var(--pilot); animation: status-pulse 1.5s ease-in-out infinite alternate; }
.network-status strong { color: var(--pilot); }
@keyframes status-pulse { to { opacity: 0.45; box-shadow: 0 0 3px var(--pilot); } }
.header-actions { display: flex; align-items: center; gap: 8px; }
.best-readout { display: grid; min-width: 72px; justify-items: end; margin-right: 4px; }
.best-readout span { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.best-readout strong { color: var(--gold); font-family: var(--display); font-size: 16px; letter-spacing: 0.08em; }
.icon-button { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: #0c111b; color: var(--muted); cursor: pointer; transition: 160ms ease; }
.icon-button:hover:not(:disabled) { border-color: var(--pilot); color: var(--pilot); transform: translateY(-1px); }
.icon-button:disabled { cursor: not-allowed; opacity: 0.32; }
.icon-button svg { width: 18px; height: 18px; }
.sound-on { display: none; }.icon-button.is-on .sound-on { display: block; }.icon-button.is-on .sound-off { display: none; }

.game-stage { position: relative; isolation: isolate; height: clamp(650px, 78vh, 850px); min-height: 650px; overflow: hidden; border: 1px solid rgba(158, 184, 218, 0.23); border-radius: 8px; background: #070b13; box-shadow: 0 35px 85px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
.game-stage::before { position: absolute; z-index: 20; inset: 0; border: 1px solid transparent; border-image: linear-gradient(135deg, rgba(var(--pilot-rgb), .6), transparent 16%, transparent 84%, rgba(var(--pilot-rgb), .28)) 1; content: ""; pointer-events: none; }
#gameCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }

.glass-panel { border: 1px solid rgba(175, 202, 235, 0.16); background: linear-gradient(135deg, rgba(12, 18, 30, 0.83), rgba(7, 11, 19, 0.74)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 10px 25px rgba(0, 0, 0, 0.18); backdrop-filter: blur(8px); }
.hud { position: absolute; z-index: 6; top: 17px; right: 17px; left: 17px; display: grid; grid-template-columns: minmax(280px, 340px) auto minmax(230px, 280px); align-items: start; justify-content: space-between; gap: 12px; pointer-events: none; opacity: 1; transition: opacity 180ms ease; }
body[data-screen="title"] .hud, body[data-screen="gameover"] .hud { opacity: 0; }
.pilot-readout { display: grid; grid-template-columns: 46px auto 1fr; align-items: center; gap: 10px; min-height: 66px; padding: 9px 11px; border-left: 2px solid var(--pilot); }
.pilot-glyph { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(var(--pilot-rgb), .6); background: rgba(var(--pilot-rgb), .11); color: var(--pilot); font-family: var(--display); font-size: 25px; font-weight: 900; clip-path: polygon(12% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 12%); }
.pilot-meta { display: grid; align-self: center; min-width: 70px; }
.pilot-meta span { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pilot-meta strong { font-family: var(--display); font-size: 18px; letter-spacing: .1em; }
.vital-bars { display: grid; gap: 4px; }
.bar-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bar-label strong { color: var(--ink); font-size: 7px; letter-spacing: .03em; }
.xp-label { margin-top: 2px; }
.meter { height: 5px; overflow: hidden; background: rgba(0, 0, 0, 0.58); }
.meter i { display: block; width: 100%; height: 100%; transition: width 180ms ease; }
.health-meter i { background: linear-gradient(90deg, var(--pilot-2), var(--pilot)); box-shadow: 0 0 11px rgba(var(--pilot-rgb), .6); }
.xp-meter i { background: linear-gradient(90deg, #5c73ff, #8fd8ff); }
.run-readout { display: flex; align-items: stretch; justify-self: center; }
.hud-stat { display: grid; min-width: 76px; justify-items: center; gap: 2px; padding: 10px 13px; border-right: 1px solid var(--line); }
.hud-stat:last-child { border: 0; }
.hud-stat span { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hud-stat strong { font-family: var(--display); font-size: 23px; letter-spacing: .07em; line-height: 1; }
.score-stat strong { color: var(--gold); }
.combo-stat { display: none; }.combo-stat.is-active { display: grid; }.combo-stat strong { color: var(--pilot); }
.lock-readout { display: grid; grid-template-columns: 38px 1fr; min-height: 61px; align-items: center; gap: 9px; padding: 8px 10px; border-right: 2px solid var(--pilot); }
.lock-icon { position: relative; display: block; width: 34px; height: 34px; border: 1px solid rgba(var(--pilot-rgb), .3); border-radius: 50%; }
.lock-icon::before, .lock-icon::after { position: absolute; top: 50%; left: 50%; background: var(--pilot); content: ""; opacity: .7; transform: translate(-50%, -50%); }
.lock-icon::before { width: 20px; height: 1px; }.lock-icon::after { width: 1px; height: 20px; }
.lock-icon i { position: absolute; inset: 7px; border: 1px solid var(--pilot); border-radius: 50%; box-shadow: 0 0 10px rgba(var(--pilot-rgb), .35); }
.lock-readout > div { display: grid; }.lock-readout span { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.lock-readout strong { overflow: hidden; color: var(--pilot); font-family: var(--display); font-size: 16px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.lock-readout small { grid-column: 2; margin-top: -9px; color: var(--muted); font-size: 6px; letter-spacing: .1em; }

.action-dock { position: absolute; z-index: 7; bottom: 16px; left: 50%; display: flex; gap: 8px; pointer-events: none; transform: translateX(-50%); }
body[data-screen="title"] .action-dock, body[data-screen="gameover"] .action-dock { opacity: 0; }
.action-card { position: relative; display: grid; min-width: 230px; min-height: 53px; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; overflow: hidden; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(9, 14, 23, .88); color: var(--ink); text-align: left; }
button.action-card { pointer-events: auto; cursor: pointer; }
button.action-card:hover { border-color: var(--pilot); }
.action-key { display: grid; min-width: 37px; height: 34px; place-items: center; border: 1px solid rgba(175, 202, 235, .24); background: #111826; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .06em; }
.action-card > div { display: grid; }.action-card small { color: var(--dim); font-size: 6px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.action-card strong { font-family: var(--display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.action-state { color: var(--pilot); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.action-card.is-cooling .action-state { color: var(--muted); }
.action-card.is-ready { border-color: rgba(var(--pilot-rgb), .38); box-shadow: inset 0 0 18px rgba(var(--pilot-rgb), .04); }
.action-charge { position: absolute; right: 0; bottom: 0; left: 0; width: var(--charge, 100%); height: 2px; background: var(--pilot); box-shadow: 0 0 9px var(--pilot); transition: width 80ms linear; }
.dash-action .action-charge { background: var(--lime); box-shadow: 0 0 9px var(--lime); }

.wave-flash { position: absolute; z-index: 8; top: 44%; right: 20px; left: 20px; color: var(--ink); font-family: var(--display); font-size: clamp(28px, 5vw, 58px); font-weight: 900; letter-spacing: .13em; text-align: center; text-shadow: 0 0 28px rgba(var(--pilot-rgb), .7); opacity: 0; pointer-events: none; transform: scale(.96); }
.wave-flash.is-active { animation: wave-flash 1.8s cubic-bezier(.22,1,.36,1) both; }
@keyframes wave-flash { 0% { opacity: 0; transform: scale(.9); } 15%, 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }

.screen { position: absolute; z-index: 10; inset: 0; display: none; align-items: center; justify-content: center; overflow: auto; padding: 30px; background: rgba(4, 6, 11, .68); text-align: center; }
.screen.is-visible { display: flex; }
.title-screen { align-items: stretch; padding: 0; background: linear-gradient(100deg, rgba(4, 7, 13, .93), rgba(4, 7, 13, .68) 56%, rgba(4, 7, 13, .91)); }
.scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(140, 190, 240, .018) 3px 4px); pointer-events: none; }
.title-layout { position: relative; z-index: 1; display: grid; width: 100%; grid-template-columns: minmax(330px, .8fr) minmax(600px, 1.2fr); align-items: center; gap: clamp(30px, 5vw, 80px); padding: clamp(45px, 6vh, 70px) clamp(30px, 5vw, 74px) 82px; text-align: left; }
.mission-brief { max-width: 525px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--pilot); font-size: 8px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow i { width: 18px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.mission-brief h1 { margin: 0; font-family: var(--display); font-size: clamp(65px, 8vw, 112px); font-weight: 900; letter-spacing: .035em; line-height: .72; }
.mission-brief h1 span { color: transparent; -webkit-text-stroke: 1px var(--pilot); text-shadow: 0 0 28px rgba(var(--pilot-rgb), .18); }
.mission-copy { max-width: 495px; margin: 29px 0 20px; color: #aeb7c7; font-size: 13px; line-height: 1.65; }
.auto-aim-callout { display: flex; max-width: 470px; align-items: center; gap: 15px; margin-bottom: 24px; padding: 12px 14px; border: 1px solid rgba(var(--pilot-rgb), .22); border-left: 2px solid var(--pilot); background: rgba(var(--pilot-rgb), .04); }
.callout-reticle { position: relative; width: 37px; height: 37px; flex: 0 0 auto; border: 1px solid var(--pilot); border-radius: 50%; }
.callout-reticle::before, .callout-reticle::after { position: absolute; top: 50%; left: 50%; background: var(--pilot); content: ""; transform: translate(-50%, -50%); }.callout-reticle::before { width: 49px; height: 1px; }.callout-reticle::after { width: 1px; height: 49px; }
.auto-aim-callout strong { font-family: var(--display); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }.auto-aim-callout p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.deploy-button { display: inline-flex; min-width: 230px; min-height: 58px; align-items: center; justify-content: space-between; gap: 25px; padding: 8px 13px 8px 17px; border: 1px solid var(--pilot); border-radius: 2px; background: var(--pilot); color: #06100f; cursor: pointer; box-shadow: 0 12px 36px rgba(var(--pilot-rgb), .18); transition: transform 160ms ease, box-shadow 160ms ease; }
.deploy-button:hover { box-shadow: 0 0 0 5px rgba(var(--pilot-rgb), .1), 0 15px 40px rgba(var(--pilot-rgb), .25); transform: translateY(-2px); }
.deploy-button > span { display: grid; text-align: left; }.deploy-button small { font-size: 6px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .56; }.deploy-button strong { font-family: var(--display); font-size: 16px; letter-spacing: .09em; }.deploy-button svg { width: 23px; height: 23px; stroke-width: 2.4; }
.mission-record { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 9px; margin-left: 16px; vertical-align: middle; }.mission-record span { color: var(--dim); font-size: 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.mission-record strong { color: var(--gold); font-family: var(--display); font-size: 21px; }.mission-record small { grid-column: 1/-1; color: var(--dim); font-size: 6px; letter-spacing: .15em; }
.roster-panel { width: min(760px, 100%); }
.panel-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }.panel-heading > div { display: grid; }.panel-heading span, .panel-heading small { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.panel-heading strong { margin-top: 3px; font-family: var(--display); font-size: 18px; letter-spacing: .08em; }.panel-heading small { color: var(--pilot); }
.roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.runner-card { position: relative; min-height: 190px; overflow: hidden; padding: 15px; border: 1px solid var(--line); border-radius: 2px; background: linear-gradient(145deg, rgba(18, 25, 39, .88), rgba(8, 12, 20, .93)); color: var(--ink); cursor: pointer; text-align: left; transition: border-color 180ms ease, transform 180ms ease, background 180ms ease; }
.runner-card::after { position: absolute; right: -50px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: var(--card-accent); content: ""; filter: blur(45px); opacity: .08; }
.runner-card:hover { border-color: var(--card-accent); transform: translateY(-3px); }.runner-card.is-selected { border-color: var(--card-accent); background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 10%, #111827), #080c14); box-shadow: inset 0 0 28px color-mix(in srgb, var(--card-accent) 7%, transparent); }
.runner-card.is-selected::before { position: absolute; top: 0; right: 0; width: 22px; height: 22px; border-top: 2px solid var(--card-accent); border-right: 2px solid var(--card-accent); content: ""; }
.runner-top { display: flex; align-items: start; justify-content: space-between; }.runner-glyph { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid var(--card-accent); background: color-mix(in srgb, var(--card-accent) 10%, transparent); color: var(--card-accent); font-family: var(--display); font-size: 28px; font-weight: 900; clip-path: polygon(13% 0,100% 0,100% 76%,76% 100%,0 100%,0 13%); }.runner-code { color: var(--dim); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.runner-card h3 { margin: 13px 0 2px; font-family: var(--display); font-size: 23px; letter-spacing: .08em; text-transform: uppercase; }.runner-card > p { margin: 0 0 13px; color: var(--card-accent); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stat-line { display: grid; grid-template-columns: 48px repeat(5, 1fr); align-items: center; gap: 3px; margin-top: 5px; }.stat-line span:first-child { color: var(--dim); font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.stat-pip { height: 3px; background: rgba(164, 188, 218, .14); }.stat-pip.is-on { background: var(--card-accent); box-shadow: 0 0 6px var(--card-accent); }
.loadout-panel { margin-top: 10px; border: 1px solid var(--line); background: rgba(8, 12, 20, .8); }
.loadout-heading { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }.loadout-heading span { padding: 3px 5px; background: var(--pilot); color: #07100f; font-size: 6px; font-weight: 900; letter-spacing: .08em; }.loadout-heading strong { font-family: var(--display); font-size: 12px; letter-spacing: .09em; }
.loadout-grid { display: grid; grid-template-columns: repeat(3, 1fr); }.loadout-grid article { min-height: 92px; padding: 11px 12px; border-right: 1px solid var(--line); }.loadout-grid article:last-child { border: 0; }.loadout-grid article > span { color: var(--dim); font-size: 6px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.loadout-grid article > strong { display: block; margin-top: 4px; font-family: var(--display); font-size: 13px; letter-spacing: .05em; }.loadout-grid p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.42; }.signature-detail { background: rgba(var(--pilot-rgb), .035); }.signature-detail > strong { color: var(--pilot); }
.control-rail { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; min-height: 47px; align-items: center; justify-content: center; gap: 27px; border-top: 1px solid var(--line); background: rgba(5, 8, 14, .84); color: var(--muted); font-size: 8px; }.control-rail > div { display: flex; align-items: center; gap: 6px; }.control-rail kbd { display: inline-grid; min-width: 28px; height: 20px; place-items: center; padding: 0 5px; border: 1px solid rgba(171, 199, 232, .22); border-bottom-color: rgba(171, 199, 232, .45); border-radius: 2px; background: #111827; color: #cbd5e1; font-family: var(--font); font-size: 6px; font-weight: 900; }.auto-control { color: var(--pilot); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.pause-screen, .gameover-screen, .upgrade-screen { background: rgba(3, 5, 9, .76); backdrop-filter: blur(10px); }
.modal-panel { width: min(465px, 100%); padding: 32px; border: 1px solid rgba(var(--pilot-rgb), .26); border-top: 2px solid var(--pilot); background: linear-gradient(145deg, rgba(18, 25, 39, .98), rgba(8, 12, 20, .98)); box-shadow: 0 30px 70px rgba(0,0,0,.48); }.modal-panel .eyebrow { justify-content: center; }.modal-panel h2, .upgrade-head h2 { margin: 0; font-family: var(--display); font-size: 45px; letter-spacing: .04em; line-height: .92; }.modal-panel > p:not(.eyebrow):not(.new-best):not(.final-pilot) { margin: 14px auto 23px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.primary-button { min-height: 47px; padding: 0 20px; border: 1px solid var(--pilot); border-radius: 2px; background: var(--pilot); color: #06100f; cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; transition: 160ms ease; }.primary-button:hover { box-shadow: 0 0 0 5px rgba(var(--pilot-rgb), .1); transform: translateY(-2px); }.text-button { display: block; margin: 13px auto 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.text-button:hover { color: var(--pilot); }
.upgrade-screen { flex-direction: column; }.upgrade-head { margin-bottom: 22px; }.upgrade-head .eyebrow { justify-content: center; }.upgrade-head > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 10px; }.upgrade-grid { display: grid; width: min(980px, 100%); grid-template-columns: repeat(3, 1fr); gap: 10px; }.upgrade-card { position: relative; min-height: 220px; overflow: hidden; padding: 23px 20px; border: 1px solid var(--line); border-radius: 2px; background: linear-gradient(145deg, #151d2d, #090e17); color: var(--ink); cursor: pointer; text-align: left; transition: 180ms ease; }.upgrade-card::after { position: absolute; right: -55px; bottom: -70px; width: 160px; height: 160px; border-radius: 50%; background: var(--upgrade-color); content: ""; filter: blur(48px); opacity: .1; }.upgrade-card:hover { border-color: var(--upgrade-color); transform: translateY(-5px); }.upgrade-tag { color: var(--upgrade-color); font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.upgrade-card h3 { margin: 25px 0 9px; font-family: var(--display); font-size: 26px; letter-spacing: .06em; text-transform: uppercase; }.upgrade-card p { max-width: 88%; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.upgrade-select { position: absolute; right: 16px; bottom: 15px; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--upgrade-color); color: var(--upgrade-color); font-family: var(--display); font-size: 14px; }
.gameover-panel { width: min(525px,100%); border-color: rgba(255,100,124,.33); border-top-color: var(--danger); }.eyebrow.danger { color: var(--danger); }.final-pilot { margin: 10px 0 17px; color: var(--pilot); font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }.run-summary { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 0 21px; border: 1px solid var(--line); }.run-summary > div { display: grid; gap: 4px; padding: 12px 5px; border-right: 1px solid var(--line); }.run-summary > div:last-child { border: 0; }.run-summary span { color: var(--dim); font-size: 6px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }.run-summary strong { font-family: var(--display); font-size: 23px; }.new-best { margin: -6px 0 16px; color: var(--gold); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.touch-controls { position: absolute; z-index: 8; right: 0; bottom: 0; left: 0; display: none; align-items: flex-end; justify-content: space-between; padding: 20px 17px max(17px, env(safe-area-inset-bottom)); pointer-events: none; }.joystick-zone { position: relative; width: 105px; height: 105px; border: 1px solid rgba(var(--pilot-rgb), .3); border-radius: 50%; background: rgba(var(--pilot-rgb), .06); pointer-events: auto; touch-action: none; }.joystick-zone::before, .joystick-zone::after { position: absolute; top: 50%; left: 50%; width: 1px; height: 72px; background: rgba(var(--pilot-rgb), .13); content: ""; transform: translate(-50%,-50%); }.joystick-zone::after { transform: translate(-50%,-50%) rotate(90deg); }.joystick-knob { position: absolute; top: 50%; left: 50%; width: 43px; height: 43px; border: 1px solid var(--pilot); border-radius: 50%; background: rgba(var(--pilot-rgb), .13); box-shadow: 0 0 18px rgba(var(--pilot-rgb), .18); transform: translate(-50%,-50%); }.touch-actions { display: flex; align-items: end; gap: 11px; pointer-events: auto; }.touch-button { display: grid; width: 67px; height: 67px; place-items: center; align-content: center; gap: 2px; border: 1px solid rgba(185, 211, 241, .28); border-radius: 50%; background: rgba(12, 18, 30, .82); color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .08em; touch-action: none; }.touch-button small { color: var(--dim); font-size: 5px; letter-spacing: .12em; }.dash-button { border-color: rgba(184,255,119,.5); color: var(--lime); }.ability-button { width: 82px; height: 82px; border-color: rgba(var(--pilot-rgb), .62); background: rgba(var(--pilot-rgb), .12); color: var(--pilot); box-shadow: inset 0 0 18px rgba(var(--pilot-rgb), .08); }.touch-button:active { transform: scale(.94); }

.intel-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border: 1px solid var(--line); border-radius: 3px; background: rgba(9, 13, 22, .72); }.intel-strip > div { display: grid; min-height: 68px; grid-template-columns: 32px 1fr; align-items: center; gap: 11px; padding: 12px 16px; border-right: 1px solid var(--line); }.intel-strip > div:last-child { border: 0; }.intel-strip > div > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(var(--pilot-rgb), .35); color: var(--pilot); font-family: var(--display); font-size: 10px; }.intel-strip p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.intel-strip strong { color: var(--ink); }

@media (max-width: 1120px) {
  .title-layout { grid-template-columns: minmax(280px,.7fr) minmax(520px,1.3fr); gap: 25px; padding-right: 30px; padding-left: 30px; }
  .mission-brief h1 { font-size: 70px; }.mission-copy { font-size: 11px; }.runner-card { min-height: 178px; padding: 12px; }
  .hud { grid-template-columns: minmax(260px,310px) auto minmax(200px,240px); }.action-card { min-width: 205px; }
}

@media (max-width: 850px) {
  .game-app { padding: 9px 8px 18px; }.command-header { min-height: 45px; margin-bottom: 8px; }.brand-mark { width: 32px; height: 32px; }.brand-mark svg { width: 22px; height: 22px; }.brand-copy { font-size: 16px; }.network-status, .best-readout { display: none; }.icon-button { width: 33px; height: 33px; }
  .game-stage { height: calc(100dvh - 117px); min-height: 610px; }
  .title-screen { align-items: flex-start; }.title-layout { display: block; overflow-y: auto; padding: 43px 18px 78px; }.mission-brief { max-width: none; text-align: center; }.eyebrow { justify-content: center; }.mission-brief h1 { font-size: clamp(60px, 16vw, 86px); }.mission-copy { max-width: 560px; margin: 22px auto 16px; }.auto-aim-callout { margin: 0 auto 18px; text-align: left; }.mission-record { display: none; }.roster-panel { margin: 34px auto 0; }.panel-heading { text-align: left; }
  .hud { top: 10px; right: 10px; left: 10px; grid-template-columns: minmax(210px,1fr) auto; }.pilot-readout { grid-template-columns: 36px auto 1fr; min-height: 57px; padding: 7px; }.pilot-glyph { width: 33px; height: 36px; font-size: 20px; }.pilot-meta strong { font-size: 14px; }.pilot-meta span { display: none; }.run-readout { justify-self: end; }.hud-stat { min-width: 62px; padding: 9px; }.hud-stat strong { font-size: 18px; }.lock-readout { position: absolute; top: 64px; right: 0; min-width: 175px; min-height: 44px; grid-template-columns: 27px 1fr; padding: 5px 7px; }.lock-icon { width: 26px; height: 26px; }.lock-readout strong { font-size: 12px; }.lock-readout small { display: none; }
  .action-dock { display: none; }.touch-controls { display: flex; }.control-rail { display: none; }
  .screen { padding: 70px 15px 24px; }.upgrade-screen { justify-content: flex-start; }.upgrade-grid { width: min(470px,100%); grid-template-columns: 1fr; }.upgrade-card { min-height: 122px; padding: 15px; }.upgrade-card h3 { margin: 12px 0 5px; font-size: 21px; }.upgrade-card p { font-size: 9px; }.upgrade-select { top: 14px; bottom: auto; }.upgrade-head h2 { font-size: 35px; }
  .intel-strip { grid-template-columns: 1fr; }.intel-strip > div { min-height: 53px; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); }.intel-strip > div:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .game-stage { min-height: 590px; }.roster-grid { grid-template-columns: 1fr; }.runner-card { min-height: 125px; display: grid; grid-template-columns: 54px 1fr; column-gap: 11px; }.runner-top { grid-row: 1 / 4; display: block; }.runner-code { display: block; margin-top: 7px; }.runner-card h3 { margin: 3px 0 1px; }.runner-card > p { margin-bottom: 5px; }.stat-line { grid-column: 2; }
  .loadout-grid { grid-template-columns: 1fr; }.loadout-grid article { min-height: 0; padding: 10px 11px; border-right: 0; border-bottom: 1px solid var(--line); }.loadout-grid article:last-child { border-bottom: 0; }
  .hud { grid-template-columns: minmax(190px,1fr) auto; }.pilot-readout { grid-template-columns: 34px 1fr; }.vital-bars { grid-column: 1 / -1; }.pilot-meta { text-align: right; }.run-readout .combo-stat { display: none; }.hud-stat { min-width: 52px; padding: 8px 6px; }.score-stat strong { font-size: 16px; }
  .joystick-zone { width: 92px; height: 92px; }.touch-button { width: 59px; height: 59px; }.ability-button { width: 72px; height: 72px; }.touch-actions { gap: 8px; }
  .modal-panel { padding: 27px 18px; }.modal-panel h2 { font-size: 37px; }.run-summary { grid-template-columns: repeat(2,1fr); }.run-summary > div:nth-child(2) { border-right: 0; }.run-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }