:root {
  --void:        #0a0d14;
  --void-mid:    #0d1018;
  --void-light:  #131722;
  --nebula:      #161e2a;
  --panel:       #131a24;
  --panel-lit:   #1a2332;
  --frame:       #1e2a3a;

  --cyan:        #4ab8d4;
  --cyan-bright: #5fcfe8;
  --cyan-dim:    rgba(74, 184, 212, 0.55);
  --cyan-ghost:  rgba(74, 184, 212, 0.12);
  --purple:      #8a6ad4;
  --purple-dim:  rgba(138, 106, 212, 0.55);
  --purple-ghost:rgba(138, 106, 212, 0.12);
  --gold:        #e8b84a;
  --gold-bright: #f9c80e;
  --gold-dim:    rgba(232, 184, 74, 0.55);
  --gold-ghost:  rgba(232, 184, 74, 0.12);
  --green:       #3cb87a;
  --red:         #d44a4a;
  --red-bright:  #ff4d6d;
  --amber:       #d4872e;

  --soft-white:  #e8edf2;
  --muted:       #5a6a7c;
  --dim:         #3a4a5c;
  --body:        #9aacbe;
  --bright:      #cdd8e4;
  --white:       #f6f8fb;

  --font-display: "Oxanium", sans-serif;
  --font-body:    "Rajdhani", sans-serif;
  --font-data:    "Share Tech Mono", monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--void);
  color: var(--bright);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  /* Hard width cap — prevents children from forcing horizontal scroll. */
  max-width: 100vw;
  width: 100%;
}

/* Box-sizing reset so padding doesn't push containers past 100% width */
*, *::before, *::after { box-sizing: border-box; }

/* ─── Global scrollbar styling ───────────────────────────────────
   The default browser scrollbar is jarringly out of place against
   the game's chrome — bright and chunky on dark UI. The bare
   ::-webkit-scrollbar selector (no element prefix) targets ALL
   scrollbars including the document/window scrollbar; the `*`
   variant is unreliable for the page-level scrollbar in Chromium.
   Firefox is covered separately via scrollbar-width on html/body.
   Specific containers (comms rail, menu tabs, etc.) override these
   to fully-hidden where the scroll itself is the design. */
html, body {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 184, 212, 0.28) rgba(10, 13, 20, 0.6);
}
::-webkit-scrollbar {
  width: 8px; height: 8px;
  background: rgba(10, 13, 20, 0.6);
}
::-webkit-scrollbar-track {
  background: rgba(10, 13, 20, 0.6);
  border-left: 1px solid rgba(74, 184, 212, 0.06);
}
::-webkit-scrollbar-thumb {
  background: rgba(74, 184, 212, 0.22);
  border-radius: 0;
  transition: background 0.15s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 184, 212, 0.45);
}
::-webkit-scrollbar-corner { background: rgba(10, 13, 20, 0.6); }
/* Belt-and-suspenders: also apply to children that may shadow the
   document rules in some engines via the universal selector. */
*::-webkit-scrollbar {
  width: 8px; height: 8px;
  background: rgba(10, 13, 20, 0.6);
}
*::-webkit-scrollbar-track {
  background: rgba(10, 13, 20, 0.6);
}
*::-webkit-scrollbar-thumb {
  background: rgba(74, 184, 212, 0.22);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 184, 212, 0.45);
}

/* ─── Mock chrome (only visible at top, not part of game) ───────────── */
.proto-chrome {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(180deg, rgba(10,13,20,0.96), rgba(10,13,20,0.7));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 24px;
  display: flex; align-items: center; gap: 16px;
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.proto-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600;
  color: var(--gold); letter-spacing: 2px; font-size: 11px; text-transform: uppercase;
}
.proto-brand small { color: var(--muted); font-weight: 400; letter-spacing: 1px; }
.proto-state {
  margin-left: auto;
  display: flex; gap: 16px; align-items: center;
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1px; text-transform: uppercase;
}
.proto-state strong { color: var(--cyan); font-weight: 400; }
.proto-reset {
  appearance: none; cursor: pointer;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(212, 74, 74, 0.3);
  color: rgba(212, 74, 74, 0.8);
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.proto-reset:hover { background: rgba(212, 74, 74, 0.08); color: var(--red-bright); border-color: var(--red-bright); }
#proto-force-death,
#proto-reset,
.starmap-zoom-btn--debug,
.settings-section--debug {
  display: none;
}
body[data-debug-mode="true"] #proto-force-death,
body[data-debug-mode="true"] #proto-reset {
  display: inline-flex;
  align-items: center;
}
body[data-debug-mode="true"] .starmap-zoom-btn--debug {
  display: flex;
}
body[data-debug-mode="true"] .settings-section--debug {
  display: block;
}

/* ─── Screen system ─────────────────────────────────────────────────── */
.screen {
  display: none;
  min-height: calc(100vh - 50px);
  position: relative;
  /* Hard width cap so screens never exceed the viewport, even when
     children try to expand via min-content sizing. */
  max-width: 100vw;
  overflow-x: hidden;
}
.screen.is-active { display: flex; flex-direction: column; }

.menu-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(74, 184, 212, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(138, 106, 212, 0.06), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(232, 184, 74, 0.03), transparent 70%),
    var(--void);
  pointer-events: none;
}
.menu-backdrop::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 78% 16%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 52% 38%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 24% 56%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 66% 84%, rgba(255,255,255,0.35), transparent);
}

/* ─── Common atoms ──────────────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--bright);
  background: rgba(255,255,255,0.03);
}
.status-pill--cyan   { border-color: rgba(74, 184, 212, 0.4);  color: var(--cyan);   background: rgba(74, 184, 212, 0.06); }
.status-pill--gold   { border-color: rgba(232, 184, 74, 0.4);  color: var(--gold);   background: rgba(232, 184, 74, 0.06); }
.status-pill--purple { border-color: rgba(138, 106, 212, 0.4); color: var(--purple); background: rgba(138, 106, 212, 0.06); }
.status-pill--green  { border-color: rgba(60, 184, 122, 0.4);  color: var(--green);  background: rgba(60, 184, 122, 0.06); }
.status-pill--red    { border-color: rgba(212, 74, 74, 0.4);   color: var(--red);    background: rgba(212, 74, 74, 0.06); }

/* Cryos Visibility pill — tier-keyed coloring. Quiet is neutral white,
   Watched amber, Flagged hard gold, Marked + Hunted progressively red.
   The pill is also clickable (data-card-action="cryos") to jump into
   Company Status. */
#dashboard-cryos-pill {
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
#dashboard-cryos-pill:hover { filter: brightness(1.2); transform: translateY(-1px); }
#dashboard-sector-pill {
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
#dashboard-sector-pill:hover { filter: brightness(1.2); transform: translateY(-1px); }
.status-pill.is-cryos-quiet   { border-color: rgba(180, 180, 200, 0.35); color: rgba(220, 220, 235, 0.9);  background: rgba(180, 180, 200, 0.05); }
.status-pill.is-cryos-watched { border-color: rgba(220, 200, 140, 0.45); color: rgba(232, 215, 165, 0.95); background: rgba(220, 200, 140, 0.06); }
.status-pill.is-cryos-flagged { border-color: rgba(232, 184, 74, 0.55);  color: rgba(248, 200, 100, 1);    background: rgba(232, 184, 74, 0.08); }
.status-pill.is-cryos-marked  { border-color: rgba(232, 96, 96, 0.55);   color: rgba(248, 130, 130, 1);    background: rgba(232, 96, 96, 0.08); }
.status-pill.is-cryos-hunted  {
  border-color: rgba(232, 60, 60, 0.7);
  color: rgba(255, 110, 110, 1);
  background: rgba(232, 60, 60, 0.12);
  animation: cryos-hunted-pulse 2.4s ease-in-out infinite;
}
@keyframes cryos-hunted-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 60, 60, 0.0); }
  50%      { box-shadow: 0 0 12px 0 rgba(232, 60, 60, 0.35); }
}

kbd {
  display: inline-block;
  font-family: var(--font-data); font-size: 10px;
  padding: 2px 6px; min-width: 18px; text-align: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: var(--bright);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. TITLE SCREEN
   ═══════════════════════════════════════════════════════════════════════ */
.title-shell {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(420px, 0.9fr);
  gap: 80px;
  padding: 80px 96px 48px;
  flex: 1;
  align-items: center;
}
.title-mast { display: flex; flex-direction: column; gap: 32px; }
.title-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold);
}
.title-eyebrow-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 1px;
  background: rgba(232, 184, 74, 0.04);
}
.title-wordmark {
  font-family: var(--font-display);
  font-size: 76px; line-height: 0.92;
  font-weight: 300;
  margin: 0;
}
.title-wordmark span {
  display: block;
  color: var(--muted);
  font-size: 32px;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.title-wordmark strong {
  display: block;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -2px;
}
.title-tagline {
  color: var(--body);
  font-size: 17px;
  max-width: 480px;
  margin: 0;
  line-height: 1.5;
}
.title-meta-row {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase;
}

.title-nav { display: flex; flex-direction: column; gap: 6px; }
.title-nav-btn {
  appearance: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 8px;
  padding: 18px 22px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--bright);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  transition: 0.18s ease;
  position: relative;
}
.title-nav-btn::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: transparent;
  transition: 0.18s ease;
}
.title-nav-btn:hover {
  border-color: rgba(74, 184, 212, 0.3);
  background: var(--panel-lit);
}
.title-nav-btn:hover::after { background: var(--cyan); }
.title-nav-btn-eyebrow {
  display: block;
  font-size: 16px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--bright);
}
.title-nav-btn-detail {
  display: block;
  font-family: var(--font-body); font-weight: 400;
  font-size: 13px; color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.title-nav-btn-arrow {
  font-family: var(--font-data);
  color: var(--dim);
  font-size: 18px;
  transition: 0.18s ease;
}
.title-nav-btn:hover .title-nav-btn-arrow { color: var(--cyan); transform: translateX(4px); }
.title-nav-btn--primary {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.12), rgba(232, 184, 74, 0.04));
  border-color: rgba(232, 184, 74, 0.34);
}
.title-nav-btn--primary::after { background: var(--gold); }
.title-nav-btn--primary .title-nav-btn-eyebrow { color: var(--gold); }
.title-nav-btn--primary .title-nav-btn-arrow { color: var(--gold); }
.title-nav-btn--primary:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.18), rgba(232, 184, 74, 0.06));
  border-color: var(--gold-dim);
}
.title-nav-btn--quiet { background: transparent; border-color: rgba(255,255,255,0.04); }
.title-nav-btn--quiet .title-nav-btn-eyebrow { color: var(--muted); font-size: 13px; }
.title-nav-btn--quiet .title-nav-btn-detail { color: var(--dim); font-size: 11px; }

.meta-menu-screen {
  min-height: 100vh;
  padding: 24px 28px 88px;
}
.meta-menu-shell {
  width: min(1180px, calc(100vw - 56px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.meta-menu-shell--narrow {
  width: min(860px, calc(100vw - 56px));
}
.meta-menu-grid {
  display: grid;
  gap: 16px;
}
.meta-menu-grid--settings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.meta-menu-panel {
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.94), rgba(13, 16, 24, 0.96));
  border: 1px solid rgba(255,255,255,0.07);
  padding: 22px;
  min-width: 0;
}
.codex-shell {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  min-height: 580px;
}
.codex-sidebar,
.codex-detail {
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.94), rgba(13, 16, 24, 0.96));
  border: 1px solid rgba(255,255,255,0.07);
  min-width: 0;
}
.codex-sidebar {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.codex-category-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.codex-category-tab {
  appearance: none;
  border: 0;
  background: rgba(10,13,20,0.92);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 12px 10px;
  cursor: pointer;
}
.codex-category-tab:hover,
.codex-category-tab.is-active {
  color: var(--cyan);
  background: rgba(74,184,212,0.08);
}
.codex-entry-list {
  overflow-y: auto;
  padding: 10px;
}
.codex-entry {
  appearance: none;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bright);
  text-align: left;
  padding: 12px;
  display: grid;
  gap: 4px;
  cursor: pointer;
  font-family: var(--font-body);
}
.codex-entry:hover {
  background: rgba(255,255,255,0.035);
}
.codex-entry.is-active {
  background: rgba(74,184,212,0.08);
  border-color: rgba(74,184,212,0.28);
}
.codex-entry-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--bright);
}
.codex-entry-meta {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.codex-detail {
  padding: 28px;
  overflow-y: auto;
}
.codex-detail-eyebrow {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.codex-detail-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 0;
}
.codex-detail-subtitle {
  color: var(--body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.codex-detail-section {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 18px;
  margin-top: 18px;
}
.codex-detail-section h4,
.credits-scroll h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--bright);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.codex-detail-section p,
.credits-scroll p {
  margin: 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.6;
}
.codex-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.codex-stat {
  border: 1px solid rgba(255,255,255,0.06);
  padding: 12px;
  background: rgba(10,13,20,0.34);
}
.codex-stat span {
  display: block;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.codex-stat strong {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  color: var(--cyan);
  font-size: 17px;
}
.credits-scroll {
  display: grid;
  gap: 16px;
}
.credits-kicker {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 22px;
  line-height: 1.4;
}
@media (max-width: 920px) {
  .meta-menu-screen { padding: 16px 14px 96px; }
  .meta-menu-shell,
  .meta-menu-shell--narrow { width: 100%; }
  .meta-menu-grid--settings,
  .codex-shell { grid-template-columns: 1fr; }
  .codex-shell { min-height: 0; }
  .codex-stat-grid { grid-template-columns: 1fr; }
}

.menu-footer {
  /* Sticky to viewport bottom — gives the page a "game window" feel
     so the chrome is always visible and the meta strip never scrolls
     below the fold. position:fixed inside a screen that may be
     display:none means inactive screens hide their footer correctly
     (display:none on ancestor hides fixed descendants). */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10, 13, 20, 0.92);
  backdrop-filter: blur(10px);
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}
.menu-footer-meta { display: flex; gap: 20px; align-items: center; }
.menu-footer-meta strong { color: var(--cyan); font-weight: 400; }
.menu-footer-controller { display: flex; gap: 18px; align-items: center; }
.menu-footer-controller span { display: flex; align-items: center; gap: 6px; }

/* Reserve viewport space at the bottom of every screen with a footer
   so scrollable content doesn't hide behind the fixed footer. */
.screen { padding-bottom: 56px; }
@media (max-width: 980px) {
  .screen { padding-bottom: 52px; }
  .menu-footer { padding: 10px 16px; font-size: 10px; gap: 12px; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */
.menu-identity {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding: 28px 32px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.04), transparent);
  position: relative; z-index: 1;
}
.menu-identity-left {
  display: flex; align-items: center; gap: 18px;
  min-width: 0;
}
.menu-identity-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid rgba(232, 184, 74, 0.4);
  color: var(--gold);
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: 2px;
  background: rgba(232, 184, 74, 0.04);
  flex-shrink: 0;
}
.menu-identity-info { min-width: 0; }
.menu-identity-eyebrow {
  display: block;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 4px;
}
.menu-identity h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  color: var(--bright);
  letter-spacing: -0.3px;
}
.menu-identity-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}

.menu-primary-cta {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.18), rgba(232, 184, 74, 0.06));
  border: 1px solid rgba(232, 184, 74, 0.5);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.15s ease;
}
.menu-primary-cta small {
  font-family: var(--font-data); font-size: 10px;
  color: var(--gold-dim); letter-spacing: 1px;
  font-weight: 400;
  border-left: 1px solid rgba(232, 184, 74, 0.3);
  padding-left: 12px;
}
.menu-primary-cta:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.28), rgba(232, 184, 74, 0.1));
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.18);
}
.menu-primary-cta:disabled { opacity: 0.4; cursor: not-allowed; }

/* Container for gear + launch CTA in the header. */
.menu-identity-actions {
  display: flex; align-items: center; gap: 10px;
}

.dashboard-title-return-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}
.dashboard-title-return-btn:hover {
  background: rgba(74, 184, 212, 0.05);
}

/* Settings gear — minimal cyan outline button, smaller than the gold CTA. */
.menu-settings-btn {
  appearance: none; cursor: pointer;
  width: 42px; height: 42px;
  background: rgba(74, 184, 212, 0.06);
  border: 1px solid rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s ease;
}
.menu-settings-btn:hover {
  background: rgba(74, 184, 212, 0.14);
  border-color: var(--cyan-bright);
  color: var(--cyan-bright);
  /* Slow rotate on hover — gear-y feedback */
  transform: rotate(30deg);
}
.menu-settings-btn svg {
  pointer-events: none;
}

/* ─── Settings overlay ─────────────────────────────────────────────
   Right-side slide-in panel (matches company-status-overlay pattern).
   Houses tutorial preferences, replay controls, and any future
   per-player settings. */
.settings-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 96vw);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.98), rgba(10, 12, 20, 0.99));
  border-left: 1px solid rgba(74, 184, 212, 0.25);
  z-index: 1100;  /* above proto-chrome (1000) so the close × is reachable; below toasts (9998) */
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease-out;
}
.settings-overlay.is-open {
  transform: translateX(0);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}
.settings-header {
  padding: 22px 26px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
.settings-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.settings-title {
  margin: 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright);
}
.settings-subtitle {
  margin-top: 4px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
}
.settings-close {
  position: absolute;
  top: 16px; right: 16px;
  appearance: none; cursor: pointer;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s;
}
.settings-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--bright);
}
.settings-body {
  flex: 1; overflow-y: auto;
  padding: 20px 26px;
  scrollbar-width: thin;
}
.settings-section {
  margin-bottom: 28px;
}
.settings-section-title {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.settings-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.settings-row-label {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.4px;
}
.settings-row-detail {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); line-height: 1.5;
}

/* Toggle switch — 36×20 pill that flips on click */
.settings-toggle {
  appearance: none; cursor: pointer;
  position: relative; flex-shrink: 0;
  width: 40px; height: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  transition: 0.2s;
  margin-top: 4px;
}
.settings-toggle::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 18px; height: 18px;
  background: var(--muted);
  border-radius: 50%;
  transition: 0.2s ease;
}
.settings-toggle.is-on {
  background: rgba(74, 184, 212, 0.18);
  border-color: rgba(74, 184, 212, 0.5);
}
.settings-toggle.is-on::after {
  left: 19px;
  background: var(--cyan-bright);
  box-shadow: 0 0 6px rgba(74, 184, 212, 0.5);
}

/* Action button (Replay tour, etc.) — secondary action, cyan outline */
.settings-action-btn {
  appearance: none; cursor: pointer;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(74, 184, 212, 0.4);
  color: var(--cyan);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
  white-space: nowrap;
}
.settings-action-btn:hover {
  background: rgba(74, 184, 212, 0.1);
  border-color: var(--cyan-bright);
  color: var(--cyan-bright);
}

/* ─── Welcome tour modal ───────────────────────────────────────────
   Centered modal that walks the player through 6 introductory beats.
   Each beat: title, body, illustration glyph, "Next" button.
   Player can dismiss at any time via the × button.
   Same backdrop pattern as the personal-message modal. */
/* ─── Contextual hints ─────────────────────────────────────────
   First-encounter tooltips. Two delivery surfaces — toast (bottom
   pill, auto-dismisses) for soft tips, modal (center, requires
   dismissal) for major mechanic introductions. */
.hint-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 30px);
  width: min(440px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.96), rgba(10, 12, 20, 0.98));
  border: 1px solid rgba(74, 184, 212, 0.45);
  border-left: 3px solid var(--cyan);
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  z-index: 9997;  /* below toasts (9998) */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.hint-toast.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.hint-toast-icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
  filter: hue-rotate(180deg);  /* tints emoji toward cyan */
  opacity: 0.9;
}
.hint-toast-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.hint-toast-title {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  color: var(--cyan-bright);
  letter-spacing: 0.4px;
}
.hint-toast-text {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.5;
}
.hint-toast-close {
  appearance: none; cursor: pointer;
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: 0.15s;
}
.hint-toast-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--bright);
}

/* Hint modal — full-screen overlay for major mechanic introductions.
   Same family as welcome tour but single-step (no progress, no skip). */
.hint-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 125;  /* layered above hints' triggering overlays; settings (1100) and welcome tour open via explicit close-others handlers so layering vs them is moot */
  background: rgba(2, 2, 4, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.hint-modal.is-open { display: flex; }
.hint-modal-card {
  width: min(480px, 100%);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.99), rgba(10, 12, 20, 1));
  border: 1px solid rgba(74, 184, 212, 0.5);
  border-top: 3px solid var(--cyan);
  padding: 32px 28px 24px;
  text-align: center;
  animation: hint-modal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes hint-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hint-modal-glyph {
  font-size: 36px;
  line-height: 1;
  color: var(--cyan);
  margin-bottom: 12px;
  animation: hint-modal-glyph-pulse 2.4s ease-in-out infinite;
}
@keyframes hint-modal-glyph-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}
.hint-modal-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}
.hint-modal-title {
  margin: 0 0 14px;
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.3px;
}
.hint-modal-body {
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.65;
  margin-bottom: 20px;
  text-align: left;
}
.hint-modal-body strong { color: var(--cyan-bright); font-weight: 500; }
.hint-modal-body em { color: var(--gold); font-style: italic; }
.hint-modal-close {
  appearance: none; cursor: pointer;
  padding: 11px 24px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.22), rgba(74, 184, 212, 0.08));
  border: 1px solid rgba(74, 184, 212, 0.55);
  color: var(--cyan-bright);
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase;
  transition: 0.15s;
}
.hint-modal-close:hover {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.32), rgba(74, 184, 212, 0.12));
  box-shadow: 0 0 14px rgba(74, 184, 212, 0.3);
}

@media (max-width: 700px) {
  .hint-modal-card { padding: 24px 20px 20px; }
  .hint-modal-glyph { font-size: 30px; }
  .hint-modal-title { font-size: 17px; }
  .hint-modal-body { font-size: 13px; }
  .hint-toast { bottom: 12px; padding: 10px 12px; }
}

.welcome-tour-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 130;  /* opened only after closeSettings() so layering vs settings (1100) is moot in practice */
  background: rgba(2, 2, 4, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.welcome-tour-modal.is-open { display: flex; }
.welcome-tour-card {
  width: min(560px, 100%);
  max-height: 90vh;
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.99), rgba(10, 12, 20, 1));
  border: 1px solid rgba(232, 184, 74, 0.5);
  border-top: 3px solid var(--gold);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Soft entrance animation */
  animation: welcome-tour-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes welcome-tour-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-tour-progress {
  display: flex; gap: 6px;
  padding: 16px 28px 0;
}
.welcome-tour-pip {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.3s;
}
.welcome-tour-pip.is-active {
  background: var(--gold);
}
.welcome-tour-pip.is-complete {
  background: rgba(232, 184, 74, 0.4);
}
.welcome-tour-header {
  padding: 24px 28px 8px;
  position: relative;
  text-align: center;
}
.welcome-tour-glyph {
  font-size: 42px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 14px;
  /* Slow pulse to draw the eye to the lesson */
  animation: welcome-tour-glyph-pulse 2.6s ease-in-out infinite;
}
@keyframes welcome-tour-glyph-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}
.welcome-tour-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.welcome-tour-title {
  margin: 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.3px;
}
.welcome-tour-close {
  position: absolute;
  top: 14px; right: 16px;
  appearance: none; cursor: pointer;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s;
}
.welcome-tour-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--bright);
}
.welcome-tour-body {
  padding: 8px 32px 16px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.65;
  text-align: center;
  overflow-y: auto;
}
.welcome-tour-body p { margin: 0 0 12px; }
.welcome-tour-body p:last-child { margin-bottom: 0; }
.welcome-tour-body strong { color: var(--cyan); font-weight: 500; }
.welcome-tour-body em { color: var(--gold); font-style: italic; }
.welcome-tour-footer {
  padding: 16px 28px 24px;
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.welcome-tour-skip {
  appearance: none; cursor: pointer;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 10px 0;
  transition: color 0.15s;
}
.welcome-tour-skip:hover { color: var(--body); }
.welcome-tour-next {
  appearance: none; cursor: pointer;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.28), rgba(232, 184, 74, 0.1));
  border: 1px solid rgba(232, 184, 74, 0.55);
  color: var(--gold);
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 1.8px; text-transform: uppercase;
  transition: 0.15s;
}
.welcome-tour-next:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.4), rgba(232, 184, 74, 0.15));
  box-shadow: 0 0 14px rgba(232, 184, 74, 0.35);
}

/* Mobile tightening for tour */
@media (max-width: 700px) {
  .welcome-tour-glyph { font-size: 36px; margin-bottom: 10px; }
  .welcome-tour-title { font-size: 18px; }
  .welcome-tour-body { padding: 8px 22px 12px; font-size: 13px; }
  .welcome-tour-footer { padding: 14px 22px 20px; }
}

/* Reopenable Captain Guide entry points */
.onboarding-access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.08), rgba(232, 184, 74, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(74, 184, 212, 0.5);
  min-width: 0;
}
.onboarding-access--dock {
  margin: 0 0 12px;
}
.onboarding-access-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.onboarding-access-eyebrow {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}
.onboarding-access-copy strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--bright);
}
.onboarding-access-copy span:last-child {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.onboarding-access-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.onboarding-access-btn {
  appearance: none;
  cursor: pointer;
  min-height: 34px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(74, 184, 212, 0.28);
  color: var(--cyan-bright);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: 0.15s ease;
}
.onboarding-access-btn:hover,
.onboarding-access-btn:focus-visible {
  background: rgba(74, 184, 212, 0.12);
  border-color: rgba(74, 184, 212, 0.6);
  outline: none;
}
.onboarding-access-btn--primary {
  border-color: rgba(232, 184, 74, 0.45);
  color: var(--gold);
  background: rgba(232, 184, 74, 0.08);
}
.onboarding-access-btn--primary:hover,
.onboarding-access-btn--primary:focus-visible {
  background: rgba(232, 184, 74, 0.14);
  border-color: rgba(232, 184, 74, 0.7);
}

.onboarding-guide-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 6, 12, 0.78);
  backdrop-filter: blur(8px);
}
.onboarding-guide-modal.is-open {
  display: flex;
}
.onboarding-guide-card {
  position: relative;
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.99), rgba(8, 11, 18, 1));
  border: 1px solid rgba(74, 184, 212, 0.45);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 30px rgba(74, 184, 212, 0.1);
  overflow: hidden;
  animation: welcome-tour-card-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboarding-guide-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  appearance: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  transition: 0.15s ease;
}
.onboarding-guide-close:hover,
.onboarding-guide-close:focus-visible {
  color: var(--bright);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}
.onboarding-guide-shell {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  min-height: 480px;
  max-height: inherit;
}
.onboarding-guide-tabs {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 54px 18px 20px;
  background: rgba(255, 255, 255, 0.025);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
}
.onboarding-guide-tab {
  appearance: none;
  cursor: pointer;
  width: 100%;
  min-height: 38px;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: 0.15s ease;
}
.onboarding-guide-tab:hover,
.onboarding-guide-tab:focus-visible {
  color: var(--cyan-bright);
  border-color: rgba(74, 184, 212, 0.35);
  background: rgba(74, 184, 212, 0.06);
  outline: none;
}
.onboarding-guide-tab.is-active {
  color: var(--gold);
  border-color: rgba(232, 184, 74, 0.45);
  background: rgba(232, 184, 74, 0.08);
}
.onboarding-guide-content {
  min-width: 0;
  overflow-y: auto;
  padding: 36px 34px 28px;
}
.onboarding-guide-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.onboarding-guide-title {
  margin: 0 42px 10px 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--bright);
  letter-spacing: 0;
}
.onboarding-guide-summary {
  margin: 0 0 18px;
  max-width: 680px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}
.onboarding-guide-sections {
  display: grid;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.onboarding-guide-section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.onboarding-guide-section h4 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cyan);
}
.onboarding-guide-section ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}
.onboarding-guide-section li {
  padding-left: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
.onboarding-guide-footer-note {
  margin-top: 16px;
  padding-left: 12px;
  border-left: 2px solid rgba(232, 184, 74, 0.45);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gold);
}
.onboarding-guide-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}
.onboarding-guide-primary,
.onboarding-guide-secondary {
  appearance: none;
  cursor: pointer;
  min-height: 38px;
  padding: 10px 16px;
  border: 1px solid rgba(74, 184, 212, 0.32);
  background: rgba(74, 184, 212, 0.08);
  color: var(--cyan-bright);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: 0.15s ease;
}
.onboarding-guide-primary {
  border-color: rgba(232, 184, 74, 0.55);
  background: rgba(232, 184, 74, 0.12);
  color: var(--gold);
}
.onboarding-guide-primary:hover,
.onboarding-guide-primary:focus-visible,
.onboarding-guide-secondary:hover,
.onboarding-guide-secondary:focus-visible {
  outline: none;
  border-color: rgba(232, 184, 74, 0.7);
  background: rgba(232, 184, 74, 0.16);
}

@media (max-width: 760px) {
  .onboarding-access {
    align-items: stretch;
    flex-direction: column;
  }
  .onboarding-access-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .onboarding-access-btn {
    flex: 1 1 150px;
  }
  .onboarding-guide-modal {
    align-items: stretch;
    padding: 10px;
  }
  .onboarding-guide-card {
    max-height: calc(100vh - 20px);
  }
  .onboarding-guide-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .onboarding-guide-tabs {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 48px 14px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .onboarding-guide-tab {
    width: auto;
    min-width: 112px;
    text-align: center;
  }
  .onboarding-guide-content {
    padding: 22px 18px 20px;
  }
  .onboarding-guide-title {
    margin-right: 32px;
    font-size: 20px;
  }
  .onboarding-guide-actions {
    flex-wrap: wrap;
  }
  .onboarding-guide-primary,
  .onboarding-guide-secondary {
    flex: 1 1 150px;
  }
}

/* Dashboard pages */
.dashboard-shell {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative; z-index: 1;
}
.screen[data-screen="dashboard"].is-active {
  height: calc(100vh - 50px);
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.screen[data-screen="dashboard"] .menu-identity {
  flex: 0 0 auto;
}
.screen[data-screen="dashboard"] .dashboard-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.screen[data-screen="dashboard"] .menu-tabs {
  flex: 0 0 auto;
}
.screen[data-screen="dashboard"] .menu-tab-panel {
  flex: 1 1 auto;
}

.menu-tabs {
  display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(13, 16, 24, 0.6);
  position: relative;
  z-index: 3;
}
.menu-tab-btn {
  appearance: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: 1.8px; text-transform: uppercase;
  transition: 0.15s;
  border-right: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.menu-tab-btn:last-child { border-right: 0; }
.menu-tab-btn::after {
  content: "";
  position: absolute; bottom: -1px; left: 50%; right: 50%;
  height: 2px; background: var(--gold);
  transition: 0.2s ease;
}
.menu-tab-btn:hover { color: var(--bright); background: rgba(255,255,255,0.02); }
.menu-tab-btn.is-active {
  color: var(--gold);
  background: rgba(232, 184, 74, 0.04);
}
.menu-tab-btn.is-active::after { left: 0; right: 0; }

.menu-tab-panel {
  display: none;
  padding: 28px 32px 32px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}
.menu-tab-panel.is-active { display: block; }
.menu-tab-panel-header {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.menu-tab-panel-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  color: var(--bright); letter-spacing: 1px;
  text-transform: uppercase;
}
.menu-tab-panel-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   Ledger — sector-wide commodity price matrix
   ═══════════════════════════════════════════════════════════════════ */
.ledger-controls {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ledger-filter-group, .ledger-mode-group {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ledger-mode-label {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-right: 6px;
}
.ledger-filter-btn, .ledger-mode-btn {
  appearance: none; cursor: pointer;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: 0.15s;
}
.ledger-filter-btn:hover, .ledger-mode-btn:hover {
  border-color: rgba(74, 184, 212, 0.4);
  color: var(--bright);
}
.ledger-filter-btn.is-active, .ledger-mode-btn.is-active {
  background: rgba(74, 184, 212, 0.08);
  border-color: var(--cyan);
  color: var(--cyan);
}

.ledger-table-wrap {
  overflow: auto;
  margin-bottom: 16px;
  max-height: min(68vh, 760px);
  border: 1px solid rgba(74, 184, 212, 0.12);
  background: rgba(8, 11, 17, 0.42);
}
.ledger-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-data);
  min-width: 980px;
}
.ledger-table th, .ledger-table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  background: rgba(8, 11, 17, 0.72);
}
.ledger-table th:first-child, .ledger-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 218px;
  max-width: 260px;
  background: linear-gradient(90deg, rgba(12, 17, 25, 0.98), rgba(12, 17, 25, 0.94));
  box-shadow: 10px 0 16px rgba(0, 0, 0, 0.22);
}
.ledger-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  font-family: var(--font-display); font-size: 10px;
  font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px;
  background: linear-gradient(180deg, rgba(13, 19, 29, 0.99), rgba(10, 14, 22, 0.98));
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.24);
}
.ledger-table thead th:first-child {
  z-index: 6;
  background: linear-gradient(135deg, rgba(15, 22, 32, 1), rgba(10, 15, 23, 0.99));
}
.ledger-table .ledger-station-header {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.ledger-table .ledger-station-name {
  color: var(--bright); font-size: 11px;
}
.ledger-table .ledger-station-faction {
  color: var(--muted); font-size: 9px;
  letter-spacing: 1px;
}

.ledger-row {
  transition: background 0.12s;
}
.ledger-row:hover {
  background: rgba(74, 184, 212, 0.03);
}
.ledger-commodity-cell {
  display: flex; align-items: center; gap: 8px;
}
.ledger-commodity-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  font-family: var(--font-data); font-size: 10px;
  background: rgba(74, 184, 212, 0.06);
  border: 1px solid rgba(74, 184, 212, 0.3);
  color: var(--cyan); letter-spacing: 0.5px;
}
.ledger-commodity-info {
  display: flex; flex-direction: column;
}
.ledger-commodity-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.ledger-commodity-cat {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1px;
  text-transform: uppercase;
}

.ledger-cell {
  font-family: var(--font-data); font-size: 13px;
  color: var(--body); line-height: 1.3;
}
.ledger-cell-price {
  display: block;
  font-size: 14px; font-weight: 500;
  color: var(--bright);
}
.ledger-cell-trend {
  display: block;
  font-size: 9px;
  color: var(--muted); letter-spacing: 0.5px;
  margin-top: 2px;
}
.ledger-cell-trend--up   { color: var(--green); }
.ledger-cell-trend--down { color: var(--red); }

/* Best-buy / best-sell highlights */
.ledger-cell.is-best-sell {
  background: linear-gradient(180deg, rgba(60, 184, 122, 0.18), rgba(60, 184, 122, 0.04));
  border-left: 2px solid var(--green);
}
.ledger-cell.is-best-sell .ledger-cell-price { color: #6fdca0; }
.ledger-cell.is-best-buy {
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.15), rgba(232, 184, 74, 0.03));
  border-left: 2px solid var(--gold);
}
.ledger-cell.is-best-buy .ledger-cell-price { color: var(--gold); }
.ledger-cell.is-restricted {
  opacity: 0.4;
  background: rgba(255, 255, 255, 0.02);
}
.ledger-cell.is-restricted .ledger-cell-price {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 11px;
}

/* Spread summary row — best buy → best sell with arbitrage value */
.ledger-spread-cell {
  text-align: right;
  font-family: var(--font-data); font-size: 12px;
  color: var(--muted);
}
.ledger-spread-cell-value {
  display: block;
  font-size: 14px; font-weight: 500;
  color: var(--gold);
}
.ledger-spread-cell-route {
  display: block;
  font-size: 9px;
  color: var(--muted); letter-spacing: 0.5px;
  margin-top: 2px;
}

.ledger-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 0.5px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 16px;
}
.ledger-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.ledger-legend-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-left: 2px solid;
}
.ledger-legend-swatch--sell {
  background: rgba(60, 184, 122, 0.2);
  border-color: var(--green);
}
.ledger-legend-swatch--buy {
  background: rgba(232, 184, 74, 0.18);
  border-color: var(--gold);
}
.ledger-legend-strong { color: var(--bright); font-weight: normal; }

/* ─── Supply News panel — list of active supply shocks ─────────── */
.ledger-news-panel {
  margin-top: 16px;
  background: linear-gradient(180deg, rgba(74, 184, 212, 0.04), rgba(74, 184, 212, 0.01));
  border: 1px solid rgba(74, 184, 212, 0.18);
  border-radius: 0;
  padding: 14px 16px;
}
.ledger-news-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(74, 184, 212, 0.12);
}
.ledger-news-eyebrow {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cyan);
}
.ledger-news-count {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px;
}
.ledger-news-list {
  display: flex; flex-direction: column; gap: 8px;
}
.ledger-news-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.06);
}
.ledger-news-item.is-shortage { border-left-color: var(--red); }
.ledger-news-item.is-surplus  { border-left-color: var(--green); }
.ledger-news-dir {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  text-align: center;
  letter-spacing: 0;
}
.ledger-news-item.is-shortage .ledger-news-dir { color: var(--red); }
.ledger-news-item.is-surplus  .ledger-news-dir { color: var(--green); }
.ledger-news-mag {
  display: block;
  font-family: var(--font-data); font-size: 10px; font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.ledger-news-info {
  display: flex; flex-direction: column;
}
.ledger-news-headline {
  font-family: var(--font-display); font-size: 13px;
  color: var(--bright); letter-spacing: 0.3px;
}
.ledger-news-station {
  color: var(--cyan); font-weight: 400;
}
.ledger-news-detail {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ─── Cell shock indicator — small ▲/▼ badge inside ledger cells
   when active supply shocks affect that station/commodity. ─── */
.ledger-cell-shock {
  display: inline-block;
  font-family: var(--font-data); font-size: 9px;
  margin-left: 4px;
  vertical-align: super;
  letter-spacing: 0;
}
.ledger-cell-shock--up   { color: var(--red); }
.ledger-cell-shock--down { color: var(--green); }

@media (max-width: 720px) {
  .ledger-controls { flex-direction: column; align-items: stretch; }
  .ledger-mode-group { justify-content: flex-start; }
  .ledger-cell { font-size: 11px; }
  .ledger-cell-price { font-size: 12px; }
}

/* ─── Relations tab — faction standings + contacts ─────────────────── */
/* Comms log — contact rail + thread view */
.menu-tab-panel[data-dash-panel="comms"].is-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.comms-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  flex: 1;
  min-height: 560px;
  height: 100%;
  overflow: hidden;
}
.comms-rail {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(74, 184, 212, 0.12);
  border-radius: 4px;
  padding: 8px;
  overflow-y: auto;
  max-height: none;
  min-height: 0;
  /* Hide the OS scrollbar — it reads as a default system element
     against the cyberpunk styling. The scroll itself still works. */
  scrollbar-width: none;
}
.comms-rail::-webkit-scrollbar { display: none; }
.comms-thread {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(74, 184, 212, 0.12);
  border-radius: 4px;
  padding: 0;
  overflow-y: auto;
  max-height: none;
  min-height: 0;
  display: flex; flex-direction: column;
  scrollbar-width: none;
}
.comms-thread::-webkit-scrollbar { display: none; }
.comms-rail-row {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 10px 12px;
  margin-bottom: 4px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  color: inherit;
}
.comms-rail-row:hover {
  background: rgba(74, 184, 212, 0.04);
  border-color: rgba(74, 184, 212, 0.16);
}
.comms-rail-row.is-selected {
  background: rgba(74, 184, 212, 0.08);
  border-color: rgba(74, 184, 212, 0.35);
}
.comms-rail-row-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.comms-rail-row-name {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.4px;
  color: #e0e0e8;
}
.comms-rail-row-badge {
  background: var(--gold);
  color: #1a1410;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
.comms-rail-row-faction {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.comms-rail-row-preview {
  font-family: var(--font-body);
  font-size: 12px; line-height: 1.4;
  color: var(--body);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comms-rail-row-meta {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.4px;
  color: var(--muted);
}
.comms-thread-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(74, 184, 212, 0.12);
  background: rgba(74, 184, 212, 0.03);
}
.comms-thread-inbox-btn {
  display: none;
  appearance: none;
  cursor: pointer;
  padding: 8px 12px;
  background: rgba(74, 184, 212, 0.07);
  border: 1px solid rgba(74, 184, 212, 0.28);
  color: var(--cyan);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.comms-thread-inbox-btn:hover {
  border-color: rgba(74, 184, 212, 0.55);
  background: rgba(74, 184, 212, 0.12);
}
.comms-thread-name {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.5px;
  color: var(--cyan, #4ab8d4);
  margin-bottom: 4px;
}
.comms-thread-faction {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.comms-thread-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.4px;
  color: var(--muted);
}
.comms-thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
}
.comms-message {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-bottom: 10px;
}
.comms-message.is-unread {
  background: rgba(232, 184, 74, 0.04);
  border-color: rgba(232, 184, 74, 0.2);
}
.comms-message.kind-intel { border-left-color: var(--gold); }
.comms-message.kind-request { border-left-color: var(--purple, #b899e8); }
.comms-message.kind-pilot-note { border-left-color: var(--cyan, #4ab8d4); }
.comms-message.kind-greeting { border-left-color: rgba(120, 200, 140, 0.6); }

/* ─── Cryos PR — sterile corporate messaging ─────────────────────────
   White-on-near-black. Geometric. Reads like a marketing email from
   a logistics megacorp. Deliberately polished to contrast with the
   rough-edged resistance messages. */
.comms-message.kind-cryos-pr {
  border-left-color: rgba(240, 240, 245, 0.85);
  background: linear-gradient(135deg, rgba(240, 240, 245, 0.04), rgba(255, 255, 255, 0.01));
}
.comms-message.kind-cryos-pr .comms-message-subject {
  font-family: var(--font-display);
  letter-spacing: 0.6px;
  color: rgba(240, 240, 245, 0.95);
  text-transform: uppercase;
  font-size: 12px;
}
.comms-message.kind-cryos-pr .comms-message-body {
  white-space: pre-wrap;
  letter-spacing: 0.2px;
}

/* ─── Cryos Billing — financial notices, audit warnings ─────────────
   Gold trim, slightly more austere than Cryos PR. Foundation Loan
   filings, audit notices, compliance reminders all use this kind. */
.comms-message.kind-cryos-billing {
  border-left-color: rgba(220, 200, 140, 0.85);
  background: linear-gradient(135deg, rgba(220, 200, 140, 0.04), rgba(0, 0, 0, 0.1));
}
.comms-message.kind-cryos-billing .comms-message-subject {
  font-family: var(--font-display);
  letter-spacing: 0.4px;
  color: rgba(232, 215, 165, 1);
}
.comms-message.kind-cryos-billing .comms-message-body {
  white-space: pre-wrap;
}

/* ─── Resistance — the Drift, anonymous, all-lowercase ──────────────
   Mono font, no caps, deliberately unpolished. Visual signal that
   this is NOT corporate-mediated speech. */
.comms-message.kind-resistance {
  border-left-color: rgba(184, 153, 232, 0.85);
  background: linear-gradient(135deg, rgba(138, 106, 212, 0.05), rgba(0, 0, 0, 0.1));
  border-left-style: dashed;
}
.comms-message.kind-resistance .comms-message-subject {
  font-family: var(--font-mono);
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 12px;
  color: rgba(220, 200, 255, 0.95);
}
.comms-message.kind-resistance .comms-message-body {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  color: rgba(220, 215, 230, 0.92);
  letter-spacing: 0.1px;
}
.comms-message-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.comms-message-subject {
  font-family: var(--font-display);
  font-size: 13px;
  color: #e0e0e8;
  letter-spacing: 0.3px;
}
.comms-message-meta {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.4px;
  color: var(--muted);
}
.comms-kind-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 9px; letter-spacing: 0.8px;
}
.comms-kind-pill.kind-intel {
  background: rgba(232, 184, 74, 0.1);
  border-color: rgba(232, 184, 74, 0.4);
  color: var(--gold);
}
.comms-kind-pill.kind-request {
  background: rgba(138, 106, 212, 0.1);
  border-color: rgba(138, 106, 212, 0.4);
  color: rgba(184, 153, 232, 0.95);
}
.comms-kind-pill.kind-pilot-note {
  background: rgba(74, 184, 212, 0.1);
  border-color: rgba(74, 184, 212, 0.4);
  color: var(--cyan, #4ab8d4);
}
.comms-kind-pill.kind-cryos-pr {
  background: rgba(240, 240, 245, 0.08);
  border-color: rgba(240, 240, 245, 0.4);
  color: rgba(240, 240, 245, 0.95);
  letter-spacing: 1px;
}
.comms-kind-pill.kind-cryos-billing {
  background: rgba(220, 200, 140, 0.08);
  border-color: rgba(220, 200, 140, 0.4);
  color: rgba(232, 215, 165, 1);
}
.comms-kind-pill.kind-resistance {
  background: rgba(138, 106, 212, 0.1);
  border-color: rgba(138, 106, 212, 0.4);
  color: rgba(184, 153, 232, 0.95);
  text-transform: lowercase;
  letter-spacing: 0;
}
.comms-kind-pill.kind-mystery-fragment {
  background: rgba(184, 153, 232, 0.12);
  border-color: rgba(184, 153, 232, 0.5);
  color: rgba(200, 175, 240, 1);
  letter-spacing: 1.2px;
}
/* Mystery-fragment messages get a purple left-edge accent + a subtle
   gradient background so they read as "important" without competing
   with intel/request urgency. */
.comms-message.kind-mystery-fragment {
  border-left-color: rgba(184, 153, 232, 0.7);
  background: linear-gradient(90deg, rgba(184, 153, 232, 0.04), transparent 40%);
}
.comms-message .mystery-frag-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(184, 153, 232, 0.15);
  font-size: 11px;
  color: var(--muted);
}
/* Mystery Board thread CTA — appears at the top of the Mystery Board
   thread to give the player a one-tap path into the overlay from comms. */
.comms-mystery-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(184, 153, 232, 0.08), rgba(184, 153, 232, 0.02));
  border: 1px solid rgba(184, 153, 232, 0.3);
  border-radius: 2px;
}
.comms-mystery-cta-info {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.comms-mystery-cta-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(184, 153, 232, 0.85);
}
.comms-mystery-cta-progress {
  font-family: var(--font-display); font-size: 13px;
  color: var(--bright);
  letter-spacing: 0.5px;
}
.comms-mystery-cta-hint {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
}
.comms-mystery-cta-btn {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 9px 16px;
  background: rgba(184, 153, 232, 0.1);
  border: 1px solid rgba(184, 153, 232, 0.55);
  color: rgba(200, 175, 240, 1);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.comms-mystery-cta-btn:hover {
  background: rgba(184, 153, 232, 0.18);
  border-color: rgba(184, 153, 232, 0.85);
}
.comms-mystery-cta-btn.is-ready {
  background: rgba(232, 184, 74, 0.12);
  border-color: rgba(232, 184, 74, 0.65);
  color: var(--gold);
  animation: comms-mystery-ready-pulse 2s ease-in-out infinite;
}
@keyframes comms-mystery-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(232, 184, 74, 0); }
  50%      { box-shadow: 0 0 14px rgba(232, 184, 74, 0.35); }
}
.comms-unread-dot {
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
}
.comms-message-body {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.6;
  color: var(--body);
}

/* ─── Reply-eligible messages — buttons under the body ──────────── */
.comms-message-replies {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(232, 184, 74, 0.3);
}
.comms-message-replies-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
.comms-message-replies-eyebrow .comms-replies-deadline {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 400;
}
.comms-reply-btn {
  appearance: none; cursor: pointer;
  text-align: left;
  padding: 12px 14px;
  background: rgba(232, 184, 74, 0.04);
  border: 1px solid rgba(232, 184, 74, 0.25);
  color: var(--bright);
  font-family: var(--font-body); font-size: 13px;
  line-height: 1.4;
  transition: 0.15s;
}
.comms-reply-btn:hover {
  background: rgba(232, 184, 74, 0.1);
  border-color: rgba(232, 184, 74, 0.55);
  color: var(--gold);
}
.comms-reply-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* Resolved footer — replaces the buttons after a choice is made. */
.comms-message-resolved {
  margin-top: 14px;
  padding-top: 14px;
  padding-left: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  border-left: 2px solid var(--cyan-dim);
  font-family: var(--font-body); font-size: 12px;
  color: var(--body);
  line-height: 1.5;
}
.comms-message-resolved-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan-dim);
  margin-bottom: 4px;
}
.comms-message-resolved.is-expired {
  border-left-color: rgba(212, 74, 74, 0.4);
}
.comms-message-resolved.is-expired .comms-message-resolved-label {
  color: rgba(212, 74, 74, 0.7);
}

/* Reply-needed pill on the rail row — small gold dot above the
   unread badge, signalling "this thread needs your input". */
.comms-rail-row-reply {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(232, 184, 74, 0.15);
  color: var(--gold);
  border: 1px solid rgba(232, 184, 74, 0.5);
  border-radius: 8px;
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1px;
  font-weight: 600;
  vertical-align: 1px;
}

/* ─── Faction event modal — high-stakes replies as a modal ──────── */
.faction-event-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 114;     /* above inspection (110) and audit (113), below encounter (115) */
  background: rgba(2, 2, 4, 0.85);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.faction-event-modal.is-open { display: flex; }
.faction-event-card {
  width: min(620px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 22px;
  background: linear-gradient(180deg, rgba(15, 19, 28, 0.99), rgba(8, 10, 16, 0.99));
  border: 1px solid rgba(232, 184, 74, 0.35);
  border-radius: 2px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(232, 184, 74, 0.08);
  animation: encounter-card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faction-event-eyebrow {
  font-family: var(--font-data);
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.faction-event-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.4px;
}
.faction-event-subtitle {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.faction-event-body {
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.6;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.faction-event-body strong { color: var(--gold); font-weight: 600; }
.faction-event-choices {
  display: flex; flex-direction: column;
  gap: 10px;
}
.faction-event-choice-btn {
  appearance: none; cursor: pointer;
  text-align: left;
  padding: 14px 16px;
  background: rgba(232, 184, 74, 0.04);
  border: 1px solid rgba(232, 184, 74, 0.25);
  color: var(--bright);
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.4;
  transition: 0.15s;
}
.faction-event-choice-btn:hover {
  background: rgba(232, 184, 74, 0.1);
  border-color: rgba(232, 184, 74, 0.6);
  color: var(--gold);
}
.faction-event-choice-detail {
  display: block;
  margin-top: 4px;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 0.5px;
  text-transform: uppercase;
}
.faction-event-outcome {
  font-family: var(--font-body); font-size: 13px;
  color: var(--body); line-height: 1.6;
  padding: 14px 16px;
  background: rgba(74, 184, 212, 0.06);
  border-left: 2px solid var(--cyan);
  margin-bottom: 16px;
}
.faction-event-continue-btn {
  appearance: none; cursor: pointer;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.2), rgba(74, 184, 212, 0.08));
  border: 1px solid rgba(74, 184, 212, 0.55);
  color: var(--cyan-bright);
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  transition: 0.15s;
}
.faction-event-continue-btn:hover {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.3), rgba(74, 184, 212, 0.12));
  border-color: var(--cyan-bright);
}
.comms-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-body);
  font-size: 13px;
}

.relations-section-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.relations-section-title:first-child { margin-top: 0; }

/* Faction cards */
.relations-faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
}
.relations-faction-card {
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; gap: 12px;
}
.relations-faction-card.is-allied   { border-color: rgba(232, 184, 74, 0.3); background: linear-gradient(135deg, rgba(232, 184, 74, 0.04), var(--panel)); }
.relations-faction-card.is-trusted  { border-color: rgba(74, 184, 212, 0.25); }
.relations-faction-card.is-wary     { border-color: rgba(212, 142, 74, 0.25); background: linear-gradient(135deg, rgba(212, 142, 74, 0.03), var(--panel)); }
.relations-faction-card.is-hostile  { border-color: rgba(212, 74, 74, 0.3);  background: linear-gradient(135deg, rgba(212, 74, 74, 0.04), var(--panel)); }
.relations-faction-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.relations-faction-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.relations-faction-tier {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.relations-faction-tier.tier-allied   { color: var(--gold); }
.relations-faction-tier.tier-trusted  { color: var(--cyan); }
.relations-faction-tier.tier-neutral  { color: var(--muted); }
.relations-faction-tier.tier-wary     { color: #d48e4a; }
.relations-faction-tier.tier-hostile  { color: var(--red); }
.relations-faction-desc {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.45;
}

/* Standing bar — bipolar -100 to +100 with a center mark */
.relations-standing-bar {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.04);
}
.relations-standing-bar-center {
  position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: rgba(255,255,255,0.18);
}
.relations-standing-bar-fill {
  position: absolute; top: 0; bottom: 0;
  background: var(--cyan);
  /* Set via inline style — left + width depend on sign of standing */
}
.relations-standing-bar-fill.is-positive {
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
}
.relations-standing-bar-fill.is-positive.is-allied {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}
.relations-standing-bar-fill.is-negative {
  background: linear-gradient(90deg, var(--red), #d4734a);
}
.relations-standing-numeric {
  display: flex; justify-content: space-between;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px;
  margin-top: 4px;
}
.relations-standing-numeric strong {
  color: var(--bright); font-weight: 500;
}

/* Tier markers under the bar */
.relations-tier-track {
  display: grid;
  grid-template-columns: 5fr 4fr 2fr 6fr 5fr;
  font-family: var(--font-data); font-size: 8px;
  color: var(--muted); letter-spacing: 1px; text-transform: uppercase;
  margin-top: 2px;
}
.relations-tier-track span:nth-child(2),
.relations-tier-track span:nth-child(3),
.relations-tier-track span:nth-child(4) {
  text-align: center;
}
.relations-tier-track span:last-child { text-align: right; }
.relations-tier-track span.is-current { color: var(--bright); font-weight: 600; }

/* Opposition / alliance rels */
.relations-rels {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px;
}
.relations-rels-group { display: flex; gap: 6px; align-items: baseline; }
.relations-rels-group strong { color: var(--body); font-weight: 500; }

/* Recent shifts list */
.relations-shifts {
  font-family: var(--font-body); font-size: 11px;
  color: var(--body);
  display: grid; gap: 4px;
}
.relations-shift-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: baseline;
}
.relations-shift-cycle {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1px;
}
.relations-shift-reason {
  color: var(--body); line-height: 1.4;
}
.relations-shift-delta {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 0.5px;
}
.relations-shift-delta.is-pos { color: var(--green, #3cb87a); }
.relations-shift-delta.is-neg { color: var(--red); }

/* Unlocks panel inside faction card */
.relations-unlocks {
  display: grid; gap: 4px;
  font-family: var(--font-body); font-size: 11px;
}
.relations-unlock-row {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 12px; align-items: baseline;
  color: var(--muted);
}
.relations-unlock-row.is-met {
  color: var(--body);
}
.relations-unlock-row.is-met .relations-unlock-tier {
  color: var(--green, #3cb87a);
}
.relations-unlock-tier {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted);
}

/* Contacts list */
.relations-contact-card {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; gap: 10px;
  margin-bottom: 8px;
}
.relations-contact-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.relations-contact-name {
  font-family: var(--font-display); font-size: 14px;
  color: var(--bright); font-weight: 500;
}
.relations-contact-meta {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
}
.relations-contact-trust-tier.tier-loyal    { color: var(--gold); }
.relations-contact-trust-tier.tier-friendly { color: var(--cyan); }
.relations-contact-trust-tier.tier-cold     { color: var(--muted); }
.relations-contact-trust-bar {
  height: 4px; background: rgba(255,255,255,0.06); position: relative;
}
.relations-contact-trust-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  width: var(--pct, 0%);
}
.relations-contact-desc {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.4;
}
.relations-difficulty-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
}
.relations-difficulty-pill {
  appearance: none; cursor: pointer;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--body);
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.relations-difficulty-pill.is-active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.05);
}

/* Dashboard cards */
/* ─── Overview metric strip — at-a-glance state of the operation ─────
   Six small cards across the top of the overview tab, showing
   credits, debt, Cryos visibility, fleet state, pilot count, threats.
   Each card is themed (gold for credits, etc.) and clickable, so they
   double as quick-jump buttons to the relevant tab/overlay. */
.overview-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.overview-metric {
  position: relative;
  padding: 14px 16px 14px 18px;
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.97), rgba(10, 13, 20, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: 0.18s ease;
}
.overview-metric:hover {
  background: linear-gradient(180deg, rgba(26, 35, 50, 0.97), rgba(13, 18, 28, 0.99));
  border-color: rgba(232, 184, 74, 0.2);
  transform: translateY(-1px);
}
.overview-metric--gold     { border-left-color: var(--gold); }
.overview-metric--gold:hover { border-color: rgba(232, 184, 74, 0.4); }
.overview-metric--white    { border-left-color: rgba(245, 245, 248, 0.7); }
.overview-metric--cryos    { border-left-color: rgba(245, 245, 248, 0.55); }
.overview-metric--threat   { border-left-color: var(--red); }
.overview-metric-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 6px;
}
.overview-metric-value {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  color: var(--bright); letter-spacing: 0.3px;
  line-height: 1.05;
  margin-bottom: 4px;
}
.overview-metric--gold .overview-metric-value     { color: var(--gold); }
.overview-metric--cryos .overview-metric-value    { color: #f0f0f0; }
.overview-metric--threat .overview-metric-value   { color: #f4a07a; }
.overview-metric-detail {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* ─── Faction Pulse — horizontal standings strip ─────────────────
   A dense, readable per-faction status bar showing standing tier,
   numerical value, and how recently it shifted. Bars are bipolar
   (centered at 0) so positive/negative values read at a glance. */
.faction-pulse-section {
  margin-bottom: 24px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.5), rgba(10, 13, 20, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(74, 184, 212, 0.4);
}
.faction-pulse-header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.faction-pulse-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan); font-weight: 500;
}
.faction-pulse-sub {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 0.8px; text-transform: uppercase;
}
.faction-pulse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
@media (max-width: 720px) {
  .faction-pulse-grid { grid-template-columns: 1fr; gap: 8px; }
}
.faction-pulse-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px; align-items: center;
  padding: 6px 4px;
  cursor: pointer;
  transition: 0.15s;
}
.faction-pulse-row:hover {
  background: rgba(255, 255, 255, 0.025);
}
.faction-pulse-name {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bright); font-weight: 500;
}
.faction-pulse-bar-shell {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.faction-pulse-bar-shell::before {
  /* Center tick at standing = 0 */
  content: "";
  position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.faction-pulse-bar {
  position: absolute; top: 0; bottom: 0;
  transition: width 0.4s ease, left 0.4s ease;
}
.faction-pulse-bar--pos { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.faction-pulse-bar--neg { background: linear-gradient(90deg, var(--red), rgba(212, 74, 74, 0.4)); }
.faction-pulse-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px;
  font-family: var(--font-data);
  letter-spacing: 0.6px;
  white-space: nowrap;
}
.faction-pulse-tier {
  font-size: 10px; color: var(--bright); font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.faction-pulse-value {
  font-size: 9px; color: var(--muted);
}
.faction-pulse-tier--allied   { color: var(--gold); }
.faction-pulse-tier--trusted  { color: var(--cyan); }
.faction-pulse-tier--friendly { color: var(--cyan-dim); }
.faction-pulse-tier--neutral  { color: var(--muted); }
.faction-pulse-tier--wary     { color: var(--amber); }
.faction-pulse-tier--hostile  { color: var(--red); }
.faction-pulse-shift {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  color: var(--muted);
}
.faction-pulse-shift--up   { color: var(--green); }
.faction-pulse-shift--down { color: var(--red); }

.dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.dashboard-card {
  position: relative;
  display: grid; gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.97) 0%, rgba(10, 13, 20, 0.99) 100%);
  cursor: pointer;
  transition: 0.18s ease;
  overflow: hidden;
}
.dashboard-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: rgba(255,255,255,0.1);
  transition: 0.18s ease;
}
.dashboard-card:hover {
  border-color: rgba(232, 184, 74, 0.25);
  background: linear-gradient(180deg, rgba(26, 35, 50, 0.97) 0%, rgba(13, 18, 28, 0.99) 100%);
}
.dashboard-card:hover::before { background: var(--gold); }
.dashboard-card--cyan::before { background: var(--cyan); }
.dashboard-card--gold::before { background: var(--gold); }
.dashboard-card--purple::before { background: var(--purple); }
.dashboard-card--red::before { background: var(--red); }
.dashboard-card--cyan { border-color: rgba(74, 184, 212, 0.18); }
.dashboard-card--gold { border-color: rgba(232, 184, 74, 0.18); }
.dashboard-card--purple { border-color: rgba(138, 106, 212, 0.18); }
.dashboard-card--red { border-color: rgba(212, 74, 74, 0.18); }
.dashboard-card-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
}
.dashboard-card-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.5px;
}
.dashboard-card-progress {
  height: 4px;
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.dashboard-card-progress-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--cyan);
  width: calc(var(--pct) * 1%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard-card--gold .dashboard-card-progress-bar { background: var(--gold); }
.dashboard-card--purple .dashboard-card-progress-bar { background: var(--purple); }
.dashboard-card--red .dashboard-card-progress-bar { background: var(--red); }
.dashboard-card-detail {
  font-family: var(--font-body); font-size: 13px;
  color: var(--body); line-height: 1.4;
}
.dashboard-card-detail strong { color: var(--bright); font-weight: 700; }
.dashboard-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* Recommendation block */
.dashboard-recommendation {
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.08), rgba(232, 184, 74, 0.02));
  border: 1px solid rgba(232, 184, 74, 0.32);
  border-left-width: 3px;
  position: relative;
}
.dashboard-recommendation-eyebrow {
  font-family: var(--font-data); font-size: 11px;
  color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.dashboard-recommendation h4 {
  margin: 0 0 8px;
  font-family: var(--font-display); font-size: 19px; font-weight: 500;
  color: var(--white); letter-spacing: 0.3px;
}
.dashboard-recommendation p {
  margin: 0 0 14px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.5;
  max-width: 720px;
}
.dashboard-recommendation-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.contract-entry-action {
  appearance: none; cursor: pointer;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background: rgba(74, 184, 212, 0.04);
  color: var(--cyan);
  font-family: var(--font-display); font-size: 11px;
  font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 14px;
  white-space: nowrap;
  transition: 0.15s;
}
.contract-entry-action:hover { background: rgba(74, 184, 212, 0.1); border-color: var(--cyan); }
.contract-entry-action--gold {
  border-color: rgba(232, 184, 74, 0.4);
  color: var(--gold);
  background: rgba(232, 184, 74, 0.06);
}
.contract-entry-action--gold:hover { background: rgba(232, 184, 74, 0.12); border-color: var(--gold); }

/* Project cards */
.project-card {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--panel);
  margin-bottom: 12px;
}
.project-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.project-card-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
}
.project-card-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
  margin: 0;
  grid-column: 1 / 3;
}
.project-card-eyebrow { grid-column: 1 / 3; }
.project-card-status { grid-row: 1 / 3; align-self: center; }
.project-card-description {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--body); line-height: 1.5;
}
.project-card-progress {
  height: 6px;
  background: rgba(255,255,255,0.05);
  margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.project-card-progress-bar {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  width: calc(var(--pct) * 1%);
  box-shadow: 0 0 6px rgba(74, 184, 212, 0.4);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card-section-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 500;
}
.project-card-materials {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.project-card-material {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-body); font-size: 13px;
}
.project-card-material.is-complete { opacity: 0.6; }
.project-card-material-symbol {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cyan-dim);
  background: rgba(74, 184, 212, 0.06);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  color: var(--cyan); letter-spacing: 0.5px;
}
.project-card-material.is-complete .project-card-material-symbol {
  border-color: var(--green);
  background: rgba(60, 184, 122, 0.1);
  color: var(--green);
}
.project-card-material-name { color: var(--bright); }
.project-card-material-progress {
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 0.5px;
}
.project-card-material-contribute {
  appearance: none; cursor: pointer;
  padding: 6px 10px;
  background: rgba(232, 184, 74, 0.06);
  border: 1px solid rgba(232, 184, 74, 0.3);
  color: var(--gold);
  font-family: var(--font-display); font-size: 10px;
  font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  transition: 0.15s;
}
.project-card-material-contribute:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.14);
  border-color: var(--gold);
}
.project-card-material-contribute:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--muted);
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.project-card-effect {
  padding: 12px 14px;
  background: rgba(74, 184, 212, 0.04);
  border-left: 2px solid var(--cyan);
}
.project-card-effect-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--cyan); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.project-card-effect-detail {
  margin: 0;
  font-size: 12px; color: var(--body);
}

/* Fleet rows */
.fleet-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 16px 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}
.fleet-row.is-expanded {
  border-color: rgba(74, 184, 212, 0.3);
}

/* Hull bar inside fleet row info */
.fleet-row-hull {
  margin-top: 6px;
}
.fleet-row-hull-label {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 3px;
}
.fleet-row-hull-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  max-width: 240px;
}
.fleet-row-hull-fill {
  height: 100%;
  width: var(--pct, 100%);
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width 0.4s ease-out;
}
.fleet-row-hull-fill.is-warn {
  background: linear-gradient(90deg, #d4a14a, #e8b84a);
}
.fleet-row-hull-fill.is-danger {
  background: linear-gradient(90deg, #b84a4a, #d44a4a);
}

/* Expanded record card — spans full width below the row */
.fleet-row-record {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 16px 18px;
  background: rgba(13, 16, 24, 0.6);
  border-top: 1px solid rgba(74, 184, 212, 0.18);
}
.fleet-row-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 18px;
}
.fleet-row-record-cell {
  display: flex; flex-direction: column; gap: 3px;
}
.fleet-row-record-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.fleet-row-record-value {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright);
}
.fleet-row-record-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.5;
}

/* Hull specialization card — surfaces the hull-specific passive that
   defines this ship's role beyond stats. Uses a subtle gold left-edge
   accent to read as "premium info" without competing visually with
   the more important condition/equipment treatments. */
.fleet-hull-spec {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.04), rgba(232, 184, 74, 0.01));
  border-left: 2px solid rgba(232, 184, 74, 0.4);
  padding-left: 14px;
}
.fleet-hull-spec-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.fleet-hull-spec-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted);
}
.fleet-hull-spec-role {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--gold);
  font-weight: 500;
}
.fleet-hull-spec-desc {
  margin: 0 0 6px 0;
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.55;
}
.fleet-hull-spec-active {
  display: inline-block;
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(74, 184, 212, 0.95);
  padding: 2px 0;
}
.fleet-hull-spec-inactive {
  display: inline-block;
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0;
  font-style: italic;
}

/* Fleet repair UI — exposed in the expanded ship record so the
   player can fix damaged ships from the dashboard without having to
   complete a sortie + visit the shipyard. Narratively the player is
   "at home" while looking at company operations. */
.fleet-repair-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.fleet-repair-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted);
}
.fleet-repair-buttons {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fleet-repair-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 9px 14px;
  background: rgba(74, 184, 212, 0.04);
  border: 1px solid rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  text-align: left;
  transition: 0.15s;
}
.fleet-repair-btn:hover:not(:disabled) {
  background: rgba(74, 184, 212, 0.1);
  border-color: var(--cyan);
}
.fleet-repair-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--muted);
}
.fleet-repair-btn--full {
  background: rgba(232, 184, 74, 0.04);
  border-color: rgba(232, 184, 74, 0.4);
  color: var(--gold);
}
.fleet-repair-btn--full:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.12);
  border-color: var(--gold);
}
.fleet-repair-btn-label {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
}
.fleet-repair-btn-cost {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 0.5px;
}
.fleet-repair-btn:disabled .fleet-repair-btn-cost { color: var(--red); }
.fleet-repair-warning {
  font-family: var(--font-data); font-size: 10px;
  color: var(--red); letter-spacing: 0.5px;
  padding-top: 4px;
}
.fleet-repair-warning strong { color: var(--bright); font-weight: 400; }
.fleet-row-portrait {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background:
    radial-gradient(circle at center, rgba(74, 184, 212, 0.06), transparent),
    var(--void-mid);
}
.fleet-row-portrait svg { width: 100%; height: 100%; }
.fleet-row-info { min-width: 0; }
.fleet-row-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 2px;
}
.fleet-row-name {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.fleet-row-model {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 400;
}
.fleet-row-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.fleet-row-condition {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
}

/* Digest */
.digest-entry {
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.digest-entry-header {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.digest-entry-cycle {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--gold); letter-spacing: 2px;
}
.digest-entry-trigger {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
  flex: 1;
}
.digest-entry-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.digest-entry-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
}
.digest-entry-icon {
  font-family: var(--font-data); font-size: 13px;
  text-align: center;
  color: var(--cyan);
}
.digest-entry-item--shortage .digest-entry-icon { color: var(--gold); }
.digest-entry-item--threat .digest-entry-icon { color: var(--red); }
.digest-entry-item--rare .digest-entry-icon { color: var(--gold-bright); }
.digest-entry-item--anomaly .digest-entry-icon { color: var(--purple); }
.digest-entry-text { color: var(--body); }
.digest-entry-text strong { color: var(--bright); font-weight: 700; }
.digest-entry-meta {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. POST-RUN SUMMARY
   ═══════════════════════════════════════════════════════════════════════ */
.post-run-shell {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  position: relative; z-index: 1;
}
.post-run-header {
  padding: 32px 32px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(60, 184, 122, 0.04), transparent);
}
.post-run-eyebrow {
  display: block;
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.post-run-title {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 32px; font-weight: 400;
  color: var(--white); letter-spacing: -0.5px;
}
.post-run-subtitle {
  margin: 0;
  font-family: var(--font-body); font-size: 13px;
  color: var(--body);
}
.post-run-subtitle strong { color: var(--bright); font-weight: 700; }

.post-run-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 24px 32px;
  overflow-y: auto;
}
.post-run-section {
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
}
.post-run-section h3 {
  margin: 0 0 10px;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.post-run-section--profit { background: linear-gradient(135deg, rgba(232, 184, 74, 0.08), rgba(232, 184, 74, 0.02)); border-color: rgba(232, 184, 74, 0.3); }
.post-run-big-number {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 600;
  color: var(--gold);
  letter-spacing: -1px;
}
.post-run-big-number small { font-size: 18px; color: var(--gold-dim); margin-left: 2px; }

/* ─── HERO — large profit moment ─────────────────────────────────── */
.post-run-hero {
  padding: 48px 32px 36px;
  text-align: center;
  background:
    radial-gradient(ellipse at center, rgba(232, 184, 74, 0.10), transparent 65%),
    linear-gradient(180deg, rgba(232, 184, 74, 0.04), transparent);
  border-bottom: 1px solid rgba(232, 184, 74, 0.12);
  animation: post-run-hero-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes post-run-hero-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.post-run-hero-eyebrow {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 14px;
}
.post-run-hero-number {
  font-family: var(--font-display);
  font-size: 88px; font-weight: 700;
  color: var(--gold);
  letter-spacing: -2.5px;
  line-height: 1;
  text-shadow: 0 0 60px rgba(232, 184, 74, 0.35);
}
.post-run-hero-number small {
  font-size: 32px; color: var(--gold-dim);
  margin-left: 4px; font-weight: 500;
  letter-spacing: -1px;
}
.post-run-hero-number.is-negative {
  color: var(--red-bright);
  text-shadow: 0 0 44px rgba(212, 74, 74, 0.28);
}
.post-run-hero-number.is-negative small { color: rgba(255, 77, 109, 0.65); }
.post-run-hero-number.is-zero {
  color: var(--muted);
  text-shadow: none;
}
.post-run-hero-number.is-zero small { color: var(--muted); }
.post-run-hero-context {
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
  letter-spacing: 0.3px;
}

/* ─── NARRATIVE — captain's log prose ────────────────────────────── */
.post-run-narrative {
  padding: 22px 32px;
  font-family: var(--font-body); font-size: 15px;
  color: var(--body); line-height: 1.65;
  background: rgba(74, 184, 212, 0.025);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: post-run-fade-in 0.5s ease-out 0.4s both;
}
@keyframes post-run-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.post-run-narrative strong { color: var(--bright); font-weight: 600; }
.post-run-narrative .nrt-pilot { color: var(--cyan); font-weight: 600; }
.post-run-narrative .nrt-route { color: var(--bright); font-weight: 600; }
.post-run-narrative .nrt-mark { color: var(--gold); font-weight: 600; }
.post-run-narrative .nrt-mark.is-negative { color: var(--red-bright); }

/* ─── ACHIEVEMENTS — gold pills, horizontal flow ─────────────────── */
.post-run-achievements {
  padding: 18px 32px;
  display: flex; flex-wrap: wrap; gap: 10px;
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.025), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: post-run-fade-in 0.5s ease-out 0.6s both;
}
.post-run-achievement {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.12), rgba(232, 184, 74, 0.04));
  border: 1px solid rgba(232, 184, 74, 0.4);
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.8px;
  color: var(--gold);
  position: relative;
}
.post-run-achievement::before {
  content: '★';
  font-size: 11px;
  color: var(--gold);
}
.post-run-achievement strong {
  color: #fff5dc; font-weight: 600;
}
.post-run-achievement small {
  font-family: var(--font-data); font-size: 10px;
  color: var(--gold-dim); margin-left: 2px;
  letter-spacing: 0.5px; text-transform: none;
}

/* ─── DETAILS — denser supporting info grid ─────────────────────── */
.post-run-details {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 20px 32px;
  overflow-y: auto;
  animation: post-run-fade-in 0.5s ease-out 0.7s both;
}
.post-run-detail-card {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
}
.post-run-detail-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.post-run-cargo-list {
  list-style: none; padding: 0; margin: 0;
}
.post-run-cargo-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
  font-size: 13px; color: var(--bright);
}
.manifest-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--cyan-dim);
  background: rgba(74, 184, 212, 0.06);
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  color: var(--cyan);
}

.post-run-progress-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-bottom: 10px;
}
.post-run-progress-row:last-child { margin-bottom: 0; }
.post-run-progress-label { font-size: 12px; color: var(--bright); }
.post-run-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.post-run-progress-bar .bar-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--cyan);
  width: calc(var(--pct) * 1%);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.post-run-progress-bar--purple .bar-fill { background: var(--purple); }
.post-run-progress-delta {
  font-family: var(--font-data); font-size: 11px;
  color: var(--green); letter-spacing: 0.5px;
}

.post-run-ship-progress { display: grid; gap: 8px; }
.post-run-ship-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright);
}
.post-run-ship-unlock {
  margin: 0; font-size: 12px; color: var(--body); line-height: 1.4;
}

.post-run-route { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; color: var(--bright); }
.post-run-route-detail { margin: 0; font-size: 12px; color: var(--body); }

.post-run-leads-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.post-run-lead {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--body);
  line-height: 1.4;
}
.post-run-lead-icon {
  font-family: var(--font-data); font-size: 12px;
  color: var(--gold);
}
.post-run-lead strong { color: var(--bright); font-weight: 700; }

.post-run-footer {
  padding: 18px 32px;
  border-top: 1px solid rgba(232, 184, 74, 0.18);
  background:
    linear-gradient(180deg, rgba(232, 184, 74, 0.04), rgba(10, 13, 20, 0.92));
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  animation: post-run-fade-in 0.5s ease-out 0.85s both;
}
.post-run-recommendation {
  flex: 1;
  min-width: 320px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.10), rgba(232, 184, 74, 0.02));
  border: 1px solid rgba(232, 184, 74, 0.35);
  border-left: 3px solid var(--gold);
}
.post-run-recommendation-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  color: var(--gold); letter-spacing: 2px; text-transform: uppercase;
  display: block; margin-bottom: 4px;
}
.post-run-recommendation h4 {
  margin: 0 0 4px;
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.2px;
}
.post-run-recommendation p {
  margin: 0;
  font-size: 13px; color: var(--body); line-height: 1.5;
}
.post-run-recommendation strong { color: var(--gold); font-weight: 700; }
.post-run-footer-actions { display: flex; gap: 8px; }

.menu-footer-secondary {
  appearance: none; cursor: pointer;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--body);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: 0.15s;
}
.menu-footer-secondary:hover { border-color: rgba(74, 184, 212, 0.3); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════
   4. RUN SIM — procedural between-runs event stream
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   3b. GATE JUMP — interstitial sector-transition animation
   ═══════════════════════════════════════════════════════════════════════
   Roughly 2.5s of dedicated screen time when the player commits to a
   sector jump. Visual language: starfield streaming past during warp,
   concentric gate rings expanding to "swallow" the player into the
   destination, status readout below confirming the jump. */
.gate-jump-shell {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative; z-index: 1;
  /* Slightly darker void than run-sim — the jump feels deeper. */
  background: radial-gradient(ellipse at center, rgba(20, 8, 40, 0.4), rgba(2, 2, 6, 0.95));
}
.gate-jump-topbar {
  padding: 22px 32px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(138, 106, 212, 0.15);
}
.gate-jump-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--purple);
}
.gate-jump-route {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 1px;
}
.gate-jump-route .run-sim-route-arrow {
  color: var(--purple);
  /* Pulse the arrow during transit */
  animation: gate-jump-arrow-pulse 1.6s ease-in-out infinite;
}
@keyframes gate-jump-arrow-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(-4px); }
  50%      { opacity: 1; transform: translateX(4px); }
}

.gate-jump-stage {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  padding: 40px 20px;
}

/* Starfield: tiny streaks streaming past, faking warp speed. Each
   "star" is a span positioned absolutely with a per-element animation
   delay/duration so they don't all move in lockstep. Layered with
   varying opacity to give depth. */
.gate-jump-starfield {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.gate-jump-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  /* Box-shadow trick: stretch it into a streak via the shadow,
     then animate the whole thing translating left-to-right. */
  box-shadow: 30px 0 12px 1px rgba(168, 132, 224, 0.4);
  animation: gate-jump-star-streak linear infinite;
  /* Inherit tint variations from per-element style attributes set in JS */
}
@keyframes gate-jump-star-streak {
  /* Star starts off-screen right, streaks past the center, exits left.
     The starting position is set per-element via top/left in JS so
     stars cover the screen vertically. */
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(-120vw); opacity: 0; }
}

/* Concentric gate rings — three sizes pulse outward, evoking the
   gate aperture opening to swallow the ship. */
.gate-jump-ring-stack {
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.gate-jump-ring {
  position: absolute;
  border: 1px solid var(--purple);
  border-radius: 50%;
  box-shadow:
    0 0 24px rgba(138, 106, 212, 0.4),
    inset 0 0 24px rgba(138, 106, 212, 0.2);
  /* Subtle conical gradient via mask isn't supported everywhere — fall
     back to plain pulsing ring with rotation to imply rotation. */
  animation: gate-jump-ring-pulse 2.4s ease-in-out infinite, gate-jump-ring-rotate 8s linear infinite;
}
.gate-jump-ring--outer {
  width: 220px; height: 220px;
  animation-delay: 0s, 0s;
  border-color: rgba(138, 106, 212, 0.7);
}
.gate-jump-ring--mid {
  width: 160px; height: 160px;
  animation-delay: 0.4s, 0s;
  animation-duration: 2.4s, 6s;
  animation-direction: normal, reverse;
  border-color: rgba(168, 132, 224, 0.85);
}
.gate-jump-ring--inner {
  width: 100px; height: 100px;
  animation-delay: 0.8s, 0s;
  animation-duration: 2.4s, 4s;
  border-color: rgba(200, 170, 240, 1);
}
@keyframes gate-jump-ring-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes gate-jump-ring-rotate {
  /* Combined with scale animation via multi-property rotate — but to
     play nice across browsers we keep them on separate animations and
     accept that scale wins because it transforms last. The slow rotate
     applies to a child ::before instead. We do a fake rotate via
     border-style alternation on the rings. */
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(20deg); }
}
/* The brightest center: a glowing core in the middle of the rings */
.gate-jump-core {
  position: absolute;
  width: 30px; height: 30px;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(200, 170, 240, 0.9) 30%, rgba(138, 106, 212, 0) 80%);
  border-radius: 50%;
  animation: gate-jump-core-flare 1.6s ease-in-out infinite;
}
@keyframes gate-jump-core-flare {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.4); opacity: 1; }
}

.gate-jump-readout {
  margin-top: 48px;
  text-align: center;
  z-index: 2;
}
.gate-jump-readout-label {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 6px;
}
.gate-jump-readout-name {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.gate-jump-readout-status {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.gate-jump-footer {
  padding: 18px 32px;
  display: flex; gap: 32px; justify-content: center;
  border-top: 1px solid rgba(138, 106, 212, 0.15);
  background: rgba(10, 8, 20, 0.6);
}
.gate-jump-footer-meta {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
  text-align: center;
}
.gate-jump-footer-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
}
.gate-jump-footer-value {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--cyan);
  letter-spacing: 1px;
}

@media (max-width: 700px) {
  .gate-jump-topbar { padding: 16px 18px 12px; }
  .gate-jump-route { font-size: 14px; gap: 10px; }
  .gate-jump-ring-stack { width: 180px; height: 180px; }
  .gate-jump-ring--outer { width: 180px; height: 180px; }
  .gate-jump-ring--mid   { width: 130px; height: 130px; }
  .gate-jump-ring--inner { width: 80px;  height: 80px; }
  .gate-jump-readout { margin-top: 36px; }
  .gate-jump-readout-name { font-size: 20px; }
  .gate-jump-footer { padding: 14px 18px; gap: 20px; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════
   3c. ENDGAME — full-page resolution beat for T5 project completions
   ═══════════════════════════════════════════════════════════════════════
   Triggered when the player completes a Tier V endgame project. Full
   page, narrative weight, faction-themed accent (Sable purple, Frontier
   cyan, Cryos gold). Uses run-sim's structural grid as a base. */
.endgame-shell {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  position: relative; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(20, 20, 30, 0.4), rgba(2, 2, 6, 0.95));
  /* Faction accent bar at top — set via inline style on theme switch */
  border-top: 3px solid var(--endgame-accent, var(--gold));
}
.endgame-header {
  padding: 32px 40px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.endgame-eyebrow {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--endgame-accent, var(--gold));
  margin-bottom: 12px;
  /* Gentle pulse — this is a resolution moment, not a celebration */
  animation: endgame-eyebrow-pulse 3s ease-in-out infinite;
}
@keyframes endgame-eyebrow-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.endgame-title {
  margin: 0;
  font-family: var(--font-display); font-size: 32px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.5px;
}
.endgame-subtitle {
  margin-top: 10px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--muted);
  font-style: italic;
}
.endgame-body {
  padding: 32px 40px;
  font-family: var(--font-body); font-size: 15px;
  color: var(--body); line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
  overflow-y: auto;
}
.endgame-body p {
  margin: 0 0 18px;
}
.endgame-body p:last-child {
  margin-bottom: 0;
}
.endgame-body strong {
  color: var(--endgame-accent, var(--gold));
  font-weight: 500;
}
.endgame-body em {
  color: var(--cyan);
  font-style: italic;
}
.endgame-stats {
  padding: 20px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(13, 16, 24, 0.4);
}
.endgame-stat {
  text-align: center;
}
.endgame-stat-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.endgame-stat-value {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--cyan);
  letter-spacing: 0.5px;
}
.endgame-footer {
  padding: 24px 40px 32px;
  display: flex; justify-content: center;
}
.endgame-continue-btn {
  appearance: none; cursor: pointer;
  padding: 14px 36px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.2), rgba(232, 184, 74, 0.06));
  border: 1px solid var(--endgame-accent, rgba(232, 184, 74, 0.5));
  color: var(--endgame-accent, var(--gold));
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.15s;
}
.endgame-continue-btn:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.32), rgba(232, 184, 74, 0.1));
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.3);
}

@media (max-width: 700px) {
  .endgame-header { padding: 24px 20px 16px; }
  .endgame-title { font-size: 22px; }
  .endgame-body { padding: 22px 20px; font-size: 14px; }
  .endgame-stats {
    padding: 16px 20px;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .endgame-stat-value { font-size: 16px; }
  .endgame-footer { padding: 20px 20px 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. RUN SIM — procedural between-runs event stream
   ═══════════════════════════════════════════════════════════════════════ */
.run-sim-shell {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative; z-index: 1;
  min-height: 0;
}

/* Top bar — route + objective + skip control */
.run-sim-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 32px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(74, 184, 212, 0.04), transparent);
}
.run-sim-route {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.run-sim-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan);
}
.run-sim-eyebrow-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: sim-pulse 1.4s ease-in-out infinite;
}
@keyframes sim-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}
.run-sim-route-line {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.run-sim-route-arrow {
  color: var(--cyan-dim);
  font-family: var(--font-data); font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}
.run-sim-objective {
  font-family: var(--font-body); font-size: 13px;
  color: var(--body);
  margin-top: 2px;
}
.run-sim-objective strong { color: var(--gold); font-weight: 700; }

.run-sim-controls {
  display: flex; gap: 10px; align-items: center;
}
.run-sim-skip {
  appearance: none; cursor: pointer;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--body);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  transition: 0.15s;
}
.run-sim-skip:hover {
  border-color: rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.04);
}
.run-sim-skip small {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px; font-weight: 400;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 10px;
}
.run-sim-skip.is-fast {
  background: rgba(232, 184, 74, 0.08);
  border-color: rgba(232, 184, 74, 0.4);
  color: var(--gold);
}
.run-sim-skip.is-fast small { color: var(--gold-dim); border-color: rgba(232, 184, 74, 0.3); }

/* Center stage — split into ship telemetry + flight log */
.parent-pause-menu {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.parent-pause-menu.is-open {
  display: flex;
}

.parent-pause-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, 0.78);
  backdrop-filter: blur(10px);
}

.parent-pause-card {
  position: relative;
  width: min(560px, 100%);
  border: 1px solid rgba(95, 207, 232, 0.2);
  background: rgba(7, 12, 22, 0.96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
  padding: 22px;
}

.parent-pause-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.parent-pause-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95, 207, 232, 0.35);
  color: var(--cyan);
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0;
}

.parent-pause-eyebrow {
  display: block;
  color: var(--gold);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.parent-pause-header h2 {
  margin: 3px 0 0;
  color: var(--bright);
  font-size: 24px;
  letter-spacing: 0;
}

.parent-pause-status {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
}

.parent-pause-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.parent-pause-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bright);
  text-align: left;
  cursor: pointer;
}

.parent-pause-action:hover,
.parent-pause-action:focus-visible {
  border-color: rgba(95, 207, 232, 0.45);
  background: rgba(95, 207, 232, 0.1);
  outline: none;
}

.parent-pause-action span {
  font-weight: 700;
}

.parent-pause-action small {
  color: var(--muted);
  font-size: 12px;
}

.parent-pause-action--primary {
  border-color: rgba(232, 184, 74, 0.42);
  background: rgba(232, 184, 74, 0.12);
}

.parent-pause-action--danger {
  border-color: rgba(232, 96, 96, 0.34);
}

.parent-pause-action--danger:hover,
.parent-pause-action--danger:focus-visible {
  border-color: rgba(232, 96, 96, 0.65);
  background: rgba(232, 96, 96, 0.12);
}

.command-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 4, 9, 0.62);
  backdrop-filter: blur(8px);
}

.command-confirm-modal[hidden] {
  display: none !important;
}

.command-confirm-card {
  width: min(520px, 100%);
  border: 1px solid rgba(95, 207, 232, 0.28);
  background:
    linear-gradient(180deg, rgba(95, 207, 232, 0.05), rgba(232, 184, 74, 0.03)),
    rgba(7, 12, 22, 0.98);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
  padding: 24px;
}

.command-confirm-eyebrow {
  display: block;
  color: var(--gold);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.command-confirm-card h3 {
  margin: 8px 0 10px;
  color: var(--bright);
  font-size: 22px;
  letter-spacing: 0;
}

.command-confirm-card p {
  margin: 0;
  color: var(--body);
  line-height: 1.55;
}

.command-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.command-confirm-btn {
  min-width: 128px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: var(--bright);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}

.command-confirm-btn:hover,
.command-confirm-btn:focus-visible {
  border-color: rgba(95, 207, 232, 0.5);
  background: rgba(95, 207, 232, 0.1);
  outline: none;
}

.command-confirm-btn--primary {
  border-color: rgba(232, 184, 74, 0.45);
  color: var(--gold);
  background: rgba(232, 184, 74, 0.08);
}

.command-confirm-modal.is-danger .command-confirm-btn--primary {
  border-color: rgba(232, 96, 96, 0.58);
  color: var(--red);
  background: rgba(232, 96, 96, 0.1);
}

.command-confirm-modal.is-danger .command-confirm-eyebrow {
  color: var(--red);
}

.run-sim-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 22px 32px;
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 880px) {
  .run-sim-stage { grid-template-columns: 1fr; }

  /* MOBILE SCROLL FIX (matches dock-screen pattern): on desktop the
     run-sim-stage is a fixed-height grid with telemetry and flight-log
     panels each scrolling independently. On mobile, single column +
     `overflow:hidden` on the parent clips content, and the inner-scroll
     pattern is awkward on touch. Mobile fix: let the document scroll
     the whole stage, panels grow to content height, the bottom bar
     sticks so the progress + completion gate are always reachable. */
  [data-screen="run-sim"] .run-sim-shell {
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 100%;
  }
  .run-sim-stage {
    overflow: visible;
    padding: 14px 12px;
  }
  .flightlog-panel,
  .telemetry-panel {
    overflow: visible;
    min-height: 0;
  }
  .flightlog-list {
    /* Without internal scroll, allow generous max-height so very long
       flight logs don't push the page beyond what feels reasonable.
       Player can still scroll the document to see more of the log. */
    overflow-y: visible;
    max-height: none;
  }
  /* Sticky bottom — keep progress bar + completion gate visible while
     scrolling the run-sim content. */
  .run-sim-bottom {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(13, 16, 24, 0.85), rgba(13, 16, 24, 0.98));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Mobile fix: topbar was a 1fr | auto grid (route info | controls).
     The right-side controls eat enough width that the route + objective
     get squeezed to one-word-per-line. Stack vertically: route info on
     top (full width), controls below as a button row. */
  .run-sim-topbar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px 12px;
  }
  .run-sim-route-line {
    font-size: 18px;
    flex-wrap: wrap;
  }
  .run-sim-objective {
    font-size: 12px;
    line-height: 1.45;
  }
  .run-sim-controls {
    gap: 8px;
  }
  .run-sim-skip {
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 12px;
    font-size: 11px;
    min-width: 0;
  }
  /* Hide the kbd-hint <small> tags — they're a desktop affordance and
     they push the buttons wider than the viewport on mobile. */
  .run-sim-skip small {
    display: none;
  }
  .run-sim-skip span {
    text-align: center;
  }
  /* The Company button has an inline margin-right: 10px from HTML —
     override since gap already handles spacing on mobile. */
  #run-sim-company-btn {
    margin-right: 0 !important;
  }
}

/* Telemetry panel (left) */
.telemetry-panel {
  display: flex; flex-direction: column;
  gap: 16px;
  min-width: 0; min-height: 0;
}
.telemetry-card {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.97), rgba(10, 13, 20, 0.99));
  border: 1px solid rgba(255,255,255,0.05);
}
.telemetry-card-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Route progress visualization */
.telemetry-route {
  position: relative;
  height: 64px;
  margin-top: 4px;
}
.telemetry-route-track {
  position: absolute;
  top: 50%; left: 8%; right: 8%;
  height: 2px;
  background: rgba(255,255,255,0.08);
  transform: translateY(-50%);
}
.telemetry-route-track-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  width: 0%;
  box-shadow: 0 0 6px rgba(74, 184, 212, 0.5);
  transition: width 0.2s ease-out;
}
.telemetry-route-node {
  position: absolute; top: 50%;
  width: 12px; height: 12px;
  background: var(--void);
  border: 1px solid rgba(255,255,255,0.18);
  transform: translate(-50%, -50%);
  border-radius: 0;
}
.telemetry-route-node--start { left: 8%; border-color: var(--green); }
.telemetry-route-node--start.is-passed { background: var(--green); }
.telemetry-route-node--end { left: 92%; border-color: var(--gold); }
.telemetry-route-node--end.is-passed { background: var(--gold); }
.telemetry-route-node-mid {
  width: 8px; height: 8px;
  border-color: rgba(74, 184, 212, 0.4);
}
.telemetry-route-node-mid.is-passed {
  background: var(--cyan);
  border-color: var(--cyan);
}
.telemetry-route-ship {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  transition: left 0.2s ease-out;
}
.telemetry-route-ship svg {
  width: 16px; height: 16px;
  filter: drop-shadow(0 0 4px var(--cyan));
  /* Rotate 90° CW so the ship's nose points right — the direction of travel
     along the horizontal track. The SVG path is drawn pointing up, so a single
     rotation aligns it with the lane. */
  transform: rotate(90deg);
}
.telemetry-route-labels {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 0%;
  margin-top: 6px;
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
}

/* Vitals grid */
.telemetry-vitals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.telemetry-vital {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  display: flex; flex-direction: column; gap: 2px;
}
.telemetry-vital-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted);
}
.telemetry-vital-value {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.telemetry-vital--cargo .telemetry-vital-value { color: var(--gold); }
.telemetry-vital--hull .telemetry-vital-value { color: var(--cyan); }
.telemetry-vital--credits .telemetry-vital-value { color: var(--gold); }
.telemetry-vital--profit .telemetry-vital-value { color: var(--green); }

/* Live tally */
.telemetry-tally {
  display: grid; gap: 6px;
}
.telemetry-tally-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-family: var(--font-body); font-size: 13px;
  color: var(--bright);
  animation: tally-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.telemetry-tally-row:last-child { border-bottom: 0; }
.telemetry-tally-icon {
  font-family: var(--font-data); font-size: 11px;
  color: var(--gold);
  text-align: center;
}
.telemetry-tally-amount {
  font-family: var(--font-data); font-size: 11px;
  color: var(--gold); letter-spacing: 0.5px;
}
.telemetry-tally-empty {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 6px 0;
}
@keyframes tally-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flight log (right) */
.flightlog-panel {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.97), rgba(10, 13, 20, 0.99));
  border: 1px solid rgba(255,255,255,0.05);
  min-height: 0;
  overflow: hidden;
}
.flightlog-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(13, 16, 24, 0.6);
}
.flightlog-header-title {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan);
}
.flightlog-header-meta {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.flightlog-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.flightlog-list::-webkit-scrollbar { width: 4px; }
.flightlog-list::-webkit-scrollbar-track { background: transparent; }
.flightlog-list::-webkit-scrollbar-thumb { background: rgba(74, 184, 212, 0.3); }

.flightlog-event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--cyan);
  animation: flightlog-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.flightlog-event-stamp {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px;
  white-space: nowrap;
  padding-top: 1px;
}
.flightlog-event-body {
  display: grid; gap: 3px;
  min-width: 0;
}
.flightlog-event-tag {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--cyan);
}
.flightlog-event-text {
  font-family: var(--font-body); font-size: 13px;
  color: var(--bright); line-height: 1.4;
}
.flightlog-event-text strong { color: var(--white); font-weight: 700; }

.flightlog-event--gold       { border-left-color: var(--gold); }
.flightlog-event--gold .flightlog-event-tag { color: var(--gold); }
.flightlog-event--green      { border-left-color: var(--green); }
.flightlog-event--green .flightlog-event-tag { color: var(--green); }
.flightlog-event--purple     { border-left-color: var(--purple); }
.flightlog-event--purple .flightlog-event-tag { color: var(--purple); }
.flightlog-event--red        { border-left-color: var(--red); }
.flightlog-event--red .flightlog-event-tag { color: var(--red); }

@keyframes flightlog-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bottom bar — overall progress */
.run-sim-bottom {
  padding: 14px 32px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(13, 16, 24, 0.4);
  display: flex; flex-direction: column; gap: 8px;
}
.run-sim-bottom-progress {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.run-sim-bottom-progress-bar {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  width: 0%;
  box-shadow: 0 0 6px rgba(74, 184, 212, 0.4);
  transition: width 0.3s linear;
}
.run-sim-bottom-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
}
.run-sim-bottom-meta strong { color: var(--cyan); font-weight: 400; }

/* ─── Sortie completion gate ─────────────────────────────────────────
   When the sortie's progress bar reaches 100%, the run-sim screen
   pauses on a completion banner instead of auto-transitioning to the
   dock. Lets the player review the flight log + tally before
   committing to dock. Hidden by default; shown via .is-visible. */
.run-sim-completion-gate {
  display: none;
}
.run-sim-completion-gate.is-visible {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 6px;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(74, 184, 212, 0.18), rgba(74, 184, 212, 0.06));
  border: 1px solid rgba(74, 184, 212, 0.45);
  animation: completion-gate-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.run-sim-completion-info {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.run-sim-completion-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  color: var(--cyan); letter-spacing: 2.5px; text-transform: uppercase;
}
.run-sim-completion-summary {
  font-family: var(--font-body); font-size: 13px;
  color: var(--bright); line-height: 1.4;
  word-break: break-word;
}
.run-sim-completion-summary strong {
  color: var(--gold); font-weight: 600;
}
.run-sim-completion-btn {
  appearance: none; cursor: pointer;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.3), rgba(74, 184, 212, 0.12));
  border: 1px solid rgba(74, 184, 212, 0.7);
  color: var(--cyan-bright);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.15s ease;
  white-space: nowrap;
}
.run-sim-completion-btn:hover {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.4), rgba(74, 184, 212, 0.18));
  border-color: var(--cyan-bright);
  box-shadow: 0 0 16px rgba(74, 184, 212, 0.3);
}
@keyframes completion-gate-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .run-sim-completion-gate.is-visible {
    grid-template-columns: 1fr;  /* stack on narrow viewports */
  }
  .run-sim-completion-btn {
    width: 100%;
    justify-self: stretch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   4b. DOCK SCREEN — between-sortie hub
   ═══════════════════════════════════════════════════════════════════════ */
.dock-shell {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative; z-index: 1;
  min-height: 0;
  /* Hard containment: nothing inside should be able to exceed this
     box's width. Without min-width: 0, flex/grid auto-min-content can
     push the shell wider than its parent on narrow viewports. */
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
}

.dock-identity {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding: 24px 32px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, var(--station-accent-wash, rgba(74, 184, 212, 0.05)), transparent);
}
.dock-identity-info {
  display: flex; align-items: center; gap: 18px;
  min-width: 0;
}
.dock-identity-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid var(--station-accent-border, rgba(74, 184, 212, 0.4));
  color: var(--station-accent, var(--cyan));
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: 2px;
  background: var(--station-accent-ghost, rgba(74, 184, 212, 0.04));
  flex-shrink: 0;
}

/* ─── Per-station palette overrides ─────────────────────────────
   The dock-shell carries a data-station-faction attribute set in
   renderDockScreen. These selectors retint the identity strip and
   ambient backdrop so each station feels like a different place.
   Default (no attribute, or frontier) stays cyan. Cards, buttons,
   shop chrome, etc. stay in the universal palette — only the
   identity / ambient bands shift. */
.dock-shell[data-station-faction="industrial"] {
  --station-accent: #e8a04a;
  --station-accent-border: rgba(232, 160, 74, 0.45);
  --station-accent-ghost: rgba(232, 160, 74, 0.05);
  --station-accent-wash:  rgba(232, 160, 74, 0.06);
}
.dock-shell[data-station-faction="medical"] {
  --station-accent: #6fdca0;
  --station-accent-border: rgba(111, 220, 160, 0.45);
  --station-accent-ghost: rgba(111, 220, 160, 0.05);
  --station-accent-wash:  rgba(111, 220, 160, 0.06);
}
.dock-shell[data-station-faction="independent"] {
  /* Graveswell — lawless. Reds and rust. */
  --station-accent: #d4754a;
  --station-accent-border: rgba(212, 117, 74, 0.45);
  --station-accent-ghost: rgba(212, 117, 74, 0.05);
  --station-accent-wash:  rgba(212, 117, 74, 0.07);
}
.dock-shell[data-station-faction="sable"] {
  --station-accent: #a884e0;
  --station-accent-border: rgba(168, 132, 224, 0.45);
  --station-accent-ghost: rgba(168, 132, 224, 0.05);
  --station-accent-wash:  rgba(168, 132, 224, 0.06);
}
/* Frontier (default) — explicit override anyway so the rules are
   visible and the variable name resolves at the .dock-shell scope. */
.dock-shell[data-station-faction="frontier"] {
  --station-accent: var(--cyan);
  --station-accent-border: rgba(74, 184, 212, 0.4);
  --station-accent-ghost: rgba(74, 184, 212, 0.04);
  --station-accent-wash:  rgba(74, 184, 212, 0.05);
}

.dock-identity-text { min-width: 0; }
.dock-identity-eyebrow {
  display: block;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 4px;
}
.dock-identity-name {
  margin: 0;
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  color: var(--bright); letter-spacing: -0.2px;
}
.dock-identity-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}

/* Ambient flavor: a quiet italic line beneath the meta pills that
   gives the station a sense of place. Rotates per (station, cycle). */
.dock-station-ambient {
  margin-top: 10px;
  font-family: var(--font-body); font-size: 12px;
  font-style: italic;
  color: rgba(220, 215, 200, 0.55);
  line-height: 1.5;
  max-width: 640px;
  padding-left: 10px;
  border-left: 2px solid var(--station-accent-border, rgba(255, 255, 255, 0.06));
}
.dock-station-ambient:empty {
  display: none;  /* hide the borderif no flavor available for this station */
}

.dock-run-stat {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
  text-align: right;
}
.dock-run-stat strong {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  color: var(--gold); letter-spacing: 0.3px;
}
#dock-run-profit.is-negative { color: var(--red-bright); }
#dock-run-profit.is-zero { color: var(--muted); }

/* Multi-leg expedition identity — surfaces only on real multi-leg runs.
   Tier badge calls attention with gold treatment; risk forecast color-
   codes from green (low) through gold (mid) to red (high). */
.dock-run-stat-tier {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 4px 10px;
  background: rgba(232, 184, 74, 0.12);
  border: 1px solid rgba(232, 184, 74, 0.4);
  border-radius: 2px;
}
.dock-run-stat-tier-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2.5px; color: var(--gold);
}
.dock-run-stat-tier-mult {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; color: rgba(232, 184, 74, 0.75);
}
.dock-run-stat-risk {
  margin-top: 2px;
  font-size: 9px; letter-spacing: 1.5px;
}
.dock-run-stat-risk strong {
  font-family: var(--font-data); font-size: 12px;
  margin-left: 4px; letter-spacing: 0.5px;
}
.dock-run-stat-risk strong.risk-low  { color: rgba(140, 220, 140, 0.95); }
.dock-run-stat-risk strong.risk-mid  { color: rgba(232, 184, 74, 0.95); }
.dock-run-stat-risk strong.risk-high { color: rgba(232, 100, 100, 0.95); }

/* Two-column body: left = sortie recap + station services, right = run aggregate */
.dock-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}
.dock-body > * { min-width: 0; }
@media (max-width: 980px) {
  .dock-body { grid-template-columns: 1fr; }
}

.dock-main {
  padding: 22px 28px 28px;
  overflow-y: auto;
  overflow-x: hidden;  /* contain horizontal overflow at the source */
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
}

.dock-section-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-weight: 500;
}

/* Sortie recap card — what just happened */
.sortie-recap {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(60, 184, 122, 0.06), rgba(60, 184, 122, 0.01));
  border: 1px solid rgba(60, 184, 122, 0.25);
  border-left: 2px solid var(--green);
}
.sortie-recap-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.sortie-recap-title {
  margin: 0 0 10px;
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--white); letter-spacing: 0.2px;
}
.sortie-recap-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-body); font-size: 13px;
}
/* CRITICAL: grid items default to min-width: auto, which respects content's
   intrinsic width and prevents flex-wrap children from shrinking. Setting
   min-width: 0 lets the value cell shrink to its container, which then lets
   the pill row wrap. Without this, cargo pills clip past the right edge. */
.sortie-recap-row > * {
  min-width: 0;
}
.sortie-recap-row:last-child { border-bottom: 0; }
.sortie-recap-label {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
}
.sortie-recap-value { color: var(--bright); }
.sortie-recap-value strong { color: var(--gold); font-weight: 700; }
#dock-recap-profit.is-negative { color: var(--red-bright); }
#dock-recap-profit.is-zero { color: var(--muted); }
.sortie-recap-value-pills { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
/* Allow pill text to wrap if a single pill is wider than its cell.
   Belt-and-suspenders against horizontal overflow at any viewport. */
.sortie-recap-value-pills .status-pill {
  max-width: 100%;
}

/* Station services strip — quick access to dock activities */
.dock-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.dock-service-tile {
  appearance: none; cursor: pointer;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  transition: 0.18s ease;
  position: relative;
  font-family: var(--font-body);
}
.dock-service-tile::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: transparent;
  transition: 0.18s ease;
}
.dock-service-tile:hover {
  border-color: rgba(74, 184, 212, 0.3);
  background: var(--panel-lit);
}
.dock-service-tile:hover::after { background: var(--cyan); }
.dock-service-tile-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.8px; text-transform: uppercase;
  /* Reserve room for the absolute-positioned badge (top-right corner)
     so longer eyebrows like "OFF-BOOKS · BROKERED" don't slide under
     the badge text. */
  padding-right: 76px;
}
.dock-service-tile-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
  padding-right: 76px;
}
.dock-service-tile-detail {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); margin-top: 2px;
}
.dock-service-tile.is-disabled {
  opacity: 0.4; cursor: not-allowed;
  pointer-events: none;
}
.dock-service-tile-badge {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 1px 6px;
  background: rgba(232, 184, 74, 0.06);
}

/* Ship swap section */
.ship-swap-list {
  display: flex; flex-direction: column; gap: 6px;
}
.ship-swap-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  transition: 0.15s;
}
.ship-swap-row.is-active {
  border-color: rgba(232, 184, 74, 0.4);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.04), rgba(232, 184, 74, 0.01));
}
.ship-swap-row.is-disabled { opacity: 0.5; }
.ship-swap-portrait {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background:
    radial-gradient(circle at center, rgba(74, 184, 212, 0.06), transparent),
    var(--void-mid);
}
.ship-swap-row.is-active .ship-swap-portrait {
  border-color: var(--gold-dim);
  background:
    radial-gradient(circle at center, rgba(232, 184, 74, 0.08), transparent),
    var(--void-mid);
}
.ship-swap-portrait svg { width: 100%; height: 100%; }
.ship-swap-info { min-width: 0; }
.ship-swap-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.ship-swap-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 2px;
}
.ship-swap-meta strong { color: var(--bright); font-weight: 400; }
.ship-swap-action {
  appearance: none; cursor: pointer;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
}
.ship-swap-action:hover { background: rgba(74, 184, 212, 0.08); border-color: var(--cyan); }
.ship-swap-action.is-active {
  background: rgba(232, 184, 74, 0.08);
  border-color: rgba(232, 184, 74, 0.4);
  color: var(--gold);
  cursor: default;
}

/* ─── Docked Ships — NPC ships at the current station ──────────
   Replaces the fleet-swap section at non-home stations. Reuses the
   ship-swap row layout for visual consistency but applies station
   accent colors so each station's docked traffic feels distinct.
   Hover to lift, click to open dialogue modal. */
.docked-ships-list {
  display: flex; flex-direction: column; gap: 6px;
}
.docked-ship-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: 0.18s;
}
.docked-ship-row:hover {
  background: var(--panel-lit);
  border-color: var(--station-accent-border, rgba(74, 184, 212, 0.4));
  transform: translateX(2px);
}
.docked-ship-row.is-leaving {
  opacity: 0.5; pointer-events: none;
  animation: docked-ship-depart 0.6s ease-out;
}
@keyframes docked-ship-depart {
  to { opacity: 0; transform: translateX(40px); }
}
.docked-ship-row.is-arriving {
  animation: docked-ship-arrive 0.5s ease-out;
}
@keyframes docked-ship-arrive {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.docked-ship-portrait {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--station-accent-border, rgba(74, 184, 212, 0.3));
  background:
    radial-gradient(circle at center, var(--station-accent-ghost, rgba(74, 184, 212, 0.06)), transparent),
    var(--void-mid);
}
.docked-ship-portrait svg { width: 100%; height: 100%; }
.docked-ship-info { min-width: 0; }
.docked-ship-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.docked-ship-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 2px;
}
.docked-ship-meta strong {
  color: var(--station-accent, var(--cyan));
  font-weight: 400;
}

/* Status + hail badges row beneath the meta line. Status reads
   countdown / arriving / departing; hail signals an interaction
   beyond plain dialogue. */
.docked-ship-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.docked-ship-status {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.docked-ship-status--arriving {
  color: rgba(150, 220, 170, 0.95);
  border-color: rgba(140, 200, 160, 0.35);
  background: rgba(80, 160, 100, 0.06);
}
.docked-ship-status--departing {
  color: rgba(232, 180, 100, 0.95);
  border-color: rgba(232, 184, 74, 0.4);
  background: rgba(232, 184, 74, 0.06);
}
.docked-ship-hail {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 2px 6px;
}
.docked-ship-hail--offer {
  color: var(--gold);
  background: rgba(232, 184, 74, 0.1);
  border: 1px solid rgba(232, 184, 74, 0.45);
  /* Gentle pulse to draw the eye — limited-time offer signal. */
  animation: docked-hail-pulse 2.4s ease-in-out infinite;
}
.docked-ship-hail--intel {
  color: rgba(168, 132, 224, 0.95);
  background: rgba(138, 106, 212, 0.08);
  border: 1px solid rgba(168, 132, 224, 0.4);
}
@keyframes docked-hail-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(232, 184, 74, 0); }
  50%      { box-shadow: 0 0 8px rgba(232, 184, 74, 0.4); }
}

/* Departing rows fade slightly so the eye reads them as "leaving" */
.docked-ship-row.is-departing {
  opacity: 0.7;
}
/* Arriving rows get a one-shot fade-in animation so the player
   notices a new ship has joined the bay this cycle. */
@keyframes docked-arriving-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.docked-ship-row.is-arriving {
  animation: docked-arriving-in 0.5s ease-out;
}

/* Trade-offer card — appears inline in the dialogue modal when a ship
   has a hailable offer. Styled like a structured side-card with a
   gold accent to read as "this is the actionable part". */
.docked-ship-offer {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(232, 184, 74, 0.04);
  border: 1px solid rgba(232, 184, 74, 0.3);
  border-left: 2px solid var(--gold);
}
.docked-ship-offer-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.docked-ship-offer-line {
  font-family: var(--font-body); font-size: 14px;
  color: var(--bright);
  margin-bottom: 4px; line-height: 1.5;
}
.docked-ship-offer-line strong { color: var(--gold); font-weight: 500; }
.docked-ship-offer-meta {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); line-height: 1.4;
}
.docked-ship-offer-meta strong { color: var(--cyan); font-weight: 400; }
.docked-ship-offer-actions {
  display: flex; gap: 8px;
  margin-top: 14px;
}
.docked-ship-accept-btn,
.docked-ship-decline-btn {
  appearance: none; cursor: pointer;
  flex: 1;
  padding: 10px 16px;
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s ease;
}
.docked-ship-accept-btn {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.25), rgba(232, 184, 74, 0.1));
  border: 1px solid rgba(232, 184, 74, 0.55);
  color: var(--gold);
}
.docked-ship-accept-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.4), rgba(232, 184, 74, 0.15));
  box-shadow: 0 0 12px rgba(232, 184, 74, 0.3);
}
.docked-ship-accept-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  border-color: rgba(212, 74, 74, 0.4);
  color: rgba(212, 74, 74, 0.7);
}
.docked-ship-decline-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--body);
}
.docked-ship-decline-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.3);
}
.docked-ship-talk-btn {
  appearance: none; cursor: pointer;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--station-accent-border, rgba(74, 184, 212, 0.3));
  color: var(--station-accent, var(--cyan));
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
}

/* Docked ship dialogue modal */
.docked-ship-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 1205;
  background: rgba(2, 2, 4, 0.85);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.docked-ship-modal.is-open { display: flex; }
.docked-ship-card {
  width: min(540px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 22px;
  background: linear-gradient(180deg, rgba(15, 19, 28, 0.99), rgba(8, 10, 16, 0.99));
  border: 1px solid var(--station-accent-border, rgba(74, 184, 212, 0.4));
  border-radius: 2px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
  animation: encounter-card-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.docked-ship-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--station-accent, var(--cyan));
  margin-bottom: 6px;
}
.docked-ship-title {
  margin: 0 0 4px;
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.4px;
}
.docked-ship-subtitle {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.5px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.docked-ship-body {
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.docked-ship-body p { margin: 0 0 10px; }
.docked-ship-body p:last-child { margin-bottom: 0; }
.docked-ship-close-btn {
  appearance: none; cursor: pointer;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--bright);
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
}
.docked-ship-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   Casino — Salvage Stakes (lawless stations)
   ═══════════════════════════════════════════════════════════════════
   Backroom press-your-luck game. Visual register: warm gold + sodium
   amber over deep void; feels like a smoke-stained dive. Container
   art is brutalist crates, opening with a crack-and-flash reveal. */

.dock-service-tile--casino {
  border-color: rgba(232, 184, 74, 0.35);
  background:
    linear-gradient(135deg, rgba(232, 184, 74, 0.04), rgba(212, 130, 60, 0.03)),
    rgba(13, 16, 24, 0.4);
}
.dock-service-tile--casino .dock-service-tile-title {
  color: var(--gold);
}
.dock-service-tile--casino .dock-service-tile-eyebrow {
  color: rgba(232, 184, 74, 0.8);
}

.casino-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 115;
  background:
    radial-gradient(ellipse at center top, rgba(212, 130, 60, 0.12), transparent 65%),
    rgba(2, 2, 4, 0.92);
  backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.casino-modal.is-open { display: flex; }
.casino-card {
  width: min(720px, 100%);
  max-height: 90vh;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.98), rgba(15, 12, 9, 0.99));
  border: 1px solid rgba(232, 184, 74, 0.35);
  border-top: 2px solid var(--gold);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Subtle warm vignette inside the card so it reads as "smoky room" */
  box-shadow:
    inset 0 60px 80px rgba(232, 130, 60, 0.04),
    0 30px 80px rgba(0, 0, 0, 0.6);
}

.casino-header {
  position: relative;
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(232, 184, 74, 0.15);
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.05), transparent);
}
.casino-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.casino-title {
  margin: 0;
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  color: var(--bright); letter-spacing: 1.5px;
  text-transform: uppercase;
}
.casino-subtitle {
  margin: 6px 0 0;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); line-height: 1.5;
  font-style: italic;
}
.casino-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  appearance: none; cursor: pointer;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s;
}
.casino-close-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--bright);
}

.casino-body {
  padding: 22px 26px 26px;
  overflow-y: auto;
  flex: 1;
}
.casino-phase {
  display: block;
}
.casino-phase-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.casino-phase-text {
  margin: 0 0 18px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.5;
}

/* ─── Phase 1: bet selection ─── */
.casino-bet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.casino-bet-btn {
  appearance: none; cursor: pointer;
  padding: 18px 14px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.08), rgba(232, 184, 74, 0.02));
  border: 1px solid rgba(232, 184, 74, 0.35);
  color: var(--gold);
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: 1px;
  transition: 0.15s ease;
}
.casino-bet-btn small {
  font-size: 12px;
  color: var(--gold-dim, rgba(232, 184, 74, 0.7));
  margin-left: 2px;
}
.casino-bet-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.18), rgba(232, 184, 74, 0.05));
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(232, 184, 74, 0.25);
}
.casino-bet-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  border-color: rgba(212, 74, 74, 0.3);
}
.casino-bet-meta {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.casino-bet-meta strong {
  color: var(--cyan); font-weight: 400;
}

/* ─── Phase 2: active game ─── */
.casino-pot {
  text-align: center;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(232, 184, 74, 0.2);
  margin-bottom: 18px;
}
.casino-pot-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.casino-pot-value {
  font-family: var(--font-display); font-size: 36px; font-weight: 500;
  color: var(--gold); letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.casino-pot-meta {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted);
}

.casino-containers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.casino-container {
  appearance: none; cursor: pointer;
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, rgba(40, 36, 30, 0.9), rgba(25, 22, 18, 0.95));
  border: 1px solid rgba(232, 184, 74, 0.3);
  border-top: 2px solid rgba(232, 184, 74, 0.5);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  font-family: var(--font-display);
  color: rgba(232, 184, 74, 0.5);
  letter-spacing: 1.5px;
  transition: 0.18s ease;
  overflow: hidden;
}
.casino-container::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px dashed rgba(232, 184, 74, 0.15);
  pointer-events: none;
}
.casino-container-icon {
  font-size: 26px;
  line-height: 1;
}
.casino-container-num {
  font-size: 11px;
  letter-spacing: 1.8px;
}
.casino-container:hover:not(:disabled):not(.is-revealed) {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(60, 50, 36, 0.95), rgba(40, 32, 22, 0.98));
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 184, 74, 0.2);
}
.casino-container:disabled {
  cursor: not-allowed;
}
.casino-container.is-revealed {
  cursor: default;
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(8, 8, 12, 0.7);
}
.casino-container.is-revealed.is-multiplier {
  border-color: rgba(60, 184, 122, 0.45);
  background: linear-gradient(180deg, rgba(60, 184, 122, 0.12), rgba(20, 60, 40, 0.4));
  color: var(--green, #6ad896);
  /* Brief flash animation on reveal */
  animation: casino-reveal-win 0.5s ease-out;
}
.casino-container.is-revealed.is-bust {
  border-color: rgba(212, 74, 74, 0.6);
  background: linear-gradient(180deg, rgba(212, 74, 74, 0.18), rgba(80, 20, 20, 0.5));
  color: rgba(255, 130, 130, 1);
  animation: casino-reveal-bust 0.5s ease-out;
}
@keyframes casino-reveal-win {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(60, 184, 122, 0); }
  35%  { transform: scale(1.06); box-shadow: 0 0 24px rgba(60, 184, 122, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(60, 184, 122, 0.2); }
}
@keyframes casino-reveal-bust {
  0%   { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 rgba(212, 74, 74, 0); }
  20%  { transform: scale(1.08) rotate(-1deg); box-shadow: 0 0 30px rgba(212, 74, 74, 0.6); }
  40%  { transform: scale(1.04) rotate(1deg); }
  60%  { transform: scale(1.06) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 0 14px rgba(212, 74, 74, 0.25); }
}
.casino-container-reveal-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}

.casino-actions {
  margin-top: 6px;
}
.casino-prompt {
  text-align: center;
  font-family: var(--font-body); font-size: 13px;
  color: var(--body); line-height: 1.5;
  font-style: italic;
  margin-bottom: 14px;
}
.casino-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.casino-action-btn {
  appearance: none; cursor: pointer;
  padding: 13px 18px;
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.8px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s ease;
}
.casino-action-btn--stop {
  background: linear-gradient(135deg, rgba(60, 184, 122, 0.2), rgba(60, 184, 122, 0.06));
  border: 1px solid rgba(60, 184, 122, 0.5);
  color: var(--green);
}
.casino-action-btn--stop:hover {
  background: linear-gradient(135deg, rgba(60, 184, 122, 0.32), rgba(60, 184, 122, 0.1));
  box-shadow: 0 0 14px rgba(60, 184, 122, 0.3);
}
.casino-action-btn--push {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.22), rgba(232, 184, 74, 0.07));
  border: 1px solid rgba(232, 184, 74, 0.55);
  color: var(--gold);
}
.casino-action-btn--push:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.36), rgba(232, 184, 74, 0.12));
  box-shadow: 0 0 14px rgba(232, 184, 74, 0.3);
}

/* ─── Phase 3: result ─── */
.casino-phase--result { text-align: center; padding: 14px 0; }
.casino-result-stamp {
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.casino-result-stamp.is-bust {
  color: rgba(212, 74, 74, 1);
}
.casino-result-amount {
  font-family: var(--font-display); font-size: 56px; font-weight: 500;
  color: var(--gold); letter-spacing: -1.5px;
  line-height: 1; margin-bottom: 14px;
}
.casino-result-amount.is-bust {
  color: rgba(255, 130, 130, 1);
}
.casino-result-message {
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.5;
  font-style: italic;
  margin-bottom: 24px;
  max-width: 460px; margin-left: auto; margin-right: auto;
}
.casino-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}

/* Mobile — pack the bet grid into a single column on phones for thumb
   reachability, and tighten container sizes. */
@media (max-width: 600px) {
  .casino-bet-grid {
    grid-template-columns: 1fr;
  }
  .casino-containers {
    gap: 6px;
  }
  .casino-container-num {
    font-size: 10px;
  }
  .casino-container-icon {
    font-size: 22px;
  }
  .casino-action-buttons {
    grid-template-columns: 1fr;
  }
  .casino-result-amount { font-size: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Project Celebration & Picker modal
   ═══════════════════════════════════════════════════════════════════
   Two phases inside one modal: celebration (animated reveal of the
   completed project + rewards) → picker (3 cards to choose next).
   Heavy animation on phase 1 because completion is a big-deal moment;
   phase 2 is calmer and decision-oriented. */
.project-celebration-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 200;
  background: radial-gradient(ellipse at center, rgba(74, 184, 212, 0.06), rgba(0, 0, 0, 0.94) 70%);
  backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.project-celebration-modal.is-open { display: flex; }

/* ─── Mystery Celebration — auto-fires on 7th fragment. Same modal
   weight as project completion but purple-themed. The animation is
   intentionally short (~600ms entrance) so it doesn't block the player
   for long; the body text is brief and the buttons offer two paths
   (continue back to play or open the reveal directly). */
.mystery-celebration-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 210;  /* above mystery-board-overlay so reveal can stack */
  background: radial-gradient(ellipse at center, rgba(184, 153, 232, 0.12), rgba(0, 0, 0, 0.95) 70%);
  backdrop-filter: blur(16px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.mystery-celebration-modal.is-open {
  display: flex;
  animation: mystery-celebration-fade 0.4s ease-out;
}
@keyframes mystery-celebration-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mystery-celebration-card {
  width: min(560px, 96vw);
  padding: 36px 36px 28px;
  background: linear-gradient(180deg, rgba(22, 18, 32, 0.99), rgba(12, 10, 20, 0.99));
  border: 1px solid rgba(184, 153, 232, 0.5);
  box-shadow:
    0 0 0 1px rgba(184, 153, 232, 0.1),
    0 0 100px rgba(184, 153, 232, 0.25),
    0 30px 80px rgba(0, 0, 0, 0.85);
  position: relative;
  text-align: center;
  animation: mystery-celebration-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mystery-celebration-rise {
  from { transform: translateY(24px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
/* Soft purple glow behind the card content — purely decorative */
.mystery-celebration-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, rgba(184, 153, 232, 0.15), transparent 60%);
  pointer-events: none;
  animation: mystery-celebration-pulse 3s ease-in-out infinite;
  z-index: -1;
}
@keyframes mystery-celebration-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}
.mystery-celebration-stamp {
  display: inline-block;
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(200, 175, 240, 1);
  padding: 6px 16px;
  border: 1px solid rgba(184, 153, 232, 0.7);
  background: rgba(184, 153, 232, 0.08);
  margin-bottom: 16px;
  animation: mystery-celebration-stamp-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.2s backwards;
}
@keyframes mystery-celebration-stamp-in {
  from { transform: scale(0.5); opacity: 0; letter-spacing: 8px; }
  to   { transform: scale(1);   opacity: 1; letter-spacing: 4px; }
}
.mystery-celebration-title {
  font-family: var(--font-display); font-size: 32px;
  letter-spacing: 1px;
  color: var(--bright);
  margin: 0 0 8px 0;
  font-weight: 500;
  animation: mystery-celebration-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.4s backwards;
}
.mystery-celebration-track {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(184, 153, 232, 0.85);
  margin-bottom: 20px;
  animation: mystery-celebration-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.6s backwards;
}
.mystery-celebration-body {
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 28px 0;
  font-style: italic;
  animation: mystery-celebration-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.8s backwards;
}
.mystery-celebration-actions {
  display: flex; gap: 12px; justify-content: center;
  animation: mystery-celebration-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 1.0s backwards;
}
.mystery-celebration-dismiss,
.mystery-celebration-read {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.mystery-celebration-dismiss {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--body);
}
.mystery-celebration-dismiss:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
}
.mystery-celebration-read {
  background: linear-gradient(135deg, rgba(184, 153, 232, 0.18), rgba(184, 153, 232, 0.06));
  border: 1px solid rgba(184, 153, 232, 0.7);
  color: rgba(220, 200, 250, 1);
}
.mystery-celebration-read:hover {
  background: linear-gradient(135deg, rgba(184, 153, 232, 0.30), rgba(184, 153, 232, 0.12));
  border-color: rgba(220, 200, 250, 0.9);
  box-shadow: 0 0 20px rgba(184, 153, 232, 0.3);
}

/* ─── Mystery Board overlay — fragment chronicle for Heliocrest arc ─── */
.mystery-board-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 200;
  background: radial-gradient(ellipse at center, rgba(184, 153, 232, 0.08), rgba(0, 0, 0, 0.94) 70%);
  backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.mystery-board-overlay.is-open { display: flex; }
.mystery-board-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 36px 40px 28px;
  background: linear-gradient(180deg, rgba(18, 16, 28, 0.99), rgba(10, 8, 18, 0.99));
  border: 1px solid rgba(184, 153, 232, 0.4);
  box-shadow:
    0 0 0 1px rgba(184, 153, 232, 0.1),
    0 0 80px rgba(184, 153, 232, 0.15),
    0 30px 80px rgba(0, 0, 0, 0.85);
  position: relative;
}
.mystery-board-card::before,
.mystery-board-card::after {
  content: ''; position: absolute;
  width: 32px; height: 32px;
  border: 2px solid rgba(184, 153, 232, 0.7);
  pointer-events: none;
}
.mystery-board-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.mystery-board-card::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.mystery-board-header { text-align: center; margin-bottom: 24px; }

/* Mystery switcher tabs — appear above the eyebrow when more than one
   mystery exists. Active tab is highlighted purple, others muted.
   Hidden entirely when there's only one mystery. Layout: horizontal
   strip of pills, scrollable on narrow screens. */
.mystery-board-switcher {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mystery-board-switcher-tab {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 14px;
  background: rgba(13, 14, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.mystery-board-switcher-tab:hover {
  background: rgba(184, 153, 232, 0.06);
  border-color: rgba(184, 153, 232, 0.3);
  color: var(--body);
}
.mystery-board-switcher-tab.is-active {
  background: rgba(184, 153, 232, 0.12);
  border-color: rgba(184, 153, 232, 0.6);
  color: rgba(220, 200, 250, 1);
}
.mystery-board-switcher-tab.is-solved::after {
  content: '✓';
  color: var(--gold);
  margin-left: 4px;
  font-size: 11px;
}
/* is-storied overrides is-solved when both epilogues have been read
   for a mystery that has them. Diamond marker indicates the
   investigation is fully closed — story complete, all chapters seen.
   Slight glow + brighter gold to distinguish from the bare ✓. */
.mystery-board-switcher-tab.is-storied::after {
  content: '◆';
  color: rgba(255, 220, 130, 1);
  text-shadow: 0 0 8px rgba(232, 184, 74, 0.5);
  margin-left: 4px;
  font-size: 11px;
}
.mystery-board-switcher-progress {
  font-size: 9px;
  opacity: 0.75;
}
.mystery-board-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(184, 153, 232, 0.85);
  margin-bottom: 6px;
}
.mystery-board-title {
  font-family: var(--font-display); font-size: 26px;
  letter-spacing: 1px;
  color: var(--bright);
  margin: 0 0 6px 0;
  font-weight: 500;
}
.mystery-board-subtitle {
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px 0;
  font-style: italic;
}
.mystery-board-progress {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(184, 153, 232, 0.85);
}

.mystery-board-fragments {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 24px;
}
.mystery-fragment {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 14, 22, 0.6);
  border-radius: 2px;
}
.mystery-fragment.is-found {
  border-left-color: rgba(184, 153, 232, 0.7);
  background: linear-gradient(90deg, rgba(184, 153, 232, 0.05), rgba(13, 14, 22, 0.4));
}
.mystery-fragment-header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.mystery-fragment-num {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
  min-width: 22px;
}
.mystery-fragment.is-found .mystery-fragment-num {
  color: rgba(184, 153, 232, 0.95);
}
.mystery-fragment-title {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--body);
  margin: 0;
  font-weight: 500;
}
.mystery-fragment.is-found .mystery-fragment-title {
  color: var(--bright);
}
.mystery-fragment-cycle {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(184, 153, 232, 0.6);
  margin-left: auto;
}
.mystery-fragment-text {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.6;
  margin: 0;
}
.mystery-fragment-hint {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); line-height: 1.5;
  font-style: italic;
  margin: 0;
}

.mystery-board-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mystery-board-close,
.mystery-board-reveal {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--body);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mystery-board-close:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.03);
}
.mystery-board-reveal {
  border-color: rgba(232, 184, 74, 0.6);
  color: var(--gold);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.08), rgba(232, 184, 74, 0.02));
}
.mystery-board-reveal:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.15), rgba(232, 184, 74, 0.05));
  border-color: rgba(232, 184, 74, 0.9);
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.25);
}

/* Reveal phase — the full payoff scene */
.mystery-reveal-stamp {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 12px;
  padding: 4px 12px;
  display: inline-block;
  border: 1px solid var(--gold);
  background: rgba(232, 184, 74, 0.05);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.mystery-reveal-title {
  font-family: var(--font-display); font-size: 30px;
  text-align: center;
  letter-spacing: 1px;
  color: var(--bright);
  margin: 0 0 24px 0;
  font-weight: 500;
}
.mystery-reveal-body p {
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.7;
  color: var(--body);
  margin: 0 0 16px 0;
}
.mystery-reveal-body strong {
  color: rgba(184, 153, 232, 0.95);
}
.mystery-reveal-coda {
  border-left: 2px solid rgba(184, 153, 232, 0.5);
  padding-left: 14px !important;
  margin-top: 22px !important;
  color: var(--muted) !important;
}

/* Investigation Outcomes — appended to the reveal modal body, shows
   what unlocked when the mystery solved. Gold-accented to read as a
   beat, distinct from the muted purple coda paragraphs. Renders a
   bulleted list of human-readable consequences. */
.mystery-reveal-outcomes {
  margin-top: 28px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.06), rgba(232, 184, 74, 0.01));
  border: 1px solid rgba(232, 184, 74, 0.25);
  border-left: 2px solid rgba(232, 184, 74, 0.7);
  border-radius: 2px;
}
.mystery-reveal-outcomes-eyebrow {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.mystery-reveal-outcomes-list {
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.mystery-reveal-outcomes-list li {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 6px;
  position: relative;
  padding-left: 14px;
}
.mystery-reveal-outcomes-list li::before {
  content: '◆';
  position: absolute;
  left: -4px;
  top: 0;
  color: rgba(232, 184, 74, 0.65);
  font-size: 9px;
}
.mystery-reveal-outcomes-list li:last-child { margin-bottom: 0; }
.mystery-reveal-outcomes-list strong {
  color: rgba(232, 184, 74, 0.95);
}

/* Mystery epilogue divider — separator that introduces post-reveal
   content unlocked by completing follow-up arcs (Listener offer
   accepted, etc.). Visual treatment is heavier than coda paragraphs
   because the epilogue is its own beat: a major revelation that
   extends the original mystery. Gold left-rule + bracketed eyebrow. */
.mystery-reveal-epilogue-divider {
  display: block;
  margin-top: 32px;
  margin-bottom: 18px;
  padding: 8px 0 10px 0;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  border-top: 1px solid rgba(232, 184, 74, 0.5);
  border-bottom: 1px solid rgba(232, 184, 74, 0.5);
  position: relative;
}
.mystery-reveal-epilogue-divider::before {
  content: '◆';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(18, 22, 32, 1);
  padding: 0 14px;
  color: rgba(232, 184, 74, 0.9);
  font-size: 12px;
}

.project-celebration-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  /* Hide overflow rather than auto-scroll. The card sizes naturally
     to its content; the scrollbar that was showing was cosmetic noise
     because max-height + overflow:auto renders the gutter even when
     no scrolling is required. If content ever does exceed viewport
     on small screens, the modal backdrop will let it spill — better
     than a permanent scroll affordance on a celebration moment. */
  overflow: hidden;
  padding: 36px 40px 28px;
  background: linear-gradient(180deg, rgba(18, 22, 32, 0.99), rgba(10, 12, 18, 0.99));
  border: 1px solid rgba(232, 184, 74, 0.5);
  box-shadow:
    0 0 0 1px rgba(232, 184, 74, 0.1),
    0 0 80px rgba(232, 184, 74, 0.15),
    0 30px 80px rgba(0, 0, 0, 0.85);
  position: relative;
}
/* Gold corner accents — subtle "Tier"-style framing */
.project-celebration-card::before,
.project-celebration-card::after {
  content: ''; position: absolute;
  width: 32px; height: 32px;
  border: 2px solid var(--gold);
  pointer-events: none;
}
.project-celebration-card::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.project-celebration-card::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}

/* Phase 1: Celebration */
.project-celebration-stamp {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 6px; font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 14px;
  animation: celebration-stamp-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes celebration-stamp-in {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.95); letter-spacing: 12px; }
  60%  { letter-spacing: 4px; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 6px; }
}
.project-celebration-title {
  margin: 0;
  font-family: var(--font-display); font-size: 36px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.5px;
  text-align: center;
  animation: celebration-title-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
@keyframes celebration-title-in {
  0%   { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.project-celebration-track {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--cyan);
  text-align: center;
  margin: 6px 0 22px;
  animation: celebration-fade-in 0.5s ease-out 0.45s both;
}
.project-celebration-message {
  font-family: var(--font-body); font-size: 15px;
  color: var(--body); line-height: 1.6;
  text-align: center;
  margin: 0 0 24px;
  padding: 0 24px;
  font-style: italic;
  animation: celebration-fade-in 0.6s ease-out 0.7s both;
}
@keyframes celebration-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reward chips — credits, building, passive, tier bump */
.project-celebration-rewards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.07), rgba(232, 184, 74, 0.02));
  border-left: 3px solid var(--gold);
}
.project-celebration-reward {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  font-family: var(--font-display); font-size: 13px;
  color: var(--bright);
  letter-spacing: 0.3px;
  opacity: 0;
  animation: celebration-reward-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.project-celebration-reward:nth-child(1) { animation-delay: 1.1s; }
.project-celebration-reward:nth-child(2) { animation-delay: 1.35s; }
.project-celebration-reward:nth-child(3) { animation-delay: 1.6s; }
.project-celebration-reward:nth-child(4) { animation-delay: 1.85s; }
@keyframes celebration-reward-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.project-celebration-reward-icon {
  font-family: var(--font-data); font-size: 11px;
  text-align: center;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  letter-spacing: 0.5px;
}
.project-celebration-reward-text {
  color: var(--bright);
  font-weight: 400;
  font-size: 13px;
}
.project-celebration-reward-text strong { color: var(--gold); font-weight: 500; }
.project-celebration-reward-meta {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase;
}
.project-celebration-continue {
  appearance: none; cursor: pointer;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.18), rgba(232, 184, 74, 0.08));
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; font-weight: 500;
  transition: 0.18s;
  opacity: 0;
  animation: celebration-fade-in 0.5s ease-out 2.2s both;
}
.project-celebration-continue:hover {
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.28), rgba(232, 184, 74, 0.14));
  color: var(--bright);
  letter-spacing: 4px;
}

/* Phase 2: Project Picker */
.project-picker-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}
.project-picker-title {
  margin: 0 0 6px;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.5px;
}
.project-picker-subtitle {
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted); line-height: 1.5;
  margin: 0 0 22px;
}

.project-picker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (min-width: 720px) {
  .project-picker-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.project-picker-card {
  cursor: pointer;
  text-align: left;
  appearance: none;
  display: flex; flex-direction: column;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: 0.18s;
  font-family: inherit;
  color: inherit;
}
.project-picker-card:hover {
  background: linear-gradient(180deg, rgba(74, 184, 212, 0.08), rgba(74, 184, 212, 0.02));
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(74, 184, 212, 0.18);
}
.project-picker-card-track {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.project-picker-card-track--invested { color: var(--cyan); }
.project-picker-card-track--wildcard { color: var(--gold); }
.project-picker-card-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.4px;
  margin-bottom: 12px;
}
.project-picker-card-section {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.project-picker-card-needs {
  font-family: var(--font-body); font-size: 11px;
  color: var(--body); line-height: 1.5;
  margin-bottom: 10px;
}
.project-picker-card-reward {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); line-height: 1.5;
}
.project-picker-card-reward strong { color: var(--gold); }

.project-picker-footer {
  display: flex; justify-content: center;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.project-picker-skip {
  appearance: none; cursor: pointer;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.15s;
}
.project-picker-skip:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--body);
}

/* Run aggregate side panel */
.dock-aside {
  border-left: 1px solid rgba(255,255,255,0.06);
  background: rgba(13, 16, 24, 0.5);
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto;
}
.run-aggregate-block {
  display: flex; flex-direction: column; gap: 8px;
}
.run-aggregate-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 2.5px; text-transform: uppercase;
}
.run-aggregate-stat {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  color: var(--gold); letter-spacing: -0.5px;
  line-height: 1;
}
.run-aggregate-stat small {
  font-size: 14px; color: var(--gold-dim); margin-left: 4px;
}
.run-aggregate-stat.is-negative { color: var(--red-bright); }
.run-aggregate-stat.is-negative small { color: rgba(255, 77, 109, 0.65); }
.run-aggregate-stat.is-zero { color: var(--muted); }
.run-aggregate-stat.is-zero small { color: var(--muted); }
.run-aggregate-substat {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body);
}

/* Active pilot perk pill on the dock aside — surfaces the tactile
   gameplay edge the current pilot brings (combat damage reduction,
   fuel efficiency, etc). Cyan accent to read as "your active edge"
   without competing with the gold profit stats. */
.dock-pilot-perk {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(94, 217, 217, 0.06);
  border: 1px solid rgba(94, 217, 217, 0.25);
  border-radius: 2px;
  display: flex; flex-direction: column; gap: 4px;
}
.dock-pilot-perk-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan);
}
.dock-pilot-perk-desc {
  font-family: var(--font-body); font-size: 11px;
  color: rgba(180, 220, 220, 0.85);
  line-height: 1.4;
}

.run-leg-list {
  display: flex; flex-direction: column; gap: 4px;
}
.run-leg {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-family: var(--font-body); font-size: 12px;
  color: var(--bright);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.run-leg:last-child { border-bottom: 0; }
.run-leg-num {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px;
  width: 28px;
}
.run-leg-route {
  color: var(--bright);
}
.run-leg-route .leg-current { color: var(--cyan); }
.run-leg-profit {
  font-family: var(--font-data); font-size: 11px;
  color: var(--green); letter-spacing: 0.5px;
  white-space: nowrap;
}
.run-leg-profit.is-positive { color: var(--green); }
.run-leg-profit.is-negative { color: var(--red); }
.run-leg-profit.is-zero { color: var(--muted); }

/* Action footer — sticky to viewport bottom for the dock screen,
   giving the run-end page a game-shell feel where the action bar
   is always reachable without scrolling. */
.dock-actions {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px 32px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10, 13, 20, 0.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 12px;
}
.dock-actions-meta {
  flex: 1;
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
}
.dock-actions-meta strong { color: var(--cyan); font-weight: 400; }

.dock-action-secondary {
  appearance: none; cursor: pointer;
  padding: 12px 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--body);
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.8px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
  display: inline-flex; align-items: center; gap: 12px;
}
.dock-action-secondary small {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px; font-weight: 400;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 12px;
}
.dock-action-secondary:hover {
  border-color: rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.04);
}
.dock-action-secondary:hover small {
  color: var(--cyan-dim);
  border-left-color: rgba(74, 184, 212, 0.3);
}
.dock-action-end-run {
  appearance: none; cursor: pointer;
  padding: 12px 22px;
  background: rgba(232, 184, 74, 0.05);
  border: 1px solid rgba(232, 184, 74, 0.3);
  color: var(--gold);
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600;
  transition: 0.15s;
}
.dock-action-end-run:hover {
  background: rgba(232, 184, 74, 0.12);
  border-color: var(--gold);
}
.dock-action-resume {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.18), rgba(74, 184, 212, 0.06));
  border: 1px solid rgba(74, 184, 212, 0.5);
  color: var(--cyan);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.15s ease;
}
.dock-action-resume small {
  font-family: var(--font-data); font-size: 10px;
  color: var(--cyan-dim); letter-spacing: 1px; font-weight: 400;
  border-left: 1px solid rgba(74, 184, 212, 0.3);
  padding-left: 12px;
}
.dock-action-resume:hover {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.28), rgba(74, 184, 212, 0.1));
  box-shadow: 0 0 18px rgba(74, 184, 212, 0.18);
}

/* ─── Toast notifications ──────────────────────────────────────────── */
.toast-container {
  position: fixed; top: 70px; right: 20px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}

/* ─── Personal message pill — persistent chrome ────────────────────────
   Sits in the bottom-right of the viewport. Visible across all screens
   via fixed positioning. Pulses gently while there's an active unresolved
   message. Click opens the personal-msg-modal showing the oldest. */
.personal-msg-pill {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 20px;
  z-index: 9998;  /* below toasts (9999), above most chrome */
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  min-width: 240px;
  max-width: 90vw;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.18), rgba(232, 184, 74, 0.06));
  border: 1px solid rgba(232, 184, 74, 0.5);
  border-left: 3px solid var(--gold);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--bright);
  font-family: var(--font-body);
  text-align: left;
  transition: 0.2s ease;
  /* Slow pulse to draw the eye without being aggressive — a "you have
     mail" signal that doesn't demand immediate attention. */
  animation: personal-msg-pulse 3.2s ease-in-out infinite;
}
.personal-msg-pill:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.3), rgba(232, 184, 74, 0.1));
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.35);
}
@keyframes personal-msg-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(232, 184, 74, 0); }
  50%      { box-shadow: 0 0 14px rgba(232, 184, 74, 0.4); }
}
.personal-msg-pill-icon {
  font-size: 22px; line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
  /* Slight rotation animation so the icon feels "transmitting" */
  animation: personal-msg-icon-spin 4s linear infinite;
}
@keyframes personal-msg-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.personal-msg-pill-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.personal-msg-pill-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--gold);
}
.personal-msg-pill-headline {
  font-family: var(--font-body); font-size: 12px;
  color: var(--bright);
  /* Truncate long headlines with ellipsis so the pill doesn't blow out */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.personal-msg-pill-count {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  background: var(--gold);
  color: rgba(0, 0, 0, 0.85);
  border-radius: 99px;
  font-weight: 600;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .personal-msg-pill {
    /* Tighten on phones — leave room for thumb */
    min-width: 0;
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 12px;
    padding: 8px 12px;
  }
  .personal-msg-pill-headline {
    max-width: 50vw;
  }
}

/* ─── Personal message modal ─────────────────────────────────────────
   Same backdrop pattern as docked-ship-modal. Renders one message at a
   time with kind-specific action buttons. */
.personal-msg-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 113;
  background: rgba(2, 2, 4, 0.85);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 20px;
}
.personal-msg-modal.is-open { display: flex; }
.personal-msg-card {
  width: min(520px, 100%);
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.98), rgba(10, 12, 20, 0.99));
  border: 1px solid rgba(232, 184, 74, 0.4);
  border-left: 3px solid var(--gold);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.personal-msg-header {
  position: relative;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.personal-msg-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.personal-msg-title {
  margin: 0;
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.personal-msg-subtitle {
  margin-top: 4px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
}
.personal-msg-close {
  position: absolute;
  top: 12px; right: 12px;
  appearance: none; cursor: pointer;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s;
}
.personal-msg-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--bright);
}
.personal-msg-body {
  padding: 18px 22px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--body); line-height: 1.6;
  overflow-y: auto;
}
.personal-msg-body p { margin: 0 0 10px; }
.personal-msg-body p:last-child { margin-bottom: 0; }
.personal-msg-body strong { color: var(--gold); font-weight: 500; }
.personal-msg-body em {
  color: var(--cyan); font-style: italic;
}
.personal-msg-footer {
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; gap: 12px;
}
.personal-msg-expiry {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.personal-msg-expiry.is-urgent { color: var(--red); }
.personal-msg-actions {
  display: flex; gap: 8px;
}
.personal-msg-action-btn {
  appearance: none; cursor: pointer;
  flex: 1;
  padding: 11px 16px;
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s ease;
}
.personal-msg-action-btn--accept {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.25), rgba(232, 184, 74, 0.1));
  border: 1px solid rgba(232, 184, 74, 0.55);
  color: var(--gold);
}
.personal-msg-action-btn--accept:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.4), rgba(232, 184, 74, 0.15));
  box-shadow: 0 0 12px rgba(232, 184, 74, 0.3);
}
.personal-msg-action-btn--accept:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  border-color: rgba(212, 74, 74, 0.4);
  color: rgba(212, 74, 74, 0.7);
}
.personal-msg-action-btn--decline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--body);
}
.personal-msg-action-btn--decline:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.3);
}
.personal-msg-action-btn--ack {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.2), rgba(74, 184, 212, 0.08));
  border: 1px solid rgba(74, 184, 212, 0.5);
  color: var(--cyan);
}
.personal-msg-action-btn--ack:hover {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.32), rgba(74, 184, 212, 0.12));
  box-shadow: 0 0 12px rgba(74, 184, 212, 0.3);
}
.toast {
  padding: 10px 14px;
  background: rgba(10, 13, 20, 0.95);
  border: 1px solid var(--cyan-dim);
  border-left: 2px solid var(--cyan);
  backdrop-filter: blur(10px);
  font-family: var(--font-body); font-size: 13px;
  color: var(--bright);
  min-width: 240px;
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1), toast-out 0.3s ease 2.7s forwards;
}
.toast--gold { border-left-color: var(--gold); border-color: rgba(232, 184, 74, 0.4); }
.toast--green { border-left-color: var(--green); border-color: rgba(60, 184, 122, 0.4); }
.toast strong { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cyan); margin-bottom: 2px; }
.toast--gold strong { color: var(--gold); }
.toast--green strong { color: var(--green); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateX(20px); opacity: 0; }
}

/* Responsive */
@media (max-width: 980px) {
  .title-shell { grid-template-columns: 1fr; gap: 40px; padding: 48px 32px; }
  .title-wordmark { font-size: 56px; }
  .menu-identity { grid-template-columns: 1fr; }

  /* Mobile fix #2: Compact Company menu — horizontal scrollable strip
     instead of vertical list. The 9-tab vertical column was eating
     too much screen real estate on phones. */
  .menu-tabs {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Hide the system scrollbar — it looks like a default OS element
       against the cyberpunk styling and isn't needed: tab snapping +
       drag is enough to navigate. The scroll itself still works. */
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .menu-tabs::-webkit-scrollbar {
    display: none;
  }
  .menu-tab-btn {
    scroll-snap-align: start;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 1.6px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
  }

  /* Mobile fix #1: Comms page — inbox and thread become separate
     views so messages do not fight the contact rail for width. */
  .menu-tab-panel[data-dash-panel="comms"].is-active {
    overflow: visible;
  }
  .comms-shell {
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .comms-shell:not(.is-reading) .comms-thread {
    display: none;
  }
  .comms-shell.is-reading .comms-rail {
    display: none;
  }
  .comms-shell.is-reading .comms-thread {
    display: flex;
  }
  .comms-rail,
  .comms-thread {
    max-height: none;
    min-height: 0;
  }
  .comms-rail {
    padding: 10px;
  }
  .comms-thread {
    min-height: min(68vh, 640px);
  }
  .comms-thread-header {
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .comms-thread-inbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .comms-thread-header > div:not(.comms-thread-meta) {
    min-width: 0;
    flex: 1 1 180px;
  }
  .comms-thread-meta {
    margin-left: auto;
    flex: 0 0 auto;
  }
  .comms-thread-messages {
    padding: 12px 14px;
  }
  .comms-message-header {
    flex-direction: column;
  }
  .comms-mystery-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .comms-mystery-cta-btn {
    width: 100%;
  }

  /* Mobile fix #3: Fleet roster card — the 4-column grid (portrait |
     info | condition pill | button) was squeezing the info column,
     so "Tin Orchid" wrapped under the CONDITION pill. Stack the
     condition pill and action button below the info on mobile. */
  .fleet-row {
    grid-template-columns: 56px 1fr;
    gap: 12px 12px;
  }
  .fleet-row-portrait {
    width: 56px; height: 56px;
  }
  .fleet-row-condition {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    margin-top: 4px;
  }
  .fleet-row [data-fleet-toggle],
  .fleet-row .contract-entry-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Mobile fix #4: Dock screen — sortie summary cargo strip clipping
     off the right edge. The real culprit: pills like "EM 1× ENCRYPTED
     MANIFEST" are intrinsically wider than the value cell on narrow
     viewports, forcing the row (and thus the card) past the viewport
     edge. Fix: stack the row vertically and let pill text wrap. */

  /* HARD MOBILE OVERFLOW CONTAINMENT — every dock-screen container
     must respect viewport width. Reduce padding aggressively so the
     usable content area is wider; force min-width: 0 so flex/grid
     children don't push parents past viewport. */
  [data-screen="dock"] .dock-shell,
  [data-screen="dock"] .dock-body,
  [data-screen="dock"] .dock-main,
  [data-screen="dock"] .dock-aside {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  /* MOBILE SCROLL FIX — desktop uses inner-scroll panels (dock-main +
     dock-aside each scroll independently). On mobile this breaks: the
     two panels stack as grid rows, dock-body's overflow:hidden clips
     the bottom panel, and the dock-actions footer drifts off-screen.
     Mobile fix: let the document scroll the whole thing, panels grow
     to content height, footer becomes sticky so action buttons are
     always reachable. */
  [data-screen="dock"] .dock-shell {
    /* Don't constrain shell to flex:1 on mobile — grow to content
       so document scroll works. */
    min-height: 100%;
    height: auto;
    /* Stop using grid 1fr — let rows size naturally. */
    grid-template-rows: auto auto auto;
  }
  [data-screen="dock"] .dock-body {
    overflow: visible;
    /* Single column already in the 980px rule below — keep that. */
  }
  [data-screen="dock"] .dock-main {
    overflow: visible;
    /* Without internal scroll, padding can be a bit looser. */
    padding: 16px 12px 20px;
  }
  [data-screen="dock"] .dock-aside {
    overflow: visible;
    padding: 16px 12px;
  }
  /* Sticky action footer — always visible at viewport bottom while
     scrolling the dock content. Backdrop-blur softens the content
     bleeding through behind the buttons. */
  [data-screen="dock"] .dock-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 13, 20, 0.85), rgba(10, 13, 20, 0.98));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    /* Respect iOS home indicator safe-area. */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  [data-screen="dock"] .dock-identity {
    padding: 16px 12px;
    gap: 12px;
    grid-template-columns: 1fr;  /* stack identity info + launch button */
  }
  [data-screen="dock"] .dock-identity-info {
    /* allow the long station name to wrap rather than push the row wider */
    flex-wrap: wrap;
  }
  [data-screen="dock"] .dock-identity-name {
    word-break: break-word;
  }
  [data-screen="dock"] .sortie-recap {
    margin: 0;  /* remove the desktop horizontal margins; padding inside the card is enough */
    padding: 14px 14px;
  }
  [data-screen="dock"] .dock-services-grid,
  [data-screen="dock"] .ship-swap-list {
    padding: 0;  /* parent dock-main already has 12px horizontal padding */
  }
  /* Stack label over value on narrow viewports — gives pills full width */
  .sortie-recap-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .sortie-recap-label {
    margin-bottom: 2px;
  }
  .sortie-recap-value-pills {
    flex-wrap: wrap;
    min-width: 0;
  }
  .sortie-recap-value {
    min-width: 0;
    word-break: break-word;
  }
  /* Allow pills inside the cargo cell to wrap their text if a single
     pill is wider than the available cell space (e.g., long names). */
  .sortie-recap-value-pills .status-pill {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: left;
    line-height: 1.3;
  }
  .dock-services-grid {
    grid-template-columns: 1fr;
  }
  .dock-service-tile {
    min-height: auto;
    min-width: 0;
    /* Ensure the tile button respects its grid cell width */
    width: 100%;
    box-sizing: border-box;
  }
  /* Backchannel tile detail — long descriptive text was clipping. */
  .dock-service-tile-detail {
    white-space: normal;
    word-break: break-word;
  }
  /* Tile titles can also be long — let them wrap rather than push the
     parent grid wider than the viewport. */
  .dock-service-tile-title,
  .dock-service-tile-eyebrow {
    word-break: break-word;
  }
  /* Ship swap list rows on mobile — same hardening */
  .ship-swap-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Mobile fix #5: dock-actions footer was overflowing because the
     pilot-info text + 3 buttons (Company/End/Resume) all in one flex
     row don't fit at narrow widths. Stack vertically; hide the
     keyboard hint <small>s; reduce padding so buttons fit. */
  [data-screen="dock"] .dock-actions {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  [data-screen="dock"] .dock-actions-meta {
    flex: 1 1 100%;
    font-size: 10px;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
  }
  [data-screen="dock"] .dock-action-secondary,
  [data-screen="dock"] .dock-action-resume {
    flex: 1 1 0;
    padding: 10px 12px;
    font-size: 11px;
    letter-spacing: 1.2px;
    justify-content: center;
    min-width: 0;
  }
  /* Hide the keyboard hint <small>s on mobile — they're a desktop-only
     convenience and they push button widths past the viewport edge on
     narrow screens. */
  [data-screen="dock"] .dock-action-secondary small,
  [data-screen="dock"] .dock-action-resume small {
    display: none;
  }

  /* Mobile fix #6: dock-identity layout cleanup. The right-hand
     "Run · Sortie N · +Xc · Ym elapsed" stat block was floating
     awkwardly to the right after the identity grid was stacked. The
     same info is duplicated in the run-aside RUN TOTAL panel below,
     so hiding it on mobile is the cleanest fix. */
  [data-screen="dock"] .dock-run-stat {
    display: none;
  }

  /* Mobile fix #7: run-aside (RUN TOTAL panel). When stacked below
     dock-main, the content felt bare and floated awkwardly. Add a
     subtle visual break so it reads as its own panel; bump padding;
     give bullet items a small left accent so they have presence. */
  [data-screen="dock"] .dock-aside {
    padding: 20px 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 11, 18, 0.5);  /* slightly darker than dock-main */
    margin-top: 8px;
    gap: 22px;
  }
  /* Bullet rows in banked-progress and at-risk lists get a small
     left accent — keeps them visually grouped without feeling raw. */
  [data-screen="dock"] #dock-banked-list > div,
  [data-screen="dock"] #dock-at-risk-list > div {
    padding-left: 12px;
    position: relative;
  }
  [data-screen="dock"] #dock-banked-list > div::before,
  [data-screen="dock"] #dock-at-risk-list > div::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(232, 184, 74, 0.4);  /* gold-dim */
  }
  /* At-risk rows use red-dim accents to match "at risk" tone */
  [data-screen="dock"] #dock-at-risk-list > div::before {
    background: rgba(212, 74, 74, 0.4);
  }
  /* Per-leg breakdown layout — was 3-column grid which felt cramped;
     add a touch more breathing room and let the route name wrap if
     it ever needs to. */
  [data-screen="dock"] .run-leg {
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    padding: 8px 0;
  }
  [data-screen="dock"] .run-leg-route {
    min-width: 0;
    word-break: break-word;
  }
  /* Pilot Lost recovery + hire panels — let buttons fit narrow viewports */
  .pilot-lost-recovery-option,
  .pilot-lost-hire-row {
    grid-template-columns: 1fr;
  }
  .pilot-lost-recovery-option-cta,
  .pilot-lost-hire-cta {
    width: 100%;
  }

  /* Crew Office — single-column on mobile so cards aren't crammed */
  .crew-office-grid {
    grid-template-columns: 1fr;
  }

  /* Encounter modal cargo overflow — let status strip wrap */
  .encounter-status-strip,
  .encounter-choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. PILOT LOST — death screen
   ═══════════════════════════════════════════════════════════════════════ */
.pilot-lost-shell {
  flex: 1;
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
}
.pilot-lost-backdrop-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212, 74, 74, 0.12), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(212, 74, 74, 0.06), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(106, 31, 42, 0.10), transparent 50%);
  pointer-events: none;
}

.pilot-lost-identity {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 36px;
  border-bottom: 1px solid rgba(212, 74, 74, 0.18);
  background: linear-gradient(180deg, rgba(106, 31, 42, 0.10), transparent);
}
.pilot-lost-identity-mark {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold);
}
.pilot-lost-identity-disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 1px;
  background: rgba(232, 184, 74, 0.04);
}
.pilot-lost-identity-name { color: var(--muted); }
.pilot-lost-identity-status {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
}
.pilot-lost-identity-pulse {
  width: 8px; height: 8px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: pl-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px var(--red-bright);
}
@keyframes pl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.pilot-lost-stage {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 32px;
  gap: 28px;
}

.pilot-lost-eyebrow {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--red-bright);
  text-align: center;
}

.pilot-lost-headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: 56px; font-weight: 300;
  letter-spacing: -1px;
  color: var(--white);
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 32px rgba(212, 74, 74, 0.3);
}

.pilot-lost-subhead {
  margin: 0;
  max-width: 540px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--body);
  line-height: 1.5;
}
.pilot-lost-subhead strong { color: var(--bright); font-weight: 700; }

.pilot-lost-recovery-card {
  position: relative;
  width: min(640px, 92vw);
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.92), rgba(13, 16, 24, 0.96));
  border: 1px solid rgba(212, 74, 74, 0.32);
  border-left: 2px solid var(--red-bright);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: center;
}
.pilot-lost-recovery-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-bright), transparent);
  opacity: 0.6;
}

.pilot-lost-wreck {
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212, 74, 74, 0.3);
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 74, 74, 0.08), transparent 70%),
    rgba(8, 10, 16, 0.7);
  position: relative;
  overflow: hidden;
}
.pilot-lost-wreck svg {
  width: 90%; height: 90%;
  filter: drop-shadow(0 0 8px rgba(212, 74, 74, 0.3));
  animation: pl-tumble 18s linear infinite;
  transform-origin: center;
}
@keyframes pl-tumble {
  from { transform: rotate(0deg) translate(-2px, 1px); }
  50%  { transform: rotate(-12deg) translate(2px, -2px); }
  to   { transform: rotate(-24deg) translate(-2px, 1px); }
}

.pilot-lost-info {
  display: grid; gap: 12px;
  min-width: 0;
}
.pilot-lost-pilot-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
}
.pilot-lost-pilot-name {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.pilot-lost-pilot-note {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.pilot-lost-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 2px 0;
}
.pilot-lost-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.pilot-lost-stat {
  display: flex; flex-direction: column; gap: 2px;
}
.pilot-lost-stat-label {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 2px; text-transform: uppercase;
}
.pilot-lost-stat-value {
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.pilot-lost-stat--retained .pilot-lost-stat-value { color: var(--gold); }
.pilot-lost-stat--lost .pilot-lost-stat-value { color: var(--red); }

.pilot-lost-continuation {
  width: min(540px, 92vw);
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 24px;
}
.pilot-lost-continuation strong { color: var(--gold); font-weight: 700; }

/* ─── Found New Company recovery panel — shows when fleet === 0 ────── */
.pilot-lost-recovery {
  width: min(720px, 92vw);
  margin-top: 24px;
  padding: 24px 28px;
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.04), rgba(13, 16, 24, 0.4));
  border: 1px solid rgba(232, 184, 74, 0.28);
  border-radius: 4px;
}
.pilot-lost-recovery-header {
  text-align: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(232, 184, 74, 0.18);
}
.pilot-lost-recovery-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.pilot-lost-recovery-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #f4e8d8;
  font-weight: 600;
  margin-bottom: 6px;
}
.pilot-lost-recovery-detail {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(220, 215, 200, 0.8);
}
.pilot-lost-recovery-options {
  display: flex; flex-direction: column;
  gap: 10px;
}
.pilot-lost-recovery-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent, rgba(232, 184, 74, 0.7));
  border-radius: 3px;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pilot-lost-recovery-option:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.06);
  border-color: rgba(232, 184, 74, 0.35);
  transform: translateX(2px);
}
.pilot-lost-recovery-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pilot-lost-recovery-option-info { min-width: 0; }
.pilot-lost-recovery-option-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
  margin-bottom: 4px;
}
.pilot-lost-recovery-option-detail {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.75);
  margin-bottom: 6px;
}
.pilot-lost-recovery-option-cost {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.pilot-lost-recovery-option-cost strong {
  color: var(--accent, var(--gold));
  font-weight: 600;
}
.pilot-lost-recovery-option-cta {
  padding: 10px 16px;
  background: rgba(232, 184, 74, 0.12);
  border: 1px solid rgba(232, 184, 74, 0.45);
  border-radius: 3px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pilot-lost-recovery-option--wreck    { --accent: rgba(138, 106, 212, 0.8); }
.pilot-lost-recovery-option--wreck    .pilot-lost-recovery-option-cost strong { color: rgba(184, 153, 232, 1); }
.pilot-lost-recovery-option--wreck    .pilot-lost-recovery-option-cta {
  background: rgba(138, 106, 212, 0.12);
  border-color: rgba(138, 106, 212, 0.45);
  color: rgba(184, 153, 232, 1);
}
.pilot-lost-recovery-option--frontier { --accent: rgba(74, 184, 212, 0.8); }
.pilot-lost-recovery-option--frontier .pilot-lost-recovery-option-cost strong { color: var(--cyan, #4ab8d4); }
.pilot-lost-recovery-option--frontier .pilot-lost-recovery-option-cta {
  background: rgba(74, 184, 212, 0.12);
  border-color: rgba(74, 184, 212, 0.45);
  color: var(--cyan, #4ab8d4);
}
.pilot-lost-recovery-option--loan     { --accent: rgba(232, 184, 74, 0.8); }

/* ─── Hire Replacement Pilots — always-visible recruitment panel ──── */
.pilot-lost-hire {
  width: min(720px, 92vw);
  margin-top: 20px;
  padding: 22px 26px;
  background: linear-gradient(180deg, rgba(74, 184, 212, 0.04), rgba(13, 16, 24, 0.4));
  border: 1px solid rgba(74, 184, 212, 0.22);
  border-radius: 4px;
}
.pilot-lost-hire-header {
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(74, 184, 212, 0.14);
}
.pilot-lost-hire-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan, #4ab8d4);
  margin-bottom: 6px;
}
.pilot-lost-hire-title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
  font-weight: 500;
  margin-bottom: 4px;
}
.pilot-lost-hire-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}
.pilot-lost-hire-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.pilot-lost-hire-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(74, 184, 212, 0.7);
  border-radius: 3px;
}
.pilot-lost-hire-row.is-perk-combat   { border-left-color: rgba(232, 96, 96, 0.7); }
.pilot-lost-hire-row.is-perk-trader   { border-left-color: rgba(232, 184, 74, 0.7); }
.pilot-lost-hire-row.is-perk-memory   { border-left-color: rgba(138, 106, 212, 0.7); }
.pilot-lost-hire-row.is-perk-navigator{ border-left-color: rgba(74, 184, 212, 0.7); }
.pilot-lost-hire-row.is-perk-people   { border-left-color: rgba(120, 220, 160, 0.7); }
.pilot-lost-hire-info { min-width: 0; }
.pilot-lost-hire-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
  margin-bottom: 4px;
}
.pilot-lost-hire-name-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 2px;
  vertical-align: 1px;
}
.pilot-lost-hire-origin {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.7);
  margin-bottom: 4px;
}
.pilot-lost-hire-perk {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.85);
}
.pilot-lost-hire-perk strong { color: var(--cyan, #4ab8d4); font-weight: 600; }
.pilot-lost-hire-cta {
  padding: 9px 14px;
  background: rgba(74, 184, 212, 0.10);
  border: 1px solid rgba(74, 184, 212, 0.40);
  border-radius: 3px;
  color: var(--cyan, #4ab8d4);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.pilot-lost-hire-cta:hover:not(:disabled) {
  background: rgba(74, 184, 212, 0.22);
  border-color: rgba(74, 184, 212, 0.7);
  color: #fff;
}
.pilot-lost-hire-cta:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}
.pilot-lost-hire-empty {
  padding: 16px 14px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.pilot-lost-actions {
  display: flex; gap: 12px; align-items: center;
  margin-top: 4px;
  flex-wrap: wrap; justify-content: center;
}
.pilot-lost-action {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--body);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.18s ease;
}
.pilot-lost-action:hover {
  border-color: rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.04);
}
.pilot-lost-action--primary {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.18), rgba(232, 184, 74, 0.06));
  border-color: rgba(232, 184, 74, 0.5);
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
}
.pilot-lost-action--primary:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.28), rgba(232, 184, 74, 0.1));
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.18);
  color: var(--gold);
}
.pilot-lost-action--quiet {
  border-color: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1.5px;
}
.pilot-lost-action--quiet:hover {
  border-color: rgba(255,255,255,0.1);
  color: var(--body);
  background: rgba(255,255,255,0.02);
}
.pilot-lost-action-key {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 12px;
  font-weight: 400;
}
.pilot-lost-action--primary .pilot-lost-action-key {
  color: var(--gold-dim);
  border-color: rgba(232, 184, 74, 0.3);
}

.pilot-lost-stage > * {
  opacity: 0;
  animation: pl-rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.pilot-lost-stage > *:nth-child(1) { animation-delay: 0.1s; }
.pilot-lost-stage > *:nth-child(2) { animation-delay: 0.25s; }
.pilot-lost-stage > *:nth-child(3) { animation-delay: 0.4s; }
.pilot-lost-stage > *:nth-child(4) { animation-delay: 0.7s; }
.pilot-lost-stage > *:nth-child(5) { animation-delay: 0.9s; }
.pilot-lost-stage > *:nth-child(6) { animation-delay: 1.05s; }
@keyframes pl-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .pilot-lost-recovery-card { grid-template-columns: 1fr; gap: 18px; }
  .pilot-lost-wreck { width: 120px; height: 120px; margin: 0 auto; }
  .pilot-lost-headline { font-size: 40px; }
  .pilot-lost-stats { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   4c. MARKET OVERLAY — buy/sell screen, slides in from right inside dock
   ═══════════════════════════════════════════════════════════════════════ */
.market-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 96vw);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.98), rgba(10, 12, 20, 0.99));
  border-left: 1px solid rgba(74, 184, 212, 0.25);
  z-index: 10;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease-out;
}
/* Mobile: same fix as the other side overlays — use fixed positioning
   so the panel attaches to viewport rather than dock-shell (which can
   grow taller than viewport on content-heavy dock screens). */
@media (max-width: 980px) {
  .market-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100vw;
    z-index: 100;
  }
}
.market-overlay.is-open {
  transform: translateX(0);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}

@media (min-width: 981px) {
  .ledger-overlay {
    width: min(1500px, calc(100vw - 48px));
  }
  .ledger-overlay .market-body {
    padding: 18px 26px 22px !important;
  }
  .ledger-overlay .ledger-table-wrap {
    max-height: calc(100vh - 245px);
  }
  .ledger-overlay .ledger-table {
    min-width: 1180px;
  }
}

.market-header {
  padding: 20px 26px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, rgba(74, 184, 212, 0.05), transparent);
}
.market-header-info { display: flex; flex-direction: column; gap: 2px; }
.market-header-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan);
}
.market-header-title {
  margin: 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.market-header-subtitle {
  margin: 2px 0 0;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted);
}
.market-close {
  appearance: none; cursor: pointer;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-family: var(--font-display); font-size: 18px; font-weight: 400;
  transition: 0.15s;
}
.market-close:hover {
  border-color: rgba(212, 74, 74, 0.4);
  color: var(--red);
  background: rgba(212, 74, 74, 0.04);
}

/* Player ledger strip — credits + cargo-used summary */
.market-ledger {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.market-ledger-cell {
  background: rgba(13, 16, 24, 0.7);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.market-ledger-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted);
}
.market-ledger-value {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.market-ledger-value--cyan { color: var(--cyan); }
.market-ledger-value--gold { color: var(--gold); }

/* Tab switcher: Sell / Buy */
.market-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.market-tab {
  appearance: none; cursor: pointer;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: 0.15s;
  position: relative;
}
.market-tab:hover { color: var(--body); background: rgba(255,255,255,0.02); }
.market-tab.is-active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.market-tab-count {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
}
.market-tab.is-active .market-tab-count { color: var(--cyan-dim); }

/* List of commodity rows */
.market-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.market-list::-webkit-scrollbar { width: 4px; }
.market-list::-webkit-scrollbar-thumb { background: rgba(74, 184, 212, 0.3); }

.market-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.12s;
}
.market-row:hover { background: rgba(255,255,255,0.02); }

.market-row-symbol {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background: rgba(74, 184, 212, 0.04);
  font-family: var(--font-data); font-size: 12px; font-weight: 700;
  color: var(--cyan); letter-spacing: 1px;
}
.market-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.market-row-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.market-row-meta {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
}
.market-row-meta-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.market-row-price {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
}
.market-row-price-value {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--gold); letter-spacing: 0.3px;
  white-space: nowrap;
}
.market-row-price-value--buy { color: var(--cyan); }
.market-row-price-meta {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.market-row-price-meta--up { color: var(--green); }
.market-row-price-meta--down { color: var(--red); }

.market-row-actions {
  display: flex;
  gap: 6px;
}
.market-action-btn {
  appearance: none; cursor: pointer;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--body);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
  min-width: 52px;
}
.market-action-btn:hover:not(:disabled) {
  border-color: rgba(74, 184, 212, 0.4);
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.06);
}
.market-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.market-action-btn--all {
  border-color: rgba(232, 184, 74, 0.3);
  color: var(--gold);
}
.market-action-btn--all:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(232, 184, 74, 0.08);
  color: var(--gold);
}

.market-empty {
  padding: 48px 32px;
  text-align: center;
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted); font-style: italic;
}

/* ─── Sable Charter banner (sell tab) ──────────────────────────────────
   Surfaces the +10% sell bonus when the player has gone dark and is
   selling at a Sable-aligned station. Purple to match Sable identity.
   Sits above the cargo list so the player sees it before browsing
   prices. */
.market-charter-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: rgba(138, 106, 212, 0.08);
  border: 1px solid rgba(138, 106, 212, 0.32);
  border-left: 3px solid rgba(138, 106, 212, 0.6);
  border-radius: 3px;
}
.market-charter-banner-icon {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: rgba(184, 153, 232, 0.95);
}
.market-charter-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.market-charter-banner-headline {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: rgba(184, 153, 232, 0.95);
  text-transform: uppercase;
}
.market-charter-banner-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(220, 215, 200, 0.75);
  letter-spacing: 0.3px;
}

/* Footer: total earned/spent in this market session */
.market-footer {
  padding: 12px 26px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10, 13, 20, 0.85);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.market-footer-meta {
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
}
.market-footer-meta strong { color: var(--gold); font-weight: 400; }
.market-footer-done {
  appearance: none; cursor: pointer;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.18), rgba(74, 184, 212, 0.06));
  border: 1px solid rgba(74, 184, 212, 0.5);
  color: var(--cyan);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase;
  transition: 0.15s;
}
.market-footer-done:hover {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.28), rgba(74, 184, 212, 0.1));
}

@media (max-width: 600px) {
  .market-overlay { width: 100%; }
  .market-row { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 12px 16px; }
  .market-row-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: 4px; }
  .market-ledger { grid-template-columns: 1fr 1fr; }
  .market-ledger-cell:nth-child(3) { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   4c. STAR MAP — destination selection screen before each sortie
   ═══════════════════════════════════════════════════════════════════════ */
[data-screen="starmap"] {
  padding-bottom: 0;
  min-height: calc(100vh - 38px);
  height: calc(100vh - 38px);
  overflow: hidden;
}

.starmap-shell {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  background: linear-gradient(180deg, #050810 0%, #0b1018 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle starfield — small static dots scattered behind the map */
.starmap-shell::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(154, 229, 245, 0.5), transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(154, 229, 245, 0.3), transparent),
    radial-gradient(1px 1px at 50% 80%, rgba(232, 184, 74, 0.3), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(154, 229, 245, 0.4), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(154, 229, 245, 0.3), transparent),
    radial-gradient(1px 1px at 90% 90%, rgba(154, 229, 245, 0.2), transparent),
    radial-gradient(1px 1px at 10% 50%, rgba(232, 184, 74, 0.2), transparent),
    radial-gradient(2px 2px at 60% 40%, rgba(154, 229, 245, 0.25), transparent),
    radial-gradient(1px 1px at 35% 15%, rgba(154, 229, 245, 0.4), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(154, 229, 245, 0.35), transparent);
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.6;
}

.starmap-header {
  position: relative;
  padding: 22px 32px 16px;
  border-bottom: 1px solid rgba(74, 184, 212, 0.15);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.6), transparent);
  z-index: 2;
}
.starmap-header-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 4px;
}
.starmap-header-title {
  margin: 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.starmap-header-subtitle {
  margin: 4px 0 0;
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted); line-height: 1.4;
}

.starmap-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr min(360px, 32vw);
  gap: 0;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
}

.starmap-canvas {
  position: relative;
  display: flex; align-items: stretch; justify-content: stretch;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.starmap-svg {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  max-height: 100%;
  /* Pan cursor — switches to grabbing while a drag is active via JS. */
  cursor: grab;
  /* Disable the browser's own pan/zoom on touch — we handle it. */
  touch-action: none;
  /* Prevent iOS Safari from showing a callout on long-press. */
  -webkit-user-select: none;
  user-select: none;
}
.starmap-svg.is-panning {
  cursor: grabbing;
}

/* Floating zoom controls — sit on the canvas in the bottom-right corner.
   Always reachable, work for keyboard / non-touch users, and useful for
   getting back to a sensible view after wandering. */
.starmap-zoom-controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 3;
  pointer-events: none;  /* container is non-interactive; only buttons receive events */
}
.starmap-zoom-btn {
  pointer-events: auto;
  appearance: none;
  cursor: pointer;
  width: 36px; height: 36px;
  background: rgba(13, 16, 24, 0.85);
  border: 1px solid rgba(74, 184, 212, 0.4);
  color: var(--cyan);
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.starmap-zoom-btn:hover {
  background: rgba(74, 184, 212, 0.18);
  border-color: var(--cyan-bright);
  color: var(--cyan-bright);
}
.starmap-zoom-btn:active {
  transform: scale(0.96);
}
.starmap-zoom-btn--reset {
  font-size: 16px;
  margin-top: 4px;  /* small visual gap between zoom group and reset */
}
.starmap-zoom-btn--debug {
  order: 4;
  margin-top: 4px;
  font-family: var(--font-data);
  font-size: 10px;
  color: rgba(184, 153, 232, 0.75);
  border-color: rgba(184, 153, 232, 0.35);
}
.starmap-zoom-btn--debug.is-active {
  background: rgba(184, 153, 232, 0.18);
  border-color: rgba(184, 153, 232, 0.8);
  color: rgba(230, 215, 255, 1);
}

.starmap-world-debug-overlay {
  pointer-events: none;
  opacity: 0.9;
}
.starmap-world-debug-boundary {
  fill: none;
  stroke: rgba(184, 153, 232, 0.28);
  stroke-width: 1.2;
  stroke-dasharray: 8 6;
}
.starmap-world-debug-grid {
  stroke: rgba(184, 153, 232, 0.16);
  stroke-width: 0.8;
  stroke-dasharray: 3 7;
}
.starmap-world-debug-label {
  font-family: var(--font-data);
  font-size: 8px;
  fill: rgba(214, 198, 245, 0.78);
  text-anchor: middle;
  letter-spacing: 0.8px;
}
.starmap-world-debug-label--left {
  text-anchor: start;
}
.starmap-world-debug-point {
  fill: rgba(184, 153, 232, 0.7);
  stroke: rgba(8, 10, 16, 0.95);
  stroke-width: 1.2;
}
.starmap-world-debug-gate {
  fill: rgba(232, 184, 74, 0.72);
}

/* Lane styling — drawn underneath nodes */
.lane {
  fill: none;
  stroke: rgba(154, 229, 245, 0.15);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  transition: stroke 0.3s, stroke-width 0.3s;
}
.lane.is-reachable {
  stroke: rgba(74, 184, 212, 0.4);
  stroke-width: 1.8;
  stroke-dasharray: 0;
}
.lane.is-selected {
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-dasharray: 0;
  filter: drop-shadow(0 0 8px rgba(232, 184, 74, 0.6));
}
.lane.is-threatened {
  stroke: rgba(212, 74, 74, 0.45);
  stroke-dasharray: 6 4;
}
.lane.is-threatened.is-reachable {
  stroke: rgba(212, 74, 74, 0.7);
}

/* Tier-gated lanes — locked lanes are dim with a heavier dash pattern.
   Tier 2 lanes use a gold tint when reachable, tier 3 use a deeper amber.
   Locked variant overrides reachable styling. */
.lane.is-locked {
  stroke: rgba(120, 120, 140, 0.18) !important;
  stroke-width: 1 !important;
  stroke-dasharray: 2 6 !important;
}
.lane.is-tier-2.is-reachable {
  stroke: rgba(232, 184, 74, 0.4);
}
.lane.is-tier-2.is-reachable.is-selected {
  stroke: var(--gold);
}
.lane.is-tier-3.is-reachable {
  stroke: rgba(212, 130, 60, 0.5);
}
.lane.is-tier-3.is-reachable.is-selected {
  stroke: rgba(232, 150, 70, 1);
  filter: drop-shadow(0 0 10px rgba(232, 150, 70, 0.6));
}
.lane-label.is-locked {
  fill: rgba(150, 150, 165, 0.5);
  font-size: 9px;
  letter-spacing: 0.5px;
}

/* Lane label — cycles cost, drawn on the lane */
.lane-label {
  font-family: var(--font-data); font-size: 11px;
  fill: var(--muted);
  text-anchor: middle;
  letter-spacing: 1px;
  pointer-events: none;
  transition: fill 0.3s;
}
.lane-label.is-reachable { fill: var(--cyan); }
.lane-label.is-selected { fill: var(--gold); }
.lane-label.is-threatened { fill: var(--red); }

.lane-threat-glyph {
  font-family: var(--font-data); font-size: 14px;
  fill: var(--red);
  text-anchor: middle;
  pointer-events: none;
  font-weight: 700;
}

/* Station nodes */
.station-node {
  cursor: pointer;
  transition: transform 0.2s;
  transform-origin: center;
  transform-box: fill-box;
}
.station-node:not(.is-current):not(.is-reachable) { cursor: default; opacity: 0.55; }
.station-node:not(.is-current):not(.is-reachable):hover { opacity: 0.7; }
.station-node.is-reachable:hover { transform: scale(1.05); }
.station-node.is-selected { transform: scale(1.08); }

/* Tier-locked stations — connected via a known lane but blocked by company
   tier requirement. Subtler than completely-unreachable: dim, but still
   prominent enough to communicate "this exists, work toward it." */
.station-node.is-tier-locked {
  cursor: help;
  opacity: 0.4;
}
.station-node.is-tier-locked:hover { opacity: 0.55; }
.station-node.is-tier-2 .station-ring {
  stroke: rgba(232, 184, 74, 0.3);
}
.station-node.is-tier-3 .station-ring {
  stroke: rgba(212, 130, 60, 0.35);
}
.station-node.is-tier-2.is-reachable .station-ring {
  stroke: rgba(232, 184, 74, 0.6);
}
.station-node.is-tier-3.is-reachable .station-ring {
  stroke: rgba(212, 130, 60, 0.7);
}

/* Tier badge (II / III) — small label inside the node, top-left.
   Helps the player visually distinguish tier rings at a glance. */
.station-tier-badge {
  font-family: var(--font-data); font-size: 8px;
  fill: rgba(232, 184, 74, 0.7);
  text-anchor: middle;
  letter-spacing: 0.5px;
  pointer-events: none;
  font-weight: 600;
}
.station-tier-badge--three {
  fill: rgba(212, 130, 60, 0.85);
}

/* Jump Gate — uncharted hex node sitting at the system edge.
   Uses a dotted hex outline to differentiate from station rings.
   Renders animated when status='uncharted' so it draws the eye
   as a "future destination" without being reachable yet. */
.jump-gate-node {
  cursor: pointer;
  transition: transform 0.2s;
  transform-origin: center;
  transform-box: fill-box;
}
.jump-gate-node:hover { transform: scale(1.05); }
.jump-gate-hex {
  fill: rgba(13, 16, 24, 0.85);
  stroke: rgba(184, 153, 232, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  animation: jump-gate-pulse 2.4s ease-in-out infinite;
}
@keyframes jump-gate-pulse {
  0%, 100% { stroke: rgba(184, 153, 232, 0.4); stroke-width: 1.5; }
  50%      { stroke: rgba(184, 153, 232, 0.8); stroke-width: 2; }
}
.jump-gate-mark {
  font-family: var(--font-display); font-size: 11px;
  fill: rgba(184, 153, 232, 0.85);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 1px;
  pointer-events: none;
  font-weight: 500;
}
.jump-gate-label-eyebrow {
  font-family: var(--font-data); font-size: 8px;
  fill: rgba(184, 153, 232, 0.55);
  text-anchor: middle;
  letter-spacing: 1.5px;
  pointer-events: none;
}
.jump-gate-label {
  font-family: var(--font-display); font-size: 11px;
  fill: rgba(184, 153, 232, 0.85);
  text-anchor: middle;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.jump-gate-status {
  font-family: var(--font-data); font-size: 8px;
  fill: rgba(184, 153, 232, 0.5);
  text-anchor: middle;
  letter-spacing: 1.5px;
  pointer-events: none;
}

/* Charted gate — destination known, treat with confident solid stroke
   instead of the dashed "uncharted" treatment. Player has been there. */
.jump-gate-node.charted .jump-gate-hex {
  stroke-dasharray: 0;
  stroke: rgba(184, 153, 232, 0.7);
  animation: jump-gate-pulse-charted 3s ease-in-out infinite;
}
@keyframes jump-gate-pulse-charted {
  0%, 100% { stroke: rgba(184, 153, 232, 0.55); stroke-width: 1.5; }
  50%      { stroke: rgba(184, 153, 232, 0.85); stroke-width: 2; }
}
.jump-gate-node.charted .jump-gate-mark,
.jump-gate-node.charted .jump-gate-label {
  fill: rgba(200, 175, 240, 1);
}
.jump-gate-node.charted .jump-gate-status {
  fill: rgba(184, 153, 232, 0.75);
}

/* Home-bound treatment — overrides charted styling. When the player
   is in a foreign sector and this gate leads back to Hearthwake,
   it gets gold accents to call attention as "the way home." */
.jump-gate-node.is-home-bound .jump-gate-hex {
  stroke: rgba(232, 184, 74, 0.75);
  stroke-dasharray: 0;
  stroke-width: 2;
  animation: jump-gate-pulse-home 2s ease-in-out infinite;
}
@keyframes jump-gate-pulse-home {
  0%, 100% { stroke: rgba(232, 184, 74, 0.6); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(232, 184, 74, 0.3)); }
  50%      { stroke: rgba(232, 184, 74, 1);   stroke-width: 2.5; filter: drop-shadow(0 0 12px rgba(232, 184, 74, 0.6)); }
}
.jump-gate-node.is-home-bound .jump-gate-mark,
.jump-gate-node.is-home-bound .jump-gate-label {
  fill: var(--gold);
}
.jump-gate-node.is-home-bound .jump-gate-status {
  fill: rgba(232, 184, 74, 0.85);
}

/* Home tag — small "← HOME" label above the gate when home-bound. */
.jump-gate-home-tag {
  font-family: var(--font-data); font-size: 9px;
  fill: var(--gold);
  text-anchor: middle;
  letter-spacing: 2px;
  pointer-events: none;
  font-weight: 600;
  animation: home-tag-pulse 2s ease-in-out infinite;
}
@keyframes home-tag-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.station-ring {
  fill: rgba(13, 16, 24, 0.95);
  stroke: rgba(154, 229, 245, 0.25);
  stroke-width: 1.5;
  transition: stroke 0.2s, stroke-width 0.2s;
}
.station-node.is-current .station-ring {
  stroke: var(--cyan);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 12px rgba(74, 184, 212, 0.5));
}
.station-node.is-reachable .station-ring {
  stroke: rgba(74, 184, 212, 0.55);
  stroke-width: 2;
}
.station-node.is-selected .station-ring {
  stroke: var(--gold);
  stroke-width: 3;
  filter: drop-shadow(0 0 14px rgba(232, 184, 74, 0.7));
}

/* Pulsing animation for current location */
@keyframes station-pulse {
  0%, 100% { r: 26; opacity: 0.8; }
  50%      { r: 32; opacity: 0.3; }
}
.station-pulse {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1;
  pointer-events: none;
  animation: station-pulse 2.4s ease-in-out infinite;
}

.station-mark {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px;
  fill: var(--bright);
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.station-node.is-current .station-mark { fill: var(--cyan); }
.station-node.is-selected .station-mark { fill: var(--gold); }

.station-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  fill: var(--body);
  text-anchor: middle;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.station-label-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  fill: var(--muted);
  text-anchor: middle;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
}
.station-node.is-current .station-label { fill: var(--cyan); }
.station-node.is-selected .station-label { fill: var(--gold); }

/* Faction tint dot on station */
.station-faction-dot {
  pointer-events: none;
}

/* "You are here" indicator above current station */
.station-here-tag {
  font-family: var(--font-data); font-size: 10px;
  fill: var(--cyan);
  text-anchor: middle;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
}

/* Dispatched-pilot marker on a lane */
.dispatch-marker {
  pointer-events: auto;
  cursor: pointer;
}
.dispatch-marker-dot {
  fill: var(--purple);
  stroke: rgba(13, 16, 24, 0.9);
  stroke-width: 1.5;
}
.dispatch-marker-label {
  font-family: var(--font-data); font-size: 9px;
  fill: var(--purple);
  text-anchor: middle;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dispatch-marker:hover .dispatch-marker-dot,
.dispatch-marker.is-selected .dispatch-marker-dot {
  stroke: var(--gold);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(184, 153, 232, 0.8));
}
.dispatch-marker.is-selected .dispatch-marker-label {
  fill: var(--gold);
}

.starmap-pilot-marker {
  pointer-events: auto;
  cursor: pointer;
}
.starmap-pilot-marker-diamond {
  fill: rgba(74, 184, 212, 0.14);
  stroke: rgba(232, 184, 74, 0.88);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 5px rgba(74, 184, 212, 0.38));
}
.starmap-pilot-marker-dot {
  fill: rgba(232, 184, 74, 0.98);
  stroke: rgba(8, 10, 16, 0.94);
  stroke-width: 1;
}
.starmap-pilot-marker-label {
  font-family: var(--font-data);
  font-size: 8px;
  fill: rgba(232, 238, 255, 0.84);
  text-anchor: middle;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(8, 10, 16, 0.95);
  stroke-width: 2.5px;
}
.starmap-pilot-marker:hover .starmap-pilot-marker-diamond,
.starmap-pilot-marker.is-selected .starmap-pilot-marker-diamond {
  stroke: var(--gold);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(232, 184, 74, 0.62));
}
.starmap-pilot-marker.is-selected .starmap-pilot-marker-label {
  fill: var(--gold);
}

/* NPC hauler markers: chevrons oriented along the lane. */
.npc-hauler-marker {
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.2s;
}
.npc-hauler-marker:hover {
  opacity: 1;
}
.npc-hauler-marker path {
  transition: opacity 0.2s;
}
.npc-hauler-marker:hover path {
  opacity: 1 !important;
}
.npc-hauler-marker.is-selected path {
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(74, 184, 212, 0.8));
}
.npc-hauler-marker.is-selected circle {
  opacity: 0.8;
  stroke-width: 1.5;
}

/* Threat patrol markers — bigger diamond, prominent red, with a
   pulsing warning ring. These are the "you can see this is dangerous"
   visual on the map: a Sable convoy you might trade with looks like
   a chevron, but a Rust Jackals patrol looks like *this*. */
.npc-threat-marker {
  pointer-events: auto;
  cursor: pointer;
}
.npc-threat-marker.is-selected .npc-threat-ring {
  opacity: 0.95;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px rgba(212, 74, 74, 0.75));
}
.npc-threat-marker .npc-threat-ring {
  /* Slow pulse so the eye drifts there but isn't seizure-inducing */
  animation: threat-ring-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes threat-ring-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.25);
  }
}

/* Lane pressure marker: pulses softly to draw the eye to recent activity. */
.lane-pressure-marker { pointer-events: auto; cursor: pointer; }
.lane-pressure-marker.is-selected circle:last-child {
  stroke: var(--gold);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 8px rgba(232, 184, 74, 0.7));
}
.lane-pressure-pulse {
  animation: lane-pressure-pulse 2.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes lane-pressure-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.5); opacity: 0.2; }
}

/* Detail rail — right-side context for the selected destination */
.starmap-rail {
  border-left: 1px solid rgba(74, 184, 212, 0.15);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.85), rgba(8, 10, 16, 0.9));
  padding: 24px 26px 20px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.starmap-rail-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-family: var(--font-body); font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  height: 100%;
}
.starmap-rail-empty-glyph {
  font-family: var(--font-display); font-size: 36px;
  color: var(--cyan-dim); opacity: 0.4;
  margin-bottom: 12px;
}

.starmap-detail-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 4px;
}
.starmap-detail-title {
  margin: 0 0 4px;
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.starmap-detail-subtitle {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); line-height: 1.5;
  margin: 0 0 16px;
}

.starmap-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 16px;
}
.starmap-detail-stat {
  background: rgba(13, 16, 24, 0.7);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.starmap-detail-stat-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted);
}
.starmap-detail-stat-value {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.starmap-detail-stat-value--cyan { color: var(--cyan); }
.starmap-detail-stat-value--gold { color: var(--gold); }
.starmap-detail-stat-value--red { color: var(--red); }

.starmap-detail-section {
  margin-bottom: 14px;
}
.starmap-detail-section-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin: 0 0 8px;
}
.starmap-detail-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.starmap-detail-list-item {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.45;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(154, 229, 245, 0.2);
}
.starmap-detail-list-item--gold { border-left-color: var(--gold); }
.starmap-detail-list-item--red { border-left-color: var(--red); }
.starmap-detail-list-item--purple { border-left-color: var(--purple); }
.starmap-detail-list-item-meta {
  display: block;
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.2px;
  margin-top: 2px;
  text-transform: uppercase;
}
.starmap-detail-list-item--empty {
  color: var(--muted); font-style: italic;
  border-left-color: transparent;
  padding-left: 0;
  background: transparent;
}

/* Footer with cancel + confirm */
.starmap-footer {
  position: relative;
  z-index: 2;
  padding: 16px 32px;
  border-top: 1px solid rgba(74, 184, 212, 0.15);
  background: linear-gradient(0deg, rgba(13, 16, 24, 0.85), transparent);
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.starmap-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.starmap-mode-btn {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 7px 12px;
  background: rgba(13, 16, 24, 0.82);
  border: 0;
  color: var(--muted);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.starmap-mode-btn span {
  font-size: 11px;
  font-weight: 600;
}
.starmap-mode-btn small {
  font-family: var(--font-data);
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(154, 172, 190, 0.72);
}
.starmap-mode-btn:hover {
  color: var(--bright);
  background: rgba(74, 184, 212, 0.08);
}
.starmap-mode-btn.is-active {
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.14);
  box-shadow: inset 0 0 0 1px rgba(74, 184, 212, 0.5);
}
.starmap-mode-btn.is-active small {
  color: rgba(154, 229, 245, 0.8);
}
.starmap-mode-help-btn {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 7px 12px;
  background: rgba(13, 16, 24, 0.78);
  border: 1px solid rgba(74, 184, 212, 0.24);
  color: var(--cyan);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.starmap-mode-help-btn span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(74, 184, 212, 0.45);
  background: rgba(74, 184, 212, 0.08);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.starmap-mode-help-btn small {
  font-family: var(--font-data);
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(154, 229, 245, 0.82);
}
.starmap-mode-help-btn:hover {
  color: var(--bright);
  border-color: rgba(74, 184, 212, 0.48);
  background: rgba(74, 184, 212, 0.1);
}
.starmap-mode-help-btn.is-unseen {
  color: var(--gold);
  border-color: rgba(232, 184, 74, 0.55);
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.14);
}
.starmap-mode-help-btn.is-unseen span {
  border-color: rgba(232, 184, 74, 0.58);
  background: rgba(232, 184, 74, 0.1);
}
.starmap-mode-help-btn.is-unseen small {
  color: rgba(232, 184, 74, 0.9);
}
.starmap-footer-meta {
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1.4px; text-transform: uppercase;
}
.starmap-footer-meta strong { color: var(--cyan); font-weight: 400; }
.starmap-cancel-btn {
  appearance: none; cursor: pointer;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
}
.starmap-cancel-btn:hover { color: var(--body); border-color: rgba(255,255,255,0.25); }
.starmap-launch-btn {
  appearance: none; cursor: pointer;
  padding: 12px 32px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.22), rgba(232, 184, 74, 0.06));
  border: 1px solid rgba(232, 184, 74, 0.55);
  color: var(--gold);
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  transition: 0.15s;
  display: inline-flex; align-items: center; gap: 10px;
}
.starmap-launch-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.35), rgba(232, 184, 74, 0.12));
  filter: drop-shadow(0 0 10px rgba(232, 184, 74, 0.4));
}
.starmap-launch-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
  color: var(--muted);
  border-color: rgba(255,255,255,0.1);
}
.starmap-launch-btn small {
  font-size: 9px; opacity: 0.7;
  font-weight: 400;
  letter-spacing: 1.5px;
}

@media (max-width: 880px) {
  [data-screen="starmap"] {
    height: auto;
    min-height: calc(100vh - 44px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .starmap-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .starmap-rail { border-left: 0; border-top: 1px solid rgba(74, 184, 212, 0.15); max-height: 40vh; }
  .starmap-canvas { padding: 12px; }

  /* Mobile fix: kill the rail's internal scroll trap. With the rail at
     max-height: 40vh + overflow-y: auto, finger-touch on the rail
     scrolls the rail content but won't scroll the page — making it
     hard to navigate to the launch button. Instead, let the rail flow
     at full content height and make the footer sticky-bottom so the
     launch button is always reachable from anywhere on the screen. */
  .starmap-shell {
    overflow: visible;          /* allow page-level scroll */
    grid-template-rows: auto auto auto;  /* let body size to content */
  }
  .starmap-body {
    min-height: 0;
    grid-template-rows: auto auto;  /* canvas auto-sizes via aspect-ratio below */
  }
  /* Lock canvas to a fixed aspect ratio matching the SVG's viewBox
     (1000×700). Previously canvas had min-height: 50vh which is unstable
     on iOS Safari (the URL bar's show/hide changes the vh unit), and
     when the rail content changed height — e.g. clicking Graveswell vs.
     a station with different detail rows — the page reflowed and the
     50vh canvas could shift slightly. With aspect-ratio, canvas height
     is purely a function of its width, which doesn't change on click. */
  .starmap-canvas {
    aspect-ratio: 10 / 7;
    width: 100%;
    min-height: 0;
  }
  .starmap-rail {
    max-height: none;           /* override the 40vh ceiling */
    overflow-y: visible;        /* override internal scroll */
  }
  .starmap-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(8, 11, 18, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .starmap-mode-toggle { grid-template-columns: 1fr 1fr; }
  .starmap-launch-btn,
  .starmap-mode-help-btn,
  .starmap-cancel-btn { justify-content: center; }
}

.pilot-runtime-screen {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding-bottom: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(74, 184, 212, 0.08), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(232, 184, 74, 0.06), transparent 30%),
    #060a0f;
}
body.live-pilot-active {
  overflow: hidden;
}
body.live-pilot-active .proto-chrome {
  display: none;
}
body.live-pilot-active .pilot-runtime-screen.is-active {
  position: fixed;
  inset: 0;
  z-index: 2000;
  min-height: 100vh;
  padding: 0;
}
.pilot-direct-mount {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
  background: #05070d;
}
.pilot-runtime-screen.is-direct-mount .pilot-direct-mount {
  display: block;
}
.pilot-runtime-screen.is-direct-mount .pilot-canvas,
.pilot-runtime-screen.is-direct-mount .pilot-hud,
.pilot-runtime-screen.is-direct-mount .pilot-dock-prompt,
.pilot-runtime-screen.is-direct-mount .pilot-action-prompt {
  display: none;
}
.pilot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #05080d;
  cursor: crosshair;
}
.pilot-hud {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(8, 12, 18, 0.78);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
}
.pilot-hud--top {
  top: 18px;
  left: 18px;
  right: 18px;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
}
.pilot-route-block {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.pilot-hud-eyebrow {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}
.pilot-hud-route {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--bright);
}
.pilot-hud-route span:first-child,
.pilot-hud-route span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pilot-hud-route-line {
  flex: 0 0 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(74,184,212,0.2), rgba(232,184,74,0.85));
}
.pilot-hud-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pilot-hud-btn {
  appearance: none;
  cursor: pointer;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pilot-hud-btn:hover {
  color: var(--bright);
  border-color: rgba(255,255,255,0.28);
}
.pilot-hud-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.pilot-hud-btn--primary {
  color: var(--gold);
  border-color: rgba(232,184,74,0.5);
  background: rgba(232,184,74,0.12);
}
.pilot-hud--left {
  left: 18px;
  top: 104px;
  width: 218px;
  display: grid;
  gap: 12px;
  padding: 14px;
}
.pilot-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 10px;
  align-items: center;
}
.pilot-meter span {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--muted);
}
.pilot-meter strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--bright);
  font-weight: 500;
}
.pilot-meter-track {
  grid-column: 1 / -1;
  height: 5px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.pilot-meter-track i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  box-shadow: 0 0 12px rgba(74,184,212,0.45);
}
.pilot-hud--right {
  right: 18px;
  bottom: 18px;
  width: 194px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.pilot-mini-map {
  position: relative;
  height: 128px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(rgba(74,184,212,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,184,212,0.07) 1px, transparent 1px),
    rgba(0,0,0,0.18);
  background-size: 25% 25%;
  overflow: hidden;
}
.pilot-mini-map-point {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(74,184,212,0.7);
}
.pilot-mini-map-point--origin {
  background: var(--muted);
}
.pilot-mini-map-point--destination {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(232,184,74,0.75);
}
.pilot-mini-map-point--ship {
  width: 10px;
  height: 10px;
  background: var(--bright);
}
.pilot-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-data);
  color: var(--muted);
}
.pilot-readout span {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pilot-readout small {
  font-size: 9px;
  color: var(--muted);
}
.pilot-dock-prompt,
.pilot-action-prompt {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 3;
  transform: translate(-50%, 18px);
  width: min(520px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(232, 184, 74, 0.42);
  background: rgba(12, 13, 16, 0.88);
  box-shadow: 0 24px 70px rgba(0,0,0,0.42), 0 0 34px rgba(232,184,74,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(14px);
}
.pilot-action-prompt {
  bottom: 96px;
  border-color: rgba(74, 184, 212, 0.28);
  background: rgba(7, 16, 22, 0.88);
}
.pilot-dock-prompt.is-visible,
.pilot-action-prompt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.pilot-dock-prompt-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.pilot-dock-prompt-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--bright);
}
.pilot-dock-prompt-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.pilot-stub-screen {
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}
.pilot-stub-shell {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: stretch;
  border-top: 1px solid rgba(74, 184, 212, 0.18);
  border-bottom: 1px solid rgba(74, 184, 212, 0.14);
  padding: 26px 0;
}
.pilot-stub-mark {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(232, 184, 74, 0.45);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.2px;
}
.pilot-stub-content {
  display: grid;
  gap: 12px;
}
.pilot-stub-eyebrow {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--cyan);
  text-transform: uppercase;
}
.pilot-stub-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--bright);
  letter-spacing: 0;
}
.pilot-stub-copy {
  margin: 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.5;
}
.pilot-stub-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pilot-stub-stats span {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 9px;
}
.pilot-stub-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pilot-stub-primary,
.pilot-stub-secondary {
  appearance: none;
  cursor: pointer;
  padding: 11px 18px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.pilot-stub-primary {
  background: rgba(232, 184, 74, 0.16);
  border: 1px solid rgba(232, 184, 74, 0.55);
  color: var(--gold);
}
.pilot-stub-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--muted);
}
.pilot-stub-primary:hover {
  background: rgba(232, 184, 74, 0.24);
  color: var(--gold-bright);
}
.pilot-stub-secondary:hover {
  color: var(--bright);
  border-color: rgba(255,255,255,0.28);
}

@media (max-width: 620px) {
  .pilot-hud--top {
    align-items: stretch;
    flex-direction: column;
  }
  .pilot-hud--left {
    top: auto;
    bottom: 18px;
    width: clamp(132px, 34vw, 218px);
  }
  .pilot-hud--right {
    width: 168px;
  }
  .pilot-mini-map {
    height: 98px;
  }
  .pilot-dock-prompt {
    bottom: 184px;
  }
  .pilot-action-prompt {
    bottom: 254px;
  }
  .pilot-stub-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .pilot-hud--left {
    bottom: 154px;
    width: calc(100vw - 36px);
  }
  .pilot-hud--right {
    width: calc(100vw - 36px);
  }
  .pilot-dock-prompt {
    bottom: 312px;
    grid-template-columns: 1fr;
  }
  .pilot-action-prompt {
    bottom: 382px;
    grid-template-columns: 1fr;
  }
  .pilot-dock-prompt .pilot-hud-btn {
    justify-content: center;
    width: 100%;
  }
  .pilot-action-prompt .pilot-hud-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   4e. COMPANY STORAGE — materials at home + production buildings
   ═══════════════════════════════════════════════════════════════════════ */

/* Capacity bar */
.storage-overview {
  margin-bottom: 24px;
  padding: 18px 22px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
}
.storage-overview-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.storage-overview-label {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.storage-overview-value {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.storage-overview-value-secondary {
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1px;
}
.storage-capacity-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.storage-capacity-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width 0.4s ease-out;
}
.storage-capacity-fill.is-warning {
  background: linear-gradient(90deg, #d4a14a, #e8b84a);
}
.storage-capacity-fill.is-danger {
  background: linear-gradient(90deg, #b84a4a, #d44a4a);
}

/* Section title */
.storage-section-title {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Contents grid */
.storage-empty {
  padding: 32px 24px;
  text-align: center;
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted); font-style: italic;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(13, 16, 24, 0.4);
  margin-bottom: 24px;
}
.storage-contents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 24px;
}
.storage-content-cell {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(13, 16, 24, 0.7);
}
.storage-content-cell.is-produced {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.05), rgba(13, 16, 24, 0.7));
}
.storage-content-symbol {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background: rgba(74, 184, 212, 0.04);
  font-family: var(--font-data); font-size: 12px; font-weight: 700;
  color: var(--cyan); letter-spacing: 1px;
}
.storage-content-cell.is-produced .storage-content-symbol {
  border-color: rgba(232, 184, 74, 0.4);
  background: rgba(232, 184, 74, 0.04);
  color: var(--gold);
}
.storage-content-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.storage-content-meta {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
  margin-top: 2px;
}
.storage-content-qty {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
  text-align: right;
}
.storage-content-cell.is-produced .storage-content-qty { color: var(--gold); }

/* Building list */
.storage-building {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid rgba(232, 184, 74, 0.15);
  margin-bottom: 8px;
}
.storage-building-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.storage-building-recipe {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); margin-top: 3px; line-height: 1.4;
}
.storage-building-recipe strong { color: var(--gold); }
.storage-building-status {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}
.storage-building-status--active { color: var(--gold); }
.storage-building-status--idle { color: var(--muted); }
.storage-building-status--blocked { color: var(--red); }
.storage-building-status-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); margin-top: 2px;
  font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* ─── Active Bonuses cards — passive effects from completed projects ─── */
.storage-bonus {
  padding: 12px 18px;
  background: var(--panel);
  border: 1px solid rgba(74, 184, 212, 0.18);
  border-left: 2px solid rgba(74, 184, 212, 0.5);
  margin-bottom: 8px;
}
.storage-bonus-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.storage-bonus-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.storage-bonus-track {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.storage-bonus-effect {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.5;
}
.storage-bonus-effect strong { color: var(--cyan); }
.storage-bonus-tier-mark {
  margin-top: 6px;
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.8px; color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   4g. SHIPYARD — repair, refuel, ship records
   ═══════════════════════════════════════════════════════════════════════ */
.shipyard-overlay,
.arms-overlay,
.storage-transfer-overlay,
.backchannel-overlay,
.crew-office-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 96vw);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.98), rgba(10, 12, 20, 0.99));
  border-left: 1px solid rgba(74, 184, 212, 0.25);
  z-index: 10;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease-out;
}
/* On mobile, the dock-shell can grow taller than the viewport (content-
   driven) so position:absolute panels would extend past the screen and
   their tops would land off-screen. Use fixed positioning so the panel
   covers the viewport regardless of dock-shell scroll position. */
@media (max-width: 980px) {
  .shipyard-overlay,
  .arms-overlay,
  .storage-transfer-overlay,
  .backchannel-overlay,
  .crew-office-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100vw;
    z-index: 100;  /* above sticky dock-actions footer */
  }
}
.shipyard-overlay.is-open,
.arms-overlay.is-open,
.storage-transfer-overlay.is-open,
.backchannel-overlay.is-open,
.crew-office-overlay.is-open {
  transform: translateX(0);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}

/* ─── Crew Office body styling ────────────────────────────────────── */
.crew-office-summary {
  padding: 12px 16px;
  background: rgba(74, 184, 212, 0.04);
  border: 1px solid rgba(74, 184, 212, 0.15);
  border-radius: 3px;
  margin-bottom: 14px;
}
.crew-office-summary-line {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
  margin-bottom: 4px;
}
.crew-office-summary-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.crew-office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.crew-office-card {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(74, 184, 212, 0.7);
  border-radius: 3px;
}
.crew-office-card.is-perk-combat   { border-left-color: rgba(232, 96, 96, 0.7); }
.crew-office-card.is-perk-trader   { border-left-color: rgba(232, 184, 74, 0.7); }
.crew-office-card.is-perk-memory   { border-left-color: rgba(138, 106, 212, 0.7); }
.crew-office-card.is-perk-navigator{ border-left-color: rgba(74, 184, 212, 0.7); }
.crew-office-card.is-perk-people   { border-left-color: rgba(120, 220, 160, 0.7); }
.crew-office-card-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
}
.crew-office-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
  font-weight: 500;
}
.crew-office-card-trait {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
.crew-office-card-origin {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.7);
}
.crew-office-card-perk {
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.crew-office-card-perk-name {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--cyan, #4ab8d4);
  margin-bottom: 4px;
}
.crew-office-card-perk-desc {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.85);
}
.crew-office-card-cta {
  margin-top: 4px;
  padding: 9px 14px;
  background: rgba(74, 184, 212, 0.10);
  border: 1px solid rgba(74, 184, 212, 0.40);
  border-radius: 3px;
  color: var(--cyan, #4ab8d4);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.crew-office-card-cta:hover:not(:disabled) {
  background: rgba(74, 184, 212, 0.22);
  border-color: rgba(74, 184, 212, 0.7);
  color: #fff;
}
.crew-office-card-cta:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}
.crew-office-empty {
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}
.crew-office-empty-line {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--bright);
  margin-bottom: 6px;
}
.crew-office-empty-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* Backchannel-specific overrides — purple/red palette so the underworld
   feels visually distinct from lawful slide-ins (cyan/gold). */
.backchannel-overlay {
  background: linear-gradient(180deg, rgba(20, 12, 24, 0.98), rgba(14, 8, 18, 0.99));
  border-left-color: rgba(138, 106, 212, 0.4);
}
.backchannel-overlay .market-header {
  border-bottom-color: rgba(138, 106, 212, 0.18);
}
.backchannel-overlay .market-header-eyebrow {
  color: var(--purple, #b899e8);
  letter-spacing: 2.4px;
}
.backchannel-overlay .market-header-title {
  color: #e8d3ff;
}
.backchannel-tabs {
  display: flex;
  gap: 0;
  padding: 0 26px;
  border-bottom: 1px solid rgba(138, 106, 212, 0.18);
  background: rgba(20, 12, 24, 0.4);
}
.backchannel-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.backchannel-tab:hover { color: #b899e8; }
.backchannel-tab.is-active {
  color: #e8d3ff;
  border-bottom-color: #b899e8;
}
.backchannel-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: rgba(138, 106, 212, 0.2);
  color: #b899e8;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.backchannel-tab-count:empty { display: none; }
.backchannel-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(138, 106, 212, 0.3) transparent;
}
.backchannel-body::-webkit-scrollbar { width: 4px; }
.backchannel-body::-webkit-scrollbar-track { background: transparent; }
.backchannel-body::-webkit-scrollbar-thumb { background: rgba(138, 106, 212, 0.3); }
.backchannel-overlay .market-footer {
  border-top-color: rgba(138, 106, 212, 0.18);
}
.backchannel-overlay .market-footer-meta {
  color: rgba(184, 153, 232, 0.7);
}
.backchannel-overlay .market-footer-done {
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.2), rgba(138, 106, 212, 0.1));
  border-color: rgba(138, 106, 212, 0.5);
  color: #e8d3ff;
}
.backchannel-overlay .market-footer-done:hover {
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.3), rgba(138, 106, 212, 0.15));
  border-color: rgba(138, 106, 212, 0.7);
}

/* Section block within Backchannel body, mirrored to Shipyard pattern */
.backchannel-section { margin-bottom: 28px; }
.backchannel-section:last-child { margin-bottom: 0; }
.backchannel-section-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: rgba(184, 153, 232, 0.65); font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(138, 106, 212, 0.12);
}
.backchannel-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-body);
  font-size: 13px;
}

/* Heat-wash row */
.backchannel-heat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(138, 106, 212, 0.04);
  border: 1px solid rgba(138, 106, 212, 0.12);
  border-radius: 4px;
  margin-bottom: 8px;
}
.backchannel-heat-row-info { min-width: 0; }
.backchannel-heat-row-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: #e0e0e8;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.backchannel-heat-row-bar {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-bottom: 4px;
}
.backchannel-heat-row-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.backchannel-heat-row-fill.tier-clean { background: rgba(120, 200, 140, 0.6); }
.backchannel-heat-row-fill.tier-flagged { background: rgba(230, 158, 80, 0.7); }
.backchannel-heat-row-fill.tier-hostile { background: rgba(220, 100, 100, 0.8); }
.backchannel-heat-row-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.backchannel-wash-btn {
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.18), rgba(138, 106, 212, 0.08));
  border: 1px solid rgba(138, 106, 212, 0.4);
  color: #e8d3ff;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.backchannel-wash-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.28), rgba(138, 106, 212, 0.12));
  border-color: rgba(138, 106, 212, 0.6);
}
.backchannel-wash-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Intel row */
.backchannel-intel-row {
  padding: 14px 16px;
  background: rgba(232, 184, 74, 0.04);
  border: 1px solid rgba(232, 184, 74, 0.18);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 10px;
}
.backchannel-intel-headline {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.backchannel-intel-detail {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--body);
  line-height: 1.5;
  margin-bottom: 8px;
}
.backchannel-intel-meta {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.backchannel-intel-window-active {
  color: var(--red);
}

/* Backchannel service tile — purple-tinted variant of dock-service-tile */
.dock-service-tile--backchannel {
  border-color: rgba(138, 106, 212, 0.32);
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.06), rgba(138, 106, 212, 0.02));
}
.dock-service-tile--backchannel .dock-service-tile-eyebrow {
  color: rgba(184, 153, 232, 0.85);
}
.dock-service-tile--backchannel .dock-service-tile-title {
  color: #e8d3ff;
}
.dock-service-tile--backchannel:hover {
  border-color: rgba(138, 106, 212, 0.55);
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.12), rgba(138, 106, 212, 0.04));
}

.dock-service-tile--recovery {
  border-color: rgba(232, 184, 74, 0.34);
  background:
    linear-gradient(135deg, rgba(232, 184, 74, 0.07), rgba(60, 184, 122, 0.03)),
    rgba(13, 16, 24, 0.42);
}
.dock-service-tile--recovery .dock-service-tile-eyebrow {
  color: rgba(232, 184, 74, 0.85);
}
.dock-service-tile--recovery .dock-service-tile-title {
  color: #f0d889;
}
.dock-service-tile--recovery:hover {
  border-color: rgba(232, 184, 74, 0.58);
  background:
    linear-gradient(135deg, rgba(232, 184, 74, 0.12), rgba(60, 184, 122, 0.06)),
    rgba(13, 16, 24, 0.5);
}

/* Heat pill on dock identity header */
.status-pill--heat-clean {
  background: rgba(120, 200, 140, 0.12);
  border-color: rgba(120, 200, 140, 0.4);
  color: rgba(160, 220, 170, 0.95);
}
.status-pill--heat-flagged {
  background: rgba(230, 158, 80, 0.12);
  border-color: rgba(230, 158, 80, 0.4);
  color: rgba(245, 180, 100, 0.95);
}
.status-pill--heat-hostile {
  background: rgba(220, 100, 100, 0.14);
  border-color: rgba(220, 100, 100, 0.5);
  color: rgba(240, 130, 130, 0.95);
}

/* Heat row inside Relations faction card */
.relations-faction-heat {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.relations-faction-heat-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.relations-faction-heat-bar {
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.relations-faction-heat-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.relations-faction-heat-bar-fill.tier-clean { background: rgba(120, 200, 140, 0.6); }
.relations-faction-heat-bar-fill.tier-flagged { background: rgba(230, 158, 80, 0.7); }
.relations-faction-heat-bar-fill.tier-hostile { background: rgba(220, 100, 100, 0.8); }

/* Outfitter — equipment install/uninstall rows in the Backchannel */
.outfitter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(138, 106, 212, 0.06);
  border: 1px solid rgba(138, 106, 212, 0.18);
  border-radius: 4px;
  margin-bottom: 18px;
}
.outfitter-header-eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(184, 153, 232, 0.7);
  margin-bottom: 4px;
}
.outfitter-header-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: #e8d3ff;
  letter-spacing: 0.6px;
}
.outfitter-slots {
  text-align: right;
}
.outfitter-slots-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.outfitter-slots-pips {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.outfitter-slot-pip {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(138, 106, 212, 0.4);
  background: transparent;
  border-radius: 2px;
}
.outfitter-slot-pip.is-filled {
  background: rgba(138, 106, 212, 0.55);
  border-color: rgba(138, 106, 212, 0.7);
}
.outfitter-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(138, 106, 212, 0.04);
  border: 1px solid rgba(138, 106, 212, 0.12);
  border-radius: 4px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.outfitter-row.is-installed {
  background: rgba(232, 184, 74, 0.05);
  border-color: rgba(232, 184, 74, 0.3);
}
.outfitter-row-info { min-width: 0; }
.outfitter-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.outfitter-row-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: #e0e0e8;
  letter-spacing: 0.4px;
}
.outfitter-row.is-installed .outfitter-row-name {
  color: var(--gold);
}
.outfitter-row-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--body);
  line-height: 1.5;
  margin-bottom: 4px;
}
.outfitter-row-effect {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(184, 153, 232, 0.85);
}
.outfitter-row.is-installed .outfitter-row-effect {
  color: rgba(232, 184, 74, 0.95);
}
.outfitter-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.outfitter-row-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Equipment chip strip on dock identity card */
.dock-equipment-chips {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dock-equipment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: rgba(138, 106, 212, 0.08);
  border: 1px solid rgba(138, 106, 212, 0.32);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(184, 153, 232, 0.95);
}
.dock-equipment-chip-empty {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-style: italic;
}
.shipyard-body, .arms-body, .market-body {
  flex: 1; overflow-y: auto;
  padding: 22px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 184, 212, 0.3) transparent;
}
.shipyard-body::-webkit-scrollbar, .arms-body::-webkit-scrollbar, .market-body::-webkit-scrollbar { width: 4px; }
.shipyard-body::-webkit-scrollbar-track, .arms-body::-webkit-scrollbar-track, .market-body::-webkit-scrollbar-track { background: transparent; }
.shipyard-body::-webkit-scrollbar-thumb, .arms-body::-webkit-scrollbar-thumb, .market-body::-webkit-scrollbar-thumb { background: rgba(74, 184, 212, 0.3); }

/* Section blocks shared by Shipyard and Arms Dealer */
.shipyard-section { margin-bottom: 28px; }
.shipyard-section:last-child { margin-bottom: 0; }
.shipyard-section-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ─── Fleet Repair section ───────────────────────────────────────────── */
.shipyard-fleet-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(74, 184, 212, 0.04);
  border: 1px solid rgba(74, 184, 212, 0.12);
  border-radius: 3px;
  margin-bottom: 10px;
}

/* ─── Buy Ships section ──────────────────────────────────────────────── */
/* Card grid for the SHIPS_FOR_SALE roster. Each card shows the ship's
   class/role, key stats (cargo, hardpoints, equipment slots), description,
   cost and an Acquire button. Faction-locked ships display a faction
   badge in the header. Unaffordable cards dim with reduced opacity. */
.shipyard-buy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shipyard-buy-card {
  padding: 14px 16px;
  background: rgba(232, 184, 74, 0.04);
  border: 1px solid rgba(232, 184, 74, 0.18);
  border-radius: 4px;
  transition: border-color 180ms ease, background 180ms ease;
}
.shipyard-buy-card:hover {
  border-color: rgba(232, 184, 74, 0.35);
  background: rgba(232, 184, 74, 0.06);
}
.shipyard-buy-card.is-unaffordable {
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
.shipyard-buy-card.is-unaffordable:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.shipyard-buy-card-header {
  margin-bottom: 8px;
}
.shipyard-buy-card-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.shipyard-buy-card-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.6px;
  color: rgba(232, 184, 74, 0.95);
  font-weight: 600;
  margin: 0;
}
.shipyard-buy-card-class {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}
.shipyard-buy-faction-badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(184, 153, 232, 0.95);
  background: rgba(184, 153, 232, 0.1);
  border: 1px solid rgba(184, 153, 232, 0.3);
  border-radius: 2px;
}
/* Hangar capacity badge — shown next to "Available for Purchase"
   section title. Floats right at end of title. Turns red+full when
   the player has filled their hangar slots. */
.shipyard-buy-capacity {
  float: right;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: rgba(232, 184, 74, 0.85);
  background: rgba(232, 184, 74, 0.08);
  border: 1px solid rgba(232, 184, 74, 0.25);
  border-radius: 2px;
  text-transform: none;
  font-weight: 500;
}
.shipyard-buy-capacity.is-full {
  color: rgba(212, 90, 96, 0.95);
  background: rgba(212, 90, 96, 0.1);
  border-color: rgba(212, 90, 96, 0.35);
}

/* ─── Hangar Cache section ──────────────────────────────────────────── */
/* Cache rows show a stored weapon/equipment item with mount/courier/sell
   actions. Visual style: muted icon column, info column, action column.
   Distinct from buy-ship cards (which are larger and gold-accented) and
   from fleet rows (which show ship state). */
.shipyard-cache-status {
  float: right;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: rgba(220, 215, 200, 0.65);
  background: rgba(74, 184, 212, 0.06);
  border: 1px solid rgba(74, 184, 212, 0.18);
  border-radius: 2px;
  text-transform: none;
  font-weight: 500;
}
.shipyard-cache-status.is-home {
  color: rgba(74, 220, 168, 0.95);
  background: rgba(74, 220, 168, 0.08);
  border-color: rgba(74, 220, 168, 0.3);
}
.shipyard-cache-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shipyard-cache-empty {
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(220, 215, 200, 0.55);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  text-align: center;
}
.shipyard-cache-empty strong {
  color: rgba(232, 184, 74, 0.85);
  font-weight: 600;
}
.shipyard-cache-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(74, 184, 212, 0.04);
  border: 1px solid rgba(74, 184, 212, 0.12);
  border-radius: 3px;
  transition: border-color 180ms ease;
}
.shipyard-cache-row:hover {
  border-color: rgba(74, 184, 212, 0.25);
}
.shipyard-cache-icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: rgba(74, 184, 212, 0.85);
  background: rgba(74, 184, 212, 0.08);
  border: 1px solid rgba(74, 184, 212, 0.18);
  border-radius: 2px;
}
.shipyard-cache-info {
  flex: 1;
  min-width: 0;
}
.shipyard-cache-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: rgba(232, 232, 232, 0.95);
  font-weight: 500;
}
.shipyard-cache-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.shipyard-cache-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.shipyard-cache-btn {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(220, 215, 200, 0.85);
  border-radius: 2px;
  cursor: pointer;
  font-weight: 500;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.shipyard-cache-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(232, 232, 232, 1);
}
.shipyard-cache-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.shipyard-cache-btn--mount {
  background: rgba(74, 220, 168, 0.12);
  border-color: rgba(74, 220, 168, 0.3);
  color: rgba(74, 220, 168, 0.95);
}
.shipyard-cache-btn--mount:hover:not(:disabled) {
  background: rgba(74, 220, 168, 0.18);
  border-color: rgba(74, 220, 168, 0.45);
}
.shipyard-cache-btn--courier {
  background: rgba(232, 184, 74, 0.1);
  border-color: rgba(232, 184, 74, 0.3);
  color: rgba(232, 184, 74, 0.95);
}
.shipyard-cache-btn--courier:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.16);
  border-color: rgba(232, 184, 74, 0.45);
}
.shipyard-cache-btn--sell {
  background: rgba(184, 153, 232, 0.08);
  border-color: rgba(184, 153, 232, 0.25);
  color: rgba(184, 153, 232, 0.9);
}
.shipyard-cache-btn--sell:hover:not(:disabled) {
  background: rgba(184, 153, 232, 0.14);
  border-color: rgba(184, 153, 232, 0.4);
}

/* ─── Arms slot Store action variant ────────────────────────────────── */
/* When the player uninstalls a weapon, two buttons replace the single
   Uninstall button: Sell (existing behavior) and Store (sends to cache).
   Both buttons live inside .arms-slot-actions which occupies the third
   grid column of .arms-slot — keeps the row's layout 3-column rather
   than wrapping a 4th child onto a phantom second row. */
.arms-slot-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
}
.arms-slot-action--store {
  background: rgba(232, 184, 74, 0.1);
  border-color: rgba(232, 184, 74, 0.3);
  color: rgba(232, 184, 74, 0.95);
}
.arms-slot-action--store:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.16);
}

/* ─── Backchannel uninstall action group ────────────────────────────── */
/* Uninstall flow at Backchannel: side-by-side Sell + Store buttons. */
.backchannel-uninstall-actions {
  display: flex;
  gap: 6px;
}
.backchannel-wash-btn--store {
  background: rgba(232, 184, 74, 0.1);
  border-color: rgba(232, 184, 74, 0.3);
  color: rgba(232, 184, 74, 0.95);
}
.backchannel-wash-btn--store:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.16);
}
.shipyard-buy-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.shipyard-buy-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.shipyard-buy-stat-label {
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 9px;
}
.shipyard-buy-stat-value {
  color: rgba(220, 215, 200, 0.95);
  font-weight: 600;
}
.shipyard-buy-card-description {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.78);
  margin: 0 0 12px;
  font-style: italic;
}
.shipyard-buy-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.shipyard-buy-card-cost {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: rgba(232, 184, 74, 0.95);
  letter-spacing: 0.4px;
}
.shipyard-buy-card-cost.is-unaffordable {
  color: rgba(212, 90, 96, 0.85);
}
.shipyard-buy-btn {
  padding: 8px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(15, 15, 23, 0.95);
  background: rgba(232, 184, 74, 0.85);
  border: 1px solid rgba(232, 184, 74, 0.95);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  transition: background 180ms ease, transform 100ms ease;
}
.shipyard-buy-btn:hover:not(:disabled) {
  background: rgba(232, 184, 74, 1);
  transform: translateY(-1px);
}
.shipyard-buy-btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(220, 215, 200, 0.4);
  cursor: not-allowed;
}

/* ─── Active Ship card additions: name + logbook button ─────────────── */
.shipyard-ship-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.shipyard-ship-name-model {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.shipyard-ship-mastery-title {
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(232, 184, 74, 0.95);
  background: rgba(232, 184, 74, 0.08);
  border: 1px solid rgba(232, 184, 74, 0.32);
  border-radius: 2px;
  margin-left: 6px;
}
.shipyard-ship-logbook-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(74, 184, 212, 0.95);
  background: rgba(74, 184, 212, 0.08);
  border: 1px solid rgba(74, 184, 212, 0.3);
  border-radius: 3px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 180ms ease, border-color 180ms ease;
}
.shipyard-ship-logbook-btn:hover {
  background: rgba(74, 184, 212, 0.15);
  border-color: rgba(74, 184, 212, 0.5);
}

/* ─── Christening Modal ─────────────────────────────────────────────── */
/* Appears on ship purchase. Asks the player to give the new vessel a
   name. Doubles as a Rename modal (reused with different title text)
   when invoked from the Logbook viewer. */
.christening-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.christening-modal.is-open { display: flex; }
.christening-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.christening-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 26px 30px;
  background: rgba(15, 17, 26, 0.98);
  border: 1px solid rgba(232, 184, 74, 0.4);
  border-radius: 5px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.6), 0 0 60px rgba(232, 184, 74, 0.06);
}
.christening-modal-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(232, 184, 74, 0.98);
  margin: 0 0 6px;
  font-weight: 600;
}
.christening-modal-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(220, 215, 200, 0.78);
  margin: 0 0 18px;
  line-height: 1.5;
  font-style: italic;
}
.christening-modal-ship-info {
  padding: 10px 14px;
  background: rgba(232, 184, 74, 0.04);
  border-left: 3px solid rgba(232, 184, 74, 0.5);
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(220, 215, 200, 0.9);
  letter-spacing: 0.4px;
  line-height: 1.6;
}
.christening-modal-ship-info-model {
  color: rgba(232, 184, 74, 0.95);
  font-weight: 600;
  letter-spacing: 0.8px;
}
.christening-modal-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: end;
  gap: 8px;
  margin-bottom: 8px;
}
.christening-modal-input-label {
  grid-column: 1 / -1;
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.christening-modal-input {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(232, 184, 74, 0.98);
  background: rgba(232, 184, 74, 0.06);
  border: 1px solid rgba(232, 184, 74, 0.3);
  border-radius: 3px;
  outline: none;
  transition: border-color 180ms ease;
}
.christening-modal-input:focus {
  border-color: rgba(232, 184, 74, 0.6);
}
.christening-modal-suggest {
  grid-column: 2;
  width: 36px; height: 36px;
  font-size: 14px;
  color: rgba(74, 184, 212, 0.9);
  background: rgba(74, 184, 212, 0.08);
  border: 1px solid rgba(74, 184, 212, 0.3);
  border-radius: 3px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 180ms ease;
}
.christening-modal-suggest:hover {
  background: rgba(74, 184, 212, 0.18);
}
.christening-modal-hint {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(220, 215, 200, 0.55);
  margin: 0 0 18px;
  line-height: 1.5;
}
.christening-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.christening-modal-cancel,
.christening-modal-confirm {
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  transition: background 180ms ease, transform 100ms ease;
}
.christening-modal-cancel {
  color: rgba(220, 215, 200, 0.85);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.christening-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.04);
}
.christening-modal-confirm {
  color: rgba(15, 15, 23, 0.95);
  background: rgba(232, 184, 74, 0.85);
  border: 1px solid rgba(232, 184, 74, 0.95);
}
.christening-modal-confirm:hover {
  background: rgba(232, 184, 74, 1);
  transform: translateY(-1px);
}
.christening-modal-confirm:disabled {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(220, 215, 200, 0.4);
  cursor: not-allowed;
}

/* ─── Logbook Modal ─────────────────────────────────────────────────── */
.logbook-modal {
  position: fixed;
  inset: 0;
  z-index: 1190;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.logbook-modal.is-open { display: flex; }
.logbook-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.logbook-modal-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: rgba(15, 17, 26, 0.98);
  border: 1px solid rgba(74, 184, 212, 0.32);
  border-radius: 5px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.6);
}
.logbook-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 26px 16px;
  border-bottom: 1px solid rgba(74, 184, 212, 0.15);
}
.logbook-modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(232, 184, 74, 0.95);
  margin: 0;
  font-weight: 600;
}
.logbook-modal-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.6px;
  margin-top: 6px;
}
.logbook-modal-body {
  padding: 18px 26px 22px;
  overflow-y: auto;
}
.logbook-modal-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(74, 184, 212, 0.04);
  border: 1px solid rgba(74, 184, 212, 0.12);
  border-radius: 3px;
}
.logbook-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logbook-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.logbook-stat-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(220, 215, 200, 0.95);
  font-weight: 600;
}
.logbook-modal-actions-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.logbook-modal-rename-btn {
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(232, 184, 74, 0.95);
  background: rgba(232, 184, 74, 0.06);
  border: 1px solid rgba(232, 184, 74, 0.3);
  border-radius: 3px;
  cursor: pointer;
  transition: background 180ms ease;
}
.logbook-modal-rename-btn:hover {
  background: rgba(232, 184, 74, 0.15);
}
.logbook-modal-section-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logbook-modal-entries {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.logbook-entry {
  display: grid;
  grid-template-columns: 70px 24px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 3px 3px 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.9);
}
.logbook-entry-cycle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.6px;
}
.logbook-entry-glyph {
  font-size: 11px;
  text-align: center;
  font-family: var(--font-mono);
}
.logbook-entry-text {
  color: rgba(220, 215, 200, 0.92);
}
.logbook-entry.is-milestone {
  background: rgba(232, 184, 74, 0.06);
  border-left-color: rgba(232, 184, 74, 0.6);
}
.logbook-entry.is-milestone .logbook-entry-glyph { color: rgba(232, 184, 74, 0.95); }
.logbook-entry.is-combat {
  background: rgba(212, 90, 96, 0.05);
  border-left-color: rgba(212, 90, 96, 0.5);
}
.logbook-entry.is-combat .logbook-entry-glyph { color: rgba(212, 90, 96, 0.85); }
.logbook-entry.is-commerce {
  background: rgba(110, 200, 130, 0.04);
  border-left-color: rgba(110, 200, 130, 0.4);
}
.logbook-entry.is-commerce .logbook-entry-glyph { color: rgba(110, 200, 130, 0.85); }
.logbook-entry.is-damage {
  background: rgba(232, 134, 74, 0.05);
  border-left-color: rgba(232, 134, 74, 0.5);
}
.logbook-entry.is-damage .logbook-entry-glyph { color: rgba(232, 134, 74, 0.85); }
.logbook-entry.is-event .logbook-entry-glyph { color: rgba(74, 184, 212, 0.9); }
.logbook-empty {
  padding: 18px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.shipyard-fleet-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: rgba(220, 215, 200, 0.85);
}
.shipyard-fleet-bulk {
  padding: 8px 14px;
  background: rgba(232, 184, 74, 0.12);
  border: 1px solid rgba(232, 184, 74, 0.45);
  border-radius: 3px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.shipyard-fleet-bulk:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.22);
  border-color: rgba(232, 184, 74, 0.7);
  color: #fff;
}
.shipyard-fleet-bulk:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}
.shipyard-fleet-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.shipyard-fleet-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}
.shipyard-fleet-info { min-width: 0; }
.shipyard-fleet-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
  margin-bottom: 6px;
}
.shipyard-fleet-class {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
}
.shipyard-fleet-hull {
  display: flex; align-items: center; gap: 10px;
}
.shipyard-fleet-hull-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--body);
  min-width: 64px;
}
.shipyard-fleet-hull-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  max-width: 200px;
}
.shipyard-fleet-hull-fill {
  height: 100%;
  width: var(--pct, 100%);
  background: rgba(120, 220, 160, 0.7);
  transition: width 0.3s ease;
}
.shipyard-fleet-hull-fill.is-warn   { background: var(--gold); }
.shipyard-fleet-hull-fill.is-danger { background: rgba(232, 96, 96, 0.85); }
.shipyard-fleet-condition {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(232, 96, 96, 0.1);
  border: 1px solid rgba(232, 96, 96, 0.35);
  color: rgba(255, 130, 130, 1);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}
.shipyard-fleet-condition.is-ready {
  background: rgba(60, 184, 122, 0.1);
  border-color: rgba(60, 184, 122, 0.35);
  color: rgba(120, 220, 160, 0.95);
}
.shipyard-fleet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.shipyard-fleet-restore,
.shipyard-fleet-switch {
  padding: 9px 14px;
  background: rgba(74, 184, 212, 0.10);
  border: 1px solid rgba(74, 184, 212, 0.40);
  border-radius: 3px;
  color: var(--cyan, #4ab8d4);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.shipyard-fleet-switch {
  background: rgba(232, 184, 74, 0.10);
  border-color: rgba(232, 184, 74, 0.45);
  color: var(--gold);
}
.shipyard-fleet-restore:hover:not(:disabled),
.shipyard-fleet-switch:hover:not(:disabled) {
  background: rgba(74, 184, 212, 0.20);
  border-color: rgba(74, 184, 212, 0.65);
  color: #fff;
}
.shipyard-fleet-switch:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.22);
  border-color: rgba(232, 184, 74, 0.75);
}
.shipyard-fleet-restore:disabled,
.shipyard-fleet-switch:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}
.shipyard-fleet-empty {
  padding: 18px 16px;
  text-align: center;
  background: rgba(120, 220, 160, 0.04);
  border: 1px solid rgba(120, 220, 160, 0.15);
  border-radius: 3px;
}
.shipyard-fleet-empty-line {
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(120, 220, 160, 0.95);
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.shipyard-fleet-empty-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--muted);
}

/* Active ship summary card at top of Shipyard */
.shipyard-ship-card {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.04), rgba(13, 16, 24, 0.4));
  border: 1px solid rgba(74, 184, 212, 0.18);
}
.shipyard-ship-name {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
  margin: 0 0 4px;
}
.shipyard-ship-class {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 14px;
}
.shipyard-ship-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  font-family: var(--font-body);
}
.shipyard-stat-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  display: block; margin-bottom: 3px;
}
.shipyard-stat-value {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright);
}

/* Hull bar */
.shipyard-hull-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  margin-top: 10px;
  overflow: hidden;
}
.shipyard-hull-fill {
  height: 100%;
  width: var(--pct, 100%);
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width 0.4s ease-out;
}
.shipyard-hull-fill.is-warn {
  background: linear-gradient(90deg, #d4a14a, #e8b84a);
}
.shipyard-hull-fill.is-danger {
  background: linear-gradient(90deg, #b84a4a, #d44a4a);
}

/* Service rows — repair, refuel, etc. */
.shipyard-service {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}

/* ─── Supply pack loadout summary — shown above the buy buttons in
   the Arms Dealer to make the player's current stockpile visible. */
.shipyard-mastery-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(74, 184, 212, 0.05);
  border-left: 2px solid rgba(74, 184, 212, 0.55);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.45;
  color: rgba(220, 215, 200, 0.78);
}

.shipyard-upgrade-row {
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.045), rgba(255, 255, 255, 0.018));
  border-color: rgba(74, 184, 212, 0.14);
}

.shipyard-upgrade-row.is-locked {
  background: rgba(255, 255, 255, 0.018);
  border-color: rgba(232, 184, 74, 0.16);
}

.shipyard-upgrade-row.is-attachment {
  border-style: dashed;
  border-color: rgba(232, 184, 74, 0.24);
}

.shipyard-upgrade-benefit {
  margin-top: 5px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan);
}

.shipyard-service-action.is-locked {
  border-color: rgba(232, 184, 74, 0.55);
  color: var(--gold);
}

.supply-pack-loadout {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.05), rgba(74, 184, 212, 0.01));
  border-left: 3px solid var(--cyan);
  margin-bottom: 12px;
}
.supply-pack-loadout--empty {
  background: rgba(255, 255, 255, 0.02);
  border-left-color: rgba(255, 255, 255, 0.1);
}
.supply-pack-loadout-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}
.supply-pack-loadout-eyebrow--gold { color: var(--gold); }
.supply-pack-loadout--empty .supply-pack-loadout-eyebrow { color: var(--muted); }
.supply-pack-loadout-line {
  padding: 4px 0;
}
.supply-pack-loadout-line + .supply-pack-loadout-line {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.supply-pack-loadout-list {
  font-family: var(--font-display); font-size: 13px;
  color: var(--bright); letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.supply-pack-loadout-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); font-style: italic;
}

/* ─── Fuel state strip in shipyard — visible in the refuel service
   tile so the player sees current fuel % and the urgency. */
.shipyard-fuel-state {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
}
.shipyard-fuel-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  max-width: 200px;
}
.shipyard-fuel-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--cyan);
  transition: width 0.4s, background 0.2s;
}
.shipyard-fuel-bar-fill.is-warn { background: var(--amber); }
.shipyard-fuel-bar-fill.is-danger { background: var(--red); }
.shipyard-fuel-pct {
  font-family: var(--font-data); font-size: 11px;
  color: var(--bright); letter-spacing: 0.5px;
  min-width: 38px;
}
.shipyard-fuel-status {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px; text-transform: uppercase;
}
.shipyard-fuel-status.is-warn { color: var(--amber); }
.shipyard-fuel-status.is-danger { color: var(--red); }
.shipyard-service.is-recommended {
  border-color: rgba(232, 184, 74, 0.3);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.04), rgba(13, 16, 24, 0.4));
}
.shipyard-service-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.shipyard-service.is-recommended .shipyard-service-eyebrow { color: var(--gold); }
.shipyard-service-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
  margin: 2px 0 4px;
}
.shipyard-service-detail {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.4;
}
.shipyard-service-action {
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 8px 14px;
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: 0.15s;
  white-space: nowrap;
}
.shipyard-service-action:hover:not(:disabled) {
  background: rgba(74, 184, 212, 0.1);
}
.shipyard-service-action.is-recommended {
  border-color: var(--gold);
  color: var(--gold);
}
.shipyard-service-action.is-recommended:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.1);
}
.shipyard-service-action:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.shipyard-service-cost {
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1px;
  margin-top: 4px;
}
.shipyard-service-met {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--green, #3cb87a);
  white-space: nowrap;
}

/* Arms dealer — loadout view */
.arms-loadout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.arms-loadout-cell {
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
}
.arms-loadout-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.arms-loadout-value {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright);
}
.arms-loadout-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--body); margin-top: 4px;
}

/* ─── Arms Dealer rebuild — readout, slots, catalog ────────────────── */
.arms-readout {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(232, 96, 96, 0.06), rgba(232, 96, 96, 0.02));
  border: 1px solid rgba(232, 96, 96, 0.18);
  border-radius: 4px;
  margin-bottom: 18px;
}
.arms-readout-cell {
  padding: 8px 10px;
}
.arms-readout-cell--primary {
  border-right: 1px solid rgba(232, 96, 96, 0.15);
  padding-right: 16px;
}
.arms-readout-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.arms-readout-value {
  font-family: var(--font-display); font-weight: 600;
  color: var(--bright);
  font-size: 18px;
  letter-spacing: 0.5px;
}
.arms-readout-cell--primary .arms-readout-value {
  font-size: 32px;
  color: rgba(255, 200, 130, 1);
  line-height: 1;
}
.arms-readout-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--body); margin-top: 4px;
}

/* Hardpoint slots — visual list of installed weapons */
.arms-slot-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.arms-slot {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--accent, rgba(255, 255, 255, 0.15));
  border-radius: 3px;
}
.arms-slot.is-empty {
  opacity: 0.55;
  border-left-style: dashed;
}
.arms-slot-icon {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--accent, rgba(255, 255, 255, 0.4));
  text-align: center;
}
.arms-slot.is-empty .arms-slot-icon { color: rgba(255, 255, 255, 0.2); }
.arms-slot-info { min-width: 0; }
.arms-slot-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
  margin-bottom: 4px;
}
.arms-slot-meta {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px;
}
.arms-slot-power {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--accent, var(--bright));
  font-weight: 600;
}
.arms-slot-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 2px;
}
.arms-slot-summary {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.7);
}
.arms-slot-action {
  padding: 8px 14px;
  background: rgba(232, 96, 96, 0.08);
  border: 1px solid rgba(232, 96, 96, 0.3);
  border-radius: 3px;
  color: rgba(255, 180, 180, 0.95);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  line-height: 1.2;
}
.arms-slot-action:hover {
  background: rgba(232, 96, 96, 0.18);
  border-color: rgba(232, 96, 96, 0.55);
  color: #fff;
}
.arms-slot-action-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  opacity: 0.85;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* Catalog rows */
.arms-cat-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.arms-cat-stock-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: -4px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.arms-cat-footer-hint {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(138, 106, 212, 0.05);
  border: 1px solid rgba(138, 106, 212, 0.15);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.75);
}
.arms-cat-footer-hint strong {
  color: rgba(184, 153, 232, 1);
  font-weight: 600;
}
.arms-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--accent, rgba(255, 255, 255, 0.15));
  border-radius: 3px;
  align-items: center;
}
.arms-cat-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.arms-cat-info { min-width: 0; }
.arms-cat-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.arms-cat-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #f0e8d8;
}
.arms-cat-power {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, var(--bright));
  letter-spacing: 0.5px;
}
.arms-cat-meta {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px;
}
.arms-cat-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 2px;
}
.arms-cat-tier {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid;
}
.arms-cat-tier--ok {
  background: rgba(74, 184, 130, 0.08);
  color: rgba(120, 220, 160, 0.95);
  border-color: rgba(74, 184, 130, 0.3);
}
.arms-cat-tier--locked {
  background: rgba(232, 184, 74, 0.08);
  color: var(--gold);
  border-color: rgba(232, 184, 74, 0.3);
}
.arms-cat-summary {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.7);
}
.arms-cat-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.arms-cat-buy {
  padding: 9px 14px;
  background: rgba(232, 184, 74, 0.12);
  border: 1px solid rgba(232, 184, 74, 0.45);
  border-radius: 3px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.arms-cat-buy:hover:not(:disabled) {
  background: rgba(232, 184, 74, 0.22);
  border-color: rgba(232, 184, 74, 0.7);
  color: #fff;
}
.arms-cat-buy--secondary {
  background: rgba(74, 184, 212, 0.08);
  border-color: rgba(74, 184, 212, 0.35);
  color: var(--cyan);
}
.arms-cat-buy--secondary:hover:not(:disabled) {
  background: rgba(74, 184, 212, 0.16);
  border-color: rgba(74, 184, 212, 0.55);
}
.arms-cat-buy:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════
   4f. COURIER OFFICE — manifest builder for shipping cargo home
   ═══════════════════════════════════════════════════════════════════════ */
.courier-office-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(960px, 96vw);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.98), rgba(10, 12, 20, 0.99));
  border-left: 1px solid rgba(74, 184, 212, 0.25);
  z-index: 10;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease-out;
}
.courier-office-overlay.is-open {
  transform: translateX(0);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}

/* Carrier toggle bar — at top, above the columns */
.courier-carrier-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.courier-carrier-option {
  appearance: none; cursor: pointer;
  background: rgba(13, 16, 24, 0.7);
  border: 0;
  padding: 14px 22px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  border-bottom: 2px solid transparent;
  transition: 0.15s;
}
.courier-carrier-option:hover { background: rgba(13, 16, 24, 0.9); }
.courier-carrier-option.is-selected.is-crew {
  border-bottom-color: var(--gold);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.06), rgba(13, 16, 24, 0.9));
}
.courier-carrier-option.is-selected.is-independent {
  border-bottom-color: var(--cyan);
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.06), rgba(13, 16, 24, 0.9));
}
.courier-carrier-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.courier-carrier-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
}
.courier-carrier-option.is-crew .courier-carrier-eyebrow { color: var(--gold); }
.courier-carrier-option.is-independent .courier-carrier-eyebrow { color: var(--cyan); }
.courier-carrier-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.courier-carrier-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); line-height: 1.4;
}

/* Body — two columns */
.courier-office-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr min(360px, 38%);
  gap: 0;
  min-height: 0;
}
.courier-sources {
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.04);
  /* Thin, neon-tinted scrollbar to match the rest of the UI */
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 184, 212, 0.3) transparent;
}
.courier-sources::-webkit-scrollbar { width: 4px; }
.courier-sources::-webkit-scrollbar-track { background: transparent; }
.courier-sources::-webkit-scrollbar-thumb { background: rgba(74, 184, 212, 0.3); border-radius: 0; }
.courier-sources::-webkit-scrollbar-thumb:hover { background: rgba(74, 184, 212, 0.5); }

/* Manifest rail can also scroll if a long list builds up — same treatment */
.courier-manifest-rail {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 184, 212, 0.3) transparent;
}
.courier-manifest-rail::-webkit-scrollbar { width: 4px; }
.courier-manifest-rail::-webkit-scrollbar-track { background: transparent; }
.courier-manifest-rail::-webkit-scrollbar-thumb { background: rgba(74, 184, 212, 0.3); border-radius: 0; }
.courier-section {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.courier-section:last-child { border-bottom: 0; }
.courier-section-title {
  margin: 0;
  padding: 14px 22px 10px;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.courier-source-subhead {
  padding: 10px 22px 6px;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(95, 207, 232, 0.75);
  background: rgba(74, 184, 212, 0.025);
}

/* Source rows — same shape as market-row but with a stepper */
.courier-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.courier-row:hover { background: rgba(255,255,255,0.02); }
.courier-row--weapon {
  border-left: 2px solid rgba(184, 153, 232, 0.45);
  background: rgba(184, 153, 232, 0.025);
}
.courier-row--weapon .courier-row-symbol {
  border-color: rgba(184, 153, 232, 0.35);
  background: rgba(184, 153, 232, 0.06);
  color: rgba(198, 168, 255, 0.95);
}
.courier-row-symbol {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background: rgba(74, 184, 212, 0.04);
  font-family: var(--font-data); font-size: 12px; font-weight: 700;
  color: var(--cyan); letter-spacing: 1px;
}
.courier-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.courier-row-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.courier-row-meta {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px; text-transform: uppercase;
}
.courier-row-price {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--cyan); letter-spacing: 0.3px;
  text-align: right;
  white-space: nowrap;
}

/* Stepper */
.courier-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(255,255,255,0.1);
}
.courier-stepper-btn {
  appearance: none; cursor: pointer;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: var(--body);
  font-family: var(--font-display); font-size: 14px;
  transition: 0.1s;
}
.courier-stepper-btn:hover:not(:disabled) {
  background: rgba(74, 184, 212, 0.1);
  color: var(--cyan);
}
.courier-stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.courier-stepper-value {
  width: 32px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.courier-stepper-value.is-active { color: var(--gold); }

/* Manifest rail */
.courier-manifest-rail {
  background: rgba(8, 10, 16, 0.6);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.courier-manifest-rail .courier-section-title {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.courier-manifest-empty {
  padding: 32px 22px;
  text-align: center;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); font-style: italic;
  line-height: 1.5;
}
.courier-manifest-list {
  flex: 1;
  padding: 4px 0;
}
.courier-manifest-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.courier-manifest-row-name {
  font-family: var(--font-body); font-size: 12px;
  color: var(--bright); line-height: 1.35;
}
.courier-manifest-row-name strong {
  font-family: var(--font-display); font-weight: 500;
}
.courier-manifest-row-source {
  display: block;
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
  margin-top: 2px;
}
.courier-manifest-row-cost {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  color: var(--gold); white-space: nowrap;
}
.courier-manifest-row-cost.is-free { color: var(--muted); }

/* Ledger summary */
.courier-ledger {
  padding: 14px 22px;
  border-top: 1px solid rgba(74, 184, 212, 0.2);
  background: rgba(13, 16, 24, 0.7);
}
.courier-ledger-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.6;
}
.courier-ledger-row + .courier-ledger-row { margin-top: 4px; }
.courier-ledger-row-label { color: var(--muted); }
.courier-ledger-row-value { color: var(--body); font-family: var(--font-data); }
.courier-ledger-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 10px 0 8px;
}
.courier-ledger-row.is-total {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright);
  padding-top: 4px;
}
.courier-ledger-row.is-total .courier-ledger-row-value {
  color: var(--gold); font-family: var(--font-display);
}
.courier-ledger-eta {
  margin-top: 12px;
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cyan);
}

/* Responsive — collapse to single column on narrow screens */
@media (max-width: 720px) {
  .courier-office-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .courier-manifest-rail {
    border-top: 1px solid rgba(255,255,255,0.06);
    max-height: 50vh;
  }
}

/* Inbound courier list */
.storage-couriers-list {
  display: flex; flex-direction: column;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 24px;
}
.storage-courier {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  background: rgba(13, 16, 24, 0.7);
  border-left: 2px solid rgba(74, 184, 212, 0.4);
}
.storage-courier.is-crew {
  border-left-color: var(--gold);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.04), rgba(13, 16, 24, 0.7));
}
.storage-courier-symbol {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background: rgba(74, 184, 212, 0.04);
  font-family: var(--font-data); font-size: 12px; font-weight: 700;
  color: var(--cyan); letter-spacing: 1px;
}
.storage-courier.is-crew .storage-courier-symbol {
  border-color: rgba(232, 184, 74, 0.4);
  background: rgba(232, 184, 74, 0.04);
  color: var(--gold);
}
.storage-courier-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.storage-courier-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright);
}
.storage-courier-meta {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
}
.storage-courier.is-crew .storage-courier-meta { color: var(--gold); }
.storage-courier-eta {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--cyan); letter-spacing: 0.3px;
  white-space: nowrap;
}
.storage-courier.is-crew .storage-courier-eta { color: var(--gold); }

/* Deposit/withdraw flow on dock screen */
/* Company Status — mid-run read-only overlay */
.company-status-overlay {
  position: fixed;
  /* The proto-chrome topbar sits at top: 0 with z-index 1000. Start the overlay
     below it (50px matches the existing .screen min-height calc) so the title
     and close button aren't clipped by the topbar. */
  top: 50px; right: 0; bottom: 0;
  width: min(640px, 96vw);
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.98), rgba(10, 12, 20, 0.99));
  border-left: 1px solid rgba(74, 184, 212, 0.25);
  z-index: 30;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease-out;
}
.company-status-overlay.is-open {
  transform: translateX(0);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}
.company-status-body {
  flex: 1; overflow-y: auto;
  padding: 20px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 184, 212, 0.3) transparent;
}
.company-status-body::-webkit-scrollbar { width: 4px; }
.company-status-body::-webkit-scrollbar-track { background: transparent; }
.company-status-body::-webkit-scrollbar-thumb { background: rgba(74, 184, 212, 0.3); }
.company-status-section {
  margin-bottom: 28px;
}
.company-status-section:last-child { margin-bottom: 0; }
.company-status-section-title {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.company-status-project {
  padding: 16px 20px;
  background: rgba(74, 184, 212, 0.04);
  border: 1px solid rgba(74, 184, 212, 0.18);
}

/* ─── Cryos Debt panel — Foundation Loan + any active liquidity ──── */
.company-status-debt {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(220, 200, 140, 0.04), rgba(0, 0, 0, 0.15));
  border: 1px solid rgba(220, 200, 140, 0.22);
  border-left: 3px solid rgba(232, 215, 165, 1);
}
.company-status-debt-eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 215, 165, 1);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(220, 200, 140, 0.18);
}
.company-status-debt-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(220, 215, 200, 0.7);
  margin: 4px 0 12px;
}
.company-status-debt > .company-status-mat:not(:first-of-type) {
  margin-top: 4px;
}

/* ─── Cryos Visibility section ──────────────────────────────────────
   Tier-keyed border + accent color, matching the dashboard pill so the
   player learns the visual language across surfaces. */
.company-status-cryos-vis {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(180, 180, 200, 0.04), rgba(0, 0, 0, 0.15));
  border: 1px solid rgba(180, 180, 200, 0.22);
  border-left: 3px solid rgba(220, 220, 235, 0.85);
  border-radius: 3px;
  --vis-accent: rgba(220, 220, 235, 0.9);
  --vis-fill: rgba(180, 180, 200, 0.4);
}
.company-status-cryos-vis.is-cryos-watched {
  border-left-color: rgba(220, 200, 140, 0.95);
  background: linear-gradient(135deg, rgba(220, 200, 140, 0.05), rgba(0, 0, 0, 0.15));
  --vis-accent: rgba(232, 215, 165, 1);
  --vis-fill: rgba(220, 200, 140, 0.55);
}
.company-status-cryos-vis.is-cryos-flagged {
  border-color: rgba(232, 184, 74, 0.4);
  border-left-color: rgba(232, 184, 74, 1);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.06), rgba(0, 0, 0, 0.15));
  --vis-accent: rgba(248, 200, 100, 1);
  --vis-fill: rgba(232, 184, 74, 0.7);
}
.company-status-cryos-vis.is-cryos-marked {
  border-color: rgba(232, 96, 96, 0.4);
  border-left-color: rgba(232, 96, 96, 1);
  background: linear-gradient(135deg, rgba(232, 96, 96, 0.06), rgba(0, 0, 0, 0.15));
  --vis-accent: rgba(248, 130, 130, 1);
  --vis-fill: rgba(232, 96, 96, 0.7);
}
.company-status-cryos-vis.is-cryos-hunted {
  border-color: rgba(232, 60, 60, 0.5);
  border-left-color: rgba(255, 80, 80, 1);
  background: linear-gradient(135deg, rgba(232, 60, 60, 0.1), rgba(0, 0, 0, 0.2));
  --vis-accent: rgba(255, 110, 110, 1);
  --vis-fill: rgba(232, 60, 60, 0.85);
}
.cryos-vis-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.cryos-vis-eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vis-accent);
}
.cryos-vis-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.3px;
}
.cryos-vis-tier {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vis-accent);
  margin-left: 6px;
}
.cryos-vis-meter {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: visible;
}
.cryos-vis-meter-fill {
  height: 100%;
  background: var(--vis-fill);
  transition: width 0.4s ease;
}
.cryos-vis-tick {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: auto;
  cursor: help;
}
.cryos-vis-desc {
  font-family: var(--font-body);
  font-size: 12px; line-height: 1.5;
  color: rgba(220, 215, 200, 0.85);
  margin-bottom: 10px;
}
.cryos-vis-thresholds {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: rgba(220, 215, 200, 0.65);
  padding: 6px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline;
}
.cryos-vis-thresholds strong {
  color: var(--vis-accent);
  font-weight: 600;
}
.cryos-vis-threshold-label {
  color: rgba(220, 215, 200, 0.5);
}
.cryos-vis-threshold-gap {
  color: rgba(220, 215, 200, 0.45);
}
.cryos-vis-thresholds--prev strong {
  color: rgba(120, 200, 140, 0.95);  /* green = "could escape to here" */
}

/* ─── Recent Cryos events history list ──────────────────────────── */
.cryos-vis-history {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.cryos-vis-history-title {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(220, 215, 200, 0.55);
  margin-bottom: 8px;
}
.cryos-vis-history-empty {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.cryos-vis-history-row {
  display: grid;
  grid-template-columns: 44px 36px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.cryos-vis-history-row:last-child { border-bottom: 0; }
.cryos-vis-history-cycle {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.6px;
  color: rgba(220, 215, 200, 0.5);
  text-transform: uppercase;
}
.cryos-vis-history-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  letter-spacing: 0.2px;
}
.cryos-vis-history-delta.is-up   { color: rgba(248, 130, 130, 1); }
.cryos-vis-history-delta.is-down { color: rgba(120, 200, 140, 0.95); }
.cryos-vis-history-reason {
  font-family: var(--font-body);
  color: rgba(220, 215, 200, 0.85);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cryos-vis-history-after {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(220, 215, 200, 0.5);
  letter-spacing: 0.4px;
}
.company-status-project-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
  margin: 0 0 4px;
}
.company-status-project-pct {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 10px;
}
.company-status-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 14px;
  overflow: hidden;
}
.company-status-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  width: var(--pct, 0%);
}
.company-status-mat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
  font-family: var(--font-body); font-size: 12px;
}
.company-status-mat {
  display: flex; justify-content: space-between;
  color: var(--body); padding: 3px 0;
}
.company-status-mat-name { color: var(--muted); }
.company-status-mat.is-met .company-status-mat-name,
.company-status-mat.is-met .company-status-mat-value { color: var(--green, #3cb87a); }
.company-status-empty {
  padding: 20px; text-align: center;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); font-style: italic;
}



.storage-transfer-header {
  padding: 20px 26px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.storage-transfer-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.storage-transfer-tab {
  appearance: none; cursor: pointer;
  background: transparent; border: 0;
  padding: 14px 16px;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: 0.15s;
}
.storage-transfer-tab:hover { color: var(--body); background: rgba(255,255,255,0.02); }
.storage-transfer-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }

.storage-transfer-list {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
}
.storage-transfer-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.storage-transfer-row:hover { background: rgba(255,255,255,0.02); }

/* Quick-action shortcut strip at the top of Withdraw — pulls contract cargo */
.storage-contract-shortcut {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 24px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.05), rgba(13, 16, 24, 0.4));
  border-bottom: 1px solid rgba(232, 184, 74, 0.14);
}
.storage-contract-shortcut-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.storage-contract-shortcut-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
}
.storage-contract-shortcut-helper {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.4;
}
.storage-contract-shortcut .market-action-btn {
  white-space: nowrap;
}

/* Home Operations strip on the Overview tab */
/* ═══════════════════════════════════════════════════════════════════
   Home Facilities panel — Overview surface for production buildings
   ═══════════════════════════════════════════════════════════════════
   Sits between the dashboard cards and the Recommended Run panel.
   One card per building, plus a header strip with capacity bar.
   Always visible (even with no buildings yet) so the section
   signals that production is a thing in the game. */
.home-ops-strip {
  margin: 24px 0;
  padding: 16px 18px 18px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.05), rgba(13, 16, 24, 0.5));
  border: 1px solid rgba(232, 184, 74, 0.16);
  border-left: 3px solid var(--gold);
}
.home-facilities-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.home-facilities-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.home-facilities-summary {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.home-facilities-cap {
  text-align: right;
  min-width: 200px;
}
.home-facilities-cap-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.home-facilities-cap-value {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--body);
  margin-bottom: 6px;
  letter-spacing: 0.4px;
}
.home-facilities-cap-value strong { color: var(--bright); font-weight: 500; }
.home-facilities-cap-bar {
  width: 200px; height: 4px;
  background: rgba(255,255,255,0.06);
  margin-left: auto;
  position: relative;
  overflow: hidden;
}
.home-facilities-cap-fill {
  position: absolute; inset: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--cyan), rgba(74, 184, 212, 0.6));
  transition: width 0.4s ease-out;
}
.home-facilities-cap-fill--warning {
  background: linear-gradient(90deg, var(--gold), rgba(232, 184, 74, 0.7));
}
.home-facilities-cap-fill--danger {
  background: linear-gradient(90deg, var(--red, #c0524a), rgba(192, 82, 74, 0.7));
}

/* Empty state — when no buildings exist yet */
.home-facilities-empty {
  padding: 22px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.08);
}
.home-facilities-empty-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.home-facilities-empty-text {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); line-height: 1.6;
  max-width: 580px; margin: 0 auto;
  font-style: italic;
}

/* Grid of building cards — responsive to viewport, two columns
   on wider screens, one on narrow */
.home-facilities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) {
  .home-facilities-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .home-facilities-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.home-facility-card {
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex; flex-direction: column;
  gap: 6px;
}
.home-facility-card-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.home-facility-card-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.3px;
}
.home-facility-status {
  font-family: var(--font-data); font-size: 8px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
  white-space: nowrap;
}
.home-facility-status--active {
  color: #6ad7a8;
  border-color: rgba(106, 215, 168, 0.45);
  background: rgba(106, 215, 168, 0.08);
}
.home-facility-status--blocked {
  color: var(--red, #c0524a);
  border-color: rgba(192, 82, 74, 0.4);
  background: rgba(192, 82, 74, 0.05);
}
.home-facility-status--idle {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.home-facility-card-recipe {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--body); letter-spacing: 0.3px;
}
.home-facility-card-recipe strong { color: var(--gold); font-weight: 500; }
.home-facility-multiplier {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: rgba(232, 184, 74, 0.15);
  border: 1px solid rgba(232, 184, 74, 0.4);
  font-family: var(--font-data); font-size: 9px;
  color: var(--gold); font-weight: 500;
  letter-spacing: 0.5px;
}
.home-facility-card-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); line-height: 1.4;
  font-style: italic;
}
.home-facility-card-lifetime {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.home-facility-card-lifetime strong { color: var(--cyan); font-weight: 500; }

/* Storage tab production building card — also gets a multiplier badge */
.storage-building-mult {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: rgba(232, 184, 74, 0.15);
  border: 1px solid rgba(232, 184, 74, 0.4);
  font-family: var(--font-data); font-size: 9px;
  color: var(--gold); font-weight: 500;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   4d. DISPATCH — standing orders + report log
   ═══════════════════════════════════════════════════════════════════════ */
.menu-tab-btn-badge {
  display: none;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--gold);
  color: var(--void);
  font-family: var(--font-data); font-size: 9px; font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 8px;
  vertical-align: 1px;
}
.menu-tab-btn-badge.is-visible { display: inline-block; }

.dispatch-section {
  margin-bottom: 24px;
}
.dispatch-section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dispatch-section-title {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin: 0;
}
.dispatch-section-meta {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1px;
}

/* Clear-read button in dispatch reports header */
.dispatch-clear-read-btn {
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  padding: 5px 11px;
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.6px; text-transform: uppercase;
  transition: 0.15s;
}
.dispatch-clear-read-btn:hover {
  border-color: rgba(74, 184, 212, 0.4);
  color: var(--cyan);
}

/* Report list */
.dispatch-empty {
  padding: 32px 24px;
  text-align: center;
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted); font-style: italic;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(13, 16, 24, 0.4);
}
.dispatch-report-list {
  display: flex; flex-direction: column;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
}
.dispatch-report {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(13, 16, 24, 0.7);
  transition: background 0.15s;
}
.dispatch-report.is-unread {
  background: rgba(232, 184, 74, 0.04);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}
.dispatch-report.is-unread:hover { background: rgba(232, 184, 74, 0.08); }
.dispatch-report:hover { background: rgba(13, 16, 24, 0.9); }

.dispatch-report-pilot {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cyan); font-weight: 500;
  white-space: nowrap;
}
.dispatch-report.is-unread .dispatch-report-pilot { color: var(--gold); }

.dispatch-report-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dispatch-report-flavor {
  font-family: var(--font-body); font-size: 13px;
  color: var(--bright); line-height: 1.4;
}
.dispatch-report-meta {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
}
.dispatch-report-seed {
  margin-top: 6px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--purple);
  display: flex; align-items: baseline; gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(138, 106, 212, 0.15);
}
.dispatch-report-seed::before {
  content: "→";
  color: var(--purple);
  font-family: var(--font-data);
  font-size: 11px;
}

.dispatch-report-reward {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--gold); letter-spacing: 0.3px;
  white-space: nowrap;
}
.dispatch-report-cycle {
  font-family: var(--font-data); font-size: 10px;
  color: var(--muted); letter-spacing: 1.5px;
  text-align: right;
  white-space: nowrap;
}

/* Assignments grid */
.dispatch-assignments {
  display: flex; flex-direction: column;
  gap: 8px;
}
.dispatch-assignment {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  transition: 0.15s;
}
.dispatch-assignment.is-active {
  border-color: rgba(74, 184, 212, 0.3);
  background: linear-gradient(135deg, rgba(74, 184, 212, 0.04), rgba(74, 184, 212, 0.01));
}
.dispatch-assignment-portrait {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background: rgba(74, 184, 212, 0.04);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  color: var(--cyan); letter-spacing: 1px;
  text-transform: uppercase;
}
.dispatch-assignment-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dispatch-assignment-pilot {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.dispatch-assignment-order {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.4;
}
.dispatch-assignment-order--idle { color: var(--muted); font-style: italic; }
.dispatch-assignment-progress {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.dispatch-assignment-trips {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.dispatch-assignment-eta {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--cyan); letter-spacing: 0.3px;
}
.dispatch-assignment-eta--ready { color: var(--gold); }

.dispatch-action-btn {
  appearance: none; cursor: pointer;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
}
.dispatch-action-btn:hover { background: rgba(74, 184, 212, 0.08); border-color: var(--cyan); }
.dispatch-action-btn--clear {
  border-color: rgba(255,255,255,0.12);
  color: var(--muted);
}
.dispatch-action-btn--clear:hover { border-color: rgba(212, 74, 74, 0.4); color: var(--red); background: rgba(212, 74, 74, 0.04); }

.dispatch-action-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  border-color: rgba(255,255,255,0.08);
  color: var(--muted);
  background: transparent;
}

.dispatch-command-board {
  margin-bottom: 28px;
  padding: 18px;
  border: 1px solid rgba(74, 184, 212, 0.16);
  background:
    linear-gradient(135deg, rgba(74, 184, 212, 0.045), rgba(10, 13, 20, 0.62) 44%, rgba(232, 184, 74, 0.035)),
    rgba(10, 13, 20, 0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.dispatch-section-copy {
  margin: 6px 0 0;
  max-width: 780px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.dispatch-report-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dispatch-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.dispatch-metric {
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(19, 26, 36, 0.72);
}
.dispatch-metric span,
.dispatch-metric small {
  display: block;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.dispatch-metric strong {
  display: block;
  margin: 5px 0 4px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.4px;
}
.dispatch-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
}
.dispatch-map-panel,
.dispatch-roster-panel,
.dispatch-route-catalog {
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(8, 12, 18, 0.62);
}
.dispatch-map-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dispatch-map-header,
.dispatch-roster-header,
.dispatch-route-catalog-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dispatch-map-eyebrow {
  color: var(--cyan);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dispatch-map-title {
  margin-top: 4px;
  color: var(--bright);
  font-family: var(--font-display);
  font-size: 17px;
}
.dispatch-map-location {
  color: var(--gold);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.dispatch-map-svg {
  flex: 0 0 auto;
  width: 100%;
  height: clamp(320px, 44vh, 500px);
  min-height: 0;
  max-height: 500px;
  display: block;
}
.dispatch-map-bg { fill: rgba(7, 10, 16, 0.72); }
.dispatch-map-grid line {
  stroke: rgba(74, 184, 212, 0.06);
  stroke-width: 1;
}
.dispatch-map-lane-hit { cursor: pointer; }
.dispatch-map-lane {
  stroke: rgba(74, 184, 212, 0.42);
  stroke-width: 2.2;
  fill: none;
}
.dispatch-map-lane-hit:hover .dispatch-map-lane {
  stroke: var(--cyan-bright);
  filter: drop-shadow(0 0 6px rgba(74, 184, 212, 0.45));
}
.dispatch-map-lane.is-threatened { stroke: rgba(232, 184, 74, 0.55); }
.dispatch-map-lane.is-pressured { stroke-dasharray: 8 6; }
.dispatch-map-lane.is-locked {
  stroke: rgba(90, 106, 124, 0.28);
  stroke-dasharray: 4 8;
}
.dispatch-map-lane-label,
.dispatch-map-threat-label {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 1px;
  text-anchor: middle;
  fill: rgba(205, 216, 228, 0.66);
  pointer-events: none;
}
.dispatch-map-threat-label {
  fill: var(--gold);
  font-size: 9px;
  text-anchor: start;
  opacity: 0.72;
}
.dispatch-map-station-ring {
  fill: rgba(13, 16, 24, 0.94);
  stroke: rgba(74, 184, 212, 0.56);
  stroke-width: 2;
}
.dispatch-map-station.is-current .dispatch-map-station-ring { stroke: var(--gold); }
.dispatch-map-current-pulse {
  fill: rgba(232, 184, 74, 0.08);
  stroke: rgba(232, 184, 74, 0.38);
  stroke-width: 1.5;
}
.dispatch-map-station-mark {
  fill: var(--bright);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.dispatch-map-station-label {
  fill: rgba(205, 216, 228, 0.76);
  font-family: var(--font-display);
  font-size: 12px;
  text-anchor: middle;
  pointer-events: none;
}
.dispatch-map-assignment { cursor: pointer; }
.dispatch-map-assignment-glow {
  fill: rgba(138, 106, 212, 0.14);
  stroke: rgba(138, 106, 212, 0.38);
  stroke-width: 1;
}
.dispatch-map-assignment-dot {
  fill: var(--purple);
  stroke: rgba(246, 248, 251, 0.75);
  stroke-width: 1;
}
.dispatch-map-assignment-label {
  fill: #cbb8ff;
  font-family: var(--font-data);
  font-size: 12px;
  text-anchor: middle;
  pointer-events: none;
}
.dispatch-map-assignment:hover .dispatch-map-assignment-glow {
  fill: rgba(138, 106, 212, 0.26);
  stroke: rgba(138, 106, 212, 0.72);
}
.dispatch-roster-panel {
  min-height: 0;
  max-height: clamp(360px, 52vh, 560px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dispatch-roster-panel .dispatch-assignments {
  overflow-y: auto;
  padding: 10px;
}
.dispatch-roster-panel .dispatch-assignment {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "portrait info"
    "portrait progress"
    "actions actions";
  gap: 10px 12px;
  padding: 13px 14px;
  background: rgba(19, 26, 36, 0.72);
}
.dispatch-roster-panel .dispatch-assignment-portrait { grid-area: portrait; }
.dispatch-roster-panel .dispatch-assignment-info { grid-area: info; }
.dispatch-roster-panel .dispatch-assignment-progress {
  grid-area: progress;
  align-items: flex-start;
}
.dispatch-roster-panel .dispatch-assignment-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.dispatch-route-catalog { margin-top: 16px; }
.dispatch-route-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 12px;
}
.dispatch-route-card {
  min-height: 178px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(19, 26, 36, 0.76);
}
.dispatch-route-card--gold { border-color: rgba(232, 184, 74, 0.32); }
.dispatch-route-card--red { border-color: rgba(212, 74, 74, 0.34); }
.dispatch-route-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.dispatch-route-card-topline strong { color: var(--cyan); font-weight: 500; }
.dispatch-route-card--gold .dispatch-route-card-topline strong { color: var(--gold); }
.dispatch-route-card--red .dispatch-route-card-topline strong { color: var(--red-bright); }
.dispatch-route-card h5 {
  margin: 0;
  color: var(--bright);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.dispatch-route-card p {
  flex: 1;
  margin: 0;
  color: var(--body);
  font-size: 12px;
  line-height: 1.38;
}
.dispatch-route-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.8px;
}
.dispatch-route-card-meta span {
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10, 13, 20, 0.48);
}
.dispatch-route-card .dispatch-action-btn { width: 100%; }
.dispatch-picker-option-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.dispatch-picker-risk--cyan { color: var(--cyan); }
.dispatch-picker-risk--gold { color: var(--gold); }
.dispatch-picker-risk--red { color: var(--red-bright); }

/* Order picker modal */
/* Combat encounter modal — pause-sortie decision: Fight/Flee/Bribe/Surrender.
   Wider than inspection (4 choice cards in a grid). Same red palette but
   more aggressive (hostile encounter, not lawful intercept). */
/* ─── Cryos Convoy raid modal ──────────────────────────────────────
   Mid-sortie pause modal. Visual signature: gold + ash, distinct from
   the red of pirate combat. Convoys are economic targets, not combat.
   Z-index 116 (above encounter 115) so that if both fire on the same
   tick (extremely rare), the convoy choice resolves first.            */
.cryos-convoy-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 116;
  background: rgba(8, 6, 4, 0.88);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.cryos-convoy-modal.is-open { display: flex; }
.cryos-convoy-card {
  width: min(740px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  background: linear-gradient(180deg, rgba(28, 22, 10, 0.99), rgba(18, 14, 8, 0.99));
  border: 1px solid rgba(232, 184, 74, 0.5);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(232, 184, 74, 0.12), 0 0 80px rgba(232, 184, 74, 0.08) inset;
  animation: encounter-card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cryos-convoy-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 215, 165, 1);
  margin-bottom: 10px;
}
.cryos-convoy-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: #f4ecdc;
  letter-spacing: 0.4px;
}
.cryos-convoy-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(220, 200, 160, 0.75);
  letter-spacing: 0.6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(232, 184, 74, 0.18);
}
.cryos-convoy-flavor {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(232, 220, 200, 0.92);
  margin-bottom: 16px;
}
.cryos-convoy-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(232, 184, 74, 0.18);
  border-radius: 3px;
  margin-bottom: 18px;
}
.cryos-convoy-status-cell { min-width: 0; }
.cryos-convoy-status-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.cryos-convoy-status-value {
  font-family: var(--font-display);
  font-size: 13px;
  color: #f4ecdc;
  letter-spacing: 0.3px;
}
.cryos-convoy-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.cryos-convoy-choice {
  appearance: none;
  text-align: left;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  color: inherit;
  font-family: inherit;
}
.cryos-convoy-choice:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(232, 184, 74, 0.35);
}
.cryos-convoy-choice--ignore { border-left: 3px solid rgba(120, 220, 160, 0.7); }
.cryos-convoy-choice--raid   { border-left: 3px solid rgba(232, 96, 96, 0.85); }
.cryos-convoy-choice-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #f4ecdc;
  margin-bottom: 4px;
}
.cryos-convoy-choice-detail {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.75);
  margin-bottom: 10px;
}
.cryos-convoy-choice-outcomes {
  display: flex; flex-direction: column;
  gap: 4px;
}
.cryos-convoy-choice-outcome {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: rgba(220, 215, 200, 0.85);
}
.cryos-convoy-choice-outcome .outcome-tag {
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 1px;
}
.cryos-convoy-choice-outcome.is-good  .outcome-tag { background: rgba(120, 220, 160, 0.15); color: rgba(150, 230, 180, 0.95); }
.cryos-convoy-choice-outcome.is-bad   .outcome-tag { background: rgba(232, 96, 96, 0.15);  color: rgba(240, 130, 130, 0.95); }
.cryos-convoy-choice:disabled,
.cryos-convoy-choice.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cryos-convoy-result {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(232, 184, 74, 0.25);
  border-radius: 3px;
  margin-bottom: 14px;
}
.cryos-convoy-result-headline {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: rgba(232, 215, 165, 1);
  margin-bottom: 8px;
}
.cryos-convoy-result-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(232, 220, 200, 0.88);
}
.cryos-convoy-actions {
  display: flex; justify-content: flex-end;
}
.cryos-convoy-continue {
  appearance: none; cursor: pointer;
  padding: 10px 22px;
  background: rgba(232, 184, 74, 0.15);
  border: 1px solid rgba(232, 184, 74, 0.55);
  border-radius: 3px;
  color: rgba(232, 215, 165, 1);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.cryos-convoy-continue:hover {
  background: rgba(232, 184, 74, 0.3);
  color: #fff;
}

/* ─── Cryos Audit modal — sterile, clinical, no warmth ─────────────── */
.cryos-audit-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 113;            /* above inspection (110), below encounter */
  background: rgba(2, 2, 4, 0.92);
  backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.cryos-audit-modal.is-open { display: flex; }
.cryos-audit-card {
  width: min(640px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px 36px 24px;
  background: linear-gradient(180deg, rgba(245, 245, 248, 0.04), rgba(8, 8, 12, 0.99));
  border: 1px solid rgba(245, 245, 248, 0.4);
  border-radius: 2px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(245, 245, 248, 0.08);
  animation: encounter-card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cryos-audit-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(245, 245, 248, 0.85);
  margin-bottom: 12px;
}
.cryos-audit-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #f8f8fb;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.cryos-audit-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(220, 220, 230, 0.6);
  letter-spacing: 0.6px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(245, 245, 248, 0.18);
}
.cryos-audit-flavor {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(232, 232, 240, 0.92);
  margin-bottom: 18px;
}
.cryos-audit-fee {
  padding: 18px 20px;
  background: rgba(245, 245, 248, 0.04);
  border: 1px solid rgba(245, 245, 248, 0.18);
  border-radius: 2px;
  margin-bottom: 18px;
  text-align: center;
}
.cryos-audit-fee-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(220, 220, 230, 0.7);
  margin-bottom: 6px;
}
.cryos-audit-fee-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: rgba(232, 215, 165, 1);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.cryos-audit-fee-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(220, 220, 230, 0.6);
  letter-spacing: 0.4px;
}
.cryos-audit-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.cryos-audit-choice {
  appearance: none;
  text-align: left;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(245, 245, 248, 0.18);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  color: inherit;
  font-family: inherit;
}
.cryos-audit-choice:hover {
  background: rgba(245, 245, 248, 0.06);
  border-color: rgba(245, 245, 248, 0.4);
}
.cryos-audit-choice--pay { border-left: 3px solid rgba(232, 215, 165, 1); }
.cryos-audit-choice--refuse { border-left: 3px solid rgba(232, 96, 96, 0.85); }
.cryos-audit-choice:disabled,
.cryos-audit-choice.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cryos-audit-choice-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #f8f8fb;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.cryos-audit-choice-detail {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 220, 230, 0.7);
}
.cryos-audit-result {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(245, 245, 248, 0.2);
  border-radius: 2px;
  margin-bottom: 14px;
}
.cryos-audit-result-headline {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.6px;
  color: rgba(232, 215, 165, 1);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.cryos-audit-result-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(232, 232, 240, 0.88);
}
.cryos-audit-signature {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: rgba(220, 220, 230, 0.5);
  text-align: right;
  margin-bottom: 18px;
  padding-top: 8px;
  border-top: 1px dashed rgba(245, 245, 248, 0.12);
}
.cryos-audit-actions {
  display: flex; justify-content: flex-end;
}
.cryos-audit-continue {
  appearance: none; cursor: pointer;
  padding: 10px 24px;
  background: rgba(245, 245, 248, 0.08);
  border: 1px solid rgba(245, 245, 248, 0.5);
  border-radius: 2px;
  color: #f8f8fb;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.cryos-audit-continue:hover {
  background: rgba(245, 245, 248, 0.18);
}

.encounter-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 115;             /* above inspection (110) — encounter happens mid-flight */
  background: rgba(10, 6, 8, 0.88);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.encounter-modal.is-open { display: flex; }
.encounter-modal-card {
  width: min(820px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  background: linear-gradient(180deg, rgba(32, 14, 14, 0.99), rgba(22, 10, 12, 0.99));
  border: 1px solid rgba(232, 96, 96, 0.5);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(232, 96, 96, 0.12), 0 0 80px rgba(232, 96, 96, 0.08) inset;
  animation: encounter-card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Boss-tier — gold accent overlay on the standard red card.
   Triggered when the named clan's escalation has reached lieutenant tier (≥4). */
.encounter-modal-card.is-boss {
  border-color: rgba(232, 184, 74, 0.7);
  background: linear-gradient(180deg, rgba(36, 22, 12, 0.99), rgba(28, 16, 10, 0.99));
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(232, 184, 74, 0.18),
    0 0 100px rgba(232, 184, 74, 0.12) inset,
    0 0 24px rgba(232, 184, 74, 0.18);
}
.encounter-modal-card.is-boss .encounter-modal-eyebrow {
  color: var(--gold);
  letter-spacing: 4.5px;
}
.encounter-modal-card.is-boss .encounter-modal-title {
  text-shadow: 0 0 18px rgba(232, 184, 74, 0.25);
}
@keyframes encounter-card-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.encounter-modal-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 120, 120, 1);
  margin-bottom: 8px;
}
.encounter-modal-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.5px;
  color: #f4e8d8;
  margin: 0 0 4px;
  font-weight: 600;
}
.encounter-modal-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: rgba(255, 180, 180, 0.7);
  margin-bottom: 18px;
}
/* Clan personality intro — appears below subtitle when a named clan is
   intercepting. Italic + muted, sized between body text and subtitle.
   Empty when no clan is involved (collapses naturally with no margin). */
.encounter-modal-flavor {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(220, 200, 200, 0.85);
  margin-top: -8px;
  margin-bottom: 18px;
}
.encounter-modal-flavor:empty { display: none; }

/* ─── Boss Tactical Stage — multi-stage resolution for boss fights ─── */
.encounter-boss-stage {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(232, 96, 96, 0.06), rgba(232, 96, 96, 0.02));
  border: 1px solid rgba(232, 96, 96, 0.3);
  border-radius: 3px;
}
.encounter-boss-stage-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(255, 180, 180, 0.85);
  margin-bottom: 4px;
}
.encounter-boss-stage-title {
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--bright);
  margin: 0 0 8px 0;
  font-weight: 500;
}
.encounter-boss-stage-recap {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.55;
  font-style: italic;
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(232, 96, 96, 0.15);
}
.encounter-boss-stage-recap:empty { display: none; }
.encounter-boss-tactics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.encounter-boss-tactic {
  text-align: left;
  padding: 12px 14px;
  background: rgba(13, 14, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  font-family: inherit;
  color: var(--body);
}
.encounter-boss-tactic:hover {
  background: rgba(232, 96, 96, 0.06);
  border-color: rgba(232, 96, 96, 0.5);
}
.encounter-boss-tactic:active { transform: translateY(1px); }
.encounter-boss-tactic-eyebrow {
  font-family: var(--font-data); font-size: 8px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.encounter-boss-tactic-name {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--bright);
  margin-bottom: 4px;
  font-weight: 500;
}
.encounter-boss-tactic-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--body); line-height: 1.5;
  margin-bottom: 6px;
}
.encounter-boss-tactic-mods {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 180, 180, 0.85);
}
.encounter-boss-tactic--hull {
  border-color: rgba(232, 184, 74, 0.5);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.04), rgba(13, 14, 22, 0.6));
}
.encounter-boss-tactic--hull:hover {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.10), rgba(232, 96, 96, 0.06));
  border-color: rgba(232, 184, 74, 0.85);
}
@media (max-width: 600px) {
  .encounter-boss-tactics { grid-template-columns: 1fr; }
}

.encounter-status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(232, 96, 96, 0.18);
  border-radius: 3px;
  margin-bottom: 18px;
}
.encounter-status-cell { text-align: center; }
.encounter-status-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.encounter-status-value {
  font-family: var(--font-display);
  font-size: 16px;
  color: #f0e8d8;
  letter-spacing: 0.4px;
}

.encounter-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.encounter-choice {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.encounter-choice:hover {
  background: rgba(232, 96, 96, 0.06);
  border-color: rgba(232, 96, 96, 0.3);
  transform: translateX(2px);
}
.encounter-choice--fight     { border-left-color: rgba(232, 96, 96, 0.7); }
.encounter-choice--flee      { border-left-color: rgba(74, 184, 212, 0.7); }
.encounter-choice--bribe     { border-left-color: rgba(232, 184, 74, 0.7); }
.encounter-choice--surrender { border-left-color: rgba(160, 160, 160, 0.5); }
.encounter-choice.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.encounter-choice-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.encounter-choice-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #f0e8d8;
  font-weight: 600;
}
.encounter-choice-chance {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--gold);
}
.encounter-choice--fight  .encounter-choice-chance { color: rgba(255, 130, 130, 1); }
.encounter-choice--flee   .encounter-choice-chance { color: var(--cyan, #4ab8d4); }
.encounter-choice--bribe  .encounter-choice-chance { color: var(--gold); }
.encounter-choice-detail {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.75);
  margin-bottom: 10px;
}
.encounter-choice-outcomes {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.encounter-choice-outcome {
  display: flex; gap: 8px; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  color: rgba(220, 215, 200, 0.85);
  line-height: 1.5;
}
.outcome-tag {
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: 1.2px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 2px;
  flex-shrink: 0;
  min-width: 56px; text-align: center;
}
.encounter-choice-outcome.is-good .outcome-tag {
  background: rgba(74, 184, 130, 0.15);
  color: rgba(120, 220, 160, 1);
  border: 1px solid rgba(74, 184, 130, 0.35);
}
.encounter-choice-outcome.is-bad .outcome-tag {
  background: rgba(232, 96, 96, 0.15);
  color: rgba(255, 130, 130, 1);
  border: 1px solid rgba(232, 96, 96, 0.35);
}
.encounter-choice-outcome.is-warn .outcome-tag {
  background: rgba(232, 184, 74, 0.15);
  color: var(--gold);
  border: 1px solid rgba(232, 184, 74, 0.35);
}

.encounter-result {
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(232, 96, 96, 0.2);
  border-radius: 3px;
  margin-bottom: 14px;
  animation: encounter-result-fade 0.4s ease;
}
@keyframes encounter-result-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.encounter-result-headline {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  color: #f0e8d8;
}
.encounter-result.is-good   .encounter-result-headline { color: rgba(120, 220, 160, 1); }
.encounter-result.is-bad    .encounter-result-headline { color: rgba(255, 130, 130, 1); }
.encounter-result.is-neutral .encounter-result-headline { color: var(--gold); }
.encounter-result-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(220, 215, 200, 0.92);
}
.encounter-result-body strong { color: #f4e8d8; }

.encounter-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 4px;
}
.encounter-modal-continue {
  padding: 10px 22px;
  background: rgba(232, 96, 96, 0.12);
  border: 1px solid rgba(232, 96, 96, 0.5);
  border-radius: 3px;
  color: rgba(255, 200, 200, 1);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.encounter-modal-continue:hover {
  background: rgba(232, 96, 96, 0.22);
  border-color: rgba(232, 96, 96, 0.8);
  color: #fff;
}

/* ─── Cryos Convoy modal — sterile white-on-black ──────────────────
   Visual contrast with the encounter modal (red/aggressive). Cryos
   convoys aren't combat encounters — they're opportunities. The
   palette is austere, geometric, slightly clinical. */
.cryos-convoy-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 115;
  background: rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.cryos-convoy-modal.is-open { display: flex; }
.cryos-convoy-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  background: linear-gradient(180deg, rgba(20, 22, 28, 0.99), rgba(12, 14, 18, 0.99));
  border: 1px solid rgba(240, 240, 245, 0.35);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(240, 240, 245, 0.08);
  animation: encounter-card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cryos-convoy-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(240, 240, 245, 0.95);
  margin-bottom: 8px;
}
.cryos-convoy-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.4px;
}
.cryos-convoy-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: rgba(220, 215, 200, 0.65);
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(240, 240, 245, 0.1);
}
.cryos-convoy-flavor {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.6;
  color: rgba(220, 215, 200, 0.85);
  margin-bottom: 18px;
}
.cryos-convoy-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(240, 240, 245, 0.04);
  border: 1px solid rgba(240, 240, 245, 0.08);
}
.cryos-convoy-status-cell { min-width: 0; }
.cryos-convoy-status-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.cryos-convoy-status-value {
  font-family: var(--font-display);
  font-size: 13px;
  color: #f0e8d8;
  letter-spacing: 0.3px;
}
.cryos-convoy-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.cryos-convoy-choice {
  appearance: none;
  text-align: left;
  padding: 14px 16px;
  background: rgba(240, 240, 245, 0.03);
  border: 1px solid rgba(240, 240, 245, 0.18);
  border-radius: 3px;
  cursor: pointer;
  color: inherit;
  transition: all 0.15s ease;
  display: flex; flex-direction: column;
  gap: 8px;
}
.cryos-convoy-choice:hover {
  background: rgba(240, 240, 245, 0.06);
  border-color: rgba(240, 240, 245, 0.4);
}
.cryos-convoy-choice--raid {
  border-left: 3px solid rgba(232, 96, 96, 0.85);
}
.cryos-convoy-choice--ignore {
  border-left: 3px solid rgba(120, 200, 140, 0.7);
}
.cryos-convoy-choice-header {
  display: flex; justify-content: space-between; align-items: baseline;
}
.cryos-convoy-choice-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #fff;
}
.cryos-convoy-choice-detail {
  font-family: var(--font-body);
  font-size: 12px; line-height: 1.5;
  color: rgba(220, 215, 200, 0.75);
}
.cryos-convoy-choice-outcomes {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.cryos-convoy-choice-outcome {
  display: flex; gap: 8px; align-items: baseline;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--body);
  line-height: 1.4;
}
.cryos-convoy-choice-outcome.is-good .outcome-tag { color: rgba(120, 200, 140, 0.95); }
.cryos-convoy-choice-outcome.is-bad .outcome-tag { color: rgba(232, 96, 96, 0.95); }
.cryos-convoy-choice-outcome .outcome-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 600;
  min-width: 50px;
}
.cryos-convoy-result {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(240, 240, 245, 0.05);
  border: 1px solid rgba(240, 240, 245, 0.18);
  border-radius: 3px;
}
.cryos-convoy-result-headline {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #fff;
  margin-bottom: 6px;
}
.cryos-convoy-result-body {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.55;
  color: rgba(220, 215, 200, 0.85);
}
.cryos-convoy-actions {
  margin-top: 16px;
  display: flex; justify-content: flex-end;
}
.cryos-convoy-continue {
  appearance: none;
  padding: 10px 22px;
  background: rgba(240, 240, 245, 0.1);
  border: 1px solid rgba(240, 240, 245, 0.45);
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cryos-convoy-continue:hover {
  background: rgba(240, 240, 245, 0.2);
  border-color: rgba(240, 240, 245, 0.7);
}

/* ─── Cryos Audit modal — gold austere, Skoll's office ─────────────
   Layered above lawful inspection (z 110), uses gold + sterile palette
   instead of the red/amber tone. Refusing carries a heavier cost. */
.cryos-audit-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 113;     /* above inspection (110), below mid-flight encounter (115) */
  background: rgba(10, 10, 14, 0.92);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.cryos-audit-modal.is-open { display: flex; }
.cryos-audit-card {
  width: min(640px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  background: linear-gradient(180deg, rgba(22, 20, 14, 0.99), rgba(14, 12, 10, 0.99));
  border: 1px solid rgba(232, 215, 165, 0.5);
  border-left: 3px solid rgba(232, 215, 165, 0.95);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(232, 215, 165, 0.08);
  animation: encounter-card-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cryos-audit-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(232, 215, 165, 1);
  margin-bottom: 8px;
}
.cryos-audit-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.4px;
}
.cryos-audit-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: rgba(220, 200, 140, 0.7);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(220, 200, 140, 0.18);
}
.cryos-audit-flavor {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.6;
  color: rgba(220, 215, 200, 0.85);
  margin-bottom: 16px;
}
.cryos-audit-fee {
  padding: 16px 20px;
  background: rgba(232, 215, 165, 0.05);
  border: 1px solid rgba(232, 215, 165, 0.25);
  border-radius: 3px;
  margin-bottom: 16px;
  text-align: center;
}
.cryos-audit-fee-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 215, 165, 0.85);
  margin-bottom: 8px;
}
.cryos-audit-fee-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: rgba(232, 215, 165, 1);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.cryos-audit-fee-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(220, 215, 200, 0.65);
}
.cryos-audit-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.cryos-audit-choice {
  appearance: none;
  text-align: left;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  cursor: pointer;
  color: inherit;
  transition: all 0.15s ease;
}
.cryos-audit-choice--pay {
  border-left: 3px solid rgba(232, 215, 165, 0.85);
}
.cryos-audit-choice--refuse {
  border-left: 3px solid rgba(232, 96, 96, 0.85);
}
.cryos-audit-choice:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(232, 215, 165, 0.45);
}
.cryos-audit-choice:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cryos-audit-choice-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #fff;
  margin-bottom: 4px;
}
.cryos-audit-choice-detail {
  font-family: var(--font-body);
  font-size: 11px; line-height: 1.5;
  color: rgba(220, 215, 200, 0.75);
}
.cryos-audit-result {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: rgba(232, 215, 165, 0.04);
  border: 1px solid rgba(232, 215, 165, 0.2);
  border-radius: 3px;
}
.cryos-audit-result-headline {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: rgba(232, 215, 165, 1);
  margin-bottom: 6px;
}
.cryos-audit-result-body {
  font-family: var(--font-body);
  font-size: 12px; line-height: 1.55;
  color: rgba(220, 215, 200, 0.85);
}
.cryos-audit-signature {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-align: right;
  color: rgba(232, 215, 165, 0.6);
  font-style: italic;
  margin-bottom: 12px;
}
.cryos-audit-actions {
  display: flex; justify-content: flex-end;
}
.cryos-audit-continue {
  appearance: none;
  padding: 9px 22px;
  background: rgba(232, 215, 165, 0.1);
  border: 1px solid rgba(232, 215, 165, 0.45);
  border-radius: 3px;
  color: rgba(232, 215, 165, 1);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cryos-audit-continue:hover {
  background: rgba(232, 215, 165, 0.2);
  border-color: rgba(232, 215, 165, 0.7);
  color: #fff;
}

/* Mobile fix for both modals */
@media (max-width: 640px) {
  .cryos-convoy-choices,
  .cryos-audit-choices,
  .cryos-convoy-status {
    grid-template-columns: 1fr;
  }
}

/* Wreck Recovery modal — purple/blue palette (recovery is somber, not aggressive). */
.wreck-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 112;             /* above inspection (110) so it shows first on chained arrival */
  background: rgba(10, 8, 14, 0.88);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 24px;
}
.wreck-modal.is-open { display: flex; }
.wreck-modal-card {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  background: linear-gradient(180deg, rgba(20, 18, 32, 0.99), rgba(14, 12, 22, 0.99));
  border: 1px solid rgba(138, 106, 212, 0.45);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(138, 106, 212, 0.12), 0 0 80px rgba(138, 106, 212, 0.08) inset;
  animation: encounter-card-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wreck-modal-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(184, 153, 232, 1);
  margin-bottom: 8px;
}
.wreck-modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.5px;
  color: #f4e8d8;
  margin: 0 0 4px;
  font-weight: 600;
}
.wreck-modal-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: rgba(220, 200, 255, 0.7);
  margin-bottom: 18px;
}
.wreck-status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(138, 106, 212, 0.18);
  border-radius: 3px;
  margin-bottom: 18px;
}
.wreck-status-cell { text-align: center; }
.wreck-status-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.wreck-status-value {
  font-family: var(--font-display);
  font-size: 14px;
  color: #f0e8d8;
  letter-spacing: 0.4px;
}
.wreck-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.wreck-choice {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.wreck-choice:hover:not(.is-disabled) {
  background: rgba(138, 106, 212, 0.06);
  border-color: rgba(138, 106, 212, 0.35);
  transform: translateX(2px);
}
.wreck-choice--salvage { border-left-color: rgba(232, 184, 74, 0.7); }
.wreck-choice--restore { border-left-color: rgba(138, 106, 212, 0.7); }
.wreck-choice.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.wreck-choice-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.wreck-choice-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #f0e8d8;
  font-weight: 600;
}
.wreck-choice-value {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.4px;
}
.wreck-choice--salvage .wreck-choice-value { color: var(--gold); }
.wreck-choice--restore .wreck-choice-value { color: rgba(184, 153, 232, 1); }
.wreck-choice-detail {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 215, 200, 0.75);
  margin-bottom: 10px;
}
.wreck-choice-outcomes {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.wreck-choice-outcome {
  display: flex; gap: 8px; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  color: rgba(220, 215, 200, 0.85);
  line-height: 1.5;
}
.wreck-choice-outcome.is-good .outcome-tag {
  background: rgba(74, 184, 130, 0.15);
  color: rgba(120, 220, 160, 1);
  border: 1px solid rgba(74, 184, 130, 0.35);
}
.wreck-choice-outcome.is-bad .outcome-tag {
  background: rgba(232, 96, 96, 0.15);
  color: rgba(255, 130, 130, 1);
  border: 1px solid rgba(232, 96, 96, 0.35);
}
.wreck-choice-outcome.is-warn .outcome-tag {
  background: rgba(232, 184, 74, 0.15);
  color: var(--gold);
  border: 1px solid rgba(232, 184, 74, 0.35);
}
.wreck-choice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.wreck-modal-secondary {
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: rgba(220, 215, 230, 0.78);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
}
.wreck-modal-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.wreck-modal-secondary--gold {
  background: rgba(232, 184, 74, 0.10);
  border-color: rgba(232, 184, 74, 0.35);
  color: var(--gold);
}
.wreck-modal-secondary--gold:hover {
  background: rgba(232, 184, 74, 0.18);
  border-color: rgba(232, 184, 74, 0.58);
  color: #ffe6a3;
}
.wreck-result {
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(138, 106, 212, 0.2);
  border-radius: 3px;
  margin-bottom: 14px;
  animation: encounter-result-fade 0.4s ease;
}
.wreck-result-headline {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  color: #f0e8d8;
}
.wreck-result.is-good   .wreck-result-headline { color: rgba(120, 220, 160, 1); }
.wreck-result.is-neutral .wreck-result-headline { color: rgba(184, 153, 232, 1); }
.wreck-result-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(220, 215, 200, 0.92);
}
.wreck-result-body strong { color: #f4e8d8; }
.wreck-modal-actions {
  display: flex; justify-content: flex-end;
}
.wreck-modal-continue {
  padding: 10px 22px;
  background: rgba(138, 106, 212, 0.12);
  border: 1px solid rgba(138, 106, 212, 0.5);
  border-radius: 3px;
  color: rgba(220, 200, 255, 1);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wreck-modal-continue:hover {
  background: rgba(138, 106, 212, 0.22);
  border-color: rgba(138, 106, 212, 0.8);
  color: #fff;
}

/* Inspection modal — appears on dock arrival when customs rolls fire.
   Tense red-amber palette to feel different from cool/lawful and warm/illicit. */
.inspection-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 110;            /* above other dock overlays */
  background: rgba(8, 10, 16, 0.85);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 32px;
}
.inspection-modal.is-open { display: flex; }
.inspection-modal-card {
  width: min(540px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(28, 18, 18, 0.99), rgba(20, 12, 14, 0.99));
  border: 1px solid rgba(220, 100, 100, 0.45);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(220, 100, 100, 0.1);
  animation: inspection-card-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes inspection-card-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.inspection-modal-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(245, 130, 130, 0.95);
  margin-bottom: 12px;
}
.inspection-modal-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.6px;
  color: #f5e0e0;
  margin: 0 0 6px;
  font-weight: 500;
}
.inspection-modal-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(220, 180, 180, 0.85);
  margin-bottom: 22px;
  letter-spacing: 0.2px;
}
.inspection-modal-roll {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(220, 100, 100, 0.18);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 22px;
}
.inspection-roll-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.inspection-roll-row:last-child { border-bottom: none; }
.inspection-roll-row > span:first-child {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 10px;
}
.inspection-roll-row > span:last-child {
  color: #e0e0e8;
}
.inspection-roll-final {
  margin-top: 4px;
  padding-top: 12px !important;
  border-top: 1px solid rgba(220, 100, 100, 0.25) !important;
}
.inspection-roll-final > span:first-child {
  color: rgba(245, 130, 130, 0.95) !important;
  font-size: 11px !important;
}
.inspection-roll-final > span:last-child {
  font-size: 18px !important;
  color: #f5e0e0 !important;
  font-family: var(--font-display) !important;
}
.inspection-modal-result {
  padding: 18px 20px;
  border-radius: 3px;
  margin-bottom: 22px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
}
.inspection-modal-result.is-cleared {
  background: rgba(60, 184, 122, 0.08);
  border: 1px solid rgba(60, 184, 122, 0.35);
  color: rgba(160, 220, 170, 0.95);
}
.inspection-modal-result.is-caught {
  background: rgba(220, 100, 100, 0.1);
  border: 1px solid rgba(220, 100, 100, 0.4);
  color: rgba(245, 200, 200, 0.95);
}
.inspection-result-headline {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.inspection-modal-result.is-cleared .inspection-result-headline {
  color: rgba(120, 220, 160, 0.98);
}
.inspection-modal-result.is-caught .inspection-result-headline {
  color: rgba(245, 130, 130, 0.98);
}
.inspection-result-detail {
  margin-bottom: 6px;
}
.inspection-result-list {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 10px;
}
.inspection-result-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
}
.inspection-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.inspection-modal-bribe {
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.18), rgba(138, 106, 212, 0.08));
  border: 1px solid rgba(138, 106, 212, 0.5);
  color: #e8d3ff;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
}
.inspection-modal-bribe:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(138, 106, 212, 0.3), rgba(138, 106, 212, 0.14));
  border-color: rgba(138, 106, 212, 0.7);
}
.inspection-modal-bribe:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.inspection-modal-continue {
  background: linear-gradient(180deg, rgba(220, 100, 100, 0.18), rgba(220, 100, 100, 0.08));
  border: 1px solid rgba(220, 100, 100, 0.5);
  color: #f5e0e0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 12px 28px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
}
.inspection-modal-continue:hover {
  background: linear-gradient(180deg, rgba(220, 100, 100, 0.28), rgba(220, 100, 100, 0.14));
  border-color: rgba(220, 100, 100, 0.7);
}

.dispatch-picker {
  display: none;
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(8, 10, 16, 0.7);
  backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
  padding: 32px;
}
.dispatch-picker.is-open { display: flex; }
.dispatch-picker-panel {
  width: min(920px, 96vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.98), rgba(13, 16, 24, 0.98));
  border: 1px solid rgba(74, 184, 212, 0.3);
}
.dispatch-picker-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dispatch-picker-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 4px;
}
.dispatch-picker-title {
  margin: 0;
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--bright);
}
.dispatch-picker-list {
  flex: 1; overflow-y: auto;
  padding: 12px 12px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
}
.dispatch-picker-option {
  appearance: none; cursor: pointer;
  text-align: left;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 4px;
  transition: 0.15s;
  font-family: var(--font-body);
}
.dispatch-picker-option:hover {
  background: var(--panel-lit);
  border-color: rgba(74, 184, 212, 0.4);
}
.dispatch-picker-option-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.dispatch-picker-option-desc {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.4;
}
.dispatch-picker-option-meta {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 4px;
}
.dispatch-picker-footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: flex-end;
}
.dispatch-picker-cancel {
  appearance: none; cursor: pointer;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
}
.dispatch-picker-cancel:hover { color: var(--body); border-color: rgba(255,255,255,0.2); }

@media (max-width: 640px) {
  .dispatch-command-board { padding: 12px; }
  .dispatch-metrics-row,
  .dispatch-board-grid,
  .dispatch-route-cards {
    grid-template-columns: 1fr;
  }
  .dispatch-map-panel,
  .dispatch-roster-panel {
    min-height: auto;
  }
  .dispatch-map-svg {
    min-height: 320px;
  }
  .dispatch-report-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .dispatch-report { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
  .dispatch-report-cycle, .dispatch-report-reward { justify-self: start; }
  .dispatch-assignment { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .dispatch-picker-list { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 1180px) {
  .dispatch-board-grid {
    grid-template-columns: 1fr;
  }
  .dispatch-route-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   5b. PILOT MEMORIAL — somber, desaturated codex of lost pilots
   ═══════════════════════════════════════════════════════════════════════ */
.memorial-empty {
  padding: 48px 32px;
  text-align: center;
  font-family: var(--font-body); font-size: 14px;
  color: var(--muted); font-style: italic;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(13, 16, 24, 0.4);
}
.memorial-empty-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
  display: block;
}

.memorial-list {
  display: flex; flex-direction: column;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
}
.memorial-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px 22px;
  background: rgba(13, 16, 24, 0.7);
  font-family: var(--font-body);
  /* Desaturated treatment — pilots passed, the memorial isn't trying to grab attention */
  filter: saturate(0.7);
}
.memorial-row:hover { background: rgba(13, 16, 24, 0.9); filter: saturate(0.85); }

.memorial-portrait {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212, 74, 74, 0.18);
  background: rgba(106, 31, 42, 0.04);
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--red);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.memorial-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.memorial-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.memorial-meta {
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); line-height: 1.4;
}
.memorial-meta strong { color: var(--body); font-weight: 500; }

/* ─── Achievements / career milestones ──────────────────────────────
   Lives in the Memorial tab, below the lost pilots. Shows lifetime
   stats as badges — total runs, sectors, projects, mysteries, etc.
   Locked achievements are dimmed to indicate "you haven't earned
   this yet." Unlocked ones glow gently. */
.achievements-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.achievements-header {
  margin-bottom: 16px;
}
.achievements-header h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--bright);
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.achievement-card {
  position: relative;
  padding: 14px 16px;
  background: rgba(13, 16, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; gap: 4px;
  transition: 0.2s;
}
.achievement-card.is-unlocked {
  background: rgba(232, 184, 74, 0.06);
  border-color: rgba(232, 184, 74, 0.4);
  box-shadow: 0 0 12px rgba(232, 184, 74, 0.08);
}
.achievement-card.is-locked {
  opacity: 0.45;
}
.achievement-card-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.3px;
}
.achievement-card.is-unlocked .achievement-card-name {
  color: var(--gold);
}
.achievement-card-desc {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); line-height: 1.4;
}
.achievement-card-progress {
  font-family: var(--font-data); font-size: 10px;
  color: var(--cyan); letter-spacing: 1px; text-transform: uppercase;
  margin-top: 2px;
}
.achievement-card.is-unlocked .achievement-card-progress {
  color: var(--gold);
}

@media (max-width: 700px) {
  .achievements-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .achievement-card { padding: 12px 14px; }
}

/* Origin + trait line — shows who they were before the corp got them. */
.memorial-origin {
  font-family: var(--font-body); font-size: 11px;
  color: var(--muted); line-height: 1.4;
  margin-top: 2px;
}
.memorial-origin em { color: var(--cyan-dim); font-style: normal; }

/* Farewell quote — the pilot's last word, italicized + offset to read
   like a small inscription rather than another data line. */
.memorial-quote {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); font-style: italic;
  line-height: 1.5;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid rgba(212, 74, 74, 0.35);
}

.memorial-cycle {
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
  text-align: right;
}
.memorial-cycle strong {
  display: block;
  font-family: var(--font-display); font-size: 16px;
  color: var(--red); letter-spacing: 0.2px;
  margin-bottom: 2px;
}

.memorial-cause {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(212, 74, 74, 0.25);
  padding: 4px 8px;
  background: rgba(212, 74, 74, 0.04);
  white-space: nowrap;
}

.memorial-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 18px;
}
.memorial-summary-cell {
  background: rgba(13, 16, 24, 0.7);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.memorial-summary-label {
  font-family: var(--font-data); font-size: 9px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted);
}
.memorial-summary-value {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright); letter-spacing: -0.3px;
}
.memorial-summary-value--red { color: var(--red); }

@media (max-width: 640px) {
  .memorial-row { grid-template-columns: 48px 1fr; gap: 12px; }
  .memorial-row .memorial-cycle, .memorial-row .memorial-cause {
    grid-column: 1 / -1; justify-self: start; text-align: left;
  }
  .memorial-summary { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. FOUNDING CHARTER WIZARD — new-company onboarding
   ═══════════════════════════════════════════════════════════════════════ */
.charter-shell {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative; z-index: 1;
  min-height: 0;
}

.charter-header {
  padding: 24px 36px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(232, 184, 74, 0.04), transparent);
}
.charter-header-eyebrow {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.charter-header-title {
  margin: 0;
  font-family: var(--font-display); font-size: 28px; font-weight: 400;
  color: var(--white); letter-spacing: -0.3px;
}
.charter-header-subtitle {
  margin: 4px 0 0;
  font-family: var(--font-body); font-size: 13px;
  color: var(--body); max-width: 640px;
}

/* Body: step list (left) + step content (center) + preview (right) */
.charter-body {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}
@media (max-width: 1100px) {
  .charter-body { grid-template-columns: 200px 1fr 280px; }
}
@media (max-width: 880px) {
  .charter-body { grid-template-columns: 1fr; }
  .charter-step-list { display: none; }
  .charter-preview { display: none; }
}

.charter-step-list {
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 24px 18px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(13, 16, 24, 0.4);
  overflow-y: auto;
}
.charter-step-item {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: 0.15s;
}
.charter-step-item:hover {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
.charter-step-item.is-active {
  background: rgba(232, 184, 74, 0.04);
  border-color: rgba(232, 184, 74, 0.3);
}
.charter-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.charter-step-item.is-active .charter-step-num {
  border-color: var(--gold);
  color: var(--gold);
}
.charter-step-item.is-complete .charter-step-num {
  border-color: var(--green);
  color: var(--green);
  background: rgba(60, 184, 122, 0.06);
}
.charter-step-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.charter-step-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.charter-step-item.is-active .charter-step-label { color: var(--gold); }
.charter-step-item.is-complete .charter-step-label { color: var(--green); }
.charter-step-value {
  font-family: var(--font-body); font-size: 12px;
  color: var(--bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.charter-step-item.is-empty .charter-step-value { color: var(--muted); font-style: italic; }

/* Center step content */
.charter-content {
  padding: 28px 32px 32px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}
.charter-content-header { margin-bottom: 6px; }
.charter-content-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.charter-content-title {
  margin: 0;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--bright); letter-spacing: 0;
}
.charter-content-help {
  margin: 6px 0 0;
  font-family: var(--font-body); font-size: 13px;
  color: var(--body); line-height: 1.5;
  max-width: 580px;
}

/* Form input — company name etc. */
.charter-input {
  width: 100%;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: 0.3px;
  outline: none;
  transition: 0.15s;
}
.charter-input:focus {
  border-color: var(--gold);
  background: var(--panel-lit);
  box-shadow: 0 0 0 1px var(--gold-dim);
}
.charter-input::placeholder { color: var(--muted); }

/* Option grid — for choice-based steps */
.charter-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.charter-option {
  appearance: none; cursor: pointer;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: left;
  font-family: var(--font-body);
  display: flex; flex-direction: column; gap: 8px;
  transition: 0.15s;
  position: relative;
}
.charter-option:hover {
  background: var(--panel-lit);
  border-color: rgba(74, 184, 212, 0.3);
}
.charter-option.is-selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.06), rgba(232, 184, 74, 0.01));
}
.charter-option.is-selected::after {
  content: "✓";
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-data); font-size: 14px;
  color: var(--gold);
}
.charter-option-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.8px; text-transform: uppercase;
}
.charter-option-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--bright); letter-spacing: 0.2px;
}
.charter-option.is-selected .charter-option-title { color: var(--gold); }
.charter-option-desc {
  font-family: var(--font-body); font-size: 12px;
  color: var(--body); line-height: 1.4;
}
.charter-option-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}

/* Ship-specific: portrait + stats */
.charter-ship-option {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
}
.charter-ship-portrait {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background:
    radial-gradient(circle at center, rgba(74, 184, 212, 0.06), transparent),
    var(--void-mid);
}
.charter-option.is-selected .charter-ship-portrait {
  border-color: var(--gold-dim);
}
.charter-ship-portrait svg { width: 100%; height: 100%; }
.charter-ship-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Right: live preview pane */
.charter-preview {
  border-left: 1px solid rgba(255,255,255,0.06);
  background: rgba(13, 16, 24, 0.5);
  padding: 28px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.charter-preview-eyebrow {
  font-family: var(--font-data); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold);
}
.charter-preview-title {
  margin: 0;
  font-family: var(--font-display); font-size: 19px; font-weight: 500;
  color: var(--white); letter-spacing: 0;
  line-height: 1.2;
}
.charter-preview-block {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.charter-preview-block:last-of-type { border-bottom: 0; padding-bottom: 0; }
.charter-preview-block-label {
  font-family: var(--font-data); font-size: 9px;
  color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
}
.charter-preview-block-value {
  font-family: var(--font-body); font-size: 13px;
  color: var(--bright); line-height: 1.4;
}
.charter-preview-block-value.is-pending { color: var(--muted); font-style: italic; }
.charter-preview-block-detail {
  font-family: var(--font-body); font-size: 11px;
  color: var(--body); line-height: 1.4; margin-top: 2px;
}
.charter-preview-starter {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(232, 184, 74, 0.04);
  border: 1px solid rgba(232, 184, 74, 0.18);
  border-left: 2px solid var(--gold);
}
.charter-preview-starter-eyebrow {
  font-family: var(--font-data); font-size: 9px;
  color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.charter-preview-starter-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-body); font-size: 11px;
  color: var(--body); line-height: 1.4;
}
.charter-preview-starter-list li::before {
  content: "▸ ";
  color: var(--gold);
  font-family: var(--font-data);
}

/* Footer */
.charter-actions {
  padding: 14px 32px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10, 13, 20, 0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 12px;
}
.charter-actions-meta {
  flex: 1;
  font-family: var(--font-data); font-size: 11px;
  color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase;
}
.charter-action {
  appearance: none; cursor: pointer;
  padding: 12px 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--body);
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 1.8px; text-transform: uppercase; font-weight: 500;
  transition: 0.15s;
}
.charter-action:hover {
  border-color: rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.04);
}
.charter-action:disabled { opacity: 0.4; cursor: not-allowed; }
.charter-action--primary {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.18), rgba(232, 184, 74, 0.06));
  border-color: rgba(232, 184, 74, 0.5);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}
.charter-action--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.28), rgba(232, 184, 74, 0.1));
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.18);
}
.charter-action--primary:disabled {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: var(--muted);
}
.charter-action small {
  font-family: var(--font-data); font-size: 10px;
  color: var(--gold-dim); letter-spacing: 1px;
  font-weight: 400;
  border-left: 1px solid rgba(232, 184, 74, 0.3);
  padding-left: 10px;
  margin-left: 6px;
}
/* ═══════════════════════════════════════════════════════════════════════
   7. POLISH MOMENTS — wear states, pulses, swells
   ═══════════════════════════════════════════════════════════════════════ */

/* Ship wear: damaged engines glow red */
.fleet-row[data-condition="engines-scorched"] .fleet-row-portrait {
  border-color: rgba(212, 74, 74, 0.4);
  background:
    radial-gradient(ellipse at 50% 80%, rgba(212, 74, 74, 0.18), transparent 60%),
    radial-gradient(circle at center, rgba(74, 184, 212, 0.04), transparent),
    var(--void-mid);
}
.fleet-row[data-condition="engines-scorched"] .fleet-row-portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0; height: 30%;
  background: radial-gradient(ellipse at center bottom, rgba(212, 74, 74, 0.4), transparent 65%);
  pointer-events: none;
  animation: wear-pulse 2.4s ease-in-out infinite;
}
.fleet-row[data-condition="engines-scorched"] .fleet-row-portrait { position: relative; overflow: hidden; }
@keyframes wear-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.fleet-row[data-condition="hull-cracked"] .fleet-row-portrait {
  border-color: rgba(232, 184, 74, 0.4);
}

/* Cycle advance pulse — cycle pill glows gold when state.cycle just changed */
@keyframes cycle-pulse {
  0%   { box-shadow: 0 0 0 rgba(232, 184, 74, 0); background: rgba(74, 184, 212, 0.06); }
  20%  { box-shadow: 0 0 16px rgba(232, 184, 74, 0.6); background: rgba(232, 184, 74, 0.18); }
  100% { box-shadow: 0 0 0 rgba(232, 184, 74, 0); background: rgba(74, 184, 212, 0.06); }
}
.cycle-pulsing { animation: cycle-pulse 1.4s ease-out; }

/* Dashboard card change indicator — subtle border pulse */
@keyframes card-changed {
  0%   { border-color: rgba(232, 184, 74, 0.7); box-shadow: 0 0 14px rgba(232, 184, 74, 0.25); }
  100% { /* settles to default — captured by removing the class */ }
}
.dashboard-card.is-changed { animation: card-changed 1.6s ease-out; }

/* Project completion swell */
@keyframes project-complete-swell {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(74, 184, 212, 0); }
  30%  { transform: scale(1.02); box-shadow: 0 0 32px rgba(74, 184, 212, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(74, 184, 212, 0); }
}
.project-completed { animation: project-complete-swell 1.8s ease-out; }

/* Big-number profit pulse — when count-up completes, brief gold glow */
@keyframes profit-arrived {
  0%   { text-shadow: 0 0 0 rgba(232, 184, 74, 0); }
  40%  { text-shadow: 0 0 20px rgba(232, 184, 74, 0.6); }
  100% { text-shadow: 0 0 0 rgba(232, 184, 74, 0); }
}
.profit-arrived { animation: profit-arrived 1.2s ease-out; }

/* Original live meta screens restored into the merged screen router */
.ogv-menu-screen {
  min-height: 100vh;
  padding: 24px 28px 88px;
  overflow: hidden;
}
.ogv-menu-screen .dock-shell {
  position: relative;
  z-index: 1;
  width: min(1760px, calc(100vw - 80px));
  height: calc(100vh - 136px);
  min-height: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(14, 20, 28, 0.92), rgba(9, 12, 18, 0.96));
  box-shadow: 0 24px 80px rgba(0,0,0,0.32);
}
.ogv-menu-screen.settings-menu-screen,
.ogv-menu-screen.codex-menu-screen {
  height: 100vh;
  padding: 0 0 56px;
}
.ogv-menu-screen.settings-menu-screen .dock-shell,
.ogv-menu-screen.codex-menu-screen .dock-shell {
  width: 100%;
  height: calc(100vh - 56px);
  min-height: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
}
.ogv-menu-screen .menu-identity {
  flex: 0 0 auto;
}
.ogv-menu-screen .settings-shell,
.ogv-menu-screen .codex-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.ogv-menu-screen .settings-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}
.ogv-menu-screen .settings-sidebar {
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 24px 0;
  background: rgba(13, 16, 24, 0.6);
  overflow-y: auto;
}
.ogv-menu-screen .settings-sidebar-tab {
  appearance: none;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: 0.15s ease;
}
.ogv-menu-screen .settings-sidebar-tab:hover {
  color: var(--bright);
  background: rgba(255,255,255,0.02);
}
.ogv-menu-screen .settings-sidebar-tab.is-active {
  color: var(--cyan);
  background: rgba(74, 184, 212, 0.04);
  border-left-color: var(--cyan);
}
.ogv-menu-screen .settings-panels {
  padding: 28px 32px 40px;
  overflow-y: auto;
  min-width: 0;
}
.ogv-menu-screen .settings-panel {
  display: none;
}
.ogv-menu-screen .settings-panel.is-active {
  display: block;
}
.ogv-menu-screen .settings-section {
  margin-bottom: 24px;
}
.ogv-menu-screen .settings-section-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ogv-menu-screen .settings-row {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 480px);
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ogv-menu-screen .settings-row:last-child {
  border-bottom: 0;
}
.ogv-menu-screen .settings-row.is-disabled {
  opacity: 0.58;
}
.ogv-menu-screen .settings-row-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ogv-menu-screen .settings-row-label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--bright);
  letter-spacing: 0.5px;
}
.ogv-menu-screen .settings-row-detail {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.45;
}
.ogv-menu-screen .settings-row-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 280px;
}
.ogv-menu-screen .settings-slider {
  appearance: none;
  width: min(360px, 100%);
  height: 4px;
  margin: 0;
  background:
    linear-gradient(
      90deg,
      rgba(95,207,232,0.88) 0 var(--slider-progress, 0%),
      rgba(139,92,246,0.26) var(--slider-progress, 0%) 100%
    );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  cursor: pointer;
  outline: none;
}
.ogv-menu-screen .settings-slider::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  background: transparent;
}
.ogv-menu-screen .settings-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: var(--cyan);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.ogv-menu-screen .settings-slider::-moz-range-track {
  height: 4px;
  border: 0;
  background: rgba(139,92,246,0.26);
}
.ogv-menu-screen .settings-slider::-moz-range-progress {
  height: 4px;
  background: rgba(95,207,232,0.88);
}
.ogv-menu-screen .settings-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--cyan);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.ogv-menu-screen .settings-value {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--cyan);
  min-width: 44px;
  text-align: right;
}
.ogv-menu-screen .settings-select {
  appearance: none;
  padding: 7px 32px 7px 12px;
  min-width: min(280px, 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  color: var(--bright);
  background:
    linear-gradient(45deg, transparent 50%, var(--cyan) 50%) calc(100% - 17px) center / 5px 5px no-repeat,
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%) calc(100% - 12px) center / 5px 5px no-repeat,
    var(--panel-lit);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}
.ogv-menu-screen .settings-select:disabled {
  cursor: default;
  opacity: 0.68;
}
.ogv-menu-screen .settings-row-control input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: 44px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--panel-lit);
  cursor: pointer;
}
.ogv-menu-screen .settings-row-control input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--muted);
  transition: 0.15s ease;
}
.ogv-menu-screen .settings-row-control input[type="checkbox"]:checked {
  border-color: var(--gold-dim);
  background: rgba(232, 184, 74, 0.08);
}
.ogv-menu-screen .settings-row-control input[type="checkbox"]:checked::after {
  left: 24px;
  background: var(--gold);
}
.ogv-menu-screen .toggle-switch {
  appearance: none;
  position: relative;
  width: 44px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--panel-lit);
  cursor: pointer;
}
.ogv-menu-screen .toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--muted);
  transition: 0.15s ease;
}
.ogv-menu-screen .toggle-switch.is-on {
  border-color: var(--gold-dim);
  background: rgba(232, 184, 74, 0.08);
}
.ogv-menu-screen .toggle-switch.is-on::after {
  left: 24px;
  background: var(--gold);
}
.ogv-menu-screen .profile-card {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--panel);
  margin-bottom: 14px;
  display: grid;
  gap: 14px;
}
.ogv-menu-screen .profile-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ogv-menu-screen .profile-avatar {
  width: 48px;
  height: 48px;
  border: 1px solid var(--cyan-dim);
  background: rgba(74, 184, 212, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cyan);
  font-size: 14px;
  flex-shrink: 0;
}
.ogv-menu-screen .profile-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.ogv-menu-screen .profile-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--bright);
  font-weight: 500;
}
.ogv-menu-screen .profile-detail {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
}
.ogv-menu-screen .profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ogv-menu-screen .profile-action {
  appearance: none;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(74, 184, 212, 0.3);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.15s ease;
}
.ogv-menu-screen .profile-action:hover {
  background: rgba(74, 184, 212, 0.06);
  border-color: var(--cyan);
}
.ogv-menu-screen .codex-shell {
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
}
.ogv-menu-screen .codex-sidebar {
  border: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  background: rgba(13, 16, 24, 0.4);
  overflow: hidden;
}
.ogv-menu-screen .codex-category-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ogv-menu-screen .codex-category-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 6px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: 0.15s ease;
}
.ogv-menu-screen .codex-category-tab:hover {
  color: var(--bright);
}
.ogv-menu-screen .codex-category-tab.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: transparent;
}
.ogv-menu-screen .codex-entry-list {
  overflow-y: auto;
  padding: 8px 0;
}
.ogv-menu-screen .codex-entry {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: 0.15s ease;
}
.ogv-menu-screen .codex-entry:hover {
  background: rgba(255,255,255,0.02);
}
.ogv-menu-screen .codex-entry.is-active {
  background: rgba(232, 184, 74, 0.05);
  border-left-color: var(--gold);
}
.ogv-menu-screen .codex-entry-icon {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(74, 184, 212, 0.3);
  background: rgba(74, 184, 212, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.ogv-menu-screen .codex-entry-info {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.ogv-menu-screen .codex-entry-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--bright);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ogv-menu-screen .codex-entry-meta {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 0;
}
.ogv-menu-screen .codex-detail {
  border: 0;
  background: transparent;
  padding: 32px 48px 44px;
  overflow-y: auto;
}
.ogv-menu-screen .codex-detail-header {
  margin-bottom: 24px;
}
.ogv-menu-screen .codex-detail-eyebrow {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ogv-menu-screen .codex-detail-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--bright);
  letter-spacing: 0;
  margin: 0;
}
.ogv-menu-screen .codex-detail-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body);
  margin: 8px 0 0;
  line-height: 1.6;
}
.ogv-menu-screen .codex-detail-image {
  height: clamp(240px, 26vh, 320px);
  margin-bottom: 24px;
  border: 1px solid rgba(74, 184, 212, 0.22);
  background:
    radial-gradient(ellipse at 30% 50%, rgba(74, 184, 212, 0.08), transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(232, 184, 74, 0.05), transparent 50%),
    var(--panel);
  position: relative;
  overflow: hidden;
}
.ogv-menu-screen .codex-detail-image::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 1px solid var(--cyan);
  background: rgba(74, 184, 212, 0.05);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 24px rgba(74, 184, 212, 0.15);
}
.ogv-menu-screen .codex-detail-image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  background: rgba(232, 184, 74, 0.06);
  transform: translate(-50%, -50%);
}
.ogv-menu-screen .codex-detail-image-tag,
.ogv-menu-screen .codex-detail-image-coords {
  position: absolute;
  z-index: 2;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ogv-menu-screen .codex-detail-image-tag {
  bottom: 12px;
  left: 16px;
  color: var(--cyan);
}
.ogv-menu-screen .codex-detail-image-coords {
  top: 12px;
  right: 16px;
  color: var(--muted);
}
.ogv-menu-screen .codex-detail-section {
  margin: 0 0 28px;
  border-top: 0;
  padding-top: 0;
}
.ogv-menu-screen .codex-detail-section h4 {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ogv-menu-screen .codex-detail-section p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin: 0 0 8px;
}
.ogv-menu-screen .codex-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.ogv-menu-screen .codex-detail-stat {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--panel);
}
.ogv-menu-screen .codex-detail-stat-label {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ogv-menu-screen .codex-detail-stat-value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--bright);
}
.ogv-menu-screen .codex-location-list {
  display: grid;
  gap: 8px;
}
.ogv-menu-screen .codex-location {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.ogv-menu-screen .codex-location-tag {
  display: block;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ogv-menu-screen .codex-location-title {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--bright);
}
.ogv-menu-screen .codex-location-detail {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.ogv-menu-screen.credits-screen {
  padding: 0 0 56px;
}
.ogv-menu-screen .credits-shell {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 32px 96px;
  overflow-y: auto;
  text-align: center;
}
.ogv-menu-screen .credits-back-btn {
  position: fixed;
  top: 28px;
  right: 32px;
  z-index: 2;
  appearance: none;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,16,24,0.7);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
}
.ogv-menu-screen .credits-back-btn:hover {
  color: var(--cyan);
  border-color: rgba(74,184,212,0.35);
}
.ogv-menu-screen .credits-wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 0.95;
  margin: 0 0 8px;
  color: var(--bright);
  letter-spacing: 0;
}
.ogv-menu-screen .credits-wordmark span {
  display: block;
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ogv-menu-screen .credits-wordmark strong {
  display: block;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0;
}
.ogv-menu-screen .credits-tagline {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 24px 0 64px;
}
.ogv-menu-screen .credits-section {
  margin-bottom: 40px;
}
.ogv-menu-screen .credits-role {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
  font-weight: 400;
}
.ogv-menu-screen .credits-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--bright);
  margin: 4px 0;
  letter-spacing: 0.3px;
}
.ogv-menu-screen .credits-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--body);
}
.ogv-menu-screen .credits-end {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  max-width: 520px;
}
.ogv-menu-screen .credits-end strong {
  color: var(--gold);
  font-weight: 400;
}
.ogv-menu-screen .credits-corp {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--gold-dim);
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .ogv-menu-screen {
    padding: 16px 14px 96px;
  }
  .ogv-menu-screen .dock-shell {
    width: 100%;
    height: auto;
    min-height: calc(100vh - 128px);
  }
  .ogv-menu-screen.settings-menu-screen,
  .ogv-menu-screen.codex-menu-screen {
    padding: 0 0 56px;
  }
  .ogv-menu-screen.settings-menu-screen .dock-shell,
  .ogv-menu-screen.codex-menu-screen .dock-shell {
    height: calc(100vh - 56px);
    min-height: 0;
  }
  .ogv-menu-screen .settings-shell,
  .ogv-menu-screen .codex-shell {
    grid-template-columns: 1fr;
  }
  .ogv-menu-screen .settings-sidebar {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .ogv-menu-screen .settings-sidebar-tab {
    width: auto;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .ogv-menu-screen .settings-sidebar-tab.is-active {
    border-bottom-color: var(--cyan);
  }
  .ogv-menu-screen .settings-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ogv-menu-screen .settings-row-control {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
  }
  .ogv-menu-screen .settings-slider,
  .ogv-menu-screen .settings-select {
    width: 100%;
    min-width: 0;
  }
  .ogv-menu-screen .codex-shell {
    min-height: 0;
  }
  .ogv-menu-screen .codex-category-tabs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ogv-menu-screen .codex-detail-image {
    height: 160px;
  }
  .ogv-menu-screen .credits-wordmark {
    font-size: 40px;
  }
  .ogv-menu-screen .credits-back-btn {
    position: absolute;
    top: 18px;
    right: 18px;
  }
}