/* ============================================================
   SYSTEM MAP - Fullscreen map styles
   ============================================================ */

/* --- Fullscreen System Map --- */
#screen-map {
  position: relative;
  width: 100%;
}

#screen-map.active {
  display: block;
  position: fixed;
  top: calc(var(--banner-offset) + var(--topbar-height) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  /* Ticker is hidden on the map tab — do not reserve its height (avoids a
     dead band that shifts bottom overlays). */
  bottom: calc(var(--nav-height) + var(--bottom-sai, 0px));
  overflow: hidden;
  overscroll-behavior: none;
  z-index: 10;
  /* Shared insets for absolute overlays inside the map canvas. */
  /* Nav moved to bridge toolbar — overlays can sit near the top edge. */
  --map-overlay-top: 12px;
  --map-overlay-bottom: 12px;
}

/* Mobile: action orb protrudes above the bottom nav into the map viewport. */
@media (max-width: 1439.98px) {
  #screen-map.active {
    --map-overlay-bottom: 32px;
  }
}

/* Map is a fixed viewport — parent scroll containers must not scroll behind it. */
#game-ui:has(#screen-map.active) {
  overflow: hidden;
}

/* News ticker is decluttered out of the map tab regardless of JS show state. */
body:has(#screen-map.active) #news-ticker {
  display: none !important;
}

.map-main-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

.map-split-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Resize seam: drag to trade space between the 3D map and the dashboard.
   Mirrors the colony-theater grabber. Absolutely positioned on the seam so
   it never disturbs the grid track count across the bridge states. */
.map-resize-handle {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--kc-map-bridge-h, max(108px, 28vh));
  transform: translateY(50%);
  z-index: 6;
  height: 20px;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
}

/* Grab pad biased toward the map side: extending it down would sit on top
   of the bridge toolbar and swallow taps on the level buttons. */
.map-resize-handle::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-75%);
  height: 44px;
}
.map-resize-handle i {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
  pointer-events: none;
}

.map-resize-handle.is-dragging i,
.map-resize-handle:active i {
  background: rgba(var(--accent-rgb), 0.95);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}

/* Handle + var-driven split only on phone/tablet in the system-level
   celestial-bodies view. Higher specificity than the plain bridge rules so
   the persisted height wins; hidden (and grid untouched) in every other state. */
/* Map-centric (MEJORAS bloque 13): the seam is draggable at every level and
   width; the dashboard height always follows --kc-map-bridge-h. */
.map-bridge-mode .map-split-shell > .map-resize-handle {
  display: flex;
}

/* A pending tactical order owns the bottom edge. The resize seam otherwise
   sits in a higher stacking context and can steal the confirmation tap. */
body:has(.kc-scmd-strip:not([hidden]), .kc-scmd-chip:not([hidden]), .kc-scmd-hud.is-targeting) .map-resize-handle {
  opacity: 0;
  pointer-events: none;
}

.map-viewport {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Bridge layout: the map owns the screen; the dashboard strip is a band whose
   height the drag handle controls (--kc-map-bridge-h). Collapsed default
   mirrors the header's mass (map-centric symmetry, MEJORAS bloque 13). Grid
   avoids flex min-height (vh) fighting the panel and getting clipped. */
.map-bridge-mode .map-split-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--kc-map-bridge-h, 60px);
  flex: 1;
  min-height: 0;
}

.map-bridge-mode .map-viewport {
  flex: none;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}

/* A selected fleet needs both a readable tactical contact and a tappable
   command surface. On narrow screens temporarily bias the resizable split
   toward the map; otherwise the sticky header and dashboard can leave less
   vertical room than those two elements physically require. */
@media (max-width: 700px) {
  .map-bridge-mode .map-split-shell:has(
    .kc-scmd-strip:not([hidden]),
    .kc-scmd-hud.is-targeting,
    .kc-scmd-chip:not([hidden])
  ) {
    grid-template-rows: minmax(0, 70%) minmax(0, 30%);
  }
  .map-sys3d-layer:has(
    .kc-scmd-strip:not([hidden]),
    .kc-scmd-hud.is-targeting,
    .kc-scmd-chip:not([hidden])
  ) :is(
    .map-sys3d-sensor-toggle,
    .map-sys3d-radar,
    .map-sys3d-camera-console
  ) {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 360px) {
  /* The gesture hint is supporting copy, not an action. At the minimum phone
     width it must yield the command row to formation and posture controls. */
  .kc-scmd-strip .kc-scmd-direct-hint { display: none; }
}

.map-viewport > .system-map-container {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  align-self: stretch;
}

.map-bridge-panel {
  flex: none;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(var(--accent-rgb), 0.32);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), transparent 22px),
    linear-gradient(180deg, rgba(8, 14, 28, 0.97), rgba(4, 8, 18, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(var(--accent-rgb), 0.14),
    0 -10px 32px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  z-index: 4;
  position: relative;
}

.map-bridge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 12px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.16);
  flex: 0 0 auto;
  min-height: 44px;
  position: relative;
}

.map-bridge-toolbar-sections {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.map-bridge-toolbar-sections::-webkit-scrollbar {
  display: none;
}

.map-bridge-section {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.map-bridge-toolbar-sep {
  flex: 0 0 auto;
}

.map-bridge-toolbar .map-nav-cluster {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  flex: 0 0 auto;
  min-width: 0;
}

.map-bridge-toolbar .map-coords {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  flex: 0 0 auto;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.map-bridge-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-bridge-breadcrumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Persistent spatial route. It lives beside the camera/roster controls so
   every map level keeps its parent context visible, even with the bridge
   collapsed to its toolbar on a phone. */
.map-bridge-toolbar .map-bridge-spatial-path {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(46vw, 520px);
  padding: 0 8px 0 0;
  gap: 2px;
  border-right: 1px solid rgba(var(--accent-rgb), 0.2);
  scroll-behavior: smooth;
}

.map-bridge-spatial-path .map-bridge-crumb {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 8px;
  letter-spacing: 0.07em;
}

.map-bridge-spatial-path .map-bridge-crumb:not(.is-active):hover,
.map-bridge-spatial-path .map-bridge-crumb:not(.is-active):focus-visible {
  border-color: rgba(var(--accent-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.07);
}

.map-bridge-spatial-path .map-bridge-crumb.is-active {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06));
  box-shadow: inset 0 0 12px rgba(var(--accent-rgb), 0.06), 0 0 12px rgba(var(--accent-rgb), 0.08);
}

.map-bridge-breadcrumb[hidden] {
  display: none !important;
}

.map-bridge-breadcrumb::-webkit-scrollbar {
  display: none;
}

.map-bridge-crumb {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: rgba(var(--accent-rgb), 0.72);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 4px;
  cursor: pointer;
  white-space: nowrap;
}

.map-bridge-crumb:hover,
.map-bridge-crumb:focus-visible {
  color: rgba(var(--accent-rgb), 0.95);
}

.map-bridge-crumb.is-active {
  color: #f8fafc;
}

.map-bridge-crumb-sep {
  flex: 0 0 auto;
  color: rgba(var(--accent-rgb), 0.35);
  font-size: 0.7rem;
  user-select: none;
}

.map-bridge-browser {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 0 8px 8px;
  overflow: hidden;
}

.map-bridge-browser[hidden] {
  display: none !important;
}

.map-bridge-browse-list {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 4px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.38) rgba(6, 10, 22, 0.72);
  -webkit-overflow-scrolling: touch;
}

.map-bridge-browse-list::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.map-bridge-browse-list::-webkit-scrollbar-track {
  background: rgba(6, 10, 22, 0.72);
  border-radius: 4px;
}

.map-bridge-browse-list::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.32);
  border-radius: 4px;
  border: 1px solid rgba(6, 10, 22, 0.45);
}

.map-bridge-browse-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.52);
}

.map-bridge-browse-grid {
  display: grid;
  align-content: start;
  gap: 8px;
}

.map-bridge-browse-grid--galaxies {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

/* Universe command deck: keep strategic context visible while the canvas is
   zoomed beyond individual systems. The summary and galaxy cards share the
   same data as the canvas, so the two surfaces never describe different
   worlds. */
.map-universe-overview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 1.8fr) repeat(4, minmax(76px, 0.7fr));
  gap: 7px;
  align-items: stretch;
  padding: 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 9px;
  background:
    linear-gradient(105deg, rgba(var(--accent-rgb), 0.11), transparent 46%),
    rgba(4, 9, 20, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.map-universe-overview-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 2px 5px;
}

.map-universe-overview-head strong {
  font-size: 0.9rem;
  color: #f4fbff;
  letter-spacing: 0.025em;
}

.map-universe-overview-head > span:last-child,
.map-universe-overview-hint {
  font-size: 0.55rem;
  line-height: 1.3;
  color: rgba(180, 203, 217, 0.8);
}

.map-universe-overview-kicker {
  font-size: 0.48rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.86);
}

.map-universe-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.13);
  border-radius: 7px;
  background: rgba(7, 15, 29, 0.72);
}

.map-universe-stat strong {
  font-size: 0.82rem;
  line-height: 1;
  color: #dffcff;
}

.map-universe-stat span {
  margin-top: 3px;
  font-size: 0.48rem;
  line-height: 1.15;
  color: rgba(166, 189, 205, 0.84);
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.map-universe-overview-hint {
  grid-column: 1 / -1;
  margin: -1px 5px 0;
}

.map-bridge-browse-grid--systems {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
}

.map-bridge-browse-grid--contacts {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

.map-bridge-browse-tile.is-current {
  border-color: rgba(var(--accent-rgb), 0.72);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.16);
}

.map-bridge-browse-tile--planet.is-own {
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: inset 3px 0 0 rgba(0, 240, 255, 0.75);
  background: rgba(0, 240, 255, 0.05);
}

.map-bridge-browse-tile--planet.is-hostile {
  border-color: rgba(239, 68, 68, 0.45);
}

.map-bridge-browse-tile--planet.is-pirate {
  border-color: rgba(248, 113, 113, 0.52);
}

.map-bridge-browse-tile--planet.is-unexplored {
  opacity: 0.82;
}

.map-bridge-browse-thumb--sun {
  border-color: rgba(255, 215, 0, 0.42);
  background: radial-gradient(circle at 50% 45%, rgba(40, 34, 10, 0.9), rgba(4, 6, 14, 0.95));
}

.map-bridge-browse-thumb--asteroid {
  position: relative;
  border-color: rgba(245, 158, 11, 0.52);
  background: rgba(6, 10, 22, 0.92);
}

.map-bridge-browse-thumb--fleet {
  border-color: rgba(var(--accent-rgb), 0.42);
  border-radius: 10px;
}

.map-bridge-browse-thumb-img--leader {
  object-position: center top;
}

.map-bridge-browse-grid-hint {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 0 2px;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: rgba(var(--accent-rgb), 0.62);
  text-transform: uppercase;
}

.map-bridge-browser.has-preview .map-bridge-browse-list {
  flex: 0 0 48%;
}

.map-bridge-browser:not(.has-preview) .map-bridge-browse-preview {
  display: none;
}

/* Galaxy cell dashboard takes the whole pane: the system list steps aside for
   the selected cell's detail card instead of splitting the width. */
.map-bridge-browser--galaxy-detail .map-bridge-browse-list {
  display: none !important;
}

.map-bridge-browser--galaxy-detail .map-bridge-browse-preview {
  flex: 1 1 auto;
  border-left: none;
  padding-left: 0;
}

.map-bridge-browse-preview {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid rgba(var(--accent-rgb), 0.14);
  padding-left: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.38) rgba(6, 10, 22, 0.72);
  -webkit-overflow-scrolling: touch;
}

.map-bridge-browse-preview::-webkit-scrollbar {
  width: 5px;
}

.map-bridge-browse-preview::-webkit-scrollbar-track {
  background: rgba(6, 10, 22, 0.72);
  border-radius: 4px;
}

.map-bridge-browse-preview::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.32);
  border-radius: 4px;
}

/* Cell dashboard mode: the pane stops scrolling as a whole; the body list
   scrolls in its own area and the action row stays pinned at the bottom,
   visible and tappable at every sheet height. */
.map-bridge-browse-preview.map-bridge-browse-preview--dash {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.map-bridge-browse-preview--dash > #map-bridge-browse-preview-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.map-bridge-browse-preview--dash .map-galaxy-selection-shell--bridge {
  flex: 1 1 auto;
  min-height: 0;
}

.map-bridge-browse-preview--dash .map-cell-tabbody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.38) rgba(6, 10, 22, 0.72);
  padding-bottom: 4px;
}

.map-bridge-browse-preview--dash .map-galaxy-selection-actions {
  flex: none;
  padding-top: 6px;
  padding-bottom: 4px;
}

/* Single scroller in pinned mode: the body roster loses its own inner
   scroll cap so the tabbody is the one scroll area above the actions. */
.map-bridge-browse-preview--dash .map-cell-tabbody .map-cell-bodies {
  max-height: none;
  overflow-y: visible;
}

/* Unexplored-state card: designation + passive signal + probe CTA, shown
   whenever the selected entity has no survey data (never an empty pane). */
.map-cell-unexplored {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px dashed rgba(var(--accent-rgb), 0.28);
  border-radius: 8px;
  background: rgba(6, 10, 22, 0.6);
}

.map-cell-unx-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-cell-unx-title {
  font-size: 0.86rem;
  color: #e2e8f0;
}

.map-cell-unx-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.map-cell-unx-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.map-cell-unx-info {
  flex: 1 1 auto;
  min-width: 0;
}

.map-cell-unx-cta {
  flex: none;
  white-space: nowrap;
}

/* System-view context line under the dashboard title */
.map-cell-ctxline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.66rem;
  color: var(--text-secondary);
}

.map-bridge-browse-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 6px 4px 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  background: rgba(6, 10, 22, 0.78);
  color: #e2e8f0;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.map-bridge-browse-tile:hover,
.map-bridge-browse-tile:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.58);
  background: rgba(var(--accent-rgb), 0.08);
}

.map-bridge-browse-tile.is-selected {
  border-color: rgba(var(--accent-rgb), 0.9);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.22);
}

.map-bridge-browse-tile.is-home .map-bridge-browse-thumb--galaxy {
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35), 0 0 8px rgba(0, 240, 255, 0.18);
}

.map-bridge-browse-thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 56px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}

.map-bridge-browse-thumb--galaxy {
  position: relative;
  max-width: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(30, 40, 70, 0.9), rgba(4, 6, 14, 0.95));
}

.map-universe-capital-badge {
  position: absolute;
  right: -1px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(109, 244, 255, 0.8);
  border-radius: 50%;
  color: #a9f8ff;
  background: rgba(5, 20, 31, 0.96);
  box-shadow: 0 0 9px rgba(0, 240, 255, 0.3);
}

.map-universe-capital-badge svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.map-bridge-browse-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.map-bridge-browse-thumb-dot {
  width: 42%;
  height: 42%;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.55);
  box-shadow: 0 0 6px rgba(100, 116, 139, 0.35);
}

.map-bridge-browse-thumb--owned {
  border-color: rgba(0, 240, 255, 0.55);
}

.map-bridge-browse-thumb--occupied {
  border-color: rgba(148, 163, 184, 0.55);
}

.map-bridge-browse-thumb--explored {
  border-color: rgba(217, 119, 6, 0.55);
}

.map-bridge-browse-thumb--explored .map-bridge-browse-thumb-dot {
  background: rgba(217, 119, 6, 0.65);
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.35);
}

.map-bridge-browse-thumb--unknown {
  border-color: rgba(71, 85, 105, 0.45);
  opacity: 0.82;
}

.map-bridge-browse-tile-title {
  width: 100%;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: #f1f5f9;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-bridge-browse-tile-sub {
  width: 100%;
  font-size: 0.52rem;
  line-height: 1.2;
  color: rgba(148, 163, 184, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-bridge-browse-row {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 6px;
  background: rgba(6, 10, 22, 0.72);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.map-bridge-browse-row:hover,
.map-bridge-browse-row:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}

.map-bridge-browse-row.is-selected {
  border-color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.18);
}

.map-bridge-browse-row-title {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #f1f5f9;
}

.map-bridge-browse-row-sub {
  font-size: 0.58rem;
  line-height: 1.25;
  color: rgba(148, 163, 184, 0.92);
}

.map-bridge-browse-empty {
  margin: 8px 4px;
  font-size: 0.65rem;
  color: rgba(148, 163, 184, 0.85);
}

.map-bridge-browse-idle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

.map-bridge-browse-idle-title {
  margin: 0;
  font-size: 0.9rem;
  color: #f1f5f9;
}

.map-bridge-browse-idle-meta,
.map-bridge-browse-idle-hint {
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.92);
}

.map-bridge-browse-enter {
  align-self: flex-start;
  margin-top: 4px;
}

.map-universe-galaxy-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(76px, 34%) 1fr;
  align-items: center;
  min-height: 100%;
  padding: 5px;
  overflow: hidden;
}

.map-universe-preview-art {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(1.12) contrast(1.06);
  opacity: 0.9;
  mask-image: radial-gradient(circle, #000 55%, transparent 73%);
}

.map-universe-preview-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.map-universe-preview-back {
  display: none;
}

.map-universe-preview-copy .map-bridge-browse-idle-title,
.map-universe-preview-copy .map-bridge-browse-idle-meta {
  margin: 0;
}

.map-universe-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.map-universe-preview-tags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  font: 600 0.48rem var(--font-mono);
  color: rgba(211, 250, 255, 0.92);
  background: rgba(var(--accent-rgb), 0.07);
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.map-universe-preview-tags svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

@media (max-width: 720px) {
  /* A phone dashboard is too narrow for the desktop list/detail split. Once
     a galaxy is selected, give its intelligence card the full sheet width;
     the in-card back action restores the complete galaxy roster. */
  .map-bridge-browser.has-preview:has(.map-universe-galaxy-preview) .map-bridge-browse-list {
    display: none;
  }

  .map-bridge-browser.has-preview:has(.map-universe-galaxy-preview) .map-bridge-browse-preview {
    flex: 1 1 100%;
    border-left: 0;
    padding-left: 0;
  }

  .map-universe-overview {
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    gap: 5px;
    padding: 6px;
  }

  .map-universe-overview-head,
  .map-universe-overview-hint {
    grid-column: 1 / -1;
  }

  .map-universe-overview-head {
    padding: 0 2px;
  }

  .map-universe-stat {
    padding: 5px 4px;
  }

  .map-universe-stat strong { font-size: 0.72rem; }
  .map-universe-stat span { font-size: 0.42rem; }

  .map-universe-galaxy-preview {
    grid-template-columns: 1fr;
    padding: 5px 7px;
  }

  .map-universe-preview-art {
    position: absolute;
    right: -18px;
    bottom: -24px;
    width: 116px;
    opacity: 0.25;
  }

  .map-universe-preview-copy { width: 100%; }
  .map-universe-preview-back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    min-height: 28px;
    padding: 3px 7px;
    color: rgba(var(--accent-rgb), 0.9);
    background: rgba(var(--accent-rgb), 0.07);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 999px;
    font-size: 0.46rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .map-universe-preview-back span {
    font-size: 0.9rem;
    line-height: 0;
  }
  .map-universe-preview-tags { flex-wrap: nowrap; }
  .map-universe-preview-tags span {
    padding: 2px 4px;
    font-size: 0.4rem;
    letter-spacing: 0.025em;
  }

  .map-universe-preview-copy .map-bridge-browse-enter {
    min-height: 26px;
    padding-block: 3px;
  }
}

/* ── Galaxy 3-group living-world list (Your systems / Frontier / Intel) ── */
.map-gg-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-gg-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.map-gg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 2px 5px;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.72);
}

/* --- Ahora rows: decision group reads heavier than the movement group --- */
.map-now-header .map-gg-ic {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.map-now-header--decide {
  color: rgba(241, 245, 249, 0.95);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.map-gg-row--now {
  align-items: stretch;
  min-height: 56px;
}

.map-gg-row--now .map-gg-main {
  justify-content: center;
}

.map-now-dir {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: 0.9;
}

.map-now-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.map-gg-row--now-decide .map-now-name {
  font-weight: 800;
}

.map-now-mission {
  flex: 0 0 auto;
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.96);
}

.map-gg-row--now .map-gg-sub .map-gg-dim {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-gg-row--now-decide .map-now-mission {
  padding: 1px 5px;
  border: 1px solid rgba(226, 232, 240, 0.45);
  border-radius: 3px;
  font-weight: 700;
}

.map-now-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  width: 88px;
}

.map-now-eta {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f1f5f9;
  white-space: nowrap;
}

.map-gg-open.map-now-act {
  min-width: 0;
  width: 100%;
  height: 22px;
  padding: 0 4px;
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-gg-hdot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.map-gg-hdot--own { background: #22d3ee; box-shadow: 0 0 6px rgba(34, 211, 238, 0.55); }
.map-gg-hdot--frontier { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
.map-gg-hdot--intel { background: #94a3b8; box-shadow: 0 0 6px rgba(148, 163, 184, 0.45); }
.map-gg-hdot--stationed { background: #a78bfa; box-shadow: 0 0 6px rgba(167, 139, 250, 0.5); }

.map-gg-hnote {
  font-size: 0.54rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-gg-hcount {
  margin-left: auto;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.56rem;
  line-height: 15px;
  text-align: center;
  color: rgba(226, 232, 240, 0.85);
  background: rgba(148, 163, 184, 0.16);
}

/* Imperio / Frontera / Contactos: individually framed controls, without a
   second dark slab behind the strip. */
/* Four tabs now: share the width by flex instead of a fixed 3-column grid,
   and paint an opaque strip so scrolled rows cannot bleed through it. */
.map-gg-subtabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 2px 0 8px;
  max-width: none;
  background: rgba(6, 11, 22, 0.98);
}
.map-gg-subtabs > .tab {
  flex: 1 1 0;
  min-width: 0;
}
.subtabs.surface-switch.map-gg-subtabs .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 4px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(20, 29, 48, 0.76), rgba(7, 12, 24, 0.76));
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.subtabs.surface-switch.map-gg-subtabs .tab:hover,
.subtabs.surface-switch.map-gg-subtabs .tab:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.56);
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--text-primary);
}
.subtabs.surface-switch.map-gg-subtabs .tab.active {
  border-color: rgba(var(--accent-rgb), 0.72);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.08));
  color: var(--cyan);
  box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.08), 0 0 10px rgba(var(--accent-rgb), 0.12);
}
.subtabs.surface-switch.map-gg-subtabs .tab > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subtabs.surface-switch.map-gg-subtabs .tab .badge {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
}
.subtabs.surface-switch.map-gg-subtabs .tab.active .badge {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--cyan);
}
.subtabs.surface-switch.map-gg-subtabs .tab:has(.badge:not([hidden])) {
  padding: 5px 8px;
}

/* Four tabs at phone width: the label owns the room, the badge shrinks. */
@media (max-width: 480px) {
  .map-gg-subtabs {
    gap: 3px;
  }
  .subtabs.surface-switch.map-gg-subtabs .tab,
  .subtabs.surface-switch.map-gg-subtabs .tab:has(.badge:not([hidden])) {
    gap: 2px;
    padding: 5px 2px;
  }
  .subtabs.surface-switch.map-gg-subtabs .tab > span:first-child {
    font-size: 0.52rem;
    letter-spacing: 0;
  }
  .subtabs.surface-switch.map-gg-subtabs .tab .badge {
    min-width: 13px;
    height: 13px;
    padding-inline: 2px;
    font-size: 0.44rem;
    line-height: 13px;
  }
}

.map-gg-subnote {
  margin: 0 2px 5px;
  font-size: 0.54rem;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Same row anatomy as the Imperio colony list (.brow): flat rows with
   hairline dividers, display-font title, mono micro sub. */
.map-gg-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

/* ── Map liveliness: one-shot event chips ── */
.map-live-pop {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(14, 24, 46, 0.94);
  color: #f1f5f9;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(190, 227, 255, 0.25);
  animation: map-live-pop-in 0.22s ease-out;
}

.map-live-pop .map-gg-ic {
  width: 11px;
  height: 11px;
  flex: none;
}

.map-live-pop.is-out {
  opacity: 0;
  transition: opacity 0.24s ease-out;
}

.map-live-pop.is-static {
  animation: none;
  transition: none;
}

@keyframes map-live-pop-in {
  from { opacity: 0; transform: translateY(3px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .map-live-pop {
    animation: none;
    transition: none;
  }
}

.map-gg-group .map-gg-row:last-child {
  border-bottom: none;
}

.map-gg-row:hover,
.map-gg-row:focus-visible {
  background: rgba(var(--accent-rgb), 0.08);
}

.map-gg-row--intel.is-stale { opacity: 0.62; }

.map-gg-row.is-selected {
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4);
}

.map-gg-row.is-recommended {
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5);
}

.map-gg-lead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.map-gg-thumb {
  width: 100%;
  height: 100%;
}

.map-gg-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Bigger sun art in TUS SISTEMAS rows: uncropped star glow, negative margins
   pin the footprint so the row height holds (matches the Imperio thumbs). */
.map-gg-row--own .map-gg-lead {
  width: 56px;
  height: 56px;
  margin: -9px -3px;
}

.map-gg-ic {
  width: 16px;
  height: 16px;
  display: block;
}

/* FLOTAS roster rows: bigger fleet art, rounded like the ship cards */
.map-gg-row--fleet .map-gg-lead {
  width: 44px;
  height: 44px;
  margin: -7px 0;
}

.map-gg-fleetart {
  border-radius: 8px;
}

/* FLOTAS roster: stationed-by-colony rows (colony thumb + ship-type chips +
   Enviar action). Meaning rides icon + label, never color alone. */
.map-gg-row--stationed .map-gg-lead {
  width: 44px;
  height: 44px;
  margin: -7px 0;
}

/* Soft hero art of the group's dominant hull behind the row, same recipe as
   the fleet dispatch form/Flotas cards but tuned down for a dense list row:
   lower opacity, no radial focus needed at this size. */
.map-gg-row--stationed::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--map-stationed-hero, none);
  background-size: cover;
  background-position: 50% 35%;
  background-repeat: no-repeat;
  opacity: 0.09;
  filter: blur(1px) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.85) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 0;
  animation: kc-hero-drift-c 54s ease-in-out infinite alternate;
  animation-play-state: var(--anim-state, running);
}
.map-gg-group .map-gg-row--stationed:nth-child(even)::before { animation-delay: -20s; }
@media (prefers-reduced-motion: reduce) {
  .map-gg-row--stationed::before { animation: none; }
}
@media (pointer: coarse) {
  .map-gg-row--stationed::before { animation: none; filter: none; opacity: 0.07; }
}
.map-gg-row--stationed .map-gg-lead,
.map-gg-row--stationed .map-gg-main,
.map-gg-row--stationed .map-gg-send {
  position: relative;
  z-index: 1;
}

.map-gg-shiprow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-top: 2px;
  min-width: 0;
}

.map-gg-shipchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  color: rgba(226, 232, 240, 0.9);
  white-space: nowrap;
}

.map-gg-shipchip-img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.map-gg-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.14);
  color: rgba(var(--accent-rgb), 0.95);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.map-gg-send:hover,
.map-gg-send:focus-visible {
  background: rgba(var(--accent-rgb), 0.24);
}

.map-gg-send .map-gg-ic {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* FLOTAS: no-ships-anywhere state guides to the shipyard instead of a dead end */
.map-fleets-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  text-align: center;
}

.map-fleets-empty-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.map-fleets-empty-ic .map-gg-ic {
  width: 20px;
  height: 20px;
}

.map-fleets-empty-title {
  margin: 0;
  font-size: 0.85rem;
  color: #f1f5f9;
}

.map-fleets-empty-hint {
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.4;
  color: rgba(148, 163, 184, 0.92);
  max-width: 280px;
}

.map-fleets-empty-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.map-fleets-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-fleets-cta .map-gg-ic {
  width: 13px;
  height: 13px;
}

.map-gg-sigmark,
.map-gg-srcmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.28);
}

.map-gg-sig--resource_rich { color: #f59e0b; }
.map-gg-sig--emission { color: #22d3ee; }
.map-gg-sig--anomaly { color: #a78bfa; }
.map-gg-sig--hostile_activity { color: #f87171; }
.map-gg-sig--none { color: rgba(100, 116, 139, 0.7); border-style: dashed; }
.map-gg-srcmark { color: rgba(148, 163, 184, 0.85); }
.map-gg-srcmark.src-quest { color: #c084fc; }
.map-gg-srcmark.src-alliance { color: #34d399; }
.map-gg-srcmark.src-consortium_map { color: #22d3ee; }

.map-gg-scan-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.6);
}

.map-gg-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-gg-go {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.75);
  padding: 0 2px 2px 0;
}

/* Selected system rows expose an explicit local-system entry action. */
.map-gg-open,
.map-cell-body-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.14);
  color: rgba(var(--accent-rgb), 0.95);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0 2px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.map-gg-open {
  min-width: 86px;
  width: auto;
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-gg-open:hover,
.map-gg-open:focus-visible,
.map-cell-body-open:hover,
.map-cell-body-open:focus-visible {
  background: rgba(var(--accent-rgb), 0.28);
}

.map-gg-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--e2-fs-title);
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-gg-coords { font-family: var(--font-mono); color: rgba(203, 213, 225, 0.92); font-size: 0.78rem; font-weight: 500; }

.map-gg-prog {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.map-gg-prog-fill {
  display: block;
  position: relative;
  height: 100%;
  border-radius: 2px;
  background: var(--cyan, #00f0ff);
  transition: width 1s linear;
  overflow: hidden;
}

.map-gg-prog-fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: kc-prog-sheen 2.4s linear infinite;
}

@keyframes kc-prog-sheen {
  to { left: 100%; }
}

.map-gg-rec {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b1220;
  background: #fbbf24;
}

.map-gg-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--e2-fs-micro);
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(203, 213, 225, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-gg-hint { font-style: italic; color: rgba(226, 232, 240, 0.92); }
.map-gg-dim { color: rgba(148, 163, 184, 0.92); }

.map-gg-str { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.map-gg-bar {
  width: 3px;
  height: 4px;
  border-radius: 1px;
  background: rgba(148, 163, 184, 0.45);
}
.map-gg-bar:nth-child(2) { height: 7px; }
.map-gg-bar:nth-child(3) { height: 10px; }
.map-gg-bar.on { background: currentColor; }

.map-gg-col { color: rgba(226, 232, 240, 0.96); white-space: nowrap; }
.map-gg-sep { color: rgba(148, 163, 184, 0.6); flex: 0 0 auto; }

.map-gg-eta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.64rem;
  color: rgba(226, 232, 240, 0.96);
  white-space: nowrap;
}
.map-gg-eta .map-gg-ic { width: 13px; height: 13px; color: rgba(203, 213, 225, 0.9); }

/* Docked-ships chip on SISTEMAS rows: ship glyph + total */
.map-gg-docked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.64rem;
  color: rgba(159, 232, 216, 0.96);
  white-space: nowrap;
}
.map-gg-docked .map-gg-ic { width: 12px; height: 12px; color: rgba(159, 232, 216, 0.9); fill: none; stroke: currentColor; stroke-width: 2; }

.map-gg-fresh {
  font-size: 0.64rem;
  color: rgba(203, 213, 225, 0.92);
  white-space: nowrap;
}
.map-gg-fresh.is-stale { color: rgba(203, 213, 225, 0.72); font-style: italic; }

.map-gg-srclabel { color: rgba(226, 232, 240, 0.96); }

/* Contact-system dashboard banner: state glyph + label, empire name,
   driver line and the contact deep-link */
.map-cell-mood-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.07);
}
.map-cell-mood-card .map-gg-mood {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.map-cell-mood-card .map-gg-mood-ic { width: 14px; height: 14px; }
.map-cell-mood-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.map-cell-mood-driver {
  font-size: var(--e2-fs-micro);
  color: var(--text-secondary);
  white-space: nowrap;
}
.map-cell-mood-card .map-gg-contact { margin-left: auto; }

/* Contact mood chip: shape-first ordinal scale, hue accompanies */
.map-gg-mood {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.64rem;
  white-space: nowrap;
}
.map-gg-mood-ic { width: 12px; height: 12px; flex: none; }
.map-gg-mood--hostile { color: #ff7a5a; }
.map-gg-mood--wary { color: #f5cd5f; }
.map-gg-mood--neutral { color: #a5b4c8; }
.map-gg-mood--friendly { color: #6ee18c; }
.map-gg-mood--allied { color: #5adcf0; }

.map-gg-contact {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.96);
  font: inherit;
  font-size: 0.92em;
  padding: 1px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.map-gg-contact:hover { background: rgba(255, 255, 255, 0.12); }

.map-gg-sub .rec-gain-kc { font-size: inherit; }
.rec-gain-kc.neg { color: #f59e0b; }

.map-gg-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 4px;
  font-size: 0.66rem;
  color: rgba(148, 163, 184, 0.85);
}
.map-gg-spin {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: rgba(var(--accent-rgb), 0.85);
  animation: map-gg-spin 0.7s linear infinite;
}
@keyframes map-gg-spin { to { transform: rotate(360deg); } }

.map-galaxy-selection-shell--bridge {
  padding-top: 4px;
}

.map-galaxy-selection-shell--bridge .map-galaxy-selection-head {
  padding-right: 0;
}

.map-bridge-browse-active .map-split-shell {
  grid-template-rows: minmax(0, 1fr) var(--kc-map-bridge-h, 60px);
}

.map-bridge-pane {
  flex: 1 1 auto;
  min-height: 0;
}

.map-bridge-browse-tile-go {
  display: none;
}

.map-bridge-compact .map-bridge-breadcrumb,
.map-bridge-compact .map-bridge-browser {
  display: flex !important;
}

.map-bridge-panel:not(.map-bridge-compact) #map-bridge-browser,
.map-bridge-panel:not(.map-bridge-compact) #map-bridge-breadcrumb {
  display: none !important;
}

.map-bridge-compact .map-split-shell {
  grid-template-rows: minmax(0, 1fr) var(--kc-map-bridge-h, 60px);
}

/* Map full-bleed (2026-07-10): collapsed = nav toolbar only, the map owns
   the screen; the dashboard appears transiently as a sheet on selection
   (KC.mapSheet). The block-13 band is retired. */
.map-split-shell.map-bridge-collapsed .map-bridge-body {
  display: none;
}

.map-bridge-panel[hidden] {
  display: none !important;
}

@media (max-width: 1439.98px) {
  .map-bridge-body {
    transition: max-height 0.26s ease, opacity 0.2s ease;
    overflow: hidden;
  }

}

@media (prefers-reduced-motion: reduce) {
  .map-bridge-body {
    transition: none !important;
  }
}

/* Back-to-list affordance in the toolbar (first in the level cluster): returns
   from a body's detail card to the celestial-bodies strip. Inherits the level
   button style; icon + label so meaning never rides on colour alone. */
.map-bridge-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 12px 0 9px;
  color: var(--cyan);
}
.map-bridge-back-btn[hidden] { display: none; }
.map-bridge-back-icon { width: 14px; height: 14px; flex: 0 0 auto; }

.map-bridge-idle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 2px 4px;
}

.map-bridge-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.72);
}

.map-bridge-title {
  font-size: 1.05rem;
  color: #f8fafc;
  letter-spacing: 0.04em;
}

.map-bridge-meta {
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.92);
}

.map-bridge-hint {
  margin-top: 6px;
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.78);
  font-style: italic;
}

.map-bridge-mode .map-action-btn {
  padding: 6px 10px;
  font-size: 0.72rem;
}

/* ── Compact bridge dashboard (orbital flyby strip) ── */
.map-bridge-dash {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile: wrapper is transparent, children flow as direct flex items */
.map-bridge-dash-main {
  display: contents;
}

.map-bridge-dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.map-bridge-dash-ident {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.map-bridge-dash-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.map-bridge-dash-kicker {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.72);
  line-height: 1.2;
}

.map-bridge-dash-title {
  font-size: 0.92rem;
  color: #f8fafc;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.map-bridge-dash-coords {
  font-size: 0.64rem;
  color: rgba(148, 163, 184, 0.88);
  line-height: 1.3;
  white-space: nowrap;
}

.map-bridge-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.map-bridge-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 6px;
  background: rgba(8, 14, 28, 0.72);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
}

.map-bridge-stat-label {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.76);
  line-height: 1.2;
}

.map-bridge-stat-value {
  font-size: 0.72rem;
  color: #e2e8f0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-bridge-dash-coords .planet-bonuses {
  display: inline;
  margin-left: 4px;
}

.map-bridge-dash-coords .planet-bonuses > span {
  font-size: 0.58rem;
  padding: 1px 4px;
}

.map-bridge-dash-actions {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.map-bridge-dash-actions .btn {
  padding: 4px 8px;
  font-size: 0.62rem;
}

.map-bridge-dash-body {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.map-bridge-dash-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: rgba(8, 12, 24, 0.85);
  flex-shrink: 0;
}

.map-bridge-dash-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-bridge-dash-thumb--feed .map-bridge-dash-rec {
  position: absolute;
  left: 3px;
  top: 3px;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  color: #f87171;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 3px;
  border-radius: 2px;
}

.map-bridge-dash-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.map-bridge-dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.map-bridge-dash-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.map-bridge-dash-specs > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
}

.map-bridge-dash-specs dt {
  margin: 0;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.78);
  flex-shrink: 0;
}

.map-bridge-dash-specs dd {
  margin: 0;
  font-size: 0.72rem;
  color: #e2e8f0;
  text-align: left;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-bridge-dash-specs .stat-fields-link {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.map-bridge-dash-spec-star {
  grid-column: 1 / -1;
}

.map-bridge-dash-spec-star dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  white-space: normal;
}

.map-bridge-dash-starline {
  white-space: nowrap;
}

.map-bridge-dash-spec-star .planet-bonuses {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
}

.map-bridge-dash-spec-star .planet-bonuses > span {
  font-size: 0.56rem;
  padding: 1px 4px;
}

.map-bridge-dash-mods {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}

.map-bridge-dash-mods-label {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
  flex-shrink: 0;
}

.map-bridge-dash-mods-none {
  font-size: 0.62rem;
  color: rgba(148, 163, 184, 0.6);
  font-style: italic;
}

.map-bridge-dash-mods .planet-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.map-bridge-dash-mods .planet-bonuses > span {
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Labeled bonus chips: icon + percentage + short resource name (mobile has no hover) */
.planet-bonuses--labeled > span { gap: 4px; }
.planet-bonuses--labeled .bonus-res {
  color: rgba(203, 213, 225, 0.85);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.map-bridge-dash-ratios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.map-bridge-dash-ratio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(8, 14, 28, 0.65);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.map-bridge-dash-ratio:hover {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.08);
}

.map-bridge-dash-ratio-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}

.map-bridge-dash-ratio-label .ratio-icon {
  width: 10px;
  height: 10px;
}

.map-bridge-dash-ratio-val {
  font-size: 0.72rem;
  line-height: 1.1;
}

.map-bridge-dash-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}

.map-bridge-dash-foot .btn-fleet-send,
.map-bridge-dash-foot .map-action-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px;
  font-size: 0.68rem;
}

.map-bridge-dash-empty {
  padding: 8px 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.map-bridge-dash--idle .map-bridge-dash-hint {
  margin: 0;
  padding: 6px 8px;
  font-size: 0.66rem;
  color: rgba(148, 163, 184, 0.72);
  font-style: italic;
  line-height: 1.35;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px dashed rgba(var(--accent-rgb), 0.14);
}

.map-bridge-dash--idle {
  gap: 10px;
}

/* Fleet bridge — compact strip */
.map-fleet-bridge.map-bridge-dash .map-bridge-dash-thumb--fleet {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.map-fleet-bridge.map-bridge-dash .map-bridge-dash-thumb--fleet .map-fleet-bridge-leader {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid rgba(var(--accent-rgb), 0.35);
}

.map-fleet-bridge.map-bridge-dash .map-bridge-dash-thumb--empty {
  background: rgba(8, 14, 28, 0.65);
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-hero {
  height: 48px;
  margin: 0;
  border-radius: 5px;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-head {
  gap: 8px;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-leader {
  width: 36px;
  height: 36px;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-slogan {
  margin: 0;
  font-size: 0.68rem;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-route,
.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-eta {
  padding: 0;
  font-size: 0.68rem;
  line-height: 1.3;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-eta {
  font-size: 0.74rem;
  padding-bottom: 2px;
}

.map-fleet-bridge.map-bridge-dash .fleet-popup-grid {
  padding: 0;
  gap: 4px 8px;
  font-size: 0.68rem;
}

.map-fleet-bridge.map-bridge-dash .fleet-popup-ships-label,
.map-fleet-bridge.map-bridge-dash .fleet-popup-cargo-label {
  margin: 0 0 4px;
  font-size: 0.56rem;
  line-height: 1.35;
}

.map-fleet-ship-targets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-targets {
  max-height: none;
  overflow: visible;
}

.map-fleet-ship-target {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 6px;
  background: rgba(8, 16, 32, 0.55);
  color: var(--text-primary, #e2e8f0);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.map-fleet-ship-target:hover {
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.06);
}

.map-fleet-ship-target.is-selected {
  border-color: rgba(0, 240, 255, 0.65);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.12);
}

.map-fleet-ship-target-class {
  flex: 0 0 auto;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan, #00f0ff);
  opacity: 0.85;
}

.map-fleet-ship-target-name {
  flex: 1 1 auto;
  font-size: 0.72rem;
  line-height: 1.25;
}

.fleet-popup-ships .map-fleet-ship-targets {
  max-height: 180px;
}

.map-hud-threat-glyph {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.map-hud-planet-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--hud-size);
  aspect-ratio: 1;
  border-radius: inherit;
  font: 700 calc(var(--hud-size) * 0.52) var(--font-mono);
  color: rgba(226, 232, 240, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.map-hud-capital-crown {
  width: 0.95em;
  height: 0.95em;
  color: #fbbf24;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.45));
}

.map-coords {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
  font-size: 0.75rem;
  pointer-events: none;
}

/* --- Galaxy View Navigation --- */
.map-nav-cluster {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}

.map-nav-cluster[hidden] {
  display: none !important;
}

/* 44px real touch box; the 34px visual chrome is painted by ::before,
   centered, so the toolbar look stays identical (padding compensates). */
.map-nav-btn {
  position: relative;
  z-index: 0;
  border: none;
  background: none;
  color: var(--cyan);
  cursor: pointer;
  transition: opacity 0.2s;
}

.map-nav-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  background: rgba(7, 10, 22, 0.85);
  transition: background 0.15s, border-color 0.15s;
}

.map-home-btn {
  width: 34px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
}

.map-home-btn.visible {
  display: flex;
}

.map-home-btn.is-active {
  color: #f8fafc;
}

.map-home-btn.is-active::before {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.14);
}

.map-home-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.map-galaxy-num { margin-left: 3px; opacity: 0.85; }

/* Native-app shell: the level rail must fit a 375px viewport whole.
   Below 480px the labeled buttons drop their icon and tighten padding. */
@media (max-width: 480px) {
  #map-nav-default .map-level-btn { min-width: 0; padding: 0 7px; }
  #map-nav-default .map-level-btn > svg { display: none; }
  .map-bridge-toolbar .map-nav-cluster { gap: 4px; }
}

.map-level-btn {
  min-width: 74px;
  height: 44px;
  padding: 0 10px;
  font: 600 0.7rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.map-nav-btn:hover::before,
.map-level-btn.is-active::before {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.map-level-btn.is-active {
  color: #f8fafc;
}

.map-level-btn.is-active::before {
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.14);
}

.map-nav-sep {
  width: 1px;
  height: 20px;
  background: rgba(var(--accent-rgb), 0.2);
}

.system-map-container {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(var(--accent-rgb), 0.08), transparent 42%),
    linear-gradient(180deg, rgba(3, 7, 16, 0.3), rgba(1, 4, 10, 0.65));
}

.system-map-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 48%, rgba(2, 6, 14, 0.36) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 14%);
}

/* Feed-switch flicker: diegetic camera-feed swap (scanline + tear) */
.map-feed-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  overflow: hidden;
}

.map-feed-flicker::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(160, 220, 255, 0.14) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(120, 200, 255, 0.06), rgba(6, 12, 24, 0.5) 46%, rgba(120, 200, 255, 0.06));
}

.map-feed-flicker::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 0;
  height: 16%;
  background: linear-gradient(180deg, transparent, rgba(190, 235, 255, 0.28) 45%, rgba(190, 235, 255, 0.1) 55%, transparent);
  transform: translateY(-120%);
}

.map-feed-flicker.is-on {
  animation: mapFeedFlicker 230ms steps(4, jump-none) forwards;
}

.map-feed-flicker.is-on::after {
  animation: mapFeedTear 230ms linear forwards;
}

@keyframes mapFeedFlicker {
  0% { opacity: 0; }
  12% { opacity: 1; }
  40% { opacity: 0.35; }
  68% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes mapFeedTear {
  0% { transform: translateY(-120%); }
  100% { transform: translateY(680%); }
}

@media (prefers-reduced-motion: reduce) {
  .map-feed-flicker.is-on,
  .map-feed-flicker.is-on::after { animation: none; }
}

@keyframes mapArrivalCineFadeIn {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mapCineCaptionIn {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
}

/* Landing cinematic pose tuning (dev / shot authoring) */
.map-landing-cine-tune[hidden] {
  display: none !important;
}

.map-landing-cine-tune {
  display: none;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.22);
  background: rgba(2, 8, 24, 0.88);
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.92);
  pointer-events: auto;
}

.map-landing-cine-tune--overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 24;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  margin: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.map-landing-cine-tune.is-visible {
  display: flex;
}

.system-map-container.has-cine-tune {
  pointer-events: auto;
}

.map-landing-cine-tune__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.map-landing-cine-tune__title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #00f0ff;
  font-size: 0.68rem;
}

.map-landing-cine-tune__close {
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.9);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}

.map-landing-cine-tune__hint {
  margin: 0;
  opacity: 0.78;
}

.map-landing-cine-tune__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}

.map-landing-cine-tune__label {
  min-width: 2.2rem;
  opacity: 0.75;
}

.map-landing-cine-tune__row button {
  min-width: 1.65rem;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  cursor: pointer;
  font-size: 0.68rem;
}

.map-landing-cine-tune__row button:hover {
  border-color: rgba(0, 240, 255, 0.55);
  background: rgba(0, 240, 255, 0.12);
}

.map-landing-cine-tune__primary {
  border-color: rgba(0, 240, 255, 0.45) !important;
  color: #00f0ff !important;
}

.map-landing-cine-tune__readout {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  opacity: 0.85;
  word-break: break-all;
}

.map-landing-cine-tune__json {
  width: 100%;
  margin: 0;
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #a5f3fc;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  resize: vertical;
}

.fleet-arrival-overlay .fleet-arrival-feed {
  width: 100%;
  margin-top: 4px;
}

.fleet-arrival-space {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.55) 0, transparent 1px),
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.35) 0, transparent 1px),
    radial-gradient(circle at 44% 72%, rgba(255, 255, 255, 0.4) 0, transparent 1px),
    radial-gradient(circle at 88% 68%, rgba(255, 255, 255, 0.3) 0, transparent 1px),
    radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.25) 0, transparent 1px),
    radial-gradient(ellipse 90% 70% at 72% 38%, rgba(34, 211, 238, 0.14), transparent 58%),
    linear-gradient(155deg, #020617 0%, #0b1628 42%, #030712 100%);
}

.fleet-arrival-planet-wrap {
  position: absolute;
  z-index: 1;
  width: 50%;
  height: 94%;
  right: -1%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  pointer-events: none;
}

.fleet-arrival-planet {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right center;
  opacity: 0;
  filter: saturate(1.06) brightness(1.03)
    drop-shadow(0 0 22px rgba(34, 211, 238, 0.14));
  transition: opacity 220ms ease;
}

.fleet-arrival-planet.is-ready {
  opacity: 1;
}

.fleet-arrival-fleet-wrap {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 58%;
  height: 88%;
  overflow: visible;
  pointer-events: none;
}

.fleet-arrival-fleet {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: translateY(-50%);
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.2));
  transition: opacity 220ms ease;
  pointer-events: none;
}

.fleet-arrival-fleet.is-ready {
  opacity: 1;
}

.fleet-arrival-overlay .fleet-arrival-caption {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.92);
}

.fleet-arrival-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 6, 23, 0.35) 0%, transparent 42%, rgba(2, 6, 23, 0.15) 100%),
    linear-gradient(180deg, transparent 52%, rgba(0, 8, 24, 0.78) 100%),
    radial-gradient(circle at 20% 55%, rgba(0, 240, 255, 0.1), transparent 52%);
}

.fleet-arrival-overlay .planet-milestone-btn-goto {
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  color: #0b1420;
  box-shadow: 0 10px 24px rgba(6, 182, 212, 0.35), 0 0 0 1px rgba(34, 211, 238, 0.6) inset;
}

.system-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  z-index: 1;
}

.system-map-container[data-map-level="system"] .system-map-canvas {
  display: none;
  pointer-events: none;
}

/* --- Layers control (bottom-left overlay) --- */
/* Anchored to the bottom edge: the sticky header overlaps the top of the map
   viewport, so a top-anchored control is unreachable on phones. */
.map-layers {
  position: absolute;
  left: 8px;
  bottom: var(--map-overlay-bottom, 12px);
  z-index: 20;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  pointer-events: auto;
}

.map-layers[hidden] {
  display: none !important;
}

.map-layers-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(120, 150, 190, 0.35);
  background: rgba(7, 10, 22, 0.9);
  color: #cbd5e1;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.map-layers-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.map-layers-count {
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  border: 1px solid rgba(120, 150, 190, 0.5);
  font-size: 0.58rem;
  text-align: center;
}

.map-layers-count[hidden] {
  display: none;
}

.map-layers-menu {
  margin-bottom: 4px;
  min-width: 178px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgba(120, 150, 190, 0.35);
  background: rgba(7, 10, 22, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-layers-menu[hidden] {
  display: none;
}

.map-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #94a3b8;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.map-layer-row:hover {
  background: rgba(120, 150, 190, 0.12);
}

.map-layer-row.is-on {
  color: #e2e8f0;
}

/* State reads from the mark's shape, never from its colour: empty box when
   off, box with a check when on, arrow for the momentary sensor ping. */
.map-layer-mark {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.map-layer-row.is-on .map-layer-mark::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.map-layer-mark--pulse {
  border-radius: 50%;
}

.map-layer-mark--pulse::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.map-quest-guidance {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 19;
  padding: 8px 10px;
  background: rgba(7, 10, 22, 0.94);
  border-color: rgba(42, 209, 168, 0.35);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(42, 209, 168, 0.1);
  pointer-events: auto;
  touch-action: manipulation;
}

.map-quest-guidance[hidden] {
  display: none !important;
}

/* Fleet follow HUD chip (e2-inspired, 44px touch target) */
.map-follow-chip {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(92vw, 320px);
  padding: 4px 4px 4px 10px;
  background: linear-gradient(180deg, rgba(20, 20, 40, 0.92), rgba(10, 10, 24, 0.92));
  border: 1px solid rgba(42, 209, 168, 0.35);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 0 6px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  touch-action: manipulation;
}

.map-follow-chip[hidden] {
  display: none !important;
}

.map-follow-chip-label {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(42, 209, 168, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-follow-chip-close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -4px -6px 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.map-follow-chip-close:hover,
.map-follow-chip-close:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.map-fleet-follow-btn.is-active {
  border-color: rgba(42, 209, 168, 0.55);
  color: rgba(42, 209, 168, 0.95);
  box-shadow: 0 0 12px rgba(42, 209, 168, 0.15);
}

.system-map-container.has-quest-guidance {
  --map-quest-guidance-height: 78px;
  --map-overlay-bottom: calc(var(--map-quest-guidance-height, 78px) + 20px);
}

.map-quest-guidance-shell--dom {
  align-items: center;
}

.map-quest-guidance-body--dom {
  flex: 1;
  min-width: 0;
}

.map-quest-guidance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.map-quest-guidance-copy {
  flex: 1;
  min-width: 0;
}

.map-quest-guidance-target {
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #9fadcf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-quest-guidance-name {
  color: #d4deef;
  font-weight: 600;
}

.map-quest-guidance-body--dom .map-quest-guidance-title {
  font-size: 0.82rem;
  line-height: 1.2;
}

.map-quest-guidance-body--dom .map-quest-guidance-kicker {
  margin-bottom: 0;
}

.map-quest-guidance-shell--dom .map-quest-guidance-send {
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}

.map-quest-guidance-shell--dom .map-quest-guidance-send.is-attack {
  background: rgba(239, 68, 68, 0.88);
  border-color: rgba(248, 113, 113, 0.95);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.22);
  color: #fff;
}

.map-quest-guidance-shell--dom .map-quest-guidance-send.is-attack:hover,
.map-quest-guidance-shell--dom .map-quest-guidance-send.is-attack:focus-visible {
  background: #f87171;
  border-color: #fca5a5;
}

.map-quest-guidance-shell--dom .map-quest-guidance-send.is-colonize {
  background: rgba(0, 240, 255, 0.85);
  border-color: rgba(0, 240, 255, 0.9);
  color: #0b1220;
}

.map-quest-guidance-shell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.map-quest-guidance-body {
  flex: 1;
  min-width: 0;
}

.map-quest-guidance-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6ee0c0;
  margin-bottom: 2px;
}

.map-quest-guidance-title {
  font-size: 0.88rem;
  color: #eef3ff;
  line-height: 1.25;
}

.map-quest-guidance-beat {
  font-size: 0.74rem;
  color: #9fadcf;
  margin-top: 4px;
  line-height: 1.35;
}

.map-quest-guidance-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: #8fa0c8;
}

.map-quest-guidance-coords {
  color: #e2e8f0;
  letter-spacing: 0.02em;
}

.map-quest-guidance-hint {
  color: #b8c8ea;
}

.map-quest-guidance-send {
  flex: 0 0 auto;
  padding: 5px 12px;
  min-height: 0;
  font: 600 0.68rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b1220;
  background: rgba(0, 240, 255, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.22);
  cursor: pointer;
}

.map-quest-guidance-send:hover,
.map-quest-guidance-send:focus-visible {
  background: #67e8f9;
  border-color: #a5f3fc;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.32);
}

.map-quest-guidance-send:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  color: #67e8f9;
  background: rgba(0, 240, 255, 0.06);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: none;
}

.map-quest-guidance-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #9fb0d8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.map-quest-guidance.is-dom-mission {
  border-color: rgba(251, 191, 36, 0.38);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(251, 191, 36, 0.12);
}

.map-quest-guidance-kicker.is-dom-mission {
  color: #fbbf24;
}

.map-quest-guidance-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #eef3ff;
}

.map-galaxy-selection {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: var(--map-overlay-bottom, 12px);
  z-index: 20;
  padding: 12px;
  background: rgba(7, 10, 22, 0.92);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.46),
    0 0 24px rgba(var(--accent-rgb), 0.08);
  pointer-events: auto;
  touch-action: manipulation;
  overflow: hidden;
  cursor: pointer;
}

.map-galaxy-selection[hidden] {
  display: none !important;
}

.map-galaxy-selection-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Star hero as absolute background on the right */
img.map-galaxy-selection-hero {
  position: absolute;
  right: -100px;
  bottom: -180px;
  width: 480px;
  height: 480px;
  object-fit: contain;
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 60% 30%, black 20%, transparent 70%);
  mask-image: radial-gradient(circle at 60% 30%, black 20%, transparent 70%);
}

.map-galaxy-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-galaxy-selection-head > div {
  min-width: 0;
  max-width: 100%;
}

.map-galaxy-selection-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 6px;
  background: rgba(10, 16, 30, 0.78);
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s, color 0.18s;
}

.map-galaxy-selection-close:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-primary);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.12);
}

.map-galaxy-selection-title {
  font-size: 0.98rem;
  color: #f8fafc;
}

/* Star name / type / colony count ride the coordinate line at full size. */
.map-galaxy-selection-title-sub {
  color: var(--text-secondary);
  font-weight: 400;
}
.map-galaxy-selection-title-sub::before { content: ' · '; }

@media (max-width: 480px) {
  /* Spatial identity stays stable on the first line; descriptive telemetry
     wraps below it instead of widening the entire bridge dashboard. */
  .map-galaxy-selection-title {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    gap: 2px;
    font-size: 0.86rem;
    line-height: 1.2;
  }
  .map-galaxy-selection-system-id { font-weight: 650; }
  .map-galaxy-selection-title-sub {
    display: block;
    max-width: 100%;
    font-size: 0.72rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .map-galaxy-selection-title-sub::before { content: none; }
  .map-cell-ctxline {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

.map-galaxy-selection-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.map-galaxy-selection-actions .btn {
  width: 100%;
  min-width: 0;
  padding: 6px 4px;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  gap: 4px;
  white-space: nowrap;
}

.map-galaxy-selection-actions .btn,
.map-galaxy-selection-close {
  touch-action: manipulation;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.map-galaxy-selection-note {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.map-cell-tabbody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 40px;
}

/* Selected 3D body telemetry. This lives above the roster so a map tap has
   an immediate informational result without hiding the system's other bodies. */
.map-cell-selected-detail {
  padding: 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(var(--accent-rgb), 0.13), rgba(6, 10, 22, 0.72));
  box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.78);
}

.map-cell-selected-detail.is-unexplored {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.map-cell-selected-detail.is-unexplored div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-cell-selected-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-cell-selected-thumb {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}

.map-cell-selected-title {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

.map-cell-selected-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-cell-selected-title span,
.map-cell-selected-coords {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.map-cell-selected-coords {
  flex: 0 0 auto;
}

.map-cell-selected-stats.planet-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
  margin-top: 8px;
  padding: 0;
}

.map-cell-selected-stats .planet-stat {
  min-width: 0;
}

.map-cell-line {
  font-size: 0.78rem;
  color: var(--text-primary);
}

.map-cell-line strong { font-weight: 600; }
.map-cell-sub { color: var(--text-secondary); font-size: 0.72rem; }
.map-cell-dim { color: var(--text-dim); font-size: 0.74rem; }
.map-cell-alert { color: #fecaca; }
.map-cell-tag-alert { color: #fecaca; font-weight: 600; }

/* Fleet dashboard pane: the fleet card lives inside the bridge preview,
   sharing the cell dashboard's slot - never as a modal over the map. */
.map-fleet-pane[hidden] {
  display: none !important;
}

.map-fleet-pane .fleet-popup-box {
  width: 100%;
  max-width: none;
  animation: none;
  box-shadow: none;
  border-color: rgba(var(--accent-rgb), 0.16);
}

.map-fleet-pane .fleet-popup-hero {
  padding-top: 44px;
  min-height: 110px;
}

.map-fleet-pane .fleet-popup-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 0 4px;
}

.map-fleet-pane .fleet-popup-spec {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.045);
}

.map-fleet-pane .fleet-popup-spec span,
.map-fleet-pane .fleet-popup-spec strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-fleet-pane .fleet-popup-spec span {
  margin-bottom: 2px;
  color: rgba(148, 163, 184, 0.78);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-fleet-pane .fleet-popup-spec strong {
  color: #e6fbff;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Cell body roster: sun first, then bodies in orbit order.
   Same row anatomy as the Imperio colony list (.brow): flat rows with
   hairline dividers, 44px thumb, display-font title, mono micro sub. */
.map-cell-bodies {
  display: flex;
  flex-direction: column;
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 2px 0;
  padding-right: 2px;
}

.map-cell-body-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.map-cell-bodies .map-cell-body-row:last-child {
  border-bottom: none;
}

/* Occupied bodies carry a persistent relationship rail + wash. The mood
   chip also uses a distinct shape, so diplomacy is never colour-only. */
.map-cell-body-row.is-own,
.map-cell-body-row.is-occupied {
  --body-rel-rgb: 34, 211, 238;
  --body-rel-color: #67e8f9;
  background: linear-gradient(90deg, rgba(var(--body-rel-rgb), 0.18), rgba(var(--body-rel-rgb), 0.035) 58%, transparent);
  box-shadow: inset 3px 0 0 var(--body-rel-color);
}

.map-cell-body-row.relation-hostile { --body-rel-rgb: 255, 122, 90; --body-rel-color: #ff7a5a; }
.map-cell-body-row.relation-wary { --body-rel-rgb: 245, 205, 95; --body-rel-color: #f5cd5f; }
.map-cell-body-row.relation-neutral { --body-rel-rgb: 165, 180, 200; --body-rel-color: #a5b4c8; }
.map-cell-body-row.relation-friendly { --body-rel-rgb: 110, 225, 140; --body-rel-color: #6ee18c; }
.map-cell-body-row.relation-allied { --body-rel-rgb: 90, 220, 240; --body-rel-color: #5adcf0; }
.map-cell-body-row.relation-own { --body-rel-rgb: 34, 211, 238; --body-rel-color: #67e8f9; }

.map-cell-body-row.is-unexplored .map-cell-body-name {
  color: var(--text-dim);
}

/* Moons nest under their parent planet: indented compact row with a
   dependency connector drawn as an L elbow. */
.map-cell-body-row.is-moon {
  margin-left: 26px;
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
}

.map-cell-body-row.is-moon::before {
  content: '';
  position: absolute;
  left: -16px;
  top: -6px;
  width: 11px;
  height: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-left-radius: 5px;
  pointer-events: none;
}

.map-cell-body-row.is-moon .map-cell-body-name {
  font-size: 0.86em;
}

.map-cell-body-thumb {
  width: 44px;
  height: 44px;
  margin: -7px 0;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.map-cell-body-thumb.map-cell-body-thumb--moon {
  width: 30px;
  height: 30px;
  margin: -3px 0;
}

.map-cell-body-thumbwrap {
  position: relative;
  display: inline-flex;
  margin: -7px 0;
  flex: 0 0 auto;
}

.map-cell-body-thumbwrap .map-cell-body-thumb {
  margin: 0;
}

.map-cell-body-thumbwrap.has-rings::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148%;
  height: 42%;
  border: 1px solid rgba(214, 228, 248, 0.85);
  border-top-color: rgba(214, 228, 248, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  pointer-events: none;
}

.map-cell-body-dot {
  width: 12px;
  height: 12px;
  margin: 0 16px;
  border-radius: 50%;
  border: 1px dashed rgba(200, 215, 235, 0.55);
  flex: 0 0 auto;
}

.map-cell-body-dot--comet {
  border-style: solid;
  border-color: rgba(160, 220, 255, 0.7);
}

.map-cell-body-info {
  flex: 1 1 auto;
  min-width: 0;
}

.map-cell-body-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--e2-fs-title);
  font-weight: 700;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
}

.map-cell-body-name > .map-cell-rarity-common,
.map-cell-body-name > .map-cell-rarity-uncommon,
.map-cell-body-name > .map-cell-rarity-rare,
.map-cell-body-name > .map-cell-rarity-epic,
.map-cell-body-name > .map-cell-rarity-legendary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-cell-body-sub {
  font-family: var(--font-mono);
  font-size: var(--e2-fs-micro);
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The system list exposes the modifiers that drive colonisation and
   development choices without making every body row a full dossier. */
.map-cell-body-bonuses,
.map-cell-star-bonuses {
  margin-top: 3px;
}

.map-cell-body-bonuses .planet-bonuses,
.map-cell-star-bonuses .planet-bonuses {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0;
}

.map-cell-body-bonuses .planet-bonuses > span,
.map-cell-star-bonuses .planet-bonuses > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.62rem;
  font-weight: 700;
}

.map-cell-body-bonuses .bonus-icon,
.map-cell-star-bonuses .bonus-icon {
  width: 11px;
  height: 11px;
}

.map-cell-ownerline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 4px;
}

.map-cell-ownerline .map-gg-mood,
.map-cell-owner-self {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(var(--body-rel-rgb), 0.48);
  border-radius: 999px;
  background: rgba(var(--body-rel-rgb), 0.13);
  color: var(--body-rel-color);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.map-cell-ownerline .map-gg-mood-ic,
.map-cell-owner-self svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.map-cell-owner-name {
  min-width: 0;
  overflow: hidden;
  color: var(--body-rel-color);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Colony names carry their planet-rarity ink (same scale as po-rarity-*).
   The explicit label means rarity remains legible even when a relationship
   wash or a long name competes with the subtle title colour. */
.map-cell-rarity-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.map-cell-rarity-common { color: #94a3b8; }
.map-cell-rarity-uncommon { color: #22c55e; }
.map-cell-rarity-rare { color: #3b82f6; }
.map-cell-rarity-epic { color: #a855f7; }
.map-cell-rarity-legendary { color: #f59e0b; }

.map-cell-planet-telemetry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.map-cell-composition {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-cell-planet-telemetry .planet-bonuses--inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.map-cell-planet-telemetry .planet-bonuses--inline > span {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.62rem;
}
.map-cell-planet-telemetry .bonus-icon {
  width: 10px;
  height: 10px;
}

.map-cell-body-row.rarity-uncommon .map-cell-body-thumb { box-shadow: 0 0 0 1px #22c55e, 0 0 8px rgba(34, 197, 94, 0.38); }
.map-cell-body-row.rarity-rare .map-cell-body-thumb { box-shadow: 0 0 0 1px #3b82f6, 0 0 8px rgba(59, 130, 246, 0.42); }
.map-cell-body-row.rarity-epic .map-cell-body-thumb { box-shadow: 0 0 0 1px #a855f7, 0 0 9px rgba(168, 85, 247, 0.46); }
.map-cell-body-row.rarity-legendary .map-cell-body-thumb { box-shadow: 0 0 0 1px #f59e0b, 0 0 10px rgba(245, 158, 11, 0.5); }

.map-cell-capital-ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: #fbbf24;
}

.map-cell-body-dev {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  min-width: 0;
}

.map-cell-dev-tier {
  flex: 0 0 auto;
  font-size: var(--e2-fs-micro);
  color: var(--text-secondary);
}

.map-cell-dev-bar {
  flex: 1 1 52px;
  max-width: 110px;
  height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
}

.map-cell-dev-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: rgba(var(--accent-rgb), 0.9);
}

/* Dev status symbols: shape-distinct chips (circle+pulse = building,
   dashed square = next unlock, dashed circle+pause = idle); full words
   ride the tooltip/aria-label so nothing truncates. */
.map-cell-dev-sym {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.map-cell-dev-sym svg { width: 12px; height: 12px; display: block; }
.map-cell-dev-bar + .map-cell-dev-sym { margin-left: auto; }
.map-cell-dev-sym-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  border-radius: 3px;
}
.map-cell-dev-sym.is-building {
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 50%;
  color: #7dd8e8;
}
.map-cell-dev-sym.is-building::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.75);
  animation: kcDevBuildPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kcDevBuildPulse {
  0%, 100% { transform: scale(0.78); opacity: 0.2; }
  50% { transform: scale(1); opacity: 0.9; }
}
.map-cell-dev-sym.is-next {
  border: 1px dashed rgba(148, 163, 184, 0.65);
  border-radius: 4px;
  color: #cbd5e1;
}
.map-cell-dev-sym.is-idle {
  border: 1px dashed rgba(251, 191, 36, 0.6);
  border-radius: 50%;
  color: #fbbf24;
}

/* Colony dashboard row: stationed-ships chip (icon + count + type thumbs,
   breakdown in the tooltip) with its Enviar action */
.map-cell-body-stationed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  min-width: 0;
}

.map-cell-stationed-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.1);
  color: #ddd6fe;
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
}

.map-cell-stationed-chip svg {
  width: 11px;
  height: 11px;
  flex: none;
}

.map-cell-stationed-img {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  flex: none;
}

.map-cell-stationed-send {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.14);
  color: rgba(var(--accent-rgb), 0.95);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.map-cell-stationed-send:hover,
.map-cell-stationed-send:focus-visible {
  background: rgba(var(--accent-rgb), 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .map-cell-dev-sym.is-building::after {
    animation: none;
    transform: none;
    opacity: 0.85;
  }
}

/* Coordinates must stay readable (user rule): body size, light ink. */
.map-cell-body-tag {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(203, 213, 225, 0.92);
}

.map-cell-body-row.is-act {
  cursor: pointer;
  transition: background 0.12s ease;
}

.map-cell-body-row.is-act:hover,
.map-cell-body-row.is-act:focus-visible {
  background: rgba(var(--accent-rgb), 0.12);
}

.map-cell-body-row.is-selected {
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

.map-cell-body-row.is-own.is-act:hover,
.map-cell-body-row.is-own.is-act:focus-visible,
.map-cell-body-row.is-occupied.is-act:hover,
.map-cell-body-row.is-occupied.is-act:focus-visible,
.map-cell-body-row.is-own.is-selected,
.map-cell-body-row.is-occupied.is-selected {
  background: linear-gradient(90deg, rgba(var(--body-rel-rgb), 0.27), rgba(var(--body-rel-rgb), 0.07) 64%, transparent);
  box-shadow: inset 3px 0 0 var(--body-rel-color), inset 0 0 0 1px rgba(var(--body-rel-rgb), 0.48);
}

.fleet-origin-line {
  color: var(--text-secondary);
  font-size: 0.74rem;
  margin-bottom: 8px;
}

/* ── Planet mission banner (shown when a quest targets this planet) ── */
.planet-mission-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.32);
}
.planet-mission-banner-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.planet-mission-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 158, 11, 0.95);
  font-weight: 700;
}
.planet-mission-title {
  font-size: 0.92rem;
  color: #f8fafc;
  font-weight: 600;
  line-height: 1.2;
}
.planet-mission-teaser {
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.35;
}
.planet-mission-cta-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.planet-mission-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fcd34d;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.planet-mission-cta:hover {
  background: rgba(245, 158, 11, 0.28);
  border-color: rgba(245, 158, 11, 0.65);
}
.planet-mission-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(245, 158, 11, 0.25);
}
.planet-mission-picker.hidden { display: none; }
.planet-mission-picker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.9);
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.planet-mission-picker-item:hover {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
}
.planet-mission-picker-item img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.map-owner-chip.owner-you {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.22);
  background: rgba(34, 211, 238, 0.12);
}

.map-owner-chip.owner-hostile {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(239, 68, 68, 0.12);
}

.map-owner-chip.owner-free {
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.2);
  background: rgba(34, 197, 94, 0.12);
}

/* Occupancy status pill: the decisive colonize-vs-attack signal */
.map-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.map-status-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.map-status-chip.map-status--free {
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.32);
  background: rgba(34, 197, 94, 0.14);
}

.map-status-chip.map-status--occupied {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(239, 68, 68, 0.16);
}

.map-status-chip.map-status--you {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.3);
  background: rgba(34, 211, 238, 0.14);
}

.map-status-chip.map-status--unknown {
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.12);
}

.map-bridge-dash-chips .map-status-chip {
  font-size: 0.58rem;
}
.map-action-row {
  display: flex;
  gap: 8px;
}
.map-council-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.map-action-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  border: 1px solid var(--cyan);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--cyan);
  text-align: center;
}
.map-action-btn.map-action-disabled {
  border-color: #64748b;
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  cursor: default;
}
.map-action-btn.map-action-colonize {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.map-action-btn.map-action-survey {
  border-color: #d8b24a;
  background: rgba(216, 178, 74, 0.15);
  color: #e6c25a;
}
.map-action-btn.map-action-primary {
  border-color: var(--cyan);
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--cyan);
  font-weight: 600;
}
.map-action-btn.map-action-danger {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  font-weight: 600;
}

/* Fleet bridge panel (system map split view) */
.map-fleet-bridge.map-bridge-dash {
  gap: 4px;
  min-height: 0;
  flex: 0 1 auto;
  height: auto;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
}

.map-fleet-bridge-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  flex: 0 1 auto;
  overflow: visible;
}

.map-fleet-bridge-ships-col {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.38) rgba(6, 10, 22, 0.72);
  -webkit-overflow-scrolling: touch;
}

.map-fleet-bridge-ships-col::-webkit-scrollbar {
  width: 5px;
}

.map-fleet-bridge-ships-col::-webkit-scrollbar-track {
  background: rgba(6, 10, 22, 0.72);
  border-radius: 4px;
}

.map-fleet-bridge-ships-col::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.32);
  border-radius: 4px;
}

.map-fleet-bridge-eta-col {
  flex-shrink: 0;
}

.map-fleet-bridge-head,
.map-fleet-bridge-side-col,
.map-fleet-bridge-eta-col {
  flex-shrink: 0;
}

.map-fleet-bridge-side-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-ships-col {
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
}

.map-fleet-bridge-cargo-col:empty {
  display: none;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-cargo-col .fleet-popup-grid {
  padding: 0;
  gap: 4px 10px;
  line-height: 1.35;
  font-size: 0.68rem;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-cargo-col .fleet-popup-cargo-label {
  margin: 0 0 3px;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1.25;
  color: rgba(var(--accent-rgb), 0.62);
}

.map-fleet-bridge-cargo-empty {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 2px;
}

.map-fleet-formation-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-fleet-formation-row-label {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.62);
}

.map-fleet-formation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.map-fleet-formation-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  background: rgba(8, 16, 32, 0.72);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.62rem;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.map-fleet-formation-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.08);
}

.map-fleet-formation-chip.is-active {
  border-color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 0 10px rgba(var(--accent-rgb), 0.2);
}

.map-fleet-formation-chip-glyph {
  font-size: 0.78rem;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.9);
}

.map-fleet-formation-chip-name {
  white-space: nowrap;
}

@media (min-width: 640px) {
  .map-fleet-bridge-grid {
    display: grid;
    grid-template-areas:
      "head eta side"
      "ships ships side";
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(120px, 156px);
    grid-template-rows: auto auto;
    gap: 6px 14px;
    align-items: start;
  }

  .map-fleet-bridge-side-col {
    grid-area: side;
    align-self: stretch;
    justify-content: flex-end;
  }

  .map-fleet-bridge-ships-col {
    grid-area: ships;
    min-width: 0;
    overflow: visible;
  }

  .map-fleet-bridge-head {
    grid-area: head;
  }

  .map-fleet-bridge-eta-col {
    grid-area: eta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    padding: 2px 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .map-fleet-bridge-ships-col .fleet-popup-ships-label {
    margin: 0;
    flex-shrink: 0;
  }

  .map-fleet-bridge-ships-col .fleet-popup-grid {
    padding-bottom: 0;
    flex: 1 1 auto;
  }

  .map-fleet-bridge-ships-col .map-fleet-ship-strip-wrap {
    flex: 1 1 100%;
    width: 100%;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-head .map-bridge-dash-thumb {
    width: 56px;
    height: 56px;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    padding: 0;
    margin-top: 0;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.74rem;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn:nth-child(1),
  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn:nth-child(2) {
    grid-column: auto;
  }
}

.map-fleet-bridge.map-bridge-dash .map-bridge-dash-head {
  align-items: center;
  gap: 8px;
}

.map-fleet-bridge.map-bridge-dash .map-bridge-dash-head .map-bridge-dash-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.map-fleet-bridge.map-bridge-dash .map-bridge-dash-head .map-bridge-dash-ident {
  flex: 1 1 auto;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-ship-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
  display: block;
}

.map-fleet-bridge-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.map-fleet-bridge-ships-col .map-fleet-ship-strip-wrap {
  max-width: none;
  width: 100%;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-strip-wrap {
  width: 100%;
  min-width: 0;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-strip {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-strip-sep {
  display: none;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-strip-group--formation {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-strip-group--ships {
  width: 100%;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-strip-ships {
  width: 100%;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-ship-strip-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(var(--accent-rgb), 0.62);
}

.map-fleet-bridge-ships-col .map-fleet-ship-strip {
  flex-wrap: wrap;
  align-items: flex-start;
}

.map-fleet-bridge-eta-col:empty,
.map-fleet-bridge-eta-col[hidden] {
  display: none !important;
}

.map-fleet-bridge-eta,
.map-fleet-bridge-eta-col {
  padding: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #f59e0b;
  line-height: 1.25;
}

.map-fleet-bridge-debug {
  display: none;
}

.map-fleet-bridge-summary {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.92);
  line-height: 1.25;
}

.map-fleet-bridge-id {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(100, 116, 139, 0.95);
  line-height: 1.25;
}

.map-fleet-stalled-inline {
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
}

.map-fleet-ship-strip-wrap {
  min-width: 0;
}

.map-fleet-ship-strip-kicker--section {
  display: block;
  margin: 0 0 4px;
}

.map-fleet-ship-strip-wrap .fleet-popup-ships-label {
  margin: 0 0 3px;
}

.map-fleet-ship-strip {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
  min-width: 0;
}

.map-fleet-ship-strip-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.map-fleet-ship-strip-group--formation {
  flex: 0 0 auto;
}

.map-fleet-ship-strip-group--ships {
  flex: 1 1 auto;
  min-width: 0;
}

.map-fleet-ship-strip-kicker {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.88);
  line-height: 1;
  white-space: nowrap;
}

.map-fleet-ship-strip-sep {
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  margin: 2px 12px 2px;
  background: linear-gradient(
    180deg,
    rgba(0, 240, 255, 0) 0%,
    rgba(0, 240, 255, 0.28) 18%,
    rgba(0, 240, 255, 0.28) 82%,
    rgba(0, 240, 255, 0) 100%
  );
}

.map-fleet-ship-strip-ships {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: visible;
  max-width: 100%;
  padding: 1px 0 2px;
}

.map-fleet-ship-strip-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 42px;
  min-height: 52px;
  padding: 3px 2px 2px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 6px;
  background: rgba(8, 16, 32, 0.72);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.map-fleet-ship-strip-btn--formation {
  width: 48px;
  min-height: 56px;
  border-color: rgba(0, 240, 255, 0.28);
  background: rgba(0, 240, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.06);
}

.map-fleet-ship-strip-btn img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.map-fleet-ship-strip-btn--formation img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 3px;
}

.map-fleet-ship-strip-btn-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: rgba(226, 232, 240, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.map-fleet-ship-strip-btn.is-selected .map-fleet-ship-strip-btn-label {
  color: #e0f2fe;
}

.map-fleet-ship-strip-btn:hover,
.map-fleet-ship-strip-btn:focus-visible {
  border-color: rgba(0, 240, 255, 0.42);
  background: rgba(0, 240, 255, 0.06);
}

.map-fleet-ship-strip-btn.is-selected {
  border-color: rgba(0, 240, 255, 0.72);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.18);
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 639.98px) {
  .map-bridge-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 1px 8px;
    min-height: 0;
  }

  .map-bridge-toolbar-sections {
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* Intrasystem context already names its immediate parent (Galaxia N) and
     current Sistema G:S. Keep only Universo from the full trail so every
     strategic level remains one tap away without a hidden left overflow;
     desktop retains the complete breadcrumb. */
  .map-bridge-toolbar-sections:has(#map-nav-system:not([hidden])) > .map-bridge-spatial-path
    .map-bridge-crumb:not([data-map-crumb="universe"]),
  .map-bridge-toolbar-sections:has(#map-nav-system:not([hidden])) > .map-bridge-spatial-path
    .map-bridge-crumb-sep {
    display: none !important;
  }

  /* The spatial path + camera actions intentionally remain full-size touch
     targets. When they exceed a phone width, directional glows communicate
     the off-screen controls and follow the rail as it is swiped. */
  .map-bridge-toolbar:has(.map-bridge-toolbar-sections.has-overflow-start)::before,
  .map-bridge-toolbar:has(.map-bridge-toolbar-sections.has-overflow-end)::after {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 30px;
    z-index: 3;
    display: flex;
    align-items: center;
    color: rgba(var(--accent-rgb), 0.95);
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.72);
    pointer-events: none;
  }

  .map-bridge-toolbar:has(.map-bridge-toolbar-sections.has-overflow-start)::before {
    content: '\2039';
    left: 0;
    justify-content: flex-start;
    padding-left: 3px;
    background: linear-gradient(90deg, rgba(5, 11, 24, 0.98) 22%, rgba(5, 11, 24, 0));
  }

  .map-bridge-toolbar:has(.map-bridge-toolbar-sections.has-overflow-end)::after {
    content: '\203A';
    right: 0;
    justify-content: flex-end;
    padding-right: 3px;
    background: linear-gradient(270deg, rgba(5, 11, 24, 0.98) 22%, rgba(5, 11, 24, 0));
  }

  .map-bridge-toolbar .map-bridge-spatial-path {
    flex: 0 0 auto;
    max-width: 40vw;
    padding-right: 5px;
  }

  .map-bridge-spatial-path .map-bridge-crumb {
    min-height: 28px;
    padding: 2px 6px;
    font-size: 0.58rem;
  }

  .map-bridge-toolbar .map-coords {
    flex: 0 0 auto;
    text-align: right;
    font-size: 0.72rem;
  }

  .map-level-btn {
    min-width: 0;
    padding: 0 6px;
    font-size: 0.62rem;
  }

  .map-fleet-bridge.map-bridge-dash {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-side-col {
    width: 100%;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-cargo-col:not(:empty) {
    padding: 4px 0 2px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.12);
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(52px, 68px) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 6px;
    padding: 6px 10px 10px;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn:nth-child(1) {
    grid-column: 1;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn:nth-child(2) {
    grid-column: 3;
  }

  .map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn:only-child {
    grid-column: 1 / -1;
    max-width: 220px;
    margin: 0 auto;
  }
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn {
  flex: unset;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  font-size: 0.72rem;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn:nth-child(1),
.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions .map-action-btn:nth-child(2) {
  grid-column: auto;
}

.map-fleet-bridge.map-bridge-dash .map-fleet-bridge-actions:empty {
  display: none;
}

.map-fleet-bridge .map-fleet-bridge-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.map-fleet-bridge-leader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  object-fit: cover;
  flex-shrink: 0;
}
.map-fleet-bridge-slogan {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  line-height: 1.25;
}
.map-fleet-bridge-hero {
  height: 120px;
  margin: 8px 4px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04) center / cover no-repeat;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}
.map-bridge-mode .map-fleet-bridge-hero {
  height: 100px;
}
.map-fleet-bridge-route {
  padding: 0 4px 6px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.map-fleet-bridge-actions {
  margin-top: 4px;
}

.map-fleet-bridge .fleet-popup-ships-label,
.map-fleet-bridge .fleet-popup-cargo-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 4px 4px;
}
.map-fleet-bridge .fleet-popup-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0 4px 10px;
  font-size: 0.85rem;
}

@media (min-width: 768px) {

  .map-bridge-dash:has(.map-bridge-dash-main) > .map-bridge-dash-head {
    grid-area: head;
  }
  .map-bridge-dash:has(.map-bridge-dash-main) .map-bridge-dash-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .map-bridge-dash:has(.map-bridge-dash-main) > .map-bridge-dash-foot {
    grid-area: actions;
    flex-direction: column;
    align-self: stretch;
    margin: 0;
  }
  .map-bridge-dash:has(.map-bridge-dash-main) .map-bridge-dash-foot .map-action-row {
    flex-direction: column;
  }
  .map-bridge-dash:has(.map-bridge-dash-main) .map-bridge-dash-foot .btn-fleet-send,
  .map-bridge-dash:has(.map-bridge-dash-main) .map-bridge-dash-foot .map-action-btn {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Three specs per row (temperature/fields/size); star spans full width */
  .map-bridge-dash:has(.map-bridge-dash-main) .map-bridge-dash-specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Wide dock: use the available width and split the foot into intel | actions
   so the flyby card fits the dock height without an unnecessary vertical
   scroll. Identity/specs/modifiers stack in the wide left region. */
@media (min-width: 1200px) {
  .map-bridge-dashboard .map-bridge-dash:has(.map-bridge-dash-main) {
    max-width: min(1480px, calc(100% - 32px));
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
    column-gap: 24px;
  }

  /* Intel block beside the action buttons (only when there is an intel block,
     i.e. a foreign colony); own/empty bodies keep the single-column foot. */
  .map-bridge-dash:has(.map-bridge-dash-main) > .map-bridge-dash-foot:has(.dom-planet-intel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
    gap: 6px 12px;
  }
  .map-bridge-dash-foot:has(.dom-planet-intel) > .kc-pending-sheet-owner { grid-column: 1 / -1; }
  .map-bridge-dash-foot:has(.dom-planet-intel) > .dom-planet-intel { grid-column: 1; margin: 0; }
  .map-bridge-dash-foot:has(.dom-planet-intel) > .map-council-actions,
  .map-bridge-dash-foot:has(.dom-planet-intel) > .map-action-row {
    grid-column: 2;
    margin-top: 0;
    align-self: start;
  }
}

/* --- Debris marker on map --- */
.debris-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 200, 68, 0.3);
  border: 1px solid rgba(255, 200, 68, 0.5);
  animation: debris-pulse 2s ease-in-out infinite;
}

@keyframes debris-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

@keyframes map-loading-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ── Fleet Tooltip Overlay ──────────────────────────────── */

.map-tooltip {
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 10;
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(0,240,255,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.7rem;
  color: #e2e8f0;
  white-space: nowrap;
  max-width: 200px;
}

.map-tooltip--fleet {
  padding: 0;
  max-width: 280px;
  white-space: normal;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  animation: ftt-fadeIn 0.15s ease-out;
}

.map-tooltip--vfleet {
  max-width: 240px;
}
.map-tooltip--vfleet .ftt-hint {
  font-style: italic;
}

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

/* NPC diplomacy chat lives inside the Comms tab sidebar/thread, see
   kc-comms.js renderNpcThread (reuses .leader-thread-* styles). No
   extra CSS needed here for the NPC variant. */

/* ── Attack Fleet minimal composer (Fase 3) ────────────────── */
.attack-fleet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  padding: 16px;
}
.attack-fleet-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  width: min(480px, 100%);
  max-height: min(85vh, 720px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.15);
  animation: ftt-fadeIn 0.15s ease-out;
}
.attack-fleet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(239, 68, 68, 0.18);
  font-family: var(--font-mono);
}
.attack-fleet-title {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: #fca5a5;
  text-transform: uppercase;
}
.attack-fleet-close {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.attack-fleet-close:hover { color: #e2e8f0; }

.attack-fleet-body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.attack-fleet-target {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  padding: 10px 12px;
}
.attack-fleet-target-label {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.attack-fleet-target-name {
  font-size: 1rem;
  color: #fca5a5;
  font-weight: 600;
  margin-top: 3px;
}
.attack-fleet-target-coords {
  font-size: 0.78rem;
  color: #94a3b8;
  font-family: var(--font-mono);
  margin-top: 2px;
}
.attack-fleet-target-ships {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.78rem;
  color: #e2e8f0;
}

.attack-fleet-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attack-fleet-label {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.attack-fleet-select {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 4px;
  color: #e2e8f0;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
}
.attack-fleet-empty {
  color: #94a3b8;
  font-size: 0.82rem;
  font-style: italic;
  padding: 8px 0;
}
.attack-fleet-ships {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attack-fleet-ship-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.6);
}
.attack-fleet-ship-name {
  flex: 1;
  font-size: 0.88rem;
  color: #e2e8f0;
}
.attack-fleet-ship-avail {
  font-size: 0.76rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}
.attack-fleet-ship-input {
  width: 70px;
  padding: 4px 8px;
  background: var(--scrim-40);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 4px;
  color: #e0f2fe;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.attack-fleet-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid rgba(239, 68, 68, 0.12);
}
.attack-fleet-btn {
  padding: 8px 16px;
  border: 1px solid rgba(226, 232, 240, 0.25);
  border-radius: 4px;
  background: transparent;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.attack-fleet-btn--danger {
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}
.attack-fleet-btn--danger:hover {
  background: rgba(239, 68, 68, 0.12);
}
.attack-fleet-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.ftt-hero {
  position: relative;
  padding: 50px 12px 8px;
  background-color: rgba(13,13,31,0.95);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ftt-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.7;
}

.ftt-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ftt-leader {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 12px rgba(0,240,255,0.2), 0 0 24px rgba(0,240,255,0.08);
  flex-shrink: 0;
  object-fit: cover;
}

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

.ftt-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ftt-mission {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ftt-slogan {
  font-size: 0.6rem;
  font-style: italic;
  color: rgba(255,255,255,0.35);
  margin-top: 6px;
  line-height: 1.3;
}

.ftt-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.7rem;
}

.ftt-status {
  color: rgba(255,255,255,0.6);
}

.ftt-ships {
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
}

.ftt-eta {
  color: var(--amber, #f59e0b);
  font-weight: 600;
  font-size: 0.75rem;
}

.ftt-hint {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.25);
  margin-top: 2px;
}

/* ── In-transit tracking cam: diegetic CAM frame + telemetry ── */
.map-track-cam {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.map-track-cam[hidden] {
  display: none;
}

.map-track-cam-frame {
  position: absolute;
  inset: calc(env(safe-area-inset-top, 0px) + 54px) 8px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 12px;
  box-shadow: inset 0 0 60px rgba(2, 6, 14, 0.55);
}

.map-track-cam-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), transparent 16%) top left / 90px 90px no-repeat,
    linear-gradient(225deg, rgba(var(--accent-rgb), 0.3), transparent 16%) top right / 90px 90px no-repeat,
    linear-gradient(45deg, rgba(var(--accent-rgb), 0.3), transparent 16%) bottom left / 90px 90px no-repeat,
    linear-gradient(315deg, rgba(var(--accent-rgb), 0.3), transparent 16%) bottom right / 90px 90px no-repeat;
  border-radius: inherit;
}

.map-track-cam-scan {
  position: absolute;
  inset: calc(env(safe-area-inset-top, 0px) + 54px) 8px 8px;
  border-radius: 12px;
  overflow: hidden;
}

.map-track-cam-scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  height: 10%;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.09), transparent);
  animation: mapTrackScan 6.5s linear infinite;
}

@keyframes mapTrackScan {
  0% { transform: translateY(0); }
  100% { transform: translateY(1200%); }
}

.map-track-cam-streaks {
  position: absolute;
  inset: calc(env(safe-area-inset-top, 0px) + 54px) 8px 8px;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0.05;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 46px,
    rgba(210, 235, 255, 0.9) 46px 47px,
    transparent 47px 120px
  );
  animation: mapTrackStreaks 2.8s linear infinite;
}

@keyframes mapTrackStreaks {
  0% { background-position: 0 0; }
  100% { background-position: -240px 0; }
}

.map-track-cam-header {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 32px);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(226, 246, 255, 0.88);
  background: rgba(6, 12, 24, 0.78);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 7px;
}

.map-track-cam-rec {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
  animation: mapTrackRec 1.4s steps(2, jump-none) infinite;
}

@keyframes mapTrackRec {
  0% { opacity: 1; }
  100% { opacity: 0.25; }
}

.map-track-cam-telemetry {
  position: absolute;
  /* sits above the in-flight fleet carousel */
  bottom: calc(var(--map-overlay-bottom, 12px) + 48px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: calc(100% - 20px);
}

.map-track-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 10px;
  letter-spacing: 0.07em;
  white-space: nowrap;
  color: rgba(226, 246, 255, 0.86);
  background: rgba(6, 12, 24, 0.82);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 999px;
}

#map-track-cam-mission {
  color: var(--track-color, var(--cyan));
  border-color: color-mix(in srgb, var(--track-color, #00f0ff) 45%, transparent);
  text-transform: uppercase;
}

.map-track-progress {
  width: 92px;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  overflow: hidden;
}

.map-track-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cyan, #00f0ff);
  border-radius: inherit;
  transition: width 0.6s linear;
}

.map-track-btn {
  pointer-events: auto;
  cursor: pointer;
  color: rgba(var(--accent-rgb), 0.95);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.5);
  text-transform: uppercase;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.map-track-btn svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
  .map-track-cam-scan::before,
  .map-track-cam-streaks,
  .map-track-cam-rec {
    animation: none;
  }
}

@keyframes mapBridgeConsole {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.52; }
}

@keyframes mapBridgeStatic {
  0% { opacity: 0.75; transform: translateY(0); }
  33% { opacity: 0.25; transform: translateY(-2px); }
  66% { opacity: 0.6; transform: translateY(1px); }
  100% { opacity: 0.35; transform: translateY(0); }
}

/* System-level no-selection dashboard tools: breadcrumb + search + filters */
/* Camera preset / shot cycle buttons (labelled cluster buttons).
   width:auto overrides the 34px icon-button base so the label renders
   inside the frame instead of spilling over the neighbour button. */
.map-cam-btn--labeled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  min-width: 34px;
  padding: 0 9px;
  white-space: nowrap;
}
.map-cam-btn--labeled[hidden] { display: none; }

/* ── System view 3D layer (quick zoom from the galaxy) ── */
.map-sys3d-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #020408;
}

.map-sys3d-layer[hidden] { display: none; }

.map-sys3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* Camera command console: explicit equivalents for orbit gestures, pinch /
   wheel zoom and radar recentering. */
.map-sys3d-camera-console {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: 76px;
  padding: 6px;
  color: #bceff2;
  background: linear-gradient(155deg, rgba(7, 25, 33, 0.94), rgba(4, 12, 22, 0.9));
  border: 1px solid rgba(102, 223, 230, 0.48);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.52), inset 0 0 18px rgba(69, 215, 225, 0.035);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.map-sys3d-camera-console button {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  color: rgba(199, 238, 242, 0.84);
  background: rgba(82, 199, 211, 0.075);
  border: 1px solid rgba(111, 218, 226, 0.24);
  border-radius: 6px;
  font: 700 0.48rem/1.05 var(--font-mono);
  letter-spacing: 0.065em;
  text-transform: uppercase;
  cursor: pointer;
}
.map-sys3d-camera-console button:hover,
.map-sys3d-camera-console button:focus-visible {
  outline: none;
  color: #effeff;
  border-color: rgba(126, 239, 244, 0.78);
  background: rgba(82, 213, 221, 0.16);
  box-shadow: 0 0 12px rgba(75, 220, 229, 0.15);
}
.map-sys3d-camera-console button:focus-visible {
  outline: 2px solid rgba(230, 254, 255, 0.82);
  outline-offset: 2px;
}
.map-sys3d-camera-console svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-sys3d-camera-mode[data-camera-mode="tactical"] {
  color: #061d24;
  background: #78e5eb;
  border-color: #b2f8fb;
  box-shadow: 0 0 14px rgba(88, 230, 237, 0.22);
}
.map-sys3d-camera-zoom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.map-sys3d-camera-zoom button {
  min-height: 32px;
  font-size: 1rem;
  line-height: 1;
}
.map-sys3d-camera-fit span { font-size: 0.44rem; }

@media (max-width: 700px) {
  .map-sys3d-camera-console {
    top: 8px;
    right: 8px;
    grid-template-columns: 44px 96px 44px;
    align-items: center;
    width: auto;
    gap: 4px;
    padding: 5px;
  }
  .map-sys3d-camera-console button { min-height: 44px; }
  .map-sys3d-camera-console button > span { display: none; }
  .map-sys3d-camera-console svg { width: 18px; height: 18px; }
  .map-sys3d-camera-zoom { grid-template-columns: 1fr 1fr; }
  .map-sys3d-camera-zoom button { min-width: 44px; min-height: 44px; }
}

.map-sys3d-canvas.is-body-hover { cursor: pointer; }

/* Tactical sensor overlay: prioritized screen-space contacts remain readable
   while the actual 3D bodies keep ownership of projection and camera state. */
.map-sys3d-sensors {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.map-sys3d-sensor-label {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  min-width: 76px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  color: #bdeaf3;
  background: linear-gradient(100deg, rgba(4, 15, 25, 0.9), rgba(7, 26, 38, 0.76));
  border: 1px solid rgba(125, 216, 232, 0.42);
  border-left-width: 2px;
  border-radius: 3px 9px 9px 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.48), inset 0 0 12px rgba(67, 192, 220, 0.04);
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  transition: border-color 120ms ease, background-color 120ms ease, opacity 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.map-sys3d-sensor-label[hidden],
.map-sys3d-hover-reticle[hidden] { display: none !important; }
.map-sys3d-sensor-label > i {
  flex: 0 0 20px;
  position: relative;
  background: rgba(91, 200, 224, 0.08);
  border-right: 1px solid rgba(125, 216, 232, 0.18);
}
.map-sys3d-sensor-label > i::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 7px currentColor;
}
.map-sys3d-sensor-label > span {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 3px 6px;
  text-align: left;
}
.map-sys3d-sensor-label strong,
.map-sys3d-sensor-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.map-sys3d-sensor-label strong { color: #e9fbff; font-size: 0.6rem; line-height: 1.2; letter-spacing: 0.035em; }
.map-sys3d-sensor-label small { color: rgba(174, 207, 218, 0.75); font-size: 0.46rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.055em; }
.map-sys3d-sensor-label:hover,
.map-sys3d-sensor-label:focus-visible {
  z-index: 1;
  outline: none;
  color: #8df5ff;
  border-color: rgba(141, 245, 255, 0.88);
  background: linear-gradient(100deg, rgba(6, 30, 42, 0.96), rgba(10, 45, 58, 0.9));
}
.map-sys3d-sensor-label.is-own { color: #78f0c8; border-color: rgba(92, 232, 191, 0.64); }
.map-sys3d-sensor-label.is-own > i { background: rgba(82, 226, 199, 0.12); }
.map-sys3d-sensor-label.is-occupied { color: #ff9b9b; border-color: rgba(255, 108, 116, 0.58); }
.map-sys3d-sensor-label.is-occupied > i::before { border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.map-sys3d-sensor-label.is-unknown { color: #a0aab8; border-style: dashed; filter: saturate(0.45); }
.map-sys3d-sensor-label.is-star { color: #ffd98b; border-color: rgba(255, 203, 94, 0.58); }
.map-sys3d-sensor-label.is-star > i::before { width: 16px; height: 16px; border-width: 2px; }
.map-sys3d-sensor-label.is-structure { color: #c7a7ff; border-color: rgba(181, 138, 255, 0.62); }
.map-sys3d-sensor-label.is-structure > i::before { border-radius: 0; transform: rotate(45deg); }
.map-sys3d-sensor-label.is-field { color: #ffd77d; border-color: rgba(255, 198, 82, 0.58); }
.map-sys3d-sensor-label.is-field > i::before { border-radius: 0; border-left: 0; border-right: 0; transform: translate(-50%, -50%) rotate(-25deg); }
.map-sys3d-sensor-label.is-moon { opacity: 0.84; }

.map-sys3d-hover-reticle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  color: #8df5ff;
  filter: drop-shadow(0 0 5px rgba(125, 232, 240, 0.55));
}
.map-sys3d-hover-reticle i { position: absolute; width: 9px; height: 9px; border-color: currentColor; border-style: solid; }
.map-sys3d-hover-reticle i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.map-sys3d-hover-reticle i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.map-sys3d-hover-reticle i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.map-sys3d-hover-reticle i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }

.map-sys3d-sensor-toggle {
  position: absolute;
  top: auto;
  right: 10px;
  bottom: 58px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 8px;
  color: #bfeef5;
  background: rgba(4, 14, 24, 0.84);
  border: 1px solid rgba(125, 216, 232, 0.38);
  border-radius: 4px;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.map-sys3d-sensor-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.map-sys3d-sensor-toggle b { min-width: 17px; padding: 2px 4px; color: #07131c; background: #89deeb; border-radius: 8px; font-size: 0.5rem; text-align: center; }
.map-sys3d-sensor-toggle.is-off { color: #7c8998; border-color: rgba(139, 151, 167, 0.3); }
.map-sys3d-sensor-toggle.is-off b { color: #a7b0bb; background: rgba(134, 148, 164, 0.16); }

/* Top-down tactical radar: persistent spatial context and an interactive
   camera surface, complementing the cinematic perspective view. */
.map-sys3d-radar {
  position: absolute;
  left: 10px;
  bottom: 58px;
  z-index: 4;
  width: 174px;
  overflow: hidden;
  color: #bfeff5;
  background: rgba(3, 13, 22, 0.9);
  border: 1px solid rgba(105, 220, 232, 0.45);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48), inset 0 0 20px rgba(58, 199, 213, 0.04);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.map-sys3d-radar[hidden] { display: none !important; }
.map-sys3d-radar > header {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px 0 7px;
  border-bottom: 1px solid rgba(105, 220, 232, 0.22);
  background: linear-gradient(90deg, rgba(24, 95, 111, 0.24), rgba(7, 25, 36, 0.32));
}
.map-sys3d-radar > header > span { min-width: 0; display: flex; align-items: center; gap: 5px; flex: 1; }
.map-sys3d-radar > header svg { width: 13px; height: 13px; fill: currentColor; }
.map-sys3d-radar > header b {
  overflow: hidden;
  color: #cff9ff;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-sys3d-radar > header output { color: rgba(170, 215, 224, 0.78); font-size: 0.45rem; }
.map-sys3d-radar > header button {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #9cecf4;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.map-sys3d-radar > header button:hover,
.map-sys3d-radar > header button:focus-visible { outline: 1px solid rgba(132, 234, 244, 0.74); background: rgba(90, 218, 228, 0.12); }
.map-sys3d-radar-stage { position: relative; width: 172px; height: 158px; overflow: hidden; }
.map-sys3d-radar-stage canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.map-sys3d-radar-contacts { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map-sys3d-radar-contact {
  position: absolute;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translate(-50%, -50%);
  color: #8ddce7;
  background: transparent;
  border: 0;
  border-radius: 50%;
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-sys3d-radar-contact[hidden] { display: none !important; }
.map-sys3d-radar-contact > i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: currentColor;
  border: 1px solid rgba(227, 252, 255, 0.76);
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}
.map-sys3d-radar-contact:hover,
.map-sys3d-radar-contact:focus-visible { z-index: 3; outline: 1px solid currentColor; outline-offset: 1px; }
.map-sys3d-radar-contact.is-own { color: #61ecc4; }
.map-sys3d-radar-contact.is-hostile { color: #ff737d; }
.map-sys3d-radar-contact.is-hostile > i { border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.map-sys3d-radar-contact.is-unknown { color: #6f7d8d; opacity: 0.72; }
.map-sys3d-radar-contact.is-unknown > i { width: 4px; height: 4px; background: transparent; border-style: dashed; }
.map-sys3d-radar-contact.is-star { color: #ffd36f; }
.map-sys3d-radar-contact.is-star > i { width: 10px; height: 10px; border: 0; }
.map-sys3d-radar-contact.is-moon > i { width: 3px; height: 3px; }
.map-sys3d-radar-contact.is-field { color: #ffc65c; }
.map-sys3d-radar-contact.is-field > i { width: 9px; height: 3px; border-radius: 0; transform: translate(-50%, -50%) rotate(-25deg); }
.map-sys3d-radar-contact.is-structure { color: #c09cff; }
.map-sys3d-radar-contact.is-structure > i { width: 7px; height: 7px; border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.map-sys3d-radar-contact.is-fleet { width: 30px; height: 30px; }
.map-sys3d-radar-contact.is-fleet > i {
  width: 0;
  height: 0;
  background: transparent;
  border: 5px solid transparent;
  border-bottom: 9px solid currentColor;
  border-radius: 0;
  transform: translate(-50%, -66%);
  box-shadow: none;
  filter: drop-shadow(0 0 4px currentColor);
}
.map-sys3d-radar-contact.is-fleet.is-hostile > i { transform: translate(-50%, -38%) rotate(180deg); }
.map-sys3d-radar-contact.is-selected::after {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px solid #f4ffff;
  border-radius: 50%;
  box-shadow: 0 0 7px currentColor;
}
.map-sys3d-radar-contact.is-transit::after { animation: kcRadarTransit 1.3s ease-out infinite; }
@keyframes kcRadarTransit { from { transform: scale(0.45); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.map-sys3d-radar > header .map-sys3d-radar-home { color: rgba(188, 244, 250, 0.78); }
.map-sys3d-radar-route {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 7px;
  color: #bcebf1;
  border-top: 1px solid rgba(105, 220, 232, 0.18);
  background: rgba(5, 22, 32, 0.9);
  font-size: 0.45rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.map-sys3d-radar-route[hidden] { display: none !important; }
.map-sys3d-radar-route b { overflow: hidden; color: #effdff; text-overflow: ellipsis; white-space: nowrap; }
.map-sys3d-radar-route span { flex: none; color: #72e5db; }
.map-sys3d-radar-route[data-mission="attack"] span,
.map-sys3d-radar-route[data-mission="missile"] span { color: #ff8991; }
.map-sys3d-radar-route[data-mission="asteroid_mine"] span { color: #ffd06b; }
.map-sys3d-radar.is-collapsed { width: 150px; }
.map-sys3d-radar.is-collapsed > header { border-bottom: 0; }
.map-sys3d-radar.is-collapsed .map-sys3d-radar-stage,
.map-sys3d-radar.is-collapsed .map-sys3d-radar-route,
.map-sys3d-radar.is-collapsed > header output { display: none; }

/* Direct-order destination markers carry richer action semantics, so sensor
   labels yield while those markers are active instead of creating duplicates. */
.map-sys3d-layer:has(.kc-scmd-target-hint:not([hidden])) .map-sys3d-sensor-label {
  opacity: 0.12;
  pointer-events: none;
}

@media (max-width: 699px) {
  .map-sys3d-sensor-toggle span { display: none; }
  .map-sys3d-sensor-toggle {
    right: 8px;
    bottom: calc(var(--map-overlay-bottom, 12px) + 2px);
    min-width: 52px;
    justify-content: center;
  }
  .map-sys3d-sensor-label { height: 32px; }
  .map-sys3d-sensor-label > i { flex-basis: 18px; }
  .map-sys3d-sensor-label strong { font-size: 0.56rem; }
  .map-sys3d-sensor-label small { font-size: 0.43rem; }
  .map-sys3d-radar { left: 8px; bottom: 58px; width: 126px; }
  .map-sys3d-radar-stage { width: 124px; height: 112px; }
  .map-sys3d-radar-route { min-height: 22px; padding-inline: 5px; font-size: 0.4rem; }
  .map-sys3d-radar > header b { font-size: 0.46rem; }
  .map-sys3d-radar.is-collapsed { width: 126px; }
  .map-sys3d-radar-contact { width: 32px; height: 32px; }
  .map-sys3d-radar-contact.is-fleet { width: 34px; height: 34px; }

  /* Once a destination is locked, the confirmation card replaces the radar as
     the active control. Free that corner so confirmation and camera controls
     never compete for the same touch space; dropping the candidate restores it. */
  .map-sys3d-layer:has(.kc-scmd-chip:not([hidden])) .map-sys3d-radar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-sys3d-radar-contact.is-transit::after { animation: none; }
}

/* Bottom-anchored HUD: the mobile header chrome overlays the container
   top, the lower edge is visible on every layout. */
.map-sys3d-back {
  position: absolute;
  bottom: var(--map-overlay-bottom, 12px);
  left: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font: 600 0.7rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.map-sys3d-back svg { width: 15px; height: 15px; flex: none; }

.map-sys3d-title {
  position: absolute;
  bottom: calc(var(--map-overlay-bottom, 12px) + 42px);
  left: 12px;
  z-index: 2;
  pointer-events: none;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  max-width: min(70vw, 480px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-sys3d-reticle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  color: #7dd8e8;
}

.map-sys3d-reticle svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 4px rgba(125, 216, 232, 0.5));
  animation: kcSys3dRetSpin 14s linear infinite;
  transition: opacity 0.5s ease;
}

/* Ring fades out ~2s after selection; the label stays as the indicator */
.map-sys3d-reticle.is-faded svg { opacity: 0; }
.map-sys3d-reticle.is-solo .map-sys3d-reticle-name {
  animation: kcSys3dNamePulse 2.6s ease-in-out infinite;
}
@keyframes kcSys3dNamePulse {
  0%, 100% { color: #e2f4f8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(125, 216, 232, 0.2); }
  50% { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 11px rgba(125, 216, 232, 0.8); }
}

.map-sys3d-reticle-name {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #e2f4f8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

@keyframes kcSys3dRetSpin {
  to { transform: rotate(360deg); }
}

#map-main-content.kc-sys3d-active .map-layers,
#map-main-content.kc-sys3d-active .map-follow-chip,
#map-main-content.kc-sys3d-active .map-quest-guidance {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .map-sys3d-reticle svg { animation: none; transition: none; }
  .map-sys3d-reticle.is-solo .map-sys3d-reticle-name {
    animation: none;
    color: #ffffff;
    border-bottom: 1px solid rgba(125, 216, 232, 0.85);
    padding-bottom: 1px;
  }
}

/* ── Ship command HUD (system 3D): brackets + order strip + targeting ── */
.kc-scmd-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* During confirmation the primary command surface must win the stacking
   context over secondary radar/sensor controls. Placement also avoids their
   rectangles, but this keeps every CTA tappable in the last-resort fallback. */
.map-sys3d-layer:has(.kc-scmd-strip:not([hidden]), .kc-scmd-chip:not([hidden])) .kc-scmd-hud { z-index: 6; }

.kc-scmd-bracket {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #9fe8d8;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kc-scmd-bracket[hidden] { display: none; }

.kc-scmd-corner {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 0 solid currentColor;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(120, 230, 205, 0.45));
}
.kc-scmd-corner.tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.kc-scmd-corner.tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.kc-scmd-corner.bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.kc-scmd-corner.br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

.kc-scmd-count {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -3px);
  padding: 1px 7px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #dffcf2;
  background: rgba(8, 20, 18, 0.78);
  border: 1px solid rgba(120, 230, 205, 0.45);
  border-radius: 9px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* A bracket is a fleet marker, not just an empty tap target. Keep a compact
   class silhouette visible even when the real 3D hull is sub-pixel or hidden
   by its engine glow. */
.kc-scmd-fleet-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(18px, 44%, 27px);
  height: clamp(18px, 44%, 27px);
  transform: translate(-50%, -50%);
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.6;
  opacity: 0.78;
  filter: drop-shadow(0 0 5px rgba(119, 245, 218, 0.72));
  pointer-events: none;
}
.kc-scmd-bracket.is-active .kc-scmd-fleet-glyph {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(190, 255, 236, 0.95));
}

.kc-scmd-bracket.is-active { color: #eafff8; }
.kc-scmd-bracket.is-active .kc-scmd-corner {
  border-width: 0;
  filter: drop-shadow(0 0 6px rgba(160, 255, 228, 0.9));
}
.kc-scmd-bracket.is-active .kc-scmd-corner.tl { border-left-width: 3px; border-top-width: 3px; }
.kc-scmd-bracket.is-active .kc-scmd-corner.tr { border-right-width: 3px; border-top-width: 3px; }
.kc-scmd-bracket.is-active .kc-scmd-corner.bl { border-left-width: 3px; border-bottom-width: 3px; }
.kc-scmd-bracket.is-active .kc-scmd-corner.br { border-right-width: 3px; border-bottom-width: 3px; }
/* Transit brackets read by shape: corners rotated into outward chevrons
   (diamond), so a moving fleet never mimics a stationed colony bracket. */
.kc-scmd-bracket.is-transit .kc-scmd-corner.tl { transform: rotate(45deg); transform-origin: 4px 4px; }
.kc-scmd-bracket.is-transit .kc-scmd-corner.tr { transform: rotate(-45deg); transform-origin: calc(100% - 4px) 4px; }
.kc-scmd-bracket.is-transit .kc-scmd-corner.bl { transform: rotate(-45deg); transform-origin: 4px calc(100% - 4px); }
.kc-scmd-bracket.is-transit .kc-scmd-corner.br { transform: rotate(45deg); transform-origin: calc(100% - 4px) calc(100% - 4px); }
.kc-scmd-bracket.is-contact {
  color: #ff7777;
}
.kc-scmd-bracket.is-contact .kc-scmd-corner {
  filter: drop-shadow(0 0 5px rgba(255, 85, 98, 0.78));
}
.kc-scmd-bracket.is-contact .kc-scmd-count {
  color: #ffd7d7;
  background: rgba(35, 8, 13, 0.88);
  border-color: rgba(255, 100, 110, 0.62);
}
.kc-scmd-bracket.is-contact .kc-scmd-bracket-glyph {
  top: 50%;
  width: 21px;
  height: 21px;
  color: #ff7777;
  stroke: currentColor;
  filter: drop-shadow(0 0 5px rgba(255, 85, 98, 0.85));
}
.kc-scmd-bracket.is-contact.is-active {
  color: #fff0f0;
  animation: kc-scmd-contact-lock 1.15s ease-in-out infinite;
}
@keyframes kc-scmd-contact-lock {
  50% { filter: drop-shadow(0 0 7px rgba(255, 85, 98, 0.72)); }
}
/* Foreign colonies read by shape and tag, not hue alone: dashed corners plus
   the owner's name on the chip mark another player's territory. */
.kc-scmd-bracket.is-foreign-colony {
  color: #ff9b9b;
  cursor: pointer;
}
.kc-scmd-bracket.is-foreign-colony .kc-scmd-corner {
  border-style: dashed;
  filter: drop-shadow(0 0 4px rgba(255, 96, 108, 0.55));
}
.kc-scmd-bracket.is-foreign-colony .kc-scmd-count {
  color: #ffd7d7;
  background: rgba(35, 8, 13, 0.88);
  border-color: rgba(255, 100, 110, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-scmd-cluster-item.is-hostile {
  color: #ffb1b1;
  border-color: rgba(255, 100, 110, 0.34);
}
.kc-scmd-cluster-item.is-transit span:first-child::before {
  content: '\2023 ';
  opacity: 0.8;
}

/* Cluster brackets read by shape: doubled corners, not a hue shift. */
.kc-scmd-bracket.is-cluster .kc-scmd-corner { box-shadow: 3px 3px 0 -1px currentColor; }
.kc-scmd-bracket.is-cluster .kc-scmd-corner.tr { box-shadow: -3px 3px 0 -1px currentColor; }
.kc-scmd-bracket.is-cluster .kc-scmd-corner.bl { box-shadow: 3px -3px 0 -1px currentColor; }
.kc-scmd-bracket.is-cluster .kc-scmd-corner.br { box-shadow: -3px -3px 0 -1px currentColor; }

.kc-scmd-hud.is-targeting .kc-scmd-bracket { opacity: 0.35; pointer-events: none; }
.kc-scmd-hud.is-targeting .kc-scmd-bracket.is-contact {
  opacity: 1;
  pointer-events: auto;
  cursor: crosshair;
}

@media (prefers-reduced-motion: reduce) {
  .kc-scmd-bracket.is-contact.is-active { animation: none; }
  .kc-scmd-combat-lock-head i { animation: none; }
}

/* Context-order markers are direct RTS controls: the canvas body and its
   projected label are equivalent targets, which keeps small worlds usable on
   touch screens and exposes the same flow to keyboard users. */
.kc-scmd-targets {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.kc-scmd-target-hint {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px 3px 6px;
  font: 700 0.58rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #bff7e8;
  background: rgba(5, 17, 23, 0.88);
  border: 1px solid rgba(125, 232, 200, 0.58);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.48), 0 0 10px rgba(125, 232, 200, 0.1);
  will-change: transform;
  appearance: none;
  pointer-events: auto;
  cursor: crosshair;
  -webkit-tap-highlight-color: transparent;
}
.kc-scmd-target-hint:hover,
.kc-scmd-target-hint:focus-visible {
  outline: none;
  color: #effffb;
  border-color: currentColor;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.56), 0 0 18px color-mix(in srgb, currentColor 34%, transparent);
}
.kc-scmd-target-hint:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 2px;
}
.kc-scmd-target-hint[hidden] { display: none; }
.kc-scmd-target-hint svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.kc-scmd-target-hint.is-attack {
  color: #ff9b9b;
  border-color: rgba(255, 108, 108, 0.72);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.48), 0 0 12px rgba(255, 86, 86, 0.2);
}
.kc-scmd-target-hint.is-asteroid_mine { color: #ffd77d; border-color: rgba(255, 198, 82, 0.68); }
.kc-scmd-target-hint.is-colonize { color: #9cf5b8; border-color: rgba(112, 232, 151, 0.68); }
.kc-scmd-target-hint.is-explore { color: #9fdcff; border-color: rgba(104, 191, 240, 0.65); }
.kc-scmd-target-hint.is-disabled { opacity: 0.48; filter: saturate(0.55); }
.kc-scmd-target-ratio {
  padding-left: 4px;
  color: currentColor;
  opacity: 0.75;
  border-left: 1px solid currentColor;
}

@media (max-width: 700px) {
  .kc-scmd-target-hint {
    min-height: 30px;
    padding: 4px 8px 4px 7px;
    font-size: 0.6rem;
  }
  .kc-scmd-target-hint svg { width: 15px; height: 15px; }
}

.kc-scmd-cluster {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: rgba(8, 16, 22, 0.92);
  border: 1px solid rgba(120, 230, 205, 0.4);
  border-radius: 8px;
  pointer-events: auto;
}
.kc-scmd-cluster[hidden] { display: none; }
.kc-scmd-cluster-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding: 0 10px;
  font-size: 0.74rem;
  color: #dfeef2;
  background: rgba(120, 230, 205, 0.08);
  border: 1px solid rgba(120, 230, 205, 0.25);
  border-radius: 6px;
  cursor: pointer;
}

.kc-scmd-strip,
.kc-scmd-chip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  max-width: min(86vw, 340px);
  padding: 8px 10px;
  background: rgba(8, 16, 22, 0.9);
  border: 1px solid rgba(120, 230, 205, 0.4);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.kc-scmd-chip { z-index: 8; }
.kc-scmd-chip[data-mission="attack"] {
  border-color: rgba(255, 108, 108, 0.68);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.56), 0 0 18px rgba(255, 82, 82, 0.16);
}
.kc-scmd-chip[data-mission="attack"] .kc-scmd-chip-head,
.kc-scmd-chip[data-mission="attack"] .kc-scmd-chip-meta { color: #ffe4e4; }
.kc-scmd-chip[data-mission="attack"] [data-scmd-act="confirm"] {
  color: #2b0707;
  background: #ff7777;
}
.kc-scmd-chip[data-mission="attack"] .kc-scmd-act-missile {
  color: #ffd166;
  background: rgba(255, 193, 82, 0.11);
  border: 1px solid rgba(255, 193, 82, 0.58);
}
.kc-scmd-combat-lock {
  --kc-own-force: #65e5dc;
  --kc-hostile-force: #ff747d;
  margin-top: 6px;
  padding: 6px 7px 7px;
  color: #ffe8e9;
  background: linear-gradient(100deg, rgba(62, 11, 20, 0.7), rgba(10, 23, 31, 0.78));
  border: 1px solid rgba(255, 105, 116, 0.34);
  border-radius: 7px;
  box-shadow: inset 0 0 16px rgba(255, 71, 86, 0.045);
}
.kc-scmd-combat-lock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 800 0.54rem/1.15 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kc-scmd-combat-lock-head span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ff9aa1;
}
.kc-scmd-combat-lock-head i {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 7px currentColor;
  animation: kcCombatLockPulse 0.82s ease-in-out infinite;
}
.kc-scmd-combat-lock-head b { color: #fff; }
.kc-scmd-combat-lock[data-assessment="advantage"] .kc-scmd-combat-lock-head b { color: #77efcf; }
.kc-scmd-combat-lock[data-assessment="outnumbered"] .kc-scmd-combat-lock-head b { color: #ff8a91; }
.kc-scmd-combat-lock[data-assessment="unknown"] .kc-scmd-combat-lock-head b { color: #ffd27b; }
.kc-scmd-combat-force {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 2px;
}
.kc-scmd-combat-force span,
.kc-scmd-combat-force i {
  display: block;
  min-width: 8px;
  height: 100%;
  transform-origin: left;
}
.kc-scmd-combat-force span {
  background: linear-gradient(90deg, rgba(101, 229, 220, 0.35), var(--kc-own-force));
  box-shadow: 0 0 7px rgba(101, 229, 220, 0.38);
}
.kc-scmd-combat-force i {
  background: linear-gradient(90deg, var(--kc-hostile-force), rgba(255, 116, 125, 0.35));
  box-shadow: 0 0 7px rgba(255, 116, 125, 0.4);
}
.kc-scmd-combat-lock small {
  display: block;
  margin-top: 4px;
  color: rgba(229, 239, 242, 0.76);
  font-size: 0.51rem;
  line-height: 1.2;
}
@keyframes kcCombatLockPulse {
  0%, 100% { opacity: 0.52; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.18); }
}
.kc-scmd-chip[data-mission="asteroid_mine"] {
  border-color: rgba(255, 198, 82, 0.72);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.56), 0 0 20px rgba(255, 193, 82, 0.17);
}
.kc-scmd-chip[data-mission="asteroid_mine"] .kc-scmd-chip-head,
.kc-scmd-chip[data-mission="asteroid_mine"] .kc-scmd-chip-meta { color: #fff0c2; }
.kc-scmd-chip[data-mission="asteroid_mine"] [data-scmd-act="confirm"] {
  color: #261800;
  background: #ffd166;
}
.kc-scmd-chip-context {
  margin-top: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 198, 82, 0.28);
  border-radius: 6px;
  background: rgba(255, 193, 82, 0.08);
  color: #ffe7a3;
  font: 700 0.62rem var(--font-mono);
  line-height: 1.25;
}
.kc-scmd-strip[hidden],
.kc-scmd-chip[hidden] { display: none; }

.kc-scmd-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kc-scmd-strip.is-clearance-compact {
  gap: 4px;
  padding: 3px 8px;
}
.kc-scmd-strip.is-clearance-compact .kc-scmd-card-ships { display: none; }
.kc-scmd-strip.is-clearance-compact .kc-scmd-strip-actions .kc-scmd-act,
.kc-scmd-strip.is-clearance-compact .kc-scmd-x {
  min-height: 34px;
  height: 34px;
}
.kc-scmd-strip.is-clearance-compact .kc-scmd-doctrine-formation { padding-block: 2px; }
.kc-scmd-strip.is-clearance-compact .kc-scmd-posture select { height: 20px; }
.kc-scmd-chip.is-clearance-compact {
  max-width: calc(100% - 16px);
  padding: 6px 8px;
}
.kc-scmd-chip.is-clearance-compact .kc-scmd-chip-head {
  font-size: 0.66rem;
  line-height: 1.18;
}
.kc-scmd-chip.is-clearance-compact .kc-scmd-chip-meta {
  margin-top: 2px;
  font-size: 0.55rem;
  line-height: 1.15;
}
.kc-scmd-chip.is-clearance-compact .kc-scmd-chip-actions { margin-top: 5px; }
.kc-scmd-chip.is-clearance-compact .kc-scmd-act,
.kc-scmd-chip.is-clearance-compact .kc-scmd-x {
  min-height: 34px;
  height: 34px;
}
.kc-scmd-card { min-width: 0; flex: 1 1 100%; }
.kc-scmd-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #eafff8;
  white-space: nowrap;
}
.kc-scmd-card-n { font-size: 0.66rem; color: #9fe8d8; }
.kc-scmd-card-ships {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 3px;
  font-size: 0.64rem;
  color: rgba(223, 238, 242, 0.85);
}
.kc-scmd-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
}
.kc-scmd-doctrine {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
  color: #bfeee5;
  font: 700 0.5rem/1 var(--font-mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.kc-scmd-doctrine-formation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid rgba(117, 227, 213, 0.25);
  border-radius: 4px;
  background: rgba(86, 210, 197, 0.07);
}
.kc-scmd-doctrine-formation i {
  width: 6px;
  height: 6px;
  flex: none;
  transform: rotate(45deg);
  border: 1px solid currentColor;
  box-shadow: 0 0 5px currentColor;
}
.kc-scmd-doctrine-formation b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}
.kc-scmd-posture {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.kc-scmd-posture > span { color: rgba(191, 238, 229, 0.62); }
.kc-scmd-posture select {
  min-width: 0;
  max-width: 106px;
  height: 24px;
  padding: 0 20px 0 6px;
  color: #eafff8;
  background: rgba(5, 22, 29, 0.96);
  border: 1px solid rgba(117, 227, 213, 0.38);
  border-radius: 4px;
  font: 700 0.5rem var(--font-mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
}
.kc-scmd-posture select:focus-visible { outline: 2px solid #8ff7e8; outline-offset: 1px; }
.kc-scmd-posture-state { width: 10px; color: #7ff0cf; }
.kc-scmd-doctrine.is-saving { opacity: 0.65; }
.kc-scmd-doctrine.is-saved { color: #8effdb; }
.kc-scmd-doctrine[data-posture="blockade"] { color: #ffca72; }
.kc-scmd-doctrine[data-posture="siege"] { color: #ff8a82; }
.kc-scmd-doctrine[data-posture="defense"] { color: #7eeeff; }
.kc-scmd-doctrine[data-posture="screen"] { color: #c4a5ff; }
.kc-scmd-card-transit {
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: #bfeee5;
  font: 700 0.56rem var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.kc-scmd-card-mission,
.kc-scmd-card-eta { white-space: nowrap; }
.kc-scmd-card-progress {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(121, 217, 238, 0.15);
  box-shadow: inset 0 0 0 1px rgba(121, 217, 238, 0.16);
}
.kc-scmd-card-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #44a8d8, #79d9ee);
  box-shadow: 0 0 8px rgba(121, 217, 238, 0.45);
  transition: width 0.35s linear;
}
.kc-scmd-strip.is-clearance-compact .kc-scmd-card-transit { margin-top: 3px; }
.kc-scmd-strip.is-clearance-compact .kc-scmd-card-meta { margin-top: 3px; }
.kc-scmd-shipline { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kc-scmd-shipline img { width: 16px; height: 16px; object-fit: contain; }

.kc-scmd-strip-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(70px, 1fr)) 40px;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
.kc-scmd-strip.has-camera-action .kc-scmd-strip-actions {
  grid-template-columns: repeat(3, minmax(62px, 1fr)) 40px;
}

.kc-scmd-act {
  min-height: 40px;
  padding: 0 16px;
  font: 700 0.72rem var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #06231c;
  background: #7de8c8;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.kc-scmd-act:disabled { opacity: 0.55; cursor: default; }
.kc-scmd-strip-actions .kc-scmd-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 5px;
  font-size: 0.58rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
}
.kc-scmd-act-label {
  min-width: 0;
  white-space: normal;
  text-align: center;
}
.kc-scmd-act-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kc-scmd-direct-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: rgba(157, 236, 225, 0.72);
  font: 600 9px/1.2 var(--font-mono, monospace);
  letter-spacing: 0.025em;
}
.kc-scmd-direct-hint span { color: #78ffe3; font-size: 7px; text-shadow: 0 0 7px rgba(80, 255, 216, 0.7); }
.kc-scmd-direct-hint b { font: inherit; white-space: nowrap; }
.kc-scmd-act--dispatch {
  color: #bfeee5;
  background: rgba(120, 230, 205, 0.1);
  border: 1px solid rgba(120, 230, 205, 0.42);
}
.kc-scmd-act--local {
  color: #d6f5ef;
  background: rgba(120, 230, 205, 0.18);
  border: 1px solid rgba(120, 230, 205, 0.52);
}
.kc-scmd-act--quick .kc-scmd-act-icon { width: 19px; height: 19px; }
.kc-scmd-act--camera {
  color: #bfeee5;
  background: rgba(99, 179, 237, 0.1);
  border: 1px solid rgba(99, 179, 237, 0.42);
}
.kc-scmd-act--camera.is-active {
  color: #071d25;
  background: #79d9ee;
  border-color: #a5efff;
  box-shadow: 0 0 14px rgba(121, 217, 238, 0.28);
}

.kc-scmd-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  font-size: 0.85rem;
  color: rgba(223, 238, 242, 0.8);
  background: rgba(120, 230, 205, 0.08);
  border: 1px solid rgba(120, 230, 205, 0.3);
  border-radius: 7px;
  cursor: pointer;
}

.kc-scmd-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(92%, 460px);
  padding: 7px 8px 7px 12px;
  background: rgba(8, 16, 22, 0.92);
  border: 1px solid rgba(125, 232, 200, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.kc-scmd-banner[hidden] { display: none; }
.kc-scmd-banner-dot {
  width: 9px;
  height: 9px;
  flex: none;
  background: #7de8c8;
  border-radius: 50%;
  animation: kcScmdPulse 1.4s ease-in-out infinite;
}
.kc-scmd-banner-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #dfeef2;
}
.kc-scmd-banner-txt b {
  color: #eafff8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 4px;
}
@media (max-width: 639.98px) {
  .kc-scmd-banner {
    width: calc(100% - 24px);
    max-width: none;
    box-sizing: border-box;
  }
}
@keyframes kcScmdPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Positive command receipt: bridges the server ACK to the first live transit
   frame, so an accepted order never vanishes from the tactical surface. */
.kc-scmd-ack {
  --kc-ack: #79e8d0;
  position: absolute;
  left: 50%;
  z-index: 9;
  width: min(92%, 430px);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 12px 9px 9px;
  transform: translate(-50%, -9px) scale(0.97);
  opacity: 0;
  color: #eafffa;
  background: linear-gradient(100deg, rgba(7, 29, 34, 0.97), rgba(5, 16, 26, 0.95));
  border: 1px solid var(--kc-ack);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.58), 0 0 20px rgba(90, 230, 205, 0.16);
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(.2,.85,.25,1);
}
.kc-scmd-ack[hidden] { display: none; }
.kc-scmd-ack.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.kc-scmd-ack.is-leaving { opacity: 0; transform: translate(-50%, -6px) scale(0.985); }
.kc-scmd-ack[data-mission="attack"] { --kc-ack: #ff7d85; }
.kc-scmd-ack[data-mission="asteroid_mine"] { --kc-ack: #ffd166; }
.kc-scmd-ack[data-mission="explore"] { --kc-ack: #85d8ff; }
.kc-scmd-ack[data-mission="colonize"] { --kc-ack: #8bf0a8; }
.kc-scmd-ack-sigil {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #06151b;
  background: var(--kc-ack);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(90, 230, 205, 0.38);
}
.kc-scmd-ack[data-mission="attack"] .kc-scmd-ack-sigil { box-shadow: 0 0 16px rgba(255, 90, 100, 0.38); }
.kc-scmd-ack[data-mission="asteroid_mine"] .kc-scmd-ack-sigil { box-shadow: 0 0 16px rgba(255, 209, 102, 0.38); }
.kc-scmd-ack-sigil svg { width: 22px; height: 22px; fill: currentColor; }
.kc-scmd-ack-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kc-scmd-ack-copy b { color: var(--kc-ack); font: 800 0.64rem/1.2 var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase; }
.kc-scmd-ack-copy > span { overflow: hidden; font-size: 0.7rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.kc-scmd-ack-copy strong { color: #fff; text-transform: uppercase; }
.kc-scmd-ack-copy small { color: rgba(211, 236, 240, 0.8); font-size: 0.55rem; line-height: 1.25; }
.kc-scmd-ack > i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  transform-origin: left;
  background: var(--kc-ack);
  box-shadow: 0 0 8px var(--kc-ack);
  animation: kcScmdAckDrain 4.2s linear forwards;
}
@keyframes kcScmdAckDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.kc-scmd-ghost {
  --kc-route-color: #7de8c8;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.kc-scmd-ghost[data-mission="attack"] { --kc-route-color: #ff7777; }
.kc-scmd-ghost[data-mission="asteroid_mine"] { --kc-route-color: #ffd166; }
.kc-scmd-ghost[data-mission="colonize"] { --kc-route-color: #85efa7; }
.kc-scmd-ghost[data-mission="explore"] { --kc-route-color: #8ed8ff; }
.kc-scmd-ghost[hidden] { display: none; }
.kc-scmd-ghost-line {
  fill: none;
  stroke: var(--kc-route-color);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 8 7;
  opacity: 0.94;
  filter: drop-shadow(0 0 4px var(--kc-route-color));
  animation: kcScmdDash 1.1s linear infinite;
}
.kc-scmd-route-arrow { fill: var(--kc-route-color); }
.kc-scmd-ghost-origin {
  fill: var(--kc-route-color);
  stroke: rgba(5, 16, 24, 0.92);
  stroke-width: 2;
}
.kc-scmd-ghost-dot {
  fill: rgba(5, 16, 24, 0.66);
  stroke: var(--kc-route-color);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px var(--kc-route-color));
  transform-box: fill-box;
  transform-origin: center;
  animation: kcScmdRoutePulse 1.25s ease-in-out infinite;
}
.kc-scmd-ghost.is-preview .kc-scmd-ghost-line { opacity: 0.54; stroke-dasharray: 3 7; }
.kc-scmd-ghost.is-preview .kc-scmd-ghost-dot,
.kc-scmd-ghost.is-preview .kc-scmd-ghost-origin { opacity: 0.68; }
@keyframes kcScmdDash {
  to { stroke-dashoffset: -13; }
}
@keyframes kcScmdRoutePulse {
  0%, 100% { transform: scale(0.86); opacity: 0.76; }
  50% { transform: scale(1.26); opacity: 1; }
}

.kc-scmd-chip-head { font-size: 0.75rem; font-weight: 600; color: #eafff8; }
.kc-scmd-chip-ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}
.kc-scmd-chip-warn {
  margin-top: 4px;
  font-size: 0.64rem;
  color: #ffd9a0;
}
.kc-scmd-chip-meta { margin-top: 3px; font-size: 0.64rem; color: rgba(223, 238, 242, 0.85); }
.kc-scmd-chip-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.kc-scmd-chip-actions .kc-scmd-act { flex: 1; }

/* Composition sheet: dispatch stepper rows inside a compact bottom sheet */
.kc-scmd-sheet-overlay {
  align-items: flex-end;
  background: rgba(2, 6, 14, 0.86);
  backdrop-filter: blur(12px) saturate(0.72);
  -webkit-backdrop-filter: blur(12px) saturate(0.72);
}
@media (max-width: 639.98px) {
  /* Mobile WebKit can retain black compositor tiles after a blurred fixed
     sheet is removed while WebGL is animating. A denser scrim preserves the
     modal hierarchy without allocating that full-viewport blur surface. */
  .kc-scmd-sheet-overlay {
    background: rgba(2, 6, 14, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.kc-scmd-sheet {
  max-height: 76vh;
  background: linear-gradient(180deg, #0b1024 0%, #070b16 100%);
  border-color: rgba(59, 225, 219, 0.4);
  box-shadow: 0 -18px 56px rgba(0, 0, 0, 0.62), 0 0 24px rgba(0, 221, 220, 0.08);
}
.kc-scmd-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.kc-scmd-fixed-note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(82, 226, 199, 0.32);
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(28, 168, 146, 0.16), rgba(14, 38, 52, 0.72));
  color: #c7f9ef;
  font-size: 0.72rem;
  line-height: 1.35;
}
.kc-scmd-fixed-note b {
  flex: 0 0 auto;
  padding: 0.2rem 0.42rem;
  border-radius: 5px;
  background: rgba(82, 226, 199, 0.16);
  color: #75f2d8;
  font: 700 0.58rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
}
.kc-scmd-sheet[data-fixed-composition="1"] .fleet-ship-qty:disabled,
.kc-scmd-sheet-overlay[data-fixed-composition="1"] .fleet-ship-qty:disabled {
  opacity: 0.78;
  color: #bff8ec;
  cursor: not-allowed;
}
.kc-scmd-sheet-overlay[data-fixed-composition="1"] .fleet-ship-step,
.kc-scmd-sheet-overlay[data-fixed-composition="1"] .fleet-ship-max {
  display: none;
}
.kc-scmd-preset {
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #dfeef2;
  background: rgba(120, 230, 205, 0.08);
  border: 1px solid rgba(120, 230, 205, 0.3);
  border-radius: 16px;
  cursor: pointer;
}
.kc-scmd-preset.is-active {
  color: #06231c;
  background: #7de8c8;
  border-color: #7de8c8;
  font-weight: 700;
}
.kc-scmd-sheet-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.kc-scmd-sheet-total { flex: 1; font-size: 0.7rem; color: #9fe8d8; }

@media (prefers-reduced-motion: reduce) {
  .kc-scmd-banner-dot { animation: none; }
  .kc-scmd-ghost-line,
  .kc-scmd-ghost-dot { animation: none; }
  .kc-scmd-ack { transition: none; }
  .kc-scmd-ack > i { animation: none; }
}