:root {
  --cyan:#70f6ff;
  --pink:#ff4ca8;
  --amber:#ffd166;
  --violet:#b786ff;
  --ink:#030711;
  --panel:#071321ed;
  --panel-2:#0b1d2fed;
  --line:#70f6ff2d;
  --muted:#7896a6;
  --safe-top:max(18px,env(safe-area-inset-top));
  --safe-right:max(22px,env(safe-area-inset-right));
  --safe-bottom:max(18px,env(safe-area-inset-bottom));
  --safe-left:max(22px,env(safe-area-inset-left));
}

html,body { background:#02050c; font-family:"Bahnschrift SemiCondensed","Arial Narrow",Inter,Segoe UI,sans-serif; }
button { font-family:inherit; }
button:focus-visible { outline:2px solid #fff; outline-offset:4px; }

.hud { letter-spacing:.13em; }
.hud::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#06111cd9 0,transparent 19%,transparent 81%,#06111cc7 100%),
    linear-gradient(180deg,#06111cbf 0,transparent 16%,transparent 82%,#030711d9 100%);
}
.top {
  position:relative;
  align-items:center;
  padding:var(--safe-top) var(--safe-right) 0 var(--safe-left);
}
.brand {
  position:relative;
  display:flex;
  align-items:center;
  min-height:36px;
  padding:0 18px 0 46px;
  font-size:clamp(17px,1.8vw,25px);
  letter-spacing:-.02em;
  text-shadow:none;
  border:1px solid #70f6ff33;
  background:linear-gradient(90deg,#0b2034f2,#07111dcc);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
}
.brand::before {
  content:"SS";
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  color:#06101a;
  background:var(--cyan);
  font:1000 10px ui-monospace,monospace;
  letter-spacing:-.08em;
}
.brand b { color:var(--pink); }
.stats {
  gap:0;
  padding:3px;
  border:1px solid #70f6ff2b;
  background:#06111be8;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.stat {
  min-width:76px;
  padding:7px 13px 6px;
  border-left:1px solid #70f6ff24;
}
.stat:first-child { border-left:0; }
.stat span { color:#668696; font:900 8px ui-monospace,monospace; letter-spacing:.19em; }
.stat strong { margin-top:3px; color:#e9fdff; font-size:17px; font-variant-numeric:tabular-nums; }

.audio-toggle {
  top:calc(var(--safe-top) + 44px);
  left:var(--safe-left);
  min-width:94px;
  padding:6px 10px;
  border-color:#70f6ff30;
  color:#9af7ff;
  background:#071522ed;
  box-shadow:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.audio-toggle::before { content:"◉ "; color:var(--pink); }
.audio-toggle[aria-pressed="false"]::before { content:"○ "; color:#60747e; }
.mode-readout {
  --mode:var(--cyan);
  top:calc(var(--safe-top) + 78px);
  left:var(--safe-left);
  min-width:205px;
  padding:9px 12px 10px 14px;
  border:1px solid color-mix(in srgb,var(--mode) 28%,transparent);
  border-left:4px solid var(--mode);
  background:linear-gradient(90deg,color-mix(in srgb,var(--mode) 10%,#07111f),#06101ad9);
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--mode) 7%,transparent);
}
.mode-readout::before {
  content:"GRAVITY CHASSIS // ONLINE";
  display:block;
  margin-bottom:5px;
  color:#607d8c;
  font:800 7px ui-monospace,monospace;
  letter-spacing:.16em;
}
.mode-readout strong { color:var(--mode); font-size:13px; }
.mode-readout .utility-label {
  display:block;
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid color-mix(in srgb,var(--mode) 18%,transparent);
  color:#b8d0da;
  font-size:8px;
  letter-spacing:.11em;
}
.mode-readout[data-mode="scatter"] { --mode:var(--amber); }
.mode-readout[data-mode="halo"] { --mode:var(--pink); }
.build-strip {
  top:calc(var(--safe-top) + 151px);
  left:var(--safe-left);
  gap:4px;
  width:min(350px,43vw);
}
.build-strip:not(:empty)::before {
  content:"INSTALLED LOADOUT";
  color:#668696;
  font:900 7px ui-monospace,monospace;
  letter-spacing:.2em;
}
.build-chip {
  min-height:27px;
  grid-template-columns:24px auto;
  padding-right:12px;
  border-left:3px solid var(--rarity);
  background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 9%,#07111f),#050d16e8);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);
}

.objective {
  top:calc(var(--safe-top) + 46px);
  min-width:310px;
  padding:7px 18px 8px;
  color:#89a7b7;
  border-block:1px solid #70f6ff24;
  background:linear-gradient(90deg,transparent,#071726e8 17%,#071726e8 83%,transparent);
  font:900 9px ui-monospace,monospace;
}
.objective b { color:#fff; }
.banner { top:24%; }
.banner strong { text-shadow:-4px 3px 0 #163a62,0 0 30px #70f6ff55; }

.bottom {
  left:var(--safe-left);
  right:var(--safe-right);
  bottom:var(--safe-bottom);
}
.meters {
  position:relative;
  width:min(370px,48vw);
  padding:19px 17px 9px;
  border:1px solid #70f6ff24;
  background:linear-gradient(135deg,#071522ed,#050c15e8);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
}
.meters::before {
  content:"SHIP SYSTEMS";
  position:absolute;
  top:6px;
  left:17px;
  color:#52707f;
  font:900 7px ui-monospace,monospace;
  letter-spacing:.22em;
}
.label { margin-bottom:5px; font:900 9px ui-monospace,monospace; }
.bar { height:8px; margin-bottom:11px; border:1px solid #91b9c21a; background:#112531; transform:none; clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%); }
.fill { box-shadow:none; }
.mapwrap {
  width:216px;
  padding:12px 12px 9px;
  border:1px solid #70f6ff24;
  background:#050d16e8;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px);
}
.maplabel { display:flex; justify-content:space-between; color:#789aaa; }
.maplabel::after { content:"LIVE"; color:var(--pink); }
#minimap { width:190px; height:112px; border-color:#70f6ff38; }
.maphelp { color:#6f8c9a; }

.overlay {
  z-index:30;
  overflow:auto;
  align-items:center;
  padding:clamp(18px,3vw,42px);
  background:
    radial-gradient(circle at 80% 18%,#17466844,transparent 30%),
    radial-gradient(circle at 18% 82%,#5b15433d,transparent 32%),
    linear-gradient(135deg,#061423f2,#02050bf9 58%,#090713f5);
}
.overlay::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:linear-gradient(#70f6ff12 1px,transparent 1px),linear-gradient(90deg,#70f6ff12 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.card { position:relative; z-index:1; width:min(1180px,100%); }
.intro {
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr);
  grid-template-areas:
    "eyebrow spec-title"
    "title specs"
    "tagline specs"
    "how specs"
    "protocol specs"
    "launch specs"
    "seed specs";
  column-gap:clamp(28px,5vw,72px);
  align-items:start;
  text-align:left;
}
.intro > .eyebrow { grid-area:eyebrow; }
.intro > h1 { grid-area:title; }
.intro > .tagline { grid-area:tagline; }
.intro > .spec-title { grid-area:spec-title; }
.intro > .specs { grid-area:specs; }
.intro > .how { grid-area:how; }
.intro > .protocols { grid-area:protocol; }
.intro > #start { grid-area:launch; justify-self:start; }
.intro > .seed { grid-area:seed; }
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--pink);
  font:1000 10px ui-monospace,monospace;
}
.eyebrow::before { content:""; width:28px; height:2px; background:var(--pink); }
h1 {
  margin:18px 0 8px;
  font-size:clamp(66px,8.5vw,118px);
  line-height:.75;
  letter-spacing:-.09em;
  text-shadow:-7px 5px 0 #123657,0 0 42px #70f6ff45;
}
h1::after {
  content:"// GRAVITY COMBAT SYSTEM";
  display:block;
  margin:16px 0 0 8px;
  color:#5e7b8b;
  font:900 8px ui-monospace,monospace;
  letter-spacing:.24em;
  text-shadow:none;
}
.tagline { margin:12px 0 24px 5px; font-size:clamp(14px,1.8vw,20px); }
.spec-title {
  margin:0 0 10px;
  padding:0 0 9px 12px;
  color:#b8d6df;
  border-bottom:1px solid #70f6ff2e;
  font-size:9px;
}
.spec-title::after { content:"  // 03 AVAILABLE"; color:#536f7d; }
.specs { display:grid; grid-template-columns:1fr; gap:10px; }
.spec {
  --ship:none;
  position:relative;
  min-height:154px;
  overflow:hidden;
  padding:21px 170px 18px 22px;
  border:1px solid color-mix(in srgb,var(--spec-color) 32%,transparent);
  border-left:4px solid color-mix(in srgb,var(--spec-color) 58%,transparent);
  color:#dffaff;
  background:linear-gradient(110deg,color-mix(in srgb,var(--spec-color) 8%,#0c2134),#06101bf2 70%);
  clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,17px 100%,0 calc(100% - 17px));
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.spec:nth-child(1) { --ship:url("sprites/player_lancer.png"); }
.spec:nth-child(2) { --ship:url("sprites/player_raker.png"); }
.spec:nth-child(3) { --ship:url("sprites/player_aegis.png"); }
.spec::before {
  content:"";
  position:absolute;
  z-index:0;
  top:2px;
  right:5px;
  width:158px;
  height:148px;
  opacity:.36;
  background:var(--ship) center/contain no-repeat;
  filter:saturate(.85) brightness(.85);
  transition:opacity .16s ease,transform .16s ease,filter .16s ease;
}
.spec::after {
  content:"SELECT";
  position:absolute;
  right:15px;
  bottom:10px;
  z-index:1;
  color:#5e7886;
  font:900 7px ui-monospace,monospace;
  letter-spacing:.18em;
}
.spec > * { position:relative; z-index:1; }
.spec:hover,.spec:focus-visible { transform:translateX(-5px); border-color:var(--spec-color); background:linear-gradient(110deg,color-mix(in srgb,var(--spec-color) 14%,#0c2134),#06101bf2 72%); }
.spec.selected { border-color:var(--spec-color); border-left-width:7px; background:linear-gradient(110deg,color-mix(in srgb,var(--spec-color) 16%,#10283c),#06101bf2 72%); box-shadow:inset 0 0 38px color-mix(in srgb,var(--spec-color) 8%,transparent),0 0 28px color-mix(in srgb,var(--spec-color) 11%,transparent); }
.spec.selected::before { opacity:.92; transform:scale(1.05); filter:saturate(1.1) brightness(1.05); }
.spec.selected::after { content:"LOCKED"; color:var(--spec-color); }
.spec em { font-size:8px; }
.spec strong { margin:7px 0 4px; font-size:24px; }
.spec b { font:900 9px ui-monospace,monospace; }
.spec span { max-width:390px; color:#8ba5b1; font-size:11px; line-height:1.45; }
.how { grid-template-columns:1fr; gap:6px; margin:0 0 18px; counter-reset:steps; }
.how div {
  position:relative;
  min-height:43px;
  padding:8px 10px 7px 52px;
  border:0;
  border-left:2px solid #70f6ff38;
  background:linear-gradient(90deg,#0a1b2ae8,transparent);
  counter-increment:steps;
}
.how div::before {
  content:"0" counter(steps);
  position:absolute;
  left:12px;
  top:10px;
  color:#507181;
  font:1000 12px ui-monospace,monospace;
}
.how b { font-size:10px; }
.how span { margin-top:3px; font-size:9px; }
.protocols { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:0 0 14px; }
.protocol {
  min-width:0;
  padding:8px 7px;
  color:#7896a4;
  border:1px solid #70f6ff24;
  background:#071522dc;
  box-shadow:none;
  clip-path:none;
  text-align:left;
}
.protocol:hover,.protocol:focus-visible { color:#dfffff; border-color:#70f6ff75; }
.protocol.selected { color:#dfffff; border-color:var(--cyan); background:#0c2636; box-shadow:inset 0 0 18px #70f6ff13; }
.protocol b { display:block; color:inherit; font:900 8px ui-monospace,monospace; letter-spacing:.07em; }
.protocol span { display:block; margin-top:3px; color:#587481; font:800 6px ui-monospace,monospace; letter-spacing:.04em; }
#start {
  position:relative;
  min-width:240px;
  margin:0;
  padding:17px 42px;
  color:#031015;
  background:linear-gradient(90deg,#a8fbff,var(--cyan));
  box-shadow:0 0 35px #70f6ff32;
}
#start::after { content:"  ›"; font-size:19px; }
.seed { margin-top:12px; }

.upgrade {
  z-index:20;
  overflow:auto;
  padding:clamp(22px,4vw,56px);
  background:
    radial-gradient(circle at 50% 20%,#153756a3,transparent 43%),
    linear-gradient(135deg,#02050bf7,#07101af5);
}
.upgradebox { width:min(1080px,100%); }
.upgradebox .eyebrow { justify-content:center; }
.upgradebox h2 { margin:12px 0 2px; font-size:clamp(42px,6vw,78px); text-shadow:-4px 3px 0 #173754; }
.upgradebox > p { margin-bottom:30px; }
.cards { gap:16px; }
.module {
  min-height:300px;
  padding:24px 23px 46px;
  border-top:4px solid var(--rarity);
  border-inline:1px solid color-mix(in srgb,var(--rarity) 35%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--rarity) 24%,transparent);
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--rarity) 10%,#0d2438),#050c16 72%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  transition:transform .16s ease,box-shadow .16s ease;
}
.module::before {
  content:"";
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin-bottom:20px;
  color:#06101a;
  background:var(--rarity);
  font:1000 15px ui-monospace,monospace;
  transform:skewX(-10deg);
}
.module:nth-child(1)::before { content:"1"; }
.module:nth-child(2)::before { content:"2"; }
.module:nth-child(3)::before { content:"3"; }
.module:hover,.module:focus-visible { transform:translateY(-8px); }
.module em { position:absolute; top:25px; right:22px; }
.module strong { margin:0 0 12px; font-size:21px; }
.module span { font-size:12px; }
.module small { margin-top:18px; padding:13px; color:#f1ffff; background:color-mix(in srgb,var(--rarity) 8%,#06101a); }
.module i { left:23px; bottom:17px; }

.install-flash { top:42%; border-width:2px; }
.result {
  width:min(720px,100%);
  padding:40px;
  border:1px solid #70f6ff2d;
  background:linear-gradient(145deg,#0b2034ec,#050b14ef);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.result h2 { text-shadow:-5px 4px 0 #173754; }
.result-actions button { min-width:190px; }

@media(max-width:980px) {
  .intro {
    grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "title" "tagline" "spec-title" "specs" "how" "protocol" "launch" "seed";
    row-gap:10px;
  }
  h1 { font-size:clamp(58px,12vw,92px); }
  .specs { grid-template-columns:repeat(3,1fr); }
  .spec { min-height:205px; padding:115px 14px 14px; }
  .spec::before { top:0; right:calc(50% - 62px); width:124px; height:120px; }
  .spec span { font-size:10px; }
  .how { grid-template-columns:repeat(3,1fr); }
  .protocols { grid-template-columns:repeat(3,1fr); }
}

@media(max-width:700px) {
  .overlay { align-items:start; padding:20px 14px 30px; }
  .specs,.cards,.how { grid-template-columns:1fr; }
  .spec { min-height:128px; padding:17px 118px 15px 16px; }
  .spec::before { right:3px; top:4px; width:116px; height:116px; }
  .spec strong { font-size:20px; }
  .how div { min-height:39px; }
  .protocols { grid-template-columns:1fr; }
  .top { padding:12px 12px 0; }
  .brand { min-height:32px; padding-left:39px; font-size:15px; }
  .brand::before { width:32px; height:32px; }
  .stats { position:absolute; top:12px; right:12px; }
  .stat { min-width:54px; padding:5px 7px; }
  .stat:nth-child(2) { display:none; }
  .stat span { font-size:6px; }
  .stat strong { font-size:12px; }
  .audio-toggle { top:52px; left:12px; }
  .mode-readout { top:83px; left:12px; min-width:176px; padding:7px 9px; }
  .build-strip { top:144px; left:12px; width:50vw; }
  .objective { top:95px; left:auto; right:12px; min-width:0; max-width:42vw; transform:none; white-space:normal; text-align:right; background:none; border:0; padding:0; }
  .bottom { left:12px; right:12px; bottom:12px; }
  .meters { width:58vw; padding:18px 10px 5px; }
  .mapwrap { width:126px; padding:8px; }
  #minimap { width:108px; height:72px; }
  .maphelp { display:none; }
  .cards { gap:10px; }
  .module { min-height:205px; }
}

@media(max-height:700px) and (min-width:701px) {
  .overlay { align-items:start; padding-top:20px; }
  .intro { grid-template-columns:.7fr 1.3fr; }
  h1 { font-size:70px; }
  .spec { min-height:126px; padding-top:14px; padding-bottom:12px; }
  .spec::before { height:120px; }
  .how div { min-height:37px; }
  .module { min-height:235px; }
}

/* HUD v3 — combat deck */
.hud::before {
  background:
    linear-gradient(90deg,#04101bc9 0,transparent 13%,transparent 87%,#04101bbd 100%),
    linear-gradient(180deg,#04101bb8 0,transparent 13%,transparent 84%,#020711d9 100%);
}
.top { align-items:flex-start; }
.brand-stack { display:grid; gap:5px; }
.brand-stack > span {
  padding-left:46px;
  color:#527281;
  font:900 7px ui-monospace,monospace;
  letter-spacing:.2em;
}
.brand { min-width:160px; }
.stats { padding:0; border-top:2px solid #70f6ff52; background:#04101bdc; }
.stat { min-width:88px; padding:9px 15px 8px; text-align:left; }
.stat span { font-size:7px; }
.stat strong { font-size:19px; letter-spacing:.08em; }
.audio-toggle { top:calc(var(--safe-top) + 57px); min-width:112px; text-align:left; }
.build-strip { top:calc(var(--safe-top) + 93px); }
.objective {
  top:var(--safe-top);
  min-width:min(610px,48vw);
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 32px;
  color:#b0c9d3;
  border-top:2px solid #70f6ff54;
  border-bottom:1px solid #70f6ff20;
  background:linear-gradient(90deg,transparent,#071725f3 12%,#071725f3 88%,transparent);
  font-size:10px;
  letter-spacing:.11em;
}
.objective::before { content:"MISSION"; color:#527281; font-size:7px; letter-spacing:.2em; }
.objective b { color:var(--cyan); font-size:11px; }
.banner { top:22%; }
.bottom {
  display:grid;
  grid-template-columns:minmax(250px,320px) minmax(420px,650px) 216px;
  align-items:end;
  justify-content:space-between;
  gap:clamp(10px,1.6vw,24px);
}
.meters {
  width:auto;
  min-width:0;
  padding:22px 17px 10px;
  border-top:2px solid #ff4ca86b;
  background:linear-gradient(135deg,#0a1622ed,#040b13e8);
}
.meters::before { content:"FLIGHT CONDITION"; }
.label { margin-bottom:6px; color:#91aeb9; font-size:8px; }
.label span:last-child { color:#efffff; font-size:10px; font-variant-numeric:tabular-nums; }
.bar { height:7px; margin-bottom:10px; }
.mode-readout {
  --mode:var(--cyan);
  position:relative;
  inset:auto;
  z-index:7;
  min-width:0;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 138px minmax(0,1fr);
  align-items:stretch;
  padding:0;
  border:1px solid color-mix(in srgb,var(--mode) 32%,transparent);
  border-bottom:3px solid var(--mode);
  background:#050e18ed;
  box-shadow:0 0 30px #0207119c,inset 0 0 28px color-mix(in srgb,var(--mode) 5%,transparent);
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%,0 13px);
}
.mode-readout::before { display:none; }
.mode-readout[data-mode="scatter"] { --mode:var(--amber); }
.mode-readout[data-mode="halo"] { --mode:var(--pink); }
.ability-node {
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:13px 14px 14px;
  overflow:hidden;
}
.ability-node:first-child { border-right:1px solid color-mix(in srgb,var(--mode) 19%,transparent); }
.ability-node:last-child { border-left:1px solid color-mix(in srgb,var(--mode) 19%,transparent); }
.ability-key {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  color:#041018;
  background:var(--mode);
  font:1000 17px ui-monospace,monospace;
  transform:skewX(-8deg);
}
.ability-copy { min-width:0; display:grid; gap:3px; }
.ability-copy small { color:#567583; font:900 7px ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; }
.ability-copy strong { overflow:hidden; color:#ecffff; font:1000 10px ui-monospace,monospace; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.ability-node[data-status="cooldown"] .ability-key { color:#77909b; background:#20333d; }
.ability-node[data-status="cooldown"] .ability-copy strong { color:#879da7; }
.ability-node[data-status="active"] .ability-key { box-shadow:0 0 24px color-mix(in srgb,var(--mode) 68%,transparent); }
.ability-node[data-status="active"] .ability-copy strong { color:var(--mode); text-shadow:0 0 12px color-mix(in srgb,var(--mode) 48%,transparent); }
.cooldown-track { position:absolute; left:0; right:0; bottom:0; height:3px; background:#13242d; }
.cooldown-track i { display:block; width:100%; height:100%; transform-origin:left; background:var(--mode); box-shadow:0 0 10px var(--mode); }
.orbit-core {
  min-height:72px;
  display:grid;
  place-items:center;
  align-content:center;
  padding:8px 10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mode) 12%,#0b1b29),#050d16);
  text-align:center;
}
.orbit-core > span { color:#668694; font:900 7px ui-monospace,monospace; letter-spacing:.17em; text-transform:uppercase; }
.orbit-core > strong { margin:2px 0 3px; color:#fff; font:1000 24px/1 ui-monospace,monospace; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.orbit-core > em { margin-top:4px; color:var(--mode); font:900 7px ui-monospace,monospace; font-style:normal; letter-spacing:.09em; white-space:nowrap; }
.orbit-pips { width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(8px,1fr)); gap:3px; }
.orbit-pips i { height:4px; background:#19303a; transform:skewX(-15deg); }
.orbit-pips i.loaded { background:var(--mode); box-shadow:0 0 8px color-mix(in srgb,var(--mode) 70%,transparent); }
.mapwrap { width:216px; }

@media(max-width:1120px) {
  .bottom { grid-template-columns:250px minmax(390px,1fr) 170px; }
  .mode-readout { grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr); }
  .ability-node { grid-template-columns:31px minmax(0,1fr); gap:7px; padding-inline:9px; }
  .ability-key { width:30px; height:32px; font-size:14px; }
  .ability-copy small { display:none; }
  .ability-copy strong { font-size:8px; }
  .orbit-core > strong { font-size:20px; }
  .mapwrap { width:170px; }
  #minimap { width:146px; height:86px; }
  .maphelp { display:none; }
}

@media(max-width:800px) {
  .top { padding:12px 12px 0; }
  .brand-stack > span { display:none; }
  .brand { min-width:0; }
  .audio-toggle { top:52px; left:12px; min-width:96px; }
  .build-strip { top:88px; left:12px; width:42vw; }
  .stats { position:absolute; top:12px; right:12px; }
  .stat { min-width:58px; padding:7px 8px; }
  .stat:nth-child(2) { display:none; }
  .objective { top:58px; left:auto; right:12px; min-width:0; max-width:58vw; min-height:34px; justify-content:flex-end; transform:none; padding:5px 0; border:0; border-top:1px solid #70f6ff38; background:none; text-align:right; white-space:normal; }
  .objective::before { display:none; }
  .bottom { left:12px; right:12px; bottom:12px; grid-template-columns:minmax(0,1fr) 122px; gap:8px; }
  .meters { padding:20px 10px 6px; }
  .mapwrap { width:122px; padding:7px; }
  #minimap { width:106px; height:68px; }
  .mode-readout { position:fixed; left:12px; right:12px; bottom:112px; width:auto; grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr); }
  .ability-node { padding-block:9px 11px; }
  .orbit-core { min-height:58px; }
}

@media(max-width:520px) {
  .mode-readout { grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr); }
  .ability-node { grid-template-columns:27px minmax(0,1fr); gap:5px; padding-inline:7px; }
  .ability-key { width:26px; height:28px; font-size:12px; }
  .ability-copy strong { font-size:7px; letter-spacing:.03em; }
  .orbit-core > span { font-size:5px; }
  .orbit-core > strong { font-size:17px; }
  .orbit-core > em { max-width:78px; overflow:hidden; font-size:6px; text-overflow:ellipsis; }
  .meters { grid-column:1 / -1; width:calc(100% - 130px); }
  .mapwrap { position:absolute; right:0; bottom:0; }
}

/* Touch flight deck */
.touch-controls { display:none; }

@media (pointer:coarse) {
  html,body,#game { touch-action:none; overscroll-behavior:none; }
  body.playing .touch-controls { display:block; }
  .touch-controls { position:fixed; inset:0; z-index:18; pointer-events:none; user-select:none; -webkit-user-select:none; }
  .touch-stick {
    --stick-color:var(--cyan);
    position:absolute;
    bottom:max(16px,env(safe-area-inset-bottom));
    width:124px;
    height:124px;
    pointer-events:auto;
    touch-action:none;
    border:1px solid color-mix(in srgb,var(--stick-color) 48%,transparent);
    border-radius:50%;
    background:radial-gradient(circle,#071725b8 0 30%,#06111bb0 31% 58%,color-mix(in srgb,var(--stick-color) 9%,transparent) 59% 100%);
    box-shadow:inset 0 0 28px color-mix(in srgb,var(--stick-color) 10%,transparent),0 0 18px #02071199;
  }
  .move-stick { left:max(16px,env(safe-area-inset-left)); }
  .aim-stick { --stick-color:var(--pink); right:max(16px,env(safe-area-inset-right)); }
  .touch-stick::before,.touch-stick::after { content:""; position:absolute; inset:50% 12px auto; height:1px; background:color-mix(in srgb,var(--stick-color) 22%,transparent); }
  .touch-stick::after { transform:rotate(90deg); }
  .touch-stick > span { position:absolute; inset:15px; border:1px dashed color-mix(in srgb,var(--stick-color) 34%,transparent); border-radius:50%; }
  .touch-stick > i {
    position:absolute;
    left:50%;
    top:50%;
    width:44px;
    height:44px;
    margin:-22px;
    border:2px solid var(--stick-color);
    border-radius:50%;
    background:color-mix(in srgb,var(--stick-color) 18%,#06111be8);
    box-shadow:0 0 18px color-mix(in srgb,var(--stick-color) 36%,transparent),inset 0 0 12px color-mix(in srgb,var(--stick-color) 22%,transparent);
    transition:transform .06s linear;
  }
  .touch-stick.active > i { background:color-mix(in srgb,var(--stick-color) 34%,#06111be8); box-shadow:0 0 25px color-mix(in srgb,var(--stick-color) 58%,transparent); }
  .touch-stick > b { position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); color:var(--stick-color); font:1000 7px ui-monospace,monospace; letter-spacing:.14em; white-space:nowrap; }
  .touch-actions {
    position:absolute;
    right:max(16px,env(safe-area-inset-right));
    bottom:152px;
    display:flex;
    gap:8px;
    pointer-events:auto;
  }
  .touch-actions button {
    min-width:46px;
    min-height:46px;
    padding:0 9px;
    display:grid;
    place-items:center;
    color:#dfffff;
    border:1px solid #70f6ff70;
    border-radius:50%;
    background:#071725d9;
    box-shadow:inset 0 0 13px #70f6ff12,0 0 15px #020711aa;
    clip-path:none;
    font:1000 10px ui-monospace,monospace;
    letter-spacing:.04em;
    touch-action:none;
  }
  .touch-actions button:nth-child(2) { border-color:#ffd16680; color:#ffd166; }
  .touch-actions button:nth-child(3) { border-color:#ff4ca880; color:#ff8fc0; }
  .touch-actions button.active { transform:scale(.9); color:#041018; background:var(--cyan); }
}

@media (pointer:coarse) and (max-width:1000px) {
  body.playing .meters,body.playing .mapwrap { display:none; }
  body.playing .bottom { display:block; }
  body.playing .mode-readout { left:152px; right:152px; bottom:max(16px,env(safe-area-inset-bottom)); width:auto; }
}

@media (pointer:coarse) and (max-width:520px) and (orientation:portrait) {
  .touch-stick { width:108px; height:108px; }
  .touch-stick > span { inset:13px; }
  .touch-stick > i { width:40px; height:40px; margin:-20px; }
  .touch-actions { right:12px; bottom:230px; }
  .touch-actions button { min-width:42px; min-height:42px; }
  body.playing .mode-readout { left:12px; right:12px; bottom:145px; }
}