/* surf-radar.css — Scheibe mit Küstenkarte + Wind-/Dünungs-Pfeilfeldern.
   Herausgeloest aus pages/livecams.css (.lcwv-radar*), damit Cam-Detailseite und
   Wetter-Detailseite denselben Baustein nutzen. Gehoert zu js/meteo-surfradar.js. */

@keyframes msr-flow { from { transform: translateY(0); } to { transform: translateY(var(--fd, 40px)); } }
.msr-flow { animation: msr-flow linear infinite; }
@media (prefers-reduced-motion: reduce) { .msr-flow { animation: none !important; } }

.msr-wrap { display: flex; flex-direction: column; align-items: center; }
.msr-disc { position: relative; width: 280px; height: 280px; max-width: 100%; margin: 0 auto; }
.msr-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden; background: #0a3149;
  /* clip-path zusätzlich zu border-radius: Firefox/manche Browser clippen den
     WebGL-Canvas der MapLibre-Karte NICHT am border-radius → sonst schaut die
     quadratische Karte an den Ecken durch („Kasten statt Kreis"). */
  clip-path: circle(50%); }
.msr-scrim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(4,22,36,0) 42%, rgba(4,22,36,.5) 100%); }
.msr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.msr-leg { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 8px;
  font-size: 12px; font-weight: 600; color: var(--muted); }
.msr-leg span { display: inline-flex; align-items: center; }
.msr-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }