/* ============================================================
   Space Dwarves Mining Consortium — Main Stylesheet  (v2: redesign)
   Clean mobile-game theme · phone-first responsive · juicy motion.

   Layout strategy (mobile-first):
     - Base styles target PHONES: top HUD, bottom tab bar (+ More sheet),
       panels slide up as bottom sheets, full-screen overlays.
     - @media (min-width: 880px) restores the desktop 3-column layout
       (left rail · canvas · right panel).

   The class names and CSS variable NAMES are a stable contract used by
   all 13 panels — only their VALUES/behaviour changed here.
   ============================================================ */

/* ── Display webfont (self-hosted; PWA/offline-safe) ────────
   Chakra Petch Bold (SIL OFL 1.1 — see client/fonts/LICENSE.txt).
   If the file is missing the display token silently falls back to
   the system stack — never breaks. */
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/ChakraPetch-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html, body { height: 100%; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Background scale — DEEP COSMIC: saturated indigo-violet void, richer depth
     between layers (dramatic overhaul; names unchanged, values only). */
  --color-bg-void:    #070512;
  --color-bg-deep:    #0d0a20;
  --color-bg-base:    #14102b;
  --color-bg-raised:  #1c1742;
  --color-bg-panel:   #241d4e;
  --color-bg-card:    #2c2461;
  --color-bg-hover:   #3a3082;

  /* Accent — warm dwarven amber signature kept, complements pushed electric */
  --color-accent-primary:   #ffb63f;   /* amber/gold (the signature) */
  --color-accent-bright:    #ffd074;   /* highlight */
  --color-accent-muted:     #c0812f;   /* subdued */
  --color-accent-secondary: #4cd6f0;   /* electric aqua for tech/info/VIP chrome */
  --color-accent-vip:       #ffd24a;   /* gold for VIP */
  --color-accent-purple:    #b07bff;   /* vivid cosmic violet for variety/discovery */

  /* Status colours — punchier, tuned to sit on the deep-violet base */
  --color-ok:          #2fe39a;
  --color-ok-bg:       rgba(47, 227, 154, 0.18);
  --color-warn:        #ffca55;
  --color-warn-bg:     rgba(255, 202, 85, 0.18);
  --color-danger:      #ff5578;
  --color-danger-bg:   rgba(255, 85, 120, 0.18);
  --color-info:        #4cd6f0;
  --color-info-bg:     rgba(76, 214, 240, 0.18);

  /* Text — cool near-white; contrast guarded against the darker base */
  --color-text-primary:   #f3f1ff;
  --color-text-secondary: #b6adde;
  --color-text-muted:     #8178b0;
  --color-text-dim:       #4d4685;
  --color-text-inverse:   #1a1205;

  /* Borders — indigo, with a brighter violet highlight edge */
  --color-border:        #372f6e;
  --color-border-bright: #5a4bb0;
  --color-border-focus:  var(--color-accent-secondary);

  /* Gradients & glows — stronger, more cosmic (dramatic) */
  --grad-primary: linear-gradient(135deg, #ffd074 0%, #ff9522 100%);
  --grad-cyan:    linear-gradient(135deg, #6ef2ff 0%, #2aa6e4 100%);
  --grad-ok:      linear-gradient(135deg, #5df0a0 0%, #22c079 100%);
  --grad-purple:  linear-gradient(135deg, #c79bff 0%, #7d4ee0 100%);
  --grad-card:    linear-gradient(160deg, rgba(176,123,255,0.08), rgba(255,255,255,0) 62%);
  --glow-primary: 0 0 22px rgba(255,182,63,0.55);
  --glow-cyan:    0 0 22px rgba(76,214,240,0.55);
  --glow-purple:  0 0 22px rgba(176,123,255,0.50);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.40);
  --shadow-lg: 0 14px 44px rgba(0,0,0,0.55);
  --shadow-sheet: 0 -10px 40px rgba(0,0,0,0.50);

  /* Typography */
  --font-family-base: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-family-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  /* Display face for titles/headers (additive token — falls back to base) */
  --font-family-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-size-xs:   0.6875rem;
  --font-size-sm:   0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md:   1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;

  /* Border radii — rounder, friendlier */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  /* Layout dimensions */
  --hud-height:    3.25rem;
  --nav-width:     4.5rem;   /* desktop left rail */
  --panel-width:   23rem;
  --ticker-height: 1.9rem;   /* bottom rolling ticker bar */
  --overlay-z:     50;
  --sheet-z:       80;
  --modal-z:       100;
  --toast-z:       150;
  --scrim-z:       70;

  /* Motion */
  --transition-fast:   120ms ease;
  /* (see [data-theme] blocks after :root for High Contrast / Dark Ore) */
  --transition-base:   220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   340ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot for pop */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);   /* notch/Dynamic Island (PWA) */
}

/* ── Colour themes (Settings → Display) ─────────────────────
   Real token overrides — previously data-theme was set with no matching CSS
   (the setting silently did nothing). highContrast is the accessibility mode. */
[data-theme="highContrast"] {
  --color-text-primary:   #ffffff;
  --color-text-secondary: #e2ddf7;
  --color-text-muted:     #b9b2d8;
  --color-text-dim:       #8d86b8;
  --color-bg-void:        #000000;
  --color-bg-deep:        #030308;
  --color-bg-base:        #06060d;
  --color-bg-raised:      #0b0b16;
  --color-bg-panel:       #000000;
  --color-bg-card:        #0b0b16;
  --color-bg-hover:       #1c1c2e;
  --color-border:         #9a94c4;
  --color-border-bright:  #c6c0ee;
  --grad-card:            none;
}
[data-theme="darkOre"] {
  --color-bg-void:        #050505;
  --color-bg-deep:        #0a0a0a;
  --color-bg-base:        #101010;
  --color-bg-raised:      #141414;
  --color-bg-panel:       #181818;
  --color-bg-card:        #1f1c16;
  --color-bg-hover:       #2b271e;
  --color-accent-primary: #c9982f;
  --color-accent-bright:  #e0b558;
  --color-accent-vip:     #c9982f;
  --color-border:         #3a362c;
  --color-border-bright:  #5c5540;
  --grad-primary:         linear-gradient(135deg, #e0b558 0%, #a87b1e 100%);
}

/* ── Base typography ────────────────────────────────────────── */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background:
    radial-gradient(1200px 620px at 72% -12%, rgba(76,214,240,0.11), transparent 60%),
    radial-gradient(1000px 560px at -12% 112%, rgba(255,182,63,0.09), transparent 60%),
    radial-gradient(780px 780px at 112% 42%, rgba(176,123,255,0.12), transparent 62%),
    var(--color-bg-void);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

h1,h2,h3,h4,h5 { font-weight: var(--font-weight-bold); line-height: 1.25; color: var(--color-text-primary); }
/* Display face on major headings + all title classes (industrial voice) */
h1, h2, h3,
.panel-title, .overlay-title, .card-title, .modal-title, #loading-title {
  font-family: var(--font-family-display);
  letter-spacing: 0.02em;
}
/* Tabular numerals for economy figures (columns don't jitter as values tick) */
.tabnum { font-variant-numeric: tabular-nums; }
h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-md); } h5 { font-size: var(--font-size-base); }
a { color: var(--color-accent-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   LAYOUT — MOBILE FIRST
   ============================================================ */

/* ── Top HUD bar ── */
#hud-bar {
  position: fixed; top: 0; left: 0; right: 0;
  /* Safe-area: keep controls clear of the notch/Dynamic Island on installed PWAs */
  height: calc(var(--hud-height) + var(--safe-top));
  padding-top: var(--safe-top);
  z-index: calc(var(--overlay-z) - 1);
  background: linear-gradient(180deg, var(--color-bg-panel), var(--color-bg-raised));
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-3);
  padding-left: var(--space-3); padding-right: var(--space-3);
  box-shadow: var(--shadow-md);
}

/* ── Main layout (mobile: just the map between hud and bottom bar) ── */
/* position: absolute (not fixed) so it does NOT create a stacking context —
   otherwise the fixed nav-rail/panel inside it get trapped below the body-level
   scrim. With absolute (z-index auto) the fixed children promote to the body
   root context, so nav (z90) and the panel sheet (z80) sit above the scrim (z70). */
/* Full-width work area under the HUD at all resolutions — the nav is now an
   off-canvas drawer, so no rail/bottom-bar space is reserved. */
#main-layout {
  position: absolute;
  top: calc(var(--hud-height) + var(--ticker-height) + var(--safe-top)); left: 0; right: 0;
  bottom: var(--safe-bottom);
  display: block; overflow: hidden;
}

/* ── Nav: off-canvas hamburger DRAWER (all resolutions) ── */
#nav-rail {
  position: fixed;
  top: calc(var(--hud-height) + var(--ticker-height) + var(--safe-top)); left: 0; bottom: 0;
  width: 15rem; max-width: 84vw;
  padding: var(--space-2) 0 calc(var(--space-2) + var(--safe-bottom));
  background: linear-gradient(180deg, var(--color-bg-raised), var(--color-bg-deep));
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  z-index: calc(var(--scrim-z) + 1);     /* above the scrim */
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#nav-rail.open { transform: translateX(0); }

.nav-section-top    { display: flex; flex-direction: column; gap: 2px; }
.nav-section-bottom { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }

.nav-item {
  display: flex; flex-direction: row; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer; user-select: none; position: relative;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  border: none; background: none; border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.nav-item:hover  { background: var(--color-bg-hover); color: var(--color-text-primary); }
.nav-item:active { background: var(--color-bg-panel); }
.nav-item .nav-icon { font-size: 1.25rem; width: 1.6rem; flex: 0 0 auto; text-align: center; line-height: 1; }
.nav-item .nav-label {
  font-size: var(--font-size-sm); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-item .nav-lock {
  margin-left: auto; font-size: var(--font-size-xs);
  color: var(--color-accent-bright); opacity: 0.9;
}
.nav-item .nav-lock[hidden] { display: none; }

/* Unread/action badge on nav items (panels.setNavBadge) */
.nav-item .nav-badge {
  margin-left: auto;
  min-width: 1.1rem; text-align: center;
  padding: 0 0.3rem;
  font-size: 0.62rem; font-weight: 700; line-height: 1.15rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-secondary); color: var(--color-text-inverse);
}
.nav-item .nav-badge.alert {
  background: var(--color-danger); color: #fff;
  animation: badgePulse 1.6s ease-in-out infinite;
}
.nav-item .nav-badge[hidden] { display: none; }

/* HUD bell unread badge */
#hud-bell-btn { position: relative; }
#hud-bell-btn .hud-bell-badge {
  position: absolute; top: -4px; right: -5px;
  min-width: 1rem; padding: 0 0.25rem;
  font-size: 0.6rem; font-weight: 700; line-height: 1rem; text-align: center;
  border-radius: var(--radius-full);
  background: var(--color-accent-secondary); color: var(--color-text-inverse);
  pointer-events: none;
}
#hud-bell-btn .hud-bell-badge.alert {
  background: var(--color-danger); color: #fff;
  animation: badgePulse 1.6s ease-in-out infinite;
}
#hud-bell-btn .hud-bell-badge[hidden] { display: none; }

.nav-item.active {
  background: var(--color-bg-raised);
  border-left-color: var(--color-accent-primary);
  color: var(--color-accent-bright);
}
.nav-item.active .nav-icon { filter: drop-shadow(0 2px 6px rgba(255,178,62,0.45)); }
.nav-item.locked { opacity: 0.45; cursor: default; }
.nav-item.locked .nav-icon { filter: grayscale(1); }

/* ── Hamburger button in the HUD ── */
#hud-hamburger { font-size: 1.25rem; flex: 0 0 auto; }

/* ── Canvas map ── */
#map-container {
  position: absolute; inset: 0;
  overflow: hidden;
  background:
    radial-gradient(1000px 700px at 50% 40%, rgba(70,200,230,0.05), transparent 70%),
    var(--color-bg-void);
}
#sectorMap { display: block; width: 100%; height: 100%; cursor: grab; outline: none; touch-action: none; }
#sectorMap:active { cursor: grabbing; }
#sectorMap:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }

/* ── Right panel → mobile bottom sheet ── */
#panel-root {
  position: fixed; left: 0; right: 0;
  /* Sheet rises from the bottom screen edge. */
  bottom: var(--safe-bottom);
  max-height: 74vh; height: auto;
  display: flex; flex-direction: column;
  background: var(--color-bg-panel);
  border-top: 1px solid var(--color-border-bright);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sheet);
  z-index: var(--sheet-z);
  transform: translateY(110%);
  transition: transform var(--transition-slow);
  overflow: hidden;
  will-change: transform;
  pointer-events: none; /* don't intercept clicks when hidden/offscreen */
}
#panel-root.open {
  transform: translateY(0);
  pointer-events: auto; /* allow interaction when visible */
}
/* grab handle on the sheet */
#panel-root::before {
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: var(--radius-full);
  background: var(--color-border-bright); z-index: 2;
}
#panel-root[hidden] { display: flex; } /* animate via transform, not display */

/* ── Modal root ── */
#modal-root {
  position: fixed; inset: 0; z-index: var(--modal-z);
  background: rgba(6,9,16,0.72); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 160ms ease;
}
#modal-root[hidden] { display: none; }

/* ── Overlay root (full-screen panels) ── */
#overlay-root {
  position: fixed; inset: calc(var(--hud-height) + var(--ticker-height) + var(--safe-top)) 0 var(--safe-bottom) 0;
  z-index: var(--overlay-z);
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(70,200,230,0.06), transparent 60%),
    var(--color-bg-base);
  overflow: hidden;
  animation: overlayIn var(--transition-slow);
}
#overlay-root[hidden] { display: none; }

/* ── Scrim / backdrop for sheets & More ── */
#ui-scrim {
  position: fixed; inset: 0; z-index: var(--scrim-z);
  background: rgba(6,9,16,0.5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
}
#ui-scrim.show { opacity: 1; pointer-events: auto; }

/* ── Toast root ── */
#toast-root {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + var(--space-3));
  z-index: var(--toast-z);
  display: flex; flex-direction: column-reverse; gap: var(--space-2);
  pointer-events: none; width: min(92vw, 22rem);
}

/* ── Accessibility helpers ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── Panel frame ── */
.panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.panel-header {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-raised), transparent);
}
.panel-title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); flex: 1; color: var(--color-text-primary); }
.panel-close {
  flex-shrink: 0; background: none; border: none; color: var(--color-text-muted);
  cursor: pointer; font-size: var(--font-size-lg); padding: var(--space-1) var(--space-2);
  line-height: 1; border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.panel-close:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.panel-close:active { transform: scale(0.85); }
.panel-body {
  flex: 1 1 auto; min-height: 0;        /* min-height:0 → scroll instead of pushing the header/tabs */
  overflow-y: auto; overflow-x: hidden;
  padding: var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.panel-body > * { animation: fadeInUp 240ms ease both; }
/* S6: overlays + modals get the same content entrance the side panel always
   had (9 overlays + 14 modals used to hard-cut). Global reduced-motion rule
   neutralizes all of these. */
.overlay-body > *, .modal-body > * { animation: fadeInUp 240ms ease both; }
/* Tab-content crossfade helper (domUtils.animateSwap re-triggers it). */
.tab-swap { animation: fadeInUp 180ms ease both; }
/* Loading skeleton (emptyState.skeleton) — shimmer sweep on raised blocks */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--color-bg-raised);
  border-radius: var(--radius-sm);
  min-height: 1em;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation: shimmer 1.4s infinite;
}
/* Exit animations (panelManager adds .closing before hiding). */
#overlay-root.closing { animation: overlayOut 200ms ease both; }
#modal-root.closing > * { animation: overlayOut 160ms ease both; }
@keyframes overlayOut { to { opacity: 0; transform: scale(0.985); } }
.panel-footer {
  flex: 0 0 auto; padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border); background: var(--color-bg-raised);
}

/* ── Tabs ── */
.tabs {
  display: flex; flex-shrink: 0;        /* never let a tall body squeeze/clip the tab row */
  gap: var(--space-1); padding: var(--space-2) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border); background: var(--color-bg-raised);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex-shrink: 0; padding: var(--space-2) var(--space-4);
  cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-secondary);
  border: none; border-radius: var(--radius-md) var(--radius-md) 0 0;
  white-space: nowrap; user-select: none; position: relative;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tab:hover { color: var(--color-text-primary); background: rgba(255,255,255,0.04); }
.tab.active { color: var(--color-accent-bright); background: var(--color-bg-panel); }
.tab.active::after {
  content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0; height: 2px;
  background: var(--grad-primary); border-radius: var(--radius-full); animation: navPop 220ms var(--ease-back);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeInUp 220ms ease; }

/* ── Card ── */
.card {
  background: var(--color-bg-card); background-image: var(--grad-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); margin-bottom: var(--space-3);
  /* Depth facelift: base shadow + a hairline top highlight so cards read as
     raised glass rather than flat panels (applies across all 13 panels). */
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover {
  border-color: var(--color-border-bright);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); flex: 1; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); font-family: inherit;
  cursor: pointer; border: 1px solid transparent; position: relative; overflow: hidden;
  transition: transform var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  user-select: none; white-space: nowrap; min-height: 2.25rem;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ripple */
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.5), transparent 60%);
  opacity: 0; transform: scale(0); transition: transform 0s;
}
.btn:active:not(:disabled)::after { opacity: 0.25; transform: scale(2.4); transition: transform 480ms ease, opacity 480ms ease; }

.btn-primary { background: var(--grad-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: var(--glow-primary); }
.btn-secondary { background: var(--color-bg-card); color: var(--color-text-secondary); border-color: var(--color-border); }
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-bright); }
.btn-danger { background: var(--color-danger); color: #fff; box-shadow: var(--shadow-sm); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.12); }
.btn-icon {
  background: none; border: none; padding: var(--space-2); color: var(--color-text-secondary);
  font-size: var(--font-size-md); min-height: auto; border-radius: var(--radius-md);
}
.btn-icon:hover:not(:disabled) { color: var(--color-text-primary); background: var(--color-bg-hover); }
/* Small-but-tappable action button (compact rows / card actions) */
.btn-sm { padding: var(--space-1) var(--space-3); min-height: 2rem; font-size: var(--font-size-xs); }
@media (max-width: 879px) { .btn-sm { min-height: 2.5rem; } }

/* ── Badge ── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-1);
  border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  background: var(--grad-primary); color: var(--color-text-inverse); line-height: 1;
}
.badge-ok { background: var(--color-ok); } .badge-warn { background: var(--color-warn); color: #000; } .badge-danger { background: var(--color-danger); }
.badge.pulse { animation: badgePulse 1.4s ease-in-out infinite; }

/* ── Status pill ── */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
}
.status-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.status-warn { background: var(--color-warn-bg); color: var(--color-warn); }
.status-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.status-info { background: var(--color-info-bg); color: var(--color-info); }

/* ── Progress bar ── */
.progress-bar {
  width: 100%; height: 8px; background: rgba(0,0,0,0.3);
  border-radius: var(--radius-full); overflow: hidden; position: relative;
}
.progress-bar-fill {
  height: 100%; background: var(--grad-primary); border-radius: var(--radius-full);
  transition: width var(--transition-slow); position: relative; overflow: hidden;
}
/* animated shimmer sweep */
.progress-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%); animation: shimmer 2.2s ease-in-out infinite;
}
.progress-bar-fill.ok { background: var(--grad-ok); }
.progress-bar-fill.warn { background: linear-gradient(135deg,#ffd86b,#f0a83a); }
.progress-bar-fill.danger { background: linear-gradient(135deg,#ff8a96,#e0414f); }
/* in-progress bars (active training / live buffs) get a faster shimmer sweep */
.progress-bar-fill.active::after { animation-duration: 1.1s; }

/* ── Properties modal: training ETA ── */
.train-eta { font-variant-numeric: tabular-nums; }

/* ── Buffs panel: depleting time bar (thin) ── */
.buff-bar { height: 4px; margin-top: 5px; }

/* ── Buffs panel: Serve Ale rows ── */
.serve-ale-row { align-items: center; gap: var(--space-2); }
.serve-ale-stock {
  font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold);
  color: var(--color-accent-bright); min-width: 2ch; text-align: right;
}
.serve-ale-btn { font-size: var(--font-size-xs); padding: 3px 10px; min-height: 0; }
.serve-ale-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Dwarves panel: colony wellbeing strip ── */
.wb-strip {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-raised), transparent);
}
.wb-stat { flex: 1 1 7rem; min-width: 6rem; }
.wb-stat-head {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 3px;
}
.wb-stat-head span:last-child { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.wb-meta {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
  font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px;
}
.wb-meta strong { color: var(--color-accent-bright); font-variant-numeric: tabular-nums; }
.wb-counts { color: var(--color-text-muted); }

/* ── Rolling ticker bar (sits directly under the top HUD, above the map) ── */
#ticker-bar {
  position: fixed; left: 0; right: 0; top: calc(var(--hud-height) + var(--safe-top));
  height: var(--ticker-height);
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: linear-gradient(180deg, var(--color-bg-raised), var(--color-bg-deep));
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  z-index: 40;                 /* above the map, below scrim/drawer/panels/modals */
  cursor: pointer; font-size: var(--font-size-sm); line-height: var(--ticker-height);
  -webkit-tap-highlight-color: transparent;
}
.ticker-track {
  display: inline-block; white-space: nowrap; padding-left: 100%;
  will-change: transform;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.tk-obj    { color: var(--color-accent-bright); font-weight: var(--font-weight-bold); }
.tk-cute   { color: var(--color-text-secondary); font-style: italic; }
.tk-notif  { color: var(--color-text-primary); }
.tk-notif.tk-ok     { color: var(--color-ok); }
.tk-notif.tk-warn   { color: var(--color-warn); }
.tk-notif.tk-danger { color: var(--color-danger); }
.tk-sep    { color: var(--color-text-dim); margin: 0 1.5rem; }
/* Pause the scroll on hover so players can read a passing item. */
#ticker-bar:hover .ticker-track { animation-play-state: paused; }

/* ── List ── */
.list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-bottom: 1px solid var(--color-border);
  cursor: pointer; transition: background var(--transition-fast); border-radius: var(--radius-sm);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--color-bg-hover); }
.list-item:active { transform: scale(0.995); }
.list-item.selected { background: var(--color-bg-raised); box-shadow: inset 3px 0 0 var(--color-accent-primary); }

/* Dwarf Roster rows are wrapped in .dwarf-entry for keyed reconcile, which makes
   each collapsed row the :last-child of its wrapper — restore the inter-row
   divider that .list-item:last-child would otherwise strip from every row. */
.dwarf-entry:not(:last-child) > .dwarf-row:last-child { border-bottom: 1px solid var(--color-border); }

/* ── Form controls ── */
.form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.form-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.form-input, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  background: var(--color-bg-base); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-primary); font-family: inherit; font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(70,200,230,0.18);
}
input[type="range"] { accent-color: var(--color-accent-primary); }
input[type="checkbox"] { accent-color: var(--color-accent-primary); width: 1.05rem; height: 1.05rem; }

/* ── Section separator ── */
.section-title {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted);
  padding: var(--space-2) 0; margin-top: var(--space-3);
}
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-3) 0; }

/* ── HUD specifics ── */
#hud-identity { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
#hud-corp-logo {
  font-size: 1.4rem; cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(255,178,62,0.5));
  transition: transform var(--transition-fast);
}
#hud-corp-logo:hover { transform: rotate(-8deg) scale(1.1); }
#hud-corp-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); white-space: nowrap; color: var(--color-text-primary); }

#hud-resources {
  flex: 1; display: flex; align-items: center; gap: var(--space-3);
  overflow-x: auto; scrollbar-width: none; font-size: var(--font-size-sm);
}
#hud-resources::-webkit-scrollbar { display: none; }

#hud-wellbeing { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.wellbeing-pill { cursor: pointer; }
#hud-controls { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; margin-left: var(--space-1); }

.hud-credits {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: linear-gradient(135deg, rgba(255,210,74,0.16), rgba(255,178,62,0.06));
  border-radius: var(--radius-full); border: 1px solid rgba(255,210,74,0.35);
  white-space: nowrap; flex-shrink: 0;
}
.hud-credits-symbol { color: var(--color-accent-vip); filter: drop-shadow(0 0 6px rgba(255,210,74,0.6)); }
.hud-credits-value { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.hud-credits-value.bump { animation: numberPop 360ms var(--ease-back); }
.hud-credits-rate { font-size: var(--font-size-xs); color: var(--color-ok); }

/* ── Toast ── */
.toast {
  pointer-events: auto; background: var(--color-bg-card); background-image: var(--grad-card);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent-primary);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg); animation: toastPop 320ms var(--ease-back);
}
.toast.ok { border-left-color: var(--color-ok); }
.toast.warn { border-left-color: var(--color-warn); }
.toast.danger { border-left-color: var(--color-danger); }
.toast-title {
  font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); margin-bottom: 2px;
  display: flex; align-items: center; gap: var(--space-2);
}
.toast-title-text { min-width: 0; }
.toast-body { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.toast-body[hidden] { display: none; }
/* "×N" count badge on a collapsed (deduped) toast */
.toast-count {
  flex-shrink: 0; margin-left: auto;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: var(--color-bg-base); background: var(--color-accent-primary);
  border-radius: var(--radius-full); padding: 0 var(--space-2); line-height: 1.5;
}
.toast-count[hidden] { display: none; }
.toast:hover { border-color: var(--color-border-bright); }

/* Collapsed-group count badge in the Comms digest */
.comms-count-badge {
  flex-shrink: 0;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: var(--color-bg-base); background: var(--color-accent-primary);
  border-radius: var(--radius-full); padding: 0 var(--space-2); line-height: 1.5;
}

/* Notification Log modal */
.notif-log-modal { max-width: 30rem; }
.notif-log-list { list-style: none; margin: 0; padding: 0; }
.notif-log-row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.notif-log-row:last-child { border-bottom: none; }
.notif-log-marker {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 0.35em; background: var(--color-accent-primary);
}
.notif-log-row--ok     .notif-log-marker { background: var(--color-ok); }
.notif-log-row--warn   .notif-log-marker { background: var(--color-warn); }
.notif-log-row--danger .notif-log-marker { background: var(--color-danger); }
.notif-log-time {
  flex-shrink: 0; font-size: var(--font-size-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; margin-top: 0.1em;
}
.notif-log-msg { flex: 1; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.notif-log-body { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ── Modal (mobile = bottom sheet) ── */
.modal {
  background: var(--color-bg-panel); border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-width: 34rem; max-height: 85vh;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  animation: sheetUp 300ms var(--ease-back);
  padding-bottom: var(--safe-bottom);
}
.modal-header { display: flex; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.modal-title { flex: 1; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.modal-body { padding: var(--space-4); overflow-y: auto; flex: 1; }
.modal-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ── Daily-bonus welcome modal ── */
.welcome-modal { max-width: 28rem; }
.welcome-hero {
  text-align: center;
  padding: var(--space-2) 0 var(--space-4);
}
.welcome-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}
.welcome-day {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.welcome-day strong {
  color: var(--color-accent-primary);
  font-size: var(--font-size-lg);
}

/* 10-pip streak strip */
.daily-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 auto;
}
.daily-pip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-raised);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  transition: transform 150ms var(--ease-back, ease), box-shadow 150ms ease;
}
.daily-pip.filled {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-void);
}
.daily-pip.today {
  transform: scale(1.18);
  border-color: var(--color-accent-vip);
  box-shadow: 0 0 10px rgba(255, 210, 74, 0.6);
}

.welcome-max {
  margin-top: var(--space-3);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-vip);
  text-shadow: 0 0 8px rgba(255, 210, 74, 0.5);
}

.welcome-rewards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.reward-callout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
}
.reward-icon { font-size: 1.5rem; flex-shrink: 0; }
.reward-text { display: flex; flex-direction: column; gap: 2px; }
.reward-text strong { font-size: var(--font-size-sm); }
.reward-sub { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.welcome-banked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  background: var(--color-bg-card, var(--color-bg-raised));
  border-radius: var(--radius-md);
}
.welcome-explainer {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.5;
}

/* ── Tutorial / on-screen guide dialog ── */
.tutorial-dialog { max-width: 30rem; }
/* Avatar header sits at the TOP of the dialog, centred over the name + line. */
.td-speaker {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.td-portrait {
  position: relative; overflow: hidden;
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; border-radius: var(--radius-full);
  border: 2px solid var(--color-accent-bright);
  background: var(--color-bg-deep);
}
/* Larger avatar variant + pop-in each line. */
.td-avatar {
  width: 4.5rem; height: 4.5rem; font-size: 2.2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  animation: avatarPop 360ms var(--ease-back) both;
}
/* The image (when present) covers the emoji fallback; onerror removes it. */
.td-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
.td-portrait-emoji { position: relative; z-index: 0; }
.td-nameplate { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.td-name { font-weight: var(--font-weight-bold); font-size: var(--font-size-md); }
.td-role { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.td-text {
  font-size: var(--font-size-base); line-height: 1.6; text-align: center;
  color: var(--color-text-primary); margin: 0; min-height: 3.2em;
  animation: tdTextIn 240ms ease both;
}
.td-controls { align-items: center; gap: var(--space-2); }
.td-progress { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ── Welcome screen: patch-notes iframe ── */
/* Patch notes now live in their own tab on the welcome modal, so the section
   no longer needs a separating top border/margin. */
.welcome-patchnotes { margin-top: 0; }
.welcome-tabs { margin: 0 var(--space-4); }
.welcome-patchnotes-frame {
  display: block;
  width: 100%;
  height: 22rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-void);
}

/* ── Spin-the-Wheel (Welcome modal tab) ── */
.wheel-tab { text-align: center; padding: var(--space-2) var(--space-2) var(--space-3); }
.wheel-spins-line { font-size: var(--font-size-sm); margin: 0 0 var(--space-3); }
.wheel-spins-line strong { color: var(--color-accent-vip); font-size: 1.1rem; }
.wheel-spins-line .reward-sub { display: block; color: var(--color-text-secondary); font-size: var(--font-size-xs); margin-top: 2px; }

.wheel-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.wheel-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 1.5rem; line-height: 1; color: var(--color-accent-vip);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.wheel-rotor {
  width: 200px; height: 200px; border-radius: 50%; position: relative;
  border: 4px solid var(--color-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  transform: rotate(0deg);
}
.wheel-labels { position: absolute; inset: 0; pointer-events: none; }
.wheel-label {
  position: absolute; top: 50%; left: 50%;
  font-size: 0.8rem; font-weight: var(--font-weight-bold);
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); white-space: nowrap;
}
.wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-bg-panel, #1a1d2a); border: 3px solid var(--color-border);
  display: grid; place-items: center; font-size: 1.3rem; z-index: 1;
}
.wheel-spin-btn { margin-top: var(--space-4); min-width: 10rem; }
.wheel-result {
  margin-top: var(--space-3); min-height: 1.4rem;
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.wheel-result strong { color: var(--color-accent-vip); }
/* Reduced-motion handling for the wheel lives in welcomeModal.js (_wireWheel):
   it picks a short, gentle spin instead of disabling the transition, so the
   wheel still visibly spins. A `transition: none !important` here would override
   that inline transition and make the wheel snap — the Safari/Brave bug. */

/* ── Traveling Merchant arrival modal ── */
.merchant-arrival-modal { max-width: 26rem; }
.merchant-arrival-hero { text-align: center; padding: var(--space-2) 0 var(--space-3); }
.merchant-arrival-icon { font-size: 3rem; line-height: 1; margin-bottom: var(--space-2); }
.merchant-arrival-sub { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--space-3); }
.merchant-arrival-departs { font-size: var(--font-size-sm); }
.merchant-arrival-departs strong { color: var(--color-accent-vip); }
.merchant-arrival-stock { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.merchant-arrival-stock-head { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-accent-bright); margin-bottom: var(--space-2); }
.merchant-arrival-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.merchant-arrival-item { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-sm); }

/* ── "Missing required item" build tooltip (3s pop-out at the build button) ── */
.build-missing-tip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 8px));
  z-index: 1000;
  max-width: 16rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-danger-bg, #3a1515);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}
.build-missing-tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 4px)); }

/* ── Embedded Stripe Checkout (mounted in the account panel) ── */
.stripe-checkout-wrap { padding: var(--space-2) 0; }
#stripe-embedded-mount { min-height: 22rem; }

/* ── Research card: effect chips + fold-out details ── */
.research-effect-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.research-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  background: var(--color-bg-raised); border: 1px solid var(--color-border);
  color: var(--color-text-secondary); white-space: nowrap;
}
.research-chip.good    { background: var(--color-ok-bg);     color: var(--color-ok);     border-color: transparent; }
.research-chip.bad     { background: var(--color-danger-bg); color: var(--color-danger); border-color: transparent; }
.research-chip.neutral { background: var(--color-bg-raised); color: var(--color-text-muted); }

.research-stage-badge {
  flex: 0 0 auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  background: var(--color-bg-raised); color: var(--color-accent-bright);
  border: 1px solid var(--color-border);
}
.research-stage-pips { display: inline-flex; gap: 3px; margin-bottom: var(--space-2); }
.rs-pip {
  width: 14px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-bg-raised); border: 1px solid var(--color-border);
}
.rs-pip.filled { background: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.rs-pip.active {
  background: var(--color-accent-bright); border-color: var(--color-accent-bright);
  animation: rsPipPulse 1.1s ease-in-out infinite;
}
@keyframes rsPipPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

.research-details-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: none; padding: 2px 0; cursor: pointer;
  color: var(--color-accent-bright); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold); font-family: inherit;
}
.research-details-toggle:hover { filter: brightness(1.15); }

.research-details {
  margin-top: var(--space-2); padding: var(--space-3);
  background: var(--color-bg-deep); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  animation: foldDown 180ms ease;
  overflow-wrap: anywhere;   /* long effect/cost text wraps instead of overflowing the card */
}
.research-detail-head { flex-wrap: wrap; }
/* Keep one over-long summary chip from spilling out of the card sideways. */
.research-effect-chips { max-width: 100%; }
.research-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.research-details.hidden { display: none; }
@keyframes foldDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.research-flavor {
  color: var(--color-text-muted); font-style: italic;
  margin-bottom: var(--space-3); font-size: var(--font-size-xs);
}
.research-detail-label, .rc-section-label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: var(--space-2);
}
.research-detail-list { margin-bottom: var(--space-3); }
.research-detail-row {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin-bottom: var(--space-2);
}
.research-detail-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.3; }
.research-detail-text { display: flex; flex-direction: column; gap: 1px; }
.research-detail-head { display: flex; align-items: center; gap: var(--space-2); }
.research-detail-head strong { font-size: var(--font-size-xs); }
.research-detail-blurb { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.research-detail-meta { color: var(--color-text-secondary); font-size: var(--font-size-xs); margin-top: var(--space-1); }

/* ── Research-Complete celebration modal ── */
.rc-modal { max-width: 30rem; }
.rc-hero { text-align: center; padding: var(--space-2) 0 var(--space-4); }
.rc-burst {
  font-size: 2.75rem; line-height: 1;
  animation: rcPop 480ms var(--ease-back, ease);
  filter: drop-shadow(0 0 14px rgba(255, 210, 74, 0.55));
}
@keyframes rcPop {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  70% { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.rc-name {
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
  margin: var(--space-3) 0 var(--space-2);
}
.rc-branch { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }
.rc-flavor {
  margin-top: var(--space-3); color: var(--color-text-muted);
  font-style: italic; font-size: var(--font-size-sm);
}
.rc-stage-line { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.rc-stage-line strong { color: var(--color-accent-primary); font-size: var(--font-size-md); }
.rc-stage-pips { display: flex; justify-content: center; gap: 4px; margin-top: var(--space-2); }
.rc-pip {
  width: 22px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-bg-raised); border: 1px solid var(--color-border);
}
.rc-pip.filled { background: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.rc-stats { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.rc-stat-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-raised); border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.rc-stat-icon { font-size: 1rem; }
.rc-stat-label { font-weight: var(--font-weight-bold); }
.rc-stat-before { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rc-stat-arrow  { color: var(--color-text-muted); }
.rc-stat-after  { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.rc-stat-after.good { color: var(--color-ok); }
.rc-stat-after.bad  { color: var(--color-danger); }
.rc-unlocks { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.rc-more { flex: 1; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ── Discovery celebration modal (sector unlocked / asteroid discovered) ── */
/* Reuses the research-complete layout, but with a cool teal burst glow so a big
   territorial discovery reads differently from a research breakthrough. */
.disc-burst { filter: drop-shadow(0 0 16px rgba(74, 210, 200, 0.6)); }

/* ── Overlay panel (full-screen) ── */
.overlay-panel { display: flex; flex-direction: column; height: 100%; }
.overlay-header {
  flex: 0 0 auto;                       /* keep header height; never shrink under a tall body */
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-raised), transparent);
}
.overlay-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); flex: 1; }
.overlay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4); -webkit-overflow-scrolling: touch; }

/* ── Asteroid surface map overlay ── */
.surface-tier-chip {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--color-bg-card, var(--color-bg-raised));
  color: var(--color-accent-bright); border: 1px solid var(--color-border);
}
.surface-header { gap: var(--space-2); flex-wrap: wrap; }
.surface-count { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Districts: a TAB system showing one district at a time (swipe left/right on
 * touch, click tabs or ‹ › / arrow keys on desktop). One district fills the
 * stage and scrolls independently, so long lists never overlap each other. */
.surface-body { padding: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.surface-tabs {
  display: flex; gap: var(--space-1); align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto; scrollbar-width: thin; flex: 0 0 auto;
}
.surface-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-full);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
  font-size: var(--font-size-sm); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.surface-tab:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.surface-tab[aria-selected="true"] {
  background: var(--color-accent-primary); color: var(--color-text-inverse);
  border-color: var(--color-accent-primary); font-weight: var(--font-weight-bold);
}
.surface-tab .st-count {
  font-size: 0.65rem; padding: 0 6px; border-radius: var(--radius-full);
  background: rgba(0,0,0,0.22);
}
.surface-tab[aria-selected="false"] .st-count { background: var(--color-bg-void); }
.surface-nav-btn {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: var(--radius-full);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  color: var(--color-text-primary); cursor: pointer; font-size: 1rem; line-height: 1;
}
.surface-nav-btn:hover { background: var(--color-bg-hover); }

.surface-stage { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; touch-action: pan-y; }
.surface-district-view {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--space-4); animation: surfaceSlide var(--transition-base);
}
.surface-district-view.slide-left  { animation: surfaceSlideL var(--transition-base); }
.surface-district-view.slide-right { animation: surfaceSlideR var(--transition-base); }
@keyframes surfaceSlide  { from { opacity: 0; } to { opacity: 1; } }
@keyframes surfaceSlideL { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes surfaceSlideR { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
.sd-view-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--font-weight-bold); color: var(--color-accent-bright);
  margin-bottom: var(--space-3); font-size: var(--font-size-md);
}
.sd-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--space-2);
}
.sd-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--space-2) var(--space-1);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text-primary);
  cursor: pointer; text-align: center; min-width: 0;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.sd-tile:hover { transform: translateY(-2px); border-color: var(--color-accent-primary); background: var(--color-bg-hover); }
.sd-tile:active { transform: translateY(0); }
.sd-tile:focus-visible { outline: 2px solid var(--color-accent-secondary); outline-offset: 1px; }
.sd-tile-icon { font-size: 1.6rem; line-height: 1; }
.sd-tile-label {
  font-size: var(--font-size-xs); line-height: 1.2; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-tile-tag { font-size: 0.6rem; color: var(--color-text-muted); }
.sd-tag-deposit { color: var(--color-accent-secondary); }
.sd-empty {
  color: var(--color-text-dim); font-size: var(--font-size-xs); font-style: italic;
  padding: var(--space-2) 0;
}

/* ── Projects carousel (one project per screen; reuses .surface-* mechanics) ── */
/* The Projects overlay paints one project into #projects-view at a time. Cards
   inside a slide flow in a responsive grid so a single project fills the stage
   instead of stacking into a tall scroll. */
.projects-slide { max-width: 60rem; margin: 0 auto; }
.projects-slide .ps-blurb {
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
  line-height: 1.4; margin: 0 0 var(--space-4);
}
.projects-slide .ps-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-3);
}
/* Requirements checklist (shared across mega projects, stations, galaxy). */
.req-block {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3);
  margin: var(--space-3) 0;
}
.req-title {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--color-text-muted); margin: 0 0 var(--space-2);
}
.req-row {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--font-size-xs); line-height: 1.5;
}
.req-row .req-mark { flex: 0 0 auto; width: 1rem; text-align: center; }
.req-row.ok  { color: var(--color-ok); }
.req-row.ok  .req-label { color: var(--color-text-secondary); }
.req-row.no  { color: var(--color-text-muted); }
.req-row.no  .req-mark { color: var(--color-danger); }

/* ── District "+ Build" button + Build drawer ── */
.district-build-btn {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.sd-empty .district-build-btn { font-style: normal; margin-top: var(--space-2); }

.build-drawer { max-width: 36rem; }
.build-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-3);
}
.build-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text-primary);
  text-align: left; cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.build-card:not([disabled]):hover {
  transform: translateY(-2px);
  border-color: var(--color-accent-primary); background: var(--color-bg-hover);
}
.build-card:focus-visible { outline: 2px solid var(--color-accent-secondary); outline-offset: 1px; }
.bc-head { display: flex; align-items: center; gap: var(--space-2); }
.bc-icon { font-size: 1.4rem; line-height: 1; }
.bc-name { font-weight: var(--font-weight-bold); color: var(--color-accent-bright); }
.bc-desc {
  margin: 0; font-size: var(--font-size-xs); line-height: 1.35;
  color: var(--color-text-secondary);
}
.bc-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs); color: var(--color-text-muted);
}
.bc-foot { margin-top: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.bc-go { color: var(--color-ok); }
.bc-short { color: var(--color-warn); }
.bc-lock { color: var(--color-text-dim); }

/* Unaffordable: dim the cost so the shortfall reads at a glance (still clickable → tooltip). */
.build-card.bc-short .bc-cost { color: var(--color-danger); }
/* Locked: visibly inert. */
.build-card.bc-locked { opacity: 0.6; cursor: not-allowed; }

/* ── Rarity / tier / status colours ── */
.rarity-common { color: var(--color-text-secondary); }
.rarity-rare { color: var(--color-accent-secondary); }
.rarity-legendary { color: var(--color-accent-vip); text-shadow: 0 0 8px rgba(255,210,74,0.4); }
.tier-safe { color: var(--color-info); } .tier-dangerous { color: var(--color-warn); } .tier-ancient { color: var(--color-danger); }
.status-idle { color: var(--color-ok); } .status-working { color: var(--color-accent-secondary); }
.status-expedition { color: var(--color-accent-primary); } .status-injured { color: var(--color-danger); } .status-resting { color: var(--color-text-muted); }

/* ── Placeholder / spinner ── */
.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-10) var(--space-4); color: var(--color-text-muted); text-align: center; }
.placeholder-icon { font-size: 2.75rem; opacity: 0.5; animation: floaty 3s ease-in-out infinite; }
.placeholder-text { font-size: var(--font-size-sm); max-width: 22rem; }
.spinner { width: 1.5rem; height: 1.5rem; border: 3px solid var(--color-border); border-top-color: var(--color-accent-primary); border-radius: 50%; animation: spin 600ms linear infinite; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-bright); }

/* ── VIP upsell ── */
.vip-upsell-note {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255,210,74,0.1); border: 1px solid rgba(255,210,74,0.3);
  border-radius: var(--radius-md); font-size: var(--font-size-xs); color: var(--color-accent-vip);
  margin: var(--space-3) 0;
}

/* ── Loading screen ── */
#loading-screen {
  position: fixed; inset: 0;
  background: radial-gradient(800px 500px at 50% 30%, rgba(70,200,230,0.08), transparent 60%), var(--color-bg-void);
  z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6);
  transition: opacity 380ms ease;
}
#loading-screen.done { opacity: 0; pointer-events: none; }
#loading-screen .spinner { width: 2.75rem; height: 2.75rem; }
#loading-title {
  font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold);
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.04em; text-align: center; padding: 0 var(--space-4);
  animation: pulseGlow 2.4s ease-in-out infinite;
}
#loading-status { font-size: var(--font-size-sm); color: var(--color-text-muted); }
#loading-progress-wrap {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
#loading-progress { width: min(72vw, 22rem); }
#loading-progress-fill { transition: width 400ms ease; }
#loading-pct {
  font-size: var(--font-size-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
#loading-tip {
  max-width: min(84vw, 26rem); min-height: 2.8em;
  text-align: center; font-size: var(--font-size-sm); line-height: 1.4;
  color: var(--color-text-secondary); font-style: italic;
  padding: 0 var(--space-4);
  animation: fadeInUp 320ms ease;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes overlayIn { from { opacity: 0; transform: scale(0.99); } to { opacity: 1; transform: scale(1); } }
@keyframes toastPop { 0% { transform: translateY(16px) scale(0.9); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes navPop { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }
@keyframes numberPop { 0% { transform: scale(1); } 35% { transform: scale(1.28); color: var(--color-accent-bright); } 100% { transform: scale(1); } }
@keyframes badgePulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,93,108,0.5); } 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255,93,108,0); } }
@keyframes pulseGlow { 0%,100% { opacity: 0.85; filter: drop-shadow(0 0 6px rgba(255,178,62,0.4)); } 50% { opacity: 1; filter: drop-shadow(0 0 16px rgba(255,178,62,0.7)); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* Quest + dialog UX */
@keyframes avatarPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tdTextIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes questCardIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes questCompleteFlash { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes activeGlow {
  0%,100% { box-shadow: 0 0 0 1px var(--color-accent-primary), 0 0 10px -3px var(--color-accent-primary); }
  50%     { box-shadow: 0 0 0 1px var(--color-accent-bright), 0 0 18px -1px var(--color-accent-primary); }
}

/* Quest cards: gentle appear; active quest glows; completion flashes once. */
.quest-card { animation: questCardIn 280ms var(--transition-base) both; }
.quest-card.active {
  border-color: var(--color-accent-primary);
  animation: questCardIn 280ms var(--transition-base) both, activeGlow 2.6s ease-in-out infinite;
}
.quest-card.just-completed { animation: questCompleteFlash 600ms var(--ease-back); }

/* Build drawer: clear "✓ Built!" confirmation popout (prevents accidental double-build). */
.build-success-pop {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
  z-index: 9999; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-deep); border: 2px solid var(--color-ok);
  border-radius: var(--radius-lg); color: var(--color-text-primary);
  font-weight: var(--font-weight-bold); box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  pointer-events: none;
  animation: buildPop 320ms var(--ease-back) both, fadeOut 280ms ease 920ms both;
}
.bsp-check { color: var(--color-ok); font-size: 1.5rem; line-height: 1; }
@keyframes buildPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fadeOut { to { opacity: 0; } }

/* Buff-served confirmation popout (ale name + the stats it changed). */
.buff-served-pop {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 9999; display: flex; flex-direction: column; align-items: center;
  gap: var(--space-1); text-align: center; pointer-events: none;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-deep); border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-lg); color: var(--color-text-primary);
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  animation: buildPop 320ms var(--ease-back) both, fadeOut 320ms ease 1700ms both;
}
.bvp-title { font-weight: var(--font-weight-bold); }
.bvp-effects { font-size: var(--font-size-xs); color: var(--color-accent-bright); }
@media (prefers-reduced-motion: reduce) { .buff-served-pop { animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .quest-card, .quest-card.active, .quest-card.just-completed,
  .td-avatar, .td-text, .build-success-pop { animation: none !important; }
}

/* ============================================================
   MOBILE HUD compaction (< 880px) — prevent top-bar overflow
   ============================================================ */
@media (max-width: 879px) {
  #hud-bar { gap: var(--space-2); padding: 0 var(--space-2); }
  #hud-identity { flex-shrink: 0; }
  #hud-corp-name { display: none; }            /* long name overflows the bar */
  /* S7: phones get compact STATUS DOTS instead of nothing (the old
     display:none left mobile players with zero ambient Health/Meals/Ale
     signal — the "Colony panel" the old comment pointed at was retired).
     Same elements: statuses, click-throughs and worsening pulses all keep
     working; only the presentation shrinks. */
  #hud-wellbeing { display: flex; gap: 0.3rem; align-items: center; }
  #hud-wellbeing .wellbeing-pill {
    width: 0.65rem; height: 0.65rem; padding: 0;
    border-radius: 50%;
    font-size: 0;                    /* hide the text, keep the element */
    border: none;
    min-height: 0;
  }
  #hud-wellbeing .wellbeing-pill.status-ok     { background: var(--color-ok); }
  #hud-wellbeing .wellbeing-pill.status-warn   { background: var(--color-warn); }
  #hud-wellbeing .wellbeing-pill.status-danger { background: var(--color-danger); }
  #hud-resources { flex: 1 1 auto; min-width: 0; } /* shrink + scroll horizontally */
  #hud-controls { margin-left: auto; flex-shrink: 0; }
  /* Settings & Account are reachable from the "More" sheet on mobile */
  #hud-btn-settings, #hud-btn-account { display: none; }
}

/* ============================================================
   DESKTOP LAYOUT  (>= 880px) — restore 3-column rail/canvas/panel
   ============================================================ */
@media (min-width: 880px) {
  :root { --hud-height: 3.5rem; }

  #panel-root { bottom: var(--safe-bottom); }

  #main-layout {
    top: calc(var(--hud-height) + var(--ticker-height) + var(--safe-top)); left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: row;
  }

  /* Nav is the off-canvas hamburger drawer at ALL widths now (see base rules);
     no desktop left-rail override. #nav-rail is position:fixed, so it doesn't
     participate in this flex row — the map + panel are the only flex children. */

  #map-container { position: relative; flex: 1 1 auto; inset: auto; }

  /* Right side panel (not a sheet) */
  #panel-root {
    position: static; flex: 0 0 var(--panel-width); width: var(--panel-width);
    max-height: none; height: auto; bottom: auto;
    border-radius: 0; border-top: none; border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 30px rgba(0,0,0,0.3);
    transform: translateX(110%); transition: transform var(--transition-base);
  }
  #panel-root.open { transform: translateX(0); }
  #panel-root:not(.open) { display: none; }
  #panel-root::before { display: none; } /* no grab handle on desktop */

  #overlay-root { inset: calc(var(--hud-height) + var(--ticker-height) + var(--safe-top)) 0 var(--safe-bottom) 0; }

  #modal-root { align-items: center; }
  .modal { width: min(34rem, 92vw); border-radius: var(--radius-lg); animation: modalIn 200ms var(--ease-back); }
  @keyframes modalIn { from { transform: scale(0.94) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

  #toast-root { left: auto; right: var(--space-6); transform: none; bottom: var(--space-6); }

  .overlay-header { padding: var(--space-4) var(--space-6); }
  .overlay-body { padding: var(--space-6); }
  .overlay-title { font-size: var(--font-size-xl); }
}

/* Wider desktops: roomier panel */
@media (min-width: 1280px) {
  :root { --panel-width: 26rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
/* Inventory: dim zero-quantity rows */
.inv-zero { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #panel-root { transition: none; }
}

/* ============================================================
   BUFF PANEL  (panel id 'buffs')
   ============================================================ */
#buff-body { padding: var(--space-3); }

.buff-section-title { margin: var(--space-3) 0 var(--space-2); }
.buff-section-title:first-child { margin-top: 0; }

.buff-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.buff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.buff-row--modifier { background: var(--color-bg-raised); }

.buff-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.buff-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.buff-effect {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.buff-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-accent-bright);
  white-space: nowrap;
}

.buff-timer--static { color: var(--color-text-muted); }

.buff-dwarf-group { margin-bottom: var(--space-3); }

.buff-dwarf-name {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent-secondary);
}

.buff-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
}

.buff-empty-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   RIFTS — turn-based combat overlay + FXP skill tree
   ============================================================ */
.rift-overlay { position: absolute; inset: 0; }
.rift-scroll {
  position: absolute; inset: 0; overflow: auto; padding: var(--space-4);
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(70,200,230,0.06), transparent 60%),
    radial-gradient(800px 400px at 0% 110%, rgba(255,93,108,0.05), transparent 60%),
    var(--color-bg-void);
}
#rift-fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.rift-center { max-width: 560px; margin: 8vh auto; text-align: center; }
.rift-center .btn { margin-top: var(--space-4); }
.rift-stage { max-width: 700px; margin: 0 auto; }
.rift-stage-head { display: flex; justify-content: space-between; align-items: center; }
.rift-combat { max-width: 940px; margin: 0 auto; }

.rift-topbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--space-3); }
.rift-topbar h2 { margin: 0; color: var(--color-accent-primary); font-size: var(--font-size-lg); }
.rift-turnbar { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; justify-content: center; }
.rift-chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--color-bg-raised); border: 1px solid var(--color-border); font-size: 0.95rem; transition: transform var(--transition-fast); }
.rift-chip.enemy { border-color: var(--color-danger); }
.rift-chip.party { border-color: var(--color-accent-secondary); }
.rift-chip.cur { transform: scale(1.18); border-color: var(--color-accent-primary); box-shadow: var(--glow-primary); }

/* Battlefield: enemy fleet strip on top, player fleet below (JRPG convention —
   the player's ships sit next to the action bar / thumb zone on phones). */
.rift-battlefield { display: flex; flex-direction: column; gap: var(--space-3); }
.rift-side { border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-2); background: linear-gradient(180deg, rgba(70,200,230,0.05), transparent 70%); }
/* Enemy strip tints to the attacking race's signature color (set per faction
   below via --enemy-tint; falls back to Vorgon crimson). */
.rift-side.enemy { --enemy-tint: #ff5d6c; background: linear-gradient(180deg, color-mix(in srgb, var(--enemy-tint) 9%, transparent), transparent 70%); }
.rift-side.enemy .rift-side-title { color: var(--enemy-tint); }
.rift-side.enemy .rift-unit .combat-sprite { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 10px color-mix(in srgb, var(--enemy-tint) 35%, transparent)); }
.rift-side.enemy .rift-drone-label { color: color-mix(in srgb, var(--enemy-tint) 55%, #fff); }
.rift-side.enemy[data-faction="belcerebon"]    { --enemy-tint: #4fc3f7; }
.rift-side.enemy[data-faction="betelgeusian"]  { --enemy-tint: #ffb020; }
.rift-side.enemy[data-faction="golgafrinchan"] { --enemy-tint: #b56bff; }
.rift-side.enemy[data-faction="krikkit"]       { --enemy-tint: #dce9f8; }
.rift-side.enemy[data-faction="magrathean"]    { --enemy-tint: #4fe0d0; }
.rift-side.enemy[data-faction="santraginean"]  { --enemy-tint: #3ddc84; }
.rift-side-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.rift-side-title { font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-primary); }
.rift-side-title.enemy { color: var(--color-danger); }
.rift-side-count { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.rift-turn-chip { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--color-bg-void); background: var(--color-accent-primary); border-radius: var(--radius-full); padding: 1px 8px; box-shadow: var(--glow-primary); }
/* Capital ships: responsive grid that adds columns as the side grows. */
.rift-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); justify-items: stretch; }
/* Drone wings / swarms: compact grid that scales to dozens of wings. */
.rift-drone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; margin-top: var(--space-2); }
.rift-cap-grid:empty, .rift-drone-grid:empty { display: none; }

/* Units sit straight on the starfield — no tile. Selection / active turn is a
   border + glow only; grid cells size the cards now. */
.rift-unit { position: relative; background: none; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-1); text-align: center; min-width: 0; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); }
/* Battle-scene ship art: the focal point of each unit. Enemy ships mirror to
   face the player; the flip lives in the keyframe so the bob can't clobber it. */
.combat-sprite { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(70,200,230,0.25)); animation: riftBob 3.2s ease-in-out infinite; }
.rift-unit.enemy .combat-sprite { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(255,93,108,0.3)); animation-name: riftBobFlip; }
.rift-unit.dead .combat-sprite { animation: none; }
.rift-unit.enemy.dead .combat-sprite { transform: scaleX(-1); }
.rift-unit.dead { opacity: 0.3; filter: grayscale(0.6); }
.rift-unit.turn { border-color: var(--color-accent-primary); box-shadow: 0 0 14px rgba(255,178,62,0.55); animation: riftTurn 2s ease-in-out infinite; }
/* Animated caret above the active unit so the current actor pops at a glance. */
.rift-unit.turn::before { content: '▼'; position: absolute; top: -1.1em; left: 50%; transform: translateX(-50%); color: var(--color-accent-primary); font-size: var(--font-size-sm); text-shadow: var(--glow-primary); animation: riftCaret 1s ease-in-out infinite; z-index: 3; }
.rift-unit.cloaked { opacity: 0.55; }
.rift-unit.targetable { cursor: pointer; }
.rift-unit.targetable.enemy { border-color: var(--color-danger); box-shadow: 0 0 14px rgba(255,93,108,0.65); animation: riftTargetPulse 1s ease-in-out infinite; }
.rift-unit.targetable.ally { border-color: var(--color-ok); box-shadow: 0 0 14px rgba(61,220,132,0.65); animation: riftTargetPulse 1s ease-in-out infinite; }
/* During targeting, dim everything that isn't a valid target so choices pop. */
.rift-battlefield.targeting .rift-unit:not(.targetable) { opacity: 0.45; }
.rift-battlefield.targeting .rift-unit.dead { opacity: 0.2; }

/* ── Force fields: who's protected, and by what ─────────────────────────────
   A translucent energy bubble wraps the card. Cyan = an active damage shield
   (drains before hull); green = a wing is guarding this ship (intercepts the
   next blows); a dashed grey husk = shields shattered and suppressed. */
.rift-unit.shielded::after, .rift-unit.guarded::after, .rift-unit.shield-broken::after {
  content: ''; position: absolute; inset: -2px; border-radius: var(--radius-lg, 12px);
  pointer-events: none; z-index: 2;
}
.rift-unit.shielded::after {
  border: 1px solid rgba(79,195,247,0.65);
  background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(79,195,247,0.16), transparent 65%);
  box-shadow: 0 0 12px rgba(79,195,247,0.35), inset 0 0 18px rgba(79,195,247,0.18);
  animation: riftFieldPulse 2.4s ease-in-out infinite;
}
.rift-unit.guarded::after {
  border: 1px solid rgba(61,220,132,0.6);
  background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(61,220,132,0.13), transparent 65%);
  box-shadow: 0 0 12px rgba(61,220,132,0.3), inset 0 0 18px rgba(61,220,132,0.15);
  animation: riftFieldPulse 2.4s ease-in-out infinite;
}
.rift-unit.shield-broken::after {
  border: 1px dashed rgba(154,164,178,0.45);
  background: none; box-shadow: none;
}
/* Units drawing enemy fire (taunt) burn amber at the edges — "shoot me". */
.rift-unit.taunting { border-color: rgba(255,178,62,0.55); }
.rift-unit.taunting .combat-sprite { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(255,178,62,0.55)); }
/* The wing doing the guarding gets a small green shield tab so the pair reads. */
.rift-unit.guarding { border-color: rgba(61,220,132,0.5); }
.rift-unit.guarding .rift-drone-label::before { content: '🛡 '; }
.rift-unit-head { display: flex; justify-content: center; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--font-size-sm); flex-wrap: wrap; }
.rift-unit-head, .rift-count, .rift-pips, .rift-drone-label { text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.rift-count { color: var(--color-accent-primary); white-space: nowrap; }
.rift-count small { color: var(--color-text-muted); }
.rift-unit.enemy .rift-count { color: var(--color-danger); }
.rift-bar { position: relative; height: 13px; margin-top: 5px; background: rgba(8,12,20,0.72); border: 1px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.rift-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent-muted), var(--color-accent-primary)); transition: width var(--transition-base); }
.rift-bar.enemy > span { background: linear-gradient(90deg, #7a2630, var(--color-danger)); }
/* Numeric HP overlaid on the bar itself — readable at a glance, no separate line. */
.rift-bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-family-mono); font-size: 0.62rem; line-height: 1; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.95); pointer-events: none; }
.rift-bar.shield { height: 6px; margin-top: 3px; }
.rift-bar.shield > span { background: linear-gradient(90deg, #1f6f9c, #4fc3f7); }
.rift-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 16px; font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 3px; }
/* Status pips render as tiny chips so they read as UI, not emoji noise. */
.rift-pip { cursor: help; background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 0 5px; line-height: 1.35; white-space: nowrap; }

/* Drone wings / swarms: compact cards sized by their grid cell. */
.rift-unit.drone { padding: 2px; }
.rift-unit.drone .rift-bar { height: 5px; margin-top: 2px; }
.rift-unit.drone .rift-pips { min-height: 0; font-size: 0.68rem; line-height: 1.2; gap: 1px; }
.rift-unit.drone .rift-pip { padding: 0 3px; }
.rift-drone-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.rift-unit.enemy .rift-drone-label { color: #ffb3ba; }
/* Capital stat line (level · crew · atk) sits under the bar, above status pips. */
.rift-statline { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rift-empty { color: var(--color-text-muted); text-align: center; padding: var(--space-3) 0; }
.rift-unit.charging { animation: riftCharge 0.9s ease-in-out infinite; border-color: var(--color-warn, #f5b942); }
@keyframes riftCharge { 0%,100% { box-shadow: inset 0 0 0 2px rgba(245,185,66,0.25); } 50% { box-shadow: inset 0 0 0 2px rgba(245,185,66,0.8); } }
.rift-telegraph-banner { text-align: center; font-weight: 700; color: var(--color-warn, #f5b942); background: rgba(245,185,66,0.10); border: 1px solid rgba(245,185,66,0.4); border-radius: var(--radius-md); padding: var(--space-2); margin: var(--space-2) 0; animation: riftCharge 0.9s ease-in-out infinite; }

.rift-actionbar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); padding: var(--space-3); padding-bottom: max(var(--space-3), var(--safe-bottom)); background: var(--color-bg-panel); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-height: 48px; box-shadow: 0 -8px 20px rgba(0,0,0,0.35); }
.rift-turnlabel, .rift-prompt { color: var(--color-accent-bright); }
.rift-ability { position: relative; }
.rift-cd { margin-left: 4px; background: var(--color-danger); color: #fff; border-radius: var(--radius-full); padding: 0 6px; font-size: var(--font-size-xs); }
/* Base cooldown shown muted while the ability is ready (red = turns remaining). */
.rift-cd.ready { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); }
/* Stat line for the last hovered/tapped ability — its own row inside the flex actionbar. */
.rift-ability-hint { flex-basis: 100%; min-height: 1.1em; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.rift-telegraph-stats { font-weight: 400; font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.rift-log { margin-top: var(--space-3); max-height: 170px; overflow: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-family: var(--font-family-mono); background: var(--color-bg-deep); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); }
.rift-log div { padding: 1px 0; }
.rift-wave-banner { text-align: center; font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-accent-primary); text-shadow: var(--glow-primary); margin: var(--space-2) 0; animation: fadeInUp var(--transition-slow); }
.rift-fxp { color: var(--color-accent-vip); font-weight: 600; margin: var(--space-2) 0; }

.rift-float { position: absolute; transform: translate(-50%, 0); font-weight: 700; font-family: var(--font-family-mono); font-size: var(--font-size-md); pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.85); z-index: 6; animation: riftFloat 0.95s ease-out forwards; }
.rift-float.dmg { color: var(--color-danger); }
.rift-float.heal { color: var(--color-ok); }
.rift-float.crit { color: var(--color-accent-bright); font-size: var(--font-size-xl); }

/* ── Ability fire effects (live in #rift-fx-layer, never rebuilt by _render) ── */
/* Impact / muzzle burst over a unit when a hit lands or a ship fires. */
.rift-burst { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 7; font-size: var(--font-size-2xl); line-height: 1; filter: drop-shadow(0 0 10px rgba(255,140,40,0.9)); animation: riftBurst 0.65s ease-out forwards; }
.rift-burst.crit { font-size: 2.6rem; filter: drop-shadow(0 0 16px rgba(255,178,62,0.95)); }
.rift-burst.charge { filter: drop-shadow(0 0 12px rgba(245,185,66,0.95)); }
.rift-burst.support { filter: drop-shadow(0 0 12px rgba(61,220,132,0.9)); }
/* Laser beam: a gradient line rotated from caster to target (length/angle set
   inline via width + --angle). Bright bolt head rides the far end via ::after. */
.rift-beam { position: absolute; height: 3px; transform-origin: left center; transform: rotate(var(--angle, 0deg)); pointer-events: none; z-index: 7; border-radius: var(--radius-full); background: linear-gradient(90deg, transparent, rgba(255,140,40,0.35) 40%, rgba(255,178,62,0.95)); box-shadow: 0 0 8px rgba(255,140,40,0.8); animation: riftBeamFire 0.42s cubic-bezier(0.4, 0, 0.7, 1) forwards; }
.rift-beam::after { content: ''; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 10px 2px rgba(255,178,62,0.95); }
.rift-beam.support { background: linear-gradient(90deg, transparent, rgba(61,220,132,0.3) 40%, rgba(61,220,132,0.95)); box-shadow: 0 0 8px rgba(61,220,132,0.8); }
.rift-beam.support::after { background: #b8ffd9; box-shadow: 0 0 10px 2px rgba(61,220,132,0.95); }
/* Expanding shockwave ring at the point of impact. */
.rift-ring { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%) scale(0.2); pointer-events: none; z-index: 6; border: 2px solid rgba(255,178,62,0.9); border-radius: 50%; animation: riftRing 0.5s ease-out forwards; }
.rift-ring.support { border-color: rgba(61,220,132,0.9); }
/* Hit soaked by a force field: cyan ripple, reads as "the shield ate it". */
.rift-ring.shield { border-color: rgba(79,195,247,0.95); box-shadow: 0 0 10px rgba(79,195,247,0.6); }
/* Brief white flash on the card that just got hit. */
.rift-unit.hit-flash { animation: riftHitFlash 0.22s ease-out; }
/* Screen shake on crits. */
.rift-battlefield.shake { animation: riftShake 0.25s ease-in-out; }

/* Skill tree (in the Fleet & Rifts side panel) */
.skill-role { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-base); padding: var(--space-2); }
.skill-role-title { font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--space-2); }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.skill-branch-title { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 4px; }
.skill-node { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); margin-bottom: var(--space-2); }
.skill-node.owned { border-color: var(--color-ok); }
.skill-node.affordable { border-color: var(--color-accent-primary); }
.skill-node.locked { opacity: 0.6; }
.skill-name { font-weight: 600; font-size: var(--font-size-sm); }
.skill-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 2px 0; }
/* Generated stat chips (cooldown / duration / chance) under a talent's flavor text. */
.skill-stats { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.stat-chip { font-size: var(--font-size-xs); color: var(--color-text-secondary); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 0 6px; white-space: nowrap; }
.skill-foot { margin-top: 4px; }
.skill-owned { color: var(--color-ok); font-size: var(--font-size-xs); }
.skill-locked { color: var(--color-text-muted); font-size: var(--font-size-xs); }

@keyframes riftFloat {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  30%  { transform: translate(-50%, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(1); }
}
@keyframes riftTurn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,178,62,0); }
  50%      { box-shadow: 0 0 14px 1px rgba(255,178,62,0.5); }
}
@keyframes riftBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes riftBobFlip {
  0%, 100% { transform: translateY(0) scaleX(-1); }
  50%      { transform: translateY(-5px) scaleX(-1); }
}
@keyframes riftBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.35) rotate(6deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(0deg); }
}
@keyframes riftBeamFire {
  0%   { opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(0.1); }
  25%  { opacity: 1; transform: rotate(var(--angle, 0deg)) scaleX(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(1); }
}
@keyframes riftRing {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes riftHitFlash {
  0%   { background: rgba(255,255,255,0.55); }
  100% { background: transparent; }
}
@keyframes riftShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
}
@keyframes riftCaret {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -4px); }
}
@keyframes riftTargetPulse {
  0%, 100% { outline: 2px solid transparent; outline-offset: 1px; }
  50%      { outline: 2px solid currentColor; outline-offset: 1px; }
}
@keyframes riftFieldPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
@media (max-width: 879px) {
  .rift-scroll { padding: var(--space-2); }
  .rift-topbar h2 { font-size: var(--font-size-md); }
  /* Turn ribbon: bigger chips, one scrollable row instead of wrapping. */
  .rift-turnbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; flex-basis: 100%; order: 3; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .rift-chip { width: 32px; height: 32px; flex: 0 0 auto; font-size: 1.1rem; }
  /* Touch targets: cards and ability buttons comfortably tappable. */
  .rift-unit { min-height: 44px; }
  /* Denser capitals on phones: shorter sprite so more fleet fits on screen
     (the inline max-height:104px needs the !important to yield). */
  .rift-unit.capital .combat-sprite { max-height: 76px !important; }
  .rift-cap-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .rift-drone-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .rift-ability { min-height: 44px; }
  /* Log is secondary on phones — floats and banners carry the moment-to-moment. */
  .rift-log { max-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .combat-sprite { animation: none !important; }
  .rift-burst, .rift-beam, .rift-ring { animation-duration: 0.01ms !important; }
  .rift-unit.hit-flash, .rift-battlefield.shake, .rift-unit.turn::before, .rift-unit.targetable { animation: none !important; }
  .rift-unit.shielded::after, .rift-unit.guarded::after { animation: none !important; }
}

/* Capital-ship level badge (fleet roster cards). */
.cap-lvl {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent-vip);
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════
   EXPEDITIONS PANEL (panel id 'expeditions')
   ════════════════════════════════════════════════════════════════ */

/* Layout */
#exp-body { overflow-y: auto; flex: 1; padding: 0; }
.exp-tab-pad { padding: var(--space-3); }
.exp-section {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3);
}
.exp-section > .section-title:first-child { margin-top: 0; }
.exp-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.exp-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.exp-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.exp-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.exp-timer { font-variant-numeric: tabular-nums; }
.exp-montage { margin-left: auto; font-size: var(--font-size-xs); }
.exp-pill-xs { font-size: var(--font-size-xs); }

/* Active-tab expedition card */
.exp-card { margin: var(--space-3); }
.exp-card--flagged { border-color: var(--color-danger); }
.exp-card-body { display: flex; flex-direction: column; gap: var(--space-2); }
.exp-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }

/* Plan-New wizard: step indicator + footer */
.exp-steps { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.exp-step {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);
}
.exp-step-dot {
  width: 0.65rem; height: 0.65rem; border-radius: var(--radius-full);
  background: var(--color-bg-hover); border: 1px solid var(--color-border-bright); flex-shrink: 0;
}
.exp-step.clickable { cursor: pointer; }
.exp-step.clickable:hover { color: var(--color-text-secondary); }
.exp-step.active { color: var(--color-accent-bright); }
.exp-step.active .exp-step-dot { background: var(--color-accent-primary); border-color: transparent; box-shadow: var(--glow-primary); }
.exp-step.done { color: var(--color-text-secondary); }
.exp-step.done .exp-step-dot { background: var(--color-ok); border-color: transparent; }
.exp-step-line { flex: 1; height: 1px; background: var(--color-border); min-width: var(--space-2); }
.exp-wizard-footer {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; gap: var(--space-2);
  padding: var(--space-3); margin-top: var(--space-2);
  background: var(--color-bg-panel); border-top: 1px solid var(--color-border);
}
.exp-wizard-footer .btn { flex: 1; }

/* Plan-New squad picker (single scroller: full inline list, no inner scroll) */
.exp-squad-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); min-height: 2rem; align-items: center; margin-bottom: var(--space-2); }
.exp-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-bg-raised); border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-full); padding: 2px var(--space-1) 2px var(--space-2);
  font-size: var(--font-size-sm);
}
.exp-chip-x {
  background: none; border: none; cursor: pointer; color: var(--color-text-secondary);
  font-size: var(--font-size-sm); line-height: 1; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full); min-height: 1.5rem;
}
.exp-chip-x:hover { color: var(--color-danger); background: var(--color-danger-bg); }
.exp-squad-list { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.exp-squad-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); min-height: 2.75rem;
  border-bottom: 1px solid var(--color-border); cursor: pointer;
  transition: background var(--transition-fast);
}
.exp-squad-item:last-child { border-bottom: none; }
.exp-squad-item:hover { background: var(--color-bg-hover); }
.exp-squad-item.selected { background: var(--color-bg-raised); box-shadow: inset 3px 0 0 var(--color-accent-primary); }
.exp-squad-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.exp-squad-stats { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Launch-blocked reason (single presentation) */
.exp-launch-reason {
  display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3); background: var(--color-danger-bg);
  border: 1px solid var(--color-danger); border-radius: var(--radius-sm);
  color: var(--color-danger); font-size: var(--font-size-sm); line-height: 1.35;
}
.exp-launch-reason[hidden] { display: none; }

/* Live / Comms tab */
.exp-option--flagged { border-color: var(--color-warn); }
.exp-option--doctrine { border-color: var(--color-ok); }
.exp-combat { background: var(--color-danger-bg); border-color: var(--color-danger); }
.exp-flagged-note { background: var(--color-danger-bg); border-color: var(--color-danger); }
.exp-log-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.exp-log-row:last-child { border-bottom: none; }
.exp-squad-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.exp-squad-row:last-child { border-bottom: none; }
.exp-picker {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border);
}

/* Doctrines tab */
.exp-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.exp-doc-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); }

@media (max-width: 879px) {
  .exp-squad-item { min-height: 3rem; }
  .exp-wizard-footer { padding-bottom: calc(var(--space-3) + var(--safe-bottom)); }
  .exp-doc-grid { grid-template-columns: 1fr; }
}

/* ── Data & Climate consent gate (boot-time, blocking) ─────────────────────
   Shown by ui/panels/dataPolicyModal.js#ensurePolicyConsent before the game
   loads, until the player agrees. Sits above every other layer (toast-z 150). */
#policy-consent {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(8, 11, 20, 0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.policy-consent-card {
  display: flex; flex-direction: column;
  width: 100%; max-width: 46rem; max-height: 90vh;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.policy-consent-header {
  padding: var(--space-4);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
  border-bottom: 1px solid var(--color-border);
}
.policy-consent-body {
  padding: var(--space-4); overflow-y: auto; line-height: 1.6;
  color: var(--color-text-primary);
}
.policy-consent-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + var(--safe-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-raised);
}
.policy-consent-note { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-right: auto; }

/* ── Unit Overview modal (tap any combat unit, or an ℹ button out of fight) ── */
.unit-ov-backdrop { position: fixed; inset: 0; z-index: 0; }
.unit-ov { position: relative; z-index: 1; }
.unit-ov-hero { display: grid; place-items: center; padding: var(--space-2) 0; }
.unit-ov-sub { text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); text-transform: capitalize; margin-bottom: var(--space-3); }
.unit-ov-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.unit-ov-stat { display: flex; justify-content: space-between; gap: var(--space-2); padding: 6px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.unit-ov-stat span { color: var(--color-text-muted); }
.unit-ov-stat strong { font-family: var(--font-family-mono); color: var(--color-accent-primary); }
.unit-ov-section-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-secondary); margin: var(--space-3) 0 var(--space-2); }
.unit-ov-equip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.unit-ov-ability { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-2); background: rgba(255,255,255,0.02); }
.unit-ov-ability-name { font-weight: var(--font-weight-bold); }
.unit-ov-ability-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
.unit-ov-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.unit-ov-chip { font-size: var(--font-size-xs); font-family: var(--font-family-mono); padding: 2px 7px; border-radius: 999px; background: var(--color-bg-panel); border: 1px solid var(--color-border-bright); color: var(--color-text-primary); white-space: nowrap; }
.unit-ov-none { color: var(--color-text-muted); font-size: var(--font-size-sm); }
/* subtle tap-to-inspect affordance on combat unit cards */
.rift-unit.inspectable { cursor: pointer; }
.rift-unit.inspectable:hover { outline: 1px solid var(--color-border-bright); outline-offset: 2px; }

/* ── Tactical Combat Panel ────────────────────────────────────── */
.tactical-combat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tactical-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--color-bg-raised);
  border-bottom: 1px solid var(--color-border);
}

.tactical-header h2 {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin: 0;
}

.round-indicator {
  font-size: var(--font-size-sm);
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
}

.stakes-badge { color: var(--color-danger); }

/* Pre-combat stakes chooser: blocking overlay above the tactical board */
.stakes-chooser {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 5, 18, 0.82);
  backdrop-filter: blur(2px);
}

.stakes-dialog {
  max-width: 640px;
  width: calc(100% - 32px);
  padding: var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.stakes-dialog h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
}

.stakes-intro {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.stakes-options {
  display: flex;
  gap: var(--space-3);
}

.stakes-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: var(--color-text-primary);
  transition: border-color 0.15s, transform 0.15s;
}

.stakes-card:hover { border-color: var(--color-accent-secondary); transform: translateY(-2px); }
.stakes-card-danger:hover { border-color: var(--color-danger); }
.stakes-card-danger .stakes-card-title { color: var(--color-danger); }

.stakes-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.stakes-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .stakes-options { flex-direction: column; }
}

.tactical-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: var(--space-2);
  padding: var(--space-2);
}

.tactical-grid-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  overflow: hidden;
}

/* Letterbox viewport: the grid SVG scales to fit whatever space remains
   between the header and the pinned footer — no scrolling to see the board. */
#grid-container {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tactical-sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
}

.turn-queue-panel,
.unit-stats-panel,
.controls-panel,
.combat-log-panel {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.turn-queue-panel h3,
.unit-stats-panel h3,
.combat-log-panel h3 {
  font-size: var(--font-size-sm);
  color: var(--color-accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-1) 0;
  font-weight: var(--font-weight-bold);
}

.turn-queue-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.turn-queue-item {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-base);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}

.turn-queue-item.active {
  background: var(--color-accent-primary);
  color: var(--color-bg-void);
  font-weight: var(--font-weight-bold);
}

.turn-queue-item.dead {
  opacity: 0.4;
  text-decoration: line-through;
}

.unit-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
}

.stat-line {
  color: var(--color-text-secondary);
}

.stat-line strong {
  color: var(--color-text-primary);
}

.controls-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.controls-panel .btn {
  width: 100%;
  padding: var(--space-2);
  font-size: var(--font-size-sm);
}

.combat-log-panel {
  flex: 1;
  min-height: 150px;
  display: flex;
  flex-direction: column;
}

.combat-log {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  line-height: 1.4;
}

.combat-log div {
  padding: 2px 0;
  word-break: break-word;
}

/* Tactical grid SVG styling */
.tactical-grid {
  user-select: none;
  -webkit-user-select: none;
}

/* Pinned action footer: targeting hint + ability bar, always on screen */
.tactical-footer {
  flex-shrink: 0;
  padding: var(--space-2);
  background: var(--color-bg-raised);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 var(--space-2) var(--space-2);
}

.ability-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.ability-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 72px;
  min-height: 56px;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ability-btn:hover:not(:disabled) { background: var(--color-bg-hover); }
.ability-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ability-btn.pending {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-hover);
  box-shadow: 0 0 0 2px var(--color-accent-primary);
}
.ability-icon { font-size: 1.2em; line-height: 1; }
.ability-name { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-align: center; }
.ability-cost { font-size: var(--font-size-xs); color: var(--color-accent-secondary); font-family: var(--font-family-mono); }
.ability-bar-note { font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-2); }

/* Targeting hint strip (sits above the ability bar in the footer) */
.targeting-hint {
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-danger-bg, rgba(255,68,68,0.12));
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.targeting-hint[hidden] { display: none; }

/* Armoury forge modal */
.armoury-tier { margin-bottom: var(--space-3); }
.armoury-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.armoury-item.locked { opacity: 0.55; }
.armoury-item-main { flex: 1; min-width: 0; }
.armoury-item-name { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.armoury-item-stats { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }
.armoury-item-special { font-size: var(--font-size-xs); color: var(--color-accent-secondary); margin-top: 2px; }
.armoury-item-cost { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-mono); margin-top: 2px; }
.armoury-item-action { flex-shrink: 0; }
@media (max-width: 600px) {
  .armoury-item { flex-direction: column; align-items: stretch; }
  .armoury-item-action { align-self: flex-end; }
}

/* Talent tree modal */
.talent-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.talent-tree-modal .skill-grid { align-items: start; }

/* Responsive: tablet and mobile stack vertically */
@media (max-width: 1200px) {
  .tactical-layout {
    flex-direction: column;
  }

  .tactical-sidebar {
    width: 100%;
    max-height: 200px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .turn-queue-panel,
  .unit-stats-panel,
  .controls-panel,
  .combat-log-panel {
    flex: 1;
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  .tactical-combat-panel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    border-radius: 0;
  }

  .tactical-layout {
    padding: var(--space-1);
  }

  .tactical-sidebar {
    width: 100%;
    max-height: 150px;
  }
}