/* PULSE//BREAK — HD interface layer
   A final, non-destructive override over the original game UI. */

:root {
  --hd-void: #020711;
  --hd-navy: #071424;
  --hd-panel: rgba(7, 18, 34, 0.82);
  --hd-panel-solid: rgba(7, 17, 31, 0.96);
  --hd-line: rgba(137, 188, 226, 0.2);
  --hd-line-hot: rgba(63, 230, 255, 0.58);
  --hd-cyan: #42eaff;
  --hd-cyan-soft: #bdf7ff;
  --hd-violet: #8b77ff;
  --hd-magenta: #f457c5;
  --hd-gold: #f1c96d;
  --hd-red: #ff6178;
  --hd-text: #edf8ff;
  --hd-muted: #88a0b8;
  --hd-radius: 14px;
  --hd-shadow: 0 26px 72px rgba(0, 0, 0, 0.5);
  --font-ui: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
  --font-display: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
}

body,
button,
input { font-family: var(--font-ui); }

button { -webkit-font-smoothing: antialiased; }

.scanlines { display: none; }

#app {
  color: var(--hd-text);
  background-color: var(--hd-void);
}

.vignette {
  z-index: 2;
  background: radial-gradient(circle at 52% 46%, transparent 24%, rgba(1, 5, 14, 0.12) 56%, rgba(1, 4, 11, 0.8) 100%);
}

.screen { z-index: 20; }

.glass-panel,
.modal-card,
.results-card,
.upgrade-card,
.protocol-row,
.hangar-card,
.setting-row,
.instruction,
.build-chip,
.toast {
  border-image: none !important;
  border: 1px solid var(--hd-line) !important;
  border-radius: var(--hd-radius);
  background: linear-gradient(145deg, rgba(13, 29, 50, 0.88), rgba(5, 13, 27, 0.82)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 14px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(1.15);
}

.glass-panel::before,
.glass-panel::after,
.modal-card::before,
.results-card::before,
.upgrade-card::before,
.upgrade-card::after,
.button::before,
.button-ghost::after { display: none !important; }

.eyebrow {
  gap: 10px;
  color: var(--hd-gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.eyebrow.cyan { color: var(--hd-cyan); }
.status-dot { background: var(--hd-cyan); box-shadow: 0 0 15px rgba(66, 234, 255, 0.88); }

/* ---------------------------------------------------------------- menu */
.menu-screen {
  place-items: stretch;
  overflow-x: hidden;
  padding: max(32px, env(safe-area-inset-top)) max(42px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(42px, env(safe-area-inset-left));
  background:
    linear-gradient(90deg, rgba(2, 7, 17, 0.98) 0%, rgba(3, 9, 20, 0.88) 31%, rgba(3, 9, 20, 0.2) 66%, rgba(2, 7, 17, 0.56) 100%),
    radial-gradient(circle at 76% 52%, rgba(51, 125, 166, 0.12), transparent 32%);
}

.menu-screen::before {
  opacity: 1;
  background:
    radial-gradient(ellipse at 76% 64%, rgba(66, 234, 255, 0.08), transparent 28%),
    linear-gradient(90deg, transparent 0 52%, rgba(66, 234, 255, 0.08) 52.1%, transparent 52.2%),
    linear-gradient(0deg, transparent 0 57%, rgba(139, 119, 255, 0.07) 57.1%, transparent 57.2%);
  animation: none;
}

.menu-shell {
  width: min(1480px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(24px, 5vh, 72px) 0 0;
  text-align: left;
}

.logo {
  display: grid;
  justify-content: start;
  gap: 8px;
  margin: 24px 0 8px;
  background: none;
  -webkit-text-fill-color: currentColor;
  line-height: 1;
}

.logo-wordmark {
  color: var(--hd-text);
  font-family: var(--font-display);
  font-size: clamp(52px, 6.25vw, 104px);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: -0.065em;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.46);
}

.logo-wordmark > span {
  margin: 0 0.06em;
  color: var(--hd-cyan);
  font-weight: 300;
  letter-spacing: -0.18em;
  text-shadow: 0 0 20px rgba(66, 234, 255, 0.55);
}

.logo small {
  justify-self: start;
  margin-left: 3px;
  color: var(--hd-gold);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.54em;
}

.tagline {
  margin: 20px 0 0;
  color: #a5b7c7;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.menu-hero {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -2%;
  width: min(61vw, 880px);
  height: min(68vh, 660px);
  transform: translateY(-48%);
  pointer-events: none;
}

.menu-hero img {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 96%;
  height: auto;
  max-height: 94%;
  transform: translate(-50%, -50%) rotate(-4deg);
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 24px rgba(66, 234, 255, 0.22));
  animation: hd-ship-float 7s ease-in-out infinite;
}

.menu-ship-aura {
  position: absolute;
  z-index: 1;
  inset: 18% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(139, 119, 255, 0.16), rgba(66, 234, 255, 0.08) 38%, transparent 70%);
  filter: blur(18px);
}

.menu-orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(66, 234, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
}

.orbit-a { width: 88%; height: 60%; }
.orbit-b { width: 68%; height: 88%; border-color: rgba(139, 119, 255, 0.16); transform: translate(-50%, -50%) rotate(58deg); }

.menu-hero-caption {
  position: absolute;
  z-index: 4;
  right: 5%;
  bottom: 1%;
  display: grid;
  gap: 4px;
  border-left: 2px solid var(--hd-cyan);
  padding: 8px 12px;
  text-align: left;
}

.menu-hero-caption span { color: var(--hd-muted); font-size: 9px; letter-spacing: 0.22em; }
.menu-hero-caption strong { color: var(--hd-cyan-soft); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; }
.menu-hero-caption small { color: var(--hd-gold); font: 700 8px var(--font-ui); letter-spacing: 0.16em; }

.menu-command-deck {
  position: absolute;
  z-index: 5;
  bottom: 42px;
  left: 0;
  display: grid;
  width: min(430px, 43vw);
  gap: 12px;
}

.menu-actions {
  width: 100%;
  margin: 0;
}

.button {
  min-height: 46px;
  border-image: none !important;
  border: 1px solid rgba(133, 179, 214, 0.28) !important;
  border-radius: 9px;
  padding: 0 18px;
  color: #dbeaf5;
  background: rgba(7, 19, 35, 0.72) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 8px 20px rgba(0, 0, 0, 0.22) !important;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  border-color: rgba(66, 234, 255, 0.72) !important;
  color: #fff;
  background: rgba(13, 35, 57, 0.9) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 0 20px rgba(66, 234, 255, 0.1) !important;
  transform: translateY(-1px);
}

.button:active { transform: translateY(1px); }

.button-primary,
.button-primary:hover {
  border-color: #ffe4a0 !important;
  color: #14100a;
  background: linear-gradient(135deg, #f8dda0, #dba94b) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 10px 28px rgba(230, 177, 73, 0.22) !important;
  text-shadow: none;
}

.button-primary:hover { box-shadow: inset 0 1px rgba(255, 255, 255, 0.66), 0 13px 34px rgba(230, 177, 73, 0.34) !important; }
.button-danger { border-color: rgba(255, 97, 120, 0.5) !important; color: #ffafbb; background: rgba(75, 15, 31, 0.65) !important; }
.button-overclock,
.button-overclock:hover { border-color: rgba(241, 201, 109, 0.72) !important; color: var(--hd-gold); background: linear-gradient(135deg, rgba(73, 51, 15, 0.92), rgba(42, 19, 47, 0.92)) !important; }
.button-xl { min-height: 58px; font-size: 14px; }
.button kbd { border: 0; border-radius: 5px; padding: 5px 8px; color: inherit; background: rgba(4, 9, 16, 0.2); font: 700 9px var(--font-ui); }

.button-daily {
  min-height: 48px;
  border-color: rgba(66, 234, 255, 0.26) !important;
  border-radius: 9px;
  color: var(--hd-cyan-soft);
  background: linear-gradient(90deg, rgba(16, 57, 76, 0.72), rgba(13, 26, 48, 0.76)) !important;
  font-family: var(--font-display);
  font-size: 10px;
}

.button-daily em,
.button-daily b,
.button-daily strong { font-family: var(--font-ui); }
.button-daily b { color: var(--hd-cyan); }

.secondary-actions.four { gap: 8px; }
.secondary-actions.four .button { min-height: 43px; font-size: 9px; }

.loadout-chip {
  border: 1px solid color-mix(in srgb, var(--loadout-color, var(--hd-cyan)) 45%, transparent);
  border-left: 2px solid var(--loadout-color, var(--hd-cyan));
  border-radius: 9px;
  padding: 10px 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--loadout-color, var(--hd-cyan)) 11%, transparent), rgba(5, 14, 27, 0.78));
  font-family: var(--font-ui);
}

.loadout-chip .loadout-label { color: var(--hd-muted); font-size: 8px; font-weight: 700; }
.loadout-chip strong { font-family: var(--font-display); font-size: 11px; font-weight: 700; }
.loadout-chip img { image-rendering: auto; }
.loadout-chip .loadout-system { color: #8da6b9; font-size: 9px; }

.ascension-row { width: 100%; margin: 0; }

.record-strip {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(133, 179, 214, 0.17);
  border-radius: 11px;
  padding: 13px 14px;
  background: rgba(4, 13, 25, 0.58);
  backdrop-filter: blur(14px);
}

.record-strip span,
.record-strip strong { font-family: var(--font-ui); }
.record-strip span { color: var(--hd-muted); font-size: 8px; font-weight: 700; letter-spacing: 0.12em; }
.record-strip strong { color: var(--hd-text); font-size: 14px; font-weight: 650; }
.record-strip i { background: rgba(133, 179, 214, 0.16); }
.strip-ic,
.setting-ic,
.hangar-ic img,
.hangar-ship img,
.protocol-icon img,
.upgrade-card img,
.upgrade-icon img,
.toast-icon img,
.build-chip img { image-rendering: auto !important; }

.menu-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  color: #5d748a;
  font: 600 9px var(--font-ui);
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------- live HUD */
.hud {
  z-index: 12;
  opacity: 1;
  font-family: var(--font-ui);
  pointer-events: none;
}

.hud .glass-panel {
  border-color: rgba(118, 177, 214, 0.2) !important;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(7, 18, 34, 0.86), rgba(4, 11, 23, 0.7)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.hud-top {
  position: absolute;
  top: 22px;
  right: 22px;
  left: 22px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  pointer-events: none;
}

.score-cluster {
  display: grid;
  min-width: 0;
  width: 190px;
  min-height: 50px;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  border-left: 2px solid var(--hd-cyan) !important;
  padding: 9px 12px;
  text-align: left;
}

.score-cluster .hud-label { align-self: end; color: var(--hd-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.score-cluster strong,
#score-value { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--hd-text); font: 700 22px var(--font-display); letter-spacing: 0.04em; }
.score-pop { top: calc(100% + 4px); right: 6px; bottom: auto; font: 700 10px var(--font-ui); }

.timer-cluster {
  position: absolute;
  top: 0;
  left: 50%;
  justify-self: auto;
  gap: 2px;
  min-width: 156px;
  border-top: 1px solid rgba(66, 234, 255, 0.22);
  border-bottom: 1px solid rgba(66, 234, 255, 0.12);
  border-radius: 9px;
  padding: 7px 18px 6px;
  background: rgba(4, 13, 25, 0.56);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.timer-cluster span,
.timer-cluster small,
#wave-label { color: var(--hd-muted); font: 700 10px var(--font-ui); letter-spacing: 0.14em; }
.timer-cluster strong { color: var(--hd-text); font: 650 21px var(--font-display); letter-spacing: 0.08em; }
.threat-track { width: 100%; height: 3px; overflow: hidden; border-radius: 4px; background: rgba(118, 143, 165, 0.14); }
.threat-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hd-cyan), var(--hd-gold)); transition: width 180ms linear, background 180ms ease; }
.threat-track[data-mode="SURGE"] i,
.threat-track[data-mode="BOSS"] i { background: linear-gradient(90deg, var(--hd-gold), #ff4e78); }
.threat-track[data-mode="RECOVERY"] i,
.threat-track[data-mode="LULL"] i { background: linear-gradient(90deg, #466e8c, var(--hd-cyan)); }

.icon-button {
  justify-self: end;
  width: 44px;
  height: 44px;
  pointer-events: auto;
}
.icon-button:hover { border-color: var(--hd-cyan) !important; background: rgba(14, 42, 60, 0.92) !important; }

.combo-cluster {
  top: 84px;
  left: 22px;
  width: 190px;
  border: 1px solid rgba(118, 177, 214, 0.16);
  border-left: 2px solid rgba(139, 119, 255, 0.72);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  background: rgba(4, 13, 25, 0.52);
  backdrop-filter: blur(8px);
  opacity: 0.74;
  transform: none;
  transform-origin: top left;
}

.combo-copy span,
.combo-cluster small { color: var(--hd-muted); font: 700 9px var(--font-ui); letter-spacing: 0.1em; }
.combo-copy strong { color: var(--hd-violet); font: 750 17px var(--font-display); }
.combo-track { height: 3px; border: 0; border-radius: 4px; background: rgba(105, 130, 155, 0.18); }
.combo-track i { border-radius: 4px; background: linear-gradient(90deg, var(--hd-violet), var(--hd-cyan)); }
.combo-cluster.active { opacity: 1; transform: scale(1.02); }

.boss-cluster {
  top: 104px;
  width: min(620px, 50vw);
  border: 1px solid rgba(255, 97, 120, 0.34);
  border-radius: 11px;
  padding: 9px 12px;
  background: rgba(34, 7, 22, 0.72);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.boss-cluster span,
.boss-cluster em { font: 700 10px var(--font-ui); letter-spacing: 0.11em; }
.boss-cluster strong { font: 750 13px var(--font-display); letter-spacing: 0.1em; }
.boss-track { height: 5px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.1); }
.boss-track i { border-radius: 6px; background: linear-gradient(90deg, #ff4e78, #f08ad2); }

.beacon-objective {
  top: 104px;
  min-width: 208px;
  border-radius: 9px;
  padding: 9px 12px;
}
.boss-cluster:not([hidden]) + .beacon-objective { top: 174px; }
.beacon-objective small,
.beacon-objective strong { font-family: var(--font-ui); }
.beacon-objective small { color: var(--hd-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.11em; }
.beacon-objective strong { color: var(--hd-cyan-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }

.hud-bottom {
  right: auto;
  bottom: 22px;
  left: 22px;
  display: grid;
  width: min(560px, calc(100vw - 420px));
  grid-template-columns: minmax(190px, 1fr) 54px minmax(150px, 0.72fr);
  gap: 8px;
  transform: none;
}

.vitals,
.dash-status { min-width: 0; min-height: 50px; padding: 9px 12px; }
.vitals { border-left: 2px solid var(--hd-red) !important; }
.dash-status { border-left: 2px solid var(--hd-cyan) !important; }
.bar-label span,
.bar-label strong { font: 700 10px var(--font-ui); letter-spacing: 0.09em; }
.bar-label span { color: var(--hd-muted); }
.meter { height: 5px; border: 0; border-radius: 6px; background: rgba(118, 143, 165, 0.16); box-shadow: none; }
.meter i,
.meter em { border-radius: 6px; }
.health-meter i { background: linear-gradient(90deg, #ff4f6b, #ff8aa2); box-shadow: 0 0 12px rgba(255, 97, 120, 0.35); }
.dash-meter i { background: linear-gradient(90deg, #3bdff6, #75f7dc); box-shadow: 0 0 12px rgba(66, 234, 255, 0.32); }

.level-core {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(139, 119, 255, 0.28);
  border-radius: 50%;
  background: rgba(5, 13, 26, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.level-core span { color: var(--hd-muted); font: 700 7px var(--font-ui); }
.level-core strong { font: 750 16px var(--font-display); }

.pulse-status {
  top: auto;
  right: 24px;
  bottom: 22px;
  display: grid;
  width: 246px;
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  grid-template-columns: minmax(0, 1fr) 34px;
  grid-template-rows: auto 4px auto;
  column-gap: 10px;
  row-gap: 5px;
  border-left: 2px solid var(--hd-violet) !important;
  border-radius: 10px;
  padding: 9px 9px 8px 12px;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.pulse-status:hover { border-color: var(--hd-cyan) !important; background: rgba(15, 34, 54, 0.94) !important; }
.pulse-copy span,
.pulse-copy strong,
.pulse-status small { font-family: var(--font-ui); }
.pulse-copy { grid-row: 1; grid-column: 1; }
.pulse-copy span { color: var(--hd-muted); font-size: 9px; }
.pulse-copy strong { color: var(--hd-cyan-soft); font-size: 10px; }
.pulse-status small { grid-row: 3; grid-column: 1; padding: 0; color: #7690a5; font-size: 9px; white-space: nowrap; }
.pulse-track { grid-row: 2; grid-column: 1; height: 4px; margin: 0; border: 0; border-radius: 6px; background: rgba(118, 143, 165, 0.18); }
.pulse-track i { border-radius: 6px; background: linear-gradient(90deg, var(--hd-violet), var(--hd-cyan)); }
.pulse-status kbd { position: static; display: grid; width: 34px; height: 34px; grid-row: 1 / 4; grid-column: 2; place-items: center; align-self: center; border: 1px solid rgba(139, 119, 255, 0.42); border-radius: 7px; color: var(--hd-cyan-soft); background: rgba(139, 119, 255, 0.12); font: 750 11px var(--font-ui); }

.ordnance-hud {
  position: absolute;
  z-index: 24;
  bottom: 22px;
  left: 50%;
  width: min(650px, calc(100vw - 870px));
  min-width: 360px;
  border-radius: 11px;
  padding: 7px 8px 8px;
  pointer-events: none;
  transform: translateX(-50%);
}
.ordnance-heading {
  display: block;
  margin: 0 4px 5px;
  color: #7893aa;
  font: 750 7px var(--font-ui);
  letter-spacing: 0.18em;
}
.ordnance-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ordnance-slot {
  position: relative;
  display: grid;
  min-width: 0;
  height: 46px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--ordnance-color) 30%, rgba(118, 151, 180, 0.18));
  border-radius: 8px;
  padding: 3px 6px 5px 3px;
  overflow: hidden;
  background: rgba(3, 12, 24, 0.76);
}
.ordnance-slot.tactical { border-top-color: color-mix(in srgb, var(--ordnance-color) 70%, white); }
.ordnance-slot.ready { box-shadow: inset 0 0 18px color-mix(in srgb, var(--ordnance-color) 9%, transparent); }
.ordnance-slot img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ordnance-color) 38%, transparent)); }
.ordnance-slot > span { display: grid; min-width: 0; gap: 2px; }
.ordnance-slot b,
.ordnance-slot em { overflow: hidden; font-family: var(--font-ui); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.ordnance-slot b { color: var(--hd-text); font-size: 7px; letter-spacing: 0.05em; }
.ordnance-slot em { color: color-mix(in srgb, var(--ordnance-color) 78%, #b5c6d4); font-size: 6px; font-weight: 700; letter-spacing: 0.05em; }
.ordnance-meter {
  position: absolute;
  right: 4px;
  bottom: 2px;
  left: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ordnance-color) calc(var(--ordnance-fill) * 100%), rgba(105, 135, 158, 0.16) 0);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ordnance-color) 35%, transparent);
}
.ordnance-charges { display: flex !important; gap: 3px; }
.ordnance-charges i { width: 10px; height: 3px; border: 1px solid color-mix(in srgb, var(--ordnance-color) 38%, transparent); border-radius: 2px; background: rgba(114, 139, 159, 0.12); }
.ordnance-charges i.on { border-color: var(--ordnance-color); background: var(--ordnance-color); box-shadow: 0 0 6px var(--ordnance-color); }

.overdrive-banner {
  border: 1px solid rgba(241, 201, 109, 0.42);
  border-radius: 10px;
  padding: 10px 24px;
  background: rgba(26, 17, 9, 0.74);
  backdrop-filter: blur(12px);
}
.overdrive-banner span { color: var(--hd-text); font: 850 26px var(--font-display); letter-spacing: 0.08em; text-shadow: 0 0 18px rgba(241, 201, 109, 0.26); }
.overdrive-banner small { color: var(--hd-gold); font: 750 9px var(--font-ui); letter-spacing: 0.26em; }

/* ------------------------------------------------ overlays and cards */
.overlay-screen,
.modal-layer {
  padding: 24px;
  background: rgba(1, 5, 13, 0.72);
  backdrop-filter: blur(12px) saturate(0.9);
}

.modal-card,
.results-card {
  max-height: calc(100vh - 48px);
  border-color: rgba(124, 181, 218, 0.25) !important;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(145deg, rgba(10, 25, 44, 0.97), rgba(4, 12, 25, 0.96)) !important;
  box-shadow: var(--hd-shadow), inset 0 1px rgba(255, 255, 255, 0.05);
}

.modal-card h2,
.results-card h2,
.upgrade-shell h2 {
  margin: 10px 0 8px;
  color: var(--hd-text);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  text-shadow: none;
}

.modal-card > p,
.upgrade-shell > p { color: var(--hd-muted); font-size: 13px; line-height: 1.55; }

.modal-close {
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hd-line);
  border-radius: 9px;
  color: #9bb0c1;
  background: rgba(4, 12, 24, 0.7);
  font: 400 24px var(--font-ui);
}
.modal-close:hover { border-color: var(--hd-cyan); color: #fff; background: rgba(16, 44, 62, 0.9); }

.upgrade-shell { width: min(1180px, 100%); }
.upgrade-cards { gap: 16px; }
.upgrade-card {
  min-height: 360px;
  border-color: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 38%, var(--hd-line)) !important;
  border-radius: 16px;
  padding: 22px;
  color: var(--hd-text);
  overflow: hidden;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.upgrade-card:hover,
.upgrade-card:focus-visible {
  border-color: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 85%, white) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38), 0 0 30px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 16%, transparent) !important;
  transform: translateY(-6px);
}
.upgrade-card h3 { color: var(--hd-text); font: 750 21px var(--font-display); letter-spacing: 0.02em; }
.upgrade-card p { color: #a3b5c5; font-size: 12px; line-height: 1.6; }
.upgrade-card footer,
.upgrade-card footer strong,
.weapon-kicker,
.upgrade-tags i,
.evolution-kicker { font-family: var(--font-ui); }
.upgrade-card footer { border-top-color: rgba(132, 180, 216, 0.16); }
.upgrade-card.evolution-card { border-color: rgba(241, 201, 109, 0.8) !important; background: linear-gradient(150deg, rgba(80, 57, 16, 0.36), rgba(23, 17, 48, 0.9) 50%, rgba(5, 14, 27, 0.98)) !important; }

.reroll-button {
  border: 1px solid var(--hd-line);
  border-radius: 8px;
  color: var(--hd-cyan-soft);
  background: rgba(7, 19, 35, 0.78);
  font: 700 10px var(--font-ui);
}
.keyboard-tip,
.keyboard-tip kbd { font-family: var(--font-ui); }

.pause-card { width: min(520px, 100%); }
.pause-card .button { width: 100%; }
.results-card {
  display: grid;
  width: min(820px, 100%);
  height: min(900px, calc(100vh - 48px));
  height: min(900px, calc(100dvh - 48px));
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(22px, 2.2vw, 32px);
  overflow: hidden;
  box-sizing: border-box;
}
.results-summary { min-height: 0; }
.results-card h2 { margin: 8px 0 6px; }
.final-score { margin: 14px 0 10px; padding: 15px 20px; border-color: rgba(66, 234, 255, 0.18); border-radius: 12px; background: rgba(4, 13, 25, 0.62); }
.final-score strong { font-size: clamp(34px, 4vw, 48px); }
.final-score span,
.final-score strong,
.final-score em { font-family: var(--font-ui); }
.result-grid { gap: 8px; }
.result-grid div { gap: 4px; min-height: 60px; padding: 11px 10px; border: 1px solid rgba(132, 180, 216, 0.16); border-radius: 9px; background: rgba(4, 13, 25, 0.54); }
.result-grid span,
.result-grid strong { font-family: var(--font-ui); }
.result-grid span { color: var(--hd-muted); font-size: 8px; }
.result-grid strong { color: var(--hd-text); font-size: 17px; }

.results-scroll {
  min-height: 0;
  margin-top: 12px;
  padding: 0 7px 4px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(66, 234, 255, 0.48) rgba(90, 119, 145, 0.12);
  scrollbar-width: thin;
  mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}
.results-scroll:focus-visible { outline: 1px solid rgba(66, 234, 255, 0.42); outline-offset: 3px; }
.results-scroll .build-recap { margin-top: 0; }
.results-scroll .build-recap-list { max-height: none; overflow: visible; }
.build-chip img { image-rendering: auto; }

.results-footer {
  position: relative;
  z-index: 2;
  padding-top: 11px;
  border-top: 1px solid rgba(132, 180, 216, 0.14);
  background: linear-gradient(180deg, rgba(6, 17, 31, 0), rgba(6, 17, 31, 0.96) 18%);
}
.results-footer .seed-button { min-height: 38px; margin: 0 0 8px; }
.results-footer .results-actions { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 8px; margin-top: 0; }
.results-footer .results-actions .button { width: 100%; min-height: 48px; }
.results-footer .victory-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

.build-recap { border-color: rgba(132, 180, 216, 0.14); }
.build-recap header,
.build-chip,
.build-chip b,
.build-chip em { font-family: var(--font-ui); }
.build-chip { border-radius: 8px; }

.ordnance-report {
  margin: 10px 0;
  border: 1px solid rgba(132, 180, 216, 0.15);
  border-radius: 10px;
  padding: 10px;
  background: rgba(4, 13, 25, 0.5);
}
.ordnance-report header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ordnance-report header span,
.ordnance-report header strong { font: 750 8px var(--font-ui); letter-spacing: 0.12em; }
.ordnance-report header span { color: var(--hd-muted); }
.ordnance-report header strong { color: var(--hd-cyan-soft); }
.ordnance-report-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ordnance-report-list article {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(123, 169, 202, 0.12);
  border-radius: 8px;
  padding: 5px 7px;
  background: rgba(7, 20, 35, 0.68);
}
.ordnance-report-list img { width: 40px; height: 40px; object-fit: contain; }
.ordnance-report-list span { display: grid; min-width: 0; gap: 3px; }
.ordnance-report-list b,
.ordnance-report-list em,
.ordnance-report-list strong,
.ordnance-report-list small { font-family: var(--font-ui); font-style: normal; }
.ordnance-report-list b { overflow: hidden; color: var(--hd-text); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ordnance-report-list em { color: var(--hd-muted); font-size: 6px; }
.ordnance-report-list > article > strong { display: grid; min-width: 34px; color: var(--hd-cyan-soft); font-size: 10px; text-align: right; }
.ordnance-report-list small { color: #728ba0; font-size: 5px; letter-spacing: 0.1em; }

.ordnance-codex { margin-top: 22px; }
.ordnance-codex > p { margin: -4px 0 12px; color: var(--hd-muted); font-size: 10px; }
.ordnance-codex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ordnance-codex-grid article {
  display: grid;
  min-width: 0;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(126, 178, 213, 0.15);
  border-radius: 10px;
  padding: 8px;
  background: rgba(4, 14, 28, 0.66);
}
.ordnance-codex-grid article.locked { opacity: 0.46; filter: saturate(0.15); }
.ordnance-codex-grid img { width: 52px; height: 52px; grid-row: 1 / 3; object-fit: contain; }
.ordnance-codex-grid span { display: grid; gap: 3px; }
.ordnance-codex-grid b,
.ordnance-codex-grid em,
.ordnance-codex-grid strong { font-family: var(--font-ui); font-style: normal; }
.ordnance-codex-grid b { color: var(--hd-text); font-size: 9px; }
.ordnance-codex-grid em { color: var(--hd-cyan); font-size: 6px; }
.ordnance-codex-grid strong { grid-column: 2; color: var(--hd-muted); font-size: 6px; }

.instruction-grid { gap: 10px; }
.instruction { border-radius: 11px; padding: 14px; }
.instruction strong,
.instruction p { font-family: var(--font-ui); }
.instruction strong { color: var(--hd-cyan-soft); font-size: 10px; }
.instruction p { color: var(--hd-muted); }
.key-art { color: var(--hd-cyan); font-family: var(--font-display); }
.instruction kbd,
.pro-tip kbd { border-radius: 5px; font-family: var(--font-ui); }
.pro-tip { border: 1px solid rgba(66, 234, 255, 0.18); border-radius: 9px; background: rgba(7, 25, 38, 0.64); font-family: var(--font-ui); }

/* -------------------------------------------------------------- hangar */
.hangar-card-shell {
  display: grid;
  width: min(1360px, calc(100vw - 48px));
  height: min(760px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  grid-template-columns: minmax(300px, 0.78fr) minmax(600px, 1.55fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: clamp(26px, 3vw, 44px);
  padding: clamp(22px, 2vw, 30px);
  text-align: left;
  overflow: hidden;
}

.hangar-card-shell > .eyebrow,
.hangar-card-shell > h2,
.hangar-card-shell > .hangar-stage { grid-column: 1; }
.hangar-card-shell > .eyebrow { grid-row: 1; align-self: end; }
.hangar-card-shell > h2 { grid-row: 2; align-self: start; }
.hangar-card-shell > .hangar-stage { grid-row: 3 / 5; }

.hangar-stage {
  position: relative;
  align-self: stretch;
  min-height: 0;
  margin-top: 10px;
  border: 1px solid rgba(66, 234, 255, 0.14);
  border-radius: 15px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(66, 234, 255, 0.1), transparent 44%),
    linear-gradient(180deg, rgba(10, 27, 45, 0.72), rgba(3, 10, 21, 0.9));
}

.hangar-stage::before,
.hangar-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}
.hangar-stage::before { background: linear-gradient(90deg, transparent 49.8%, rgba(66, 234, 255, 0.12) 50%, transparent 50.2%), linear-gradient(0deg, transparent 56%, rgba(66, 234, 255, 0.09) 56.2%, transparent 56.4%); }
.hangar-stage::after { inset: auto 8% 17% 8%; height: 16%; border: 1px solid rgba(66, 234, 255, 0.26); border-radius: 50%; box-shadow: 0 0 32px rgba(66, 234, 255, 0.12); transform: perspective(140px) rotateX(62deg); }

.hangar-stage-copy {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;
  display: grid;
  gap: 3px;
}
.hangar-stage-copy span { color: var(--hd-cyan); font-size: 8px; font-weight: 700; letter-spacing: 0.2em; }
.hangar-stage-copy strong { font: 750 15px var(--font-display); letter-spacing: 0.06em; }
.hangar-stage-copy small { color: var(--hd-muted); font-size: 10px; }

.hangar-ship-display {
  position: absolute;
  z-index: 2;
  inset: 12% 3% 14%;
}
.hangar-ship-display img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 18px color-mix(in srgb, var(--frame-accent, #42eaff) 46%, transparent));
  animation: hd-ship-float 7s ease-in-out infinite;
}

.hangar-performance {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hangar-performance > div { display: grid; gap: 4px; }
.hangar-performance span { color: var(--hd-muted); font-size: 7px; font-weight: 700; letter-spacing: 0.12em; }
.hangar-performance i { height: 3px; border-radius: 4px; background: rgba(124, 161, 189, 0.2); }
.hangar-performance b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--hd-violet), var(--frame-accent, var(--hd-cyan))); transition: width 220ms ease; }

.hangar-card-shell > .armory-balance,
.hangar-card-shell > .hangar-tabs,
.hangar-card-shell > .hangar-pane,
.hangar-card-shell > .button { grid-column: 2; }
.hangar-card-shell > .armory-balance { grid-row: 1; align-self: start; justify-self: end; margin: 0 42px 0 0; }
.hangar-card-shell > .hangar-tabs { grid-row: 2; margin: 0 0 14px; }
.hangar-card-shell > .hangar-pane { grid-row: 3; }
.hangar-card-shell > .button { grid-row: 4; justify-self: end; width: min(240px, 100%); margin-top: 16px; }

.hangar-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border: 1px solid rgba(132, 180, 216, 0.16);
  border-radius: 10px;
  padding: 5px;
  background: rgba(4, 12, 24, 0.62);
}
.hangar-tab {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  color: var(--hd-muted);
  background: transparent;
  font: 700 10px var(--font-display);
  letter-spacing: 0.12em;
}
.hangar-tab:hover { color: var(--hd-text); background: rgba(66, 234, 255, 0.07); }
.hangar-tab.active { color: #071018; background: linear-gradient(135deg, #7df5ff, #42b8dd); box-shadow: 0 7px 18px rgba(66, 234, 255, 0.16); }

.hangar-pane {
  min-height: 0;
  max-height: none;
  gap: 10px;
  padding: 2px 6px 4px 2px;
  overflow-y: auto;
}
.hangar-pane.active { align-content: start; }
.hangar-pane[data-pane="ships"].active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hangar-pane[data-pane="systems"].active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hangar-pane h4 { grid-column: 1 / -1; margin: 12px 0 0; color: var(--hd-gold); font: 700 10px var(--font-display); letter-spacing: 0.18em; }

.fleet-note {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(66, 234, 255, 0.16);
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--hd-muted);
  background: rgba(5, 17, 31, 0.72);
  font: 500 9px/1.4 var(--font-ui);
}
.fleet-note strong { flex: none; color: var(--hd-cyan); font: 700 9px var(--font-display); letter-spacing: 0.12em; }

.ship-card {
  min-height: 300px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 98px auto auto auto auto auto;
  align-content: start;
  justify-items: stretch;
  gap: 8px 10px;
  overflow: hidden;
}
.ship-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--ship-accent) 13%, transparent), transparent 47%);
  content: "";
  pointer-events: none;
}
.ship-card > * { position: relative; z-index: 1; }
.ship-card .hangar-ship {
  display: grid;
  min-height: 0;
  grid-column: 1 / -1;
  place-items: center;
}
.ship-card .hangar-ship img { width: 100%; height: 98px; max-height: 98px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 9px color-mix(in srgb, var(--ship-accent) 35%, transparent)); }
.ship-card .ship-identity { display: grid; min-width: 0; gap: 2px; }
.ship-card .ship-identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship-card .ship-identity small { color: var(--ship-accent); font: 700 7px var(--font-ui); letter-spacing: 0.12em; }
.ship-card p { grid-column: 1 / -1; margin: 0; }
.ship-card .ship-trait { display: grid; grid-column: 1 / -1; gap: 3px; border-left: 2px solid var(--ship-accent); border-radius: 0 6px 6px 0; padding: 7px 9px; background: color-mix(in srgb, var(--ship-accent) 7%, rgba(4, 12, 25, 0.78)); }
.ship-card .ship-trait strong { color: var(--ship-accent); font: 700 8px var(--font-display); letter-spacing: 0.11em; }
.ship-card .ship-trait small { color: var(--hd-muted); font: 500 8px/1.4 var(--font-ui); }
.ship-card .ship-weapon { display: inline-flex; align-items: center; justify-self: end; gap: 6px; color: var(--hd-text); font: 700 8px var(--font-ui); }
.ship-card .ship-weapon img { width: 25px; height: 25px; object-fit: contain; image-rendering: auto; }
.ship-card .hangar-stats { align-self: center; }
.ship-card em { align-self: end; justify-self: end; }
.ship-card.locked:not([data-poor="1"]) { border-color: color-mix(in srgb, var(--ship-accent) 48%, transparent) !important; }

.hangar-card {
  min-height: 178px;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.hangar-card.ship-card {
  min-height: 312px;
  grid-template-rows: 98px auto auto auto auto;
}
.ship-card .ship-identity { grid-column: 1; grid-row: 2; }
.ship-card .ship-weapon { grid-column: 2; grid-row: 2; }
.ship-card > p { grid-row: 3; }
.ship-card .ship-trait { grid-row: 4; }
.ship-card .hangar-stats { grid-column: 1; grid-row: 5; justify-self: start; }
.ship-card > em { grid-column: 2; grid-row: 5; }
.hangar-card:hover { border-color: rgba(66, 234, 255, 0.58) !important; background: linear-gradient(145deg, rgba(16, 43, 63, 0.95), rgba(6, 16, 31, 0.9)) !important; transform: translateY(-2px); }
.hangar-card.equipped { border-color: rgba(66, 234, 255, 0.7) !important; box-shadow: inset 0 0 0 1px rgba(66, 234, 255, 0.12), 0 14px 34px rgba(0, 0, 0, 0.25); }
.hangar-card b { color: var(--hd-text); font: 750 14px var(--font-display); letter-spacing: 0.04em; }
.hangar-card p { min-height: 0; color: var(--hd-muted); font: 400 10px/1.55 var(--font-ui); }
.hangar-card em { justify-self: start; border: 1px solid rgba(132, 180, 216, 0.24); border-radius: 6px; padding: 5px 8px; color: var(--hd-cyan-soft); background: rgba(4, 13, 25, 0.62); font: 700 8px var(--font-ui); }
.hangar-card.equipped em { border-color: var(--hd-cyan); color: #071018; background: var(--hd-cyan); }
.hangar-stats { justify-content: flex-start; }
.hangar-stats i { border-radius: 5px; font-family: var(--font-ui); font-size: 7px; }
.hangar-ic { justify-self: start; border-radius: 9px; background: rgba(66, 234, 255, 0.06); }
.hangar-ship { min-height: 64px; }

.armory-balance {
  border: 1px solid rgba(241, 201, 109, 0.25);
  border-radius: 9px;
  background: rgba(40, 30, 10, 0.34);
}
.armory-balance span,
.armory-balance strong { font-family: var(--font-ui); }
.armory-balance strong { color: var(--hd-gold); }

.mastery-grid article,
.codex-summary span,
.history-list > span {
  border-color: rgba(132, 180, 216, 0.16);
  border-radius: 9px;
  background: rgba(5, 15, 29, 0.72);
  font-family: var(--font-ui);
}

/* ------------------------------------------------ settings / protocol */
.settings-card {
  width: min(590px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  max-height: min(820px, calc(100dvh - 48px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.setting-row { border-radius: 10px; padding: 13px 14px; }
.setting-row + .setting-row { margin-top: 8px; }
.setting-row strong,
.setting-row span { font-family: var(--font-ui); }
.setting-row strong { color: var(--hd-text); font-size: 10px; }
.setting-row span { color: var(--hd-muted); font-size: 10px; }
.switch { border-radius: 12px; }
.switch i { border: 1px solid rgba(132, 180, 216, 0.25); border-radius: 14px; background: rgba(5, 13, 25, 0.8); }
.switch i::after { border-radius: 50%; background: #8da4b8; }
.switch input:checked + i { border-color: rgba(66, 234, 255, 0.7); background: rgba(66, 234, 255, 0.18); }
.switch input:checked + i::after { background: var(--hd-cyan); box-shadow: 0 0 12px rgba(66, 234, 255, 0.45); }

@media (max-height: 760px) and (min-width: 721px) {
  .settings-card { padding: 22px 28px; }
  .settings-card h2 { margin-top: 2px; font-size: 30px; }
  .settings-card > p { display: none; }
  .settings-card .setting-row { padding: 9px 12px; }
  .settings-card .setting-row + .setting-row { margin-top: 6px; }
  .settings-card > .button { margin-top: 14px; }
}

.armory-card { width: min(800px, 100%); }
.protocol-list { gap: 9px; }
.protocol-row { border-radius: 11px; padding: 13px; }
.protocol-copy header,
.protocol-copy strong,
.protocol-copy em,
.protocol-copy span,
.protocol-buy { font-family: var(--font-ui); }
.protocol-copy strong { color: var(--hd-text); }
.protocol-copy span { color: var(--hd-muted); line-height: 1.5; }
.protocol-buy { border: 1px solid rgba(66, 234, 255, 0.28); border-radius: 7px; color: var(--hd-cyan-soft); background: rgba(8, 28, 42, 0.7); }

.toast-layer { z-index: 80; }
.toast { border-radius: 11px; }
.toast strong,
.toast span { font-family: var(--font-ui); }

@keyframes hd-ship-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@media (max-width: 1200px) {
  .ordnance-hud { bottom: 100px; width: min(620px, calc(100vw - 44px)); min-width: 0; }
}

@media (max-width: 1060px) {
  .menu-screen { padding-right: 28px; padding-left: 28px; }
  .menu-shell { padding-top: 34px; }
  .menu-hero { right: -11%; width: 66vw; opacity: 0.78; }
  .menu-command-deck { width: min(410px, 46vw); }
  .hangar-card-shell { grid-template-columns: 300px minmax(500px, 1fr); column-gap: 26px; }
  .hud-bottom { width: min(500px, calc(100vw - 330px)); grid-template-columns: minmax(180px, 1fr) 52px minmax(130px, 0.7fr); }
  .pulse-status { width: 220px; }
}

@media (max-width: 820px) {
  .menu-screen { place-items: center; overflow-y: auto; }
  .menu-shell { width: min(560px, 100%); padding: 24px 0; text-align: center; }
  .logo { justify-content: center; }
  .logo small { justify-self: center; }
  .menu-hero { top: 35%; right: 50%; width: min(94vw, 680px); height: 42vh; opacity: 0.22; transform: translate(50%, -50%); }
  .menu-hero-caption { display: none; }
  .menu-command-deck { position: relative; bottom: auto; left: auto; width: 100%; margin-top: 28px; }
  .menu-actions,
  .record-strip,
  .ascension-row { width: 100%; }
  .record-strip { margin-bottom: 48px; }
  .menu-footer { padding-bottom: 8px; }

  .hangar-card-shell {
    display: block;
    width: min(760px, calc(100% - 24px));
    height: calc(100% - 24px);
    padding: 24px;
    overflow-y: auto;
  }
  .hangar-stage { height: 280px; margin: 14px 0; }
  .hangar-card-shell > .armory-balance { margin: 0 0 12px; }
  .hangar-card-shell > .button { width: 100%; }
  .hangar-pane { max-height: 430px; }

  .score-cluster { width: 150px; }
  .combo-cluster { width: 150px; }
  .hud-bottom { right: 22px; width: auto; grid-template-columns: minmax(180px, 1fr) 50px; }
  .dash-status { display: none; }
  .pulse-status { right: 22px; bottom: 88px; width: 190px; }
  .ordnance-hud { right: 22px; bottom: 166px; left: 22px; width: auto; transform: none; }
  .ordnance-heading { display: none; }
  .ordnance-slot { grid-template-columns: 34px minmax(0, 1fr); }
  .ordnance-slot img { width: 32px; height: 32px; }
}

@media (max-width: 560px) {
  .menu-screen { padding: 18px 14px; }
  .menu-shell { padding-top: 16px; }
  .logo-wordmark { font-size: clamp(42px, 14vw, 62px); }
  .tagline { font-size: 10px; }
  .secondary-actions.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-strip { grid-template-columns: repeat(3, 1fr); padding: 10px 6px; }
  .record-strip span { font-size: 6px; }
  .record-strip strong { font-size: 12px; }
  .menu-footer { justify-content: center; }
  .menu-footer span:first-child,
  .menu-footer span:last-child { display: none; }

  .overlay-screen,
  .modal-layer { padding: 10px; }
  .modal-card { max-height: calc(100vh - 20px); border-radius: 14px; padding: 22px 16px; overflow-y: auto; }
  .results-card { height: calc(100vh - 20px); height: calc(100dvh - 20px); max-height: none; border-radius: 14px; padding: 18px 14px; overflow: hidden; }
  .modal-card h2,
  .results-card h2,
  .upgrade-shell h2 { font-size: 28px; }
  .upgrade-cards { grid-template-columns: 1fr; max-height: 58vh; overflow-y: auto; }
  .upgrade-card { min-height: 280px; }

  .hangar-card-shell {
    display: flex;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    flex-direction: column;
    padding: 20px 14px;
    overflow: hidden;
  }
  .hangar-card-shell > .eyebrow,
  .hangar-card-shell > h2,
  .hangar-card-shell > .armory-balance,
  .hangar-card-shell > .hangar-tabs,
  .hangar-card-shell > .button { flex: none; }
  .hangar-card-shell > .eyebrow { width: calc(100% - 52px); align-self: flex-start; }
  .hangar-card-shell > .button { margin-top: 8px; }
  .hangar-stage { height: 188px; flex: 0 0 188px; }
  .hangar-pane { min-height: 0; max-height: none; flex: 1 1 auto; }
  .hangar-stage-copy strong { font-size: 12px; }
  .hangar-tabs { grid-template-columns: repeat(3, 1fr); }
  .hangar-pane[data-pane="ships"].active,
  .hangar-pane[data-pane="systems"].active { grid-template-columns: 1fr; }
  .fleet-note { display: grid; }

  .hud-top { top: 10px; right: 10px; left: 10px; }
  .score-cluster { width: 112px; min-height: 42px; padding: 7px 8px; }
  .score-cluster .hud-label { font-size: 8px; }
  .score-cluster strong { font-size: 14px; }
  .timer-cluster { min-width: 112px; padding: 5px 8px; }
  .timer-cluster strong { font-size: 16px; }
  .icon-button { width: 40px; height: 40px; }
  .combo-cluster { top: 170px; left: 10px; width: 112px; }
  .combo-cluster small { display: none; }
  .boss-cluster { top: 66px; width: calc(100% - 140px); }
  .beacon-objective { top: 66px; min-width: 156px; }
  .boss-cluster:not([hidden]) + .beacon-objective { top: 124px; }
  .hud-bottom { right: 10px; bottom: 10px; left: 10px; grid-template-columns: minmax(0, 1fr) 48px; }
  .vitals { min-height: 46px; }
  .pulse-status { right: 12px; bottom: 68px; width: 154px; height: 64px; min-height: 64px; max-height: 64px; grid-template-columns: minmax(0, 1fr) 30px; padding-left: 9px; }
  .pulse-status small { display: none; }
  .pulse-status kbd { width: 30px; height: 30px; }
  .ordnance-hud { right: 10px; bottom: 140px; left: 10px; padding: 4px; }
  .ordnance-slots { gap: 3px; }
  .ordnance-slot { height: 40px; grid-template-columns: 30px minmax(0, 1fr); padding-right: 3px; }
  .ordnance-slot img { width: 29px; height: 29px; }
  .ordnance-slot b { font-size: 6px; }
  .ordnance-slot em { font-size: 5px; }
  .ordnance-charges i { width: 7px; }
  .ordnance-report-list,
  .ordnance-codex-grid { grid-template-columns: 1fr; }
  .results-footer .results-actions { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .results-footer .results-actions .button { min-height: 44px; padding-right: 8px; padding-left: 8px; font-size: 8px; }
  .results-footer .victory-actions { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .score-cluster { width: 92px; }
  .timer-cluster { min-width: 92px; padding-right: 8px; padding-left: 8px; }
  .combo-cluster { width: 92px; }
  .ordnance-slot > span { display: none; }
  .ordnance-slot { display: grid; grid-template-columns: 1fr; justify-items: center; padding: 2px; }
  .results-footer .results-actions { grid-template-columns: 1fr; }
}

@media (hover: none), (pointer: coarse) {
  .pulse-status { display: none; }
  .ordnance-hud { bottom: 70px; }
}

@media (max-height: 720px) and (min-width: 821px) {
  .menu-shell { padding-top: 18px; }
  .logo { margin-top: 14px; }
  .logo-wordmark { font-size: clamp(48px, 5.6vw, 82px); }
  .tagline { margin-top: 10px; }
  .menu-command-deck { bottom: 32px; width: min(390px, 43vw); gap: 8px; }
  .menu-actions { margin: 0; }
  .button-xl { min-height: 50px; }
  .secondary-actions.four .button { min-height: 38px; }
  .record-strip { margin-top: 14px; padding-top: 9px; padding-bottom: 9px; }
  .results-card { height: calc(100dvh - 24px); padding: 18px 24px; }
  .results-card h2 { font-size: 30px; }
  .final-score { margin: 8px 0; padding: 10px 16px; }
  .final-score strong { font-size: 32px; }
  .result-grid div { min-height: 48px; padding: 7px 9px; }
  .results-scroll { margin-top: 8px; }
  .results-footer { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-hero img,
  .hangar-ship-display img { animation: none; }
  .button,
  .upgrade-card,
  .hangar-card { transition: none; }
}

/* ===================================================== menu UX overhaul */
/* ---------------------------------------------------------- field manual */
.info-card {
  display: grid;
  width: min(1040px, 100%);
  height: min(760px, calc(100vh - 36px));
  height: min(760px, calc(100dvh - 36px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  overflow: hidden;
  padding: 28px 32px;
  text-align: left;
}

.manual-heading { display: grid; gap: 5px; padding-right: 54px; }
.manual-heading .eyebrow { justify-content: flex-start; }
.manual-heading h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); text-align: left; }
.manual-heading p { margin: 0; color: var(--hd-muted); font: 500 12px/1.45 var(--font-ui); }

.manual-layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.manual-section {
  min-width: 0;
  border: 1px solid rgba(126, 180, 216, 0.18);
  border-radius: 14px;
  padding: 16px;
  background:
    radial-gradient(circle at 0 0, rgba(66, 234, 255, 0.07), transparent 34%),
    linear-gradient(145deg, rgba(9, 24, 42, 0.88), rgba(4, 13, 27, 0.88));
}
.manual-section > header { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.manual-section > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(66, 234, 255, 0.38);
  border-radius: 9px;
  color: var(--hd-cyan);
  background: rgba(66, 234, 255, 0.08);
  font: 750 11px var(--font-display);
}
.manual-section > header > div { display: grid; gap: 2px; }
.manual-section > header strong { color: var(--hd-text); font: 760 13px var(--font-display); letter-spacing: 0.11em; }
.manual-section > header small { color: var(--hd-muted); font: 500 9px/1.35 var(--font-ui); }

.manual-controls .instruction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 9px; }
.manual-controls .instruction {
  min-height: 104px;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border-color: rgba(126, 180, 216, 0.14) !important;
  background: rgba(4, 14, 28, 0.64) !important;
  box-shadow: none;
}
.manual-controls .instruction strong { color: var(--hd-cyan-soft); font-size: 10px; letter-spacing: 0.08em; }
.manual-controls .instruction p { margin-top: 5px; font-size: 9px; line-height: 1.45; }
.manual-controls .key-art { min-width: 0; }
.manual-controls .auto-art img,
.manual-controls .pulse-art img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(66, 234, 255, 0.3)); }
.manual-controls .pulse-art { gap: 2px; }
.manual-controls .pulse-art small { color: var(--hd-gold); font: 750 7px var(--font-ui); letter-spacing: 0.12em; }

.manual-loop { display: grid; gap: 8px; }
.manual-loop article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(126, 180, 216, 0.13);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(3, 12, 25, 0.64);
}
.manual-loop article > b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #061019; background: var(--hd-cyan); font: 800 11px var(--font-display); }
.manual-loop article > span { display: grid; gap: 2px; }
.manual-loop strong { color: var(--hd-text); font: 760 10px var(--font-display); letter-spacing: 0.1em; }
.manual-loop small { color: var(--hd-muted); font: 500 9px/1.4 var(--font-ui); }

.manual-intel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.manual-intel article { display: grid; min-width: 0; justify-items: center; gap: 5px; border-top: 1px solid rgba(66, 234, 255, 0.14); padding: 10px 5px 2px; text-align: center; }
.manual-intel img { width: 30px; height: 30px; object-fit: contain; }
.manual-intel span { display: grid; gap: 2px; }
.manual-intel strong { color: var(--hd-cyan-soft); font: 730 8px var(--font-display); letter-spacing: 0.08em; }
.manual-intel small { color: var(--hd-muted); font: 500 7px/1.35 var(--font-ui); }

.manual-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(126, 180, 216, 0.14); padding-top: 14px; }
.manual-footer p { margin: 0; color: var(--hd-muted); font: 500 9px/1.4 var(--font-ui); }
.manual-footer p strong { margin-right: 7px; color: var(--hd-gold); font: 750 8px var(--font-display); letter-spacing: 0.12em; }
.manual-footer .button { width: min(240px, 100%); flex: none; }

/* ---------------------------------------------------------- protocol lab */
.armory-card {
  display: grid;
  width: min(1100px, calc(100vw - 48px));
  height: min(704px, calc(100vh - 48px));
  height: min(704px, calc(100dvh - 48px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  padding: 24px 26px 20px;
  text-align: left;
}
.lab-header { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 30px; align-items: end; padding-right: 48px; }
.lab-title { display: grid; gap: 5px; }
.lab-title h2 { margin: 0; font-size: clamp(34px, 3.3vw, 44px); text-align: left; }
.lab-title p { margin: 0; color: var(--hd-muted); font: 500 11px/1.45 var(--font-ui); }
.lab-status { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lab-status .armory-balance,
.lab-progress {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.lab-status .armory-balance { display: grid; min-height: 62px; gap: 4px; margin: 0; border-radius: 0; padding: 9px 12px; }
.lab-status .armory-balance span { display: flex; align-items: center; gap: 6px; font-size: 7px; }
.lab-status .armory-balance strong { font-size: 22px; }
.lab-progress { display: grid; min-height: 62px; align-content: center; gap: 5px; border: 1px solid rgba(66, 234, 255, 0.22); border-radius: 0; padding: 9px 12px; background: linear-gradient(135deg, rgba(7, 28, 44, 0.92), rgba(3, 14, 28, 0.86)); }
.lab-progress span { color: var(--hd-muted); font: 700 7px var(--font-ui); letter-spacing: 0.11em; }
.lab-progress strong { color: var(--hd-cyan-soft); font: 760 14px var(--font-display); }
.lab-progress > i { display: block; height: 3px; border-radius: 3px; background: rgba(126, 178, 213, 0.16); }
.lab-progress > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hd-violet), var(--hd-cyan)); transition: width 220ms ease; }

.armory-card .protocol-list { display: grid; min-height: 0; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; gap: 7px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 5px 2px 2px; }
.armory-card .protocol-row {
  position: relative;
  min-height: 0;
  grid-template-columns: 68px minmax(0, 1fr) 76px;
  gap: 12px;
  border-color: rgba(120, 165, 196, 0.16) !important;
  border-radius: 2px !important;
  padding: 10px 11px 10px 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--protocol-color) 8%, transparent), transparent 32%),
    linear-gradient(135deg, rgba(8, 23, 40, 0.96), rgba(3, 12, 25, 0.92)) !important;
  box-shadow: inset 3px 0 var(--protocol-color), inset 0 1px rgba(255,255,255,.035), 0 8px 22px rgba(0, 0, 0, 0.16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.armory-card .protocol-row::after { position: absolute; top: 6px; right: 9px; color: rgba(148, 178, 201, 0.18); content: attr(data-index); font: 700 7px var(--font-ui); letter-spacing: 0.12em; pointer-events: none; }
.armory-card .protocol-row:last-child { grid-column: 1 / -1; }
.protocol-row.affordable { border-color: color-mix(in srgb, var(--protocol-color) 46%, rgba(126, 178, 213, 0.12)) !important; }
.protocol-row.maxed { opacity: 1; }
.armory-card .protocol-icon { position: relative; display: grid; width: 64px; height: 64px; place-items: center; align-self: center; border: 0; border-radius: 0; background: none; box-shadow: none; }
.armory-card .protocol-icon::before { position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--protocol-color) 34%, transparent); content: ""; rotate: 45deg; box-shadow: inset 0 0 16px color-mix(in srgb, var(--protocol-color) 8%, transparent); }
.armory-card .protocol-icon img { position: relative; z-index: 1; width: 62px; height: 62px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 7px 9px rgba(0,0,0,.48)) drop-shadow(0 0 8px color-mix(in srgb, var(--protocol-color) 22%, transparent)); }
.armory-card .protocol-copy { min-width: 0; gap: 4px; }
.armory-card .protocol-copy header { justify-content: space-between; gap: 8px; }
.armory-card .protocol-copy header > span { display: grid; min-width: 0; gap: 2px; }
.armory-card .protocol-copy header strong { overflow: hidden; color: var(--hd-text); font: 760 11px var(--font-display); letter-spacing: 0.035em; text-overflow: ellipsis; white-space: nowrap; }
.armory-card .protocol-copy header small { color: var(--protocol-color); font: 720 6px var(--font-ui); letter-spacing: 0.13em; }
.armory-card .protocol-copy header em { flex: none; margin-right: 4px; color: var(--protocol-color); font: 760 7px var(--font-ui); }
.armory-card .protocol-copy > span { overflow: hidden; color: var(--hd-muted); font: 500 8px/1.35 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.protocol-pips { display: flex; gap: 4px; }
.protocol-pips i { width: 22px; height: 3px; border-radius: 0; background: rgba(126, 178, 213, 0.16); transform: skewX(-24deg); }
.protocol-pips i.filled { background: var(--protocol-color); box-shadow: 0 0 7px color-mix(in srgb, var(--protocol-color) 55%, transparent); }
.armory-card .protocol-buy { display: grid; min-width: 0; min-height: 48px; align-content: center; gap: 3px; border-radius: 0; padding: 6px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.armory-card .protocol-buy > span { font: 760 8px var(--font-display); letter-spacing: 0.08em; }
.armory-card .protocol-buy > small { color: var(--hd-muted); font: 700 6px var(--font-ui); letter-spacing: 0.09em; }
.armory-card .protocol-buy:disabled { border-color: rgba(126, 178, 213, 0.12); color: color-mix(in srgb, var(--protocol-color) 72%, #d4e4ee); background: rgba(3, 13, 26, 0.34); opacity: 1; }
.armory-card .protocol-buy:not(:disabled) { border-color: color-mix(in srgb, var(--protocol-color) 54%, transparent); background: color-mix(in srgb, var(--protocol-color) 12%, rgba(4, 18, 33, .86)); box-shadow: 0 0 18px color-mix(in srgb, var(--protocol-color) 11%, transparent); }
.lab-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(126, 180, 216, 0.14); padding-top: 12px; }
.lab-footer > span { color: var(--hd-muted); font: 500 9px var(--font-ui); }
.lab-footer .button { width: min(240px, 100%); flex: none; margin: 0; }

/* ----------------------------------------------------------- hangar UX */
.hangar-stage-weapon { position: absolute; z-index: 4; top: 76px; right: 16px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(126, 180, 216, 0.16); border-radius: 9px; padding: 7px 9px; background: rgba(3, 13, 27, 0.68); }
.hangar-stage-weapon img { width: 32px; height: 32px; object-fit: contain; }
.hangar-stage-weapon span { display: grid; gap: 2px; }
.hangar-stage-weapon small { color: var(--hd-muted); font: 700 6px var(--font-ui); letter-spacing: 0.12em; }
.hangar-stage-weapon strong { color: var(--hd-text); font: 750 9px var(--font-display); letter-spacing: 0.06em; }
.hangar-tab { display: grid; place-content: center; gap: 2px; }
.hangar-tab > span { font: inherit; }
.hangar-tab > small { color: currentColor; font: 650 6px var(--font-ui); letter-spacing: 0.12em; opacity: 0.68; }
.hangar-tab:focus-visible { outline: 2px solid var(--hd-cyan); outline-offset: 2px; }
.fleet-note { display: grid; grid-template-columns: auto minmax(100px, 0.35fr) minmax(220px, 1fr); align-items: center; }
.fleet-note > span { display: grid; gap: 2px; }
.fleet-note small { color: var(--hd-muted); font: 650 7px var(--font-ui); letter-spacing: 0.08em; }
.fleet-note > i { display: block; height: 4px; border-radius: 4px; background: rgba(126, 178, 213, 0.15); }
.fleet-note > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hd-violet), var(--hd-cyan)); }
.fleet-note p { margin: 0; color: var(--hd-muted); font: 500 8px/1.35 var(--font-ui); text-align: right; }
.hangar-card.ship-card {
  min-height: 0;
  height: 226px;
  grid-template-rows: 68px auto auto auto auto;
  gap: 5px 8px;
  padding: 11px 13px;
}
.ship-card .hangar-ship img { height: 68px; max-height: 68px; }
.ship-card .ship-identity b { font-size: 12px; }
.ship-card .ship-identity small { font-size: 6px; }
.ship-card > p { display: -webkit-box; overflow: hidden; font-size: 8px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ship-card .ship-trait { gap: 2px; padding: 5px 7px; }
.ship-card .ship-trait strong { font-size: 7px; }
.ship-card .ship-trait small { overflow: hidden; font-size: 7px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ship-card .ship-weapon { gap: 4px; font-size: 7px; }
.ship-card .ship-weapon img { width: 21px; height: 21px; }
.ship-card .hangar-stats i { padding: 3px 5px; font-size: 6px; }
.ship-card > em { padding: 4px 7px; font-size: 7px; }
.hangar-card:focus-visible { outline: 2px solid var(--ship-accent, var(--hd-cyan)); outline-offset: 2px; }
.hangar-pane[data-pane="systems"] .hangar-card { min-height: 126px; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; justify-items: stretch; align-content: center; }
.hangar-pane[data-pane="systems"] .hangar-ic { grid-row: 1 / 3; }
.hangar-pane[data-pane="systems"] .hangar-card > b { align-self: end; }
.hangar-pane[data-pane="systems"] .hangar-card > p { grid-column: 2 / 4; min-height: 0; }
.hangar-pane[data-pane="systems"] .hangar-card > em { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; }

@media (max-width: 820px) {
  .info-card,
  .armory-card { width: min(760px, calc(100% - 12px)); height: calc(100dvh - 20px); max-height: none; overflow: hidden; }
  .manual-layout { grid-template-columns: 1fr; }
  .lab-header { grid-template-columns: 1fr; gap: 12px; padding-right: 44px; }
  .lab-status { max-width: 340px; }
  .armory-card .protocol-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(116px, auto); align-content: start; }
  .armory-card .protocol-row:last-child { grid-column: auto; }
}

@media (max-width: 560px) {
  .info-card,
  .armory-card { padding: 20px 14px 14px; }
  .manual-heading { padding-right: 42px; }
  .manual-heading h2 { font-size: 25px; }
  .manual-heading p { font-size: 9px; }
  .manual-controls .instruction-grid { grid-template-columns: 1fr; }
  .manual-controls .instruction { min-height: 90px; }
  .manual-intel { grid-template-columns: 1fr; }
  .manual-intel article { grid-template-columns: 34px 1fr; justify-items: start; text-align: left; }
  .manual-footer { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 8px; }
  .manual-footer p { display: none; }
  .manual-footer .button { width: 100%; justify-self: stretch; }
  .lab-title h2 { font-size: 26px; }
  .lab-title p { font-size: 9px; }
  .lab-status { max-width: none; }
  .armory-card .protocol-row { grid-template-columns: 44px minmax(0, 1fr); min-height: 116px; }
  .armory-card .protocol-icon { width: 42px; height: 42px; }
  .armory-card .protocol-icon img { width: 38px; height: 38px; }
  .armory-card .protocol-buy { grid-column: 1 / -1; min-height: 34px; grid-template-columns: 1fr auto; align-items: center; padding: 6px 10px; }
  .lab-footer > span { display: none; }
  .lab-footer .button { width: 100%; }
  .hangar-stage-weapon { display: none; }
  .fleet-note { grid-template-columns: 1fr 90px; }
  .fleet-note p { display: none; }
  .hangar-tab > small { font-size: 5px; }
}

@media (max-height: 720px) and (min-width: 821px) {
  .info-card { height: min(600px, calc(100dvh - 24px)); padding-top: 20px; padding-bottom: 16px; }
  .armory-card { height: calc(100dvh - 24px); padding-top: 20px; padding-bottom: 16px; }
  .manual-heading h2 { font-size: 32px; }
  .manual-controls .instruction { min-height: 90px; }
  .manual-section { padding: 13px; }
  .armory-card .protocol-row { min-height: 88px; padding: 9px; }
}

/* ================================================= premium upgrade reward */
#upgrade-screen {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(16px, 2.4vw, 34px);
  background:
    radial-gradient(circle at 50% 48%, rgba(29, 89, 112, 0.16), transparent 35%),
    radial-gradient(circle at 16% 112%, rgba(104, 61, 168, 0.18), transparent 39%),
    rgba(1, 6, 15, 0.78);
  backdrop-filter: blur(18px) saturate(0.72) brightness(0.68);
}

#upgrade-screen:focus { outline: none; }

#upgrade-screen::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.94%, rgba(87, 231, 246, 0.055) 50%, transparent 50.06%),
    linear-gradient(transparent 49.92%, rgba(87, 231, 246, 0.04) 50%, transparent 50.08%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(134, 190, 220, 0.012) 4px 5px);
  mask-image: radial-gradient(circle at center, #000 18%, transparent 76%);
}

.upgrade-atmosphere {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(88vw, 1120px);
  aspect-ratio: 1;
  pointer-events: none;
  translate: -50% -50%;
  animation: upgrade-field-in 720ms cubic-bezier(.16, .78, .2, 1) both;
}

.upgrade-atmosphere::before,
.upgrade-atmosphere::after,
.upgrade-atmosphere > i {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.upgrade-atmosphere::before {
  inset: 12%;
  border: 1px solid rgba(83, 224, 240, 0.075);
  box-shadow: 0 0 90px rgba(39, 188, 216, 0.055), inset 0 0 90px rgba(39, 188, 216, 0.04);
}

.upgrade-atmosphere::after {
  inset: 31%;
  background: radial-gradient(circle, rgba(72, 213, 235, 0.08), transparent 66%);
  filter: blur(10px);
  animation: upgrade-core-breathe 4.6s ease-in-out infinite;
}

.upgrade-atmosphere > i {
  inset: 4%;
  border: 1px dashed rgba(84, 218, 234, 0.095);
  animation: upgrade-orbit 48s linear infinite;
}

.upgrade-atmosphere > i:nth-child(2) {
  inset: 21%;
  border-style: solid;
  border-color: rgba(147, 107, 255, 0.09) transparent rgba(147, 107, 255, 0.09) transparent;
  animation-duration: 32s;
  animation-direction: reverse;
}

.upgrade-atmosphere > i:nth-child(3) {
  inset: 39%;
  border-style: dotted;
  border-color: rgba(244, 207, 113, 0.13);
  animation-duration: 19s;
}

.upgrade-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1160px, 100%);
  max-height: calc(100dvh - 44px);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  margin: 0 auto;
  text-align: left;
}

.upgrade-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  animation: upgrade-heading-in 440ms cubic-bezier(.16, .8, .24, 1) both;
}

.upgrade-title-group { display: grid; justify-items: start; gap: 5px; }
.upgrade-title-group .eyebrow { min-height: 22px; border-color: rgba(70, 230, 239, 0.3); padding: 4px 9px 3px; background: rgba(25, 164, 180, 0.07); color: #6cf2ef; font-size: 7px; letter-spacing: .2em; }
.upgrade-title-group .status-dot { width: 5px; height: 5px; background: #6cf2ef; box-shadow: 0 0 10px #6cf2ef; }
.upgrade-shell .upgrade-title-group h2 { margin: 2px 0 0; color: #eef8ff; font: 800 clamp(31px, 3.3vw, 46px)/.98 var(--font-display); letter-spacing: -.032em; text-shadow: 0 12px 38px rgba(0, 0, 0, .42); }
.upgrade-title-group > p { margin: 0; color: #7f97a9; font: 500 11px/1.45 var(--font-ui); letter-spacing: .015em; }

.upgrade-status {
  display: grid;
  min-width: 220px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(117, 164, 193, 0.16);
  padding: 10px 11px 10px 13px;
  background: rgba(3, 13, 25, 0.58);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  box-shadow: inset 2px 0 rgba(74, 235, 236, 0.65);
}

.upgrade-status > span { display: flex; align-items: center; gap: 7px; color: #89b9c8; font: 720 7px var(--font-ui); letter-spacing: .13em; }
.upgrade-status > span i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #4ce8dc; box-shadow: 0 0 9px #4ce8dc; animation: upgrade-status-pulse 1.7s ease-in-out infinite; }
.upgrade-status > small { display: flex; align-items: baseline; gap: 6px; color: #5c7388; font: 700 6px var(--font-ui); letter-spacing: .13em; }
.upgrade-status > small strong { color: #f0f8ff; font: 750 17px var(--font-display); letter-spacing: 0; }

.upgrade-divider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: #688195;
  font: 720 7px var(--font-ui);
  letter-spacing: .16em;
  animation: upgrade-divider-in 520ms 100ms cubic-bezier(.16, .8, .24, 1) both;
}

.upgrade-divider > i { display: block; height: 1px; background: linear-gradient(90deg, rgba(73, 223, 234, .35), rgba(118, 154, 181, .08)); transform-origin: left; }
.upgrade-divider > em { color: #85a5b9; font-style: normal; }

.upgrade-cards {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  overflow: visible;
}

.upgrade-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 350px;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--hd-cyan)) 34%, rgba(104, 143, 172, .2)) !important;
  border-image: none !important;
  border-radius: 0 !important;
  padding: 17px 18px 16px;
  overflow: hidden;
  color: var(--hd-text);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--card-color, var(--hd-cyan)) 7%, transparent), transparent 30%),
    linear-gradient(145deg, rgba(8, 24, 41, .96), rgba(3, 12, 25, .98) 72%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 24px 56px rgba(0, 0, 0, .28) !important;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  cursor: pointer;
  text-align: left;
  transform: none;
  animation: upgrade-card-arrive 560ms calc(150ms + var(--card-index, 0) * 78ms) cubic-bezier(.16, .82, .22, 1) both;
  transition: border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease, transform 220ms cubic-bezier(.16, .8, .24, 1);
}

.upgrade-card::before {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 2px;
  height: auto;
  content: "";
  background: linear-gradient(180deg, transparent, var(--card-color, var(--hd-cyan)) 24%, var(--card-color, var(--hd-cyan)) 76%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 44%, transparent);
  opacity: .82;
  pointer-events: none;
}

.upgrade-card::after {
  position: absolute;
  z-index: 0;
  inset: -25% auto -25% -48%;
  width: 34%;
  height: auto;
  border-radius: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(210, 249, 255, .07), transparent);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-18deg);
  animation: upgrade-card-scan 950ms calc(430ms + var(--card-index, 0) * 100ms) ease-out both;
}

.upgrade-card > * { position: relative; z-index: 1; }
.upgrade-card:hover,
.upgrade-card:focus-visible {
  z-index: 3;
  border-color: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 76%, #dffcff) !important;
  outline: none;
  filter: brightness(1.055);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .075),
    inset 0 0 38px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 5%, transparent),
    0 28px 64px rgba(0, 0, 0, .42),
    0 0 30px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 13%, transparent) !important;
  transform: translateY(-7px) scale(1.006) !important;
}

.upgrade-card:focus-visible::before { width: 3px; opacity: 1; }
.upgrade-card:active { transform: translateY(-2px) scale(.992) !important; transition-duration: 70ms; }

.upgrade-card-topline { display: flex; min-height: 28px; align-items: start; justify-content: space-between; gap: 12px; }
.upgrade-kicker { max-width: calc(100% - 54px); color: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 78%, #d9faff); font: 740 7px var(--font-ui); letter-spacing: .16em; line-height: 1.3; }
.upgrade-index {
  position: static;
  display: flex;
  width: auto;
  height: auto;
  align-items: baseline;
  gap: 5px;
  border: 0;
  border-radius: 0;
  color: #667f93;
  background: none;
  font-family: var(--font-ui);
}
.upgrade-index small { font-size: 5px; font-weight: 720; letter-spacing: .11em; }
.upgrade-index b { color: #dcebf3; font: 760 14px var(--font-display); }

.upgrade-icon-wrap {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  margin: 25px 0 18px;
}
.upgrade-icon-wrap::before,
.upgrade-icon-wrap::after,
.upgrade-icon-wrap > i { position: absolute; content: ""; pointer-events: none; }
.upgrade-icon-wrap::before { inset: 7px; border: 1px solid color-mix(in srgb, var(--card-color, var(--hd-cyan)) 31%, transparent); rotate: 45deg; background: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 4%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 7%, transparent); }
.upgrade-icon-wrap::after { inset: 0; border: 1px dashed color-mix(in srgb, var(--card-color, var(--hd-cyan)) 23%, transparent); border-radius: 50%; animation: upgrade-icon-orbit 16s linear infinite; }
.upgrade-icon-wrap > i { top: 50%; right: -12px; left: -12px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-color, var(--hd-cyan)) 40%, transparent), transparent); }
.upgrade-icon {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: grid;
  width: 72px !important;
  height: 72px !important;
  place-items: center;
  margin: 0 !important;
  border: 0;
  border-radius: 0;
  background: none;
}
.upgrade-icon img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .56)) drop-shadow(0 0 10px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 30%, transparent)); transition: filter 220ms ease, transform 220ms cubic-bezier(.16, .8, .24, 1); }
.upgrade-card:hover .upgrade-icon img,
.upgrade-card:focus-visible .upgrade-icon img { filter: drop-shadow(0 11px 10px rgba(0, 0, 0, .62)) drop-shadow(0 0 17px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 48%, transparent)); transform: translateY(-3px) scale(1.05); }

.upgrade-card-copy { display: grid; gap: 5px; }
.upgrade-install-state { display: flex; align-items: center; gap: 6px; color: #658095; font: 700 6px var(--font-ui); letter-spacing: .14em; }
.upgrade-install-state > i { display: block; width: 16px; height: 1px; background: var(--card-color, var(--hd-cyan)); box-shadow: 0 0 7px var(--card-color, var(--hd-cyan)); }
.upgrade-card .upgrade-card-copy h3 { margin: 0; color: #f0f7fb; font: 770 19px/1.12 var(--font-display); letter-spacing: .015em; }
.upgrade-card .upgrade-card-copy p { display: -webkit-box; min-height: 39px; margin: 0; overflow: hidden; color: #93a9b9; font: 500 10px/1.5 var(--font-ui); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.upgrade-tags { display: flex; min-height: 18px; justify-content: flex-start; gap: 5px; margin: 12px 0 0; }
.upgrade-tags i { border: 1px solid color-mix(in srgb, var(--card-color, var(--hd-cyan)) 27%, rgba(120, 157, 184, .16)); padding: 3px 5px 2px; color: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 66%, #c6dbe8); background: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 5%, transparent); font: 700 6px var(--font-ui); letter-spacing: .1em; }

.upgrade-card footer {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  min-height: 30px;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(121, 159, 184, .13);
  padding-top: 12px;
}
.upgrade-card footer strong { display: flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 72%, #efffff); font: 740 7px var(--font-ui); letter-spacing: .12em; }
.upgrade-card footer strong > span { font: inherit; }
.upgrade-card footer strong > i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid color-mix(in srgb, var(--card-color, var(--hd-cyan)) 40%, transparent); color: #e7fbff; font: 12px var(--font-ui); transition: background 180ms ease, transform 180ms ease; }
.upgrade-card:hover footer strong > i,
.upgrade-card:focus-visible footer strong > i { background: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 18%, transparent); transform: translateX(3px); }
.level-pips { gap: 3px; }
.level-pips .pip { width: 15px; height: 3px; border: 0; background: rgba(120, 158, 184, .17); transform: skewX(-24deg); }
.level-pips .pip.on { background: color-mix(in srgb, var(--card-color, var(--hd-cyan)) 62%, #fff); }
.level-pips .pip.next { border: 0; background: var(--card-color, var(--hd-cyan)); box-shadow: 0 0 8px color-mix(in srgb, var(--card-color, var(--hd-cyan)) 55%, transparent); }

.upgrade-card.evolution-card {
  border: 1px solid rgba(242, 204, 112, .52) !important;
  border-image: none !important;
  background:
    radial-gradient(circle at 22% 25%, rgba(242, 204, 112, .1), transparent 28%),
    linear-gradient(145deg, rgba(43, 32, 21, .96), rgba(12, 16, 35, .98) 54%, rgba(3, 12, 25, .98)) !important;
}
.upgrade-card.evolution-card::before { background: linear-gradient(180deg, transparent, #f0c96e 22%, #a982ff 80%, transparent); }

.upgrade-options {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 13px;
  border-top: 1px solid rgba(118, 158, 185, .12);
  padding-top: 11px;
  animation: upgrade-controls-in 460ms 430ms cubic-bezier(.16, .8, .24, 1) both;
}
.keyboard-tip { display: flex; align-items: center; gap: 11px; color: #60788b; font: 700 6px var(--font-ui); letter-spacing: .13em; }
.keyboard-tip > span { white-space: nowrap; }
.keyboard-tip > b { display: flex; gap: 4px; }
.keyboard-tip kbd { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(117, 164, 193, .22); border-radius: 0; color: #b8d1df; background: rgba(4, 15, 29, .72); font: 720 8px var(--font-ui); box-shadow: inset 0 -2px rgba(0, 0, 0, .24); }
.upgrade-actions { display: flex; gap: 7px; }
.upgrade-options .reroll-button {
  display: flex;
  min-width: 174px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(107, 157, 187, .22);
  border-image: none;
  border-radius: 0;
  padding: 8px 12px;
  color: #9fc7d5;
  background: rgba(3, 14, 27, .68);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  font: 720 7px var(--font-ui);
  letter-spacing: .12em;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}
.upgrade-options .reroll-button > span { color: #61e9e7; font: 15px var(--font-ui); }
.upgrade-options .banish-button { border-color: rgba(218, 97, 162, .21); color: #c9a7bd; }
.upgrade-options .banish-button > span { color: #ee78b5; }
.upgrade-options .reroll-button:hover:not(:disabled),
.upgrade-options .reroll-button:focus-visible { border-color: rgba(93, 228, 233, .52); outline: none; color: #efffff; background: rgba(13, 46, 59, .76); transform: translateY(-2px); }
.upgrade-options .banish-button:hover:not(:disabled),
.upgrade-options .banish-button:focus-visible { border-color: rgba(241, 111, 180, .48); background: rgba(63, 18, 48, .58); }
.upgrade-options .reroll-button:disabled { color: #687f90; background: rgba(3, 11, 22, .5); opacity: .86; cursor: not-allowed; }
.upgrade-options .reroll-button:disabled > span { color: #607788; }

@keyframes upgrade-field-in { from { opacity: 0; scale: .78; filter: blur(14px); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes upgrade-heading-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes upgrade-divider-in { from { opacity: 0; transform: scaleX(.72); } to { opacity: 1; transform: scaleX(1); } }
@keyframes upgrade-card-arrive { from { opacity: 0; filter: blur(7px); transform: translateY(34px) scale(.965); } to { opacity: 1; filter: none; transform: none; } }
@keyframes upgrade-card-scan { 0% { left: -48%; opacity: 0; } 18% { opacity: 1; } 100% { left: 122%; opacity: 0; } }
@keyframes upgrade-controls-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes upgrade-orbit { to { rotate: 360deg; } }
@keyframes upgrade-icon-orbit { to { rotate: -360deg; } }
@keyframes upgrade-core-breathe { 50% { opacity: .48; scale: 1.12; } }
@keyframes upgrade-status-pulse { 50% { opacity: .36; box-shadow: 0 0 3px #4ce8dc; } }

@media (max-height: 700px) and (min-width: 781px) {
  .upgrade-shell { max-height: calc(100dvh - 24px); }
  .upgrade-shell .upgrade-title-group h2 { font-size: 32px; }
  .upgrade-title-group > p { font-size: 9px; }
  .upgrade-divider { margin-top: 11px; }
  .upgrade-cards { margin-top: 8px; }
  .upgrade-card { min-height: 296px; padding: 14px 16px; }
  .upgrade-icon-wrap { width: 70px; height: 70px; margin: 12px 0 10px; }
  .upgrade-icon { width: 58px !important; height: 58px !important; }
  .upgrade-icon img { width: 56px; height: 56px; }
  .upgrade-card .upgrade-card-copy h3 { font-size: 17px; }
  .upgrade-card .upgrade-card-copy p { min-height: 31px; font-size: 9px; -webkit-line-clamp: 2; }
  .upgrade-tags { margin-top: 8px; }
  .upgrade-options { min-height: 45px; margin-top: 8px; padding-top: 7px; }
}

@media (max-width: 780px) {
  #upgrade-screen { align-items: stretch; padding: 10px; }
  .upgrade-atmosphere { width: 160vw; }
  .upgrade-shell {
    display: grid;
    width: 100%;
    height: calc(100dvh - 20px);
    max-height: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0;
    overflow: hidden;
    padding: 7px 2px 0;
  }
  .upgrade-heading { align-items: center; gap: 12px; }
  .upgrade-shell .upgrade-title-group h2 { font-size: clamp(24px, 7.5vw, 32px); }
  .upgrade-title-group > p { max-width: 290px; font-size: 9px; }
  .upgrade-status { min-width: 0; grid-template-columns: 1fr; gap: 3px; padding: 7px 9px; }
  .upgrade-status > span { font-size: 5px; }
  .upgrade-status > small { justify-content: flex-end; }
  .upgrade-status > small strong { font-size: 14px; }
  .upgrade-divider { margin-top: 10px; }
  .upgrade-cards {
    min-height: 0;
    height: 100%;
    max-height: none;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 9px;
    margin-top: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1px 3px 8px 1px;
  }
  .upgrade-card {
    min-height: 184px;
    flex: none;
    padding: 12px 13px 12px;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  }
  .upgrade-card-topline { min-height: 24px; }
  .upgrade-kicker { font-size: 6px; }
  .upgrade-index small { display: none; }
  .upgrade-index b { font-size: 12px; }
  .upgrade-icon-wrap { position: absolute; top: 46px; left: 13px; width: 62px; height: 62px; margin: 0; }
  .upgrade-icon { width: 52px !important; height: 52px !important; }
  .upgrade-icon img { width: 51px; height: 51px; }
  .upgrade-card-copy { min-height: 78px; padding-left: 75px; }
  .upgrade-card .upgrade-card-copy h3 { font-size: 16px; }
  .upgrade-card .upgrade-card-copy p { min-height: 29px; font-size: 9px; line-height: 1.42; -webkit-line-clamp: 2; }
  .upgrade-install-state { font-size: 5px; }
  .upgrade-tags { min-height: 15px; margin: 7px 0 0 75px; }
  .upgrade-tags i { padding: 2px 4px; font-size: 5px; }
  .upgrade-card footer { min-height: 24px; margin: 7px 0 0 75px; padding-top: 7px; }
  .upgrade-card footer strong { font-size: 6px; }
  .upgrade-card footer strong > i { width: 18px; height: 18px; }
  .level-pips .pip { width: 10px; }
  .upgrade-options { min-height: 54px; gap: 8px; margin-top: 0; padding-top: 8px; }
  .keyboard-tip { display: none; }
  .upgrade-actions { width: 100%; gap: 6px; }
  .upgrade-options .reroll-button { min-width: 0; min-height: 38px; flex: 1 1 50%; padding: 7px 8px; font-size: 6px; letter-spacing: .08em; }
}

@media (max-width: 460px) {
  .upgrade-title-group .eyebrow { font-size: 6px; letter-spacing: .14em; }
  .upgrade-title-group > p { max-width: 230px; }
  .upgrade-status > span { max-width: 72px; line-height: 1.35; }
  .upgrade-divider > span { font-size: 6px; }
  .upgrade-divider > em { font-size: 6px; }
  .upgrade-card { min-height: 178px; }
  .upgrade-options .reroll-button > span { display: none; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .upgrade-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; }
  .upgrade-shell .upgrade-heading,
  .upgrade-shell .upgrade-divider,
  .upgrade-shell .upgrade-cards,
  .upgrade-shell .upgrade-options { grid-column: 1; grid-row: auto; }
  .upgrade-title-group > p,
  .upgrade-status { display: none; }
  .upgrade-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .upgrade-card { min-height: 230px; }
  .upgrade-icon-wrap { width: 55px; height: 55px; margin: 5px 0 6px; }
  .upgrade-icon { width: 46px !important; height: 46px !important; }
  .upgrade-icon img { width: 45px; height: 45px; }
  .upgrade-card .upgrade-card-copy p { min-height: 26px; -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .upgrade-atmosphere,
  .upgrade-atmosphere::after,
  .upgrade-atmosphere > i,
  .upgrade-heading,
  .upgrade-divider,
  .upgrade-card,
  .upgrade-card::after,
  .upgrade-icon-wrap::after,
  .upgrade-status > span i,
  .upgrade-options,
  .level-pips .pip.next { animation: none !important; }
  .upgrade-card,
  .upgrade-card img,
  .upgrade-card footer strong > i,
  .reroll-button { transition: none !important; }
}

@media (min-width: 781px) {
  .upgrade-cards[data-count="1"] { grid-template-columns: minmax(0, 380px); justify-content: center; }
  .upgrade-cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
}

.text-button:disabled { opacity: .38; cursor: not-allowed; }

/* ------------------------------------------------ final home alignment */
.button-daily { align-items: center; }
.button-daily > span { justify-self: start; text-align: left; }
.button-daily small { justify-self: end; text-align: right; }
.loadout-chip .loadout-label,
.loadout-chip strong { justify-self: start; text-align: left; }
.loadout-chip .loadout-system { justify-self: end; text-align: right; }
.record-strip > div { min-width: 0; justify-items: start; text-align: left; }
.record-strip > div span,
.record-strip > div strong { max-width: 100%; }
.menu-footer > span:first-child { text-align: left; }
.menu-footer > span:nth-child(2) { text-align: center; }
.menu-footer > span:last-child { text-align: right; }

@media (max-width: 1024px) {
  .menu-screen {
    place-items: start center;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .menu-shell {
    width: min(560px, 100%);
    min-height: max(100%, 680px);
    padding: clamp(20px, 4vh, 36px) 0 56px;
    text-align: center;
  }
  .menu-shell > .eyebrow { display: inline-flex; }
  .logo { justify-content: center; }
  .logo small { justify-self: center; }
  .tagline { text-align: center; }
  .menu-hero {
    top: 34%;
    right: 50%;
    width: min(92vw, 680px);
    height: 44vh;
    opacity: .18;
    transform: translate(50%, -50%);
  }
  .menu-hero-caption { display: none; }
  .menu-command-deck {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: clamp(26px, 5vh, 46px) auto 0;
  }
  .menu-actions,
  .record-strip,
  .ascension-row { width: 100%; }
  .record-strip { margin-bottom: 54px; }
}

@media (max-width: 560px) {
  .record-strip > div { justify-items: center; text-align: center; }
}

@media (max-width: 1024px) and (max-height: 620px) {
  .menu-shell { padding-top: 12px; }
  .logo { margin-top: 12px; }
  .tagline { margin-top: 8px; }
  .menu-command-deck { margin-top: 18px; }
}

/* ------------------------------------------------ compact mobile combat HUD
   Portrait and landscape deliberately share density, then receive separate
   placement rules below. The playfield remains the largest visual surface. */
@media (max-width: 560px), (max-height: 540px) and (orientation: landscape) {
  #app[data-state="playing"] .hud,
  #app[data-state="paused"] .hud { padding: 0; }

  #app[data-state="playing"] .hud .glass-panel,
  #app[data-state="paused"] .hud .glass-panel,
  #app[data-state="playing"] .combo-cluster,
  #app[data-state="paused"] .combo-cluster {
    border-image: none;
    border-radius: 6px;
    background: rgba(3, 12, 24, 0.72) !important;
    box-shadow: none;
    backdrop-filter: blur(6px);
  }

  .hud-top {
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    left: max(6px, env(safe-area-inset-left));
    height: 38px;
  }

  .score-cluster {
    width: 104px;
    min-height: 38px;
    grid-template-columns: auto 1fr;
    gap: 0 5px;
    border-width: 1px !important;
    border-left-width: 2px !important;
    padding: 4px 7px;
  }
  .score-cluster .hud-label { font-size: 6px; letter-spacing: 0.1em; }
  .score-cluster strong,
  #score-value { font-size: 14px; }
  .score-pop { right: 3px; font-size: 6px; }

  .timer-cluster {
    min-width: 104px;
    gap: 0;
    border-radius: 6px;
    padding: 3px 7px;
  }
  .timer-cluster span,
  .timer-cluster small,
  #wave-label { font-size: 6px; letter-spacing: 0.1em; }
  .timer-cluster strong { font-size: 14px; line-height: 1.05; }
  .threat-track { height: 2px; }

  .icon-button { width: 36px; height: 36px; border-radius: 6px; }

  .hud-bottom {
    position: absolute;
    right: auto;
    bottom: auto !important;
    display: grid;
    width: 134px;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 4px;
    align-items: center;
    transform: none;
  }
  .vitals { min-height: 34px; border-left-width: 2px !important; padding: 4px 6px; }
  .bar-label { margin-bottom: 3px; }
  .bar-label span,
  .bar-label strong { font-size: 6px; letter-spacing: 0.06em; }
  .meter { height: 3px; }
  .level-core {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: none;
  }
  .level-core span { font-size: 5px; }
  .level-core strong { font-size: 11px; }
  .level-core svg { inset: -6px; width: 44px; height: 44px; transform: rotate(-90deg) scale(0.72); }
  .dash-status { display: none; }

  .combo-cluster {
    width: 92px;
    border: 0 !important;
    border-left: 2px solid rgba(139, 119, 255, 0.72) !important;
    padding: 4px 6px;
    opacity: 0.82;
  }
  .combo-copy span { font-size: 6px; }
  .combo-copy strong { font-size: 12px; }
  .combo-track { height: 2px; }
  .combo-cluster small { display: none; }

  .boss-cluster {
    border-radius: 6px;
    padding: 5px 8px;
    backdrop-filter: blur(7px);
  }
  .boss-cluster span,
  .boss-cluster em { font-size: 6px; }
  .boss-cluster strong { font-size: 9px; }
  .boss-track { height: 3px; }

  .beacon-objective {
    min-width: 0;
    width: 142px;
    border-radius: 6px;
    padding: 4px 7px;
  }
  .beacon-objective small { font-size: 6px; }
  .beacon-objective strong { font-size: 8px; }

  .pulse-status { display: none !important; }

  .ordnance-hud {
    top: 145px;
    right: max(7px, env(safe-area-inset-right));
    bottom: auto !important;
    left: auto;
    width: 34px;
    min-width: 0;
    border: 0 !important;
    padding: 0;
    background: transparent !important;
    box-shadow: none;
    transform: none;
  }
  .ordnance-heading { display: none; }
  .ordnance-slots { grid-template-columns: 1fr; gap: 3px; }
  .ordnance-slot {
    width: 34px;
    height: 34px;
    grid-template-columns: 1fr;
    justify-items: center;
    border-radius: 6px;
    padding: 1px;
    background: rgba(3, 12, 24, 0.7);
  }
  .ordnance-slot img { width: 28px; height: 28px; }
  .ordnance-slot > span { display: none; }
  .ordnance-meter { right: 3px; bottom: 1px; left: 3px; height: 2px; }

  .overdrive-banner {
    padding: 3px 10px;
    border: 0;
    border-radius: 5px;
    background: rgba(21, 13, 7, 0.6);
    backdrop-filter: blur(5px);
  }
  .overdrive-banner span { font-size: 14px; letter-spacing: 0.06em; }
  .overdrive-banner small { font-size: 5px; letter-spacing: 0.16em; }

  #app[data-state="playing"] .toast-layer {
    right: max(47px, calc(env(safe-area-inset-right) + 40px));
    width: min(194px, calc(100% - 102px));
    gap: 4px;
  }
  #app[data-state="playing"] .toast { grid-template-columns: 24px 1fr; gap: 6px; padding: 5px 7px; }
  #app[data-state="playing"] .toast-icon,
  #app[data-state="playing"] .toast-icon img { width: 22px; height: 22px; }
  #app[data-state="playing"] .toast strong { font-size: 7px; }
  #app[data-state="playing"] .toast span { font-size: 6px; }

  .touch-controls {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    opacity: 0.76;
  }
  .touch-actions { gap: 7px; }
  .joystick { width: 82px; height: 82px; }
  #joystick-knob { width: 34px; height: 34px; }
  .touch-dash { width: 66px; height: 66px; }
  .touch-pulse { width: 52px; height: 52px; }
  .touch-pulse span,
  .touch-dash span { font-size: 6px; }
}

@media (max-width: 560px) {
  .hud-bottom { top: max(54px, calc(env(safe-area-inset-top) + 48px)); left: max(8px, env(safe-area-inset-left)); }
  .combo-cluster { top: max(96px, calc(env(safe-area-inset-top) + 90px)); left: max(8px, env(safe-area-inset-left)); }
  .boss-cluster { top: max(52px, calc(env(safe-area-inset-top) + 46px)); width: calc(100% - 16px); }
  .beacon-objective { top: max(98px, calc(env(safe-area-inset-top) + 92px)); }
  .boss-cluster:not([hidden]) + .beacon-objective { top: max(94px, calc(env(safe-area-inset-top) + 88px)); }
  .overdrive-banner { top: max(126px, calc(env(safe-area-inset-top) + 120px)); }
  #app[data-state="playing"] .toast-layer { top: max(142px, calc(env(safe-area-inset-top) + 136px)); }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hud-bottom { top: max(50px, calc(env(safe-area-inset-top) + 44px)); left: max(8px, env(safe-area-inset-left)); width: 142px; }
  .combo-cluster { top: max(90px, calc(env(safe-area-inset-top) + 84px)); left: max(8px, env(safe-area-inset-left)); }
  .boss-cluster { top: max(50px, calc(env(safe-area-inset-top) + 44px)); width: min(360px, calc(100% - 320px)); }
  .beacon-objective { top: max(50px, calc(env(safe-area-inset-top) + 44px)); }
  .boss-cluster:not([hidden]) + .beacon-objective { top: max(88px, calc(env(safe-area-inset-top) + 82px)); }
  .ordnance-hud { top: max(140px, calc(env(safe-area-inset-top) + 134px)); }
  .overdrive-banner { top: max(82px, calc(env(safe-area-inset-top) + 76px)); }
  #app[data-state="playing"] .toast-layer { top: max(50px, calc(env(safe-area-inset-top) + 44px)); }
  .touch-controls { bottom: max(8px, env(safe-area-inset-bottom)); }
  .joystick { width: 72px; height: 72px; }
  #joystick-knob { width: 30px; height: 30px; }
  .touch-dash { width: 62px; height: 62px; }
  .touch-pulse { width: 48px; height: 48px; }
}

/* Tablets retain readable labels but move persistent status away from the
   lower playfield, where thumbs and touch controls need unobstructed space. */
@media (min-width: 561px) and (max-width: 1024px) and (min-height: 541px) {
  .hud-top {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    left: max(14px, env(safe-area-inset-left));
  }
  .score-cluster { width: 140px; min-height: 44px; padding: 6px 9px; }
  .score-cluster .hud-label { font-size: 8px; }
  .score-cluster strong,
  #score-value { font-size: 18px; }
  .timer-cluster { min-width: 140px; padding: 5px 12px; }
  .timer-cluster span,
  .timer-cluster small,
  #wave-label { font-size: 8px; }
  .timer-cluster strong { font-size: 17px; }
  .icon-button { width: 42px; height: 42px; }

  .hud-bottom {
    top: max(72px, calc(env(safe-area-inset-top) + 58px));
    right: auto;
    bottom: auto !important;
    left: max(14px, env(safe-area-inset-left));
    width: 210px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 6px;
  }
  .vitals { min-height: 42px; padding: 6px 8px; }
  .bar-label span,
  .bar-label strong { font-size: 8px; }
  .level-core { width: 42px; height: 42px; }
  .level-core svg { inset: -1px; transform: rotate(-90deg) scale(0.93); }
  .level-core strong { font-size: 13px; }
  .dash-status { display: none; }

  .combo-cluster { top: max(124px, calc(env(safe-area-inset-top) + 110px)); left: max(14px, env(safe-area-inset-left)); width: 122px; padding: 6px 8px; }
  .combo-copy span { font-size: 7px; }
  .combo-copy strong { font-size: 14px; }
  .combo-cluster small { display: none; }

  .boss-cluster { top: max(70px, calc(env(safe-area-inset-top) + 56px)); width: min(470px, calc(100% - 300px)); padding: 7px 10px; }
  .boss-cluster span,
  .boss-cluster em { font-size: 8px; }
  .boss-cluster strong { font-size: 11px; }
  .beacon-objective { top: max(86px, calc(env(safe-area-inset-top) + 72px)); min-width: 174px; padding: 7px 9px; }
  .boss-cluster:not([hidden]) + .beacon-objective { top: max(126px, calc(env(safe-area-inset-top) + 112px)); }

  .pulse-status { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 184px; height: 58px; }
  .ordnance-hud {
    top: max(218px, calc(env(safe-area-inset-top) + 204px));
    right: max(14px, env(safe-area-inset-right));
    bottom: auto !important;
    left: auto;
    width: 40px;
    min-width: 0;
    border: 0 !important;
    padding: 0;
    background: transparent !important;
    box-shadow: none;
    transform: none;
  }
  .ordnance-heading { display: none; }
  .ordnance-slots { grid-template-columns: 1fr; gap: 4px; }
  .ordnance-slot { width: 40px; height: 40px; grid-template-columns: 1fr; justify-items: center; padding: 1px; }
  .ordnance-slot img { width: 33px; height: 33px; }
  .ordnance-slot > span { display: none; }

  .overdrive-banner { top: 150px; padding: 5px 14px; }
  .overdrive-banner span { font-size: 18px; }
  .overdrive-banner small { font-size: 6px; }
  #app[data-state="playing"] .toast-layer { top: max(152px, calc(env(safe-area-inset-top) + 138px)); right: max(62px, calc(env(safe-area-inset-right) + 48px)); width: 228px; }

  .touch-controls { right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); opacity: 0.78; }
  .joystick { width: 94px; height: 94px; }
  #joystick-knob { width: 38px; height: 38px; }
  .touch-dash { width: 76px; height: 76px; }
  .touch-pulse { width: 58px; height: 58px; }
}

/* Floating touch stick: the movement pad materializes under the first free
   gameplay touch. Action buttons remain anchored and keep independent input. */
@media (hover: none), (pointer: coarse) {
  .touch-controls:not([hidden]) {
    position: fixed;
    inset: 0;
    display: block;
    opacity: 1;
    pointer-events: none;
  }

  .touch-actions {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .joystick {
    position: fixed;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(75, 232, 255, 0.72);
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(44, 236, 255, 0.08) 0 34%, transparent 36%),
      rgba(4, 15, 30, 0.58);
    box-shadow: 0 0 0 5px rgba(87, 113, 255, 0.08), inset 0 0 24px rgba(0, 0, 0, 0.32), 0 0 22px rgba(44, 225, 255, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transition: opacity 90ms ease, transform 110ms ease, visibility 0s linear 110ms;
    will-change: top, left, transform, opacity;
  }
  .joystick::after { border-radius: 50%; border-color: rgba(139, 119, 255, 0.18); }
  #joystick-knob {
    border: 2px solid rgba(128, 247, 229, 0.78);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(216, 255, 250, 0.34), rgba(36, 245, 206, 0.16) 38%, rgba(11, 49, 60, 0.72));
    box-shadow: 0 0 20px rgba(36, 245, 206, 0.22), inset 0 0 12px rgba(255, 255, 255, 0.06);
  }
  .joystick.active {
    opacity: 0.86;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
  }
}

@media (max-height: 540px) and (orientation: landscape) and (hover: none),
       (max-height: 540px) and (orientation: landscape) and (pointer: coarse) {
  .touch-actions { bottom: max(8px, env(safe-area-inset-bottom)); }
}

@media (min-width: 561px) and (max-width: 1024px) and (min-height: 541px) and (hover: none),
       (min-width: 561px) and (max-width: 1024px) and (min-height: 541px) and (pointer: coarse) {
  .touch-actions {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
  }
}