/* map.css — Sonar radar view styling. Dark radar screen, glowing score-tiered blips,
   rotating sweep. Loaded only by /map.html. */
.radar-wrap { max-width: 820px; margin: 0 auto; padding: 1rem; }
.radar-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.radar-head h1 { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.35rem; margin: 0; }
.radar-badge { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #0b3; background: rgba(0,187,51,.12); border: 1px solid rgba(0,187,51,.4); padding: 2px 8px; border-radius: 999px; }
.radar-controls { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 1rem; }
.radar-controls label { font-size: .8rem; color: var(--muted,#64748b); display: flex; gap: .4rem; align-items: center; }
.radar-controls select, .radar-controls input[type=range] { accent-color: #0b3; }
#radarGps { cursor: pointer; }
#radarCount { font-weight: 600; font-size: .9rem; }

.radar-screen { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 640px; margin: 0 auto;
  border-radius: 50%; background:
    radial-gradient(circle at 50% 50%, #06231b 0%, #04140f 55%, #020a08 100%);
  box-shadow: 0 0 0 2px rgba(0,255,140,.15), 0 0 60px rgba(0,255,140,.08) inset, 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
#radar { display: block; width: 100%; height: 100%; }

/* rings + grid */
.ring { fill: none; stroke: rgba(0,255,140,.16); stroke-width: 1; }
.grid { stroke: rgba(0,255,140,.10); stroke-width: 1; }
.ringlbl { fill: rgba(120,255,190,.5); font: 10px "Inter", sans-serif; }
.north { fill: rgba(120,255,190,.7); font: 700 12px "Inter", sans-serif; text-anchor: middle; }

/* rotating sweep beam */
.sweep { fill: url(#none); fill: rgba(0,255,140,.10); stroke: none; transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(0,255,140,.35)); }

/* you-are-here */
.me { fill: #eafff4; }
.me-pulse { fill: none; stroke: #7dffc0; stroke-width: 2; opacity: .8; transform-origin: center;
  animation: mepulse 2.2s ease-out infinite; }
@keyframes mepulse { 0% { r: 6; opacity: .8 } 100% { r: 46px; opacity: 0 } }

/* blips */
.blip .dot { stroke: rgba(0,0,0,.4); stroke-width: .5; }
.blip .halo { fill: none; opacity: .55; }
.blip .blbl { font: 600 10px "Inter", sans-serif; opacity: 0; transition: opacity .15s; }
.blip:hover .blbl { opacity: 1; }
.blip { cursor: pointer; }

.blip.gold .dot { fill: #ffd54a; filter: drop-shadow(0 0 7px #ffbf00); }
.blip.gold .halo { stroke: #ffd54a; stroke-width: 2; animation: ping 2.4s ease-out infinite; }
.blip.gold .blbl { fill: #ffe38a; }
.blip.green .dot { fill: #35d07f; filter: drop-shadow(0 0 5px #12b866); }
.blip.green .halo { stroke: #35d07f; stroke-width: 1.5; }
.blip.green .blbl { fill: #9ff2c4; }
.blip.teal .dot { fill: #38bdf0; filter: drop-shadow(0 0 4px #1f9fd6); }
.blip.teal .blbl { fill: #b7e6fb; }
.blip.red .dot { fill: #ef6a6a; filter: drop-shadow(0 0 3px #d64545); opacity: .85; }
.blip.red .blbl { fill: #f6b6b6; }

@keyframes ping { 0% { r: 7; opacity: .8 } 100% { r: 26px; opacity: 0 } }

.radar-legend { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0; font-size: .8rem; color: var(--muted,#64748b); }
.radar-legend span::before { content: "●"; margin-right: 5px; }
.lg-gold::before { color: #ffd54a } .lg-green::before { color: #35d07f } .lg-teal::before { color: #38bdf0 } .lg-red::before { color: #ef6a6a }
.radar-note { text-align: center; font-size: .8rem; color: var(--muted,#64748b); margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .sweep animateTransform, .me-pulse, .blip .halo { animation: none !important; }
}