/* =============== */
/*  Sztorm (Bałtyk) */
/* =============== */

.sztorm-wrap { padding: 18px; }
.sztorm-topbar{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:14px;
}
.sztorm-topbar .title h1{ margin:0; font-size:22px; }
.sztorm-topbar .title p{ margin:6px 0 0 0; opacity:.85; font-size:13px; max-width:820px; }
.badge{
  display:inline-block; font-size:11px; letter-spacing:.06em;
  padding:4px 8px; border-radius:999px; margin-right:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
}
.status{
  min-width:260px; padding:10px 12px; border-radius:14px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.status-row{ display:flex; align-items:center; gap:8px; }
.status-row.small{ margin-top:6px; font-size:12px; opacity:.85; }
.dot{
  width:10px; height:10px; border-radius:50%;
  background:#888; box-shadow:0 0 0 rgba(255,255,255,0);
}
.dot.ok{ background:#19c37d; box-shadow:0 0 18px rgba(25,195,125,.45); }
.dot.err{ background:#ff4d4d; box-shadow:0 0 18px rgba(255,77,77,.45); }

.sztorm-grid{
  display:grid; grid-template-columns: 1fr 320px;
  gap:14px; align-items:stretch;
}
.map{
  height: calc(100vh - 210px);
  min-height: 520px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.legend{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  padding:14px;
  overflow:auto;
}
.legend-header{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.10);
}
.legend h2{ margin:0; font-size:16px; }
.legend-section{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.legend-section:last-child{ border-bottom:none; }
.legend h3{ margin:0 0 8px 0; font-size:13px; opacity:.95; }
.legend .note{ margin-top:8px; font-size:12px; opacity:.9; }
.legend.small{ font-size:12px; }
.legend-section.small ul{ margin:8px 0 0 16px; padding:0; }
.legend-section.small li{ margin:6px 0; opacity:.92; }

.btn{
  background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  padding:8px 10px; border-radius:12px;
  cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,.14); }
.chk{ display:flex; align-items:center; gap:8px; margin:8px 0; font-size:13px; opacity:.95; }

/* Scales */
.scale{ display:flex; flex-direction:column; gap:8px; }
.scale-row{ display:flex; align-items:center; gap:10px; }
.swatch{ width:18px; height:12px; border-radius:4px; border:1px solid rgba(255,255,255,.18); }
.scale-row .lbl{ font-size:12px; opacity:.92; }

/* Wind marker */
.wind-marker{
  width:34px; height:34px; position:relative;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.wind-arrow{
  position:absolute; inset:0;
  border-radius:50%;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.wind-arrow svg{
  position:absolute; left:50%; top:50%;
  width:22px; height:22px;
  transform: translate(-50%,-50%);
}
.wind-trail{
  position:absolute; left:50%; top:50%;
  width:24px; height:4px;
  transform: translate(-50%,-50%);
  border-radius:4px;
  opacity:.9;
}
.wind-trail::after{
  content:"";
  position:absolute; left:-18px; top:0;
  width:18px; height:4px;
  border-radius:4px;
  background: currentColor;
  opacity:.0;
  animation: windMove 1.1s linear infinite;
}
@keyframes windMove{
  0%   { transform: translateX(0); opacity:0; }
  10%  { opacity:.7; }
  60%  { opacity:.2; }
  100% { transform: translateX(26px); opacity:0; }
}

/* Wave marker */
.wave-marker{
  width:26px; height:26px; position:relative;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.wave-pulse{
  position:absolute; inset:0;
  border-radius:50%;
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.14);
}
.wave-pulse::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:.55;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0% { transform: scale(.55); opacity:.65; }
  70%{ transform: scale(1.15); opacity:0; }
  100%{ transform: scale(1.15); opacity:0; }
}
.wave-arrow{
  position:absolute; left:50%; top:50%;
  width:18px; height:18px;
  transform: translate(-50%,-50%);
  animation: waveBreathe 1.8s ease-in-out infinite;
}
@keyframes waveBreathe{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-50%) scale(1.10); }
}
.wave-arrow svg{ width:18px; height:18px; }

/* Leaflet popup tweaks */
.leaflet-popup-content{ margin:10px 12px; }
.popup-title{ font-weight:700; margin:0 0 6px 0; }
.popup-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:6px 10px; font-size:12px; }
.popup-grid .k{ opacity:.75; }
.popup-grid .v{ font-weight:600; }


/* Leaflet safety */
.leaflet-container{ width:100%; height:100%; }


/* ======= SZTORM FIX: wiatr bez kół ======= */
.wind-marker{
  width:28px; height:28px;
  background: transparent !important;
}
.wind-arrow{
  position:absolute; inset:0;
  background: transparent !important;
  border: none !important;
}
.wind-arrow svg{
  width:22px; height:22px;
}


/* ===== FINAL SZTORM WIND ANIMATION ===== */
.wind-arrow {
  animation: wind-move 1.4s linear infinite;
}
@keyframes wind-move {
  0%   { transform: translate(0,0) rotate(var(--rot)); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(14px,0) rotate(var(--rot)); opacity: 0; }
}

/* =========================
   Mobile responsiveness
   ========================= */
@media (max-width: 980px){
  .sztorm-topbar{ flex-wrap: wrap; }
  .sztorm-grid{ grid-template-columns: 1fr; }
  .map{ height: 62vh; min-height: 420px; }
}
@media (max-width: 560px){
  .sztorm-wrap{ padding: 12px; }
  .sztorm-topbar h1{ font-size: 24px; }
  .map{ height: 58vh; min-height: 380px; border-radius: 16px; }
  .panel{ border-radius: 16px; }
}