/* World map / globe styling, ported from the v1 WorldMapPanel scoped styles.
   The globe SVG is built client-side by map.js; these styles drive its identity. */

.map-frame {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  padding: 0.75rem;
}

.map-frame.earth-glow {
  box-shadow: 0 0 60px rgba(96, 165, 250, 0.15);
}

/* Once map.js builds the globe, drop the server-rendered crawl fallback so the
   globe owns the panel exactly like v1. Without JS the fallback nav stays visible. */
[data-world-map-canvas][data-enhanced='true'] .map-noscript {
  display: none;
}

/* "Jump to {region}." personalization pill, ported from the v1 map header. */
.map-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.map-jump-button {
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.map-jump-button:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--text);
}

.map-svg {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}

@media (min-width: 640px) {
  .map-svg {
    aspect-ratio: 2 / 1;
  }
}

.globe-grab {
  cursor: grab;
}

.globe-grabbing {
  cursor: grabbing;
}

.map-noscript {
  padding: 0.75rem 0 0;
}

/* ── Dot patterns (land) ───────────────────────────────────────────────────── */
.dot-pattern--default {
  fill: color-mix(in srgb, var(--accent) 36%, var(--surface));
}

.dot-pattern--selected {
  fill: var(--accent);
}

.dot-pattern--muted {
  fill: color-mix(in srgb, var(--line) 55%, transparent);
}

.dot-pattern--globe-default {
  fill: #e0f3ff;
}

.dot-pattern--globe-selected {
  fill: #ffffff;
}

.dot-pattern--globe-muted {
  fill: color-mix(in srgb, #c5e8ff 45%, transparent);
}

:root[data-theme='dark'] .dot-pattern--default {
  fill: #737373;
}

:root[data-theme='dark'] .dot-pattern--selected {
  fill: #ffffff;
}

:root[data-theme='dark'] .dot-pattern--muted {
  fill: color-mix(in srgb, #404040 70%, transparent);
}

:root[data-theme='dark'] .dot-pattern--globe-default {
  fill: #a3a3a3;
}

:root[data-theme='dark'] .dot-pattern--globe-selected {
  fill: #ffffff;
}

:root[data-theme='dark'] .dot-pattern--globe-muted {
  fill: color-mix(in srgb, #525252 60%, transparent);
}

:root[data-theme='light'] .dot-pattern--globe-default {
  fill: rgba(255, 255, 255, 0.85);
}

:root[data-theme='light'] .dot-pattern--globe-selected {
  fill: #ffffff;
}

:root[data-theme='light'] .dot-pattern--globe-muted {
  fill: rgba(255, 255, 255, 0.5);
}

/* ── Shapes & strokes ──────────────────────────────────────────────────────── */
.map-shape-stroke {
  fill: none;
  stroke: color-mix(in srgb, var(--line) 45%, transparent);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
  transition: stroke-opacity 260ms ease;
}

.map-shape-stroke--muted {
  stroke-opacity: 0.45;
}

.map-shape-stroke--active-area {
  stroke: color-mix(in srgb, #8df3ff 75%, #ffffff);
  stroke-width: 1.2;
  stroke-opacity: 1;
}

:root[data-theme='dark'] .map-shape-stroke {
  stroke: color-mix(in srgb, #404040 50%, transparent);
  stroke-width: 0.5;
}

:root[data-theme='dark'] .map-shape-stroke--active-area {
  stroke: #ffffff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.map-shape-dots,
.map-shape-solid {
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}

.map-shape-dots--globe {
  transform-origin: center;
  pointer-events: none;
}

.map-shape-dots--selected {
  opacity: 1;
  filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 6px #d8f2ff);
}

.map-shape-solid--default {
  fill: color-mix(in srgb, #525252 25%, transparent);
}

.map-shape-solid--selected {
  fill: color-mix(in srgb, #ffffff 20%, transparent);
}

.map-shape-solid--muted {
  fill: color-mix(in srgb, #262626 30%, transparent);
}

:root[data-theme='light'] .map-shape-solid--default {
  fill: rgba(255, 255, 255, 0.2);
}

:root[data-theme='light'] .map-shape-solid--selected {
  fill: rgba(255, 255, 255, 0.35);
}

:root[data-theme='light'] .map-shape-solid--muted {
  fill: rgba(255, 255, 255, 0.1);
}

.map-shape-solid--active-area {
  fill: color-mix(in srgb, #35d9ff 72%, #e8f9ff);
}

.map-hit-target {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}

.map-layer {
  transform-origin: 0 0;
  transition: transform 320ms cubic-bezier(0.22, 0.82, 0.22, 1);
  will-change: transform;
}

/* ── Globe sphere & graticule ──────────────────────────────────────────────── */
.globe-sphere {
  fill: #0a0a0a;
  stroke: #262626;
  stroke-width: 1.5;
}

:root[data-theme='light'] .globe-sphere {
  fill: url(#globeBackgroundLight);
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1;
  filter: drop-shadow(0 0 25px rgba(147, 197, 253, 0.35)) drop-shadow(0 0 50px rgba(96, 165, 250, 0.2));
}

.globe-graticule {
  fill: none;
  stroke: color-mix(in srgb, #737373 40%, transparent);
  stroke-width: 0.6;
  opacity: 0.5;
  pointer-events: none;
}

:root[data-theme='light'] .globe-graticule {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 0.5;
  opacity: 0.6;
}

.globe-shape-outline {
  fill: none;
  stroke: color-mix(in srgb, #e8f7ff 28%, transparent);
  stroke-width: 0.45;
  opacity: 0.3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.globe-shape-outline--muted {
  opacity: 0.16;
}

.globe-shape-outline--selected {
  stroke: color-mix(in srgb, #ffffff 84%, #d5eeff);
  stroke-width: 0.82;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px #d4efff);
}

:root[data-theme='dark'] .globe-shape-outline {
  stroke: color-mix(in srgb, #a3a3a3 55%, transparent);
  stroke-width: 0.6;
  opacity: 0.55;
}

:root[data-theme='dark'] .globe-shape-outline--muted {
  opacity: 0.25;
}

:root[data-theme='dark'] .globe-shape-outline--selected {
  stroke: color-mix(in srgb, #ffffff 85%, #737373);
  stroke-width: 1.2;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}

:root[data-theme='light'] .globe-shape-outline {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 0.6;
  opacity: 0.6;
}

:root[data-theme='light'] .globe-shape-outline--selected {
  stroke: #ffffff;
  stroke-width: 1.3;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* ── Starfield ─────────────────────────────────────────────────────────────── */
.starfield {
  pointer-events: none;
}

.starfield-star {
  fill: #ffffff;
  opacity: var(--star-min-opacity);
  animation-name: star-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: var(--star-min-opacity);
  }
  42% {
    opacity: var(--star-max-opacity);
  }
  68% {
    opacity: calc((var(--star-min-opacity) + var(--star-max-opacity)) * 0.55);
  }
}

/* ── Area focus highlight ──────────────────────────────────────────────────── */
.area-focus-fill {
  fill: color-mix(in srgb, var(--accent) 55%, #8df3ff);
  vector-effect: non-scaling-stroke;
}

.area-focus-fill--globe {
  fill: #ffffff;
  opacity: 0.85;
}

.area-focus-fill--globe-pulse {
  animation: area-focus-globe-pulse 1.15s ease-in-out infinite;
}

.area-focus-outline {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.area-fallback-core {
  fill: #ffffff;
}

.area-fallback-pulse {
  fill: none;
  stroke: #8df3ff;
  stroke-width: 1.2;
  opacity: 0.5;
  animation: area-fallback-pulse 1.9s ease-out infinite;
}

.area-focus-outline--globe {
  stroke: #ffffff;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 3px #d4efff);
}

.area-fallback-core--globe {
  fill: color-mix(in srgb, #f0fbff 90%, #ffffff);
}

.area-fallback-pulse--globe {
  stroke: color-mix(in srgb, #ffffff 70%, #8df3ff 30%);
  opacity: 0.55;
  animation-duration: 1.1s;
}

@keyframes area-fallback-pulse {
  0% { opacity: 0.42; }
  100% { opacity: 0; }
}

@keyframes area-focus-globe-pulse {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

/* ── Selected-area mini map (navigation panel country silhouette) ──────────── */
.selected-area-preview {
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 30%, transparent);
  padding: 0.75rem;
}

.selected-area-map-shell {
  margin-bottom: 0.55rem;
}

.selected-area-map {
  width: 100%;
  height: 21.25rem;
  display: block;
}

.selected-area-map-bg {
  fill: transparent;
}

.selected-area-shape--base {
  fill: color-mix(in srgb, var(--text) 74%, #7ce7ff 26%);
  opacity: 0.28;
}

.selected-area-shape--outline {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 75%, #ffffff 25%);
  stroke-width: 1.55;
  vector-effect: non-scaling-stroke;
}

.selected-area-ring {
  fill: color-mix(in srgb, #8de4ff 34%, #ffffff 66%);
  stroke: color-mix(in srgb, #ffffff 84%, #8de4ff 16%);
  stroke-width: 1.1;
}

.selected-area-ring-halo {
  fill: none;
  stroke: color-mix(in srgb, #8de4ff 58%, #ffffff 42%);
  stroke-width: 1;
  opacity: 0.42;
  animation: area-ring-halo 2.2s ease-in-out infinite;
}

.selected-area-micro-glyph {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 75%, #8de4ff 25%);
  stroke-width: 0.9;
  opacity: 0.78;
}

@keyframes area-ring-halo {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .starfield-star,
  .area-focus-fill--globe-pulse,
  .area-fallback-pulse,
  .selected-area-ring-halo {
    animation: none;
  }
}

:root[data-low-power='true'] .area-focus-fill--globe-pulse,
:root[data-low-power='true'] .area-fallback-pulse {
  animation: none;
  opacity: 0.62;
}

.map-low-power .map-shape-dots--selected,
.map-low-power .globe-shape-outline--selected,
.map-low-power .area-focus-outline--globe {
  filter: none;
}