* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #05070b; color: #cfe1f2;
  font-family: "Eurostile", "Bahnschrift", "Trebuchet MS", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
/* Global scrollbar styling — slim, dark, cyan-accent to match the UI's
   blue-grey palette. WebKit + Firefox both. Applied site-wide; specific
   panels can override via their own ::-webkit-scrollbar rules.
   - track: thin dark line, barely visible
   - thumb: cyan-tinted, glows brighter on hover
   - corners: removed (no two-axis intersection look) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(76, 177, 255, 0.35) rgba(8, 14, 24, 0.45);
}
::-webkit-scrollbar {
  width: 9px; height: 9px;
}
::-webkit-scrollbar-track {
  background: rgba(8, 14, 24, 0.45);
  border-left: 1px solid rgba(76, 177, 255, 0.08);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(76, 177, 255, 0.45) 0%,
    rgba(46, 130, 200, 0.55) 100%);
  border: 1px solid rgba(76, 177, 255, 0.30);
  border-radius: 4px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(122, 200, 255, 0.65) 0%,
    rgba(76, 177, 255, 0.75) 100%);
  border-color: rgba(76, 177, 255, 0.55);
  box-shadow: inset 0 0 4px rgba(122, 200, 255, 0.45);
}
::-webkit-scrollbar-thumb:active {
  background: rgba(122, 200, 255, 0.85);
}
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
canvas#game {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: none;
  background: radial-gradient(ellipse at center, #0a0f17 0%, #02030a 90%);
}
canvas#postfx {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;       /* above game canvas (z=0) but below #overlay (z=10) */
  background: transparent;
}
canvas#game { z-index: 0; }
#overlay { z-index: 10; }

#overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
#overlay > * { pointer-events: auto; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(5,7,11,0.65), rgba(2,3,10,0.85));
  backdrop-filter: blur(2px);
}
.screen.hidden { display: none; }

/* Main menu uses the painted fleet-battle backdrop. The dark gradient
   wash on top keeps the title and button stack legible without crushing
   the art. A radial vignette darker around the centerline focuses the eye
   on the UI without flattening the art at the edges. Other screens
   (customize, results, etc.) keep the plain gradient defined on .screen. */
#menu {
  background:
    radial-gradient(ellipse 60% 70% at center,
                    rgba(2,3,10,0.55) 0%,
                    rgba(2,3,10,0.30) 60%,
                    rgba(2,3,10,0.10) 100%),
    linear-gradient(180deg, rgba(5,7,11,0.40), rgba(2,3,10,0.55)),
    url('assets/menu_bg.webp') center center / cover no-repeat;
  backdrop-filter: none;
}

/* Pull the title-stack up a touch so the title doesn't land on top of the
   busiest part of the painted backdrop's foreground capital ship. */
#menu .title-stack { margin-bottom: 48px; transform: translateY(-30px); }

/* Title — larger, sharper glow, with a small dark text-shadow underlay for
   readability against the warm orange explosion zone behind the letters. */
#menu .title {
  font-size: 104px;
  letter-spacing: 18px;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(80, 170, 255, 0.55),
    0 0 80px rgba(50, 130, 255, 0.40);
}
/* Subtitle now sits in a slim pill so it stays readable on bright zones,
   with a tiny accent dot on each side for sci-fi flavor. */
#menu .subtitle {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(2, 5, 12, 0.55);
  border: 1px solid rgba(76, 177, 255, 0.18);
  color: #9ec3e8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  margin-top: 14px;
}

/* Menu button stack — wider, chamfered sci-fi panels with a translucent
   dark fill so the painted fleet behind shows through faintly. The art
   reads as part of the UI instead of competing with it. */
#menu .menu-buttons { gap: 12px; min-width: 320px; }
#menu .btn {
  position: relative;
  padding: 16px 28px;
  letter-spacing: 6px;
  font-size: 15px;
  border: 1px solid rgba(76, 177, 255, 0.30);
  background: rgba(8, 16, 28, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Chamfer top-left + bottom-right corners — Starsector / Homeworld vibe. */
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  );
  transition: 120ms ease;
}
/* Left-edge accent bar — colored vertical line that brightens on hover.
   Drawn as a ::before pseudo so we don't fight the clip-path. */
#menu .btn::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px; width: 2px;
  background: rgba(76, 177, 255, 0.45);
  transition: 120ms ease;
}
#menu .btn:hover {
  border-color: rgba(120, 200, 255, 0.75);
  background: rgba(20, 36, 56, 0.78);
  color: #ffffff;
  box-shadow:
    0 0 22px rgba(76, 177, 255, 0.30),
    inset 0 0 24px rgba(76, 177, 255, 0.08);
}
#menu .btn:hover::before {
  background: #9ed6ff;
  box-shadow: 0 0 10px rgba(158, 214, 255, 0.85);
}
/* Primary buttons (QUICK BATTLE, ESCORT) get a brighter accent + ambient glow. */
#menu .btn.primary {
  border-color: rgba(76, 177, 255, 0.55);
  background: rgba(14, 32, 52, 0.72);
  box-shadow: 0 0 26px rgba(76, 177, 255, 0.18);
}
#menu .btn.primary::before {
  background: #4cb1ff;
  width: 3px;
  box-shadow: 0 0 8px rgba(76, 177, 255, 0.65);
}
#menu .btn.primary:hover {
  background: rgba(22, 50, 80, 0.85);
  box-shadow:
    0 0 32px rgba(76, 177, 255, 0.42),
    inset 0 0 30px rgba(76, 177, 255, 0.12);
}

/* Footer text needs a dark underlay to read against the painted hull
   detail at the bottom of the image. */
#menu .footer {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
  color: #7a9bbe;
  margin-top: 36px;
}

/* ---- LOADING SCREEN ----------------------------------------------------
   Shown by the inline script in index.html until the menu_bg.webp decodes,
   then fades out. Sits above everything else (z=9999) so it covers the
   canvas, the menu screen, and any overlay UI. */
#loading-screen {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #08111c 0%, #02040a 80%);
  color: #cfe1f2;
  font-family: "Eurostile", "Bahnschrift", "Trebuchet MS", system-ui, sans-serif;
  transition: opacity 400ms ease;
}
#loading-screen.fade-out { opacity: 0; pointer-events: none; }
#loading-screen .loading-title {
  font-size: 64px; letter-spacing: 18px; font-weight: 700;
  color: #e6f5ff;
  text-shadow:
    0 0 18px rgba(80, 170, 255, 0.45),
    0 0 60px rgba(50, 130, 255, 0.25);
  margin-bottom: 36px;
}
#loading-screen .loading-bar {
  width: 240px; height: 3px;
  background: rgba(76, 177, 255, 0.10);
  border: 1px solid rgba(76, 177, 255, 0.18);
  overflow: hidden;
  margin-bottom: 16px;
}
#loading-screen .loading-bar-fill {
  width: 30%; height: 100%;
  background: linear-gradient(90deg,
    rgba(76, 177, 255, 0) 0%,
    rgba(76, 177, 255, 0.85) 50%,
    rgba(76, 177, 255, 0) 100%);
  animation: loadingScan 1.6s ease-in-out infinite;
}
@keyframes loadingScan {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
#loading-screen .loading-status {
  font-size: 11px; letter-spacing: 6px; color: #5a7491;
  animation: loadingPulse 1.4s ease-in-out infinite;
}
@keyframes loadingPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.title-stack { text-align: center; margin-bottom: 36px; }
.title {
  font-size: 88px; letter-spacing: 14px;
  margin: 0; font-weight: 700;
  color: #e6f5ff;
  text-shadow:
    0 0 20px rgba(80, 170, 255, 0.55),
    0 0 60px rgba(50, 130, 255, 0.30);
}
.subtitle {
  font-size: 14px; letter-spacing: 6px;
  color: #6e90b3; margin-top: 6px;
}

.menu-buttons { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.menu-buttons.hidden { display: none; }

/* Adventure submenu — sits where the main menu lives, swapped via .hidden */
#adv-submenu .adv-submenu-section-label {
  font: 600 11px Bahnschrift, sans-serif;
  letter-spacing: 0.18em;
  color: #6b8aa8;
  text-align: center;
  margin: 6px 0 2px;
  text-transform: uppercase;
}
#adv-submenu .adv-submenu-section-label:first-child { margin-top: 0; }
#adv-submenu #btn-adv-back { margin-top: 6px; }
#adv-submenu #btn-adv-continue-solo:disabled,
#adv-submenu #btn-adv-resume-coop:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Pilot chip — top-right of the main menu. Shows current callsign, click to edit. */
.pilot-chip {
  position: absolute;
  top: 20px; right: 22px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 13px 7px 14px;
  background: linear-gradient(180deg, rgba(15, 25, 38, 0.92), rgba(10, 18, 27, 0.92));
  border: 1px solid #2c425d;
  color: #cfe1f2;
  font-family: inherit;
  cursor: pointer;
  transition: 80ms ease;
  z-index: 50;
}
.pilot-chip:hover {
  border-color: #5a8ec0;
  background: linear-gradient(180deg, rgba(21, 36, 58, 0.95), rgba(13, 24, 40, 0.95));
  box-shadow: 0 0 18px rgba(90, 142, 192, 0.18);
}
.pilot-chip:active { transform: translateY(1px); }
.pilot-chip-label {
  font: 600 9px Bahnschrift, sans-serif;
  letter-spacing: 0.22em;
  color: #6b8aa8;
  text-transform: uppercase;
}
.pilot-chip-name {
  font: 600 13px Bahnschrift, sans-serif;
  letter-spacing: 0.06em;
  color: #e6f5ff;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pilot-chip-edit {
  font-size: 11px;
  color: #5a8ec0;
  margin-left: 2px;
}
.lobby-pilot-inline {
  color: #e6f5ff;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Lobby modals — proper centered overlay with backdrop. */
.lobby-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 5, 12, 0.78);
  backdrop-filter: blur(4px);
  z-index: 600;
  animation: lobbyFadeIn 140ms ease-out;
}
.lobby-modal.hidden { display: none; }
@keyframes lobbyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lobby-modal-card {
  width: 460px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, rgba(15, 25, 38, 0.98), rgba(10, 18, 27, 0.98));
  border: 1px solid #2c425d;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(76, 177, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 26px 30px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
  animation: lobbyCardIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lobbyCardIn {
  from { transform: translateY(12px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)     scale(1);     opacity: 1; }
}
.lobby-modal-title {
  font: 700 18px Bahnschrift, sans-serif;
  letter-spacing: 0.22em;
  color: #e6f5ff;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #1c2c40;
  text-shadow: 0 0 18px rgba(76, 177, 255, 0.35);
}
.lobby-modal-subtitle {
  font: 400 12px Bahnschrift, sans-serif;
  color: #8aa4be;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.lobby-field {
  display: flex; flex-direction: column; gap: 5px;
}
.lobby-field label,
.lobby-field-label {
  font: 600 10px Bahnschrift, sans-serif;
  letter-spacing: 0.20em;
  color: #6b8aa8;
  text-transform: uppercase;
}
.lobby-field-hint {
  font-weight: 400;
  color: #4f6a82;
  letter-spacing: 0.05em;
  text-transform: none;
  font-size: 10px;
}
.lobby-field input[type="text"] {
  background: #0a121b;
  color: #e6f5ff;
  border: 1px solid #2c425d;
  padding: 9px 12px;
  font: 14px Bahnschrift, sans-serif;
  letter-spacing: 0.06em;
  outline: none;
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.lobby-field input[type="text"]:focus {
  border-color: #4cb1ff;
  box-shadow: 0 0 0 2px rgba(76, 177, 255, 0.15);
}
.lobby-field input[type="text"][readonly] {
  color: #9ec0db;
  cursor: default;
}
.lobby-modal-actions {
  display: flex; gap: 10px;
  margin-top: 8px;
}
.lobby-modal-actions .btn {
  flex: 1;
  padding: 11px 14px;
  font-size: 13px;
  letter-spacing: 3px;
}

/* In-game confirm modal — reuses .lobby-modal frame but the body needs
   to honor \n line breaks from the calling JS (it carries multi-line
   messages like "OK → pay X / Cancel → deploy as-is"). Slightly wider
   card + left-aligned body so the cost lines read naturally. */
#adv-confirm-modal .lobby-modal-card { width: 520px; }
#adv-confirm-modal #adv-confirm-body {
  white-space: pre-line;
  text-align: left;
  font: 400 13px Bahnschrift, sans-serif;
  color: #cfe1f2;
  letter-spacing: 0.04em;
  line-height: 1.55;
  margin-top: 2px;
  margin-bottom: 6px;
}
#adv-prompt-modal .lobby-modal-card { width: 460px; }
.adv-prompt-input {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 4px;
  padding: 10px 12px;
  background: rgba(8, 16, 28, 0.9);
  border: 1px solid rgba(120, 200, 255, 0.45);
  border-radius: 3px;
  color: #eaf4ff;
  font: 600 15px Bahnschrift, sans-serif;
  letter-spacing: 0.05em;
  outline: none;
}
.adv-prompt-input:focus { border-color: #9ed6ff; box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.18); }
.lobby-code-block {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 14px 0 12px;
  border-bottom: 1px solid #1c2c40;
}
.lobby-code-label {
  font: 600 10px Bahnschrift, sans-serif;
  letter-spacing: 0.24em;
  color: #6b8aa8;
}
.lobby-code {
  font: 700 26px Consolas, 'Courier New', monospace;
  letter-spacing: 0.18em;
  color: #d4a04f;
  user-select: text;
  text-shadow: 0 0 22px rgba(212, 160, 79, 0.35);
}
.lobby-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lobby-copy-btn {
  border: 1px solid #2c425d;
  background: linear-gradient(180deg, #0f1925, #0a121b);
  color: #cfe1f2;
  padding: 6px 12px;
  font: 700 11px Bahnschrift, sans-serif;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: 80ms ease;
}
.lobby-copy-btn:hover {
  border-color: #5a8ec0;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(90, 142, 192, 0.20);
}
.lobby-copy-btn:active { transform: translateY(1px); }
.lobby-copy-btn.copied {
  border-color: #6fd45c;
  color: #6fd45c;
  box-shadow: 0 0 14px rgba(111, 212, 92, 0.25);
}
.lobby-players {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0;
  min-height: 80px;
  border: 1px solid #1c2c40;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px;
}
.lobby-player-row {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 13px Bahnschrift, sans-serif;
  color: #c8dceb;
  padding: 4px 6px;
}
.lobby-player-row.is-host::before {
  content: '★ '; color: #d4a04f; margin-right: 4px;
}
.lobby-player-row .ready-yes { color: #6fd45c; }
.lobby-player-row .ready-no  { color: #5a7a96; }
.lobby-resume-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
  border: 1px solid #1c2c40;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px;
}
.lobby-resume-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  background: linear-gradient(180deg, #0f1925, #0a121b);
  border: 1px solid #2c425d;
  cursor: pointer;
  font: 500 12px Bahnschrift, sans-serif;
  color: #cfe1f2;
}
.lobby-resume-item:hover {
  background: linear-gradient(180deg, #18283c, #0e1722);
  border-color: #4a6884;
}
.lobby-resume-item .lobby-resume-code {
  font: 700 14px Consolas, monospace;
  letter-spacing: 0.12em;
  color: #d4a04f;
}
.lobby-resume-item .lobby-resume-meta {
  color: #6b8aa8;
  font-size: 11px;
}
.lobby-resume-item .lobby-resume-role {
  display: inline-block;
  padding: 2px 7px;
  margin-right: 8px;
  border: 1px solid #2c425d;
  font: 700 9px Bahnschrift, sans-serif;
  letter-spacing: 0.18em;
  color: #6b8aa8;
  background: rgba(0, 0, 0, 0.35);
}
.lobby-resume-item .lobby-resume-role-host {
  color: #d4a04f;
  border-color: #5a4628;
  background: rgba(60, 40, 20, 0.40);
}
.lobby-resume-empty {
  color: #6b8aa8; text-align: center; padding: 16px;
  font: 500 12px Bahnschrift, sans-serif;
}

.btn {
  border: 1px solid #2c425d;
  background: linear-gradient(180deg, #0f1925, #0a121b);
  color: #cfe1f2;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: 80ms ease;
  text-transform: uppercase;
}
.btn:hover {
  border-color: #5a8ec0;
  color: #ffffff;
  background: linear-gradient(180deg, #15243a, #0d1828);
  box-shadow: 0 0 18px rgba(90, 142, 192, 0.20);
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  border-color: #4cb1ff;
  color: #e6f5ff;
  background: linear-gradient(180deg, #103450, #082236);
  box-shadow: 0 0 22px rgba(76, 177, 255, 0.18);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #154565, #0c2c46);
  box-shadow: 0 0 28px rgba(76, 177, 255, 0.32);
}
.btn.small { padding: 6px 12px; font-size: 12px; letter-spacing: 2px; }

.controls {
  margin-top: 22px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  background: rgba(8,12,18,0.6);
  border: 1px solid #1c2c3f;
  padding: 14px 22px;
  width: 540px;
}
.controls.hidden { display: none; }
.ctrl-row { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.ctrl-row input[type="text"], .ctrl-row select {
  flex: 1; background: #0a121b; color: #cfe1f2;
  border: 1px solid #2c425d; padding: 4px 8px;
  font: 13px Bahnschrift, sans-serif;
  outline: none;
}
.ctrl-row input[type="text"]:focus, .ctrl-row select:focus { border-color: #4cb1ff; }
.mp-status { color: #ff8855; font-size: 11px; letter-spacing: 2px; min-height: 14px; }
.mp-loadout { color: #cfe1f2; font-size: 13px; flex: 1; }
#mp-panel button.primary { margin-top: 8px; }
#mp-edit-loadout { padding: 4px 10px; font-size: 11px; }

/* CAPTAIN modal — fullscreen overlay so the 5 branch columns get real estate */
.captain-modal {
  position: fixed; inset: 0;
  background: rgba(2, 5, 12, 0.96);
  display: flex; align-items: stretch; justify-content: stretch;
  z-index: 1000;
  padding: 0;
}
.captain-modal.hidden { display: none; }
.captain-modal-content {
  width: 100%; height: 100vh;
  max-height: 100vh;
  display: flex; flex-direction: row;        /* sidebar + canvas side-by-side */
  background: linear-gradient(180deg, #060a10, #02050a);
  border: none;
  padding: 0;
  box-shadow: none;
}
/* LEFT SIDEBAR — title, level/XP, branch tabs (vertical stack) */
.captain-sidebar {
  width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #050a14, #02050a);
  border-right: 1px solid #1c2c3f;
  padding: 14px 12px 10px 14px;
  overflow-y: auto;
}
.captain-modal-titlebar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid #1c2c3f;
}
.captain-modal-titlebar h2 {
  margin: 0; font-size: 16px; letter-spacing: 5px; color: #cfe1f2;
}
.captain-tab-stub {
  padding: 18px; color: #5a7491; font-size: 12px; letter-spacing: 1px;
  text-align: center;
}
.captain-tab-stub strong { color: #ffd58a; }

/* CAPTAIN level + XP block — now stacked vertically in the sidebar */
.captain-header {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: linear-gradient(180deg, #0d1825, #0a121b);
  padding: 12px 14px; border: 1px solid #2c425d;
  margin-bottom: 10px;
}
.captain-level-block {
  display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start;
  gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid #1c2c3f;
}
.captain-level-num { font-size: 32px; color: #ffd58a; font-weight: bold; line-height: 1; letter-spacing: 1px; }
.captain-level-label { font-size: 9px; color: #5a7491; letter-spacing: 3px; }
.captain-xp-block { display: flex; flex-direction: column; gap: 4px; }
.captain-xp-row, .captain-points-row {
  display: flex; justify-content: space-between; font-size: 10px;
  color: #5a7491; letter-spacing: 2px;
}
.captain-xp-row span:last-child { color: #cfe1f2; }
.captain-xp-bar {
  height: 6px; background: #050810; border: 1px solid #1c2c3f;
}
#cap-xp-fill {
  height: 100%; background: linear-gradient(90deg, #4cb1ff, #9ed6ff);
  width: 0%; transition: width 0.2s;
}
.captain-points-row strong { color: #ffd58a; font-size: 14px; }
.captain-actions { display: flex; flex-direction: row; gap: 6px; margin-bottom: 14px; }
.captain-actions .btn.small { padding: 5px 10px; font-size: 10px; flex: 1; }

/* Branch tabs — vertical stack in the sidebar */
.captain-branch-tabs {
  display: flex; flex-direction: column;
  gap: 3px; margin-bottom: 0;
}
.cap-branch-tab {
  --tab-color: #4cb1ff;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 6px;
  background: linear-gradient(90deg, #0a121b, #060a10);
  border: 1px solid #1c2c3f;
  border-left: 3px solid var(--tab-color);
  color: #5a7491;
  padding: 8px 12px;
  font: bold 11px Bahnschrift, sans-serif;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align: left;
}
.cap-branch-tab:hover {
  background: linear-gradient(180deg, #0d1825, #0a121b);
  color: #cfe1f2;
}
.cap-branch-tab.active {
  background: linear-gradient(90deg, var(--tab-color), #060a10 110%);
  color: #050810;
  border-color: var(--tab-color);
  border-left-width: 5px;
}
.cap-branch-tab.active .cb-name { color: #050810; text-shadow: 0 0 8px #fff8; }
.cap-branch-tab.active .cb-count { color: #050810; opacity: 0.85; }
.cap-branch-tab .cb-count {
  font-size: 9px; letter-spacing: 2px; color: #5a7491;
}
.cap-branch-tab.has-allocated:not(.active) .cb-count { color: var(--tab-color); }
.cap-branch-tab.combat       { --tab-color: #ff7755; }
.cap-branch-tab.tactical     { --tab-color: #4cb1ff; }
.cap-branch-tab.engineering  { --tab-color: #65d97c; }
.cap-branch-tab.leadership   { --tab-color: #b08aff; }
.cap-branch-tab.doctrine     { --tab-color: #ffd58a; }
.cap-branch-tab.bio          { --tab-color: #ff5588; }
.cap-branch-tab.aether       { --tab-color: #9ed6ff; }
.cap-branch-tab.experimental { --tab-color: #e040a0; }
.cap-branch-tab.void         { --tab-color: #a050d0; }
.cap-branch-tab.watcher      { --tab-color: #f0e090; }

.captain-canvas-wrap {
  flex: 1; position: relative;
  background: radial-gradient(ellipse at center, #050a14 0%, #02050a 70%);
  border: none;
  overflow: hidden;
}
#captain-tree-canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.captain-tooltip {
  position: absolute; pointer-events: none;
  background: #0a121b; border: 1px solid #2c425d;
  padding: 8px 10px; max-width: 260px;
  font-size: 11px; color: #cfe1f2; letter-spacing: 0.5px;
  z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.captain-tooltip.hidden { display: none; }
.captain-tooltip .tt-name { font-weight: bold; font-size: 12px; margin-bottom: 4px; letter-spacing: 1px; }
.captain-tooltip .tt-desc { color: #8aa9c6; font-size: 10px; line-height: 1.4; }
.captain-tooltip .tt-meta { color: #5a7491; font-size: 9px; letter-spacing: 1.5px; margin-top: 4px; }
.captain-tooltip.combat      .tt-name { color: #ff7755; }
.captain-tooltip.tactical    .tt-name { color: #4cb1ff; }
.captain-tooltip.engineering .tt-name { color: #65d97c; }
.captain-tooltip.leadership  .tt-name { color: #b08aff; }
.captain-tooltip.doctrine    .tt-name { color: #ffd58a; }
.captain-tooltip.bio         .tt-name { color: #ff5588; }
.captain-tooltip.aether      .tt-name { color: #9ed6ff; }
.captain-tooltip.experimental .tt-name { color: #e040a0; }
.captain-tooltip.void        .tt-name { color: #a050d0; }
.captain-tooltip.watcher     .tt-name { color: #f0e090; }
.captain-branch {
  display: flex; flex-direction: column;
  border: 1px solid var(--branch-color, #1c2c3f);
  background: rgba(10, 18, 27, 0.6);
}
.captain-branch h4 {
  font-size: 11px; letter-spacing: 3px; text-align: center;
  padding: 8px 0 6px 0; margin: 0;
  background: var(--branch-color, #1c2c3f);
  color: #050810; font-weight: bold;
}
.captain-tier {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding: 6px 6px 8px 6px; position: relative;
}
.captain-tier:first-of-type { border-top: none; }
.captain-tier-label {
  font-size: 9px; letter-spacing: 2px; color: #5a7491;
  margin-bottom: 4px; text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.captain-tier.locked { opacity: 0.4; pointer-events: none; }
.captain-tier.locked .captain-tier-label { color: #ff8855; }
.skill-card {
  background: #0a121b; border: 1px solid #1c2c3f;
  border-left: 2px solid var(--branch-color, #1c2c3f);
  padding: 5px 7px; margin-bottom: 4px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.skill-card:hover {
  border-color: var(--branch-color, #4cb1ff);
  background: #0d1825;
  transform: translateX(1px);
}
.skill-card.allocated {
  border-color: var(--branch-color, #65d97c);
  background: rgba(101, 217, 124, 0.10);
  border-left-width: 4px;
}
.skill-card.allocated::before { content: '◆ '; color: var(--branch-color, #65d97c); font-size: 9px; }
.skill-card.locked { opacity: 0.5; cursor: not-allowed; }
.skill-card.locked:hover { border-color: #1c2c3f; transform: none; background: #0a121b; }
.skill-card.unaffordable { opacity: 0.55; }
.skill-card .skill-name {
  font-size: 11px; color: #cfe1f2; font-weight: bold; letter-spacing: 1px;
}
.skill-card.allocated .skill-name { color: var(--branch-color, #65d97c); }
.skill-card .skill-desc {
  font-size: 9.5px; color: #7a92a8; margin-top: 2px; line-height: 1.35;
}

/* Branch palette */
.captain-branch.combat      { --branch-color: #ff7755; }
.captain-branch.tactical    { --branch-color: #4cb1ff; }
.captain-branch.engineering { --branch-color: #65d97c; }
.captain-branch.leadership  { --branch-color: #b08aff; }
.captain-branch.doctrine    { --branch-color: #ffd58a; }
.captain-branch.bio         { --branch-color: #ff5588; }
.captain-branch.aether      { --branch-color: #9ed6ff; }
.captain-branch.experimental { --branch-color: #e040a0; }
.captain-branch.void        { --branch-color: #a050d0; }
.captain-branch.watcher     { --branch-color: #f0e090; }
.key {
  display: inline-block;
  min-width: 56px; text-align: center;
  padding: 2px 8px;
  border: 1px solid #2c425d;
  background: #0a121b;
  color: #b6cfe6;
  font-size: 11px; letter-spacing: 2px;
}

.footer { margin-top: 30px; color: #5a7491; font-size: 11px; letter-spacing: 3px; }

/* CUSTOMIZE */
#customize {
  background: linear-gradient(180deg, #060a10, #02050a);
}
.cust-header {
  position: absolute; top: 18px; left: 28px; right: 28px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 5;
}
.cust-header h2 { margin: 0; letter-spacing: 8px; font-weight: 600; }
.cust-header-right { display: flex; gap: 10px; align-items: center; }
/* Dev-mode toggle — adventure shows this so the player can flip the unlock
   filter off and access every hull/weapon for testing. Off by default
   (filter active = "only what you've earned"); when ON the button glows
   amber so it's obvious the unlock gate is being bypassed. */
.cust-dev-btn {
  background: rgba(8, 12, 18, 0.7);
  border: 1px solid #5a7491;
  color: #8aa9c6;
  letter-spacing: 3px;
}
.cust-dev-btn:hover { color: #cfe1f2; border-color: #cfe1f2; }
.cust-dev-btn.active {
  background: rgba(60, 42, 12, 0.85);
  border-color: #ffd58a;
  color: #ffd58a;
  box-shadow: 0 0 10px rgba(255, 213, 138, 0.35);
}
.captain-btn {
  background: linear-gradient(180deg, rgba(60, 40, 100, 0.8), rgba(40, 22, 70, 0.9));
  border-color: #6a4cb1;
  color: #d0a0ff;
  letter-spacing: 2px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  min-width: 130px;
  padding: 4px 10px 6px;
}
.captain-btn:hover {
  background: linear-gradient(180deg, rgba(80, 56, 130, 0.9), rgba(56, 32, 90, 0.95));
  color: #e8d0ff;
  box-shadow: 0 0 12px rgba(176, 138, 255, 0.4);
}
/* Pill internals — top row shows ⚡ LVL N + (when SP available) the unspent
   SP count in glowing amber. Bottom is a thin XP-to-next bar. */
.captain-btn .cap-pill-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.captain-btn .cap-pill-icon { font-size: 12px; }
.captain-btn .cap-pill-lvl { letter-spacing: 2px; font-weight: 600; }
.captain-btn .cap-pill-sp {
  font-size: 9px; letter-spacing: 1.5px; font-weight: 700;
  color: #ffd58a;
  background: rgba(255, 213, 138, 0.15);
  border: 1px solid rgba(255, 213, 138, 0.55);
  padding: 1px 5px;
  text-shadow: 0 0 6px rgba(255, 213, 138, 0.7);
}
.captain-btn .cap-pill-xp {
  display: block;
  width: 100%; height: 2px;
  background: rgba(176, 138, 255, 0.18);
  border: 1px solid rgba(176, 138, 255, 0.30);
}
.captain-btn .cap-pill-xp > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #b08aff, #d8b0ff);
  transition: width 200ms ease-out;
}
/* When SP unspent, give the WHOLE button a soft pulsing amber halo that
   keeps drawing the eye until the player opens the modal. */
.captain-btn.has-sp {
  border-color: rgba(255, 213, 138, 0.85);
  animation: captainSpPulse 1.6s ease-in-out infinite;
}
@keyframes captainSpPulse {
  0%, 100% { box-shadow: 0 0 6px  rgba(255, 213, 138, 0.30); }
  50%      { box-shadow: 0 0 18px rgba(255, 213, 138, 0.65); }
}
.cust-body {
  display: grid; grid-template-columns: 320px 1fr 380px;
  gap: 16px;
  width: calc(100vw - 48px);
  height: calc(100vh - 90px);
  margin-top: 50px;
}
.cust-hull, .cust-loadout {
  background: rgba(8,12,18,0.65);
  border: 1px solid #1c2c3f;
  padding: 14px;
  /* Floating DEPLOY button overlaps these scrollable panels at bottom-right.
     Pad the bottom by enough to clear it (button ~50px tall + 24px bottom
     offset + breathing room) so the LAST list items don't disappear under
     the button when fully scrolled. */
  padding-bottom: 92px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.cust-stage {
  background:
    radial-gradient(ellipse at center, rgba(20, 35, 55, 0.55), rgba(3, 6, 10, 0.95) 70%),
    rgba(3,6,10,0.7);
  border: 1px solid #1c2c3f;
  position: relative; overflow: hidden;
}

/* Persistent stats card — top-left of the stage. Always visible regardless
   of which tab is active, so the player can see how their build's stats
   change as they fit weapons / hullmods / module. */
.stage-stats {
  /* Top-left corner. Compact so the canvas stays mostly empty for the ship.
     top: 110px clears the SAVED LOADOUTS hex bar (~96px reserved). */
  position: absolute; top: 110px; left: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #1c2c3f;
  padding: 7px 10px;
  font-size: 10px; letter-spacing: 0.6px;
  color: #8aa9c6;
  min-width: 180px;
  max-width: 210px;
  max-height: calc(100% - 130px);
  overflow-y: auto;
  pointer-events: none;
  backdrop-filter: blur(2px);
  z-index: 2;
}
.stage-stats .stat-row { padding: 1px 0; gap: 12px; }
.stage-stats .stat-bar { height: 3px; }
.stage-stats h4 { font-size: 9px; letter-spacing: 2px; margin-bottom: 4px; }
.stage-stats .stat-divider { margin: 4px 0; }
.stage-stats .stat-row {
  display: flex; justify-content: space-between;
  padding: 2px 0;
  gap: 18px;
}
.stage-stats .stat-row .v { color: #cfe1f2; font-weight: 600; }
.stage-stats .stat-row .v.good { color: #65d97c; }
.stage-stats .stat-row .v.warn { color: #ff8855; }
/* Right-side group holding [value] + [inline alloc control]. Allows the
   alloc buttons to sit immediately to the right of the stat value without
   breaking the row's space-between layout. */
.stage-stats .stat-row-right {
  display: inline-flex; align-items: center; gap: 6px;
}
/* Inline OP-alloc control — tiny -/+ buttons + count, sits to the right
   of the stat value. Pointer-events override the parent's none so the
   buttons are clickable through the otherwise click-passthrough panel. */
.stage-stats .stat-alloc {
  display: inline-flex; align-items: center; gap: 2px;
  pointer-events: auto;
  margin-left: 2px;
}
.stage-stats .stat-alloc-btn {
  width: 16px; height: 16px;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: rgba(20, 40, 60, 0.7);
  border: 1px solid rgba(76, 177, 255, 0.35);
  color: #9ed6ff;
  cursor: pointer;
  padding: 0;
  transition: 80ms ease;
}
.stage-stats .stat-alloc-btn:hover:not(:disabled) {
  border-color: #4cb1ff;
  background: rgba(30, 60, 90, 0.85);
  color: #cfe1f2;
}
.stage-stats .stat-alloc-btn:disabled {
  opacity: 0.30;
  cursor: not-allowed;
}
.stage-stats .stat-alloc-val {
  font-size: 9px; font-weight: 700;
  color: #5a7491;
  letter-spacing: 0.6px;
  min-width: 10px;
  text-align: center;
}
.stage-stats .stat-alloc-val.on { color: #65d97c; }
.stage-stats .stat-divider {
  height: 1px; background: #1c2c3f; margin: 6px 0;
}
.stage-stats h4 {
  margin: 0 0 6px; font-size: 10px; letter-spacing: 3px;
  color: #4cb1ff; font-weight: 600;
  display: flex; gap: 8px; align-items: center;
}
/* Mount popover — floats over the canvas when the player clicks a weapon
   mount on the ship. Replaces the persistent right-column AVAILABLE list
   with a contextual dropdown. ESC / close-btn / outside-click / equipping
   a weapon all dismiss it. */
.mount-popover {
  position: absolute;
  right: 16px; bottom: 50px;
  width: 360px;
  max-height: 70%;
  display: flex; flex-direction: column;
  background: rgba(3, 6, 10, 0.92);
  border: 1px solid #2c425d;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.65),
              0 0 22px rgba(76, 177, 255, 0.18);
  backdrop-filter: blur(4px);
  z-index: 5;
  pointer-events: auto;
  animation: popoverIn 140ms ease-out;
}
.mount-popover.hidden { display: none; }
/* Starsector-style installed-hullmods strip pinned to the right of the ship.
   Replaces the bulky bottom-panel INSTALLED list — keeps the equipped mods
   visible alongside the ship while the AVAILABLE list still lives in the
   right-column tab. Scrolls if the stack grows past the available height. */
.stage-rhs {
  position: absolute; top: 110px; right: 10px;
  width: 184px;
  max-height: calc(100% - 130px);
  display: flex; flex-direction: column;
  gap: 10px;
  z-index: 3;
  pointer-events: auto;
}
.stage-installed-mods {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column; gap: 5px;
  overflow-y: auto;
}
/* Equipped active module tile — sits below the hullmods strip. Empty state
   is dashed/muted; equipped state uses cyan accent to distinguish from the
   green-tinted hullmod tiles. Click anywhere on the tile to unequip. */
.stage-module-equipped {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 4px;
}
.stage-module-equipped .ime-header {
  font-size: 9px; letter-spacing: 2.5px;
  color: #4cb1ff; font-weight: 600;
  padding: 2px 2px 4px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.25);
  display: flex; justify-content: space-between; align-items: baseline;
}
.stage-module-equipped .ime-header .ime-key { color: #ffc857; }
.stage-module-equipped .ime-row {
  background: rgba(8, 14, 18, 0.85);
  border: 1px solid rgba(76, 177, 255, 0.55);
  padding: 5px 7px;
  font-size: 9.5px; letter-spacing: 0.6px;
  color: #cfe1f2;
  cursor: pointer;
  transition: border-color 110ms, background 110ms, color 110ms;
  backdrop-filter: blur(2px);
  display: flex; align-items: center; gap: 8px;
}
.stage-module-equipped .ime-row .ime-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.stage-module-equipped .ime-row .ime-body { flex: 1; min-width: 0; }
.stage-module-equipped .ime-row:hover {
  border-color: #ff5577;
  background: rgba(60, 18, 22, 0.85);
}
.stage-module-equipped .ime-name {
  font-weight: 600; color: #4cb1ff;
  margin-bottom: 2px;
}
.stage-module-equipped .ime-row:hover .ime-name { color: #ff8855; }
.stage-module-equipped .ime-desc {
  color: #8aa9c6; font-size: 9px; line-height: 1.35;
  margin-bottom: 3px;
}
.stage-module-equipped .ime-meta {
  color: #5a7491; font-size: 8.5px; letter-spacing: 1px;
}
.stage-module-equipped .ime-row.empty {
  border-style: dashed;
  border-color: rgba(76, 177, 255, 0.2);
  background: transparent;
  color: #5a7491;
  font-style: italic;
  text-align: center;
  cursor: default;
  font-size: 9px;
  padding: 6px;
}
.stage-installed-mods .ihm-header {
  font-size: 9px; letter-spacing: 2.5px;
  color: #4cb1ff; font-weight: 600;
  padding: 2px 2px 4px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.25);
  margin-bottom: 2px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.stage-installed-mods .ihm-header .ihm-count { color: #9ed6ff; }
.stage-installed-mods .ihm-row {
  background: rgba(8, 14, 18, 0.85);
  border: 1px solid rgba(101, 217, 124, 0.45);
  padding: 5px 7px;
  font-size: 9.5px; letter-spacing: 0.6px;
  color: #cfe1f2;
  cursor: pointer;
  transition: border-color 110ms, background 110ms, color 110ms;
  backdrop-filter: blur(2px);
  display: flex; align-items: center; gap: 8px;
}
.stage-installed-mods .ihm-row .ihm-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.stage-installed-mods .ihm-row .ihm-body { flex: 1; min-width: 0; }
.stage-installed-mods .ihm-row:hover {
  border-color: #ff5577;
  background: rgba(60, 18, 22, 0.85);
}
.stage-installed-mods .ihm-name {
  font-weight: 600;
  color: #65d97c;
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  margin-bottom: 2px;
}
.stage-installed-mods .ihm-row:hover .ihm-name { color: #ff8855; }
.stage-installed-mods .ihm-op {
  color: #ffc857;
  font-size: 8.5px; letter-spacing: 1px;
}
.stage-installed-mods .ihm-desc {
  color: #8aa9c6;
  font-size: 9px;
  line-height: 1.35;
}
.stage-installed-mods .ihm-row.empty {
  border-style: dashed;
  border-color: rgba(76, 177, 255, 0.2);
  background: transparent;
  color: #5a7491;
  font-style: italic;
  text-align: center;
  cursor: default;
  font-size: 9px;
}
.stage-installed-mods .ihm-row.mod-tier-2 { border-color: rgba(255, 200, 87, 0.5); }
.stage-installed-mods .ihm-row.mod-tier-2 .ihm-name { color: #ffc857; }
.stage-installed-mods .ihm-row.mod-tier-3 { border-color: rgba(255, 100, 180, 0.55); }
.stage-installed-mods .ihm-row.mod-tier-3 .ihm-name { color: #ff64b4; }
.hullmod-tab-hint {
  font-size: 10px; letter-spacing: 0.6px; color: #5a7491;
  font-style: italic; margin: 0 0 8px;
}
/* STATS tab — OP allocation rows. Compact + polished to match the existing
   hullmod/module row styling. -/+ buttons sit on the right; a tiny pip
   bar inside each row reads at a glance how many ticks are spent. */
.op-alloc-list {
  display: flex; flex-direction: column; gap: 6px;
}
.op-alloc-row {
  display: grid;
  grid-template-columns: 1fr 28px 56px 28px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #1c2c3f;
  background: rgba(8,12,18,0.5);
  font-size: 12px;
  transition: 80ms ease;
}
.op-alloc-row:hover { border-color: #4cb1ff; background: rgba(15,24,35,0.7); }
.op-alloc-row.maxed { border-color: rgba(101, 217, 124, 0.55); }
.op-alloc-row .op-alloc-info { min-width: 0; }
.op-alloc-row .op-alloc-name {
  font-size: 12px; letter-spacing: 1px; color: #e6f5ff;
  text-transform: uppercase;
}
.op-alloc-row .op-alloc-desc {
  font-size: 9.5px; color: #6e90b3; letter-spacing: 0.3px;
  margin-top: 2px;
}
.op-alloc-row .op-alloc-pips {
  display: flex; gap: 2px; margin-top: 4px;
}
.op-alloc-row .op-alloc-pip {
  width: 7px; height: 4px;
  background: rgba(140, 170, 200, 0.18);
  border: 1px solid rgba(140, 170, 200, 0.25);
}
.op-alloc-row .op-alloc-pip.on {
  background: #4cb1ff;
  border-color: #4cb1ff;
  box-shadow: 0 0 6px rgba(76, 177, 255, 0.65);
}
.op-alloc-row .op-alloc-count {
  text-align: center;
  font-size: 13px; font-weight: 700; color: #cfe1f2;
  letter-spacing: 1px;
}
.op-alloc-btn {
  background: rgba(20, 40, 60, 0.7);
  border: 1px solid rgba(76, 177, 255, 0.35);
  color: #9ed6ff;
  width: 28px; height: 28px;
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: 80ms ease;
  padding: 0;
}
.op-alloc-btn:hover:not(:disabled) {
  border-color: #4cb1ff;
  background: rgba(30, 60, 90, 0.85);
  color: #cfe1f2;
}
.op-alloc-btn:disabled {
  opacity: 0.30;
  cursor: not-allowed;
  border-color: rgba(76, 177, 255, 0.15);
}
@keyframes popoverIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.mount-popover .popover-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(76, 177, 255, 0.06);
  border-bottom: 1px solid rgba(76, 177, 255, 0.25);
}
.mount-popover .popover-title {
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  color: #4cb1ff;
}
.mount-popover .popover-close {
  background: transparent; border: 0;
  color: #5a7491; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.mount-popover .popover-close:hover { color: #e6f5ff; }
.mount-popover .filter-bar { padding: 8px 10px; }
.mount-popover #weapon-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
}
.slot-list-hint {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 1px;
  color: #5a7491;
  text-align: right;
  font-style: italic;
}
/* Hull description shown directly under the title in the stage-stats card.
   Replaces the old bottom-of-hull-list desc panel — keeps the card as the
   single source of "everything about this hull" so the player's eye doesn't
   bounce between widgets. */
.stage-stats .stage-stats-desc {
  font-size: 11px;
  font-style: italic;
  color: #8aa9c6;
  line-height: 1.45;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1c2c3f;
}
.stage-stats .preview-tag {
  font-size: 8px; letter-spacing: 1px;
  color: #ffd58a;
  background: rgba(255, 213, 138, 0.12);
  border: 1px solid rgba(255, 213, 138, 0.4);
  padding: 1px 6px;
  font-weight: 500;
}
.stage-stats .delta {
  font-size: 9px; letter-spacing: 0.5px;
  margin-left: 4px; opacity: 0.85;
}
/* Proportional fill bar under each stat row — width reflects the hull's
   relative position in its size class (S/M/L/XL). Two-layer: the base
   fill in cyan, and a green/red delta segment overlay when previewing
   a hover-change in the AVAILABLE list. */
.stage-stats .stat-bar {
  position: relative;
  height: 3px;
  background: rgba(76, 177, 255, 0.10);
  border: 1px solid rgba(76, 177, 255, 0.20);
  margin: -1px 0 4px;
  overflow: hidden;
}
.stage-stats .stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4cb1ff, #65d9ff);
  transition: width 120ms ease-out;
}
.stage-stats .stat-bar-delta {
  position: absolute;
  top: 0; height: 100%;
  opacity: 0.85;
  transition: width 120ms ease-out, left 120ms ease-out;
}
/* DPS-by-damage-type breakdown rows — 3-element grid: TAG, VALUE, BAR.
   Each row gets the damage type's signature color so the player can see
   "where my DPS lives" at a glance. */
.stage-stats .stat-bt-list {
  margin: 2px 0 4px; padding: 0 0 0 6px;
}
.stage-stats .stat-bt-row {
  display: grid;
  grid-template-columns: 32px 36px 1fr;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}
.stage-stats .stat-bt-tag {
  font-size: 9px; letter-spacing: 1px;
  font-weight: 600;
  text-align: left;
}
.stage-stats .stat-bt-val {
  font-size: 10px; font-weight: 600;
  text-align: right;
}
.stage-stats .stat-bt-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.stage-stats .stat-bt-bar > div {
  height: 100%;
  transition: width 120ms ease-out;
}
.op-delta {
  font-size: 11px; margin-left: 4px;
  font-weight: 600;
}
.op-delta.good { color: #65d97c; }
.op-delta.over { color: #ff7a8a; }

/* Prominent ordnance budget bar at the top of the loadout column */
.op-bar-top {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: rgba(8,12,18,0.7);
  border: 1px solid #1c2c3f;
}
.op-bar-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.op-bar-label {
  font-size: 9px; letter-spacing: 3px; color: #6e90b3;
}
.op-bar-readout {
  font-size: 13px; letter-spacing: 1px; color: #cfe1f2; font-weight: 600;
}
.op-bar-readout .op-sep { color: #5a7491; margin: 0 3px; }
.op-bar-readout .op-suffix { color: #6e90b3; font-size: 10px; margin-left: 2px; font-weight: normal; }
.op-bar-track {
  height: 8px; background: rgba(0,0,0,0.55);
  border: 1px solid #1c2c3f;
  position: relative; overflow: hidden;
}
.op-bar-fill {
  height: 100%;
  transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
  background: linear-gradient(90deg, #4cb1ff, #65d9d2);
}
.op-bar-fill.warn { background: linear-gradient(90deg, #ffb14c, #ffcb6a); }
.op-bar-fill.over {
  background: linear-gradient(90deg, #ff5577, #ff8855);
  box-shadow: 0 0 8px rgba(255, 85, 119, 0.6);
}
.op-bar-readout.over { color: #ff7a8a; }

/* Floating DEPLOY — bottom-right of the screen, always visible regardless
   of which tab the user is viewing or how far they've scrolled. */
.cust-deploy-floating {
  position: absolute;
  right: 28px; bottom: 24px;
  z-index: 6;
  font-size: 16px; letter-spacing: 5px;
  padding: 14px 36px;
  box-shadow: 0 6px 24px rgba(0, 100, 180, 0.35);
}
.cust-deploy-floating:hover { box-shadow: 0 6px 28px rgba(0, 140, 220, 0.55); }
.cust-deploy-floating.disabled {
  background: rgba(60, 30, 35, 0.65);
  border-color: rgba(255, 85, 119, 0.5);
  color: rgba(255, 122, 138, 0.85);
  box-shadow: none;
  cursor: not-allowed;
}
.cust-deploy-floating.disabled:hover { box-shadow: 0 0 12px rgba(255, 85, 119, 0.45); }

/* Saved loadouts — Overwatch-style 5-slot hex bar at top-center of the
   ship preview stage. Anchored absolute so it floats over the canvas.
   Has its own dimmed backdrop so it reads as a UI layer on top of the
   ship preview, not a graphic painted into the scene. The render-origin
   offset in setupStage pushes the ship body down by STAGE_TOP_RESERVE/2
   to keep its silhouette out from under the bar even on wide capitals. */
.loadouts-hex-bar {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 22px 12px;
  background: linear-gradient(180deg, rgba(3,6,10,0.78) 0%, rgba(3,6,10,0.42) 75%, rgba(3,6,10,0) 100%);
  backdrop-filter: blur(3px);
  pointer-events: none;        /* let canvas events through except for slots */
  /* Soft fade-out at the bottom edge so the bar visually melts into the
     scene instead of presenting a hard rectangle. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.loadouts-hex-bar > * { pointer-events: auto; }
.loadouts-hex-bar .lh-title {
  font-family: Bahnschrift, sans-serif;
  font-size: 10px; letter-spacing: 2.5px;
  color: #5a7491;
  display: flex; gap: 6px; align-items: baseline;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.loadouts-hint {
  font-size: 9px; color: #4cb1ff; letter-spacing: 1.5px;
  font-weight: normal;
}
.lh-slots {
  display: flex; gap: 14px; align-items: flex-start;
}
.lh-slot {
  background: transparent; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  position: relative;
  font: inherit;
}
.lh-hex {
  width: 56px; height: 64px;
  /* Pointy-top hexagon — matches Overwatch character select aesthetic. */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, #0d1622, #050a12);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 120ms ease, filter 120ms ease;
}
.lh-hex::before {
  /* Inset second hex provides the "border" look since clip-path doesn't
     render a border directly. The gap between outer + inner hex is the
     visible border thickness. */
  content: '';
  position: absolute; inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, #1a2c44, #0a1421);
  z-index: 0;
}
.lh-hex .lh-num {
  font-family: Bahnschrift, sans-serif;
  font-size: 22px; letter-spacing: 1px;
  color: #5a7491;
  position: relative; z-index: 1;
}
.lh-hex .lh-glyphs {
  /* Tiny weapon-size dot trio — visual tag for filled slots so the player
     can read loadout shape at a glance instead of relying on the name. */
  position: relative; z-index: 1;
  display: flex; gap: 3px; flex-wrap: wrap; justify-content: center;
  max-width: 36px;
}
.lh-hex .lh-glyph {
  width: 5px; height: 5px; border-radius: 50%;
}
.lh-hex .lh-glyph.s { background: #4cb1ff; }
.lh-hex .lh-glyph.m { background: #ffb14c; }
.lh-hex .lh-glyph.l { background: #ff5577; }
/* OP usage badge — small text + horizontal fill bar pinned to the bottom
   third of the hex face. Color follows the OP-bar palette in the main
   loadout column: cyan→amber→red as fill approaches/exceeds cap. */
.lh-hex .lh-op {
  position: absolute;
  bottom: 14%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.lh-hex .lh-op .lh-op-num {
  font-family: Bahnschrift, sans-serif;
  font-size: 8px; letter-spacing: 1px;
  color: #cfe1f2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.lh-hex .lh-op .lh-op-bar {
  width: 28px; height: 2px;
  background: rgba(76, 177, 255, 0.10);
  border: 1px solid rgba(76, 177, 255, 0.20);
  overflow: hidden;
}
.lh-hex .lh-op .lh-op-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #4cb1ff, #65d9ff);
  transition: width 200ms ease-out;
}
.lh-hex .lh-op.warn .lh-op-num { color: #ffd58a; }
.lh-hex .lh-op.warn .lh-op-bar > div { background: linear-gradient(90deg, #ffb14c, #ffd58a); }
.lh-hex .lh-op.over .lh-op-num { color: #ff8855; }
.lh-hex .lh-op.over .lh-op-bar > div { background: linear-gradient(90deg, #ff5577, #ff8855); }
.lh-slot:hover .lh-hex {
  transform: translateY(-2px);
  filter: brightness(1.25);
}
.lh-slot.filled .lh-hex {
  background: linear-gradient(180deg, #1c4870, #0d2c45);
}
.lh-slot.filled .lh-hex::before {
  background: linear-gradient(180deg, #2a5d8f, #173a5e);
}
.lh-slot.filled .lh-num {
  display: none;
}
.lh-slot.active .lh-hex {
  filter: drop-shadow(0 0 14px rgba(76, 177, 255, 0.85))
          drop-shadow(0 0 4px rgba(76, 177, 255, 0.6));
}
.lh-slot.active .lh-hex::before {
  background: linear-gradient(180deg, #4cb1ff, #2a7eb8);
}
/* Save-mode — every hex becomes a click-target with a pulsing green halo
   so the player can see "click any of these to save". Empty slots pulse
   green ('safe save'); filled slots pulse amber ('overwrite warning'). */
.loadouts-hex-bar.save-mode::before {
  content: 'CLICK A SLOT TO SAVE  ·  ESC TO CANCEL';
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  font-family: Bahnschrift, sans-serif;
  font-size: 10px; letter-spacing: 3px;
  color: #65d97c;
  text-shadow: 0 0 8px rgba(101, 217, 124, 0.8), 0 1px 2px rgba(0,0,0,0.9);
  white-space: nowrap;
  pointer-events: none;
  animation: saveModeBannerPulse 1.4s ease-in-out infinite;
}
@keyframes saveModeBannerPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1.0; }
}
.lh-slot.save-target { cursor: pointer; }
.lh-slot.save-target:not(.filled) .lh-hex {
  filter: drop-shadow(0 0 12px rgba(101, 217, 124, 0.85))
          drop-shadow(0 0 4px rgba(101, 217, 124, 0.55));
  animation: saveTargetPulseGreen 1.2s ease-in-out infinite;
}
.lh-slot.save-target.filled .lh-hex {
  filter: drop-shadow(0 0 12px rgba(255, 177, 76, 0.85))
          drop-shadow(0 0 4px rgba(255, 177, 76, 0.55));
  animation: saveTargetPulseAmber 1.2s ease-in-out infinite;
}
@keyframes saveTargetPulseGreen {
  0%, 100% { filter: drop-shadow(0 0 8px  rgba(101, 217, 124, 0.55)); }
  50%      { filter: drop-shadow(0 0 16px rgba(101, 217, 124, 0.95)); }
}
@keyframes saveTargetPulseAmber {
  0%, 100% { filter: drop-shadow(0 0 8px  rgba(255, 177, 76, 0.55)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255, 177, 76, 0.95)); }
}
/* Hover boost in save-mode so the user gets crisp feedback on which slot
   they're about to commit to. */
.lh-slot.save-target:hover .lh-hex {
  transform: scale(1.06);
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.6))
          drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}
.lh-label {
  font-family: Bahnschrift, sans-serif;
  font-size: 9px; letter-spacing: 1.5px;
  color: #5a7491;
  text-transform: uppercase;
  max-width: 78px;
  text-align: center;
  text-overflow: ellipsis; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  line-height: 1.25;
}
/* Secondary "hull" line under the loadout name — flat-fleet hex bar shows
   which hull each saved loadout belongs to since slots aren't per-hull. */
.lh-label .lh-label-hull {
  font-size: 7px; letter-spacing: 1.5px; color: #4a6680;
}
.lh-slot.filled .lh-label { color: #cfe1f2; }
.lh-slot.active .lh-label { color: #4cb1ff; font-weight: 600; }
.lh-del {
  position: absolute; top: -2px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(20, 30, 45, 0.95);
  border: 1px solid #ff5577;
  color: #ff5577;
  font-size: 14px; line-height: 14px;
  cursor: pointer;
  display: none;
  z-index: 4;
  padding: 0;
  font-family: inherit;
}
.lh-slot.filled:hover .lh-del { display: block; }
.lh-del:hover { background: #ff5577; color: #fff; }
/* Inline save-name input row — appears below the hex slots when the user
   clicks an empty slot. Auto-focuses the input. */
.lh-input-row {
  display: flex; gap: 6px; align-items: center;
  background: rgba(8, 12, 18, 0.92);
  border: 1px solid #1c2c3f;
  padding: 6px 8px;
  backdrop-filter: blur(2px);
}
.lh-input-row[hidden] { display: none; }
.lh-input-row .lh-input {
  width: 200px;
  background: rgba(3,6,10,0.7);
  border: 1px solid #1c2c3f;
  color: #e6f5ff;
  padding: 4px 8px;
  font: inherit; font-size: 11px; letter-spacing: 1px;
}
.lh-input-row .lh-input:focus {
  outline: none; border-color: #4cb1ff;
}
.btn.ghost {
  background: transparent;
  border: 1px solid #1c2c3f;
  color: #6e90b3;
}
.btn.ghost:hover { color: #ff5577; border-color: #ff5577; }

/* Quick-build action row — sits at the top of the WEAPONS tab. One-tap
   shortcuts to common loadout-building actions. */
.quick-build-row {
  display: flex; gap: 6px;
  margin: 0 0 10px;
}
.qb-btn {
  flex: 1; min-width: 0;
  font-size: 10px; letter-spacing: 1px;
  padding: 6px 4px;
}

/* Weapon-list filter bar — search + size pills + damage-type pills */
.filter-bar {
  display: flex; flex-direction: column; gap: 6px;
  margin: 6px 0 8px;
}
.filter-bar input {
  background: rgba(3,6,10,0.7);
  border: 1px solid #1c2c3f;
  color: #e6f5ff;
  padding: 6px 10px;
  font: inherit; font-size: 11px; letter-spacing: 1px;
}
.filter-bar input:focus { outline: none; border-color: #4cb1ff; }
.filter-pills { display: flex; gap: 3px; }
.pill {
  flex: 1; min-width: 0;
  padding: 4px 6px;
  background: #0a121b;
  border: 1px solid #1c2c3f;
  color: #6e90b3;
  font: inherit; font-size: 10px; letter-spacing: 1px;
  cursor: pointer; transition: 80ms ease;
}
.pill:hover { color: #cfe1f2; background: #0d1828; }
.pill.active {
  background: linear-gradient(180deg, #103450, #082236);
  color: #e6f5ff; border-color: #4cb1ff;
}
/* Faction pills — each pill carries the faction's signature color so the
   filter row reads as a faction palette legend at the same time as it
   filters. Active state intensifies the same hue. Same color values as the
   ship-preview radial backlight in setupStage() so the visual identity
   is consistent across the screen. */
/* The faction row now carries 15 factions + ALL. The base .pill uses
   `flex:1; min-width:0`, which would squish 16 chips down to ~15px and clip
   their labels. Override to natural width (flex:0 0 auto) + wrap so the chips
   keep their 3-letter labels and flow onto ~2 lines instead. */
.filter-pills-faction { font-size: 9px; flex-wrap: wrap; row-gap: 3px; }
.filter-pills-faction .pill { letter-spacing: 1.5px; padding: 3px 6px; flex: 0 0 auto; }
.pill.fac-human         { color: #80a0ff; border-color: rgba(80, 160, 255, 0.40); }
.pill.fac-human.active  { color: #cfe1f2; border-color: #4cb1ff;
                          background: linear-gradient(180deg, rgba(80, 160, 255, 0.30), rgba(40, 90, 160, 0.40)); }
.pill.fac-bio           { color: #e87090; border-color: rgba(200, 60, 100, 0.40); }
.pill.fac-bio.active    { color: #ffe0e8; border-color: #c83c64;
                          background: linear-gradient(180deg, rgba(200, 60, 100, 0.30), rgba(110, 30, 55, 0.40)); }
.pill.fac-experimental  { color: #88cfd6; border-color: rgba(120, 220, 230, 0.40); }
.pill.fac-experimental.active { color: #e0fbff; border-color: #78dce6;
                          background: linear-gradient(180deg, rgba(120, 220, 230, 0.30), rgba(40, 100, 110, 0.40)); }
.pill.fac-aether        { color: #6cd9b6; border-color: rgba(76, 240, 192, 0.40); }
.pill.fac-aether.active { color: #d8ffe8; border-color: #4cf0c0;
                          background: linear-gradient(180deg, rgba(76, 240, 192, 0.30), rgba(30, 110, 80, 0.40)); }
.pill.fac-watcher       { color: #ffd58a; border-color: rgba(255, 213, 138, 0.40); }
.pill.fac-watcher.active { color: #fff5d8; border-color: #ffd58a;
                          background: linear-gradient(180deg, rgba(255, 213, 138, 0.30), rgba(140, 110, 60, 0.40)); }
.pill.fac-void          { color: #b070ff; border-color: rgba(128, 60, 200, 0.40); }
.pill.fac-void.active   { color: #f0d8ff; border-color: #b070ff;
                          background: linear-gradient(180deg, rgba(128, 60, 200, 0.30), rgba(60, 20, 100, 0.40)); }
.pill.fac-hollow        { color: #9ec8ff; border-color: rgba(158, 200, 255, 0.40); }
.pill.fac-hollow.active { color: #e8f2ff; border-color: #9ec8ff;
                          background: linear-gradient(180deg, rgba(158, 200, 255, 0.28), rgba(40, 60, 90, 0.40)); }
/* Added factions — colors keyed to each faction's own identity (matching the
   ship-preview backlight map in customize.js). Federation = institutional steel
   blue; Legion = imperial bronze-red; Argent Vow = knightly silver; Praxis =
   chrome-and-magenta; Dwarves = forge orange; Sylvani = leaf green; Underworld
   (underworld) = nightshade indigo; Junkers (pirate) = rust/brass. */
.pill.fac-federation     { color: #5a9fd4; border-color: rgba(90, 159, 212, 0.40); }
.pill.fac-federation.active { color: #dcefff; border-color: #5a9fd4;
                          background: linear-gradient(180deg, rgba(90, 159, 212, 0.30), rgba(35, 70, 110, 0.40)); }
.pill.fac-legion         { color: #d87a4a; border-color: rgba(216, 122, 74, 0.40); }
.pill.fac-legion.active  { color: #ffe6d4; border-color: #d87a4a;
                          background: linear-gradient(180deg, rgba(216, 122, 74, 0.30), rgba(110, 55, 30, 0.40)); }
.pill.fac-argent         { color: #c8d2e0; border-color: rgba(200, 210, 224, 0.40); }
.pill.fac-argent.active  { color: #eef2f8; border-color: #c8d2e0;
                          background: linear-gradient(180deg, rgba(200, 210, 224, 0.30), rgba(90, 100, 120, 0.40)); }
.pill.fac-praxis         { color: #e060c0; border-color: rgba(224, 96, 192, 0.40); }
.pill.fac-praxis.active  { color: #ffdcf6; border-color: #e060c0;
                          background: linear-gradient(180deg, rgba(224, 96, 192, 0.30), rgba(110, 40, 95, 0.40)); }
.pill.fac-dwarves        { color: #ff9a3c; border-color: rgba(255, 154, 60, 0.40); }
.pill.fac-dwarves.active { color: #ffe4c4; border-color: #ff9a3c;
                          background: linear-gradient(180deg, rgba(255, 154, 60, 0.30), rgba(140, 80, 25, 0.40)); }
.pill.fac-sylvani        { color: #7bc85a; border-color: rgba(123, 200, 90, 0.40); }
.pill.fac-sylvani.active { color: #e2ffd4; border-color: #7bc85a;
                          background: linear-gradient(180deg, rgba(123, 200, 90, 0.30), rgba(55, 100, 40, 0.40)); }
.pill.fac-underworld         { color: #8078e0; border-color: rgba(128, 120, 224, 0.40); }
.pill.fac-underworld.active  { color: #e6e2ff; border-color: #8078e0;
                          background: linear-gradient(180deg, rgba(128, 120, 224, 0.30), rgba(55, 50, 110, 0.40)); }
.pill.fac-pirate         { color: #c89438; border-color: rgba(200, 148, 56, 0.40); }
.pill.fac-pirate.active  { color: #ffeecb; border-color: #c89438;
                          background: linear-gradient(180deg, rgba(200, 148, 56, 0.30), rgba(100, 72, 25, 0.40)); }
#cust-canvas { width: 100%; height: 100%; display: block; }
.mount-info {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  font-size: 12px; color: #8aa9c6;
  background: rgba(0,0,0,0.4);
  padding: 6px 10px;
  border: 1px solid #1c2c3f;
}

.list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.row {
  border: 1px solid #1c2c3f;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  background: rgba(8,12,18,0.5);
  transition: 80ms ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.row .ricon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.row .rbody { flex: 1; min-width: 0; }
.row:hover { border-color: #4cb1ff; background: rgba(15,24,35,0.7); }
.row.selected { border-color: #4cb1ff; background: rgba(20,52,80,0.8); }
.row .name { font-size: 13px; letter-spacing: 1px; color: #e6f5ff; }
.row .meta { font-size: 10px; color: #6e90b3; margin-top: 2px; letter-spacing: 1px; }
.row .stats-mini { font-size: 10px; color: #8aa9c6; margin-top: 4px; }
.row.disabled { opacity: 0.35; cursor: not-allowed; }
.row.dragging { opacity: 0.50; cursor: grabbing; }
.row[draggable="true"] { cursor: grab; }
.row[draggable="true"]:active { cursor: grabbing; }
.row.size-small { border-left: 4px solid #4cb1ff; }
.row.size-medium { border-left: 4px solid #ffb14c; }
.row.size-large { border-left: 4px solid #ff5577; }
.row.size-xlarge { border-left: 4px solid #b070ff; }
.hull-row.size-small.selected { box-shadow: inset 4px 0 0 #4cb1ff, 0 0 8px rgba(76, 177, 255, 0.25); }
.hull-row.size-medium.selected { box-shadow: inset 4px 0 0 #ffb14c, 0 0 8px rgba(255, 177, 76, 0.25); }
.hull-row.size-large.selected { box-shadow: inset 4px 0 0 #ff5577, 0 0 8px rgba(255, 85, 119, 0.25); }
.hull-row.size-xlarge.selected { box-shadow: inset 4px 0 0 #b070ff, 0 0 8px rgba(176, 112, 255, 0.30); }

/* Cosmetic skin selector — sits between the hull list and the stats
   block, only visible when the active hull has unlocked skins. */
.hull-skin-panel {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 200, 100, 0.30);
  background: linear-gradient(180deg, rgba(40, 30, 12, 0.55), rgba(20, 14, 6, 0.55));
  border-radius: 3px;
}
.hull-skin-panel .hsk-title {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(255, 200, 100, 0.85);
  margin-bottom: 6px;
}
.hull-skin-panel .hsk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin-bottom: 4px;
  border: 1px solid rgba(255, 200, 100, 0.15);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.hull-skin-panel .hsk-row:hover { background: rgba(60, 40, 16, 0.5); border-color: rgba(255, 200, 100, 0.40); }
.hull-skin-panel .hsk-row.equipped {
  border-color: rgba(140, 255, 140, 0.55);
  box-shadow: inset 3px 0 0 rgba(140, 255, 140, 0.85);
}
.hull-skin-panel .hsk-row.default-skin .hsk-name { color: rgba(220, 220, 220, 0.75); }
.hull-skin-panel .hsk-icon {
  width: 44px; height: 44px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 200, 100, 0.30);
  border-radius: 2px;
  flex-shrink: 0;
}
.hull-skin-panel .hsk-body { flex: 1; min-width: 0; }
.hull-skin-panel .hsk-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffc888;
}
.hull-skin-panel .hsk-flavor {
  font-size: 10px;
  color: rgba(240, 200, 160, 0.65);
  margin-top: 2px;
  line-height: 1.3;
}
.hull-skin-panel .hsk-tag {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255, 140, 200, 0.85);
  text-transform: uppercase;
  margin-left: 4px;
}
/* Locked skin rows — muted body + lock glyph over the icon. Click
   triggers a brief horizontal shake so the player sees the row
   responded but didn't equip. */
.hull-skin-panel .hsk-row.locked {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: rgba(180, 120, 60, 0.20);
}
.hull-skin-panel .hsk-row.locked:hover {
  opacity: 0.75;
  background: rgba(40, 28, 16, 0.45);
  border-color: rgba(255, 200, 100, 0.30);
}
.hull-skin-panel .hsk-row.locked .hsk-name {
  color: rgba(255, 220, 180, 0.65);
}
.hull-skin-panel .hsk-icon.locked {
  position: relative;
  filter: grayscale(0.7) brightness(0.55);
}
.hull-skin-panel .hsk-lock-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  text-shadow: 0 0 4px rgba(0,0,0,0.85);
  pointer-events: none;
}
.hull-skin-panel .hsk-drop {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255, 160, 100, 0.95);
  text-transform: uppercase;
  margin-top: 2px;
}
.hull-skin-panel .hsk-flavor.muted {
  opacity: 0.65;
  font-style: italic;
}
@keyframes hsk-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.hull-skin-panel .hsk-row.shake { animation: hsk-shake 0.36s ease-out; }

/* Deny feedback — red flash + shake when a blocked action is clicked
   (e.g. a can't-afford button/tile). Paired with the 'error' UI sound. */
@keyframes uiDenyFlash {
  0%   { transform: translateX(0);    box-shadow: 0 0 0 0 rgba(255,60,60,0);    background-color: rgba(255,50,50,0); }
  10%  { transform: translateX(-5px); box-shadow: 0 0 0 2px rgba(255,85,85,0.95), 0 0 18px 4px rgba(255,40,40,0.6); background-color: rgba(255,50,50,0.22); }
  30%  { transform: translateX(5px); }
  50%  { transform: translateX(-3px); }
  70%  { transform: translateX(3px); }
  85%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    box-shadow: 0 0 0 0 rgba(255,60,60,0);    background-color: rgba(255,50,50,0); }
}
.ui-deny-flash { animation: uiDenyFlash 0.42s ease-out; }
/* Clickable-but-unaffordable affordance — dimmed like a disabled control, but
   kept interactive so a click can explain the denial (deny flash + sound). */
.cant-afford { opacity: 0.5; }

/* INFILTRATION — covert dock at a hostile planet: red warning accent so the
   restricted, sneaking-around state is unmistakable. */
#adv-hub.infiltrating #adv-hub-station { color: #ff6a6a !important; text-shadow: 0 0 14px rgba(255,55,55,0.55); }
#adv-hub.infiltrating .adv-hub-header { border-bottom: 1px solid rgba(255,70,70,0.45); box-shadow: inset 0 -1px 0 rgba(255,70,70,0.18); }
#adv-hub.infiltrating .adv-hub-pulse { background: #ff5a5a; box-shadow: 0 0 8px rgba(255,60,60,0.7); }

/* =========================================================================
   DIALOGUE PANEL — bottom-anchored conversation UI.
   Pinned full-width across the lower third of the adventure overlay. Hidden
   by default, .open shows it with a slide-up + fade-in. Three regions:
     • portrait (left, 200×200 sq)
     • speaker name + body text + options (right, fills remaining width)
   ========================================================================= */
.adv-dialogue-panel {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.92), rgba(4, 8, 12, 0.96));
  border: 1px solid rgba(120, 180, 255, 0.40);
  border-radius: 4px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.75),
              inset 0 0 0 1px rgba(120, 180, 255, 0.08);
  color: #c8dcff;
  font-family: Bahnschrift, sans-serif;
  z-index: 30;
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.adv-dialogue-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.adv-dialogue-portrait {
  width: 200px;
  min-width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid rgba(120, 180, 255, 0.45);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(40, 80, 140, 0.45), rgba(0, 0, 0, 0)),
    linear-gradient(180deg, rgba(20, 30, 50, 0.75), rgba(8, 14, 22, 0.75));
  border-radius: 3px;
  overflow: hidden;
}
.adv-dialogue-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.adv-dialogue-portrait-fallback {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 84px;
  font-weight: 700;
  color: rgba(180, 220, 255, 0.45);
}
.adv-dialogue-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.adv-dialogue-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffc888;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.adv-dialogue-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.42;
  color: #d6e6ff;
  margin-bottom: 10px;
  font-style: italic;
}
.adv-dialogue-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.adv-dialogue-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(20, 32, 52, 0.55);
  border: 1px solid rgba(120, 180, 255, 0.25);
  border-radius: 2px;
  color: #d6e6ff;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.10s, border-color 0.10s, transform 0.04s;
}
.adv-dialogue-option:hover {
  background: rgba(60, 100, 160, 0.55);
  border-color: rgba(180, 220, 255, 0.65);
  color: #fff;
}
.adv-dialogue-option:active {
  transform: translateY(1px);
}
.adv-dialogue-option-key {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  font-weight: 800;
  color: rgba(255, 200, 100, 0.85);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 200, 100, 0.30);
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 11px;
}
.adv-dialogue-option-label { flex: 1; }
.adv-dialogue-option-close {
  background: rgba(40, 30, 30, 0.55);
  border-color: rgba(200, 160, 140, 0.30);
  color: rgba(220, 210, 200, 0.88);
}
.adv-dialogue-option-close:hover {
  background: rgba(80, 60, 60, 0.65);
  border-color: rgba(240, 200, 180, 0.65);
  color: #fff;
}
.adv-dialogue-option-close .adv-dialogue-option-key {
  color: rgba(220, 180, 160, 0.85);
  border-color: rgba(220, 180, 160, 0.30);
}

/* =====================================================================
   NOTIFICATIONS — three-tier overlay system inside #adventure.
   ===================================================================== */

/* CINEMATIC banner — milestone events (boss kills, war, planet capture).
   Full-screen overlay with: radial flash, sparkle particles, scale-bounce
   gold text, vignette pulse. Goal: that "you actually did it" dopamine hit.
   Composed of:
     .adv-cine-banner   — root overlay (z=70)
     .adv-cine-flash    — radial gradient that pops + fades (the "ka-bang")
     .adv-cine-sparks   — particle layer (60 spans positioned + animated by JS)
     .adv-cine-rays     — radiating linear gradients pulsing outward
     .adv-cine-title    — scale-bounce entrance, big glowing text
     .adv-cine-sub      — subtle subtitle
*/
.adv-cine-banner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-align: center;
  z-index: 70;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  font-family: Bahnschrift, sans-serif;
  overflow: hidden;
}
.adv-cine-banner.show {
  opacity: 1;
  animation: adv-cine-fade var(--cine-dur, 2.6s) forwards;
}
@keyframes adv-cine-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Radial flash — the "KA-BANG" white-hot pop on entrance. */
.adv-cine-flash {
  position: absolute;
  left: 50%; top: 38%;
  width: 1px; height: 1px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 230, 180, 0.95) 0%,
    rgba(255, 180, 100, 0.55) 15%,
    rgba(255, 140, 60, 0.20) 40%,
    rgba(255, 100, 40, 0)    70%);
  border-radius: 50%;
  opacity: 0;
}
.adv-cine-banner.show .adv-cine-flash {
  animation: adv-cine-flash 1.4s ease-out forwards;
}
@keyframes adv-cine-flash {
  0%   { width: 1px; height: 1px; opacity: 0; }
  8%   { width: 1400px; height: 1400px; opacity: 1; }
  30%  { width: 2400px; height: 2400px; opacity: 0.55; }
  100% { width: 3000px; height: 3000px; opacity: 0; }
}

/* Radial light-rays — long thin gradient slivers sweeping outward.
   Built as one big conic gradient that spins slowly. */
.adv-cine-rays {
  position: absolute;
  left: 50%; top: 38%;
  width: 1600px; height: 1600px;
  transform: translate(-50%, -50%) scale(0);
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 200, 110, 0.22) 0deg,
      transparent 6deg,
      transparent 30deg,
      rgba(255, 200, 110, 0.16) 36deg,
      transparent 42deg,
      transparent 80deg,
      rgba(255, 200, 110, 0.20) 86deg,
      transparent 92deg,
      transparent 140deg,
      rgba(255, 200, 110, 0.16) 146deg,
      transparent 152deg,
      transparent 210deg,
      rgba(255, 200, 110, 0.22) 216deg,
      transparent 222deg,
      transparent 290deg,
      rgba(255, 200, 110, 0.18) 296deg,
      transparent 302deg,
      transparent 360deg);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(1px);
}
.adv-cine-banner.show .adv-cine-rays {
  animation: adv-cine-rays 2.8s ease-out forwards;
}
@keyframes adv-cine-rays {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg);   opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.0) rotate(8deg); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.5) rotate(35deg); opacity: 0; }
}

/* Sparks layer — JS injects 60 spans with --x/--y/--delay vars. */
.adv-cine-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.adv-cine-spark {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 220, 140, 0.95);
  box-shadow: 0 0 10px 1px rgba(255, 200, 110, 0.85);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: adv-cine-spark 2.4s ease-out forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes adv-cine-spark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
  60%  { opacity: 0.8; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -80px))) scale(0.9); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -160px))) scale(0.2); }
}

/* Title — scale-bounce entrance with big glow. The wrapper centers it. */
.adv-cine-text {
  position: absolute;
  left: 0; right: 0;
  top: 28%;
  text-align: center;
  transform: translateZ(0);
}
.adv-cine-title {
  display: inline-block;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 8px;
  line-height: 1.0;
  color: #ffd58a;
  text-shadow:
    0 0 16px rgba(255, 200, 110, 0.95),
    0 0 36px rgba(255, 180, 80, 0.65),
    0 0 72px rgba(255, 160, 60, 0.35),
    0 3px 0  rgba(0, 0, 0, 0.7);
  transform: scale(0.6);
  opacity: 0;
}
.adv-cine-banner.show .adv-cine-title {
  animation: adv-cine-title var(--cine-dur, 2.6s) cubic-bezier(0.16, 1.36, 0.42, 1) forwards;
}
@keyframes adv-cine-title {
  0%   { transform: scale(0.6); opacity: 0; letter-spacing: 16px; }
  12%  { transform: scale(1.08); opacity: 1; letter-spacing: 10px; }
  18%  { transform: scale(1.0); letter-spacing: 8px; }
  85%  { transform: scale(1.0); opacity: 1; letter-spacing: 8px; }
  100% { transform: scale(1.02); opacity: 0; letter-spacing: 10px; }
}
.adv-cine-sub {
  display: block;
  margin-top: 14px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 6px;
  color: rgba(230, 220, 200, 0.82);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 180, 80, 0.25);
  opacity: 0;
}
.adv-cine-banner.show .adv-cine-sub {
  animation: adv-cine-sub var(--cine-dur, 2.6s) ease-out 0.25s forwards;
}
@keyframes adv-cine-sub {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Vignette pulse — dark frame compresses inward for the duration. */
.adv-cine-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%,
    transparent 25%,
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0.45) 100%);
  opacity: 0;
  pointer-events: none;
}
.adv-cine-banner.show .adv-cine-vignette {
  animation: adv-cine-vignette var(--cine-dur, 2.6s) ease-out forwards;
}
@keyframes adv-cine-vignette {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.6; }
  100% { opacity: 0; }
}

/* Tone variants */
.adv-cine-banner.tone-crimson .adv-cine-flash {
  background: radial-gradient(circle,
    rgba(255, 180, 140, 0.95) 0%,
    rgba(255, 100, 80, 0.55) 15%,
    rgba(220, 50, 40, 0.20) 40%,
    transparent 70%);
}
.adv-cine-banner.tone-crimson .adv-cine-spark {
  background: rgba(255, 140, 110, 0.95);
  box-shadow: 0 0 10px 1px rgba(255, 80, 60, 0.85);
}
.adv-cine-banner.tone-crimson .adv-cine-title {
  color: #ff8a7a;
  text-shadow:
    0 0 16px rgba(255, 120, 80, 0.95),
    0 0 36px rgba(220, 50, 50, 0.70),
    0 0 72px rgba(180, 30, 30, 0.40),
    0 3px 0 rgba(0, 0, 0, 0.7);
}
.adv-cine-banner.tone-void .adv-cine-flash {
  background: radial-gradient(circle,
    rgba(220, 180, 255, 0.95) 0%,
    rgba(180, 100, 255, 0.55) 15%,
    rgba(120, 60, 220, 0.20) 40%,
    transparent 70%);
}
.adv-cine-banner.tone-void .adv-cine-spark {
  background: rgba(220, 180, 255, 0.95);
  box-shadow: 0 0 10px 1px rgba(180, 100, 255, 0.85);
}
.adv-cine-banner.tone-void .adv-cine-title {
  color: #c89aff;
  text-shadow:
    0 0 16px rgba(180, 100, 255, 0.95),
    0 0 36px rgba(120, 60, 220, 0.70),
    0 0 72px rgba(90, 30, 200, 0.40),
    0 3px 0 rgba(0, 0, 0, 0.7);
}

/* NEW item acquisition card — Elden Ring style: big central icon as the
   hero element, name + kind label underneath, NEW badge floating in the
   corner. Center-bottom on screen, ~3.5s. */
.adv-item-card {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translate(-50%, 14px);
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg,
    rgba(8, 14, 22, 0.96) 0%,
    rgba(8, 14, 22, 0.88) 100%);
  border: 1px solid rgba(160, 200, 240, 0.30);
  border-top: 2px solid rgba(160, 200, 240, 0.85);
  border-bottom: 2px solid rgba(160, 200, 240, 0.85);
  font-family: Bahnschrift, sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  z-index: 65;
  box-shadow:
    0 0 24px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(160, 200, 240, 0.10);
}
.adv-item-card.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* NEW badge — top-left corner over the card frame */
.adv-item-card-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 700;
  color: #ffd58a;
  background: linear-gradient(180deg, rgba(60, 42, 14, 0.95), rgba(35, 22, 6, 0.95));
  border: 1px solid rgba(255, 200, 110, 0.75);
  padding: 4px 10px;
  text-shadow: 0 0 6px rgba(255, 200, 110, 0.65);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.50);
}
/* Big hero icon — dominant element, takes most of the card */
.adv-item-card-icon {
  position: relative;
  width: 180px; height: 180px;
  background: radial-gradient(ellipse at center,
    rgba(40, 60, 88, 0.75) 0%,
    rgba(10, 16, 26, 0.85) 75%);
  border: 1px solid rgba(160, 200, 240, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: 800;
  color: rgba(160, 200, 240, 0.55);
  margin-bottom: 14px;
  overflow: hidden;
}
/* Subtle inner glow ring around the icon */
.adv-item-card-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 50%,
    rgba(160, 200, 240, 0.18) 100%);
  pointer-events: none;
}
.adv-item-card-icon-img {
  width: 92%; height: 92%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.20));
}
.adv-item-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.adv-item-card-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f0e7d8;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 200, 110, 0.20);
}
.adv-item-card-kind {
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(160, 200, 240, 0.85);
}
/* Kind tints — left-bar color */
.adv-item-card.kind-hull       { border-left-color: #4cb1ff; }
.adv-item-card.kind-hull       .adv-item-card-kind { color: #4cb1ff; }
.adv-item-card.kind-weapon     { border-left-color: #ff8a3a; }
.adv-item-card.kind-weapon     .adv-item-card-kind { color: #ff8a3a; }
.adv-item-card.kind-hullmod    { border-left-color: #65d97c; }
.adv-item-card.kind-hullmod    .adv-item-card-kind { color: #65d97c; }
.adv-item-card.kind-module     { border-left-color: #c89aff; }
.adv-item-card.kind-module     .adv-item-card-kind { color: #c89aff; }
.adv-item-card.kind-schematic  { border-left-color: #80ffd0; }
.adv-item-card.kind-schematic  .adv-item-card-kind { color: #80ffd0; }
.adv-item-card.kind-remembrance { border-left-color: #ffd58a; }
.adv-item-card.kind-remembrance .adv-item-card-kind { color: #ffd58a; }

/* TOAST feed — bottom-right slim stack.  Auto-fades each entry; cap of
   5 rows enforced in JS.  Per-tone colour band on the left edge. */
.adv-toast-feed {
  position: absolute;
  right: 22px;
  bottom: 240px;          /* sits above the 180px minimap + 16px pad + chip */
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  z-index: 55;
  font-family: Bahnschrift, sans-serif;
  max-width: 420px;
}
.adv-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(8, 16, 26, 0.88);
  border-left: 3px solid rgba(160, 200, 240, 0.70);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(230, 240, 250, 0.95);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.adv-toast-ico { font-size: 15px; }
.adv-toast.show {
  opacity: 1;
  transform: translateX(0);
}
.adv-toast-ico {
  display: inline-block;
  width: 14px; text-align: center;
  color: inherit;
}
.adv-toast-text { flex: 1; }
.adv-toast.tone-info       { border-left-color: rgba(120, 180, 255, 0.70); }
.adv-toast.tone-combat     { border-left-color: rgba(255, 100, 100, 0.80); color: #ffc8c0; }
.adv-toast.tone-diplomacy  { border-left-color: rgba(255, 200, 110, 0.80); color: #ffe2b8; }
.adv-toast.tone-silk       { border-left-color: rgba(255, 180, 110, 0.80); color: #ffd6a8; }
.adv-toast.tone-discovery  { border-left-color: rgba(180, 130, 240, 0.80); color: #dec8ff; }
.adv-toast.tone-cargo      { border-left-color: rgba(130, 240, 200, 0.80); color: #b8f0d6; }
.adv-toast.tone-mission    { border-left-color: rgba(120, 220, 255, 0.80); color: #b8e0f0; }

/* =====================================================================
   CHAT PANEL — top-left log stream. System messages mirror from
   _showFlash; player messages enter via Enter (MP-ready). Two states:
     • collapsed (default) — feed visible at low opacity, input hidden
     • expanded             — full opacity, input row unfurls below
   Press Enter to expand + focus; Esc / send / blur collapses back.
   Top edge mask-fades older lines so they dissolve as new ones arrive.
   ===================================================================== */
.adv-chat {
  position: absolute;
  left: 22px;
  top: 82px;
  width: 380px;
  display: flex;
  flex-direction: column;
  font-family: Bahnschrift, sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 56;
  user-select: none;
  opacity: 0.55;
  transition: opacity 0.22s ease-out;
}
.adv-chat.expanded { opacity: 1; }
/* Hidden while docked (over the station/market UI). Still unfurls when you
   press Enter to chat — .expanded overrides the hide. */
.adv-chat.chat-hidden:not(.expanded) { opacity: 0; pointer-events: none; }
.adv-chat-feed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* newest pinned to the bottom of the feed */
  gap: 2px;
  height: 110px;                  /* compact in collapsed state — ~4-5 lines */
  overflow: hidden;
  padding: 6px 12px;
  background: rgba(8, 12, 18, 0.55);
  border-left: 2px solid rgba(120, 180, 255, 0.28);
  /* Top edge mask — older messages dissolve as new ones arrive. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 32%, black 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 32%, black 100%);
  transition: height 0.24s ease-out,
              background 0.22s ease-out,
              border-left-color 0.22s ease-out;
}
.adv-chat.expanded .adv-chat-feed {
  height: 360px;                  /* unfurls to ~16+ lines when typing */
  background: rgba(8, 12, 18, 0.82);
  border-left-color: rgba(120, 220, 255, 0.65);
}
.adv-chat-msg {
  color: rgba(220, 230, 240, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Don't let flex squish rows together when more messages fit than
     the feed height allows — fixed line size + no shrink + overflow
     hidden means oldest rows clip cleanly at the top (under the mask). */
  flex-shrink: 0;
  line-height: 16px;
  min-height: 16px;
}
.adv-chat-msg.show {
  opacity: 1;
  transform: translateX(0);
}
.adv-chat-msg .adv-chat-time {
  color: rgba(140, 160, 180, 0.55);
  margin-right: 7px;
  font-size: 11px;
  letter-spacing: 0.2px;
}
.adv-chat-msg.tone-system    { color: rgba(200, 215, 230, 0.85); }
.adv-chat-msg.tone-combat    { color: #ffb0a0; }
.adv-chat-msg.tone-reward    { color: #ffe2a8; }
.adv-chat-msg.tone-discovery { color: #dec8ff; }
.adv-chat-msg.tone-mission   { color: #b8e0f0; }
.adv-chat-msg.tone-player    { color: #9be4ff; }

/* Input row — collapsed by default (zero height), unfurls when chat is
   in the expanded state (Enter pressed). Slides down from under the
   feed so the player perceives "the chat opened."  */
.adv-chat-input-row {
  display: flex;
  align-items: center;
  height: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0 12px;
  background: rgba(8, 12, 18, 0.85);
  border-left: 2px solid rgba(120, 220, 255, 0.65);
  border-bottom: 1px solid rgba(120, 220, 255, 0.40);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease-out, height 0.22s ease-out,
              margin-top 0.22s ease-out;
}
.adv-chat.expanded .adv-chat-input-row {
  height: 28px;
  margin-top: 4px;
  pointer-events: auto;
  opacity: 1;
}
.adv-chat-input-prompt {
  color: rgba(120, 220, 255, 0.75);
  margin-right: 7px;
  font-size: 13px;
}
.adv-chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #d0e8ff;
  font-family: Bahnschrift, sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 0;
}
.adv-chat-input::placeholder {
  color: rgba(140, 160, 180, 0.50);
  letter-spacing: 1px;
}

/* =====================================================================
   ALERT BAR — siren-style combat warning. Top-third of screen, wide
   crimson bar pulsing red. Bold Bahnschrift caps title + caps subtitle.
   Distinct from showCinematic (gold celebratory) so alarms FEEL like
   alarms. Used for INTRUSION DETECTED, X ENGAGED, AMBUSH, boss mechanic
   warnings, etc.
   ===================================================================== */
.adv-alert {
  position: absolute;
  left: 0; right: 0;
  top: 22%;
  pointer-events: none;
  z-index: 65;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: scaleY(0.6) translateY(-12px);
  transform-origin: center top;
  transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.25, 1.4, 0.35, 1);
}
.adv-alert.show {
  opacity: 1;
  transform: scaleY(1) translateY(0);
}
.adv-alert-bar {
  position: relative;
  min-width: 520px;
  padding: 14px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg,
    rgba(28, 4, 4, 0) 0%,
    rgba(28, 4, 4, 0.92) 20%,
    rgba(40, 6, 6, 0.95) 50%,
    rgba(28, 4, 4, 0.92) 80%,
    rgba(28, 4, 4, 0) 100%);
  animation: adv-alert-throb 0.9s ease-in-out infinite;
}
.adv-alert-bar::before,
.adv-alert-bar::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 60, 60, 0) 0%,
    rgba(255, 70, 60, 0.85) 50%,
    rgba(255, 60, 60, 0) 100%);
  box-shadow: 0 0 14px 2px rgba(255, 60, 50, 0.65);
}
.adv-alert-bar::before { top: 0; }
.adv-alert-bar::after  { bottom: 0; }
@keyframes adv-alert-throb {
  0%, 100% { filter: brightness(1)   saturate(1); }
  50%      { filter: brightness(1.45) saturate(1.3); }
}
.adv-alert-title {
  font-family: Bahnschrift, sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #ffd8c8;
  text-transform: uppercase;
  text-shadow:
    0 0 14px rgba(255, 80, 60, 0.95),
    0 0 32px rgba(220, 40, 40, 0.75),
    0 2px 0 rgba(0, 0, 0, 0.85);
}
.adv-alert-sub {
  font-family: Bahnschrift, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 5px;
  color: rgba(255, 190, 170, 0.88);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Side warning markers — pulsing red triangles flank the bar. */
.adv-alert-marker {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: 32px;
  font-weight: 900;
  color: #ff5a48;
  text-shadow: 0 0 16px rgba(255, 80, 60, 0.95);
  animation: adv-alert-marker-pulse 0.8s ease-in-out infinite;
}
.adv-alert-marker.left  { left: 12px; }
.adv-alert-marker.right { right: 12px; }
@keyframes adv-alert-marker-pulse {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(0.9); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.15); }
}

/* =====================================================================
   LOCATION TITLE CARD — Elden Ring style place reveal. Large serif text
   centered low in the screen, soft fade-in/hold/fade-out, no audio sting
   or shake. Fires once per location (gated by save.discoveredLocations).
   ===================================================================== */
.adv-location-card {
  position: absolute;
  left: 0; right: 0;
  top: 56%;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  z-index: 62;
  text-align: center;
  font-family: 'Cormorant Garamond', 'EB Garamond', 'Cinzel', 'Trajan Pro', Georgia, serif;
  text-shadow:
    0 0 18px rgba(0, 0, 0, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.95);
  transition: opacity 0.9s ease-out, transform 1.2s ease-out;
}
.adv-location-card.show {
  opacity: 1;
  transform: translateY(0);
}
.adv-location-card-title {
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 4px;
  color: #f0e8d8;
  line-height: 1.1;
  /* Subtle inner glow via filter for that elden-ring softness */
  filter: drop-shadow(0 0 14px rgba(230, 210, 160, 0.32));
}
.adv-location-card-sub {
  margin-top: 12px;
  font-family: Bahnschrift, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 6px;
  color: rgba(220, 200, 160, 0.78);
  text-transform: uppercase;
}

/* Size pills — colour-matched to the size palette so the active class is
   visually unambiguous. The "all" pill stays neutral cyan. */
#hull-size-pills [data-hull-size="small"].active,
#weapon-size-pills [data-filter-size="small"].active {
  background: linear-gradient(180deg, #1a4870, #0d2c45);
  border-color: #4cb1ff; color: #cfe1f2;
}
#hull-size-pills [data-hull-size="medium"].active,
#weapon-size-pills [data-filter-size="medium"].active {
  background: linear-gradient(180deg, #5a3b15, #3a260d);
  border-color: #ffb14c; color: #ffd8a0;
}
#hull-size-pills [data-hull-size="large"].active,
#weapon-size-pills [data-filter-size="large"].active {
  background: linear-gradient(180deg, #5a1a2c, #3a0f1c);
  border-color: #ff5577; color: #ffb0c0;
}
#hull-size-pills [data-hull-size="xlarge"].active {
  background: linear-gradient(180deg, #3a1a5a, #1f0d35);
  border-color: #b070ff; color: #d8b8ff;
}

/* Compact 2-line hull cards — fits ~14 hulls in the visible area. */
.hull-row {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hull-row .hicon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.hull-row .hicon.empty { opacity: 0; }
.hull-row .hbody {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.hull-row-line1 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.hull-row-line1 .name { font-size: 12px; letter-spacing: 1px; color: #e6f5ff; }
.hull-row-line1 .hull-class {
  font-size: 9px; letter-spacing: 2px; color: #5a7491;
}
.hull-row-line2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 10px; color: #6e90b3;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden;
}
.hull-row-line2 .intr-chip {
  color: #b08aff;
  font-size: 9px; letter-spacing: 0.5px;
  text-overflow: ellipsis; overflow: hidden;
  flex-shrink: 1; min-width: 0;
}
/* Hull-row stat bars — three stacked mini-bars (HULL / SHIELD / SPEED)
   showing the hull's relative position in its size class. Player can
   scan the list and immediately see "this one's tanky / that one's fast"
   without parsing numbers. */
.hull-row-bars {
  display: flex; flex-direction: column;
  gap: 1px;
  margin: 3px 0 2px;
}
.hr-bar {
  height: 3px;
  background: rgba(140, 170, 200, 0.08);
  border: 1px solid rgba(140, 170, 200, 0.15);
  overflow: hidden;
}
.hr-bar > div {
  height: 100%;
  transition: width 200ms ease-out;
}
.hr-bar-hull   > div { background: linear-gradient(90deg, #4a8ec0, #65d9d2); }
.hr-bar-shield > div { background: linear-gradient(90deg, #4cb1ff, #9ed6ff); }
.hr-bar-speed  > div { background: linear-gradient(90deg, #65d97c, #ffd58a); }
/* Mount-count chips — one chip per mount-size showing how many of each
   the hull has. L/M/S color-coded to match the in-canvas mount glyphs
   (red / amber / cyan), letting the player triage by weapon size class
   at the same time as they read the stat bars. */
.hull-row-mounts { display: inline-flex; gap: 4px; }
.hull-row-mounts > span {
  font-size: 9px; letter-spacing: 1px; font-weight: 600;
  padding: 1px 5px;
  border: 1px solid;
  border-radius: 1px;
}
.hull-row-mounts .mtag-l { color: #ff5577; border-color: rgba(255, 85, 119, 0.55); background: rgba(255, 85, 119, 0.08); }
.hull-row-mounts .mtag-m { color: #ffb14c; border-color: rgba(255, 177, 76, 0.55); background: rgba(255, 177, 76, 0.08); }
.hull-row-mounts .mtag-s { color: #4cb1ff; border-color: rgba(76, 177, 255, 0.55); background: rgba(76, 177, 255, 0.08); }

.stats {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(3,6,10,0.7);
  border: 1px solid #1c2c3f;
  font-size: 12px;
  color: #8aa9c6;
}
.stats .stat { display: flex; justify-content: space-between; padding: 1px 0; }
.stats .stat span:last-child { color: #cfe1f2; }
/* Hull description / warnings panel — now the only thing under the hull list
   since the floating stage-stats card holds the numeric readout. Kept tight
   so it doesn't crowd the hull list above. */
.stats .hull-desc {
  font-size: 12px; line-height: 1.45;
  color: #cfe1f2;
  font-style: italic;
}
.stats .hull-warn {
  font-size: 10px; letter-spacing: 2px; font-weight: 600;
  margin-bottom: 6px;
  padding: 4px 6px;
  border: 1px solid;
}
.stats .hull-warn.warn-red {
  color: #ff5577;
  border-color: rgba(255, 85, 119, 0.55);
  background: rgba(255, 85, 119, 0.08);
}
.stats .hull-warn.warn-amber {
  color: #ffb14c;
  border-color: rgba(255, 177, 76, 0.55);
  background: rgba(255, 177, 76, 0.08);
}

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud.hidden { display: none; }
#hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 14px; padding: 14px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.bar-block { display: flex; flex-direction: column; min-width: 220px; }
.bar-label { font-size: 10px; letter-spacing: 4px; color: #8aa9c6; }
.bar { height: 10px; border: 1px solid #2c425d; background: rgba(0,0,0,0.5); margin-top: 3px; }
.bar-fill { height: 100%; transition: width 80ms linear; }
.bar-fill.hull { background: linear-gradient(90deg, #65d97c, #2c9c47); }
.bar-fill.shield { background: linear-gradient(90deg, #4cb1ff, #1e6fb6); }
.bar-fill.flux { background: linear-gradient(90deg, #ffb14c, #c47120); }
.bar-fill.flux.high { background: linear-gradient(90deg, #ff5577, #b21d3a); }

.status { color: #ff9966; font-size: 12px; letter-spacing: 4px; align-self: center; padding-left: 12px; min-width: 120px; }

#hud-corner {
  position: absolute; top: 14px; right: 22px;
  text-align: right; font-size: 12px; color: #8aa9c6; letter-spacing: 2px;
}
#team-score { font-size: 14px; }
#team-score .red { color: #ff5577; }
#team-score .blue { color: #4cb1ff; }
#speed-readout { margin-top: 4px; }

.banner {
  position: absolute; top: 35%; left: 0; right: 0;
  text-align: center; font-size: 56px; letter-spacing: 10px;
  color: #e6f5ff;
  text-shadow: 0 0 20px rgba(80, 170, 255, 0.7);
  opacity: 0;
  transition: opacity 200ms ease;
}
.banner.show { opacity: 1; }

/* Damage-control toast log — stacks short notifications when the player's
   subsystems get damaged. Right-edge column, slides up + fades over ~3s. */
.damage-log {
  position: absolute; top: 90px; right: 18px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; z-index: 50;
  max-width: 280px;
  font: bold 12px Bahnschrift, sans-serif;
  letter-spacing: 1.5px;
}
.damage-toast {
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(80, 20, 30, 0.85), rgba(40, 10, 20, 0.7));
  border-left: 3px solid #ff6644;
  color: #ffd5ce;
  text-shadow: 0 0 8px rgba(255, 100, 60, 0.4);
  opacity: 0; transform: translateX(20px);
  animation: dmgToastSlide 3.0s ease-out forwards;
  white-space: nowrap;
}
.damage-toast.warn  { border-left-color: #ffaa44; color: #ffe8c0; }
.damage-toast.crit  { border-left-color: #ff3344; color: #ffe0e0;
  background: linear-gradient(90deg, rgba(120, 30, 40, 0.9), rgba(60, 15, 25, 0.75)); }
/* "good" = positive feedback when the player disables an enemy subsystem.
   Soft cyan-green, distinguishable from the red/orange "you took damage" toasts. */
.damage-toast.good {
  border-left-color: #65d97c;
  color: #d8ffe2;
  background: linear-gradient(90deg, rgba(20, 60, 35, 0.85), rgba(10, 40, 22, 0.7));
}
@keyframes dmgToastSlide {
  0%   { opacity: 0; transform: translateX(20px); }
  10%  { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-10px); }
}

/* tabs in customize loadout panel */
.intrinsic-panel {
  border: 1px solid #2c425d;
  background: linear-gradient(180deg, rgba(40,30,70,0.4), rgba(20,15,35,0.7));
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #b08aff;
}
.intrinsic-panel .label { color: #6e90b3; letter-spacing: 3px; font-size: 9px; }
.intrinsic-panel .name { color: #d0a0ff; font-size: 13px; letter-spacing: 1px; margin-top: 2px; }
.intrinsic-panel .desc { color: #cfe1f2; font-size: 11px; margin-top: 4px; line-height: 1.4; }
.tab-bar { display: flex; gap: 0; margin-bottom: 8px; }
.tab {
  flex: 1; min-width: 0;
  padding: 8px 4px;
  background: #0a121b;
  border: 1px solid #1c2c3f;
  color: #6e90b3;
  font: inherit; font-size: 10px; letter-spacing: 1px;
  cursor: pointer; transition: 80ms ease;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.tab + .tab { border-left: 0; }
.tab:hover { color: #cfe1f2; background: #0d1828; }
.tab.active {
  background: linear-gradient(180deg, #103450, #082236);
  color: #e6f5ff;
  border-color: #4cb1ff;
}
.tab-content.hidden { display: none; }
.row .desc { font-size: 10px; color: #8aa9c6; margin-top: 4px; line-height: 1.35; }
.row.installed { border-color: #65d97c; background: rgba(20,52,30,0.4); }
.row.full-width { width: 100%; }
.row.empty { color: #5a7491; font-style: italic; }

/* Compact slot rows — one line per slot in the WEAPONS tab */
.slot-hint {
  font-size: 10px; color: #5a7491; letter-spacing: 1px;
  padding: 4px 4px 6px 2px;
}
.slot-row {
  display: grid;
  grid-template-columns: 22px 22px 28px 1fr auto auto 18px;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid #1c2c3f;
  background: rgba(8,12,18,0.5);
  cursor: pointer;
  transition: 80ms ease;
  font-size: 12px;
  border-left-width: 3px;
  border-left-color: #2c425d;
}
.slot-row .sicon {
  width: 28px; height: 28px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.slot-row .sicon.empty { opacity: 0; }
.slot-row + .slot-row { margin-top: 3px; }
.slot-row.size-small  { border-left-color: #4cb1ff; }
.slot-row.size-medium { border-left-color: #ffb14c; }
.slot-row.size-large  { border-left-color: #ff5577; }
.slot-row:hover, .slot-row.hover {
  background: rgba(15,24,35,0.8);
  border-color: #4cb1ff;
}
.slot-row.selected {
  background: rgba(20,52,80,0.85);
  border-color: #4cb1ff;
  box-shadow: 0 0 0 1px rgba(76,177,255,0.30) inset;
}
.slot-row.empty .sname { color: #5a7491; font-style: italic; }
/* Empty slot with a remembered last-weapon — show the replay hint in a
   slightly brighter teal italic so it reads as "right-click and you'll
   get this back" without screaming for attention. */
.slot-row .slot-replay-hint {
  color: #6e90b3;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.slot-row .sn {
  text-align: center;
  font-weight: bold;
  color: #cfe1f2;
  font-size: 11px;
}
.slot-row .sb {
  text-align: center;
  font-size: 10px;
  color: #8aa9c6;
  background: rgba(0,0,0,0.4);
  padding: 1px 0;
  letter-spacing: 1px;
}
.slot-row .sname {
  color: #e6f5ff;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-row .srm {
  text-align: center;
  color: #5a7491;
  font-size: 14px;
  line-height: 1;
  transition: 80ms ease;
}
.slot-row .srm:hover { color: #ff5577; }

/* AUTOFIRE controls — a small "AUTO" toggle pill + a priority pill that appears
   when autofire is on. Dim/grey when off, cyan-lit when armed. */
.slot-row .aft {
  text-align: center;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #5a7491;
  border: 1px solid #2c425d;
  border-radius: 3px;
  padding: 2px 5px;
  line-height: 1;
  transition: 80ms ease;
  white-space: nowrap;
}
.slot-row .aft:hover { border-color: #4cb1ff; color: #9cc3e6; }
.slot-row .aft.on {
  color: #06121c;
  background: #36d399;
  border-color: #36d399;
  box-shadow: 0 0 6px rgba(54,211,153,0.5);
}
.slot-row .afp {
  text-align: center;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #ffce5a;
  border: 1px solid #5a4a2c;
  border-radius: 3px;
  padding: 2px 4px;
  line-height: 1;
  transition: 80ms ease;
  white-space: nowrap;
}
.slot-row .afp:hover { border-color: #ffce5a; color: #fff0c0; }
.slot-row .aft.blank, .slot-row .afp.blank {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

/* List section header inside the weapons tab — clarifies which slot you're outfitting */
.list-header {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 2px;
  color: #8aa9c6;
  padding: 6px 4px 4px;
  border-bottom: 1px solid #1c2c3f;
  margin-bottom: 4px;
}

/* OP budget display */
.op-budget {
  background: rgba(3,6,10,0.6);
  border: 1px solid #1c2c3f;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.op-row { display: flex; justify-content: space-between; align-items: center; }
.op-label { font-size: 9px; letter-spacing: 3px; color: #6e90b3; }
.op-readout { font-size: 16px; font-weight: bold; letter-spacing: 1px; }
.op-bar {
  height: 6px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #1c2c3f;
  margin: 6px 0 4px 0;
}
.op-bar-fill {
  height: 100%;
  transition: width 120ms linear;
}
.op-hint { font-size: 10px; color: #8aa9c6; letter-spacing: 1px; }
.op-cost {
  display: inline-block;
  background: rgba(255,177,76,0.18);
  border: 1px solid #c47120;
  color: #ffb14c;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Hullmod tiers — colored stripe on the left edge */
.row.mod-tier-1 { border-left: 3px solid #4cb1ff; }
.row.mod-tier-2 { border-left: 3px solid #ffb14c; }
.row.mod-tier-3 { border-left: 3px solid #b08aff; }

.equipped-badge {
  display: inline-block;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 1px;
  background: #65d97c;
  color: #0a121b;
  margin-left: 6px;
  border-radius: 1px;
  vertical-align: middle;
}
/* Inventory count badge — Phase 3 items-as-physical. Shows how many of a
   given item the player has available in their pool (not equipped). */
.inv-count {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 1px;
  background: rgba(120, 184, 255, 0.18);
  border: 1px solid #4789c4;
  color: #9ed6ff;
  margin-left: 6px;
  border-radius: 1px;
  vertical-align: middle;
}

#results h2 { font-size: 56px; letter-spacing: 12px; margin: 0 0 18px 0; }
.results-detail { color: #8aa9c6; margin-bottom: 30px; font-size: 14px; letter-spacing: 2px; }
.results-detail .win { color: #65d97c; }
.results-detail .lose { color: #ff5577; }

/* ESCORT mode HUD — top-center timer/payload bar/progress + corner respawn */
.escort-hud {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: stretch;
  background: rgba(2, 5, 12, 0.78);
  border: 1px solid #2c425d;
  padding: 10px 16px;
  font-family: Bahnschrift, sans-serif;
  z-index: 50;
  pointer-events: none;
}
.escort-hud.hidden { display: none; }
.escort-timer-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 70px;
  border-right: 1px solid #1c2c3f;
  padding-right: 14px;
}
.escort-timer-label { font-size: 9px; color: #5a7491; letter-spacing: 3px; }
.escort-timer { font-size: 28px; color: #ffd58a; font-weight: bold; line-height: 1; letter-spacing: 2px; }
.escort-payload-block {
  min-width: 360px;
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.payload-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 3px;
}
.payload-name { color: #cfe1f2; font-weight: bold; }
.payload-status { font-weight: bold; letter-spacing: 2px; }
.payload-status.moving    { color: #65d97c; }
.payload-status.contested { color: #ffd58a; text-shadow: 0 0 8px #ffd58a88; }
.payload-status.idle      { color: #7a92a8; }
.payload-status.destroyed { color: #ff5577; }
.payload-hp-bar {
  height: 8px; background: #050810; border: 1px solid #1c2c3f;
}
#payload-hp-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff7755, #ffd58a);
  transition: width 0.18s;
}
.payload-progress {
  height: 4px; background: #050810; border: 1px solid #1c2c3f;
}
#payload-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4cb1ff, #9ed6ff);
  transition: width 0.25s;
}
.respawn-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 90px;
  border-left: 1px solid #1c2c3f;
  padding-left: 14px;
  margin-left: 0;
}
.respawn-block.hidden { display: none; }
.respawn-label { font-size: 9px; color: #5a7491; letter-spacing: 3px; }
.respawn-counter {
  font-size: 32px; color: #ff7755; font-weight: bold; line-height: 1;
}

/* SCOREBOARD overlay — hold TAB during escort */
.scoreboard {
  position: fixed; inset: 0;
  background: rgba(2, 5, 12, 0.85);
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.scoreboard.hidden { display: none; }
.scoreboard-inner {
  background: linear-gradient(180deg, #060a10, #02050a);
  border: 1px solid #2c425d;
  padding: 22px 28px;
  min-width: 720px;
  font-family: Bahnschrift, sans-serif;
}
.scoreboard-header {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid #1c2c3f;
  padding-bottom: 10px; margin-bottom: 14px;
}
.scoreboard-header h3 { margin: 0; font-size: 18px; letter-spacing: 6px; color: #cfe1f2; }
.scoreboard-time { font-size: 18px; color: #ffd58a; letter-spacing: 3px; }
.scoreboard-team { margin-bottom: 14px; }
.scoreboard-team-label {
  font-size: 11px; letter-spacing: 4px; padding: 4px 10px;
  display: inline-block; margin-bottom: 4px;
  font-weight: bold;
}
.scoreboard-team-label.attackers { background: #4cb1ff; color: #050810; }
.scoreboard-team-label.defenders { background: #ff5577; color: #050810; }
.scoreboard table {
  width: 100%; border-collapse: collapse; color: #b6cfe6;
  font-size: 12px; letter-spacing: 1px;
}
.scoreboard th {
  text-align: left; font-weight: bold; color: #5a7491;
  padding: 4px 10px; font-size: 10px; letter-spacing: 2px;
  border-bottom: 1px dashed #1c2c3f;
}
.scoreboard td {
  padding: 5px 10px; border-bottom: 1px dotted rgba(76,177,255,0.08);
}
.scoreboard tr.me td { color: #ffd58a; font-weight: bold; }
.scoreboard tr.dead td { color: #5a7491; }
.scoreboard tr.dead td:first-child::after { content: ' ✕'; color: #ff5577; }

/* Results — escort stat rows */
.results-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  font-size: 13px; letter-spacing: 2px;
  color: #8aa9c6;
}
.results-stat-row strong { color: #cfe1f2; font-size: 16px; letter-spacing: 1px; }

/* RESULTS — make VICTORY hit hard */
#results .win, #results .lose {
  display: inline-block;
  text-shadow:
    0 0 24px currentColor,
    0 0 60px currentColor,
    0 0 120px currentColor;
}
#results .win  { color: #8effb3; }
#results .lose { color: #ff5577; }

#results.result-win #results-title {
  animation: victory-slam 1.1s cubic-bezier(0.18, 1.0, 0.32, 1.6) both;
}
#results.result-win #results-title .win {
  animation: victory-pulse 1.6s ease-in-out 0.6s infinite;
}
#results.result-win #results-detail {
  animation: results-rise 0.7s ease-out 0.55s both;
}
#results.result-lose #results-title {
  animation: defeat-fall 0.9s cubic-bezier(0.4, 0.0, 0.6, 1) both;
}

@keyframes victory-slam {
  0%   { transform: scale(0.4) translateY(-40px); opacity: 0; filter: blur(12px); letter-spacing: 60px; }
  35%  { transform: scale(1.25) translateY(0);   opacity: 1; filter: blur(0);   letter-spacing: 18px; }
  60%  { transform: scale(0.95);                                                  letter-spacing: 12px; }
  100% { transform: scale(1.0);  translate: 0;                                    letter-spacing: 12px; }
}
@keyframes victory-pulse {
  0%, 100% { text-shadow: 0 0 24px currentColor, 0 0 60px currentColor, 0 0 120px currentColor; }
  50%      { text-shadow: 0 0 38px currentColor, 0 0 90px currentColor, 0 0 180px currentColor; }
}
@keyframes defeat-fall {
  0%   { transform: scale(1.4) translateY(-20px); opacity: 0; filter: blur(8px); }
  100% { transform: scale(1.0) translateY(0);    opacity: 1; filter: blur(0); }
}
@keyframes results-rise {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Brighter win-sweep behind the VICTORY text */
#results.result-win::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(120,255,170,0.18) 0%, rgba(0,0,0,0) 55%);
  animation: results-flash 0.8s ease-out both;
  pointer-events: none;
}
@keyframes results-flash {
  0%   { opacity: 1; }
  60%  { opacity: 0.7; }
  100% { opacity: 0.35; }
}

/* Escort HUD — round / score block */
.escort-round-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 100px;
  border-right: 1px solid #1c2c3f;
  padding-right: 14px;
}
.escort-round-label { font-size: 9px; color: #5a7491; letter-spacing: 3px; }
.escort-round-score {
  display: flex; gap: 8px; align-items: center;
  font-size: 14px; letter-spacing: 1px; color: #cfe1f2;
}
.escort-round-num { font-weight: bold; color: #ffd58a; }
.escort-round-mark { font-size: 11px; }
#round-mark-att { color: #4cb1ff; }
#round-mark-def { color: #ff5577; }

/* Weapon-group selector — bottom-center strip */
.weapon-groups {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 40;
  pointer-events: none;
  font-family: Bahnschrift, sans-serif;
}
.weapon-groups.hidden { display: none; }
.wg-card {
  min-width: 86px;
  background: rgba(2, 5, 12, 0.78);
  border: 1px solid #2c425d;
  border-bottom: 2px solid #4cb1ff44;
  padding: 6px 10px 4px 10px;
  display: flex; flex-direction: column; gap: 2px;
  transition: 80ms ease;
}
.wg-card.active {
  border-color: #ffd58a;
  border-bottom-color: #ffd58a;
  background: linear-gradient(180deg, rgba(40,30,10,0.88), rgba(2,5,12,0.92));
  box-shadow: 0 0 18px rgba(255, 213, 138, 0.32);
  transform: translateY(-2px);
}
.wg-key {
  font-size: 10px; color: #5a7491; letter-spacing: 2px;
  text-align: right;
  border: 1px solid #2c425d;
  padding: 1px 6px;
  align-self: flex-end;
  min-width: 22px;
  background: rgba(0,0,0,0.4);
}
.wg-card.active .wg-key { color: #ffd58a; border-color: #ffd58a; }
.wg-label { font-size: 11px; font-weight: bold; color: #cfe1f2; letter-spacing: 1px; }
.wg-card.active .wg-label { color: #fff5cc; }
.wg-meta { font-size: 9px; color: #7a92a8; letter-spacing: 1px; }
.wg-cd { height: 3px; background: #050810; border: 1px solid #1c2c3f; }
.wg-cd-fill { height: 100%; background: linear-gradient(90deg, #4cb1ff, #9ed6ff); width: 0%; transition: width 0.10s; }
.wg-card.active .wg-cd-fill { background: linear-gradient(90deg, #ffd58a, #fff5cc); }

/* Subsystem-damage states for the weapon group selector. .disabled-all =
   every mount in the group is offline (red); .disabled-some = partial
   damage (orange). The bar shows a draining repair countdown. */
.wg-card.disabled-some {
  border-color: rgba(255, 170, 70, 0.55);
  background: linear-gradient(180deg, rgba(70, 35, 10, 0.55), rgba(40, 20, 8, 0.65));
}
.wg-card.disabled-some .wg-label { color: #ffcc88; }
.wg-card.disabled-some .wg-cd-fill {
  background: linear-gradient(90deg, #ffaa44, #ffcc88);
}
.wg-card.disabled-all {
  border-color: rgba(255, 80, 80, 0.7);
  background: linear-gradient(180deg, rgba(80, 20, 25, 0.65), rgba(45, 12, 18, 0.75));
  animation: wgDisabledPulse 1.4s ease-in-out infinite;
}
.wg-card.disabled-all .wg-label { color: #ff7a7a; text-shadow: 0 0 6px rgba(255, 80, 80, 0.5); }
.wg-card.disabled-all .wg-key   { color: #ff7a7a; border-color: #ff5544; }
.wg-card.disabled-all .wg-cd-fill {
  background: linear-gradient(90deg, #ff5544, #ff8866);
}
.wg-card.disabled-all .wg-meta { color: #ffb0a8; letter-spacing: 1px; }
@keyframes wgDisabledPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 80, 80, 0); }
  50%      { box-shadow: 0 0 12px rgba(255, 80, 80, 0.45); }
}
/* Reload state — soft amber flash + amber bar fill so the player reads
   "wait for the reload" at a glance, distinct from disabled (red). */
.wg-card.reloading {
  border-color: rgba(255, 215, 130, 0.55);
  background: linear-gradient(180deg, rgba(60, 45, 12, 0.55), rgba(38, 28, 10, 0.65));
}
.wg-card.reloading .wg-label { color: #ffd890; }
.wg-card.reloading .wg-cd-fill {
  background: linear-gradient(90deg, #ffaa44, #ffd58a);
}
.wg-card.reloading .wg-meta { color: #ffd890; }

/* =============================================================
   SHIP SELECT screen — Overwatch-inspired pre-match pick.
   Layout:
     ┌─ HEADER  (mode label + hovered ship name) ─────────────┐
     │                                                        │
     │             SEL-STAGE  (large ship preview)            │
     │                                                        │
     ├─ ROSTER (4 size buckets, hex-style cards) ─────────────┤
     ├─ ACTIONS (BACK · EDIT · DEPLOY) ───────────────────────┤
     └────────────────────────────────────────────────────────┘
   Loading overlay sits on top of the whole panel when needed.
   ============================================================= */
#ship-select.screen {
  display: flex; flex-direction: column;
  inset: 0;
  background: linear-gradient(180deg, #050a14 0%, #02050a 100%);
  padding: 18px 24px;
  gap: 12px;
}
/* ID-selector specificity (0,1,1,0) beats `.screen.hidden` (0,0,2,0), so the
   display:flex above wins even when .hidden is added. Re-assert here at
   matching ID specificity so the hidden class actually hides the panel. */
#ship-select.screen.hidden { display: none; }
.sel-header {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid #1c2c3f;
  padding-bottom: 10px;
}
.sel-header-left { display: flex; flex-direction: column; gap: 2px; }
.sel-title {
  margin: 0; font-size: 22px; letter-spacing: 8px; color: #4cb1ff;
  font-weight: 600;
}
.sel-subtitle {
  font-size: 11px; letter-spacing: 4px; color: #5a7491;
}
.sel-header-right .sel-hover-name {
  font-size: 16px; letter-spacing: 4px; color: #cfe1f2;
  text-shadow: 0 0 8px rgba(76, 177, 255, 0.4);
  min-height: 22px;     /* reserve so layout doesn't bounce when name appears */
}
.sel-stage {
  flex: 1; min-height: 0;
  position: relative;
  background:
    radial-gradient(ellipse at center, rgba(20, 35, 55, 0.55), rgba(3, 6, 10, 0.95) 70%),
    rgba(3, 6, 10, 0.7);
  border: 1px solid #1c2c3f;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sel-stage canvas {
  width: 100%; height: 100%;
  display: block;
}
.sel-stage-info {
  position: absolute; top: 14px; left: 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #1c2c3f;
  padding: 10px 14px;
  font-size: 11px; letter-spacing: 1px; color: #8aa9c6;
  min-width: 240px;
  max-width: 360px;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
.sel-stage-info .sel-info-name {
  font-size: 14px; letter-spacing: 3px; color: #e6f5ff;
  margin-bottom: 4px;
}
.sel-stage-info .sel-info-class {
  font-size: 10px; letter-spacing: 2px; color: #4cb1ff; margin-bottom: 6px;
}
.sel-stage-info .sel-info-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10px; color: #6e90b3;
}
.sel-stage-info .sel-info-row .v { color: #cfe1f2; }
.sel-stage-info .sel-info-intr {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(76, 177, 255, 0.15);
  font-size: 10px; color: #cfe1f2; line-height: 1.5;
}
/* ---- Roster: four side-by-side size buckets ------------- */
.sel-roster {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid #1c2c3f;
}
.sel-group {
  display: flex; align-items: center; gap: 10px;
  flex: 1;
}
.sel-group-icon {
  width: 28px; height: 32px;
  /* Hex shape — matches the loadout hex-bar in fitting room */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(28, 44, 63, 0.85);
  display: flex; align-items: center; justify-content: center;
  font-family: Bahnschrift, sans-serif;
  font-size: 13px; letter-spacing: 1px; font-weight: 600;
  color: #5a7491;
  flex-shrink: 0;
}
.sel-group[data-size="small"]  .sel-group-icon { color: #4cb1ff; }
.sel-group[data-size="medium"] .sel-group-icon { color: #ffb14c; }
.sel-group[data-size="large"]  .sel-group-icon { color: #ff5577; }
.sel-group[data-size="xlarge"] .sel-group-icon { color: #b070ff; }
.sel-group-cards {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: 1; min-height: 70px;
}
/* Empty-state placeholder when a size bucket has zero saved loadouts. */
.sel-group-empty {
  font-size: 10px; letter-spacing: 1.5px; color: #2c425d;
  padding: 24px 6px; opacity: 0.6;
}
/* ---- Ship card (one per saved loadout) ----------------- */
.sel-card {
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 64px;
  position: relative;
  transition: transform 100ms ease;
}
.sel-card:hover { transform: translateY(-3px); }
.sel-card-hex {
  width: 56px; height: 64px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, #1a2c44, #0a1421);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  filter: brightness(0.9);
  transition: filter 100ms ease;
}
.sel-card-hex::before {
  content: '';
  position: absolute; inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, #2a4060, #122236);
  z-index: 0;
}
.sel-card:hover .sel-card-hex { filter: brightness(1.2); }
.sel-card.selected .sel-card-hex {
  filter: drop-shadow(0 0 16px rgba(76, 177, 255, 0.95))
          drop-shadow(0 0 6px rgba(76, 177, 255, 0.7));
}
.sel-card.selected .sel-card-hex::before {
  background: linear-gradient(180deg, #4cb1ff, #1f5d96);
}
.sel-card-glyphs {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
  max-width: 38px;
}
.sel-card-glyph {
  width: 5px; height: 5px; border-radius: 50%;
}
.sel-card-glyph.s { background: #4cb1ff; }
.sel-card-glyph.m { background: #ffb14c; }
.sel-card-glyph.l { background: #ff5577; }
.sel-card-name {
  font-family: Bahnschrift, sans-serif;
  font-size: 8px; letter-spacing: 1px;
  color: #8aa9c6; text-transform: uppercase;
  max-width: 64px; text-align: center;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.sel-card.selected .sel-card-name { color: #4cb1ff; font-weight: 600; }
.sel-card-hull {
  font-size: 7px; letter-spacing: 1.5px; color: #4a6680;
}
/* Size-tier accent on the card border tint */
.sel-card[data-size="small"]  .sel-card-hex::before { background: linear-gradient(180deg, #1c4060, #0a1c30); }
.sel-card[data-size="medium"] .sel-card-hex::before { background: linear-gradient(180deg, #5a3b15, #2c1d0a); }
.sel-card[data-size="large"]  .sel-card-hex::before { background: linear-gradient(180deg, #5a1a2c, #2c0d16); }
.sel-card[data-size="xlarge"] .sel-card-hex::before { background: linear-gradient(180deg, #3a1a5a, #1d0d2c); }
/* When SELECTED, override with the strong cyan glow regardless of size */
.sel-card.selected[data-size]              .sel-card-hex::before {
  background: linear-gradient(180deg, #4cb1ff, #1f5d96);
}

/* ---- Bottom action bar ---- */
.sel-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px solid #1c2c3f;
}
.sel-actions .btn.primary {
  min-width: 200px;
  letter-spacing: 4px;
}
.sel-actions .btn.primary:disabled {
  opacity: 0.4; cursor: not-allowed;
  filter: grayscale(0.5);
}
/* ---- Loading overlay (gates Deploy until preload finishes) ---- */
.sel-loading-overlay {
  position: absolute; inset: 0;
  background: rgba(2, 5, 12, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  z-index: 10;
  backdrop-filter: blur(6px);
  font-family: Bahnschrift, sans-serif;
}
.sel-loading-overlay.hidden { display: none; }
.sel-loading-text {
  font-size: 14px; letter-spacing: 6px; color: #4cb1ff;
}
.sel-loading-theme {
  font-size: 28px; letter-spacing: 8px; color: #cfe1f2;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(76, 177, 255, 0.5);
}
.sel-loading-bar {
  width: 320px; height: 4px;
  background: rgba(76, 177, 255, 0.15);
  overflow: hidden;
  margin-top: 4px;
}
.sel-loading-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4cb1ff, #80d8ff);
  transition: width 200ms ease-out;
  box-shadow: 0 0 8px rgba(76, 177, 255, 0.7);
}
.sel-loading-detail {
  font-size: 9px; letter-spacing: 2px; color: #5a7491;
  min-height: 14px;
}

/* ============================================================
   ADVENTURE MODE — Phase 1 scaffold styles
   Full-viewport canvas + DOM HUD overlays. The .screen base rule
   centers content with flex; #adventure overrides that since the
   canvas fills everything and the HUD is absolute-positioned on top.
   ============================================================ */
#adventure {
  display: block;
  position: absolute; inset: 0;
  background: #02030a;
  padding: 0;
}
#adventure.hidden { display: none; }
#adv-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: none;
}
.adv-hud {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* MAP MODES own the whole screen. .adv-hud is z-index:5 and the cine banner
   is z-70 — both sit above the canvas the chart is drawn on, so the HUD row
   (credits / fuel / heat / system name) and any cinematic title card would
   paint straight over the starmap. Driven by _syncMapModeChrome() in
   adventure.js, which toggles this class per FRAME from state.mode, so it
   can never desync from the mode the way the console-level hide did. */
#adventure.adv-map-mode .adv-hud { display: none !important; }
#adventure.adv-map-mode .adv-cine-banner { display: none !important; }
.adv-hud-row {
  /* Top-right pill row. The arena #hud-corner (team-score + speed-readout)
     is hidden in adventure context (rule below), so this row owns the
     top-right corner cleanly. Speed gets canvas-rendered in the armor
     widget instead. */
  position: absolute; top: 14px; right: 14px;
  left: auto;
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
  z-index: 10;
}
/* Adventure overrides arena's #hud-corner — when #adventure is visible
   (not .hidden) and #hud is showing alongside it, the team-score +
   speed-readout slot is replaced by adv-hud-row + the in-canvas speed
   text on the armor widget. The general-sibling selector (~) targets
   the #hud that comes after #adventure in DOM order. */
#adventure:not(.hidden) ~ #hud #hud-corner { display: none; }
/* Belt-and-suspenders — when any non-arena screen is visible, force the
   arena #hud off regardless of its own class state. JS-side hide calls
   are still preferred (they also clear the DOM), but this rule means a
   stale setHudVisible(true) from the last flight frame can't bleed into
   customize / ship-select / results / menu visually. */
#customize:not(.hidden)   ~ #hud,
#ship-select:not(.hidden) ~ #hud,
#results:not(.hidden)     ~ #hud,
#menu:not(.hidden)        ~ #hud { display: none !important; }
.adv-mission {
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  color: #ff7755;
  background: rgba(40, 18, 18, 0.7);
  border: 1px solid rgba(255, 119, 85, 0.6);
  padding: 6px 14px;
  text-shadow: 0 0 8px rgba(255, 119, 85, 0.4);
}
.adv-mission:empty { display: none; }
.adv-hud-row > * { pointer-events: auto; }
.adv-credits {
  font-family: Bahnschrift, sans-serif;
  font-size: 14px; letter-spacing: 3px; font-weight: 600;
  color: #ffd58a;
  background: rgba(8, 12, 18, 0.7);
  border: 1px solid rgba(255, 213, 138, 0.45);
  padding: 6px 14px;
  text-shadow: 0 0 8px rgba(255, 213, 138, 0.4);
}
/* HEAT bar — wanted-level gauge. Mirrors the fuel bar so the HUD reads as a
   set. Always visible (dim/amber when cold), warming to red + pulse at arrest. */
.adv-heat {
  display: flex; align-items: center; gap: 8px;
  background: rgba(18, 10, 8, 0.7);
  border: 1px solid rgba(200, 150, 80, 0.4);
  padding: 6px 12px;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 2px;
}
.adv-heat-label { color: #c79a5a; }
.adv-heat-track {
  width: 110px; height: 6px;
  background: rgba(40, 26, 16, 0.85);
  border: 1px solid rgba(120, 80, 40, 0.5);
}
.adv-heat-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #d8a050, #e8c890);
  transition: width 220ms ease-out;
}
.adv-heat-amt { color: #f0d090; font-weight: 600; min-width: 104px; text-align: right; letter-spacing: 1.5px; white-space: nowrap; }
.adv-heat.cold { opacity: 0.6; }
.adv-heat.cold .adv-heat-label { color: #8a7a5a; }
.adv-heat.wanted {
  border-color: rgba(255, 70, 70, 0.7);
  background: rgba(28, 8, 8, 0.8);
  animation: advHeatPulse 1.1s ease-in-out infinite;
}
.adv-heat.wanted .adv-heat-label,
.adv-heat.wanted .adv-heat-amt { color: #ff6a6a; text-shadow: 0 0 8px rgba(255, 70, 70, 0.6); }
@keyframes advHeatPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.adv-fuel {
  display: flex; align-items: center; gap: 8px;
  background: rgba(8, 12, 18, 0.7);
  border: 1px solid #1c2c3f;
  padding: 6px 12px;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 2px;
}
.adv-fuel-label { color: #5a7491; }
.adv-fuel-track {
  width: 140px; height: 6px;
  background: rgba(20, 30, 45, 0.8);
  border: 1px solid #1c2c3f;
}
.adv-fuel-fill {
  height: 100%;
  background: linear-gradient(90deg, #4cb1ff, #9ed6ff);
  width: 100%;
  transition: width 200ms ease-out;
}
.adv-fuel-amt { color: #cfe1f2; font-weight: 600; min-width: 38px; text-align: right; }
.adv-location {
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 3px;
  color: #8aa9c6;
  background: rgba(8, 12, 18, 0.7);
  border: 1px solid #1c2c3f;
  padding: 6px 14px;
}
/* GO DARK — stealth greyscale overlay (toggled by _setGoDarkOverlay). */
.go-dark-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity 0.45s ease;
  backdrop-filter: grayscale(0.72) brightness(0.82) contrast(1.04);
  -webkit-backdrop-filter: grayscale(0.72) brightness(0.82) contrast(1.04);
  box-shadow: inset 0 0 240px rgba(0, 0, 0, 0.6);
}
.go-dark-overlay.active { opacity: 1; }
/* Vertical ability row — sits left of the bottom-right minimap. */
.adv-ability-row {
  position: absolute; right: 204px; bottom: 20px; z-index: 8;
  display: flex; flex-direction: column; gap: 7px;
}
.adv-ability {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 58px; padding: 7px 4px 5px;
  background: rgba(8, 12, 18, 0.72); border: 1px solid #1c2c3f; border-radius: 5px;
  color: #8aa9c6; cursor: pointer; font-family: Bahnschrift, sans-serif;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.adv-ability:hover { border-color: #3e5a78; color: #d9ecff; background: rgba(20, 30, 44, 0.85); }
.adv-ability .aa-icon { font-size: 18px; line-height: 1; color: #9ec4e8; }
.adv-ability .aa-label { font-size: 7.5px; letter-spacing: 1px; }
.adv-ability .aa-key {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #cfe1f2;
  border: 1px solid #2c4258; border-radius: 3px; padding: 0 5px; margin-top: 2px;
  background: rgba(20, 30, 45, 0.7);
}
.adv-ability.active {
  border-color: #6a4aa6; background: rgba(40, 24, 60, 0.82); color: #d9c0ff;
  box-shadow: 0 0 12px rgba(120, 80, 200, 0.35);
}
.adv-ability.active .aa-icon { color: #c8a8ff; }
/* CRUISE — engaged = cyan; charging = pulsing cyan during the 3s spool. */
#adv-ab-cruise.active {
  border-color: #3a8ab0; background: rgba(20, 44, 60, 0.85); color: #bfeaff;
  box-shadow: 0 0 12px rgba(80, 200, 255, 0.4);
}
#adv-ab-cruise.active .aa-icon { color: #8fe6ff; }
.adv-ability.charging { animation: cruiseSpool 0.5s ease-in-out infinite; }
/* CRUISE lives bottom-right, just above the minimap (180px + 16px pad). */
.adv-cruise-corner {
  position: absolute; right: 16px; bottom: 206px; z-index: 12; display: none;
}
@keyframes cruiseSpool {
  0%,100% { box-shadow: 0 0 6px rgba(80,200,255,0.25); border-color: #2a5a72; }
  50%     { box-shadow: 0 0 16px rgba(120,220,255,0.6); border-color: #5ab0e0; }
}
/* GO DARK detection meter — top-center, only while dark + being scanned */
.go-dark-detect {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 9px; z-index: 9;
  padding: 6px 14px; background: rgba(10, 8, 6, 0.78);
  border: 1px solid rgba(200, 150, 70, 0.5); border-radius: 5px;
  font-family: Bahnschrift, sans-serif; font-size: 11px; letter-spacing: 2px;
  color: #e0b870;
}
.go-dark-detect.show { display: flex; }
.go-dark-detect .gdd-eye { font-size: 14px; }
.go-dark-detect .gdd-track { width: 150px; height: 7px; background: rgba(40, 26, 16, 0.9); border: 1px solid rgba(120, 80, 40, 0.6); }
.go-dark-detect .gdd-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #e0b860, #ffd890); transition: width 90ms linear; }
.go-dark-detect.spotted {
  border-color: rgba(255, 70, 70, 0.85); color: #ff6a6a;
  animation: advHeatPulse 0.7s ease-in-out infinite;
}
/* Persistent tactical-fog gauge — top-right under the SYSTEM label. */
.adv-fog-gauge {
  position: absolute; top: 44px; right: 20px; z-index: 8;
  display: none; flex-direction: column; gap: 4px; width: 158px;
  padding: 7px 10px; background: rgba(10, 8, 6, 0.7);
  border: 1px solid rgba(150, 110, 70, 0.45); border-radius: 5px;
  font-family: Bahnschrift, sans-serif;
}
.adv-fog-gauge.show { display: flex; }
.adv-fog-gauge .afg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: 2px; color: #b8946a;
}
.adv-fog-gauge .afg-tier { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #e8c088; }
.adv-fog-gauge .afg-track {
  width: 100%; height: 6px; border-radius: 2px;
  background: rgba(40, 26, 16, 0.9); border: 1px solid rgba(120, 80, 40, 0.5);
}
.adv-fog-gauge .afg-fill { height: 100%; width: 0%; border-radius: 2px; transition: width 120ms linear, background 200ms linear; }
.adv-fog-gauge.blind { border-color: rgba(255, 90, 90, 0.7); }
.adv-fog-gauge.blind .afg-tier { color: #ff6a6a; }
/* MENU button hidden during adventure flight — ESC closes back to the menu
   and the dock hub has its own UNDOCK action. Removing the button keeps
   the right-edge cluster from competing with combat HUD chrome. */
#adv-back { display: none; }
.adv-location span { color: #cfe1f2; font-weight: 600; }
/* Contextual prompt — appears center-bottom when player is near a dockable
   target (base, station, jumpgate). Phase 3 wires the [F] key handler. */
.adv-prompt {
  position: absolute;
  /* Lifted above the weapon-groups strip (which sits at bottom:16 with
     ~70px tall cards). 110 keeps the prompt clear of both the strip and
     the minimap that anchors at bottom-right with similar height. */
  bottom: 110px; left: 50%;
  transform: translateX(-50%);
  font-family: Bahnschrift, sans-serif;
  font-size: 13px; letter-spacing: 4px;
  color: #cfe1f2;
  background: rgba(8, 12, 18, 0.85);
  border: 1px solid #4cb1ff;
  padding: 10px 22px;
  box-shadow: 0 0 18px rgba(76, 177, 255, 0.35);
  pointer-events: none;
  animation: advPromptPulse 1.6s ease-in-out infinite;
}
.adv-prompt.hidden { display: none; }
@keyframes advPromptPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(76, 177, 255, 0.3); }
  50%      { box-shadow: 0 0 22px rgba(76, 177, 255, 0.6); }
}

/* Hub overlay — shown while docked. Modal-style centered panel, captures
   pointer events (the live HUD row stays visible above it through z-index). */
.adv-hub-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(4px);
  z-index: 10;
  animation: advHubFade 220ms ease-out;
}
/* DOCK LAYOUT — universal frame used by every docked screen. The hub
   becomes a full-height right-edge "ship interface" panel: frosted-glass
   + cyan accent ties it visually to the rest of the game's HUD palette
   while letting the per-station concept-art background show through.
   The painting is the centerpiece; the panel is the *control surface*
   in front of it. The per-station painting URL is injected via the
   --dock-bg CSS variable by `_showHub` at dock time (set per systemId,
   NOT per-faction — each station has its own painted identity). */
.adv-hub-overlay.bg-dock {
  backdrop-filter: none;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  background-image:
    radial-gradient(ellipse 95% 80% at 32% 52%,
      rgba(0, 0, 0, 0.00) 28%,
      rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(90deg,
      rgba(2, 4, 10, 0.00) 0%,
      rgba(2, 4, 10, 0.00) 55%,
      rgba(2, 4, 10, 0.35) 78%,
      rgba(2, 4, 10, 0.55) 100%),
    var(--dock-bg, radial-gradient(ellipse 80% 60% at 30% 50%,
      rgba(18, 24, 38, 0.85) 0%,
      rgba(4, 8, 14, 1.00) 100%));
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.adv-hub-overlay.bg-dock .adv-hub-panel {
  position: absolute;
  right: 0; top: 0;
  bottom: 38px;                /* leave room for the SITUATION ticker */
  width: 460px;
  margin: 0;
  border: none;
  border-left: 1px solid rgba(76, 177, 255, 0.55);
  background: linear-gradient(180deg,
    rgba(8, 12, 18, 0.62) 0%,
    rgba(8, 12, 18, 0.78) 100%);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    -2px 0 28px rgba(76, 177, 255, 0.18),
    inset 1px 0 0 rgba(76, 177, 255, 0.22);
  padding: 32px 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
/* Push the page-list to the bottom inside the side rail so menu rows are
   close to a natural thumb position + the stats stay near the top label. */
.adv-hub-overlay.bg-dock .adv-hub-page { margin-top: auto; }
/* Decorative cyan ticks at the top of the rail — small holographic
   accent that anchors the title visually, very common in sci-fi UIs. */
.adv-hub-overlay.bg-dock .adv-hub-panel::before {
  content: '';
  position: absolute;
  top: 22px; left: 32px; right: 32px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(76, 177, 255, 0) 0%,
    rgba(76, 177, 255, 0.6) 30%,
    rgba(76, 177, 255, 0.6) 70%,
    rgba(76, 177, 255, 0) 100%);
}
/* Slide the rail in from off-screen on dock — feels intentional, not
   just toggled. Eases at the end (custom cubic-bezier) for a snappy
   sci-fi UI feel rather than a generic ease-out. */
@keyframes hubRailSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.adv-hub-overlay.bg-dock .adv-hub-panel {
  animation: hubRailSlideIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* COLONY READOUT — left-anchored economy panel (PLANETARY_ECONOMY_PLAN 1b).
   Mirrors the right rail but narrower and more translucent so the dock
   painting still breathes between the two panels. */
.adv-hub-colony { display: none; }
.adv-hub-overlay.bg-dock .adv-hub-colony {
  display: flex; flex-direction: column; gap: 9px;
  position: absolute; left: 0; top: 0; bottom: 38px;
  width: 358px; padding: 26px 20px 18px;
  border-right: 1px solid rgba(76, 177, 255, 0.40);
  background: linear-gradient(180deg, rgba(8,12,18,0.40) 0%, rgba(8,12,18,0.60) 100%);
  backdrop-filter: blur(7px) saturate(1.05);
  box-shadow: 2px 0 26px rgba(0,0,0,0.30), inset -1px 0 0 rgba(76,177,255,0.16);
  overflow-y: auto; z-index: 1;
  font-family: Bahnschrift, sans-serif;
  animation: hubColonySlideIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.adv-hub-colony.hidden { display: none !important; }
@keyframes hubColonySlideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.adv-hub-colony .col-head { margin-bottom: 2px; }
.adv-hub-colony .col-type {
  font-size: 21px; letter-spacing: 4px; font-weight: 700; color: #eaf3ff;
  text-shadow: 0 0 14px rgba(76,177,255,0.35);
}
.adv-hub-colony .col-sub { font-size: 9px; letter-spacing: 1.6px; color: #7fa8cc; margin-top: 3px; }
.adv-hub-colony .col-pop {
  display: flex; gap: 18px; font-size: 9.5px; letter-spacing: 1.2px;
  color: #6f8aa6; padding: 4px 0 2px;
}
.adv-hub-colony .col-pop b { color: #9bb6d2; font-weight: 600; }
.adv-hub-colony .col-section-label {
  font-size: 8.5px; letter-spacing: 1.8px; color: #5f8fbf;
  margin: 9px 0 1px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(120,180,255,0.16);
}
.adv-hub-colony .col-empty { font-size: 10px; color: #6b7a8a; line-height: 1.4; }
.adv-hub-colony .col-uncolonized-note { font-size: 10.5px; line-height: 1.5; color: #9fb0c0; margin: 4px 0 2px; }
/* Body selector (Phase C) — switch between the worlds in a system */
.adv-hub-colony .col-bodies { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 5px; }
.adv-hub-colony .col-body-chip {
  font-family: Bahnschrift, sans-serif; font-size: 9px; letter-spacing: 0.5px;
  color: #9fb4c8; background: rgba(20,30,44,0.5); border: 1px solid rgba(120,180,255,0.2);
  padding: 3px 7px; cursor: pointer; white-space: nowrap; transition: border-color 120ms, color 120ms;
}
.adv-hub-colony .col-body-chip:hover { border-color: rgba(140,200,255,0.5); color: #dceaff; }
.adv-hub-colony .col-body-chip.sel  { background: rgba(60,120,200,0.45); border-color: rgba(140,200,255,0.7); color: #eaf3ff; }
.adv-hub-colony .col-body-chip.mine { border-color: rgba(110,220,140,0.5); color: #b8f0c8; }
.adv-hub-colony .col-body-chip.col  { border-color: rgba(255,180,120,0.45); color: #ffd0a0; }
.adv-hub-colony .col-mod { padding: 4px 1px 5px; cursor: default; }
.adv-hub-colony .col-mod:hover .col-mod-name { color: #d8eeff; }
.adv-hub-colony .col-mod-name { font-size: 10.5px; letter-spacing: 0.5px; color: #b8e0ff; font-weight: 600; }
.adv-hub-colony .col-mod-desc { font-size: 9px; line-height: 1.35; color: #7c8a99; margin-top: 1px; }
.adv-hub-colony .col-mod-effs { display: flex; flex-wrap: wrap; gap: 3px 9px; margin-top: 3px; }
.adv-hub-colony .col-mod-eff { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0.3px; }
.adv-hub-colony .col-mod-eff-icon { width: 13px; height: 13px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.adv-hub-colony .col-meter { cursor: help; }
/* Develop / colonize controls (Phase 7 + 8) */
.adv-hub-colony .col-colonize-txt { font-size: 10px; color: #9fb0c0; line-height: 1.4; margin-bottom: 6px; }
.adv-hub-colony .col-dev-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 1px; }
.adv-hub-colony .col-dev-name { font-size: 10px; color: #cdd9e6; letter-spacing: 0.4px; }
.adv-hub-colony .col-dev-lvl { color: #7fd0ff; font-size: 9px; }
.adv-hub-colony .col-dev-sub { font-size: 8.5px; letter-spacing: 1.4px; color: #5f8fbf; margin: 7px 0 2px; }
.adv-hub-colony .col-build-btn {
  font-family: Bahnschrift, sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px;
  color: #cfe8ff; background: rgba(40,90,150,0.32); border: 1px solid rgba(120,180,255,0.4);
  padding: 4px 9px; cursor: pointer; white-space: nowrap; transition: background 120ms, border-color 120ms;
}
.adv-hub-colony .col-build-btn:hover { background: rgba(60,120,200,0.5); border-color: rgba(140,200,255,0.7); }
.adv-hub-colony .col-build-btn.col-cant { color: #8a99a8; border-color: rgba(120,140,160,0.3); background: rgba(30,40,55,0.4); }
.adv-hub-colony .col-build-btn.col-found { display: block; width: 100%; text-align: center; padding: 8px; margin-top: 2px; font-size: 11px; color: #b8f0c8; border-color: rgba(110,220,140,0.5); background: rgba(40,120,70,0.3); }
.adv-hub-colony .col-build-btn.col-found:hover { background: rgba(50,150,90,0.45); }
.adv-hub-colony .col-build-btn.col-deny { animation: colDeny 0.42s; }
@keyframes colDeny { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.adv-hub-colony .col-bld {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 7px; border: 1px solid rgba(120,180,255,0.13);
  background: rgba(10,16,24,0.42); cursor: default;
  transition: background 120ms, border-color 120ms;
}
.adv-hub-colony .col-bld:hover { background: rgba(18,28,42,0.62); border-color: rgba(120,180,255,0.32); }
.adv-hub-colony .col-bld-off { opacity: 0.6; border-color: rgba(255,120,80,0.32); }
.adv-hub-colony .col-bld-off .col-bld-thumb { filter: grayscale(0.7) brightness(0.55); }
.adv-hub-colony .col-bld-thumb {
  width: 58px; height: 36px; flex: 0 0 auto;
  background-size: cover; background-position: center;
  border: 1px solid rgba(120,180,255,0.22);
}
.adv-hub-colony .col-bld-body { flex: 1; min-width: 0; }
.adv-hub-colony .col-bld-name {
  font-size: 11px; letter-spacing: 0.5px; color: #dceaff; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adv-hub-colony .col-lvl { color: #7fd0ff; font-size: 9px; }
.adv-hub-colony .col-bld-flows {
  font-size: 9px; letter-spacing: 0.3px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Population / stability meters */
.adv-hub-colony .col-meters { display: flex; flex-direction: column; gap: 7px; padding: 2px 0; }
.adv-hub-colony .col-meter-top {
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 1.2px; color: #7f99b4; margin-bottom: 3px;
}
.adv-hub-colony .col-meter-top span:last-child { color: #dceaff; font-weight: 600; }
.adv-hub-colony .col-bar {
  height: 5px; background: rgba(10,16,24,0.7);
  border: 1px solid rgba(120,180,255,0.18); overflow: hidden;
}
.adv-hub-colony .col-bar-fill { height: 100%; }
.adv-hub-colony .col-bar-pop { background: linear-gradient(90deg,#3a7fd0,#6fb6ff); }
.adv-hub-colony .stab-hi  { background: linear-gradient(90deg,#2f9e5a,#6fdc8c); }
.adv-hub-colony .stab-mid { background: linear-gradient(90deg,#b88a2a,#ffd27a); }
.adv-hub-colony .stab-lo  { background: linear-gradient(90deg,#b23a3a,#ff7a7a); }
/* Supply & demand — commodity icon + name + signed magnitude */
.adv-hub-colony .col-sd-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; padding: 2px 1px;
}
.adv-hub-colony .col-sd-icon {
  width: 18px; height: 18px; flex: 0 0 auto;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.adv-hub-colony .col-sd-name { flex: 1; color: #c2d2e2; letter-spacing: 0.5px; }
.adv-hub-colony .col-sd-mag { font-weight: 600; letter-spacing: 0.5px; min-width: 34px; text-align: right; }
.col-up { color: #6fdc8c; }
.col-dn { color: #ffb27a; }
/* Market tooltip — this-colony demand/supply line under the stat row */
.adv-item-tooltip .it-market { margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid rgba(120,180,255,0.16); }
.adv-item-tooltip .it-colony { font-size: 10px; letter-spacing: 0.6px; font-weight: 600; margin: 0 0 3px; }
.adv-item-tooltip .it-why { font-size: 9.5px; letter-spacing: 0.3px; color: #8a98a8; font-style: italic; margin: 1px 0 0; }
/* Building hover card — the market tooltip with a cinematic header image. */
.adv-item-tooltip .it-bld-img {
  width: calc(100% + 32px); height: 116px; margin: -12px -16px 9px;
  background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(120,180,255,0.30);
}

/* Cinematic title — letterspaced, with a holographic shimmer sweeping
   across the glyphs every ~9 seconds. The shimmer uses a moving
   linear-gradient clipped to the text (background-clip: text +
   transparent fill); text-shadow renders independently from font
   outlines so the cyan glow persists through the shimmer. */
.adv-hub-overlay.bg-dock .adv-hub-title h2 {
  font-size: 28px;
  letter-spacing: 8px;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(110deg,
    #cfe1f2 0%, #cfe1f2 35%,
    #ffffff 50%,
    #cfe1f2 65%, #cfe1f2 100%);
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 18px rgba(76, 177, 255, 0.55);
  animation: hubTitleShimmer 9s ease-in-out infinite;
}
@keyframes hubTitleShimmer {
  0%, 70%  { background-position: 200% 0; }
  100%     { background-position: -100% 0; }
}
.adv-hub-tagline {
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 400;
  font-style: italic;
  color: rgba(207, 225, 242, 0.55);
  margin-top: 6px;
  text-transform: uppercase;
}
.adv-hub-tagline:empty { display: none; }
.adv-hub-overlay.bg-dock .adv-hub-subtitle {
  margin-top: 8px;
  letter-spacing: 4px;
  font-size: 10px;
}
/* Pulsing green status dot inside the subtitle — sells "DOCKED" as a live
   readout rather than static text. Inline so it sits between SOL · and DOCKED. */
.adv-hub-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #65d97c;
  margin: 0 6px 1px 2px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(101, 217, 124, 0.8);
  animation: hubPulse 1.8s ease-in-out infinite;
}
@keyframes hubPulse {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 4px rgba(101, 217, 124, 0.5); }
  50%      { opacity: 1.00; box-shadow: 0 0 10px rgba(101, 217, 124, 1.0); }
}
/* Day counter — the emotional weight beat. Big day number with a small
   italic "since the collapse" line underneath. Frames the survivors as
   counting every. single. day. */
.adv-hub-overlay.bg-dock .adv-hub-day {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(76, 177, 255, 0.12);
}
.adv-hub-day-num {
  font-family: Bahnschrift, sans-serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: rgba(207, 225, 242, 0.9);
  font-weight: 500;
}
.adv-hub-day-num span {
  color: #ffd58a;
  font-weight: 600;
}
.adv-hub-day-sub {
  font-family: Bahnschrift, sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(138, 169, 198, 0.55);
  font-style: italic;
  margin-top: 4px;
}
.adv-hub-day-sub span { color: rgba(207, 225, 242, 0.75); font-style: normal; }

/* Second timeline — the BARRIER counter. Same shape as COLLAPSE but
   tinted cyan to read as a separate, freshly-started clock. The contrast
   between amber millions-deep COLLAPSE and cyan single-digit BARRIER is
   the story beat: humanity has been counting for ten millennia, and
   today is Day 1 of something else. */
.adv-hub-day-barrier {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(76, 177, 255, 0.18);
}
.adv-hub-day-barrier .adv-hub-day-num span {
  color: #4cb1ff;
  text-shadow: 0 0 8px rgba(76, 177, 255, 0.45);
  animation: barrierPulse 3.2s ease-in-out infinite;
}
@keyframes barrierPulse {
  0%, 100% { text-shadow: 0 0 6px  rgba(76, 177, 255, 0.35); }
  50%      { text-shadow: 0 0 12px rgba(76, 177, 255, 0.85); }
}

/* Faction standings strip — five color-coded chips showing the player's
   relationship with each major bloc. Compact horizontal grid; each chip
   uses currentColor for border so the faction color drives the entire
   pill's accent. Default standings come from save state (TODO: hook up
   save persistence in a future pass; for now they're static defaults). */
.adv-hub-factions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(76, 177, 255, 0.12);
}
.fac-chip {
  padding: 5px 4px;
  border: 1px solid currentColor;
  text-align: center;
  font-family: Bahnschrift, sans-serif;
  background: rgba(0, 0, 0, 0.18);
  transition: background 160ms ease;
}
.fac-chip:hover { background: rgba(0, 0, 0, 0.36); }
.fac-chip .lbl {
  display: block;
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: 0.65;
  margin-bottom: 2px;
}
.fac-chip .sts {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
}
.fac-chip.fac-hollow      { color: #ff5a5a; }
.fac-chip.fac-silk        { color: #ffd58a; }
.fac-chip.fac-pirate      { color: #ff8a4c; }
.fac-chip.fac-sylvani     { color: #b48aff; }
.fac-chip.fac-terra       { color: #65d97c; }
.fac-chip.fac-federation  { color: #7ab0ff; }
.fac-chip.fac-aether      { color: #c8a0ff; }
.fac-chip.fac-watcher     { color: #ffe6a0; }
.fac-chip.fac-dwarves     { color: #ffb060; }
.fac-chip.fac-praxis      { color: #c0d8e8; }
.fac-chip.fac-legion      { color: #ff5e3a; }
.fac-chip.fac-argent_vow  { color: #b86cff; }
.fac-chip.fac-biological  { color: #ff506e; }
.fac-chip.fac-void        { color: #a050d0; }
.fac-chip.fac-hollow      { color: #9ec8ff; }
.fac-chip.fac-unknown     { color: #888888; }

/* ALLEGIANCE row — sits above the standings strip. Two equal blocks,
   each containing a tiny "STATION"/"YOU" label and a faction chip.
   Same .fac-chip shell so colors come for free. */
.adv-hub-allegiance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(76, 177, 255, 0.12);
}
.alg-block { display: flex; flex-direction: column; gap: 4px; }
.alg-label {
  font-family: Bahnschrift, sans-serif;
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: 0.55;
  color: rgba(207, 225, 242, 0.85);
}
.alg-chip { padding: 7px 6px; }
.alg-chip .lbl {
  font-size: 9px;
  letter-spacing: 1.5px;
  opacity: 0.85;
  margin-bottom: 3px;
}
.alg-chip .sts {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

/* Captain's quote — italic atmospheric line at the bottom of the rail.
   Right-aligned so it reads as a footer epigraph, not a CTA. Refreshed
   per dock from QUOTES_SOL pool. */
.adv-hub-quote {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(76, 177, 255, 0.16);
  text-align: right;
}
.adv-hub-quote .quote-text {
  display: block;
  font-family: Bahnschrift, sans-serif;
  font-size: 10.5px;
  font-style: italic;
  color: rgba(207, 225, 242, 0.62);
  letter-spacing: 0.5px;
  line-height: 1.55;
}
.adv-hub-quote .quote-attr {
  display: block;
  margin-top: 6px;
  font-family: Bahnschrift, sans-serif;
  font-size: 8.5px;
  letter-spacing: 2px;
  color: rgba(138, 169, 198, 0.55);
}
.adv-hub-quote:empty,
.adv-hub-quote .quote-text:empty { display: none; }

/* SITUATION news ticker — full-width horizontal scroll along the bottom
   of the dock screen. Always visible regardless of which sub-page is open
   in the rail. Content is duplicated 2× in JS so the loop seam is invisible
   when the first copy slides off screen-left and the second is mid-frame. */
.adv-hub-ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(to top,
    rgba(2, 4, 10, 0.92) 0%,
    rgba(2, 4, 10, 0.62) 100%);
  border-top: 1px solid rgba(76, 177, 255, 0.32);
  z-index: 5;
  overflow: hidden;
  font-family: Bahnschrift, sans-serif;
  pointer-events: none;
}
.adv-hub-ticker[style*="display: none"] { display: none !important; }
.adv-hub-ticker .ticker-label {
  flex-shrink: 0;
  align-self: center;
  padding: 0 22px;
  font-size: 10px;
  letter-spacing: 4px;
  font-weight: 600;
  color: #4cb1ff;
  text-shadow: 0 0 6px rgba(76, 177, 255, 0.4);
  border-right: 1px solid rgba(76, 177, 255, 0.30);
  height: 100%;
  display: flex;
  align-items: center;
}
.adv-hub-ticker .ticker-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.adv-hub-ticker .ticker-content {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  padding-left: 32px;
  animation: tickerScroll 90s linear infinite;
  will-change: transform;
}
.adv-hub-ticker:hover .ticker-content {
  animation-play-state: paused;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* duplicated content; -50% = first copy fully scrolled */
}
.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  line-height: 1;
}
.ticker-item .ti-time {
  color: rgba(138, 169, 198, 0.60);
  font-size: 10px;
  letter-spacing: 1.5px;
}
.ticker-item .ti-tag {
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
}
.ticker-item .ti-tag.fac-hollow  { color: #ff5a5a; text-shadow: 0 0 6px rgba(255, 90, 90, 0.5); }
.ticker-item .ti-tag.fac-silk    { color: #ffd58a; text-shadow: 0 0 6px rgba(255, 213, 138, 0.5); }
.ticker-item .ti-tag.fac-pirate  { color: #ff8a4c; text-shadow: 0 0 6px rgba(255, 138, 76, 0.5); }
.ticker-item .ti-tag.fac-sylvani { color: #b48aff; text-shadow: 0 0 6px rgba(180, 138, 255, 0.5); }
.ticker-item .ti-tag.fac-comms   { color: #4cb1ff; text-shadow: 0 0 6px rgba(76, 177, 255, 0.5); }
.ticker-item .ti-tag.fac-terra   { color: #65d97c; text-shadow: 0 0 6px rgba(101, 217, 124, 0.5); }
.ticker-item .ti-text {
  color: rgba(207, 225, 242, 0.85);
  letter-spacing: 0.4px;
}
.ticker-sep {
  color: rgba(76, 177, 255, 0.35);
  font-size: 8px;
  align-self: center;
}

/* Bracketed sections — diagonal corner accents (top-left + bottom-right)
   that frame each readout panel. Replaces the older full-width borders with
   a more sophisticated tactical-display feel. Two corners is intentional —
   asymmetric framing reads as more confident than symmetrical. */
.bracketed {
  position: relative;
}
.bracketed::before,
.bracketed::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
  border-color: rgba(76, 177, 255, 0.55);
}
.bracketed::before {
  top: 0; left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
}
.bracketed::after {
  bottom: 0; right: 0;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

/* Homefront — the long-term-goal progress panel that fills the rail's
   middle section. Each row is label + thin progress bar + numeric value.
   The bars use a cyan-to-amber gradient so as players push toward 100%
   the late-game emotional beat (a green Terra, a re-lit Sol) is *literally*
   visible in the UI. */
.adv-hub-homefront {
  margin-top: 4px;
  padding: 10px 10px 10px;
}
.adv-hub-homefront .adv-hub-section-title {
  margin-bottom: 8px;
}
.adv-hub-progress-row {
  display: grid;
  grid-template-columns: 100px 1fr 64px;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.adv-hub-progress-row:last-child { margin-bottom: 0; }
.adv-hub-progress-row .lbl {
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #8aa9c6;
  font-weight: 600;
}
.adv-hub-progress-row .bar {
  display: block;
  position: relative;
  height: 5px;
  background: rgba(20, 30, 45, 0.85);
  border: 1px solid rgba(76, 177, 255, 0.15);
}
.adv-hub-progress-row .bar .fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4cb1ff 0%, #65d97c 60%, #ffd58a 100%);
  box-shadow: 0 0 6px rgba(76, 177, 255, 0.5);
  transition: width 600ms ease-out;
}
.adv-hub-progress-row .val {
  font-size: 11px;
  letter-spacing: 1px;
  color: #cfe1f2;
  font-weight: 600;
  text-align: right;
}

/* Menu-row polish for the rail layout — left accent bar slides in on
   hover (sci-fi UI staple), background dims on hover for tactile feel,
   all rows feel "active" not generic-buttony. Layout is grid-based to
   accommodate a leading icon column. */
.adv-hub-overlay.bg-dock .adv-menu-row {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 22px;
  border: 1px solid rgba(76, 177, 255, 0.10);
  background: rgba(20, 30, 45, 0.30);
  transition: background 160ms ease, border-color 160ms ease;
}
.adv-menu-icon {
  width: 18px; height: 18px;
  color: #8aa9c6;
  transition: color 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.adv-hub-overlay.bg-dock .adv-menu-row:hover .adv-menu-icon {
  color: #4cb1ff;
  transform: scale(1.08);
}
.adv-hub-overlay.bg-dock .adv-menu-row.primary .adv-menu-icon {
  color: #9ed6ff;
}
.adv-hub-overlay.bg-dock .adv-menu-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #4cb1ff;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.adv-hub-overlay.bg-dock .adv-menu-row:hover {
  background: rgba(28, 44, 63, 0.55);
  border-color: rgba(76, 177, 255, 0.45);
}
.adv-hub-overlay.bg-dock .adv-menu-row:hover::before {
  transform: scaleY(1);
}
.adv-hub-overlay.bg-dock .adv-menu-row.primary {
  border-color: #4cb1ff;
  background: rgba(20, 50, 80, 0.45);
  animation: undockPulse 2.6s ease-in-out infinite;
}
@keyframes undockPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(76, 177, 255, 0);
    border-color: rgba(76, 177, 255, 0.55);
  }
  50% {
    box-shadow: 0 0 18px rgba(76, 177, 255, 0.45);
    border-color: rgba(76, 177, 255, 0.95);
  }
}
.adv-hub-overlay.bg-dock .adv-menu-row.primary:hover {
  background: rgba(35, 75, 115, 0.65);
}
.adv-hub-overlay.hidden { display: none; }

/* First-dock loader overlay — covers the entire dock screen while the
   dock-art background PNG decodes (only noticeable on the FIRST dock per
   session; browser cache services subsequent docks instantly). Mirrors
   the menu loading-screen pattern for visual continuity. */
.adv-hub-loader {
  position: absolute; inset: 0;
  z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #08111c 0%, #02040a 80%);
  color: #cfe1f2;
  font-family: Bahnschrift, "Trebuchet MS", system-ui, sans-serif;
  transition: opacity 380ms ease;
  pointer-events: all;
}
.adv-hub-loader.fade-out { opacity: 0; pointer-events: none; }
.adv-hub-loader.hidden { display: none; }
.adv-hub-loader .loader-title {
  font-size: 32px; letter-spacing: 10px; font-weight: 700;
  color: #cfe1f2;
  text-shadow: 0 0 18px rgba(76, 177, 255, 0.50);
  margin-bottom: 28px;
}
.adv-hub-loader .loader-bar {
  width: 220px; height: 3px;
  background: rgba(76, 177, 255, 0.10);
  border: 1px solid rgba(76, 177, 255, 0.18);
  overflow: hidden;
  margin-bottom: 14px;
}
.adv-hub-loader .loader-bar-fill {
  width: 30%; height: 100%;
  background: linear-gradient(90deg,
    rgba(76, 177, 255, 0) 0%,
    rgba(76, 177, 255, 0.85) 50%,
    rgba(76, 177, 255, 0) 100%);
  animation: loadingScan 1.6s ease-in-out infinite;
}
.adv-hub-loader .loader-status {
  font-size: 10px; letter-spacing: 5px; color: #5a7491;
  animation: loadingPulse 1.4s ease-in-out infinite;
}
@keyframes advHubFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.adv-hub-panel {
  width: min(560px, 92vw);
  background: linear-gradient(180deg, rgba(14, 22, 34, 0.96), rgba(8, 12, 18, 0.96));
  border: 1px solid #4cb1ff;
  box-shadow: 0 0 36px rgba(76, 177, 255, 0.35), inset 0 0 24px rgba(76, 177, 255, 0.08);
  padding: 26px 30px 22px;
  font-family: Bahnschrift, sans-serif;
  color: #cfe1f2;
  position: relative;     /* anchor for the bg-terra ::before scanline */
}
.adv-hub-header { margin-bottom: 18px; }
.adv-hub-header h2 {
  margin: 0;
  font-size: 22px; letter-spacing: 5px; font-weight: 600;
  color: #9ed6ff;
  text-shadow: 0 0 10px rgba(76, 177, 255, 0.5);
}
.adv-hub-subtitle {
  margin-top: 4px;
  font-size: 11px; letter-spacing: 4px;
  color: #5a7491;
}
.adv-hub-subtitle span { color: #cfe1f2; font-weight: 600; }
.adv-hub-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 1px solid rgba(76, 177, 255, 0.18);
  border-bottom: 1px solid rgba(76, 177, 255, 0.18);
  margin-bottom: 8px;
}
.adv-hub-stat { display: flex; flex-direction: column; gap: 4px; }
.adv-hub-stat-label {
  font-size: 10px; letter-spacing: 3px; color: #5a7491;
}
.adv-hub-stat-val {
  font-size: 16px; font-weight: 600; color: #ffd58a;
  letter-spacing: 1px;
}
.adv-hub-stat:nth-child(2) .adv-hub-stat-val { color: #4cb1ff; }
.adv-hub-stat:nth-child(3) .adv-hub-stat-val { color: #cfe1f2; letter-spacing: 3px; }
.adv-hub-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.adv-hub-actions .btn {
  width: 100%;
  padding: 12px 16px;
  font-family: Bahnschrift, sans-serif;
  font-size: 13px; letter-spacing: 4px; font-weight: 600;
}
.adv-hub-actions .btn:disabled {
  opacity: 0.45; cursor: not-allowed;
}

/* Hub multi-page navigation. Only one .adv-hub-page is visible at a time;
   .hidden swaps which one. The main page is a vertical list of department
   "menu rows" (label + meta), each opening a sub-page that shows a BACK
   row at the top. */
.adv-hub-page { display: flex; flex-direction: column; gap: 10px; }
.adv-hub-page.hidden { display: none; }
.adv-menu-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: rgba(20, 30, 45, 0.65);
  border: 1px solid #1c2c3f;
  font-family: Bahnschrift, sans-serif;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}
.adv-menu-row:hover {
  background: rgba(28, 44, 63, 0.85);
  border-color: #4cb1ff;
}
.adv-menu-row.primary {
  border-color: #4cb1ff;
  background: rgba(20, 50, 80, 0.65);
}
.adv-menu-row.primary:hover { background: rgba(35, 75, 115, 0.9); }
.adv-menu-label {
  font-size: 14px; letter-spacing: 5px; font-weight: 600;
  color: #cfe1f2;
}
.adv-menu-row.primary .adv-menu-label { color: #9ed6ff; }
.adv-menu-meta {
  font-size: 10px; letter-spacing: 3px;
  color: #5a7491;
}
.adv-menu-back {
  align-self: flex-start;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #2c425d;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  color: #8aa9c6;
  cursor: pointer;
  margin-bottom: 6px;
}
.adv-menu-back:hover { color: #cfe1f2; border-color: #4cb1ff; }
.adv-hub-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 10px; letter-spacing: 4px;
  color: #3d5a78;
}

/* Mission board — list of accept-able patrol/escort/boss tasks. Each card is
   a row with template name + reward, plus an ACCEPT button. The active
   mission is highlighted; non-active ones disable when one is picked. */
.adv-hub-section-title {
  font-size: 10px; letter-spacing: 4px; font-weight: 600;
  color: #5a7491;
  margin-bottom: 8px;
}
.adv-hub-mission-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
  max-height: 360px;            /* proper screen — use the space */
  overflow-y: auto;
}
/* Faction contract giver — portrait + voiced intro fronting the board. */
.adv-hub-mission-giver {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(16, 26, 40, 0.7);
  border: 1px solid #244;
  border-left: 3px solid #4cb1ff;
}
.adv-hub-mission-giver.covert { border-left-color: #ff5050; }
.adv-hub-mission-giver:empty { display: none; }
.adv-giver-portrait {
  flex: 0 0 auto; width: 64px; height: 64px;
  border: 1px solid #2c4a66;
  background: rgba(8, 14, 22, 0.9);
  overflow: hidden; position: relative;
}
.adv-giver-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-giver-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: Bahnschrift, sans-serif; font-size: 30px; font-weight: 700;
  color: #4cb1ff; background: rgba(20, 34, 52, 0.9);
}
.adv-hub-mission-giver.covert .adv-giver-fallback { color: #ff7060; }
.adv-giver-info { flex: 1; min-width: 0; }
.adv-giver-name {
  font-family: Bahnschrift, sans-serif; font-size: 14px; letter-spacing: 2px;
  font-weight: 700; color: #e6f0fb;
}
.adv-giver-role {
  font-size: 9px; letter-spacing: 3px; color: #5a7491;
  margin-top: 1px; margin-bottom: 6px;
}
.adv-giver-intro {
  font-size: 11px; line-height: 1.45; color: #9db8d2;
  font-style: italic;
}
/* per-card lore blurb + rep chip */
.adv-mission-card-lore {
  font-size: 10px; line-height: 1.4; color: #7b93ab;
  margin-top: 4px; font-style: italic;
}
.adv-mission-card-reward {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.adv-mission-card-cr { font-size: 12px; font-weight: 600; color: #ffd58a; white-space: nowrap; }
.adv-mission-card-rep {
  font-size: 8px; letter-spacing: 1px; color: #65d97c; white-space: nowrap;
}
.adv-mission-card.covert { border-color: #5a2c2c; background: rgba(40, 20, 22, 0.5); }
.adv-mission-card.covert .adv-mission-card-name { color: #ffb0a0; }
.adv-mission-card.covert .adv-mission-card-rep { color: #ff9a6a; }
/* Phase 4 — standing-gated tiers: locked teaser + clearance strip */
.adv-mission-card.locked {
  border-color: #2c3340; background: rgba(20, 24, 30, 0.45);
  border-style: dashed; opacity: 0.7;
}
.adv-mission-card.locked .adv-mission-card-name { color: #6b7c8f; }
.adv-mission-card.locked .adv-mission-card-rep { color: #8a6a3a; letter-spacing: 1.5px; }
.mission-clearance {
  font-size: 9px; letter-spacing: 1.5px; color: #d6b15a;
  text-transform: uppercase; margin-bottom: 8px; padding: 4px 0;
  border-bottom: 1px solid rgba(214, 177, 90, 0.2);
}
/* Underworld tab bar — CONTRACTS / UNDERWORLD toggle in the roster column */
.mission-tabs { display: flex; gap: 6px; padding: 0 14px 10px; }
.mission-tab {
  flex: 1; padding: 7px 6px; font-size: 10px; letter-spacing: 1.5px;
  background: rgba(30, 38, 48, 0.6); color: #7b93ab;
  border: 1px solid #2c3744; border-radius: 4px; cursor: pointer;
  text-transform: uppercase; transition: all 0.12s;
}
.mission-tab:hover { color: #c6d8ea; border-color: #3e5266; }
.mission-tab.active { background: rgba(60, 92, 120, 0.4); color: #d9ecff; border-color: #4f7ba6; }
.mission-tab[data-tab="underworld"].active { background: rgba(90, 44, 44, 0.45); color: #ffb0a0; border-color: #7a3a3a; }

/* ===== Mission Hub modal — two-column faction contract board ===== */
/* (descendant selector so it beats the later .market-panel column rule) */
.mission-modal .mission-panel { width: min(1240px, 95vw); height: min(820px, 92vh); flex-direction: row; padding: 0; }
.mission-modal.covert .market-panel { border-color: #ff5050; box-shadow: 0 0 36px rgba(255, 80, 80, 0.28); }
.mission-roster {
  flex: 0 0 340px; max-width: 340px;
  display: flex; flex-direction: column;
  border-right: 1px solid #1c3046;
  background: rgba(8, 14, 22, 0.55);
  padding: 22px 18px;
}
.mission-roster-head h2 { margin: 0; font-size: 22px; letter-spacing: 3px; color: #e6f0fb; font-weight: 700; }
.mission-faction-sub { font-size: 9px; letter-spacing: 4px; color: #5a7491; margin: 2px 0 18px; }
.mission-modal.covert .mission-faction-sub { color: #ff7060; }
.mission-roster-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }
.mission-npc-card {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 10px; cursor: pointer;
  background: rgba(20, 30, 45, 0.55);
  border: 1px solid #1c2c3f; border-left: 2px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.mission-npc-card:hover { background: rgba(30, 44, 64, 0.7); }
.mission-npc-card.active { border-left-color: #4cb1ff; background: rgba(30, 50, 74, 0.85); }
.mission-modal.covert .mission-npc-card.active { border-left-color: #ff5050; }
.mission-npc-portrait { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid #2c4a66; background: rgba(8,14,22,0.9); overflow: hidden; }
.mission-npc-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mission-npc-portrait .fb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #4cb1ff; background: rgba(20,34,52,0.9); }
.mission-npc-meta { min-width: 0; }
.mission-npc-name { font-size: 12px; letter-spacing: 1px; font-weight: 600; color: #cfe1f2; }
.mission-npc-role { font-size: 8px; letter-spacing: 2px; color: #5a7491; margin-top: 1px; }
.mission-npc-count { font-size: 8px; letter-spacing: 1px; color: #65d97c; margin-top: 3px; }
.mission-npc-card.active .mission-npc-name { color: #e6f0fb; }
.mission-close-btn { margin-top: 14px; }
.mission-detail { flex: 1; min-width: 0; padding: 28px 32px; overflow-y: auto; display: flex; flex-direction: column; }
.mission-dlg { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #18283a; }
.mission-dlg-portrait { flex: 0 0 auto; width: 96px; height: 96px; border: 1px solid #2c4a66; background: rgba(8,14,22,0.9); overflow: hidden; }
.mission-dlg-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mission-dlg-portrait .fb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: #4cb1ff; background: rgba(20,34,52,0.9); }
.mission-dlg-body { flex: 1; min-width: 0; }
.mission-dlg-name { font-size: 18px; letter-spacing: 2px; font-weight: 700; color: #e6f0fb; }
.mission-dlg-role { font-size: 9px; letter-spacing: 3px; color: #5a7491; margin: 2px 0 10px; }
.mission-dlg-intro { font-size: 13px; line-height: 1.6; color: #9db8d2; font-style: italic; }
.mission-contracts { display: flex; flex-direction: column; gap: 8px; }
.mission-contracts .adv-mission-card { padding: 11px 14px; }
.mission-detail-empty { font-size: 11px; letter-spacing: 2px; color: #3d5a78; text-align: center; padding: 40px 20px; }
/* branching conversation — player option buttons + transient note */
.mission-dlg-options { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.mission-dlg-opt {
  text-align: left; padding: 9px 14px; cursor: pointer;
  background: rgba(20, 30, 45, 0.5); border: 1px solid #243a52; color: #cfe1f2;
  font-family: Bahnschrift, sans-serif; font-size: 12px; letter-spacing: 1px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.mission-dlg-opt:hover { background: rgba(40, 64, 92, 0.7); border-color: #4cb1ff; color: #e6f0fb; }
.mission-modal.covert .mission-dlg-opt:hover { border-color: #ff5050; }
.mission-dlg-note { font-size: 10px; letter-spacing: 1px; color: #7b93ab; font-style: italic; margin-bottom: 8px; }
.adv-mission-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(20, 30, 45, 0.65);
  border: 1px solid #1c2c3f;
  font-family: Bahnschrift, sans-serif;
}
.adv-mission-card.active {
  border-color: #ffd58a;
  background: rgba(48, 36, 18, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 138, 0.2);
}
.adv-mission-card-info { flex: 1; min-width: 0; }
.adv-mission-card-name {
  font-size: 12px; letter-spacing: 2px; font-weight: 600;
  color: #cfe1f2;
}
.adv-mission-card.active .adv-mission-card-name { color: #ffd58a; }
.adv-mission-card-meta {
  font-size: 10px; letter-spacing: 1px; color: #5a7491;
  margin-top: 2px;
}
.adv-mission-card-reward {
  font-size: 12px; font-weight: 600; color: #ffd58a;
  white-space: nowrap;
}
.adv-mission-card .btn {
  padding: 4px 10px;
  font-size: 10px; letter-spacing: 2px;
}
.adv-mission-card .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.adv-hub-mission-list:empty::before {
  content: 'NO MISSIONS AVAILABLE';
  display: block;
  text-align: center;
  font-size: 10px; letter-spacing: 3px;
  color: #3d5a78;
  padding: 12px;
}
/* Fleet section — wingman roster + recruitment offers. Reuses the mission
   card styling so accepted wingmen + for-hire pilots render with the same
   visual weight. The roster card uses a green accent for "owned ally";
   recruits keep the standard cool-blue card look. */
.adv-hub-section-counter {
  margin-left: 8px;
  font-size: 10px; letter-spacing: 2px;
  color: #cfe1f2;
  font-weight: 600;
}
.adv-mission-card.fleet {
  border-color: rgba(101, 217, 124, 0.55);
  background: rgba(20, 36, 26, 0.55);
}
.adv-mission-card.fleet .adv-mission-card-name { color: #65d97c; }
.adv-mission-card.fleet .btn { color: #ff9988; border-color: rgba(255, 119, 85, 0.5); }

/* Market tab strip — switches the buyable item list between the four
   categories. Active tab gets the cyan accent matching the hub palette. */
.adv-market-tabs {
  display: flex; gap: 4px;
  margin-bottom: 8px;
}
.adv-market-tab {
  flex: 1;
  padding: 8px 4px;
  background: rgba(20, 30, 45, 0.5);
  border: 1px solid #1c2c3f;
  font-family: Bahnschrift, sans-serif;
  font-size: 10px; letter-spacing: 2px; font-weight: 600;
  color: #5a7491;
  cursor: pointer;
}
.adv-market-tab:hover { color: #cfe1f2; border-color: #3d5a78; }
.adv-market-tab.active {
  color: #9ed6ff;
  background: rgba(28, 44, 63, 0.85);
  border-color: #4cb1ff;
}
/* BLACK MARKET toggle — a MODE switch, pushed to the right of the tab row.
   Lit red when the black market is active. */
.adv-market-bm-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(180, 40, 40, 0.5);
  color: #ff9a8a;
  font-family: Bahnschrift, sans-serif;
  font-size: 10.5px; letter-spacing: 3px; font-weight: 700;
  cursor: pointer;
  align-self: center;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.adv-market-bm-toggle:hover { color: #ffb8a8; border-color: rgba(255, 119, 85, 0.85); }
.adv-market-bm-toggle.active {
  color: #fff;
  background: rgba(150, 26, 26, 0.85);
  border-color: rgba(255, 100, 80, 0.95);
  box-shadow: 0 0 14px rgba(255, 80, 60, 0.45);
}
/* CONTRABAND tab — the illegal stock; hotter crimson than the black market. */
.adv-market-tab-contraband {
  color: #e0556a;
  border-color: rgba(150, 30, 50, 0.5) !important;
}
.adv-market-tab-contraband:hover { color: #ff7088; border-color: rgba(220, 50, 80, 0.8) !important; }
.adv-market-tab-contraband.active {
  color: #ff506e !important;
  background: rgba(70, 14, 26, 0.7) !important;
  border-color: rgba(255, 70, 100, 0.9) !important;
}

/* TRADE INTEL tab — analysis/route rows. */
.adv-market-tab-trade { color: #9ed6ff; }
.adv-market-tab-trade.active { color: #d9ecff !important; border-bottom-color: #4cb1ff; background: rgba(20, 30, 45, 0.4); }
.trade-banner {
  padding: 10px 12px; margin-bottom: 10px;
  background: rgba(30, 56, 84, 0.4); border: 1px solid rgba(76, 177, 255, 0.3);
  color: #9ed6ff; font-size: 10px; letter-spacing: 1.5px;
}
.trade-banner b { color: #d9ecff; }
.trade-upgrade-btn, .to-buy {
  margin-left: 8px; padding: 4px 12px; cursor: pointer;
  background: rgba(40, 80, 60, 0.5); border: 1px solid rgba(101, 217, 124, 0.5);
  color: #8fe0a8; font-family: Bahnschrift, sans-serif; font-size: 10px; letter-spacing: 1.5px; font-weight: 700;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.trade-upgrade-btn:hover, .to-buy:hover { background: rgba(60, 120, 86, 0.7); color: #d6ffe4; border-color: rgba(120, 240, 150, 0.85); }
.trade-head {
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.2);
  color: #cfe1f2; font-size: 11px; letter-spacing: 3px; font-weight: 700;
}
.trade-head small { color: #5a7491; letter-spacing: 1.5px; font-weight: 600; }
.trade-empty { padding: 10px 12px; color: #5a7491; font-size: 10px; letter-spacing: 1.5px; font-style: italic; }
.trade-leadcols { display: flex; gap: 14px; }
.trade-leadcol { flex: 1 1 0; }
.tl-head { padding: 6px 10px; margin-bottom: 4px; font-size: 9.5px; letter-spacing: 2px; font-weight: 700; }
.tl-head.buy  { color: #ffd58a; background: rgba(60, 48, 20, 0.35); border-left: 2px solid rgba(255, 213, 138, 0.6); }
.tl-head.sell { color: #8fe0a8; background: rgba(24, 50, 36, 0.35); border-left: 2px solid rgba(101, 217, 124, 0.6); }
.trade-lead { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 10.5px; border-bottom: 1px solid rgba(76, 177, 255, 0.08); }
.trade-lead .tl-good { flex: 0 0 130px; color: #e2eaf3; font-weight: 600; }
.trade-lead.contra .tl-good { color: #ff9a8a; }
.trade-lead .tl-sys { flex: 1 1 0; color: #9ab0c6; }
.trade-lead .tl-price { flex: 0 0 auto; font-weight: 700; }
.trade-lead .tl-price.hi { color: #ffd58a; }
.trade-lead .tl-price.lo { color: #8fe0a8; }
.trade-route, .trade-offer {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 12px; margin-bottom: 4px;
  background: rgba(20, 30, 45, 0.45); border: 1px solid rgba(76, 177, 255, 0.14);
  font-size: 11px; letter-spacing: 0.5px; color: #aebfd0;
}
.trade-route.contra { border-color: rgba(180, 40, 40, 0.4); }
.trade-route.intel  { border-color: rgba(200, 150, 70, 0.45); background: rgba(40, 32, 14, 0.4); }
.trade-route.mark   { border-color: rgba(255, 213, 138, 0.55); background: rgba(44, 36, 16, 0.45); }
.trade-route .tr-star {
  flex: 0 0 auto; width: 22px; padding: 0; cursor: pointer;
  background: transparent; border: none; color: #5a7491; font-size: 15px; line-height: 1;
  transition: color 120ms ease, transform 120ms ease;
}
.trade-route .tr-star:hover { color: #ffd58a; transform: scale(1.15); }
.trade-route .tr-star.on { color: #ffd058; }
.th-pos { color: #7cf0c8 !important; }
.th-neg { color: #ff6a6a !important; }
.trade-route.th-row .tr-good { flex: 0 0 200px; }
.trade-route .th-acq { color: #6a7d92; font-style: italic; }
/* In-game market item tooltip — a glass card pinned at the cursor, above the
   market modal. Replaces the browser title popup. */
.adv-item-tooltip {
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 420px; max-width: 44vw;
  max-height: 88vh; overflow: hidden;
  padding: 12px 16px 14px;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.98), rgba(8, 12, 18, 0.99));
  border: 1px solid rgba(120, 180, 255, 0.5);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.65), inset 0 0 18px rgba(76, 177, 255, 0.06);
  font-family: Bahnschrift, sans-serif;
  pointer-events: none;
  user-select: none;
}
.adv-item-tooltip.hidden { display: none; }
.adv-item-tooltip .it-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.adv-item-tooltip .it-name { font-size: 13.5px; letter-spacing: 2px; font-weight: 700; color: #e8f2ff; }
.adv-item-tooltip .it-fac  { font-size: 9px; letter-spacing: 1.5px; font-weight: 700; color: #ffb87a; white-space: nowrap; }
.adv-item-tooltip .it-stats { font-size: 9.5px; letter-spacing: 1px; color: #7fa8cc; margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid rgba(120, 180, 255, 0.16); }
.adv-item-tooltip .it-desc { font-size: 11px; line-height: 1.45; color: #cdd9e6; }
.adv-item-tooltip .it-lore { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(120, 180, 255, 0.16); }
.adv-item-tooltip .it-lore-p { margin: 0 0 8px; font-size: 11px; line-height: 1.55; color: #7c858f; }
.adv-item-tooltip .it-lore-p:last-child { margin-bottom: 0; }
.adv-item-tooltip .it-lore-p:first-child::first-letter { font-size: 15px; color: #9aa3ad; font-weight: 600; }
.sys-link { cursor: pointer; border-bottom: 1px dotted rgba(158, 214, 255, 0.4); transition: color 120ms ease, border-color 120ms ease; }
.sys-link:hover { color: #fff; border-bottom-color: #9ed6ff; }
.trade-route .tr-good  { flex: 0 0 175px; color: #e2eaf3; font-weight: 700; }
.trade-route .tr-good em { color: #ff9a8a; font-style: normal; font-weight: 600; font-size: 9.5px; letter-spacing: 1px; }
.trade-route .tr-buy   { flex: 1 1 0; color: #9ed6ff; }
.trade-route .tr-sell  { flex: 1 1 0; color: #8fe0a8; }
.trade-route .tr-buy b, .trade-route .tr-sell b { color: #fff; }
.trade-route .tr-arrow { flex: 0 0 auto; color: #5a7491; }
.trade-route .tr-profit { flex: 0 0 120px; text-align: right; color: #ffd58a; font-weight: 700; }
.trade-route .tr-profit small { color: #8a7448; font-weight: 600; }
.trade-route .tr-dist  { flex: 0 0 64px; text-align: right; color: #5a7491; font-size: 10px; }
.trade-offer { border-style: dashed; border-color: rgba(200, 150, 70, 0.4); }
.trade-offer.station { border-color: rgba(76, 177, 255, 0.4); }
.trade-offer.station .to-tease { color: #9ed6ff; }
.trade-offer .to-tease { flex: 0 0 240px; color: #e0c070; font-weight: 700; letter-spacing: 1px; }
.trade-offer .to-band  { flex: 1 1 0; color: #ffd58a; }
.trade-offer .to-dist  { flex: 0 0 110px; color: #5a7491; }
.trade-offer .to-buy   { flex: 0 0 auto; margin-left: auto; }

/* ====================================================================
   BLACK-MARKET MODE — the whole market goes red when the black market is
   toggled on, so it's unmistakable you're off the books. Overrides the
   default blue accents across the panel chrome. */
.market-modal.blackmarket-mode .market-panel {
  border-color: #ff5a4a;
  box-shadow: 0 0 40px rgba(255, 70, 50, 0.34), inset 0 0 26px rgba(255, 60, 40, 0.09);
  background: linear-gradient(180deg, rgba(30, 14, 14, 0.96), rgba(16, 8, 8, 0.97));
}
.market-modal.blackmarket-mode .market-header,
.market-modal.blackmarket-mode .market-tabs { border-bottom-color: rgba(255, 80, 60, 0.28); }
.market-modal.blackmarket-mode .market-credits { border-left-color: rgba(255, 80, 60, 0.24); border-right-color: rgba(255, 80, 60, 0.24); }
.market-modal.blackmarket-mode .market-title h2 {
  color: #ffd2c6;
  text-shadow: 0 0 14px rgba(255, 80, 60, 0.5);
}
.market-modal.blackmarket-mode .market-tabs .adv-market-tab.active {
  color: #ffd2c6;
  border-bottom-color: #ff5a4a;
  background: rgba(50, 18, 14, 0.5);
}
.market-modal.blackmarket-mode .market-tabs .adv-market-tab:hover { color: #ffd2c6; background: rgba(60, 22, 18, 0.55); }
.market-modal.blackmarket-mode .adv-market-tile { border-color: rgba(255, 80, 60, 0.16); }
.market-modal.blackmarket-mode .adv-market-tile:hover {
  background: rgba(60, 24, 20, 0.85);
  border-color: rgba(255, 90, 70, 0.6);
}
.market-modal.blackmarket-mode .market-section-title { color: #ffb0a2; }

/* ====================================================================
   MARKET MODAL — fullscreen station trade screen, opens from the rail's
   MARKET row. Centered panel like the captain modal / options modal,
   with a header (station name + supplies actions + close), filter tabs,
   and two scrollable grids (STATION GOODS / YOUR CARGO).
   ==================================================================== */
.market-modal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(6px);
  z-index: 50;
  animation: pauseFadeIn 180ms ease-out;
  font-family: Bahnschrift, sans-serif;
}
.market-modal.hidden { display: none; }
.market-panel {
  width: min(2100px, 96vw);
  height: min(1300px, 95vh);
  background: linear-gradient(180deg, rgba(14, 22, 34, 0.96), rgba(8, 12, 18, 0.96));
  border: 1px solid #4cb1ff;
  box-shadow: 0 0 36px rgba(76, 177, 255, 0.32), inset 0 0 24px rgba(76, 177, 255, 0.08);
  display: flex; flex-direction: column;
}
/* Solas modal — two-column variant. LEFT half is the character splash
   (big like in Hades, fills the whole vertical, no frame). RIGHT half
   is the research/build content. */
.market-panel.solas-panel {
  width: min(1400px, 97vw);
  height: min(900px, 95vh);
  flex-direction: row;
}
.solas-portrait-col {
  flex: 0 0 46%;
  max-width: 46%;
  position: relative;
  background: radial-gradient(ellipse at 30% 75%, rgba(255, 140, 60, 0.12), transparent 60%),
              radial-gradient(ellipse at 75% 25%, rgba(76, 177, 255, 0.10), transparent 55%),
              rgba(0, 0, 0, 1);
  border-right: 1px solid rgba(76, 177, 255, 0.22);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Portrait fills the FULL column — no boxy frame. Two stacked imgs
   for cross-fade between emotions. */
.solas-portrait-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.solas-portrait-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 260ms ease;
}
.solas-portrait-fade { opacity: 0; pointer-events: none; }
/* Atmospheric bottom-gradient over the portrait so the name/title
   reads cleanly against the artwork below. */
.solas-portrait-col::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg,
    rgba(8, 12, 18, 0.0) 0%,
    rgba(8, 12, 18, 0.55) 55%,
    rgba(8, 12, 18, 0.96) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Name + title overlay the lower portrait, like a Hades dialogue bar.
   Says line is the dialogue panel just below them. */
.solas-name {
  position: relative;
  z-index: 2;
  margin: auto 0 0 0;
  padding: 0 24px;
  font-size: 32px; letter-spacing: 12px; font-weight: 600;
  color: #ffd58a;
  text-shadow: 0 0 16px rgba(255, 200, 120, 0.45), 0 2px 6px rgba(0, 0, 0, 0.9);
}
.solas-title {
  position: relative;
  z-index: 2;
  margin: 4px 0 0 0;
  padding: 0 24px;
  font-size: 10px; letter-spacing: 4px; color: #ffb14c;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.solas-says {
  position: relative;
  z-index: 2;
  margin: 12px 24px 14px 24px;
  padding: 14px 18px;
  border-left: 2px solid rgba(255, 200, 120, 0.55);
  background: rgba(8, 12, 18, 0.78);
  font-size: 13px; line-height: 1.6;
  color: #cfe1f2;
  font-style: italic;
  letter-spacing: 0.4px;
  min-height: 60px;
  backdrop-filter: blur(2px);
}
/* Solas conversation panel — vertical column of topic buttons under
   the "she says" quote box. Click a topic → her line swaps + emotion
   shifts. Player can freely talk without being forced through dialog
   gates before the lab. Lives in the portrait column so it doesn't
   crowd the right-hand tabs. */
.solas-chat {
  position: relative;
  z-index: 2;
  margin: 0 24px 24px 24px;
  padding: 12px 14px;
  background: rgba(8, 12, 18, 0.65);
  border: 1px solid rgba(158, 214, 255, 0.18);
  border-top: 1px solid rgba(158, 214, 255, 0.32);
}
.solas-chat-label {
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(158, 214, 255, 0.65);
  margin-bottom: 8px;
  font-weight: 600;
}
.solas-chat-topics {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.solas-chat-topic {
  text-align: left;
  background: rgba(20, 32, 52, 0.55);
  border: 1px solid rgba(120, 180, 255, 0.25);
  color: #d6e6ff;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.10s, border-color 0.10s, color 0.10s;
}
.solas-chat-topic:hover {
  background: rgba(60, 100, 160, 0.55);
  border-color: rgba(180, 220, 255, 0.65);
  color: #fff;
}
.solas-chat-topic:active {
  transform: translateY(1px);
}
.solas-content-col {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-width: 0;
}
/* Fragments row — fragment counter + roll button. Sits at the top
   of the research tab, styled like a Hades-dialogue inset panel. */
.solas-fragments-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 24px 0 24px;
  padding: 10px 14px;
  background: rgba(158, 214, 255, 0.06);
  border-left: 2px solid rgba(158, 214, 255, 0.45);
}
.solas-fragments-label {
  font-size: 11px;
  letter-spacing: 3px;
  color: #9ed6ff;
  text-transform: uppercase;
}
.solas-fragments-label > span {
  color: #ffd58a;
  font-weight: 600;
}
/* Remembrance forge list — each Remembrance is a card with a flavor
   line + a row of forge-option buttons. Gold-accented to distinguish
   from research/build tiles. */
.solas-forge-list {
  display: flex; flex-direction: column;
  gap: 14px;
  margin: 0 24px 24px 24px;
}
.solas-forge-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  background: linear-gradient(180deg, rgba(255, 200, 120, 0.07), rgba(255, 200, 120, 0.02));
  border: 1px solid rgba(255, 200, 120, 0.35);
  padding: 14px 16px;
}
.solas-forge-card-icon {
  width: 96px; height: 96px;
  background: radial-gradient(ellipse at center,
    rgba(60, 36, 14, 0.85) 0%,
    rgba(20, 12, 6, 0.95) 80%);
  border: 1px solid rgba(255, 200, 120, 0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  color: rgba(255, 200, 120, 0.65);
  text-shadow: 0 0 10px rgba(255, 200, 120, 0.55);
  overflow: hidden;
}
.solas-forge-card-icon img {
  width: 96%; height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 200, 110, 0.30));
}
.solas-forge-card-icon.placeholder {
  font-weight: 300;
}
.solas-forge-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.solas-forge-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.solas-forge-card-name {
  font-size: 14px; letter-spacing: 4px; font-weight: 600;
  color: #ffd58a;
  text-transform: uppercase;
}
.solas-forge-card-count {
  font-size: 10px; letter-spacing: 2px;
  color: #9ed6ff;
}
.solas-forge-card-flavor {
  font-size: 11px; line-height: 1.6;
  color: #8aa9c6;
  font-style: italic;
  margin-bottom: 12px;
}
.solas-forge-options {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.solas-forge-opt {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(8, 14, 22, 0.85);
  border: 1px solid rgba(255, 200, 120, 0.55);
  color: #ffd58a;
  cursor: pointer;
  min-width: 160px;
  transition: background 160ms ease, transform 120ms ease;
}
.solas-forge-opt:hover:not(:disabled) {
  background: rgba(40, 30, 14, 0.95);
  transform: translateY(-1px);
}
.solas-forge-opt:disabled {
  cursor: default;
  opacity: 0.45;
}
.solas-forge-opt-label {
  font-size: 12px; letter-spacing: 2px;
  font-weight: 600;
}
.solas-forge-opt-cost {
  font-size: 10px; letter-spacing: 1px;
  color: #cfe1f2;
}
.market-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.18);
}
.market-title { display: flex; align-items: baseline; gap: 18px; }
.market-title h2 {
  margin: 0;
  font-size: 22px; letter-spacing: 8px; font-weight: 600;
  color: #cfe1f2;
  text-shadow: 0 0 14px rgba(76, 177, 255, 0.4);
}
.market-sub {
  font-size: 10px; letter-spacing: 4px; color: #ffd58a;
  font-weight: 600;
}
.market-refresh {
  font-size: 9px; letter-spacing: 2px; color: #6a8caa;
  font-weight: 600;
}
.market-credits {
  display: flex; flex-direction: column; align-items: flex-end;
  margin-left: auto; margin-right: 18px;
  padding: 0 14px;
  border-left: 1px solid rgba(76, 177, 255, 0.18);
  border-right: 1px solid rgba(76, 177, 255, 0.18);
}
.market-credits-label {
  font-size: 9px; letter-spacing: 3px; color: #5a7491;
}
.market-credits-val {
  font-size: 18px; letter-spacing: 1px; font-weight: 600;
  color: #ffd58a;
  text-shadow: 0 0 6px rgba(255, 213, 138, 0.35);
}
.market-actions { display: flex; gap: 8px; }
.market-actions .btn { padding: 8px 14px; font-size: 10px; letter-spacing: 3px; }
.market-tabs {
  display: flex;
  border-bottom: 1px solid rgba(76, 177, 255, 0.18);
  padding: 0 18px;
}
.market-tabs .adv-market-tab {
  flex: 0 0 auto;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #5a7491;
  font-family: Bahnschrift, sans-serif;
  font-size: 10.5px; letter-spacing: 3px; font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.market-tabs .adv-market-tab:hover { color: #cfe1f2; background: rgba(28, 44, 63, 0.55); }
.market-tabs .adv-market-tab.active {
  color: #cfe1f2;
  border-bottom-color: #4cb1ff;
  background: rgba(20, 30, 45, 0.4);
}
.market-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 24px;
}
.market-section-title {
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 5px;
  color: #5a7491;
  font-weight: 600;
  margin: 8px 0 12px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.market-section-title:not(:first-child) { margin-top: 22px; }
/* Market body split — main goods/cargo on the left, storage in a side rail. */
.market-cols { display: flex; gap: 22px; align-items: flex-start; }
.market-main { flex: 1; min-width: 0; }
.market-side {
  width: 340px; flex-shrink: 0;
  border-left: 1px solid rgba(60, 80, 104, 0.3); padding-left: 20px;
}
.market-side.hidden { display: none; }
.market-side .adv-market-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* Persistent transaction panel sits in the side rail; subtle framing. */
#adv-market-exchange {
  background: rgba(10, 16, 24, 0.5); border: 1px solid rgba(60, 80, 104, 0.35);
  border-radius: 6px; padding: 12px 14px; margin-bottom: 16px;
}
/* Exchange (cart) panel */
.adv-market-exchange.hidden { display: none; }
.adv-market-tab-exchange { color: #9ed6ff; }
.adv-market-tab-exchange.active { color: #d9ecff !important; background: rgba(30, 56, 84, 0.6) !important; }
.xchg-cols { display: flex; gap: 18px; align-items: flex-start; }
.xchg-col { flex: 1; min-width: 0; }
.xchg-col-title { font-size: 10px; letter-spacing: 3px; font-weight: 700; margin: 0 0 8px; }
.xchg-col-title.buy  { color: #ff9a6a; }
.xchg-col-title.sell { color: #7cf0c8; }
.xchg-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px;
  background: rgba(12, 18, 26, 0.6); border: 1px solid #1c2c3f; border-radius: 4px;
  font-family: Bahnschrift, sans-serif; font-size: 11px; color: #c6d8ea;
}
.xchg-row .xr-name { flex: 1; letter-spacing: 1px; }
.xchg-row .xr-step { width: 20px; height: 20px; line-height: 18px; text-align: center; cursor: pointer; border: 1px solid #2c4258; border-radius: 3px; background: rgba(20,30,45,0.7); color: #cfe1f2; }
.xchg-row .xr-step:hover { border-color: #4f7ba6; color: #fff; }
.xchg-row .xr-qty { min-width: 28px; text-align: center; font-weight: 700; }
.xchg-row .xr-total { min-width: 70px; text-align: right; color: #ffd58a; }
.xchg-empty { font-size: 10px; letter-spacing: 1.5px; color: #5a7491; padding: 8px; font-style: italic; }
.xchg-summary {
  margin-top: 16px; padding: 14px 16px; border-top: 1px solid rgba(60,80,104,0.4);
  font-family: Bahnschrift, sans-serif; font-size: 12px; letter-spacing: 1px;
}
.xchg-line { display: flex; justify-content: space-between; margin: 4px 0; color: #aebfce; }
.xchg-line .v { font-weight: 700; }
.xchg-line.spend .v { color: #ff9a6a; }
.xchg-line.gain  .v { color: #7cf0c8; }
.xchg-line.tariff .v { color: #ff7766; }
.xchg-line.net { font-size: 14px; color: #e8f2ff; border-top: 1px solid rgba(60,80,104,0.4); padding-top: 8px; margin-top: 8px; }
.xchg-line.net .v.pos { color: #7cf0c8; }
.xchg-line.net .v.neg { color: #ff9a6a; }
.xchg-line .v.neg { color: #ff6a6a; }
.xchg-line.over { color: #ff6a6a; font-weight: 700; letter-spacing: 1px; }
.xchg-line.over .v.neg { color: #ff6a6a; }
.xchg-actions { display: flex; gap: 10px; margin-top: 14px; }
.xchg-actions .btn { flex: 1; }
/* Can't-afford CONFIRM — reads as blocked but stays clickable so it can deny. */
.xchg-actions .btn.xchg-blocked {
  background: rgba(120, 30, 30, 0.4) !important;
  border-color: rgba(200, 70, 70, 0.6) !important;
  color: #ff8a8a !important;
  cursor: not-allowed;
}
.market-section-counter {
  font-size: 10px; letter-spacing: 2px;
  color: #9ed6ff;
  font-weight: 700;
}
/* Override grid column count for the fullscreen modal — more room means
   more tiles per row. 8 columns at ~110px each = comfortable density. */
.market-modal .adv-market-grid {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

/* ====================================================================
   UNIFIED MARKET GRID — Starsector-style icon tiles for every kind of
   tradeable: resources, weapons, hulls, hullmods, modules. Each tile
   is a square with a colored icon block + small name/value text +
   click-to-transact. STATION GOODS grid sits above YOUR CARGO grid;
   filter tabs at the top of the market page filter both. */
.adv-market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.adv-market-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 6px 4px;
  background: rgba(20, 30, 45, 0.55);
  border: 1px solid rgba(76, 177, 255, 0.18);
  font-family: Bahnschrift, sans-serif;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  overflow: hidden;
  user-select: none;
}
.adv-market-tile:hover {
  background: rgba(28, 44, 63, 0.85);
  border-color: rgba(76, 177, 255, 0.55);
  transform: translateY(-1px);
}
.adv-market-tile.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.adv-market-tile.disabled:hover { transform: none; }
.adv-market-tile.owned {
  border-color: rgba(101, 217, 124, 0.45);
  background: rgba(20, 38, 28, 0.4);
}
.adv-market-tile.owned::before {
  content: 'OWNED';
  position: absolute;
  top: 4px; right: 4px;
  font-size: 7px; letter-spacing: 1.5px;
  color: rgba(101, 217, 124, 0.85);
  font-weight: 700;
}
.adv-market-tile .mt-icon {
  width: 104px; height: 104px;
  border: 1px solid currentColor;
  background: currentColor;
  opacity: 0.82;
  margin-bottom: 4px;
  position: relative;
  flex-shrink: 0;
}
.adv-market-tile .mt-icon::after {
  content: '';
  position: absolute; inset: 3px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
/* Painted-sprite variant — when _tile is called with `icon`, the color-
   square fallback is suppressed and the sprite fills the icon slot.
   Sprites have baked alpha (perimeter-flood chromakey'd at build time)
   so normal alpha compositing handles disabled/hover states cleanly. */
.adv-market-tile .mt-icon.has-sprite {
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  opacity: 1;
}
.adv-market-tile .mt-icon.has-sprite::after { display: none; }
/* <img> sprite overlay — fills the icon box; on 404 the img hides (JS onerror)
   and the colored fallback square shows through. :has() suppresses the color
   box + ::after only while a live sprite is present. */
.adv-market-tile .mt-icon-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
/* Sprite icons sit bare on the tile — no dark box, no frame (the art is
   chromakey'd with baked alpha, so it reads clean against the tile bg). */
.adv-market-tile .mt-icon:has(.mt-icon-img) {
  background: transparent; border: none; opacity: 1;
}
.adv-market-tile .mt-icon:has(.mt-icon-img)::after { display: none; }
.adv-market-tile .mt-name {
  font-size: 9.5px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #cfe1f2;
  text-align: center;
  line-height: 1.15;
  max-height: 24px;
  overflow: hidden;
}
.adv-market-tile .mt-meta {
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #ffd58a;
  margin-top: 3px;
}
.adv-market-tile .mt-count {
  position: absolute;
  bottom: 3px; left: 4px;
  font-size: 8.5px; letter-spacing: 1px;
  font-weight: 700;
  color: #9ed6ff;
}
.adv-market-tile .mt-eject {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  border: 1px solid rgba(255, 119, 85, 0.55);
  background: rgba(20, 12, 12, 0.85);
  color: #ff7755;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease;
  padding: 0;
}
.adv-market-tile:hover .mt-eject { opacity: 1; }
.adv-market-tile .mt-eject:hover { background: rgba(80, 20, 20, 0.95); }
/* Transfer-to-storage / take-from-storage arrows (Phase 4b). Shares
   the eject-button layout but lives on the LEFT edge so it can't
   collide with × eject. Color contrasts with eject (cyan vs. red). */
.adv-market-tile .mt-xfer {
  position: absolute;
  top: 4px; left: 4px;
  width: 18px; height: 16px;
  border: 1px solid rgba(120, 200, 255, 0.55);
  background: rgba(10, 24, 36, 0.85);
  color: #78c8ff;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease;
  padding: 0;
}
.adv-market-tile:hover .mt-xfer { opacity: 1; }
.adv-market-tile .mt-xfer:hover { background: rgba(20, 60, 100, 0.95); }

/* ====================================================================
   CARGO HOLD — Starsector-style inventory grid. 4-column grid of
   resource tiles, each with a colored icon block, a count, and an
   EJECT button visible on hover. Capacity bar above grid.
   ==================================================================== */
.adv-cargo-bar {
  width: 100%; height: 4px;
  background: rgba(20, 30, 45, 0.85);
  border: 1px solid rgba(76, 177, 255, 0.18);
  margin-top: 4px; margin-bottom: 12px;
  overflow: hidden;
}
.adv-cargo-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #4cb1ff 0%, #65d97c 60%, #ffd58a 100%);
  box-shadow: 0 0 6px rgba(76, 177, 255, 0.5);
  transition: width 400ms ease-out;
}
.adv-cargo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.adv-cargo-tile {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(20, 30, 45, 0.55);
  border: 1px solid rgba(76, 177, 255, 0.18);
  font-family: Bahnschrift, sans-serif;
  cursor: default;
  transition: border-color 160ms ease, background 160ms ease;
  overflow: hidden;
}
.adv-cargo-tile:hover {
  background: rgba(28, 44, 63, 0.85);
  border-color: rgba(76, 177, 255, 0.45);
}
.adv-cargo-tile .ct-icon {
  width: 38px; height: 38px;
  border: 1px solid currentColor;
  background: currentColor;
  opacity: 0.85;
  margin-bottom: 6px;
  position: relative;
}
.adv-cargo-tile .ct-icon::after {
  content: '';
  position: absolute; inset: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.adv-cargo-tile .ct-name {
  font-size: 8px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #cfe1f2;
  margin-bottom: 2px;
  text-align: center;
  line-height: 1.2;
}
.adv-cargo-tile .ct-count {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #ffd58a;
}
.adv-cargo-tile .ct-eject {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  border: 1px solid rgba(255, 119, 85, 0.55);
  background: rgba(20, 12, 12, 0.85);
  color: #ff7755;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease;
  padding: 0;
}
.adv-cargo-tile:hover .ct-eject { opacity: 1; }
.adv-cargo-tile .ct-eject:hover { background: rgba(80, 20, 20, 0.95); }
.adv-cargo-empty {
  margin-top: 18px;
  text-align: center;
  font-family: Bahnschrift, sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  color: #5a7491;
  padding: 24px 0;
  border: 1px dashed rgba(76, 177, 255, 0.18);
}
.adv-cargo-empty.hidden { display: none; }

/* ====================================================================
   CUTSCENE — full-screen narrative overlay. Black background, big white
   serif-ish text centered, slow fade in/out per panel. Skip hint pulses
   in the bottom-right. Used for the intro and future narrative beats.
   ==================================================================== */
.cutscene-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: #000;
  overflow: hidden;
  font-family: "Trebuchet MS", "Bahnschrift", system-ui, sans-serif;
  cursor: pointer;
  opacity: 1;
  transition: opacity 1200ms ease;
}
.cutscene-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.cutscene-overlay.hidden { display: none; }
.cutscene-bg {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(0.45) saturate(0.85);
  /* 900ms cross-fade between panel bgs — long enough to feel cinematic
     but quick enough that the new image is established by the time the
     audio kicks in. Two stacked .cutscene-bg layers swap which is on
     top each panel; the swap is invisible because both transitions
     run simultaneously. */
  transition: opacity 900ms ease;
}
.cutscene-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 12vw;
  color: #f0f4f8;
  font-size: clamp(22px, 3.2vw, 42px);
  font-weight: 300;
  letter-spacing: 1.5px;
  line-height: 1.5;
  text-shadow: 0 0 24px rgba(180, 200, 230, 0.18);
  white-space: pre-wrap;
  opacity: 0;
  transition: opacity 800ms ease;
}
/* Karaoke reveal: unrevealed chars stay in the DOM so the final layout
   is reserved from frame 1, but they're invisible until playback
   reaches them. Avoids center-realignment jumping as words appear. */
.cutscene-text .cs-hidden { visibility: hidden; }
.cutscene-skip {
  position: absolute;
  bottom: 28px; right: 32px;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.32);
  animation: cutsceneSkipPulse 2.4s ease-in-out infinite;
}
@keyframes cutsceneSkipPulse {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.65; }
}

/* ====================================================================
   LORE MODAL — opens when player F-clicks a landmark (Broken Moon, etc).
   ==================================================================== */
.lore-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(6px);
  z-index: 180;
  animation: pauseFadeIn 220ms ease-out;
  font-family: Bahnschrift, sans-serif;
}
.lore-overlay.hidden { display: none; }
.lore-panel {
  width: min(640px, 92vw);
  max-height: 80vh;
  background: linear-gradient(180deg, rgba(14, 22, 34, 0.96), rgba(8, 12, 18, 0.96));
  border: 1px solid #4cb1ff;
  box-shadow: 0 0 36px rgba(76, 177, 255, 0.32),
              inset 0 0 24px rgba(76, 177, 255, 0.08);
  display: flex; flex-direction: column;
}
.lore-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.18);
}
.lore-header h2 {
  margin: 0;
  font-size: 20px; letter-spacing: 7px; color: #cfe1f2;
  text-shadow: 0 0 14px rgba(76, 177, 255, 0.5);
  font-weight: 600;
}
.lore-body {
  padding: 22px 28px 28px;
  overflow-y: auto;
  font-family: Bahnschrift, "Trebuchet MS", system-ui, sans-serif;
  font-size: 13px; line-height: 1.7;
  color: rgba(207, 225, 242, 0.85);
  letter-spacing: 0.3px;
  white-space: pre-wrap;
}

/* ====================================================================
   PAUSE MENU + OPTIONS MODAL — full-screen overlays, fade-in on show.
   Z-indexed above the dock hub (z=10) so ESC-during-dock still works.
   ==================================================================== */
.pause-overlay,
.options-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(6px);
  z-index: 200;
  animation: pauseFadeIn 180ms ease-out;
  font-family: Bahnschrift, sans-serif;
}
.pause-overlay.hidden,
.options-overlay.hidden { display: none; }
@keyframes pauseFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pause-panel {
  width: min(360px, 92vw);
  background: linear-gradient(180deg, rgba(14, 22, 34, 0.96), rgba(8, 12, 18, 0.96));
  border: 1px solid #4cb1ff;
  box-shadow: 0 0 36px rgba(76, 177, 255, 0.35), inset 0 0 24px rgba(76, 177, 255, 0.08);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.pause-title {
  margin: 0 0 18px;
  font-size: 28px; letter-spacing: 10px; text-align: center;
  color: #9ed6ff;
  text-shadow: 0 0 14px rgba(76, 177, 255, 0.5);
}
.pause-panel .btn {
  width: 100%;
  padding: 14px 18px;
  font-family: Bahnschrift, sans-serif;
  font-size: 13px; letter-spacing: 4px; font-weight: 600;
}

/* OPTIONS modal */
.options-panel {
  width: min(720px, 95vw);
  height: min(600px, 88vh);
  background: linear-gradient(180deg, rgba(14, 22, 34, 0.96), rgba(8, 12, 18, 0.96));
  border: 1px solid #4cb1ff;
  box-shadow: 0 0 36px rgba(76, 177, 255, 0.35), inset 0 0 24px rgba(76, 177, 255, 0.08);
  display: flex; flex-direction: column;
}
.options-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.18);
}
.options-header h2 {
  margin: 0;
  font-size: 18px; letter-spacing: 6px; color: #9ed6ff;
  text-shadow: 0 0 10px rgba(76, 177, 255, 0.4);
}
.options-tabs {
  display: flex;
  border-bottom: 1px solid rgba(76, 177, 255, 0.18);
}
.options-tab {
  flex: 1;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #5a7491;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.options-tab:hover { color: #cfe1f2; background: rgba(28, 44, 63, 0.55); }
.options-tab.active {
  color: #cfe1f2;
  border-bottom-color: #4cb1ff;
  background: rgba(20, 30, 45, 0.4);
}
.options-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.options-pane.hidden { display: none; }

.opt-row {
  display: grid;
  grid-template-columns: 220px 1fr 60px;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(76, 177, 255, 0.08);
}
.opt-label {
  font-size: 11px; letter-spacing: 3px; font-weight: 600;
  color: #8aa9c6;
}
.opt-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(20, 30, 45, 0.85);
  border: 1px solid rgba(76, 177, 255, 0.18);
  outline: none;
}
.opt-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: #4cb1ff;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(76, 177, 255, 0.7);
}
.opt-row input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: #4cb1ff;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(76, 177, 255, 0.7);
}
.opt-val {
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 1px;
  color: #cfe1f2;
  text-align: right;
}
.opt-toggle {
  position: relative;
  display: inline-block;
  width: 44px; height: 22px;
}
.opt-toggle input { opacity: 0; width: 0; height: 0; }
.opt-toggle-track {
  position: absolute; inset: 0;
  background: rgba(20, 30, 45, 0.85);
  border: 1px solid rgba(76, 177, 255, 0.32);
  cursor: pointer;
  transition: background 160ms ease;
}
.opt-toggle-track::before {
  content: ''; position: absolute;
  width: 14px; height: 14px;
  top: 2px; left: 3px;
  background: #4cb1ff;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), background 160ms ease;
  box-shadow: 0 0 6px rgba(76, 177, 255, 0.55);
}
.opt-toggle input:checked + .opt-toggle-track {
  background: rgba(76, 177, 255, 0.18);
  border-color: #4cb1ff;
}
.opt-toggle input:checked + .opt-toggle-track::before {
  transform: translateX(22px);
  background: #65d97c;
}

/* Keybindings list */
.opt-rebind-hint {
  font-size: 10px; letter-spacing: 2px;
  color: #5a7491;
  margin-bottom: 14px;
  font-style: italic;
}
.opt-keybindings-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.opt-kb-section {
  margin-top: 14px;
  font-size: 9px; letter-spacing: 4px;
  color: #4cb1ff;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.18);
}
.opt-kb-section:first-child { margin-top: 0; }
.opt-kb-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(20, 30, 45, 0.40);
  border: 1px solid rgba(76, 177, 255, 0.10);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.opt-kb-row:hover {
  background: rgba(28, 44, 63, 0.7);
  border-color: rgba(76, 177, 255, 0.45);
}
.opt-kb-row .opt-kb-label {
  font-size: 11px; letter-spacing: 1px; color: #cfe1f2;
}
.opt-kb-row .opt-kb-key {
  font-family: Bahnschrift, sans-serif;
  font-size: 11px; letter-spacing: 2px; font-weight: 600;
  color: #9ed6ff;
  background: rgba(8, 12, 18, 0.85);
  border: 1px solid #2c425d;
  padding: 6px 10px;
  text-align: center;
  min-width: 64px;
}
.opt-kb-row.rebinding .opt-kb-key {
  color: #ffd58a;
  border-color: #ffd58a;
  background: rgba(40, 30, 12, 0.7);
  animation: rebindPulse 1.0s ease-in-out infinite;
}
@keyframes rebindPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 213, 138, 0.4); }
  50%      { box-shadow: 0 0 14px rgba(255, 213, 138, 0.8); }
}
.opt-actions {
  margin-top: 18px;
  display: flex; justify-content: flex-end;
  border-top: 1px solid rgba(76, 177, 255, 0.18);
  padding-top: 14px;
}

/* ============================ ROGUELITE MODE ============================ */
#roguelite {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #050a14 0%, #02050c 100%);
  color: #cce0ff;
  font-family: 'Bahnschrift', sans-serif;
  overflow: hidden;
  z-index: 10;
}
#roguelite.hidden { display: none; }
.rl-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 40% 30%, rgba(120, 160, 220, 0.06), transparent 60%),
              radial-gradient(ellipse at 60% 70%, rgba(176, 138, 255, 0.04), transparent 60%);
  pointer-events: none;
}
.rl-root {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
}
.rl-header {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(76, 177, 255, 0.15);
  background: rgba(8, 14, 26, 0.55);
}
.rl-title {
  font-weight: 700; font-size: 18px; letter-spacing: 2px;
  color: #9ed6ff; text-transform: uppercase;
}
.rl-stats {
  display: flex; gap: 18px; margin-left: auto; margin-right: 16px;
}
.rl-stat {
  display: flex; flex-direction: column; align-items: flex-end;
  font-weight: 600; font-size: 14px; color: #ffffff;
}
.rl-stat-label {
  font-size: 9px; letter-spacing: 1.4px; color: #5a7491; font-weight: 500;
}

.rl-view { padding: 32px; flex: 1; overflow: auto; }
.rl-view.hidden { display: none; }

.rl-panels {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; max-width: 880px; margin: 0 auto 36px;
}
.rl-panel {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 28px;
  background: rgba(8, 14, 26, 0.7);
  border: 1px solid rgba(120, 160, 200, 0.30);
  color: #cce0ff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rl-panel:hover {
  border-color: rgba(158, 214, 255, 0.85);
  background: rgba(20, 32, 56, 0.85);
}
.rl-panel-primary {
  border-color: rgba(255, 213, 138, 0.55);
}
.rl-panel-primary:hover {
  border-color: rgba(255, 213, 138, 0.95);
  background: rgba(40, 28, 8, 0.55);
}
.rl-panel-icon {
  font-size: 28px; color: #9ed6ff; margin-bottom: 12px;
}
.rl-panel-primary .rl-panel-icon { color: #ffd58a; }
.rl-panel-title {
  font-size: 16px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 4px;
}
.rl-panel-sub {
  font-size: 11px; color: #6890b0; font-weight: 500;
}
.rl-panel-badge {
  position: absolute; top: 12px; right: 14px;
  display: none;
  background: #ffd58a; color: #02050c;
  border-radius: 12px; padding: 2px 9px;
  font-size: 11px; font-weight: 700;
}
.rl-panel-badge.visible { display: inline-block; }

.rl-codex {
  max-width: 880px; margin: 0 auto;
  padding: 20px 26px;
  background: rgba(8, 14, 26, 0.5);
  border: 1px solid rgba(76, 177, 255, 0.15);
}
.rl-codex-title {
  font-size: 11px; letter-spacing: 1.6px; color: #5a7491;
  font-weight: 700; margin-bottom: 10px;
}
.rl-codex-row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 4px 0; color: #9ec0e0;
}

/* Expedition picker */
.rl-picker-title { font-size: 24px; font-weight: 700; letter-spacing: 3px; color: #9ed6ff; text-align: center; margin-bottom: 6px; }
.rl-picker-sub { text-align: center; color: #6890b0; font-size: 12px; margin-bottom: 28px; }
.rl-picker-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 1100px; margin: 0 auto 24px;
}
.rl-pick-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px;
  background: rgba(8, 14, 26, 0.75);
  border: 1px solid;
  color: #cce0ff;
  cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.rl-pick-tile:hover { background: rgba(20, 32, 56, 0.95); }
.rl-pick-tile-name { font-weight: 700; font-size: 14px; letter-spacing: 1.2px; }
.rl-pick-tile-sub { font-size: 11px; color: #6890b0; min-height: 28px; }
.rl-pick-tile-meta {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #7090b0; padding-top: 4px;
  border-top: 1px solid rgba(120, 160, 200, 0.15); margin-top: 4px;
}

/* Map view */
.rl-map-header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: rgba(8, 14, 26, 0.7);
  border-bottom: 1px solid rgba(76, 177, 255, 0.15);
}
.rl-map-name { font-weight: 700; font-size: 14px; letter-spacing: 1.4px; color: #ffd58a; }
.rl-map-stats { display: flex; gap: 16px; margin-left: auto; margin-right: 16px; }
.rl-mstat { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; color: #fff; font-weight: 600; }
.rl-mstat-label { font-size: 9px; color: #5a7491; letter-spacing: 1.2px; font-weight: 500; }
.rl-map-canvas-wrap {
  flex: 1; min-height: 360px;
  position: relative;
  background: #02050c;
}
#rl-map-canvas { display: block; cursor: pointer; }
.rl-map-footer {
  display: flex; gap: 16px; padding: 12px 24px;
  background: rgba(8, 14, 26, 0.7);
  border-top: 1px solid rgba(76, 177, 255, 0.15);
  font-size: 11px;
}
.rl-perks, .rl-consumables { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rl-perk {
  display: inline-block; padding: 3px 10px;
  background: rgba(154, 255, 200, 0.12);
  border: 1px solid rgba(154, 255, 200, 0.4);
  color: #9affc8; font-weight: 600; font-size: 10px; letter-spacing: 0.8px;
}
.rl-consumable {
  display: inline-block; padding: 3px 10px;
  background: rgba(255, 213, 138, 0.12);
  border: 1px solid rgba(255, 213, 138, 0.4);
  color: #ffd58a; font-weight: 600; font-size: 10px; letter-spacing: 0.8px;
}
.rl-perk-empty { font-size: 10px; color: #5a7491; font-style: italic; }

/* Modal */
.rl-modal {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(6px);
}
.rl-modal.hidden { display: none; }
.rl-modal-body {
  width: min(520px, 90%);
  padding: 22px 26px;
  background: rgba(8, 14, 26, 0.95);
  border: 1px solid rgba(158, 214, 255, 0.45);
  box-shadow: 0 0 32px rgba(158, 214, 255, 0.18);
}
.rl-modal-title {
  font-weight: 700; font-size: 16px; letter-spacing: 1.8px;
  color: #ffd58a; margin-bottom: 12px;
}
.rl-modal-content { font-size: 13px; line-height: 1.55; color: #cce0ff; margin-bottom: 16px; }
.rl-modal-content p { margin: 0 0 8px; }
.rl-modal-content ul, .rl-modal-list { margin: 6px 0; padding-left: 18px; }
.rl-modal-content li { margin: 2px 0; font-size: 12px; }
.rl-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  border-top: 1px solid rgba(120, 160, 200, 0.18);
  padding-top: 12px;
}
.rl-shop-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.rl-shop-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: rgba(20, 32, 56, 0.65);
  border: 1px solid rgba(120, 160, 200, 0.30);
  color: #cce0ff;
  font-size: 12px; cursor: pointer;
}
.rl-shop-row:hover:not([disabled]) { background: rgba(30, 48, 80, 0.85); border-color: #9ed6ff; }
.rl-shop-row[disabled] { opacity: 0.4; cursor: not-allowed; }
.rl-shop-row.rl-shop-bought { opacity: 0.5; background: rgba(154, 255, 200, 0.10); border-color: rgba(154, 255, 200, 0.4); }
.rl-research-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.rl-research-row {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 12px;
  background: rgba(20, 32, 56, 0.55);
  border: 1px solid rgba(120, 160, 200, 0.20);
}
.rl-research-info { flex: 1; }
.rl-research-name { font-size: 11px; font-weight: 700; color: #9ed6ff; letter-spacing: 1px; }
.rl-research-id { font-size: 10px; color: #6890b0; font-family: monospace; }
.rl-research-cost { font-size: 11px; color: #ffd58a; font-weight: 600; min-width: 80px; text-align: right; }

/* Roguelite combat scene */
.rl-view-combat {
  position: relative;
  padding: 0 !important;
  height: 100%;
  overflow: hidden;
}
#rl-combat-canvas {
  display: block;
  width: 100%; height: 100%;
  cursor: crosshair;
}
.rl-combat-hud {
  position: absolute; left: 24px; bottom: 18px; right: 24px;
  pointer-events: none;
  font-family: 'Bahnschrift', sans-serif; color: #cce0ff;
}
.rl-combat-bars { display: flex; flex-direction: column; gap: 4px; max-width: 380px; }
.rl-bar-row { display: flex; align-items: center; gap: 10px; }
.rl-bar-label {
  font-size: 10px; letter-spacing: 1.2px; color: #6890b0;
  font-weight: 700; width: 50px;
}
.rl-bar {
  flex: 1; height: 8px;
  background: rgba(8, 14, 26, 0.7);
  border: 1px solid rgba(120, 160, 200, 0.30);
  position: relative;
}
.rl-bar-fill { height: 100%; transition: width 0.12s linear; }
.rl-bar-hull   { background: linear-gradient(to right, #ff8a3a, #ffd58a); }
.rl-bar-shield { background: linear-gradient(to right, #4ca8ff, #9ed6ff); }
.rl-bar-flux   { background: linear-gradient(to right, #b85a3a, #ff8a3a); }
.rl-combat-status {
  margin-top: 12px;
  font-size: 14px; font-weight: 700; letter-spacing: 1.6px;
  color: #ffd58a;
}
.rl-combat-keys {
  margin-top: 4px;
  font-size: 10px; letter-spacing: 0.6px; color: #5a7491;
}
.rl-combat-banner {
  position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Bahnschrift', sans-serif;
  font-size: 56px; font-weight: 700; letter-spacing: 8px;
  color: #ffd58a;
  text-shadow: 0 0 24px rgba(255, 213, 138, 0.6);
  pointer-events: none;
  animation: rlBannerFade 1.4s ease-out;
}
.rl-combat-banner.hidden { display: none; }
.rl-combat-banner.rl-banner-win  { color: #9affc8; text-shadow: 0 0 24px rgba(154, 255, 200, 0.7); animation: rlBannerHold 1.6s ease-out; }
.rl-combat-banner.rl-banner-loss { color: #ff8870; text-shadow: 0 0 24px rgba(255, 136, 112, 0.7); animation: rlBannerHold 1.6s ease-out; }
@keyframes rlBannerFade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes rlBannerHold {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* FTL-style expedition beacon map (roguelite mode, shown on dive + after each clear) */
.rl-exped-map {
  position: fixed; inset: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, 0.78);
  backdrop-filter: blur(4px);
  font-family: 'Bahnschrift', sans-serif;
}
.rl-exped-map.hidden { display: none; }
.rl-exped-panel {
  width: min(1100px, 92%); max-height: 86vh;
  display: flex; flex-direction: column;
  padding: 22px 26px;
  background: rgba(8, 14, 26, 0.95);
  border: 1px solid rgba(255, 213, 138, 0.45);
  box-shadow: 0 0 32px rgba(255, 213, 138, 0.18);
  overflow: hidden;
}
.rl-exped-title {
  font-weight: 700; font-size: 22px; letter-spacing: 2px;
  color: #ffd58a; margin-bottom: 4px;
}
.rl-exped-sub {
  font-size: 11px; letter-spacing: 1.4px; color: #6890b0;
  font-weight: 500; margin-bottom: 18px;
}
.rl-exped-grid {
  display: flex; gap: 18px; flex: 1;
  overflow-x: auto; padding-bottom: 8px;
}
.rl-exped-col {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 200px; flex: 1;
}
.rl-exped-col-header {
  font-size: 10px; letter-spacing: 1.6px;
  color: #5a7491; font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(120, 160, 200, 0.20);
}
.rl-exped-col-header.current { color: #ffd58a; border-color: rgba(255, 213, 138, 0.55); }
.rl-exped-col-header.past    { color: #4a6680; }
.rl-exped-col-header.future  { color: #364a60; }
.rl-exped-node {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: rgba(20, 32, 56, 0.55);
  border: 1px solid rgba(120, 160, 200, 0.30);
  color: #cce0ff; text-align: left;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.rl-exped-node.lit:hover {
  background: rgba(40, 30, 12, 0.85);
  border-color: rgba(255, 213, 138, 0.95);
}
.rl-exped-node.lit { border-color: rgba(255, 213, 138, 0.55); }
.rl-exped-node.cleared {
  background: rgba(20, 40, 30, 0.45);
  border-color: rgba(154, 255, 200, 0.45);
  color: rgba(220, 240, 220, 0.55);
  cursor: default;
}
.rl-exped-node.locked {
  opacity: 0.35; cursor: not-allowed;
}
.rl-exped-node.capital {
  border-color: rgba(255, 170, 130, 0.65);
  background: rgba(40, 24, 16, 0.45);
}
.rl-exped-node.capital.lit:hover {
  border-color: rgba(255, 170, 130, 0.95);
  background: rgba(60, 28, 16, 0.85);
}
.rl-exped-node-name {
  font-size: 13px; font-weight: 700; letter-spacing: 0.8px;
}
.rl-exped-node-type {
  font-size: 10px; letter-spacing: 1px; color: #6890b0;
}
.rl-exped-foot {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(120, 160, 200, 0.18);
}
.rl-exped-hint { font-size: 11px; color: #6890b0; letter-spacing: 0.8px; }

/* ── Hullmod browser: categories ─────────────────────────────────────────
   The pool passed 100 entries, so the list is grouped by CATEGORY instead of
   by tier, and tier moved onto each row as a badge.

   The base `.pill` is `flex: 1; min-width: 0`, which is correct for the 4-way
   weapon filters and wrong for 10 categories in a 340px panel — every pill got
   squeezed to 31px and the labels clipped ("ARMO", "SHIEI", "TARG"). A grid
   fixes it properly: 5 across, 2 down, uniform tiles, nothing truncated.

   Each category carries a signature hue, the same idea as .filter-pills-faction
   below — the filter row doubles as a colour legend for the group headers. */
.cat-pills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 0 0 10px 0;
}
.cat-pills .pill {
  flex: none;                 /* override the 4-way flex sizing */
  padding: 5px 2px;
  font-size: 9px; letter-spacing: .06em; font-weight: 600;
  text-align: center; white-space: nowrap;
  border-radius: 2px;
  color: #6e90b3;
  background: rgba(8, 16, 26, 0.85);
  border: 1px solid rgba(40, 62, 88, 0.75);
  position: relative;
}
/* A hairline of the category colour along the top edge — readable at a glance
   even when the pill is inactive, and it ties the pill to its group header. */
.cat-pills .pill::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: -1px; height: 2px;
  background: currentColor; opacity: .30; transition: opacity 90ms ease;
}
.cat-pills .pill:hover { background: rgba(16, 30, 48, 0.95); filter: brightness(1.35); }
.cat-pills .pill:hover::before { opacity: .65; }
.cat-pills .pill.active {
  background: linear-gradient(180deg, rgba(20,44,68,0.95), rgba(8,24,38,0.95));
  color: #eaf6ff;
  border-color: currentColor;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 10px -2px currentColor;
}
.cat-pills .pill.active::before { opacity: 1; }

/* Signature hues. `color` drives the label, the top hairline and the active
   glow all at once, so one value per category is enough. */
.cat-pills .cat-all       { color: #8fa8c0; }
.cat-pills .cat-armor     { color: #c9a06a; }
.cat-pills .cat-shields   { color: #56b6ff; }
.cat-pills .cat-flux      { color: #48d6c8; }
.cat-pills .cat-weapons   { color: #ff8659; }
.cat-pills .cat-targeting { color: #e8c15a; }
.cat-pills .cat-engines   { color: #64d787; }
.cat-pills .cat-defense   { color: #a98cf0; }
.cat-pills .cat-support   { color: #5ec8d8; }
.cat-pills .cat-systems   { color: #d47ad0; }
.cat-pills .pill.active   { color: #eaf6ff; }
.cat-pills .cat-armor.active     { border-color: #c9a06a; box-shadow: 0 0 10px -2px #c9a06a; }
.cat-pills .cat-shields.active   { border-color: #56b6ff; box-shadow: 0 0 10px -2px #56b6ff; }
.cat-pills .cat-flux.active      { border-color: #48d6c8; box-shadow: 0 0 10px -2px #48d6c8; }
.cat-pills .cat-weapons.active   { border-color: #ff8659; box-shadow: 0 0 10px -2px #ff8659; }
.cat-pills .cat-targeting.active { border-color: #e8c15a; box-shadow: 0 0 10px -2px #e8c15a; }
.cat-pills .cat-engines.active   { border-color: #64d787; box-shadow: 0 0 10px -2px #64d787; }
.cat-pills .cat-defense.active   { border-color: #a98cf0; box-shadow: 0 0 10px -2px #a98cf0; }
.cat-pills .cat-support.active   { border-color: #5ec8d8; box-shadow: 0 0 10px -2px #5ec8d8; }
.cat-pills .cat-systems.active   { border-color: #d47ad0; box-shadow: 0 0 10px -2px #d47ad0; }
.cat-pills .cat-all.active       { border-color: #8fa8c0; box-shadow: 0 0 10px -2px #8fa8c0; }

/* Group headers pick up the same hue as their pill via a left rule. */
#hullmod-list .list-header { border-left: 3px solid rgba(120,150,180,0.5); padding-left: 8px; }
#hullmod-list .list-header.hc-armor     { border-left-color: #c9a06a; }
#hullmod-list .list-header.hc-shields   { border-left-color: #56b6ff; }
#hullmod-list .list-header.hc-flux      { border-left-color: #48d6c8; }
#hullmod-list .list-header.hc-weapons   { border-left-color: #ff8659; }
#hullmod-list .list-header.hc-targeting { border-left-color: #e8c15a; }
#hullmod-list .list-header.hc-engines   { border-left-color: #64d787; }
#hullmod-list .list-header.hc-defense   { border-left-color: #a98cf0; }
#hullmod-list .list-header.hc-support   { border-left-color: #5ec8d8; }
#hullmod-list .list-header.hc-systems   { border-left-color: #d47ad0; }

.list-header .lh-count {
  float: right; opacity: .45; font-weight: 400;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.tier-badge {
  display: inline-block; padding: 0 4px; border-radius: 2px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  vertical-align: 1px; border: 1px solid currentColor; opacity: .8;
}
.tier-badge.t1 { color: #7fa8c8; }
.tier-badge.t2 { color: #d8b45c; }
.tier-badge.t3 { color: #c98cf0; }
.list-empty { padding: 18px 12px; opacity: .5; font-size: 12px; font-style: italic; }

/* Leviathan fitting: stage previews and cumulative mount unlocks. */
.leviathan-stage-group { margin: 9px 0; border: 1px solid #304251; }
.leviathan-stage-header { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; text-align:left; background:#101820; border:0; color:#b9cddd; cursor:pointer; }
.leviathan-stage-header:hover { background:#1b2834; }
.leviathan-stage-header.active { background:#2d1d2b; box-shadow:inset 3px 0 #ef779b; color:#ffd6e2; }
.leviathan-stage-header:focus-visible { outline:2px solid #ef779b; outline-offset:-2px; }
.leviathan-stage-header .stage-title { font-size:12px; letter-spacing:1.1px; }
.leviathan-stage-header .stage-title span { display:block; margin-top:5px; font-size:10px; color:#829caf; letter-spacing:1px; }
.stage-mount-count { font-size:11px; white-space:nowrap; color:#cfabba; }
.leviathan-stage-slots { padding:5px 8px 9px; }
.leviathan-stage-slots[hidden] { display:none; }
.stage-unlock-note { padding:7px 2px 10px; font-size:10px; color:#a2b7c6; }
.leviathan-preview-label { color:#efabc1; font-size:11px; letter-spacing:1px; padding:9px 0; border-top:1px solid #553344; }
.leviathan-preview-label small { display:block; color:#8196a9; font-size:10px; letter-spacing:0; margin-top:4px; }
.wg-card.stage-dormant { opacity:.45; }