/* ═══════════════════════════════════════════════════════════════
   FishRadar — Premium Weather Map V2 · panel styles
   Pairs with weather-map-premium-v2.js. Tokens from styles.css
   (--color-ink*, --font-sans/mono, --ease-out, --radius-full).

   V3 polish pass — mobile-first, fit-to-card:
   · controlled map height per breakpoint (no giant scrolling SVG)
   · Poland always fits (preserveAspectRatio=meet) with inner margins
   · markers ~32% smaller, micro-points reduced to quiet dots
   · region/city names revealed on hover/focus — no overlap clutter
   · glow reserved for the active / current marker (the one signature)
   · info card overlays the map: bottom sheet on mobile, floating on desktop
═══════════════════════════════════════════════════════════════ */

.wmp2{position:relative;background:#0A0F18;border-radius:20px;border:1px solid rgba(240,244,250,.07);
  box-shadow:0 18px 52px rgba(0,0,0,.62),0 0 0 1px rgba(46,236,193,.06),inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;font-family:var(--font-sans);}

/* header */
.wmp2__header{padding:15px 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(240,244,250,.05);background:linear-gradient(180deg,rgba(6,9,15,.55),transparent);}
.wmp2__title{font-size:15px;font-weight:700;color:rgba(240,244,250,.92);letter-spacing:-.01em;}
.wmp2__meta{font-family:var(--font-mono);font-size:9px;color:rgba(240,244,250,.32);letter-spacing:.09em;text-transform:uppercase;margin-top:3px;}
.wmp2__live{display:flex;align-items:center;gap:6px;flex-shrink:0;font-family:var(--font-mono);font-size:9px;font-weight:600;color:#2EECC1;letter-spacing:.14em;text-transform:uppercase;background:rgba(46,236,193,.08);border:1px solid rgba(46,236,193,.18);border-radius:var(--radius-full);padding:4px 9px 4px 8px;}
.wmp2__live::before{content:"";width:6px;height:6px;border-radius:50%;background:#2EECC1;box-shadow:0 0 8px rgba(46,236,193,.9);animation:v2live 2s ease-in-out infinite;}
@keyframes v2live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

/* layer tabs */
.wmp2__layers{display:flex;gap:6px;padding:11px 14px;overflow-x:auto;scrollbar-width:none;background:rgba(6,9,15,.35);border-bottom:1px solid rgba(240,244,250,.04);}
.wmp2__layers::-webkit-scrollbar{display:none;}
.wl{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:7px 13px;border-radius:var(--radius-full);cursor:pointer;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--color-ink-40);background:var(--color-ink-06);border:1px solid var(--color-ink-10);transition:all .18s var(--ease-out);min-height:34px;-webkit-tap-highlight-color:transparent;}
.wl span{font-size:13px;}
.wl:hover{color:var(--color-ink-70);border-color:var(--color-ink-20);}
.wl.on{color:#041811;background:linear-gradient(145deg,#2EECC1,#14A882);border-color:transparent;box-shadow:0 4px 16px rgba(46,236,193,.3);}

/* ── map stage — controlled height, Poland fits inside ── */
.wmp2__map{position:relative;height:460px;
  background:radial-gradient(ellipse 78% 72% at 50% 46%,#0e1626 0%,#080d16 60%,#06090f 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  touch-action:pan-y;outline:none;}
.poland2{width:100%;height:100%;display:block;}
.wmp2__map.is-active{cursor:grab;}
.wmp2__map.is-zoomed{cursor:grab;}
.wmp2__map.is-zoomed:active{cursor:grabbing;}
@media(min-width:480px){ .wmp2__map{height:500px;} }
@media(min-width:768px){ .wmp2__map{height:560px;} }
@media(min-width:1024px){ .wmp2__map{height:600px;} }

/* radar field — quiet, premium */
.p2-rings circle{fill:none;stroke:rgba(46,236,193,.05);stroke-width:1;}
.p2-rings line{stroke:rgba(46,236,193,.045);stroke-width:1;}
.p2-grid line{stroke:rgba(46,236,193,.03);stroke-width:1;}
.p2-hint{fill:none;stroke:rgba(46,236,193,.05);stroke-width:1;stroke-dasharray:4 7;}
.p2-sweep{transform-box:fill-box;transform-origin:center;opacity:.38;animation:v2sweep 14s linear infinite;}
.p2-sweep path{fill:url(#sweep2);}
@keyframes v2sweep{to{transform:rotate(360deg)}}
.p2-coast{fill:none;stroke:rgba(46,236,193,.12);stroke-width:5;stroke-linejoin:round;}
.p2-border{fill:url(#land2);stroke:rgba(46,236,193,.30);stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(46,236,193,.13));}
.p2-river{fill:none;stroke:rgba(84,160,255,.26);stroke-width:1.6;stroke-linecap:round;}
.p2-river--b{stroke:rgba(46,236,193,.17);}
.p2-river--c{stroke:rgba(84,160,255,.14);stroke-width:1.3;}

/* cloud blobs (Chmury layer) — softer */
.cloudblob{fill:#cdd9e6;opacity:0;filter:url(#soft2);}
.wmp2[data-layer="cloud"] .cloudblob{opacity:calc(var(--o) * .7);animation:v2drift 16s ease-in-out infinite;}
@keyframes v2drift{0%,100%{transform:translateX(-5px)}50%{transform:translateX(6px)}}
/* wind flow (Wiatr layer) — subtle */
.windflow{fill:none;stroke:rgba(46,236,193,.28);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:2 14;opacity:0;}
.wmp2[data-layer="wind"] .windflow{opacity:1;animation:v2flow 1.2s linear infinite;}
@keyframes v2flow{to{stroke-dashoffset:-16}}

/* city labels — quiet context, revealed by importance only */
.city__dot{fill:rgba(240,244,250,.26);}
.city__name{font-family:var(--font-mono);font-size:8px;letter-spacing:.03em;fill:rgba(240,244,250,.30);}
.city--maj .city__name{fill:rgba(240,244,250,.46);font-weight:600;}
.city--maj .city__dot{fill:rgba(240,244,250,.42);}
.city--min{display:none;}                         /* minors off by default — declutter */
@media(min-width:768px){ .city--min{display:block;} }
@media(max-width:600px){ .city--maj .city__name{display:none;} }

/* ── markers ── */
.mk2{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.mk2__hit{fill:transparent;}

/* micro-points: a single calm dot, no numbers */
.mk2__sdot{fill:var(--c);fill-opacity:.42;stroke:var(--c);stroke-opacity:.4;stroke-width:1;transition:fill-opacity .18s var(--ease-out);}
.mk2--s:hover .mk2__sdot,.mk2--s.mk2--selected .mk2__sdot{fill-opacity:.85;}
.mk2__slabel{font-family:var(--font-mono);font-size:8px;fill:rgba(240,244,250,.8);text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:rgba(6,9,15,.9);stroke-width:2.4;opacity:0;transition:opacity .16s var(--ease-out);}
.mk2--s:hover .mk2__slabel,.mk2--s:focus .mk2__slabel,.mk2--s.mk2--selected .mk2__slabel{opacity:1;}
@media(max-width:600px){ .mk2--s{display:none;} }     /* hide micro-points on mobile */

/* primary region markers */
.mk2__ring{fill:none;stroke:var(--c);stroke-opacity:.26;stroke-width:1;}
.mk2__pulse{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center;}
.mk2--current .mk2__pulse{opacity:.16;animation:v2pulse 3.4s ease-in-out infinite;}
@keyframes v2pulse{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.55);opacity:0}}
.mk2__disc{fill:var(--c);fill-opacity:.15;stroke:var(--c);stroke-width:1.5;transition:fill-opacity .18s var(--ease-out);}
.mk2__sheen{fill:rgba(255,255,255,.16);}
.mk2__val{font-family:var(--font-sans);font-weight:800;fill:var(--c);text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:rgba(4,10,16,.55);stroke-width:.6;}
.mk2__icon{font-size:11px;text-anchor:middle;dominant-baseline:central;pointer-events:none;opacity:.85;}
.mk2__label{font-family:var(--font-sans);font-weight:600;font-size:10.5px;fill:rgba(240,244,250,.86);text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:rgba(6,9,15,.9);stroke-width:2.6;opacity:0;transition:opacity .16s var(--ease-out);}
.mk2--p:hover .mk2__label,.mk2--p:focus .mk2__label,.mk2--p.mk2--selected .mk2__label,.mk2--current .mk2__label{opacity:1;}
.mk2__arrow path{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.mk2__drop{fill:var(--c);transform-box:fill-box;transform-origin:center;animation:v2rain 1.3s linear infinite;}
@keyframes v2rain{0%{transform:translateY(-3px);opacity:0}25%{opacity:1}100%{transform:translateY(12px);opacity:0}}
.mk2__dry{font-family:var(--font-mono);font-size:10px;fill:var(--c);text-anchor:middle;dominant-baseline:central;}

/* current location + selection: glow lives here only */
.mk2__sonar{fill:none;stroke:#2EECC1;stroke-width:1.3;opacity:0;transform-box:fill-box;transform-origin:center;}
.mk2--current .mk2__sonar{animation:v2sonar 3.2s ease-out infinite;}
.mk2--current .mk2__sonar--2{animation-delay:1.6s;}
@keyframes v2sonar{0%{transform:scale(.7);opacity:.5}100%{transform:scale(2.6);opacity:0}}
.mk2--current .mk2__disc{filter:drop-shadow(0 0 6px var(--c));}
.mk2:hover .mk2__disc{fill-opacity:.26;}
.mk2--selected .mk2__disc{fill-opacity:.34;stroke-width:2.4;filter:drop-shadow(0 0 8px var(--c));}
.mk2--selected .mk2__ring{stroke-opacity:.8;stroke-width:1.4;}

/* layer visibility */
.mk2__val--score,.mk2__val--temp,.mk2__val--cloud,.mk2__wind,.mk2__rain,.mk2__icon{display:none;}
.wmp2[data-layer="index"] .mk2{--c:var(--cs)} .wmp2[data-layer="index"] .mk2__val--score,.wmp2[data-layer="index"] .mk2--p .mk2__icon{display:block;}
.wmp2[data-layer="temp"]  .mk2{--c:var(--ct)} .wmp2[data-layer="temp"]  .mk2__val--temp{display:block;}
.wmp2[data-layer="wind"]  .mk2{--c:var(--cw)} .wmp2[data-layer="wind"]  .mk2__wind{display:block;}
.wmp2[data-layer="rain"]  .mk2{--c:var(--cp)} .wmp2[data-layer="rain"]  .mk2__rain{display:block;}
.wmp2[data-layer="cloud"] .mk2{--c:var(--cc)} .wmp2[data-layer="cloud"] .mk2__val--cloud{display:block;}

/* ── zoom controls ── */
.wmp2__zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:4;}
.wz{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(10,16,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(46,236,193,.16);color:rgba(240,244,250,.78);font-size:18px;font-weight:600;line-height:1;
  transition:all .15s var(--ease-out);-webkit-tap-highlight-color:transparent;}
.wz:hover{border-color:rgba(46,236,193,.4);color:#2EECC1;background:rgba(10,16,24,.9);}
.wz:active{transform:scale(.94);}
.wz--reset{font-size:15px;margin-top:2px;}

/* ── info card — overlays the map (no layout shift) ── */
.wmp2__card{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;
  background:linear-gradient(180deg,rgba(14,21,33,.92),rgba(9,14,22,.92));
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(46,236,193,.14);border-radius:16px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  padding:13px 14px;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);}
.wmp2__card.is-show{opacity:1;transform:translateY(0);pointer-events:auto;}
.wc2__close{position:absolute;top:10px;right:11px;width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--color-ink-06);border:1px solid var(--color-ink-10);color:var(--color-ink-40);font-size:14px;line-height:1;z-index:1;}
.wc2__close:hover{color:var(--color-ink);}
.wc2__top{display:flex;align-items:center;gap:12px;}
.wc2__score{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;border:2px solid var(--sc,#00D4AA);color:var(--sc,#00D4AA);background:color-mix(in srgb,var(--sc,#00D4AA) 12%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--sc,#00D4AA) 28%,transparent);}
.wc2__id{flex:1;min-width:0;}
.wc2__name{font-size:15px;font-weight:700;color:#F0F4FA;display:flex;align-items:center;gap:7px;}
.wc2__tag{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:#2EECC1;background:rgba(46,236,193,.12);border:1px solid rgba(46,236,193,.25);border-radius:4px;padding:2px 5px;font-weight:600;}
.wc2__water{font-size:11px;color:var(--color-ink-40);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc2__cond{font-size:11.5px;font-weight:600;margin-top:3px;}
.wc2__big{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.wc2__icon{font-size:24px;line-height:1;}
.wc2__temp{font-size:19px;font-weight:700;color:#e8f0f7;}
.wc2__bar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin:11px 0 10px;overflow:hidden;}
.wc2__fill{height:100%;border-radius:2px;transition:width .5s var(--ease-out);}
.wc2__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:7px;}
.wc2__cell{background:rgba(255,255,255,.04);border-radius:8px;padding:7px 8px;}
.wc2__lbl{font-family:var(--font-mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-ink-40);display:flex;align-items:center;gap:3px;}
.wc2__v{font-size:12.5px;font-weight:700;color:#e8f0f7;margin-top:2px;white-space:nowrap;}

/* desktop: card becomes a compact floating tooltip, bottom-left */
@media(min-width:768px){
  .wmp2__card{left:14px;right:auto;bottom:14px;width:264px;border-radius:18px;}
  .wc2__grid{grid-template-columns:1fr 1fr;}
}

/* legend */
.wmp2__legend{display:flex;align-items:center;padding:11px 16px 13px;background:rgba(6,9,15,.5);border-top:1px solid rgba(240,244,250,.05);}
.wlg{display:none;align-items:center;gap:10px;flex-wrap:wrap;width:100%;}
.wmp2[data-layer="index"] .wlg--index,.wmp2[data-layer="temp"] .wlg--temp,.wmp2[data-layer="wind"] .wlg--wind,.wmp2[data-layer="rain"] .wlg--rain,.wmp2[data-layer="cloud"] .wlg--cloud{display:flex;}
.wlg__i{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px;color:rgba(240,244,250,.55);white-space:nowrap;}
.wlg__i i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;flex-shrink:0;}
.wlg__grad{height:7px;flex:1;min-width:80px;border-radius:4px;}
.wlg__cap{font-family:var(--font-mono);font-size:8.5px;color:rgba(240,244,250,.32);}
.wlg__hint{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;color:rgba(240,244,250,.28);}

@media(prefers-reduced-motion:reduce){
  .mk2__pulse,.mk2__sonar,.mk2__drop,.p2-sweep,.cloudblob,.windflow,.wmp2__live::before{animation:none!important;}
  .mk2--current .mk2__pulse{opacity:.14;}
}