/* ============ Calm Fishing — style ============ */
:root{
  --bg:#071319; --bg2:#0c1f28; --bg3:#112b36;
  --panel:rgba(255,255,255,.055);
  --panel2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.12);
  --stroke2:rgba(255,255,255,.22);
  --ink:#eaf4f7; --muted:#94aeb9; --dim:#6c8794;
  --accent:#57c7b5; --accent-d:#2b8f80;
  --amber:#f0a33c; --danger:#e2605a; --good:#7bd88f; --violet:#9b8cf5;
  --r:14px; --r-s:10px;
  --sh:0 10px 30px rgba(0,0,0,.35);
  --ff:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* wycięcia ekranu telefonu (notch, pasek gestów) — 0 tam, gdzie ich nie ma */
  --sa-t:env(safe-area-inset-top,0px); --sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px);
  /* wysokość przyklejonego paska akcji — ustawia ją game.js */
  --deck-h:0px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:var(--ff);color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, #14384a 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #123a3a 0%, transparent 55%),
    linear-gradient(180deg,#07161d 0%, #050e13 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overscroll-behavior:none;
}
#app{min-height:100%;display:flex;flex-direction:column}
button{font-family:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 .6em}
a{color:var(--accent)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:calc(10px + var(--sa-t)) calc(clamp(12px,3vw,28px) + var(--sa-r)) 10px calc(clamp(12px,3vw,28px) + var(--sa-l));
  background:linear-gradient(180deg,rgba(6,18,24,.92),rgba(6,18,24,.55));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;letter-spacing:-.02em;cursor:pointer;background:none;border:0;padding:0}
/* znak na wysokość przycisków paska (34 px); przy 26 px na telefonie ledwo go było widać, a ciemne niebo znaku zlewało się
   z paskiem — stąd obwódka w kolorze ramek (zaokrąglenie jak `rog` 44/200 w `logoSvg()`) */
.brand .mark{display:block;flex:none;width:34px;height:34px;border-radius:22%;box-shadow:0 0 0 1px rgba(87,199,181,.35)}
.mark svg{display:block;width:100%;height:100%}
/* nazwa z dopiskiem pod spodem, jak na og.png (D-079): „Living Waters” cieńsze, w kolorze akcentu */
.brand-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left}
.brand-txt small{font-size:11.5px;font-weight:500;letter-spacing:.01em;color:var(--accent);white-space:nowrap;margin-top:1px}
/* okno powitalne: znak z pełną nazwą (D-079, D-080) */
.logo-lockup{display:flex;align-items:center;gap:12px;margin:-2px 0 4px}
.logo-lockup .mark{width:52px;height:52px}
.logo-lockup b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.logo-lockup small{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.topbar .spacer{flex:1}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  background:var(--panel);border:1px solid var(--stroke);font-size:13px;color:var(--muted);white-space:nowrap
}
.chip b{color:var(--ink);font-weight:600}
/* Część chipów to przyciski (poziom, spis ryb łowiska) — `font:inherit` i kursor,
   żeby nie odstawały od chipów opisowych. */
button.chip{font:inherit;cursor:pointer;transition:.16s}
button.chip .tipbtn{pointer-events:none}
.iconbtn.on{background:rgba(87,199,181,.16);border-color:var(--accent)}
.chip.lv{background:linear-gradient(135deg,rgba(87,199,181,.22),rgba(155,140,245,.16));border-color:rgba(87,199,181,.35);color:var(--ink)}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;min-width:34px;padding:0 12px;border-radius:10px;cursor:pointer;
  background:var(--panel);border:1px solid var(--stroke);font-size:13px;transition:.16s
}

/* ---------- screens ---------- */
#screens{flex:1;display:block}
.screen{display:none;animation:fade .28s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wrap{max-width:1180px;margin:0 auto;padding:clamp(16px,3vw,32px) calc(clamp(16px,3vw,32px) + var(--sa-r)) clamp(16px,3vw,32px) calc(clamp(16px,3vw,32px) + var(--sa-l))}
.wrap.wide{max-width:1420px}

/* ---------- generic ---------- */
.panel{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r);padding:16px}
.panel.glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:13px}
.tiny{font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);font-weight:600}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.sep{height:1px;background:var(--stroke);margin:12px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid var(--stroke2);
  background:var(--panel2);cursor:pointer;font-size:14.5px;font-weight:500;transition:.16s;
}
.btn:active{transform:none}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-d));border-color:transparent;color:#03201c;font-weight:700}
.btn.warn{background:linear-gradient(135deg,var(--amber),#c97d1c);border-color:transparent;color:#2b1602;font-weight:700}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
/* „Łowię tutaj” — wybór zestawu, gdy ostatnio na stanowisku był inny (F-172) */
.rigchoices{display:flex;flex-direction:column;gap:10px}
.btn.rigchoice{flex-direction:column;align-items:stretch;gap:4px;text-align:left}
.rigchoice .rc-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ---------- hub ---------- */
.hero{display:grid;gap:18px;margin-bottom:22px}
.hero h1{font-size:clamp(26px,4.4vw,40px);font-weight:700;line-height:1.08}
.hero h1 span{background:linear-gradient(100deg,var(--accent),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:62ch;font-size:15px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r-s);padding:11px 13px}
/* F-125 etap 2: kafelek żetonów otwiera panel „Twój postęp” — przycisk, który wygląda jak reszta kafelków */
.stat.stat-btn{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.stat.stat-btn:hover{border-color:var(--accent)}
.chip.you .you-tokens{display:inline-flex;align-items:center;gap:0;white-space:nowrap}
.chip.you .you-tokens .baitic{margin:0 3px 0 0}
.chip.you .you-sep{margin:0 6px;opacity:.6}
.token-plus{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.stat-btn .v .baitic{vertical-align:-3px}
/* zwijane sekcje w oknach (panel „Twój postęp”) */
details.collapsible{margin-top:10px;border-top:1px solid var(--stroke);padding-top:8px}
details.collapsible>summary{cursor:pointer;font-weight:600;color:var(--muted);font-size:13px;list-style:none;padding:4px 0}
details.collapsible>summary::-webkit-details-marker{display:none}
details.collapsible>summary::before{content:'▸ ';color:var(--accent)}
details.collapsible[open]>summary::before{content:'▾ '}
/* F-180: warunki w szufladzie „Stanowisko” — zwinięte do jednej linii (woda · wiatr · ciśnienie), rozwinięte: pełna lista */
details.conditions>summary{display:flex;flex-direction:column;gap:2px;cursor:pointer;list-style:none;padding:2px 18px 4px 0;position:relative}
details.conditions>summary::-webkit-details-marker{display:none}
details.conditions>summary::after{content:'▾';position:absolute;right:2px;top:4px;color:var(--muted);transition:transform .2s}
details.conditions[open]>summary::after{transform:rotate(180deg)}
details.conditions[open]>summary .small{display:none}
/* F-180: okno „Wyjdź” — dwie karty wyboru; stuknięcie karty wykonuje wybór */
.tripcards{display:flex;flex-direction:column;gap:10px;text-align:left}
.tripcard{display:flex;gap:12px;align-items:flex-start;width:100%;padding:14px;border-radius:16px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.tripcard.main{border:1.5px solid var(--accent);background:rgba(87,199,181,.1)}
.tripcard .baitic{flex:none;margin-top:2px}
.trip-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.trip-body b{font-size:17px}
.trip-lead{font-size:13.5px;color:var(--ink);opacity:.85;line-height:1.4}
.trip-desc{font-size:13px;color:var(--muted);line-height:1.4}
.trip-note{font-size:13px;color:#f5a05e;line-height:1.4}
@media(hover:hover){.tripcard:hover{border-color:var(--accent)}}
.stat .v{font-size:21px;font-weight:700;line-height:1.1}
.stat .k{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-top:2px}

/* lista łowisk: grupy po `kind`, w grupie zwarte wiersze (F-077) — na telefonie jedna kolumna, szerzej dwie */
.waters{margin-top:8px}
.waters-grp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 2px 8px}
.waters-grp:first-child{margin-top:4px}
.waters-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:10px}
.water{
  display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:12px;align-items:center;
  position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;
  border:1px solid var(--stroke);background:var(--bg2);transition:.22s;text-align:left;padding:8px 12px 8px 8px;
}
.water.marked{border-color:rgba(240,163,60,.45)}
.water .art{width:104px;height:72px;border-radius:var(--r-s);overflow:hidden;background:var(--bg3)}
.water .art canvas{width:100%;height:100%;display:block}
.water .body{min-width:0}
.water h3{font-size:16px;line-height:1.2}
.water .species{font-size:13px;color:var(--muted);margin:3px 0 6px}
.water .meta{display:flex;gap:5px;flex-wrap:wrap}
.water .meta .pill{font-size:11px;padding:2px 8px}
.water .wx{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* F-299: łowisko w planach („🕓 Wkrótce”) — przerywana ramka, przygaszone, bez kliknięcia; przycisk kraju w planach przygaszony */
.water.soon{cursor:default;border-style:dashed;opacity:.78}
.water.soon .art{display:flex;align-items:center;justify-content:center;font-size:26px;opacity:.8}
.water .about{font-size:12.5px;color:var(--dim);margin:0 0 6px;line-height:1.35}
.hubcountry button.soon{opacity:.8}
.hubcountry .soonmark{margin-left:5px;font-size:11px;color:var(--dim)}
/* F-149: zakładki ekranu głównego — na szerokim ekranie pasek nad treścią, na telefonie przyklejony do dołu (blok ≤ 700 px niżej) */
.hubnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:3px;margin-bottom:16px;background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:12px}
.hubtab{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:9px 6px;border:0;border-radius:9px;background:none;color:var(--muted);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.hubtab.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--stroke2)}
.hubtab .ic{font-size:17px;line-height:1}
.hubbadge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--amber);color:#1a0f00;font-size:11px;font-weight:700;line-height:1}
.hubview[hidden],.hubkind[hidden]{display:none}
/* F-160: kropka na „Sklep” — stać Cię na coś nowego */
.hubdot{position:absolute;top:7px;right:calc(50% - 30px);width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px rgba(6,18,24,.9)}
.hubrod{display:flex;align-items:center;gap:12px;margin-bottom:14px;border-color:rgba(240,163,60,.4)}
.hubrod .grow{flex:1;min-width:0}
#screen-hub .contest{margin-bottom:14px}
.hubmode{margin-bottom:12px}
.hubcountry{margin-bottom:10px}
.hubpass{margin:0 2px 10px}
.hubpass[hidden]{display:none}
.hubhome{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.hubhome .linkbtn{margin:0;min-height:36px;padding:0 4px;white-space:nowrap}
.hubrate b{color:var(--ink);font-variant-numeric:tabular-nums}
.hubrate-sign{display:inline-flex;vertical-align:-3px;margin-right:6px}
.hubkind{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.hubkind button{padding:6px 12px;border:1px solid var(--stroke);border-radius:999px;background:none;color:var(--muted);font-family:inherit;font-size:13px;cursor:pointer;touch-action:manipulation}
.hubkind button.on{border-color:var(--accent);color:var(--accent)}
.pill.warn-pill{background:rgba(240,163,60,.14);border-color:rgba(240,163,60,.45);color:#ffd7a0}
.pill{font-size:11.5px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--stroke);color:var(--muted)}
.pill.on{background:rgba(87,199,181,.16);border-color:rgba(87,199,181,.4);color:#b8f0e6}
/* rząd pigułek, który sam się zawija — pigułka nigdy nie łamie się w środku nazwy (odznaki na karcie znajomego) */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills .pill{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* tryb gry: na koncie / offline (D-046) — na ekranie głównym i w dzienniku, żeby nie grać w złym */
button.pill.mode{font:inherit;font-size:12px;cursor:pointer;justify-self:start;align-self:start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill.mode.off{background:rgba(240,163,60,.12);border-color:rgba(240,163,60,.45);color:#f5cf9a}
.maphead .pill.mode{margin-top:4px}
/* pigułka-przycisk (opis odznaki w dymku): wygląd pigułki, nie przycisku przeglądarki */
button.pill{font-family:inherit;line-height:inherit;cursor:pointer;touch-action:manipulation}

/* ---------- map ---------- */
.maphead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.maphead .grow{flex:1;min-width:0}
/* F-175: przyciski łowiska w jednym rzędzie (na wąskim ekranie przewijanym), pogoda w jednej linii */
.maphead-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:620px){
  .maphead-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:2px;scrollbar-width:none}
  .maphead-chips::-webkit-scrollbar{display:none}
  .maphead-chips .chip{flex:none;font-size:13px;padding:6px 11px}
}
.mapbox{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--stroke);background:#0a1b22;box-shadow:var(--sh)}
.mapbox svg{display:block;width:100%;height:auto}
/* Pudełko pinezki jest szersze niż jej rysunek (podpis, cień, powiększenie
   wybranej), więc jako pole trafienia zasłaniało sąsiednie stanowiska —
   po wybraniu pierwszego kolejnego nie dawało się tapnąć. Wskaźnik łapie
   więc tylko główka; resztę mapy rozstrzyga odległość (`renderMap` w ui.js). */
.pin{
  position:absolute;transform:translate(-50%,-100%);cursor:pointer;border:0;background:none;padding:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));transition:transform .16s;z-index:2;pointer-events:none
}
/* ⚠️ Animujemy tylko powiększenie, nigdy `left/top`: `layoutPins()` przestawia je
   zaraz po wstawieniu pinezki, a przejście pokazywało wtedy wyjazd z kropki
   i kreska rysowała się do miejsca, w którym pinezki jeszcze nie było. */
.pin.sel{transform:translate(-50%,-100%) scale(1.13);z-index:3} /* 1.13 = SEL_K w ui.js */
/* Grot (ostry róg) celuje w stanowisko z kierunku `--rot` (`layoutPins` w map-ui.js: główka po stronie lądu, za plecami
   wędkarza — nie zasłania wody, na którą patrzy); -45deg — grot w dół, główka nad punktem. Ikona obraca się z powrotem. */
.pin .head{
  width:30px;height:30px;border-radius:50% 50% 50% 4px;transform:rotate(var(--rot,-45deg));
  background:linear-gradient(140deg,#2a4d5c,#16303c);border:2px solid rgba(255,255,255,.55);
  display:grid;place-items:center;pointer-events:auto
}
.pin .head i{transform:rotate(calc(-1 * var(--rot,-45deg)));font-style:normal;font-size:14px;line-height:0}
/* Ikona stanowiska (spots-art.js) rośnie z główką: 30 → 20 px, telefon 26 → 17, szeroki ekran 34 → 22 */
.pin .head svg{width:20px;height:20px}
.pin.sel .head{background:linear-gradient(140deg,var(--accent),var(--accent-d));border-color:#fff}
/* Podpis poza układem pudełka — inaczej jego pojawienie się przy wyborze
   podnosiło całą pinezkę o wysokość etykiety i grot przestawał wskazywać
   stanowisko (na telefonie podpis ma tylko wybrana pinezka). */
.pin .lbl{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:7px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  background:rgba(4,14,19,.82);padding:3px 8px;border-radius:7px;border:1px solid var(--stroke);
}
/* Tu tylko położenie domyślne: `placeLabels` w ui.js kładzie każdy widoczny
   podpis stylem inline tam, gdzie nie zasłania sąsiadek i mieści się w kadrze. */
/* Rozsunięta pinezka (`layoutPins` w ui.js): kropka w prawdziwym miejscu
   stanowiska i kreska do grota. Tylko rysunek — wskaźnika nie łapią. */
.pindot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(4,14,19,.7);z-index:1;pointer-events:none}
.pinlead{position:absolute;height:2px;margin-top:-1px;background:rgba(255,255,255,.6);transform-origin:0 50%;z-index:1;pointer-events:none}
/* Kreska od podpisu do jego główki — gdy podpis nie przylega do pinezki (`placeLabels`). */
.pinlead.lbllead{height:1px;margin-top:-.5px;background:rgba(255,255,255,.45)}
/* Gwiazdki po grubszej stronie główki, naprzeciw grota (`--stars-x/y` z `layoutPins` w map-ui.js) — nad główką zasłaniał je grot
   celujący w górę. Bez zmiennych (przed pierwszym ułożeniem) — nad główką jak dawniej. */
.pin .stars,.pingroup .stars{position:absolute;top:calc(50% + var(--stars-y,-25px));left:calc(50% + var(--stars-x,0px));transform:translate(-50%,-50%);
  z-index:1;font-size:10px;line-height:13px;letter-spacing:-1px;white-space:nowrap;color:var(--amber);text-shadow:0 1px 3px #000}
/* F-094: ilu wędkarzy stoi teraz na stanowisku — przy prawym boku główki. Tylko rysunek: pole trafienia
   zostaje przy główce (`PULAPKI-UI.md` — pudełko przycisku to pole trafienia). */
.pin .people,.pingroup .people{position:absolute;top:-2px;left:100%;margin-left:-3px;font-size:10px;font-weight:700;white-space:nowrap;
  color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.pin .people:empty,.pingroup .people:empty{display:none}
/* gwiazdki po prawej (główka na prawo od stanowiska) — liczba wędkarzy przy lewym boku */
.pin.people-left .people{left:auto;right:100%;margin-left:0;margin-right:-3px}
/* T-055 krok 10: grupa bliskich stanowisk (`layoutPins()`, gdy pinezki się nie mieszczą) — kółko z liczbą w miejscu pinezki, gwiazdki
   najlepszego stanowiska pod nim; stuknięcie przybliża mapę. Pole trafienia — tylko kółko, jak główka pinezki. */
.pingroup{position:absolute;transform:translate(-50%,-100%);cursor:pointer;border:0;background:none;padding:0;color:var(--ink);font:inherit;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));z-index:2;pointer-events:none}
.pingroup .head{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,#2a4d5c,#16303c);border:2px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 4px rgba(42,77,92,.45);display:grid;place-items:center;pointer-events:auto;font-size:13px;line-height:1}
.pin[hidden],.pingroup[hidden],.mapwhole[hidden]{display:none}
/* Przybliżona mapa: „⤢ Cała woda” w rogu, przesuwanie palcem zamiast przewijania strony (`setView()` w map-ui.js) */
.mapwhole{position:absolute;right:8px;top:8px;z-index:4;font-size:12px;padding:5px 10px;background:rgba(4,14,19,.82)}
.mapbox.zoomed{touch-action:none;cursor:grab}
/* Mapa z grupami (`crowded`): na szerokim ekranie podpisy wszystkich pinezek zlewały się w plamę — podpis tylko wybranej */
.mapbox.crowded .pin:not(.sel) .lbl{display:none}
/* F-094: panel „Nad tą wodą” na ekranie łowienia — przyciski przy nicku łamią się pod nim na wąskim ekranie */
.waterside .frow{flex-wrap:wrap}
.waterside-actions{display:flex;gap:6px;flex-wrap:wrap}
.mapgrid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
/* F-175: panel stanowiska — werdykt, zwijane sekcje, przyklejony pasek z „Łowię tutaj” */
.sp-verdict{display:flex;flex-direction:column;gap:7px}
.sp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-head h3{margin:0}
.sp-rating-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-rating-row .stars-row{margin:0 0 0 auto!important}
.sp-rating{font-size:24px;font-weight:700;line-height:1.1}
.sp-rating.s0,.sp-rating.s1{color:var(--amber)}.sp-rating.s2,.sp-rating.s3{color:#e9d58a}.sp-rating.s4,.sp-rating.s5{color:var(--good)}
.sp-bites{font-size:15px;color:#c6dbe2;display:inline-flex;align-items:center;gap:4px}
.sp-line{font-size:14px;line-height:1.4}
.sp-section{border-bottom:1px solid rgba(255,255,255,.08)}
.sp-section:first-of-type{margin-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.sp-section > summary{display:flex;align-items:center;gap:10px;min-height:46px;cursor:pointer;list-style:none;font-weight:500}
.sp-section > summary::-webkit-details-marker{display:none}
.sp-sec-title{flex:1}
.sp-sec-right{font-size:13px;color:var(--muted);text-align:right}
.sp-section > summary::after{content:'▾';font-size:11px;color:var(--muted);transition:transform .15s}
.sp-section[open] > summary::after{transform:rotate(180deg)}
.sp-sec-body{display:flex;flex-direction:column;gap:9px;padding:2px 0 14px}
.sp-group{margin-top:4px}
.sp-factor-head{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.sp-factor-track{height:6px;border-radius:99px;background:rgba(255,255,255,.1);margin-top:5px;overflow:hidden}
.sp-factor-track i{display:block;height:100%;border-radius:99px;background:#6f8a95}
.sp-factor.dn b{color:#f08a80}.sp-factor.dn .sp-factor-track i{background:var(--danger)}
.sp-factor.up b{color:var(--good)}.sp-factor.up .sp-factor-track i{background:var(--good)}
.sp-factor.mid b{color:#c6dbe2}
.sp-footer{position:sticky;bottom:var(--sa-b);z-index:2;margin:12px -16px -16px;padding:10px 16px 14px;
  background:#0e2531;border-top:1px solid var(--stroke);border-radius:0 0 var(--r) var(--r);display:flex;flex-direction:column;gap:8px}
.sp-rig{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.sp-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sp-buttons .btn{min-height:50px;justify-content:center}
/* na telefonie skrót warsztatu pod mapą przejmuje pasek („Zmień zestaw” otwiera warsztat na cały ekran) */
@media(max-width:940px){#screen-map .ws-sum{display:none}}
@media(max-width:940px){.mapgrid{grid-template-columns:1fr}}

.spotcard h3{font-size:18px;margin-bottom:2px}
.attrs{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:12px 0}
.attr{display:flex;justify-content:space-between;gap:8px;font-size:13px;border-bottom:1px dashed rgba(255,255,255,.09);padding-bottom:4px}
.attr > span{flex-shrink:0;white-space:nowrap}
.attr b{font-weight:600;text-align:right;min-width:0}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--amber));transition:width .35s}
.bar.sat{height:5px}
.bar.sat i{background:linear-gradient(90deg,var(--amber),#e2605a)}
/* pasek zanęty z częściami na grupy ryb (F-131): podpis części ucina się wielokropkiem, nie zawija */
.gb-groups{display:flex;gap:8px;margin-top:4px}
.gb-groups>div{flex:1;min-width:0}
.gb-name{display:block;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-groups .bar{margin-top:2px}

.stars-row{display:flex;gap:3px;align-items:center}
.stars-row i{width:13px;height:13px;border-radius:3px;background:rgba(255,255,255,.12);display:block}
.stars-row i.on{background:linear-gradient(135deg,var(--amber),#e2725b);box-shadow:0 0 8px rgba(240,163,60,.45)}
/* Wykres „kiedy warto wrócić” (F-009). SVG skaluje się szerokością — wysokość
   idzie za viewBox, więc nie ustawiamy jej tutaj na sztywno. */
.outlook{margin-top:8px;background:rgba(0,0,0,.18);border:1px solid var(--stroke);border-radius:var(--r-s);padding:6px 4px 2px}
.factors{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.factor{display:flex;align-items:center;gap:8px;font-size:12.8px;color:var(--muted)}
.factor .tag{width:6px;height:18px;border-radius:3px;flex:none}
.factor .tag.up{background:var(--good)} .factor .tag.dn{background:var(--danger)} .factor .tag.mid{background:var(--dim)}

/* ---------- swim / fishing ---------- */
.swimlayout{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
@media(max-width:1000px){.swimlayout{grid-template-columns:1fr}}
.stage{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--stroke);background:#06131a;box-shadow:var(--sh)}
#scene{display:block;width:100%;aspect-ratio:16/9;background:#06131a}
@media(max-width:620px){#scene{aspect-ratio:4/3}}
.hud-top{position:absolute;top:12px;left:12px;right:60px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.hud-chip{
  background:rgba(4,14,19,.62);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:5px 11px;font-size:12.5px;backdrop-filter:blur(7px);display:inline-flex;gap:7px;align-items:center
}
.hud-chip b{font-weight:600}
.alert{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.85);
  font-size:clamp(28px,6vw,54px);font-weight:700;letter-spacing:.04em;opacity:0;
  text-shadow:0 4px 30px rgba(0,0,0,.7);pointer-events:none;color:#fff
}
.alert.show{animation:pop .5s ease forwards}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.bitepulse{position:absolute;inset:0;border-radius:18px;pointer-events:none}
/* tryb skupienia (F-068) — przycisk w rogu sceny; `.hud-top` zostawia mu miejsce (`right:60px`) */
.focusbtn{position:absolute;top:10px;right:10px;z-index:2;font-size:17px;background:rgba(4,14,19,.62);border-color:rgba(255,255,255,.16);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.bitepulse.on{animation:pulse 1s ease-in-out infinite}
/* F-173: kompas z wiatrem pod ⛶ (prawy górny róg) — `.hud-top` zostawia mu miejsce (`right:60px`); z dala od dolnych ~40 % kadru */
.compass{position:absolute;top:56px;right:10px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;
  cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.compass svg{display:block;width:100%;height:100%}
.compass-rose{transform:rotate(var(--pan,0deg))}   /* F-184: rozglądanie się — obrót wokół środka (viewBox od −50) */
@keyframes pulse{0%,100%{box-shadow:inset 0 0 60px 0 rgba(240,163,60,0)}50%{box-shadow:inset 0 0 70px 6px rgba(240,163,60,.35)}}

.deck{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.actionbar{display:flex;gap:10px;flex-wrap:wrap}
.actionbar .btn{flex:1;min-width:132px}
.bigbtn{font-size:17px;padding:16px 20px;font-weight:700;letter-spacing:.01em}

.fightpanel{display:none;gap:12px;flex-direction:column}
.fightpanel.on{display:flex}
.gauge .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px}
.gauge .track{height:14px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.gauge .fill{height:100%;transition:width .06s linear}
.gauge.tension .track::after{
  content:'';position:absolute;left:56%;right:0;top:0;bottom:0;
  background:repeating-linear-gradient(45deg,rgba(226,96,90,.25) 0 6px,transparent 6px 12px)
}
.gauge.tension .fill{background:linear-gradient(90deg,var(--good),#d9d05a 42%,var(--danger) 56%) left/100% 100% no-repeat}
.gauge.dist .fill{background:linear-gradient(90deg,var(--accent),#8ad6ff)}
.gauge.stam .fill{background:linear-gradient(90deg,#9b8cf5,#d38cf5)}
.haul{
  width:100%;padding:20px;border-radius:16px;font-size:19px;font-weight:800;letter-spacing:.06em;
  background:linear-gradient(135deg,var(--amber),#d2691e);color:#2b1602;border:0;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .08s;
  /* zmiana napisu nie może zmienić wysokości paska: jedna linia i stała interlinia (↻ z innego fontu podnosił o 1 px) */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25
}
.haul.active{transform:scale(.975);filter:brightness(1.12)}
/* B-088: przycisk mówi, co robić (`fightButton()` w game.js). Trzymany — ciemny i „wciśnięty”, żeby było
   widać spod kciuka; puszczony w czerwonym — spokojny, bo to dobrze; pulsuje tylko to, co grozi utratą ryby.
   Puls na `box-shadow`, nie na `transform` — `transform` należy do `.active`. */
.haul.h-reeling,.haul.h-keepUp{background:linear-gradient(135deg,#a8661a,#7c3f10);color:#fff1dc;box-shadow:inset 0 3px 12px rgba(0,0,0,.4)}
.haul.h-reel{background:linear-gradient(135deg,var(--good),#3f9f57);color:#06260f;animation:haul-puls-z .7s ease-in-out infinite}
.haul.h-letGo,.haul.h-surge{background:linear-gradient(135deg,var(--danger),#b3362f);color:#fff}
.haul.h-surge{animation:haul-puls-c .5s ease-in-out infinite}
.haul.h-drag{background:linear-gradient(135deg,#566779,#3b4757);color:#e4edf6}
@keyframes haul-puls-z{50%{box-shadow:0 0 0 5px rgba(123,216,143,.45)}}
@keyframes haul-puls-c{50%{box-shadow:0 0 0 5px rgba(226,96,90,.5)}}
@media(prefers-reduced-motion:reduce){ .haul.h-reel,.haul.h-surge{animation:none;outline:3px solid #fff;outline-offset:-3px} }

/* side panel */
.side{display:flex;flex-direction:column;gap:12px}
.side .panel{padding:14px}
.side h4{font-size:14px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:3.5px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.kv:last-child{border-bottom:0}
.kv b{font-weight:600}
.log{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;font-size:12.8px}
.log div{padding:5px 8px;border-radius:7px;color:var(--muted);line-height:1.4}
.log div:nth-child(odd){background:rgba(255,255,255,.035)}
.log .t{color:var(--dim);font-variant-numeric:tabular-nums;margin-right:6px;font-size:11.5px}
.log .ev-good{color:var(--good)} .log .ev-bad{color:var(--danger)} .log .ev-hot{color:var(--amber)}

/* ---------- warsztat zestawu (F-039, js/ui/workshop-ui.js) ----------
   Szeroki ekran: panel w stronie, nagłówek (obie wędki) przyklejony pod paskiem górnym.
   Telefon: pod mapą / sceną skrót `.ws-sum`, a panel wysuwa się na cały ekran (`.ws.on`). */
/* Ikona przynęty (`baitIcon()`, `workshop-ui.js`): SVG z `bait-art.js` siada w linii tekstu jak emoji. */
.baitic{display:inline-block;line-height:0;vertical-align:-.22em}
.ws-sum,.ws-scrim,.ws-done,.ws-grab,.ws-strip{display:none}
.ws{margin-top:14px;background:#0b1c25;border:1px solid var(--stroke);border-radius:var(--r)}
.ws-head{position:sticky;top:calc(58px + var(--sa-t));z-index:5;padding:12px 12px 10px;background:#0e2430;border-bottom:1px solid var(--stroke);border-radius:var(--r) var(--r) 0 0}
.ws-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ws-top b{font-size:15px}
.ws-mem{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);background:rgba(0,0,0,.18);border-radius:10px;padding:5px 6px 5px 10px;margin-bottom:8px}
.ws-mem .btn{flex:none}
.ws-rods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ws-rods.solo{grid-template-columns:1fr}   /* F-199: spinning — jedna wędka */
/* F-200: kolumna od góry — przycisk wyśrodkowałby treść w pionie, a plakietka zmiany (`.ws-delta`) jest przypięta do góry karty */
.ws-rod{display:flex;flex-direction:column;justify-content:flex-start;position:relative;text-align:left;background:rgba(0,0,0,.2);border:2px solid transparent;border-radius:13px;padding:8px 10px;cursor:pointer;min-width:0;color:var(--ink);font:inherit}
.ws-rod>span{display:block}
.ws-rod.on{border-color:var(--accent);background:rgba(87,199,181,.1)}
.ws-rod .nm{font-size:12px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;gap:4px}
.ws-rod .ed{font-size:10.5px;color:var(--accent);font-weight:700;letter-spacing:.04em}
.ws-rod .val{font-size:22px;font-weight:700;line-height:1.15;margin-top:2px;white-space:nowrap}
.ws-rod .val small{font-size:12px;font-weight:500;color:var(--muted)}
.ws-rod .sp{font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* F-198: wąski telefon — „ZMIENIASZ” jako ✎ (tekst zostaje dla czytnika), „Wędka 1 · w ręku” nie łamie się pod nim;
   samozacięcie i gatunki zawijają się do dwóch linijek zamiast urywać w pół słowa */
@media(max-width:520px){
  .ws-rod .ed{font-size:0;letter-spacing:0}
  .ws-rod .ed::before{content:'✎';font-size:14px;line-height:1}
  .ws-rod .sp.self,.ws-rod .sp.whose{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
}
.ws-waiting{display:block;font-size:11.5px;color:#ffc27a;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-stars{color:var(--amber);letter-spacing:1px}
.ws-stars i{color:rgba(255,255,255,.18);font-style:normal}
.ws-delta{position:absolute;right:8px;top:30px;font-size:12px;font-weight:700;padding:1px 7px;border-radius:999px}
.ws-delta.up{background:rgba(123,216,143,.18);color:var(--good)} .ws-delta.dn{background:rgba(226,96,90,.18);color:#ff9b95}
.ws-body{padding:4px 12px 12px}
.ws-legend{font-size:11.5px;color:var(--muted);line-height:1.5;background:rgba(0,0,0,.18);border-radius:10px;padding:7px 10px;margin:8px 0 2px}
.ws-legend b{color:var(--ink)} .ws-legend .g{color:var(--good);font-weight:700} .ws-legend .r{color:#ff9b95;font-weight:700} .ws-legend .w{color:#ffc27a;font-weight:700}
.ws-cast{margin-top:4px;color:var(--ink)}
.ws-row{padding:10px 0;border-bottom:1px dashed var(--stroke)}
.ws-row:last-child{border-bottom:0}
.ws-rowhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.ws-rowhead .cur{font-size:13px;font-weight:600;text-align:right}
.ws-warn{font-size:12px;color:#ffc27a;margin:-2px 0 7px}
.ws-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}
.ws-chip{text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:11px;padding:6px 9px;cursor:pointer;min-width:0;color:var(--ink);font:inherit}
.ws-chip b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-chip s{display:block;text-decoration:none;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-chip .h,.ws-step .h{display:block;font-size:11.5px;font-weight:700;line-height:1.25;margin-top:1px}
.ws-chip .h.uu,.ws-chip .h.u,.ws-step .h.uu,.ws-step .h.u{color:var(--good)}
.ws-chip .h.dd,.ws-chip .h.d,.ws-step .h.dd,.ws-step .h.d{color:#ff9b95}
.ws-chip .h.eq,.ws-step .h.eq{color:var(--muted)}
.ws-chip .whose,.ws-step .whose{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-chip .whose.zly{color:#ffc27a;white-space:normal;line-height:1.25}
.ws-chip .price{display:block;font-size:10.5px;color:#ffc27a;line-height:1.25;margin-top:1px}
.ws-chip .price .why{color:var(--muted)}
.ws-chip.on{border-color:var(--accent);background:rgba(87,199,181,.14)}
.ws-chip.on .h{color:var(--accent)}
.ws-chip.bad b{color:#ffb3ae}
.ws-chip .ic{display:block;line-height:0;margin-bottom:3px}
.ws-stepper{display:flex;align-items:stretch;gap:8px}
.ws-step{flex:none;width:118px;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:11px;cursor:pointer;padding:5px 4px;color:var(--ink);font:inherit}
.ws-step:disabled{opacity:.35;cursor:default}
.ws-step b{display:block;font-size:14px;line-height:1.2}
.ws-stepper .mid{flex:1;text-align:center;background:rgba(0,0,0,.18);border-radius:11px;padding:6px}
.ws-stepper .mid b{display:block;font-size:15px}
/* F-196: skala grubości żyłki pod kafelkami rodzaju przyponu — kolumny ustawia `leaderPicker()` */
.ws-scale{display:grid;gap:4px;margin-top:8px}
.ws-sc{background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:9px;padding:5px 2px 0;cursor:pointer;color:var(--ink);font:inherit;text-align:center;overflow:hidden;min-width:0}
.ws-sc b{display:block;font-size:12px;font-weight:600}
.ws-sc .h{display:block;font-size:11px;font-weight:700;line-height:1.3}
.ws-sc .h.uu,.ws-sc .h.u{color:var(--good)} .ws-sc .h.dd,.ws-sc .h.d{color:#ff9b95} .ws-sc .h.eq{color:var(--muted)} .ws-sc .h.on{color:var(--accent)}
.ws-sc i{display:block;height:4px;margin-top:4px;background:rgba(87,199,181,.35)}
.ws-sc i.risk{background:var(--amber)}
.ws-sc.on{border-color:var(--accent);background:rgba(87,199,181,.14);cursor:default}
.ws-sc.bad b{color:#ffb3ae}
.ws-scale-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);margin-top:3px}
.ws-scale-info{margin-top:6px;font-size:12px;line-height:1.45;background:rgba(0,0,0,.18);border-radius:10px;padding:6px 10px}
.ws-scale-info .h{font-weight:700} .ws-scale-info .h.uu,.ws-scale-info .h.u{color:var(--good)} .ws-scale-info .h.dd,.ws-scale-info .h.d{color:#ff9b95}
.ws-scale-info .h.eq{color:var(--muted)} .ws-scale-info .h.on{color:var(--accent)}
.ws-scale-info .price{color:#ffc27a} .ws-scale-info .ok{color:var(--good)}
/* F-197: przynęty wybranej grupy pod kafelkami grup */
.ws-group{margin-top:8px;padding-left:10px;border-left:2px solid var(--stroke)}
.ws-group-name{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:5px}
/* F-157: kęs w rzędzie przynęty, porcja w rzędzie zanęty, przełącznik W2 = W1, zwinięty sprzęt */
.ws-bite{margin-top:8px}
.ws-note{font-size:12.5px;color:var(--muted);margin:10px 0 2px}
.ws-seg{display:flex;align-items:stretch;margin-top:8px;border:1px solid var(--stroke);border-radius:11px;overflow:hidden}
.ws-seg .lbl{display:flex;align-items:center;padding:0 10px;font-size:11.5px;color:var(--muted);background:rgba(0,0,0,.18)}
.ws-seg button{flex:1;background:none;border:0;border-left:1px solid var(--stroke);color:var(--ink);font:inherit;font-size:13px;padding:7px 4px;cursor:pointer}
.ws-seg button.on{background:rgba(87,199,181,.16);color:var(--accent);font-weight:700;cursor:default}
/* F-198: przełącznik ze strzałką brań pod nazwą (tempo prowadzenia) — bez etykiety, więc pierwszy segment bez kreski */
.ws-seg-h button:first-child{border-left:0}
.ws-seg-h .h{display:block;font-size:11px;font-weight:700;line-height:1.3}
.ws-seg-h .h.uu,.ws-seg-h .h.u{color:var(--good)} .ws-seg-h .h.dd,.ws-seg-h .h.d{color:#ff9b95} .ws-seg-h .h.eq{color:var(--muted)} .ws-seg-h .h.on{color:var(--accent)}
.ws-same{display:flex;align-items:center;gap:10px;font-size:12.5px;background:rgba(87,199,181,.07);border:1px solid rgba(87,199,181,.3);border-radius:11px;padding:7px 10px;margin:10px 0 2px}
.ws-sw{flex:none;position:relative;width:38px;height:22px;border-radius:11px;border:0;background:var(--stroke2);cursor:pointer;padding:0}
.ws-sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.ws-sw.on{background:var(--accent)}
.ws-sw.on::after{left:19px}
.ws-gear{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:11px;padding:7px 10px}
.ws-gear .v{flex:1;min-width:0;font-size:13px;font-weight:600}
.ws-gear .st{display:block;font-size:11.5px;font-weight:500;color:var(--good)}
.ws-gear .st.zly{color:#ffc27a}
.ws-gear .btn{flex:none}
.ws-sub{margin-top:4px;padding-left:10px;border-left:2px solid var(--stroke)}
.ws-sub .ws-row:last-child{padding-bottom:0}
.ws-presets:not(:empty){padding:10px 12px 0;border-top:1px solid var(--stroke)}
.ws-presets .presets{border-bottom:0;margin-bottom:0}
.ws-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--stroke);background:#0e2430;border-radius:0 0 var(--r) var(--r)}
.ws-foot .grow{flex:1}
.ws-foot .btn.on{border-color:var(--accent)}
.ws-sumrod{padding:6px 0;border-bottom:1px dashed var(--stroke)}
.ws-sumrod:first-child{padding-top:0}
.ws-sumrod .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px}
.ws-sumrod .v{white-space:nowrap;font-size:12.5px;color:var(--muted)}
.ws-sumrod .v b{font-size:15px;color:var(--ink)}
.ws-sumrod .det{font-size:12.5px;color:var(--muted);margin-top:2px}
@media(max-width:940px){
  .ws-sum{display:block;margin-top:12px}
  .ws-sum .btn.block{margin-top:8px}
  .ws{position:fixed;inset:0;z-index:70;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;
    padding-top:var(--sa-t);transform:translateY(102%);transition:transform .25s ease;visibility:hidden}
  .ws.on{transform:none;visibility:visible}
  .ws-head{position:static;border-radius:0;flex:none}
  .ws-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
  .ws-foot{border-radius:0;padding-bottom:calc(10px + var(--sa-b));flex:none}
  .ws-presets{flex:none;max-height:40vh;overflow-y:auto}
  .ws-done,.ws-strip{display:grid}
  .ws-done{display:inline-flex}
  .ws-grab{display:block;width:42px;height:4px;border-radius:4px;background:var(--stroke2);margin:0 auto 8px}
  .ws-scrim{display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s}
  .ws-scrim.on{opacity:1;pointer-events:auto}
  .ws-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 2px}
  .ws-chips::-webkit-scrollbar{display:none}
  .ws-chip{flex:none;max-width:170px}
  .ws-group .ws-chips{margin-left:-22px;padding-left:22px}   /* F-197: przewijanie w bok spod wcięcia grupy */
  .ws-chip .h{white-space:nowrap}
  /* pasek stanowisk (mapa): jeden niski rząd „ikona 2★" */
  .ws-strip{gap:4px;margin-bottom:8px;overflow-x:auto}   /* T-055 krok 10: kolumna ≥ 40 px — przy wielu stanowiskach pasek przewija się w bok */
  .ws-ss{display:flex;align-items:center;justify-content:center;gap:2px;background:rgba(0,0,0,.2);border:2px solid transparent;border-radius:9px;padding:2px 0;cursor:pointer;min-width:0;color:var(--ink);font:inherit}
  .ws-ss.on{border-color:var(--accent);background:rgba(87,199,181,.12)}
  .ws-ss .ic{font-size:16px;line-height:1.2}
  .ws-ss .ic svg{display:block}
  .ws-ss .st{font-size:11px;font-weight:700;color:var(--amber)}
  .ws-ss .st.zero{color:var(--dim)}
  body.ws-open{overflow:hidden}
}

.toggle{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;user-select:none}
.toggle input{display:none}
.toggle .sw{width:38px;height:21px;border-radius:99px;background:rgba(255,255,255,.14);position:relative;transition:.18s;flex:none}
.toggle .sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s}
.toggle input:checked + .sw{background:var(--accent)}
.toggle input:checked + .sw::after{transform:translateX(17px)}

/* ---------- journal ---------- */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs[hidden]{display:none}
.tab{padding:8px 15px;border-radius:10px;background:var(--panel);border:1px solid var(--stroke);cursor:pointer;font-size:13.5px}
/* Wewnętrzne zakładki w dzienniku (F-072): pasek segmentowy — celowo inny niż pigułki `.tabs`, które znaczą filtr.
   Na telefonie dzieli szerokość po równo; długi napis łamie się w dwa wiersze, zamiast wypychać pasek za krawędź. */
.subtabs{display:flex;gap:3px;padding:3px;margin-bottom:12px;background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:12px}
.subtabs button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 8px;border:0;border-radius:9px;background:none;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer}
.subtabs button.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--stroke2)}
.subbadge{display:inline-block;min-width:18px;padding:1px 5px;border-radius:999px;background:var(--amber);color:#1b1203;font-size:11px;font-weight:700;line-height:16px}
.subview[hidden]{display:none}
/* Zakładki okna „Jak grać” (F-119): siatka, wszystkie widoczne naraz — przewijany rząd chował połowę za krawędzią.
   Ikona nad podpisem; szerokie okno — jeden rząd sześciu, telefon (≤ 520 px) — 3 × 2. Zakładka schowana: `hidden` na treści. */
.helptabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:3px;margin:4px 0 14px;background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:12px}
.helptabs button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:0;padding:7px 3px 6px;border:0;border-radius:9px;background:none;color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;touch-action:manipulation}
.helptabs button span{font-size:16px;line-height:1}
.helptabs button.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--stroke2)}
.helptabs + div > [hidden]{display:none}
@media(max-width:520px){ .helptabs{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* przepis na gatunek w pomocy (F-119) */
.rule{margin-top:12px;padding:12px 14px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel)}
.ex-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:15px}
.ex-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;font-size:13.5px;margin-top:3px}
/* odnośnik tekstowy (np. spod „Co działa na plus i minus” do pomocy) */
.linkbtn{display:inline-block;margin-top:8px;padding:4px 0;border:0;background:none;color:var(--accent);font-family:inherit;cursor:pointer;text-align:left;touch-action:manipulation}
/* panele w widoku mają `marginTop` z czasów, gdy stały jeden pod drugim — pierwszy nie potrzebuje odstępu od paska */
.subview>.panel:first-child,.subview>div>.panel:first-child{margin-top:0 !important}
.tab.on{background:rgba(87,199,181,.16);border-color:var(--accent)}
/* Filtry atlasu ryb: podpis nad każdym filtrem, kraj i ryby — przełącznik w jednym rzędzie, łowisko — lista rozwijana.
   Wybór w kolorze akcentu jak pigułki `.tab.on` (filtr), nie jak `.subtabs` (przejście między widokami). */
.af{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.af-row[hidden]{display:none}
.af-label{margin-bottom:4px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.af-seg{display:flex;gap:3px;padding:3px;background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:11px}
.af-seg button{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:7px 8px;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);font-family:inherit;font-size:13.5px;line-height:1.2;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.af-seg button.on{background:rgba(87,199,181,.16);border-color:var(--accent);color:var(--ink)}
.af-select{width:100%;padding:9px 34px 9px 12px;border:1px solid var(--stroke);border-radius:11px;color:var(--ink);font-family:inherit;font-size:14px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:rgba(0,0,0,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394aeb9' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 13px center}
.af-select.on{border-color:var(--accent);background-color:rgba(87,199,181,.16)}
.af-select option,.af-select optgroup{background:var(--bg2);color:var(--ink)}
/* iOS przybliża stronę przy polu < 16 px (PULAPKI-UI.md) — lista rozwijana też jest polem */
@media (pointer:coarse){.af-select{font-size:16px}}
@media(max-width:400px){ .af-seg button{font-size:12.5px;padding:7px 5px} }
/* zakładki dziennika: ikona + podpis (na telefonie ikona nad podpisem, siatka 4 × 2 — niżej) */
.jtabs .tab{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-family:inherit}
.jt-ic{font-size:15px;line-height:1}
.tablewrap{overflow-x:auto}

/* ---------- dwie wędki i „moje zestawy" (F-015) ---------- */
.presets{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--stroke)}
.presetrow{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 8px}
.preset{display:inline-flex;align-items:stretch;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--stroke);overflow:hidden}
.preset.on{background:rgba(87,199,181,.16);border-color:rgba(87,199,181,.45)}
.preset button{background:none;border:0;color:var(--ink);font:inherit;cursor:pointer}
.presetname{font-size:13px;padding:6px 4px 6px 12px}
.presetdel{font-size:15px;line-height:1;padding:0 10px 0 6px;color:var(--dim) !important}
.presetsave{display:flex;gap:8px;align-items:center}
.presetsave .textin{flex:1 1 auto;min-width:0}
@media(pointer:coarse){ .presetname{padding:9px 4px 9px 13px} .presetdel{padding:0 12px 0 8px} }
.presetsave{margin-top:12px}
/* Zasięg zestawu (F-060): 📍 stanowisko — ciepły, 🌊 łowisko — niebieski, 🌍 wszędzie — bez koloru. */
.presetscope{margin-right:5px}
.preset.scope-spot{border-color:rgba(242,178,92,.55);background:rgba(242,178,92,.10)}
.preset.scope-fishery{border-color:rgba(110,168,245,.55);background:rgba(110,168,245,.10)}
.preset.scope-spot.on{background:rgba(242,178,92,.24);border-color:rgba(242,178,92,.8)}
.preset.scope-fishery.on{background:rgba(110,168,245,.24);border-color:rgba(110,168,245,.8)}
.presetsave.open{flex-direction:column;align-items:stretch}
.presetsaverow{display:flex;gap:8px;align-items:center}
.presetsaverow .textin{flex:1 1 auto;min-width:0}
.presetscopes{display:flex;gap:6px;flex-wrap:wrap}
.presetscopebtn{font:inherit;font-size:12px;padding:6px 10px;border-radius:999px;cursor:pointer;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.presetscopebtn.on{color:var(--ink);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.presetscopebtn.scope-spot.on{background:rgba(242,178,92,.2);border-color:rgba(242,178,92,.8)}
.presetscopebtn.scope-fishery.on{background:rgba(110,168,245,.2);border-color:rgba(110,168,245,.8)}
.presetwhere{margin-top:-2px}
/* Znajomi (F-029): nick z podpisem, przyciski po prawej; długi nick zawija się, nie wypycha przycisków. */
.frow{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.frow:last-child{border-bottom:0}
.frow .who{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.frow .when{flex:none;font-size:12px;color:var(--dim);align-self:flex-start;padding-top:2px}
/* przyciski w wierszu nie łamią się — „💬 Napisz” skakał na dwie linie i wychodził wyższy od „Usuń” */
.frow > .btn{flex:none;white-space:nowrap}
/* prezent w dzwonku (F-242): „🎨 Pomaluj” nad „🙏 Podziękuj” / „✓ Podziękowano” — bez łamania napisów */
.prezent-akcje{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
.prezent-akcje .btn, .prezent-akcje .muted{white-space:nowrap;width:100%}
.fstate.on{color:var(--good)}
/* F-120 etap 3 krok 5: wybór wód domowych na starcie — wiersz kraju to przycisk */
.waterchoice .frow.choice{width:100%;background:none;border:1px solid transparent;border-bottom:1px dashed rgba(255,255,255,.08);border-radius:var(--r-s);color:inherit;font:inherit;text-align:left;cursor:pointer;padding:12px 10px;min-height:52px}
.waterchoice .frow.choice.on{background:rgba(87,199,181,.12);border-color:rgba(87,199,181,.4)}
.waterchoice .frow.choice .pill{min-width:28px;text-align:center}
/* Karta znajomego (F-048): nick jest przyciskiem, wiersze ryb jak w czacie — całe klikalne. */
.flink{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.flink b{color:var(--accent)}
.flink-ic{font-weight:400;font-size:12px}
.recrow{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 4px;text-align:left;font:inherit;color:inherit;
  background:none;border:0;border-bottom:1px dashed rgba(255,255,255,.08);cursor:pointer;touch-action:manipulation
}
.recrow canvas{flex:none}
.recrow .who{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.recval{flex:none;text-align:right;white-space:nowrap}
.fcard-h{margin-top:16px}
.fcard-g{margin:10px 0 2px;font-weight:700}
.better{color:var(--good)}
/* Ranking gatunków (F-048): wiersz gatunku rozwija całą kolejkę graczy. */
.recrow[aria-expanded="true"]{border-bottom-color:transparent}
.recpodium{padding:2px 4px 10px 70px;border-bottom:1px dashed rgba(255,255,255,.08)}
.recpodium[hidden]{display:none}
.recplace{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:13.5px}
.recplace .grow{flex:1}
.recplace b{overflow-wrap:anywhere;min-width:0}
.recplace.me b{color:var(--accent)}
@media(max-width:400px){ .recpodium{padding-left:8px} }
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);margin-right:6px;vertical-align:1px}
/* Czat 1:1 (F-047): przycisk w pasku z licznikiem, lista rozmów, dymki, ryba w wiadomości. */
.chatbtn{position:relative}
.chatbadge{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:1
}
.chatbadge[hidden]{display:none}
/* Plakietka wystaje z przycisku — i ma łapać kliknięcie: jest jego dzieckiem, więc klik w nią to klik w przycisk.
   Z `pointer-events:none` stuknięcie w wystającą część (akurat w liczbę, w którą się celuje) trafiało w pasek (B-082). */
.chatbtn .chatbadge{position:absolute;top:-6px;right:-6px}
/* Dzwonek „Co słychać” (F-099): liczba = do mnie, sama kropka = nowiny znajomych. */
.bellbtn{position:relative}
.bellbtn .chatbadge{position:absolute;top:-6px;right:-6px}
.chatbadge.dot{min-width:10px;width:10px;height:10px;padding:0;top:-3px;right:-3px;background:var(--violet)}
.bell .panel+.panel{margin-top:12px}
/* F-243: zakładki dzwonka — przyklejone u góry okna; liczba = do mnie (Dla Ciebie) albo do przejrzenia (Gra), kropka = nowiny.
   B-264: `sticky` liczy się od krawędzi treści okna, nie od jego brzegu — przy `top:-1px` nad paskiem zostawał górny padding okna
   (`--mpt`), w którym przewijały się wpisy. Pasek staje 6 px pod brzegiem okna, a cień w kolorze okna zakrywa ten pas i boki
   (jak `.chatpick-bar`, `.modal > .actions`). */
.bell-tabs{position:sticky;top:calc(6px - var(--mpt));z-index:2;background:var(--bg2);margin-bottom:12px;
  box-shadow:0 -6px 0 6px #0d2330}
.bell{min-height:52vh;min-height:52dvh}   /* przełączanie zakładek nie podskakuje oknem o pół ekranu */
.bell-tabs .tabbadge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--amber);color:#2a1700;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.bell-tabs .tabbadge.dot{min-width:0;width:8px;height:8px;padding:0;background:var(--violet)}
.bell-tabs .tabbadge.dot.golden{background:#d9b44a}
.bell h4.later{margin-top:14px}
/* F-301: okno Federacji Calm Fishing — kurs dnia krajami (liczba w plakietce ze słowem dnia), Biuletyn tabelą; w dzwonku tylko
   wpis o nowym Biuletynie. Złoto = trudny dzień i nowy Biuletyn (jak kropka Gry), chłodny błękit = łatwy dzień. */
.fed-head{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.fed-head span{display:inline-flex}
.federation .panel+.panel{margin-top:12px}
.federation .fed-intro{margin:0 0 6px}
.fed-country{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 10px;padding:10px 0;border-top:1px dashed rgba(255,255,255,.08)}
.fed-country:first-of-type{border-top:0}
.fed-flag{grid-row:1/3;display:inline-flex}
.fed-name{font-weight:700;font-size:16px;min-width:0}
.fed-comment{grid-column:2;line-height:1.3;min-width:0}
.fed-rate{grid-row:1/3;grid-column:3;font-weight:800;font-size:20px;line-height:1.15;padding:6px 10px;border-radius:10px;min-width:76px;text-align:center;background:var(--panel2);font-variant-numeric:tabular-nums}
.fed-rate small{display:block;font-size:11px;font-weight:600;opacity:.85}
.fed-rate.hard{color:#f3c561;background:rgba(217,180,74,.14)}
.fed-rate.easy{color:#8fd3e8;background:rgba(120,190,220,.12)}
.federation .fed-footer{margin:10px 0 0}
.fed-table-wrap{overflow-x:auto}
.fed-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fed-table th{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);text-align:right;padding:4px 0 6px 8px}
.fed-table td{text-align:right;padding:7px 0 7px 8px;border-top:1px dashed rgba(255,255,255,.08);vertical-align:top;white-space:nowrap}
.fed-table th:first-child,.fed-table td:first-child{text-align:left;padding-left:0}
.fed-table td b{font-size:15px}
.fed-day{display:block;font-size:12px;color:var(--muted)}
.fed-previous{margin-top:10px}
.fed-previous summary{cursor:pointer;color:var(--muted)}
.federation .panel.unread,.federation-news{box-shadow:inset 3px 0 0 #d9b44a}
.fed-news{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fed-news p{margin:4px 0 0}
.fed-news .btn{flex:none}
.bell .frow.unread{box-shadow:inset 3px 0 0 rgba(155,140,245,.75);padding-left:10px}
.bell .frow.for-me{box-shadow:inset 3px 0 0 var(--amber);background:rgba(240,163,60,.07)}
.bell .frow.for-me .who{color:var(--ink)}
/* Ogłoszenia (F-105): akapity z treści, pole admina pod listą; bez konta panel na ekranie łowisk. */
.ann-text{white-space:pre-line;overflow-wrap:anywhere}
.bell .ann-write{margin-top:6px}
#screen-hub .announcementshub{margin-bottom:18px}
.announcementshub[hidden]{display:none}
.announcementshub h4{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.announcementshub.unread{border-color:rgba(240,163,60,.55)}
.chatrow{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;text-align:left;font:inherit;color:inherit;
  background:none;border:0;border-bottom:1px dashed rgba(255,255,255,.08);cursor:pointer;touch-action:manipulation
}
.chatrow:last-child{border-bottom:0}
.chatrow .who{flex:1 1 auto;min-width:0}
.chatrow .when{flex:none;font-size:12px;color:var(--dim)}
.chatprev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chathead{display:flex;align-items:center;gap:12px;margin-bottom:8px;overflow-wrap:anywhere}
/* Awatar (F-106): postać z `avatar.js`, canvas z rozmiarem w `style`. W wierszach list 28 px, w tabeli rankingu 22. */
.avatar{flex:none;display:block;border-radius:50%}
.supporter{margin-left:4px;font-size:.85em;font-weight:400}   /* F-122: ☕ przy nicku wspierającego */
.player{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.aveditor{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.aveditor .avpreview{display:flex;flex-direction:column;align-items:center;gap:10px}
.aveditor .avmini{display:flex;align-items:center;gap:8px;font-size:13px}
.avtrait{margin-bottom:10px}
.avtrait > .small{margin-bottom:4px}
.avoptions{display:flex;flex-wrap:wrap;gap:6px}
.avoptions .btn.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.avcolor{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.18);padding:0;cursor:pointer}
.avcolor.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
/* F-107: opcja do zdobycia — wyszarzona, warunek w `title` i w liście „Do zdobycia” pod cechami */
.avcolor.locked{opacity:.3;cursor:not-allowed}
.shop-paint{flex:none;width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.18)}   /* F-125: próbka lakieru wędki w sklepie */
.shop-item{flex:none;border-radius:12px;background:rgba(160,200,215,.14);border:2px solid rgba(255,255,255,.12)}   /* F-142: rysunek rzeczy na brzegu */

/* ---------- F-160: sklep-przymierzalnia (zakładka „Sklep” i okno) ----------
   Podgląd i kategorie przyklejone u góry, pasek „Kup i załóż” u dołu — przymierzana rzecz zawsze na oczach. W zakładce
   pod paskiem gry (`.topbar`, sticky), w oknie — od krawędzi okna (ujemne `top` o padding okna, jak `.actions`). */
.shop{position:relative}
.shop-stage{
  position:sticky;top:var(--shop-top,calc(64px + var(--sa-t)));z-index:3;height:260px;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%,#1b4252 0%,#0b1f28 70%);border:1px solid var(--stroke)
}
.shop.in-modal .shop-stage{top:calc(-1 * var(--mpt))}   /* B-264: padding okna, nie 22 px na sztywno (telefon: 18–20 px) */
.shop-face{display:grid;place-items:center;height:100%}
.shop-face canvas{border-radius:50%;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.shop-face[hidden],.shop-scene[hidden]{display:none}
.shop-scene{display:block;width:100%;height:100%}
.shop-viewbar{position:absolute;top:10px;right:10px;display:flex;gap:2px;padding:3px;border-radius:11px;background:rgba(4,14,19,.72);border:1px solid var(--stroke)}
.shop-viewbar button{border:0;border-radius:8px;padding:6px 10px;background:none;color:var(--muted);font:600 12.5px var(--ff);cursor:pointer}
.shop-viewbar button.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--stroke2)}
.shop-balance{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:2px;padding:6px 10px;border-radius:11px;background:rgba(4,14,19,.72);border:1px solid var(--stroke);font-weight:700;font-size:14px}
.shop-cats{
  position:sticky;top:calc(var(--shop-top,calc(64px + var(--sa-t))) + 260px);z-index:3;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin:0 -2px;padding:10px 2px;background:linear-gradient(#081820 75%,rgba(8,24,32,0))
}
.shop.in-modal .shop-cats{top:calc(260px - var(--mpt));background:linear-gradient(#0a1a22 75%,rgba(10,26,34,0))}
.shop-cats::-webkit-scrollbar{display:none}
.shop-cats button{flex:none;border:1px solid var(--stroke);border-radius:999px;padding:7px 13px;background:var(--panel);color:var(--muted);font:600 13.5px var(--ff);cursor:pointer;white-space:nowrap}
.shop-cats button.on{background:var(--accent);border-color:var(--accent);color:#03201c}
.shop-body{padding:2px 0 8px}
.shop-group+.shop-group{margin-top:14px}
.shop-sub{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:2px 2px 8px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.shop-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:10px 6px 9px;
  border:1px solid var(--stroke);border-radius:14px;background:var(--panel);color:var(--ink);font-family:inherit;cursor:pointer;touch-action:manipulation
}
.shop-card.on{border-color:var(--accent);background:rgba(87,199,181,.12);box-shadow:inset 0 0 0 1px var(--accent)}
.shop-card.earn .shop-thumb{opacity:.72}
.shop-thumb{display:grid;place-items:center;width:64px;height:64px}
.shop-thumb canvas{border-radius:50%}
.shop-thumb canvas.shop-item{border-radius:12px}
.shop-name{font-size:12.5px;font-weight:600;line-height:1.2;text-align:center;min-height:2.4em;display:flex;align-items:center}
.shop-price,.shop-tag{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px}
.shop-price{background:rgba(240,163,60,.16);color:#ffd08a}
.shop-tag.own{background:rgba(123,216,143,.14);color:var(--good)}
.shop-tag.free{color:var(--dim);font-weight:600}
.shop-tag.lock{background:rgba(255,255,255,.06);color:var(--muted);font-weight:600}
.shop-colors{display:flex;flex-wrap:wrap;gap:9px}
.shop-color{position:relative;width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:pointer;padding:0}
.shop-color.on{border-color:#fff;box-shadow:0 0 0 3px var(--accent)}
.shop-color-price{position:absolute;right:-7px;bottom:-6px;padding:1px 5px;border-radius:999px;background:#2a1a05;color:#ffd08a;font:700 10px var(--ff);border:1px solid rgba(240,163,60,.5)}
.shop-note{margin:10px 2px 0}
.shop-bar{
  position:sticky;bottom:10px;z-index:3;display:flex;align-items:center;gap:8px 8px;margin-top:12px;padding:10px 10px 10px 14px;
  border-radius:16px;background:rgba(9,27,35,.97);border:1px solid var(--stroke2);box-shadow:0 -6px 24px rgba(0,0,0,.35)
}
.shop.in-modal .shop-bar{bottom:calc(-1 * var(--mpb) + 8px)}
.shop-bar{flex-wrap:wrap}
.shop-bar-info{flex:1 1 200px;min-width:0;font-size:14px;line-height:1.3}
.shop-bar-info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-bar-info .small{margin-top:2px}
.shop-bar .btn{flex:none;white-space:nowrap}
.shop-bar .btn.primary{flex:1 0 auto}
.shop-foot{margin:14px 2px 0}
/* szeroki ekran: podgląd z lewej, rzeczy z prawej — bez przyklejania */
@media(min-width:861px){
  .shop{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:18px}
  .shop-stage{grid-column:1;grid-row:1 / span 4;height:420px;top:calc(var(--shop-top,64px) + 12px)}
  .shop.in-modal .shop-stage{top:0;height:400px}
  .shop-cats,.shop.in-modal .shop-cats{grid-column:2;position:static;padding-top:0;background:none}
  .shop-body,.shop-bar,.shop-foot{grid-column:2}
}
.avoptions .btn:disabled{opacity:.45;cursor:not-allowed}
/* F-141: zdjęcie z rybą — na karcie połowu, przy rybie znajomego, w rankingu; w edytorze postaci mniejsze */
.catchcard canvas.zdjecie{border-radius:14px}
.avpreview canvas.zdjecie{width:220px;height:auto;border-radius:12px;display:block}
/* F-143: gablota trofeów — siatka zdjęć z rybą; na telefonie jedna kolumna */
.showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.showcase figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.showcase canvas.zdjecie,.showcase .showcase-photo{width:100%;height:auto;border-radius:10px;display:block}
.showcase .showcase-photo{padding:0;border:0;background:none;cursor:pointer}
.showcase-action{margin:10px auto 0}
@media(max-width:520px){ .aveditor{grid-template-columns:1fr} }
.chatlog{
  display:flex;flex-direction:column;gap:6px;height:min(52vh,460px);height:min(52dvh,460px);overflow-y:auto;
  padding:10px;border-radius:var(--r-s);background:rgba(0,0,0,.18);border:1px solid var(--stroke);overscroll-behavior:contain
}
/* Okno czatu na całą dostępną wysokość (jak `.modal` max-height), a rozmowa zajmuje resztę po nagłówku i polu wpisywania.
   `min-height:0` na każdym piętrze — inaczej flex nie da `.chatlog` się skurczyć i przewija się całe okno, nie rozmowa. */
.modal.chatwin{display:flex;flex-direction:column;height:88vh;height:88dvh}
/* Okno „Jak grać” (F-119): stała wysokość — przy zmianie zakładki nie skacze; na telefonie na cały ekran (niżej) */
.modal.helpwin{height:88vh;height:88dvh}
.chatwin .chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
/* Kurczy się tylko rozmowa; reszta (nagłówek, załącznik, panel 🙂, pole) `flex:none` — inaczej panel emotek
   zgniatał się do paska przy długiej rozmowie (podstawa `auto` = cała wysokość treści, F-055 poprawka). */
.chatwin .chat>*{flex:none}
.chatwin .chat>.chatlog{flex:1 1 0;min-height:90px;height:auto}
.chatday{align-self:center;font-size:11.5px;color:var(--dim);margin:6px 0 2px}
.chatmsg{
  align-self:flex-start;max-width:82%;padding:7px 11px 5px;border-radius:14px 14px 14px 4px;
  background:var(--panel2);border:1px solid var(--stroke);overflow-wrap:anywhere
}
.chatmsg.mine{align-self:flex-end;border-radius:14px 14px 4px 14px;background:rgba(87,199,181,.16);border-color:rgba(87,199,181,.35)}
.chattext{white-space:pre-line;font-size:14px}
.chattime{display:block;margin-left:auto;font-size:10.5px;color:var(--dim)}
.chatmsg{cursor:pointer;-webkit-tap-highlight-color:transparent}
.chatmsg.selected{border-color:var(--accent)}
.chatfoot{display:flex;align-items:center;gap:8px;margin-top:2px}
.chatseen{align-self:flex-end;margin-top:-2px;font-size:10.5px;color:var(--dim)}
/* reakcje w rogu dymka (moja obwiedziona), pasek wyboru pod dymkiem, po jego stronie */
.chatrx{display:flex;gap:2px;font-size:15px;line-height:1}
.chatrx span{padding:1px 3px;border-radius:9px;background:rgba(0,0,0,.25)}
.chatrx span.by-me{box-shadow:inset 0 0 0 1px var(--accent)}
.chatreact{
  align-self:flex-start;display:flex;gap:2px;padding:3px;margin-top:-2px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--stroke2)
}
.chatreact.mine{align-self:flex-end}
.chatreact button{
  width:38px;height:38px;font-size:22px;line-height:1;background:none;border:0;border-radius:50%;cursor:pointer;touch-action:manipulation
}
.chatreact button.on{background:rgba(87,199,181,.28)}
/* F-305: „🗑” na końcu paska; po pierwszym dotknięciu — „Usunąć?” na czerwono, szerzej */
.chatreact .chatdel{border-left:1px solid var(--stroke2);border-radius:0 50% 50% 0;font-size:18px}
.chatreact .chatdel.sure{width:auto;padding:0 12px;border-radius:19px;font-size:13px;font-weight:600;color:#fff;background:var(--danger)}
.chatmsg.deleted{cursor:default;opacity:.7}
.chatmsg.deleted .chattext{font-style:italic;font-size:13px;color:var(--dim)}
.chatsend{display:flex;gap:8px;align-items:center;margin-top:10px}
.chatsend .textin{flex:1 1 auto;min-width:0}
.chatattach{display:flex;gap:8px;align-items:center;margin-top:8px}
.chatattach[hidden]{display:none}
.chatfish{
  display:flex;align-items:center;gap:10px;padding:6px 10px;margin:2px 0 4px;border-radius:var(--r-s);text-align:left;
  font:inherit;color:inherit;background:rgba(0,0,0,.2);border:1px solid var(--stroke);min-width:0
}
button.chatfish{cursor:pointer;touch-action:manipulation}
.chatfish canvas{flex:none}
.chatfish-txt{min-width:0}
.chatfish-who{font-size:11.5px;font-weight:600;color:var(--accent);margin-bottom:1px}
.chatfish.theirs{border-color:rgba(240,163,60,.45)}
.chatfish.theirs .chatfish-who{color:var(--amber)}
/* ryba, która uciekła — cień jak w oknie „Uciekła!”; niewidziana dodatkowo rozmyta */
.chatfish.escaped canvas{filter:brightness(0) opacity(.55)}
.chatfish.escaped.unseen canvas{filter:brightness(0) opacity(.45) blur(1.5px)}
.chatpick-row .chatfish{width:100%}
/* Wybór ryby w zakładkach: pasek przyklejony u góry okna (`top` ujemny o górny padding okna — jak `.modal > .actions` u dołu),
   tło na całą szerokość okna, żeby przewijane karty nie prześwitywały po bokach. Karta ma jedną linię opisu:
   łowisko i datę ryb jednej wyprawy niesie nagłówek grupy (`.chatpick-grp`), a gdzie go nie ma, opis się przycina. */
.chatpick-bar{
  position:sticky;top:calc(-1 * var(--mpt));z-index:1;margin:0 calc(-1 * var(--mpx));padding:4px var(--mpx) 8px;
  background:linear-gradient(#0c2029 80%,rgba(12,32,41,0))
}
.chatpick-bar .subtabs{margin:0}
.chatpick-bar .subtabs button{flex-direction:column;gap:1px;padding:6px 4px}
.chatpick-tab{display:flex;align-items:center;gap:5px;max-width:100%}
.chatpick-tab > *{flex:none}
.chatpick-tab > span:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatpick-bar .subtabs button small{font-size:10.5px;font-weight:500;color:var(--dim)}
.chatpick-hint{margin:6px 2px 0}
.chatpick-grp{font-size:11.5px;color:var(--dim);margin:12px 2px 5px}
.chatpick .chatfish{padding:5px 10px}
.chatpick .chatfish-txt .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatshare{margin:0 0 8px;padding:8px 10px;border-radius:var(--r-s);border:1px dashed rgba(87,199,181,.4)}
.chatshare .chatattach{margin-top:6px}
.chatemoji{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px;margin-top:8px;padding:6px;
  border-radius:var(--r-s);background:rgba(0,0,0,.2);border:1px solid var(--stroke);max-height:132px;overflow-y:auto
}
.chatemoji[hidden]{display:none}
.chatemoji button{
  height:38px;font-size:22px;line-height:1;background:none;border:0;border-radius:8px;cursor:pointer;touch-action:manipulation
}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--stroke);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
/* przepisy łowiska (T-014): okresy bywają długie — zawijamy zamiast przewijać w bok na telefonie */
.rules td,.rules th{white-space:normal;vertical-align:top;padding:8px 6px}
.rules td{font-size:13px}
.rules td:first-child{white-space:nowrap}
.fishcell{display:flex;align-items:center;gap:9px}
.fishcell canvas{border-radius:6px;background:rgba(255,255,255,.04)}
.trophy{color:var(--amber);font-weight:700}
.emptystate{text-align:center;padding:48px 20px;color:var(--dim)}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}

/* ---------- atlas ryb (dziennik → Ryby, spis gatunków łowiska) ---------- */
.fishgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:12px;margin-top:12px;align-items:start}
.fishcard{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;padding:13px}
.fishcard .fc-head{display:flex;align-items:center;gap:11px}
.fishcard .fc-head canvas{flex:none}
.fishcard .fc-head b{font-size:15px}
.fishcard .latin{font-style:italic}
/* ⚠️ Etykieta cechy ma `nowrap`, więc kolumna `1fr` rozpychała się poza kartę (wąska karta w siatce 3 kolumn na komputerze) —
   kolumna co najmniej 230 px, a na węższej karcie cechy idą jedna pod drugą. */
.fishcard .attrs{margin:11px 0 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.fishcard .hint{margin-top:8px}
/* Zwijana karta w spisie gatunków: nagłówek to przycisk, zwinięta pokazuje jeden wiersz skrótu. */
.fishcard.collapsed{padding:9px 11px}
.fc-toggle{width:100%;padding:0;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
.fc-name{flex:1 1 auto;min-width:0}
.fc-summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px}
.fc-summary .pill{padding:1px 8px}
.fishcard:not(.collapsed) .fc-summary{display:none}
.fc-chev{flex:none;color:var(--dim);font-size:15px;transition:transform .15s}
.fishcard:not(.collapsed) .fc-chev{transform:rotate(180deg)}
.fc-more[hidden]{display:none}
.fc-all{margin-top:12px}
/* Album ryb (F-071): gatunek bez odmian to sam kafelek, gatunek z odmianami — ramka szeroka na swoje odmiany.
   Zawijany rząd, nie siatka: kolejność zostaje ściśle alfabetyczna (`dense` w siatce przerzucał kafelki
   o kilka miejsc do przodu), a ramka z dwiema odmianami nie ciągnie się przez cały ekran. */
.albgrid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-top:12px}
.albgrid>.albtile{flex:0 0 122px}
.albgrp{flex:0 0 auto;max-width:100%;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r);padding:10px}
.albgrp-h{display:flex;align-items:center;gap:8px;margin:0 2px 8px}
.albgrp-h b{font-size:14.5px}
.albtiles{display:flex;flex-wrap:wrap;gap:8px}
/* `width` obok `flex-basis`: ramka `.albgrp` bierze szerokość z treści, a Chrome liczy ją z szerokości kafelka, nie z bazy —
   bez niej ramka wychodziła za wąska i odmiany szły jedna pod drugą */
.albtiles .albtile{flex:0 0 112px;width:112px}
.albtile{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 4px 7px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--stroke);color:var(--ink);font-family:inherit;cursor:pointer}
.albgrp .albtile{background:rgba(255,255,255,.03)}
.albtile canvas{display:block}
.albtile .nm{font-size:12.5px;font-weight:600;text-align:center;line-height:1.25}
.albtile .ds{font-size:11.5px;color:var(--muted);white-space:nowrap}
.albtile.missing canvas{filter:grayscale(1);opacity:.35}
/* okaz z medalem (przegląd czytelności, pkt 4): ramka w kolorze metalu, medal w rogu; `.med` podnosi specyficzność ponad `:hover` */
.albtile.med{position:relative;border-width:2px;padding:7px 3px 6px}
.albtile.med.med-bronze{border-color:#c98048}
.albtile.med.med-silver{border-color:#d5dde2}
.albtile.med.med-gold{border-color:#f2c14e}
.albmedal{position:absolute;top:4px;right:5px;line-height:0}
.albmedals{display:inline-flex;gap:8px;margin-left:auto;font-size:13px;font-weight:600;color:var(--ink)}
.albmedals > span{display:inline-flex;align-items:center;gap:2px}
.albtile.missing .nm{color:var(--dim)}
.albtile.missing .ds{color:var(--dim)}
.albbig{display:flex;justify-content:center;margin:4px 0 6px}
.albbig canvas{max-width:100%;height:auto !important}
/* odmiany na karcie znajomego (F-071): miniatura przed nazwą w pigułce */
.pill.varpill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px}
.pill.varpill canvas{flex:none}
.ach{padding:13px;border-radius:12px;background:var(--panel);border:1px solid var(--stroke);display:flex;gap:11px;align-items:flex-start;opacity:.42}
.ach.on{opacity:1;border-color:rgba(240,163,60,.4);background:linear-gradient(135deg,rgba(240,163,60,.12),rgba(255,255,255,.04))}
.ach .ic{font-size:22px;line-height:1}
.ach b{display:block;font-size:13.5px}
.ach s{display:block;text-decoration:none;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.achbar{position:relative;margin-top:7px;height:16px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.achbar i{position:absolute;inset:0 auto 0 0;background:rgba(87,199,181,.35)}
.achbar span{position:relative;display:block;font-size:11px;line-height:16px;padding:0 7px;color:var(--ink)}
/* dziennik: kto gra (nick, poziom, staż) — przycisk prowadzący do Ustawień */
.jprofile{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin-top:3px;padding:2px 0;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.jprofile b{color:var(--accent)}
.jprofile-edit{margin-left:4px;opacity:.7}
/* F-178: profil i tryb gry w nagłówku dziennika — na komputerze jak dawniej (tryb pod profilem, pełny napis) */
.jprofile-row{display:flex;flex-direction:column;align-items:flex-start}
.mode-short{display:none}
/* historia połowów: lista zamiast tabeli 8 kolumn (na telefonie trzeba ją było przewijać w bok) */
.loglist{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.logday{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:12px 2px 2px;font-size:13.5px}
.logday:first-child{margin-top:0}
/* ⚠️ Każdy wiersz to osobna siatka — kolumny wyrównują się między wierszami tylko wtedy, gdy żadna
   nie jest `auto` (szerokość godziny z ikonami przesuwała kolumny `fr` o kilka pikseli). */
.logrow{display:grid;grid-template-columns:62px minmax(170px,.7fr) 2fr 7.5em;grid-template-areas:"img main where when";align-items:center;gap:4px 12px;
  width:100%;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--stroke);color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;touch-action:manipulation}
.logrow canvas{grid-area:img;border-radius:6px;background:rgba(255,255,255,.04)}
.lr-note{margin-top:2px;color:var(--ink);opacity:.85}
.lr-without{padding:6px 2px 2px;line-height:1.5}
.lr-main{grid-area:main;text-align:left}.lr-where{grid-area:where;font-size:12.5px;text-align:left}.lr-when{grid-area:when;font-size:12.5px;white-space:nowrap;text-align:right}

.textin{
  width:100%;padding:10px 13px;border-radius:11px;margin-top:4px;
  background:rgba(255,255,255,.06);border:1px solid var(--stroke);
  color:var(--ink);font-family:var(--ff);font-size:15px;outline:none;transition:.14s
}
.textin:focus{border-color:var(--accent);background:rgba(255,255,255,.09)}
/* ⚠️ iOS przybliża stronę przy polu z czcionką < 16 px i zostaje przybliżona — ucina brzegi okna */
@media (pointer:coarse){.textin{font-size:16px}}

/* ---------- dymki wyjaśniające ---------- */
.tipbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:16px;height:16px;margin-left:5px;padding:0;
  border-radius:50%;border:1px solid var(--stroke2);background:rgba(255,255,255,.07);
  color:var(--muted);font-family:var(--ff);font-size:11px;font-weight:700;font-style:italic;
  line-height:1;letter-spacing:0;text-transform:none;cursor:pointer;
  vertical-align:middle;transition:.14s
}
.tipbox{
  position:fixed;z-index:95;max-width:min(300px,calc(100vw - 20px));
  padding:10px 13px;border-radius:12px;
  font-family:var(--ff);font-size:12.8px;font-weight:400;font-style:normal;
  line-height:1.5;letter-spacing:normal;text-transform:none;text-align:left;
  color:var(--ink);background:rgba(11,28,36,.98);border:1px solid var(--stroke2);
  white-space:pre-line;   /* dłuższe wyjaśnienia dzielimy na akapity przez \n\n */
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-4px);transition:.14s;pointer-events:none
}
.tipbox.on{opacity:1;transform:none}
/* menu pod nickiem (`menuDymek()`) — dymek z przyciskami musi łapać kliknięcia */
.tipbox.tipmenu{pointer-events:auto;padding:4px;white-space:normal}
.tipmenu-btn{display:block;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:9px;background:none;
  color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;touch-action:manipulation}
button.player{cursor:pointer}
/* F-173: legenda kompasu pod opisem w dymku — mniejsza i jaśniejsza, znak w kolorze z rysunku */
.tip-legend{margin-top:8px;padding-top:7px;border-top:1px solid var(--stroke2);font-size:11.5px;line-height:1.4;color:var(--muted);white-space:normal}
.tip-legend-title{font-weight:600;margin-bottom:3px}
.tip-legend-row{display:flex;gap:7px;align-items:baseline;margin-top:2px}
.tip-legend-sign{flex:0 0 14px;text-align:center;font-weight:700}

/* ---------- pinezka "skąd jest pogoda" ---------- */
.placepin{
  display:inline-flex;align-items:center;gap:2px;padding:1px 8px;margin:0 1px;
  border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);
  color:var(--ink);font:inherit;cursor:pointer;transition:.14s;vertical-align:baseline
}
.countrymap svg{
  width:100%;height:auto;display:block;border-radius:12px;
  background:#08191f;border:1px solid var(--stroke)
}
a.btn{color:inherit;text-decoration:none}

/* ---------- modal ---------- */
/* F-357: przerwa techniczna — nad wszystkim, bez zamykania */
.break-screen{
  position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:16px;overflow-y:auto;
  background:radial-gradient(circle at 70% 30%,#24414f,#071319 70%);animation:fade .3s
}
.break-box{width:100%;max-width:460px;min-width:0;text-align:center;display:grid;gap:10px;justify-items:center}
.break-scene{width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--stroke2);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.break-scene svg{display:block;width:100%;height:auto}
.break-box h2{margin:8px 0 0;font-size:1.35rem;overflow-wrap:anywhere}
.break-box p{margin:0;max-width:40ch}
.break-when{font-weight:600;color:#f6d39a}
.modal-bg{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;
  background:rgba(3,10,14,.72);backdrop-filter:blur(6px);animation:fade .2s
}
.modal{
  position:relative;width:min(560px,100%);max-height:88vh;max-height:88dvh;overflow-y:auto;border-radius:20px;
  background:linear-gradient(160deg,#0e2531,#0a1a22);border:1px solid var(--stroke2);
  box-shadow:0 30px 80px rgba(0,0,0,.6);--mpt:22px;--mpx:22px;--mpb:22px;padding:var(--mpt) var(--mpx) var(--mpb)
}
.modal.wide{width:min(940px,100%)}
/* Przyciski okna przyklejone do dołu: przy długiej treści (raport „Zaglądasz do wędek”) „Łowię dalej” leżało pod
   przewijaniem. `sticky` liczy się od krawędzi treści, nie okna — stąd ujemne `bottom` o dolny padding okna (`--mpb`),
   a rząd oddaje ten padding u siebie, żeby treść nie prześwitywała pod przyciskami. */
.modal > .actions{
  position:sticky;bottom:calc(-1 * var(--mpb));z-index:1;margin-bottom:calc(-1 * var(--mpb));
  padding:12px 0 var(--mpb);background:linear-gradient(rgba(10,26,34,0),#0a1a22 12px)
}
.modal h2{font-size:22px;margin-bottom:6px}
/* Tytuł z `modal()` nie wchodzi pod ✕ (`.close`, ~37 px od prawej krawędzi treści) — długi zawijał się pod przycisk (F-186). */
.modal > h2:first-child{padding-right:44px}
.modal .close{position:absolute;top:14px;right:16px}
/* ✕ schowane, gdy okno ma przyciski na dole (`modal()`) — zostaje w drzewie dla Esc i „wstecz”; tytuł bierze całą szerokość */
.modal .close[hidden]{display:none}
.modal.no-x > h2:first-child{padding-right:0}
/* schemat zestawu feederowego (F-083): rysunek na całą szerokość okna, opisy numerków pod nim */
.diagram{margin:10px 0 4px}
.diagram svg{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--stroke)}
.diagram-desc{margin:10px 0 0;padding-left:22px}
.diagram-desc li{margin:4px 0}
.catchcard{text-align:center}
.catchcard canvas{width:100%;max-width:420px;height:auto;display:block;margin:6px auto 12px}
.catchcard .name{font-size:26px;font-weight:700}
.catchcard .latin{font-style:italic;color:var(--dim);font-size:13px;margin-bottom:12px}
.catchcard .reward{margin:10px auto 0;font-size:14px}   /* „Za tę rybę”: żetony i splendor (F-125) */
.catchcard .big{font-size:38px;font-weight:800;background:linear-gradient(100deg,var(--accent),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.badgeline{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
/* F-174: karta połowu „B” — zdjęcie przy każdej rybie, waga w małej plakietce w rogu (nie zasłania zdjęcia), wyróżnienia
   jedno pod drugim, pasek klasy wagowej, siatka 2×2, ciekawostka zwinięta; przyciski decyzji przyklejone (`.modal > .actions`) */
.catchcard.cb{text-align:left;display:flex;flex-direction:column;gap:12px}
.cb-photo{position:relative}
.catchcard.cb .cb-photo canvas{width:100%;max-width:none;height:auto;display:block;margin:0;border-radius:14px}
.cb-top{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:5px 11px;border-radius:12px;
  background:rgba(4,14,19,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cb-weight{font-size:22px;font-weight:700;line-height:1.15;color:#b8e6a0}
.cb-name{font-size:14.5px;font-weight:600}
.cb-cm{color:var(--muted);font-weight:400}
.cb-badges{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cb-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid var(--stroke)}
.cb-badge.golden{background:rgba(240,163,60,.16);border-color:rgba(240,163,60,.45);color:#ffd27a}
.cb-dot{width:11px;height:11px;border-radius:50%;flex:none}
.cb-note{background:rgba(240,163,60,.1);border:1px solid rgba(240,163,60,.4);border-radius:14px;padding:11px 13px;font-size:14px;color:#f3e2b8;line-height:1.4}
.cb-note-extra{color:#d8c697;font-size:13px;margin-top:4px}
.cb-tip{background:rgba(87,199,181,.1);border:1px solid rgba(87,199,181,.35);border-radius:14px;padding:11px 13px;font-size:14px;line-height:1.4}
.cb-medal-desc{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-bottom:6px}
.cb-track{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cb-track i{display:block;height:100%;border-radius:99px}
.cb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cb-cell{background:rgba(255,255,255,.05);border-radius:12px;padding:8px 11px;min-width:0}
.cb-label{font-size:12px;color:var(--muted)}
.cb-value{font-size:14.5px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.cb-value .baitic{vertical-align:-3px}
.catchcard.cb .reward{margin:0}
.cb-species summary{cursor:pointer;color:var(--muted);font-size:14px;min-height:36px;display:flex;align-items:center;gap:6px;list-style:none}
.cb-species summary::-webkit-details-marker{display:none}
.cb-species summary::after{content:'▾';font-size:11px;transition:transform .15s}
.cb-species[open] summary::after{transform:rotate(180deg)}
.cb-species .latin{margin:2px 0 0}
.cb-species p{font-size:13.5px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.modal.card-b > .actions{flex-wrap:nowrap}
.modal.card-b > .actions .btn{flex:1 1 0;min-width:0;min-height:50px;justify-content:center;white-space:nowrap}
.modal.card-b > .actions .cb-share{flex:0 0 50px;width:50px;padding:0}
.badge{padding:5px 11px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.08);border:1px solid var(--stroke)}
.badge.gold{background:linear-gradient(135deg,rgba(240,163,60,.28),rgba(226,114,91,.2));border-color:rgba(240,163,60,.5);color:#ffd9a3;font-weight:600}
.reportlist{display:flex;flex-direction:column;gap:7px;margin:12px 0;text-align:left}
.reportlist div{padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:13.5px;border-left:3px solid var(--stroke2)}
.reportlist div.good{border-left-color:var(--good)}
.reportlist div.bad{border-left-color:var(--danger)}
.reportlist div.hot{border-left-color:var(--amber)}

/* ---------- powrót nad wodę, ryba, która uciekła, wyzwania (F-016) ---------- */
.report-hero{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px;text-align:left}
.report-hero > div{border-radius:12px;padding:11px 13px}
.rh-fish{display:flex;align-items:center;gap:12px;background:rgba(87,199,181,.12);border:1px solid rgba(87,199,181,.35)}
.rh-fish canvas{flex:0 0 auto;border-radius:8px;background:rgba(255,255,255,.05)}
.rh-fish b,.rh-pending b,.rh-empty b{font-size:16px}
.rh-pending{display:flex;align-items:center;gap:12px;background:rgba(240,163,60,.14);border:1px solid rgba(240,163,60,.5)}
.rh-ic{font-size:30px;line-height:1;animation:rh-shake .9s ease-in-out infinite}
.rh-empty{background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
/* F-176: raport po powrocie — karta główna z rysunkiem, siatka 2×2 (`.cb-grid`), rady i „Jak działa” jak na karcie połowu */
.report{display:flex;flex-direction:column;gap:12px;text-align:left}
.report .report-hero{margin:0}
.rh-empty,.rh-pending{display:flex;align-items:center;gap:12px}
.rh-empty .baitic,.rh-pending .baitic{flex:none}
.report .reportlist{margin:0}
.cb-value.wrong{color:#f08a80}
/* F-176: belka powrotu na scenie, gdy ryba czeka — zamiast okna, żeby nie zasłaniać holu (w `.hud-top`, nowy rząd) */
/* B-133: zwarta — nie ma zasłaniać sceny, nad którą trwa hol; szczegóły są w „Raport ›” */
.return-bar{flex:1 0 100%;pointer-events:auto;display:flex;flex-direction:column;gap:4px;padding:6px 10px;border-radius:12px;
  background:rgba(8,24,31,.88);border:1px solid rgba(240,163,60,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* F-153 krok 3, D-077: pauza połowu bez klucza serwera — belka w `.hud-top` (nowy rząd, góra kadru) i przygaszona scena: nikt nie czeka
   na branie, które nie przyjdzie. `[hidden]` jawnie — `display:flex` klasy przebiłby domyślne schowanie */
.pause-bar{flex:1 0 100%;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:12px;line-height:1.3;
  background:rgba(8,24,31,.9);border:1px solid rgba(240,163,60,.7);pointer-events:auto}
/* B-235: „Spróbuj teraz” — `.hud-top` nie łapie kliknięć, belka tak (`pointer-events:auto` wyżej) */
.pause-bar .btn{align-self:flex-start;margin-top:6px;min-height:40px;padding:6px 14px;font-size:14px}
.pause-bar[hidden]{display:none}
.pause-bar b{color:#ffd27a;font-size:16px}
.pause-bar .small{color:#e6d3a6;font-size:13px}
.stage.paused #scene{filter:saturate(.45) brightness(.7)}
.rb-row{display:flex;align-items:center;gap:8px;line-height:1.25}
.rb-row b{color:#ffd27a;font-size:14px}
.rb-row .small{color:#e6d3a6;font-size:12px}
.rb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.1);padding-top:2px;font-size:12px;color:#c6dbe2}
.rb-foot .linkbtn{min-height:28px;white-space:nowrap}
.reveal-first{animation:fadeup .45s ease-out both}
.reveal > div{animation:fadeup .4s ease-out both}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}}
@keyframes rh-shake{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@media(prefers-reduced-motion:reduce){ .reveal-first,.reveal > div,.rh-ic{animation:none} }
.challenges .challenge{padding:9px 0;border-top:1px solid var(--stroke)}
.challenges .challenge:first-of-type{border-top:0}
.challenges .challenge-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
.challenges .challenge b{display:block;font-size:14px}
.challenges .challenge.done b{color:var(--good)}
.challenges .challenge .bar{margin-top:7px}
.challenges .hint{margin-top:4px}
/* wiersz otwiera okno ze szczegółami i nagrodami (`klikalny()` w ui.js) */
.challenges .challenge.clickable{cursor:pointer;border-radius:8px;margin:0 -6px;padding-left:6px;padding-right:6px;touch-action:manipulation}
.challenges .challenge.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#screen-hub .challenges{margin-bottom:18px}

/* Sprawdzanie zapisu przy powrocie z tła (`holdScreen()` w ui.js): nieprzezroczysta zasłona nad grą i toastami, pod oknami —
   scena starego stanu nie może pokazać niczego, co po wczytaniu wygląda inaczej. */
body.checking::after{content:'';position:fixed;inset:0;z-index:85;background:var(--bg)}

/* ---------- toasts ---------- */
#toasts{position:fixed;bottom:calc(16px + var(--sa-b));left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  padding:10px 17px;border-radius:12px;font-size:13.5px;
  background:rgba(10,26,34,.94);border:1px solid var(--stroke2);box-shadow:var(--sh);
  animation:toastin .3s ease, toastout .3s ease 2.7s forwards;max-width:86vw;text-align:center
}
.toast.good{border-color:rgba(123,216,143,.5)}
.toast.bad{border-color:rgba(226,96,90,.5)}
/* co słychać u znajomych (F-030) — dłużej na ekranie: `toast(…, 'friend', 5000)` */
.toast.friend{border-color:rgba(155,140,245,.55);animation:toastin .3s ease, toastout .3s ease 4.6s forwards}
/* zaproszenie na ryby (F-095) — z „🚗 Jedź”, więc klikalne i dłużej: `toast(…, 'friend zaproszenie', 12000)` */
.toast.invitation{pointer-events:auto;display:flex;align-items:center;gap:10px;animation:toastin .3s ease, toastout .3s ease 11.6s forwards}
.toast.invitation>span{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.toast.invitation .btn{padding:6px 14px;font-size:13px}
/* prezent od znajomego (F-242) — z „🎨 Pomaluj” i „🙏 Podziękuj”: `toast(…, 'friend prezent', 20000)` */
.toast.gift{pointer-events:auto;min-width:min(300px,90vw);animation:toastin .3s ease, toastout .3s ease 19.6s forwards}
.toast.gift>span{display:flex;flex-direction:column;align-items:center}
.toast.gift .row{display:flex;align-self:stretch;gap:6px;justify-content:center;flex-wrap:wrap}
.toast.gift .btn{padding:6px 14px;font-size:13px}
/* pasek „Jest nowa wersja gry" (skrypt w index.html) — zostaje, aż gracz kliknie; w trakcie brania i holu schowany */
.toast.new-version{animation:toastin .3s ease;pointer-events:auto;display:flex;align-items:center;gap:12px;border-color:rgba(123,216,143,.5)}
.toast.new-version .btn{padding:6px 14px;font-size:13px}
body.busy .toast.new-version{display:none}
/* powiadomienie od znajomych, które już wisiało, gdy ryba wzięła — znika; nowe czekają na koniec holu (`ui.js` `toast()`, B-085) */
body.busy .toast.friend{display:none}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}}
@keyframes toastout{to{opacity:0;transform:translateY(-8px)}}

.hint{font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:8px}
/* F-179: pasek stanu stanowiska pod przyciskami — tylko na telefonie (niżej), na komputerze to samo jest w bocznym panelu */
.statebar{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:center;width:100%;min-height:40px;
  padding:2px 4px;border:0;background:none;color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.sp-half{display:flex;flex-direction:column;gap:4px;min-width:0}
.sp-g{display:flex;justify-content:space-between;gap:6px;font-size:12.5px;white-space:nowrap}
.sp-label{color:var(--muted)}
.sp-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.sp-bar i{display:block;height:100%;background:var(--accent);transition:width .6s}
.sp-bars{display:flex;gap:3px}
.sp-bars .sp-bar{flex:1;min-width:0}
.statebar.sated .sp-half:last-child b{color:#f5a05e}
.statebar.sated .sp-half:last-child .sp-bar i{background:#f08a4c}
.friend-says{margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(120,200,180,.10);border:1px solid rgba(120,200,180,.35);font-size:14px;line-height:1.5}
.rules-asof{margin:0 0 10px;padding:10px 12px;border:1px solid rgba(255,200,90,.45);border-radius:10px;background:rgba(255,200,90,.08);font-size:13.5px;line-height:1.5}
.rules-asof a{color:#ffd27a}
.warnbox{background:rgba(226,96,90,.12);border:1px solid rgba(226,96,90,.35);border-radius:10px;padding:9px 12px;font-size:12.8px;color:#ffc9c6;margin-top:8px}
.okbox{background:rgba(123,216,143,.1);border:1px solid rgba(123,216,143,.3);border-radius:10px;padding:9px 12px;font-size:12.8px;color:#c4f0cf;margin-top:8px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- telefon ---------- */
@media(max-width:560px){
  /* ⚠️ z `--sa-*`: samo `8px 12px` gubiło pasek stanu — w grze z ekranu początkowego iPhone'a (`black-translucent`)
     menu wchodziło pod zegar i baterię (B-052) */
  .topbar{gap:8px;padding:calc(8px + var(--sa-t)) calc(12px + var(--sa-r)) 8px calc(12px + var(--sa-l))}
  .brand{font-size:15px}
  .brand .mark{width:30px;height:30px}   /* 441–560 px: z kontem pasek ma ~10 px zapasu */
  /* nazwa zawsze w dwóch liniach: ściśnięta z kontem łamała się sama, zostawiając przerwę po znaku i podnosząc pasek o 4 px;
     z dopiskiem to trzy linie — interlinia 1 i dopisek 9,5 px mieszczą się w wysokości przycisków paska (pomiar 2026-10-24) */
  .brand .brand-name{width:min-content;line-height:1}
  .brand-txt small{font-size:9.5px;line-height:1;margin-top:0}
  .chip{padding:5px 9px;font-size:12px}
  .chip.lv .small{display:none}
  .chip:not(.lv) span:last-child{display:none}
  .jbtn-lbl{display:none}
  .actionbar .btn{min-width:0;flex:1 1 46%}
  .bigbtn{font-size:16px;padding:15px 12px}
  .attrs{grid-template-columns:1fr}
  .water{grid-template-columns:72px minmax(0,1fr) auto;gap:10px;padding:7px 10px 7px 7px}
  .water .art{width:72px;height:60px}
  .water h3{font-size:15px}
  .water .species{font-size:12.5px}
  .water .wx{font-size:12px}
  .modal{--mpt:18px;--mpx:16px;--mpb:18px}
  .catchcard .big{font-size:32px}
  .pin .lbl{font-size:10px;padding:2px 6px}
  .pin .head,.pingroup .head{width:26px;height:26px}
  .pin .head svg{width:17px;height:17px}
}
/* Wąski telefon (≤ 400 px): pogoda + poziom + 💬 (F-047) + 📓 + ? nie mieściły się w pasku na ekranie łowiska
   (416 px przy 360 — już przed czatem wystawało 8 px). Chip poziomu dalej otwiera wyjaśnienie, znika tylko „i" i kropka przy logo. */
/* 440, nie 400: iPhone 16 Pro ma 402 px, a z 💬 i „i” w chipie poziomu pasek miał 421 — Safari
   pomniejszał wtedy całą stronę, a „?” wystawał za krawędź (zrzuty z iPhone'a, 2026-09-27) */
@media(max-width:440px){
  /* F-099: z dzwonkiem 🔔 przy 360 px chip pogody ściskał się o 7 px — odstęp 5 i przyciski 34 px */
  .topbar{gap:5px}
  .topbar .chip.lv .tipbtn{display:none}
  .topbar .iconbtn{min-width:34px;padding:0 7px}
  /* sama nazwa w dwóch liniach, bez znaku (właściciel 2026-10-06): znak przy 34 px na ciemnym pasku był nieczytelny,
     a obok nazwy z kontem przy 360 px nie ma miejsca (PULAPKI-UI.md) — znak zostaje na ikonie i w oknie powitalnym */
  .topbar .brand .mark{display:none}
}
/* F-099: z dzwonkiem przy 561 px strona przewijała się w bok (pogoda była ściśnięta o 18 px już przed nim) —
   nazwa stopnia w chipie splendoru (D-070) wraca od 651 px, podpis „Dziennik” przy 📓 od 721 px */
@media(max-width:650px){ .topbar .chip.lv .small{display:none} }
@media(max-width:720px){ .jbtn-lbl{display:none} }
/* F-125 etap 2: chip „Ty” z żetonami — od 781 px pełny („⭐ Stopień 686 · 12 345,1”); 621–780 bez nazwy stopnia i bez części
   ułamkowej; ≤ 620 sam splendor (saldo na kafelku ekranu głównego i w panelu). Bez konta nazwa stopnia jak dawniej, od 651 px.
   Pomiar w `PULAPKI-UI.md` (ekran łowiska, najgorszy przypadek): z saldem 481 px wystawało o 13, 561 px — o 22 (od 561 wraca
   nazwa łowiska w pogodzie), 651 px z nazwą stopnia — o 40 */
@media(max-width:780px){ .topbar .chip.you .token-frac, .topbar .chip.you.has-tokens .small{display:none} }
@media(max-width:620px){ .topbar .chip.you .you-tokens{display:none} }

/* ======================= DOTYK, TELEFON, TABLET ======================== */

/* Hover ma sens tylko przy prawdziwym kursorze — na dotyku stan :hover
   przykleja się po tapnięciu i przycisk wygląda na wciąż wciśnięty. */
@media(hover:hover) and (pointer:fine){
  .tipmenu-btn:hover{background:rgba(255,255,255,.08)}
  .iconbtn:hover{background:var(--panel2);border-color:var(--stroke2)}
  .btn:hover:not(:disabled){background:rgba(255,255,255,.14);transform:translateY(-1px)}
  .btn.primary:hover:not(:disabled){filter:brightness(1.08)}
  .water:hover{transform:translateY(-2px);border-color:var(--stroke2);box-shadow:var(--sh)}
  .water.soon:hover{transform:none;border-color:var(--stroke);box-shadow:none}
  button.chip:hover{background:var(--panel2);border-color:var(--stroke2)}
  .chatemoji button:hover{background:rgba(255,255,255,.09)}
  .chatreact button:hover{background:rgba(255,255,255,.09)}
  .pin:hover{transform:translate(-50%,-100%) scale(1.13);z-index:3}
  .ws-chip:hover,.ws-step:not(:disabled):hover,.ws-rod:hover,.ws-ss:hover{background:rgba(255,255,255,.09)}
  .placepin:hover{background:var(--panel2);border-color:var(--accent)}
  .tipbtn:hover{background:var(--accent);border-color:var(--accent);color:#03201c}
  .albtile:hover{background:var(--panel2);border-color:var(--stroke2)}
  .shop-card:not(.on):hover,.shop-cats button:not(.on):hover{background:var(--panel2);border-color:var(--stroke2)}
  .shop-viewbar button:not(.on):hover{color:var(--ink)}
  .hubtab:not(.on):hover,.hubkind button:not(.on):hover{background:rgba(255,255,255,.05);color:var(--ink)}
  .subtabs button:not(.on):hover,.helptabs button:not(.on):hover{background:rgba(255,255,255,.05);color:var(--ink)}
  .linkbtn:hover{text-decoration:underline}
  tr:hover td{background:rgba(255,255,255,.035)}
  .logrow:hover{background:rgba(255,255,255,.07);border-color:var(--stroke2)}
  .challenges .challenge.clickable:hover{background:rgba(255,255,255,.05)}
  .jprofile:hover{color:var(--ink)}
  body.focus-mode #screen-swim .deck.calm:hover{opacity:1}
}
/* zamiast hovera — natychmiastowa reakcja na palec */
@media(hover:none){
  .btn:active:not(:disabled){filter:brightness(1.14)}
  .ws-chip:active,.ws-step:active,.ws-rod:active,.tab:active,.iconbtn:active,.logrow:active{background:rgba(255,255,255,.13)}
  .water:active{border-color:var(--stroke2)}
  .challenges .challenge.clickable:active{background:rgba(255,255,255,.08)}
}

/* W grze klika się szybko — podwójne tapnięcie nie może powiększać strony.
   (.haul ma własne touch-action:none, bo tam ciągnie się palcem.) */
.btn,.iconbtn,.tab,.ws-chip,.ws-step,.ws-rod,.ws-ss,.pin,.water,.brand,.toggle,.placepin,.tipbtn{touch-action:manipulation}
.bigbtn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* B-200: przytrzymany HOL albo stuknięcie w „Zatnij” tuż po jego zniknięciu zaznaczało na Androidzie napisy obok (podpowiedź,
   wskaźniki holu, nazwę łowiska na scenie) — nad wodą nie ma czego kopiować */
#screen-swim .stage,#screen-swim .deck{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* główna akcja dostaje więcej miejsca w pasku (było jako style inline) */
.actionbar .btn.bigbtn{flex:3}
/* Branie: „Zatnij” duży, a cała scena przyjmuje zacięcie (`pointerdown` na `.stage` w game.js) — ramka mówi, że teraz
   stuknięcie w nią coś robi. `body.biting` stawia `renderActions()`. Podpowiedź w przycisku tylko na telefonie (niżej). */
.btn.strike{flex-direction:column;gap:3px;min-height:96px;font-size:22px;line-height:1.15;
  background:radial-gradient(120% 140% at 50% 0%,#ffd27a 0%,var(--amber) 42%,#b8640f 100%);
  border:1px solid rgba(255,226,160,.7);color:#2b1602;text-shadow:0 1px 0 rgba(255,236,190,.55);
  animation:zatnijPuls 1.1s ease-out infinite}
.strike-t{font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.btn.strike:active{filter:brightness(1.12)}
.strike-sub{display:none;font-size:12.5px;font-weight:500;opacity:.85;white-space:normal;text-shadow:none}
/* puls przez `box-shadow`, nie `transform` — skok rozmiaru przesuwałby pasek pod palcem (PULAPKI-UI, B-088) */
@keyframes zatnijPuls{
  0%{box-shadow:0 0 0 0 rgba(255,190,80,.6),0 6px 22px rgba(0,0,0,.35)}
  70%{box-shadow:0 0 0 14px rgba(255,190,80,0),0 6px 22px rgba(0,0,0,.35)}
  100%{box-shadow:0 0 0 0 rgba(255,190,80,0),0 6px 22px rgba(0,0,0,.35)}
}
body.biting .stage{cursor:pointer;touch-action:none}
body.biting .stage::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 3px rgba(240,170,60,.75);animation:ramkaBrania 1.1s ease-in-out infinite}
@keyframes ramkaBrania{50%{box-shadow:inset 0 0 0 3px rgba(240,170,60,.35),inset 0 0 26px rgba(240,170,60,.25)}}
@media(prefers-reduced-motion:reduce){.btn.strike,body.biting .stage::after{animation:none}}
/* Przycisk wędki: w tle pasek przynęty, który opróżnia się od prawej (`--remain` ustawia `setupRod()` co sekundę).
   Spokój — turkus, „kończy się" — bursztyn, goły haczyk — pełny przycisk główny z pulsem. Dwa wiersze: nazwa i stan. */
.btn.rod{position:relative;overflow:hidden;isolation:isolate;flex-direction:column;gap:1px;line-height:1.2;padding:8px 10px}
.rod-bar{position:absolute;inset:0 auto 0 0;z-index:-1;pointer-events:none;width:calc(var(--remain,0) * 100%);
  background:linear-gradient(0deg,rgba(87,199,181,.6) 0 3px,rgba(87,199,181,.13) 3px);transition:width .9s linear}
.rod-head{font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* F-181: brania wędki w nagłówku przycisku — skala (jak plakietka `.state-dots`) i liczba na godzinę */
.rod-bites{display:inline-flex;align-items:center;gap:5px;margin-right:8px;font-variant-numeric:tabular-nums}
.rod-status{font-weight:500;color:var(--muted)}
.btn.rod.ending .rod-status{color:var(--amber)}
.btn.rod.nibbling .rod-status{color:#ffd27a}
.rod-bites b{color:#ffd27a;font-size:13.5px}
.rod-dots{display:inline-flex;gap:2px}
.rod-dots i{width:6px;height:6px;border-radius:1.5px;background:rgba(255,255,255,.18)}
.rod-dots i.on{background:var(--amber)}
.btn.rod.primary .rod-bites b{color:#03201c}
.btn.rod.ending .rod-dots{display:none}
.rod-bait .baitic{margin-right:4px;vertical-align:-2px}
.rod-state{font-size:12px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.rod-groundbait{display:none;margin-left:5px;vertical-align:1px;padding:0 6px;border-radius:999px;font-size:10.5px;font-weight:600;line-height:1.5;
  color:var(--good);background:rgba(123,216,143,.14);border:1px solid rgba(123,216,143,.35)}
.btn.rod.refeed .rod-groundbait{display:inline-block}
.btn.rod.ending{border-color:rgba(240,163,60,.55)}
.btn.rod.ending .rod-bar{background:linear-gradient(0deg,rgba(240,163,60,.8) 0 3px,rgba(240,163,60,.16) 3px)}
.btn.rod.ending .rod-state{color:var(--amber)}
.btn.rod.primary .rod-bar{display:none}
.btn.rod.primary .rod-state{color:#03201c;opacity:.72}
.btn.rod.primary:not(:disabled){animation:wedka-puls 2.4s ease-in-out infinite}
@keyframes wedka-puls{50%{box-shadow:0 0 0 4px rgba(87,199,181,.3)}}
/* F-333 krok 3: przytrzymanie karty zwija wędkę — kreska u dołu wypełnia się od lewej przez `HOLD_MS` (0,6 s, `game.js`); w trakcie
   zwijania ta sama kreska ubywa z czasem zwijania (`--fold-ms`; przy przebudowie paska rusza z miejsca — ujemne `--fold-from`) */
.btn.rod::after{content:'';position:absolute;inset:auto 0 0 0;height:4px;pointer-events:none;background:var(--amber);
  transform:scaleX(0);transform-origin:left}
.btn.rod.holding::after{transform:scaleX(1);transition:transform .6s linear}
.btn.rod.reeling .rod-bar{display:none}
.btn.rod.reeling:disabled{opacity:.9}
.btn.rod.reeling::after{background:rgba(87,199,181,.9);animation:zwijanie var(--fold-ms,3s) linear var(--fold-from,0ms) forwards}
@keyframes zwijanie{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* świeżo po brani/holu: pasek przez chwilę nie przyjmuje stuknięć (`AFTER_URGENT_MS`) — i widać, że się zmienił */
.actionbar .btn.fresh{animation:fadein .6s ease}
@media(prefers-reduced-motion:reduce){
  .btn.rod.primary:not(:disabled),.actionbar .btn.fresh{animation:none}
  .rod-bar{transition:none}
}

/* Palec potrzebuje większego celu niż kursor. */
@media(pointer:coarse){
  .iconbtn{height:40px;min-width:40px;font-size:14px}
  .btn{padding:12px 18px}
  .btn.sm{padding:10px 14px;font-size:13.5px}
  .tab{padding:10px 16px}
  .toggle{min-height:40px}
  .tipbtn{width:20px;height:20px;font-size:12.5px}
  .pin .head,.pingroup .head{width:34px;height:34px}
  .pin .head i{font-size:16px}
  .pin .head svg{width:22px;height:22px}
  .log{max-height:200px}
  ::-webkit-scrollbar{width:0;height:0}
}

/* ------------------------------ telefon -------------------------------- */
@media(max-width:700px){
  /* Zakładki dziennika w siatce 4 × 2, ikona nad podpisem. Dawniej jeden przewijany rząd — ale z ośmiu
     zakładek widać było cztery i nic nie mówiło, że reszta jest za krawędzią. Dwa niskie rzędy
     kosztują ~50 px wysokości, za to każda zakładka jest na wierzchu. */
  /* F-178: niskie kafle, ikona obok podpisu — dwa rzędy po 40 px zamiast ~2 × 50. Najdłuższe podpisy („Statystyki”,
     „Ustawienia”) stoją w 3. i 4. kolumnie, więc te są szersze — przy równych ucinało je już na 390 px. */
  .jtabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.17fr) minmax(0,1.2fr);gap:5px}
  .jtabs .tab{justify-content:center;gap:3px;height:40px;padding:0 1px;font-size:12.5px;white-space:nowrap;min-width:0;overflow:hidden}
  .jt-ic{font-size:14px;flex:none}
  /* F-178: zwarty nagłówek dziennika — strzałka, tytuł, profil i krótki tryb w jednym wierszu, bez stażu */
  .jhead{flex-wrap:nowrap;align-items:center}
  .jback{width:44px;min-width:44px;height:44px;padding:0;font-size:20px}
  .jback-txt,.jprofile-since,.mode-long{display:none}
  .mode-short{display:inline}
  .jhead h2{margin:0}
  .jprofile-row{flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap}
  .jprofile-row .jprofile{margin-top:0}
  .jprofile-row .pill.mode{margin-top:0;padding:1px 9px;font-size:11.5px}
  /* album: dwa kafelki w rzędzie, ramka odmian przez całą szerokość (F-071) */
  .albgrid>.albtile{flex:0 0 calc(50% - 5px)}
  .albgrp{flex:1 1 100%}
  .albtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .albtiles .albtile{width:auto}
  .subtabs button{font-size:12.5px;padding:7px 4px}
  /* F-299: z krajami w planach przełącznik ma 5 przycisków — na telefonie w dwóch rzędach (3 + 2), nie ściśnięte w jednym */
  .hubcountry{flex-wrap:wrap}
  .hubcountry button{flex:1 1 30%}
  .logrow{grid-template-columns:62px 1fr auto;grid-template-areas:"img main when" "img where where";padding:8px 10px}
  .wrap,.wrap.wide{padding-top:14px}
  .maphead{gap:10px;margin-bottom:12px}
  .maphead h2{font-size:19px}
  .maphead .grow{flex:1 1 200px}
  .hero{gap:14px;margin-bottom:18px}
  .panel{padding:14px}
  .side .panel{padding:13px}

  /* Na małej mapie sześć podpisów zlewa się w plamę — nazwę pokazujemy
     tylko przy wybranej pinezce, resztę czyta się z ikony i gwiazdek. */
  .pin .lbl{display:none}
  .pin.sel .lbl{display:block;font-size:11px}
  .pin.sel .head{box-shadow:0 0 0 3px rgba(87,199,181,.32)}

  .tablewrap{-webkit-overflow-scrolling:touch}

  /* modal jako szuflada od dołu — bliżej kciuka niż środek ekranu */
  /* Bez `backdrop-filter`: pełnoekranowe rozmycie pod długim, przewijanym oknem część telefonów z Androidem
     rysuje jako paski śmieci na oknie („Jak grać”, B-066). Mocniejsze tło zastępuje rozmycie. */
  .modal-bg{padding:0;place-items:end stretch;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(3,10,14,.84)}
  .modal{
    width:100%;max-height:92vh;max-height:92dvh;border-radius:20px 20px 0 0;
    --mpt:20px;--mpx:16px;--mpb:calc(20px + var(--sa-b));
    animation:sheetin .26s ease
  }
  @keyframes sheetin{from{transform:translateY(26px);opacity:.5}}
  /* czat na telefonie do samej góry — pod paskiem stanu, stąd `--sa-t` */
  /* `--vvh` — widoczna wysokość z `visualViewport` (chat-ui.js): na iOS `100dvh` nie maleje przy klawiaturze */
  .modal.chatwin{height:100vh;height:var(--vvh,100dvh);max-height:100vh;max-height:var(--vvh,100dvh);border-radius:0;padding-top:calc(16px + var(--sa-t))}
  /* ✕ razem z tytułem pod paskiem stanu — z samym `top:14px` leżał pod zegarem i baterią, a tła do stuknięcia
     okno na cały ekran nie zostawia: z czatu nie dało się wyjść (B-059) */
  .modal.chatwin .close{top:calc(14px + var(--sa-t))}
  /* „Jak grać” (F-119) tak samo jak czat: do samej góry, bez pasa tła nad oknem — długa treść, każdy wiersz się przyda */
  .modal.helpwin{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;padding-top:calc(16px + var(--sa-t))}
  .modal.helpwin .close{top:calc(14px + var(--sa-t))}
  /* F-160: sklep w oknie — też na cały ekran: podgląd, kategorie i pasek zakupu potrzebują wysokości */
  .modal.shopwin{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;padding-top:calc(16px + var(--sa-t))}
  .modal.shopwin .close{top:calc(14px + var(--sa-t))}
}

/* --------- ekran łowienia: akcje zawsze pod kciukiem, nie pod scrollem ---------
   Branie trwa sekundę. Gdy pasek akcji zjeżdża z ekranu razem z treścią,
   na telefonie po prostu nie zdąży się zaciąć. */
@media(max-width:1000px){
  /* Animacja wejścia ekranu ma transform, a element z transformem staje się
     układem odniesienia dla position:fixed — pasek akcji odkleiłby się na chwilę
     od dołu okna. Na telefonie wchodzimy więc samym wygaszeniem. */
  #screen-swim.screen{animation:fadein .28s ease}
  #screen-swim .deck{
    position:fixed;left:0;right:0;bottom:0;z-index:36;margin-top:0;gap:9px;
    padding:10px calc(12px + var(--sa-r)) calc(10px + var(--sa-b)) calc(12px + var(--sa-l));
    background:linear-gradient(180deg,rgba(6,18,24,.78),rgba(4,12,17,.97));
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--stroke);box-shadow:0 -14px 34px rgba(0,0,0,.42)
  }
  #screen-swim .wrap{padding-bottom:calc(var(--deck-h,172px) + 20px)}
  #screen-swim .actionbar{gap:8px}
  #screen-swim .actionbar .btn{flex:1 1 calc(50% - 4px);min-width:0}
  #screen-swim .actionbar .btn.bigbtn{flex:1 1 100%}
  /* B-117: pierwszy rzut obok „Zarzuć drugą” — ten sam rząd co wędki po rzucie, scena nie skacze */
  #screen-swim .actionbar .btn.bigbtn.beside{flex:1 1 calc(50% - 4px)}
  /* B-117: pasek o stałej wysokości między stanami — przycisk jak wędka z plakietką „+ zanęta” (56 px), podpowiedź i pasek stanu
     w tym samym miejscu (trzy wiersze podpowiedzi). Każdy piksel różnicy zmienia rozmiar sceny (`PULAPKI-UI.md`). */
  #screen-swim .actionbar .btn{min-height:56px}
  #screen-swim .deck .hint,#screen-swim .deck .statebar{min-height:48px}
  #screen-swim .deck .hint{margin-top:0;font-size:11.8px;line-height:1.35;max-height:4.05em;overflow:hidden}
  /* F-179: pasek stanu (zanęta, najedzenie) zamiast podpowiedzi, gdy ta nie mówi nic pilnego */
  #screen-swim .deck.state-quiet .statebar{display:grid}
  #screen-swim .deck.state-quiet .hint{display:none}
  #screen-swim .fightpanel{gap:8px}
  #screen-swim .gauge .lbl{font-size:11.5px;margin-bottom:3px}
  #screen-swim .gauge .track{height:12px}
  #screen-swim .haul{padding:17px;font-size:18px}
  /* toast nie może chować się za paskiem akcji */
  #toasts{bottom:calc(14px + var(--sa-b) + var(--deck-h,0px))}
}

/* ------- ekran główny na telefonie: zakładki pod kciukiem (F-149) -------
   Ta sama pułapka co pasek akcji: wejście ekranu z `transform` odkleiłoby pasek od dołu — tylko wygaszenie.
   Wysokość paska do `--deck-h` wpisuje `goHub()`, stąd zapas na końcu listy i toasty nad paskiem. */
@media(max-width:700px){
  #screen-hub.screen{animation:fadein .28s ease}
  .hubnav{
    position:fixed;left:0;right:0;bottom:0;z-index:36;margin:0;gap:0;border:0;border-radius:0;
    border-top:1px solid var(--stroke);background:rgba(6,18,24,.97);box-shadow:0 -10px 28px rgba(0,0,0,.35);
    padding:3px calc(4px + var(--sa-r)) calc(3px + var(--sa-b)) calc(4px + var(--sa-l))
  }
  .hubtab{flex-direction:column;gap:3px;min-height:52px;padding:6px 2px 5px;font-size:11.5px;touch-action:manipulation}
  .hubtab.on{background:none;box-shadow:none;color:var(--accent)}
  .hubtab .ic{font-size:20px}
  .hubtab .hubbadge{position:absolute;top:3px;left:calc(50% + 6px)}
  #screen-hub .wrap{padding-bottom:calc(var(--deck-h,60px) + 20px)}
  /* F-160: sklep na telefonie — niższy podgląd pod paskiem gry, pasek zakupu nad zakładkami */
  .shop-stage{height:230px}
  .shop-cats{top:calc(var(--shop-top,calc(56px + var(--sa-t))) + 230px)}
  .shop.in-modal .shop-stage{top:calc(-1 * var(--mpt))}
  .shop.in-modal .shop-cats{top:calc(230px - var(--mpt))}
  #screen-hub .shop-bar{bottom:calc(var(--deck-h,60px) + 8px)}
  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .water .place,.water .pill.tag{display:none}
  .water .species{margin-bottom:2px}
}

/* ------- telefon położony poziomo: mało wysokości, dużo szerokości ------- */
@media(orientation:landscape) and (max-height:560px){
  .topbar{padding-top:calc(6px + var(--sa-t));padding-bottom:6px}
  .wrap,.wrap.wide{padding-top:10px}
  .maphead{margin-bottom:10px}
  .maphead h2{font-size:16px}
  #screen-swim .maphead .small{display:none}
  #scene{aspect-ratio:auto;height:min(46dvh,220px)}
  #screen-swim .deck .hint,#screen-swim .deck.state-quiet .statebar{display:none}
  #screen-swim .fightpanel{gap:6px}
  #screen-swim .gauge .lbl{font-size:11px;margin-bottom:2px}
  #screen-swim .gauge .track{height:10px}
  #screen-swim .haul{padding:13px;font-size:16px;letter-spacing:.04em}
  #screen-swim .bigbtn{font-size:15px;padding:12px}
  #screen-swim .actionbar .btn{padding:10px 12px}
  .modal{max-height:94vh;max-height:94dvh}
  /* Karta połowu (i ucieczki) w dwóch kolumnach: rysunek ryby na całą szerokość zjadał ~⅔ wysokości
     i „Do sadzyka” / „Wypuszczam” lądowały pod przewijaniem (B-070). Canvas zostaje niższy niż kolumna
     tekstu — gdyby był wyższy, siatka rozdzieliłaby nadmiar między wiersze i rozsunęła napisy. */
  .modal:has(.catchcard){width:min(860px,100%);--mpb:14px;padding:14px 18px var(--mpb)}
  .catchcard{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);column-gap:18px;align-items:start}
  .catchcard > *{grid-column:2}
  .catchcard > canvas{grid-column:1;grid-row:1 / span 12;align-self:center;margin:0;max-width:none;border-radius:12px}
  .catchcard.cb{display:grid;gap:10px 18px}
  .catchcard.cb > .cb-photo{grid-column:1;grid-row:1 / span 12;align-self:start}
  .catchcard .name{font-size:22px;padding:0 44px}
  .catchcard .latin{margin-bottom:6px}
  .catchcard .big{font-size:30px}
  .catchcard .badgeline{margin:8px 0;gap:6px}
  .catchcard .hint{font-size:12px}
  .modal:has(.catchcard) > .row{margin-top:10px !important}
}

/* ---------- ekran łowienia uproszczony (F-158) ----------
   Kolumna obok sceny ma trzy części (`.section`): „Teraz”, „Kronika”, „Zestaw”. Na komputerze stoją jedna pod drugą,
   na telefonie to szuflada z zakładkami. Nagłówek na scenie (`.header`) i plakietka stanu (`.statebtn`) — tylko telefon. */
.section{display:flex;flex-direction:column;gap:12px}
.header,.statebtn,.drawer-head,.drawer-scrim,.nav{display:none}
.exit{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.hud-chips{display:contents}
.hud-chip b{white-space:nowrap}

@media(max-width:700px){
  /* Scena od paska u góry do paska akcji — bez przewijania strony. `--top-h` i `--deck-h` mierzy `watchDeck()`. */
  #screen-swim .maphead{display:none}
  #screen-swim .wrap{padding:0}
  /* ⚠️ za `body:not(.focus-mode)`: `#screen-swim #scene` przebiłby pionowy kadr 3:4 trybu skupienia (`body.focus-mode #scene`) */
  body:not(.focus-mode) #screen-swim .stage{position:fixed;left:0;right:0;top:var(--top-h,56px);bottom:var(--deck-h,150px);z-index:1;
    border:0;border-radius:0;box-shadow:none}
  body:not(.focus-mode) #screen-swim #scene{width:100%;height:100%;aspect-ratio:auto}
  #screen-swim .bitepulse{border-radius:0}
  #screen-swim .header{display:flex;position:absolute;top:8px;left:calc(8px + var(--sa-l));right:calc(8px + var(--sa-r));
    z-index:3;align-items:center;gap:8px}
  #screen-swim .header .iconbtn{min-width:40px;height:40px;font-size:18px;flex:none;
    background:rgba(4,14,19,.62);border-color:rgba(255,255,255,.16)}
  .header-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.75)}
  .header-txt b,.header-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-txt b{font-size:15px;font-weight:600}
  .header-txt span{font-size:12px;color:#c6dbe2}
  #screen-swim .hud-top{top:58px;left:calc(10px + var(--sa-l));right:calc(62px + var(--sa-r))}
  #screen-swim .compass{top:58px;right:calc(10px + var(--sa-r))}
  body:not(.focus-mode) #screen-swim .hud-weather,
  body:not(.focus-mode) #screen-swim .focusbtn{display:none}
  #screen-swim .statebtn{display:inline-flex;align-items:center;gap:7px;pointer-events:auto;cursor:pointer;
    padding:6px 11px;border-radius:999px;font:inherit;font-size:12.5px;color:#c6dbe2;
    background:rgba(4,14,19,.62);border:1px solid rgba(255,255,255,.16);touch-action:manipulation}
  .statebtn b{color:var(--ink);font-weight:600}
  .state-dots{display:inline-flex;gap:2px}
  .state-dots i{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.18)}
  .state-dots i.on{background:var(--amber)}
  .state-window{white-space:nowrap}
  .state-chev{font-size:10px;opacity:.7}

  /* Pasek akcji: zacięcie i branie większe, hol w trzech rzędach (napór, odległość obok sił, HOL) */
  #screen-swim .actionbar .btn.strike{min-height:76px;font-size:21px}
  /* Branie: „Zatnij” zakrywa cały pasek — podpowiedź (idzie do przycisku) i zakładki (przy braniu i tak wyszarzone).
     Wysokość paska bez zmian (miejsce zostaje, `visibility`), więc scena nad nim nie skacze, a szczytówka jest odsłonięta. */
  body.biting:not(.focus-mode) #screen-swim .deck .hint,
  body.biting:not(.focus-mode) #screen-swim .nav{visibility:hidden}
  body.biting:not(.focus-mode) #screen-swim .actionbar .btn.strike{position:absolute;z-index:2;min-height:0;
    top:8px;left:calc(8px + var(--sa-l));right:calc(8px + var(--sa-r));bottom:calc(8px + var(--sa-b));
    font-size:26px;border-radius:16px;padding:10px 16px}
  body.biting:not(.focus-mode) #screen-swim .actionbar{min-height:76px}
  body.biting:not(.focus-mode) #screen-swim .strike-sub{display:block;max-width:34em}
  #screen-swim .fightpanel.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:8px}
  #screen-swim .fightpanel .gauge.tension,#screen-swim .fightpanel .haul{grid-column:1 / -1}

  /* Pasek na dole (zawsze widoczny): zakładki szuflady i wyjście znad wody. Przy braniu i w holu wyszarzony (`setupExit()`). */
  /* marginesy ujemne = `padding` paska akcji (blok ≤ 1000 px): pasek na całą szerokość, przyklejony do dołu */
  #screen-swim .nav{display:flex;margin:0 calc(-12px - var(--sa-r)) calc(-10px - var(--sa-b)) calc(-12px - var(--sa-l));
    padding:2px calc(4px + var(--sa-r)) calc(2px + var(--sa-b)) calc(4px + var(--sa-l));border-top:1px solid var(--stroke)}
  .nav button{flex:1 1 0;min-width:0;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border:0;background:none;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer;touch-action:manipulation;border-radius:10px}
  .nav .nav-ic{font-size:18px;line-height:1}
  .nav .nav-t{white-space:nowrap}
  .nav button.on{color:var(--accent);background:rgba(87,199,181,.1)}
  .nav button:disabled{opacity:.35;cursor:default}
  /* separator między zakładkami a wyjściem */
  .nav button[data-k="exit"]{border-left:1px solid var(--stroke);border-radius:0 10px 10px 0}

  /* Szuflada „Stanowisko” — nad paskiem akcji, który zostaje widoczny razem z zakładkami.
     ⚠️ Bez `transform` (także w animacji): w środku leży warsztat z `position:fixed`. Szuflada ma `z-index` pod paskiem akcji (36),
     a warsztat otwarty z niej musi zakryć cały ekran — stąd `body.ws-open` podnosi szufladę ponad pasek. */
  #screen-swim .side{display:none;position:fixed;left:0;right:0;bottom:var(--deck-h,150px);z-index:35;
    max-height:calc(100dvh - var(--deck-h,150px) - var(--top-h,56px) - 12px);overflow-y:auto;
    overscroll-behavior:contain;gap:12px;background:#0c1f28;border-top:1px solid var(--stroke);border-radius:20px 20px 0 0;
    padding:0 calc(12px + var(--sa-r)) 14px calc(12px + var(--sa-l));box-shadow:0 -14px 34px rgba(0,0,0,.45)}
  /* B-116: Safari na iOS przycina `.ws` (`fixed`, cały ekran) do przewijanej szuflady — „Gotowe” i stopka wypadały poza kadr */
  body.ws-open #screen-swim .side{z-index:70;overflow:visible}
  body.drawer #screen-swim .side{display:flex;animation:fadein .2s ease}
  body.drawer #screen-swim .drawer-scrim{display:block;position:fixed;inset:0;z-index:34;background:rgba(3,10,14,.6)}
  html:has(body.drawer){overflow:hidden}
  #screen-swim .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:2;
    margin:0 -2px;padding:10px 2px 8px;background:#0c1f28;font-size:16px}
  #screen-swim .side[data-tab="now"] .section:not(.section-now),
  #screen-swim .side[data-tab="rig"] .section:not(.section-rig),
  #screen-swim .side[data-tab="log"] .section:not(.section-log){display:none}
  #screen-swim .section-rig .ws-sum{margin-top:0}
  #screen-swim .section-log .log{max-height:none}
}

/* ---------- tryb skupienia (F-068): scena na cały ekran, na wierzchu tylko łowienie ----------
   Klasę `skupienie` na <body> stawia `focus()` w game.js. Scena jest `fixed` na całe okno, a pasek
   akcji leży na niej w prawym dolnym rogu — wędka wychodzi z lewego dolnego, więc szczytówki nie zasłania.
   ⚠️ Wszystko tu stoi za `body.focus-mode`, żeby przebić reguły telefonu (`#screen-swim .deck` z ≤ 1000 px). */
html:has(body.focus-mode),body.focus-mode{overflow:hidden}
body.focus-mode .topbar,
body.focus-mode #screen-swim .maphead,
body.focus-mode #screen-swim .side,
body.focus-mode #screen-swim .wsroot,
body.focus-mode #screen-swim .deck .hint,
body.focus-mode #screen-swim .deck .statebar,
body.focus-mode #screen-swim .no-focus{display:none}
body.focus-mode #screen-swim .stage{position:fixed;inset:0;z-index:30;border:0;border-radius:0;box-shadow:none}
body.focus-mode #scene{width:100%;height:100%;aspect-ratio:auto}
body.focus-mode #screen-swim .bitepulse{border-radius:0}
body.focus-mode #screen-swim .hud-top{top:calc(10px + var(--sa-t));left:calc(12px + var(--sa-l));right:calc(62px + var(--sa-r))}
body.focus-mode #screen-swim .focusbtn{top:calc(8px + var(--sa-t));right:calc(10px + var(--sa-r))}
body.focus-mode #screen-swim .compass{top:calc(56px + var(--sa-t));right:calc(10px + var(--sa-r))}
body.focus-mode #screen-swim .deck{
  position:fixed;z-index:36;margin:0;gap:8px;left:auto;
  right:calc(12px + var(--sa-r));bottom:calc(12px + var(--sa-b));
  width:min(380px,calc(100vw - 24px - var(--sa-l) - var(--sa-r)));
  padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.1);box-shadow:none;
  background:rgba(4,12,17,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity .5s ease
}
/* F-368: pora i licznik ryb (`hud-cicho`) nie wiszą nad wodą — pokazuje je stuknięcie w przygaszony pasek (`czuwa`), mysz nad nim
   albo klawiatura w nim; licznik ryb też chwilę po zamknięciu karty połowu (`swieci`). Pilne plakietki (ryba czeka, goły haczyk) zostają. */
body.focus-mode #screen-swim .hud-quiet{display:none}
body.focus-mode:has(#screen-swim .deck.watching) #screen-swim .hud-quiet,
body.focus-mode:has(#screen-swim .deck :focus-visible) #screen-swim .hud-quiet,
body.focus-mode #screen-swim .hud-quiet.lit{display:inline-flex}
@media(hover:hover){body.focus-mode:has(#screen-swim .deck:hover) #screen-swim .hud-quiet{display:inline-flex}}
/* nic pilnego — pasek przygasa; branie, kończąca się przynęta, goły haczyk i hol zdejmują klasę (`calmBar()`) */
body.focus-mode #screen-swim .deck.calm{opacity:.42}
body.focus-mode #screen-swim .deck.calm:focus-within,
body.focus-mode #screen-swim .deck.calm.watching{opacity:1}
body.focus-mode #screen-swim .actionbar{gap:8px}
body.focus-mode #screen-swim .actionbar .btn{flex:1 1 0;min-width:0}
body.focus-mode #screen-swim .actionbar .btn.bigbtn{flex:1 1 100%}
body.focus-mode #toasts{bottom:calc(14px + var(--sa-b) + var(--deck-h,0px))}
/* Pionowo scena rozciągnięta na całą wysokość to niebo i woda bez wędek (rysunek liczy się z W i H) —
   zostaje kadr 3:4 pod prośbą o obrót, wysoko — dół ekranu i tak zajmuje pasek akcji z holem. Obrót sam robi tylko Android (`focus.js`). */
.focus-rotate{display:none}
@media(orientation:portrait){
  body.focus-mode #screen-swim .stage{display:flex;flex-direction:column;align-items:center;padding-top:calc(96px + var(--sa-t))}
  body.focus-mode #scene{width:min(100%,75dvh);height:auto;aspect-ratio:3/4}
}
@media(orientation:portrait) and (pointer:coarse){
  body.focus-mode #screen-swim .focus-rotate{
    display:block;position:absolute;left:0;right:0;top:calc(64px + var(--sa-t));text-align:center;
    font-size:13px;color:var(--muted);pointer-events:none
  }
}

@keyframes fadein{from{opacity:0}}
/* F-178: zakładki dziennika na wąskim telefonie — mniejsze podpisy, a poniżej 340 px same podpisy, bez ikon */
@media(max-width:375px){
  .jtabs .tab{font-size:12px;gap:2px}
  .jt-ic{font-size:13px}
}
@media(max-width:340px){
  .jt-ic{display:none}
}