/* ================================================================
   3D GLOBE — styling for the MapLibre earth sphere
   ================================================================ */

.lg-map-globe-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  cursor: grab;
  /* Starfield behind the globe */
  background: #050508 radial-gradient(ellipse at 30% 40%, #0a0a1a 0%, #050508 50%, #020204 100%);
}
.lg-map-globe-wrap:active {
  cursor: grabbing;
}
.lg-map-globe-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Dense starfield — 40+ stars of varying sizes and colors */
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9) 50%, transparent 50%),
    radial-gradient(1px 1px at 25% 70%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,1) 50%, transparent 50%),
    radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 75% 35%, rgba(255,255,255,0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 15% 50%, rgba(255,240,200,0.7) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 25%, rgba(200,220,255,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 5% 85%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 55%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 12% 8%, rgba(255,255,255,0.8) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 22% 40%, rgba(200,200,255,0.6) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 32% 65%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 42% 30%, rgba(255,250,220,0.7) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 52% 95%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 62% 12%, rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 72% 48%, rgba(200,220,255,0.5) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 82% 78%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 92% 22%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 2% 35%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 8% 62%, rgba(200,200,255,0.6) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 18% 88%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 28% 5%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 38% 55%, rgba(255,250,220,0.4) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 48% 78%, rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 58% 42%, rgba(200,220,255,0.5) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 68% 8%, rgba(255,255,255,0.7) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 78% 68%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 88% 38%, rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(0.5px 0.5px at 98% 85%, rgba(200,200,255,0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,0.9) 50%, transparent 50%),
    radial-gradient(2px 2px at 80% 45%, rgba(255,240,200,0.6) 50%, transparent 50%),
    radial-gradient(2px 2px at 50% 70%, rgba(200,220,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 14% 75%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 34% 45%, rgba(255,255,255,0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 54% 5%, rgba(255,255,255,0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 74% 92%, rgba(200,220,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 94% 50%, rgba(255,255,255,0.6) 50%, transparent 50%);
  background-repeat: repeat;
  background-size: 100% 100%;
  opacity: 0.9;
  animation: starTwinkle 4s ease-in-out infinite alternate;
}
.lg-map-globe-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
}

/* Globe loading state */
.lg-map-globe-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  pointer-events: none;
}
.lg-map-globe-loading::after {
  content: '';
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.2);
  border-top-color: var(--gold);
  animation: globeSpin 0.8s linear infinite;
}
@keyframes globeSpin {
  to { transform: rotate(360deg); }
}

/* When globe is active, fade the SVG */
.lg-map.has-globe .lg-map-svg {
  opacity: 0;
  transition: opacity 0.5s;
}

/* Globe hint label */
.lg-map-globe-hint {
  position: absolute;
  bottom: 8px;
  left: 12px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 8;
  opacity: 0.6;
  pointer-events: none;
}

/* Expanded mode for 3D globe */
.lg-map-panel.lg-map-expanded .lg-map-globe-wrap {
  cursor: grab;
}

/* Toggle between 2D/3D */
.lg-map-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.lg-map-view-btn {
  padding: 5px 12px;
  border-radius: var(--radius-md);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  background: none;
}
.lg-map-view-btn.active {
  background: var(--gold-glow);
  color: var(--gold);
}
.lg-map-view-btn:hover:not(.active) {
  color: var(--text-secondary);
}

@keyframes starTwinkle {
  0%   { opacity: 0.6; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.8; }
}