/* ============================================================
   star-map.css — Star map canvas, node overlay labels, void lanes
   ============================================================ */

/* Canvas is fixed full-screen (sized in main.css) */
#starfield {
  background: radial-gradient(ellipse at 50% 45%, #0a0d1a 0%, #05060a 60%, #020308 100%);
  cursor: grab;
}
#starfield:active { cursor: grabbing; }
body.panel-open #starfield { cursor: default; }

/* DOM overlay for node labels (if any are drawn in HTML vs Three sprite) */
.star-label-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.star-label {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 200ms, color 200ms;
}
.star-label.is-hovered { opacity: 1; color: var(--theme-primary, var(--accent)); }

/* Vignette to focus attention on the central node */
.starfield-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
}

/* Loading state before star map boots */
.boot-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: var(--fg-dim);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: center;
}
.boot-message .dot { animation: pulse-dot 1.2s infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; color: var(--accent); }
}