/* ==========================================================================
   Bee Hive Game — Stitch "Hex Colony Interface" Design System
   Tactile Warm-Wood & Honeycomb UI Theme
   ========================================================================== */

:root {
  --beehive-css-rev: "20261027-r4";
  --bg-deep: #19120c;
  --bg-chitin: #1f1710;
  --bg-panel: #261e17;
  --bg-card: #2c2219;
  --bg-inset: #130e09;
  --border-amber: #5c4938;
  --border-bright: #a8845e;
  --bevel-shadow: #0f0a06;
  --amber-primary: #d97707;
  --amber-deep: #b45309;
  --gold-bright: #eab308;
  --text-light: #fdf6e2;
  --text-muted: #d1bfa7;
  --emerald-ok: #10b981;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-top, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--safe-area-right, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--safe-area-left, 0px));
}

/* iOS WebKit Standalone PWA Safe-Area Calibration:
   - Clears iOS 18/26 Dynamic Island & status-bar blur curtain (min 54px top inset in portrait)
   - Trims excessive 34px bottom home-indicator dead zone down to a sleek 6px cushion so the dock hugs the bottom edge */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767.98px) and (orientation: portrait) {
    :root {
      --safe-top: max(calc(env(safe-area-inset-top, 0px) + 6px), 54px, var(--safe-area-top, 0px));
      --safe-bottom: max(min(env(safe-area-inset-bottom, 0px), 6px), var(--safe-area-bottom, 0px));
    }
  }

  @media (max-height: 500px) and (orientation: landscape) {
    :root {
      --safe-bottom: max(min(env(safe-area-inset-bottom, 0px), 6px), var(--safe-area-bottom, 0px));
    }
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background-color: var(--bg-deep);
  color: var(--text-light);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.game-active {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #0b131b;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body.subpage-body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: auto;
  touch-action: auto;
  background: radial-gradient(circle at 50% 0%, rgba(217, 119, 7, 0.16) 0%, var(--bg-deep) 65%);
}

.pixel-img {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Tactile Beveled Window Chrome */
.tactile-panel {
  background: var(--bg-panel);
  border: 2px solid var(--border-amber);
  border-radius: 8px;
  box-shadow:
    inset 2px 2px 0 rgba(255, 228, 175, 0.16),
    inset -2px -2px 0 rgba(10, 7, 4, 0.88),
    0 12px 32px rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   Primary Edge-to-Edge Game Canvas (Full Bleed Across Safe Areas)
   Uses inset:0 + width/height:100% rather than 100vh/100dvh to avoid the
   iOS standalone WebKit bug where 100vh/100dvh is 59px shorter than screen.height.
   ========================================================================== */
canvas#game-canvas {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 1;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  overscroll-behavior: none;
  touch-action: none;
  outline: none;
  border: none;
  background-color: #0b131b;
}

canvas#game-canvas.is-space-down {
  cursor: grab !important;
}

canvas#game-canvas.is-space-panning {
  cursor: grabbing !important;
}

body.is-space-panning,
body.is-space-panning canvas#game-canvas {
  cursor: grab !important;
}

body.is-space-dragging,
body.is-space-dragging canvas#game-canvas {
  cursor: grabbing !important;
}

/* ==========================================================================
   In-Game Floating Tactile Chrome Bar (Top-Left Below Resource HUD)
   ========================================================================== */
.in-game-chrome {
  position: fixed;
  top: var(--hud-top-offset, calc(var(--safe-top, 0px) + 52px));
  left: max(10px, calc(var(--safe-left, 0px) + 10px));
  z-index: 34;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

@media (max-width: 767.98px), (max-height: 500px) {
  .in-game-chrome {
    top: var(--hud-top-offset, calc(var(--safe-top, 0px) + 66px));
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    gap: 4px;
  }

  .in-game-chrome .chrome-pill {
    padding: 3px 7px;
    font-size: 10px;
  }
}

body.game-active .in-game-chrome {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Responsive HTML Touch & Mobile Quick Controls Bar
   ========================================================================== */
.html-mobile-controls {
  position: fixed;
  top: calc(var(--hud-top-offset, calc(var(--safe-top, 0px) + 52px)) + 32px);
  left: max(10px, calc(var(--safe-left, 0px) + 10px));
  z-index: 38;
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}

body.game-active.show-html-pad .html-mobile-controls {
  display: flex;
}

.mobile-pad-cluster {
  display: grid;
  grid-template-columns: repeat(3, minmax(40px, auto));
  gap: 5px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(25, 18, 12, 0.94);
  border: 2px solid var(--border-amber);
  box-shadow:
    inset 1px 1px 0 rgba(255, 228, 175, 0.14),
    inset -1px -1px 0 rgba(0, 0, 0, 0.85),
    0 6px 16px rgba(0, 0, 0, 0.65);
}

.touch-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.1;
  background: #33271d;
  color: var(--gold-bright);
  border: 2px solid var(--border-amber);
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow:
    inset 1px 1px 0 rgba(255, 232, 185, 0.2),
    inset -1px -1px 0 rgba(10, 7, 4, 0.85);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.touch-btn:active,
.touch-btn:hover {
  background: #473627;
  border-color: var(--gold-bright);
}

.chrome-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.1;
  background: rgba(38, 30, 23, 0.94);
  color: var(--text-light);
  border: 2px solid var(--border-amber);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 230, 180, 0.22),
    inset -1px -1px 0 rgba(10, 7, 4, 0.9),
    0 4px 10px rgba(0, 0, 0, 0.55);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.chrome-pill:focus-visible,
.touch-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
}

.chrome-pill:hover {
  background: #3a2d21;
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-1px);
}

.chrome-pill:active {
  transform: translateY(1px);
}

.chrome-pill-subtle {
  color: var(--text-muted);
}

.chrome-pill-update {
  background: linear-gradient(180deg, #1b4d3e 0%, #103329 100%);
  border-color: var(--emerald-ok);
  color: #a7f3d0;
  box-shadow:
    inset 1px 1px 0 rgba(167, 243, 208, 0.35),
    0 0 12px rgba(16, 185, 129, 0.45);
}

.chrome-pill-update:hover {
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  border-color: #6ee7b7;
  color: #ffffff;
}

/* ==========================================================================
   Tactile Loading Screen Overlay (Shown Only on /play Game Sub-Route)
   ========================================================================== */
#loading-screen,
#loading,
.loading-screen {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: var(--safe-top, 0px) var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px);
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(circle at center, rgba(217, 119, 7, 0.18) 0%, rgba(25, 18, 12, 0.98) 70%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

body.game-active #loading-screen:not(.loaded):not(.hidden),
body.game-active #loading:not(.loaded):not(.hidden),
body.game-active .loading-screen:not(.loaded):not(.hidden) {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#loading-screen.loaded,
#loading.hidden,
.loading-screen.loaded,
.loading-screen.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 460px;
  padding: 28px 32px;
}

.hex-spinner {
  width: 88px;
  height: 88px;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-spinner svg {
  width: 100%;
  height: 100%;
  animation: hex-spin 4s linear infinite;
}

.hex-spinner-pulse {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.65) 0%, rgba(217, 119, 7, 0) 70%);
  animation: amber-pulse 1.8s ease-in-out infinite alternate;
}

@keyframes hex-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes amber-pulse {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1.3); opacity: 0.9; }
}

.loader-title,
.loading-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #000;
  margin-bottom: 4px;
}

.loader-subtitle,
.loading-subtitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber-primary);
  margin-bottom: 20px;
}

.progress-bar-container {
  width: 260px;
  height: 10px;
  background-color: var(--bg-inset);
  border: 2px solid var(--border-amber);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.85);
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, #b45309 0%, #d97707 50%, #eab308 100%);
  border-radius: 2px;
  animation: progress-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes progress-shimmer {
  0% { left: -45%; }
  100% { left: 100%; }
}

.loader-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

/* ==========================================================================
   Studio Marketing Landing Overlay (Stitch Hex Colony Interface)
   ========================================================================== */
.landing-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  background-color: rgba(25, 18, 12, 0.92);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(217, 119, 7, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 82% 24%, rgba(234, 179, 8, 0.1) 0%, transparent 50%),
    linear-gradient(rgba(92, 73, 56, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 73, 56, 0.08) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  backdrop-filter: blur(7px);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.landing-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Sticky Top Navigation */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(25, 18, 12, 0.94);
  border-bottom: 2px solid var(--border-amber);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
}

.site-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-light);
}

.brand-icon {
  border-radius: 6px;
  border: 2px solid var(--border-amber);
  background: var(--bg-inset);
}

.brand-name {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #000;
}

.brand-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border-amber);
  color: var(--amber-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-links a:not(.btn-nav-cta),
.btn-nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav-links a:not(.btn-nav-cta):hover,
.nav-links a[aria-current="page"],
.btn-nav-link:hover {
  color: var(--gold-bright);
}

.btn-nav-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  color: #19120c !important;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--amber-primary) 100%);
  border: 2px solid #fef08a;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset -1px -1px 0 rgba(120, 53, 15, 0.85),
    0 4px 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn-nav-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Main Container */
.landing-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* Hero Section */
.hero-section {
  padding: 48px 0 44px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 36px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border-amber);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--gold-bright);
  margin-bottom: 16px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-primary);
  box-shadow: 0 0 8px var(--amber-primary);
}

.status-dot.is-ready {
  background: var(--emerald-ok);
  box-shadow: 0 0 10px var(--emerald-ok);
}

.hero-title {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.07;
  font-weight: 900;
  margin: 0 0 16px;
  letter-spacing: -0.6px;
}

.text-gradient {
  background: linear-gradient(92deg, #fde047 0%, #eab308 50%, #d97707 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: 16.5px;
  line-height: 1.64;
  color: var(--text-muted);
  margin: 0 0 26px;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.btn-primary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #eab308 0%, #d97707 100%);
  color: #19120c;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid #fef08a;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.45),
    inset -2px -2px 0 rgba(120, 53, 15, 0.85),
    0 6px 20px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.btn-hero-play span {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.btn-hero-play strong {
  font-size: 16.5px;
  line-height: 1.2;
}

.btn-hero-play small {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.85;
}

.btn-secondary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 6px;
  background: #3d332b;
  color: var(--text-light);
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--border-amber);
  box-shadow:
    inset 2px 2px 0 rgba(255, 228, 175, 0.18),
    inset -2px -2px 0 rgba(10, 7, 4, 0.85),
    0 4px 12px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.btn-secondary:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-1px);
}

.hero-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-muted);
}

.hero-trust-list li::before {
  content: "◆ ";
  color: var(--gold-bright);
}

/* Hero Showcase Frame */
.showcase-frame {
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.showcase-frame:hover {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
}

.showcase-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--bg-inset);
  border-bottom: 2px solid var(--border-amber);
  font-size: 12px;
}

.window-dots {
  display: inline-flex;
  gap: 6px;
}

.window-dots i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--amber-primary);
  border: 1px solid var(--gold-bright);
  display: inline-block;
}

.showcase-url {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.showcase-tag {
  font-size: 10px;
  font-weight: 900;
  color: #19120c;
  background: var(--gold-bright);
  padding: 2px 7px;
  border-radius: 3px;
}

.showcase-media {
  position: relative;
  aspect-ratio: 1200 / 630;
  background: var(--bg-inset);
  overflow: hidden;
}

.showcase-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-hover-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(25, 18, 12, 0.35) 0%, rgba(25, 18, 12, 0.72) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.showcase-frame:hover .showcase-hover-cta {
  opacity: 1;
}

.pulse-play-btn {
  padding: 12px 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--gold-bright), var(--amber-primary));
  color: #19120c;
  border: 2px solid #fef08a;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.showcase-telemetry-bar {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-inset);
  border-top: 2px solid var(--border-amber);
  flex-wrap: wrap;
}

.telemetry-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
}

/* ==========================================================================
   Content Sections & Deferred Rendering Optimization
   ========================================================================== */
.section-block {
  padding: 50px 0;
  border-top: 2px solid rgba(92, 73, 56, 0.45);
}

.deferred-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

.section-header {
  max-width: 740px;
  margin: 0 auto 34px;
  text-align: center;
}

.section-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.section-header h2 {
  font-size: clamp(24px, 3vw, 35px);
  margin: 0 0 10px;
  color: var(--text-light);
  font-weight: 900;
}

.section-header p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-muted);
  margin: 0;
}

/* 3 Illustrated Deep-Dive Cards */
.feature-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}

.feature-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feature-card-media {
  aspect-ratio: 800 / 500;
  background: var(--bg-inset);
  border-bottom: 2px solid var(--border-amber);
  overflow: hidden;
}

.feature-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-card-media img {
  transform: scale(1.03);
}

.feature-card-body {
  padding: 20px;
}

.pillar-tag {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gold-bright);
  background: var(--bg-inset);
  border: 1px solid var(--border-amber);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.feature-card-body h3 {
  font-size: 19px;
  margin: 0 0 8px;
}

.feature-card-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Factory Comb Cells Grid */
.factory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.cell-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  align-items: flex-start;
}

.cell-card-highlight {
  border-color: var(--gold-bright);
}

.cell-icon {
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--bg-inset);
  padding: 4px;
  border: 2px solid var(--border-amber);
}

.cell-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.cell-title-row h3 {
  font-size: 15.5px;
  margin: 0;
}

.cell-cost {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--amber-primary);
  margin-bottom: 6px;
}

.cell-info p {
  font-size: 13px;
  line-height: 1.52;
  color: var(--text-muted);
  margin: 0;
}

kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-bright);
  background: var(--bg-inset);
  border: 1px solid var(--border-amber);
  border-bottom-width: 3px;
  border-radius: 4px;
}

/* Swarm Castes & Threats */
.castes-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.caste-column {
  padding: 24px;
}

.column-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 20px;
  color: var(--gold-bright);
}

.role-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.56;
  color: var(--text-muted);
}

.role-list strong {
  color: var(--text-light);
}

.resource-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-amber);
}

.res-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border-amber);
  font-size: 12px;
  font-weight: 700;
}

/* 4 Seasons Grid */
.seasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.season-card {
  padding: 20px;
}

.season-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.season-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.season-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Controls & FAQ */
.controls-faq-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.controls-panel,
.faq-panel {
  padding: 24px;
}

.controls-panel h2,
.faq-panel h2 {
  margin: 0 0 16px;
  font-size: 23px;
}

.controls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.controls-table th,
.controls-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(92, 73, 56, 0.5);
  overflow-wrap: anywhere;
}

.controls-table th {
  color: var(--gold-bright);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.controls-table td {
  color: var(--text-muted);
}

@media (max-width: 680px) {
  .controls-panel,
  .faq-panel,
  .caste-column {
    padding: 16px;
  }

  .controls-table,
  .controls-table tbody {
    display: block;
    width: 100%;
  }

  .controls-table thead {
    display: none;
  }

  .controls-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(92, 73, 56, 0.5);
  }

  .controls-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: 12.5px;
  }

  .controls-table td:first-child {
    flex: 1 1 auto;
    color: var(--text-light);
    font-weight: 700;
  }

  .controls-table td:last-child {
    flex: 1 1 100%;
  }
}

.faq-item {
  border-bottom: 1px solid rgba(92, 73, 56, 0.5);
  padding: 12px 0;
}

.faq-item summary {
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  color: var(--text-light);
}

.faq-item p {
  margin: 10px 0 4px;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--text-muted);
}

/* Bottom Conversion CTA Banner */
.bottom-cta-banner {
  margin-top: 32px;
  padding: 40px 28px;
  text-align: center;
  border-color: var(--gold-bright);
}

.bottom-cta-inner h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 10px;
}

.bottom-cta-inner p {
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 16px;
}

/* Footer */
.site-footer {
  background: #120d09;
  border-top: 2px solid var(--border-amber);
  padding: 44px 24px;
}

.site-footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 28px;
}

.footer-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 12px 0;
  max-width: 340px;
}

.footer-copy {
  font-size: 12px;
  color: #9ca3af;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col h3,
.footer-col h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-bright);
}

.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--gold-bright);
}

/* ==========================================================================
   Light-Dismiss Field Manual & Settings Dialogs (<dialog closedby="any">)
   ========================================================================== */
dialog.hive-dialog {
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--bg-panel);
  color: var(--text-light);
  border: 2px solid var(--gold-bright);
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.88);
}

dialog.hive-dialog:modal {
  overscroll-behavior: contain;
}

dialog.hive-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  overflow: hidden;
  overscroll-behavior: contain;
}

.settings-form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border-amber);
}

.setting-header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.setting-version-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.setting-version-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.16);
  color: var(--gold-bright);
  border: 1px solid var(--gold-bright);
}

.setting-status-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #261e17;
  color: var(--text-muted);
  border: 1px solid var(--border-amber);
}

.setting-status-badge.is-granted,
.setting-status-badge[data-status="granted"],
.setting-status-badge[data-mode="standalone"] {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: var(--emerald-ok);
}

.setting-status-badge[data-status="paused"] {
  background: rgba(234, 179, 8, 0.16);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.setting-status-badge.is-denied,
.setting-status-badge[data-status="denied"] {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: #ef4444;
}

.setting-update-status {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 4px;
  padding: 7px 10px;
}

.setting-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.setting-update-cta {
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
}

.setting-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.setting-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-light);
  padding: 6px 8px;
  border-radius: 4px;
  background: #1f1710;
  border: 1px solid rgba(92, 73, 56, 0.65);
  cursor: pointer;
}

.setting-checkbox-label input[type="checkbox"] {
  accent-color: var(--gold-bright);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.setting-label-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.setting-label-group small {
  font-size: 12.5px;
  color: var(--text-muted);
}

.setting-select {
  appearance: none;
  width: 100%;
  padding: 10px 14px;
  border-radius: 4px;
  background: #261e17;
  color: var(--gold-bright);
  border: 2px solid var(--border-amber);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.settings-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.dialog-inner {
  padding: 24px;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--border-amber);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.dialog-header h2 {
  margin: 0;
  font-size: 22px;
}

.dialog-close-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-inset);
  color: var(--gold-bright);
  border: 2px solid var(--border-amber);
  width: 34px;
  height: 34px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.dialog-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.dialog-cols h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--gold-bright);
}

.manual-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.dialog-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid var(--border-amber);
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
  .hero-grid,
  .controls-faq-grid,
  .site-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .site-nav-inner {
    padding: 8px max(12px, calc(var(--safe-right, 0px) + 12px)) 8px max(12px, calc(var(--safe-left, 0px) + 12px));
    gap: 8px;
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  .nav-links {
    width: 100%;
    gap: 6px 10px;
    justify-content: flex-start;
  }

  .nav-links a:not(.btn-nav-cta),
  .btn-nav-link {
    font-size: 12px;
    padding: 2px 0;
  }

  .btn-nav-cta {
    padding: 5px 10px;
    font-size: 12px;
    margin-left: auto;
  }

  .landing-main {
    padding: 0 max(14px, calc(var(--safe-right, 0px) + 14px)) calc(44px + var(--safe-bottom, 0px)) max(14px, calc(var(--safe-left, 0px) + 14px));
  }

  .hero-section {
    padding: 24px 0 28px;
  }

  dialog.hive-dialog {
    width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-height: calc(100dvh - 16px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
    overflow-x: hidden;
  }

  .dialog-inner {
    padding: 14px;
  }

  .dialog-header h2 {
    font-size: 17px;
  }
}

/* ==========================================================================
   9-Slice Beveled Floating Window Manager & HUD
   ========================================================================== */
#hive-hud-root {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body.game-active #hive-hud-root {
  opacity: 1;
  visibility: visible;
}

.hive-ios-status-shield {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top, 0px);
  background: #19120c;
  z-index: 36;
  pointer-events: none;
  transform: translateZ(0);
}

#hive-hud-root[data-menu-state="start_screen"] .hive-ios-status-shield {
  display: none !important;
}

.hive-bevel-outset {
  background: #3d3126;
  border-top: 2px solid #9e8468;
  border-left: 2px solid #9e8468;
  border-right: 2px solid #17110b;
  border-bottom: 2px solid #17110b;
  box-shadow:
    inset 1px 1px 0 rgba(255, 236, 200, 0.25),
    inset -1px -1px 0 rgba(0, 0, 0, 0.75),
    0 6px 18px rgba(0, 0, 0, 0.65);
}

.hive-bevel-inset {
  background: #17120d;
  border-top: 2px solid #0d0906;
  border-left: 2px solid #0d0906;
  border-right: 2px solid #6e5944;
  border-bottom: 2px solid #6e5944;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.85);
}

/* Top RCT2 Menubar */
.hive-menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  overflow-x: hidden;
  min-height: 44px;
  padding: max(4px, calc(var(--safe-top, 0px) + 4px)) max(8px, calc(var(--safe-right, 0px) + 8px)) 4px max(8px, calc(var(--safe-left, 0px) + 8px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: auto;
  z-index: 35;
  transform: translateZ(0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hive-res-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.hive-res-pod {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  height: 28px;
  font-size: 11.5px;
}

.hive-res-icon-img {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.hive-res-label {
  color: #cbb59b;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
}

.hive-res-val {
  font-weight: 900;
  font-size: 12px;
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hive-btn.hive-res-more-btn,
.hive-res-more-btn {
  display: none;
  height: 28px;
  padding: 2px 7px;
  font-size: 10.5px;
}

/* Season & Ambient Temp Pod */
.hive-season-pod {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 3px 10px;
  min-width: 138px;
  height: 30px;
}

.hive-season-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  min-width: 0;
  line-height: 1;
}

.hive-season-name {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-season-temp {
  color: #fff3d6;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

.hive-meter-track {
  width: 100%;
  height: 6px;
  background: #0d0906;
  overflow: hidden;
  position: relative;
}

.hive-meter-fill {
  height: 100%;
  background: #66bb6a;
  transition: width 0.15s linear;
}

.hive-quick-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.hive-btn.hive-ctrl-more-btn,
.hive-ctrl-more-btn {
  display: none;
}

/* Overlay & Camera Control Buttons */
.hive-ctrl-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.hive-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  box-sizing: border-box;
  background: #4a3b2e;
  color: #f7ebd4;
  border-top: 2px solid #ab8e70;
  border-left: 2px solid #ab8e70;
  border-right: 2px solid #17110b;
  border-bottom: 2px solid #17110b;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.hive-btn-block {
  display: flex;
  width: 100%;
}

.hive-btn-sm {
  padding: 3px 7px;
  font-size: 10px;
}

.hive-btn-xs {
  padding: 2px 5px;
  font-size: 9.5px;
}

.hive-btn-accent {
  background: #5c4018;
  border-top-color: #ffca28;
  border-left-color: #ffca28;
  color: #fff3d6;
}

.hive-btn-accent:hover {
  background: #73511e;
  color: #ffffff;
}

.hive-btn:hover {
  background: #5c4938;
  color: #ffd54f;
}

.hive-btn:active,
.hive-btn.is-active {
  background: #292018;
  color: #ffd54f;
  border-top-color: #17110b;
  border-left-color: #17110b;
  border-right-color: #ab8e70;
  border-bottom-color: #ab8e70;
}

.hive-btn-danger {
  background: #592525;
  border-top-color: #b55959;
  border-left-color: #b55959;
  color: #ffcdd2;
}

.hive-btn-danger:hover {
  background: #702e2e;
  color: #ffffff;
}

/* Floating Draggable RCT2 Windows */
.hive-window {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  z-index: 33;
  container-type: inline-size;
  overflow: hidden;
}

.hive-window.is-minimized .hive-window-body {
  display: none !important;
}

.hive-window-radar {
  top: var(--hud-top-offset, 48px);
  right: max(12px, calc(var(--safe-right, 0px) + 12px));
  width: 192px;
}

.hive-window-inspector {
  top: calc(var(--hud-top-offset, 48px) + 208px);
  right: max(12px, calc(var(--safe-right, 0px) + 12px));
  width: 280px;
  max-height: calc(100vh - var(--hud-top-offset, 48px) - 208px - var(--hud-bottom-offset, 140px) - 8px);
  max-height: calc(100dvh - var(--hud-top-offset, 48px) - 208px - var(--hud-bottom-offset, 140px) - 8px);
}

/* When Colony Radar has Caste & Cap Allocation expanded on desktop/tablet,
   dock Inspector side-by-side to the left of Radar so they never collide */
@media (min-width: 768px) {
  .hive-window-radar.is-telemetry-expanded:not(.is-minimized) ~ .hive-window-inspector {
    top: var(--hud-top-offset, 48px);
    right: max(212px, calc(var(--safe-right, 0px) + 212px));
    max-height: calc(100vh - var(--hud-top-offset, 48px) - var(--hud-bottom-offset, 140px) - 8px);
    max-height: calc(100dvh - var(--hud-top-offset, 48px) - var(--hud-bottom-offset, 140px) - 8px);
  }
}

.hive-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 2px 5px;
  min-height: 24px;
  height: 24px;
  max-height: 24px;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  cursor: grab;
  border-bottom: 2px solid #17110b;
  color: #fff8e7;
  font-size: 9.8px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.15px;
  text-shadow: 1px 1px 0 #000;
  user-select: none;
  -webkit-user-select: none;
}

.hive-titlebar-text {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
}

.hive-titlebar-label {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-titlebar-coord {
  flex-shrink: 0;
  white-space: nowrap;
}

.hive-titlebar:active {
  cursor: grabbing;
}

.hive-titlebar-maroon {
  background: linear-gradient(90deg, #6e1e2a 0%, #4a121b 100%);
}

.hive-titlebar-teal {
  background: linear-gradient(90deg, #1b4d3e 0%, #103328 100%);
}

.hive-titlebar-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.hive-titlebar-btn {
  appearance: none;
  background: #3d3126;
  color: #ffd54f;
  border: 1px solid #9e8468;
  width: 18px;
  height: 16px;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hive-titlebar-btn:hover {
  background: #5c4938;
  color: #ffffff;
}

.hive-window-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #9e8468 #231b14;
}

.hive-window-body::-webkit-scrollbar {
  width: 5px;
}

.hive-window-body::-webkit-scrollbar-track {
  background: #231b14;
}

.hive-window-body::-webkit-scrollbar-thumb {
  background: #9e8468;
  border-radius: 2px;
}

.hive-window-radar .hive-window-body {
  padding: 5px;
  gap: 4px;
}

.hive-radar-well {
  padding: 2px;
  display: flex;
  justify-content: center;
}

.hive-radar-canvas {
  display: block;
  width: 168px;
  height: 112px;
  max-width: 100%;
  cursor: crosshair;
  image-rendering: pixelated;
  touch-action: none;
}

.hive-radar-stats {
  font-size: 8.5px;
  letter-spacing: -0.2px;
  color: #d7c4aa;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-telemetry-disclosure-btn {
  width: 100%;
  font-size: 9.5px;
  padding: 2px 6px;
}

.hive-radar-caste-grid {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.hive-window-radar.is-telemetry-expanded .hive-radar-caste-grid {
  display: grid;
}

.hive-caste-chip {
  appearance: none;
  background: #231b14;
  border: 1px solid #6e5944;
  color: #f7ebd4;
  padding: 2px 5px;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.hive-caste-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-caste-chip:hover {
  background: #3b2e22;
  border-color: #ffd54f;
}

.hive-caste-chip-Static {
  cursor: default;
}

.hive-caste-chip-label {
  color: #cbb59b;
}

.hive-caste-chip-val {
  color: #ffd54f;
  font-weight: 900;
}

/* Cell & Bee Agent Inspector Contents */
.hive-inspector-modebar {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 2px;
  margin-bottom: 3px;
  min-width: 0;
}

.hive-inspector-tab-btn,
.hive-inspector-nav-btn,
.hive-inspector-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;
}

.hive-window-inspector .hive-window-body {
  padding: 5px;
  gap: 3px;
}

.hive-inspector-tab-btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 9.5px;
  padding: 2px 4px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-inspector-tab-btn[data-inspector-tab="cell"] {
  flex: 0 0 auto;
  padding: 2px 5px;
}

.hive-inspector-tab-btn[data-inspector-tab="bee"] {
  flex: 1 1 auto;
}

.hive-inspector-nav-btn {
  font-size: 9.5px;
  padding: 2px 2px;
  min-width: 18px;
  flex-shrink: 0;
}

.hive-inspector-follow-btn {
  font-size: 9.5px;
  padding: 2px 4px;
  font-weight: 800;
  flex-shrink: 0;
}

.hive-inspector-header {
  display: flex;
  gap: 5px;
  align-items: stretch;
  min-width: 0;
}

.hive-preview-well {
  width: 60px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hive-preview-well canvas {
  width: 56px;
  height: 48px;
}

.hive-inspector-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
}

.hive-inspector-sub {
  font-size: 9.5px;
  font-weight: 800;
  color: #ffd54f;
  line-height: 1.15;
}

.hive-inspector-storage {
  padding: 2px 5px;
  font-size: 9px;
  color: #e6d7c3;
  line-height: 1.15;
}

.hive-btn.hive-inspector-disclosure-btn,
.hive-inspector-disclosure-btn {
  display: none;
  width: 100%;
  font-size: 10px;
  padding: 2px 5px;
}

.hive-inspector-details,
.hive-inspector-pane-cell,
.hive-inspector-pane-bee {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hive-bee-thought-box {
  padding: 3px 5px;
  font-size: 9.5px;
  font-style: italic;
  color: #fff8e1;
  background: rgba(16, 28, 22, 0.85);
  line-height: 1.2;
}

.hive-bee-role-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.hive-bee-role-btn {
  font-size: 9.5px;
  padding: 2px 3px;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-gauges-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hive-gauge-row {
  display: grid;
  grid-template-columns: 68px 1fr 48px;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}

.hive-gauge-label {
  color: #cbb59b;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-gauge-val {
  text-align: right;
  font-weight: 800;
  color: #fff3d6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hive-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.hive-inspector-actions .hive-btn {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 4px;
  font-size: 9.5px;
  gap: 2px;
  letter-spacing: -0.15px;
}

/* Container queries for compact floating windows */
@container (max-width: 225px) {
  .hive-preview-well {
    width: 52px;
    height: 48px;
  }

  .hive-inspector-modebar .hive-btn {
    font-size: 9px;
    padding: 2px 3px;
    gap: 2px;
  }

  .hive-inspector-nav-btn {
    min-width: 18px;
    padding: 2px 2px;
  }

  .hive-gauge-row {
    grid-template-columns: 62px 1fr 42px;
    gap: 4px;
    font-size: 9.5px;
  }

  .hive-inspector-actions .hive-btn {
    padding: 3px 3px;
    font-size: 9px;
  }

  .hive-bee-role-btn {
    padding: 3px 2px;
    font-size: 8.5px;
  }
}

/* Bottom Construction Palette Dock & Gesture Bar */
.hive-dock-wrap {
  position: absolute;
  bottom: max(6px, calc(var(--safe-bottom, 0px) + 6px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
  max-width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
  pointer-events: none;
  z-index: 34;
}

.hive-status-banner {
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffe082;
  text-align: center;
  pointer-events: auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-gesture-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  pointer-events: auto;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
}

.hive-gesture-bar::-webkit-scrollbar {
  display: none;
}

.hive-gesture-bar .hive-btn {
  padding: 3px 6px;
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-gesture-bar .hive-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.hive-label-compact {
  display: none;
}

.hive-gesture-sep {
  width: 1px;
  height: 16px;
  background: rgba(158, 132, 104, 0.42);
  flex-shrink: 0;
  margin: 0 2px;
}

.hive-squad-pill {
  padding: 3px 5px;
  font-size: 9.5px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.72;
}

.hive-squad-pill.has-members {
  opacity: 1;
  color: #ffe082;
  border-top-color: #ffd54f;
  border-left-color: #ffd54f;
}

.hive-squad-count {
  color: #ffd54f;
  margin-left: 2px;
  font-weight: 900;
}

.hive-dock {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  pointer-events: auto;
  overflow-x: hidden;
  max-width: 100%;
  scrollbar-width: none;
}

.hive-dock::-webkit-scrollbar {
  display: none;
}

.hive-dock-slot {
  appearance: none;
  width: 88px;
  min-width: 72px;
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  cursor: pointer;
  color: #f7ebd4;
  font-family: inherit;
  position: relative;
  flex-shrink: 0;
  touch-action: manipulation;
}

.hive-dock-slot:hover {
  background: #4f3f31;
}

.hive-dock-slot.is-active {
  background: #261e17;
  border-top-color: #120b06;
  border-left-color: #120b06;
  border-right-color: #ffd54f;
  border-bottom-color: #ffd54f;
  outline: 1px solid #ffd54f;
}

.hive-dock-slot.is-unaffordable {
  opacity: 0.55;
}

.hive-dock-key {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 9px;
  font-weight: 900;
  color: #ffd54f;
}

.hive-dock-icon {
  width: 34px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  margin-top: 6px;
}

.hive-dock-cursor {
  font-size: 20px;
  line-height: 30px;
  margin-top: 6px;
  color: #80cbc4;
}

.hive-dock-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -0.15px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-dock-cost {
  font-size: 9px;
  color: #ffca28;
  font-weight: 700;
}

/* Mobile Secondary Bottom Dock Mode Picker Bar (Hidden on Desktop/Tablet) */
.hive-mobile-dock-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding: 3px 4px;
  pointer-events: auto;
  width: calc(100vw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
  width: calc(100dvw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
  max-width: 520px;
}

.hive-mobile-dock-bar .hive-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 24px;
  padding: 3px 4px;
  font-size: 9.5px;
  font-weight: 800;
  gap: 2.5px;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-mobile-dock-bar .hive-mobile-dock-collapse-btn {
  flex: 0 0 28px;
  width: 28px;
  padding: 3px 2px;
  color: #ffd54f;
}

/* ==========================================================================
   Adaptive Breakpoints & Progressive Disclosure Tiers
   ========================================================================== */

/* Advanced Desktop Command Layout (>= 1100px):
   Rich multi-panel command center with tactile bevels & prominent Royal Surge */
@media (min-width: 1100px) {
  .hive-menubar {
    padding: max(5px, calc(var(--safe-top, 0px) + 5px)) max(12px, calc(var(--safe-right, 0px) + 12px)) 5px max(12px, calc(var(--safe-left, 0px) + 12px));
    gap: 6px;
    box-shadow:
      inset 1px 1px 0 rgba(255, 236, 200, 0.3),
      inset -1px -1px 0 rgba(0, 0, 0, 0.85),
      0 6px 20px rgba(0, 0, 0, 0.72);
  }

  .hive-btn-boost {
    padding: 4px 10px;
    box-shadow: 0 0 10px rgba(255, 202, 40, 0.22);
    font-weight: 900;
    letter-spacing: 0.3px;
  }

  .hive-btn-boost.is-active {
    background: #694818;
    color: #fff8e1;
    border-color: #ffd54f;
    box-shadow: 0 0 14px rgba(255, 213, 79, 0.55);
  }

  .hive-dock {
    padding: 5px 6px;
    gap: 5px;
  }
}

/* Wide Desktop (>= 1440px): Dual-Column Command Telemetry & Expanded Blueprint Dock */
@media (min-width: 1440px) {
  .hive-window-radar {
    width: 224px;
    right: max(14px, calc(var(--safe-right, 0px) + 14px));
  }

  .hive-window-inspector {
    top: calc(var(--hud-top-offset, 48px) + 234px);
    right: max(14px, calc(var(--safe-right, 0px) + 14px));
    width: 280px;
  }

  .hive-window-radar.is-telemetry-expanded:not(.is-minimized) ~ .hive-window-inspector {
    top: var(--hud-top-offset, 48px);
    right: max(246px, calc(var(--safe-right, 0px) + 246px));
    width: 280px;
  }

  .hive-dock-slot {
    width: 96px;
    padding: 5px 5px;
  }

  .hive-dock-icon {
    width: 36px;
    height: 32px;
  }
}

/* Standard Desktop (< 1540px): Compact resource pods & buttons so all 8 pods + lenses fit on 1 row at 1280px */
@media (max-width: 1539px) {
  .hive-menubar {
    gap: 4px;
    padding: max(4px, calc(var(--safe-top, 0px) + 4px)) max(6px, calc(var(--safe-right, 0px) + 6px)) 4px max(6px, calc(var(--safe-left, 0px) + 6px));
  }

  .hive-res-strip {
    gap: 2px;
  }

  .hive-res-label {
    display: none;
  }

  .hive-res-pod {
    padding: 2px 4px;
    gap: 2px;
  }

  .hive-res-val {
    min-width: 16px;
    font-size: 10.5px;
  }

  .hive-season-pod {
    min-width: 98px;
    padding: 2px 5px;
  }

  .hive-quick-strip,
  .hive-ctrl-strip {
    gap: 2px;
  }

  .hive-ctrl-strip .hive-desktop-only-inline {
    display: none;
  }

  .hive-menubar .hive-btn {
    padding: 2px 4px;
    font-size: 9.5px;
    gap: 2px;
  }
}

/* Compact Desktop / Tablet (< 1100px): Collapse secondary resources behind +5 Res button */
@media (max-width: 1099px) {
  .hive-btn.hive-res-more-btn,
  .hive-res-more-btn {
    display: inline-flex;
    align-items: center;
  }

  .hive-menubar:not(.is-res-expanded) .hive-res-pod-secondary {
    display: none;
  }
}

/* Tablet / Mobile (< 960px): Collapse diagnostic overlay & raid buttons behind Lenses button */
@media (max-width: 959px) {
  .hive-btn.hive-ctrl-more-btn,
  .hive-ctrl-more-btn {
    display: inline-flex;
    align-items: center;
  }

  .hive-menubar:not(.is-ctrl-expanded) .hive-ctrl-strip {
    display: none;
  }

  .hive-menubar.is-ctrl-expanded .hive-ctrl-strip {
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid rgba(158, 132, 104, 0.28);
  }
}

/* Tablet Portrait & Mid-Width Viewports (768px <= width <= 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hive-window-radar {
    width: 192px;
    right: max(8px, calc(var(--safe-right, 0px) + 8px));
  }

  .hive-window-inspector {
    width: 280px;
    right: max(8px, calc(var(--safe-right, 0px) + 8px));
    max-height: calc(100vh - var(--hud-top-offset, 48px) - 208px - var(--hud-bottom-offset, 140px) - 8px);
    max-height: calc(100dvh - var(--hud-top-offset, 48px) - 208px - var(--hud-bottom-offset, 140px) - 8px);
  }

  .hive-dock-wrap {
    max-width: calc(100vw - 16px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-width: calc(100dvw - 16px - var(--safe-left, 0px) - var(--safe-right, 0px));
  }

  .hive-dock {
    max-width: 744px;
    gap: 3px;
    padding: 3px;
  }

  .hive-dock-slot {
    width: 86px;
    min-width: 64px;
    padding: 3px 2px;
  }

  .hive-dock-label {
    font-size: 9px;
    letter-spacing: -0.15px;
  }
}

/* Compact Vertical Viewports (< 700px tall, e.g. 1024x600):
   Constrain window max-height, enable internal scrolling, and compact dock elements */
@media (max-height: 699px) {
  .hive-window {
    max-height: calc(100vh - var(--hud-top-offset, 44px) - var(--hud-bottom-offset, 86px) - 8px);
    max-height: calc(100dvh - var(--hud-top-offset, 44px) - var(--hud-bottom-offset, 86px) - 8px);
  }

  .hive-window-inspector {
    max-height: calc(100vh - var(--hud-top-offset, 44px) - var(--hud-bottom-offset, 118px) - 8px);
    max-height: calc(100dvh - var(--hud-top-offset, 44px) - var(--hud-bottom-offset, 118px) - 8px);
  }

  /* When radar window is visible and stacked vertically above inspector on mid-height viewports */
  .hive-window-radar:not(.is-minimized) ~ .hive-window-inspector {
    max-height: calc(100vh - var(--hud-top-offset, 44px) - 208px - var(--hud-bottom-offset, 118px) - 8px);
    max-height: calc(100dvh - var(--hud-top-offset, 44px) - 208px - var(--hud-bottom-offset, 118px) - 8px);
  }

  .hive-window .hive-window-body {
    overflow-y: auto;
  }

  .hive-window-inspector .hive-preview-well {
    width: 56px;
    height: 50px;
  }

  .hive-window-inspector .hive-preview-well canvas {
    width: 52px;
    height: 46px;
  }

  .hive-window-inspector .hive-inspector-sub {
    font-size: 9.5px;
  }

  .hive-window-inspector .hive-inspector-storage {
    padding: 2px 5px;
    font-size: 9px;
  }

  .hive-window-inspector .hive-inspector-actions .hive-btn {
    padding: 3px 5px;
    font-size: 9.5px;
  }

  /* Compact dock on short viewports to maximize canvas clearance */
  .hive-dock-wrap {
    gap: 3px;
    bottom: max(4px, calc(var(--safe-bottom, 0px) + 4px));
  }

  .hive-dock {
    padding: 3px;
    gap: 3px;
  }

  .hive-dock-slot {
    padding: 3px 3px;
    min-width: 56px;
  }

  .hive-dock-icon {
    width: 30px;
    height: 26px;
    margin-top: 2px;
  }

  .hive-status-banner {
    padding: 2px 8px;
    font-size: 10px;
  }

  .hive-gesture-bar {
    padding: 2px 4px;
    gap: 2px;
  }

  .hive-gesture-bar .hive-btn {
    padding: 2px 5px;
    font-size: 9.5px;
  }
}

/* Horizontal side-by-side docking for wide compact screens (e.g. 1024x600) */
@media (min-width: 900px) and (max-height: 699px) {
  .hive-window-radar {
    top: var(--hud-top-offset, 48px);
    right: max(300px, calc(var(--safe-right, 0px) + 300px));
    width: 192px;
  }

  .hive-window-inspector,
  .hive-window-radar:not(.is-minimized) ~ .hive-window-inspector {
    top: var(--hud-top-offset, 48px);
    right: max(12px, calc(var(--safe-right, 0px) + 12px));
    width: 280px;
    max-height: calc(100vh - var(--hud-top-offset, 48px) - var(--hud-bottom-offset, 140px) - 8px);
    max-height: calc(100dvh - var(--hud-top-offset, 48px) - var(--hud-bottom-offset, 140px) - 8px);
  }
}

/* Mobile Portrait (< 768px) & Short Mobile Landscape (<= 500px tall):
   Placed after generic max-height: 699px so mobile rules always win */
@media (max-width: 767.98px), (max-height: 500px) {
  .hive-menubar {
    min-height: 36px;
    padding: max(3px, calc(var(--safe-top, 0px) + 3px)) max(5px, calc(var(--safe-right, 0px) + 5px)) 3px max(5px, calc(var(--safe-left, 0px) + 5px));
    gap: 3px;
  }

  .hive-res-pod {
    padding: 2px 4px;
    height: 24px;
    font-size: 10px;
    gap: 2px;
  }

  .hive-res-val {
    min-width: 16px;
    font-size: 10.5px;
  }

  .hive-res-more-btn {
    height: 24px;
    padding: 2px 5px;
    font-size: 9.5px;
  }

  .hive-season-pod {
    min-width: 88px;
    height: 24px;
    padding: 2px 5px;
  }

  .hive-season-top {
    font-size: 9px;
    gap: 4px;
  }

  .hive-quick-strip {
    width: 100%;
    justify-content: space-between;
    gap: 2px;
  }

  .hive-quick-strip .hive-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 3px 2px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hive-menubar.is-ctrl-expanded .hive-ctrl-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
  }

  .hive-menubar.is-ctrl-expanded .hive-ctrl-strip .hive-btn {
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 3px 2px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hive-desktop-only-inline {
    display: none !important;
  }

  .hive-label-full {
    display: none;
  }

  .hive-label-compact {
    display: inline;
  }

  .hive-window.is-minimized {
    display: none !important;
  }

  .hive-window-radar {
    top: var(--hud-top-offset, 68px);
    right: max(6px, calc(var(--safe-right, 0px) + 6px));
    width: 184px;
  }

  .hive-window-inspector {
    top: auto;
    bottom: var(--hud-bottom-offset, 118px);
    right: max(6px, calc(var(--safe-right, 0px) + 6px));
    width: min(236px, calc(100vw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px)));
    max-height: calc(100vh - var(--hud-top-offset, 44px) - var(--hud-bottom-offset, 118px) - 8px);
    max-height: calc(100dvh - var(--hud-top-offset, 44px) - var(--hud-bottom-offset, 118px) - 8px);
  }

  .hive-window-inspector .hive-window-body {
    padding: 4px;
    gap: 4px;
  }

  .hive-window-inspector .hive-preview-well {
    width: 46px;
    height: 42px;
  }

  .hive-window-inspector .hive-preview-well canvas {
    width: 42px;
    height: 38px;
  }

  .hive-window-inspector .hive-inspector-storage {
    padding: 2px 4px;
    font-size: 9px;
  }

  .hive-btn.hive-inspector-disclosure-btn,
  .hive-inspector-disclosure-btn {
    display: inline-flex;
    padding: 2px 4px;
    font-size: 9.5px;
  }

  .hive-window-inspector:not(.is-details-expanded) .hive-inspector-details {
    display: none;
  }

  .hive-status-banner {
    display: none;
  }

  .hive-gesture-bar {
    width: calc(100vw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
    width: calc(100dvw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-width: 520px;
    padding: 2px 3px;
    gap: 3px;
    justify-content: space-between;
    overflow-x: hidden;
  }

  .hive-gesture-bar .hive-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 3px 3px;
    font-size: 9px;
    gap: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hive-gesture-bar .hive-btn .symbol-icon {
    width: 11px;
    height: 11px;
    min-width: 11px;
    margin-right: 1px;
  }

  .hive-dock {
    padding: 3px;
    gap: 2px;
    width: calc(100vw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
    width: calc(100dvw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-width: 520px;
    justify-content: space-between;
    overflow-x: hidden;
  }

  .hive-dock-slot {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 72px;
    padding: 2px 1px;
  }

  .hive-dock-key {
    display: none;
  }

  .hive-dock-icon {
    width: 24px;
    height: 22px;
    margin-top: 1px;
  }

  .hive-dock-cursor {
    font-size: 15px;
    line-height: 22px;
    margin-top: 1px;
  }

  .hive-dock-label {
    font-size: 8.5px;
  }

  .hive-dock-cost {
    font-size: 7.5px;
  }

  .hive-mobile-dock-bar {
    display: flex;
  }

  .hive-dock-wrap[data-mobile-dock-mode="collapsed"] .hive-dock,
  .hive-dock-wrap[data-mobile-dock-mode="collapsed"] .hive-gesture-bar {
    display: none !important;
  }

  .hive-dock-wrap[data-mobile-dock-mode="build"] .hive-gesture-bar {
    display: none !important;
  }

  .hive-dock-wrap[data-mobile-dock-mode="quick"] .hive-dock {
    display: none !important;
  }
}

/* Mobile Portrait (< 600px width, e.g. 390x844 iPhone):
   2-Row x 4-Column Tactile Blueprint Grid so station names never truncate,
   clean 7-button touch gesture bar, and full-width bottom-sheet Inspector */
@media (max-width: 599.98px) and (min-height: 501px) {
  .hive-gesture-bar .hive-gesture-zoom-btn,
  .hive-gesture-bar .hive-squad-pill-secondary:not(.has-members) {
    display: none;
  }

  .hive-gesture-bar .hive-btn {
    padding: 3px 2px;
    font-size: 9px;
    gap: 1.5px;
  }

  .hive-gesture-bar .hive-gesture-btn,
  .hive-gesture-bar .hive-caste-quick-btn,
  .hive-gesture-bar .hive-btn[data-gesture] {
    flex: 1.38 1 0;
  }

  .hive-gesture-bar .hive-squad-pill {
    flex: 0.72 1 0;
    padding: 3px 2px;
    font-size: 8.5px;
  }

  .hive-gesture-bar .hive-gesture-home-btn,
  .hive-gesture-bar #hive-gesture-recenter {
    flex: 0 0 26px;
    width: 26px;
    padding: 3px 2px;
  }

  .hive-dock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    width: calc(100vw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
    width: calc(100dvw - 8px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-width: 480px;
  }

  .hive-dock-slot {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 3px 3px;
    gap: 1px;
  }

  .hive-dock-icon {
    width: 22px;
    height: 20px;
    margin-top: 0;
  }

  .hive-dock-cursor {
    font-size: 15px;
    line-height: 20px;
    margin-top: 0;
  }

  .hive-dock-label {
    font-size: 9px;
    letter-spacing: -0.15px;
  }

  .hive-dock-cost {
    font-size: 8px;
  }

  .hive-window-inspector {
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    right: max(6px, calc(var(--safe-right, 0px) + 6px));
    width: calc(100vw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
  }

  .hive-window-radar {
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    right: max(6px, calc(var(--safe-right, 0px) + 6px));
    width: calc(100vw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
  }
}

@media (max-width: 389.98px) and (min-height: 501px) {
  .hive-gesture-bar .hive-btn {
    padding: 2px 1.5px;
    font-size: 8.2px;
    gap: 1px;
  }

  .hive-gesture-bar .hive-btn .symbol-icon {
    width: 10px;
    height: 10px;
    min-width: 10px;
    margin-right: 0.5px;
  }

  .hive-gesture-bar .hive-gesture-home-btn,
  .hive-gesture-bar #hive-gesture-recenter {
    flex: 0 0 22px;
    width: 22px;
    padding: 2px 1px;
  }

  .hive-dock-slot {
    padding: 2px 1px;
  }

  .hive-dock-label {
    font-size: 8px;
    letter-spacing: -0.25px;
  }

  .hive-dock-cost {
    font-size: 7.5px;
  }
}

/* ==========================================================================
   Population Cap, Caste Divisions, & Skill Tree / Overdrive
   ========================================================================== */

.hive-btn-boost {
  background: #4e3512;
  border-top-color: #ffca28;
  border-left-color: #ffca28;
  color: #ffe082;
}

.hive-btn-boost:hover {
  background: #694818;
  color: #ffffff;
}

.hive-btn.is-unaffordable,
.hive-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hive-titlebar-gold {
  background: linear-gradient(90deg, #6b4c11 0%, #3d2a07 100%);
}

.hive-pop-cap-box {
  grid-column: 1 / -1;
  background: #17120c;
  border: 1px solid #8c6d3b;
  color: #ffe082;
  padding: 3px 5px;
  font-size: 8.8px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.hive-pop-cap-box.is-at-cap {
  border-color: #ef5350;
  color: #ff8a80;
}

.hive-caste-divisions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  padding-top: 3px;
  border-top: 1px solid rgba(158, 132, 104, 0.35);
}

.hive-caste-division-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4px;
  background: #1b150f;
  padding: 2px 4px;
  border: 1px solid #4e3f30;
  font-size: 9px;
}

.hive-div-name {
  color: #e6d7c3;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-div-count {
  color: #ffd54f;
  font-weight: 900;
  min-width: 14px;
  text-align: right;
}

.hive-div-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hive-div-btn {
  padding: 2px 4px;
  font-size: 8.5px;
  line-height: 1;
}

.hive-div-shift-btn {
  padding: 2px 4px;
  color: #80deea;
}

/* Skill Tree & Active Overdrive Dialog */
.hive-skill-dialog {
  width: min(980px, calc(100vw - 20px));
  max-height: min(86vh, calc(100dvh - 24px));
  margin: auto;
  padding: 0;
  background: #362b21;
  color: #f7ebd4;
  border-top: 2px solid #9e8468;
  border-left: 2px solid #9e8468;
  border-right: 2px solid #120b06;
  border-bottom: 2px solid #120b06;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.78);
  z-index: 95;
  overflow: hidden;
}

.hive-skill-dialog[open] {
  display: flex;
  flex-direction: column;
}

.hive-skill-dialog::backdrop {
  background: rgba(7, 10, 14, 0.72);
  backdrop-filter: blur(3px);
}

.hive-skill-progress-badge {
  background: #1c150e;
  border: 1px solid #ffca28;
  color: #ffd54f;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 900;
}

.hive-skill-dialog-body {
  padding: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hive-boost-section {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hive-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  color: #ffd54f;
}

.hive-section-header small {
  font-size: 9.5px;
  color: #cbb59b;
  font-weight: 700;
}

.hive-boost-header-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hive-boost-push-btn {
  padding: 2px 7px;
  font-size: 9.5px;
  color: #ffe082;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hive-boost-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.hive-boost-card {
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  background: #2b221a;
}

.hive-boost-card.is-active {
  border-color: #ffca28;
  outline: 1px solid #ffca28;
  background: #3a2d18;
}

.hive-boost-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  font-size: 10.5px;
  min-width: 0;
}

.hive-boost-name {
  color: #fff3d6;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.2;
}

.hive-boost-status {
  font-size: 9px;
  font-weight: 900;
  color: #ffca28;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hive-boost-desc {
  font-size: 9.5px;
  color: #d7c4aa;
  line-height: 1.25;
}

.hive-boost-activate-btn {
  width: 100%;
  text-align: center;
  padding: 4px 6px;
  font-size: 10px;
}

.hive-skill-branches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.hive-skill-branch-col {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hive-skill-branch-header {
  font-size: 10.5px;
  font-weight: 900;
  color: #fff3d6;
  padding-left: 6px;
  border-left: 3px solid #ffca28;
}

.hive-skill-node {
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  background: #2b221a;
}

.hive-skill-node.is-unlocked {
  background: #1c3123;
  border-top-color: #66bb6a;
  border-left-color: #66bb6a;
}

.hive-skill-node.is-locked-prereq {
  opacity: 0.68;
}

.hive-skill-node-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  font-size: 9.5px;
  min-width: 0;
}

.hive-skill-node-title {
  color: #fff3d6;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.2;
}

.hive-skill-node-status {
  font-size: 8.5px;
  font-weight: 800;
  color: #ffca28;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hive-skill-node.is-unlocked .hive-skill-node-status {
  color: #81c784;
}

.hive-skill-node-desc {
  font-size: 9px;
  color: #d7c4aa;
  line-height: 1.25;
}

.hive-skill-unlock-btn {
  width: 100%;
  text-align: center;
  padding: 3px 6px;
  font-size: 9.5px;
}

@media (max-width: 920px) {
  .hive-boost-grid,
  .hive-skill-branches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .hive-boost-grid,
  .hive-skill-branches {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Threat Alert Banner (Giant Hornet Raid Boss)
   ========================================================================== */
.hive-threat-alert {
  position: fixed;
  top: max(var(--hud-top-offset, 48px), calc(var(--safe-top, 0px) + var(--hud-top-offset, 48px)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #251614;
  border: 2px solid #b71c1c;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), inset 1px 1px 0 #ef5350, inset -1px -1px 0 #5f0909;
  padding: 6px 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 290px;
  max-width: 90vw;
  animation: pulse-threat 2s infinite ease-in-out;
  pointer-events: auto;
}

@keyframes pulse-threat {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(183, 28, 28, 0.5), inset 1px 1px 0 #ef5350, inset -1px -1px 0 #5f0909;
  }
  50% {
    box-shadow: 0 4px 24px rgba(239, 83, 80, 0.9), inset 1px 1px 0 #ff8a80, inset -1px -1px 0 #b71c1c;
  }
}

.hive-threat-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hive-threat-alert-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hive-threat-alert-icon {
  font-size: 13px;
}

.hive-threat-alert-title {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #ffcdd2;
  text-transform: uppercase;
}

.hive-threat-alert-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.hive-threat-alert-pill.is-advancing {
  background: #b71c1c;
  color: #fff;
  border: 1px solid #ef5350;
}

.hive-threat-alert-pill.is-sieging {
  background: #d84315;
  color: #fff;
  border: 1px solid #ff7043;
}

.hive-threat-alert-pill.is-heatballed {
  background: #bf360c;
  color: #ffe082;
  border: 1px solid #ffab00;
  animation: pulse-heatball 1s infinite alternate;
}

@keyframes pulse-heatball {
  from { opacity: 0.85; }
  to { opacity: 1; filter: drop-shadow(0 0 4px #ff6f00); }
}

.hive-threat-alert-bar-bg {
  width: 100%;
  height: 8px;
  background: #150908;
  border: 1px solid #5f0909;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.hive-threat-alert-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #d32f2f, #f44336);
  transition: width 0.15s ease-out;
}

.hive-threat-alert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hive-threat-alert-hp {
  font-size: 10px;
  font-weight: 700;
  color: #ffebee;
  font-family: monospace;
}

.hive-threat-focus-btn {
  background: #3e2723;
  color: #fff3e0;
  border: 1px solid #8d6e63;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 3px;
}

.hive-threat-focus-btn:hover {
  background: #5d4037;
  border-color: #d7ccc8;
}

.hive-threat-focus-btn:active {
  background: #271613;
}

/* ==========================================================================
   Material Symbols SVG Vector Icon Standard Styling
   ========================================================================== */

.symbol-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  min-width: 1.15em;
  vertical-align: -0.18em;
  fill: currentColor;
  stroke: none;
  pointer-events: none;
  flex-shrink: 0;
  user-select: none;
  transition: transform 0.1s ease-out, fill 0.15s ease-out;
}

.symbol-icon-sm {
  width: 14px;
  height: 14px;
  min-width: 14px;
}

.symbol-icon-md {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.symbol-icon-lg {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

/* Button & Chrome pill alignment adjustments */
.tactile-button .symbol-icon,
.tactile-button-secondary .symbol-icon,
.hive-dock-btn .symbol-icon {
  margin-right: 4px;
  vertical-align: -0.15em;
}

.chrome-pill .symbol-icon,
.touch-btn .symbol-icon,
.hive-btn .symbol-icon {
  margin-right: 0;
  vertical-align: middle;
}

/* Threat alert badge animation & color modifiers */
.hive-threat-alert-icon .symbol-icon,
.symbol-icon-warning {
  fill: #ff5252;
}

.symbol-icon-surge {
  fill: #ffca28;
}

/* ==========================================================================
   Milestone 4: Top-Level Game Modes, Sandbox, Tutorial & Campaign Styles
   ========================================================================== */

/* Menubar Mode Pod & Indicator */
.hive-mode-pod {
  display: flex;
  align-items: center;
  background: #251c14;
  padding: 1px 4px;
  gap: 4px;
}

.hive-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  background: #3e2e21;
  color: #ffd54f;
  border-top: 1px solid #795548;
  border-left: 1px solid #795548;
  border-right: 1px solid #1a110a;
  border-bottom: 1px solid #1a110a;
  cursor: pointer;
}

.hive-mode-btn:hover {
  background: #543d2b;
  color: #fff9c4;
}

.hive-mode-prefix {
  font-size: 8.5px;
  color: #bcaaa4;
  font-weight: 700;
  margin-right: 2px;
}

.hive-mode-name {
  font-weight: 900;
  letter-spacing: 0.5px;
}

.hive-mode-arrow {
  font-size: 9px;
  opacity: 0.75;
}

.hive-sandbox-toggle-btn {
  background: #2e3a24;
  border-color: #558b2f;
  color: #c5e1a5;
  font-weight: 800;
}

.hive-sandbox-toggle-btn:hover {
  background: #3b4d2d;
  color: #f1f8e9;
}

/* Mode Selection Dialog */
.hive-mode-dialog {
  width: min(840px, calc(100vw - 24px));
  max-height: min(88vh, calc(100dvh - 24px));
  margin: auto;
  padding: 0;
  background: #2d241c;
  color: #f7ebd4;
  border-top: 2px solid #a1887f;
  border-left: 2px solid #a1887f;
  border-right: 2px solid #100b07;
  border-bottom: 2px solid #100b07;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow: hidden;
}

.hive-mode-dialog[open] {
  display: flex;
  flex-direction: column;
}

.hive-mode-dialog::backdrop {
  background: rgba(8, 10, 14, 0.78);
  backdrop-filter: blur(4px);
}

.hive-mode-active-pill {
  background: #1b2612;
  border: 1px solid #7cb342;
  color: #aed581;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hive-mode-dialog-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.hive-mode-header-desc {
  font-size: 11px;
  color: #d7ccc8;
  line-height: 1.4;
  background: #1f1812;
  padding: 8px 10px;
  border-left: 3px solid #ffca28;
}

.hive-mode-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 768px) {
  .hive-mode-cards-grid {
    grid-template-columns: 1fr;
  }
}

.hive-mode-card {
  background: #382c22;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  min-width: 0;
  transition: transform 0.1s ease-out, border-color 0.15s ease-out, background 0.15s ease-out;
  border: 2px solid #5d4037;
}

.hive-mode-card:hover {
  background: #443529;
  border-color: #ffca28;
}

.hive-mode-card.is-active-mode {
  border-color: #ffca28;
  box-shadow: inset 0 0 0 1px #ffca28, 0 0 8px rgba(255, 202, 40, 0.35);
  background: #3e3023;
}

.hive-mode-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 6px;
  min-width: 0;
}

.hive-mode-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.hive-mode-card-title-group > div {
  min-width: 0;
}

.hive-mode-card-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #251c14;
  border: 1px solid #795548;
  color: #ffca28;
}

.hive-mode-card-icon .symbol-icon {
  width: 20px;
  height: 20px;
}

.hive-mode-card-eyebrow {
  font-size: 8.5px;
  font-weight: 800;
  color: #bcaaa4;
  letter-spacing: 0.5px;
}

.hive-mode-card-title {
  font-size: 13px;
  font-weight: 900;
  color: #fff9c4;
  margin: 0;
}

.hive-mode-badge {
  font-size: 8.5px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hive-mode-badge-tutorial {
  background: #1a237e;
  color: #90caf9;
  border: 1px solid #3f51b5;
}

.hive-mode-badge-sandbox {
  background: #1b5e20;
  color: #a5d6a7;
  border: 1px solid #4caf50;
}

.hive-mode-badge-campaign {
  background: #4a148c;
  color: #ce93d8;
  border: 1px solid #8e24aa;
}

.hive-mode-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.hive-mode-card-desc {
  font-size: 10px;
  color: #d7ccc8;
  line-height: 1.4;
  margin: 0;
}

.hive-mode-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hive-mode-card-features li {
  font-size: 9.5px;
  color: #b0bec5;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hive-mode-card-features li::before {
  content: "•";
  color: #ffca28;
  font-weight: bold;
}

.hive-btn-mode-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hive-mode-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: #1f1812;
  font-size: 10px;
  color: #bcaaa4;
}

.hive-mode-storage-status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.hive-mode-storage-status code {
  color: #ffd54f;
  background: #140e0a;
  padding: 1px 4px;
}

/* Sandbox God-Mode Configurator Window */
.hive-window-sandbox {
  width: min(310px, calc(100dvw - 12px));
  position: fixed;
  left: 12px;
  top: calc(var(--hud-top-offset, 48px) + var(--hud-chrome-offset, 30px));
  z-index: 80;
  display: flex;
  flex-direction: column;
}

.hive-titlebar-gold {
  background: linear-gradient(90deg, #795548 0%, #a1887f 100%);
}

.hive-sandbox-section {
  padding: 6px;
  margin-bottom: 6px;
  background: #241c15;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hive-sandbox-section-title {
  font-size: 10px;
  font-weight: 900;
  color: #ffca28;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
}

.hive-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #eceff1;
  cursor: pointer;
  user-select: none;
}

.hive-toggle-row input[type="checkbox"] {
  accent-color: #ffca28;
  cursor: pointer;
}

.hive-mini-btn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.hive-mini-btn-grid .hive-btn {
  padding: 2px 2px;
  font-size: 9px;
  text-align: center;
  min-width: 0;
}

.hive-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hive-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  color: #b0bec5;
}

.hive-range-slider {
  width: 100%;
  accent-color: #ffca28;
  cursor: pointer;
}

.hive-presets-strip {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}

.hive-presets-strip .hive-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px 1px;
  font-size: 8.5px;
  text-align: center;
}

.hive-spawner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.hive-btn-caste {
  padding: 3px 2px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

/* Interactive Step-by-Step Tutorial Card */
.hive-tutorial-card {
  position: fixed;
  top: calc(var(--hud-top-offset, 48px) + var(--hud-chrome-offset, 30px));
  left: max(10px, calc(var(--safe-left, 0px) + 10px));
  transform: none;
  width: min(416px, calc(100dvw - 20px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  background: #251c14;
  color: #f7ebd4;
  border: 2px solid #8d6e63;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75), inset 1px 1px 0 rgba(255, 235, 150, 0.25);
  z-index: 950;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hive-tutorial-card.is-celebrating {
  animation: pulse-celebration 0.8s ease-in-out infinite alternate;
  border-color: #ffca28;
}

@keyframes pulse-celebration {
  from {
    box-shadow: 0 0 8px #ffca28, inset 0 0 6px #ffe082;
  }
  to {
    box-shadow: 0 0 20px #ffd54f, inset 0 0 12px #ffca28;
  }
}

.hive-tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3e2e21;
  padding: 4px 8px;
  border-bottom: 1px solid #5d4037;
  gap: 6px;
  min-width: 0;
}

.hive-tutorial-stage-badge {
  background: #ffca28;
  color: #21150a;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.hive-tutorial-title {
  font-size: 11px;
  font-weight: 800;
  color: #ffe082;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-tutorial-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.hive-tutorial-actions .hive-btn {
  padding: 2px 5px;
  font-size: 9.5px;
  gap: 2px;
  min-height: 20px;
}

.hive-tutorial-desc {
  font-size: 10px;
  color: #d7ccc8;
  line-height: 1.35;
  padding: 6px 8px 4px 8px;
  background: #1f1812;
}

.hive-tutorial-checklist {
  list-style: none;
  padding: 4px 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hive-tutorial-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  padding: 2px 4px;
  background: #2a2017;
  border: 1px solid #4e342e;
  color: #ffecb3;
}

.hive-tutorial-step.is-complete {
  background: #1f2b1b;
  border-color: #388e3c;
  color: #c8e6c9;
}

.hive-step-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.hive-step-check {
  display: flex;
  align-items: center;
  color: #8d6e63;
  flex-shrink: 0;
}

.hive-tutorial-step.is-complete .hive-step-check {
  color: #81c784;
}

.hive-step-label {
  font-weight: 700;
  min-width: 0;
}

.hive-step-hotkey {
  font-size: 8.5px;
  font-family: monospace;
  background: #422b1d;
  color: #ffe082;
  border: 1px solid #6d4c41;
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hive-btn-tutorial-hints.is-active {
  background: #4e342e;
  border-color: #ffca28;
  color: #ffe082;
}

.hive-tutorial-hints-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 8px 6px 8px;
  background: #1d1610;
  border-top: 1px solid #4e342e;
}

.hive-tutorial-hints-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.hive-tutorial-hints-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #ffca28;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hive-tutorial-hints-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hive-tutorial-hints-header-actions .hive-btn {
  padding: 1px 5px;
  font-size: 8.5px;
  min-height: 18px;
}

.hive-tutorial-hints-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hive-tutorial-hint-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 6px;
  background: #2b2016;
  border: 1px solid #5d4037;
  border-left: 3px solid #ffca28;
  border-radius: 2px;
  color: #f7ebd4;
}

.hive-hint-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffca28;
  flex-shrink: 0;
  margin-top: 1px;
}

.hive-hint-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.hive-hint-title {
  font-size: 9.5px;
  font-weight: 800;
  color: #ffe082;
  line-height: 1.2;
}

.hive-hint-text {
  font-size: 9px;
  color: #d7ccc8;
  line-height: 1.3;
}

.hive-hint-dismiss-btn {
  flex-shrink: 0;
  padding: 2px 4px;
  min-width: 20px;
  min-height: 20px;
  color: #bcaaa4;
  align-self: flex-start;
}

.hive-hint-dismiss-btn:hover {
  color: #ffffff;
  border-color: #ffca28;
}

.hive-tutorial-hints-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  background: #241b13;
  border: 1px dashed #4e342e;
  font-size: 9px;
  color: #a1887f;
}

.hive-tutorial-hints-empty .hive-btn {
  padding: 1px 5px;
  font-size: 8.5px;
  min-height: 18px;
}

.hive-tutorial-progress-bar-bg {
  width: 100%;
  height: 4px;
  background: #19120c;
}

.hive-tutorial-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb300, #ffca28);
  transition: width 0.2s ease-out;
}

.hive-tutorial-card.is-graduated {
  border-color: #ffca28;
}

.hive-tutorial-card.is-graduated .hive-tutorial-stage-badge {
  background: linear-gradient(135deg, #ffd54f, #ffb300);
  color: #1b1107;
  box-shadow: 0 0 6px rgba(255, 202, 40, 0.55);
}

.hive-tutorial-graduated-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 8px;
  background: #1c150f;
  border-top: 1px solid #4e342e;
}

.hive-tutorial-graduated-footer .hive-btn {
  padding: 3px 8px;
  font-size: 9.5px;
  gap: 4px;
}

/* Campaign Dialog */
.hive-campaign-dialog {
  width: min(920px, calc(100vw - 20px));
  max-height: min(88vh, calc(100dvh - 24px));
  margin: auto;
  padding: 0;
  background: #2c221a;
  color: #f7ebd4;
  border-top: 2px solid #a1887f;
  border-left: 2px solid #a1887f;
  border-right: 2px solid #100b07;
  border-bottom: 2px solid #100b07;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow: hidden;
}

.hive-campaign-dialog[open] {
  display: flex;
  flex-direction: column;
}

.hive-campaign-dialog::backdrop {
  background: rgba(8, 10, 14, 0.8);
  backdrop-filter: blur(4px);
}

.hive-campaign-stars-total {
  background: #1c150e;
  border: 1px solid #ffca28;
  color: #ffd54f;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 900;
  border-radius: 2px;
  white-space: nowrap;
}

.hive-campaign-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.hive-campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 768px) {
  .hive-campaign-grid {
    grid-template-columns: 1fr;
  }
}

.hive-chapter-card {
  background: #382c22;
  padding: 10px;
  border: 2px solid #5d4037;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.1s ease-out, border-color 0.15s ease-out, background 0.15s ease-out;
}

.hive-chapter-card:hover {
  background: #443529;
  border-color: #ffca28;
}

.hive-chapter-card.is-current {
  border-color: #ffca28;
  box-shadow: inset 0 0 0 1px #ffca28;
}

.hive-chapter-card.is-locked {
  opacity: 0.65;
  filter: grayscale(0.5);
  cursor: not-allowed;
}

.hive-chapter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hive-chapter-num {
  font-size: 9px;
  font-weight: 900;
  color: #ffca28;
  text-transform: uppercase;
}

.hive-chapter-season {
  font-size: 8.5px;
  background: #251c14;
  padding: 1px 4px;
  border-radius: 2px;
  color: #b0bec5;
}

.hive-chapter-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff9c4;
  margin: 0;
}

.hive-chapter-stars {
  display: flex;
  gap: 2px;
  color: #8d6e63;
}

.hive-star-icon {
  width: 14px;
  height: 14px;
  fill: #5d4037;
}

.hive-star-icon.is-earned {
  fill: #ffca28;
}

.hive-chapter-summary {
  font-size: 9.5px;
  color: #d7ccc8;
  line-height: 1.35;
  margin: 0;
}

/* Campaign Briefing View */
.hive-briefing-scroll {
  background: #251c14;
  padding: 10px;
  border: 1px solid #5d4037;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hive-briefing-lore {
  font-size: 10.5px;
  line-height: 1.45;
  color: #ffecb3;
  font-style: italic;
  border-left: 3px solid #ffca28;
  padding-left: 8px;
  margin: 0;
}

.hive-objectives-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 600px) {
  .hive-objectives-split {
    grid-template-columns: 1fr;
  }
}

.hive-objectives-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hive-objectives-col-title {
  font-size: 9.5px;
  font-weight: 900;
  color: #ffd54f;
  text-transform: uppercase;
}

.hive-objective-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 10px;
  color: #d7ccc8;
  padding: 3px 4px;
  background: #1f1812;
  border: 1px solid #4e342e;
}

.hive-objective-item.is-completed {
  color: #c8e6c9;
  border-color: #388e3c;
  background: #1b2615;
}

/* In-Game Campaign HUD Tracker */
.hive-campaign-hud-tracker {
  position: fixed;
  top: calc(var(--hud-top-offset, 48px) + var(--hud-chrome-offset, 30px));
  left: max(10px, calc(var(--safe-left, 0px) + 10px));
  right: auto;
  width: min(260px, calc(100dvw - 20px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  background: #251c14;
  color: #f7ebd4;
  border: 2px solid #8d6e63;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  z-index: 75;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.hive-hud-tracker-header {
  background: #3e2e21;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 900;
  color: #ffd54f;
  border-bottom: 1px solid #5d4037;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hive-tracker-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-tracker-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.hive-tracker-collapse-btn,
.hive-tracker-close-btn {
  padding: 1px 5px;
  font-size: 9px;
  flex-shrink: 0;
}

.hive-hud-tracker-list {
  list-style: none;
  padding: 4px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hive-hud-tracker-item {
  font-size: 9.5px;
  color: #d7ccc8;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  background: #1e1610;
}

.hive-hud-tracker-item.is-complete {
  color: #c8e6c9;
  background: #1b2615;
}

/* Boss Health Meter */
.hive-boss-meter-container {
  position: fixed;
  top: calc(var(--hud-top-offset, 48px) + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100dvw - 16px));
  background: #250908;
  border: 2px solid #b71c1c;
  box-shadow: 0 4px 20px rgba(183, 28, 28, 0.6);
  z-index: 900;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hive-boss-meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 900;
  color: #ffcdd2;
}

.hive-boss-meter-heatball-badge {
  background: #ff6f00;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 2px;
  animation: pulse-heatball 0.5s infinite alternate;
}

.hive-boss-meter-bar-bg {
  width: 100%;
  height: 10px;
  background: #140404;
  border: 1px solid #7f0000;
  border-radius: 2px;
  overflow: hidden;
}

.hive-boss-meter-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d32f2f, #f44336);
  transition: width 0.1s linear;
}

/* Campaign Victory & Defeat Splash Dialogs */
.hive-campaign-splash-dialog {
  width: min(520px, calc(100dvw - 16px));
  margin: auto;
  padding: 0;
  background: #2c221a;
  color: #f7ebd4;
  border-top: 2px solid #ffca28;
  border-left: 2px solid #ffca28;
  border-right: 2px solid #100b07;
  border-bottom: 2px solid #100b07;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  z-index: 1100;
  overflow: hidden;
}

.hive-campaign-splash-dialog[open] {
  display: flex;
  flex-direction: column;
}

.hive-campaign-splash-dialog::backdrop {
  background: rgba(8, 10, 14, 0.85);
  backdrop-filter: blur(5px);
}

.hive-splash-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.hive-victory-emblem {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #4e342e 0%, #1c130c 100%);
  border: 2px solid #ffca28;
  color: #ffd54f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(255, 202, 40, 0.45), inset 0 0 8px rgba(255, 224, 130, 0.25);
  animation: victory-emblem-float 1.8s ease-in-out infinite alternate;
}

.hive-victory-emblem .symbol-icon {
  width: 26px;
  height: 26px;
}

@keyframes victory-emblem-float {
  from {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 14px rgba(255, 202, 40, 0.4), inset 0 0 6px rgba(255, 224, 130, 0.2);
  }
  to {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 0 24px rgba(255, 213, 79, 0.75), inset 0 0 12px rgba(255, 224, 130, 0.4);
  }
}

.hive-splash-laurel {
  font-size: 16px;
  font-weight: 900;
  color: #ffd54f;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hive-splash-stars-row {
  display: flex;
  gap: 6px;
}

.hive-splash-stars-row > span {
  display: inline-flex;
  animation: victory-star-pop 0.45s cubic-bezier(0.22, 1.35, 0.5, 1) backwards;
}

@keyframes victory-star-pop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.hive-splash-star {
  width: 24px;
  height: 24px;
  fill: #5d4037;
}

.hive-splash-star.is-earned {
  fill: #ffca28;
  filter: drop-shadow(0 0 6px rgba(255, 202, 40, 0.6));
}

.hive-victory-tutorial-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: #1e1610;
  border: 1px solid #5d4037;
  border-radius: 2px;
}

.hive-victory-xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 900;
  color: #ffd54f;
  letter-spacing: 0.04em;
}

.hive-victory-stage-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.hive-victory-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  background: #1b2615;
  border: 1px solid #388e3c;
  color: #c8e6c9;
  border-radius: 2px;
}

.hive-victory-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.hive-victory-actions-row .hive-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Fullscreen Golden Honey & Confetti Celebration Burst */
.hive-victory-celebration-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
  overflow: hidden;
}

.hive-celebration-particle {
  position: absolute;
  top: -28px;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  animation-name: celebration-particle-fall;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  animation-fill-mode: forwards;
}

@keyframes celebration-particle-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.4) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate3d(calc(var(--drift-x, 20px) * 0.25), 14vh, 0) scale(1.15) rotate(calc(var(--rot-deg, 180deg) * 0.25));
  }
  75% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift-x, 40px), 92vh, 0) scale(0.75) rotate(var(--rot-deg, 180deg));
  }
}

.hive-splash-desc {
  font-size: 11px;
  color: #ffecb3;
  line-height: 1.45;
}

.hive-defeat-reason {
  background: #3e1b19;
  border: 1px solid #d32f2f;
  color: #ffcdd2;
  font-size: 10.5px;
  padding: 6px 10px;
  border-radius: 2px;
  width: 100%;
}

/* ==========================================================================
   Tactical Challenges, Survival Siege, Speedrun & Global Progression Styles
   ========================================================================== */

.hive-achievements-menubar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #3d2c19;
  border-top: 1px solid #ffca28;
  border-left: 1px solid #ffca28;
  border-right: 1px solid #1a110a;
  border-bottom: 1px solid #1a110a;
  color: #ffe082;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
}

.hive-achievements-menubar-btn:hover {
  background: #543d22;
  color: #fffde7;
}

.hive-menubar-rank-badge {
  background: #ffca28;
  color: #1c1208;
  padding: 0 4px;
  border-radius: 2px;
  font-size: 8.5px;
  font-weight: 900;
}

.hive-menubar-ach-count {
  font-family: monospace;
  font-size: 9px;
  color: #fff3d6;
}

.hive-mode-global-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(90deg, #241910 0%, #332415 100%);
  border: 1px solid #8c6d3b;
}

.hive-global-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 200px;
}

.hive-global-banner-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #17100a;
  border: 1px solid #ffca28;
  color: #ffca28;
}

.hive-global-banner-rank {
  font-size: 11px;
  font-weight: 900;
  color: #ffe082;
  letter-spacing: 0.4px;
}

.hive-global-banner-perk {
  font-size: 9.5px;
  color: #d7ccc8;
}

.hive-global-banner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.hive-mode-badge-challenges {
  background: #4e342e;
  color: #ffe082;
  border: 1px solid #ffca28;
}

.hive-mode-badge-survival {
  background: #4a0e0e;
  color: #ff8a80;
  border: 1px solid #ef5350;
}

.hive-mode-badge-speedrun {
  background: #004d40;
  color: #80cbc4;
  border: 1px solid #26a69a;
}

/* Tactical Challenges Browser Grid */
.hive-challenges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .hive-challenges-grid {
    grid-template-columns: 1fr;
  }
}

.hive-challenge-card {
  background: #36291f;
  border: 2px solid #5d4037;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

.hive-challenge-card.is-active-challenge {
  border-color: #ffca28;
  box-shadow: inset 0 0 0 1px #ffca28;
}

.hive-challenge-card.is-completed {
  background: #2f281d;
}

.hive-challenge-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.hive-challenge-head-left,
.hive-challenge-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.hive-challenge-title-group > div {
  min-width: 0;
}

.hive-challenge-eyebrow {
  font-size: 8.5px;
  font-weight: 800;
  color: #bcaaa4;
  letter-spacing: 0.4px;
}

.hive-challenge-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #221912;
  border: 1px solid #795548;
  color: #ffca28;
}

.hive-challenge-meta-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 800;
}

.hive-challenge-diff {
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
}

.hive-challenge-diff.is-diff-standard {
  background: #1b5e20;
  color: #a5d6a7;
}

.hive-challenge-diff.is-diff-hard {
  background: #e65100;
  color: #ffe0b2;
}

.hive-challenge-diff.is-diff-expert {
  background: #b71c1c;
  color: #ffcdd2;
}

.hive-challenge-diff.is-diff-master {
  background: #4a148c;
  color: #e1bee7;
}

.hive-challenge-season {
  color: #bcaaa4;
}

.hive-challenge-title {
  margin: 2px 0 0 0;
  font-size: 12px;
  font-weight: 900;
  color: #fff9c4;
}

.hive-challenge-medal-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 2px;
  background: #221912;
  color: #9e9e9e;
  border: 1px solid #4e342e;
  white-space: nowrap;
  flex-shrink: 0;
}

.hive-challenge-medal-pill.is-medal-gold {
  background: #4e3808;
  color: #ffd54f;
  border-color: #ffca28;
}

.hive-challenge-medal-pill.is-medal-silver {
  background: #263238;
  color: #eceff1;
  border-color: #b0bec5;
}

.hive-challenge-medal-pill.is-medal-bronze {
  background: #3e2723;
  color: #ffccbc;
  border-color: #ff8a65;
}

.hive-challenge-mutator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 6px;
  background: #221912;
  border-left: 3px solid #ffca28;
  font-size: 9px;
  font-weight: 800;
  color: #ffe082;
}

.hive-challenge-xp-pill {
  color: #81c784;
  font-weight: 900;
  white-space: nowrap;
}

.hive-challenge-desc {
  margin: 0;
  font-size: 9.5px;
  color: #d7ccc8;
  line-height: 1.35;
}

.hive-challenge-obj-list {
  list-style: none;
  margin: 0;
  padding: 4px 6px;
  background: #1f1710;
  border: 1px solid #4e342e;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  color: #ffecb3;
}

.hive-challenge-obj-item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.hive-challenge-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(158, 132, 104, 0.25);
}

.hive-challenge-times {
  display: flex;
  flex-direction: column;
  font-size: 8.5px;
  color: #bcaaa4;
}

.hive-challenge-times strong {
  color: #ffe082;
  font-size: 9.5px;
}

/* Global Achievements & Royal Ranks Dialog */
.hive-achievements-hero {
  padding: 10px;
  background: #1f1711;
  border: 1px solid #8c6d3b;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hive-ach-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.hive-ach-rank-emblem {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: #2e2012;
  border: 2px solid #ffca28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffd54f;
}

.hive-ach-rank-lv {
  font-size: 9px;
  font-weight: 900;
  color: #fff9c4;
}

.hive-ach-hero-meta {
  flex: 1 1 160px;
  min-width: 0;
}

.hive-ach-hero-eyebrow {
  font-size: 8.5px;
  font-weight: 900;
  color: #bcaaa4;
  letter-spacing: 0.6px;
}

.hive-ach-hero-title {
  margin: 2px 0;
  font-size: 16px;
  font-weight: 900;
  color: #ffd54f;
}

.hive-ach-hero-perk {
  font-size: 10px;
  color: #c8e6c9;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.hive-ach-hero-counters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hive-ach-counter-box {
  background: #140e09;
  border: 1px solid #5d4037;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hive-ach-counter-val {
  font-size: 13px;
  font-weight: 900;
  color: #ffd54f;
  font-variant-numeric: tabular-nums;
}

.hive-ach-counter-lbl {
  font-size: 8.5px;
  color: #bcaaa4;
}

.hive-ach-xp-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hive-ach-xp-bar-bg {
  width: 100%;
  height: 8px;
  background: #120c07;
  border: 1px solid #5d4037;
  overflow: hidden;
}

.hive-ach-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb300, #ffd54f);
  transition: width 0.25s ease-out;
}

.hive-ach-xp-bar-label {
  font-size: 9px;
  color: #ffe082;
  text-align: right;
  font-family: monospace;
}

.hive-ach-tabs-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hive-ach-tab-btn.is-active {
  background: #5c4018;
  border-color: #ffca28;
  color: #fff9c4;
}

.hive-ach-tab-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hive-ach-filter-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.hive-achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 680px) {
  .hive-achievements-grid {
    grid-template-columns: 1fr;
  }
}

.hive-achievement-card {
  background: #2f241b;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid #5d4037;
  min-width: 0;
}

.hive-achievement-card.is-unlocked {
  background: #243020;
  border-color: #66bb6a;
}

.hive-achievement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hive-achievement-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1b140e;
  border: 1px solid #795548;
  color: #ffd54f;
}

.hive-achievement-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.hive-achievement-title {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  color: #fff9c4;
}

.hive-achievement-xp {
  font-size: 9px;
  font-weight: 800;
  color: #81c784;
}

.hive-achievement-status {
  font-size: 8.5px;
  font-weight: 900;
  padding: 2px 5px;
  background: #1b140e;
  color: #9e9e9e;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hive-achievement-status.is-earned {
  background: #1b5e20;
  color: #c8e6c9;
}

.hive-achievement-desc {
  margin: 0;
  font-size: 9.5px;
  color: #d7ccc8;
}

.hive-achievement-prog-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hive-achievement-prog-bar {
  flex: 1;
  height: 6px;
  background: #140e09;
  border: 1px solid #4e342e;
  overflow: hidden;
}

.hive-achievement-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffca28, #66bb6a);
}

.hive-achievement-prog-text {
  font-size: 9px;
  font-family: monospace;
  color: #ffe082;
}

/* Royal Ranks List */
.hive-ranks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hive-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  background: #2b2118;
}

.hive-rank-row.is-current-rank {
  border-color: #ffca28;
  background: #3d2e1b;
}

.hive-rank-row.is-locked {
  opacity: 0.65;
}

.hive-rank-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 180px;
}

.hive-rank-row-badge {
  background: #ffca28;
  color: #1c1208;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hive-rank-row-icon {
  color: #ffd54f;
  flex-shrink: 0;
}

.hive-rank-row-title {
  font-size: 11px;
  font-weight: 900;
  color: #fff9c4;
}

.hive-rank-row-perk {
  font-size: 9.5px;
  color: #d7ccc8;
}

.hive-rank-row-status {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  background: #1a130d;
  color: #ffe082;
  white-space: nowrap;
}

/* Lifetime Telemetry Grid */
.hive-stats-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 768px) {
  .hive-stats-telemetry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hive-stat-tile {
  background: #1d150f;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #4e342e;
  min-width: 0;
}

.hive-stat-tile-icon {
  color: #ffca28;
  flex-shrink: 0;
}

.hive-stat-tile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hive-stat-tile-val {
  font-size: 12px;
  font-weight: 900;
  color: #fff9c4;
  font-variant-numeric: tabular-nums;
}

.hive-stat-tile-lbl {
  font-size: 8.5px;
  color: #bcaaa4;
}

/* HUD Tracker Action Row */
.hive-hud-tracker-actions {
  padding: 4px 6px 6px 6px;
  border-top: 1px solid #4e342e;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

/* Non-Intrusive Achievement & Rank-Up Toast */
.hive-achievement-toast {
  position: fixed;
  bottom: calc(var(--hud-bottom-offset, 96px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  background: linear-gradient(90deg, #2b1f12 0%, #3e2d18 100%);
  border: 2px solid #ffca28;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.85);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(440px, calc(100dvw - 20px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  max-width: calc(100dvw - 20px - var(--safe-left, 0px) - var(--safe-right, 0px));
  pointer-events: none;
}

.hive-toast-icon {
  color: #ffd54f;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hive-toast-body {
  flex: 1 1 auto;
  min-width: 0;
}

.hive-toast-eyebrow {
  font-size: 8px;
  font-weight: 900;
  color: #ffca28;
  letter-spacing: 0.6px;
}

.hive-toast-title {
  font-size: 11.5px;
  font-weight: 900;
  color: #fff9c4;
}

.hive-toast-sub {
  font-size: 9.5px;
  color: #d7ccc8;
}

.hive-toast-xp {
  background: #1b5e20;
  color: #c8e6c9;
  border: 1px solid #66bb6a;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 900;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile & Compact PWA Ergonomics for Modals, Tutorial Card, Campaign Tracker & Sandbox */
@media (max-width: 767.98px), (max-height: 500px) {
  .hive-skill-dialog,
  .hive-mode-dialog,
  .hive-campaign-dialog,
  .hive-challenges-dialog,
  .hive-achievements-dialog,
  .hive-campaign-splash-dialog,
  .hive-pause-dialog {
    width: calc(100dvw - 10px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-width: calc(100dvw - 10px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-height: calc(100dvh - 16px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
    overflow-x: hidden;
  }

  .hive-titlebar {
    min-height: 28px;
    height: 28px;
    max-height: 28px;
    padding: 3px 6px;
  }

  .hive-titlebar-btn {
    width: 24px;
    height: 22px;
    font-size: 12px;
  }

  .hive-tutorial-card {
    top: calc(var(--hud-top-offset, 66px) + var(--hud-chrome-offset, 28px));
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    transform: none;
    width: min(384px, calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px)));
    max-width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
  }

  .hive-tutorial-header {
    padding: 3px 6px;
    gap: 4px;
  }

  .hive-tutorial-desc {
    font-size: 9px;
    padding: 3px 6px;
    line-height: 1.25;
  }

  .hive-tutorial-checklist {
    padding: 2px 6px;
    gap: 2px;
  }

  .hive-tutorial-step {
    font-size: 9px;
    padding: 1.5px 4px;
  }

  .hive-tutorial-hints-section {
    padding: 3px 6px 4px 6px;
    gap: 3px;
  }

  .hive-tutorial-hint-item {
    padding: 3px 5px;
    gap: 5px;
  }

  .hive-hint-title {
    font-size: 9px;
  }

  .hive-hint-text {
    font-size: 8.5px;
    line-height: 1.25;
  }

  .hive-campaign-hud-tracker {
    top: calc(var(--hud-top-offset, 66px) + var(--hud-chrome-offset, 28px));
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    right: auto;
    width: min(236px, calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  }

  .hive-window-sandbox {
    top: calc(var(--hud-top-offset, 66px) + var(--hud-chrome-offset, 28px));
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    width: min(272px, calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  }

  .hive-threat-alert {
    top: calc(var(--hud-top-offset, 66px) + var(--hud-chrome-offset, 28px));
    min-width: 0;
    width: min(308px, calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px)));
    max-width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    padding: 3px 7px;
    gap: 2px;
  }

  .hive-threat-alert-title {
    font-size: 9.5px;
  }

  .hive-threat-alert-pill {
    font-size: 8px;
    padding: 1px 4px;
  }

  .hive-threat-alert-bar-bg {
    height: 6px;
  }

  .hive-threat-alert-hp {
    font-size: 9px;
  }

  .hive-threat-focus-btn {
    padding: 1px 6px;
    font-size: 8.5px;
  }

  .hive-boss-meter-container {
    width: min(308px, calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px)));
    max-width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    padding: 3px 7px;
    gap: 2px;
  }

  .hive-boss-meter-header {
    font-size: 9.5px;
    gap: 4px;
  }

  .hive-boss-meter-bar-bg {
    height: 6px;
  }

  .hive-ach-tabs-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .hive-ach-tab-btn {
    min-width: 0;
    padding: 4px 3px;
    font-size: 8.5px;
    line-height: 1.15;
    white-space: normal;
    overflow: hidden;
    text-align: center;
    justify-content: center;
  }
}

/* Compact phone width (<= 599.98px): keep top menubar Row 1 consolidated (Res + Mode + Season + Collapse on Row 1, Quick Strip on Row 2) and align mobile portrait cards to full width */
@media (max-width: 599.98px) {
  .hive-menubar {
    gap: 2px;
    padding: max(2px, calc(var(--safe-top, 0px) + 2px)) max(4px, calc(var(--safe-right, 0px) + 4px)) 2px max(4px, calc(var(--safe-left, 0px) + 4px));
  }

  .hive-menubar .symbol-icon {
    width: 10px;
    height: 10px;
    min-width: 10px;
    margin-right: 1px;
  }

  .hive-res-strip {
    gap: 1.5px;
    flex: 0 1 auto;
  }

  .hive-res-pod {
    padding: 1px 2px;
    height: 20px;
    font-size: 8.5px;
    gap: 1px;
  }

  .hive-res-icon-img {
    width: 10px;
    height: 10px;
  }

  .hive-res-val {
    min-width: 8px;
    font-size: 8.5px;
  }

  .hive-menubar .hive-res-more-btn {
    height: 20px;
    min-height: 20px;
    padding: 1px 2px;
    font-size: 7.8px;
  }

  .hive-mode-prefix,
  .hive-mode-arrow,
  .hive-ach-count-badge,
  #hive-menubar-ach-count,
  .hive-menubar-ach-count {
    display: none !important;
  }

  .hive-mode-pod {
    padding: 1px;
    gap: 1px;
    height: 20px;
    flex: 0 0 auto;
  }

  .hive-mode-name {
    letter-spacing: 0;
  }

  .hive-menubar .hive-mode-btn,
  .hive-menubar .hive-achievements-menubar-btn {
    padding: 1px 2px;
    font-size: 8px;
    gap: 1px;
    height: 18px;
    min-height: 18px;
    letter-spacing: 0;
  }

  .hive-season-pod {
    min-width: 48px;
    max-width: 104px;
    height: 20px;
    padding: 1px 2.5px;
    gap: 1px;
    flex: 1 1 48px;
  }

  .hive-season-top {
    font-size: 7.8px;
    gap: 2px;
    line-height: 1;
  }

  .hive-season-pod .hive-meter-track {
    height: 4px;
  }

  .hive-btn.hive-menubar-collapse-btn,
  .hive-menubar-collapse-btn {
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 1px 3px;
  }

  .hive-menubar .hive-quick-strip {
    gap: 2px;
  }

  .hive-menubar .hive-quick-strip .hive-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 2.5px;
    font-size: 8.5px;
    gap: 1.5px;
    min-height: 20px;
  }

  .hive-menubar .hive-quick-strip .hive-btn-icon {
    flex: 0.65 1 auto;
    padding: 2px 2px;
  }

  .in-game-chrome {
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    right: max(6px, calc(var(--safe-right, 0px) + 6px));
    width: calc(100vw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    flex-wrap: nowrap;
    gap: 3px;
  }

  .in-game-chrome:has(#btn-pwa-update-ingame:not([hidden])) {
    flex-wrap: wrap;
    row-gap: 3px;
  }

  .in-game-chrome .chrome-pill {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 3px 4px;
    font-size: 8.5px;
    gap: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .in-game-chrome .chrome-pill .symbol-icon {
    width: 10px;
    height: 10px;
    min-width: 10px;
    margin-right: 1px;
    flex-shrink: 0;
  }

  .hive-tutorial-card,
  .hive-campaign-hud-tracker,
  .hive-window-sandbox {
    left: max(6px, calc(var(--safe-left, 0px) + 6px));
    right: max(6px, calc(var(--safe-right, 0px) + 6px));
    width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
    max-width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
  }
}

@media (max-width: 420px) {
  .hive-mode-icon {
    display: none;
  }

  .hive-res-pod {
    padding: 1px 1.5px;
    gap: 1px;
  }

  .hive-res-val {
    min-width: 7px;
    font-size: 8px;
  }

  .hive-menubar .hive-res-more-btn {
    padding: 1px 1.5px;
    font-size: 7.5px;
  }
}

@media (max-width: 380px) {
  .in-game-chrome {
    flex-wrap: wrap;
    row-gap: 3px;
  }

  .in-game-chrome .chrome-pill {
    font-size: 8px;
    padding: 2.5px 3.5px;
  }
}

@media (max-width: 359.98px) {
  .hive-res-pod {
    padding: 0 1px;
    gap: 1px;
    font-size: 7.5px;
  }

  .hive-res-icon-img {
    width: 8px;
    height: 8px;
  }

  .hive-res-val {
    min-width: 6px;
    font-size: 7.5px;
  }

  .hive-menubar .hive-res-more-btn {
    padding: 0 1.5px;
    font-size: 7px;
  }

  .hive-mode-icon,
  .hive-mode-arrow,
  .hive-ach-icon {
    display: none;
  }

  .hive-menubar .hive-mode-btn,
  .hive-menubar .hive-achievements-menubar-btn {
    padding: 1px 1.5px;
    font-size: 7.2px;
  }

  .hive-season-pod {
    min-width: 42px;
    padding: 1px 2px;
    flex: 1 1 42px;
  }

  .hive-season-top {
    font-size: 7px;
  }

  .hive-btn.hive-menubar-collapse-btn,
  .hive-menubar-collapse-btn {
    min-width: 18px;
    padding: 1px 2px;
  }
}

@media (max-height: 600px), (max-width: 380px) {
  .hive-window-inspector:not(.is-details-expanded) .hive-window-body {
    padding: 3px;
    gap: 2px;
  }

  .hive-window-inspector:not(.is-details-expanded) .hive-preview-well {
    width: 36px;
    height: 34px;
  }

  .hive-window-inspector:not(.is-details-expanded) .hive-preview-well canvas {
    width: 32px;
    height: 30px;
  }

  .hive-window-inspector:not(.is-details-expanded) .hive-inspector-sub {
    font-size: 8.5px;
    line-height: 1.15;
  }

  .hive-window-inspector:not(.is-details-expanded) .hive-inspector-storage {
    padding: 1.5px 3px;
    font-size: 8.5px;
    line-height: 1.15;
  }
}

/* ==========================================================================
   Colony Command Start Screen (#hive-start-screen)
   ========================================================================== */

.hive-start-launcher-btn {
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 800;
  color: #ffe082;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.hive-start-screen {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: max(8px, calc(var(--safe-top, 0px) + 8px))
    max(8px, calc(var(--safe-right, 0px) + 8px))
    max(8px, calc(var(--safe-bottom, 0px) + 8px))
    max(8px, calc(var(--safe-left, 0px) + 8px));
  z-index: 1050;
  background: rgba(14, 10, 6, 0.86);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  box-sizing: border-box;
}

.hive-start-screen.is-hidden {
  display: none !important;
  pointer-events: none !important;
}

/* When Start Screen is active, elevate HUD root above all chrome/controls and hide background toolbars/windows */
#hive-hud-root[data-menu-state="start_screen"] {
  z-index: 1050;
}

#hive-hud-root[data-menu-state="start_screen"] .hive-menubar,
#hive-hud-root[data-menu-state="start_screen"] .hive-dock-wrap,
#hive-hud-root[data-menu-state="start_screen"] .hive-window,
#hive-hud-root[data-menu-state="start_screen"] .hive-tutorial-card,
#hive-hud-root[data-menu-state="start_screen"] .hive-campaign-hud-tracker,
#hive-hud-root[data-menu-state="start_screen"] .hive-threat-alert,
#hive-hud-root[data-menu-state="start_screen"] .hive-boss-meter-container,
body[data-menu-state="start_screen"] #in-game-chrome,
body[data-menu-state="start_screen"] #html-mobile-controls {
  display: none !important;
  pointer-events: none !important;
}

/* Style #btn-show-landing when slotted into the Start Screen header */
.hive-start-screen .hive-titlebar-actions #btn-show-landing {
  appearance: none;
  background: #4a3b2e;
  color: #f7ebd4;
  border-top: 2px solid #9e8468;
  border-left: 2px solid #9e8468;
  border-right: 2px solid #17110b;
  border-bottom: 2px solid #17110b;
  border-radius: 0;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
}

.hive-start-screen .hive-titlebar-actions #btn-show-landing:hover {
  background: #5c4939;
}

.hive-start-screen .hive-titlebar-actions #btn-show-landing .pill-icon svg {
  width: 12px;
  height: 12px;
}

/* Top Menu Collapse Toggle Button (visible on mobile & compact screens) */
.hive-btn.hive-menubar-collapse-btn,
.hive-menubar-collapse-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  min-width: 24px;
  min-height: 22px;
  margin-left: auto;
  flex-shrink: 0;
  color: #ffd54f;
}

@media (max-width: 1099px), (max-height: 699px) {
  .hive-btn.hive-menubar-collapse-btn,
  .hive-menubar-collapse-btn {
    display: inline-flex;
  }
}

.hive-menubar.is-top-collapsed {
  min-height: 26px !important;
}

.hive-menubar.is-top-collapsed .hive-quick-strip,
.hive-menubar.is-top-collapsed .hive-ctrl-strip,
.hive-menubar.is-top-collapsed .hive-res-pod-secondary,
body.is-top-menu-collapsed #in-game-chrome {
  display: none !important;
}

/* When top menu is collapsed on mobile/compact screens, compact Row 1 to <=28px and expose #hive-pause-menu-btn as an icon-only button so Pause remains 1-tap accessible */
@media (max-width: 767.98px), (max-height: 500px) {
  .hive-menubar.is-top-collapsed {
    padding-top: max(2px, calc(var(--safe-top, 0px) + 2px));
    padding-bottom: 2px;
  }

  .hive-menubar.is-top-collapsed .hive-res-pod,
  .hive-menubar.is-top-collapsed .hive-mode-pod,
  .hive-menubar.is-top-collapsed .hive-season-pod,
  .hive-menubar.is-top-collapsed .hive-res-more-btn,
  .hive-menubar.is-top-collapsed .hive-menubar-collapse-btn {
    height: 20px;
    min-height: 20px;
  }

  .hive-menubar.is-top-collapsed .hive-mode-btn,
  .hive-menubar.is-top-collapsed .hive-achievements-menubar-btn {
    height: 18px;
    min-height: 18px;
  }

  .hive-menubar.is-top-collapsed #hive-pause-menu-btn {
    display: inline-flex !important;
    padding: 1px 2px;
    height: 18px;
    min-height: 18px;
    min-width: 16px;
    font-size: 8px;
    gap: 0;
  }

  .hive-menubar.is-top-collapsed #hive-pause-menu-btn > span {
    display: none !important;
  }
}

.hive-start-screen-panel {
  pointer-events: auto;
  width: min(1160px, 100%);
  max-height: 100%;
  background: #2b2119;
  color: #f7ebd4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.82);
}

.hive-start-screen-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.hive-start-intro {
  background: #1f1711;
  padding: 6px 10px;
  font-size: 11px;
  color: #e6d2b5;
  line-height: 1.35;
}

.hive-start-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.hive-start-card {
  background: #36291f;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hive-start-card.is-active-mode {
  outline: 1px solid #ffd54f;
  background: #3f3023;
}

.hive-start-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.hive-start-spec-pill {
  background: rgba(20, 14, 10, 0.65);
  border: 1px solid rgba(255, 213, 79, 0.25);
  color: #ffe082;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-start-card-desc {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  color: #d7c4aa;
}

.hive-start-sublist {
  background: #1d150f;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 175px;
  overflow-y: auto;
  flex: 1 1 auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.hive-start-stage-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 9.5px;
  color: #e6d2b5;
  padding: 2px;
}

.hive-start-stage-summary > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hive-start-subitem-btn {
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.hive-start-subitem-btn.is-active {
  border-color: #ffd54f;
  background: #4e3b29;
}

.hive-start-subitem-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

.hive-start-subitem-title {
  font-size: 10px;
  font-weight: 800;
  color: #fff3e0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-start-subitem-badge {
  font-size: 8.5px;
  font-weight: 900;
  color: #ffd54f;
  background: rgba(0, 0, 0, 0.38);
  padding: 1px 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hive-start-subitem-sub {
  font-size: 8.8px;
  color: #bcaaa4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-start-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: auto;
  padding-top: 2px;
  flex-wrap: wrap;
}

.hive-start-card-foot > .hive-btn {
  flex: 1 1 auto;
  justify-content: center;
}

@media (max-width: 1080px) {
  .hive-start-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px), (max-height: 500px) {
  .hive-start-screen {
    padding: var(--safe-top, 0px) var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px);
  }

  .hive-start-screen-panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .hive-start-screen .hive-titlebar {
    height: auto !important;
    max-height: none !important;
    min-height: 32px;
    flex-wrap: wrap;
    padding: 6px 8px;
    gap: 5px;
  }

  .hive-start-screen .hive-titlebar-text {
    font-size: 11px;
  }

  .hive-start-screen .hive-titlebar-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
  }

  .hive-start-screen .hive-titlebar-actions > .hive-btn,
  .hive-start-screen .hive-titlebar-actions > #btn-show-landing {
    flex: 1 1 auto;
    min-height: 26px;
    padding: 4px 6px;
    font-size: 10px;
    justify-content: center;
  }

  .hive-start-screen .hive-mode-current-pill {
    font-size: 9px;
    padding: 3px 6px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .hive-start-cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hive-start-sublist {
    max-height: none;
    overflow-y: visible;
  }

  .hive-start-subitem-btn {
    padding: 6px 8px;
    min-height: 36px;
  }

  .hive-start-card-foot > .hive-btn {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 10.5px;
  }
}

/* Mobile & Touch Input Responsiveness for All Menus, Modals & Floating Panels */
.hive-mode-dialog-body,
.hive-pause-dialog-body,
.hive-pause-body,
.hive-campaign-body,
.hive-skill-dialog-body,
.hive-splash-body,
.hive-briefing-scroll,
.hive-ach-tab-body,
.hive-window-body,
.hive-tutorial-card,
.hive-tutorial-hints-list,
dialog.hive-dialog,
.modal-card {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.hive-btn,
.hive-titlebar-btn,
.hive-dock-slot,
.chrome-pill,
.hive-ach-tab-btn,
.hive-ach-cat-btn,
.hive-campaign-card,
.hive-challenge-card,
.hive-mode-card,
.hive-toggle-row,
.dialog-close-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hive-btn svg,
.hive-titlebar-btn svg,
.chrome-pill svg,
.dialog-close-btn svg {
  pointer-events: none;
}

@media (max-width: 767.98px), (max-height: 500px) {
  .hive-titlebar-btn {
    min-width: 26px;
    min-height: 22px;
    padding: 2px 5px;
  }

  .hive-tutorial-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .hive-tutorial-card.is-collapsed .hive-tutorial-header {
    flex-wrap: nowrap;
    padding: 2px 6px;
    min-height: 26px;
  }

  .hive-tutorial-card.is-collapsed #btn-tutorial-restart,
  .hive-tutorial-card.is-collapsed #btn-tutorial-skip,
  .hive-tutorial-card.is-collapsed #btn-tutorial-hints {
    display: none !important;
  }

  .hive-tutorial-actions .hive-btn {
    min-height: 22px;
    padding: 2px 5px;
    font-size: 9px;
  }
}

/* User-dragged floating windows can move freely across the viewport (including over the bottom dock) while staying below the Start Screen (z-index: 44) */
.hive-window[data-user-dragged="true"],
.hive-tutorial-card[data-user-dragged="true"],
.hive-campaign-hud-tracker[data-user-dragged="true"] {
  z-index: 36 !important;
}

/* Active Colony Resume Banner on Start Screen */
.hive-start-resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(46, 125, 50, 0.28) 0%, rgba(39, 28, 20, 0.94) 100%);
  border: 2px solid #66bb6a;
  flex-wrap: wrap;
}

.hive-start-resume-info,
.hive-start-resume-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}

.hive-start-resume-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.hive-start-resume-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.7px;
  color: #a5d6a7;
}

.hive-start-resume-age {
  font-size: 9px;
  font-weight: 800;
  color: #ffe082;
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid rgba(255, 224, 130, 0.3);
}

.hive-start-resume-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff8e1;
}

.hive-start-resume-telemetry {
  font-size: 10px;
  color: #dcedc8;
}

.hive-start-resume-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* AAA Pause & Colony Session Menu Dialog */
.hive-pause-dialog {
  width: min(560px, calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px)));
  max-width: calc(100dvw - 12px - var(--safe-left, 0px) - var(--safe-right, 0px));
  max-height: min(88dvh, 720px, calc(100dvh - 16px - var(--safe-top, 0px) - var(--safe-bottom, 0px)));
  margin: auto;
  padding: 0;
  border: 3px solid #d49b35;
  background: #221811;
  color: #fff3e0;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.88);
  overflow: hidden;
}

.hive-pause-dialog[open] {
  display: flex;
  flex-direction: column;
}

.hive-pause-dialog::backdrop {
  background: rgba(10, 7, 5, 0.76);
  backdrop-filter: blur(3px);
}

.hive-pause-dialog-body,
.hive-pause-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

@media (max-width: 600px), (max-height: 680px) {
  .hive-pause-dialog-body,
  .hive-pause-body {
    padding: 8px 10px;
    gap: 7px;
  }

  .hive-pause-telemetry-card,
  .hive-pause-status-card {
    padding: 7px 9px;
    gap: 5px;
  }

  .hive-pause-action-btn,
  .hive-pause-btn {
    padding: 6px 8px;
    gap: 6px;
  }
}

.hive-pause-telemetry-card,
.hive-pause-status-card {
  background: #18110c;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hive-pause-telemetry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.hive-pause-mode-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hive-pause-mode-title strong {
  font-size: 13px;
  font-weight: 900;
  color: #fff8e1;
}

.hive-pause-storage-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  color: #a5d6a7;
  background: rgba(46, 125, 50, 0.22);
  border: 1px solid rgba(102, 187, 106, 0.45);
  padding: 2px 7px;
  border-radius: 3px;
}

.hive-pause-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

@media (max-width: 520px) {
  .hive-pause-metrics-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hive-pause-metric {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 155, 53, 0.24);
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hive-pause-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #d7c4aa;
  text-transform: uppercase;
}

.hive-pause-metric strong {
  font-size: 11.5px;
  font-weight: 900;
  color: #fff8e1;
}

.hive-pause-save-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(46, 125, 50, 0.26);
  border: 1px solid #66bb6a;
  color: #e8f5e9;
  font-size: 10.5px;
  font-weight: 700;
}

.hive-pause-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hive-pause-action-btn,
.hive-pause-btn {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  white-space: normal;
}

.hive-pause-action-left,
.hive-pause-btn-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

.hive-pause-action-left > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hive-pause-action-left strong,
.hive-pause-btn-text strong {
  font-size: 11.5px;
  color: #fff8e1;
  white-space: normal;
  line-height: 1.25;
}

.hive-pause-action-left small,
.hive-pause-btn-text small {
  font-size: 9.5px;
  color: #d7c4aa;
  font-weight: 500;
  white-space: normal;
  line-height: 1.25;
}

.hive-pause-action-btn.hive-btn-accent .hive-pause-action-left strong,
.hive-pause-action-btn.hive-btn-accent .hive-pause-action-left small,
.hive-pause-btn.hive-btn-accent .hive-pause-btn-text strong,
.hive-pause-btn.hive-btn-accent .hive-pause-btn-text small {
  color: #21150a;
}

.hive-pause-hotkey {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffe082;
  white-space: nowrap;
  flex-shrink: 0;
}

.hive-pause-action-btn.hive-btn-accent .hive-pause-hotkey {
  background: rgba(33, 21, 10, 0.18);
  border-color: rgba(33, 21, 10, 0.35);
  color: #21150a;
}

@media (max-width: 599.98px) {
  .hive-pause-hotkey {
    display: none;
  }
}