/* ============================================================
   CrisisOps · map terrain — palantir flat-style aerial
   black-background context, yellow operational state
   ============================================================ */

/* ---------- map shell ---------- */

.map {
  position: relative;
  background: #141a14;          /* dark olive land base */
  overflow: hidden;
}

/* very subtle coordinate grid */
.map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(220, 230, 240, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 230, 240, 0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* the stage holds everything that should zoom together (terrain,
   routes, zones, dots, terrain-labels). Corner overlays + event
   banner stay outside so they don't scale. */
.map-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 0.7s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

.map-stage.aerial { transform: scale(0.7); }

.map svg.terrain,
.map svg.routes-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

.map svg.routes-overlay { z-index: 2; pointer-events: none; }
.map svg * { vector-effect: non-scaling-stroke; }

/* ---------- terrain palette ---------- */

.t-water       { fill: #0a2235; }
.t-water-2     { fill: #0d2a40; }
.t-water-line  { stroke: #2a597b; stroke-width: 0.7; fill: none; }
.t-shoal       { fill: #133246; opacity: 0.7; }

.t-veg         { fill: #131e15; }
.t-veg-2       { fill: #182520; }

.t-urban       { fill: #1f261c; }
.t-urban-2     { fill: #232b1f; }

.t-hill        { fill: #16201a; }
.t-contour     { stroke: rgba(190, 210, 220, 0.06); stroke-width: 0.5; fill: none; }

.t-road        { stroke: #c8d0d8; stroke-width: 1.0; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.t-road-thin   { stroke: #6f7a86; stroke-width: 0.6; fill: none; opacity: 0.85; }
.t-road-dirt   { stroke: #6a6055; stroke-width: 0.5; fill: none; stroke-dasharray: 1.2 1.0; opacity: 0.7; }
.t-rail        { stroke: #8f97a3; stroke-width: 0.7; fill: none; stroke-dasharray: 1.5 1.2; }

.t-compound    { fill: none; stroke: #c9a13a; stroke-width: 0.7; stroke-dasharray: 0.6 0.9; opacity: 0.55; }

.t-bldg        { fill: #3d3a2c; stroke: #1a1812; stroke-width: 0.12; }
.t-bldg-warm   { fill: #463d2e; stroke: #1a1812; stroke-width: 0.12; }
.t-bldg-cool   { fill: #2e3438; stroke: #131618; stroke-width: 0.12; }
.t-bldg-shadow { fill: rgba(0, 0, 0, 0.55); }

/* tree canopy stipple inside vegetation polygons */
.t-tree        { fill: #0f1d11; }
.t-tree-2      { fill: #182b1c; }

/* hill slope hatching */
.t-slope       { stroke: rgba(180, 200, 220, 0.07); stroke-width: 0.4; fill: none; }

/* river / inlet ripple lines */
.t-ripple      { stroke: rgba(120, 180, 220, 0.18); stroke-width: 0.35; fill: none; stroke-dasharray: 0.8 1.2; }

/* infrastructure */
.t-bridge      { fill: #b0b8c0; stroke: #1a1812; stroke-width: 0.15; }
.t-pier        { fill: #6a6055; stroke: #1a1812; stroke-width: 0.15; }
.t-helipad     { fill: rgba(245, 204, 64, 0.10); stroke: #c9a13a; stroke-width: 0.4; }
.t-helipad-cross { stroke: #c9a13a; stroke-width: 0.35; }

/* range rings around FOB ALPHA */
.t-range       { fill: none; stroke: rgba(220, 235, 250, 0.07); stroke-width: 0.4; stroke-dasharray: 0.8 1.4; }

/* AO (area-of-operations) boundary */
.t-ao          { fill: none; stroke: #c9a13a; stroke-width: 0.5; stroke-dasharray: 1.4 1.0; opacity: 0.35; }

/* ---------- routes between zones ---------- */

.route {
  stroke: rgba(220, 235, 250, 0.22);
  stroke-width: 0.5;
  stroke-dasharray: 2 2;
  fill: none;
}

.route[data-state="closed"] {
  stroke: var(--red);
  stroke-width: 0.8;
  opacity: 0.85;
}

/* ---------- corner overlays ---------- */

.map-overlay {
  position: absolute;
  z-index: 5;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.1em;
  pointer-events: none;
  line-height: 1.6;
}

.map-overlay.tl { top: 14px; left: 18px; }
.map-overlay.tr { top: 14px; right: 18px; text-align: right; }
.map-overlay.bl { bottom: 14px; left: 18px; }
.map-overlay.br { bottom: 14px; right: 18px; text-align: right; }

.map-overlay .k { color: var(--text-3); }
.map-overlay .v { color: var(--text-0); font-weight: 500; }

.terrain-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(190, 210, 220, 0.28);
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 1;
}

/* ---------- zones ---------- */

.zone {
  position: absolute;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
}

.zone-box {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--amber);
  background: rgba(224, 169, 58, 0.04);
}

/* ACTIVE = yellow (was green) */
.zone[data-state="active"] .zone-box {
  border-color: var(--yellow);
  background: rgba(245, 204, 64, 0.07);
  border-width: 2px;
}

/* BLOCKED = red */
.zone[data-state="blocked"] .zone-box {
  border-color: var(--red);
  background: rgba(208, 77, 77, 0.06);
}

/* L-bracket corner ticks */
.zone-box::before, .zone-box::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1.5px solid currentColor;
  color: var(--amber);
}
.zone[data-state="active"]  .zone-box::before, .zone[data-state="active"]  .zone-box::after { color: var(--yellow); }
.zone[data-state="blocked"] .zone-box::before, .zone[data-state="blocked"] .zone-box::after { color: var(--red); }

.zone-box::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.zone-box::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}

.zone[data-state="blocked"]::after {
  content: "";
  position: absolute;
  inset: 6px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(208,77,77,0.45) calc(50% - 1px), rgba(208,77,77,0.45) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left,  transparent calc(50% - 1px), rgba(208,77,77,0.45) calc(50% - 1px), rgba(208,77,77,0.45) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}

.zone-label {
  position: absolute;
  top: -18px; left: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--amber);
  text-transform: uppercase;
  white-space: nowrap;
}
.zone[data-state="active"]  .zone-label { color: var(--yellow); }
.zone[data-state="blocked"] .zone-label { color: var(--red); }

.zone-tag {
  position: absolute;
  bottom: -16px; right: 0;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.06em;
}

.zone-sev {
  position: absolute;
  top: 4px; right: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  background: rgba(0, 0, 0, 0.78);
  padding: 1px 5px;
  letter-spacing: 0.05em;
}
.zone[data-state="active"]  .zone-sev { color: var(--yellow); }
.zone[data-state="blocked"] .zone-sev { color: var(--red); }

.zone-glyph { display: none; }

/* ---------- unit dots ---------- */

.unit-dot {
  position: absolute;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--blue);
  border: 1px solid #cce6f7;
  transition: top 1s cubic-bezier(.4,.1,.3,1), left 1s cubic-bezier(.4,.1,.3,1);
  z-index: 7;
}

.unit-dot::after {
  content: attr(data-label);
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px;
  color: var(--blue);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ---------- compass rose (BL corner, fixed) ---------- */

.compass-block {
  position: absolute;
  bottom: 14px;
  left: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.compass {
  width: 54px; height: 54px;
  display: block;
}

.c-ring        { fill: none; stroke: rgba(220, 235, 250, 0.18); stroke-width: 1; }
.c-ring-inner  { fill: none; stroke: rgba(220, 235, 250, 0.10); stroke-width: 0.7; }
.c-cross       { stroke: rgba(220, 235, 250, 0.20); stroke-width: 0.6; }
.c-needle-n    { fill: var(--amber); }
.c-needle-s    { fill: rgba(220, 235, 250, 0.30); }
.c-label       {
  fill: var(--text-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.c-label.n     { fill: var(--amber); }

/* ---------- scale bar ---------- */

.scale-bar {
  font-family: var(--mono);
  color: var(--text-2);
  letter-spacing: 0.08em;
}

.sb-line {
  display: flex;
  align-items: center;
  height: 8px;
}
.sb-seg {
  height: 4px;
  width: 36px;
  border: 1px solid rgba(220, 235, 250, 0.25);
}
.sb-seg.dark  { background: rgba(220, 235, 250, 0.25); }
.sb-labels {
  display: flex;
  justify-content: space-between;
  width: 144px;   /* 2 segs × 72px? hmm — match below */
  margin-top: 3px;
  font-size: 9px;
  color: var(--text-3);
}
.sb-labels.tight { width: 108px; }    /* 3 segs × 36px */

/* ---------- subtle scan sweep ---------- */

.scan-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.scan-sweep::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 204, 64, 0.025) 45%,
    rgba(245, 204, 64, 0.045) 50%,
    rgba(245, 204, 64, 0.025) 55%,
    transparent 100%
  );
  animation: scan-sweep 16s linear infinite;
}

@keyframes scan-sweep {
  0%   { left: -15%; }
  100% { left: 110%; }
}

/* ---------- helipad pulse (just a sub-1px ring fade, no glow) ---------- */

.t-helipad-pulse {
  fill: none;
  stroke: rgba(201, 161, 58, 0.5);
  stroke-width: 0.3;
  transform-origin: center;
  transform-box: fill-box;
  animation: helipad-ring 3.2s ease-out infinite;
}

@keyframes helipad-ring {
  0%   { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------- event banner (no glow) ---------- */

.event-banner {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #1a0000;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 10px 22px;
  text-transform: uppercase;
  z-index: 20;
  pointer-events: none;
  animation: banner-flash 1.6s ease-out forwards;
}

@keyframes banner-flash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}