/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: #0a0d0e;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #e8f3e8;
  overflow: hidden;
}

/* Subtle checker backdrop like the reference */
body {
  background-image:
    linear-gradient(135deg, #1a1f22 25%, transparent 25%),
    linear-gradient(225deg, #1a1f22 25%, transparent 25%),
    linear-gradient(45deg,  #1a1f22 25%, transparent 25%),
    linear-gradient(315deg, #1a1f22 25%, #0a0d0e 25%);
  background-size: 28px 28px;
  background-position: 14px 0, 14px 0, 0 0, 0 0;
}

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Compass frame ===== */
.compass {
  position: relative;
  width: min(98vmin, 1100px);
  height: min(98vmin, 1100px);
  aspect-ratio: 1 / 1;
}

/* The map sits inside an inner circle */
.map-wrap {
  position: absolute;
  inset: 2.5%;
  border-radius: 50%;
  overflow: hidden;
  background: #0d1411;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.85),
    inset 0 0 0 2px rgba(60,80,70,0.35);
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ===== Outer dark ring (the bezel) ===== */
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, #2a3236 0%, #1a2024 40%, #0c1012 80%);
  /* Cut out the inner circle */
  -webkit-mask:
    radial-gradient(circle at center, transparent 0 47.5%, #000 48% 100%);
          mask:
    radial-gradient(circle at center, transparent 0 47.5%, #000 48% 100%);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.6),
    inset 0 0 30px rgba(0,0,0,0.7);
}

/* Inner highlight on the ring edge */
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 46.5%, rgba(140,200,180,0.08) 47.5%, transparent 48.5%);
}

/* ===== Red accent arcs ===== */
.accent-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(233,53,53,0.6));
}

/* ===== Compass cardinal badges ===== */
.cardinal {
  position: absolute;
  width: 11%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #20262a, #0c1012);
  border: 2px solid #e93535;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(12px, 2.2vmin, 22px);
  color: #f0f5f0;
  letter-spacing: 1px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.6),
    inset 0 0 6px rgba(0,0,0,0.5);
  z-index: 4;
}

.cardinal.north { top: 0;       left: 50%; transform: translate(-50%, 0); }
.cardinal.south { bottom: 0;    left: 50%; transform: translate(-50%, 0); }
.cardinal.east  { right: 0;     top: 50%;  transform: translate(0, -50%); }
.cardinal.west  { left: 0;      top: 50%;  transform: translate(0, -50%); }

/* ===== Subtle warm tint over the vector jungle map ===== */
.map-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 30%, rgba(80,180,100,0.18), rgba(20,60,35,0.32));
  mix-blend-mode: multiply;
  z-index: 1;
}

/* ===== Paper grain + vignette (jungle map feel) ===== */
.map-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.13  0 0 0 0 0.28  0 0 0 0 0.16  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.35;
  z-index: 2;
}

.map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center,
      rgba(0,0,0,0) 55%,
      rgba(20,40,25,0.45) 85%,
      rgba(10,20,12,0.75) 100%);
  z-index: 4;
}

/* ===== Animated drifting clouds ===== */
.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.cloud {
  position: absolute;
  width: 38%;
  height: 22%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 65% 40%, rgba(255,255,255,0.7),  rgba(255,255,255,0) 65%),
    radial-gradient(ellipse at 50% 60%, rgba(255,255,255,0.6),  rgba(255,255,255,0) 70%);
  filter: blur(8px);
  will-change: transform;
}

.cloud-1 { top: 12%; left: -45%; animation: drift 38s linear infinite; }
.cloud-2 { top: 38%; left: -55%; animation: drift 52s linear infinite -10s; opacity: 0.7; transform: scale(0.85); }
.cloud-3 { top: 60%; left: -50%; animation: drift 44s linear infinite -22s; opacity: 0.8; transform: scale(1.1); }
.cloud-4 { top: 82%; left: -60%; animation: drift 60s linear infinite -34s; opacity: 0.55; transform: scale(0.7); }

@keyframes drift {
  from { transform: translateX(0);    }
  to   { transform: translateX(260%); }
}

/* ===== Crosshair grid inside the map (gold/parchment dashed paths) ===== */
.crosshair {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 5;
  filter: drop-shadow(0 0 0.4px rgba(255,216,58,0.7));
}
.crosshair line,
.crosshair circle {
  stroke: #ffd83a;
  stroke-width: 0.3;
  fill: none;
  stroke-dasharray: 1.5 1.5;
  animation: dashFlow 6s linear infinite;
}
.crosshair circle { animation-direction: reverse; }

@keyframes dashFlow {
  from { stroke-dashoffset: 0;  }
  to   { stroke-dashoffset: 30; }
}

/* ===== User-location pulse (legacy CSS rules; kept for fallback) ===== */
.user-pulse {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.user-pulse .ring1,
.user-pulse .ring2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(26,115,232,0.45);
  transform: translate(-50%, -50%);
  animation: userPulse 2.2s ease-out infinite;
}
.user-pulse .ring2 { animation-delay: 1.1s; }

@keyframes userPulse {
  0%   { width: 18px;  height: 18px;  opacity: 0.75; }
  100% { width: 160px; height: 160px; opacity: 0;   }
}

/* ===== Waypoint markers (injected by JS as Google overlays, styled here for reference) ===== */
.waypoint {
  width: 26px;
  height: 26px;
  transform: rotate(45deg);
  background: transparent;
  border: 3px solid #ffd83a;
  box-shadow: 0 0 8px rgba(255,216,58,0.7);
  position: relative;
}
.waypoint::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #ffd83a;
  opacity: 0.25;
}
.waypoint.cyan  { border-color: #3ad9ff; box-shadow: 0 0 8px rgba(58,217,255,0.7); }
.waypoint.cyan::after  { background: #3ad9ff; }
.waypoint.red   { border-color: #ff5252; box-shadow: 0 0 8px rgba(255,82,82,0.7); }
.waypoint.red::after   { background: #ff5252; }
.waypoint.green { border-color: #6cff8d; box-shadow: 0 0 8px rgba(108,255,141,0.7); }
.waypoint.green::after { background: #6cff8d; }

/* ===== HUD ===== */
.hud {
  position: fixed;
  top: 16px;
  left: 16px;
  background: rgba(10,16,14,0.78);
  border: 1px solid rgba(108,255,141,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: #b8e6c8;
  backdrop-filter: blur(6px);
  z-index: 10;
  min-width: 170px;
}

.hud-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.hud-label {
  color: #6c9c80;
  font-weight: 700;
  letter-spacing: 1px;
}

.hud-value {
  color: #e8f3e8;
}

.recenter {
  margin-top: 10px;
  width: 100%;
  background: linear-gradient(180deg, #1a3b2a, #0f2419);
  border: 1px solid #6cff8d;
  color: #6cff8d;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.recenter:hover {
  background: linear-gradient(180deg, #2a5b3a, #1a4429);
  box-shadow: 0 0 12px rgba(108,255,141,0.4);
}
.recenter:active { transform: translateY(1px); }

.status {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,16,14,0.78);
  border: 1px solid rgba(108,255,141,0.25);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: #b8e6c8;
  letter-spacing: 1px;
  backdrop-filter: blur(6px);
  z-index: 10;
}
.status.error { color: #ff7a7a; border-color: rgba(255,82,82,0.4); }
.status.ok    { color: #6cff8d; }