: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;
}
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); }

/* Boss bar — a named health track pinned under the HUD while a boss is alive.
   The ticks sit exactly on the phase thresholds, so a break is something the
   runner can see coming rather than only feel. */
.boss-bar { position: absolute; z-index: 7; top: 96px; left: 50%; width: min(560px, calc(100% - 60px)); padding: 9px 13px 8px; border: 1px solid rgba(var(--boss-rgb, 183, 252, 100), .28); border-top: 2px solid var(--boss, #b7fc64); background: linear-gradient(180deg, rgba(10, 14, 24, .9), rgba(6, 9, 16, .72)); backdrop-filter: blur(8px); pointer-events: none; transform: translateX(-50%); animation: boss-bar-in 520ms cubic-bezier(.22,1,.36,1) both; }
.boss-bar[hidden] { display: none; }
@keyframes boss-bar-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.boss-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.boss-bar-head strong { color: var(--boss, #b7fc64); font-family: var(--display); font-size: 17px; letter-spacing: .13em; text-shadow: 0 0 18px rgba(var(--boss-rgb, 183, 252, 100), .5); }
.boss-bar-head span { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.boss-meter { position: relative; height: 9px; overflow: hidden; border: 1px solid rgba(var(--boss-rgb, 183, 252, 100), .2); background: rgba(0, 0, 0, .62); }
.boss-meter i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--boss-rgb, 183, 252, 100), .55), var(--boss, #b7fc64)); box-shadow: 0 0 14px rgba(var(--boss-rgb, 183, 252, 100), .55); transition: width 160ms linear; }
.boss-ticks { position: absolute; inset: 0; }
.boss-ticks u { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(4, 7, 13, .85); }
.boss-ticks u.is-broken { background: rgba(var(--boss-rgb, 183, 252, 100), .9); box-shadow: 0 0 8px rgba(var(--boss-rgb, 183, 252, 100), .8); }
.boss-bar small { display: block; margin-top: 5px; color: var(--dim); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }

/* Entrance card — the arena slows, the name lands, then the fight starts. */
.boss-card { position: absolute; z-index: 9; top: 38%; right: 20px; left: 20px; display: grid; justify-items: center; gap: 4px; text-align: center; pointer-events: none; }
.boss-card[hidden] { display: none; }
/* An evolution lands higher than a boss card so the two never stack on the
   same line if a build completes on a boss wave. */
.evolution-card { top: 26%; }
.boss-card small { color: var(--boss, #b7fc64); font-size: 8px; font-weight: 900; letter-spacing: .42em; text-transform: uppercase; animation: boss-card-tag 1.7s ease both; }
.boss-card strong { color: var(--ink); font-family: var(--display); font-size: clamp(34px, 6.4vw, 76px); font-weight: 900; letter-spacing: .1em; text-shadow: 0 0 34px rgba(var(--boss-rgb, 183, 252, 100), .8); animation: boss-card-name 1.9s cubic-bezier(.16,1,.3,1) both; }
.boss-card span { color: var(--muted); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; animation: boss-card-tag 1.9s ease .12s both; }
@keyframes boss-card-name { 0% { opacity: 0; letter-spacing: .55em; transform: scale(1.12); } 22%, 72% { opacity: 1; letter-spacing: .1em; transform: scale(1); } 100% { opacity: 0; transform: scale(.98); } }
@keyframes boss-card-tag { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }

.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, .home-screen, .launch-screen, .versus-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; }
.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-panel { width: min(760px, 100%); }
.roster-scroll { position: relative; }
.roster-grid { display: grid; max-height: min(60vh, 560px); overflow-y: auto; padding-right: 6px; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); scrollbar-width: thin; scroll-behavior: smooth; }
.roster-grid::-webkit-scrollbar { width: 6px; }
.roster-grid::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(var(--pilot-rgb), .35); }
.roster-scroll::after { position: absolute; right: 6px; bottom: 0; left: 0; height: 54px; background: linear-gradient(to top, rgba(6, 9, 15, .96), transparent); content: ""; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.roster-scroll.is-scrollable::after { opacity: 1; }
.roster-scroll.is-scrolled-end::after { opacity: 0; }
.roster-more { position: absolute; bottom: 9px; left: 50%; z-index: 1; display: flex; align-items: center; gap: 5px; color: var(--pilot); font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity 200ms ease; }
.roster-scroll.is-scrollable .roster-more { opacity: .85; }
.roster-scroll.is-scrolled-end .roster-more { opacity: 0; }
.roster-more svg { width: 11px; height: 11px; stroke-width: 2.6; animation: nudge 1.5s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.runner-card { position: relative; overflow: hidden; padding: 11px; 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: 38px; height: 38px; 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: 21px; 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: 7px 0 1px; font-family: var(--display); font-size: 19px; letter-spacing: .08em; text-transform: uppercase; }.runner-card > p { margin: 0 0 6px; color: var(--card-accent); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stat-line { display: grid; grid-template-columns: 38px repeat(5, 1fr); align-items: center; gap: 3px; margin-top: 4px; }.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); }


@media (max-width: 1120px) {
  .title-layout, .home-layout, .versus-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 { padding: 10px; }
  .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, .home-screen, .launch-screen, .versus-screen { align-items: flex-start; }.title-layout, .home-layout, .versus-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; }
}

@media (max-width: 560px) {
  .game-stage { min-height: 590px; }.roster-grid { max-height: none; overflow: visible; padding-right: 0; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }.roster-scroll::after, .roster-more { display: none; }.runner-card { min-height: 118px; }
  .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; } }

/* ============================================================ 2.1 additions */

/* Home + versus share the two-column shell used by the launch screen. */
.home-layout, .versus-layout { position: relative; z-index: 1; display: grid; width: 100%; grid-template-columns: minmax(330px, .85fr) minmax(520px, 1.15fr); align-items: center; gap: clamp(30px, 5vw, 76px); padding: clamp(45px, 6vh, 70px) clamp(30px, 5vw, 74px) 82px; text-align: left; }
.launch-screen h2, .versus-screen h2 { margin: 0; font-family: var(--display); font-size: clamp(40px, 5vw, 62px); font-weight: 900; letter-spacing: .035em; line-height: .86; }

/* --- mode select ------------------------------------------------------- */
.mode-panel { width: min(700px, 100%); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-card { display: grid; align-content: start; gap: 10px; padding: 22px 20px 20px; border: 1px solid var(--line); border-top: 2px solid rgba(var(--pilot-rgb), .5); background: linear-gradient(160deg, rgba(16, 23, 37, .92), rgba(7, 11, 19, .92)); color: var(--ink); cursor: pointer; text-align: left; transition: 180ms ease; }
.mode-card:hover { border-color: rgba(var(--pilot-rgb), .55); box-shadow: 0 18px 44px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(var(--pilot-rgb), .08); transform: translateY(-3px); }
.mode-card h3 { margin: 0; font-family: var(--display); font-size: 25px; letter-spacing: .06em; }
.mode-card p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.6; }
.mode-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(var(--pilot-rgb), .35); border-radius: 3px; background: rgba(var(--pilot-rgb), .08); color: var(--pilot); }
.mode-icon svg { width: 21px; height: 21px; }
.mode-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--pilot); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.mode-go svg { width: 15px; height: 15px; stroke-width: 2.4; }
.versus-card { border-top-color: var(--gold); }
.versus-card .mode-icon { border-color: rgba(255, 209, 102, .4); background: rgba(255, 209, 102, .08); color: var(--gold); }
.versus-card .mode-go { color: var(--gold); }
.home-settings { margin: 20px 0 0; text-align: left; }

/* --- aim mode picker --------------------------------------------------- */
.aim-picker { margin: 0 0 22px; padding: 0; border: 0; }
.aim-picker legend { display: grid; gap: 2px; padding: 0 0 9px; }
.aim-picker legend span { color: var(--pilot); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.aim-picker legend small { color: var(--dim); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.aim-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aim-option { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid var(--line); background: rgba(10, 15, 25, .8); color: var(--ink); cursor: pointer; text-align: left; transition: 160ms ease; }
.aim-option strong { font-family: var(--display); font-size: 15px; letter-spacing: .07em; }
.aim-option p { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.aim-option:hover { border-color: rgba(var(--pilot-rgb), .45); }
.aim-option.is-selected { border-color: var(--pilot); background: rgba(var(--pilot-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--pilot-rgb), .2); }
.aim-option.is-selected strong { color: var(--pilot); }
.aim-options.compact .aim-option { padding: 10px 12px; }

/* --- versus lobby ------------------------------------------------------ */
.versus-main { max-width: 560px; }
.lobby-form { margin: 18px 0 0; }
.lobby-form label { display: block; margin-bottom: 6px; color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.lobby-row { display: flex; gap: 9px; }
.lobby-row input { flex: 1; min-width: 0; min-height: 47px; padding: 0 14px; border: 1px solid var(--line); background: rgba(6, 9, 16, .9); color: var(--ink); font-family: var(--display); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; }
.lobby-row input:focus { border-color: var(--pilot); outline: none; box-shadow: 0 0 0 3px rgba(var(--pilot-rgb), .12); }
.primary-button.compact { min-height: 47px; padding: 0 17px; }
.lobby-message { min-height: 15px; margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.lobby-message[data-tone="good"] { color: var(--pilot); }
.lobby-message[data-tone="warn"] { color: var(--danger); }

.lobby-roster { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); background: rgba(9, 14, 23, .82); }
.lobby-roster-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.lobby-roster-head span { color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.lobby-roster-head strong { font-family: var(--display); font-size: 13px; letter-spacing: .1em; color: var(--pilot); }
.lobby-roster-list { display: flex; flex-direction: column; gap: 7px; max-height: 168px; overflow-y: auto; }
.lobby-roster-list:empty { display: none; }
.lobby-runner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 42px; padding: 0 8px 0 12px; border: 1px solid var(--line); background: rgba(6, 9, 16, .9); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.lobby-runner:hover:not(:disabled) { border-color: var(--pilot); background: rgba(var(--pilot-rgb), .08); }
.lobby-runner:disabled { cursor: default; opacity: .55; }
.lobby-runner strong { font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.lobby-runner em { flex: none; font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--pilot); }
.lobby-runner.is-busy em { color: var(--gold); }
.lobby-runner.is-away em { color: var(--dim); }
.lobby-roster-empty { display: block; color: var(--muted); font-size: 9.5px; line-height: 1.55; }

.invite-card, .vote-card, .matchup-card { margin-top: 16px; padding: 16px 18px; border: 1px solid rgba(var(--pilot-rgb), .3); border-left: 2px solid var(--pilot); background: rgba(11, 17, 28, .9); }
.invite-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.invite-card span { display: block; color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.invite-card strong { font-family: var(--display); font-size: 21px; letter-spacing: .08em; }
.invite-actions { display: flex; align-items: center; gap: 10px; }
.invite-actions .text-button { margin: 0; }

.vote-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.vote-head span { color: var(--pilot); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.vote-head strong { font-family: var(--display); font-size: 19px; letter-spacing: .08em; }
.vote-card > p { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.vote-status { margin: 11px 0 0 !important; color: var(--gold) !important; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; }

.matchup-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; text-align: center; }
.matchup-side span { display: block; font-family: var(--display); font-size: 20px; letter-spacing: .08em; }
.matchup-side small { color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.matchup-vs { color: var(--gold); font-family: var(--display); font-size: 15px; letter-spacing: .12em; }
.versus-actions { margin-top: 22px; }
.versus-actions .deploy-button:disabled { border-color: var(--line); background: rgba(20, 27, 41, .9); color: var(--dim); box-shadow: none; cursor: not-allowed; transform: none; }
.versus-actions .text-button { margin-left: 0; text-align: left; }
.seed-readout { display: grid; gap: 3px; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line); background: rgba(8, 12, 20, .8); }
.seed-readout span { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.seed-readout strong { font-family: var(--display); font-size: 16px; letter-spacing: .1em; color: var(--pilot); overflow-wrap: anywhere; }
.seed-readout small { color: var(--dim); font-size: 8px; }

/* --- rival telemetry --------------------------------------------------- */
.rival-readout { display: grid; gap: 7px; padding: 11px 13px; }
.rival-head { display: flex; align-items: center; gap: 7px; }
.rival-head span { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rival-head strong { flex: 1; font-family: var(--display); font-size: 15px; letter-spacing: .07em; }
.rival-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.rival-dot.is-down { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.rival-stats { display: flex; gap: 16px; }
.rival-stats span { display: block; color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.rival-stats strong { font-family: var(--display); font-size: 17px; letter-spacing: .06em; }
.rival-meter i { background: linear-gradient(90deg, var(--gold), var(--danger)); }
.rival-readout small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* --- match result ------------------------------------------------------ */
.result-panel { width: min(560px, 100%); }
.result-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 22px 0; }
.result-side { display: grid; gap: 3px; padding: 16px 12px; border: 1px solid var(--line); background: rgba(8, 12, 20, .7); }
.result-side.is-winner { border-color: var(--pilot); background: rgba(var(--pilot-rgb), .1); }
.result-side span { color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.result-side strong { font-family: var(--display); font-size: 16px; letter-spacing: .07em; }
.result-side b { font-family: var(--display); font-size: 30px; letter-spacing: .05em; color: var(--pilot); }
.result-side small { color: var(--muted); font-size: 8.5px; }
.versus-pending { margin: 4px 0 14px !important; color: var(--gold) !important; font-size: 10px; font-weight: 700; letter-spacing: .05em; }

/* --- settings drawer --------------------------------------------------- */
.settings-drawer { position: absolute; z-index: 30; inset: 0; display: flex; justify-content: flex-end; background: rgba(3, 5, 10, .72); backdrop-filter: blur(3px); }
.settings-drawer[hidden] { display: none; }
.settings-panel { display: grid; width: min(420px, 100%); align-content: start; gap: 20px; overflow-y: auto; padding: 26px 26px 40px; border-left: 1px solid rgba(var(--pilot-rgb), .28); background: linear-gradient(160deg, rgba(15, 21, 34, .99), rgba(7, 11, 19, .99)); box-shadow: -25px 0 60px rgba(0, 0, 0, .5); text-align: left; }
.settings-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.settings-head h2 { margin: 0; font-family: var(--display); font-size: 34px; letter-spacing: .05em; }
.settings-group { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.settings-group h3 { margin: 0; color: var(--pilot); font-size: 8px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.settings-note { margin: 0; color: var(--dim); font-size: 9.5px; line-height: 1.55; }
.slider-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.slider-row label { color: var(--muted); font-size: 10px; font-weight: 700; }
.slider-row output { grid-row: 1; grid-column: 2; font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: var(--pilot); }
.slider-row input[type="range"] { grid-row: 2; grid-column: 1 / -1; width: 100%; height: 4px; appearance: none; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--pilot-rgb), .55), rgba(var(--pilot-rgb), .12)); cursor: pointer; }
.slider-row input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; appearance: none; border: 1px solid var(--pilot); border-radius: 50%; background: #0b1420; box-shadow: 0 0 12px rgba(var(--pilot-rgb), .35); }
.slider-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 1px solid var(--pilot); border-radius: 50%; background: #0b1420; }
.slider-row.text-row { grid-template-columns: 1fr; }
.slider-row.text-row input { min-height: 42px; padding: 0 13px; border: 1px solid var(--line); background: rgba(6, 9, 16, .9); color: var(--ink); font-family: var(--display); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.slider-row.text-row input:focus { border-color: var(--pilot); outline: none; }
#resetSettings { margin: 0; text-align: left; }
.network-status.is-offline i { background: var(--dim); box-shadow: none; animation: none; }
.network-status.is-offline strong { color: var(--dim); }

/* --- touch aim stick --------------------------------------------------- */
.touch-actions { flex-direction: row; align-items: flex-end; }
.touch-buttons { display: flex; align-items: end; gap: 11px; }
.joystick-zone small { position: absolute; bottom: -14px; left: 50%; color: var(--dim); font-size: 6px; font-weight: 900; letter-spacing: .14em; transform: translateX(-50%); }
.aim-zone { width: 92px; height: 92px; margin-right: 4px; border-color: rgba(255, 209, 102, .35); background: rgba(255, 209, 102, .06); }
.aim-zone[hidden] { display: none; }
.aim-zone .joystick-knob { border-color: var(--gold); background: rgba(255, 209, 102, .14); box-shadow: 0 0 18px rgba(255, 209, 102, .2); }

@media (max-width: 850px) {
  .home-layout, .versus-layout { display: block; overflow-y: auto; padding: 43px 18px 78px; }
  .mode-panel, .versus-main { max-width: none; width: 100%; margin: 26px auto 0; }
  .mode-grid { grid-template-columns: 1fr; }
  .settings-panel { width: 100%; border-left: 0; }
  .result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .aim-options { grid-template-columns: 1fr; }
  .lobby-row { flex-direction: column; }
  .aim-zone { width: 78px; height: 78px; }
}

/* ------------------------------------------------- upgrade rarity + stacks */
.upgrade-rarity { position: absolute; top: 15px; right: 16px; padding: 3px 7px; border: 1px solid var(--upgrade-color); border-radius: 2px; color: var(--upgrade-color); font-size: 6px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.upgrade-card[data-rarity="rare"] { border-color: color-mix(in srgb, var(--upgrade-color) 45%, var(--line)); }
.upgrade-card[data-rarity="rare"]::after { opacity: .18; }
/* Exotics are the build-defining, runner-specific pulls — make them read that way. */
.upgrade-card[data-rarity="exotic"] { border-color: var(--upgrade-color); box-shadow: inset 0 0 34px color-mix(in srgb, var(--upgrade-color) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--upgrade-color) 30%, transparent); }
.upgrade-card[data-rarity="exotic"]::after { opacity: .26; }
.upgrade-card[data-rarity="exotic"] .upgrade-rarity { opacity: 1; background: color-mix(in srgb, var(--upgrade-color) 16%, transparent); }
/* The stack count used to be pinned to the bottom of the card. Once a card can
   also carry an evolution badge the two land on top of each other on a narrow
   card, so both now sit in the flow under the copy, in reading order. */
.upgrade-stack { display: block; margin-top: 12px; color: var(--dim); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
/* The evolution line sits in the card flow rather than pinned to it: pinned, it
   would sit on top of the stack count on a narrow card. */
.upgrade-evolution { display: inline-block; margin-top: 10px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--evolution-color) 45%, var(--line)); color: var(--evolution-color); font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.upgrade-evolution.is-ready { border-color: var(--evolution-color); background: color-mix(in srgb, var(--evolution-color) 16%, transparent); animation: evolution-ready 1.5s ease-in-out infinite; }
@keyframes evolution-ready {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--evolution-color) 40%, transparent); }
  50% { box-shadow: 0 0 14px 1px color-mix(in srgb, var(--evolution-color) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .upgrade-evolution.is-ready { animation: none; } }
@media (max-width: 850px) {
  .upgrade-stack { margin-top: 9px; }
  .upgrade-rarity { top: 12px; right: 52px; }
  .upgrade-evolution { margin-top: 7px; }
}

.evolution-list { display: flex; flex-direction: column; gap: 7px; }
.evolution-row { padding: 10px 12px; border: 1px solid var(--line); border-left: 2px solid var(--evolution-color); background: rgba(6, 10, 18, .5); }
.evolution-row.is-earned { background: color-mix(in srgb, var(--evolution-color) 9%, rgba(6, 10, 18, .5)); }
.evolution-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.evolution-row strong { font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.evolution-row.is-earned strong { color: var(--evolution-color); }
.evolution-row em { flex: none; font-style: normal; font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.evolution-row.is-earned em { color: var(--evolution-color); }
.evolution-row p { margin: 5px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.evolution-row small { display: block; margin-top: 6px; color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------- meta-progression surfaces */

.core-record strong { color: var(--lime, #b7fc64); }

.salvage { margin: 16px 0 4px; padding: 12px 14px; border: 1px solid rgba(183, 252, 100, .2); border-left: 2px solid #b7fc64; background: rgba(183, 252, 100, .04); text-align: left; }
.salvage-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.salvage-head span { color: var(--dim); font-size: 7px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.salvage-head strong { color: #b7fc64; font-family: var(--display); font-size: 24px; letter-spacing: .06em; text-shadow: 0 0 20px rgba(183, 252, 100, .45); }
.salvage-lines { display: grid; margin: 0; padding: 0; gap: 3px; list-style: none; }
.salvage-lines li { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.salvage-lines li b { color: var(--ink); font-weight: 700; }
.salvage-mastery { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(175, 202, 235, .12); }
.mastery-meter i { display: block; height: 100%; background: linear-gradient(90deg, rgba(172, 124, 255, .5), #ac7cff); transition: width 420ms cubic-bezier(.22,1,.36,1); }
.mastery-best { color: #ac7cff; }

.record-screen { align-items: stretch; padding: 0; background: linear-gradient(100deg, rgba(4, 7, 13, .95), rgba(4, 7, 13, .74) 56%, rgba(4, 7, 13, .93)); }
.record-layout { position: relative; z-index: 1; display: grid; width: 100%; align-content: start; gap: clamp(16px, 2.4vw, 30px); grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); padding: clamp(34px, 5vh, 58px) clamp(18px, 4vw, 64px) 40px; text-align: left; }
.record-panel { padding: 16px 18px; }
.record-grid { display: grid; margin-bottom: 6px; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.record-stat { padding: 9px 10px; border: 1px solid var(--line); background: rgba(6, 10, 18, .5); }
.record-stat span { display: block; color: var(--dim); font-size: 6px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.record-stat strong { display: block; margin-top: 4px; font-family: var(--display); font-size: 19px; letter-spacing: .05em; }
.mastery-heading { margin-top: 16px; }
.mastery-list { display: grid; max-height: min(30vh, 250px); overflow-y: auto; padding-right: 5px; gap: 5px; scrollbar-width: thin; }
.mastery-list::-webkit-scrollbar { width: 5px; }
.mastery-list::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(var(--pilot-rgb), .3); }
.mastery-row { display: grid; align-items: center; gap: 3px 10px; grid-template-columns: 1fr auto; padding: 7px 9px; border: 1px solid var(--line); background: rgba(6, 10, 18, .45); }
.mastery-row strong { font-family: var(--display); font-size: 12px; letter-spacing: .09em; }
.mastery-row em { color: #ac7cff; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.mastery-row .meter { grid-column: 1/-1; height: 3px; }
.mastery-row.is-mastered em { color: var(--gold); }

.armoury-copy { margin: 0 0 12px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.augment-grid { display: grid; gap: 7px; }
.augment-card { display: grid; align-items: center; width: 100%; gap: 2px 12px; grid-template-columns: 1fr auto; padding: 10px 11px; border: 1px solid var(--line); border-left: 2px solid var(--augment, #50e5ff); background: rgba(6, 10, 18, .5); color: inherit; cursor: pointer; text-align: left; transition: background 150ms ease, border-color 150ms ease, transform 150ms ease; font: inherit; }
.augment-card:hover:not(:disabled) { border-color: var(--augment, #50e5ff); background: rgba(var(--pilot-rgb), .07); transform: translateX(2px); }
.augment-card:disabled { cursor: default; opacity: .5; }
.augment-card strong { font-family: var(--display); font-size: 13px; letter-spacing: .09em; }
.augment-card small { color: var(--muted); font-size: 8px; letter-spacing: .06em; }
.augment-price { color: var(--augment, #50e5ff); font-family: var(--display); font-size: 15px; letter-spacing: .05em; text-align: right; }
.augment-card.is-maxed .augment-price { color: var(--gold); }
.augment-card.is-broke .augment-price { color: var(--dim); }
.augment-pips { display: flex; grid-column: 1/-1; gap: 3px; margin-top: 5px; }
.augment-pips i { width: 100%; height: 3px; background: rgba(255, 255, 255, .08); }
.augment-pips i.is-owned { background: var(--augment, #50e5ff); box-shadow: 0 0 7px var(--augment, #50e5ff); }
/* In the flow rather than pinned to the screen. Pinned, it sat on top of the
   scrolled content once the panels were taller than the viewport — which on a
   phone meant the only way out of the armoury was unclickable. */
.record-back { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }

/* Leaderboards */
.boards-layout { position: relative; z-index: 1; display: grid; width: 100%; max-width: 820px; align-content: start; gap: clamp(14px, 2vw, 22px); padding: clamp(34px, 5vh, 58px) clamp(18px, 4vw, 64px) 40px; text-align: left; }
.board-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.board-tab { flex: 1 1 140px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); background: rgba(6, 9, 16, .9); color: var(--muted); font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.board-tab:hover { border-color: var(--pilot); color: var(--ink); }
.board-tab.is-selected { border-color: var(--pilot); background: rgba(var(--pilot-rgb), .12); color: var(--pilot); }
.board-brief { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.board-table { display: flex; flex-direction: column; gap: 5px; min-height: 120px; }
.board-row { display: grid; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); background: rgba(6, 10, 18, .55); grid-template-columns: 34px 1fr auto; }
.board-row.is-you { border-color: var(--pilot); background: rgba(var(--pilot-rgb), .1); }
.board-row i { font-family: var(--display); font-size: 15px; font-style: normal; color: var(--dim); letter-spacing: .05em; }
.board-row.is-podium i { color: var(--gold); }
.board-row strong { overflow: hidden; font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.board-row small { display: block; margin-top: 2px; color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.board-row b { font-family: var(--display); font-size: 19px; letter-spacing: .04em; color: var(--pilot); }
.board-empty { padding: 26px 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; }
.board-note { min-height: 14px; margin: 12px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.55; }
.board-note[data-tone="good"] { color: var(--pilot); }
.board-note[data-tone="warn"] { color: var(--danger); }
.board-result { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.board-result[data-tone="good"] { color: var(--pilot); }
.board-result[data-tone="warn"] { color: var(--danger); }

@media (max-width: 900px) {
  .record-layout { grid-template-columns: 1fr; }
}

.runner-mastery { display: block; margin-top: 5px; color: #ac7cff; font-size: 6px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.runner-mastery.is-mastered { color: var(--gold); }
.mastery-detail { color: var(--dim); font-size: 6px; letter-spacing: .1em; }

/* The record screen sits over a live arena, so the run HUD has to get out of
   the way — otherwise the hull bar and the ability dock read through it. */
body[data-screen="record"] .hud, body[data-screen="record"] .action-dock { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ threat tiers */

.threat-picker { margin-bottom: 20px; }
.threat-options { display: flex; flex-wrap: wrap; gap: 5px; }
.threat-option { min-width: 42px; padding: 7px 9px; border: 1px solid var(--line); background: rgba(6, 10, 18, .5); color: var(--muted); cursor: pointer; font: inherit; font-family: var(--display); font-size: 12px; letter-spacing: .08em; transition: border-color 140ms ease, color 140ms ease, background 140ms ease; }
.threat-option:hover:not(:disabled) { border-color: var(--tier, #50e5ff); color: var(--ink); }
.threat-option.is-selected { border-color: var(--tier, #50e5ff); background: rgba(var(--pilot-rgb), .1); color: var(--tier, #50e5ff); box-shadow: inset 0 -2px var(--tier, #50e5ff); }
.threat-option:disabled { cursor: not-allowed; opacity: .32; }
.threat-brief { margin: 9px 0 0; color: var(--tier, #50e5ff); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.threat-picker legend small { color: var(--dim); }
.threat-stat strong { color: var(--tier, #50e5ff); }
.threat-best { color: var(--gold); }
.tier-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; border: 1px solid var(--line); border-left: 2px solid var(--tier, #50e5ff); background: rgba(6, 10, 18, .45); }
.tier-row strong { font-family: var(--display); font-size: 11px; letter-spacing: .09em; }
.tier-row span { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.tier-record { display: grid; gap: 4px; margin-bottom: 4px; }

/* --------------------------------------------------------------- daily rift */

.mode-grid-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.daily-card { position: relative; border-left: 2px solid var(--gold); }
.daily-flags { display: flex; position: absolute; top: 11px; right: 11px; align-items: center; gap: 6px; }
.daily-flags b { padding: 2px 6px; border: 1px solid var(--daily, #ffd166); color: var(--daily, #ffd166); font-family: var(--display); font-size: 10px; letter-spacing: .07em; }
.daily-flags i { color: var(--gold); font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .13em; }
.daily-card.is-done { opacity: .82; }
.daily-card.is-done .mode-go { color: var(--dim); }
.daily-result { display: grid; margin: 16px 0 4px; padding: 11px 13px; gap: 5px; border: 1px solid rgba(255, 209, 102, .22); border-left: 2px solid var(--gold); background: rgba(255, 209, 102, .05); text-align: left; }
.daily-result span { color: var(--dim); font-size: 7px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.daily-result strong { color: var(--gold); font-family: var(--display); font-size: 17px; letter-spacing: .07em; }
.daily-result small { color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------ build readout */

.build-readout { margin-top: 16px; text-align: left; }
.build-readout:empty { display: none; }
.build-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.build-head span { color: var(--dim); font-size: 7px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.build-head strong { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.build-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.build-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid rgba(var(--pilot-rgb), .18); border-left: 2px solid var(--chip, #50e5ff); background: rgba(6, 10, 18, .55); }
.build-chip b { color: var(--ink); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.build-chip i { color: var(--chip, #50e5ff); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .04em; }
.build-chip.is-passive { border-left-color: var(--pilot); background: rgba(var(--pilot-rgb), .1); }
.build-chip.is-passive b { color: var(--pilot); }
.build-empty { color: var(--dim); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

/* On the upgrade screen the readout sits under the three cards and must not
   push them off a short viewport. */
.upgrade-screen .build-readout { width: min(920px, 100%); max-height: 22vh; overflow-y: auto; margin-top: 20px; scrollbar-width: thin; }
.upgrade-screen { flex-direction: column; }

/* --------------------------------------------------------------- versus set */

.series-board { margin: 16px 0 4px; padding: 12px 14px; border: 1px solid rgba(var(--pilot-rgb), .2); border-left: 2px solid var(--pilot); background: rgba(var(--pilot-rgb), .05); text-align: left; }
.series-board[hidden] { display: none; }
.series-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.series-head span { color: var(--dim); font-size: 7px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.series-head strong { color: var(--ink); font-family: var(--display); font-size: 22px; letter-spacing: .1em; }
.series-pips { display: flex; gap: 5px; }
.series-pips i { flex: 1; height: 5px; background: rgba(255, 255, 255, .09); }
.series-pips i.is-you { background: var(--pilot); box-shadow: 0 0 9px rgba(var(--pilot-rgb), .7); }
.series-pips i.is-rival { background: var(--red); box-shadow: 0 0 9px rgba(255, 111, 123, .6); }
.series-pips i.is-draw { background: var(--dim); }
.series-board small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }