/*
Theme Name: MRE Map Theme
Author: HomePage Studio
Version: 1.0
*/

:root {
  color-scheme: dark;
  --map-bg: oklch(0.17 0.02 255);
  --map-bg-soft: oklch(0.22 0.025 255);
  --map-stroke: oklch(0.44 0.03 245 / 0.65);
  --map-state: oklch(0.31 0.02 250);
  --map-state-hover: oklch(0.68 0.09 82);
  --map-state-active: oklch(0.74 0.11 78);
  --map-state-muted: oklch(0.42 0.02 248);
  --map-label: oklch(0.94 0.01 95);
  --map-water: oklch(0.2 0.02 240);
  --map-glow: oklch(0.77 0.09 78 / 0.18);
  --map-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 45%, oklch(0.24 0.025 250), transparent 38%),
    linear-gradient(180deg, oklch(0.19 0.02 252), oklch(0.15 0.018 252));
}

body {
  overflow: hidden;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  isolation: isolate;
}

.site-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 213, 110, 0.06), transparent 22%),
    radial-gradient(circle at 82% 72%, rgba(255, 213, 110, 0.05), transparent 24%);
  pointer-events: none;
}

.map-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 28px);
}

.map-frame {
  position: relative;
  width: min(96vw, 1560px);
  height: min(92vh, 920px);
  height: min(92dvh, 920px);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    linear-gradient(180deg, var(--map-bg-soft), var(--map-bg));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--map-shadow);
  overflow: hidden;
}

.map-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

.map-watermark {
  fill: none;
  stroke: rgba(255,255,255,0.04);
  stroke-width: 1;
}

.map-region {
  fill: var(--map-state);
  stroke: var(--map-stroke);
  stroke-width: 1.05;
  cursor: pointer;
  transition: fill 180ms ease, transform 180ms ease, filter 180ms ease, opacity 180ms ease;
  transform-box: fill-box;
  transform-origin: center;
  outline: none;
}

.province {
  fill: color-mix(in oklab, var(--map-state) 76%, white 24%);
}

.map-region:hover,
.map-region:focus-visible {
  fill: var(--map-state-hover);
  filter: drop-shadow(0 0 14px var(--map-glow));
}

.map-region.is-active {
  fill: var(--map-state-active);
  filter: drop-shadow(0 0 18px var(--map-glow));
}

.map-region.is-dimmed {
  fill: var(--map-state-muted);
  opacity: 0.72;
}

.state-borders {
  fill: none;
  stroke: rgba(255,255,255,0.14);
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.state-label {
  fill: rgba(245, 241, 231, 0.84);
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}

.state-label.is-small {
  font-size: clamp(7px, 0.62vw, 10px);
  opacity: 0.82;
}

.map-tooltip {
  position: fixed;
  z-index: 5;
  min-width: 140px;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(10, 15, 26, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--map-label);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translate3d(-50%, calc(-100% - 16px), 0) scale(0.96);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.map-tooltip.is-visible {
  opacity: 1;
  transform: translate3d(-50%, calc(-100% - 18px), 0) scale(1);
}

.map-tooltip__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 213, 110, 0.92);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.map-tooltip__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.map-loader,
.map-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.84);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

.map-error {
  color: #ffd9d9;
}

@media (max-width: 900px) {
  .map-stage {
    padding: 0;
  }

  .map-frame {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .state-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-region,
  .map-tooltip {
    transition: none;
  }
}