/* ============================================================
   HUD Coverage Map — Burgas
   Tactical / radar / cyberpunk overlay on dark Leaflet map
   ============================================================ */

.hud-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 720px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow:
    0 0 0 1px var(--brand-deep),
    0 0 80px var(--brand-glow-2),
    inset 0 0 120px rgba(0,0,0,0.4);
  contain: layout style paint;
}

.hud-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: contrast(1.15) saturate(0.6) hue-rotate(-10deg);
}

/* Dim the entire map slightly with a red wash */
.hud-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(213,21,31,0.04) 0%, transparent 50%, rgba(213,21,31,0.06) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Hide Leaflet attribution / zoom inside the HUD frame */
.hud-map .leaflet-control-attribution {
  background: rgba(0,0,0,0.4);
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 9px;
  padding: 2px 6px;
}
.hud-map .leaflet-control-attribution a { color: var(--ink-3); }
.hud-map .leaflet-control-zoom {
  border: 1px solid var(--brand-deep) !important;
  background: rgba(7,8,10,0.8) !important;
  border-radius: 4px !important;
}
.hud-map .leaflet-control-zoom a {
  background: transparent !important;
  color: var(--brand-bright) !important;
  border: 0 !important;
  font-weight: 400 !important;
}
.hud-map .leaflet-control-zoom a:hover { background: var(--brand-glow-2) !important; }

/* ─── HUD Overlay layer ─── */
.hud-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ─── Corner brackets ─── */
.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--brand-bright);
  filter: drop-shadow(0 0 8px var(--brand-glow));
}
.corner--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.corner--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.corner--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.corner--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

/* ─── HUD panels (top-left status, top-right legend) ─── */
.hud-panel {
  position: absolute;
  padding: 12px 16px;
  background: rgba(7,8,10,0.78);
  border: 1px solid var(--brand-deep);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  line-height: 1.4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(0,0,0,0.4), inset 0 0 16px rgba(213,21,31,0.04);
}
.hud-panel--tl {
  top: 38px;
  left: 38px;
}
.hud-panel--tr {
  top: 38px;
  right: 38px;
}
.hud-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-panel__row + .hud-panel__row { margin-top: 6px; }
.hud-panel__row--mono {
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.hud-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}
.hud-led--green {
  background: var(--green);
  box-shadow: 0 0 8px var(--green), 0 0 16px rgba(32,201,122,0.5);
  animation: ledPulse 2s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hud-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--ink-2);
}
.hud-legend-row + .hud-legend-row { margin-top: 6px; }
.hud-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.hud-dot--gpon {
  background: var(--brand-bright);
  box-shadow: 0 0 8px var(--brand-glow);
}
.hud-dot--cable {
  background: rgba(213,21,31,0.45);
  border: 1px solid var(--brand);
}
.hud-dot--planned {
  background: transparent;
  border: 1px dashed var(--brand);
}

/* ─── Bottom data ticker ─── */
.hud-ticker {
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 38px;
  height: 28px;
  background: rgba(7,8,10,0.85);
  border: 1px solid var(--brand-deep);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--brand-bright);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hud-ticker__inner {
  display: inline-flex;
  white-space: nowrap;
  gap: 48px;
  padding-left: 0;
  animation: tickerScroll 40s linear infinite;
}
.hud-ticker__inner span {
  text-shadow: 0 0 8px var(--brand-glow);
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─── Scan line ─── */
.hud-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-bright) 50%, transparent 100%);
  box-shadow: 0 0 16px var(--brand-bright), 0 0 8px var(--brand-glow);
  opacity: 0.45;
  animation: scanSweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scanSweep {
  0%, 100% { top: 4%; opacity: 0.45; }
  50% { top: 96%; opacity: 0.45; }
  51% { opacity: 0; }
  99% { opacity: 0; }
}

/* ─── Reticle (centered crosshair) ─── */
.hud-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.35;
}
.reticle__h, .reticle__v {
  position: absolute;
  background: var(--brand-bright);
  box-shadow: 0 0 8px var(--brand-glow);
}
.reticle__h {
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, var(--brand-bright) 30%, transparent 50%, var(--brand-bright) 70%, transparent 100%);
}
.reticle__v {
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--brand-bright) 30%, transparent 50%, var(--brand-bright) 70%, transparent 100%);
}
.reticle__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border: 1px solid var(--brand-bright);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--brand-glow), inset 0 0 8px var(--brand-glow);
}

/* ─── Coverage zone markers (injected by Leaflet) ─── */
.coverage-zone {
  position: relative;
  pointer-events: auto;
}
.coverage-zone__pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border: 1px solid var(--brand-bright);
  border-radius: 50%;
  animation: zonePulse 3s ease-out infinite;
}
@keyframes zonePulse {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* Custom Leaflet marker — neighborhood label */
.zone-label-icon { overflow: visible !important; }
.zone-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink);
  white-space: nowrap;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.8));
}

/* Placement variants */
.zone-label--l { align-items: flex-end; width: 100%; }
.zone-label--l .zone-label__line { margin-left: 0; margin-right: 12px; }

.zone-label--t { flex-direction: column-reverse; align-items: center; width: 100%; }
.zone-label--t .zone-label__line { margin: 0; }

.zone-label--b { align-items: center; width: 100%; }
.zone-label--b .zone-label__line { margin: 0; }
.zone-label__bracket {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(7,8,10,0.85);
  border: 1px solid var(--brand);
  border-radius: 3px;
  text-transform: uppercase;
  position: relative;
}
.zone-label__bracket::before, .zone-label__bracket::after {
  content: '';
  position: absolute;
  width: 6px; height: 1.5px;
  background: var(--brand-bright);
  top: 50%;
  transform: translateY(-50%);
}
.zone-label__bracket::before { left: -8px; }
.zone-label__bracket::after { right: -8px; }
.zone-label__dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--brand-bright);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--brand-glow);
  animation: ledPulse 2s ease-in-out infinite;
}
.zone-label__line {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, var(--brand-bright), transparent);
  margin-left: 12px;
}

/* Office marker — bigger, more prominent */
.office-marker {
  position: relative;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.office-marker__core {
  width: 10px; height: 10px;
  background: var(--brand-bright);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--brand-bright), 0 0 24px var(--brand-glow);
  z-index: 2;
}
.office-marker__ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--brand-bright);
  border-radius: 50%;
  animation: zonePulse 2.4s ease-out infinite;
}
.office-marker__ring--2 {
  animation-delay: 0.8s;
}

/* Map hover state — invert the reticle/scan briefly */
.hud-map-wrap:hover .hud-reticle { opacity: 0.55; }
.hud-map-wrap:hover .hud-scanline { animation-duration: 4s; }

/* Mobile responsiveness for HUD */
@media (max-width: 768px) {
  .hud-map-wrap { aspect-ratio: 4/5; }
  .hud-panel { padding: 8px 10px; font-size: 9px; }
  .hud-panel--tl, .hud-panel--tr { top: 32px; }
  .hud-panel--tl { left: 32px; }
  .hud-panel--tr { right: 32px; }
  .hud-ticker { left: 32px; right: 32px; bottom: 32px; height: 24px; font-size: 9px; }
  .corner { width: 20px; height: 20px; top: 12px; }
  .corner--tl, .corner--bl { left: 12px; }
  .corner--tr, .corner--br { right: 12px; }
  .corner--bl, .corner--br { bottom: 12px; }
  .hud-reticle { width: 80px; height: 80px; }
}