/* Global border-box reset.
 * Audit (2026-05-23) found every menu/overlay container — home,
 * play hub, skirmish, custom-overlay, run-setup, settings — was
 * overflowing the iPhone-13 viewport by 2× its horizontal padding
 * (e.g. .skirmish-body computed at 426px in a 390px viewport).
 * Cause: containers declared `width: 100%` with the default
 * `box-sizing: content-box`, so padding was added on top of the
 * 100% width instead of subtracted from it. Setting border-box
 * globally fixes every overflow at once and is the modern web
 * default; existing rules that already declared border-box are
 * unaffected. */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #02030a;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #cdf;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#game {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}


/* ============================================================
   HOLOGRAPHIC WAR TABLE STYLES — Aphelion Star Fighter Starmap
   ============================================================ */

/* -----------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   ----------------------------------------------------------- */
:root {
  /* Background — deep void blue */
  --starmap-bg: #02060f;
  --starmap-grid: rgba(120, 180, 220, 0.08);

  /* Glassmorphism panels — cool blue tints */
  --panel-bg: rgba(10, 18, 30, 0.92);
  --panel-border: rgba(120, 180, 220, 0.25);
  --panel-glow: rgba(120, 200, 255, 0.12);

  /* Node colors (semantic; tuned for space palette) */
  --battle-color: #f44;
  --battle-glow: rgba(255, 80, 80, 0.5);
  --elite-color: #b070d0;
  --elite-glow: rgba(176, 112, 208, 0.5);
  --event-color: #6cc070;
  --event-glow: rgba(108, 192, 112, 0.45);
  --resupply-color: #5cf;
  --resupply-glow: rgba(92, 204, 255, 0.45);
  --boss-color: #ffd040;
  --boss-glow: rgba(255, 208, 64, 0.6);
  --current-halo: rgba(140, 220, 255, 0.9);

  /* Connection lines */
  --path-traversed: rgba(140, 180, 220, 0.7);
  --path-available: rgba(180, 220, 255, 0.85);
  --path-locked: rgba(60, 80, 100, 0.18);

  /* Text */
  --text-primary: #e8f0ff;
  --text-secondary: #7898b8;
  --text-accent: #9cf;

  /* Side colors — match SIDES.blue/red in classes.js */
  --allied-primary: #5cf;
  --allied-accent: #2a6a90;
  --hostile-primary: #f55;
  --hostile-accent: #802020;

  /* HUD */
  --hud-strip-height: 56px;
  /* No longer a right sidebar — tab bar is at bottom now (Tier 41).
     Keep at 0 so legacy `right: var(--fleet-panel-width)` rules
     align flush instead of leaving a gap. */
  --fleet-panel-width: 0px;
  --starmap-tabbar-height: 72px;
}

/* -----------------------------------------------------------
   2. Root container — fullscreen overlay above canvas
   ----------------------------------------------------------- */
.starmap-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  touch-action: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-primary);
}

/* -----------------------------------------------------------
   3. Background layers — grid + starfield
   ----------------------------------------------------------- */
.starmap-bg-layer {
  position: absolute;
  inset: 0;
  background: var(--starmap-bg);
  overflow: hidden;
}

/* Drifting nebula clouds — layered blurred colour fields that slowly
   pan + breathe, giving the void depth behind the node lattice. */
.starmap-nebula {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(90, 70, 180, 0.30), transparent 70%),
    radial-gradient(42% 34% at 78% 64%, rgba(40, 120, 170, 0.26), transparent 72%),
    radial-gradient(30% 26% at 60% 18%, rgba(170, 60, 120, 0.20), transparent 70%),
    radial-gradient(34% 30% at 38% 80%, rgba(50, 100, 200, 0.22), transparent 72%);
  filter: blur(8px);
  opacity: 0.9;
  animation: nebula-drift 60s ease-in-out infinite alternate;
}

@keyframes nebula-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2.5%, -2%) scale(1.06); }
  100% { transform: translate(-2%, 2.5%) scale(1.02); }
}

/* Subtle grid pattern */
.starmap-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--starmap-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--starmap-grid) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* CSS-generated starfield using box-shadow (no JS particles) */
.starmap-starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.starmap-starfield::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    12vw 8vh 1px 0 rgba(220,235,255,0.3),
    34vw 22vh 1px 0 rgba(200,225,255,0.25),
    56vw 12vh 2px 0 rgba(180,210,240,0.4),
    78vw 35vh 1px 0 rgba(220,235,255,0.35),
    18vw 45vh 2px 0 rgba(255,220,210,0.3),
    45vw 55vh 1px 0 rgba(220,235,255,0.25),
    67vw 68vh 2px 0 rgba(180,210,240,0.35),
    89vw 78vh 1px 0 rgba(200,225,255,0.3),
    25vw 82vh 1px 0 rgba(220,235,255,0.4),
    52vw 88vh 2px 0 rgba(255,220,210,0.25),
    8vw 62vh 1px 0 rgba(180,210,240,0.3),
    72vw 18vh 1px 0 rgba(220,235,255,0.35),
    38vw 72vh 2px 0 rgba(200,225,255,0.3),
    92vw 48vh 1px 0 rgba(220,235,255,0.4),
    15vw 28vh 1px 0 rgba(180,210,240,0.25),
    62vw 42vh 2px 0 rgba(255,220,210,0.35),
    82vw 92vh 1px 0 rgba(220,235,255,0.3),
    5vw 95vh 1px 0 rgba(200,225,255,0.25),
    48vw 5vh 2px 0 rgba(180,210,240,0.4),
    95vw 62vh 1px 0 rgba(220,235,255,0.3),
    28vw 38vh 1px 0 rgba(220,235,255,0.35),
    55vw 75vh 1px 0 rgba(255,220,210,0.3),
    73vw 28vh 2px 0 rgba(180,210,240,0.25),
    88vw 15vh 1px 0 rgba(220,235,255,0.4),
    20vw 58vh 1px 0 rgba(200,225,255,0.35),
    42vw 92vh 1px 0 rgba(220,235,255,0.3),
    60vw 3vh 2px 0 rgba(180,210,240,0.3),
    85vw 52vh 1px 0 rgba(255,220,210,0.25),
    35vw 65vh 1px 0 rgba(220,235,255,0.4),
    10vw 15vh 1px 0 rgba(180,210,240,0.3),
    68vw 85vh 1px 0 rgba(200,225,255,0.35),
    50vw 48vh 3px 1px rgba(220,235,255,0.5),
    22vw 18vh 2px 0 rgba(180,210,240,0.4),
    75vw 72vh 1px 0 rgba(220,235,255,0.3);
}

.starmap-starfield::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    8vw 12vh 1px 0 rgba(220,235,255,0.5),
    30vw 68vh 2px 0 rgba(180,210,240,0.45),
    58vw 25vh 1px 0 rgba(200,225,255,0.4),
    80vw 82vh 1px 0 rgba(220,235,255,0.5),
    14vw 88vh 2px 0 rgba(180,210,240,0.35),
    40vw 35vh 1px 0 rgba(255,220,210,0.4),
    65vw 58vh 1px 0 rgba(220,235,255,0.45),
    90vw 42vh 2px 0 rgba(200,225,255,0.35),
    3vw 52vh 1px 0 rgba(180,210,240,0.5),
    47vw 78vh 1px 0 rgba(220,235,255,0.4),
    70vw 8vh 2px 0 rgba(255,220,210,0.45),
    22vw 95vh 1px 0 rgba(180,210,240,0.35),
    85vw 28vh 1px 0 rgba(220,235,255,0.5),
    12vw 42vh 1px 0 rgba(200,225,255,0.4),
    53vw 62vh 2px 0 rgba(180,210,240,0.45),
    76vw 48vh 1px 0 rgba(220,235,255,0.4),
    95vw 88vh 1px 0 rgba(255,220,210,0.35),
    18vw 75vh 2px 0 rgba(180,210,240,0.5),
    36vw 15vh 1px 0 rgba(220,235,255,0.45),
    64vw 95vh 1px 0 rgba(200,225,255,0.4);
}

/* -----------------------------------------------------------
   4. World container — pannable via CSS transform
   ----------------------------------------------------------- */
.starmap-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
  cursor: grab;
}

.starmap-world.dragging {
  cursor: grabbing;
}

/* -----------------------------------------------------------
   5. SVG Edges layer
   ----------------------------------------------------------- */
.starmap-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.starmap-edge {
  fill: none;
  stroke-linecap: round;
  transition: opacity 0.3s ease;
}

.starmap-edge.edge-traversed {
  stroke: var(--path-traversed);
  stroke-width: 2.5;
  opacity: 0.7;
  filter: drop-shadow(0 0 4px var(--path-traversed));
}

.starmap-edge.edge-available {
  stroke: var(--path-available);
  stroke-width: 2;
  stroke-dasharray: 8 4;
  animation: marching-ants 1s linear infinite;
  filter: drop-shadow(0 0 3px var(--path-available));
}

.starmap-edge.edge-locked {
  stroke: var(--path-locked);
  stroke-width: 1;
  opacity: 0.1;
}

/* Warp lane flash animation for jumps */
@keyframes warp-lane {
  0% { opacity: 0; stroke-width: 1; }
  50% { opacity: 1; stroke-width: 4; }
  100% { opacity: 0; stroke-width: 1; }
}

/* Marching ants for available paths */
@keyframes marching-ants {
  to { stroke-dashoffset: -20; }
}

/* -----------------------------------------------------------
   6. Nodes container
   ----------------------------------------------------------- */
.starmap-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* -----------------------------------------------------------
   7. Base node styles
   ----------------------------------------------------------- */
.starmap-node {
  position: absolute;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  animation: node-bob var(--node-bob-dur, 3s) ease-in-out infinite;
  z-index: 2;
}
/* Per-node hue variation — shifts the body/glow/decoration colour
   family so no two same-type nodes read identically. Scoped to the
   coloured parts so the glyph + flag text stay neutral/legible. */
.node-core,
.node-glow,
.node-ring,
.node-corona,
.node-pring,
.node-orbit-dot {
  filter: hue-rotate(var(--node-hue, 0deg));
}
/* Lit-sphere highlight — gives every core a sense of volume + light
   direction so it reads as a celestial body, not a flat shape. Clipped
   to the core's clip-path shape. */
.node-core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 33% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08) 45%, transparent 62%);
  pointer-events: none;
}

.starmap-node:hover {
  z-index: 5;
  filter: brightness(1.2);
}

/* Node internal parts */
.node-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.node-core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  pointer-events: none;
}

.node-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: rgba(20, 16, 12, 0.95);
  pointer-events: none;
  z-index: 3;
}
.node-glyph svg {
  display: block;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}
/* Suppress legacy text-letter glyphs (B/E/?/R/etc) now that SVG
   icons are rendered inside .node-glyph (Tier 41). */
.node-glyph::after { content: none !important; }

/* Node flag label — small text below the node showing boss/ace/
   vendor name. Polish-pass addition (Tier 41) so the player doesn't
   have to hover to read which star is which. */
.node-flag {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: bold;
  color: rgba(220, 230, 240, 0.7);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-boss .node-flag {
  font-size: 10px;
  color: #ffd680;
  text-shadow: 0 0 6px rgba(255, 198, 102, 0.45), 0 0 8px rgba(0, 0, 0, 0.85);
}
.node-elite .node-flag {
  color: #fdb;
}
.node-resupply .node-flag {
  color: #9df;
}

.node-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

/* Visited checkmark stamp */
.node-visited-stamp {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 16px;
  height: 16px;
  display: none;
  pointer-events: none;
}

.node-visited-stamp::after {
  content: "\2713";
  color: #5a8aaa;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(140, 120, 80, 0.6);
}

/* "YOU ARE HERE" chevron for current node */
.node-chevron {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--current-halo);
  text-shadow: 0 0 6px var(--current-halo);
  white-space: nowrap;
  pointer-events: none;
  animation: node-bob 3s ease-in-out infinite reverse;
  z-index: 4;
}

/* -----------------------------------------------------------
   8. Node type styles — each with unique shape, color, glow
   ----------------------------------------------------------- */

/* Battle — sharp crosshair (4-point star), orange-red */
.node-battle .node-glow {
  background: radial-gradient(circle, var(--battle-glow) 0%, transparent 70%);
}

.node-battle .node-core {
  background: var(--battle-color);
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  animation: battle-pulse 2s ease-in-out infinite;
}

.node-battle .node-glyph::after {
  content: "B";
  font-size: 14px;
}

/* Elite — jagged diamond (rotated square), purple */
.node-elite .node-glow {
  background: radial-gradient(circle, var(--elite-glow) 0%, transparent 70%);
}

.node-elite .node-core {
  background: var(--elite-color);
  clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%);
  animation: elite-rotate 8s linear infinite, battle-pulse 2s ease-in-out infinite;
}

.node-elite .node-glyph::after {
  content: "E";
  font-size: 14px;
}

/* Elite crown aura ring */
.node-elite .node-ring {
  border-color: var(--elite-color);
  border-style: dashed;
  inset: -10px;
  animation: elite-rotate 12s linear infinite reverse;
}

/* Event — swirl circle, cyan */
.node-event .node-glow {
  background: radial-gradient(circle, var(--event-glow) 0%, transparent 70%);
}

.node-event .node-core {
  background: var(--event-color);
  clip-path: circle(45%);
  animation: event-drift 4s ease-in-out infinite;
}

.node-event .node-glyph::after {
  content: "?";
  font-size: 18px;
  color: rgba(20, 16, 12, 0.85);
}

/* Event swirl via conic gradient overlay */
.node-event .node-core::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, var(--event-color) 30%, transparent 60%, var(--event-color) 80%, transparent 100%);
  opacity: 0.3;
  animation: elite-rotate 6s linear infinite;
  pointer-events: none;
}

/* Resupply — hexagon, teal-green */
.node-resupply .node-glow {
  background: radial-gradient(circle, var(--resupply-glow) 0%, transparent 70%);
}

.node-resupply .node-core {
  background: var(--resupply-color);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation: ring-rotate 6s linear infinite;
}

.node-resupply .node-glyph::after {
  content: "R";
  font-size: 12px;
}

/* Resupply rotating ring */
.node-resupply .node-ring {
  border-color: var(--resupply-color);
  inset: -10px;
  animation: ring-rotate 6s linear infinite;
}

/* Boss — large starburst (8-point), gold */
.node-boss {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
}

.node-boss .node-glow {
  background: radial-gradient(circle, var(--boss-glow) 0%, transparent 70%);
  animation: lens-pulse 3s ease-in-out infinite;
}

.node-boss .node-core {
  background: var(--boss-color);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.node-boss .node-glyph::after {
  content: "\2605";
  font-size: 20px;
  color: rgba(20, 16, 12, 0.8);
}

/* -----------------------------------------------------------
   9. Node state styles
   ----------------------------------------------------------- */

/* Current — bright halo + "YOU ARE HERE" chevron */
.node-state-current .node-glow {
  box-shadow: 0 0 12px var(--current-halo), 0 0 24px var(--current-halo);
  animation: breathe-glow 2.5s ease-in-out infinite;
}

.node-state-current .node-ring {
  border-color: var(--current-halo);
  border-width: 2px;
  animation: breathe-glow 2.5s ease-in-out infinite;
}

/* Reachable — full brightness, clickable */
.node-state-reachable {
  opacity: 1;
}

.node-state-reachable .node-glow {
  opacity: 0.8;
}

.node-state-reachable .node-ring {
  border-color: rgba(180, 220, 255, 0.5);
  border-style: solid;
}

/* Visited — desaturated, dimmed, checkmark stamp */
.node-state-visited {
  filter: grayscale(70%) brightness(0.6);
  opacity: 0.75;
}

.node-state-visited .node-glow {
  opacity: 0.3;
}

.node-state-visited .node-visited-stamp {
  display: block;
}

/* Locked — small, grayscale, low opacity, no interactions */
.node-state-locked {
  transform: scale(0.75);
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(100%);
}

.node-state-locked .node-glow {
  opacity: 0.1;
}

.node-state-locked .node-ring {
  border-color: #666;
  border-style: dashed;
}

/* -----------------------------------------------------------
   10. Keyframe animations
   ----------------------------------------------------------- */

/* Gentle bob per node */
@keyframes node-bob {
  0%, 100% { transform: translateY(0) scale(var(--node-scale, 1)); }
  50% { transform: translateY(-4px) scale(var(--node-scale, 1)); }
}

/* Battle heartbeat pulse */
@keyframes battle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Elite slow rotation */
@keyframes elite-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Event drift */
@keyframes event-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}

/* Resupply ring rotation */
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Boss lensing pulse */
@keyframes lens-pulse {
  0%, 100% { filter: blur(0); }
  50% { filter: blur(2px) brightness(1.3); }
}

/* Current breathing halo */
@keyframes breathe-glow {
  0%, 100% { box-shadow: 0 0 12px var(--current-halo); }
  50% { box-shadow: 0 0 24px var(--current-halo), 0 0 48px var(--current-halo); }
}

/* -----------------------------------------------------------
   8b. Procedural node decorations — orbit / ring / speckles /
   corona. Toggled per-node by nodeVisualVariant() in starmap.js
   so each node reads as its own little star system.
   ----------------------------------------------------------- */

/* Star corona — radiating spikes behind the core. Two crossed
   conic flares + a soft bloom, slowly counter-rotating. */
.node-corona {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, currentColor 6deg, transparent 18deg,
      transparent 84deg, currentColor 90deg, transparent 102deg,
      transparent 168deg, currentColor 174deg, transparent 186deg,
      transparent 252deg, currentColor 258deg, transparent 270deg,
      transparent 342deg, currentColor 348deg, transparent 360deg);
  color: inherit;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 42%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 28%, #000 42%, transparent 78%);
  animation: corona-spin 14s linear infinite;
  z-index: 0;
}
.node-battle .node-corona { color: var(--battle-color); }
.node-elite  .node-corona { color: var(--elite-color); }
.node-boss   .node-corona { color: var(--boss-color); opacity: 0.5; }

/* Planetary ring — a thin tilted ellipse encircling the body. */
.node-pring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: var(--resupply-color);
  opacity: 0.7;
  pointer-events: none;
  transform: rotate(var(--ring-tilt, -30deg)) scaleY(0.34);
  box-shadow: 0 0 6px currentColor;
  z-index: 1;
}
.node-boss     .node-pring { color: var(--boss-color); inset: -6px; border-width: 2.5px; }
.node-elite    .node-pring { color: var(--elite-color); }
.node-resupply .node-pring { color: var(--resupply-color); }

/* Asteroid speckles — a scatter of motes drifting around the node. */
.node-speckles {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  animation: speckle-drift 18s linear infinite;
  z-index: 1;
}
.node-speckles::before,
.node-speckles::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(200, 210, 230, 0.9);
  top: 50%;
  left: 50%;
}
.node-speckles::before {
  box-shadow:
    10px -14px 0 0 rgba(190,200,220,0.8),
    -16px 6px 0 0 rgba(160,175,200,0.7),
    14px 12px 0 0 rgba(200,210,230,0.85),
    -8px -12px 0 0 rgba(170,185,205,0.6);
}
.node-speckles::after {
  box-shadow:
    18px 2px 0 0 rgba(180,190,215,0.7),
    -14px -10px 0 0 rgba(200,210,230,0.8),
    6px 16px 0 0 rgba(160,175,200,0.6),
    -18px 10px 0 0 rgba(190,200,220,0.75);
}

/* Orbiting satellite — a small body revolving the node. */
.node-orbit {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  pointer-events: none;
  animation: orbit-spin var(--orbit-dur, 9s) linear infinite;
  z-index: 4;
}
.node-orbit-rev .node-orbit { animation-direction: reverse; }
.node-orbit-dot {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #dff;
  box-shadow: 0 0 5px #9cf, 0 0 9px rgba(150,210,255,0.6);
}

@keyframes corona-spin {
  from { transform: rotate(var(--node-spin, 0deg)); }
  to   { transform: rotate(calc(var(--node-spin, 0deg) + 360deg)); }
}
@keyframes orbit-spin {
  from { transform: rotate(var(--node-spin, 0deg)); }
  to   { transform: rotate(calc(var(--node-spin, 0deg) + 360deg)); }
}
@keyframes speckle-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -----------------------------------------------------------
   11. Fleet Panel — right sidebar, glassmorphism
   ----------------------------------------------------------- */
.starmap-fleet-panel {
  position: fixed;
  top: var(--hud-strip-height);
  right: 0;
  width: var(--fleet-panel-width);
  bottom: 0;
  background: linear-gradient(180deg,
    rgba(4, 10, 20, 0.6) 0%,
    rgba(30, 24, 18, 0.9) 25%,
    rgba(30, 24, 18, 0.95) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 2px solid rgba(180, 220, 255, 0.35);
  padding: 18px 16px;
  overflow-y: auto;
  z-index: 20;
  pointer-events: auto;
  box-sizing: border-box;
}

.fleet-panel-header {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.fleet-panel-divider {
  height: 1px;
  background: rgba(180, 220, 255, 0.18);
  margin: 12px 0;
}

.fleet-panel-capitals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fleet-capital-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fleet-capital-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fleet-capital-glyph {
  font-size: 16px;
  line-height: 1;
}

.fleet-capital-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
}

.fleet-capital-hp-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-left: auto;
}

/* Tier 16: per-capital sub-line — class + captain. Reads as
   "Cruiser · Capt. Iverra" under the ship name. */
.fleet-capital-sub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
  margin-left: 24px;
}
.fleet-capital-class {
  text-transform: uppercase;
}
.fleet-capital-captain::before {
  content: "·";
  margin-right: 4px;
  color: var(--text-secondary);
}
.fleet-capital-captain {
  font-style: italic;
}
.fleet-capital-trait {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.6px;
  background: rgba(120, 200, 255, 0.16);
  color: #aef;
  border-radius: 2px;
  text-transform: uppercase;
  cursor: help;
}

/* Captain level stars in the fleet panel row (Tier 32). */
.fleet-capital-rank {
  margin-left: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #fc6;
  text-shadow: 0 0 6px rgba(255, 198, 102, 0.5);
}

/* Clickable capital row — hover + active visual feedback. */
.fleet-capital-clickable {
  cursor: pointer;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.fleet-capital-clickable:hover {
  background: rgba(120, 200, 255, 0.10);
}
.fleet-capital-clickable:active {
  background: rgba(120, 200, 255, 0.20);
}

.fleet-hp-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 3px;
  overflow: hidden;
}

.fleet-hp-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.fleet-hp-bar-fill.hp-high {
  background: #5cf;
}

.fleet-hp-bar-fill.hp-mid {
  background: #fc6;
}

.fleet-hp-bar-fill.hp-low {
  background: #f55;
}

.fleet-panel-craft {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fleet-craft-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.fleet-craft-name {
  font-weight: bold;
  color: var(--text-primary);
}

.fleet-craft-count {
  font-weight: bold;
  font-size: 15px;
  color: #fff;
}

.fleet-panel-boons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fleet-boon-item {
  font-size: 12px;
  color: #fe8;
}

.fleet-panel-section-title {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fleet-panel-dossier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fleet-dossier-item {
  padding: 6px 8px;
  border-radius: 3px;
  border-left: 3px solid #555;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  line-height: 1.35;
}

.fleet-dossier-item .dossier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.fleet-dossier-item .dossier-name {
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.4px;
}

.fleet-dossier-item .dossier-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
}

.fleet-dossier-item .dossier-detail {
  color: #cbd;
  margin-top: 2px;
  font-size: 10.5px;
}

.fleet-dossier-ally    { border-left-color: #5cf; }
.fleet-dossier-rival   { border-left-color: #f57; }
.fleet-dossier-intel   { border-left-color: #fe8; }
.fleet-dossier-memorial{ border-left-color: #ac9; }
.fleet-dossier-note    { border-left-color: #888; }

/* Career log (Tier 18) — chronological strip under the dossier.
   Each line shows the act tag + entry text, tinted by kind. */
.fleet-panel-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fleet-log-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid #555;
  border-radius: 2px;
}
.fleet-log-item .log-act {
  font-size: 10px;
  font-weight: bold;
  color: var(--text-secondary);
  letter-spacing: 0.6px;
  flex-shrink: 0;
}
.fleet-log-item .log-text {
  color: var(--text-primary);
}
.fleet-log-boss      { border-left-color: #fc6; }
.fleet-log-rival     { border-left-color: #f57; }
.fleet-log-ace       { border-left-color: #ec7; }
.fleet-log-arc       { border-left-color: #6cf; }
.fleet-log-promotion { border-left-color: #aef; }
.fleet-log-note      { border-left-color: #888; }

/* Memoir lines on the memorial wall. Same kind tinting as the
   live career log but quieter — these are completed careers. */
.memorial-row-memoir {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.memorial-row-memoir .memoir-line {
  font-size: 10.5px;
  color: var(--text-secondary);
  padding-left: 8px;
  border-left: 2px solid #555;
  line-height: 1.35;
}
.memorial-row-memoir .memoir-act {
  display: inline-block;
  font-weight: bold;
  margin-right: 4px;
  letter-spacing: 0.6px;
  color: var(--text-primary);
}
.memoir-boss      { border-left-color: #fc6 !important; }
.memoir-rival     { border-left-color: #f57 !important; }
.memoir-ace       { border-left-color: #ec7 !important; }
.memoir-arc       { border-left-color: #6cf !important; }
.memoir-promotion { border-left-color: #aef !important; }
.memoir-note      { border-left-color: #888 !important; }

/* -----------------------------------------------------------
   12. Header HUD — top strip
   ----------------------------------------------------------- */
.starmap-header {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--fleet-panel-width);
  height: var(--hud-strip-height);
  background: linear-gradient(180deg,
    rgba(4, 8, 16, 0.92) 0%,
    rgba(4, 8, 16, 0) 100%);
  border-bottom: 1px solid rgba(180, 220, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  z-index: 20;
  pointer-events: none;
}

.header-badge {
  display: flex;
  flex-direction: column;
  background: rgba(20, 40, 60, 0.85);
  border: 1.5px solid #5cf;
  padding: 4px 14px;
  min-width: 90px;
}

.badge-label {
  font-size: 9px;
  font-weight: bold;
  color: #a89878;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-value {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.header-faction {
  display: flex;
  flex-direction: column;
  margin-left: 4px;
}

.faction-label {
  font-size: 9px;
  font-weight: bold;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.faction-value {
  font-size: 16px;
  font-weight: bold;
}

.header-currencies {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cred-chip,
.fuel-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: bold;
}

.cred-chip {
  background: rgba(40, 30, 16, 0.85);
  border: 1.5px solid #fc8;
  color: #fff;
}

.cred-icon {
  color: #fc8;
  font-size: 16px;
}

.fuel-chip {
  background: rgba(20, 40, 50, 0.85);
  border: 1.5px solid #5cf;
  color: #fff;
}

.fuel-icon {
  color: #5cf;
  font-size: 14px;
}

/* -----------------------------------------------------------
   Tier 41 — Bottom tab bar + tab panel + overflow menu
   ----------------------------------------------------------- */
.starmap-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--starmap-tabbar-height);
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.92), rgba(4, 8, 14, 0.96));
  border-top: 1px solid rgba(120, 200, 255, 0.18);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  z-index: 25;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.32);
}
.starmap-tab-bar .tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  border-top: 2px solid transparent;
}
.starmap-tab-bar .tab-btn:hover {
  background: rgba(120, 200, 255, 0.06);
  color: var(--text-primary);
}
.starmap-tab-bar .tab-btn.active {
  color: #aef;
  border-top-color: #6cf;
  background: rgba(120, 200, 255, 0.10);
}
.starmap-tab-bar .tab-icon {
  font-size: 18px;
  line-height: 1;
}
.starmap-tab-bar .tab-label {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  font-weight: bold;
}

/* Tab content overlay — slides up over the map. */
.starmap-tab-panel {
  position: fixed;
  top: var(--hud-strip-height);
  left: 0;
  right: 0;
  bottom: var(--starmap-tabbar-height);
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.95), rgba(4, 8, 14, 0.98));
  z-index: 22;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.starmap-tab-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.starmap-tab-panel[aria-hidden="true"] {
  display: none;
}
.tab-panel-header {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.15);
  gap: 12px;
}
.tab-back-btn {
  background: rgba(120, 200, 255, 0.10);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.30);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.15s ease;
}
.tab-back-btn:hover {
  background: rgba(120, 200, 255, 0.22);
  color: #fff;
}
.tab-panel-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 2.4px;
  color: #fff;
  font-weight: bold;
}
.tab-panel-spacer { flex: 1; }
.tab-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* Card containers used inside tabs. */
.td-card {
  background: rgba(8, 14, 24, 0.55);
  border: 1px solid rgba(120, 200, 255, 0.15);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.td-eyebrow {
  font-size: 9.5px;
  letter-spacing: 2px;
  color: var(--text-secondary);
  font-weight: bold;
}
.td-headline {
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #fff;
}
.td-sub {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
}
.td-bignum {
  font-size: 32px;
  color: #ffd680;
  font-weight: bold;
  letter-spacing: 1px;
}
.td-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.td-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.td-chip {
  padding: 4px 10px;
  background: rgba(120, 200, 255, 0.16);
  color: #aef;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.8px;
  font-weight: bold;
  text-transform: uppercase;
}
.td-muted {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 12px;
}
.td-statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.td-statgrid > div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.td-statgrid > div > span { color: var(--text-secondary); }
.td-statgrid > div > b { color: #fff; }
.td-empty {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  padding: 12px;
}

/* List rows shared across tabs (commanders, fleet, rivals). */
.td-row {
  background: rgba(8, 14, 24, 0.55);
  border: 1px solid rgba(120, 200, 255, 0.12);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-row + .td-row { margin-top: 6px; }
.td-row-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}
.td-row-clickable:hover {
  border-color: rgba(120, 200, 255, 0.45);
  transform: translateX(2px);
}
.td-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.td-row-name {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.4px;
}
.td-row-rank {
  font-size: 11px;
  color: #fc6;
  text-shadow: 0 0 6px rgba(255, 198, 102, 0.4);
}
.td-row-pct {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: auto;
  letter-spacing: 0.6px;
}
.td-row-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}
.td-row-class {
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.td-row-captain {
  font-style: italic;
}
.td-row-trait {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 9px;
  background: rgba(120, 200, 255, 0.16);
  color: #aef;
  border-radius: 2px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
/* Commander perks (level-up picks) in the COMMANDERS dossier tab. */
.td-perk-banner {
  margin: 0 0 8px;
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a1420;
  background: linear-gradient(90deg, #ffd680, #ffb347);
  border-radius: 4px;
  font-weight: bold;
}
.td-row-wingcmd { border-left: 2px solid rgba(120, 200, 255, 0.35); }
.td-perk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 2px;
}
.td-perk-chip {
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(150, 240, 200, 0.16);
  color: #9af0c8;
  border: 1px solid rgba(150, 240, 200, 0.35);
}
.td-perk-pick-label {
  margin: 6px 0 3px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #ffd680;
  font-weight: bold;
}
.td-perk-pick-row { display: flex; flex-direction: column; gap: 4px; }
.td-perk-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid #3a7bb0;
  border-radius: 4px;
  background: rgba(8, 32, 58, 0.7);
  color: #d6f1ff;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.td-perk-pick:hover, .td-perk-pick:active {
  background: rgba(90, 200, 255, 0.16);
  border-color: #8fd6ff;
}
.td-perk-pick-name { font-size: 11px; font-weight: bold; }
.td-perk-pick-blurb { font-size: 9px; color: #8fc8ee; }
/* Tappable commander rows → open the detail overlay. */
.td-row-tap { cursor: pointer; transition: background 0.1s; }
.td-row-tap:hover, .td-row-tap:active { background: rgba(120, 200, 255, 0.10); }
.td-row-chev { margin-left: 6px; color: #6fa8d0; font-weight: bold; }
/* Perk list inside the commander detail overlay. */
.cdtl-perks { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.cdtl-perk {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px; text-align: left;
  background: rgba(150, 240, 200, 0.10);
  border-left: 2px solid #9af0c8; border-radius: 3px;
}
.cdtl-perk-name { font-size: 12px; font-weight: bold; color: #c9ffe6; }
.cdtl-perk-blurb { font-size: 10px; color: #9fd0c0; }
.cdtl-perk-empty { font-size: 11px; font-style: italic; color: var(--text-secondary); }
.td-row-detail {
  font-size: 11px;
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.4;
}
.td-row-hpbar {
  height: 4px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.td-row-hpfill {
  height: 100%;
  transition: width 0.3s ease;
}
.td-row-hpfill.hp-high { background: #6e9; }
.td-row-hpfill.hp-mid  { background: #fc6; }
.td-row-hpfill.hp-low  { background: #f66; }
.td-tone-rival     { border-left: 3px solid #f57; }
.td-tone-memorial  { border-left: 3px solid #ac9; opacity: 0.7; }
.td-tone-note      { border-left: 3px solid #888; }

/* Factions tab — reputation bars. */
.td-faction-row {
  background: rgba(8, 14, 24, 0.55);
  border: 1px solid rgba(120, 200, 255, 0.12);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.td-faction-row + .td-faction-row { margin-top: 8px; }
.td-faction-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.6px;
}
.td-faction-name {
  font-weight: bold;
  color: #fff;
  letter-spacing: 1.4px;
}
.td-faction-value {
  color: var(--text-secondary);
}
.td-faction-bar {
  position: relative;
  height: 8px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 4px;
}
.td-faction-axis {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: rgba(255, 255, 255, 0.40);
}
.td-faction-fill {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 8px;
  border-radius: 4px;
  background: #aef;
  box-shadow: 0 0 8px rgba(170, 230, 255, 0.6);
  transform: translateX(-4px);
  transition: left 0.3s ease;
}
.td-faction-ally    .td-faction-fill { background: #6e9; box-shadow: 0 0 10px rgba(110, 230, 153, 0.65); }
.td-faction-rival   .td-faction-fill { background: #f57; box-shadow: 0 0 10px rgba(255, 87, 119, 0.6); }
.td-faction-neutral .td-faction-fill { background: #ccc; }

/* Log tab. */
.td-log-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.td-log-line {
  background: rgba(8, 14, 24, 0.45);
  border-left: 2px solid #555;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}
.td-log-act {
  font-weight: bold;
  margin-right: 6px;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}
.td-log-boss      { border-left-color: #fc6; }
.td-log-rival     { border-left-color: #f57; }
.td-log-ace       { border-left-color: #ec7; }
.td-log-arc       { border-left-color: #6cf; }
.td-log-promotion { border-left-color: #aef; }
.td-log-note      { border-left-color: #888; }

/* Header overflow menu (Tier 41). */
.header-menu-btn {
  background: rgba(120, 200, 255, 0.10);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.30);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  margin-left: 8px;
  transition: all 0.15s ease;
}
.header-menu-btn:hover {
  background: rgba(120, 200, 255, 0.25);
  color: #fff;
}
.starmap-overflow {
  position: fixed;
  top: calc(var(--hud-strip-height) + 8px);
  right: 16px;
  z-index: 30;
  background: rgba(8, 14, 24, 0.96);
  border: 1px solid rgba(120, 200, 255, 0.30);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s ease;
}
.starmap-overflow[aria-hidden="true"] {
  display: none;
}
.overflow-item {
  background: transparent;
  color: var(--text-primary);
  border: none;
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.8px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}
.overflow-item:hover {
  background: rgba(120, 200, 255, 0.12);
  color: #fff;
}
.overflow-item + .overflow-item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Slim header redesign (Tier 41). */
.starmap-header .header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* -----------------------------------------------------------
   13. Footer buttons (legacy, now unused — Tier 41 replaced
   with tab bar above. Kept hidden so old saves with stray
   instances don't disrupt layout.)
   ----------------------------------------------------------- */
.starmap-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: var(--fleet-panel-width);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}

.starmap-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1.5px solid;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  font-family: inherit;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.starmap-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

.starmap-btn:active {
  transform: translateY(0);
  filter: brightness(0.9);
}

.abandon-btn {
  background: rgba(60, 30, 30, 0.88);
  border-color: #c66;
  color: #fbb;
}

.close-btn {
  background: rgba(30, 50, 40, 0.85);
  border-color: #6c9;
  color: #bfe;
}

/* -----------------------------------------------------------
   14. Node tooltip
   ----------------------------------------------------------- */
.node-tooltip {
  position: fixed;
  z-index: 30;
  background: rgba(30, 24, 18, 0.92);
  border: 1px solid rgba(180, 220, 255, 0.4);
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 160px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.node-tooltip[aria-hidden="false"] {
  opacity: 1;
}

.tooltip-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-transform: capitalize;
}

.tooltip-body {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.tooltip-cost {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tooltip-cost.unaffordable {
  color: #f97;
}

/* -----------------------------------------------------------
   15. Jump confirmation overlay
   ----------------------------------------------------------- */
.jump-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  background: rgba(30, 24, 18, 0.95);
  border: 1.5px solid rgba(180, 220, 255, 0.5);
  border-radius: 8px;
  padding: 24px 32px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.jump-confirm[aria-hidden="false"] {
  display: block;
}

.jump-confirm-text {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.jump-confirm-cost {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.jump-confirm-btn,
.jump-cancel-btn {
  padding: 8px 20px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1.5px solid;
  cursor: pointer;
  margin: 0 6px;
  font-family: inherit;
  transition: all 0.2s ease;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}

.jump-confirm-btn {
  background: rgba(30, 60, 80, 0.9);
  border-color: #5cf;
  color: #cdf;
}

.jump-confirm-btn:hover {
  background: rgba(50, 42, 28, 0.95);
  transform: translateY(-1px);
}

.jump-cancel-btn {
  background: rgba(40, 30, 30, 0.85);
  border-color: #c66;
  color: #ebb;
}

.jump-cancel-btn:hover {
  background: rgba(70, 40, 40, 0.9);
  transform: translateY(-1px);
}

/* -----------------------------------------------------------
   16. Fuel cost chips along edges
   ----------------------------------------------------------- */
.fuel-cost-chip {
  position: absolute;
  background: rgba(30, 24, 18, 0.9);
  border: 1px solid rgba(180, 220, 255, 0.5);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-accent);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}

.fuel-cost-chip.unaffordable {
  border-color: rgba(250, 140, 120, 0.5);
  color: #f97;
}

/* -----------------------------------------------------------
   17. Animations continued
   ----------------------------------------------------------- */

/* Warp lane animation class (applied via JS on jump) */
.starmap-edge.warping {
  animation: warp-lane 0.8s ease-out forwards;
}

/* -----------------------------------------------------------
   18. Responsive breakpoints
   ----------------------------------------------------------- */

/* Mobile (375px+) */
@media (max-width: 767px) {
  :root {
    --fleet-panel-width: 200px;
    --hud-strip-height: 48px;
  }
  .starmap-node {
    transform: scale(0.8);
  }
  .starmap-fleet-panel {
    font-size: 12px;
    padding: 10px 8px;
  }
  .starmap-header {
    gap: 8px;
    padding: 0 10px;
  }
  .header-badge {
    padding: 3px 8px;
    min-width: 70px;
  }
  .badge-value {
    font-size: 15px;
  }
  .faction-value {
    font-size: 13px;
  }
  .starmap-footer {
    padding: 8px 10px;
  }
  .starmap-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --fleet-panel-width: 260px;
  }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  :root {
    --fleet-panel-width: 300px;
  }
}

/* 4K */
@media (min-width: 2560px) {
  :root {
    --fleet-panel-width: 360px;
  }
  .starmap-node {
    transform: scale(1.1);
  }
}

/* -----------------------------------------------------------
   19. Accessibility — prefers-reduced-motion
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .starmap-node,
  .starmap-edge,
  .node-ring,
  .node-glow,
  .node-core,
  .node-boss .node-glow,
  .node-event .node-core::after,
  .node-corona,
  .node-orbit,
  .node-speckles,
  .starmap-nebula {
    animation: none !important;
    transition: none !important;
  }
  .starmap-world {
    transition: none !important;
  }
}

/* -----------------------------------------------------------
   20. Canvas / Starmap layering coordination
   -----------------------------------------------------------
   The canvas (#game) draws sub-overlays (resupply, event, battle
   choice) which must appear on top of the starmap.  The starmap
   normally sits at z-index 10; when a canvas sub-overlay is
   active it drops to z-index 1 so the canvas (z-index 5) renders
   above it.  The starmap background peeks through the semi-
   transparent overlay fills drawn by the canvas code.
   ----------------------------------------------------------- */
#game { z-index: 5; }
.starmap-root.behind-canvas { z-index: 1; }


/* ============================================================
   MENU SYSTEM — DOM-based screens for all game menus
   ============================================================ */

/* -----------------------------------------------------------
   1. CSS Custom Properties (Menu Design Tokens)
   ----------------------------------------------------------- */
:root {
  /* Menu backgrounds */
  --menu-bg: rgba(26, 21, 16, 0.78);
  --panel-bg: rgba(30, 24, 18, 0.92);
  --panel-border: rgba(120, 180, 220, 0.25);
  --panel-accent: #5cf;

  /* Chip styling */
  --chip-bg: rgba(30, 24, 18, 0.92);
  --chip-border: rgba(120, 180, 220, 0.55);
  --chip-selected-bg: linear-gradient(180deg, rgba(140, 120, 80, 0.95), rgba(90, 70, 40, 0.95));
  --chip-selected-border: #9cf;

  /* Button colors */
  --btn-start-bg: linear-gradient(180deg, rgba(140, 120, 80, 0.95), rgba(90, 70, 40, 0.95));
  --btn-start-border: #9cf;
  --btn-cancel-bg: rgba(80, 30, 30, 0.92);
  --btn-cancel-border: #c06060;

  /* Text colors */
  --text-primary: #e8f0ff;
  --text-secondary: #a89878;
  --text-muted: #8a7a5a;
  --scrim: rgba(26, 21, 16, 0.86);

  /* z-index layering */
  --menu-z-root: 15;
  --menu-z-widgets: 25;
}

/* -----------------------------------------------------------
   2. .menu-root — fullscreen container
   ----------------------------------------------------------- */
.menu-root {
  position: fixed;
  inset: 0;
  z-index: var(--menu-z-root);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.menu-root.active {
  visibility: visible;
}

/* When the settings overlay has been popped on top of a live battle
   via the HUD pill, the menu-root needs to sit above .battle-root
   (z-index 20) so the action-cluster + side strips + minimap don't
   poke through the overlay or its scrim. Toggled by
   StartMenu.openInBattleSettings / onSettingsClose. */
.menu-root.over-battle {
  z-index: 30;
}

.menu-screen {
  pointer-events: auto;
}

/* -----------------------------------------------------------
   3. .menu-scrim — dark overlay behind panels
   ----------------------------------------------------------- */
.menu-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: -1;
}

.menu-root.active:has(.menu-screen.active:not(.menu-main)) .menu-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Fallback for browsers without :has() support —
   menus.js toggles .menu-scrim.active directly */
.menu-scrim.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* -----------------------------------------------------------
   4. Screen visibility system
   ----------------------------------------------------------- */
.menu-screen {
  display: none;
}

.menu-screen.active {
  display: flex;
}

.menu-main,
.menu-home,
.menu-about {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* -----------------------------------------------------------
   Home screen — top-level nav (PLAY / SETTINGS / ABOUT).
   Single column of buttons centred under the title; PLAY is the
   primary action and reuses the gold accent treatment, the two
   secondary actions sit beneath it muted.
   ----------------------------------------------------------- */
.menu-home-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.menu-home-play {
  /* Reuse .menu-start-btn for the primary button; bump width slightly */
  width: 300px;
}

.menu-home-secondary {
  width: 220px;
  height: 44px;
  font-size: 14px;
  letter-spacing: 3px;
}

/* ==========================================================
   Tier 42 — Mobile-first home screen redesign (menu-home-v2)
   ========================================================== */

/* When v2 is active, override the legacy flex layout so the
   new sectioned layout works edge-to-edge. */
.menu-home-v2 {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0 !important;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
}
.menu-home-v2 .menu-home-nav { display: none; }
.menu-home-v2 .menu-title    { display: none; }

/* ---- Top status bar ---- */
.home-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(8, 14, 24, 0.85);
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.home-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-avatar-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3f5a 0%, #1a2638 100%);
  border: 1.5px solid rgba(120, 200, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffd680;
  text-shadow: 0 0 6px rgba(255, 218, 130, 0.4);
}
.home-avatar-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.home-avatar-rank {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #ffd680;
}
.home-avatar-callsign {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.6px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.home-avatar-progress {
  font-size: 9px;
  letter-spacing: 0.8px;
  color: #fc6;
  font-weight: bold;
}
.home-avatar {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.home-avatar:hover {
  background: rgba(120, 200, 255, 0.08);
}
.home-currency-strip {
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-currency-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(8, 14, 24, 0.7);
  border: 1px solid rgba(120, 200, 255, 0.28);
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.home-currency-chip:hover {
  background: rgba(120, 200, 255, 0.16);
  border-color: rgba(120, 200, 255, 0.55);
}
.home-currency-chip .curr-icon {
  font-size: 12px;
  color: #aef;
}
.home-currency-chip .curr-value {
  letter-spacing: 0.6px;
  min-width: 18px;
  text-align: right;
}
.home-currency-chip#home-curr-service .curr-icon { color: #fc6; }
.home-currency-chip#home-curr-credits .curr-icon { color: #cf8; }
.home-currency-premium .curr-icon { color: #d9f; }
.home-currency-premium {
  border-color: rgba(200, 130, 240, 0.32);
}
.home-currency-premium:hover {
  border-color: rgba(200, 130, 240, 0.62);
  background: rgba(200, 130, 240, 0.16);
}
.home-inbox-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(120, 200, 255, 0.10);
  border: 1px solid rgba(120, 200, 255, 0.28);
  color: #aef;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}
.home-inbox-btn:hover {
  background: rgba(120, 200, 255, 0.22);
}

/* ---- Hero band ---- */
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 16px 16px;
  text-align: center;
  flex-shrink: 0;
}
.home-title-line h1 {
  font-size: clamp(20px, 5vw, 30px);
  margin: 0;
  letter-spacing: 4px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 18px rgba(120, 200, 255, 0.45);
}
.home-title-rule {
  width: 80%;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 200, 255, 0.55), transparent);
  margin: 10px auto;
}
.home-tagline {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-secondary);
  margin: 0;
  font-weight: bold;
}

/* ---- Main content (cards + tiles + links) ---- */
.home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px 16px 16px;
  overflow-y: auto;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* Hero card — main play tile. */
.home-card {
  background: rgba(8, 14, 24, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.22);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
}
.home-card:hover {
  border-color: rgba(120, 200, 255, 0.55);
  background: rgba(8, 14, 24, 0.85);
  transform: translateY(-1px);
}
.home-card-hero {
  padding: 20px;
  background: linear-gradient(135deg, rgba(20, 30, 50, 0.85) 0%, rgba(8, 14, 24, 0.85) 100%);
  border-color: rgba(255, 218, 130, 0.40);
  box-shadow: 0 4px 24px rgba(255, 218, 130, 0.10);
}
.home-card-hero:hover {
  border-color: rgba(255, 218, 130, 0.70);
}
.card-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 2.4px;
  color: #ffd680;
  font-weight: bold;
}
.card-hero-title {
  font-size: 28px;
  letter-spacing: 3px;
  font-weight: bold;
  color: #fff;
  margin: 2px 0 6px 0;
}
.card-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
}
.card-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.home-cta-btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: bold;
  background: linear-gradient(180deg, #ffd680, #e8a945);
  color: #18120c;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(255, 218, 130, 0.25);
}
.home-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 218, 130, 0.40);
}
.home-cta-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(120, 200, 255, 0.40);
  box-shadow: none;
}
.home-cta-secondary:hover {
  background: rgba(120, 200, 255, 0.12);
}

/* Tile row — Skirmish / Custom / Daily */
.home-tile-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.home-card-tile {
  align-items: center;
  text-align: center;
  padding: 16px 8px;
  gap: 2px;
  background: rgba(8, 14, 24, 0.55);
}
.home-card-tile .tile-icon {
  font-size: 24px;
  line-height: 1;
  color: #aef;
  margin-bottom: 4px;
}
.home-card-tile .tile-title {
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: bold;
  color: #fff;
}
.home-card-tile .tile-sub {
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
}
.home-card-locked {
  opacity: 0.55;
  cursor: pointer;
}
.home-card-locked .tile-icon {
  color: var(--text-secondary);
}

/* Quick-link row — Service Hall / Memorial / About */
.home-link-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(8, 14, 24, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s ease;
}
.home-link:hover {
  color: #aef;
  border-color: rgba(120, 200, 255, 0.40);
}
.link-icon {
  font-size: 13px;
}

/* ---- Bottom nav ---- */
.home-bottom-nav {
  display: flex;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.92), rgba(4, 8, 14, 0.96));
  border-top: 1px solid rgba(120, 200, 255, 0.18);
  flex-shrink: 0;
  height: 64px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  border-top: 2px solid transparent;
}
.home-nav-btn:hover { color: var(--text-primary); }
.home-nav-btn.active {
  color: #aef;
  border-top-color: #6cf;
  background: rgba(120, 200, 255, 0.10);
}
.home-nav-btn .nav-icon { font-size: 18px; line-height: 1; }
.home-nav-btn .nav-label {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  font-weight: bold;
}

/* ---- Nav panel overlay (STORE / EVENTS / MORE / DAILY) ---- */
.home-nav-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.97), rgba(4, 8, 14, 0.99));
  display: flex;
  flex-direction: column;
  z-index: 5;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.home-nav-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.home-nav-panel[aria-hidden="true"] { display: none; }
.home-nav-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.home-nav-panel-back {
  background: rgba(120, 200, 255, 0.10);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.30);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
}
.home-nav-panel-header h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 2.4px;
  color: #fff;
  font-weight: bold;
}
.home-nav-panel-spacer { flex: 1; }
.home-nav-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

/* Coming-soon panel content. */
.store-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 0;
  max-width: 520px;
  margin: 0 auto;
}
.store-icon {
  font-size: 56px;
  color: #aef;
  text-shadow: 0 0 18px rgba(120, 200, 255, 0.45);
}
.store-coming-soon h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 2.5px;
  color: #fff;
}
.store-coming-soon p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 380px;
  line-height: 1.5;
}
.store-coming-tag {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: #fc6 !important;
  font-weight: bold;
  margin-top: 12px !important;
}
.store-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}
.store-card {
  background: rgba(8, 14, 24, 0.65);
  border: 1px solid rgba(120, 200, 255, 0.20);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.store-card-locked {
  opacity: 0.65;
}
.store-card-eyebrow {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: #fc6;
  font-weight: bold;
}
.store-card-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.6px;
}
.store-card-sub {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}
.store-card-cta {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  color: var(--text-secondary);
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  text-align: center;
}

/* Achievements grid (Tier 43). */
.achievements-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .achievements-grid { grid-template-columns: 1fr 1fr; }
}
.achievement-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(8, 14, 24, 0.65);
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 6px;
  transition: all 0.15s ease;
}
.achievement-card.unlocked {
  border-color: rgba(255, 218, 130, 0.55);
  background: rgba(255, 218, 130, 0.06);
  box-shadow: 0 0 16px rgba(255, 218, 130, 0.10);
}
.achievement-card.locked {
  opacity: 0.55;
}
.ach-icon {
  font-size: 26px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 24, 0.7);
  border-radius: 50%;
  flex-shrink: 0;
  color: #aef;
}
.achievement-card.unlocked .ach-icon {
  color: #ffd680;
  text-shadow: 0 0 12px rgba(255, 218, 130, 0.55);
  border: 1.5px solid rgba(255, 218, 130, 0.5);
}
.ach-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ach-name {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.6px;
}
.ach-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.ach-reward {
  flex-shrink: 0;
  text-align: right;
}
.ach-reward-chip {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(255, 198, 102, 0.16);
  color: #fc6;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 12px;
}
.ach-unlocked-tag {
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: bold;
  color: #ffd680;
}

/* MORE list rows. */
.home-more-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
  margin: 0 auto;
}
.home-more-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(8, 14, 24, 0.65);
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.home-more-row:hover {
  border-color: rgba(120, 200, 255, 0.55);
  background: rgba(120, 200, 255, 0.10);
}
.more-icon {
  font-size: 16px;
  color: #aef;
  width: 24px;
  text-align: center;
}
.more-label {
  flex: 1;
  font-size: 13px;
  letter-spacing: 1.4px;
  font-weight: bold;
}
.more-chev {
  color: var(--text-secondary);
  font-size: 18px;
}

/* Mobile tuning. */
@media (max-width: 480px) {
  .home-currency-chip { padding: 4px 8px; font-size: 11px; }
  .home-avatar-icon { width: 32px; height: 32px; }
  .home-card-tile { padding: 12px 6px; }
  .home-card-tile .tile-icon { font-size: 20px; }
  .home-link { padding: 6px 10px; font-size: 10px; }
}

/* ==========================================================
   Tier 44 — Play Hub + Skirmish Config sub-screens
   ========================================================== */

.menu-playhub, .menu-skirmish {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0 !important;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.playhub-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(8, 14, 24, 0.85);
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
  flex-shrink: 0;
}
.playhub-back {
  background: rgba(120, 200, 255, 0.10);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.30);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.playhub-back:hover {
  background: rgba(120, 200, 255, 0.25);
  color: #fff;
}
.playhub-header h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 2.4px;
  color: #fff;
  font-weight: bold;
}
.playhub-spacer { flex: 1; }

.playhub-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.playhub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(8, 14, 24, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.22);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
}
.playhub-card:hover {
  border-color: rgba(120, 200, 255, 0.55);
  background: rgba(8, 14, 24, 0.85);
  transform: translateY(-1px);
}
.playhub-card-frontier {
  background: linear-gradient(135deg, rgba(20, 30, 50, 0.85) 0%, rgba(8, 14, 24, 0.85) 100%);
  border-color: rgba(255, 218, 130, 0.45);
  box-shadow: 0 4px 24px rgba(255, 218, 130, 0.10);
}
.playhub-card-frontier:hover {
  border-color: rgba(255, 218, 130, 0.75);
}
.playhub-card-locked {
  opacity: 0.55;
  cursor: default;
}
.playhub-card-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(120, 200, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #aef;
}
.playhub-card-frontier .playhub-card-icon {
  background: rgba(255, 218, 130, 0.16);
  color: #ffd680;
  text-shadow: 0 0 12px rgba(255, 218, 130, 0.5);
  border: 1.5px solid rgba(255, 218, 130, 0.45);
}
.playhub-card-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.playhub-card-eyebrow {
  font-size: 9.5px;
  letter-spacing: 1.8px;
  color: var(--text-secondary);
  font-weight: bold;
}
.playhub-card-frontier .playhub-card-eyebrow { color: #ffd680; }
.playhub-card-title {
  font-size: 18px;
  letter-spacing: 2.4px;
  font-weight: bold;
  color: #fff;
}
.playhub-card-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 2px;
}
.playhub-card-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  background: rgba(255, 218, 130, 0.15);
  color: #ffd680;
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: bold;
  border-radius: 10px;
  align-self: flex-start;
}
.playhub-card-tag-active {
  background: rgba(110, 230, 153, 0.15);
  color: #9ed;
}
.playhub-card-tag-locked {
  background: rgba(160, 160, 160, 0.15);
  color: var(--text-secondary);
}
.playhub-card-cta {
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: bold;
  background: rgba(120, 200, 255, 0.18);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.40);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.playhub-card-cta:hover:not(:disabled) {
  background: rgba(120, 200, 255, 0.32);
  color: #fff;
}
.playhub-card-cta:disabled {
  opacity: 0.45;
  cursor: default;
}
.playhub-card-frontier .playhub-card-cta {
  background: linear-gradient(180deg, #ffd680, #e8a945);
  color: #18120c;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 218, 130, 0.25);
}
.playhub-card-frontier .playhub-card-cta:hover {
  box-shadow: 0 4px 12px rgba(255, 218, 130, 0.40);
}
/* CTA stack — primary RESUME on top, small "+ NEW CAREER" beneath. */
.playhub-card-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
}
.playhub-card-cta-secondary {
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: bold;
  background: transparent;
  color: rgba(255, 218, 130, 0.85);
  border: 1px solid rgba(255, 218, 130, 0.35);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  text-align: center;
}
.playhub-card-cta-secondary:hover {
  background: rgba(255, 218, 130, 0.10);
  color: #fff;
  border-color: rgba(255, 218, 130, 0.65);
}

/* Skirmish config form. */
.skirmish-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.skirmish-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skirmish-section-title {
  font-size: 10px;
  letter-spacing: 2.2px;
  color: var(--text-secondary);
  font-weight: bold;
}
.skirmish-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skirmish-chip {
  flex: 1 1 80px;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: bold;
  background: rgba(8, 14, 24, 0.55);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.skirmish-chip:hover {
  background: rgba(120, 200, 255, 0.12);
  color: #fff;
}
.skirmish-chip.active {
  background: rgba(120, 200, 255, 0.22);
  color: #fff;
  border-color: rgba(120, 200, 255, 0.55);
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.30);
}
.skirmish-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.skirmish-step-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
  background: rgba(120, 200, 255, 0.12);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.32);
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
}
.skirmish-step-btn:hover {
  background: rgba(120, 200, 255, 0.28);
  color: #fff;
}
.skirmish-slider-track {
  flex: 1;
  position: relative;
  height: 36px;
  background: rgba(40, 60, 80, 0.6);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(120, 200, 255, 0.22);
}
.skirmish-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(120, 200, 255, 0.25), rgba(120, 200, 255, 0.40));
  transition: width 0.18s ease;
}
.skirmish-slider-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: bold;
  color: #fff;
  pointer-events: none;
}
.skirmish-footer {
  padding: 14px 18px 18px 18px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.skirmish-deploy-btn {
  width: 100%;
  max-width: 360px;
  padding: 14px 20px;
  font-size: 14px;
  letter-spacing: 2.8px;
  font-weight: bold;
  background: linear-gradient(180deg, #ffd680, #e8a945);
  color: #18120c;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(255, 218, 130, 0.25);
  transition: all 0.15s ease;
}
.skirmish-deploy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 218, 130, 0.40);
}

/* -----------------------------------------------------------
   About screen — readable body copy beneath the title.
   ----------------------------------------------------------- */
.menu-about-body {
  max-width: 520px;
  padding: 0 24px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.menu-about-body p {
  margin: 0 0 14px;
}

/* Memorial screen — title-screen view of the player's completed
   Frontier careers. Same chrome as About, with a vertical list of
   rows. Each row: rank · callsign · epitaph. Result colour-codes
   the row border (gold for wins, dim red for losses). */
.menu-memorial {
  flex-direction: column;   /* base .menu-screen.active is flex; force column */
  align-items: center;
}
.memorial-list {
  width: 100%;
  max-width: 640px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memorial-empty {
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: 24px 0;
}
.memorial-row {
  display: grid;
  grid-template-columns: 96px 96px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid rgba(255, 214, 128, 0.6);
}
.memorial-row.lost {
  border-left-color: rgba(200, 90, 90, 0.6);
}
.memorial-row-rank {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.memorial-row-callsign {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.2px;
  color: var(--text-primary);
}
.memorial-row-epitaph {
  font-size: 11px;
  color: #ccd5e2;
  font-style: italic;
  line-height: 1.4;
}

.menu-about-body strong {
  color: var(--panel-accent);
  letter-spacing: 1px;
}

.menu-about-credits {
  color: var(--text-muted);
  font-size: 13px;
}

/* -----------------------------------------------------------
   Back button — small chevron pill in the top-left of nested
   screens. Sits inside the screen so visibility tracks the screen
   itself (no separate show/hide wiring needed).
   ----------------------------------------------------------- */
.menu-back-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(20, 30, 50, 0.85);
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.menu-back-btn:hover {
  background: rgba(40, 60, 90, 0.92);
  border-color: var(--panel-accent);
}

.menu-back-btn:active {
  filter: brightness(0.9);
}

/* -----------------------------------------------------------
   5. Main Menu — title
   ----------------------------------------------------------- */
.menu-title {
  text-align: center;
  margin-bottom: 8px;
}

.menu-title h1 {
  font-size: 38px;
  font-weight: bold;
  color: var(--text-primary);
  letter-spacing: 3px;
  margin: 0;
  text-transform: uppercase;
}

.menu-title-accent {
  width: 400px;
  max-width: 80vw;
  height: 2px;
  background: var(--panel-accent);
  margin: 8px auto;
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.5);
}

.menu-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 6px;
  margin: 4px 0 0;
  text-transform: uppercase;
}

/* -----------------------------------------------------------
   6. Chip rows
   ----------------------------------------------------------- */
.menu-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.section-label {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label::before,
.section-label::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(120, 180, 220, 0.3);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.chip-item {
  background: var(--chip-bg);
  border: 1.5px solid var(--chip-border);
  color: #cdf;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  text-align: center;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  font-family: inherit;
}

.chip-item:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.chip-item.selected {
  background: var(--chip-selected-bg);
  border-color: var(--chip-selected-border);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chip-label {
  font-size: 15px;
  font-weight: bold;
}

.chip-sublabel {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: normal;
}

.chip-item.selected .chip-sublabel {
  color: rgba(220, 240, 255, 0.85);
}

/* -----------------------------------------------------------
   7. START button
   ----------------------------------------------------------- */
.menu-start-btn {
  position: relative;
  width: 260px;
  height: 56px;
  background: var(--btn-start-bg);
  border: 1.5px solid var(--btn-start-border);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  margin-top: 4px;
}

/* Glow plate behind */
.menu-start-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: radial-gradient(ellipse, rgba(140, 120, 80, 0.3) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.menu-start-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.menu-start-btn:active {
  filter: brightness(0.9);
  transform: translateY(0);
}

/* Out of energy variant */
.menu-start-btn.out-of-energy {
  background: linear-gradient(180deg, rgba(180, 60, 60, 0.95), rgba(110, 30, 30, 0.95));
  border-color: #f88;
  font-size: 16px;
  letter-spacing: 1px;
}

.menu-start-btn.out-of-energy::before {
  background: radial-gradient(ellipse, rgba(180, 60, 60, 0.25) 0%, transparent 70%);
}

/* -----------------------------------------------------------
   8. Energy bar widget
   ----------------------------------------------------------- */
.menu-energy-bar {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: var(--menu-z-widgets);
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
}

.menu-energy-bar:hover {
  filter: brightness(1.15);
  border-color: rgba(180, 220, 255, 0.45);
}

.energy-bar-inner {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.energy-label {
  font-size: 10px;
  font-weight: bold;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.energy-count {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.energy-regen {
  font-size: 10px;
  color: var(--text-secondary);
}

.energy-refill-label {
  font-size: 9px;
  font-weight: bold;
  color: var(--panel-accent);
  letter-spacing: 0.5px;
}

/* Energy bar border states */
.menu-energy-bar.energy-empty {
  border-color: rgba(220, 80, 80, 0.55);
}

.menu-energy-bar.energy-full {
  border-color: rgba(80, 200, 120, 0.55);
}

/* -----------------------------------------------------------
   9. Settings button widget
   ----------------------------------------------------------- */
.menu-settings-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: var(--menu-z-widgets);
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  padding: 10px 18px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  pointer-events: auto;
}

.menu-settings-btn:hover {
  filter: brightness(1.15);
  border-color: rgba(180, 220, 255, 0.45);
}

/* Orange dot indicator when music is muted */
.menu-settings-btn.muted::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f80;
  box-shadow: 0 0 4px rgba(255, 136, 0, 0.6);
}

/* -----------------------------------------------------------
   10. Overlay panels (shared)
   ----------------------------------------------------------- */
.overlay-panel {
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  padding: 32px;
  min-width: 360px;
  max-width: 90vw;
  /* Cap height to the viewport and scroll internally so long cards
     (event choices, promotion/perk picks, dossiers) never run off a
     short mobile screen with their buttons unreachable. Per-panel rules
     below can override. */
  max-height: 90svh;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.panel-accent-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--panel-accent);
}

.overlay-panel h2 {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
}

/* Panel sizing per overlay type */
.settings-panel,
.refill-panel {
  min-width: 360px;
}

.custom-panel {
  min-width: 720px;
  max-width: 95vw;
}

.resupply-panel {
  min-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
}

.event-panel {
  min-width: 420px;
}

.runsetup-panel {
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  padding: 40px;
  min-width: 560px;
  max-width: 90vw;
  position: relative;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.runsetup-panel h2 {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
}

/* Close button inside overlays */
.overlay-close-btn {
  padding: 10px 28px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(40, 80, 60, 0.9);
  border: 1.5px solid #9f8;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  margin-top: 8px;
  pointer-events: auto;
}

.overlay-close-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Animation: fade-in + scale on active */
.menu-screen.active .overlay-panel,
.menu-screen.active .runsetup-panel {
  animation: menu-fade-in 0.2s ease-out;
}

/* -----------------------------------------------------------
   11. Settings overlay
   ----------------------------------------------------------- */
.settings-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.settings-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(50, 42, 30, 0.95);
  border: 2px solid #5cf;
  color: #cdf;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: inherit;
  transition: all 0.2s ease;
  width: 100%;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  pointer-events: auto;
}

.settings-toggle.off {
  background: rgba(60, 30, 30, 0.85);
  border-color: #c66;
}

.settings-toggle:hover {
  filter: brightness(1.1);
}

.toggle-label {
  font-size: 14px;
  letter-spacing: 1px;
}

.toggle-value {
  font-size: 20px;
  font-weight: bold;
}

.settings-toggle:not(.off) .toggle-value {
  color: #9f8;
}

.settings-toggle.off .toggle-value {
  color: #fcc;
}

.settings-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0;
}

/* -----------------------------------------------------------
   12. Refill overlay
   ----------------------------------------------------------- */
.refill-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.refill-packages {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.refill-package {
  background: rgba(32, 26, 20, 0.95);
  border: 1.5px solid rgba(120, 180, 220, 0.4);
  padding: 20px 16px;
  min-width: 120px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.refill-package:hover {
  filter: brightness(1.15);
  transform: translateY(-3px);
  border-color: rgba(180, 220, 255, 0.6);
}

.refill-package .package-label {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.refill-package .package-amount {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.refill-package .package-price {
  font-size: 13px;
  font-weight: bold;
  color: var(--panel-accent);
}

/* -----------------------------------------------------------
   13. Custom match overlay
   ----------------------------------------------------------- */
.custom-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-align: center;
  margin: 0;
}

.custom-sides {
  display: flex;
  gap: 24px;
  width: 100%;
}

.custom-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.custom-side-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(120, 180, 220, 0.2);
}

.side-title {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-muted);
  letter-spacing: 1.5px;
}

.side-race {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
}

.side-tagline {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Race chips in custom panel — smaller variant */
.custom-race-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-race-chips .chip-item {
  min-width: 80px;
  padding: 8px 12px;
  font-size: 13px;
}

.custom-divider {
  height: 1px;
  background: rgba(120, 180, 220, 0.15);
  margin: 4px 0;
}

/* Slider rows */
.custom-sliders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-badge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 40, 60, 0.9);
  border: 1px solid rgba(120, 180, 220, 0.35);
  font-size: 12px;
  font-weight: bold;
  color: var(--text-secondary);
  flex-shrink: 0;
  clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0% calc(100% - 3px), 0% 3px);
}

.slider-class-name {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-primary);
  width: 70px;
  flex-shrink: 0;
}

.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 8px;
  background: rgba(32, 26, 20, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.35);
  outline: none;
  cursor: pointer;
}

.custom-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: rgba(32, 26, 20, 0.95);
  border: none;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--panel-accent);
  cursor: pointer;
  margin-top: -5px;
}

.custom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--panel-accent);
  cursor: pointer;
}

.custom-slider::-moz-range-track {
  height: 8px;
  background: rgba(32, 26, 20, 0.95);
  border: none;
}

.slider-count {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Side total */
.custom-side-total {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-secondary);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid rgba(120, 180, 220, 0.2);
}

/* -----------------------------------------------------------
   Custom match — multi-faction team blocks
   -----------------------------------------------------------
   A side can hold up to 2 factions (so a match can put all four
   on the map at once). Each "team block" carries its own race
   chips + per-class sliders + (for slot 2) a remove button.
*/
.custom-team-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-team-block {
  padding: 8px 10px;
  background: rgba(20, 30, 50, 0.55);
  border: 1px solid rgba(120, 180, 220, 0.18);
  border-radius: 6px;
}

.custom-team-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.custom-team-label {
  font-size: 10px;
  font-weight: bold;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.custom-team-name {
  flex: 1;
  font-size: 12px;
  color: #cdf;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.custom-team-remove {
  /* Mobile touch target — was 22×22 (way below 44px guideline).
   * Bumped to 32×32 visible; tap area extended via padding-region
   * trick so a thumb-sized tap still lands cleanly. */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(80, 30, 30, 0.85);
  border: 1px solid rgba(255, 120, 100, 0.45);
  color: #fcc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-team-remove:hover {
  background: rgba(120, 40, 40, 0.95);
}

.custom-team-races {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.custom-team-races .chip-item {
  flex: 1 1 0;
  min-width: 60px;
  /* Mobile touch target — was 21px tall total (4+10+4+border) which
   * is far below the 44px Apple guideline. Bumped padding to keep
   * the chip readable but tappable at ~36-40px. */
  font-size: 12px;
  padding: 10px 8px;
  min-height: 36px;
}

.custom-team-sliders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-add-btn {
  width: 100%;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 1.5px;
  background: rgba(40, 60, 90, 0.6);
  border: 1px dashed rgba(120, 180, 220, 0.35);
  color: #9bd;
  margin-top: 4px;
}

/* -----------------------------------------------------------
   Carousel chrome — used by the Custom overlay and PLAY screen
   to break up dense forms into focused single-decision steps.
   ----------------------------------------------------------- */
.carousel-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carousel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.carousel-step-label {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2.2px;
  color: #7af;
  opacity: 0.8;
}

.carousel-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.carousel-body {
  position: relative;
  width: 100%;
  min-height: 220px;
}

.carousel-step {
  display: none;
  width: 100%;
  animation: carousel-slide 0.18s ease-out;
}

.carousel-step.active {
  display: block;
}

@keyframes carousel-slide {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
}

.carousel-btn {
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: 1.5px;
  min-width: 96px;
}

.carousel-next {
  background: rgba(40, 80, 60, 0.85);
  border-color: #9f8;
  color: #fff;
}

.carousel-next.deploy-mode {
  background: rgba(60, 110, 80, 0.95);
  letter-spacing: 2px;
  font-weight: bold;
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(120, 180, 220, 0.25);
  border: 1px solid rgba(120, 180, 220, 0.4);
  transition: background 0.18s ease, transform 0.18s ease;
}

.carousel-dot.active {
  background: #7af;
  transform: scale(1.25);
}

/* Review step layout */
.custom-review {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.custom-review-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(20, 40, 60, 0.55);
  border: 1px solid rgba(120, 180, 220, 0.2);
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}

.custom-review-row[data-side="hostile"] {
  background: rgba(60, 30, 30, 0.5);
  border-color: rgba(255, 140, 120, 0.3);
}

.custom-review-side {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.8px;
  color: var(--text-muted);
}

.custom-review-row[data-side="allied"] .custom-review-side { color: #7af; }
.custom-review-row[data-side="hostile"] .custom-review-side { color: #f97; }

.custom-review-list {
  font-size: 12px;
  color: var(--text-primary);
}

.custom-review-total {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
  white-space: nowrap;
}

.custom-review-hint {
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary);
  margin: 4px 0 0;
}

/* Main menu / PLAY screen carousel — review-step layout */
.menu-main.carousel-panel {
  padding: 32px 28px;
}

.menu-main .carousel-header h1 {
  margin: 4px 0;
  font-size: 24px;
  letter-spacing: 3px;
}

.menu-main .menu-section {
  margin-top: 4px;
}

.main-carousel-body {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-carousel-body .carousel-step {
  width: 100%;
}

.main-review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 12px;
}

.main-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(20, 40, 60, 0.55);
  border: 1px solid rgba(120, 180, 220, 0.2);
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  font-size: 12px;
}

.main-review-k {
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.main-review-v {
  color: var(--text-primary);
}

/* Grand total */
.custom-totals {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
}

.custom-totals.total-blue {
  color: #5cf;
}

.custom-totals.total-amber {
  color: #fc6;
}

.custom-totals.total-red {
  color: #f55;
}

/* Footer buttons */
.custom-footer {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}

/* -----------------------------------------------------------
   14. Run setup overlay
   ----------------------------------------------------------- */
.runsetup-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  width: 100%;
}

.faction-card {
  background: rgba(32, 26, 20, 0.95);
  border: 1.5px solid rgba(120, 180, 220, 0.3);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  pointer-events: auto;
}

.faction-card:hover {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(1.15);
  border-color: rgba(180, 220, 255, 0.55);
}

.faction-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 4px;
}

.faction-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.faction-tagline {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  font-style: italic;
}

.faction-record {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.runsetup-footer {
  margin-top: 12px;
}

/* -----------------------------------------------------------
   15. Battle choice overlay
   ----------------------------------------------------------- */
.battle-info {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin: 4px 0;
}

.battle-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.battle-btn {
  width: 240px;
  padding: 14px 20px;
  font-size: 15px;
}

/* FLY INTO BATTLE — green */
#battle-fly {
  background: linear-gradient(180deg, rgba(140, 120, 80, 0.95), rgba(90, 70, 40, 0.95));
  border-color: #9f8;
  color: #fff;
}

/* COMMAND FLEET — blue */
#battle-command {
  background: linear-gradient(180deg, rgba(120, 100, 60, 0.95), rgba(70, 55, 30, 0.95));
  border-color: #5cf;
  color: #fff;
}

#battle-back {
  margin-top: 8px;
}

/* -----------------------------------------------------------
   16. Resupply overlay
   ----------------------------------------------------------- */
.resupply-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resupply-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Repair rows */
.repair-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(120, 180, 220, 0.1);
}

.repair-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
  width: 100px;
  flex-shrink: 0;
}

.repair-hp-bar {
  flex: 1;
  height: 8px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 4px;
  overflow: hidden;
}

.repair-hp-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.repair-hp-fill.hp-high {
  background: #5cf;
}

.repair-hp-fill.hp-mid {
  background: #fc6;
}

.repair-hp-fill.hp-low {
  background: #f55;
}

.shop-btn {
  padding: 10px 18px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(30, 60, 40, 0.9);
  border: 1.5px solid #6c9;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-btn:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.shop-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
  pointer-events: none;
}

.shop-btn.wide {
  width: 100%;
  justify-content: center;
}

.shop-cost {
  font-size: 11px;
  color: #fc8;
}

/* Boon offers */
.boon-offers {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.boon-card {
  background: rgba(20, 30, 20, 0.95);
  border: 1.5px solid rgba(120, 200, 255, 0.4);
  padding: 16px 12px;
  min-width: 100px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  pointer-events: auto;
}

.boon-card:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.boon-card .boon-desc {
  font-size: 12px;
  color: #cfe;
}

/* Resupply footer */
.overlay-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}

/* -----------------------------------------------------------
   17. Event overlay
   ----------------------------------------------------------- */
.event-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: center;
  max-width: 480px;
  padding: 8px 0;
}

.event-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.event-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
  background: rgba(20, 40, 60, 0.9);
  border: 1.5px solid rgba(120, 180, 220, 0.4);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  pointer-events: auto;
  width: 100%;
  max-width: 400px;
}

.event-choice-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  border-color: rgba(180, 220, 255, 0.6);
}

.choice-label {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-primary);
}

.choice-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* Event RESULT view — the outcome of a choice. Makes consequences
   obvious: flavor line + coloured resource-delta chips. */
.event-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  animation: menu-fade-in 0.25s ease;
}
.event-result-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: center;
}
.event-result-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.event-delta {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.event-delta.delta-gain {
  color: #b6f0bd;
  background: rgba(40, 110, 60, 0.35);
  border: 1px solid #3f7f4f;
}
.event-delta.delta-loss {
  color: #f2b8b8;
  background: rgba(120, 40, 40, 0.35);
  border: 1px solid #7a3030;
}
.event-delta.delta-none {
  color: var(--text-muted);
  background: rgba(60, 70, 90, 0.3);
  border: 1px solid rgba(120, 140, 170, 0.3);
  font-weight: 500;
}
.overlay-continue-btn {
  padding: 12px 28px;
  background: linear-gradient(180deg, #2f6a3f, #1f4a2c);
  border: 1.5px solid #4f9f5f;
  border-radius: 6px;
  color: #dffbe2;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.15s ease;
}
.overlay-continue-btn:hover { filter: brightness(1.15); }

/* -----------------------------------------------------------
   18. Base button classes
   ----------------------------------------------------------- */
.menu-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1.5px solid;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  font-family: inherit;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.menu-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.menu-btn:active {
  filter: brightness(0.9);
}

.start-btn {
  background: var(--btn-start-bg);
  border-color: var(--btn-start-border);
  color: #fff;
}

.cancel-btn {
  background: var(--btn-cancel-bg);
  border-color: var(--btn-cancel-border);
  color: #fdd;
}

.close-btn {
  background: rgba(40, 80, 60, 0.9);
  border-color: #9f8;
  color: #fff;
}

/* -----------------------------------------------------------
   19. Animations
   ----------------------------------------------------------- */
@keyframes menu-fade-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* -----------------------------------------------------------
   20. Responsive breakpoints
   ----------------------------------------------------------- */

/* Mobile (<768px) */
@media (max-width: 767px) {
  .menu-title h1 {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .menu-title-accent {
    width: 240px;
  }

  .menu-subtitle {
    font-size: 11px;
    letter-spacing: 3px;
  }

  .chip-row {
    gap: 8px;
  }

  .chip-item {
    min-width: 90px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .overlay-panel {
    min-width: 300px;
    padding: 20px;
  }

  .custom-panel {
    min-width: unset;
    width: 95vw;
  }

  .custom-sides {
    flex-direction: column;
  }

  .runsetup-panel {
    min-width: unset;
    width: 92vw;
    padding: 24px 16px;
  }

  .faction-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  .resupply-panel {
    min-width: unset;
    width: 95vw;
  }

  .menu-start-btn {
    width: 220px;
    height: 48px;
    font-size: 20px;
  }

  .menu-energy-bar {
    top: 10px;
    left: 10px;
    padding: 8px 12px;
  }

  .menu-settings-btn {
    top: 10px;
    right: 10px;
    padding: 8px 14px;
  }

  .menu-main {
    gap: 14px;
    padding: 20px;
  }

  .event-panel {
    min-width: unset;
    width: 92vw;
  }
}

/* Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .menu-title h1 {
    font-size: 34px;
  }

  .custom-panel {
    min-width: 640px;
  }

  .overlay-panel {
    min-width: 380px;
  }
}

/* Desktop (1200px - 2559px) — default sizing, explicit for clarity */
@media (min-width: 1200px) and (max-width: 2559px) {
  /* Default sizing applies */
}

/* 4K (>=2560px) */
@media (min-width: 2560px) {
  .menu-title h1 {
    font-size: 48px;
    letter-spacing: 4px;
  }

  .menu-title-accent {
    width: 520px;
    height: 3px;
  }

  .menu-subtitle {
    font-size: 16px;
    letter-spacing: 8px;
  }

  .chip-item {
    font-size: 18px;
    padding: 16px 28px;
    min-width: 150px;
  }

  .chip-sublabel {
    font-size: 12px;
  }

  .overlay-panel {
    padding: 40px;
    min-width: 440px;
  }

  .overlay-panel h2 {
    font-size: 24px;
  }

  .custom-panel {
    min-width: 900px;
  }

  .menu-start-btn {
    width: 300px;
    height: 64px;
    font-size: 28px;
  }

  .runsetup-panel {
    min-width: 700px;
    padding: 48px;
  }

  .faction-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
  }

  .menu-main {
    gap: 28px;
  }
}

/* -----------------------------------------------------------
   21. Accessibility — prefers-reduced-motion
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .menu-root,
  .menu-scrim,
  .menu-screen,
  .overlay-panel,
  .runsetup-panel,
  .chip-item,
  .menu-start-btn,
  .menu-energy-bar,
  .menu-settings-btn,
  .settings-toggle,
  .menu-btn,
  .overlay-close-btn,
  .shop-btn,
  .refill-package,
  .faction-card,
  .event-choice-btn,
  .boon-card,
  .custom-slider {
    transition: none !important;
    animation: none !important;
  }

  .menu-screen.active .overlay-panel,
  .menu-screen.active .runsetup-panel {
    animation: none !important;
  }
}

/* Focus-visible outlines for keyboard navigation */
.chip-item:focus-visible,
.menu-start-btn:focus-visible,
.menu-energy-bar:focus-visible,
.menu-settings-btn:focus-visible,
.settings-toggle:focus-visible,
.menu-btn:focus-visible,
.overlay-close-btn:focus-visible,
.shop-btn:focus-visible:not(:disabled),
.refill-package:focus-visible,
.faction-card:focus-visible,
.event-choice-btn:focus-visible,
.boon-card:focus-visible,
.custom-slider:focus-visible {
  outline: 2px solid var(--panel-accent);
  outline-offset: 2px;
}

/* -----------------------------------------------------------
   22. z-index coordination
   -----------------------------------------------------------
   Layer stack (bottom to top):

     z-index  1  — .starmap-root.behind-canvas (starmap dimmed)
     z-index  5  — #game (canvas element)
     z-index 10  — .starmap-root (starmap active)
     z-index 15  — .menu-root (menu system)
     z-index 20  — .starmap-fleet-panel, .starmap-header,
                   .starmap-footer (starmap HUD chrome)
     z-index 25  — .menu-energy-bar, .menu-settings-btn
                   (menu widgets above menu root)
     z-index 30  — .node-tooltip (floating tooltip)
     z-index 40  — .jump-confirm (modal dialog)
   ----------------------------------------------------------- */


/* ============================================================
   UNIFIED DOM MENU SYSTEM — Aphelion Star Fighter
   ============================================================ */

/* -----------------------------------------------------------
   1. CSS Custom Properties (Menu Design Tokens)
   ----------------------------------------------------------- */
:root {
  --menu-bg: rgba(26, 21, 16, 0.78);
  --panel-bg: rgba(30, 24, 18, 0.92);
  --panel-border: rgba(120, 180, 220, 0.25);
  --panel-accent: #5cf;
  --chip-bg: rgba(30, 24, 18, 0.92);
  --chip-border: rgba(120, 180, 220, 0.55);
  --chip-selected-bg: linear-gradient(180deg, rgba(140,120,80,0.95), rgba(90,70,40,0.95));
  --chip-selected-border: #9cf;
  --btn-start-bg: linear-gradient(180deg, rgba(140,120,80,0.95), rgba(90,70,40,0.95));
  --btn-start-border: #9cf;
  --btn-cancel-bg: rgba(80, 30, 30, 0.92);
  --btn-cancel-border: #c06060;
  --text-primary: #e8f0ff;
  --text-secondary: #a89878;
  --text-muted: #8a7a5a;
  --scrim: rgba(26, 21, 16, 0.86);
}

/* -----------------------------------------------------------
   2. Root container
   ----------------------------------------------------------- */
.menu-root {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.menu-root > * {
  pointer-events: auto;
}

/* -----------------------------------------------------------
   3. Scrim
   ----------------------------------------------------------- */
.menu-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: none;
  z-index: -1;
  pointer-events: none;
}

/* -----------------------------------------------------------
   4. Screen visibility
   ----------------------------------------------------------- */
.menu-screen {
  display: none;
}

.menu-screen.active {
  display: flex;
}

/* -----------------------------------------------------------
   5. Main Menu
   ----------------------------------------------------------- */
.menu-main {
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 40px 20px;
  max-height: 100vh;
  overflow-y: auto;
}

.menu-title {
  text-align: center;
  margin-bottom: 8px;
}

.menu-title h1 {
  font-size: 38px;
  font-weight: bold;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 1px;
}

.menu-title-accent {
  width: 400px;
  max-width: 80vw;
  height: 2px;
  background: var(--panel-accent);
  margin: 8px auto;
}

.menu-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 2px;
}

/* Chip sections */
.menu-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.section-label {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-secondary);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label span {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(120, 180, 220, 0.35);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Chips */
.chip-item {
  background: var(--chip-bg);
  border: 1.5px solid var(--chip-border);
  color: #cdf;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  text-align: center;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  font-family: inherit;
}

.chip-item:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.chip-item.selected {
  background: var(--chip-selected-bg);
  border-color: var(--chip-selected-border);
  color: #fff;
}

.chip-item .chip-sublabel {
  font-size: 10px;
  color: #a89878;
  font-weight: normal;
  margin-top: 2px;
}

.chip-item.selected .chip-sublabel {
  color: rgba(220,240,255,0.85);
}

/* Small chips (custom match) */
.chip-sm {
  min-width: 70px;
  padding: 8px 10px;
  font-size: 12px;
}

/* Frontier status */
.frontier-status {
  font-size: 13px;
  font-weight: bold;
  color: #a89878;
  text-align: center;
  min-height: 20px;
}

/* START button */
.menu-start-btn {
  padding: 18px 64px;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid var(--btn-start-border);
  cursor: pointer;
  color: #fff;
  background: var(--btn-start-bg);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  transition: all 0.2s ease;
  font-family: inherit;
  margin-top: 8px;
  position: relative;
}

.menu-start-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.menu-start-btn.out-of-energy {
  background: rgba(70,30,30,0.95);
  border-color: #c06060;
  color: #fdd;
  font-size: 18px;
}

/* -----------------------------------------------------------
   6. Energy Bar
   ----------------------------------------------------------- */
.menu-energy-bar {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 25;
  background: rgba(36, 28, 22, 0.92);
  border: 1.5px solid #5ad;
  padding: 10px 16px;
  min-width: 160px;
  cursor: pointer;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: filter 0.2s ease;
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-energy-bar:hover {
  filter: brightness(1.15);
}

.energy-bar-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.energy-label {
  font-size: 11px;
  font-weight: bold;
  color: #fd9;
  letter-spacing: 0.5px;
}

.energy-count {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.energy-regen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  color: #a89878;
}

.energy-regen .regen-label {
  font-size: 10px;
  color: #a89878;
}

.energy-refill-label {
  font-size: 11px;
  font-weight: bold;
  color: #fd9;
  margin-left: auto;
}

/* -----------------------------------------------------------
   7. Settings Button
   ----------------------------------------------------------- */
.menu-settings-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 25;
  background: rgba(20, 40, 60, 0.85);
  border: 1.5px solid #5cf;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: bold;
  color: #cdf;
  cursor: pointer;
  letter-spacing: 0.5px;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: all 0.2s ease;
  font-family: inherit;
}

.menu-settings-btn:hover {
  filter: brightness(1.15);
}

.settings-mute-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fa8;
  margin-left: 6px;
  vertical-align: middle;
}

/* -----------------------------------------------------------
   8. Overlay Panels (shared)
   ----------------------------------------------------------- */
.overlay-panel {
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  padding: 32px;
  min-width: 360px;
  max-width: 90vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}

.panel-accent-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--panel-accent);
}

.overlay-panel h2 {
  font-size: 22px;
  font-weight: bold;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.overlay-close-btn {
  padding: 10px 32px;
  font-size: 15px;
  font-weight: bold;
  border: 2px solid #9f8;
  background: rgba(40, 80, 60, 0.9);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: all 0.2s ease;
}

.overlay-close-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.overlay-footer {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}

/* -----------------------------------------------------------
   9. Settings Overlay
   ----------------------------------------------------------- */
.menu-settings .overlay-panel {
  min-width: 380px;
  padding: 32px 28px;
}

.settings-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 12px 0;
}

.settings-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(50, 42, 30, 0.95);
  border: 2px solid #5cf;
  color: #cdf;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  font-family: inherit;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  transition: all 0.2s ease;
}

.settings-toggle:hover {
  filter: brightness(1.1);
}

.settings-toggle.off {
  background: rgba(60, 30, 30, 0.85);
  border-color: #c66;
}

.toggle-label {
  font-size: 16px;
}

.toggle-value {
  font-size: 20px;
}

.settings-toggle:not(.off) .toggle-value {
  color: #9f8;
}

.settings-toggle.off .toggle-value {
  color: #fcc;
}

.settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 16px;
  text-align: center;
}

/* -----------------------------------------------------------
   10. Refill Overlay
   ----------------------------------------------------------- */
.refill-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.refill-packages {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 12px 0;
}

.refill-package {
  background: var(--chip-bg);
  border: 1.5px solid var(--chip-border);
  padding: 20px 28px;
  text-align: center;
  cursor: pointer;
  color: #cdf;
  font-family: inherit;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: all 0.2s ease;
  min-width: 100px;
}

.refill-package:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  border-color: var(--panel-accent);
}

.pkg-amount {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.pkg-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.pkg-price {
  font-size: 13px;
  color: #fe8;
  margin-top: 8px;
  font-weight: bold;
}

/* -----------------------------------------------------------
   11. Custom Match Overlay
   ----------------------------------------------------------- */
.custom-panel {
  min-width: 720px;
  max-width: 95vw;
  padding: 28px 32px;
}

.custom-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin: 0;
}

.custom-sides {
  display: flex;
  gap: 24px;
  width: 100%;
  margin: 8px 0;
}

.custom-side {
  flex: 1;
  background: rgba(34, 28, 22, 0.85);
  border: 1px solid rgba(120, 180, 220, 0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-side[data-side="allied"] {
  border-left: 3px solid #5cf;
}

.custom-side[data-side="hostile"] {
  border-right: 3px solid #f55;
}

.custom-side-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-title {
  font-size: 12px;
  font-weight: bold;
  color: var(--panel-accent);
}

.custom-side[data-side="hostile"] .side-title {
  color: #f55;
}

.side-race {
  font-size: 17px;
  font-weight: bold;
  color: #cdf;
}

.side-tagline {
  font-size: 11px;
  color: var(--text-secondary);
}

.custom-race-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.custom-divider {
  height: 1px;
  background: rgba(120, 180, 220, 0.18);
}

.custom-sliders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(20, 32, 48, 0.85);
  border: 1px solid rgba(120, 180, 220, 0.4);
  font-size: 10px;
  font-weight: bold;
  color: #cdf;
  flex-shrink: 0;
}

.slider-name {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-primary);
  width: 70px;
  flex-shrink: 0;
}

.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(32, 26, 20, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.35);
  outline: none;
  flex: 1;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--panel-accent);
  cursor: pointer;
}

.custom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--panel-accent);
  cursor: pointer;
}

.slider-count {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.custom-side-total {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-muted);
  text-align: right;
}

.custom-totals {
  font-size: 13px;
  color: #a89878;
  text-align: center;
  width: 100%;
}

.custom-footer {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}

/* -----------------------------------------------------------
   12. Run Setup Overlay
   ----------------------------------------------------------- */
.menu-runsetup {
  align-items: center;
  justify-content: center;
}

.runsetup-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  width: 100%;
  max-width: 1200px;
}

.runsetup-panel h2 {
  font-size: 34px;
  font-weight: bold;
  color: var(--text-primary);
  margin: 0;
}

.runsetup-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin: 0;
}

.faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1000px;
  margin: 20px 0;
}

.faction-card {
  background: rgba(30, 24, 18, 0.85);
  border: 1.5px solid rgba(120, 180, 220, 0.4);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: all 0.2s ease;
}

.faction-card:hover {
  filter: brightness(1.15);
  transform: translateY(-4px);
}

.faction-emblem {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}

.faction-name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.faction-tagline {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
}

.faction-record {
  font-size: 11px;
  color: #fc8;
}

.runsetup-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-top: 20px;
}

/* Career-start briefing copy. Sits below the subtitle. */
.runsetup-briefing {
  max-width: 540px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  margin: 8px 0 4px 0;
}
.runsetup-briefing p {
  margin: 6px 0;
}
.runsetup-briefing p:last-child {
  color: #fc8;
  font-style: italic;
}

.runsetup-callsign-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.runsetup-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: #5ab;
  font-weight: bold;
}
.runsetup-callsign-input {
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(120, 180, 220, 0.45);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  padding: 10px 16px;
  width: 220px;
  text-transform: uppercase;
}
.runsetup-callsign-input:focus {
  outline: none;
  border-color: #7df;
}
.runsetup-callsign-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1px;
  font-weight: normal;
  text-transform: none;
}

.runsetup-faction-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 32px;
  background: rgba(30, 24, 18, 0.85);
  border: 1.5px solid rgba(120, 180, 220, 0.4);
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  margin: 4px 0;
}

/* Starter-perk picker on BEGIN CAREER. A row of compact chips above
   the description line. "(NONE)" is always present; the unlocked
   perks (driven by meta.unlockedPerks) follow. */
.runsetup-perk-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.runsetup-perk-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.runsetup-perk-chip {
  background: rgba(20, 26, 36, 0.85);
  border: 1.5px solid rgba(120, 180, 220, 0.3);
  color: #a89878;
  padding: 6px 12px;
  font: bold 10px/1 inherit;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.runsetup-perk-chip:hover {
  border-color: rgba(180, 220, 255, 0.7);
  filter: brightness(1.1);
}
.runsetup-perk-chip.active {
  background: rgba(60, 110, 160, 0.7);
  border-color: #5cf;
  color: #fff;
}
.runsetup-perk-desc {
  font-size: 10px;
  color: #8a7a5a;
  text-align: center;
  min-height: 14px;
}

/* -----------------------------------------------------------
   12b. Promotion Overlay (between acts)
   ----------------------------------------------------------- */
.menu-promotion, .menu-preamble, .menu-dispatch, .menu-runstats, .menu-captaindetail, .menu-careerdetail, .menu-servicehall, .menu-newcareer-confirm {
  flex-direction: column;   /* base .menu-screen.active is flex with no direction */
  align-items: center;
  justify-content: center;
}

/* New-Career Confirm Overlay — guard rail before abandoning an
   active Frontier officer for a new start. */
.newcareer-confirm-panel {
  min-width: 360px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 28px 24px;
  text-align: center;
}
.ncc-eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 218, 130, 0.85);
  font-weight: bold;
}
.ncc-title {
  font-size: 18px;
  letter-spacing: 2px;
  margin: 0;
}
.ncc-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.ncc-active {
  width: 100%;
  padding: 12px 14px;
  background: rgba(120, 200, 255, 0.08);
  border: 1px solid rgba(120, 200, 255, 0.25);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.ncc-active-eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(120, 200, 255, 0.85);
  font-weight: bold;
}
.ncc-active-name {
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #fff;
  font-weight: bold;
}
.ncc-active-sub {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}
.ncc-warn {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255, 140, 140, 0.85);
  margin: 0;
}
.ncc-footer {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.ncc-cancel {
  flex: 1;
}
.ncc-confirm {
  flex: 1;
  background: linear-gradient(180deg, #ff8a6a, #c4543a);
  color: #1a0a06;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 140, 110, 0.25);
}
.ncc-confirm:hover {
  box-shadow: 0 4px 12px rgba(255, 140, 110, 0.40);
}

/* Service Hall (Tier 38) — meta-progression spending screen. */
.servicehall-panel {
  min-width: 480px;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 28px;
  text-align: center;
}
.svchall-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: #fc6;
  font-weight: bold;
}
.servicehall-panel h2 {
  font-size: 22px;
  margin: 0;
  color: #fff;
  letter-spacing: 2px;
}
.svchall-points-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 198, 102, 0.10);
  border: 1px solid rgba(255, 198, 102, 0.32);
  border-radius: 3px;
  margin-bottom: 4px;
}
.svchall-points-label {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--text-secondary);
  font-weight: bold;
}
.svchall-points-value {
  font-size: 18px;
  color: #ffd680;
  font-weight: bold;
  letter-spacing: 0.6px;
}
.svchall-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svchall-row {
  padding: 10px 12px;
  background: rgba(8, 14, 24, 0.55);
  border-left: 3px solid #aef;
  border-radius: 3px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svchall-row.maxed {
  border-left-color: #fc6;
  opacity: 0.85;
}
.svchall-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.svchall-name {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.4px;
}
.svchall-rank {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--text-secondary);
}
.svchall-desc {
  font-size: 11.5px;
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.4;
}
.svchall-pips-row {
  display: flex;
  gap: 4px;
  margin: 2px 0;
}
.svchall-pip {
  width: 12px;
  height: 6px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 2px;
}
.svchall-pip.filled {
  background: linear-gradient(90deg, #fa6, #fc6);
}
.svchall-buy-btn {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: bold;
  background: rgba(120, 200, 255, 0.18);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.40);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.svchall-buy-btn:hover:not(:disabled) {
  background: rgba(120, 200, 255, 0.28);
  color: #fff;
}
.svchall-buy-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Career Detail overlay (Tier 35). Opens from memorial wall clicks.
   Shows full epitaph + final stats grid + complete career log. */
.careerdetail-panel {
  min-width: 480px;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 28px;
  text-align: center;
}
.cardtl-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: bold;
}
.cardtl-eyebrow.career-won  { color: #ffd680; }
.cardtl-eyebrow.career-lost { color: #fdb; }
.careerdetail-panel h2 {
  font-size: 22px;
  margin: 0;
  color: #fff;
  letter-spacing: 1.8px;
}
.cardtl-rank {
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--text-secondary);
}
.cardtl-epitaph {
  font-size: 13px;
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.45;
  max-width: 480px;
  margin: 6px 0 2px 0;
}
.cardtl-section {
  width: 100%;
  margin-top: 10px;
  text-align: left;
}
.cardtl-section-title {
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.cardtl-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  background: rgba(8, 14, 24, 0.45);
  border-radius: 3px;
  padding: 8px 12px;
}
.cardtl-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.cardtl-stat-label {
  color: var(--text-secondary);
}
.cardtl-stat-value {
  color: #fff;
  font-weight: bold;
}
.cardtl-log {
  list-style: none;
  padding: 8px 12px;
  margin: 0;
  background: rgba(8, 14, 24, 0.45);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.cardtl-log-line {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 0 2px 10px;
  border-left: 2px solid #555;
  line-height: 1.4;
}
.cardtl-log-act {
  display: inline-block;
  font-weight: bold;
  color: var(--text-primary);
  letter-spacing: 0.6px;
  margin-right: 4px;
}
.cardtl-log-boss      { border-left-color: #fc6; }
.cardtl-log-rival     { border-left-color: #f57; }
.cardtl-log-ace       { border-left-color: #ec7; }
.cardtl-log-arc       { border-left-color: #6cf; }
.cardtl-log-promotion { border-left-color: #aef; }
.cardtl-log-note      { border-left-color: #888; }
.cardtl-log-empty {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  list-style: none;
}

/* Memorial row hover affordance — make rows visibly clickable. */
.memorial-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.memorial-clickable:hover {
  background: rgba(120, 200, 255, 0.08);
  transform: translateX(2px);
}
.memorial-row-hint {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: rgba(120, 200, 255, 0.55);
  margin-top: 6px;
  text-align: right;
}

/* Captain Detail overlay (Tier 32). */
.captaindetail-panel {
  min-width: 420px;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 28px;
  text-align: center;
}
.cdtl-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: #fc6;
  font-weight: bold;
}
.captaindetail-panel h2 {
  font-size: 22px;
  margin: 0;
  color: #fff;
  letter-spacing: 1.5px;
}

/* Rename row — ship name / captain + pencil button. */
.cdtl-namerow {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.cdtl-rename-btn {
  background: rgba(120, 200, 255, 0.10);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.30);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.15s ease;
}
.cdtl-rename-btn:hover {
  background: rgba(120, 200, 255, 0.25);
  color: #fff;
  transform: scale(1.1);
}
.cdtl-class {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--text-secondary);
}
.cdtl-variant {
  color: #fc6;
  font-weight: bold;
  letter-spacing: 1.2px;
}
.cdtl-divider {
  width: 60%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 6px 0;
}
.cdtl-captain {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.4px;
}
.cdtl-trait-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.cdtl-trait {
  font-size: 10px;
  letter-spacing: 1.4px;
  background: rgba(120, 200, 255, 0.16);
  color: #aef;
  border-radius: 2px;
  padding: 2px 8px;
  font-weight: bold;
}
.cdtl-title {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: #fc6;
  font-style: italic;
}
.cdtl-trait-blurb {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
  max-width: 380px;
  margin-top: 4px;
}
.cdtl-effect {
  width: 100%;
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(120, 200, 255, 0.10);
  border-left: 3px solid #aef;
  border-radius: 3px;
  font-size: 11.5px;
  color: #cef;
  text-align: left;
  line-height: 1.4;
}
.cdtl-effect-label {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: #aef;
  font-weight: bold;
  margin-right: 6px;
}
.cdtl-section {
  width: 100%;
  margin-top: 8px;
  text-align: left;
}
.cdtl-section-title {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-secondary);
  font-weight: bold;
  margin-bottom: 4px;
}
.cdtl-xp-row, .cdtl-hp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.cdtl-level {
  font-weight: bold;
  color: #fc6;
  letter-spacing: 1.2px;
}
.cdtl-xp-text, .cdtl-hp-text {
  color: var(--text-secondary);
  font-size: 11px;
}
.cdtl-xp-bar-bg, .cdtl-hp-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.cdtl-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fa6, #fc6);
  transition: width 0.3s ease;
}
.cdtl-hp-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.cdtl-hp-bar-fill.hp-high { background: #6e9; }
.cdtl-hp-bar-fill.hp-mid  { background: #fc6; }
.cdtl-hp-bar-fill.hp-low  { background: #f66; }
.cdtl-bonus {
  font-size: 12px;
  color: #aef;
  font-weight: bold;
  letter-spacing: 0.4px;
}

/* Per-capital behavior chips (Tier 37). */
.cdtl-behavior-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.cdtl-behavior-chip {
  flex: 1 0 auto;
  min-width: 60px;
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: bold;
  background: rgba(8, 14, 24, 0.55);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cdtl-behavior-chip:hover {
  background: rgba(120, 200, 255, 0.12);
  color: #fff;
}
.cdtl-behavior-chip.active {
  background: rgba(120, 200, 255, 0.22);
  color: #fff;
  border-color: rgba(120, 200, 255, 0.55);
}
.cdtl-behavior-desc {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.35;
}

/* Run-stats overlay (Tier 27) — scrollable stat blocks per category.
   Opened from the run-map STATS button. */
.runstats-panel {
  min-width: 460px;
  max-width: 580px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 28px;
  text-align: left;
}
.runstats-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: #9df;
  font-weight: bold;
}
.runstats-panel h2 {
  font-size: 24px;
  margin: 0;
  color: #fff;
  letter-spacing: 2px;
}
.runstats-handle {
  width: 100%;
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
  letter-spacing: 0.6px;
  text-align: center;
  margin-bottom: 4px;
}
.runstats-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.runstats-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(8, 14, 24, 0.55);
  border-left: 3px solid #5cf;
  border-radius: 3px;
}
.runstats-section-title {
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.runstats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.runstats-label {
  color: var(--text-secondary);
}
.runstats-value {
  color: #fff;
  font-weight: bold;
}
.runstats-sub {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: normal;
  margin-left: 6px;
}

/* End-run stats block on the match-over panel. Tighter than the
   live runstats overlay; renders as a 2-column grid. */
.endstats-block {
  width: 100%;
  max-width: 520px;
  margin-top: 10px;
}
.endstats-section-title {
  font-size: 10px;
  letter-spacing: 2.2px;
  font-weight: bold;
  color: #9df;
  margin-bottom: 6px;
  text-align: center;
}
.endstats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.endstats-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.endstats-label {
  color: var(--text-secondary);
}
.endstats-value {
  color: #fff;
  font-weight: bold;
}

/* Achievements unlocked block on the AAR end-screen (Tier 43). */
.endstats-ach-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.endstats-ach-row {
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: bold;
  color: #ffd680;
  padding: 4px 10px;
  background: rgba(255, 218, 130, 0.10);
  border-left: 2px solid #ffd680;
  border-radius: 2px;
}

.stats-btn {
  background: rgba(120, 200, 255, 0.18);
  color: #aef;
  border: 1px solid rgba(120, 200, 255, 0.4);
}

/* Dispatch overlay (Tier 17) — radio-comm feel. Tighter panel,
   monospace flavor, blinking dot. Border tint is keyed off the
   .dispatch-{speaker} modifier so the visual matches the source. */
.dispatch-panel {
  min-width: 420px;
  max-width: 560px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 32px;
  border: 1px solid rgba(120, 200, 255, 0.32);
  background: rgba(8, 16, 28, 0.85);
}
.dispatch-static-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.dispatch-static-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6cf;
  box-shadow: 0 0 8px #6cf;
  animation: dispatch-blink 1.2s ease-in-out infinite;
}
@keyframes dispatch-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.dispatch-eyebrow {
  font-size: 10px;
  letter-spacing: 3.5px;
  color: #6cf;
  font-weight: bold;
}
.dispatch-panel h2 {
  font-size: 22px;
  margin: 0;
  color: #d8eaf6;
  letter-spacing: 2.4px;
}
.dispatch-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  max-width: 480px;
  margin: 4px 0 0 0;
  font-style: italic;
  text-align: center;
}
/* Speaker tints */
.dispatch-command    { border-color: rgba(120, 200, 255, 0.45); }
.dispatch-command    .dispatch-static-dot,
.dispatch-command    .dispatch-eyebrow { color: #6cf; background: #6cf; box-shadow: 0 0 8px #6cf; }
.dispatch-command    .dispatch-eyebrow { color: #8df; background: transparent; box-shadow: none; }
.dispatch-friend     { border-color: rgba(120, 230, 160, 0.45); }
.dispatch-friend     .dispatch-static-dot { background: #8e9; box-shadow: 0 0 8px #8e9; }
.dispatch-friend     .dispatch-eyebrow { color: #aef; }
.dispatch-ally       { border-color: rgba(240, 200, 120, 0.5); }
.dispatch-ally       .dispatch-static-dot { background: #fc8; box-shadow: 0 0 8px #fc8; }
.dispatch-ally       .dispatch-eyebrow { color: #fda; }
.dispatch-intercept  { border-color: rgba(190, 190, 190, 0.4); }
.dispatch-intercept  .dispatch-static-dot { background: #bbb; box-shadow: 0 0 8px #bbb; }
.dispatch-intercept  .dispatch-eyebrow { color: #ccc; }
.dispatch-voidsworn  { border-color: rgba(200, 130, 240, 0.55); }
.dispatch-voidsworn  .dispatch-static-dot { background: #c8f; box-shadow: 0 0 8px #c8f; }
.dispatch-voidsworn  .dispatch-eyebrow { color: #daf; }
.dispatch-engineering{ border-color: rgba(150, 220, 230, 0.4); }
.dispatch-engineering .dispatch-static-dot { background: #9de; box-shadow: 0 0 8px #9de; }
.dispatch-engineering .dispatch-eyebrow { color: #aef; }

/* Jump-encounter overlay — reuses dispatch styling but tighter; the
   encounter is a quick mid-jump beat, not a formal transmission. */
.jumpencounter-panel {
  min-width: 380px;
  max-width: 500px;
}
.jumpencounter-reward {
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.8px;
  color: #aef;
  background: rgba(120, 200, 255, 0.10);
  border-radius: 3px;
  display: none;
}
.preamble-panel {
  min-width: 460px;
  max-width: 620px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px;
}
.preamble-eyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  color: #fc8;
  font-weight: bold;
}
.preamble-panel h2 {
  font-size: 26px;
  margin: 0;
  color: #f6f0e0;
  letter-spacing: 2.5px;
  text-shadow: 0 0 16px rgba(255, 220, 160, 0.35);
}
.preamble-lines {
  list-style: none;
  padding: 0;
  margin: 6px 0 4px 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.preamble-lines li {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.45;
  text-align: center;
}
.preamble-lines li:last-child {
  color: #ffd5a0;
  font-style: italic;
  border-top: 1px solid rgba(255, 200, 130, 0.18);
  padding-top: 8px;
  margin-top: 2px;
}
.promotion-panel {
  min-width: 480px;
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px;
}
.promotion-eyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  color: #5ab;
  font-weight: bold;
}
.promotion-panel h2 {
  font-size: 38px;
  margin: 0;
  color: #ffd680;
  letter-spacing: 3px;
}
.promotion-title {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-secondary);
  margin-top: -8px;
}
.promotion-blurb {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 8px 0;
  max-width: 480px;
}
.promotion-additions {
  width: 100%;
  margin-top: 6px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 214, 128, 0.35);
}
.promotion-additions-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ffd680;
  margin-bottom: 8px;
  font-weight: bold;
}
.promotion-additions-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.promotion-addition-row {
  font-size: 14px;
  color: var(--text-primary);
}
.promotion-addition-capital {
  font-weight: bold;
  color: #cef;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(8, 14, 24, 0.45);
  border-left: 3px solid #cef;
  border-radius: 3px;
  text-align: left;
}
.promotion-addition-head {
  font-weight: bold;
  color: #cef;
}
.promotion-ship-name {
  color: #fff;
  letter-spacing: 0.6px;
}
.promotion-addition-captain {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  letter-spacing: 0.4px;
}
.promotion-addition-empty {
  color: var(--text-secondary);
  font-style: italic;
}

/* Capital variant picker (Tier 40) — 2 chips per capital row. */
.promotion-variant-chips {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.promotion-variant-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(8, 14, 24, 0.55);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  text-align: left;
}
.promotion-variant-chip:hover {
  background: rgba(120, 200, 255, 0.12);
}
.promotion-variant-chip.active {
  background: rgba(120, 200, 255, 0.22);
  border-color: rgba(120, 200, 255, 0.55);
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.25);
}
.variant-label {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
}
.variant-blurb {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.35;
}

/* Inter-act war bulletin — 3 news-ticker headlines shown on the
   promotion overlay. The flag-conditional third line is the
   payoff for choices the player made earlier in the run (Voss
   briefing, wingman rescue, wounded warlord, etc.). */
.promotion-bulletin {
  width: 100%;
  margin-top: 6px;
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.45);
  border-left: 3px solid rgba(255, 214, 128, 0.8);
}
.promotion-bulletin-list {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promotion-bulletin-line {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.4;
  font-style: italic;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 214, 128, 0.35);
}

/* Trait picker on the promotion overlay. Three chips per draw,
   stacked vertically with name + desc lines. Active state mirrors
   the starter-perk picker on BEGIN CAREER. */
.promotion-traits {
  width: 100%;
  margin-top: 6px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(120, 180, 220, 0.4);
}
.promotion-trait-hint {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 8px;
  font-style: italic;
}
.promotion-trait-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.promotion-trait-chip {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(20, 26, 36, 0.85);
  border: 1.5px solid rgba(120, 180, 220, 0.3);
  border-radius: 4px;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.promotion-trait-chip:hover {
  border-color: rgba(180, 220, 255, 0.7);
  filter: brightness(1.1);
}
.promotion-trait-chip.active {
  background: rgba(60, 110, 160, 0.7);
  border-color: #5cf;
}
.promotion-trait-chip .trait-name {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.promotion-trait-chip .trait-desc {
  font-size: 10px;
  color: #a89878;
}
.promotion-trait-chip.active .trait-desc { color: #d9e7f3; }
.menu-btn.start-btn.disabled,
.menu-btn.start-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* -----------------------------------------------------------
   13. Battle Choice Overlay
   ----------------------------------------------------------- */
.menu-battlechoice .overlay-panel {
  min-width: 440px;
}

.battle-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.battle-faction {
  font-size: 18px;
  font-weight: bold;
}

.battle-tier {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Boss briefing — shown on the battle-choice screen when the node
   is a named act-finale encounter (Crimson Talon, Black Auriga, etc.).
   Replaces the generic faction+tier strip with the boss dossier. */
.boss-briefing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 90, 90, 0.45);
  margin: 4px 0;
  max-width: 100%;
}
.boss-briefing-eyebrow {
  font-size: 9px;
  letter-spacing: 2.4px;
  font-weight: bold;
}
.boss-briefing-name {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-shadow: 0 0 12px currentColor;
}
.boss-briefing-faction {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 1.5px;
}
.boss-briefing-body {
  font-size: 12px;
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.4;
  max-width: 360px;
  text-align: center;
  margin-top: 4px;
}
/* Ace variant: amber rim, slightly smaller name — reads as "named
   threat, but not the act finale". Reuses .boss-briefing layout. */
.boss-briefing.ace-briefing {
  border-color: rgba(255, 200, 80, 0.55);
}
.boss-briefing.ace-briefing .boss-briefing-name {
  font-size: 18px;
}

/* Fleet doctrine picker (Tier 34) — three chips above FLY/COMMAND.
   Picked stance applies to every blue capital at spawn time. */
.battle-doctrine {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  width: 100%;
  max-width: 480px;
}
.doctrine-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  font-weight: bold;
  color: var(--text-secondary);
  text-align: center;
}
.doctrine-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.doctrine-chip {
  flex: 1;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: bold;
  background: rgba(8, 14, 24, 0.55);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.doctrine-chip:hover {
  background: rgba(120, 200, 255, 0.10);
  color: #fff;
}
.doctrine-chip.active {
  background: rgba(120, 200, 255, 0.20);
  color: #fff;
  border-color: rgba(120, 200, 255, 0.55);
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.30);
}
.doctrine-chip[data-doctrine="press"].active    { border-color: rgba(255, 130, 100, 0.65); box-shadow: 0 0 10px rgba(255, 130, 100, 0.30); }
.doctrine-chip[data-doctrine="hold"].active     { border-color: rgba(170, 230, 255, 0.65); box-shadow: 0 0 10px rgba(170, 230, 255, 0.30); }
.doctrine-chip[data-doctrine="skirmish"].active { border-color: rgba(150, 220, 150, 0.65); box-shadow: 0 0 10px rgba(150, 220, 150, 0.30); }
.doctrine-desc {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  min-height: 16px;
}

/* Battle banter — short comms lines stacked above the briefing.
   Each line has a SPEAKER label (3-letter chip) + text. Left-border
   tint is keyed off the speaker class so command/wingman/voidsworn
   read as distinct sources. */
.battle-banter {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0;
  max-width: 480px;
}
.banter-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 9px;
  background: rgba(8, 16, 28, 0.55);
  border-left: 3px solid #555;
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.banter-speaker {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: bold;
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 56px;
}
.banter-text {
  color: var(--text-primary);
  font-style: italic;
}
.banter-command   { border-left-color: #5cf; }
.banter-command   .banter-speaker { color: #8df; }
.banter-wingman   { border-left-color: #6e9; }
.banter-wingman   .banter-speaker { color: #9ed; }
.banter-ally      { border-left-color: #ec7; }
.banter-ally      .banter-speaker { color: #fda; }
.banter-voidsworn { border-left-color: #b6f; }
.banter-voidsworn .banter-speaker { color: #d9f; }
.banter-intercept { border-left-color: #aaa; }
.banter-intercept .banter-speaker { color: #ccc; }

.battle-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  margin: 16px 0;
}

.battle-btn {
  padding: 14px 28px;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid #9cf;
  cursor: pointer;
  font-family: inherit;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: all 0.2s ease;
}

#battle-fly {
  background: rgba(140, 120, 80, 0.95);
  color: #fff;
}

#battle-command {
  background: rgba(160, 80, 160, 0.95);
  color: #fff;
  border-color: #9cf;
}

.battle-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* -----------------------------------------------------------
   14. Resupply Overlay
   ----------------------------------------------------------- */
.resupply-panel {
  min-width: 520px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px;
}

.resupply-credits {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 4px;
}

/* Vendor personality block — sits at the top of the resupply panel.
   Per-archetype border tint via .vendor-{key} modifier. */
.resupply-vendor {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-left: 3px solid #9df;
  background: rgba(8, 14, 24, 0.55);
  border-radius: 3px;
  text-align: left;
}
.vendor-archetype {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 2.4px;
  margin-bottom: 4px;
}
.vendor-name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.8px;
}
.vendor-pitch {
  font-size: 12px;
  color: var(--text-primary);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}
.vendor-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: bold;
  background: rgba(120, 200, 255, 0.16);
  color: #aef;
  border-radius: 2px;
  text-transform: uppercase;
}
.vendor-quartermaster { border-left-color: #9df; }
.vendor-blackmarket   { border-left-color: #f8a; }
.vendor-blackmarket .vendor-tag { background: rgba(255, 130, 170, 0.16); color: #fbd; }
.vendor-engineer      { border-left-color: #fc6; }
.vendor-engineer .vendor-tag { background: rgba(255, 200, 100, 0.16); color: #fda; }
.vendor-salvager      { border-left-color: #ac9; }
.vendor-salvager .vendor-tag { background: rgba(170, 200, 150, 0.16); color: #ceb; }
.vendor-priest        { border-left-color: #c8f; }
.vendor-priest .vendor-tag { background: rgba(200, 130, 240, 0.16); color: #daf; }

.repair-subtitle {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 1px;
}

.resupply-section {
  width: 100%;
  margin: 6px 0;
}

.resupply-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.repair-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(34, 28, 22, 0.7);
  border: 1px solid rgba(120, 180, 220, 0.2);
  margin-bottom: 6px;
}

.repair-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.repair-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
}

.repair-hp {
  font-size: 11px;
  color: var(--text-secondary);
}

.repair-hp-bar {
  width: 80px;
  height: 6px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.repair-hp-fill {
  height: 100%;
  background: #5cf;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.shop-btn {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: bold;
  background: rgba(40, 32, 24, 0.92);
  border: 1.5px solid #9cf;
  color: #cdf;
  cursor: pointer;
  font-family: inherit;
  flex: 1;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop-btn:hover {
  filter: brightness(1.15);
}

.shop-btn.disabled {
  background: rgba(40, 40, 55, 0.85);
  border-color: #566;
  color: #866;
  cursor: not-allowed;
  pointer-events: none;
}

.shop-btn.wide {
  width: 100%;
}

.shop-cost {
  color: #fe8;
  font-size: 11px;
}

.boon-card {
  background: rgba(50, 30, 70, 0.92);
  border: 1.5px solid #c9f;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  color: #fcf;
  font-family: inherit;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
  transition: all 0.2s ease;
}

.boon-card:hover {
  filter: brightness(1.15);
}

.boon-card.disabled {
  background: rgba(40, 40, 55, 0.85);
  border-color: #566;
  cursor: not-allowed;
  pointer-events: none;
}

.boon-name {
  font-size: 12px;
  font-weight: bold;
  color: #fcf;
}

.boon-desc {
  font-size: 11px;
  color: #bce;
  margin-top: 4px;
}

/* Legacy #resupply-boons grid layout — superseded by the .resupply-v2
   sectioned panes rebuild in Tier 45. Scoped via :not(.resupply-v2 ...)
   so any non-v2 callers (none currently) still see the old grid. */
.menu-resupply:not(.resupply-v2) #resupply-boons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* -----------------------------------------------------------
   15. Event Overlay
   ----------------------------------------------------------- */
.event-panel {
  min-width: 480px;
  max-width: 90vw;
}

.event-body {
  font-size: 14px;
  color: #bce;
  line-height: 1.6;
  text-align: center;
  width: 100%;
  padding: 8px 0;
}

.event-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 8px 0;
}

.event-choice-btn {
  background: rgba(40, 50, 60, 0.92);
  border: 1.5px solid #9cf;
  padding: 14px 18px;
  text-align: left;
  cursor: pointer;
  color: #cdf;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: all 0.2s ease;
}

.event-choice-btn:hover {
  filter: brightness(1.15);
  transform: translateX(4px);
}

.choice-label {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.choice-hint {
  font-size: 11px;
  color: var(--text-secondary);
}

/* -----------------------------------------------------------
   16. Shared Button Classes
   ----------------------------------------------------------- */
.menu-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1.5px solid;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  font-family: inherit;
}

.menu-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.start-btn {
  background: var(--btn-start-bg);
  border-color: var(--btn-start-border);
  color: #fff;
}

.cancel-btn {
  background: var(--btn-cancel-bg);
  border-color: var(--btn-cancel-border);
  color: #fdd;
}

/* -----------------------------------------------------------
   17. Animations
   ----------------------------------------------------------- */
@keyframes menu-fade-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.menu-screen.active .overlay-panel {
  animation: menu-fade-in 0.2s ease-out;
}

/* -----------------------------------------------------------
   18. Responsive
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .menu-title h1 { font-size: 24px; }
  .chip-row { gap: 8px; }
  .chip-item { min-width: 90px; padding: 8px 12px; font-size: 12px; }
  .custom-sides { flex-direction: column; }
  .custom-panel { min-width: unset; width: 95vw; }
  .faction-grid { grid-template-columns: repeat(2, 1fr); }
  .overlay-panel { min-width: unset; width: 92vw; padding: 20px; }
  .battle-actions { flex-direction: column; }
  .resupply-panel { min-width: unset; width: 92vw; }
  .menu-start-btn { padding: 14px 40px; font-size: 18px; }
}

@media (min-width: 2560px) {
  .menu-title h1 { font-size: 48px; }
  .chip-item { font-size: 18px; padding: 16px 28px; }
  .overlay-panel { min-width: 480px; }
}


/* ============================================================
   BATTLE HUD — DOM-based in-game HUD for mobile optimization
   ============================================================ */

/* -----------------------------------------------------------
   Section 1: Root container
   ----------------------------------------------------------- */
.battle-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  visibility: hidden;
}
.battle-root.active {
  visibility: visible;
}

/* -----------------------------------------------------------
   Section 2: Side strips (allied/enemy fleet counts)
   ----------------------------------------------------------- */
.side-strip {
  position: absolute;
  top: 12px;
  background: rgba(8, 14, 24, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}

.side-left {
  left: 12px;
  border-color: rgba(140, 110, 60, 0.4);
}

.side-right {
  right: 12px;
  border-color: rgba(220, 60, 60, 0.4);
}

.side-strip .side-title {
  font-size: 11px;
  font-weight: bold;
}

.side-left .side-title {
  color: #7a9ab0;
}

.side-right .side-title {
  color: #f55;
}

.side-strip .side-race {
  font-size: 9px;
  color: #a89878;
  margin-bottom: 4px;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.roster-cell {
  text-align: center;
  padding: 3px 2px;
  background: rgba(34, 28, 22, 0.8);
  border: 1px solid rgba(120, 180, 220, 0.2);
  border-radius: 3px;
  min-width: 36px;
}

.roster-cell.empty {
  opacity: 0.35;
}

.roster-cell .cell-glyph {
  font-size: 8px;
  color: #a89878;
  font-weight: bold;
}

.roster-cell .cell-count {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}

/* -----------------------------------------------------------
   Section 3: Vitals bar (shield/hull/gun at bottom center)
   ----------------------------------------------------------- */
.vitals-bar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 14, 24, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(120, 180, 220, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.vitals-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vital-label {
  font-size: 9px;
  font-weight: bold;
  color: #a89878;
  width: 44px;
  letter-spacing: 0.5px;
}

.vital-bar {
  flex: 1;
  height: 8px;
  background: #0a1420;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.vital-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.15s ease-out;
}

.shield-fill {
  background: linear-gradient(90deg, #7a9ab0, #5cf);
}

.hull-fill {
  background: linear-gradient(90deg, #2a5a2a, #4f6);
}

.hull-fill.critical {
  background: linear-gradient(90deg, #5a1a1a, #f64);
}

.gun-fill {
  background: linear-gradient(90deg, #8a6a1a, #fd6);
}

.vital-value {
  font-size: 10px;
  color: #fff;
  width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------
   Section 4: Virtual sticks
   ----------------------------------------------------------- */
.vstick {
  position: absolute;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.vstick.active {
  opacity: 1;
}

.vstick-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(180, 220, 255, 0.3);
  background: radial-gradient(circle, rgba(20, 40, 60, 0.4) 0%, transparent 70%);
}

.vstick-knob {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(220, 200, 160, 0.9), rgba(120, 200, 255, 0.6));
  box-shadow: 0 0 16px rgba(180, 220, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.3);
  transform: translate3d(62px, 62px, 0);
  will-change: transform;
}

.vstick-deadzone {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px dashed rgba(180, 220, 255, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vstick-left {
  left: 30px;
  bottom: 220px;
}

.vstick-right {
  right: 130px;
  bottom: 220px;
}

/* -----------------------------------------------------------
   Section 5: Action buttons (fire/missile/boost)
   ----------------------------------------------------------- */
.action-cluster {
  position: absolute;
  right: 20px;
  bottom: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  pointer-events: auto;
}

/* Weapons panel — auto-fire toggles for a piloted capital. Sits to the LEFT
   of the action cluster (the FIRE/MISSILE/BOOST column) so it reads as the
   trigger's weapon selector. Floating vsticks (pointer-events:none) pass
   through the gap, so this fixed column doesn't fight touch movement/aim. */
.weapons-panel {
  position: absolute;
  right: 92px;
  bottom: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  pointer-events: auto;
  z-index: 6;
}
.weapons-panel-hdr {
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 1.5px;
  color: rgba(150, 200, 240, 0.65);
  text-align: center;
  margin-bottom: 1px;
}
.weapon-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  padding: 5px 8px;
  background: rgba(12, 28, 44, 0.9);
  border: 1.5px solid rgba(120, 220, 160, 0.7);
  border-radius: 6px;
  color: #9fe9c2;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.weapon-toggle .wt-name {
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.5px;
}
.weapon-toggle .wt-state {
  font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 1px;
  opacity: 0.85;
}
.weapon-toggle:active { transform: scale(0.95); }
/* HOLD state — muted/red so a silenced group reads at a glance. */
.weapon-toggle.wt-off {
  border-color: rgba(230, 120, 120, 0.7);
  color: #f0a0a0;
  background: rgba(40, 16, 16, 0.85);
}

.action-btn {
  position: relative;
  border-radius: 50%;
  border: 2px solid rgba(180, 220, 255, 0.5);
  background: radial-gradient(circle at 40% 40%, rgba(50, 40, 25, 0.9), rgba(34, 28, 22, 0.95));
  color: #cdf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
  transition: transform 0.08s ease, filter 0.08s ease;
}

.action-btn:active {
  transform: scale(0.92);
  filter: brightness(1.3);
}

.fire-btn {
  width: 80px;
  height: 80px;
}

.missile-btn {
  width: 56px;
  height: 56px;
}

.boost-btn {
  width: 48px;
  height: 48px;
}

.btn-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}

.action-btn.pressed .btn-glow {
  opacity: 1;
  box-shadow: 0 0 20px rgba(180, 220, 255, 0.6);
}

.fire-btn.pressed {
  border-color: rgba(255, 220, 100, 0.8);
}

.fire-btn.pressed .btn-glow {
  box-shadow: 0 0 24px rgba(255, 200, 50, 0.7);
}

.missile-btn.ready {
  animation: missile-ready-pulse 1.5s ease-in-out infinite;
}

@keyframes missile-ready-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(96, 160, 96, 0.4); }
  50% { box-shadow: 0 0 20px rgba(96, 160, 96, 0.8); }
}

.btn-cooldown {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(rgba(0, 0, 0, 0.5) var(--cooldown-angle, 0deg), transparent 0deg);
  pointer-events: none;
}

.btn-icon {
  font-size: 16px;
  line-height: 1;
}

.btn-label {
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* -----------------------------------------------------------
   Section 6: Minimap
   ----------------------------------------------------------- */
.minimap {
  position: absolute;
  bottom: 120px;
  right: 12px;
  background: rgba(8, 14, 24, 0.88);
  border: 1.5px solid rgba(120, 180, 220, 0.3);
  border-radius: 6px;
  overflow: hidden;
  width: 200px;
}

.minimap-header {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(16, 32, 52, 0.9);
  font-size: 9px;
  font-weight: bold;
  color: #a89878;
}

.minimap-viewport {
  position: relative;
  width: 200px;
  height: 140px;
  background: #03070d;
}

.minimap-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.dot-blue {
  background: rgba(120, 200, 255, 0.85);
}

.dot-red {
  background: rgba(255, 60, 60, 0.85);
}

.dot-player {
  background: #fff;
  box-shadow: 0 0 4px #fff;
}

/* Size classes — capitals bumped slightly so Polish 8's ring outline
   has room to read. Small craft stay small so a 200-ship brawl
   doesn't clog the minimap viewport. */
.dot-size-station {
  width: 10px;
  height: 10px;
}

.dot-size-carrier {
  width: 9px;
  height: 9px;
}

.dot-size-battleship {
  width: 8px;
  height: 8px;
}

.dot-size-cruiser {
  width: 6px;
  height: 6px;
}

.dot-size-bomber {
  width: 4px;
  height: 4px;
}

.dot-size-fighter {
  width: 3px;
  height: 3px;
}

/* -----------------------------------------------------------
   Section 7: Damage direction indicator
   ----------------------------------------------------------- */
.damage-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  pointer-events: none;
}

.damage-arc {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.damage-arc.hit {
  animation: damage-flash 0.5s ease-out;
}

@keyframes damage-flash {
  0% { opacity: 0.8; filter: brightness(2); }
  100% { opacity: 0; }
}

.damage-north {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at bottom, rgba(255, 50, 50, 0.6), transparent 70%);
}

.damage-south {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(255, 50, 50, 0.6), transparent 70%);
}

.damage-east {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at left, rgba(255, 50, 50, 0.6), transparent 70%);
}

.damage-west {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at right, rgba(255, 50, 50, 0.6), transparent 70%);
}

/* -----------------------------------------------------------
   Section 8: Lock-on reticle
   ----------------------------------------------------------- */
.lock-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lock-reticle.active {
  opacity: 1;
}

.reticle-ring {
  position: absolute;
  inset: 10px;
  border: 1.5px solid rgba(255, 80, 80, 0.6);
  border-radius: 50%;
  animation: reticle-pulse 1.2s ease-in-out infinite;
}

@keyframes reticle-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}

.reticle-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #f66;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.reticle-bracket-left,
.reticle-bracket-right {
  position: absolute;
  top: 30%;
  bottom: 30%;
  width: 12px;
  border-top: 2px solid rgba(255, 80, 80, 0.5);
  border-bottom: 2px solid rgba(255, 80, 80, 0.5);
}

.reticle-bracket-left {
  left: 0;
  border-left: 2px solid rgba(255, 80, 80, 0.5);
}

.reticle-bracket-right {
  right: 0;
  border-right: 2px solid rgba(255, 80, 80, 0.5);
}

/* -----------------------------------------------------------
   Section 9: Compass
   ----------------------------------------------------------- */
.compass {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.compass.active {
  opacity: 1;
}

.compass-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid rgba(255, 80, 80, 0.8);
  filter: drop-shadow(0 0 4px rgba(255, 60, 60, 0.5));
  transition: transform 0.2s ease;
}

.compass-label {
  font-size: 8px;
  font-weight: bold;
  color: #f88;
  letter-spacing: 1px;
}

/* -----------------------------------------------------------
   Section 9.5: Captain comms strip (Tier 39)
   ----------------------------------------------------------- */
.captain-comms {
  position: absolute;
  left: 20px;
  bottom: 140px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  z-index: 8;
}
.comm-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(8, 14, 24, 0.78);
  border-left: 3px solid #6cf;
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  transition: opacity 0.4s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.comm-speaker {
  font-size: 10px;
  letter-spacing: 0.6px;
  font-weight: bold;
  color: #aef;
  flex-shrink: 0;
}
.comm-ship {
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  font-style: italic;
  flex-shrink: 0;
}
.comm-text {
  color: var(--text-primary);
  font-style: italic;
}
/* On mobile, push the strip down so it doesn't clip the joysticks. */
@media (max-width: 720px) {
  .captain-comms {
    bottom: 90px;
    left: 10px;
    max-width: calc(100vw - 220px);
    font-size: 11px;
  }
  .comm-line {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* -----------------------------------------------------------
   Section 10: Spectate / Respawn / Match-over panels
   ----------------------------------------------------------- */
.spectate-pill {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 14, 24, 0.88);
  border: 1.5px solid rgba(120, 200, 255, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.spectate-pill.active {
  opacity: 1;
}

.spectate-tag {
  color: #a89878;
  font-weight: bold;
}

.spectate-ship {
  color: #cdf;
}

.respawn-panel {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 14, 24, 0.88);
  border: 1.5px solid rgba(120, 200, 255, 0.5);
  border-radius: 8px;
  padding: 12px 40px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.respawn-panel.active {
  opacity: 1;
}

.respawn-label {
  font-size: 10px;
  font-weight: bold;
  color: #a89878;
}

.respawn-timer {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.matchover-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(8, 14, 24, 0.92);
  border: 2px solid;
  border-radius: 10px;
  padding: 32px 60px;
  text-align: center;
  /* INTERACTIVE report: the panel must capture taps so the player can
     scroll, switch tabs, and expand rows. (battle-root is pointer-events:
     none; this re-enables the panel subtree.) The old window-level
     tap-anywhere dismiss was removed from main.js — advancing is the
     CONTINUE button (or Enter). */
  pointer-events: auto;
  /* Cap + scroll: the report + AAR (losses / destroyed / captured /
     promotion) can run tall on a phone. */
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.matchover-panel.active {
  opacity: 1;
}

.matchover-title {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

.matchover-subtitle {
  font-size: 14px;
  margin-top: 8px;
}

/* -----------------------------------------------------------
   In-depth battle report (all modes). Rendered inside
   .matchover-aar via renderBattleReportHTML (hud.js). The panel
   already caps height + scrolls, so this can run long.
   ----------------------------------------------------------- */
.bstat-report { width: 100%; max-width: 540px; margin: 16px auto 0; text-align: left; }
.bstat-title {
  font-size: 13px; font-weight: bold; letter-spacing: 1px;
  color: #cfe3f5; text-align: center; margin-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 12px;
}
.bstat-duration { font-weight: normal; color: #89a; margin-left: 8px; font-size: 11px; }
.bstat-blue { color: #6cf; }
.bstat-red { color: #f77; }
.bstat-section-title {
  font-size: 10px; font-weight: bold; letter-spacing: 1px; color: #9ab;
  margin: 13px 0 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 3px;
}
/* Head-to-head: blue value | label | red value */
.bstat-cmp { display: flex; flex-direction: column; gap: 1px; }
.bstat-cmp-row {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center; font-size: 12px; padding: 2px 0;
}
.bstat-cmp-row .bstat-b { text-align: right; color: #adf; font-weight: bold; font-variant-numeric: tabular-nums; }
.bstat-cmp-row .bstat-r { text-align: left;  color: #fbb; font-weight: bold; font-variant-numeric: tabular-nums; }
.bstat-cmp-row .bstat-lbl { text-align: center; color: #9ab; font-size: 11px; }
.bstat-cmp-head .bstat-b { color: #6cf; }
.bstat-cmp-head .bstat-r { color: #f77; }
.bstat-cmp-head span { font-size: 10px; letter-spacing: 1px; }
/* Per-side fleet columns */
.bstat-cols { display: flex; gap: 16px; }
.bstat-col { flex: 1; min-width: 0; }
.bstat-fleet-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 2px 0; }
.bstat-fleet-k { color: #cde; white-space: nowrap; }
.bstat-fleet-v { color: #9ab; text-align: right; }
/* MVP */
.bstat-mvp {
  display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 7px 10px;
  background: rgba(255, 214, 128, 0.1); border: 1px solid rgba(255, 214, 128, 0.32);
  border-radius: 5px; font-size: 12px;
}
.bstat-mvp-label { color: #ffd680; font-weight: bold; white-space: nowrap; }
.bstat-mvp-name { color: #fff; font-weight: bold; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bstat-mvp-stat { color: #cda; white-space: nowrap; }
/* Per-capital + strike-craft lists */
.bstat-cap-list, .bstat-sc-list { display: flex; flex-direction: column; gap: 1px; }
.bstat-cap-row {
  display: grid; grid-template-columns: 1.7fr 0.8fr 1.1fr 0.85fr;
  gap: 6px; align-items: center; font-size: 11px; padding: 2px 0;
}
.bstat-cap-name { color: #dfe; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bstat-cap-klass { color: #89a; text-transform: capitalize; }
.bstat-cap-kd { color: #bcd; text-align: right; font-variant-numeric: tabular-nums; }
.bstat-cap-fate { text-align: right; font-size: 10px; }
.bstat-fate-lost .bstat-cap-fate { color: #f77; }
.bstat-fate-surrendered .bstat-cap-fate { color: #fc6; }
.bstat-fate-alive .bstat-cap-fate { color: #6e9; }
.bstat-fate-lost .bstat-cap-name { opacity: 0.55; text-decoration: line-through; }
.bstat-sc-row { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 2px 0; }
.bstat-sc-lbl { color: #cde; min-width: 60px; }
.bstat-sc-v { color: #9ab; }
.bstat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.bstat-dot-blue { background: #6cf; }
.bstat-dot-red { background: #f77; }

/* ---- Interactive report: tabs, panes, expandable rows, continue ---- */
.bstat-tabs {
  display: flex;
  gap: 2px;
  margin: 6px 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bstat-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;            /* comfortable touch target */
  padding: 7px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8aa;
  font: inherit;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.bstat-tab:hover { color: #cde; }
.bstat-tab.active { color: #fff; border-bottom-color: #6cf; }
.bstat-tab:focus-visible { outline: 2px solid rgba(120, 190, 255, 0.7); outline-offset: -2px; }
.bstat-pane { display: none; }
.bstat-pane.active { display: block; animation: bstatPaneFade 0.18s ease; }
@keyframes bstatPaneFade { from { opacity: 0; } to { opacity: 1; } }

/* Expandable rows (capital ships + strike-craft lines) */
.bstat-cap-item, .bstat-sc-item { border-radius: 4px; }
.bstat-cap-item > .bstat-cap-row,
.bstat-sc-item > .bstat-sc-row {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: 5px 4px;
  min-height: 38px;            /* finger-friendly tap target on a phone */
  border-radius: 4px;
  transition: background 0.12s ease;
}
/* Collapsed capital row: caret | name | kills | fate. Class, damage, and
   accuracy live in the expanded detail, so the name gets room to breathe
   (no mid-name ellipsis on a phone). */
.bstat-cap-item > .bstat-cap-row {
  grid-template-columns: 14px 1.9fr 0.55fr 1fr;
  gap: 8px;
}
.bstat-cap-item:hover > .bstat-cap-row,
.bstat-sc-item:hover > .bstat-sc-row { background: rgba(255, 255, 255, 0.05); }
.bstat-cap-item:focus-within > .bstat-cap-row,
.bstat-sc-item:focus-within > .bstat-sc-row { background: rgba(120, 190, 255, 0.08); }
.bstat-caret {
  color: #6cf;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.bstat-detail {
  display: none;
  margin: 1px 0 5px 6px;
  padding: 7px 10px 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(108, 204, 255, 0.4);
  border-radius: 0 4px 4px 0;
}
.bstat-cap-item.expanded > .bstat-detail,
.bstat-sc-item.expanded > .bstat-detail { display: block; }
.bstat-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  font-size: 11px;
}
.bstat-dt-k { color: #8aa; }
.bstat-dt-v { color: #cde; text-align: right; font-variant-numeric: tabular-nums; }
.bstat-detail-flag { margin-top: 5px; font-size: 10px; color: #ffd680; }
.bstat-cap-empty { color: #8aa; font-size: 11px; padding: 6px 0; }

/* CONTINUE / RETURN button — replaces the old "Tap to continue" prompt */
.matchover-continue {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 36px;
  min-height: 44px;
  background: linear-gradient(180deg, rgba(70, 140, 210, 0.38), rgba(38, 88, 148, 0.38));
  border: 1.5px solid rgba(120, 190, 255, 0.6);
  border-radius: 6px;
  color: #eaf4ff;
  font: inherit;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.matchover-continue:hover {
  background: linear-gradient(180deg, rgba(92, 162, 232, 0.5), rgba(50, 110, 180, 0.5));
  border-color: rgba(150, 210, 255, 0.85);
}
.matchover-continue:active { transform: translateY(1px); }
.matchover-continue:focus-visible { outline: 2px solid rgba(180, 220, 255, 0.85); outline-offset: 2px; }

/* After-action report — three columns: LOST / DESTROYED / REINFORCEMENTS.
   Reads under the subtitle on Frontier matches. */
.matchover-aar {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  max-width: 540px;
  display: none;
}
.matchover-aar .aar-row {
  display: flex;
  gap: 14px;
  justify-content: space-between;
}
.matchover-aar .aar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(8, 14, 24, 0.45);
  border-radius: 4px;
  border-left: 3px solid #555;
  text-align: left;
  min-width: 0;
}
.matchover-aar .aar-label {
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: bold;
  color: var(--text-secondary);
}
.matchover-aar .aar-value {
  font-size: 12px;
  color: #fff;
  line-height: 1.35;
}
.matchover-aar .aar-note {
  font-size: 10px;
  font-style: italic;
  color: #fdb;
  margin-top: 2px;
  line-height: 1.3;
}
.matchover-aar .aar-lost    { border-left-color: #f57; }
.matchover-aar .aar-killed  { border-left-color: #6cf; }
.matchover-aar .aar-reward  { border-left-color: #aef; }
.matchover-aar .aar-captured { border-left-color: #9af0c8; }
.matchover-aar .aar-captured .aar-note { color: #9af0c8; }

/* Promotion block — narrative beat above the kill/loss tallies. */
.matchover-aar .aar-promo {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  border-left: 3px solid #aef;
  background: rgba(8, 14, 24, 0.55);
  text-align: left;
}
.matchover-aar .aar-promo-headline {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2.2px;
  color: #fc6;
  margin-bottom: 4px;
}
.matchover-aar .aar-promo-body {
  font-size: 12.5px;
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.45;
}
.matchover-aar .aar-promo-rewards {
  margin-top: 8px;
  font-size: 11px;
  font-weight: bold;
  color: #aef;
  letter-spacing: 0.8px;
}
/* Per-archetype border tint. */
.matchover-aar .aar-promo-recruit         { border-left-color: #aef; }
.matchover-aar .aar-promo-salvage         { border-left-color: #fc6; }
.matchover-aar .aar-promo-volunteer-bomber{ border-left-color: #6e9; }
.matchover-aar .aar-promo-commission      { border-left-color: #fda; box-shadow: 0 0 18px rgba(255, 218, 130, 0.18); }
.matchover-aar .aar-promo-commendation    { border-left-color: #ffd; }
.matchover-aar .aar-promo-defector        { border-left-color: #c9f; }
.matchover-aar .aar-promo-transfer        { border-left-color: #8df; }

.matchover-prompt {
  font-size: 12px;
  color: #a89878;
  margin-top: 16px;
}

/* -----------------------------------------------------------
   Section 11: Target panel
   ----------------------------------------------------------- */
.target-panel {
  position: absolute;
  bottom: 120px;
  left: 12px;
  background: rgba(8, 14, 24, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(220, 80, 80, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  width: 260px;
  opacity: 0;
  transition: opacity 0.2s ease;
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}

.target-panel.active {
  opacity: 1;
}

.target-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.target-label {
  font-size: 9px;
  font-weight: bold;
  color: #f66;
}

.target-name {
  font-size: 13px;
  font-weight: bold;
  color: #e8f0ff;
}

.target-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 10px;
}

.target-bar {
  flex: 1;
  height: 5px;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
}

.target-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}

.target-module-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 1px 0;
}

.target-module-row.destroyed {
  color: #a55;
  text-decoration: line-through;
}

.target-module-name {
  color: #cdf;
}

.target-module-hp {
  color: #a89878;
  font-size: 9px;
}

/* -----------------------------------------------------------
   Section 12: Admiral command panel
   ----------------------------------------------------------- */
.admiral-panel {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 14, 24, 0.92);
  border: 1.5px solid rgba(120, 200, 255, 0.32);
  border-radius: 10px;
  padding: 10px 12px 12px;
  width: min(640px, 95vw);
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.admiral-panel.active { opacity: 1; }

/* Header row — title + minimise/restore button. */
.admiral-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.admiral-title {
  font-size: 10px;
  font-weight: bold;
  color: #a89878;
  text-align: center;
  letter-spacing: 1.5px;
}
.admiral-min-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(120, 200, 255, 0.35);
  background: rgba(20, 40, 60, 0.85);
  color: #cdf;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.admiral-min-btn:hover { filter: brightness(1.2); }
.admiral-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Minimised — collapse to just the header bar so the battle is
   visible. The title gains a "tap to expand" affordance. */
.admiral-panel.minimized {
  width: min(280px, 70vw);
  padding-bottom: 8px;
  gap: 0;
}
.admiral-panel.minimized .admiral-body { display: none; }
.admiral-panel.minimized .admiral-title::after {
  content: " ▸ tap to expand";
  color: #6a7a90;
  font-weight: 400;
}

/* ---- Master command bar ------------------------------------------- */
.admiral-master {
  display: flex;
  gap: 6px;
  align-items: stretch;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(120, 180, 220, 0.12);
}

.admiral-master-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(120, 180, 220, 0.3);
  background: rgba(20, 40, 60, 0.78);
  color: #cdf;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.2px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;
}
.admiral-master-btn:hover { filter: brightness(1.15); }
.admiral-master-btn:active { transform: scale(0.96); }
.master-hold  { background: rgba(120, 30, 30, 0.6);  border-color: rgba(255, 110, 80, 0.45); color: #fdb; }
.master-free  { background: rgba(20, 60, 80, 0.7);   border-color: rgba(120, 200, 255, 0.5); color: #cdf; }
.master-press { background: rgba(30, 100, 50, 0.7);  border-color: rgba(140, 240, 160, 0.55); color: #cfd; }
.master-missiles {
  flex: 1.2;
  background: rgba(40, 60, 80, 0.7);
  color: #cdf;
}
.master-missiles.missiles-hold {
  background: rgba(120, 30, 30, 0.65);
  border-color: rgba(255, 110, 80, 0.55);
  color: #fdb;
}

/* ---- Focus-fire pill ---------------------------------------------- */
.admiral-focus {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(80, 60, 20, 0.55);
  border: 1px solid rgba(255, 210, 90, 0.55);
  border-radius: 4px;
  font-size: 11px;
}
.admiral-focus.active { display: flex; }
.focus-label {
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #fec97a;
  font-size: 10px;
}
.focus-name {
  flex: 1;
  color: #fff5d8;
  font-weight: bold;
}
.focus-clear {
  background: transparent;
  border: 1px solid rgba(255, 210, 90, 0.55);
  color: #fec97a;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.focus-clear:hover { background: rgba(255, 210, 90, 0.2); }

/* ---- Per-class command grid --------------------------------------- */
.admiral-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.admiral-cell {
  background: rgba(34, 28, 22, 0.78);
  border: 1px solid rgba(120, 180, 220, 0.18);
  border-radius: 4px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admiral-cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.admiral-cell-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(20, 40, 60, 0.9);
  border: 1px solid rgba(120, 180, 220, 0.4);
  border-radius: 3px;
  font-size: 9px;
  font-weight: bold;
  color: #9bd;
}
.admiral-cell-name {
  font-weight: bold;
  color: #cdf;
  letter-spacing: 0.8px;
}
.admiral-cell-count {
  margin-left: auto;
  color: #a89878;
  font-size: 10px;
  font-weight: bold;
}

.admiral-cell-postures {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.posture-btn {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid rgba(120, 180, 220, 0.25);
  background: rgba(20, 40, 60, 0.72);
  color: #b8c8d8;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.6px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}
.posture-btn:hover { filter: brightness(1.18); }
.posture-btn.flash { transform: scale(1.08); filter: brightness(1.35); }

/* Active variants: posture buttons take on their semantic colour when
   selected — red for hold, cyan for free, green for press — so the
   admiral can see the fleet's stance at a glance. */
.posture-hold.active  { background: rgba(150, 40, 40, 0.88); border-color: rgba(255, 110, 80, 0.85); color: #fff; }
.posture-free.active  { background: rgba(30, 80, 110, 0.88); border-color: rgba(140, 220, 255, 0.85); color: #fff; }
.posture-press.active { background: rgba(30, 120, 60, 0.88); border-color: rgba(150, 240, 170, 0.85); color: #fff; }
/* 5-stance set (in-battle admiral grid). engage=cyan, charge=red,
   standoff=blue, hold=amber, fallback=grey, focus=orange. */
.posture-engage.active   { background: rgba(30, 80, 110, 0.88);  border-color: rgba(140, 220, 255, 0.85); color: #fff; }
.posture-charge.active   { background: rgba(150, 50, 40, 0.9);   border-color: rgba(255, 130, 90, 0.9);  color: #fff; }
.posture-standoff.active { background: rgba(40, 90, 140, 0.9);   border-color: rgba(130, 180, 255, 0.9); color: #fff; }
.posture-fallback.active { background: rgba(70, 75, 90, 0.9);    border-color: rgba(170, 185, 210, 0.85); color: #fff; }
.focus-toggle.active     { background: rgba(150, 95, 30, 0.92);  border-color: rgba(255, 195, 110, 0.9); color: #fff; }
.master-focus.active     { background: rgba(150, 95, 30, 0.92);  border-color: rgba(255, 195, 110, 0.9); color: #fff; }
.missile-toggle.active {
  background: rgba(150, 40, 40, 0.85);
  border-color: rgba(255, 110, 80, 0.85);
  color: #fff;
}

/* ---- Command toast (top-centre flash) ----------------------------- */
.admiral-toast {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(8, 14, 24, 0.9);
  border: 1.5px solid rgba(140, 220, 255, 0.55);
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #cdf;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.admiral-toast.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: admiral-toast-pulse 0.36s ease-out;
}
@keyframes admiral-toast-pulse {
  0%   { transform: translateX(-50%) translateY(-12px); opacity: 0; }
  40%  { transform: translateX(-50%) translateY(0);     opacity: 1; }
  100% { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

/* -----------------------------------------------------------
   Section 13: Top-right pill buttons
   ----------------------------------------------------------- */
.battle-top-right {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.battle-pill {
  background: rgba(8, 14, 24, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(120, 180, 220, 0.35);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 9px;
  font-weight: bold;
  color: #a89878;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  pointer-events: auto;
}

.battle-pill:hover {
  filter: brightness(1.15);
  border-color: rgba(180, 220, 255, 0.55);
}

/* QUIT pill — same chrome as SPECTATE but warm-red so it reads as the
   "abandon match" action. Lives in `.battle-top-right` next to the
   spectate pill so it's always reachable mid-match. */
.battle-pill.quit-pill {
  color: #f9b8a8;
  border-color: rgba(255, 140, 110, 0.45);
}

.battle-pill.quit-pill:hover {
  border-color: rgba(255, 170, 140, 0.85);
  background: rgba(60, 20, 18, 0.88);
}

/* -----------------------------------------------------------
   Section 14: Animations (keyframe definitions)
   ----------------------------------------------------------- */
/* missile-ready-pulse defined in Section 5 */
/* damage-flash defined in Section 7 */
/* reticle-pulse defined in Section 8 */

/* -----------------------------------------------------------
   Section 15: Responsive breakpoints
   ----------------------------------------------------------- */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  /* Mobile fleet roster: the desktop two-column side strips switch to
     a pair of compact horizontal rows pinned to the top-centre of the
     viewport — BLUE on top, RED below it. The per-side title stays as
     a colour-coded label; the race name is dropped to save width. The
     target panel + minimap shift down so they don't collide. */
  .side-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    top: 6px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 2px 6px;
    gap: 4px;
    border-width: 1px;
    z-index: 1;
  }
  .side-left  { /* override desktop `left: 12px` */ left: 50%; }
  /* FRIENDLY row sits at top:6 and is ~38px tall (22px glyph + 10px count
     + padding). The old top:34 put ENEMY only 28px down, so the two rows
     overlapped by ~10px. Drop it clear of the first row. */
  .side-right { /* override desktop `right: 12px` */ right: auto; top: 48px; }
  /* SETTINGS / QUIT pills — desktop pins them top-right next to the
     side strips. On mobile EVERY top-edge slot is claimed already:
     side strips top-centre (~y58), minimap top-right (y64-y184),
     target panel top-left (y78+). Drop the pills below the minimap
     on the right edge so nothing fights for the same band. */
  .battle-top-right {
    top: 192px;
    right: 8px;
    z-index: 2;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .battle-top-right .battle-pill {
    /* Compact pill — single row of pills was wide enough to bleed
       off the right edge after we stacked vertically. */
    padding: 5px 10px;
    min-width: 64px;
    text-align: center;
  }
  .side-strip .side-title {
    font-size: 9px;
    flex-shrink: 0;
    line-height: 1;
  }
  .side-strip .side-race { display: none; }
  .roster-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .roster-cell {
    min-width: 26px;
    padding: 1px 2px;
  }
  .roster-cell .cell-glyph { font-size: 6px; line-height: 1; }
  .roster-cell .cell-count { font-size: 10px; line-height: 1; }

  .vitals-bar {
    width: 95%;
    min-width: unset;
    padding: 8px 12px;
  }

  .vital-label {
    font-size: 8px;
    width: 36px;
  }

  .vital-value {
    font-size: 9px;
    width: 48px;
  }

  .vstick {
    width: 140px;
    height: 140px;
  }

  .vstick-knob {
    width: 44px;
    height: 44px;
    transform: translate3d(48px, 48px, 0);
  }

  .vstick-left {
    left: 10px;
    bottom: 180px;
  }

  .vstick-right {
    right: 100px;
    bottom: 180px;
  }

  .action-cluster {
    right: 10px;
    bottom: 170px;
    gap: 8px;
  }

  .weapons-panel {
    right: 78px;
    bottom: 170px;
    gap: 5px;
  }
  .weapon-toggle {
    min-width: 54px;
    padding: 4px 6px;
  }

  .fire-btn {
    width: 68px;
    height: 68px;
  }

  .missile-btn {
    width: 48px;
    height: 48px;
  }

  .boost-btn {
    width: 42px;
    height: 42px;
  }

  /* Move the minimap to the top-right on mobile so it stops fighting
     the action-cluster + right stick for the bottom-right corner.
     Bumped from top:56 to top:64 so the mobile fleet strips (top:6 +
     top:34, each ~24px tall) clear the minimap header. */
  .minimap {
    width: 130px;
    top: 64px;
    right: 8px;
    bottom: auto;
  }

  .minimap-viewport {
    width: 130px;
    height: 80px;
  }

  .damage-indicator {
    width: 150px;
    height: 150px;
  }

  .damage-arc {
    width: 45px;
    height: 45px;
  }

  .compass-arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid rgba(255, 80, 80, 0.8);
  }

  .admiral-panel {
    width: 95vw;
    bottom: 60px;
    padding: 8px 10px;
  }

  .admiral-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .admiral-row {
    font-size: 10px;
    padding: 3px 6px;
  }

  /* Target panel moves to the top-left corner on mobile (was bottom-
     left where it stacked under the left stick + admiral panel). The
     panel stays narrow enough to clear the centred title pills and
     the top-right SPECTATE button. */
  .target-panel {
    /* Bumped to 168px because the new Polish 2 ship-silhouette icon
       in the header (32px + 8px gap) ate enough horizontal space that
       "Voidsworn Fighter" was being clipped at 140px. */
    width: 168px;
    /* Bumped from top:12 to top:78 so the new mobile fleet strips
       AND the now-pushed-down settings/quit pills don't overlap. */
    top: 78px;
    left: 8px;
    bottom: auto;
    padding: 6px 8px;
    font-size: 9px;
  }
  /* Target header on mobile — let the name wrap to a second line and
     keep the icon a touch smaller so 168px is enough breathing room. */
  .target-panel .target-header {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .target-panel .target-icon { width: 24px; height: 24px; }
  .target-panel .target-icon .class-icon { width: 22px; height: 22px; }
  .target-panel .target-name { flex: 1 0 100%; }

  /* Spectate pill on mobile drops below the top row so it stops sitting
     on top of the target panel + battle-top-right pill. */
  .spectate-pill {
    top: 112px;
    font-size: 9px;
  }

  .matchover-panel {
    padding: 20px 30px;
  }

  .matchover-title {
    font-size: 24px;
  }
}

/* Tablet (768-1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .side-strip {
    padding: 6px 8px;
  }

  .roster-cell {
    min-width: 30px;
    padding: 2px 1px;
  }

  .minimap {
    width: 180px;
  }

  .minimap-viewport {
    width: 180px;
    height: 130px;
  }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  .minimap {
    width: 220px;
  }

  .minimap-viewport {
    width: 220px;
    height: 160px;
  }
}

/* 4K (2560px+) */
@media (min-width: 2560px) {
  .battle-root {
    font-size: 1.25em;
  }

  .vstick {
    width: 225px;
    height: 225px;
  }

  .vstick-knob {
    width: 70px;
    height: 70px;
    transform: translate3d(77px, 77px, 0);
  }

  .fire-btn {
    width: 100px;
    height: 100px;
  }

  .missile-btn {
    width: 70px;
    height: 70px;
  }

  .boost-btn {
    width: 60px;
    height: 60px;
  }

  .minimap {
    width: 250px;
  }

  .minimap-viewport {
    width: 250px;
    height: 180px;
  }

  .vitals-bar {
    min-width: 350px;
    padding: 12px 20px;
  }
}

/* -----------------------------------------------------------
   Section 16: Accessibility
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vstick,
  .vstick-knob,
  .action-btn,
  .action-btn .btn-glow,
  .missile-btn.ready,
  .damage-arc,
  .damage-arc.hit,
  .lock-reticle,
  .reticle-ring,
  .compass,
  .compass-arrow,
  .spectate-pill,
  .respawn-panel,
  .matchover-panel,
  .target-panel,
  .admiral-panel,
  .vital-fill,
  .minimap-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* Focus-visible outlines for keyboard users */
.action-btn:focus-visible,
.battle-pill:focus-visible,
.admiral-toggle:focus-visible {
  outline: 2px solid rgba(180, 220, 255, 0.8);
  outline-offset: 2px;
}

/* -----------------------------------------------------------
   Tier 45 — Frontier screens mobile-first restructure
   ----------------------------------------------------------- */

/* Run Setup v2 ---------------------------------------------- */
.menu-runsetup.runsetup-v2 {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.runsetup-v2 .runsetup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px 16px;
  border-bottom: 1px solid rgba(120, 180, 220, 0.18);
  background: rgba(8, 14, 24, 0.55);
  position: sticky;
  top: 0;
  z-index: 2;
}
.runsetup-v2 .runsetup-header h2 {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2.5px;
  color: var(--text-primary);
}

.runsetup-v2 .runsetup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 20px 24px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.runsetup-v2 .runsetup-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 18px 20px 18px;
  background: linear-gradient(180deg, rgba(20, 32, 50, 0.95) 0%, rgba(12, 20, 32, 0.85) 100%);
  border: 1px solid rgba(120, 180, 220, 0.3);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.runsetup-v2 .runsetup-crest {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.runsetup-v2 .runsetup-crest-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(120, 200, 255, 0.55);
  box-shadow: 0 0 18px rgba(92, 204, 255, 0.35), inset 0 0 12px rgba(92, 204, 255, 0.18);
}
.runsetup-v2 .runsetup-crest-inner {
  position: relative;
  font-size: 32px;
  color: #cef;
  text-shadow: 0 0 12px rgba(120, 200, 255, 0.6);
}

.runsetup-v2 .runsetup-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: #5ab;
  font-weight: bold;
}
.runsetup-v2 .runsetup-hero-title {
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #fff;
  margin-top: 2px;
}
.runsetup-v2 .runsetup-hero-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 8px 0 4px 0;
  max-width: 420px;
}
.runsetup-v2 .runsetup-stakes {
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 2px;
  color: #fc8;
  border: 1px solid rgba(255, 200, 120, 0.45);
  border-radius: 2px;
}

.runsetup-v2 .runsetup-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.runsetup-v2 .runsetup-section-title {
  font-size: 10px;
  letter-spacing: 2.4px;
  font-weight: bold;
  color: #5ab;
}

.runsetup-v2 .runsetup-callsign-field {
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(120, 180, 220, 0.45);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  padding: 12px 14px;
  width: 100%;
  text-transform: uppercase;
}
.runsetup-v2 .runsetup-callsign-field:focus {
  outline: none;
  border-color: #7df;
  box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.25);
}
.runsetup-v2 .runsetup-callsign-field::placeholder {
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1.5px;
  font-weight: normal;
  text-transform: none;
}

.runsetup-v2 .runsetup-perk-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.runsetup-v2 .runsetup-perk-chip {
  flex: 1 1 calc(50% - 4px);
  min-width: 120px;
  background: rgba(20, 26, 36, 0.85);
  border: 1.5px solid rgba(120, 180, 220, 0.3);
  color: #a89878;
  padding: 10px 12px;
  font: bold 11px/1.2 inherit;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.runsetup-v2 .runsetup-perk-chip:hover {
  border-color: rgba(180, 220, 255, 0.7);
  filter: brightness(1.1);
}
.runsetup-v2 .runsetup-perk-chip.active {
  background: rgba(60, 110, 160, 0.7);
  border-color: #5cf;
  color: #fff;
  box-shadow: 0 0 8px rgba(92, 204, 255, 0.35);
}
.runsetup-v2 .runsetup-perk-desc {
  font-size: 11px;
  color: #8a7a5a;
  line-height: 1.45;
  min-height: 30px;
  padding: 8px 12px;
  background: rgba(8, 14, 24, 0.55);
  border-left: 2px solid rgba(120, 180, 220, 0.35);
  border-radius: 2px;
}

.runsetup-v2 .runsetup-footer {
  position: sticky;
  bottom: 0;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 14, 24, 0) 0%, rgba(8, 14, 24, 0.92) 35%);
  display: flex;
  justify-content: center;
  z-index: 2;
}
.runsetup-v2 .runsetup-footer .skirmish-deploy-btn {
  width: 100%;
  max-width: 460px;
}

/* Resupply v2 ----------------------------------------------- */
.menu-resupply.resupply-v2 {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.resupply-v2 .resupply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(120, 180, 220, 0.18);
  background: rgba(8, 14, 24, 0.55);
  position: sticky;
  top: 0;
  z-index: 2;
}
.resupply-v2 .resupply-header h2 {
  margin: 0;
  flex: 0 1 auto;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--text-primary);
}
.resupply-v2 .resupply-header .playhub-spacer {
  flex: 1;
}

.resupply-v2 .resupply-creds-chip,
.resupply-v2 .resupply-fuel-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.6px;
  border: 1px solid rgba(255, 220, 140, 0.35);
  background: rgba(40, 30, 12, 0.7);
  color: #fe8;
}
.resupply-v2 .resupply-fuel-chip {
  border-color: rgba(120, 200, 255, 0.4);
  background: rgba(12, 26, 40, 0.7);
  color: #aef;
}
.resupply-v2 .resupply-creds-icon,
.resupply-v2 .resupply-fuel-icon {
  font-size: 12px;
}

.resupply-v2 .resupply-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px 24px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.resupply-v2 .resupply-vendor-card {
  padding: 12px 14px;
  border-left: 3px solid #9df;
  background: rgba(8, 14, 24, 0.55);
  border-radius: 3px;
}
.resupply-v2 .resupply-vendor-card.vendor-blackmarket { border-left-color: #f8a; }
.resupply-v2 .resupply-vendor-card.vendor-engineer    { border-left-color: #fc6; }
.resupply-v2 .resupply-vendor-card.vendor-salvager    { border-left-color: #ac9; }
.resupply-v2 .resupply-vendor-card.vendor-priest      { border-left-color: #c8f; }
.resupply-v2 .resupply-vendor-card .vendor-archetype {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 2.4px;
  margin-bottom: 4px;
}
.resupply-v2 .resupply-vendor-card .vendor-name {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.6px;
}
.resupply-v2 .resupply-vendor-card .vendor-pitch {
  font-size: 12px;
  color: var(--text-primary);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}
.resupply-v2 .resupply-vendor-card .vendor-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: bold;
  background: rgba(120, 200, 255, 0.16);
  color: #aef;
  border-radius: 2px;
  text-transform: uppercase;
}

.resupply-v2 .resupply-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(120, 180, 220, 0.18);
  background: rgba(12, 18, 28, 0.55);
  border-radius: 3px;
}
.resupply-v2 .resupply-pane-title {
  font-size: 10px;
  letter-spacing: 2.4px;
  font-weight: bold;
  color: #5ab;
  margin-bottom: 2px;
}

.resupply-v2 .resupply-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resupply-v2 .resupply-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(34, 28, 22, 0.7);
  border: 1px solid rgba(120, 180, 220, 0.2);
  border-radius: 3px;
  width: 100%;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.resupply-v2 .resupply-row.resupply-boon-row {
  background: rgba(40, 24, 56, 0.7);
  border-color: rgba(200, 140, 240, 0.4);
}
.resupply-v2 .resupply-row.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.resupply-v2 .resupply-row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.resupply-v2 .resupply-row-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
  letter-spacing: 0.4px;
}
.resupply-v2 .resupply-row-meta {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.resupply-v2 .repair-hp-bar {
  width: 100%;
  max-width: 200px;
  height: 5px;
  background: rgba(40, 60, 80, 0.85);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}
.resupply-v2 .repair-hp-fill {
  height: 100%;
  background: #5cf;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.resupply-v2 .resupply-action-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.6px;
  background: rgba(40, 32, 24, 0.92);
  border: 1.5px solid #9cf;
  color: #cdf;
  cursor: pointer;
  font-family: inherit;
  border-radius: 3px;
  transition: filter 0.15s ease;
  white-space: nowrap;
}
.resupply-v2 .resupply-action-btn:hover {
  filter: brightness(1.15);
}
.resupply-v2 .resupply-action-btn:disabled,
.resupply-v2 .resupply-action-btn.disabled {
  background: rgba(40, 40, 55, 0.85);
  border-color: #566;
  color: #866;
  cursor: not-allowed;
  pointer-events: none;
}
.resupply-v2 .resupply-action-btn.boon-cost {
  border-color: #c9f;
  background: rgba(50, 30, 70, 0.92);
  color: #fcf;
}

.resupply-v2 .resupply-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.resupply-v2 .resupply-shop-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 10px 8px;
  background: rgba(20, 28, 40, 0.85);
  border: 1.5px solid rgba(120, 180, 220, 0.35);
  border-radius: 4px;
  font-family: inherit;
  color: #cdf;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.resupply-v2 .resupply-shop-tile:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.resupply-v2 .resupply-shop-tile:disabled,
.resupply-v2 .resupply-shop-tile.disabled {
  background: rgba(40, 40, 55, 0.85);
  border-color: #566;
  color: #866;
  cursor: not-allowed;
  pointer-events: none;
}
.resupply-v2 .shop-tile-icon {
  font-size: 22px;
  line-height: 1;
}
.resupply-v2 .shop-tile-name {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: bold;
}
.resupply-v2 .shop-tile-cost {
  font-size: 12px;
  font-weight: bold;
  color: #fe8;
  letter-spacing: 0.4px;
}

.resupply-v2 .resupply-empty {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 6px 4px;
}

.resupply-v2 .resupply-footer {
  position: sticky;
  bottom: 0;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 14, 24, 0) 0%, rgba(8, 14, 24, 0.92) 35%);
  display: flex;
  justify-content: center;
  z-index: 2;
}
.resupply-v2 .resupply-footer .skirmish-deploy-btn {
  width: 100%;
  max-width: 460px;
}

/* Compact tweaks for narrow mobile widths. */
@media (max-width: 420px) {
  .runsetup-v2 .runsetup-hero-title { font-size: 19px; }
  .runsetup-v2 .runsetup-hero-body { font-size: 12px; }
  .resupply-v2 .resupply-header h2 { font-size: 13px; }
  .resupply-v2 .resupply-shop-grid { gap: 6px; }
  .resupply-v2 .shop-tile-icon { font-size: 18px; }
}

/* -----------------------------------------------------------
   Section 17: z-index documentation
   -----------------------------------------------------------
   Battle HUD layer stack (bottom to top within battle-root):

     z-index  5  — #game canvas (behind battle-root)
     z-index 20  — .battle-root (DOM HUD overlay)

   Internal layering (all within .battle-root):
     Stacking order follows DOM order; later siblings paint
     above earlier siblings. Key elements:

     .side-strip          — fleet roster panels
     .battle-top-right    — settings / spectate pills
     .damage-indicator    — directional damage arcs (center)
     .lock-reticle        — target lock ring (center)
     .compass             — enemy direction arrow (top-center)
     .target-panel        — enemy info (bottom-left)
     .minimap             — fleet map (bottom-right)
     .vitals-bar          — shield/hull/gun bars (bottom-center)
     .respawn-panel       — respawn timer (top-center)
     .matchover-panel     — match result (center, highest)
     .spectate-pill       — spectating indicator (top-center)
     .vstick              — virtual joystick overlays
     .action-cluster      — fire/missile/boost buttons
     .admiral-panel       — fleet command panel (bottom-center)

   Global layer stack (from style.css / SPEC Section 18):
     z-index  1  — .starmap-root.behind-canvas
     z-index  5  — #game (canvas element)
     z-index 10  — .starmap-root
     z-index 15  — .menu-root
     z-index 20  — .battle-root (this HUD)
     z-index 25  — .menu-widgets (energy bar, settings)
     z-index 30  — .node-tooltip
     z-index 40  — .jump-confirm
   ----------------------------------------------------------- */

/* ============================================================
   SHIPYARD — design-your-own-ship meta-progression store.
   Two panes (overview + per-slot category). Sits on top of home
   as a fullscreen overlay. Same z-index as other menu screens.
   ============================================================ */

/* Home-screen card pointing at the Shipyard. Sits between the
   tile row and the link row. */
.home-shipyard-card {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, #1c2840 0%, #131c2e 100%);
  border: 1px solid #2c4670;
  border-radius: 12px;
  color: #cfe;
  text-align: left;
  cursor: pointer;
  display: block;
  transition: border-color 0.15s, transform 0.06s;
}
.home-shipyard-card:hover { border-color: #5cf; }
.home-shipyard-card:active { transform: scale(0.985); }
.shipyard-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #7df;
  margin-bottom: 6px;
}
.shipyard-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.shipyard-card-info { display: flex; flex-direction: column; gap: 2px; }
.shipyard-card-name {
  font-weight: 600;
  font-size: 17px;
  color: #fff;
}
.shipyard-card-hull {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #9bd;
}
.shipyard-card-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.shipyard-card-credits {
  font-size: 16px;
  font-weight: 600;
  color: #fc8;
}
.shipyard-card-credits .cr {
  font-size: 11px;
  color: #d9c;
  font-weight: 400;
  margin-left: 2px;
}
.shipyard-card-cta {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #7df;
}

/* ---- Overlay screen ---- */
.menu-shipyard {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: linear-gradient(180deg, #04080f 0%, #0a1224 100%);
}
.shipyard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #1f2c44;
  background: #060c18;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.shipyard-back {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid #2c4670;
  border-radius: 8px;
  color: #cfe;
  font-size: 20px;
  cursor: pointer;
}
.shipyard-back:active { background: #1c2840; }
.shipyard-header h2 {
  margin: 0;
  flex: 1;
  font-size: 16px;
  letter-spacing: 0.18em;
  color: #cfe;
}
.shipyard-balance {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #c84;
  border-radius: 20px;
  background: rgba(96, 64, 28, 0.25);
}
.shipyard-balance-value { color: #fc8; font-weight: 600; font-size: 16px; }
.shipyard-balance-unit  { color: #d9c; font-size: 11px; }

.shipyard-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: 80px;
}
.shipyard-pane { display: none; }
.shipyard-pane.active { display: block; }

/* ---- Overview pane ---- */
.shipyard-ship-card {
  background: linear-gradient(180deg, #122036 0%, #0a1424 100%);
  border: 1px solid #2c4670;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.shipyard-ship-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #7df;
  margin-bottom: 8px;
}
.shipyard-ship-name-row { margin-bottom: 8px; }
.shipyard-ship-name-input {
  width: 100%;
  padding: 8px 12px;
  background: #060c18;
  border: 1px solid #2c4670;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.shipyard-ship-name-input:focus {
  outline: none;
  border-color: #5cf;
}
.shipyard-ship-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.shipyard-ship-hull-label {
  color: #fc8;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.shipyard-ship-divider { color: #468; }
.shipyard-ship-stats { color: #9bd; }

.shipyard-section-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #7df;
  margin: 16px 0 8px;
}

.shipyard-hull-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.shipyard-hull-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: #0a1424;
  border: 1px solid #2c4670;
  border-radius: 8px;
  cursor: pointer;
  color: #cfe;
}
.shipyard-hull-card.equipped {
  background: linear-gradient(180deg, #1c3f5c 0%, #0a1f30 100%);
  border-color: #5cf;
  box-shadow: 0 0 0 1px #5cf inset;
}
.shipyard-hull-card.owned   { border-color: #468; }
.shipyard-hull-card.buyable { border-color: #c84; }
.shipyard-hull-card.locked  { opacity: 0.45; cursor: not-allowed; }
.hull-card-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.hull-card-tag {
  font-size: 10px;
  margin-top: 4px;
  color: #9bd;
}
.shipyard-hull-card.equipped .hull-card-tag { color: #5cf; }
.shipyard-hull-card.buyable  .hull-card-tag { color: #fc8; }
.shipyard-hull-card.locked   .hull-card-tag { color: #678; }

.shipyard-slot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shipyard-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #0a1424;
  border: 1px solid #1f2c44;
  border-radius: 8px;
  color: #cfe;
  cursor: pointer;
  text-align: left;
}
.shipyard-slot-row:hover { border-color: #2c4670; }
.shipyard-slot-row:active { background: #122036; }
.slot-row-kind {
  flex: 0 0 130px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #7df;
}
.slot-row-comp {
  flex: 1;
  font-size: 13px;
  color: #fff;
}
.slot-row-chev {
  color: #468;
  font-size: 18px;
}

.shipyard-footer {
  margin-top: 24px;
}
.shipyard-deploy-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(180deg, #c84 0%, #a62 100%);
  border: 1px solid #fc8;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.shipyard-deploy-btn:active { transform: scale(0.985); }

/* ---- Category pane ---- */
.shipyard-cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.shipyard-cat-back {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid #2c4670;
  border-radius: 8px;
  color: #cfe;
  font-size: 18px;
  cursor: pointer;
}
.shipyard-cat-header h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #cfe;
}
.shipyard-cat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shipyard-cat-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: #0a1424;
  border: 1px solid #1f2c44;
  border-radius: 8px;
  color: #cfe;
  cursor: pointer;
}
.shipyard-cat-item.equipped {
  background: linear-gradient(180deg, #1c3f5c 0%, #0a1f30 100%);
  border-color: #5cf;
}
.shipyard-cat-item.owned   { border-color: #468; }
.shipyard-cat-item.buyable { border-color: #c84; }
.shipyard-cat-item.locked  { opacity: 0.5; cursor: not-allowed; }
.cat-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cat-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.cat-item-tag {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: #9bd;
}
.shipyard-cat-item.equipped .cat-item-tag { color: #5cf; }
.shipyard-cat-item.buyable  .cat-item-tag { color: #fc8; }
.shipyard-cat-item.locked   .cat-item-tag { color: #678; }
.cat-item-blurb {
  font-size: 12px;
  color: #9bd;
  line-height: 1.4;
}

/* Shipyard credit breakdown on the run-end AAR panel.
   Distinct from the regular endstats so the credit payout reads as
   "this is what you walk away with into the next run". */
.endstats-shipyard {
  margin-top: 8px;
  grid-template-columns: 1fr;
  gap: 3px;
}
.endstats-shipyard .endstats-row {
  padding: 3px 8px;
  background: rgba(255, 180, 100, 0.06);
  border-left: 2px solid rgba(255, 180, 100, 0.35);
  border-radius: 2px;
}
.endstats-shipyard .endstats-value {
  color: #fc8;
}
.endstats-shipyard .endstats-warbonus {
  background: rgba(255, 200, 100, 0.18);
  border-left-color: #fc8;
}
.endstats-shipyard .endstats-warbonus .endstats-label,
.endstats-shipyard .endstats-warbonus .endstats-value {
  color: #fed;
  font-weight: bold;
  letter-spacing: 1.2px;
}
.endstats-shipyard-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(255,180,100,0.10), rgba(255,180,100,0.18));
  border: 1px solid rgba(255, 200, 120, 0.45);
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 1.4px;
  font-weight: bold;
  color: #fc8;
}
.endstats-shipyard-total-value {
  color: #fed;
  font-size: 16px;
}
.endstats-shipyard-balance {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: #9bd;
}
.endstats-shipyard-balance-value {
  color: #fc8;
  font-weight: bold;
}

/* Shipyard component-picker stat deltas. Inline chips below the
   component blurb showing how the candidate compares to currently
   equipped (e.g. "+30 shield", "-0.05s cycle"). Green/red tint
   indicates strictly-better vs strictly-worse on that axis — players
   skim the colors to spot upgrade vs sidegrade vs downgrade. */
.cat-item-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.cat-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.cat-delta-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.72;
}
.cat-delta-better {
  background: rgba(120, 220, 130, 0.14);
  border: 1px solid rgba(120, 220, 130, 0.45);
  color: #afe6b0;
}
.cat-delta-worse {
  background: rgba(240, 110, 110, 0.12);
  border: 1px solid rgba(240, 110, 110, 0.40);
  color: #f3b0b0;
}
/* Hide deltas on the equipped row — they'd always be empty there
   but keep a clean visual contract regardless. */
.shipyard-cat-item.equipped .cat-item-deltas { display: none; }

/* Shipyard paint editor — primary + trim color pickers + reset button.
   Uses the native <input type=color> for cross-platform compatibility
   on mobile (Capacitor iOS/Android both render the system color picker). */
.shipyard-paint-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #0a1424;
  border: 1px solid #1f2c44;
  border-radius: 8px;
}
.shipyard-paint-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.shipyard-paint-swatch .paint-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #7df;
}
.shipyard-paint-swatch input[type="color"] {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #2c4670;
  border-radius: 8px;
  background: #060c18;
  cursor: pointer;
  /* Strip the native swatch padding so the colored fill goes edge-to-edge. */
}
.shipyard-paint-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.shipyard-paint-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.shipyard-paint-swatch input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }
.shipyard-paint-reset {
  margin-left: auto;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid #2c4670;
  border-radius: 6px;
  color: #9bd;
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
  cursor: pointer;
}
.shipyard-paint-reset:active { background: #1c2840; }

/* Shipyard ship preview — SVG hull silhouette with clickable module
   hotspots. The SVG fills the stage; hotspots are absolute-positioned
   buttons over the top. Per-category tint + glyph so the player reads
   "this is my weapon" / "this is my shield" at a glance. */
/* ---- Shipyard ship preview — BLUEPRINT SCHEMATIC ---------------------
   The hull is rendered as a technical draughting plate: cyan grid, line-
   art hull with a construction ghost outline, centreline axes, station
   lines, dimension callouts + a title block. Module slots are schematic
   callout markers wired to the picker. */
.shipyard-preview {
  background:
    radial-gradient(120% 90% at 50% 0%, #0c3057 0%, #07203c 55%, #05172c 100%);
  border: 1px solid #2a5c8c;
  border-radius: 12px;
  padding: 8px 10px 12px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px rgba(120, 220, 255, 0.06),
              0 4px 18px rgba(0, 0, 0, 0.45);
}
.preview-hint {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #8fd6ff;
  text-align: center;
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: 0.85;
}
.preview-hint .preview-hint-doc {
  border: 1px solid #3a7bb0;
  border-radius: 2px;
  padding: 1px 5px;
  margin-right: 6px;
  color: #cfeaff;
  letter-spacing: 0.22em;
}
.preview-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 14 / 9;
}
.preview-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.preview-svg.blueprint-svg {
  filter: drop-shadow(0 0 5px rgba(90, 200, 255, 0.22));
}
/* Schematic ink — most line work is one cyan; the hull main outline is
   tinted by the player's trim paint (set inline). */
.blueprint-svg .bp-bg        { fill: #082341; }
.blueprint-svg .bp-frame     { fill: none; stroke: #3a7bb0; stroke-width: 1; }
.blueprint-svg .bp-corner    { fill: none; stroke: #8fd6ff; stroke-width: 1.4; }
.blueprint-svg .bp-axis      { stroke: #4f9fd0; stroke-width: 0.7; stroke-dasharray: 6 2 1 2; opacity: 0.7; }
.blueprint-svg .bp-stations line { stroke: #3f86bd; stroke-width: 0.6; opacity: 0.55; }
.blueprint-svg .bp-hull-ghost { fill: none; stroke: #5fa8da; stroke-width: 0.8; stroke-dasharray: 3 3; opacity: 0.6; }
.blueprint-svg .bp-hull      { stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(140, 230, 255, 0.5)); }
.blueprint-svg .bp-tick      { stroke: #bfeaff; stroke-width: 0.9; }
.blueprint-svg .bp-dim line,
.blueprint-svg .bp-dim path  { stroke: #7cc6f0; stroke-width: 0.7; fill: none; }
.blueprint-svg .bp-dim text  { fill: #aee0ff; font-family: "Courier New", monospace; font-size: 6.5px; letter-spacing: 0.08em; }
.blueprint-svg .bp-titleblock rect { fill: rgba(8, 32, 58, 0.78); stroke: #3a7bb0; stroke-width: 0.8; }
.blueprint-svg .bp-titleblock line { stroke: #3a7bb0; stroke-width: 0.6; }
.blueprint-svg .bp-tb-main   { fill: #d6f1ff; font-family: "Courier New", monospace; font-size: 6.5px; letter-spacing: 0.06em; font-weight: bold; }
.blueprint-svg .bp-tb-sub    { fill: #8fc8ee; font-family: "Courier New", monospace; font-size: 5.5px; letter-spacing: 0.04em; }

/* Module callout markers — small schematic nodes (squared diamonds) with
   a monospace label tag, instead of the old round chips. */
.preview-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(7, 28, 52, 0.92);
  border: 1.4px solid #5fa8da;
  border-radius: 3px;
  padding: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #cfeaff;
  box-shadow: 0 0 0 3px rgba(8, 35, 65, 0.55), 0 0 6px rgba(90, 200, 255, 0.25);
  transition: transform 0.08s, border-color 0.12s, box-shadow 0.12s;
  z-index: 2;
}
.preview-hotspot:hover, .preview-hotspot:active {
  transform: translate(-50%, -50%) scale(1.18);
  border-color: #bfeaff;
  box-shadow: 0 0 0 3px rgba(8, 35, 65, 0.7), 0 0 10px rgba(140, 230, 255, 0.5);
}
.preview-hotspot .hot-num {
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  font-family: "Courier New", monospace;
}
/* Secondary mount markers — extra physical mounts of a numbered slot (PD
   turret ring, second engine, broadside pair). Small unnumbered nodes so
   they show on the hull where the in-game turrets are, without cluttering
   the numbered legend. */
.preview-hotspot.preview-marker {
  width: 12px;
  height: 12px;
  border-width: 1.2px;
  box-shadow: 0 0 0 2px rgba(8, 35, 65, 0.5), 0 0 4px rgba(90, 200, 255, 0.22);
}
.preview-hotspot.preview-marker:hover,
.preview-hotspot.preview-marker:active {
  transform: translate(-50%, -50%) scale(1.25);
}
/* Parts legend — the numbered key beneath the plate. */
.preview-legend {
  list-style: none;
  margin: 12px 2px 0;
  padding: 8px 4px 0;
  border-top: 1px dashed #2f6391;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.preview-leg-row {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  transition: background 0.1s;
}
.preview-leg-row:hover, .preview-leg-row:active { background: rgba(90, 200, 255, 0.1); }
.preview-leg-row .leg-num {
  flex: none;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.2px solid #5fa8da;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  color: #cfeaff;
  background: rgba(7, 28, 52, 0.8);
}
.preview-leg-row .leg-cat {
  flex: none;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #6fa8d0;
  width: 52px;
}
.preview-leg-row .leg-name {
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #d6f1ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Legend rows inherit the category accent on their number balloon. */
.preview-leg-row.hot-weapon    .leg-num { border-color: #ff9a9a; }
.preview-leg-row.hot-pd        .leg-num { border-color: #ffc98a; }
.preview-leg-row.hot-missile   .leg-num { border-color: #ff9ad6; }
.preview-leg-row.hot-shield    .leg-num { border-color: #8fcaff; }
.preview-leg-row.hot-armor     .leg-num { border-color: #cdddee; }
.preview-leg-row.hot-engine    .leg-num { border-color: #9af0c8; }
.preview-leg-row.hot-hangar    .leg-num { border-color: #ffc0c0; }
.preview-leg-row.hot-shield-gen .leg-num { border-color: #5cf0e0; color: #5cf0e0; }
.preview-leg-row.hot-torpedo   .leg-num { border-color: #f0c040; color: #f0c040; }
/* Fixed built-in module rows — no hover interaction, dimmed to read as
   informational rather than selectable. */
.preview-leg-row.preview-leg-fixed {
  cursor: default;
  opacity: 0.72;
}
.preview-leg-row.preview-leg-fixed:hover,
.preview-leg-row.preview-leg-fixed:active { background: none; }
/* Per-category tints — each module class reads with its own accent while
   staying within the cyan blueprint family. */
.preview-hotspot.hot-weapon    { border-color: #ff9a9a; color: #ffdede; }
.preview-hotspot.hot-pd        { border-color: #ffc98a; color: #ffeccd; }
.preview-hotspot.hot-missile   { border-color: #ff9ad6; color: #ffdef4; }
.preview-hotspot.hot-shield    { border-color: #8fcaff; color: #dfefff; }
.preview-hotspot.hot-armor     { border-color: #cdddee; color: #ffffff; }
.preview-hotspot.hot-engine    { border-color: #9af0c8; color: #dbffec; }
.preview-hotspot.hot-hangar    { border-color: #ffc0c0; color: #ffe0e0; }
/* Fixed built-in hardware — teal for shield generators, gold for torpedoes. */
.preview-hotspot.preview-fixed {
  position: absolute;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px dashed;
  pointer-events: none;
  opacity: 0.7;
}
.preview-hotspot.preview-fixed.hot-shield-gen { border-color: #5cf0e0; background: rgba(92,240,224,0.10); }
.preview-hotspot.preview-fixed.hot-torpedo    { border-color: #f0c040; background: rgba(240,192,64,0.10); }

/* Ship-class icon polish (Polish 1).
   The classIconSvg helper drops an inline <svg.class-icon> into every
   roster cell / slider chip / admiral cell glyph. These rules size +
   tint them so they read as silhouettes against the chrome. */
.class-icon {
  display: inline-block;
  vertical-align: middle;
  /* Use currentColor for both fill + stroke so each container can tint
     the icon via CSS color without touching the SVG markup. */
  color: inherit;
}
.roster-cell .cell-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  /* Override the legacy 8px font-size text — icon owns the box now. */
  font-size: 0;
}
.roster-cell .cell-glyph .class-icon {
  color: #a89878;
}
.roster-cell.empty .cell-glyph .class-icon { opacity: 0.55; }
.admiral-cell-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.admiral-cell-glyph .class-icon { color: #cfe; }
.slider-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.slider-glyph .class-icon { color: #9bd; }
/* Smaller-viewport override — the legacy rule made the glyph 6px-text. */
@media (max-width: 420px) {
  .roster-cell .cell-glyph { font-size: 0; height: 18px; }
  .roster-cell .cell-glyph .class-icon { width: 18px; height: 18px; }
}

/* Polish 2 — target panel ship-class silhouette + action cluster icons. */
.target-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.target-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: #fdb;            /* enemy faction tint */
}
.target-icon .class-icon { width: 30px; height: 30px; }

/* Action-cluster inline SVG icons — replace the emoji codepoints with
   crisp SVG that respects currentColor + scales to any DPR. */
.action-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: inherit;
}
.action-btn .btn-icon svg { display: block; }

/* Polish 3 — boot splash. Full-screen overlay that paints the brand
   while the engine initialises + sprite-prerender completes. Fades out
   on the second RAF after first paint so the player sees the menu
   underneath when the curtain lifts.
   Z-index sits above everything else (menu = 15, battle HUD = 20,
   menu widgets = 25) so nothing leaks through during the fade. */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(ellipse at center, #0a1424 0%, #04060e 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s ease;
}
#boot-splash.fade-out { opacity: 0; pointer-events: none; }
.boot-splash-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px;
  animation: boot-fade-in 0.6s ease;
}
.boot-splash-icon {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  box-shadow: 0 8px 24px rgba(92, 200, 255, 0.25),
              0 0 60px rgba(92, 200, 255, 0.15);
}
.boot-splash-title {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: #cfe;
  margin-top: 12px;
  text-shadow: 0 0 16px rgba(92, 200, 255, 0.45);
}
.boot-splash-subtitle {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.48em;
  color: #7df;
}
.boot-splash-loader {
  display: inline-flex;
  gap: 8px;
  margin-top: 8px;
}
.boot-splash-loader span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5cf;
  animation: boot-pulse 1.2s ease-in-out infinite;
  opacity: 0.4;
}
.boot-splash-loader span:nth-child(2) { animation-delay: 0.15s; }
.boot-splash-loader span:nth-child(3) { animation-delay: 0.30s; }
@keyframes boot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1.0; transform: scale(1.15); }
}
@keyframes boot-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Polish 4 — memorial entry insignia + result badge layout.
   Override the legacy 3-column grid to a vertical stack so the new
   header row (insignia + identity + badge) reads as the top band
   and epitaph + memoir flow underneath. */
.memorial-list .memorial-row {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.memorial-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.memorial-rank-insignia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 218, 130, 0.08);
  border: 1px solid rgba(255, 218, 130, 0.30);
  border-radius: 6px;
  color: #ffd680;
  flex-shrink: 0;
}
.memorial-row.lost .memorial-rank-insignia {
  background: rgba(240, 110, 110, 0.06);
  border-color: rgba(240, 110, 110, 0.30);
  color: #f3b0b0;
}
.memorial-row-identity {
  flex: 1;
  min-width: 0;
}
.memorial-row-identity .memorial-row-rank,
.memorial-row-identity .memorial-row-callsign {
  margin: 0;
}
.memorial-result-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  flex-shrink: 0;
}
.memorial-result-badge.won {
  background: rgba(120, 220, 130, 0.14);
  border: 1px solid rgba(120, 220, 130, 0.45);
  color: #afe6b0;
}
.memorial-result-badge.lost {
  background: rgba(240, 110, 110, 0.12);
  border: 1px solid rgba(240, 110, 110, 0.40);
  color: #f3b0b0;
}

/* Empty-state polish — memorial without careers gets an illustrated
   placeholder card with helpful copy + a star-field backdrop. */
.memorial-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  background: radial-gradient(ellipse at center, rgba(92,200,255,0.06) 0%, transparent 65%);
  border: 1px dashed rgba(124, 220, 255, 0.30);
  border-radius: 14px;
  color: #9bd;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}
.memorial-empty::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  background-image: url("/app-icon.svg");
  background-size: cover;
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(92, 200, 255, 0.30);
  opacity: 0.85;
}

/* Polish 6 — overlay fade-in. When a menu screen becomes active, the
   children fade in over 0.18s for a less jarring transition than the
   raw display:flip. Avoid animating the .menu-screen itself (display
   transitions don't animate); animate the panel inside instead. */
.menu-screen.active > * {
  animation: menu-fade-in 0.20s ease;
}
@keyframes menu-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Card-bottom-sheet style for the shipyard category list — slides up
   from below when the player taps a slot. */
.shipyard-pane-category.active {
  animation: shipyard-cat-slide 0.22s ease;
}
@keyframes shipyard-cat-slide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty states — illustrated cards for sections with no content yet.
   Memorial empty handled above. Add a Shipyard "no credits yet" hint
   and a generic empty-card style for future use. */
.shipyard-empty-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  margin: 16px 0;
  border: 1px dashed rgba(255, 200, 120, 0.30);
  border-radius: 10px;
  background: rgba(255, 200, 120, 0.05);
  color: #fc8;
  font-size: 12px;
  text-align: center;
  line-height: 1.55;
}
.shipyard-empty-credits::before {
  content: "✦";
  font-size: 22px;
  color: #fc8;
  opacity: 0.8;
}

/* Polish 7 — settings toggle redesign. Icon + label + sliding-pill
   switch. Existing `.off` class still flips the value text + the new
   knob position. */
.settings-toggle {
  display: grid !important;
  grid-template-columns: 32px 1fr 48px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #cfe;
}
.settings-toggle.off .toggle-icon { color: #678; opacity: 0.5; }
.toggle-switch {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: rgba(120, 220, 130, 0.30);
  border: 1px solid rgba(120, 220, 130, 0.55);
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.toggle-switch-knob {
  position: absolute;
  top: 2px;
  left: 22px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #afe6b0;
  transition: left 0.18s ease, background 0.18s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.settings-toggle.off .toggle-switch {
  background: rgba(140, 140, 160, 0.20);
  border-color: rgba(140, 140, 160, 0.40);
}
.settings-toggle.off .toggle-switch-knob {
  left: 2px;
  background: #8d99af;
}
/* The legacy `.toggle-value` text becomes redundant with the switch;
   keep it as a screen-reader-friendly companion but visually subtle. */
.settings-toggle .toggle-value {
  display: none;
}

/* Volume sliders — independent MUSIC + SFX channels. Row layout:
   icon | label | slider (flex) | % readout. Native range input styled
   to match the green accent of the rest of the settings chrome. */
.settings-slider-row {
  display: grid;
  grid-template-columns: 32px 54px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(120, 220, 130, 0.30);
  border-radius: 12px;
  background: rgba(120, 220, 130, 0.06);
}
.settings-slider-row.muted {
  border-color: rgba(200, 90, 90, 0.45);
  background: rgba(200, 90, 90, 0.07);
}
.settings-slider-row .toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #cfe;
}
.settings-slider-row.muted .toggle-icon { color: #c88; }
.settings-slider-row .toggle-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #cfe;
  font-weight: 600;
}
.settings-vol-value {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
  color: #afe6b0;
}
.settings-slider-row.muted .settings-vol-value { color: #d99; }

/* Range input — full-width track + a tall, touch-friendly thumb. */
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;            /* tall hit zone for touch */
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.settings-slider:focus { outline: none; }
.settings-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(120, 220, 130, 0.85) var(--fill, 60%),
    rgba(140, 150, 165, 0.25) var(--fill, 60%));
}
.settings-slider-row.muted .settings-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    rgba(200, 90, 90, 0.70) var(--fill, 0%),
    rgba(140, 150, 165, 0.25) var(--fill, 0%));
}
.settings-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(140, 150, 165, 0.25);
}
.settings-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(120, 220, 130, 0.85);
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;        /* centre the 22px thumb on the 6px track */
  border-radius: 50%;
  background: #afe6b0;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.settings-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #afe6b0;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.settings-slider-row.muted .settings-slider::-webkit-slider-thumb { background: #d08a8a; }
.settings-slider-row.muted .settings-slider::-moz-range-thumb { background: #d08a8a; }

/* Polish 8 — battle minimap upgrade. Capitals get a ring outline so
   they read as substantial vs small craft; player blip pulses; the
   viewport gets a subtle grid background so positions register
   against the playfield. */
.minimap-viewport {
  background:
    linear-gradient(0deg, rgba(92, 200, 255, 0.06) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(92, 200, 255, 0.06) 1px, transparent 1px) 0 0 / 20px 20px,
    rgba(4, 8, 16, 0.85);
}
/* Capital classes get a 1px ring outline so they read as substantial
   pieces of the battlefield, not just slightly-bigger dots. */
.dot-size-cruiser,
.dot-size-battleship,
.dot-size-carrier,
.dot-size-station {
  box-shadow: 0 0 0 1px currentColor;
  color: rgba(255, 255, 255, 0.45);
}
.dot-blue.dot-size-cruiser,
.dot-blue.dot-size-battleship,
.dot-blue.dot-size-carrier,
.dot-blue.dot-size-station {
  color: rgba(92, 200, 255, 0.85);
}
.dot-red.dot-size-cruiser,
.dot-red.dot-size-battleship,
.dot-red.dot-size-carrier,
.dot-red.dot-size-station {
  color: rgba(255, 96, 96, 0.85);
}
/* Carrier + station get an additional outer halo to feel "big". */
.dot-size-carrier,
.dot-size-station {
  box-shadow:
    0 0 0 1px currentColor,
    0 0 6px 1px currentColor;
}
/* Player dot — gentle pulse so it stays the eye anchor on the map. */
.dot-player {
  animation: minimap-player-pulse 1.4s ease-in-out infinite;
}
@keyframes minimap-player-pulse {
  0%, 100% { box-shadow: 0 0 4px #fff, 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 0 6px #fff, 0 0 0 4px rgba(255,255,255,0.0); }
}

/* Polish 9 — promotion overlay rank-reveal animation. The insignia
   scales up from 0 with a soft glow, while rays fan out from behind
   it on a separate keyframe. Re-triggers per rank change via the
   `revealing` class toggle in _syncPromotion. */
.promotion-insignia-stage {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 18px;
}
.promotion-insignia-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 218, 130, 0.35) 0%, transparent 55%),
    conic-gradient(from 0deg,
      rgba(255, 218, 130, 0.0) 0deg,   rgba(255, 218, 130, 0.4) 12deg,
      rgba(255, 218, 130, 0.0) 24deg,  rgba(255, 218, 130, 0.4) 36deg,
      rgba(255, 218, 130, 0.0) 48deg,  rgba(255, 218, 130, 0.4) 60deg,
      rgba(255, 218, 130, 0.0) 72deg,  rgba(255, 218, 130, 0.4) 84deg,
      rgba(255, 218, 130, 0.0) 96deg,  rgba(255, 218, 130, 0.4) 108deg,
      rgba(255, 218, 130, 0.0) 120deg);
  mask-image: radial-gradient(circle at center, white 25%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}
.promotion-insignia {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2c4670 0%, #122036 100%);
  border: 2px solid rgba(255, 218, 130, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd680;
  box-shadow: 0 0 24px rgba(255, 218, 130, 0.35), inset 0 0 12px rgba(255, 218, 130, 0.18);
  opacity: 0;
  transform: scale(0.4) rotate(-12deg);
}
.promotion-insignia svg {
  width: 56px;
  height: 56px;
}
/* Reveal — kicks off when .revealing is applied. The rays spin behind
   the insignia; the chip scales up with a bounce + glow flash. */
.promotion-insignia.revealing {
  animation: rank-insignia-reveal 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.promotion-insignia.revealing ~ .promotion-insignia-rays,
.promotion-insignia-stage .promotion-insignia.revealing + .promotion-insignia-rays {
  /* Sibling-selector won't reach behind in this DOM order — use a
     wrapper-state class on the stage instead. */
}
.promotion-insignia.revealing {
  /* Combined reveal: bounce-scale + glow flash. */
  animation: rank-insignia-reveal 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.promotion-insignia-stage:has(.promotion-insignia.revealing) .promotion-insignia-rays {
  animation: rank-rays-spin 1.5s ease-out forwards;
}
@keyframes rank-insignia-reveal {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(2deg); box-shadow: 0 0 48px rgba(255, 218, 130, 0.8), inset 0 0 18px rgba(255, 218, 130, 0.5); }
  100% { opacity: 1; transform: scale(1.0)  rotate(0deg);  box-shadow: 0 0 24px rgba(255, 218, 130, 0.35), inset 0 0 12px rgba(255, 218, 130, 0.18); }
}
@keyframes rank-rays-spin {
  0%   { opacity: 0; transform: rotate(0deg)   scale(0.4); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(180deg) scale(2.0); }
}

/* Match-over VICTOR / KIA stamp animation when a Frontier run ends.
   Triggered by the .runend-stamp class added by _syncMatchOver. */
.matchover-title.runend-stamp {
  animation: runend-stamp 0.6s cubic-bezier(0.18, 1.4, 0.42, 1.05) forwards;
}
@keyframes runend-stamp {
  0%   { opacity: 0; transform: scale(2.4) rotate(-8deg); letter-spacing: 0.30em; }
  60%  { opacity: 1; transform: scale(0.95) rotate(2deg);  letter-spacing: 0.20em; }
  100% { opacity: 1; transform: scale(1.0)  rotate(0deg);  letter-spacing: 0.18em; }
}

/* Polish — BOOST button charge state + active visual.
   Cooldown overlay shares the missile button's conic-gradient
   pattern (--cooldown-angle CSS var). Active class lights the
   button up bright when the player is actively boosting. */
.boost-btn .btn-cooldown {
  /* Inherit base .btn-cooldown styles; just need to declare it
     positioned correctly. Inherited via tag selector below. */
}
.boost-btn.boost-empty {
  opacity: 0.55;
}
.boost-btn.pressed {
  background: rgba(124, 220, 255, 0.30);
  box-shadow: 0 0 18px rgba(124, 220, 255, 0.55);
}
.boost-btn.pressed .btn-icon {
  color: #cff;
  filter: drop-shadow(0 0 4px rgba(124, 220, 255, 0.8));
}

/* Frontier KIA respawn panel — when the survival roll fails, the panel
   stays up but reads "KIA — CAREER ENDED" instead of a respawn timer.
   Red tint distinguishes it from the standard reinforcements wait. */
.respawn-panel.kia {
  background: rgba(60, 12, 12, 0.88);
  border-color: rgba(240, 110, 110, 0.65);
  color: #f3b0b0;
}
.respawn-panel.kia .respawn-label {
  color: #f3b0b0;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(240, 110, 110, 0.45);
}

/* Battle Plan — pre-flight orders screen. Mobile-first column layout
   mirroring the Shipyard chrome (header / scrollable body / sticky
   footer with launch button). */
.menu-screen.menu-battleplan {
  flex-direction: column !important;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: linear-gradient(180deg, #04080f 0%, #0a1224 100%);
  width: 100%;
  max-width: 100%;
  /* Bind the screen to the (fixed, inset:0) menu-root's viewport height so
     the column lays out as header + scrolling body + footer. Without a
     definite height the screen grows to its full content height, overflows
     the vertically-centred menu-root (clipping the top/bottom with no
     scroll), and .battleplan-body's flex:1 never gets a bounded parent to
     scroll within. Using 100% (not 100vh) avoids the iOS toolbar gap. */
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
.battleplan-header,
.fleetplan-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #1f2c44;
  background: #060c18;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.battleplan-back {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid #2c4670;
  border-radius: 8px;
  color: #cfe;
  font-size: 20px;
  cursor: pointer;
}
.battleplan-header h2,
.fleetplan-header h2 {
  margin: 0;
  flex: 1;
  font-size: 15px;
  letter-spacing: 0.18em;
  color: #cfe;
}
.battleplan-node-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #fc8;
  padding: 4px 8px;
  border: 1px solid #c84;
  border-radius: 4px;
}
.battleplan-body {
  flex: 1;
  /* min-height:0 lets this flex child shrink below its content height so
     overflow-y can actually engage — without it the body refuses to shrink,
     pushes the screen past the viewport, and nothing scrolls (flexbox trap). */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: 100px;
}
.battleplan-section {
  margin-bottom: 18px;
}
.battleplan-section-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #7df;
  margin-bottom: 8px;
}

/* Enemy roster */
.battleplan-enemy {
  background: rgba(60, 12, 12, 0.40);
  border: 1px solid rgba(240, 110, 110, 0.40);
  border-radius: 10px;
  padding: 12px;
}
.bp-enemy-faction {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: 4px;
}
.bp-enemy-boss {
  font-size: 16px;
  font-weight: 700;
  color: #f3b0b0;
  margin-bottom: 4px;
}
.bp-enemy-boss-desc {
  font-size: 12px;
  color: #d9aeae;
  font-style: italic;
  margin-bottom: 8px;
}
.bp-enemy-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.bp-enemy-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(8, 14, 24, 0.6);
  border: 1px solid rgba(240, 110, 110, 0.30);
  border-radius: 6px;
  min-width: 44px;
}
.bp-enemy-icon {
  color: #f3b0b0;
}
.bp-enemy-count {
  font-size: 13px;
  font-weight: 700;
  color: #fed;
}

/* Capital + wing rows */
.bp-cap-row, .bp-wing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0a1424;
  border: 1px solid #1f2c44;
  border-radius: 8px;
  margin-bottom: 6px;
}
.bp-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #5cf;
  flex-shrink: 0;
}
.bp-cap-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bp-cap-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-cap-captain {
  font-size: 10px;
  color: #9bd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-cap-postures {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.bp-posture-chip {
  padding: 5px 9px;
  background: transparent;
  border: 1px solid #2c4670;
  border-radius: 4px;
  color: #9bd;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.12s;
}
.bp-posture-chip.active {
  background: #1c3f5c;
  border-color: #5cf;
  color: #cff;
}

.bp-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #9bd;
  border: 1px dashed rgba(124, 220, 255, 0.30);
  border-radius: 8px;
}

/* Multi-wing: section header + add button + per-wing controls */
.bp-wings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 6px;
}
.bp-wings-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #9bd;
}
.bp-add-wing {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #2c4670;
  border-radius: 4px;
  color: #5cf;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.bp-add-wing:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bp-wing-row {
  flex-wrap: wrap;
}
.bp-wing-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.bp-wing-cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.bp-wing-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 2px;
  padding: 4px 6px;
  background: rgba(0, 8, 24, 0.6);
  border-radius: 4px;
}
.bp-wing-sub-empty {
  padding: 4px 8px;
  background: transparent;
  font-size: 10px;
  color: #9bd;
  font-style: italic;
}
.bp-wing-sub-chip {
  padding: 3px 7px;
  background: transparent;
  border: 1px solid #1f3050;
  border-radius: 3px;
  color: #9bd;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.bp-wing-sub-chip.active {
  background: #1c3f5c;
  border-color: #5cf;
  color: #cff;
}
.bp-wing-count-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: #0a1424;
  border: 1px solid #2c4670;
  border-radius: 3px;
  color: #5cf;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bp-wing-count-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bp-wing-commander {
  font-size: 11px;
  color: #fda;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
/* Grudge warning — Marked enemy faction throws heavier resistance. */
.bp-grudge {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffb0b0;
  background: rgba(120, 30, 30, 0.35);
  border: 1px solid #6a2828;
  border-radius: 6px;
  text-align: center;
}
/* Allied reinforcements — friendly factions sending ships to your side. */
.bp-reinf {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(20, 48, 30, 0.45);
  border: 1px solid #2f6a3f;
  border-radius: 6px;
}
.bp-reinf-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #9be8a8;
  margin-bottom: 5px;
}
.bp-reinf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  padding: 2px 0;
}
.bp-reinf-faction { color: #cfe; font-weight: 600; }
.bp-reinf-standing { color: #7fbf8f; font-weight: 400; font-size: 10px; }
.bp-reinf-ships { color: #afe6b0; white-space: nowrap; }

/* Captured-ship prize styling — amber-tinted row + tag. */
.bp-cap-captured {
  border-color: #6a5320;
  background: linear-gradient(180deg, rgba(40, 30, 8, 0.55), rgba(20, 16, 6, 0.4));
}
.bp-captured-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a1206;
  background: #d9a23a;
  border-radius: 3px;
  vertical-align: middle;
}
.bp-wing-trait {
  color: #9bd;
  font-weight: 400;
  font-style: italic;
}
.bp-wing-count {
  display: inline-block;
  min-width: 60px;
  text-align: center;
  margin: 0 4px;
}
.bp-wing-remove {
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid #4a2030;
  border-radius: 3px;
  color: #c66;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}
.bp-wing-remove:hover { background: #2a0c14; }

.battleplan-footer {
  position: sticky;
  bottom: 0;
  padding: 12px 16px env(safe-area-inset-bottom);
  background: #060c18;
  border-top: 1px solid #1f2c44;
  z-index: 2;
}
.battleplan-launch-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(180deg, #c84 0%, #a62 100%);
  border: 1px solid #fc8;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.battleplan-launch-btn:active { transform: scale(0.985); }

/* --- Frontier hub (NEW War-based Frontier — FRONTIER_FUTURE.md) ------- */
/* Column screen bound to the menu-root viewport (same flex trap as
   battleplan): header + scrolling body + sticky footer. Republic amber. */
.menu-screen.menu-frontier {
  flex-direction: column !important;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: linear-gradient(180deg, #0b0703 0%, #161009 100%);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  position: relative; /* anchors the absolute .fh-editor-host bottom sheet */
}
.frontier-header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Safe-area top inset so the sticky header clears the notch / status bar. */
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  border-bottom: 1px solid #3a2a12;
  background: #0a0703;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.frontier-header h2 {
  margin: 0;
  flex: 1;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #fc8;
}
.frontier-career {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 120px;
}
.frontier-career .fh-rank { font-size: 12px; color: #fed; font-weight: 700; letter-spacing: 0.08em; }
.frontier-career .fh-tier { color: #c95; font-weight: 400; }
.frontier-career .fh-xpbar {
  width: 110px; height: 5px; background: #2a1d0c; border-radius: 3px; overflow: hidden;
}
.frontier-career .fh-xpfill { height: 100%; background: linear-gradient(90deg, #c84, #fd9); }
.frontier-career .fh-credits { font-size: 11px; color: #fd9; }
.frontier-career .fh-credits .cr { color: #a87; font-size: 9px; }

.frontier-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: 110px;
}
.fh-war-select { display: flex; gap: 10px; margin-bottom: 16px; }
.fh-war-card {
  flex: 1;
  text-align: left;
  padding: 12px;
  background: #160f06;
  border: 1px solid #3a2a12;
  border-radius: 10px;
  color: #fed;
  cursor: pointer;
}
.fh-war-card.active { border-color: #fc8; background: #241606; box-shadow: 0 0 0 1px #c84 inset; }
.fh-war-card .fh-war-name { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.fh-war-card .fh-war-enemy { font-size: 10px; color: #c95; margin-top: 3px; letter-spacing: 0.08em; }
.fh-war-card .fh-war-prog { font-size: 10px; color: #9a7; margin-top: 6px; }

.fh-war-pitch { font-size: 12px; color: #cdb; line-height: 1.5; margin-bottom: 8px; }
.fh-war-geo { font-size: 10px; color: #a87; letter-spacing: 0.04em; margin-bottom: 14px; }
.fh-section-title {
  font-size: 11px; letter-spacing: 0.18em; color: #fc8;
  margin: 14px 0 8px; border-bottom: 1px solid #2a1d0c; padding-bottom: 5px;
}
.fh-mission-list { display: flex; flex-direction: column; gap: 8px; }
.fh-mission {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 10px 12px; background: #130d05; border: 1px solid #2e2210;
  border-radius: 8px; color: #fed; cursor: pointer; width: 100%;
}
.fh-mission.selected { border-color: #fd9; background: #241606; box-shadow: 0 0 0 1px #c84 inset; }
.fh-mission.fh-locked { opacity: 0.45; cursor: not-allowed; }
.fh-mission.fh-status-next { border-color: #6a4; }
.fh-mission-badge { font-size: 14px; line-height: 1.4; color: #fc8; flex-shrink: 0; }
.fh-mission.fh-status-next .fh-mission-badge { color: #8e6; }
.fh-mission-no { font-size: 10px; color: #c95; flex-shrink: 0; width: 32px; line-height: 1.4; letter-spacing: 0.06em; }
.fh-mission-text { display: flex; flex-direction: column; gap: 2px; }
.fh-mission-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.fh-mission-sum { font-size: 10px; color: #a98; line-height: 1.4; }

.fh-pilot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-pilot-chip {
  padding: 8px 14px; background: #160f06; border: 1px solid #3a2a12;
  border-radius: 8px; color: #fed; font-size: 11px; letter-spacing: 0.08em; cursor: pointer;
}
.fh-pilot-chip.active { border-color: #fc8; background: #241606; color: #fff; }
.fh-cmd-chip { color: #8cf; border-color: #2c4670; letter-spacing: 0.1em; }
.fh-cmd-chip.active { color: #fff; border-color: #8cf; background: #0e2238; }

.fh-stat-summary { float: right; font-weight: 400; letter-spacing: 0; }
.fh-stat { color: #8e6; font-size: 10px; margin-left: 8px; }
.fh-loadout { display: flex; flex-direction: column; gap: 6px; }
.fh-lo-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 4px 10px; align-items: baseline;
  padding: 8px 10px; background: #130d05; border: 1px solid #2e2210; border-radius: 8px;
  width: 100%; text-align: left; cursor: pointer; color: #fed;
}
.fh-lo-row:active { transform: scale(0.992); }
.fh-lo-empty { opacity: 0.6; }
.fh-lo-slot { font-size: 10px; letter-spacing: 0.1em; color: #c95; }
.fh-lo-mod { font-size: 12px; font-weight: 700; }
.fh-lo-edit { font-size: 12px; color: #a87; }
.fh-lo-affixes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.fh-aff { font-size: 10px; color: #9c8; }
.fh-aff-future { color: #76808a; }
.fh-uniq { width: 100%; font-size: 10px; color: #f0902c; margin-top: 2px; }
.fh-stash-bar { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fh-shop-btn {
  padding: 9px 14px; background: #1c1409; border: 1px solid #c84; border-radius: 8px;
  color: #fc8; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer;
}
.fh-shop-btn:active { transform: scale(0.99); }
.fh-stash-line { font-size: 11px; letter-spacing: 0.1em; color: #a87; }
.fh-shop-tag { font-size: 9px; letter-spacing: 0.08em; color: #a87; text-transform: uppercase; }
.fh-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fh-citations-btn { color: #ffd680; border-color: #5a4a1a; }
.fh-news-btn { color: #8cf; border-color: #2c4670; }
.fh-chests-btn { color: #d9a8ff; border-color: #5a3a78; }

/* Premium caches sheet */
.fh-reveal { padding: 12px; margin-bottom: 10px; background: #1a1030; border: 1px solid #7a4ec0; border-radius: 10px; text-align: center; }
.fh-reveal-tag { font-size: 9px; letter-spacing: 0.2em; color: #c9a8ff; }
.fh-reveal-name { font-size: 15px; font-weight: 700; margin: 3px 0; }
.fh-cand-sub { font-size: 9px; letter-spacing: 0.06em; color: #a87; text-transform: uppercase; }
.fh-chest { padding: 10px 12px; background: #160f06; border: 1px solid #2e2210; border-radius: 8px; margin-bottom: 8px; }
.fh-chest-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fh-chest-name { font-size: 13px; font-weight: 700; color: #e6d4ff; letter-spacing: 0.04em; }
.fh-chest-top .fh-btn { flex: 0 0 auto; min-width: 120px; }
.fh-chest-odds { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; }
.fh-odd { font-size: 10px; }
.fh-chest-pity { margin-top: 8px; font-size: 11px; color: #c9a8ff; letter-spacing: 0.04em; }
.fh-chest-note { margin-top: 6px; font-size: 9.5px; color: #8a7da0; line-height: 1.5; }

/* War-state ribbon (chapter spine + completion) */
.fh-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; padding: 8px 12px; background: #130d05; border: 1px solid #2e2210; border-radius: 8px; }
.fh-rib-spine { display: flex; align-items: center; }
.fh-rib-node { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 1px solid #3a2a12; color: #a87; background: #1a1206; }
.fh-rib-done { background: #2a3a12; border-color: #6a4; color: #cf9; }
.fh-rib-next { border-color: #fc8; color: #fc8; box-shadow: 0 0 0 1px #c84 inset; }
.fh-rib-link { width: 14px; height: 2px; background: #3a2a12; }
.fh-rib-stat { font-size: 11px; letter-spacing: 0.08em; color: #fd9; white-space: nowrap; display: block; text-align: center; margin: 10px 0 4px; }

/* ── Warp-route progression map (campaign hub) ──────────────────────────
   Large thumb-friendly chapter nodes alternate left/right off a central
   charged warp-lane; sorties hang off as spurs below. Pure DOM/CSS; motion
   is keyframe-based so it plays on the sync's innerHTML rebuild. Reuses the
   Republic-amber palette (#fc8/#c84/#fd9/#c95, sage #6a4/#cf9 for cleared). */
.fh-warpmap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 4px;
  padding: 18px 4px 10px;
  border-radius: 12px;
  /* Faint amber starfield backdrop — no asset, just layered radial dots. */
  background:
    radial-gradient(1.5px 1.5px at 18% 10%, rgba(255, 221, 153, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 72% 26%, rgba(255, 204, 136, 0.40), transparent),
    radial-gradient(1px 1px at 42% 54%, rgba(255, 221, 153, 0.30), transparent),
    radial-gradient(1px 1px at 86% 78%, rgba(255, 204, 136, 0.30), transparent),
    radial-gradient(1.5px 1.5px at 30% 88%, rgba(255, 221, 153, 0.35), transparent),
    #0d0904;
  border: 1px solid #2e2210;
}
/* Central warp-lane + its charged (cleared-so-far) fill. */
.fh-warpmap-lane {
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 14px;
  width: 4px;
  margin-left: -2px;
  background: #2e2210;
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
.fh-warpmap-charge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--fh-charge, 0%);
  background: linear-gradient(180deg, #fd9, #c84);
  box-shadow: 0 0 10px #e9a;
  transition: height 0.5s ease;
}
.fh-node-slot {
  position: relative;
  z-index: 1;
  display: flex;
  width: calc(50% - 4px);
}
.fh-side-left { align-self: flex-start; justify-content: flex-end; }
.fh-side-right { align-self: flex-end; justify-content: flex-start; }
.fh-node {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 8px;
  background: #160f06;
  border: 1px solid #3a2a12;
  border-radius: 12px;
  color: #fed;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fh-side-left .fh-node { flex-direction: row-reverse; text-align: right; } /* disc toward the lane */
.fh-side-left .fh-node-cap { align-items: flex-end; }
.fh-node-disc {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid #3a2a12;
  background: #1a1206;
  color: #a87;
}
.fh-node-cap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fh-node-no { font-size: 9px; letter-spacing: 0.1em; color: #c95; }
.fh-node-title { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
.fh-node-sum {
  font-size: 10px; color: #a98; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* States */
.fh-node-done .fh-node-disc { background: #2a3a12; border-color: #6a4; color: #cf9; }
.fh-node-next .fh-node-disc {
  border-color: #fc8; color: #fc8; background: #241606;
  animation: fh-next-pulse 1.6s ease-in-out infinite;
}
.fh-node-locked { opacity: 0.5; cursor: not-allowed; }
.fh-node-locked .fh-node-disc { color: #75614a; }
.fh-node-boss .fh-node-disc { flex-basis: 60px; width: 60px; height: 60px; font-size: 26px; border-color: #e55; color: #f99; }
.fh-node-boss.fh-node-next .fh-node-disc { animation: fh-boss-pulse 1.6s ease-in-out infinite; }
.fh-node.selected { border-color: #fd9; background: #241606; box-shadow: 0 0 0 1px #c84 inset; animation: fh-node-pop 0.25s ease; }
.fh-just-cleared .fh-node-disc { animation: fh-cleared 0.8s ease; }
.fh-warpmap-charge.fh-link-charging { animation: fh-link-charge 1s ease; }

/* Side-sortie spurs */
.fh-spur-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-spur {
  display: flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 12px;
  background: #130d05; border: 1px solid #2e2210; border-radius: 20px;
  color: #fed; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.fh-spur.selected { border-color: #fd9; background: #241606; box-shadow: 0 0 0 1px #c84 inset; }
.fh-spur-badge { color: #c95; font-size: 11px; }
.fh-spur-name { font-size: 11px; letter-spacing: 0.04em; }

@keyframes fh-next-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #c84 inset, 0 0 6px #c84; }
  50%      { box-shadow: 0 0 0 2px #fd9 inset, 0 0 16px #fd9; }
}
@keyframes fh-boss-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #b33 inset, 0 0 8px #e55; }
  50%      { box-shadow: 0 0 0 2px #f99 inset, 0 0 20px #f55; }
}
@keyframes fh-node-pop {
  0%   { transform: scale(0.96); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes fh-cleared {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.25); box-shadow: 0 0 18px #cf9; }
  100% { transform: scale(1); }
}
@keyframes fh-link-charge {
  0%   { box-shadow: 0 0 4px #c84; }
  50%  { box-shadow: 0 0 22px #fd9; }
  100% { box-shadow: 0 0 10px #e9a; }
}
@media (prefers-reduced-motion: reduce) {
  .fh-node-next .fh-node-disc, .fh-node-boss.fh-node-next .fh-node-disc,
  .fh-node.selected, .fh-just-cleared .fh-node-disc, .fh-warpmap-charge.fh-link-charging {
    animation: none;
  }
}

/* Newsreel feed (bottom sheet) */
.fh-news-item { padding: 10px 12px; background: #0c1322; border: 1px solid #1f2c44; border-radius: 8px; margin-bottom: 8px; }
.fh-news-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #bdf; letter-spacing: 0.04em; }
.fh-news-who { font-size: 9px; font-weight: 400; color: #7a90b0; align-self: center; white-space: nowrap; }
.fh-news-body { font-size: 11px; color: #b8c6da; line-height: 1.5; margin-top: 5px; }
.fh-news-locked { font-size: 10px; color: #6a7da0; text-align: center; padding: 8px 4px; }

/* Result-screen incoming transmission */
.spoils-txs { display: flex; flex-direction: column; gap: 8px; }
.spoils-tx { padding: 9px 11px; background: #0c1322; border: 1px solid #1f2c44; border-radius: 8px; }
.spoils-tx-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #bdf; }
.spoils-tx-who { font-size: 9px; font-weight: 400; color: #7a90b0; align-self: center; }
.spoils-tx-body { font-size: 11px; color: #b8c6da; line-height: 1.5; margin-top: 4px; }

/* Citations / decorations wall (bottom sheet, reuses fh-editor-* shell) */
.fh-cite { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; background: #130d05; border: 1px solid #2e2210; border-radius: 8px; opacity: 0.6; }
.fh-cite.earned { opacity: 1; border-color: #5a4a1a; background: #16140a; }
.fh-cite-medal { font-size: 15px; color: #4a4636; flex-shrink: 0; line-height: 1.3; }
.fh-cite.earned .fh-cite-medal { color: #ffd680; }
.fh-cite-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fh-cite-name { font-size: 12px; font-weight: 700; color: #fed; }
.fh-cite.earned .fh-cite-name { color: #ffe7a8; }
.fh-cite-desc { font-size: 10px; color: #a87; }
.fh-cite-badge { font-size: 9px; letter-spacing: 0.08em; color: #ffd680; border: 1px solid #5a4a1a; border-radius: 4px; padding: 2px 5px; align-self: center; }

/* Loadout slot editor — bottom sheet over the hub */
.fh-editor-host { position: absolute; inset: 0; z-index: 5; }
.fh-editor-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.fh-editor-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 72%; display: flex; flex-direction: column;
  background: #100a04; border-top: 1.5px solid #c84;
  border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
}
.fh-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #2e2210; flex-shrink: 0;
  font-size: 12px; letter-spacing: 0.16em; color: #fc8;
}
.fh-editor-close {
  width: 30px; height: 30px; background: transparent; border: 1px solid #3a2a12;
  border-radius: 8px; color: #fed; font-size: 14px; cursor: pointer;
}
.fh-editor-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.fh-editor-empty { font-size: 12px; color: #a87; padding: 16px 4px; text-align: center; }
.fh-cand { padding: 10px 12px; background: #160f06; border: 1px solid #2e2210; border-radius: 8px; }
.fh-cand.equipped { border-color: #6a4; background: #16170a; }
.fh-cand-top { display: flex; align-items: center; justify-content: space-between; }
.fh-cand-name { font-size: 12px; font-weight: 700; }
.fh-fav { background: transparent; border: none; color: #5a5042; font-size: 16px; cursor: pointer; padding: 0 4px; }
.fh-fav.on { color: #fd9; }
.fh-cand-affixes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0; }
.fh-cand-actions { display: flex; gap: 8px; margin-top: 6px; }
.fh-btn {
  flex: 1; padding: 9px; border-radius: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; cursor: pointer; background: #1c1409; border: 1px solid #3a2a12; color: #fed;
}
.fh-btn-go { background: linear-gradient(180deg, #c84 0%, #a62 100%); border-color: #fc8; color: #fff; }
.fh-btn-danger { background: #2a1410; border-color: #843; color: #f99; }

.frontier-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px env(safe-area-inset-bottom);
  background: #0a0703;
  border-top: 1px solid #3a2a12;
  z-index: 2;
}
.frontier-launch-hint { flex: 1; font-size: 11px; color: #a98; letter-spacing: 0.06em; }
.frontier-footer .battleplan-launch-btn { width: auto; min-width: 160px; }
.battleplan-launch-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Play-hub beta card accent for FRONTIER: WARS */
.playhub-card-wars .playhub-card-icon { color: #fc8; }

/* Frontier post-battle WAR SPOILS block (rewards + loot drops) */
.spoils-block { margin: 10px 0 6px; }
.spoils-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.spoils-chip {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #fed;
  padding: 5px 10px; background: #1c1409; border: 1px solid #c84; border-radius: 7px;
}
.spoils-chip.spoils-promo { background: #16170a; border-color: #8e6; color: #cf9; }
.spoils-drops-title { font-size: 10px; letter-spacing: 0.16em; color: #c95; margin: 8px 0 6px; }
.spoils-drops { display: flex; flex-direction: column; gap: 8px; }
.spoils-drop { padding: 9px 11px; background: #130d05; border: 1px solid #2e2210; border-radius: 8px; }
.spoils-drop-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spoils-drop-name { font-size: 12px; font-weight: 700; }
.spoils-badge { font-size: 9px; letter-spacing: 0.08em; color: #8e6; border: 1px solid #4a5; border-radius: 4px; padding: 2px 5px; }
.spoils-badge.spoils-stashed { color: #a87; border-color: #543; }
.spoils-drop-sub { font-size: 9px; letter-spacing: 0.06em; color: #a87; text-transform: uppercase; margin-top: 2px; }
.spoils-drop-affixes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.spoils-aff { font-size: 10px; color: #9c8; }
.spoils-aff-future { color: #76808a; }
.spoils-uniq { width: 100%; font-size: 10px; color: #f0902c; margin-top: 2px; }
.spoils-nodrops { font-size: 11px; color: #a87; padding: 4px 0; }
.spoils-medals { display: flex; flex-direction: column; gap: 6px; }
.spoils-medal { display: flex; flex-direction: column; padding: 8px 11px; background: #16140a; border: 1px solid #5a4a1a; border-radius: 8px; color: #ffd680; }
.spoils-medal-name { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.spoils-medal-desc { font-size: 10px; color: #b9a96a; margin-top: 2px; }

/* --- Fleet Plan overlay (all non-Frontier modes) --------------------- */
/* Reuses the Battle Plan header/body/footer + bp-* chrome. The screen
   itself needs the explicit column direction (CLAUDE.md flex trap) and a
   cooler blue launch button to distinguish it from Frontier's amber. */
.menu-screen.menu-fleetplan {
  flex-direction: column !important;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: linear-gradient(180deg, #04080f 0%, #0a1224 100%);
  width: 100%;
  max-width: 100%;
  /* Same viewport-height binding as .menu-battleplan so the body scrolls
     (the two screens share the .battleplan-body/header/footer chrome). */
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
.menu-fleetplan .battleplan-node-tag {
  color: #8cf;
  border-color: #4680c8;
}
.menu-fleetplan .battleplan-launch-btn {
  background: linear-gradient(180deg, #2b6da8 0%, #1c4c84 100%);
  border-color: #8cf;
}
.fp-enemy-unknown {
  font-size: 12px;
  color: #8aa;
  line-height: 1.5;
  padding: 4px 2px;
}
/* Command rows (capitals + wings share the same 3-axis layout) */
.fp-classes { display: flex; flex-direction: column; gap: 8px; }
.fp-cmd-row {
  padding: 8px 10px;
  background: rgba(12, 22, 40, 0.7);
  border: 1px solid #1c2c48;
  border-radius: 8px;
  margin-bottom: 8px;
}
.fp-cmd-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.fp-class-name {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #cfe;
  flex: 1;
}
.fp-class-count { font-size: 11px; color: #7f9; }
.fp-wing-count-ctl { display: flex; align-items: center; gap: 4px; }

/* One axis = a label + its chip row */
.fp-order { display: flex; flex-direction: column; gap: 4px; }
.fp-axis {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.fp-axis-lbl {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: #678;
  width: 56px;
  flex-shrink: 0;
}
.fp-sub-axis { padding-left: 60px; }
.fp-sub-empty { font-size: 10px; color: #678; font-style: italic; }
.fp-chip {
  padding: 3px 7px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  background: rgba(20, 32, 54, 0.9);
  border: 1px solid #2a3c5c;
  border-radius: 5px;
  color: #9ab;
  cursor: pointer;
}
.fp-chip.active {
  background: rgba(30, 80, 110, 0.95);
  border-color: rgba(140, 220, 255, 0.85);
  color: #fff;
}
.fp-chip.fp-stance.active {
  background: rgba(40, 110, 150, 0.95);
  border-color: #8df;
}
.fp-chip.fp-sub.active {
  background: rgba(150, 90, 30, 0.9);
  border-color: #fc8;
}
.fp-section-missile { margin-left: auto; }

/* ---- Dev Overlay (PR-0b of DEV_FEATURES_PLAN.md) ----
   Top-right panel; only visible when isDev() + the overlay is open. Click
   pass-through is blocked inside the panel via pointer-events; the rest
   of the canvas still routes to the game. */
.dev-overlay {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 40; /* over BattleHUD chrome but under modal menus */
  width: 320px;
  padding: 10px 12px 12px;
  background: rgba(10, 16, 28, 0.92);
  border: 1px solid rgba(120, 200, 255, 0.55);
  color: #cde;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: auto;
  user-select: none;
}
.dev-overlay.hidden { display: none; }
.dev-overlay-header {
  display: flex; justify-content: space-between; align-items: center;
  color: #9cf; letter-spacing: 1px; font-weight: bold;
  margin-bottom: 6px;
}
.dev-overlay .dev-x {
  background: none; border: none; color: #9cf; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 6px;
}
.dev-overlay .dev-x:hover { color: #fff; }
.dev-overlay .dev-row {
  display: flex; gap: 6px; align-items: center; margin: 4px 0;
}
.dev-overlay .dev-btn {
  background: rgba(30, 50, 80, 0.9);
  border: 1px solid rgba(120, 180, 220, 0.4);
  color: #cde; padding: 4px 8px; cursor: pointer;
  font: inherit; letter-spacing: 0.5px;
}
.dev-overlay .dev-btn:hover:not(:disabled) { background: rgba(50, 80, 120, 0.95); }
.dev-overlay .dev-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dev-overlay .dev-btn.small { padding: 3px 6px; min-width: 22px; }
.dev-overlay .dev-btn.active {
  background: rgba(120, 90, 30, 0.95);
  border-color: rgba(255, 200, 100, 0.7);
  color: #fec;
}
.dev-overlay .dev-pill {
  background: rgba(20, 32, 54, 0.95); padding: 3px 8px;
  border: 1px solid rgba(120, 180, 220, 0.35);
  min-width: 38px; text-align: center;
}
.dev-overlay .dev-select {
  background: rgba(20, 32, 54, 0.95); color: #cde; padding: 3px 5px;
  border: 1px solid rgba(120, 180, 220, 0.35);
  font: inherit;
}
.dev-overlay .dev-label {
  color: #9cf; letter-spacing: 1px; min-width: 30px;
}
.dev-overlay .dev-sel-text {
  flex: 1; color: #cde; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-overlay .dev-hint {
  margin-top: 6px; color: #6a8; opacity: 0.8;
}

/* ---- Battle Designer (PR-1b of DEV_FEATURES_PLAN.md) ----
   Fullscreen authoring overlay. z-index above the dev overlay (40) so
   tapping BATTLE DESIGNER from there pops on top. Pointer events confined
   to the panel; everything else is blocked while open. */
.battle-designer {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(4, 8, 16, 0.92);
  display: flex; align-items: center; justify-content: center;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #cde;
  overflow: auto;
}
.battle-designer.hidden { display: none; }
.bd-panel {
  width: min(96vw, 1100px);
  max-height: 92vh;
  background: rgba(8, 14, 26, 0.96);
  border: 1px solid rgba(120, 200, 255, 0.55);
  display: flex; flex-direction: column;
  overflow: auto;
}
.bd-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(20, 32, 54, 0.6);
}
.bd-title { color: #9cf; letter-spacing: 2px; font-weight: bold; font-size: 14px; }
.bd-x {
  background: none; border: none; color: #9cf;
  font-size: 16px; cursor: pointer; padding: 2px 8px;
}
.bd-x:hover { color: #fff; }

.bd-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 100px 130px;
  gap: 10px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.bd-field { display: flex; flex-direction: column; gap: 4px; }
.bd-field span {
  color: #9cf; letter-spacing: 1px; font-size: 10px;
}
.bd-field input, .bd-field select {
  background: rgba(20, 32, 54, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.35);
  color: #cde;
  padding: 5px 7px;
  font: inherit;
}
.bd-field-tight { min-width: 80px; }

.bd-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.bd-side h3 {
  margin: 0 0 8px 0;
  color: #9cf; letter-spacing: 2px; font-size: 11px;
}
.bd-side[data-side="blue"] h3 { color: #7af; }
.bd-side[data-side="red"] h3 { color: #f97; }
.bd-teams-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 8px;
}
.bd-team-card {
  background: rgba(20, 32, 54, 0.6);
  border: 1px solid rgba(120, 180, 220, 0.3);
  padding: 8px;
}
.bd-team-header {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 6px;
}
.bd-team-header select { flex: 1; }
.bd-ships {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 6px;
}
.bd-ship-row {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 1fr 1fr 1fr 24px;
  gap: 4px;
  align-items: center;
}
.bd-ship-row select, .bd-ship-row input {
  background: rgba(15, 24, 40, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.3);
  color: #cde;
  padding: 3px 5px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.bd-count { text-align: center; }

.bd-btn {
  background: rgba(30, 50, 80, 0.9);
  border: 1px solid rgba(120, 180, 220, 0.4);
  color: #cde; padding: 5px 10px; cursor: pointer;
  font: inherit; letter-spacing: 0.5px;
}
.bd-btn:hover { background: rgba(50, 80, 120, 0.95); }
.bd-btn-primary {
  background: rgba(30, 110, 70, 0.95);
  border-color: rgba(140, 220, 170, 0.7);
  color: #efe;
}
.bd-btn-primary:hover { background: rgba(40, 140, 90, 1); }
.bd-team-remove, .bd-ship-remove, .bd-library-del {
  padding: 3px 6px; min-width: 24px;
  background: rgba(80, 30, 30, 0.85);
  border-color: rgba(220, 120, 100, 0.5);
  color: #fcc;
}
.bd-team-remove:hover, .bd-ship-remove:hover, .bd-library-del:hover {
  background: rgba(120, 40, 40, 0.95);
}

.bd-library {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.bd-library h3 {
  margin: 0 0 6px 0;
  color: #9cf; letter-spacing: 2px; font-size: 11px;
}
.bd-library-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 160px; overflow-y: auto;
}
.bd-library-row {
  display: grid;
  grid-template-columns: 1fr 130px 64px 56px 32px;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  background: rgba(20, 32, 54, 0.5);
  border: 1px solid rgba(120, 180, 220, 0.2);
}
.bd-library-name { color: #cde; }
.bd-library-meta { color: #9ab; font-size: 11px; }
.bd-library-empty {
  color: #678; padding: 8px 4px; font-style: italic;
}

.bd-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 14px;
  background: rgba(20, 32, 54, 0.6);
}

.bd-toast {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(20, 60, 40, 0.95);
  border: 1px solid rgba(140, 220, 170, 0.7);
  color: #efe;
  padding: 6px 14px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  letter-spacing: 0.5px;
}
.bd-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.bd-toast.error {
  background: rgba(60, 20, 20, 0.95);
  border-color: rgba(220, 120, 100, 0.7);
  color: #fcc;
}

.bd-fallback-export {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.bd-fallback-panel {
  width: min(90%, 700px);
  background: rgba(8, 14, 26, 0.98);
  border: 1px solid rgba(120, 200, 255, 0.55);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.bd-fallback-title {
  color: #9cf; letter-spacing: 1px; font-weight: bold;
}
.bd-fallback-text {
  width: 100%; height: 280px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(120, 180, 220, 0.3);
  color: #cde;
  font: inherit;
  padding: 8px;
  resize: vertical;
}

/* ---- Ship Designer (PR-2 of DEV_FEATURES_PLAN.md) ----
   Fullscreen authoring overlay; same z-stack tier as Battle Designer
   (50). Three-column body: slots / preview canvas / vs-stock stats. */
.ship-designer {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(4, 8, 16, 0.92);
  display: flex; align-items: center; justify-content: center;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #cde;
  overflow: auto;
}
.ship-designer.hidden { display: none; }
.sd-panel {
  width: min(96vw, 1100px);
  max-height: 92vh;
  background: rgba(8, 14, 26, 0.96);
  border: 1px solid rgba(120, 200, 255, 0.55);
  display: flex; flex-direction: column;
  overflow: auto;
}
.sd-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(20, 32, 54, 0.6);
}
.sd-title { color: #9cf; letter-spacing: 2px; font-weight: bold; font-size: 14px; }
.sd-x {
  background: none; border: none; color: #9cf;
  font-size: 16px; cursor: pointer; padding: 2px 8px;
}
.sd-x:hover { color: #fff; }

.sd-meta {
  display: grid;
  grid-template-columns: 2fr 100px 120px 180px;
  gap: 10px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.sd-field { display: flex; flex-direction: column; gap: 4px; }
.sd-field span:first-child {
  color: #9cf; letter-spacing: 1px; font-size: 10px;
}
.sd-field input, .sd-field select {
  background: rgba(20, 32, 54, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.35);
  color: #cde;
  padding: 5px 7px;
  font: inherit;
}
.sd-field-tight { min-width: 90px; }
#sd-radius-val { color: #9ab; font-size: 10px; }

.sd-body {
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.sd-col h3 {
  margin: 0 0 8px 0;
  color: #9cf; letter-spacing: 2px; font-size: 11px;
}
.sd-slots-list {
  display: flex; flex-direction: column; gap: 5px;
}
.sd-slot-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px;
  align-items: center;
}
.sd-slot-label {
  color: #9ab; font-size: 10px; letter-spacing: 0.5px;
}
.sd-slot-select {
  background: rgba(15, 24, 40, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.3);
  color: #cde;
  padding: 4px 6px;
  font: inherit;
  width: 100%;
}

.sd-preview-col {
  display: flex; flex-direction: column; align-items: center;
}
.sd-preview {
  background: #06090f;
  border: 1px solid rgba(120, 180, 220, 0.3);
}
.sd-preview-hint {
  margin-top: 6px;
  color: #678; font-size: 10px;
}

.sd-stats-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 340px; overflow-y: auto;
}
.sd-stat-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  gap: 6px;
  padding: 3px 6px;
  font-size: 11px;
}
.sd-stat-label { color: #9ab; }
.sd-stat-current { color: #cde; text-align: right; }
.sd-stat-delta { text-align: right; }
.sd-stat-better .sd-stat-delta { color: #9f8; }
.sd-stat-worse .sd-stat-delta { color: #f97; }
.sd-stat-same .sd-stat-delta { color: #678; }
.sd-stats-empty {
  color: #678; padding: 8px 4px; font-style: italic;
}

.sd-library {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.sd-library h3 {
  margin: 0 0 6px 0;
  color: #9cf; letter-spacing: 2px; font-size: 11px;
}
.sd-library-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 140px; overflow-y: auto;
}
.sd-library-row {
  display: grid;
  grid-template-columns: 1fr 130px 64px 56px 32px;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  background: rgba(20, 32, 54, 0.5);
  border: 1px solid rgba(120, 180, 220, 0.2);
}
.sd-library-name { color: #cde; }
.sd-library-meta { color: #9ab; font-size: 11px; }
.sd-library-empty {
  color: #678; padding: 8px 4px; font-style: italic;
}

.sd-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 14px;
  background: rgba(20, 32, 54, 0.6);
}

.sd-btn {
  background: rgba(30, 50, 80, 0.9);
  border: 1px solid rgba(120, 180, 220, 0.4);
  color: #cde; padding: 5px 10px; cursor: pointer;
  font: inherit; letter-spacing: 0.5px;
}
.sd-btn:hover { background: rgba(50, 80, 120, 0.95); }
.sd-btn-primary {
  background: rgba(30, 110, 70, 0.95);
  border-color: rgba(140, 220, 170, 0.7);
  color: #efe;
}
.sd-btn-primary:hover { background: rgba(40, 140, 90, 1); }
.sd-library-del {
  padding: 3px 6px; min-width: 24px;
  background: rgba(80, 30, 30, 0.85);
  border-color: rgba(220, 120, 100, 0.5);
  color: #fcc;
}
.sd-library-del:hover { background: rgba(120, 40, 40, 0.95); }

.sd-toast {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(20, 60, 40, 0.95);
  border: 1px solid rgba(140, 220, 170, 0.7);
  color: #efe;
  padding: 6px 14px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  letter-spacing: 0.5px;
}
.sd-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.sd-toast.error {
  background: rgba(60, 20, 20, 0.95);
  border-color: rgba(220, 120, 100, 0.7);
  color: #fcc;
}

.sd-fallback-export {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.sd-fallback-panel {
  width: min(90%, 700px);
  background: rgba(8, 14, 26, 0.98);
  border: 1px solid rgba(120, 200, 255, 0.55);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.sd-fallback-title {
  color: #9cf; letter-spacing: 1px; font-weight: bold;
}
.sd-fallback-text {
  width: 100%; height: 280px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(120, 180, 220, 0.3);
  color: #cde;
  font: inherit;
  padding: 8px;
  resize: vertical;
}

/* ---- Map Designer (PR-3 of DEV_FEATURES_PLAN.md) ----
   Two-column body: numeric form on the left, click-to-place preview on
   the right. Same z-stack tier as the other designers (50). */
.map-designer {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(4, 8, 16, 0.92);
  display: flex; align-items: center; justify-content: center;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #cde;
  overflow: auto;
}
.map-designer.hidden { display: none; }
.md-panel {
  width: min(96vw, 1100px);
  max-height: 92vh;
  background: rgba(8, 14, 26, 0.96);
  border: 1px solid rgba(120, 200, 255, 0.55);
  display: flex; flex-direction: column;
  overflow: auto;
}
.md-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(20, 32, 54, 0.6);
}
.md-title { color: #9cf; letter-spacing: 2px; font-weight: bold; font-size: 14px; }
.md-x {
  background: none; border: none; color: #9cf;
  font-size: 16px; cursor: pointer; padding: 2px 8px;
}
.md-x:hover { color: #fff; }

.md-meta {
  display: grid;
  grid-template-columns: 2fr 200px 200px;
  gap: 10px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.md-field { display: flex; flex-direction: column; gap: 4px; }
.md-field span:first-child {
  color: #9cf; letter-spacing: 1px; font-size: 10px;
}
.md-field input[type="text"] {
  background: rgba(20, 32, 54, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.35);
  color: #cde;
  padding: 5px 7px;
  font: inherit;
}
.md-field span:last-child {
  color: #9ab; font-size: 10px;
}
.md-field-tight { min-width: 140px; }

.md-body {
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.md-col h3 {
  margin: 0 0 8px 0;
  color: #9cf; letter-spacing: 2px; font-size: 11px;
}
.md-col h3.md-decor-h {
  margin-top: 14px;
}

.md-spawn-row {
  display: grid;
  grid-template-columns: 60px repeat(4, 1fr);
  gap: 4px; align-items: center;
  margin-bottom: 4px;
}
.md-spawn-row label {
  display: flex; align-items: center; gap: 4px;
  color: #9ab; font-size: 10px;
}
.md-spawn-row input {
  width: 100%; box-sizing: border-box;
  background: rgba(15, 24, 40, 0.95);
  border: 1px solid rgba(120, 180, 220, 0.3);
  color: #cde;
  padding: 3px 5px;
  font: inherit;
}
.md-spawn-label {
  color: #9cf; letter-spacing: 1px; font-weight: bold;
}
.md-spawn-blue .md-spawn-label { color: #7af; }
.md-spawn-red .md-spawn-label { color: #f97; }

.md-tool-row {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 8px;
}
.md-tool {
  background: rgba(30, 50, 80, 0.9);
  border: 1px solid rgba(120, 180, 220, 0.4);
  color: #cde;
}
.md-tool.active {
  background: rgba(120, 90, 30, 0.95);
  border-color: rgba(255, 200, 100, 0.7);
  color: #fec;
}

.md-decor-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 180px; overflow-y: auto;
}
.md-decor-row {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 4px; align-items: center;
  background: rgba(20, 32, 54, 0.5);
  border: 1px solid rgba(120, 180, 220, 0.2);
  padding: 3px 6px;
}
.md-decor-meta { color: #cde; font-size: 11px; }
.md-decor-del {
  background: rgba(80, 30, 30, 0.85);
  border-color: rgba(220, 120, 100, 0.5);
  color: #fcc;
  padding: 2px 4px;
}
.md-decor-empty {
  color: #678; padding: 8px 4px; font-style: italic;
}

.md-preview-col {
  display: flex; flex-direction: column; align-items: center;
}
.md-preview {
  background: #06090f;
  border: 1px solid rgba(120, 180, 220, 0.3);
  cursor: crosshair;
}
.md-preview-hint {
  margin-top: 6px;
  color: #678; font-size: 10px;
}

.md-library {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.md-library h3 {
  margin: 0 0 6px 0;
  color: #9cf; letter-spacing: 2px; font-size: 11px;
}
.md-library-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 160px; overflow-y: auto;
}
.md-library-row {
  display: grid;
  grid-template-columns: 1fr 160px 64px 56px 32px;
  gap: 6px; align-items: center;
  background: rgba(20, 32, 54, 0.5);
  border: 1px solid rgba(120, 180, 220, 0.2);
  padding: 4px 6px;
}
.md-library-name { color: #cde; }
.md-library-meta { color: #9ab; font-size: 11px; }
.md-library-load, .md-library-dup { padding: 3px 6px; }
.md-library-del {
  padding: 3px 6px; min-width: 24px;
  background: rgba(80, 30, 30, 0.85);
  border-color: rgba(220, 120, 100, 0.5);
  color: #fcc;
}
.md-library-spacer { display: block; }

.md-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 14px;
  background: rgba(20, 32, 54, 0.6);
}

.md-btn {
  background: rgba(30, 50, 80, 0.9);
  border: 1px solid rgba(120, 180, 220, 0.4);
  color: #cde; padding: 5px 10px; cursor: pointer;
  font: inherit; letter-spacing: 0.5px;
}
.md-btn:hover { background: rgba(50, 80, 120, 0.95); }
.md-btn-primary {
  background: rgba(30, 110, 70, 0.95);
  border-color: rgba(140, 220, 170, 0.7);
  color: #efe;
}
.md-btn-primary:hover { background: rgba(40, 140, 90, 1); }

.md-toast {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(20, 60, 40, 0.95);
  border: 1px solid rgba(140, 220, 170, 0.7);
  color: #efe;
  padding: 6px 14px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  letter-spacing: 0.5px;
}
.md-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.md-toast.error {
  background: rgba(60, 20, 20, 0.95);
  border-color: rgba(220, 120, 100, 0.7);
  color: #fcc;
}

.md-fallback-export {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.md-fallback-panel {
  width: min(90%, 700px);
  background: rgba(8, 14, 26, 0.98);
  border: 1px solid rgba(120, 200, 255, 0.55);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.md-fallback-title { color: #9cf; letter-spacing: 1px; font-weight: bold; }
.md-fallback-text {
  width: 100%; height: 280px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(120, 180, 220, 0.3);
  color: #cde;
  font: inherit;
  padding: 8px;
  resize: vertical;
}

/* ---- Platform Designer (PR-4 of DEV_FEATURES_PLAN.md) ----
   Read-only spec inspector for the built-in PLATFORM_TYPES. Pure grid of
   stat cards; sits on the same z-stack tier as the other designers. */
.platform-designer {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(4, 8, 16, 0.92);
  display: flex; align-items: center; justify-content: center;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #cde;
}
.platform-designer.hidden { display: none; }
.pd-panel {
  width: min(96vw, 900px);
  max-height: 92vh;
  background: rgba(8, 14, 26, 0.96);
  border: 1px solid rgba(120, 200, 255, 0.55);
  display: flex; flex-direction: column;
  overflow: auto;
}
.pd-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(20, 32, 54, 0.6);
}
.pd-title { color: #9cf; letter-spacing: 2px; font-weight: bold; font-size: 14px; }
.pd-x { background: none; border: none; color: #9cf; font-size: 16px; cursor: pointer; padding: 2px 8px; }
.pd-x:hover { color: #fff; }
.pd-body { padding: 14px; }
.pd-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pd-card {
  background: rgba(20, 32, 54, 0.6);
  border: 1px solid rgba(120, 180, 220, 0.3);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.pd-card-header { display: flex; justify-content: space-between; align-items: baseline; }
.pd-card-name { color: #9cf; font-weight: bold; letter-spacing: 1px; }
.pd-card-id { color: #678; font-size: 10px; }
.pd-card-blurb { color: #ace; margin: 0; font-size: 11px; }
.pd-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pd-stat { display: flex; justify-content: space-between; gap: 4px; padding: 2px 4px;
  background: rgba(15, 24, 40, 0.5); }
.pd-stat-label { color: #9ab; font-size: 10px; }
.pd-stat-value { color: #cde; }
.pd-hint {
  margin: 12px 0 0; color: #678; font-size: 11px; font-style: italic;
}

/* ===========================================================================
   Ship Editor — Free-Form Custom Ship Editor (dev-gated).
   Mirrors .ship-designer's fullscreen-overlay pattern. Mobile-first: the panel
   scrolls, the canvas pans/pinches, stat popups float + drag. The panel sets
   explicit flex-direction:column (CLAUDE.md: base flex is row).
   =========================================================================== */
.ship-editor {
  position: fixed; inset: 0;
  z-index: 52;
  background: rgba(4, 8, 16, 0.94);
  display: flex; align-items: flex-start; justify-content: center;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #cde;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.ship-editor.hidden { display: none; }
.se-panel {
  width: min(98vw, 1000px);
  min-height: 100%;
  background: rgba(8, 14, 26, 0.97);
  border-left: 1px solid rgba(120, 200, 255, 0.4);
  border-right: 1px solid rgba(120, 200, 255, 0.4);
  display: flex; flex-direction: column;   /* base .menu flex is row — force column */
}
.se-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; position: sticky; top: 0; z-index: 3;
  border-bottom: 1px solid rgba(120, 200, 255, 0.25);
  background: rgba(16, 26, 46, 0.96);
}
.se-title { color: #9cf; letter-spacing: 2px; font-weight: bold; font-size: 14px; }
.se-x {
  background: none; border: 1px solid rgba(160,200,240,0.4); color: #cde;
  width: 30px; height: 30px; cursor: pointer; border-radius: 4px; font-size: 14px;
}
.se-x:hover { background: rgba(80,40,40,0.6); }
.se-meta, .se-durability {
  display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.15);
}
.se-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; min-width: 0; }
.se-field-tight { flex: 0 1 auto; }
.se-field > span { color: #9ab; font-size: 10px; letter-spacing: 1px; }
.se-field input, .se-field select {
  background: rgba(10,18,32,0.9); border: 1px solid rgba(120,170,220,0.4);
  color: #def; padding: 5px 7px; border-radius: 4px; font: inherit; min-width: 60px;
}
.se-field input[type="range"] { padding: 0; min-width: 110px; }
.se-tools {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid rgba(120, 200, 255, 0.15);
}
.se-tool {
  background: rgba(18,30,52,0.9); border: 1px solid rgba(120,170,220,0.45);
  color: #bcd; padding: 7px 11px; border-radius: 5px; cursor: pointer; font: inherit;
}
.se-tool.active { background: rgba(40,90,150,0.95); color: #fff; border-color: #6cf; }
.se-tool-sep { flex: 1 1 auto; }
.se-mini {
  background: rgba(14,24,42,0.9); border: 1px solid rgba(110,150,200,0.4);
  color: #abd; padding: 6px 9px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 11px;
}
.se-mini:hover { background: rgba(30,55,95,0.95); color: #fff; }
.se-stage { position: relative; padding: 10px 14px; }
.se-canvas {
  width: 100%; height: auto; max-height: 56vh; aspect-ratio: 640 / 420;
  background: #05080e; border: 1px solid rgba(120, 200, 255, 0.3); border-radius: 6px;
  touch-action: none; display: block;
}
.se-palette {
  display: none; gap: 6px; flex-wrap: wrap; margin-top: 8px;
  padding: 8px; background: rgba(10,18,32,0.7); border: 1px solid rgba(120,170,220,0.25); border-radius: 6px;
}
.se-palette.se-palette-open { display: flex; }
.se-palette-hdr { width: 100%; color: #789; font-size: 10px; letter-spacing: 1px; margin: 2px 0; }
.se-pal-item {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(16,28,48,0.95); border: 1px solid rgba(120,170,220,0.5);
  color: #cde; padding: 6px 9px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 11px;
}
.se-pal-item.active { background: rgba(40,80,140,0.95); color: #fff; box-shadow: 0 0 0 1px #6cf inset; }
.se-pal-glyph { font-size: 13px; }
.se-pal-del {
  background: none; border: none; color: #b66; cursor: pointer; font-size: 11px; padding: 0 0 0 4px;
}
.se-pal-del:hover { color: #f88; }
.se-hint { flex: 1 1 100%; color: #678; font-size: 11px; font-style: italic; }
.se-library { padding: 10px 14px; border-top: 1px solid rgba(120, 200, 255, 0.15); }
.se-library h3 { margin: 0 0 8px; color: #9cf; font-size: 11px; letter-spacing: 1px; }
.se-library-list { display: flex; flex-direction: column; gap: 5px; }
.se-library-empty { color: #678; font-style: italic; }
.se-library-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; background: rgba(12,20,36,0.8); border: 1px solid rgba(90,130,180,0.3); border-radius: 5px;
}
.se-library-name { color: #def; font-weight: bold; flex: 1 1 120px; }
.se-library-meta { color: #89a; font-size: 10px; }
.se-footer {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; position: sticky; bottom: 0;
  border-top: 1px solid rgba(120, 200, 255, 0.25); background: rgba(16, 26, 46, 0.96);
}
.se-btn {
  background: rgba(20,34,58,0.95); border: 1px solid rgba(120,170,220,0.5);
  color: #cde; padding: 9px 13px; border-radius: 5px; cursor: pointer; font: inherit;
}
.se-btn:hover { background: rgba(34,58,98,0.98); color: #fff; }
.se-btn-primary { background: rgba(30,90,60,0.95); border-color: #6d9; color: #dfe; }
.se-btn-fly { background: rgba(90,60,30,0.95); border-color: #db8; color: #fed; margin-left: auto; }
.se-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(20px);
  background: rgba(20,40,30,0.96); border: 1px solid #6d9; color: #dfe;
  padding: 9px 16px; border-radius: 6px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 60; max-width: 90vw;
}
.se-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.se-toast.error { background: rgba(50,20,20,0.96); border-color: #d66; color: #fdd; }
/* Draggable / closable selected-module stat popup. */
.se-modpanel {
  position: absolute; width: min(86vw, 260px); z-index: 5;
  background: rgba(12, 20, 36, 0.98); border: 1px solid rgba(140, 190, 240, 0.6);
  border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 70vh; display: flex; flex-direction: column;
}
.se-modpanel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; cursor: move; background: rgba(24, 40, 66, 0.95);
  border-bottom: 1px solid rgba(120,170,220,0.3); border-radius: 7px 7px 0 0; touch-action: none;
}
.se-modpanel-title { color: #9cf; font-weight: bold; letter-spacing: 1px; }
.se-modpanel-x { background: none; border: none; color: #cde; cursor: pointer; font-size: 13px; }
.se-modpanel-body { padding: 8px 10px; overflow: auto; }
.se-modrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.se-modrow > span:first-child { color: #9ab; font-size: 10px; flex: 0 0 auto; }
.se-modrow input[type="number"] { width: 84px; background: rgba(10,18,32,0.9); border: 1px solid rgba(120,170,220,0.4); color: #def; padding: 4px 6px; border-radius: 4px; font: inherit; }
.se-modrow input[type="range"] { flex: 1 1 90px; min-width: 70px; }
.se-modrow input[type="color"] { width: 40px; height: 26px; background: none; border: 1px solid rgba(120,170,220,0.4); border-radius: 4px; }
.se-modval { color: #cde; font-size: 11px; min-width: 34px; text-align: right; }
.se-modpanel-foot { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid rgba(120,170,220,0.25); }
.se-mod-del { border-color: #c66; color: #f99; }
.se-fallback-export { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); }
.se-fallback-panel { background: rgba(12,20,36,0.98); border: 1px solid #6cf; border-radius: 8px; padding: 16px; width: min(92vw, 560px); display: flex; flex-direction: column; gap: 10px; }
.se-fallback-title { color: #9cf; letter-spacing: 1px; }
.se-fallback-text { width: 100%; height: 200px; background: #05080e; color: #cde; border: 1px solid rgba(120,170,220,0.4); font: 11px ui-monospace, monospace; }
.home-more-row-dev .more-label { color: #9cf; }
.more-dev-tag { font-size: 8px; background: rgba(40,90,150,0.9); color: #cef; padding: 1px 4px; border-radius: 3px; letter-spacing: 1px; margin-left: 4px; }