:root {
  --radar: #20ff7a;
  --bg: #05080a;
  --panel: rgba(6, 14, 12, 0.94);
}

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

html, body, #map {
  width: 100%;
  height: 100%;
  background: var(--bg);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: #d7ffe8;
}

#map { z-index: 1; }

.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(0.3) brightness(0.85);
}

.radar-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 400;
  overflow: hidden;
}

.radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160vmax;
  height: 160vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(32, 255, 122, 0) 0deg,
    rgba(32, 255, 122, 0.03) 20deg,
    rgba(32, 255, 122, 0.22) 48deg,
    rgba(32, 255, 122, 0) 55deg
  );
  animation: sweep 6s linear infinite;
  mix-blend-mode: screen;
}

@keyframes sweep {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hud {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1000;
  background: var(--panel);
  border: 1px solid rgba(32, 255, 122, 0.35);
  padding: 12px 16px;
  max-width: min(420px, calc(100vw - 32px));
}

.hud h1 {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--radar);
}

.hud p { font-size: 12px; opacity: 0.75; margin-top: 6px; }
.hud a { color: var(--radar); font-size: 12px; }

.blip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--radar);
  box-shadow: 0 0 10px var(--radar);
  position: relative;
}

.blip::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid var(--radar);
  border-radius: 50%;
  animation: ping 2.2s ease-out infinite;
}

@keyframes ping {
  to { transform: scale(1.8); opacity: 0; }
}

.sheet {
  position: fixed;
  top: 0;
  right: 0;
  width: min(440px, 100vw);
  height: 100%;
  z-index: 1100;
  background: var(--panel);
  border-left: 1px solid rgba(32, 255, 122, 0.3);
  transform: translateX(110%);
  transition: transform 0.28s ease;
  overflow: auto;
  padding: 20px;
}

.sheet.open { transform: translateX(0); }
.sheet h2 { color: var(--radar); font-size: 22px; margin-bottom: 4px; }
.meta { font-size: 12px; opacity: 0.7; margin-bottom: 14px; }
.sheet p { line-height: 1.5; font-size: 14px; margin-bottom: 16px; }

.photos { display: grid; gap: 8px; margin-bottom: 16px; }
.photos img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border: 1px solid rgba(32, 255, 122, 0.2);
}

.embed {
  width: 100%;
  min-height: 220px;
  border: 0;
  background: #000;
}

.close-btn {
  float: right;
  background: transparent;
  border: 1px solid var(--radar);
  color: var(--radar);
  padding: 4px 10px;
  cursor: pointer;
}

.admin-form {
  position: fixed;
  z-index: 1100;
  left: 16px;
  bottom: 16px;
  width: min(360px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid rgba(32, 255, 122, 0.35);
  padding: 14px;
  max-height: 70vh;
  overflow: auto;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%;
  margin: 4px 0 10px;
  background: #0b1210;
  border: 1px solid #1e3;
  color: #e9ffe9;
  padding: 8px;
}

.admin-form button {
  background: var(--radar);
  color: #04120a;
  border: 0;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  margin: 4px 6px 0 0;
}

.leaflet-container { background: #05080a; }
.leaflet-control-attribution { background: rgba(0,0,0,.55) !important; color: #9ad; }
.leaflet-control-attribution a { color: #cfe; }