/* ═══════════════════════════════════════════════════════════════
   DROPFLEET COMMANDER. FLEET BUILDER
   Light Theme · Warm Off-White + Navy · Art Deco Gold Accents
   ═══════════════════════════════════════════════════════════════ */

/* Terminal Grotesque Open, Velvetyne / Studio Triple (OFL). Used only for the
   WarLore wordmark in the footer credit. */
@font-face {
  font-family: "Terminal Grotesque Open";
  src: url("../assets/fonts/terminal-grotesque-open.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Theme Tokens ─────────────────────────────────────────── */
:root {
  /* Light unless the switch in Settings says otherwise, and SAID so. The dark
     block declares `color-scheme: dark` and nothing declared the other half,
     so a machine whose OS is dark got dark scrollbars, dark select popups and
     dark number steppers on a paper-white page. The app was in light mode and
     every control the browser draws was not. */
  color-scheme: light;

  /* Typography */
  --font-wordmark: "Terminal Grotesque Open", "Roboto Slab", serif;
  --font-body: "Jost", "Segoe UI", -apple-system, sans-serif;
  --font-display: "Roboto Slab", Georgia, serif;
  --font-brand: "Roboto Slab", Georgia, serif;
  --font-reading: var(--font-lore);
  /* Jost carries the condensed/label role. Barlow Condensed is out
   (HANDOFF §2.5); it is no longer loaded, so naming it here would
   silently fall through to Arial Narrow. */
  --font-condensed: "Jost", system-ui, sans-serif;
  --font-lore: "Libre Baskerville", "Georgia", serif;
  --font-mono: Consolas, "Courier New", monospace;
  /* Numbers the player reads as a value, stat cells, points, counts. Outfit
     is Jet's call for the numeric role: even widths and open counters, so a
     14px stat stays legible on a phone at a table. */
  --font-numeric: "Outfit", "Jost", system-ui, sans-serif;

  /* Font Sizes */
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --text-hero: 42px;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Spacing (4px grid) */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 48px;

  /* Border Radius, deliberate, not bubbly */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;   /* dialogs / drawers (Fluent 2XL) */

  /* ── Light Theme Colors ── */
  --paper: #ffffff;
  --paper-warm: #faf8f5;
  --paper-alt: #f3f1ec;
  --surface: #f4f1ea;   /* subtle raised panel (admiral cards etc.); MUST be defined in dark too */
  --ink: #1c1a17;
  --ink-soft: #3a3834;
  --ink-muted: #6b6660;
  --ink-faint: #66615a;   /* WCAG AA: 5.4:1 on paper-alt beige (was #7e7870 = 3.9:1, failed on beige) */

  /* Navy (primary accent) */
  --navy: #1b3a5c;
  --navy-light: #2a5080;
  --navy-dark: #0f2640;
  --navy-subtle: rgba(27, 58, 92, 0.08);
  --navy-wash: rgba(27, 58, 92, 0.04);

  /* Art Deco Gold (secondary accent) */
  --gold: #b8932e;
  --gold-light: #d4ad4a;
  --gold-dark: #785e17;
  --gold-subtle: rgba(184, 147, 46, 0.10);
  --gold-line: rgba(184, 147, 46, 0.35);
  --accent: #b8932e;   /* = gold; MUST be defined in dark too (else changelog title stays dark) */

  /* Faction Colors */
  --faction-ucm: #3e9945;
  --faction-phr: #6a4c9c;
  --faction-scourge: #c43c2f;
  --faction-shaltari: #d98c1f;
  --faction-bioficer: #2a8c8c;
  --faction-resistance: #b04a2a;

  /* Faction text colors (darkened for WCAG AA on white) */
  --faction-ucm-text: #287030;
  --faction-shaltari-text: #946010;
  --faction-bioficer-text: #1f7070;

  /* Semantic */
  --success: #3e9945;
  /* --success is a fill/icon colour: 3.2:1 on paper, which fails AA as text.
     Use --success-ink whenever green is used for words. 5.4:1 on paper. */
  --success-ink: #2c6e49;
  --warning: #d98c1f;
  --warn-ink: #8a5a00;      /* AA on --warn-bg for warning text */
  --warn-bg: #fdf3e0;
  --error: #c43c2f;
  --info: #2a5080;

  /* Borders */
  --stroke: #d8d4cc;
  --stroke-light: #e8e5df;
  --stroke-strong: #b8b2a8;
  --stroke-accent: rgba(27, 58, 92, 0.25);

  /* ── names this stylesheet reads but never set ─────────────────────────
   *
   * Inherited from Dropfleet, where they are also undefined. Most are read
   * with NO fallback -- `border: 1px solid var(--border)` -- and a var() that
   * resolves to nothing makes the whole declaration invalid at computed-value
   * time, so the property silently falls back to its initial value. That is
   * why the Sync modal's code box and text input had no border at all, the
   * offline progress track was invisible, and What's New rendered its
   * disclaimer on no background.
   *
   * They are aliases, so the ramp above stays the single source of the
   * colours; scripts/test-css-tokens.mjs fails the build if another one
   * appears. */
  --border: #d8d4cc;          /* = --stroke */
  --stroke-medium: #d8d4cc;   /* = --stroke */
  --warm: #faf8f5;            /* = --paper-warm */
  --navy-deep: #142d47;
  --bg2: #f3f1ec;             /* = --paper-alt */
  --fg2: #3a3834;             /* = --ink-soft */
  --fg3: #66615a;             /* = --ink-faint */
  --font-header: "Roboto Slab", Georgia, serif;
  --font-heading: "Roboto Slab", Georgia, serif;
  --font-stat: "Outfit", "Jost", system-ui, sans-serif;
  --radius-pill: 999px;
  --weight-normal: 400;

  /* Elevation, a strict ladder (Fluent: ambient ring + directional key shadow),
     warm-tinted to the theme. Each tier is unambiguously deeper than the last:
     sm resting cards · md raised · lg dropdowns/bars · xl popovers/hover ·
     sheet (28) bottom sheet/side nav · dialog (64) modals. */
  --shadow-sm: 0 0 1px rgba(28, 26, 23, 0.10), 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-md: 0 0 2px rgba(28, 26, 23, 0.08), 0 2px 4px rgba(28, 26, 23, 0.10);
  --shadow-lg: 0 0 2px rgba(28, 26, 23, 0.08), 0 4px 8px rgba(28, 26, 23, 0.12);
  --shadow-xl: 0 0 2px rgba(28, 26, 23, 0.08), 0 8px 16px rgba(28, 26, 23, 0.14);
  --shadow-sheet: 0 0 8px rgba(28, 26, 23, 0.10), 0 -12px 28px rgba(28, 26, 23, 0.16);
  --shadow-dialog: 0 0 8px rgba(28, 26, 23, 0.12), 0 24px 56px rgba(28, 26, 23, 0.20);

  /* Z-index scale (monotonic, no ad-hoc values): resting sheet < topbar <
     dialog scrim < sheet-floating-over-picker < popovers/tooltips < toasts.
     Transient popovers sit above dialogs so rule-tooltips work inside modals. */
  --z-sheet: 800;
  --z-topbar: 900;
  --z-overlay: 1000;
  --z-sheet-float: 1100;
  --z-popover: 2000;
  --z-toast: 3000;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;

  /* Layout */
  --topbar-h: 48px;
  --footer-h: 40px;
  --sidebar-w: 260px;
}

/* ── Dark Theme ──────────────────────────────────────────────────
   Opt-in via the topbar toggle (data-theme="dark" on <html>). Only the COLOUR
   tokens flip. Every component reads them, so the whole on-screen UI re-themes.
   The print sheet uses hardcoded paper colours (not these tokens), so printouts
   stay light on paper regardless of theme. Contrast tuned for WCAG AA. */
html[data-theme="dark"] {
  --paper: #161a1f;
  --paper-warm: #1c212a;
  --paper-alt: #232a33;
  --surface: #232a33;   /* dark raised panel; --ink-muted is tuned AA on this */
  --ink: #e9e7e2;
  --ink-soft: #c6c2ba;
  --ink-muted: #9aa0a8;     /* AA on paper/paper-alt */
  --ink-faint: #8b919a;

  --navy: #4f8bcc;          /* accent; bright enough to read as text on dark */
  --navy-light: #74a7e0;
  --navy-dark: #356aa6;
  --navy-subtle: rgba(111, 166, 220, 0.16);
  --navy-wash: rgba(111, 166, 220, 0.08);

  --gold: #d8b24e;
  --gold-light: #ecc96c;
  --gold-dark: #e0bb55;     /* on dark, the "dark" gold must be LIGHT to read */
  --gold-subtle: rgba(216, 178, 78, 0.14);
  --gold-line: rgba(216, 178, 78, 0.40);
  --accent: #d8b24e;        /* = light-gold so the changelog title reads on dark */

  /* Faction text tints re-lightened for dark surfaces */
  --faction-ucm-text: #5cc063;
  --faction-shaltari-text: #e3ad3e;
  --faction-bioficer-text: #44b8b8;

  --success: #5cc063;
  --success-ink: #6ecf75;   /* on the dark surface, green must go lighter not darker */
  --warning: #e3ad3e;
  --warn-ink: #e3ad3e;
  --warn-bg: #3a2f18;
  --error: #e2685a;
  --info: #74a7e0;

  --stroke: #353c45;
  --stroke-light: #2a313a;
  --stroke-strong: #49515b;
  --stroke-accent: rgba(111, 166, 220, 0.30);

  /* The aliases above, on the dark ramp. */
  --border: #353c45;
  --stroke-medium: #353c45;
  --warm: #1c212a;
  --navy-deep: #22364d;
  --bg2: #232a33;
  --fg2: #c6c2ba;
  --fg3: #8b919a;

  /* Shadows read as near-black ambient + a hairline light ring for elevation. */
  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.45);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,0.04), 0 6px 14px rgba(0,0,0,0.50);
  --shadow-xl: 0 0 0 1px rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.55);
  --shadow-sheet: 0 0 0 1px rgba(255,255,255,0.05), 0 -12px 32px rgba(0,0,0,0.60);
  --shadow-dialog: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.65);

  color-scheme: dark;
}
/* Primary buttons keep white text on a saturated navy in dark mode (the lighter
   accent navy would fail contrast under white), and the page background fills. */
html[data-theme="dark"] body { background: var(--paper); }
html[data-theme="dark"] .btn-primary { background: #2e6db5; border-color: #2e6db5; color: #fff; }
html[data-theme="dark"] .btn-primary:hover { background: #3a7cc6; border-color: #3a7cc6; }
/* Admiral ("generals") accent text sits on raised panels / tinted chips where the
   dark accent navy is a touch low-contrast; lift to the lighter accent for AA. */
html[data-theme="dark"] .admiral-flagship-name,
html[data-theme="dark"] .admiral-ability-cost { color: var(--navy-light); }
/* Global Settings button. The topbar's only persistent action, present on
   every view (not just inside a fleet), where the theme switch + offline
   download panel live. Filled, not ghost, so it reads as a primary control. */
.topbar-global-settings-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: var(--sp-xs); padding: 0;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.34); border-radius: var(--radius-md);
  color: #fff; cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast);
}
.topbar-global-settings-btn:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.6); }

/* ── 2. Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-warm);
  /* Flex column so the site footer always sits within the first screen when the
     view is short (e.g. the landing) and only scrolls when content overflows. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-light); }

::selection { background: var(--gold-light); color: var(--ink); }

/* WarLore wordmark. Terminal Grotesque Open throughout (local font), gold-on-black,
   inverts on hover. Standing brand rule (see memory: reference-warlore-brand). */
.warlore-mark {
  display: inline-block;
  font-family: var(--font-wordmark);
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  color: #FFCC00;
  background: #000;
  padding: 2px 10px;
  margin-bottom: var(--sp-md);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
/* "Lore" is part of the same wordmark, same Terminal Grotesque Open, no slab. */
.warlore-mark .wl-lore { font: inherit; }
.warlore-mark:hover { color: #000; background: #FFCC00; }
/* Inline variant for the credits footer: same gold-on-black brand, sized to sit
   on the footer text line instead of as a standalone hero badge. */
.warlore-mark.warlore-mark-inline {
  font-size: 15px;
  padding: 1px 6px;
  margin-bottom: 0;
  line-height: 1.3;
  vertical-align: -2px;
}

/* Global focus-visible ring, two-stroke (Fluent): a thin light halo tight to
   the element + a navy ring just outside it. The light inner stroke keeps focus
   visible on the dark navy sidebar; the navy stroke keeps it visible on light
   cards. Works on any surface. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid ButtonText; box-shadow: none; }
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: -1px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper-alt); }
::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* ── 3. Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--ink);
}

.text-display {
  font-family: var(--font-brand);
  font-size: var(--text-hero);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
  text-transform: none;
}
.text-title-1 { font-size: var(--text-3xl); }
.text-title-2 { font-size: var(--text-2xl); }
.text-title-3 { font-size: var(--text-xl); }
.text-subtitle { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.text-body { font-size: var(--text-base); }
.text-caption { font-size: var(--text-sm); color: var(--ink-muted); }
.text-overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.text-rules {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-muted);   /* grayed to match the namesake (AA: 5:1+) */
}
/* Restore paragraph spacing (the global reset zeroes <p> margins) so multi-
   paragraph lore in the detail modal / shared view reads as separate paragraphs. */
.text-rules p { margin: 0 0 0.7em; }
.text-rules p:last-child { margin-bottom: 0; }

/* Links inside lore / namesake (Wikipedia, tourism boards, etc.). Subtle: same
   colour as the surrounding lore text, distinguished only by a faint underline
   that strengthens a touch on hover. They open in a new tab. */
.lore-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(60, 56, 50, 0.3); /* fallback for no color-mix */
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
}
.lore-link:hover { text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); }

/* ── 4. Art Deco Decorative Elements ─────────────────────────── */
.deco-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  margin: var(--sp-2xl) 0;
}

.deco-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin: var(--sp-xl) 0;
}
.deco-divider::before,
.deco-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-line);
}

.deco-diamond {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Gold corner accents for cards */
.card-deco { position: relative; }
.card-deco::before,
.card-deco::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-style: solid;
  border-color: var(--gold);
  opacity: 0.35;
  pointer-events: none;
}
.card-deco::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.card-deco::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ── 5. Topbar ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--navy-dark);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-xl);
  z-index: var(--z-topbar);
  gap: var(--sp-md);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(15, 38, 64, 0.35);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: #fff;
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}
.topbar-brand svg { flex-shrink: 0; }
.topbar-logo { height: 22px; width: auto; display: block; }

.topbar-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.2);
}

/* What this is, in the chrome, on every screen. */
.topbar-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}

.topbar-context {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.88);
  /* No ellipsis. These are four words naming where the chevron goes, and a
     clipped one reads as a different destination, "Armies li…". If the bar
     runs out of room the title beside it gives way first (below). */
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.topbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.72);
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.topbar-back:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
/* Topbar actions: bright, obviously-clickable bordered pills with larger icons.
   Scoped under .topbar-actions so these beat .btn-ghost (which sets ink-muted).
   Font is Jost (--font-body), the app's primary UI face. Unifies the chrome and
   drops Barlow Condensed. #fff on navy-dark = ~14:1. */
.topbar-actions .topbar-action-btn {
  color: #fff;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--radius-sm);
}
.topbar-actions .topbar-action-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.55);
}
.topbar-actions .topbar-action-btn svg { width: 18px; height: 18px; }
.topbar-actions .topbar-action-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: #fff;
}

.app-shell {
  padding-top: var(--topbar-h);
  /* Grow to fill the viewport so the footer is pinned to the bottom, but don't
     force 100vh (that pushed the footer below the fold). */
  flex: 1 0 auto;
}

/* ── 6. Sidebar (dark navy, Hobgoblin-style) ─────────────────── */
.builder-layout {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
}

.builder-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  overflow-y: auto;
  background: var(--navy-dark);
  color: #fff;
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.builder-overview {
  flex: 1;
  min-width: 0;
  max-width: 500px;
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--paper-warm);
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  position: sticky;
  top: var(--topbar-h);
}
.builder-detail {
  flex: 1.5;
  min-width: 0;
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--paper);
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  position: sticky;
  top: var(--topbar-h);
  border-left: 1px solid var(--stroke-light);
  container-type: inline-size;   /* enables width-based container queries below */
}
/* Stack the ship card (art on top, full-width stats/weapons) whenever the detail
   PANEL itself is narrow, independent of viewport, so weapon names and the
   stat grid never get squeezed at any 3-panel width. */
@container (max-width: 560px) {
  .group-ship-entry { flex-direction: column; }
  .group-ship-entry .ship-card-image { width: 100%; height: 130px; }
}
.builder-detail.hidden { display: none; }

/* Sidebar sections */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.sidebar-section-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.4);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-add-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  background: rgba(255,255,255,0.12);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.sidebar-add-group-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
}

/* Fleet info in sidebar */
.fleet-info-panel {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  border: 1px solid rgba(255,255,255,0.08);
}

.fleet-info-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
  /* Rename click target = the name text only, not the full sidebar width. */
  display: inline-block;
  cursor: pointer;
}

.fleet-info-faction {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

/* Game size detail in sidebar */
#builder-fleet-size {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#builder-fleet-size:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

.game-size-detail {
  margin-top: var(--sp-xs);
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.game-size-detail div {
  white-space: nowrap;
}

/* Points bar (in sidebar) */
.points-bar {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  border: 1px solid rgba(255,255,255,0.08);
}

.points-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-sm);
}

.points-current {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--gold-light);   /* WCAG: 7.3:1 on the navy sidebar (gold-dark was 2.5:1, failed) */
}
/* Navy chrome (points sidebar + topbar): secondary/muted text must be light to
   pass WCAG on the dark bg. The beige-tuned dark grays fail there (~2.7:1). */
.builder-sidebar .text-overline,
.builder-sidebar .text-caption,
.builder-sidebar .points-limit,
.topbar .text-overline,
.topbar .text-caption { color: #c4bfb5; }
/* Add-slot placeholders ("Add Admiral", "Add Space Station") sit on the navy-dark
   sidebar. Ink-faint (#66615a) only achieves 2.4:1 there (fails AA). Use #c4bfb5
   (7.7:1 on navy-dark, matches the sidebar label colour) and a white-wash hover. */
.builder-sidebar .add-ship-area { color: #c4bfb5; border-color: rgba(255,255,255,0.2); }
.builder-sidebar .add-ship-area:hover { color: #fff; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.45); }
.builder-sidebar .station-add-optional { color: #c4bfb5; border-color: rgba(255,255,255,0.2); }
.builder-sidebar .station-add-optional:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

.points-limit {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}
.points-remaining {
  margin-left: auto;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  font-weight: var(--weight-medium);
}
.points-remaining.points-over {
  color: var(--danger, #c43c2f);
}

.points-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.points-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gold);
  transition: width var(--duration-slow) var(--ease-out);
}
.points-fill.over-budget { background: var(--error); }
.points-fill.near-limit { background: var(--warning); }

/* Fleet composition bar */
#fleet-composition:empty { display: none; }
#fleet-composition { margin-top: var(--sp-sm); }
.comp-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  gap: 1px;
}
.comp-segment {
  min-width: 3px;
  transition: width 0.3s ease;
}
/* Groups composition bar in the sidebar card: 50% thicker, hover for the breakdown
   (the colour-key legend is gone). */
.comp-bar-thick { height: 6px; border-radius: 3px; cursor: help; }
.groups-line { margin-top: var(--sp-sm); }
.ap-line { display: block; margin-top: var(--sp-xs); }
.ap-line:empty { display: none; }
.comp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-sm);
  margin-top: 3px;
}
.comp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-condensed);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: none;
  letter-spacing: 0.03em;
}
.comp-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* Fleet validation warnings */
#fleet-warnings:empty { display: none; }
.fleet-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  margin: var(--sp-xs) 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.3;
}
.fleet-warning-error {
  background: rgba(180, 50, 50, 0.12);
  color: #a8342a;   /* AA: 5.8:1 on the tint (was #c44 = 3.7:1) */
  border: 1px solid rgba(180, 50, 50, 0.25);
}
.fleet-warning-warn {
  background: rgba(180, 140, 30, 0.12);
  color: #8a5810;   /* AA: 5.3:1 on the tint (was #996b00 = 4.0:1) */
  border: 1px solid rgba(180, 140, 30, 0.25);
}

/* Group nav items (sidebar) */
.group-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  padding-left: calc(var(--sp-md) + 3px);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  border: 1px solid transparent;
  position: relative;
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
}

/* Tonnage accent bar on left edge */
.group-nav-item:not(.group-nav-overview)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--nav-accent, rgba(255,255,255,0.15));
  border-radius: 0 2px 2px 0;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.group-nav-item:not(.group-nav-overview):hover::before,
.group-nav-item:not(.group-nav-overview).active::before {
  opacity: 1;
}

.group-nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.group-nav-item.active {
  /* The ship/group you're currently customizing, clearly highlighted in the roster. */
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.22);
}
.group-nav-item:not(.group-nav-overview).active::before {
  width: 5px;
  opacity: 1;
  box-shadow: 0 0 8px var(--nav-accent, rgba(255,255,255,0.4));
}

.group-nav-item.has-error {
  border-color: rgba(220, 50, 40, 0.3);
}

/* Drag-to-reorder grip (reorders groups within their weight class). Lives on the
   dark sidebar, so it's a muted white that brightens on row hover / grab. */
.group-nav-grip {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  color: rgba(255,255,255,0.30);
  cursor: grab;
  opacity: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.group-nav-item:hover .group-nav-grip,
.group-nav-item.active .group-nav-grip { opacity: 1; }
/* Always visible on touch devices (no hover to reveal it). */
@media (hover: none) { .group-nav-grip { opacity: 0.7; } }
.group-nav-grip:hover { color: rgba(255,255,255,0.75); }
.group-nav-grip:active { cursor: grabbing; }
.group-nav-item.dragging { opacity: 0.9; position: relative; box-shadow: var(--shadow-lg); }
/* Insertion indicator (layout-safe inset bar) for the hovered drop target. */
.group-nav-item.drag-over-before { box-shadow: inset 0 3px 0 var(--nav-accent, #fff); }
.group-nav-item.drag-over-after { box-shadow: inset 0 -3px 0 var(--nav-accent, #fff); }

/* A famous admiral's flagship shown among the overview group cards. Read-only
   (managed via the admiral slot), gold accent, "incl." instead of points since
   its cost is already counted with the admiral. */
.overview-flagship-card { cursor: default; }
/* The flagship is a hero ship: clicking opens its stat card. */
.overview-flagship-clickable { cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.overview-flagship-clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.overview-flagship-pts {
  font-size: var(--text-xs) !important;
  color: var(--ink-faint);
  font-weight: var(--weight-semibold);
}
.flagship-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.group-nav-overview {
  margin-bottom: var(--sp-xs);
  padding-bottom: var(--sp-sm);
  padding-left: var(--sp-md);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.group-nav-overview.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}
.group-nav-overview .group-nav-name {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Ship art thumbnail in nav */
.group-nav-art {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.group-nav-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity var(--duration-fast);
}
.group-nav-item:hover .group-nav-art img,
.group-nav-item.active .group-nav-art img {
  opacity: 1;
}

/* Two-line body */
.group-nav-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.group-nav-top {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.group-nav-name {
  flex: 1;
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom meta row */
.group-nav-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.group-nav-cat {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.4);
}
.group-nav-pts {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.group-nav-count {
  font-family: var(--font-condensed);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin-left: auto;
}

/* Validation dot */
.group-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.group-nav-dot-error {
  background: var(--error);
  box-shadow: 0 0 4px rgba(220, 50, 40, 0.6);
}

.group-nav-reorder {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: auto;
}
.group-move-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  border-radius: 2px;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.group-move-btn:hover:not(:disabled) {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.1);
}
.group-move-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ── 7. Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
  min-height: 36px;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.btn svg,
.sidebar-btn svg {
  flex-shrink: 0;
  pointer-events: none;
}

.btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-light); border-color: var(--navy-light); box-shadow: var(--shadow-sm); }
.btn-primary:active { background: var(--navy-dark); transform: scale(0.97); box-shadow: none; }

.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);   /* WCAG: dark text on bright gold = 5.3:1 (white was 2.9:1) */
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-outline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--stroke);
}
.btn-outline:hover { border-color: var(--navy); color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-outline:active { transform: scale(0.97); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  border: none;
}
.btn-ghost:hover { background: var(--navy-subtle); color: var(--ink); }
.btn-ghost:active { background: rgba(27, 58, 92, 0.12); transform: scale(0.97); }

/* Ghost variant for dark backgrounds. Borderless 60%-white text on navy read
   as a disabled control. And a phone never gets the hover that brightened it,
   so Reset game looked switched off for the whole of a game. */
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }
.btn-ghost-light:active { background: rgba(255,255,255,0.2); transform: scale(0.97); }

.btn-danger {
  background: var(--paper);
  color: var(--error);
  border-color: var(--error);
}
.btn-danger:hover { background: var(--error); color: #fff; }

.btn-sm { padding: var(--sp-xs) var(--sp-md); font-size: var(--text-xs); min-height: 28px; }
.btn-lg { padding: var(--sp-md) var(--sp-2xl); font-size: var(--text-md); min-height: 44px; }
.btn-block { width: 100%; }

/* Icon-only button */
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-icon.btn-sm { width: 28px; height: 28px; }

/* Sidebar buttons */
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  width: 100%;
  text-align: left;
}
.sidebar-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); }
.sidebar-btn-icon {
  width: auto;
  padding: var(--sp-sm);
  justify-content: center;
  flex-shrink: 0;
}

/* ── Settings Panel ──────────────────────────────────────────── */
.settings-group {
  margin-bottom: var(--sp-lg);
}
.settings-group-title {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--stroke);
  padding-bottom: var(--sp-xs);
  margin-bottom: var(--sp-xs);
}
.settings-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--stroke-light);
}
.settings-toggle:last-child { border-bottom: none; }
.settings-toggle-name {
  flex: 1;
  min-width: 0;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--ink);
}
/* Compact action row (Export / Feedback / What's New) + footnote. */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.settings-note {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: var(--sp-sm);
}
/* ── Offline use panel (Settings) ──────────────────────────────
   Status, the honest size of the download, and the two buttons. Text wraps and
   the container grows: the size and the warning are exactly the information a
   user must not have clipped from them. */
.offline-panel .settings-note { margin-top: var(--sp-xs); }
.offline-state {
  font-size: var(--text-sm);
  color: var(--ink);
  margin: 0 0 var(--sp-xs);
  line-height: 1.45;
}
.offline-state-ok strong { color: var(--success-ink); }
.offline-warn {
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--warn-bg);
  border-left: 3px solid var(--warn-ink);
  padding: var(--sp-xs) var(--sp-sm);
  margin: var(--sp-sm) 0;
  border-radius: 2px;
  line-height: 1.45;
}
.offline-panel .settings-actions { margin-top: var(--sp-sm); }

/* ── Sync fleets online (modal) ────────────────────────────────
   The NOTE gets warning styling because it is the one thing a user must read
   before opting in: a shared token is a shared, editable fleet list. The token
   itself wraps rather than scrolling or truncating, since a half-visible token
   is useless to type into another device. */
#sync-body p { font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--sp-sm); color: var(--ink); }
.sync-note {
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--warn-bg);
  border-left: 3px solid var(--warn-ink);
  padding: var(--sp-sm);
  border-radius: 2px;
  line-height: 1.5;
}
.sync-on-state strong { color: var(--success-ink); }
.sync-token-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-bottom: var(--sp-xs);
}
.sync-token {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-alt, rgba(0, 0, 0, .05));
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: var(--sp-sm);
  overflow-wrap: anywhere;   /* never clip a token; let the box grow */
  line-height: 1.4;
}
.sync-hint { font-size: var(--text-xs) !important; color: var(--ink-muted) !important; }
.sync-existing { margin-top: var(--sp-lg); }
.sync-join-row {
  display: flex;
  gap: var(--sp-sm);
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: var(--sp-xs);
}
.sync-input {
  flex: 1 1 220px;
  min-width: 0;
  font-size: var(--text-sm);
  padding: var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.sync-input:focus { outline: 2px solid var(--accent, #b8932e); outline-offset: 1px; }
.sync-status { font-size: var(--text-xs) !important; color: var(--ink-muted) !important; margin-top: var(--sp-sm) !important; }
.sync-error {
  font-size: var(--text-xs) !important;
  color: var(--danger) !important;
  margin-top: var(--sp-sm) !important;
  line-height: 1.45;
}
.sync-danger { color: var(--danger); }
#sync-body .settings-actions { margin-top: var(--sp-md); }
.offline-progress { margin-top: var(--sp-sm); }
.offline-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.offline-bar-fill {
  height: 100%;
  width: 0;
  background: var(--navy, #1b3a5c);
  transition: width 0.15s linear;
}
[data-theme="dark"] .offline-bar-fill { background: var(--gold); }

.settings-toggle input[type="checkbox"] {
  display: none;
}
.settings-toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--stroke);
  border-radius: 11px;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out);
}
.settings-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle input:checked + .settings-toggle-switch {
  background: var(--gold-dark);
}
.settings-toggle input:checked + .settings-toggle-switch::after {
  transform: translateX(18px);
}

/* Theme switch: a two-button segmented control (Light / Dark), each with an
   icon + label, the active side filled. Lives in Settings, replacing what
   used to be a lone icon-only button in the topbar. */
.theme-switch {
  display: flex;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-alt);
}
.theme-switch-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.theme-switch-btn + .theme-switch-btn { border-left: 1px solid var(--stroke); }
.theme-switch-btn:hover { color: var(--ink); }
.theme-switch-btn svg { flex-shrink: 0; }
.theme-switch-btn.active { background: var(--gold-dark); color: #fff; }
[data-theme="dark"] .theme-switch-btn.active { color: #1c1a17; }

/* ── 8. Cards ────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.card-interactive { cursor: pointer; }
.card-interactive:hover {
  border-color: var(--stroke-accent);
  box-shadow: var(--shadow-md);
}

/* ── 9. Forms ────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.01em;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out);
  min-height: 40px;
}

.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--stroke-strong); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-subtle);
}
.form-input::placeholder { color: var(--ink-faint); }
.form-textarea { resize: vertical; min-height: 80px; }

/* ── 10. Modals ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Plain dark scrim, NO backdrop blur: blur(4px) + transition:all forced the
     browser to animate and recompute a full-screen blur every frame, which
     tanked the popup framerate. A slightly darker flat scrim reads the same. */
  background: rgba(28, 26, 23, 0.55);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal) var(--ease-out);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

/* A confirmation must always sit above whatever asked for it. Every overlay
   shares --z-overlay, so stacking fell to DOM order: any modal declared after
   #modal-confirm in index.html would paint over its own confirmation dialog,
   and the user would press a button and appear to get nothing. Found exactly
   that with "Combine these fleets?" behind the sync modal. */
#modal-confirm { z-index: calc(var(--z-overlay) + 50); }

.modal-panel {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dialog);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--sp-3xl) * 2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}
.modal-overlay.active .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* The admiral-abilities modal pops in (scale-up with a little overshoot) when
   it auto-opens after you add an admiral. */
@keyframes modal-pop {
  0%   { transform: scale(0.82); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
#modal-admiral-abilities.active .modal-panel,
#modal-secondary.active .modal-panel {
  animation: modal-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #modal-admiral-abilities.active .modal-panel,
  #modal-secondary.active .modal-panel { animation: none; }
}

/* Chosen secondary objectives shown as chips in the overview slot */
.overview-secondary-chosen { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.secondary-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 3px var(--sp-sm);
}

.modal-panel--lg { max-width: 800px; }
.modal-panel--xl { max-width: 1100px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-lg) var(--sp-xl);
  border-bottom: 1px solid var(--stroke-light);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 18px;
  transition: all var(--duration-fast) var(--ease-out);
}
.modal-close:hover { background: var(--paper-alt); color: var(--ink); }

.modal-body {
  padding: var(--sp-xl);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm);
  padding: var(--sp-lg) var(--sp-xl);
  border-top: 1px solid var(--stroke-light);
  flex-shrink: 0;
}

/* ── 11. Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: none;
}

.badge-navy { background: var(--navy-subtle); color: var(--navy); }
.badge-gold { background: var(--gold-subtle); color: var(--gold-dark); }
.badge-neutral { background: var(--paper-alt); color: var(--ink-muted); border: 1px solid var(--stroke-light); }
/* Status badges: darker text so the colour passes WCAG AA on its own light tint
   (the bright --success/--warning/--error hues only hit ~2.3-3.1:1 here). */
.badge-success { background: rgba(62,153,69,0.1); color: #287030; }
.badge-warning { background: rgba(217,140,31,0.1); color: #8a5810; }
.badge-error { background: rgba(196,60,47,0.1); color: #a8342a; }
.badge-lg { padding: var(--sp-xs) var(--sp-md); font-size: var(--text-sm); }

/* Faction badges */
.badge-ucm { background: rgba(62,153,69,0.1); color: var(--faction-ucm-text); }
.badge-phr { background: rgba(106,76,156,0.1); color: var(--faction-phr); }
.badge-scourge { background: rgba(196,60,47,0.1); color: var(--faction-scourge); }
.badge-shaltari { background: rgba(217,140,31,0.1); color: var(--faction-shaltari-text); }
.badge-bioficer { background: rgba(42,140,140,0.1); color: var(--faction-bioficer-text); }
.badge-resistance { background: rgba(176,74,42,0.1); color: var(--faction-resistance); }

/* ── 12. Landing Page ────────────────────────────────────────── */
.landing {
  /* Sized so the hero + tool cards + the site footer all fit one screen without
     scrolling. No forced 100vh (that pushed the footer below the fold). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl) var(--sp-2xl);
  background: var(--paper);
}

.landing-hero {
  text-align: center;
  margin-bottom: var(--sp-xl);
  max-width: 640px;
}

.landing-logo {
  max-width: 300px;
  margin: 0 auto var(--sp-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Tighter divider inside the landing (the generic .deco-divider stays roomy). */
.landing .deco-divider { margin: var(--sp-md) 0; }
.landing-logo-img { width: 100%; height: auto; display: block; }

.landing-title {
  font-family: var(--font-brand);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-hero));
  font-weight: var(--weight-heavy);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--navy-dark);
  margin-bottom: var(--sp-md);
}

.landing-subtitle {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: var(--ink-muted);
  line-height: 1.6;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-lg);
  max-width: 800px;
  width: 100%;
}

.tool-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.tool-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}

.tool-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--navy);
}

.tool-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-sm);
  color: var(--ink);
}

/* .tool-card-desc is gone with the sentences it styled. A landing tile said
   "Army Builder" and then, underneath, "Build and manage rosters for all six
   factions". A caption explaining a control that had already named itself
   (CLAUDE.md §3). The tiles are the title and the icon now. */

/* Landing, Stats Bar */
.landing-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.landing-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.landing-stat-num {
  font-weight: 700;
  color: var(--navy);
}
.landing-stat-sep {
  color: var(--gold-line);
  margin: 0 2px;
  user-select: none;
}

/* Landing, Faction Showcase */
.landing-factions {
  margin-top: var(--sp-3xl);
  max-width: 800px;
  width: 100%;
}
.landing-factions-title {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: var(--sp-lg);
}
.faction-showcase {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-sm);
}
.faction-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  background: var(--paper);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  overflow: hidden;
}
.faction-chip:hover {
  border-color: var(--current-faction, var(--navy));
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.faction-chip:hover .faction-chip-heroes img {
  filter: brightness(1.08);
}

/* Hero ship art strip at top of faction chip */
.faction-chip-heroes {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: var(--sp-xs);
  background: linear-gradient(135deg,
    rgba(27,58,92,0.06) 0%,
    rgba(27,58,92,0.02) 100%);
  border-bottom: 1px solid var(--stroke);
  position: relative;
  overflow: hidden;
}
/* Faction color accent line at top */
.faction-chip-heroes::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--current-faction, var(--navy));
  opacity: 0.5;
}
.faction-chip-heroes img {
  height: 64px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 -8px;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
  transition: filter var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  position: relative;
}
.faction-chip-heroes img:nth-child(1) { z-index: 1; }
.faction-chip-heroes img:nth-child(2) { z-index: 2; transform: scale(1.1); }
.faction-chip-heroes img:nth-child(3) { z-index: 1; }
.faction-chip:hover .faction-chip-heroes img:nth-child(2) {
  transform: scale(1.15);
}

/* When no hero strip, accent the top of the info section */
.faction-chip-info:first-child {
  border-top: 2px solid var(--current-faction, var(--navy));
}

/* Info row below hero strip */
.faction-chip-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-sm) var(--sp-xs);
  width: 100%;
}

.faction-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--current-faction, var(--navy));
}
.faction-chip-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.faction-chip-name {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.04em;
}
.faction-chip-count {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* Landing, Objectives Reference */
.landing-objectives {
  margin-top: var(--sp-3xl);
  max-width: 800px;
  width: 100%;
}
.objectives-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
  cursor: pointer;
  user-select: none;
}
.objectives-header:hover .objectives-title {
  color: var(--ink-soft);
}
.objectives-title {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  transition: color var(--duration-fast);
}
.objectives-toggle {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--navy-light);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.objectives-toggle svg {
  transition: transform var(--duration-normal) var(--ease-out);
}
.objectives-list-expanded .objectives-toggle svg {
  transform: rotate(180deg);
}
.objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-md);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.objectives-list-expanded .objectives-grid {
  max-height: 2000px;
  opacity: 1;
}
.objective-card {
  padding: var(--sp-lg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--paper);
  border-left: 3px solid var(--gold);
}
.objective-card-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-xs);
}
.objective-card-desc {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── 13. Fleet List ──────────────────────────────────────────── */
.fleet-list {
  padding: var(--sp-3xl) var(--sp-2xl);
  max-width: 960px;
  margin: 0 auto;
}

.fleet-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
  gap: var(--sp-lg);
}
.fleet-tabs {
  display: flex;
  gap: 0;
}
.fleet-tab {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--sp-xs) var(--sp-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.fleet-tab:hover { color: var(--ink); }
.fleet-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-lg);
}

/* ── Collection (models you own) ─────────────────────────────── */
.coll-fac-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-md); }
.coll-fac-tab {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 4px 12px; border: 1px solid var(--stroke-medium); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink-muted); cursor: pointer;
}
.coll-fac-tab:hover { border-color: var(--navy); color: var(--ink); }
.coll-fac-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.coll-summary { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--sp-md); }
.coll-cat {
  font-family: var(--font-header); font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em;
  margin: var(--sp-md) 0 var(--sp-sm); padding-bottom: 2px; border-bottom: 1px solid var(--stroke-light);
}
.coll-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-sm); }
.coll-card {
  display: flex; align-items: center; gap: var(--sp-sm);
  border: 1px solid var(--stroke-light); border-radius: var(--radius-md);
  padding: 6px 8px; background: var(--paper);
}
.coll-card.owned { border-color: var(--navy); background: var(--warm); }
.coll-art { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--paper-alt); }
.coll-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.coll-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); line-height: 1.2; }
.coll-pts { font-size: var(--text-xs); color: var(--ink-muted); }
.coll-step { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.coll-btn {
  width: 26px; height: 26px; border: 1px solid var(--stroke-medium); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.coll-btn:hover { border-color: var(--navy); background: var(--warm); }
.coll-count { min-width: 20px; text-align: center; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.coll-loading, .coll-empty { color: var(--ink-muted); font-size: var(--text-sm); padding: var(--sp-md) 0; }

/* Owned/spare badge on picker cards. */
.coll-badge { display: inline-block; margin-left: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 0 6px; border-radius: var(--radius-pill); border: 1px solid currentColor; }
.coll-badge-ok { color: #2e7d32; }
.coll-badge-over { color: #c43c2f; }
.coll-badge-none { color: var(--ink-faint); }

.fleet-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fleet-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fleet-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.fleet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-lg);
  border-bottom: 1px solid var(--stroke-light);
}

/* Fleet-card ⋮ overflow menu */
.fleet-card-menu-wrap { position: relative; }
.fleet-card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.fleet-card-menu-btn:hover { background: var(--paper-alt); color: var(--ink); }
.fleet-card-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-xs);
  z-index: 20;
}
.fleet-card-menu-wrap.open .fleet-card-menu { display: block; }
.fleet-card-menu button {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.fleet-card-menu button:hover { background: var(--paper-alt); }
.fleet-card-menu button.danger { color: var(--danger, #c43c2f); }
.fleet-card-menu button.danger:hover { background: rgba(196, 60, 47, 0.08); }
.fleet-card-time { padding: 0 var(--sp-lg) var(--sp-md); font-size: var(--text-xs); }

/* Card body content */
.fleet-card-body {
  padding: var(--sp-md) var(--sp-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  flex: 1;
}

.fleet-card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  padding: var(--sp-sm) var(--sp-lg) 0;
}

.fleet-card > .text-caption {
  padding: 0 var(--sp-lg);
}

.fleet-card-points-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--sp-lg);
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.fleet-card-points {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}
.fleet-card-pts-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}
.fleet-card-bar {
  height: 4px;
  background: var(--stroke-light);
  border-radius: 2px;
  margin: var(--sp-xs) var(--sp-lg) 0;
  overflow: hidden;
}
.fleet-card-bar-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.fleet-card-bar-near { background: var(--gold); }
.fleet-card-bar-over { background: var(--danger, #c43c2f); }
.badge-error {
  background: #fef2f0;
  color: #c43c2f;
  border: 1px solid #f0c0b8;
  font-size: 12px;
}
.badge-warn {
  background: #fef9ea;
  color: #8a6d1e;
  border: 1px solid #e0c46c;
  font-size: 12px;
}

/* Fleet card ship composition previews */
.fleet-card-comp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-sm) var(--sp-lg);
}
.fleet-card-thumb {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--stroke);
  background: var(--paper-alt);
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fleet-card:hover .fleet-card-thumb {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.fleet-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fleet-card-thumb-more {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-faint);
  margin-left: 2px;
}

.fleet-card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: auto;
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--stroke-light);
}

.fleet-card-new {
  border: 2px dashed var(--stroke);
  border-left-width: 2px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-xl);
  min-height: 180px;
  color: var(--ink-faint);
}
.fleet-card-new:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-wash);
}

.fleet-card-new-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--navy);
}

/* Fastplay reference tab */
.fastplay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-md);
}
.fastplay-faction-btn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) var(--ease-out);
}
.fastplay-faction-btn:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Fleet list empty state */
.fleet-list-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4xl) var(--sp-xl);
  min-height: 300px;
}
.fleet-list-empty-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
}
.fleet-list-empty-desc {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 380px;
  line-height: 1.6;
}

/* Fleet sort bar */
.fleet-sort-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.fleet-sort-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-right: var(--sp-xs);
}
.fleet-sort-btn {
  background: none;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--sp-xs) var(--sp-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.fleet-sort-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.fleet-sort-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── 14. Ship Stats Grid ─────────────────────────────────────── */
/* Stat block: stats STACKED one per row (a vertical stat-card list), NOT all
   across a single row. Each row: icon + stat name on the left, value on the
   right. Scans straight down. */
/* 2-col grid: each main stat paired with a save on its row (Scan|KS, Sig|ES,
   Thrust|BS); Hull spans the full width on the last row. */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: 320px;
}
.stat-cell-wide { grid-column: 1 / -1; }
.stat-cell-wide .stat-cell-value { font-size: 20px; }
/* Stats on the left, the weapon table in the empty space to their right.
   Wraps the gun table below the stats when the panel is too narrow. */
.stat-weapon-row { display: flex; gap: var(--sp-md); align-items: flex-start; flex-wrap: wrap; }
.stat-weapon-row .sw-stats { flex: 0 0 auto; }
.stat-weapon-row .sw-weapons { flex: 1 1 300px; min-width: 0; }
.stat-weapon-row .sw-weapons .weapon-list { margin: 0; }
.ship-rules-glossary { margin-top: var(--sp-sm); }

.stat-cell {
  background: var(--paper-alt);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  text-align: left;
  overflow: hidden;
}
.stat-cell-icon { flex-shrink: 0; display: inline-flex; align-items: center; }
.stat-cell-icon svg { width: 15px; height: 15px; opacity: 0.8; }
.stat-cell-text { display: flex; flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; }
/* Reinforced Armour chip, pinned to the right of the (full-width) Hull cell. */
.stat-ra-chip {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  cursor: help;
}

.stat-cell-value {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  /* Bold (700), NOT heavy (800): 800 closed up the apertures on 3 / 5 / 8 and
     read as a blob. Lining + tabular figures keep numerals open and aligned. */
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}

.stat-cell-label {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Color-coded stat cells */
.stat-cell-es { border-bottom: 2px solid #8b5e1a; }
.stat-cell-es .stat-cell-value { color: #8b5e1a; }
.stat-cell-ks { border-bottom: 2px solid var(--navy); }
.stat-cell-ks .stat-cell-value { color: var(--navy); }
.stat-cell-bs { border-bottom: 2px solid var(--gold-dark); }
.stat-cell-bs .stat-cell-value { color: var(--gold-dark); }
.stat-cell-none .stat-cell-value { color: var(--ink-faint); opacity: 0.4; }

/* A stat changed by a selected upgrade (e.g. a Drive Refit's +3" Thrust) reads
   in the upgrade colour so the boosted value is unmistakable. Placed after the
   save-colour rules so it wins when a save itself is upgraded. */
.stat-cell-modified {
  border-color: #2e7d32;
  background: rgba(46, 125, 50, 0.09);
  box-shadow: inset 3px 0 0 #2e7d32;
}
.stat-cell-modified .stat-cell-value,
.stat-cell-modified .stat-cell-label { color: #2e7d32; }
.stat-cell-modified .stat-cell-icon svg { opacity: 1; }

/* ── 15. Weapon Table ────────────────────────────────────────── */
.weapon-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.weapon-row {
  display: grid;
  /* Compact column mins so the row fits the narrow detail panel (~309px content)
     without clipping the SPECIAL column; the name & special columns expand via
     fr on wider layouts (the picker modal). */
  grid-template-columns: minmax(80px, 1.5fr) 38px 30px 30px 38px minmax(60px, 1.3fr);
  align-items: baseline;
  gap: 0;
  padding: 2px var(--sp-sm);
  background: var(--paper-alt);
  border-bottom: 1px solid var(--stroke-light);
  font-family: var(--font-condensed);
  font-size: 16px;   /* weapons are key game info. Bigger than the old 14px (print unaffected) */
  line-height: 1.4;
}

.weapon-row:last-child {
  border-bottom: none;
}

/* Station armaments: one combined weapons table with cost + a +/- stepper on
   each row (two extra columns past the standard 6-column weapon grid). */
.station-arm-list .weapon-row.station-arm-row {
  grid-template-columns: minmax(90px, 1.4fr) 42px 30px 30px 40px minmax(60px, 1.1fr) 46px 94px;
  align-items: center;
}
.station-arm-row .station-arm-pts {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  font-weight: var(--weight-semibold);
}
.station-arm-row .station-arm-qty { display: flex; justify-content: flex-end; }
.station-arm-row .sys-opt-step { margin: 0; }
.station-arm-row.sys-opt-active { background: var(--paper); box-shadow: inset 2px 0 0 var(--navy); }
/* The hardpoint picker reuses this armaments table inside the narrow detail
   panel. Re-assert the full 8-column grid (ID-scoped to beat the panel's
   name-only weapon-row override) and restore the Special column to its own cell
   rather than the full-width-below treatment the detail panel applies. */
#builder-detail .station-arm-list .weapon-row.station-arm-row {
  grid-template-columns: minmax(76px, 1.4fr) 40px 28px 28px 38px minmax(52px, 1.1fr) 38px 80px;
}
#builder-detail .station-arm-list .weapon-col-special {
  grid-column: auto;
  margin-top: 0;
  padding-left: 0;
}
#builder-detail .station-arm-list .weapon-row-header .weapon-col-special { display: block; }

/* Hardpoint picker: two-line weapon entries that fit the narrow detail panel.
   Line 1 = name + cost + stepper; line 2 = the weapon stat line. */
.hp-opt-list { border: 1px solid var(--stroke-light); border-radius: var(--radius-sm); overflow: hidden; }
.hp-opt { padding: var(--sp-sm) var(--sp-md); background: var(--paper-alt); border-bottom: 1px solid var(--stroke-light); }
.hp-opt:last-child { border-bottom: none; }
.hp-opt-active { background: var(--paper); box-shadow: inset 3px 0 0 var(--navy); }
.hp-opt-head { display: flex; align-items: center; gap: var(--sp-sm); }
.hp-opt-name { flex: 1; min-width: 0; font-family: var(--font-condensed); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.hp-opt-pts { font-family: var(--font-condensed); color: var(--ink-muted); font-size: var(--text-sm); white-space: nowrap; }
.hp-opt-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-family: var(--font-condensed); font-size: var(--text-sm); }
.hp-stat { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.hp-stat-k { color: var(--ink-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.hp-stat-arc svg { vertical-align: middle; }
.hp-opt-special { display: inline-flex; flex-wrap: wrap; gap: 3px; }

/* In the narrow right detail panel, give the weapon name the full width and
   wrap SPECIAL onto its own row beneath it (the wide picker modal keeps the
   single-line 6-column layout). */
#builder-detail .weapon-row {
  grid-template-columns: 1fr 38px 30px 30px 38px;
}
#builder-detail .weapon-col-special {
  grid-column: 1 / -1;
  padding-left: 0;
  margin-top: 2px;
}
#builder-detail .weapon-col-name { white-space: normal; }
#builder-detail .weapon-row-header .weapon-col-special { display: none; }

/* Name-less stat card: used in the systems picker where the option's bold name
   already heads the card, so repeating it (and the "Weapon" column) is just
   noise. Drop the first column. */
.weapon-list-noname .weapon-row {
  grid-template-columns: 38px 30px 30px 38px minmax(60px, 1.3fr);
}
#builder-detail .weapon-list-noname .weapon-row {
  grid-template-columns: 38px 30px 30px 38px;
}

.weapon-col {
  white-space: nowrap;
  color: var(--ink-soft);
  font-weight: var(--weight-medium);
}

/* Weapon names are gameplay text and must never be clipped: a long name wraps
   inside its column rather than ellipsing away (the picker modal used to cut
   e.g. "Gravitic Hyperlance Battery" mid-word). */
.weapon-col-name {
  min-width: 0;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
}

.weapon-col-arc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
}
.weapon-col-arc svg { flex-shrink: 0; }
.arc-label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.weapon-col-att,
.weapon-col-lock {
  text-align: center;
  font-weight: var(--weight-semibold);
  font-size: 15px;
}
/* Dice glyph after a weapon's Attack count (you roll that many dice). */
.atk-die { width: 0.92em; height: 0.92em; vertical-align: -0.11em; margin-left: 1px; opacity: 0.7; }
.dp-weapons .atk-die { width: 0.85em; height: 0.85em; }
/* Critical-on value under the Lock (only for weapons whose rules use criticals). */
.weapon-col-crit {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1.05;
  color: var(--gold-dark);
  letter-spacing: 0.02em;
  margin-top: 1px;
  white-space: nowrap;
  cursor: help;
}
.weapon-col-dmg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: var(--weight-bold);
  font-size: 15px;
}
.weapon-col-dmg svg { flex-shrink: 0; }
/* Damage type carried as a colour-coded letter on the damage value (1E/2K/1C). */
.dmg-type { font-weight: var(--weight-bold); font-size: 0.85em; margin-left: 1px; }
.dmg-type-K { color: #0057A3; }   /* Kinetic */
.dmg-type-E { color: #92400E; }   /* Energy */
.dmg-type-C { color: #c43c2f; }   /* Core */

.weapon-col-special {
  min-width: 0;
  padding-left: var(--sp-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.weapon-row-header {
  background: var(--navy-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: 1px var(--sp-sm);
}

.weapon-row-header .weapon-col-name {
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
}

.weapon-row-header .weapon-col-special {
  font-style: normal;
  font-weight: var(--weight-bold);
}

/* Launch assets */
.load-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.load-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-top: var(--sp-xs);
}

/* Combined Launch Assets table (one per unit). */
.launch-table-wrap { margin-top: var(--sp-xs); }
.launch-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.launch-table thead th {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--gold-dark);
  background: var(--gold-subtle);
  padding: 3px 6px;
  border-bottom: 1px solid var(--gold-line);
}
.launch-table thead th:first-child,
.launch-table thead th:nth-child(2) { text-align: left; }
.launch-table thead th:last-child { text-align: left; }
.launch-table td {
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid var(--stroke-light);
  color: var(--ink-soft);
  vertical-align: middle;
}
.launch-table tr:last-child td { border-bottom: none; }
.launch-table .lt-launch {
  text-align: center;
  font-weight: var(--weight-heavy);
  font-size: var(--text-md);
  color: var(--ink);
  border-right: 1px solid var(--stroke-light);
  width: 1%;
  white-space: nowrap;
}
.launch-table .lt-count {
  display: inline-block;
  margin-left: 3px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--navy);
  background: var(--navy-subtle);
  border-radius: 999px;
  padding: 0 5px;
  vertical-align: middle;
}
.launch-table .lt-launch-note {
  display: block;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}
.launch-table .lt-load {
  text-align: left;
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.launch-table .lt-special { text-align: left; color: var(--ink-muted); }
.launch-table .lt-range {
  white-space: nowrap;
  font-weight: var(--weight-semibold);
}
.launch-table .lt-range.has-tooltip { cursor: help; }
.launch-table .lt-range.has-tooltip:hover { color: var(--navy); text-decoration: underline dotted; }
.launch-table .lt-load-rule { cursor: help; text-decoration: underline dotted var(--stroke-accent); text-underline-offset: 2px; }
.launch-table .lt-load-rule:hover { color: var(--navy); }

.load-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--warm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.load-row-name {
  font-weight: var(--weight-bold);
  color: var(--ink);
  flex-shrink: 0;
}

/* Launch block. The ship's Launch loads + the asset stat reference, grouped */
.launch-block {
  margin-top: var(--sp-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1px solid var(--stroke-light);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
}
.launch-block .launch-ref { margin-top: 0; }
.launch-block .load-section-label { margin-top: 0; }

/* Launch asset reference panel */
.launch-ref {
  margin-top: var(--sp-md);
  border: 1px solid var(--stroke-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}

.launch-ref-header {
  font-family: var(--font-header);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--warm);
  border-bottom: 1px solid var(--stroke-light);
}

/* One aligned table (offensive assets + fighters share the same columns). */
.launch-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-stat);
  font-size: var(--text-sm);
}
.launch-ref-table th {
  background: var(--warm);
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 2px 6px;
  white-space: nowrap;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.launch-ref-table td {
  text-align: center;
  padding: 1px 6px;
  border-top: 1px solid var(--stroke-light);
  vertical-align: middle;
  line-height: 1.3;
}
.launch-ref-table .lar-name { text-align: left; font-weight: var(--weight-bold); color: var(--ink); white-space: nowrap; }
.launch-ref-table .lar-type svg { vertical-align: middle; }
.launch-ref-table .lar-special { text-align: left; }
.launch-ref-table .lar-special .weapon-special-chip { vertical-align: middle; }
/* Tighter for print + the dp- print sheet. */
.dp-groups + .launch-ref .launch-ref-table th,
.dp-groups + .launch-ref .launch-ref-table td { padding: 1px 6px; }
.pf-inksaver .launch-ref-table th { background: #fff !important; color: #000 !important; border: 1px solid #999; }

/* Consolidated Admiral Abilities reference table (print sheet). Reuses the
   launch-ref-table base; the Effect column is the wide, left-aligned body. */
.dp-abilities-table .dp-abil-name { text-align: left; font-weight: var(--weight-bold); color: var(--ink); white-space: normal; width: 22%; }
.dp-abilities-table .dp-abil-cost { width: 7%; white-space: nowrap; }
.dp-abilities-table .dp-abil-effect { text-align: left; font-weight: var(--weight-regular); line-height: 1.35; }
.dp-abilities-table .dp-abil-grouprow td {
  text-align: left;
  background: var(--warm);
  font-family: var(--font-header);
  font-weight: var(--weight-bold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  padding: 2px 6px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-abilities { break-inside: auto; }
.pf-inksaver .dp-abilities-table .dp-abil-grouprow td { background: #fff !important; color: #000 !important; border-top: 1px solid #999; }

/* Loadout selectors */
.loadout-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xs);
}

.loadout-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.loadout-select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 5px var(--sp-2xl) 5px var(--sp-sm);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.loadout-select:hover {
  border-color: var(--gold);
}
.loadout-select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Either/or loadout (e.g. Laser Refit): radio cards, each with its stat card. */
.loadout-picker { margin-top: var(--sp-sm); }
.loadout-radio {
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-start;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.loadout-radio:hover { border-color: var(--stroke-strong); }
.loadout-radio.selected { border-color: var(--navy); background: var(--navy-subtle); }
.loadout-radio-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.loadout-radio-dot {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 2px solid var(--stroke-strong);
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
}
.loadout-radio.selected .loadout-radio-dot { border-color: var(--navy); }
.loadout-radio.selected .loadout-radio-dot::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--navy);
}
.loadout-radio-main { flex: 1; min-width: 0; }
.loadout-radio-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); margin-bottom: 4px; }
.loadout-radio-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--ink); }
.loadout-radio-cost { font-weight: var(--weight-bold); font-size: var(--text-xs); color: var(--navy); white-space: nowrap; }

.loadout-weapons {
  border-left: 3px solid var(--gold);
  padding-left: var(--sp-xs);
}

/* Special rules chips */
.special-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.rule-chip {
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--navy-subtle);
  color: var(--navy);
  cursor: help;
  transition: background var(--duration-fast) var(--ease-out);
}
.rule-chip.has-tooltip:hover {
  background: rgba(27, 58, 92, 0.18);
  text-decoration: underline;
}

/* Rule tooltip popup */
.rule-tooltip-popup {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--paper);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-lg);
  max-height: 50vh;
  overflow-y: auto;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.rule-tooltip-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--stroke-light);
}
.rule-tooltip-page {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--ink-faint);
  margin-left: var(--sp-sm);
  font-style: italic;
}
.rule-tooltip-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Onboarding tip: one-time callout bubble with an arrow pointing at the
   feature it's introducing. Desktop only (see .desktop-only). */
.onboard-tip {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--paper);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-md) var(--sp-lg) var(--sp-md) var(--sp-md);
  animation: slideUp var(--duration-fast) var(--ease-out);
}
.onboard-tip-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 260px;
}
.onboard-tip-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.onboard-tip-close:hover { background: var(--gold-subtle); color: var(--ink); }

/* Arrow, positioned by the --tip-arrow-left custom property set in JS. */
.onboard-tip::before, .onboard-tip::after {
  content: '';
  position: absolute;
  left: var(--tip-arrow-left, 22px);
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.onboard-tip-below::before { bottom: 100%; border-bottom-color: var(--gold-line); }
.onboard-tip-below::after  { bottom: 100%; margin-bottom: -1px; border-bottom-color: var(--paper); border-width: 6px; }
.onboard-tip-above::before { top: 100%; border-top-color: var(--gold-line); }
.onboard-tip-above::after  { top: 100%; margin-top: -1px; border-top-color: var(--paper); border-width: 6px; }

/* Gold pulse around the element the tip is pointing at. */
.onboard-tip-target {
  animation: onboardTipPulse 1.6s ease-in-out 2;
  border-radius: var(--radius-sm);
}
@keyframes onboardTipPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-subtle); }
  50% { box-shadow: 0 0 0 5px var(--gold-subtle); }
}

/* Weapon type colors */
.weapon-type-k { color: var(--navy); font-weight: var(--weight-bold); }
.weapon-type-e { color: #8b5e1a; font-weight: var(--weight-bold); }
.weapon-type-c { color: var(--error); font-weight: var(--weight-bold); }
.weapon-col-type svg { vertical-align: middle; }

/* Weapon special chips */
.weapon-special-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  font-style: normal;
  background: var(--paper-alt);
  color: var(--ink-muted);
  border: 1px solid var(--stroke-light);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
/* "Alt" = a choose-one fire/load group, not a rated value. Dashed gold outline so
   it reads as a mode-link distinct from rated specials (Reave-2, Scald-1, etc.). */
.weapon-special-chip-alt {
  border-style: dashed;
  border-color: var(--gold-line);
  color: var(--gold-dark);
  background: var(--gold-subtle);
}
.weapon-special-chip-alt.has-tooltip:hover {
  background: var(--gold-subtle);
  border-color: var(--gold);
  color: var(--gold-dark);
}
.weapon-special-chip.has-tooltip {
  cursor: help;
  transition: all var(--duration-fast) var(--ease-out);
}
.weapon-special-chip.has-tooltip:hover {
  background: var(--navy-subtle);
  color: var(--navy);
  border-color: var(--stroke-accent);
  text-decoration: underline;
}

/* ── Ship Lore ──────────────────────────────────────────────── */
.ship-lore {
  margin-top: var(--sp-xs);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ship-lore-toggle {
  padding: var(--sp-xs) var(--sp-sm);
  /* The lore heading inside cards reads in Roboto Slab, a touch bigger. The
     display-serif treatment the wordmark deliberately does NOT use. */
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0;
  text-transform: none;
  list-style: none;
}

.ship-lore-toggle::-webkit-details-marker { display: none; }

.ship-lore-toggle::before {
  content: '+ ';
  font-weight: var(--weight-bold);
}

.ship-lore[open] .ship-lore-toggle::before {
  content: '\2013  ';
}

.ship-lore-text {
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-lore);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-muted);   /* grayed to match the namesake (AA: 5:1+) */
  background: var(--paper-alt);
  border-top: 1px solid var(--stroke-light);
}
.ship-lore-text p { margin: 0 0 0.7em; }
.ship-lore-text p:last-child { margin-bottom: 0; }
.lore-famous-ships {
  margin-top: var(--sp-sm);
  font-family: var(--font-lore);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.5;
}
.lore-famous-ships strong {
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  display: block;
  margin-bottom: var(--sp-xs);
}
.lore-famous-ships ul {
  list-style: disc;
  padding-left: var(--sp-lg);
  margin: 0;
}
.lore-famous-ships li {
  font-style: italic;
  color: var(--ink-muted);
  break-inside: avoid;
}
/* Sub-faction split (e.g. Independents / Kalium), separate underlined columns. */
.lore-famous-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-xl);
}
.lore-famous-col {
  min-width: 7rem;
}
.lore-famous-subhead {
  display: block;
  font-style: normal;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  text-decoration: underline;
  margin-bottom: 2px;
}
/* Tarot "Namesake" etymology flavour */
.lore-namesake {
  margin-top: var(--sp-md);
  font-family: var(--font-lore);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.6;
  color: var(--ink-muted);
}
.lore-namesake-label {
  display: inline;
  font-style: normal;
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gold-dark, #7a6320);
}

/* Ship Rules. Always visible, build-critical (not an accordion) */
.ship-rules-block {
  margin-top: var(--sp-xs);
  border: 1px solid var(--stroke-light);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-alt);
}
.ship-rules-block-label {
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--navy);
  letter-spacing: 0.01em;
  text-transform: none;
}
.ship-rules-block-text {
  padding: 0 var(--sp-md) var(--sp-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Feature Carrier, required Deployable Feature pick */
.feature-carrier-block {
  margin-top: var(--sp-xs);
  padding: var(--sp-sm);
  border: 1px solid var(--stroke-light);
  border-left: 3px solid var(--gold, #8a5e10);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
}
.feature-carrier-block.feature-carrier-unset {
  border-left-color: #c43c2f;
  background: rgba(196, 60, 47, 0.05);
}
.feature-carrier-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-xs);
}
.feature-carrier-block .loadout-select { width: 100%; }

/* Deployable Feature radio list: every option shows its full rules inline. */
.feature-radio-list { display: flex; flex-direction: column; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.feature-radio {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--paper);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.feature-radio:hover { border-color: var(--stroke-strong); }
.feature-radio.selected { border-color: var(--navy); background: var(--navy-wash); box-shadow: inset 2px 0 0 var(--navy); }
.feature-radio input { margin-top: 3px; flex-shrink: 0; accent-color: var(--navy); }
.feature-radio-art { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.feature-radio-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feature-radio-name { font-weight: var(--weight-bold); color: var(--ink); }
.feature-radio-cost { font-weight: var(--weight-bold); color: var(--gold-dark); font-size: var(--text-xs); }
.feature-rule { font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }
.feature-rule b { color: var(--ink); }

/* Systems / Hardpoint picker (Resistance Cruiser/Frigate/Dreadnought Systems) */
.systems-picker {
  margin-top: var(--sp-xs);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  overflow: hidden;
}
.systems-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--warm);
  border-bottom: 1px solid var(--stroke-light);
}
.systems-picker-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.systems-picker-count {
  font-family: var(--font-condensed);
  font-weight: var(--weight-heavy);
  font-size: var(--text-sm);
  color: var(--ink);
}
.systems-picker-incomplete .systems-picker-count { color: #c43c2f; }
.sys-cat { padding: 0 var(--sp-sm) var(--sp-xs); }
/* Each hardpoint category (Broadside / Turret / Structures) gets an obvious
   full-width banded header so the groups are easy to tell apart at a glance. */
.sys-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: var(--paper-alt);
  border-top: 2px solid var(--stroke);
  padding: 5px var(--sp-sm);
  margin: 0 calc(-1 * var(--sp-sm)) var(--sp-xs);
}
.sys-cat:first-child .sys-cat-head { border-top: none; }
.sys-cat-cap { color: var(--navy); font-family: var(--font-condensed); }
.sys-cat-cap-need { color: var(--warning); font-weight: var(--weight-bold); }
.sys-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 2px 0;
}
.sys-opt-active { }
.sys-opt-art { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.sys-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sys-opt-name { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink); }
.sys-opt-star { color: #8a5e10; font-weight: var(--weight-bold); }
.sys-opt-detail { font-size: 12px; line-height: 1.5; color: var(--ink); font-family: var(--font-condensed); }
.sys-opt-cost {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
}
.sys-opt-step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sys-opt-count { min-width: 20px; text-align: center; font-weight: var(--weight-bold); font-size: var(--text-sm); }
.sys-step-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--stroke);
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  line-height: 1;
  color: var(--ink);
  /* Springy press: the resting transition uses an overshoot curve, so when the
     :active squish is released the button pops back past its size and settles. */
  transition: transform 300ms cubic-bezier(0.34, 1.7, 0.5, 1),
              background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sys-step-btn:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
.sys-step-btn:active:not(:disabled) {
  transform: scale(0.78);
  transition-duration: 70ms;
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.sys-step-btn:disabled { opacity: 0.35; cursor: default; }
/* The + button carries the unit cost (e.g. "+10"), so it widens to fit the number. */
.sys-step-add { width: auto; min-width: 28px; padding: 0 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
/* Snap toggle for Structures (binary on/off, you only ever have 0 or 1). */
.sys-opt-structure { align-items: center; }
.sys-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 26px; padding: 2px 8px 2px 2px;
  border: 1px solid var(--stroke); border-radius: 999px;
  background: var(--paper-alt); color: var(--ink-muted); cursor: pointer;
  font-weight: var(--weight-semibold); font-size: var(--text-xs);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.sys-toggle-knob {
  width: 20px; height: 20px; border-radius: 50%; background: var(--ink-muted);
  flex-shrink: 0; transition: transform 180ms var(--ease-out), background-color 140ms ease;
}
.sys-toggle.on { background: var(--navy-subtle); border-color: var(--navy); color: var(--navy); }
.sys-toggle.on .sys-toggle-knob { background: var(--navy); transform: translateX(2px); }
.sys-toggle:hover:not(:disabled) { border-color: var(--navy); }
.sys-toggle:disabled { opacity: 0.4; cursor: default; }
.sys-toggle-cost { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .sys-toggle-knob { transition: background-color 140ms ease; } }
@media (prefers-reduced-motion: reduce) {
  .sys-step-btn { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
  .sys-step-btn:active:not(:disabled) { transform: none; }
}

/* Keep wide tables from clipping on narrow screens, scroll instead of spill */
.weapon-list, .launch-ref, .launch-ref-table { max-width: 100%; overflow-x: auto; }
.sys-opt { flex-wrap: wrap; }
.sys-opt-main { flex: 1 1 60%; }
/* Full-width mini weapon table under a weapon hardpoint option. */
.sys-opt-sheet { flex-basis: 100%; width: 100%; margin: 2px 0 4px; }

/* ── 16. Ship Cards (selection modal) ────────────────────────── */
.ship-category-tabs {
  display: flex;
  gap: var(--sp-xs);
  padding: var(--sp-sm) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.ship-category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.category-tab:hover { background: var(--paper-alt); color: var(--ink); }
.category-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Ship search bar */
.ship-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  margin-bottom: var(--sp-md);
  transition: border-color var(--duration-fast);
}
.ship-search-bar:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy-subtle);
}
.ship-search-bar svg { color: var(--ink-faint); flex-shrink: 0; }
.ship-search-input {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  width: 100%;
  outline: none;
}
.ship-search-input::placeholder { color: var(--ink-faint); }

.ship-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  background: var(--paper-alt);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.ship-search-clear:hover {
  background: var(--navy);
  color: #fff;
}

/* Ship results bar */
.ship-results-bar {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  padding: var(--sp-xs) 0;
  margin-top: var(--sp-sm);
  border-bottom: 1px solid var(--stroke-light);
}
.ship-results-bar.hidden { display: none; }
.results-clear {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.results-clear:hover { text-decoration: underline; }
.results-count {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.results-context {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* Ship selection filters */
.ship-select-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
  align-items: flex-start;
  justify-content: space-between;
}
.ship-select-filters:empty { display: none; }
.ship-filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); flex: 1 1 auto; min-width: 0; }
/* Misc / In-collection aren't filters on the core list, they swap which pool you
   browse, so they read as labelled snap switches, set apart from the filter chips. */
.ship-filter-switches {
  display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center;
  margin-left: auto; padding-left: var(--sp-sm); border-left: 1px solid var(--stroke-light);
}
.picker-switch {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px 0 5px;
  border: 1px solid var(--stroke-medium); border-radius: 100px;
  background: var(--paper); color: var(--ink-faint);
  /* Label matches the filter chips exactly (small Jost). */
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* iOS-style toggle: a pill track with a white knob that slides its full width. */
.picker-switch-track {
  position: relative; width: 36px; height: 20px; border-radius: 999px;
  background: var(--stroke-strong); flex-shrink: 0;
  transition: background-color 160ms ease;
}
.picker-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 190ms var(--ease-out);
}
.picker-switch.on .picker-switch-knob { transform: translateX(16px); }
.picker-switch.on { color: var(--ink); border-color: var(--stroke-strong); }
.picker-switch.on .picker-switch-track { background: var(--navy); }
.picker-switch:hover { border-color: var(--stroke-strong); }
/* Miscellaneous Ships keeps a gold accent so it reads as the "browse a different
   pool" switch, distinct from the navy In-collection toggle. */
.picker-switch-misc.on { color: var(--gold-dark); }
.picker-switch-misc.on .picker-switch-track { background: var(--gold-dark); }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid var(--stroke-medium);
  background: var(--paper);
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.filter-chip:hover { background: var(--paper-alt); color: var(--ink); border-color: var(--stroke-strong); }
.filter-chip.active {
  background: var(--gold-dark);
  color: #fff;
  border-color: var(--gold-dark);
}

.ship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}

.ship-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.ship-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ship-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.ship-card-added {
  animation: cardAddFlash 0.5s var(--ease-out);
}
@keyframes cardAddFlash {
  0% { box-shadow: 0 0 0 0 rgba(62, 153, 69, 0.4); }
  40% { box-shadow: 0 0 0 4px rgba(62, 153, 69, 0.25); border-color: var(--success); }
  100% { box-shadow: var(--shadow-sm); }
}

.ship-card-top {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}

.ship-card-image {
  position: relative;
  width: 120px;
  height: 120px;
  /* No frame. The ship art should float, not sit in a visible box */
  background: transparent;
  overflow: visible;
  flex-shrink: 0;
}
.ship-card-image img { width: 100%; height: 100%; object-fit: contain; }
/* Fully-modular ships (built entirely from chosen systems): the art is just a
   base-hull placeholder, so desaturate it to signal "not necessarily your config". */
.ship-card-image.ship-img-modular img,
.overview-group-art.ship-img-modular img {
  filter: grayscale(1) opacity(0.5);
}
/* TTCombat store link wrapping the unit-detail ship art. Fills the art box so
   layout/img sizing is unchanged. The art itself is the link (no badge icon). */
.shop-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}
/* Alternate-sculpt store link line (e.g. PHR Agamemnon -> Leonidas kit). */
.ship-alt-sculpt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-family: var(--font-condensed);
}
.ship-alt-sculpt svg { color: var(--gold-dark); flex-shrink: 0; }
.ship-alt-sculpt a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.ship-alt-sculpt a:hover { text-decoration: underline; }
.ship-alt-sculpt-src { color: var(--ink-faint); }
/* Buyable model versions list (Plastic / Resin / Alternate resin). */
.ship-models { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-xs); color: var(--ink-muted); font-family: var(--font-condensed); }
.ship-models-lead { display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.ship-models-lead svg { color: var(--gold-dark); }
.ship-model-link { color: var(--gold-dark); font-weight: 600; text-decoration: none; border: 1px solid var(--gold-line); border-radius: var(--radius-sm); padding: 1px 7px; }
.ship-model-link:hover { background: var(--gold-subtle); text-decoration: none; }
.ship-models-src { color: var(--ink-faint); }
/* ×N multiplier on collapsed identical-ship cards */
.ship-qty-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: 1;
  color: #fff;
  background: var(--navy);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(28, 26, 23, 0.25);
}
.ship-name-qty {
  font-family: var(--font-condensed);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}
.ship-card-cost-each {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  text-align: right;
}
.ship-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ship-card-info { flex: 1; min-width: 0; }

.ship-card-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
  color: var(--ink);
}

.ship-badge {
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}
/* Rare/Unique read as a quiet uppercase label, not a coloured pill. */
.ship-badge-unique, .ship-badge-rare {
  background: none;
  padding: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.ship-badge-unique { color: var(--gold-dark); }
.ship-badge-rare { color: var(--navy); }
/* Misc = optional mercenary / cross-faction / civilian ship, shown only when the
   Misc filter reveals them. A muted pill so it reads as "secondary to the core list". */
.ship-badge-misc {
  background: var(--ink-faint, #6b6357);
  color: var(--paper);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
}
/* Famous admiral entries in the ship picker read as a small filled pill so they
   stand out from regular hulls. */
.ship-badge-admiral {
  background: var(--gold-dark);
  color: var(--paper);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}
/* Carrier tag. "Launch"/"Drop" so carriers read at a glance (replaces the star). */
.ship-badge-launch {
  background: var(--navy);
  color: var(--paper);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.ship-badge-group {
  background: var(--paper-alt);
  color: var(--ink-muted);
  border: 1px solid var(--stroke);
}

.ship-card-type {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.ship-tonnage-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.ship-tonnage-light { color: #2f6ba0; }
.ship-tonnage-medium { color: #2f7a3a; }
.ship-tonnage-heavy { color: #8a5e10; }
.ship-tonnage-colossal { color: #b83828; }
.ship-tonnage-payload { color: #6a4c9c; }

.ship-card-cost {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--navy);
  white-space: nowrap;
}

/* Ship select card extras */
.weapon-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--sp-xs);
}
.weapon-mini {
  font-family: var(--font-stat);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--paper-warm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}
.weapon-mini svg { width: 9px; height: 9px; opacity: 0.6; }
/* Launch-capability icons on picker cards (fighters / fire ships / mines /
   dropships / torpedoes / other). */
.ship-card-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: var(--sp-xs); }
/* Bombardment tag: same shape as Launches, gold accent so it reads as distinct. */
.ship-card-bombard .launch-type-chip { background: var(--gold-subtle); color: var(--gold-dark); }
.launch-cap-lead {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Launch capability shown as a WORDED chip (icon + label) so it's self-explanatory
   instead of a bare, download-looking glyph. */
.launch-type-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--navy-subtle); color: var(--navy);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.launch-type-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.weapon-mini-loadout {
  color: var(--gold-dark);
  border-color: var(--gold-line);
  background: rgba(184, 147, 46, 0.06);
  font-style: italic;
}
.launch-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-stat);
  font-size: 12px;
  color: var(--gold-dark);
}
.launch-indicator svg { opacity: 0.7; }

/* ── 17. Admiral Cards ───────────────────────────────────────── */
.admiral-card {
  background: var(--paper);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  position: relative;
}
.admiral-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.admiral-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--gold-dark);
}

/* Portrait-thumbnail slot beside an admiral's name: the portrait when one
   exists (famous), else the rank insignia fills the square (generic/faction).
   The insignia lives here now, not inline with the name text. */
.admiral-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admiral-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admiral-thumb svg { width: 100%; height: 100%; }

/* Rank insignia (shared js/rank-insignia.js) */
/* Rank insignia only renders inside the centred .admiral-thumb box now. No
   inline margin/baseline tweaks (they shoved the box svg off-centre). */

.admiral-level {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* Admiral lives on the left rail. Label is light-on-navy; the card itself keeps
   its light paper background so it reads fine against the navy sidebar. */
.sidebar-admiral { margin-top: var(--sp-lg); }
.sidebar-section-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4bfb5;
  margin-bottom: var(--sp-sm);
}
/* Compact flagship link inside the (light) admiral card -> opens its stat card. */
.admiral-flagship-link {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  margin-top: var(--sp-sm); width: 100%; justify-content: flex-start;
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--gold-line); border-radius: var(--radius-md);
  background: var(--paper-warm); color: var(--navy);
  font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.admiral-flagship-link:hover { background: var(--navy-wash); border-color: var(--navy); }
.admiral-flagship-link svg { flex-shrink: 0; color: var(--gold-dark); }

/* Admiral abilities. Innate (always shown) + Abilities-Table picker */
.admiral-abilities-block { margin-top: var(--sp-md); }
/* Draw attention to the picker while the admiral still has ability picks to
   make. Adding an admiral should prompt you to choose its abilities. */
.admiral-abilities-block.admiral-abilities-unset {
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  background: var(--gold-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
}
.admiral-abilities-block.admiral-abilities-unset .admiral-picks-remaining { color: var(--gold-dark); font-weight: var(--weight-bold); }
.admiral-abilities-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gold-dark);
  margin-bottom: var(--sp-xs);
}
.admiral-picks-remaining { color: var(--ink-muted); font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; }
.admiral-ability { margin-bottom: var(--sp-xs); font-size: var(--text-sm); line-height: 1.45; }
.admiral-ability-name { font-weight: var(--weight-semibold); color: var(--ink); }
.admiral-ability-cost {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  background: var(--navy-subtle, rgba(27,58,92,0.08));
  border-radius: var(--radius-sm);
  padding: 0 5px;
}
.admiral-ability-effect { display: block; color: var(--ink-muted); font-size: var(--text-sm); margin-top: 2px; }
.admiral-ability-picks { display: flex; flex-direction: column; gap: var(--sp-xs); }
/* Compact read-only ability lines in the sidebar slot */
.admiral-ability-lite {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  font-size: var(--text-sm);
  color: var(--ink);
}
.admiral-ability-lite .admiral-ability-name { font-weight: var(--weight-semibold); }
.admiral-ability-none { font-size: var(--text-sm); color: var(--ink-faint); font-style: italic; padding: 2px 0; }
.admiral-choose-btn { margin-top: var(--sp-sm); width: 100%; justify-content: center; }
/* Roomy two-column picker inside the modal (full effects readable) */
.admiral-ability-picks-modal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
@media (max-width: 640px) { .admiral-ability-picks-modal { grid-template-columns: 1fr; } }
.admiral-pick {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  width: 100%;
  text-align: left;
  background: var(--surface, #f4f1ea);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.admiral-pick:hover { border-color: var(--gold-line); }
.admiral-pick.is-selected { border-color: var(--gold); background: var(--gold-subtle); }
.admiral-pick.is-locked { opacity: 0.5; cursor: not-allowed; }
.admiral-pick-text { flex: 1; min-width: 0; }
.admiral-pick-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admiral-pick-radio {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--gold-line); border-radius: 50%;
  background: #fff;
  position: relative;
}
.admiral-pick.is-selected .admiral-pick-radio { border-color: var(--gold); }
.admiral-pick.is-selected .admiral-pick-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
/* Ability picker uses visible checkboxes (tick to select, no click-on/off). */
.admiral-pick-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 2px solid var(--gold-line);
  border-radius: 5px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.admiral-pick.is-selected .admiral-pick-check {
  background: var(--gold); border-color: var(--gold); color: #1c1a17;
}
.kw-link {
  color: var(--navy, #1d3a5f);
  border-bottom: 1px dotted var(--navy, #1d3a5f);
  cursor: pointer;
}
.kw-link:hover { background: var(--gold-subtle); }
.admiral-modal-picks {
  margin-top: var(--sp-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  letter-spacing: 0.02em;
}

/* Admiral -> Capital ship assignment */
.admiral-assign {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.admiral-assign-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gold-dark);
  flex-shrink: 0;
}
.admiral-assign-select {
  flex: 1;
  min-width: 0;
  padding: var(--sp-xs) var(--sp-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface, #f4f1ea);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.admiral-assign-empty {
  margin-top: var(--sp-md);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-style: italic;
}

/* Famous-admiral flagship stat card (full stats + weapons) */
.admiral-flagship {
  margin-top: var(--sp-md);
  padding: var(--sp-sm);
  background: var(--surface, #f4f1ea);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-md);
}
.admiral-flagship-head { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-sm); }
.admiral-flagship-art { height: 56px; width: auto; max-width: 90px; object-fit: contain; }
.admiral-flagship-name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--navy); }
.admiral-flagship-sub { font-size: var(--text-xs); color: var(--ink-muted); }
.admiral-flagship-rules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-sm); }

/* ── 17b. Space Station ─────────────────────────────────────── */
/* The empty "Add Space Station" call is deliberately quiet: a station is
   optional, so it must not compete with the required Add Ship / Admiral areas. */
.station-add-optional {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px dashed var(--stroke);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  transition: all var(--duration-normal) var(--ease-out);
}
.station-add-optional:hover { border-color: var(--navy); color: var(--navy); }
.station-add-optional .opt-tag {
  font-size: 12px;
  opacity: 0.6;
}
.station-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  position: relative;
}
.station-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--navy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.station-card-art {
  margin: calc(var(--sp-md) * -1) calc(var(--sp-md) * -1) var(--sp-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--gold-subtle, #f7f2e6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.station-card-art img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}
.station-option-thumb {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin-right: var(--sp-xs);
  vertical-align: middle;
  flex-shrink: 0;
}
.station-option-thumb img { width: 100%; height: 100%; object-fit: contain; }
.station-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.station-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: 2px;
}
.station-stat {
  font-family: var(--font-stat);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--paper-warm);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
}
.station-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
}
.rule-chip-sm {
  font-size: 12px;
  padding: 1px 6px;
}

/* Station modal */
.station-option {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.station-option:hover {
  border-color: var(--navy);
  background: var(--navy-subtle);
}
.station-option-active {
  border-color: var(--navy);
  background: var(--navy-subtle);
}
.station-option-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.station-modal-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}

/* Deployable features reference */
.feature-ref-card {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-xs);
  background: var(--paper-warm);
}
.feature-ref-name {
  font-family: var(--font-stat);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* ── 18. Group View (builder main) ───────────────────────────── */
.group-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-xl);
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-lg);
  border-bottom: 2px solid var(--stroke);
  position: relative;
}
.group-header-bar::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--gold);
}

/* Fleet budget context bar */
.group-budget-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) var(--sp-md);
  margin-bottom: var(--sp-md);
  background: var(--paper-alt);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.04em;
}
.group-budget-label {
  color: var(--ink-muted);
}
.group-budget-remaining {
  color: var(--navy);
}
.group-budget-bar.budget-tight .group-budget-remaining {
  color: var(--gold-dark);
}
.group-budget-bar.budget-over {
  background: #fef2f0;
  border-color: #f0c0b8;
}
.group-budget-bar.budget-over .group-budget-remaining {
  color: var(--error);
  font-weight: var(--weight-bold);
}

.group-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy-dark);
}
/* Pronunciation respelling woven into a lore "Namesake:" line, e.g. Theseus
   (thee-syoos). Subtle by default; the dotted underline hints it's tap-to-hear. */
.lore-pron {
  color: var(--gold-dark);
  font-style: italic;
  border-bottom: 1px dotted var(--gold-line);
  cursor: pointer;
}
.lore-pron:hover,
.lore-pron:focus-visible { color: var(--gold); outline: none; }
.lore-pron.pron-speaking { color: var(--gold); border-bottom-color: var(--gold); }
.lore-namesake-name { font-weight: var(--weight-semibold, 600); color: var(--ink-soft); }
/* Ship class shown beside a named famous-admiral flagship (e.g. "Fortune's Fancy"). */
.flagship-class {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* A named flagship's own ship-class, e.g. "Fortune's Fancy (Amber Cruiser)".
   The class rides inline on the same line, just smaller/quieter than the
   flagship's proper name so it reads as an aside, not equal billing. */
.flagship-class-inline {
  font-size: 0.85em;
  font-weight: var(--weight-regular);
  color: var(--ink-muted);
}

/* ── Battlegroup inline rename ───────────────────────────────── */
/* Click-to-rename names show a dotted underline on hover so the affordance is
   discoverable without cluttering the layout. */
/* Click target is the NAME TEXT only, not the whole row. Inline-block shrinks
   the editable element to its content width (align-self stops flex stretch). */
.group-name-editable { cursor: pointer; display: inline-block; align-self: flex-start; max-width: 100%; }
.group-name-editable:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--navy);
}
.group-name-input {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  max-width: 100%;
  outline: none;
}
.group-name-input:focus { box-shadow: 0 0 0 3px var(--navy-subtle); }
/* Pencil button beside the detail-panel group title. */
.group-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  color: var(--ink-muted);
  cursor: pointer;
}
.group-rename-btn:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-subtle); }

.badge-tonnage {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid;
}
.badge-tonnage-light { color: #2f6ba0; border-color: #2f6ba0; background: rgba(74, 141, 199, 0.08); }
.badge-tonnage-medium { color: #2f7a3a; border-color: #2f7a3a; background: rgba(62, 138, 69, 0.08); }
.badge-tonnage-heavy { color: #8a5e10; border-color: #8a5e10; background: rgba(196, 136, 32, 0.08); }
.badge-tonnage-super-heavy { color: #8a5e10; border-color: #8a5e10; background: rgba(196, 136, 32, 0.08); }
.badge-tonnage-colossal { color: #b83828; border-color: #b83828; background: rgba(184, 56, 40, 0.08); }
.badge-tonnage-payload { color: #6a4c9c; border-color: #6a4c9c; background: rgba(106, 76, 156, 0.08); }

.group-warnings {
  margin-bottom: var(--sp-lg);
  padding: var(--sp-sm) var(--sp-md);
  background: #fef2f0;
  border: 1px solid #f0c0b8;
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
}
.group-warning-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--error);
  padding: var(--sp-xxs) 0;
}

.group-ships-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.group-ship-entry {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  padding-left: calc(var(--sp-lg) - 2px);
  /* Image on top, content in a capped reading column (matches mobile's
     ship-art-hero). The detail panel is wide; an uncapped row stretched stats,
     weapon tables and lore into hard-to-read full-width lines. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-md);
  max-width: 720px;
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}
.group-ship-entry:hover {
  border-color: var(--stroke-strong);
  border-left-color: var(--navy);
  box-shadow: var(--shadow-md);
}

/* Faction-colored left accent on ship entries */
[data-faction="ucm"] .group-ship-entry:hover { border-left-color: var(--faction-ucm); }
[data-faction="phr"] .group-ship-entry:hover { border-left-color: var(--faction-phr); }
[data-faction="scourge"] .group-ship-entry:hover { border-left-color: var(--faction-scourge); }
[data-faction="shaltari"] .group-ship-entry:hover { border-left-color: var(--faction-shaltari); }
[data-faction="bioficer"] .group-ship-entry:hover { border-left-color: var(--faction-bioficer); }
[data-faction="resistance"] .group-ship-entry:hover { border-left-color: var(--faction-resistance); }

.group-ship-entry .ship-card-image {
  width: 100%;
  height: 250px;
  align-self: stretch;
}

/* Compact view, smaller cards, no stat/weapon detail */
.group-ship-entry.compact {
  padding: var(--sp-md);
  padding-left: calc(var(--sp-md) - 2px);
  gap: var(--sp-md);
}
.group-ship-entry.compact .ship-card-image {
  width: 64px;
  height: 64px;
}

.group-ship-remove {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
}

/* ── Experimental 2×4 stat layout (Settings → "2×4 stat layout") ──
   Ship art on top, full-width; below it the stat grid (forced to 2 columns)
   sits to the LEFT of the special-rules block. The remove button is already
   absolutely positioned, so a column flow needs no extra handling. */
.group-ship-entry.alt2x4 {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-md);
}
.group-ship-entry.alt2x4 .ship-card-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  align-self: center;
}
.group-ship-entry.alt2x4 .ship-card-image img {
  max-height: 200px;
}
.alt-statblock-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-lg);
}
.alt-statblock-row .alt-stats {
  flex: 0 0 auto;
}
.alt-statblock-row .alt-stats .stat-grid {
  grid-template-columns: repeat(2, minmax(64px, 1fr));
}
.alt-statblock-row .alt-rules {
  flex: 1 1 0;
  min-width: 0;
}
/* On narrow viewports stack the rules under the stats again. */
@media (max-width: 600px) {
  .alt-statblock-row { flex-direction: column; gap: var(--sp-sm); }
  .alt-statblock-row .alt-stats { width: 100%; }
}
.settings-toggle-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Add ship area */
.add-ship-area {
  border: 2px dashed var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  color: var(--ink-faint);
  min-height: 80px;
}
.add-ship-area:hover {
  border-color: var(--navy);
  background: var(--navy-wash);
  color: var(--navy);
}
/* Add Group sits below the group list (like Add Admiral) but reads as the
   primary blue action: navy by default, filled navy on hover. */
.add-group-cta {
  border-color: var(--navy);
  color: var(--navy);
  padding: var(--sp-md);
  min-height: 0;
  margin-top: var(--sp-sm);
}
.add-group-cta:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Group Quantity Bar ── */
/* Group header right column: Remove on top, qty stepper below it. */
.group-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-sm);
  flex-shrink: 0;
}
.group-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--paper-alt);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 2px;
}
.group-qty-num {
  font-family: var(--font-condensed);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  min-width: 30px;
  text-align: center;
}
.group-qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
}
.group-qty-btn:hover:not(:disabled) { background: var(--navy); color: #fff; }
.group-qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--ink-faint);
}

/* ── Game Size Popover ── */
.game-size-popover {
  background: var(--paper);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover);
  min-width: 220px;
  padding: var(--sp-xs);
  animation: fadeSlideIn 0.15s var(--ease-out);
}
.game-size-popover-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.game-size-popover-item:hover {
  background: var(--navy-subtle);
}
.game-size-popover-item.active {
  background: var(--navy);
  color: #fff;
}
.game-size-popover-item.active .game-size-popover-desc {
  color: rgba(255,255,255,0.7);
}
/* Custom points limit (e.g. a 1500-pt Clash), set it right in the size popover. */
.game-size-custom { padding: 10px 12px; border-top: 1px solid var(--stroke-light); display: flex; flex-direction: column; gap: 4px; }
.game-size-custom-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.game-size-custom-row { display: flex; align-items: center; gap: 6px; }
.game-size-custom-input { width: 96px; padding: 6px 8px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); font-size: var(--text-base); font-family: var(--font-display); background: var(--paper); color: var(--ink); }
.game-size-custom-unit { font-size: var(--text-sm); color: var(--ink-muted); }
.game-size-custom-hint { font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.3; }
.game-size-popover-name {
  font-family: var(--font-condensed);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.game-size-popover-desc {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 19. Empty States ────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-4xl) var(--sp-2xl);
  color: var(--ink-faint);
}

.empty-state-icon {
  font-size: 36px;
  margin-bottom: var(--sp-lg);
  opacity: 0.3;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  margin-bottom: var(--sp-sm);
}

.empty-state-desc {
  font-size: var(--text-sm);
  max-width: 400px;
  margin: 0 auto var(--sp-lg);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ── 20. Sort Controls ───────────────────────────────────────── */
.ship-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-top: var(--sp-sm);
}
.ship-list-toolbar .ship-results-bar { margin: 0; }
.sort-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.sort-label {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sort-arrow { font-weight: var(--weight-heavy); }

.sort-btn {
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.sort-btn:hover { background: var(--paper-alt); color: var(--ink); }
.sort-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── 21. Faction-Colored Accents ─────────────────────────────── */
[data-faction="ucm"] .fleet-info-panel { border-left: 3px solid var(--faction-ucm); }
[data-faction="phr"] .fleet-info-panel { border-left: 3px solid var(--faction-phr); }
[data-faction="scourge"] .fleet-info-panel { border-left: 3px solid var(--faction-scourge); }
[data-faction="shaltari"] .fleet-info-panel { border-left: 3px solid var(--faction-shaltari); }
[data-faction="bioficer"] .fleet-info-panel { border-left: 3px solid var(--faction-bioficer); }
[data-faction="resistance"] .fleet-info-panel { border-left: 3px solid var(--faction-resistance); }

/* ── 22. Game Size Picker (visual indicators) ────────────────── */
.game-size-option {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--paper);
}
.game-size-option:hover { border-color: var(--stroke-strong); }
.game-size-option.selected {
  border-color: var(--navy);
  background: var(--navy-wash);
  box-shadow: inset 3px 0 0 var(--navy);
}

/* Art Deco gold frame that draws itself on hover and stays on the chosen FACTION
   (New Fleet picker). The gold circling IS the selection cue, so the faction
   button keeps its outline look (no navy fill). non-scaling-stroke keeps an even
   2px line on the stretched box; rx:0 = sharp Deco corners. */
.gold-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.gold-frame rect {
  fill: none;
  stroke: #c9a227;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s var(--ease-out, ease);
}
.faction-pick-btn:hover .gold-frame rect,
.faction-pick-btn[data-selected] .gold-frame rect { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .gold-frame rect { transition: none; } }
/* The gold frame is the ONLY emphasis on the faction picker. Kill the navy
   hover (border/text) and the navy focus ring so there's no blue highlight. */
.faction-pick-btn:hover { border-color: var(--stroke); color: var(--ink); box-shadow: none; }
.faction-pick-btn:focus-visible { outline-color: var(--gold); }

.game-size-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 22px;
  flex-shrink: 0;
}
.gs-block {
  aspect-ratio: 1;
  border: 1.5px solid var(--stroke-strong);
  border-radius: 1px;
  box-sizing: border-box;
  transition: background var(--duration-fast) var(--ease-out);
}
.gs-block.filled { background: var(--navy); border-color: var(--navy); }

.game-size-info { flex: 1; }
.game-size-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.game-size-details {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.game-size-time {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-style: italic;
}

/* New Fleet modal. Compact so the whole thing fits with no scroll. */
.new-fleet-row { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.new-fleet-row .form-group { min-width: 180px; }
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.size-grid .game-size-option { padding: var(--sp-sm) var(--sp-md); }
.size-grid .game-size-name { font-size: var(--text-sm); }
.size-grid .game-size-details { font-size: var(--text-xs); line-height: 1.35; }
.game-size-sub { opacity: 0.85; }
/* Floating-label field (New Fleet modal: Fleet Name, Description, Points limit).
   Input first, label second (adjacent sibling). Label sits centered in the box,
   then shrinks and lifts to the top border on focus or when the field has a value. */
.float-field { position: relative; }
.float-field > .form-input { width: 100%; }
/* The label WRAPS. It used to be nowrap + ellipsis, which on a 320px phone cut
   Import's "Backup, army, share link or a pasted list" down to "…or a pas".
   Losing the half that tells you a New Recruit list will do, on the one screen
   where you have nothing else to go on. Nothing in this app is allowed to
   truncate content; a label is content. Every other float label is two words
   and stays on one line by itself. */
.float-field > .float-label {
  position: absolute; left: var(--sp-md); top: 50%;
  transform: translateY(-50%); transform-origin: left center;
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.1; min-height: 0;
  max-width: calc(100% - var(--sp-lg));
  color: var(--ink-faint); pointer-events: none;
  background: var(--paper); padding: 0 4px;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.float-field > .form-input:focus + .float-label,
.float-field > .form-input:not(:placeholder-shown) + .float-label {
  transform: translateY(-50%) translateY(-19px) scale(0.82);
  color: var(--navy);
}
/* A floating label rests where the caret will be. On a single-line input that
   is the middle of the box; on a six-row textarea it is the FIRST line, and
   `top: 50%` parked it three rows down in the empty middle of nothing.
   AFTER the rule above, not before: the two selectors weigh the same, so
   source order is the whole of the override -- placed above it, the resting
   position took but the floated one did not, and the label lifted clear off
   the top of the box. */
.float-field--area > .float-label { top: 0; transform: translateY(9px); }
.float-field--area > .form-input:focus + .float-label,
.float-field--area > .form-input:not(:placeholder-shown) + .float-label {
  transform: translateY(-9px) scale(0.82);
}
.new-fleet-points-row { display: inline-block; margin-top: var(--sp-md); }
.new-fleet-points-row #new-fleet-points { width: 220px; max-width: 100%; }
.new-fleet-points-hint { font-size: var(--text-xs); color: var(--ink-muted); }

.faction-pick-desc {
  margin-top: var(--sp-sm);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-style: italic;
  min-height: 1.2em;
  line-height: 1.4;
}

/* ── 23. Toast Notification ─────────────────────────────────── */
#app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--paper);
  border: 1px solid var(--stroke-strong);
  color: var(--ink);
  padding: var(--sp-md) var(--sp-2xl);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  z-index: var(--z-toast);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
  box-shadow: 0 4px 16px rgba(28, 26, 23, 0.12), 0 1px 3px rgba(28, 26, 23, 0.08);
  pointer-events: none;
  white-space: nowrap;
}

/* ── 24. Animations ──────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Opacity-only: a transform here would make every view a containing block for
   its position:fixed children (e.g. the mobile fleet-summary bottom sheet),
   anchoring them to the tall view content instead of the viewport. */
@keyframes viewEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-in { animation: slideUp var(--duration-slow) var(--ease-out) forwards; }

/* View transitions */
#app > section:not(.hidden) {
  animation: viewEnter 0.2s var(--ease-out);
}

.stagger > * { opacity: 0; animation: slideUp var(--duration-slow) var(--ease-out) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }

/* ── 25b. Share Modal & Shared Fleet View ───────────────────── */
.share-url-row {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
}
.share-url-input {
  flex: 1;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-alt);
  min-width: 0;
}
.share-url-input:focus { outline: 2px solid var(--navy-light); outline-offset: -1px; }
.share-text-export {
  width: 100%;
  min-height: 160px;
  padding: var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--paper-alt);
  resize: vertical;
  line-height: 1.5;
}

.shared-fleet-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-2xl);
}
.shared-fleet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-xl);
  border-bottom: 2px solid var(--navy);
}
.shared-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.shared-faction-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.shared-fleet-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--navy-dark);
  margin: 0;
}
.shared-fleet-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xs);
}
.shared-fleet-sublabel {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.04em;
}
.shared-header-right {
  text-align: right;
  flex-shrink: 0;
}
.shared-fleet-points {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}
.shared-fleet-pts-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.shared-fleet-actions {
  display: flex;
  gap: var(--sp-sm);
  flex-shrink: 0;
  margin-top: var(--sp-sm);
}
.shared-desc {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  border-left: 3px solid var(--gold);
  background: var(--paper-warm);
}
.shared-comp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xl);
}
.shared-comp-tag {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  color: var(--ink-soft);
}
.shared-comp-light { color: #2f6ba0; border: 1px solid #2f6ba0; }
.shared-comp-medium { color: #2f7a3a; border: 1px solid #2f7a3a; }
.shared-comp-heavy { color: #8a5e10; border: 1px solid #8a5e10; }
.shared-comp-super-heavy { color: #8a5e10; border: 1px solid #8a5e10; }
.shared-comp-colossal { color: #b83828; border: 1px solid #b83828; }
.shared-section {
  margin-bottom: var(--sp-xl);
}
.shared-section-title {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--stroke-light);
}
.shared-section-title .text-caption {
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.shared-admiral-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--gold);
  margin-bottom: var(--sp-xs);
  background: var(--paper-warm);
}
.shared-admiral-info {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.shared-admiral-name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.shared-admiral-level {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.04em;
}
.shared-admiral-pts {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.shared-admiral-card--stacked {
  flex-direction: column;
  align-items: stretch;
}
.shared-admiral-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}
.shared-admiral-abilities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-sm);
  padding-top: var(--sp-xs);
  margin-top: var(--sp-xs);
  border-top: 1px solid var(--stroke-light);
}
.shared-ability-chip {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
}
.shared-ability-chip--innate {
  color: var(--ink);
  border-color: var(--gold);
}
.shared-group-ships {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.shared-ship-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.shared-ship-top {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.shared-ship-art {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-wash);
  border: 1px solid var(--stroke-light);
}
.shared-ship-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shared-ship-info {
  flex: 1;
  min-width: 0;
}
.shared-ship-name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--navy-dark);
}
.shared-ship-type {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.shared-ship-pts {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
  flex-shrink: 0;
}
.shared-ship-pts-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--ink-soft);
}
.shared-loadout {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .shared-fleet-header { flex-direction: column; }
  .shared-header-right { text-align: left; display: flex; align-items: baseline; gap: var(--sp-md); flex-wrap: wrap; }
  .shared-faction-icon { width: 36px; height: 36px; }
}
@media (max-width: 480px) {
  .shared-fleet-container { padding: var(--sp-lg); }
  .shared-fleet-name { font-size: var(--text-xl); }
  .shared-fleet-actions { width: 100%; }
  .shared-fleet-actions .btn { flex: 1; }
  .shared-ship-art { width: 60px; height: 60px; }
  .shared-ship-top { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 25. Utility Classes ─────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.gap-xl { gap: var(--sp-xl); }
.gap-2xl { gap: var(--sp-2xl); }
.text-center { text-align: center; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── 26. Print ───────────────────────────────────────────────── */
@media print {
  /* No forced size. Adapt to whatever paper the user selects (A4 or US Letter).
     Margins are safe for both: content sits inside the A4 width (the narrower)
     and the US Letter height (the shorter), so nothing clips on either. */
  @page {
    margin: 12mm;
  }

  /* THE CONTAINER IS #dzc-print. It was #print-container, which is Dropfleet's
     id and exists nowhere in this app -- the whole of "print mode gets to a
     white screen", reported 2026-08-15.
     `body > *:not(#print-container) { display: none !important }` matched every
     child of the body INCLUDING the sheet, and `!important` beats any
     specificity dzc-print.css can bring, so the correctly built, correctly
     filled sheet was hidden by a rule naming a container that was never
     ported. Every browser, every route to the printer, one blank page.
     The hiding lives in dzc-print.css, where it is gated on `body.is-sheet` so
     Ctrl+P elsewhere in the app still prints the page you are looking at. What
     stays here is the paper itself and the WebKit fix below. */
  body { background: white !important; color: black !important; font-size: 10pt; }

  /* macOS/WebKit fix: <body> is a column flexbox (display:flex on screen). In a
     paginated context WebKit will not fragment a flex item across pages and
     collapses the lone remaining child to ~zero height. Printing ONE BLANK PAGE
     (Windows/Blink prints fine). Reset the body back to normal block flow for
     print so the sheet paginates as an ordinary block. */
  html, body {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  #dzc-print {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Stat grid, compact for print */
  .stat-grid { gap: 0; }
  .stat-cell {
    border-color: #999;
    background: #f5f5f5;
    padding: 2px 4px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .stat-cell-label { font-size: 7pt; gap: 1px; }
  .stat-cell-label svg { width: 8px; height: 8px; opacity: 0.7; }
  .stat-cell-value { font-size: 11pt; }
  .stat-cell-warn { background: #fff3e0; color: #8a5810; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stat-cell-good { color: #2e7d32; }

  /* Weapons, tight rows */
  .weapon-list { margin-top: 3px; }
  .weapon-row { background: #fafafa; border-color: #bbb; padding: 1px 6px; min-height: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .weapon-header { background: #eee; padding: 1px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .weapon-col-type svg { opacity: 0.9; }
  .weapon-special-chip { background: #eee; color: #333; border-color: #bbb; font-size: 7pt; padding: 0 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Launch ref */
  .launch-ref { border-color: #999; break-inside: avoid; margin-top: 8px; }
  .launch-ref-header { background: #f5f5f5; border-color: #bbb; font-size: 8pt; padding: 3px 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .launch-ref-row { border-color: #bbb; padding: 1px 6px; }
  .launch-ref-row-header { background: #f5f5f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Ship card print overrides */
  .print-ship { border-color: #999; border-left-color: #1b3a5c; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-ship-art { border-color: #bbb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-dmg-box { border-color: #777; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Warnings */
  .print-warnings { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-warning-error { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Group category badges */
  .print-group-cat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Cripple markers */
  .print-dmg-cripple { border-color: #c43c2f; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-dmg-cripple-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Description */
  .print-desc { border-left-color: #b8932e; background: #faf8f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Totals */
  .print-totals { break-inside: avoid; }

  /* Page break hints */
  .print-group { break-inside: avoid; }
  .print-ship { break-inside: avoid; }
  .print-glossary { break-before: auto; }
  .print-header { break-after: avoid; }
  .print-group-header { break-after: avoid; }

  /* Two-column units layout (Settings toggle), packs ~4 units per page. The
     group header spans both columns; ships flow into two columns; tall groups
     may break across pages (they can't fit one column). Weapon rows tighten. */
  .print-2col .print-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: start; break-inside: auto; }
  .print-2col .print-group-header { grid-column: 1 / -1; }
  .print-2col .print-ship { break-inside: avoid; }
  .print-2col .print-ship .weapon-row { grid-template-columns: minmax(64px, 1.2fr) 26px 22px 22px 28px minmax(50px, 1.5fr); font-size: 7.5pt; }

}

/* Print Preview overlay. Pick options + see the output before the print dialog. */
.print-preview-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: #5a5a5a; display: flex; flex-direction: column;
}
.print-preview-bar {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--navy); color: #fff; flex-wrap: wrap;
}
.print-preview-title { font-weight: var(--weight-bold); font-size: var(--text-md); }
.print-preview-opt { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); cursor: pointer; }
.print-preview-spacer { flex: 1; }
/* On the navy bar the buttons need their own colours: Close = white outline,
   Print = gold fill, so they read clearly and are visibly different. */
.print-preview-bar .pp-close-btn {
  background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.65); color: #fff;
}
.print-preview-bar .pp-close-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.print-preview-bar #pp-print {
  background: #ffcc00; border-color: #ffcc00; color: #1b2a3a; font-weight: var(--weight-bold);
}
.print-preview-bar #pp-print:hover { background: #ffd633; border-color: #ffd633; }
.print-preview-scroll { flex: 1; overflow: auto; padding: var(--sp-lg); display: flex; justify-content: center; align-items: flex-start; }
.print-preview-surface {
  position: relative;
  background: #fff; width: 210mm; max-width: 100%;
  padding: 12mm; box-shadow: 0 4px 24px rgba(0,0,0,0.4); border-radius: 2px;
}
/* Page-count readout + density select in the preview bar. */
.pp-pagecount { font-size: var(--text-sm); color: #cdd6e0; font-variant-numeric: tabular-nums; }
.pp-density-sel {
  background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px; padding: 1px 4px; font-size: var(--text-sm); cursor: pointer;
}
.pp-density-sel option { color: #1c1a17; }
.pp-density-sel:disabled, .print-preview-opt input:disabled { opacity: 0.4; cursor: default; }
/* Estimated page boundary on the continuous preview sheet (screen only). */
.pp-page-break {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1.5px dashed #b04a3a; pointer-events: none;
}
.pp-page-break-label {
  position: absolute; right: 0; top: 2px;
  background: #b04a3a; color: #fff; font-size: 8pt; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 0 0 3px 3px;
}
/* Simple Print View, compact roster list (screen + print). */
.print-simple { font-family: 'Jost', sans-serif; color: #1c1a17; font-size: 11pt; }
.print-simple .sp-head { font-size: 13pt; border-bottom: 2px solid #1c1a17; padding-bottom: 4px; margin-bottom: 8px; }
.print-simple .sp-section { margin-bottom: 10px; }
.print-simple .sp-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #bbb; }
.print-simple .sp-qty { font-weight: 700; min-width: 26px; }
.print-simple .sp-name { font-weight: 600; }
.print-simple .sp-note { color: #555; font-size: 9.5pt; }
.print-simple .sp-pts { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.print-simple .sp-adm .sp-name { font-style: italic; }
/* Simple Print View renders the plain-text army list in a clean readable block. */
.print-simple-text {
  font-family: 'Jost', 'Segoe UI', sans-serif;
  font-size: 11pt;
  line-height: 1.5;
  color: #1c1a17;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Print layout classes (used by printFleet JS) */
.print-fleet {
  font-family: 'Jost', sans-serif;
  color: #1c1a17;
  max-width: 800px;
  margin: 0 auto;
}

.print-header {
  border-bottom: 3px double #1b3a5c;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.print-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.print-faction-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
}
.print-header-text {
  flex: 1;
}
.print-header-points {
  text-align: right;
  flex-shrink: 0;
}
.print-points-big {
  font-family: 'Roboto Slab', serif;
  font-size: 22pt;
  font-weight: 700;
  color: #1b3a5c;
  line-height: 1;
}
.print-points-cap {
  font-family: var(--font-condensed);
  font-size: 8pt;
  color: #5f5f5f;
  text-transform: none;
  letter-spacing: 0.04em;
}
.print-fleet-name {
  font-family: 'Roboto Slab', serif;
  font-size: 18pt;
  font-weight: 700;
  color: #1b3a5c;
  line-height: 1.2;
}
.print-fleet-meta {
  font-size: 10pt;
  color: #555;
  margin-top: 2px;
}
.print-fleet-summary {
  font-family: var(--font-condensed);
  font-size: 8pt;
  color: #5f5f5f;
  text-transform: none;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.print-fleet-date {
  font-family: var(--font-condensed);
  font-size: 7.5pt;
  color: #bbb;
  margin-top: 1px;
}

/* Fleet description in print */
.print-desc {
  font-family: var(--font-lore);
  font-size: 9pt;
  color: #555;
  line-height: 1.5;
  padding: 6px 10px;
  margin-top: 10px;
  border-left: 3px solid #b8932e;
  background: #faf8f5;
}
.print-warnings {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #e0c46c;
  border-radius: 3px;
  background: #fef9ea;
}
.print-warning {
  font-family: var(--font-condensed);
  font-size: 8pt;
  font-weight: 600;
  color: #8a6d1e;
  margin-bottom: 1px;
}
.print-warning-error { color: #c43c2f; }

.print-section { margin-top: 16px; }
.print-section-title {
  font-family: var(--font-condensed);
  font-size: 9pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #767676;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  margin-bottom: 8px;
  /* A section title (e.g. "Rules") must never sit alone at a page foot. */
  break-after: avoid; page-break-after: avoid;
}

.print-admiral {
  font-weight: 600;
  font-size: 11pt;
}
.print-admiral-card {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  break-inside: avoid;
}
.print-admiral-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.print-admiral-name {
  font-weight: 700;
  font-size: 11pt;
}
.print-admiral-pts {
  font-size: 10pt;
  color: #666;
}
.print-admiral-abilities {
  margin-top: 5px;
  padding: 4px 6px 5px;
  border: 1px solid var(--gold-line, #d9c089);
  border-left: 3px solid var(--gold, #b8932e);
  border-radius: 3px;
  background: rgba(184, 147, 46, 0.06);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-admiral-abilities-head {
  font-family: var(--font-header);
  font-size: 8pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a6d1e;
  margin-bottom: 2px;
}
.print-admiral-ability-sublabel {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #8a6d1e;
  margin-top: 4pt;
}
.print-admiral-abilities .print-admiral-ability-sublabel:first-child { margin-top: 0; }
.print-admiral-ability {
  font-size: 8pt;
  line-height: 1.35;
  color: #444;
  margin-bottom: 2px;
}
.print-ability-name {
  font-weight: 700;
  color: #1b3a5c;
}
.print-ability-cost {
  font-weight: 600;
  color: #8a6d1e;
  font-size: 7.5pt;
}

/* Print space station */
.print-station {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #bbb;
  border-radius: 4px;
  break-inside: avoid;
}
.print-station-stats {
  font-family: var(--font-condensed);
  font-size: 9pt;
  color: #444;
  margin-top: 2px;
}
.print-station-rules {
  font-family: var(--font-condensed);
  font-size: 8pt;
  color: #555;
  margin-top: 2px;
}

.print-group {
  margin-top: 16px;
  break-inside: avoid;
}
.print-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #1b3a5c;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.print-group-name {
  font-family: 'Roboto Slab', serif;
  font-size: 13pt;
  font-weight: 700;
  color: #1b3a5c;
}
.print-group-pts {
  font-size: 10pt;
  color: #666;
}
.print-group-cat {
  font-family: var(--font-condensed);
  font-size: 8pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 1px 5px;
  border: 1px solid;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-left: 4px;
}
.print-group-cat-light { color: #2f6ba0; border-color: #2f6ba0; }
.print-group-cat-medium { color: #2f7a3a; border-color: #2f7a3a; }
.print-group-cat-heavy { color: #8a5e10; border-color: #8a5e10; }
.print-group-cat-colossal { color: #b83828; border-color: #b83828; }
.print-group-cat-payload { color: #6a4c9c; border-color: #6a4c9c; }

.print-ship {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid #ccc;
  border-left: 3px solid #1b3a5c;
  break-inside: avoid;
}
.print-ship-top {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.print-ship-art {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: 1px solid #ddd;
  overflow: hidden;
  background: #f8f8f8;
}
.print-ship-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.print-ship-content {
  flex: 1;
  min-width: 0;
}
.print-ship-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.print-ship-name {
  font-weight: 700;
  font-size: 11pt;
}
.print-ship-pts {
  font-size: 10pt;
  color: #555;
  font-weight: 600;
}
.print-badge {
  display: inline-block;
  font-size: 7pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border: 1px solid;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.print-badge-unique {
  color: #8a6d1e;
  border-color: #d4b94e;
  background: #fef9ea;
}
.print-badge-rare {
  color: #666;
  border-color: #bbb;
  background: #f5f5f5;
}

/* Damage tracking boxes for gameplay */
.print-dmg-track {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
.print-dmg-label {
  font-family: var(--font-condensed);
  font-size: 7pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.04em;
  color: #888;
  margin-right: 2px;
}
.print-dmg-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid #999;
  background: #fff;
}
.print-dmg-cripple {
  border-color: #c43c2f;
  border-width: 2px;
  position: relative;
}
.print-dmg-cripple::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid #c43c2f;
}
.print-dmg-cripple-label {
  font-family: var(--font-condensed);
  font-size: 7pt;
  color: #c43c2f;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

.print-loads {
  font-size: 9pt;
  color: #444;
  margin-top: 4px;
}
.print-load { font-weight: 600; }

.print-loadout-label {
  font-family: var(--font-condensed);
  font-size: 8pt;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #767676;
  margin-top: 4px;
  margin-bottom: 1px;
}

.print-ship-tonnage {
  font-weight: 400;
  font-size: 9pt;
  color: #888;
  text-transform: none;
  letter-spacing: 0.04em;
}
.print-ship-qty {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12pt;
  color: #1b3a5c;
}
.print-ship-each {
  font-size: 8pt;
  font-weight: 400;
  color: #999;
}

.print-rules {
  font-size: 9pt;
  color: #444;
  margin-top: 4px;
  font-style: italic;
}

.print-rules-inline {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dotted #ddd;
}
.print-rules-heading {
  font-family: var(--font-condensed);
  font-size: 7pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #999;
  margin-bottom: 2px;
}
.print-weapon-abilities {
  border-top-style: dashed;
}
.print-rule-entry {
  font-size: 8pt;
  line-height: 1.35;
  color: #444;
  margin-bottom: 2px;
}
.print-rule-name {
  font-weight: 700;
  color: #1b3a5c;
}

/* Fleet totals summary */
.print-totals {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 2px solid #1b3a5c;
  break-inside: avoid;
}
.print-totals-header {
  font-family: var(--font-condensed);
  font-size: 9pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #1b3a5c;
  margin-bottom: 6px;
}
.print-totals-grid {
  max-width: 260px;
}
.print-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 9pt;
  color: #444;
}
.print-totals-total {
  border-top: 1px solid #1b3a5c;
  margin-top: 2px;
  padding-top: 4px;
  font-weight: 700;
  font-size: 10pt;
  color: #1b3a5c;
}
.print-totals-label { font-weight: 600; }
.print-totals-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.print-totals-item {
  font-family: var(--font-condensed);
  font-size: 8pt;
  color: #5f5f5f;
}

/* Rules glossary */
.print-glossary {
  margin-top: 24px;
  page-break-before: auto;
  column-count: 2;
  column-gap: 20px;
  border-top: 3px double #1b3a5c;
  padding-top: 12px;
}
.print-glossary .print-section-title {
  column-span: all;
  border-bottom: none;
  font-size: 10pt;
  color: #1b3a5c;
  margin-bottom: 10px;
}
.print-glossary-entry {
  margin-bottom: 6px;
  font-size: 8.5pt;
  line-height: 1.4;
  break-inside: avoid;
  padding-bottom: 4px;
  border-bottom: 1px dotted #ddd;
}
.print-glossary-name {
  font-weight: 700;
  color: #1b3a5c;
}
.print-glossary-name::after { content: ': '; }
.print-glossary-page {
  font-weight: 400;
  font-size: 7pt;
  color: #888;
  font-style: italic;
}
.print-glossary-desc {
  color: #333;
  font-family: var(--font-body);
  font-size: 7.5pt;
}

/* ── Dense print stat card (.dp-*) ──────────────────────────────
   Compact, self-contained print markup that renders IDENTICALLY on screen (in the
   preview) and on paper, so the preview is WYSIWYG and a whole fleet fits onto a few
   readable pages (Army-App / Hobgoblin style). Backgrounds force colour in print. */
.dp-groups { margin-top: 10px; }
/* CSS Grid 2-col: replaces column-count which could overflow its container when a
   break-inside:avoid card is taller than the balanced column height, causing text
   from one column to bleed into sections rendered below the container. Grid items
   are self-contained and always expand the container to their full height. */
.dp-groups.dp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dp-group { margin-bottom: 8px; break-inside: avoid; }
.dp-2col .dp-group { break-inside: avoid; }
.dp-group-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1.5px solid #1b3a5c; padding-bottom: 2px; margin-bottom: 4px;
  break-after: avoid; break-inside: avoid;
}
.dp-group-name { font-weight: 700; font-size: 10.5pt; color: #1b3a5c; }
.dp-group-cat {
  font-weight: 600; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 4px;
}
.dp-group-cat-light { color: #2f6ba0; }
.dp-group-cat-medium { color: #2f7a3a; }
.dp-group-cat-heavy { color: #8a5e10; }
.dp-group-cat-colossal { color: #b83828; }
.dp-group-cat-payload { color: #6a4c9c; }
.dp-group-pts { font-size: 8.5pt; color: #555; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dp-ship {
  break-inside: avoid; page-break-inside: avoid; border: 1px solid #bbb; border-left: 3px solid #1b3a5c;
  border-radius: 3px; padding: 4px 7px; margin-bottom: 6px; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* If a card is taller than a page and MUST break, never split it through the
   stat block / head. Force the page break to fall after the stats instead. */
.dp-ship-head { break-after: avoid; break-inside: avoid; page-break-inside: avoid; }
.dp-statgrid, .dp-big-top { break-inside: avoid; page-break-inside: avoid; }
.dp-ship-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dp-name { font-weight: 700; font-size: 9.5pt; color: #1c1a17; }
.dp-ton { font-weight: 600; font-size: 7.5pt; color: #777; text-transform: uppercase; letter-spacing: 0.03em; }
.dp-badge {
  font-size: 7pt; font-weight: 700; text-transform: uppercase; border: 1px solid #b83828;
  color: #b83828; border-radius: 3px; padding: 0 3px; margin-left: 3px;
}
.dp-pts { font-size: 8.5pt; font-weight: 700; color: #1b3a5c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-each { font-weight: 400; color: #777; font-size: 7.5pt; }

/* Stat grid (echoes the on-screen stat cells): icon | value over label, packed
   into an aligned grid instead of a loose flowing line. */
/* 2-column paired layout (Scan|KS, Sig|ES, Thrust|BS, Hull spans), matches the
   on-screen stat grid. width:max-content keeps the block compact, not stretched. */
.dp-statgrid { display: grid; grid-template-columns: repeat(2, minmax(46px, 78px)); gap: 2px; margin: 3px 0; width: max-content; max-width: 100%; }
.dp-sc-wide { grid-column: 1 / -1; }
.dp-sc-none { opacity: 0.5; }
/* Hull tracking boxes occupy the Hull slot of the stat grid (replacing the number). */
.dp-statgrid .dp-sc-hull .dp-hull { margin-top: 0; }
.dp-statcell {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 3px;
  border: 1px solid #d4cec2; border-radius: 2px; padding: 1px 4px; background: #f6f4ef;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-sc-icon { grid-row: 1 / 3; display: inline-flex; color: #1b3a5c; }
.dp-sc-icon svg { width: 12px; height: 12px; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-sc-val { font-weight: 700; font-size: 9pt; color: #1c1a17; line-height: 1.05; }
.dp-sc-lab { font-size: 6pt; text-transform: uppercase; letter-spacing: 0.02em; color: #777; line-height: 1; }
.dp-statcell.dp-stat-mod .dp-sc-val, .dp-statcell.dp-stat-mod .dp-sc-icon { color: #2e7d32; }
/* Firing-arc icon in the print weapon table (the little arc diagram + its label). */
.dp-w-arc { white-space: nowrap; }
.dp-arc { display: inline-flex; align-items: center; justify-content: center; gap: 2px; color: #1b3a5c; }
.dp-arc svg { width: 12px; height: 12px; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-arc-lab { font-size: 6.8pt; color: #555; }

.dp-weapons { width: 100%; border-collapse: collapse; margin: 3px 0; font-size: 8pt; }
.dp-weapons th {
  /* Dark text on a light tint + a dark underline. Readable even if the printer
     drops background fills (no white-on-navy). */
  text-align: center; background: #e7ebf0; color: #1b3a5c; font-weight: 700; padding: 1px 4px;
  font-size: 7pt; text-transform: uppercase; letter-spacing: 0.02em;
  border-bottom: 1.5px solid #1b3a5c;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-weapons td { text-align: center; padding: 1px 4px; border-bottom: 1px solid #e2ddd4; }
.dp-weapons tr:nth-child(even) td { background: #f6f4ef; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-w-name { text-align: left !important; font-weight: 600; }
.dp-w-spec { text-align: left !important; color: #555; }
/* Critical-on value under the Lock, only for weapons whose rules use criticals. */
.dp-w-crit {
  display: block; font-size: 6.8pt; font-weight: 700; line-height: 1.1;
  color: #8a6d1e; letter-spacing: 0.02em; white-space: nowrap; margin-top: 1px;
}
/* Secondary-objective checklist: every option with a tickbox to pick at the table. */
.dp-secobj-hint { font-weight: 400; font-style: italic; color: #8a6d1e; font-size: 0.82em; text-transform: none; letter-spacing: 0; }
/* Secondary-objective checklist is ALWAYS two columns for readability, regardless
   of the sheet's column/big/roster mode (the list is long and reads better split). */
.dp-secobj .dp-rules { column-count: 2; column-gap: 18px; }
.dp-secobj .dp-secobj-row { display: block; break-inside: avoid; -webkit-column-break-inside: avoid; }
.dp-secobj .dp-checkbox { font-family: var(--font-stat); font-size: 1.7em; line-height: 1; vertical-align: -0.18em; color: #1b3a5c; margin-right: 4px; }
.dp-secobj .dp-secobj-on { background: rgba(184, 147, 46, 0.08); border-radius: 3px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-secobj .dp-secobj-on .dp-checkbox { color: #8a6d1e; }

.dp-loads, .dp-systems { font-size: 8pt; margin: 2px 0; color: #1c1a17; line-height: 1.35; }
.dp-loads b, .dp-systems b { color: #1b3a5c; }
.dp-rules { font-size: 7.8pt; margin-top: 3px; color: #333; line-height: 1.35; }
.dp-rule { display: block; margin-bottom: 1px; break-inside: avoid; page-break-inside: avoid; }
.dp-rule b { color: #1b3a5c; }

.dp-hull { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.dp-hull-lab { font-size: 7pt; font-weight: 700; text-transform: uppercase; color: #777; }
.dp-hull-num { font-size: 8.5pt; font-weight: 800; color: #1b3a5c; font-variant-numeric: tabular-nums; }
.dp-hull-boxes { display: inline-flex; flex-wrap: wrap; gap: 2px 6px; }
.dp-hull-grp { display: inline-flex; gap: 1.5px; }
.dp-box {
  width: 12px; height: 12px; border: 1px solid #555; border-radius: 1px; display: inline-block;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-box-crip {
  border-color: #c43c2f; border-width: 1.5px;
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, #f3c0bb 2px, #f3c0bb 3px);
}

.dp-flagship {
  margin-top: 4px; padding: 3px 7px; border: 1px dashed #b8932e; border-radius: 3px;
  background: #faf8f5; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-flagship-name { font-weight: 700; font-size: 8.5pt; color: #1b3a5c; margin-bottom: 2px; }

/* Per-ship thumbnail. Sits left of the ship name so the sheet can be matched to
   the model on the table. Sized by the density tier below. */
.dp-ship-head { align-items: center; }
.dp-name-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dp-thumb {
  width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain;
  border: 1px solid #ccc; border-radius: 2px; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ── Density tiers (preview toggle) ──────────────────────────────
   Comfortable = arm's-length readable at the table (default). Compact = max
   density / fewest pages. Both stay 2-column when 2 columns is on. */
.pf-comfortable .dp-group-name { font-size: 11.5pt; }
.pf-comfortable .dp-name { font-size: 10.4pt; }
.pf-comfortable .dp-pts { font-size: 9.2pt; }
.pf-comfortable .dp-sc-val { font-size: 9.6pt; }
.pf-comfortable .dp-weapons { font-size: 8.8pt; }
.pf-comfortable .dp-weapons th { font-size: 7.6pt; }
.pf-comfortable .dp-loads, .pf-comfortable .dp-systems { font-size: 8.8pt; }
.pf-comfortable .dp-rules { font-size: 8.5pt; line-height: 1.4; }
.pf-comfortable .dp-ship { padding: 5px 8px; }
.pf-comfortable .dp-thumb { width: 58px; height: 58px; }
.pf-comfortable .dp-box { width: 10px; height: 10px; }

.pf-compact .dp-group-name { font-size: 10pt; }
.pf-compact .dp-name { font-size: 9.2pt; }
.pf-compact .dp-sc-val { font-size: 8.3pt; }
.pf-compact .dp-weapons { font-size: 7.6pt; }
.pf-compact .dp-loads, .pf-compact .dp-systems { font-size: 7.6pt; }
.pf-compact .dp-rules { font-size: 7.4pt; line-height: 1.28; }
.pf-compact .dp-ship { padding: 3px 6px; margin-bottom: 5px; }
.pf-compact .dp-thumb { width: 42px; height: 42px; }

/* ── Ink-saver (preview toggle) ──────────────────────────────────
   Strip the ink-heavy fills (navy weapon header, zebra striping) to white with
   black text, and grayscale the thumbnails. Safe for B&W / draft printing. */
.pf-inksaver .dp-weapons th { background: #fff !important; color: #000 !important; border: 1px solid #555; }
.pf-inksaver .dp-weapons tr:nth-child(even) td { background: #fff !important; }
.pf-inksaver .dp-group-name, .pf-inksaver .dp-pts, .pf-inksaver .dp-group-pts,
.pf-inksaver .dp-w-name, .pf-inksaver .dp-loads b, .pf-inksaver .dp-systems b,
.pf-inksaver .dp-rule b, .pf-inksaver .dp-flagship-name { color: #000 !important; }
.pf-inksaver .dp-group-head { border-bottom-color: #000 !important; }
.pf-inksaver .dp-ship { border-left-color: #000 !important; }
.pf-inksaver .dp-group-cat { color: #000 !important; }
.pf-inksaver .dp-flagship { background: #fff !important; border-color: #777; }
.pf-inksaver .dp-statline, .pf-inksaver .dp-rules,
.pf-inksaver .dp-loads, .pf-inksaver .dp-systems { color: #000; }
/* Hoisted faction-rule keyword chips on a card (full text is in the end glossary). */
.dp-hoist-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.dp-hoist-chip {
  font-size: 7.5pt; font-weight: 700; color: #1b3a5c;
  border: 1px solid #c9c2b4; border-radius: 3px; padding: 0 5px; background: #f3f1ec;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Faction Rules glossary at the end of the sheet. */
.dp-glossary { break-inside: avoid; margin-top: 8px; border-top: 1.5px solid #1b3a5c; padding-top: 4px; }
.pf-comfortable .dp-hoist-chip { font-size: 8pt; }
.pf-inksaver .dp-hoist-chip { background: #fff !important; color: #000 !important; border-color: #999; }
.pf-inksaver .dp-glossary { border-top-color: #000; }

/* ── Roster table (compact 2-3 page print option) ───────────── */
.roster-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 7.5pt; margin-top: 6px; }
.roster-table th:nth-child(1) { width: 27%; }
.roster-table th:nth-child(2), .roster-table th:nth-child(3), .roster-table th:nth-child(4),
.roster-table th:nth-child(5), .roster-table th:nth-child(6), .roster-table th:nth-child(7),
.roster-table th:nth-child(8) { width: 5.2%; }
.roster-table th:nth-child(9) { width: 24%; }
.roster-table th:nth-child(10) { width: 5%; }
.roster-table th:nth-child(11), .roster-table th:nth-child(12), .roster-table th:nth-child(13) { width: 4%; }
.roster-table th {
  background: #e7ebf0; color: #1b3a5c; font-size: 6.5pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; padding: 2px 3px;
  border-bottom: 1.5px solid #1b3a5c; text-align: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.roster-table th.rt-name, .roster-table th.rt-w { text-align: left; }
/* Repeat the column header on every printed page so you don't have to flip back to
   page 1 to remember which column is Scan vs Thrust. (table-header-group is the
   default, but make it explicit since some print paths drop it.) */
.roster-table thead { display: table-header-group; }
.roster-table tfoot { display: table-footer-group; }
@media print { .roster-table thead { display: table-header-group; } }
.roster-table td { padding: 1px 4px; text-align: center; border-bottom: 1px solid #e2ddd4; vertical-align: top; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.roster-table td.rt-name { text-align: left; border-left: 3px solid #1b3a5c; }
.roster-table td.rt-w { text-align: left; }
.rt-group td {
  background: #f1efe8; color: #1b3a5c; font-weight: 700; padding: 3px 6px;
  border-top: 1.5px solid #1b3a5c;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rt-gcat { font-size: 6.5pt; text-transform: uppercase; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 4px; }
.rt-gpts { font-weight: 400; color: #555; font-size: 7pt; margin-left: 6px; }
.rt-shipname { font-weight: 700; color: #1c1a17; line-height: 1.2; }
.rt-ton { font-weight: 600; font-size: 6.5pt; color: #777; text-transform: uppercase; letter-spacing: 0.03em; }
.rt-pts { font-weight: 400; color: #1b3a5c; font-size: 7pt; }
.rt-rules { font-size: 6.8pt; color: #555; line-height: 1.3; margin-top: 1px; }
.rt-rules::before { content: 'Rules: '; color: #1b3a5c; font-weight: 700; }
.rt-hull { margin-top: 2px; }
.pf-roster .rt-hull .dp-hull-lab { display: none; }
.pf-roster .rt-hull .dp-hull { margin-top: 0; gap: 2px; }
.pf-roster .dp-box { width: 8px; height: 8px; }
.rt-wsp { color: #666; font-size: 7pt; }
.rt-load { color: #1b3a5c; font-size: 7.5pt; }
.rt-none { color: #999; font-style: italic; }
.roster-table tr.rt-first > td { border-top: 1px solid #c9c2b4; }
/* Page transitions: a ship's row(s) never split across a page, and a group header
   row never lands alone at the foot of a page away from its first ship. */
.roster-table tr.rt-ship, .roster-table tr.rt-group { break-inside: avoid; page-break-inside: avoid; }
.roster-table tr.rt-group { break-after: avoid; page-break-after: avoid; }
.pf-roster .dp-glossary { margin-top: 6px; }
.pf-inksaver .roster-table th, .pf-inksaver .rt-group td { background: #fff !important; }

.pf-inksaver .dp-thumb { filter: grayscale(1) contrast(1.05); }
.pf-inksaver .dp-sc-icon, .pf-inksaver .dp-arc { color: #000; }
.pf-inksaver .dp-sc-icon svg, .pf-inksaver .dp-arc svg { filter: grayscale(1); }
.pf-inksaver .dp-statcell { background: #fff !important; }
.pf-comfortable .dp-sc-icon svg, .pf-comfortable .dp-arc svg { width: 13px; height: 13px; }

/* ── Big mode ────────────────────────────────────────────────────
   Art + stat grid in a compact top row, then weapons and rules flow full-width
   beneath, so each card's height matches its content (no empty side gap). */
.pf-big .dp-ship { border-left-width: 4px; padding: 6px 10px; }
.pf-big .dp-big-top {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 5px;
}
.pf-big .dp-big-art-wrap { flex: 0 0 200px; }
.pf-big .dp-big-art {
  width: 100%; max-height: 124px; object-fit: contain;
  border: 1px solid #ccc; border-radius: 3px; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pf-big .dp-big-stats { flex: 1 1 auto; min-width: 0; }
.pf-big .dp-big-stats .dp-statgrid { margin: 0; }
.pf-big .dp-big-below { margin-top: 7px; }
.pf-big .dp-big-below .dp-weapons { margin: 0; }
.pf-big .dp-big-below > .dp-rules:first-child,
.pf-big .dp-big-below > .dp-loads:first-child,
.pf-big .dp-big-below > .dp-systems:first-child { margin-top: 0; }
.pf-big .dp-hull { margin-top: 6px; border-top: 1px dotted #ccc; padding-top: 4px; }
.pf-big .dp-zone-empty { font-size: 8pt; color: #999; font-style: italic; }
/* On very narrow paper / preview overflow, stack art above the stats. */
@media (max-width: 560px) { .pf-big .dp-big-top { flex-direction: column; } .pf-big .dp-big-art-wrap { flex-basis: auto; max-width: 220px; } }

/* ── Fleet Overview (no group selected) ──────────────────────── */
.fleet-overview {
  max-width: 720px;
  margin: 0 auto;
}
.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-lg);
  border-bottom: 2px solid var(--navy);
}
.overview-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.overview-faction-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.8;
}
.overview-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: 1.2;
}
.overview-subtitle {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
.overview-header-right {
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
}
.overview-legal-check { display: inline-flex; align-items: center; color: #2f7a3a; }
.overview-legal-check.is-illegal { color: var(--error, #c43c2f); }
.overview-pts-big {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
  line-height: 1;
}
.overview-pts-cap {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
/* Editable points limit. Looks like text until focused, so "/ 1500 pts" can be
   overridden to any custom cap (e.g. a 1500-pt game in the Clash bracket). */
.overview-pts-cap-input {
  width: 4.5ch;
  font: inherit;
  color: var(--navy);
  font-weight: var(--weight-semibold);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--stroke);
  padding: 0 1px;
  text-align: center;
  -moz-appearance: textfield;
}
.overview-pts-cap-input::-webkit-outer-spin-button,
.overview-pts-cap-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.overview-pts-cap-input:focus { outline: none; border-bottom-color: var(--navy); background: var(--paper-alt); }
.overview-pts-reset {
  background: none; border: none; cursor: pointer; color: var(--ink-faint);
  font-size: var(--text-sm); padding: 0 2px; line-height: 1;
}
.overview-pts-reset:hover { color: var(--navy); }
/* Visible validation panel. Errors were too easy to miss in the legal-mark tooltip. */
.overview-alerts {
  margin: var(--sp-sm) 0;
  border-radius: var(--radius-sm);
  padding: var(--sp-xs) var(--sp-sm);
  border-left: 3px solid var(--stroke);
}
.overview-alerts.has-errors { border-left-color: #c43c2f; background: rgba(196,60,47,0.06); }
.overview-alerts.has-warns { border-left-color: var(--gold-dark); background: rgba(180,140,30,0.06); }
.overview-alerts-head { font-weight: var(--weight-bold); font-size: var(--text-xs); margin-bottom: 2px; }
.overview-alerts-list { margin: 0; padding-left: 15px; font-size: var(--text-xs); line-height: 1.3; }
.overview-alerts-list .oa-error { color: #c43c2f; }
.overview-alerts-list .oa-warn { color: var(--ink-muted); }
/* Alerts now sit on the navy rail. Give them an opaque light card so the
   paper-tuned red/amber text keeps its contrast (rail default text is white). */
.builder-sidebar #sidebar-alerts .overview-alerts { margin: 0; }
.builder-sidebar #sidebar-alerts .overview-alerts.has-errors { background: #fbecea; }
.builder-sidebar #sidebar-alerts .overview-alerts.has-warns { background: #fbf4e2; }
.builder-sidebar #sidebar-alerts .overview-alerts-head { color: var(--ink); }
.overview-section {
  margin-bottom: var(--sp-xl);
}
.overview-section-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--stroke-light);
}
.overview-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
/* Primary action: Add Group floats as a pinned footer at the bottom of the
   overview (middle) panel. Always reachable while the group list scrolls. */
/* Battle Groups section header: label left, Add Group action right. Anchored
   at the top of the list so it never scrolls off and never floats over content
   (the old sticky bottom bar was persistently in the way). */
.overview-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.overview-section-head .overview-section-label { margin-bottom: 0; }
.overview-section-note { font-size: var(--text-xs); color: var(--ink-muted); font-weight: var(--weight-semibold); }

/* Secondary Objectives picker (choose 2) */
.secondary-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.secondary-item {
  display: flex;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.secondary-item:hover { border-color: var(--stroke-strong); }
.secondary-item.selected { border-color: var(--gold); background: var(--gold-subtle); }
.secondary-item.locked { opacity: 0.5; cursor: default; }
.secondary-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--stroke-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: #fff;
  margin-top: 1px;
}
.secondary-item.selected .secondary-check { background: var(--gold); border-color: var(--gold); }
.secondary-name { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--gold-dark); margin-bottom: 2px; }
.secondary-desc { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.5; }
.overview-add-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: #fff;
  background: var(--navy);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.overview-add-group-btn:hover { background: var(--navy-deep, #142d47); }
.overview-add-group-btn:active { transform: scale(0.97); }

/* Empty state when a fleet has no groups yet */
.overview-groups-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xl) var(--sp-md);
  text-align: center;
  color: var(--ink-muted);
  background: var(--paper-alt);
  border: 1px dashed var(--stroke-light);
  border-radius: var(--radius-lg, 10px);
}
.overview-groups-empty p { margin: 0; font-size: var(--text-sm); }
/* Tonnage category section dividers in overview */
.overview-cat-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) 0;
  margin-top: var(--sp-sm);
  border-bottom: 1px solid var(--stroke-light);
}
.overview-cat-divider:first-child { margin-top: 0; }
.overview-cat-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--cat-color, var(--ink-muted));
}
.overview-cat-count {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

.overview-group-card {
  padding: var(--sp-md) var(--sp-lg);
  border-left: 3px solid var(--navy);
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.overview-group-card:hover {
  background: var(--navy-wash);
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}
/* The group you're currently customizing, clearly marked in the roster. */
.overview-group-card.overview-group-active {
  background: var(--navy-subtle);
  box-shadow: inset 3px 0 0 0 var(--navy), 0 0 0 1px var(--navy-subtle), var(--shadow-md);
  border-left-width: 5px;
}
/* Drag-reorder grip on a group card. Only shown when its weight class holds 2+
   groups. Always visible (subtle) so the affordance is discoverable, unlike the
   old hover-only grip which read as "not there". */
.overview-group-grip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  margin-left: -2px;
  color: #c2b9ac;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--duration-fast) var(--ease-out);
}
.overview-group-card:hover .overview-group-grip { color: #9c9284; }
@media (hover: none) { .overview-group-grip { color: #9c9284; } }
.overview-group-grip:hover { color: var(--navy); }
.overview-group-grip:active { cursor: grabbing; }
.overview-group-card.dragging { opacity: 0.9; position: relative; box-shadow: var(--shadow-lg); }
.overview-group-card.drag-over-before { box-shadow: inset 0 3px 0 0 var(--navy); }
.overview-group-card.drag-over-after { box-shadow: inset 0 -3px 0 0 var(--navy); }
.overview-group-top {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.overview-group-art {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: visible;
  background: transparent;
}
.overview-group-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.overview-group-info {
  flex: 1;
  min-width: 0;
}
.overview-group-name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: 1.3;
}
.overview-group-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: 2px;
}
.overview-group-ships {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.overview-group-pts {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--navy);
  flex-shrink: 0;
}

/* Right column of a group card: points above, inline qty stepper below.
   The stepper lets you set "×N of this ship" without opening the detail panel. */
.overview-group-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-xs);
  flex-shrink: 0;
}
/* Duplicate + close on one row at the top of the card, bigger, light up on hover
   (orange = duplicate, red = close). */
.overview-group-actions {
  order: -1;
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: 2px;
}
.overview-group-remove,
.overview-group-copy {
  background: none;
  border: none;
  padding: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  line-height: 0;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.overview-group-copy:hover { color: #e07b1a; background: rgba(224, 123, 26, 0.12); }
.overview-group-remove:hover { color: #c43c2f; background: rgba(196, 60, 47, 0.12); }
.overview-group-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: default;
}
.ovg-step {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 110ms ease, color 110ms ease, border-color 110ms ease;
}
.ovg-step:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Press feedback: gentle scale-down + fill on press, spring-back on release. */
.ovg-step:active:not(:disabled) { transform: scale(0.92); background: var(--navy); color: #fff; border-color: var(--navy); }
.ovg-step:disabled { opacity: 0.35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .ovg-step { transition: background-color 110ms ease, color 110ms ease, border-color 110ms ease; }
  .ovg-step:active:not(:disabled) { transform: none; }
}
/* At the minimum, − removes the whole group, hint with a danger tint. */
.ovg-step-remove { color: var(--danger, #c43c2f); border-color: rgba(196, 60, 47, 0.4); }
.ovg-step-remove:hover { background: var(--danger, #c43c2f) !important; color: #fff !important; border-color: var(--danger, #c43c2f) !important; }
.ovg-step-remove:active:not(:disabled) { background: var(--danger, #c43c2f) !important; border-color: var(--danger, #c43c2f) !important; }
.ovg-qty {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.overview-group-error {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--error);
  text-transform: none;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.overview-admiral {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--sp-sm) 0;
  border-bottom: 1px dotted var(--stroke-light);
}
.overview-admiral:last-child { border-bottom: none; }
.overview-admiral-name {
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.overview-admiral-abilities {
  flex-basis: 100%;
  margin-top: var(--sp-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.overview-ability-chip {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}
.overview-validation {
  margin-bottom: var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--paper-alt);
}
.overview-valid-item {
  font-size: var(--text-sm);
  padding: var(--sp-xs) 0;
  border-bottom: 1px dotted var(--stroke-light);
}
.overview-valid-item:last-child { border-bottom: none; }
.overview-valid-error {
  color: var(--error);
  font-weight: var(--weight-semibold);
}
.overview-valid-warn {
  color: var(--ink-soft);
}


.overview-desc {
  margin-bottom: var(--sp-lg);
}
/* Floating label: the "Add fleet notes" label sits inside the empty field and
   floats above the border once the field is focused or filled. */
.overview-desc.float-field { position: relative; }
.overview-desc .float-label {
  position: absolute;
  left: var(--sp-md);
  top: var(--sp-sm);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-faint);
  pointer-events: none;
  background: var(--paper-warm);
  padding: 0 4px;
  transform-origin: left top;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.overview-desc-input:focus + .float-label,
.overview-desc-input:not(:placeholder-shown) + .float-label {
  transform: translateY(-17px) scale(0.82);
  color: var(--navy);
  font-style: normal;
}
.overview-desc-input {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.overview-desc-input:focus {
  outline: none;
  border-color: var(--navy);
  border-style: solid;
  background: var(--paper);
  color: var(--ink);
}
.overview-desc-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

/* ── 27. Ship Detail Modal ───────────────────────────────────── */
.detail-hero {
  display: flex;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-md);
  align-items: stretch;
}
.detail-hero-image {
  position: relative;
  /* Ships are wide sculpts, so the art gets most of the hero width; the facts +
     stat grid fill the column beside it (no more empty space there). */
  width: 58%;
  min-width: 320px;
  height: 264px;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  border: 1px solid var(--stroke-light);
  overflow: hidden;
  flex-shrink: 0;
}
.detail-hero-image img {
  width: 100%;
  height: 100%;
  /* Ships are wide. Show the whole sculpt rather than cropping it to a square. */
  object-fit: contain;
}
/* Facts (tonnage/cost/badges) at the top, stat grid filling the middle, and the
   Add button pinned to the bottom so it lines up with the foot of the art. */
.detail-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.detail-hero-info .stat-grid { max-width: 100%; }
.detail-hero-info .detail-add-btn { margin-top: auto; }
/* Hero art carousel: prev/next arrows (hover) + label & dots over the image. */
.hero-art-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 24px; height: 34px; border: none; cursor: pointer; padding: 0;
  background: rgba(15, 38, 64, 0.55); color: #fff; font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.12s; z-index: 2;
}
.detail-hero-image.has-alts:hover .hero-art-arrow,
.ship-card-image.has-alts:hover .hero-art-arrow { opacity: 1; }
.hero-art-prev { left: 0; border-radius: 0 4px 4px 0; }
.hero-art-next { right: 0; border-radius: 4px 0 0 4px; }
.hero-art-arrow:hover { background: rgba(15, 38, 64, 0.85); }
.hero-art-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 8px 6px 3px; background: linear-gradient(transparent, rgba(15, 38, 64, 0.72));
}
.hero-art-label { color: #fff; font-size: 12px; font-family: var(--font-condensed); font-weight: var(--weight-semibold); letter-spacing: 0.03em; white-space: normal; overflow-wrap: anywhere; }
.hero-art-dots { display: flex; gap: 3px; flex-shrink: 0; }
.hero-art-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.hero-art-dot.active { background: #fff; }
.detail-hero-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.detail-hero-cost {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}

.detail-section-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--stroke-light);
}

.detail-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.detail-rule-entry {
  font-size: var(--text-sm);
  line-height: 1.5;
}
.detail-rule-name {
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.detail-rule-page {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-style: italic;
}
.detail-rule-desc {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: 2px;
}
/* Famous-admiral ability cost (e.g. "2AP") + the "choose N from the table" note. */
.detail-ability-cost {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  letter-spacing: 0.03em;
}
.detail-ability-picks {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-style: italic;
  margin-top: var(--sp-xs);
}

.detail-loadout-group {
  margin-bottom: var(--sp-md);
}
.detail-loadout-title {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  margin-bottom: var(--sp-xs);
}
.detail-loadout-option {
  padding: var(--sp-sm) var(--sp-md);
  border-left: 2px solid var(--stroke);
  margin-bottom: var(--sp-sm);
}
.detail-loadout-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.detail-lore {
  margin-top: var(--sp-lg);
}

/* Ship name clickable in builder */
.ship-card-name-link {
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.ship-card-name-link:hover {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Fleet card faction icon */
.fleet-card-faction-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Game size popover with visual bars */
.game-size-popover .game-size-visual {
  flex-shrink: 0;
}
.game-size-popover-item.active .gs-block { border-color: rgba(255, 255, 255, 0.5); }
.game-size-popover-item.active .gs-block.filled { background: #fff; border-color: #fff; }

/* ── 28. Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .builder-sidebar { width: 220px; }
  .builder-overview { padding: var(--sp-xl); }
  .ship-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 768px) {
  .topbar { padding: 0 var(--sp-lg); }
  .topbar-context { display: none; }
  .topbar-brand { font-size: var(--text-sm); }
  /* On a phone only "Unofficial" survives. It is the word that is actually
     doing work, Dropzone Commander belongs to TTCombat and this is a fan tool,
     and "Army Builder" is already said by the logo beside it and the screen
     underneath. Dropping the disclosure entirely on the one device this app is
     built for would be the wrong thing to save 90px on. */
  .topbar-title-rest { display: none; }
  .topbar-action-label { display: none; }
  .topbar-action-btn { padding: var(--sp-xs); }

  .landing { padding: var(--sp-2xl) var(--sp-lg); }
  .landing-grid { grid-template-columns: 1fr; }
  .landing-logo { max-width: 280px; }
  .faction-showcase { grid-template-columns: repeat(3, 1fr); }
  .faction-chip-heroes { height: 60px; }
  .faction-chip-heroes img { height: 50px; margin: 0 -6px; }
  .objectives-grid { grid-template-columns: 1fr; }

  .fleet-list { padding: var(--sp-2xl) var(--sp-lg); }
  .fleet-grid { grid-template-columns: 1fr; }
  .fleet-list-header { flex-direction: column; align-items: stretch; }
  .fleet-list-header .btn { width: 100%; justify-content: center; }
  .fleet-sort-bar { flex-wrap: wrap; }

  /* Fleet overview mobile */
  .overview-header { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
  .overview-header-right { text-align: left; display: flex; align-items: baseline; gap: var(--sp-sm); }
  .overview-pts-big { font-size: var(--text-2xl); }
  .overview-group-top { flex-wrap: wrap; }
  .overview-group-pts { margin-left: auto; }

  /* Sidebar becomes bottom sheet */
  .builder-layout { flex-direction: column; }
  .builder-sidebar {
    width: 100%;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    height: auto;
    max-height: 60vh;
    z-index: var(--z-sheet);
    border-top: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-sheet);
    transform: translateY(calc(100% - 48px));
    transition: transform var(--duration-slow) var(--ease-out);
    overflow: hidden;
  }
  .builder-sidebar.expanded {
    transform: translateY(0);
    overflow-y: auto;
  }
  /* The collapsed sidebar sits as a fixed 48px bottom peek here. Give the
     footer room so the peek floats above it instead of covering it. */
  .game-info-footer { padding-bottom: calc(48px + var(--sp-lg) + env(safe-area-inset-bottom, 0px)); }

  /* Picker/reference tension: while the ship picker is open, float the collapsed
     fleet-summary sheet above it so running points & composition stay glanceable
     (tap to expand over the picker). The picker body gains bottom room for it. */
  body.picker-open .builder-sidebar { z-index: var(--z-sheet-float); }
  body.picker-open #modal-ship-select .modal-body { padding-bottom: 88px; }

  .sidebar-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--sp-sm) 0 var(--sp-xs);
    cursor: grab;
    touch-action: none;            /* let the JS own vertical drag */
    -webkit-user-select: none;
    user-select: none;
  }
  .sidebar-handle:active { cursor: grabbing; }
  .sidebar-handle-bar {
    width: 44px;
    height: 5px;
    background: rgba(255,255,255,0.45);
    border-radius: 3px;
  }
  .sidebar-handle-summary {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 var(--sp-lg);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.55);
    font-family: var(--font-condensed);
    font-weight: var(--weight-semibold);
    text-transform: none;
    letter-spacing: 0.04em;
  }

  .builder-overview {
    padding: var(--sp-lg);
    padding-bottom: 64px;
  }

  .ship-grid { grid-template-columns: 1fr; }
  .modal-panel { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .modal-overlay { padding: 0; }
  .group-header-bar { flex-direction: column; align-items: stretch; }
  .detail-hero { flex-direction: column; }
  .detail-hero-image { width: 100%; height: 200px; }

  /* Touch-friendly targets */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .category-tab { min-height: 40px; padding: var(--sp-sm) var(--sp-md); font-size: var(--text-xs); }
  .group-nav-item { min-height: 44px; }
  .filter-chip { min-height: 36px; padding: var(--sp-xs) var(--sp-md); }
  .settings-toggle { padding: var(--sp-md) 0; }

  /* Ship entries */
  .group-ship-entry { padding: var(--sp-lg); }
  .group-ship-remove { width: 36px; height: 36px; font-size: 16px; }

  /* Weapon table horizontal scroll at mid-widths */
  .weapon-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .weapon-row { min-width: 400px; }

  /* Category tabs: horizontal scroll instead of wrap */
  .ship-category-tabs { flex-wrap: nowrap; }

  /* Quantity bar */
  .group-qty-btn { width: 36px; height: 36px; }
}

@media (min-width: 640px) {
  .sidebar-handle { display: none; }
  .mobile-only { display: none !important; }
}

/* (Detail ship-card stacking is handled by the container query on .builder-detail.) */

@media (max-width: 639px) {
  .desktop-only { display: none !important; }
  /* Float the Add Group button above the collapsed fleet-summary sheet peek. */

  /* Master→detail on phones: selecting a group shows the detail as a full-screen
     view over the overview (not appended off-screen below it). Back button returns. */
  .builder-detail:not(.hidden) {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: var(--z-overlay);
    height: auto;
    max-height: none;
    overflow-y: auto;
    border-left: none;
    padding: var(--sp-md);
    padding-bottom: 88px;
  }
  .detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0 var(--sp-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--navy);
    cursor: pointer;
  }
}

/* Tablets (Fluent "large" ≥640px, incl. iPad portrait at 768) get the full
   three-panel builder layout, sidebar + overview + detail, rather than the
   phone bottom sheet. */
@media (min-width: 640px) and (max-width: 768px) {
  .builder-layout { flex-direction: row; }
  .builder-sidebar {
    width: 178px;
    position: sticky; top: var(--topbar-h); left: auto; right: auto; bottom: auto;
    height: calc(100vh - var(--topbar-h)); max-height: none;
    transform: none; border-radius: 0; border-top: none; box-shadow: none;
    overflow-y: auto; z-index: auto;
    padding: var(--sp-md);
  }
  body.picker-open .builder-sidebar { z-index: auto; }
  .builder-overview {
    flex: 1.05;
    position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h)); max-width: none;
    padding: var(--sp-md); padding-bottom: var(--sp-md);
  }
  .builder-detail {
    flex: 1.1;
    position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    padding: var(--sp-md); border-left: 1px solid var(--stroke-light);
  }
  .overview-group-pts { font-size: var(--text-md); }
  .overview-group-art { width: 44px; height: 44px; }
  /* The detail panel is narrow at this width. Stack the ship card (art on top,
     full-width content below) so the name/points/stats aren't squeezed. */
  .builder-detail .group-ship-entry { flex-direction: column; }
  .builder-detail .ship-card-image { width: 100%; height: 120px; }
}

@media (max-width: 480px) {
  .landing-title { font-size: var(--text-2xl); }
  .landing-subtitle { font-size: var(--text-sm); }
  .faction-showcase { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .faction-chip-heroes { height: 50px; padding: 2px 2px 0; }
  .faction-chip-heroes img { height: 42px; margin: 0 -4px; }
  .faction-chip-info { padding: var(--sp-xs) 2px; }
  .faction-chip-icon { width: 18px; height: 18px; }
  .faction-chip-name { font-size: var(--text-xs); }

  /* Sort bar compact */
  .fleet-sort-btn { padding: var(--sp-xs) var(--sp-sm); font-size: 12px; }
  .fleet-sort-label { font-size: 12px; }

  /* Overview compact */
  .overview-faction-icon { width: 28px; height: 28px; }
  .overview-title { font-size: var(--text-lg); }
  .overview-group-art { width: 52px; height: 52px; }
  .overview-group-name { font-size: var(--text-sm); }
  .overview-group-pts { font-size: var(--text-md); }

  /* Stats stay a vertical stack on narrow widths too. */
  .stat-cell-value { font-size: 17px; }

  .ship-card-top { flex-direction: column; }
  .ship-card-image { width: 100%; height: 120px; border-radius: var(--radius-md); }
  .ship-card-image img { object-position: center; }

  /* Weapon rows stack on small screens */
  .weapon-list { overflow-x: visible; }
  .weapon-row { grid-template-columns: 1fr 32px 28px 28px 36px; min-width: 0; }
  .weapon-col-special { grid-column: 1 / -1; padding-left: 0; margin-top: 2px; }

  /* Systems-picker hardpoint table (e.g. Dreadnought/Frigate Systems) reuses the
     station-armaments layout, which adds a stepper column past the plain
     6-column weapon grid above. That extra column has no override at this
     width, so it inherits the wider desktop-narrow-panel grid (sized for the
     ~309–380px #builder-detail column on a real desktop). On an actual phone
     screen the Special chips and the stepper's "+cost" button end up sharing
     the same cramped cell and visually overlap. Explicitly place every cell so
     Special still wraps to its own full-width row, but the stepper keeps a
     reserved column on row 1 instead of colliding with it. */
  #builder-detail .station-arm-list .weapon-row.station-arm-row {
    grid-template-columns: 1fr 26px 22px 22px 30px minmax(66px, auto);
    align-items: center;
  }
  #builder-detail .station-arm-list .weapon-row.station-arm-row .weapon-col-name { grid-row: 1; grid-column: 1; }
  #builder-detail .station-arm-list .weapon-row.station-arm-row .weapon-col-arc { grid-row: 1; grid-column: 2; }
  #builder-detail .station-arm-list .weapon-row.station-arm-row .weapon-col-att { grid-row: 1; grid-column: 3; }
  #builder-detail .station-arm-list .weapon-row.station-arm-row .weapon-col-lock { grid-row: 1; grid-column: 4; }
  #builder-detail .station-arm-list .weapon-row.station-arm-row .weapon-col-dmg { grid-row: 1; grid-column: 5; }
  #builder-detail .station-arm-list .weapon-row.station-arm-row .station-arm-qty { grid-row: 1; grid-column: 6; justify-content: flex-end; }
  #builder-detail .station-arm-list .weapon-row.station-arm-row .weapon-col-special {
    grid-row: 2; grid-column: 1 / -1; padding-left: 0; margin-top: 2px;
  }
  #builder-detail .station-arm-list .weapon-row-header.station-arm-row .weapon-col-special { display: none; }

  .load-row { flex-direction: column; align-items: flex-start; }
  .loadout-selector { flex-direction: column; align-items: flex-start; }
  .launch-ref-row { flex-wrap: wrap; }
  .launch-ref-col-name { flex-basis: 100%; }
  .launch-ref-col-special { flex-basis: 100%; padding-left: 0; }

  /* Tighter spacing */
  .builder-overview { max-width: none; height: auto; position: static; padding: var(--sp-md); padding-bottom: 64px; }
  .builder-detail { height: auto; position: static; padding: var(--sp-md); padding-bottom: 64px; border-left: none; border-top: 1px solid var(--stroke-light); }
  .group-ship-entry { padding: var(--sp-md); }
  .group-header-bar h2 { font-size: var(--text-xl); }
  .fleet-card-header { padding: var(--sp-xs) var(--sp-md); }
  .fleet-card-name { font-size: var(--text-md); padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-points-row { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-bar { margin-left: var(--sp-md); margin-right: var(--sp-md); }
  .fleet-card-comp { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-actions { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-points { font-size: var(--text-xl); }

  /* Ship cost repositioned for stacked layout */
  .ship-card-cost { font-size: var(--text-md); }
}

@media (max-width: 360px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 2px; }
  .stat-cell { padding: 2px; }
  .stat-cell-label { font-size: 7px; }
  .stat-cell-value { font-size: var(--text-xs); }
  .category-tab { padding: var(--sp-xs) var(--sp-sm); font-size: 12px; }
  .topbar-brand { font-size: var(--text-xs); }
  .topbar-logo { height: 18px; }
}

/* Keyboard shortcut key */
.kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px 8px;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: center;
  color: var(--navy);
  background: var(--paper-alt);
  border: 1px solid var(--stroke);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ── 28. Tooltip ─────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: 100;
  box-shadow: var(--shadow-md);
}
[data-tooltip]:hover::after { opacity: 1; }
/* The picker switches sit flush against the right edge of the filter row, so a
   centred tooltip overflows and gets clipped. Anchor it to the switch's right edge
   (extending left, into the panel) and let long copy wrap instead of running off. */
.picker-switch[data-tooltip]::after {
  left: auto; right: 0; transform: none;
  white-space: normal; width: max-content; max-width: min(260px, 70vw);
}

/* Disable tooltips on touch, they require hover */
@media (hover: none) {
  [data-tooltip]::after { display: none; }
}

/* ── 29. Touch & Active States ──────────────────────────────── */
@media (hover: none) {
  .fleet-card:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }
  .group-ship-entry:active { background: var(--paper-alt); }
  .group-nav-item:active { background: rgba(255,255,255,0.15); }
  .btn:active { transform: scale(0.97); }
  .category-tab:active { transform: scale(0.96); }
  .ship-card:active { transform: scale(0.98); }
}

/* ── Site footer (uniform across WarLore builders, themed to DFC) ── */
.game-info-footer {
  border-top: 1px solid var(--stroke);
  background: var(--paper-alt);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
/* On the builder the three sticky panels already fill 100vh - topbar. Pin the
   footer to the very bottom of the viewport so it's always visible without any
   page scroll. Panels are shortened by --footer-h (see above) so they don't
   slide behind it. */
body[data-view="builder"] .game-info-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-topbar);
}
.gif-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Wider between columns than between rows: the wordmark and Send Feedback
     sit side by side with no separator glyph between them, so the space is
     what has to do that work. */
  gap: var(--sp-sm) var(--sp-md);
  max-width: 1200px;
  margin: 0 auto;
}
.gif-title { font-weight: var(--weight-bold); color: var(--ink-soft); font-family: var(--font-display); }
.gif-sep { color: var(--ink-faint); }
.game-info-footer a { color: var(--navy); text-decoration: none; }
.game-info-footer a:hover { text-decoration: underline; }
/* The WarLore wordmark keeps its gold-on-black brand even inside the footer
   (the generic footer-link colour above would otherwise force it to navy). */
.game-info-footer a.warlore-mark { color: #FFCC00; }
.game-info-footer a.warlore-mark:hover { color: #000; background: #FFCC00; text-decoration: none; }
.gif-builder { margin-left: auto; }
.gif-builder a {
  font-family: var(--font-wordmark), var(--font-condensed);
  font-size: var(--text-md);
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .gif-inner { justify-content: center; gap: 4px var(--sp-sm); }
  .gif-builder { margin-left: 0; flex-basis: 100%; text-align: center; margin-top: var(--sp-xs); }
}

/* ===========================================================================
   Combat Calculator (js/calc-ui.js), standalone tool + builder pane.
   Light Art Deco theme, no external chart library.
   =========================================================================== */

/* Weapon calculator affordance (builder main pane): the DAMAGE cell is the
   click target that sends the weapon to the Combat Calculator pane. */
.weapon-col-dmg--calc {
  cursor: pointer; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 4px; margin: -1px 0; border: 1px solid var(--gold-line);
  background: var(--navy-subtle); color: var(--navy);
  transition: color .12s, background .12s, border-color .12s;
}
.weapon-col-dmg--calc:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
.weapon-col-dmg--calc:hover .dmg-type { color: #fff; }
.weapon-col-dmg--calc:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Builder far-right pane */
.builder-calc {
  width: 348px; flex-shrink: 0;
  background: var(--paper-warm);
  border-left: 1px solid var(--gold-line);
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  position: sticky; top: var(--topbar-h);
  overflow-y: auto;
}
.builder-calc.hidden { display: none; }
.builder-layout.calc-open .builder-detail { flex: 1; }
.calc-builder { position: relative; min-height: 100%; }
.calc-resize-handle { position: absolute; left: 0; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 5; transition: background .1s; }
.calc-resize-handle:hover, .calc-resize-handle:active { background: var(--gold-line); }
.calc-builder-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--gold-line);
  background: var(--navy-dark); color: #fff; position: sticky; top: 0; z-index: 2;
}
.calc-builder-title { font-family: var(--font-condensed); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--text-sm); }
.calc-builder-close { background: transparent; border: 0; color: rgba(255,255,255,.7); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
.calc-builder-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.calc-builder-body { padding: var(--sp-sm) var(--sp-md) var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.calc-builder-body > section { display: flex; flex-direction: column; gap: 5px; }
.calc-builder-foot { border-top: 1px solid var(--stroke-light); padding-top: var(--sp-xs); text-align: center; }

/* Standalone view */
.calc-view { padding: var(--sp-md) var(--sp-lg) var(--sp-2xl); max-width: 1120px; margin: 0 auto; width: 100%; }
.calc-loading, .calc-empty { color: var(--ink-faint); font-size: var(--text-sm); padding: var(--sp-sm) 0; }
.calc-error { color: var(--warning); }
.calc-intro { text-align: center; margin-bottom: var(--sp-md); }
.calc-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--navy-dark); margin: 0 0 1px; }
.calc-byline { color: var(--ink-muted); font-size: var(--text-xs); max-width: 560px; margin: 0 auto; }
.calc-byline a { color: var(--gold-dark); }
.calc-grid { display: flex; align-items: stretch; gap: 0; }
.calc-col { background: var(--paper); border: 1px solid var(--stroke-light); border-radius: var(--radius-md); padding: var(--sp-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-sm); }
.calc-col-target, .calc-col-weapons { min-width: 240px; }
.calc-col-results { flex: 1 1 0; min-width: 260px; }
.calc-vsplit { flex: 0 0 12px; align-self: stretch; cursor: col-resize; position: relative; }
.calc-vsplit::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--stroke-light); border-radius: 1px; transition: background .1s; }
.calc-vsplit:hover::before, .calc-vsplit:active::before { background: var(--gold); width: 3px; left: 4px; }

.calc-panel-title { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-xs); color: var(--gold-dark); font-weight: 600; display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: 1px; }
.calc-count { background: var(--navy-subtle); color: var(--navy); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }

/* Fields: label sits INLINE to the left of the control (saves a line each). */
.calc-field { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-muted); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .04em; }
.calc-field > span { flex: 0 0 auto; white-space: nowrap; }
.calc-field > .calc-select, .calc-field > .calc-num, .calc-field > .calc-combo { flex: 1 1 auto; min-width: 0; }
.calc-field-wide { width: 100%; }
.calc-select, .calc-num {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink);
  background: var(--paper); border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  padding: 5px 8px; min-height: 34px; text-transform: none; letter-spacing: 0; width: 100%;
}
.calc-num { width: 64px; }
.calc-select:focus, .calc-num:focus { outline: 2px solid var(--gold-line); border-color: var(--gold); }
/* Type-to-search combobox (enemy ship + add-ship pickers) */
.calc-combo { position: relative; }
.calc-combo-input { width: 100%; }
.calc-combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 60;
  background: var(--paper); border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  max-height: 260px; overflow-y: auto; box-shadow: var(--shadow-lg); display: none;
}
.calc-combo-list.open { display: block; }
.calc-combo-chips { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 6px; background: var(--paper); border-bottom: 1px solid var(--stroke-light); }
.calc-combo-chip { font-family: var(--font-condensed); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); background: var(--paper-alt); border: 1px solid var(--stroke-light); border-radius: var(--radius-sm); padding: 3px 7px; cursor: pointer; min-height: 24px; }
.calc-combo-chip:hover { color: var(--navy); border-color: var(--gold-line); }
.calc-combo-chip.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.calc-combo-item {
  display: flex; gap: 8px; align-items: baseline; padding: 6px 9px;
  font-size: var(--text-sm); color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0;
}
.calc-combo-item:hover, .calc-combo-item.active { background: var(--navy-subtle); }
.calc-combo-item.active { box-shadow: inset 2px 0 0 var(--gold); }
.calc-combo-group { position: sticky; top: 0; background: var(--paper-alt); color: var(--gold-dark); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; padding: 3px 9px; border-bottom: 1px solid var(--stroke-light); }
.calc-combo-custom { font-style: italic; color: var(--ink-muted); border-bottom: 1px solid var(--stroke-light); }
.calc-combo-fac { flex: 0 0 58px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-family: var(--font-condensed); }
.calc-combo-name { flex: 1; min-width: 0; }
.calc-combo-empty, .calc-combo-more { padding: 7px 9px; font-size: var(--text-xs); color: var(--ink-faint); }
.calc-field-note { font-style: italic; color: var(--ink-faint); text-transform: none; font-weight: 400; }
.calc-saves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.calc-saves-2 { grid-template-columns: repeat(2, 1fr); }
.calc-field-fr { grid-column: 1 / -1; }
.calc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-sm); margin-top: 2px; }
.calc-check, .calc-wtoggle { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer; padding: 3px 6px; border-radius: var(--radius-sm); min-height: 30px; transition: background .1s; }
.calc-check:hover, .calc-wtoggle:hover { background: var(--navy-subtle); }
.calc-check input, .calc-wtoggle input { accent-color: var(--navy); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.calc-mods summary { cursor: pointer; font-size: var(--text-xs); color: var(--gold-dark); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; padding: 4px 0; min-height: 26px; }

/* Weapons */
.calc-weapons-list { display: flex; flex-direction: column; gap: 5px; }
.calc-weapon { border: 1px solid var(--stroke-light); border-radius: var(--radius-md); padding: 6px 8px; background: var(--paper-warm); }
.calc-weapon-head { display: flex; align-items: center; gap: var(--sp-sm); }
.calc-weapon-name { flex: 1; font-family: var(--font-condensed); font-weight: 600; font-size: var(--text-sm); color: var(--navy-dark); background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 2px 0; }
.calc-weapon-name:hover { border-bottom-color: var(--stroke); }
.calc-weapon-name:focus { outline: none; border-bottom-color: var(--gold); }
.calc-weapon-del { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; background: transparent; border: 1px solid transparent; color: var(--ink-muted); cursor: pointer; padding: 0; border-radius: var(--radius-sm); }
.calc-weapon-del:hover { color: #c0392b; background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.25); }
.calc-weapon-stats { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.calc-field-sm { flex: 1 1 auto; min-width: 84px; }
.calc-field-sm .calc-select, .calc-field-sm .calc-num { width: 100%; }
.calc-weapon-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.calc-chip { font-size: 10.5px; font-family: var(--font-condensed); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); background: var(--navy-subtle); border: 1px solid var(--navy-subtle); border-radius: var(--radius-sm); padding: 1px 6px; }
.calc-weapon-toggles { display: flex; flex-wrap: wrap; gap: 2px var(--sp-sm); margin-top: 3px; }
.calc-weapon-add { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.calc-addship { font-family: var(--font-body); }

/* Results */
.calc-headline { text-align: center; padding: var(--sp-xs) 0; border-bottom: 1px solid var(--stroke-light); margin-bottom: var(--sp-sm); }
.calc-headline-num { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gold-dark); line-height: 1; }
.calc-headline-lbl { display: block; font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-condensed); margin-top: 1px; }
.calc-headline-sub { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 2px; }
.calc-chart-block { margin-top: var(--sp-sm); }
.calc-chart-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-family: var(--font-condensed); margin-bottom: 3px; display: flex; justify-content: space-between; }
.calc-chart-hint { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.calc-chart { width: 100%; height: 74px; display: block; overflow: visible; }
.calc-bar rect { fill: var(--navy); transition: fill .1s; }
.calc-bar:hover rect { fill: var(--gold); }
.calc-bar-x { font-size: 5px; fill: var(--ink-faint); font-family: var(--font-condensed); }
.calc-cum-area { fill: var(--gold-subtle); stroke: none; }
.calc-cum-line { fill: none; stroke: var(--gold-dark); stroke-width: 1.2; }
.calc-dot circle { fill: var(--gold-dark); }
.calc-dot:hover circle { fill: var(--navy); }
.calc-rowavgs { margin-top: var(--sp-sm); border-top: 1px solid var(--stroke-light); padding-top: var(--sp-xs); }
.calc-rowavgs-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-family: var(--font-condensed); margin-bottom: 1px; }
.calc-rowavg { display: flex; align-items: baseline; gap: var(--sp-sm); font-size: var(--text-sm); padding: 1px 0; }
.calc-rowavg-name { flex: 1; color: var(--ink-soft); }
.calc-rowavg-val { font-family: var(--font-display); color: var(--navy-dark); }
.calc-row-crip { font-size: 11px; color: var(--warning); }
.calc-share { margin-top: var(--sp-sm); }

@media (max-width: 880px) {
  .calc-grid { flex-direction: column; align-items: stretch; }
  .calc-vsplit { display: none; }
  .calc-col-target, .calc-col-weapons { flex: 1 1 auto !important; min-width: 0; }
  .calc-col-results { position: static; }
}

/* ── Combat Calculator faithful control set (full weapon controls) ───────── */
.calc-saves-3 { grid-template-columns: repeat(3, 1fr) !important; }
.calc-check-inline { justify-content: center; }
.calc-preset-tag, .calc-disabled { opacity: .85; }
.calc-disabled { opacity: .45; }
.calc-preset-tag { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--navy); background: var(--navy-subtle); border-radius: var(--radius-sm); padding: 0 6px; font-weight: 600; }
.calc-weapon-active { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--navy); cursor: pointer; }
.calc-weapon-preset { flex: 1; min-width: 0; }
.calc-weapon-off { opacity: .55; }
.calc-weapon-id { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.calc-weapon-name-lbl { font-family: var(--font-condensed); font-weight: 600; font-size: var(--text-sm); color: var(--navy-dark); }
.calc-weapon-arc { font-family: var(--font-condensed); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-dark); background: var(--gold-subtle); border: 1px solid var(--gold-line); border-radius: var(--radius-sm); padding: 0 5px; }
.calc-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 5px; }
.calc-rule { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; min-height: 26px; }
.calc-rule > span { flex: 1; }
.calc-rule input[type=checkbox] { accent-color: var(--navy); width: 15px; height: 15px; flex-shrink: 0; }
.calc-rule-num { width: 38px; flex-shrink: 0; font-size: var(--text-sm); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 3px 4px; }
.calc-rule-num:disabled { opacity: .4; }
.calc-flags { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; }
.calc-flag { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; min-height: 24px; }
.calc-flag input { accent-color: var(--navy); width: 15px; height: 15px; flex-shrink: 0; }
.calc-cal-group { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--ink-faint); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .03em; }
.calc-cal { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.calc-cal input { accent-color: var(--navy); width: 14px; height: 14px; }
.calc-wsit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--stroke-light); }
.calc-configcode { margin-top: var(--sp-sm); border-top: 1px solid var(--stroke-light); padding-top: var(--sp-sm); }
.calc-configcode .calc-select { font-family: var(--font-mono); font-size: 12px; }
.calc-code-btns { display: flex; gap: 6px; margin-top: 5px; }

/* ── Calc: segmented calibre, grouped situation, hints, compact builder card ── */
.calc-seg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-faint); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .03em; }
.calc-seg-btn { font-family: var(--font-condensed); font-size: 12px; font-weight: 600; min-width: 22px; min-height: 24px; padding: 2px 6px; border: 1px solid var(--stroke); background: var(--paper); color: var(--ink-muted); cursor: pointer; }
.calc-seg-btn + .calc-seg-btn { border-left: 0; }
.calc-seg-btn:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.calc-seg-btn:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.calc-seg-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.calc-seg-btn:disabled { opacity: .45; cursor: default; }
.calc-modgroup { margin-top: var(--sp-xs); }
.calc-modgroup-head { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; color: var(--gold-dark); margin-bottom: 1px; border-bottom: 1px solid var(--stroke-light); }
.calc-preset-hint { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.calc-linkbtn { background: none; border: 0; padding: 0; color: var(--gold-dark); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.calc-weapon-compact .calc-weapon-head { gap: 6px; }
.calc-weapon-compact .calc-weapon-name-lbl { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.calc-compact-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: var(--text-xs); color: var(--ink-muted); font-family: var(--font-condensed); }
.calc-compact-stats b { color: var(--navy-dark); font-weight: 700; }

/* Admiral card: flagship stat line + weapons */
.admiral-ship-block { margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px dashed var(--stroke-light); }
.admiral-ship-name { font-family: var(--font-condensed); font-weight: 600; font-size: var(--text-sm); color: var(--navy-dark); margin-bottom: 3px; }
.admiral-ship-name .ton-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); border: 1px solid var(--stroke-light); border-radius: var(--radius-sm); padding: 0 5px; margin-left: 4px; }

/* ── What's New / changelog modal ─────────────────────────────────────── */
.changelog-disclaimer {
  font-size: var(--text-sm);
  color: var(--fg3);
  background: var(--bg2);
  border-left: 3px solid var(--accent, #b8902b);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: 4px;
  margin: 0 0 var(--sp-md);
  font-style: italic;
}
.changelog-entry { margin-bottom: var(--sp-md); }
.changelog-date {
  font-family: var(--font-condensed);
  font-weight: 600;
  /* Inherited from Dropfleet as uppercase. An entry title is a sentence, not a
     label, and this app is sentence case. */
  letter-spacing: 0.03em;
  font-size: var(--text-sm);
  color: var(--fg2);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.12));
  padding-bottom: 2px;
  margin-bottom: var(--sp-xs);
}
/* Its own gold rather than --accent, which is 2.90:1 on the panel and this is
   14px type. --accent has to stay where it is: it is the wordmark's gold and
   it is a fill and a rule everywhere else, where the bar is 3:1 and it clears.
   The dark theme's gold already reads there and keeps it. */
.changelog-title { color: #8a6c1e; }
html[data-theme="dark"] .changelog-title { color: var(--accent, #d8b24e); }
.changelog-list { margin: 0; padding-left: 1.1em; }
.changelog-list li { font-size: var(--text-sm); line-height: 1.45; margin-bottom: 3px; color: var(--fg2); }

/* ═══════════════════════════════════════════════════════
   Play Mode
   ═══════════════════════════════════════════════════════ */
.play-view {
  padding: var(--sp-lg) var(--sp-lg) var(--sp-4xl);
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - var(--topbar-h));
}
.play-header {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: var(--sp-md);
}
.play-round-ctrl { display: flex; align-items: center; gap: var(--sp-sm); }
.play-round-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--stroke); background: var(--paper);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 16px;
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  line-height: 1; font-family: inherit; transition: background var(--duration-fast);
}
.play-round-btn:hover { background: var(--paper-alt); }
.play-round-block { text-align: center; }
.play-round-label {
  font-size: 9px; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: 0.06em; font-family: var(--font-condensed); display: block;
}
.play-round-num {
  font-size: 24px; font-weight: 700; font-family: var(--font-condensed);
  color: var(--ink); line-height: 1; min-width: 24px; display: block; text-align: center;
}
.play-pass-tokens {
  display: flex; align-items: center; gap: var(--sp-xs);
  font-size: 11px; color: var(--ink-muted); font-family: var(--font-condensed);
  letter-spacing: 0.04em;
}
.play-pass-pip {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--stroke);
  cursor: pointer; flex-shrink: 0;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.play-pass-pip.play-pass-used { background: var(--gold); border-color: var(--gold); }
.play-header-spacer { flex: 1; }
.play-act-count { text-align: center; }
.play-act-num { font-size: 20px; font-weight: 700; font-family: var(--font-condensed); color: var(--ink); line-height: 1; display: block; }
.play-end-round-btn {
  padding: 5px 14px; border: 1px solid var(--stroke); background: transparent;
  border-radius: var(--radius-md); cursor: pointer; font-size: 13px;
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink); text-transform: uppercase; transition: all var(--duration-fast);
}
.play-end-round-btn:hover {
  background: rgba(217,140,31,0.12); border-color: var(--warning); color: var(--warning);
}
.play-bgs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
@media (max-width: 640px) { .play-bgs { grid-template-columns: 1fr; } }
.play-bg-card {
  background: var(--paper); border: 1px solid var(--stroke);
  border-radius: var(--radius-lg); overflow: hidden; transition: opacity var(--duration-normal);
}
.play-bg-card.play-activated { opacity: 0.45; }
.play-bg-header {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--stroke);
  background: var(--paper-warm);
}
.play-ton-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  font-family: var(--font-condensed); letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0;
}
.play-ton-L { background: rgba(62,153,69,0.12); color: var(--success); }
.play-ton-M { background: rgba(42,80,128,0.12); color: var(--info); }
.play-ton-H { background: rgba(217,140,31,0.15); color: var(--warning); }
.play-ton-S { background: rgba(196,60,47,0.12); color: var(--error); }
.play-bg-name {
  font-size: 13px; font-weight: 700; font-family: var(--font-condensed);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); flex: 1;
}
.play-bg-admiral { font-size: 11px; color: var(--ink-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.play-act-btn {
  padding: 3px 10px; border: 1px solid var(--stroke); background: transparent;
  border-radius: var(--radius-md); cursor: pointer; font-size: 11px;
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-muted); text-transform: uppercase; white-space: nowrap;
  transition: all var(--duration-fast);
}
.play-act-btn:hover { background: rgba(62,153,69,0.1); color: var(--success); border-color: var(--success); }
.play-act-btn.play-done { background: rgba(62,153,69,0.12); color: var(--success); border-color: rgba(62,153,69,0.4); }
.play-orders-row {
  display: flex; gap: var(--sp-xs); flex-wrap: wrap;
  padding: var(--sp-xs) var(--sp-md); border-bottom: 1px solid var(--stroke-light);
}
.play-order-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--stroke); background: transparent; color: var(--ink-muted);
  cursor: pointer; font-family: inherit; transition: all var(--duration-fast); white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.play-order-chip:hover { color: var(--ink); border-color: var(--stroke-strong); }
.play-order-chip.play-order-sel {
  background: var(--navy); color: var(--paper); border-color: var(--navy); font-weight: 600;
}
.play-orders-hint {
  font-size: 9px; color: var(--ink-faint); font-family: var(--font-condensed);
  letter-spacing: 0.04em; padding: 2px var(--sp-md) 0; text-transform: uppercase;
}
/* Tappable rule chips in the weapon Special column and launch specials. */
.play-wt-rule {
  cursor: pointer; color: var(--info); border-bottom: 1px dotted var(--info);
  white-space: nowrap;
}
.play-wt-rule:hover { color: var(--navy); }
html[data-theme="dark"] .play-wt-rule { color: #7fb0e6; border-bottom-color: #7fb0e6; }
.play-wt-rule-plain { color: var(--ink-faint); }
.play-wt-rule-none { color: var(--ink-faint); }
/* Tappable launch-asset name + order-forbidden launch state. */
.play-launch-tap { cursor: pointer; border-bottom: 1px dotted var(--ink-muted); }
.play-launch-tap:hover { color: var(--navy); border-bottom-color: var(--navy); }
.play-launch-off { opacity: 0.4; }
.play-launch-off .play-launch-tap { pointer-events: none; border-bottom: none; }
.play-launch-off-note {
  font-size: 10px; font-weight: 700; font-family: var(--font-condensed);
  color: var(--error); letter-spacing: 0.03em; margin-left: 4px;
}
.play-ships { padding: var(--sp-sm) var(--sp-md); display: flex; flex-direction: column; }
.play-ship { display: flex; flex-direction: column; gap: var(--sp-xs); padding: var(--sp-sm) 0; }
.play-ship + .play-ship { border-top: 1px solid var(--stroke-light); }
.play-ship-nameline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.play-ship-name {
  font-size: 13px; font-weight: 700; font-family: var(--font-condensed);
  letter-spacing: 0.03em; color: var(--ink);
}
.play-ship-class { font-size: 10px; color: var(--ink-muted); font-weight: 400; margin-left: 2px; }
/* Hull row: [pips + count] [−DMG+] all inline */
.play-hull-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
/* −DMG+ pill */
.play-hull-dmg {
  display: flex; align-items: stretch; flex-shrink: 0;
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  background: var(--paper-warm); overflow: hidden;
}
.play-hull-minus, .play-hull-plus {
  width: 26px; height: 26px; border: none; background: none; cursor: pointer;
  font-size: 15px; font-weight: 300; color: var(--ink-muted); font-family: inherit;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background var(--duration-fast), color var(--duration-fast);
}
/* − takes damage (red), + repairs hull (green). */
.play-hull-minus:hover { background: rgba(196,60,47,0.1); color: var(--error); }
.play-hull-plus:hover  { background: rgba(30,120,30,0.1); color: #2e7d32; }
html[data-theme="dark"] .play-hull-plus:hover { color: #81c784; }
.play-hull-dmg-lbl {
  font-size: 8px; font-weight: 700; font-family: var(--font-condensed);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  border-left: 1px solid var(--stroke-light); border-right: 1px solid var(--stroke-light);
  padding: 0 3px; display: flex; align-items: center;
}
.play-hull-num {
  font-size: 12px; font-weight: 700; font-family: var(--font-condensed); color: var(--ink-muted);
  white-space: nowrap; margin-left: 2px;
}
.play-hull-crippled { color: var(--error) !important; }
.play-hull-dead { color: var(--ink-faint) !important; text-decoration: line-through; }
.play-crippled-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  background: rgba(196,60,47,0.12); color: var(--error);
  letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-condensed);
}
/* Crippled toggle. Sits next to the HP pill, reveals the crippling-effects panel */
.play-crip-toggle {
  position: relative; flex-shrink: 0; height: 26px; padding: 0 10px;
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  background: var(--paper-warm); cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--font-condensed); color: var(--ink-muted);
  display: flex; align-items: center; gap: 4px;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.play-crip-toggle:hover { border-color: var(--stroke-strong); color: var(--ink); }
.play-crip-toggle.play-crip-toggle-crip {
  background: rgba(196,60,47,0.12); color: var(--error); border-color: rgba(196,60,47,0.4);
}
.play-crip-toggle.play-crip-toggle-open {
  background: var(--error); color: var(--paper); border-color: var(--error);
}
.play-crip-toggle-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--warning);
  box-shadow: 0 0 0 1.5px var(--paper-warm);
}
.play-crip-toggle-crip .play-crip-toggle-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.6); }
.play-fire-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
  background: rgba(217,140,31,0.15); color: var(--warning);
  letter-spacing: 0.04em; font-family: var(--font-condensed);
}
.play-statline { display: flex; gap: 10px; flex-wrap: wrap; }
.play-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 30px; }
.play-stat-icon { width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.play-stat-icon svg { width: 15px; height: 15px; display: block; }
.play-stat-val { font-size: 13px; font-weight: 700; font-family: var(--font-condensed); color: var(--ink); line-height: 1; }
.play-stat-lbl { font-size: 9px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-condensed); line-height: 1; }

/* Firing-arc glyph in the weapon table (shared icon language). */
.play-wt-arc { text-align: center; }
.play-arc-ico { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink-soft); line-height: 1; }
.play-arc-ico svg { width: 16px; height: 16px; display: block; }
.play-arc-lbl { font-size: 8px; font-weight: 700; font-family: var(--font-condensed); letter-spacing: 0.03em; color: var(--ink-faint); }

/* Order → weapon note above the weapons table, and greyed-out unusable weapons. */
.play-order-note {
  font-size: 10px; font-weight: 700; font-family: var(--font-condensed);
  letter-spacing: 0.03em; padding: 3px 8px; border-radius: var(--radius-sm);
  margin: 4px 0 2px; display: inline-block;
}
.play-order-note-go   { color: var(--success); background: rgba(62,153,69,0.1); }
.play-order-note-half { color: var(--warning); background: rgba(217,140,31,0.12); }
.play-order-note-stop { color: var(--error);   background: rgba(196,60,47,0.1); }
.play-wt-off td { opacity: 0.32; }
.play-wt-off .play-wt-name { text-decoration: line-through; }
.play-weapons {
  width: 100%; border-collapse: collapse; font-size: 11px;
  border: 1px solid var(--stroke-light); border-radius: var(--radius-sm); overflow: hidden; margin-top: 2px;
}
.play-weapons th {
  background: var(--paper-warm); color: var(--ink-faint); font-weight: 600;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 5px; text-align: left; border-bottom: 1px solid var(--stroke-light);
  font-family: var(--font-condensed);
}
.play-weapons td { padding: 3px 5px; border-bottom: 1px solid var(--stroke-light); color: var(--ink-soft); vertical-align: middle; }
.play-weapons tr:last-child td { border-bottom: none; }
.play-wt-num { text-align: center; font-family: var(--font-condensed); font-size: 13px; font-weight: 600; color: var(--ink); }
.play-wt-name { color: var(--ink-muted); }
.play-wt-special { color: var(--ink-faint); font-size: 10px; }
.play-dmg-K { color: #2e7d32; }
.play-dmg-E { color: #1565c0; }
.play-dmg-C { color: #6a1b9a; }
html[data-theme="dark"] .play-dmg-K { color: #81c784; }
html[data-theme="dark"] .play-dmg-E { color: #64b5f6; }
html[data-theme="dark"] .play-dmg-C { color: #ce93d8; }
.play-status-tokens { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.play-tok {
  font-size: 10px; padding: 2px 8px; border: 1px solid var(--stroke); border-radius: 20px;
  background: transparent; color: var(--ink-muted); cursor: pointer; font-family: inherit;
  transition: all var(--duration-fast); line-height: 1.4;
}
.play-tok:hover { border-color: var(--stroke-strong); color: var(--ink); }
.play-tok.play-tok-active { background: rgba(196,60,47,0.1); color: var(--error); border-color: rgba(196,60,47,0.4); }
.play-corruptor-ctrl { display: flex; align-items: center; gap: 3px; }
.play-corruptor-label {
  font-size: 10px; padding: 2px 7px; border-radius: 20px;
  background: rgba(106,27,154,0.1); color: #6a1b9a;
  border: 1px solid rgba(106,27,154,0.3); font-family: var(--font-condensed); font-weight: 600; letter-spacing: 0.03em;
}
html[data-theme="dark"] .play-corruptor-label { color: #ce93d8; background: rgba(206,147,216,0.12); border-color: rgba(206,147,216,0.3); }
.play-corruptor-btn {
  width: 18px; height: 18px; border: 1px solid var(--stroke); background: transparent;
  border-radius: 3px; cursor: pointer; font-size: 12px; color: var(--ink-muted);
  font-family: inherit; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.play-corruptor-btn:hover { background: var(--paper-alt); }
.play-rule-chip {
  font-size: 10px; padding: 2px 7px; border: 1px solid var(--stroke-light);
  border-radius: 20px; color: var(--ink-faint); background: var(--paper-warm);
}
.play-empty { padding: var(--sp-xl); text-align: center; color: var(--ink-muted); font-size: 14px; }
.topbar-play-btn { color: var(--success) !important; border-color: rgba(62,153,69,0.3) !important; }

/* ── Play: round counter ── */
.play-round-of { font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.play-pass-label { font-size: 11px; margin-right: 2px; }

/* ── Play: hull pips ── */
.play-hull-pips { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.play-pip {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--stroke-strong); background: transparent;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
/* filled left→right as damage taken: orange = damage below cripple, red = damage past cripple */
.play-pip-dmg { background: var(--warning); border-color: var(--warning); }
.play-pip-crip { background: var(--error); border-color: var(--error); }
.play-pip-thresh { margin-left: 4px; }
.play-pip-thresh::before {
  content: ''; display: inline-block; width: 1.5px; height: 10px;
  background: var(--error); opacity: 0.45; border-radius: 1px;
  margin-right: 2px; vertical-align: middle;
}

/* ── Play: spike row ── */
.play-spike-row {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md);
  border-bottom: 1px solid var(--stroke-light);
}
.play-spike-label {
  font-size: 10px; font-family: var(--font-condensed); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.play-spike-sig {
  font-weight: 700; color: var(--warning); font-size: 11px;
  min-width: 5.5em; display: inline-block;
}
.play-spike-pips { display: flex; gap: 3px; align-items: center; margin-left: auto; }
.play-spike-pip {
  width: 28px; height: 28px;
  border: none; background: transparent; cursor: pointer; padding: 3px;
  color: var(--stroke-strong); transition: color var(--duration-fast), transform var(--duration-fast);
}
.play-spike-pip:hover { transform: scale(1.18); }
.play-spike-pip.play-spike-on { color: var(--gold); }

/* ── Play: destroyed ship ── */
.play-ship-destroyed { opacity: 0.42; }

/* ── Play: crippling effects ── */
.play-crip-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.play-crip-tok {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 7px 3px 5px;
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  background: transparent; color: var(--ink-muted);
  cursor: pointer; font-family: inherit; font-size: 11px;
  transition: all var(--duration-fast); white-space: nowrap;
}
.play-crip-tok:hover { border-color: var(--stroke-strong); color: var(--ink); }
.play-crip-tok.play-crip-on.play-crip-err  { background: rgba(196,60,47,0.1);  color: var(--error);   border-color: rgba(196,60,47,0.4); }
.play-crip-tok.play-crip-on.play-crip-warn { background: rgba(217,140,31,0.1); color: var(--warning); border-color: rgba(217,140,31,0.4); }
.play-crip-counter {
  display: flex; align-items: center; gap: 2px;
  padding: 2px 4px;
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  font-size: 11px; color: var(--ink-muted); white-space: nowrap;
}
.play-crip-counter.play-crip-on.play-crip-err  { background: rgba(196,60,47,0.08);  color: var(--error);   border-color: rgba(196,60,47,0.4); }
.play-crip-counter.play-crip-on.play-crip-warn { background: rgba(217,140,31,0.08); color: var(--warning); border-color: rgba(217,140,31,0.4); }
.play-crip-adj {
  width: 18px; height: 18px; border: none; background: transparent;
  cursor: pointer; font-size: 13px; color: inherit; padding: 0; font-family: inherit;
  display: flex; align-items: center; justify-content: center; border-radius: 2px; line-height: 1;
}
.play-crip-adj:hover { background: var(--paper-alt); }
.play-crip-icon { width: 14px; height: 14px; display: flex; align-items: center; flex-shrink: 0; }
.play-crip-icon svg { width: 14px; height: 14px; }
.play-crip-badge-lbl { white-space: nowrap; }
.play-crip-count { font-size: 13px; font-weight: 700; font-family: var(--font-condensed); min-width: 14px; text-align: center; }

/* ── Play: launch assets ── */
.play-launch-row {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 3px 0;
  font-size: 11px; align-items: center;
}
.play-launch-item { display: flex; align-items: center; gap: 3px; }
.play-launch-name { color: var(--ink-muted); }
.play-launch-val {
  font-weight: 700; font-family: var(--font-condensed); font-size: 12px;
  color: #1565c0; background: rgba(21,101,192,0.08);
  padding: 1px 6px; border-radius: 10px; border: 1px solid rgba(21,101,192,0.2);
}
html[data-theme="dark"] .play-launch-val { color: #64b5f6; background: rgba(100,181,246,0.1); border-color: rgba(100,181,246,0.25); }
.play-launch-sp { color: var(--ink-faint); font-size: 10px; }

/* ── Play: pass info button ── */
.play-pass-info-btn {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 13px; color: var(--ink-faint); line-height: 1;
  vertical-align: middle; transition: color var(--duration-fast);
}
.play-pass-info-btn:hover { color: var(--ink-muted); }
.play-pass-pips { display: flex; gap: 4px; align-items: center; }

.play-header-top { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.play-header-bottom { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.play-pass-none { font-size: 10px; color: var(--ink-faint); font-style: italic; }

/* ── Play: VP / opp-groups score controls ── */
.play-score-ctrl {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--stroke); border-radius: var(--radius-md);
  background: var(--paper);
}
.play-score-label {
  font-size: 10px; font-weight: 700; font-family: var(--font-condensed);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  white-space: nowrap; margin-right: 2px;
}
.play-score-btn {
  width: 20px; height: 20px; border: none; background: transparent; cursor: pointer;
  font-size: 16px; font-weight: 300; color: var(--ink-muted); font-family: inherit;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0;
  border-radius: 3px; transition: background var(--duration-fast), color var(--duration-fast);
}
.play-score-btn:hover { background: var(--paper-alt); color: var(--ink); }
.play-score-num {
  font-size: 16px; font-weight: 700; font-family: var(--font-condensed);
  color: var(--ink); min-width: 20px; text-align: center; line-height: 1;
}
.play-opp-groups { border-color: var(--stroke-light); }
.play-opp-groups .play-score-label { color: var(--ink-faint); }
.play-opp-groups .play-score-num { font-size: 14px; color: var(--ink-muted); }

/* ── Play: tonnage card left-border accent ── */
.play-ton-card-L { border-left: 3px solid var(--success); }
.play-ton-card-M { border-left: 3px solid var(--info); }
.play-ton-card-H { border-left: 3px solid var(--warning); }
.play-ton-card-C { border-left: 3px solid var(--error); }
.play-ton-C { background: rgba(196,60,47,0.12); color: var(--error); }

/* ── Play: weapons table horizontal scroll ── */
.play-weapons-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.play-weapons { min-width: 340px; }