/* ============================================================
   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.
   ============================================================ */

/* ── 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 — clean deep-navy, lighter & friendlier than before */
  --color-bg-void:    #0f1320;
  --color-bg-deep:    #161b2e;
  --color-bg-base:    #1c2238;
  --color-bg-raised:  #232b45;
  --color-bg-panel:   #283254;
  --color-bg-card:    #2e3a5e;
  --color-bg-hover:   #3a4773;

  /* Accent — warm dwarven amber + bright complements (colourful, playful) */
  --color-accent-primary:   #ffb23e;   /* amber/gold */
  --color-accent-bright:    #ffc869;   /* highlight */
  --color-accent-muted:     #b97e2c;   /* subdued */
  --color-accent-secondary: #46c8e6;   /* bright cyan for tech/info/VIP chrome */
  --color-accent-vip:       #ffd24a;   /* gold for VIP */
  --color-accent-purple:    #9b7bff;   /* for variety / discovery */

  /* Status colours */
  --color-ok:          #3ddc84;
  --color-ok-bg:       rgba(61, 220, 132, 0.16);
  --color-warn:        #ffc24b;
  --color-warn-bg:     rgba(255, 194, 75, 0.16);
  --color-danger:      #ff5d6c;
  --color-danger-bg:   rgba(255, 93, 108, 0.16);
  --color-info:        #46c8e6;
  --color-info-bg:     rgba(70, 200, 230, 0.16);

  /* Text */
  --color-text-primary:   #eef3fb;
  --color-text-secondary: #a7b4cf;
  --color-text-muted:     #6f7fa3;
  --color-text-dim:       #46537a;
  --color-text-inverse:   #1a1205;

  /* Borders */
  --color-border:        #34406a;
  --color-border-bright: #4a5891;
  --color-border-focus:  var(--color-accent-secondary);

  /* Gradients & glows (additive tokens) */
  --grad-primary: linear-gradient(135deg, #ffc869 0%, #ff9d2e 100%);
  --grad-cyan:    linear-gradient(135deg, #5fe0f6 0%, #2f9fd8 100%);
  --grad-ok:      linear-gradient(135deg, #5df0a0 0%, #28b56a 100%);
  --grad-card:    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%);
  --glow-primary: 0 0 16px rgba(255,178,62,0.45);
  --glow-cyan:    0 0 16px rgba(70,200,230,0.45);

  /* 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;
  --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-height:    4rem;     /* mobile bottom bar */
  --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;
  --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);
}

/* ── Base typography ────────────────────────────────────────── */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(70,200,230,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,178,62,0.06), transparent 60%),
    var(--color-bg-void);
  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); }
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;
  height: var(--hud-height);
  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: 0 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)); 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)); 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; }

.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); }
.nav-item.nav-overflow { display: flex; }   /* drawer shows every item */
.nav-item.nav-more     { display: none; }    /* legacy More button retired */

/* ── 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;
  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;
}
#panel-root.open { transform: translateY(0); }
/* 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)) 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; }

/* ── More sheet (mobile nav overflow) ── */
#nav-more-sheet {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-height) + var(--safe-bottom));
  z-index: var(--sheet-z);
  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);
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + var(--safe-bottom));
  transform: translateY(110%);
  transition: transform var(--transition-slow);
}
#nav-more-sheet.open { transform: translateY(0); }
#nav-more-sheet[hidden] { display: block; }
.more-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.more-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-3) var(--space-1);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-secondary);
  font-size: var(--font-size-xs); text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.more-item:active { transform: scale(0.94); }
.more-item:hover { border-color: var(--color-border-bright); background: var(--color-bg-hover); color: var(--color-text-primary); }
.more-item .more-icon { font-size: 1.6rem; line-height: 1; }
.more-item.locked { opacity: 0.4; }
.more-sheet-title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); }

/* ── 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; }
.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);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover { border-color: var(--color-border-bright); }
.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); }

/* ── 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: var(--hud-height);
  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-resource { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; flex-shrink: 0; color: var(--color-text-secondary); }
.hud-resource-label { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.hud-resource-value { color: var(--color-text-primary); font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); transition: color var(--transition-fast); }
.hud-resource-value.bump { animation: numberPop 360ms var(--ease-back); }
.hud-resource-rate { font-size: var(--font-size-xs); color: var(--color-ok); }
.hud-resource-rate.negative { color: var(--color-danger); }
.hud-resource-cap { color: var(--color-text-muted); font-size: var(--font-size-xs); }

#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; }
.td-speaker {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.td-portrait {
  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);
}
.td-nameplate { display: flex; flex-direction: column; 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;
  color: var(--color-text-primary); margin: 0;
  min-height: 3.2em;
}
.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);
}

/* ── 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); }

/* ── 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;
}
.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); }

/* ── 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;
}

/* ── 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);
}
#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); }

/* ============================================================
   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); } }

/* ============================================================
   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 */
  #hud-wellbeing { display: none; }            /* shown on the Colony panel instead */
  #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; }

  #main-layout {
    top: calc(var(--hud-height) + var(--ticker-height)); 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)) 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; } }

  #nav-more-sheet { display: none !important; }

  #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);
}