/* =========================================================================
   USTAWKA — style
   ========================================================================= */
:root {
  --tlo: #0b0e13;
  --tlo2: #11161f;
  --tlo3: #171d28;
  --linia: #232b39;
  --tekst: #e6edf3;
  --przygas: #8b949e;
  --ok: #3fb950;
  --zle: #f85149;
  --akcent: #e5a00d;
}

* { box-sizing: border-box; }
/* Własne reguły display (grid/flex) biją regułę przeglądarki dla [hidden],
   więc ukrywanie elementów z JS-a przestawało działać — stąd !important. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--tlo);
  color: var(--tekst);
  font: 14px/1.45 "Segoe UI", Roboto, system-ui, sans-serif;
  display: grid;
  /* nagłówek · banery · gra · stopka — wiersz banerów jest pusty (0 px),
     dopóki js/ui.js czegoś do niego nie wstawi */
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}
button {
  font: inherit; color: var(--tekst); background: var(--tlo3);
  border: 1px solid var(--linia); border-radius: 7px; padding: 7px 11px;
  cursor: pointer; transition: .12s;
}
button:hover { background: #1f2734; border-color: #3a4658; }
button.primary { background: var(--akcent); color: #1a1200; border-color: #b8810a; font-weight: 700; }
button.primary:hover { background: #f0b429; }
button.danger { border-color: #6a2b2b; color: #ff9b95; }
button.akt { background: #2a3346; border-color: #4a5b78; }
small { color: var(--przygas); font-weight: 400; }
b.ok, .ok { color: var(--ok); }
b.zle, .zle { color: var(--zle); }

/* ------------------------------------------------------------ ekran startu */
.startOverlay {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2231, #08090d 70%);
  padding: 32px 20px;
}
.startOverlay.ukryty { display: none; }
.startBox { max-width: 1100px; margin: 0 auto; }
.startBox h1 {
  /* clamp zamiast media query: na szerokim ekranie liczy się tak samo jak
     dawne stałe 58px/10px (patrz wyliczenie w raporcie fali B), na wąskim
     się kurczy — bez tego telefon oddala całą stronę, żeby zmieścić napis */
  font-size: clamp(28px, 9vw, 58px); letter-spacing: clamp(1px, 1.6vw, 10px);
  margin: 10px 0 6px;
  text-shadow: 0 0 30px rgba(229,160,13,.35);
}
.startBox h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: var(--przygas); margin: 26px 0 12px; }
.lead { max-width: 720px; color: #b6c0cc; }
.startInfo { display: flex; gap: 22px; margin: 18px 0; flex-wrap: wrap; }
.startInfo div { background: var(--tlo2); border: 1px solid var(--linia); border-radius: 8px; padding: 8px 14px; color: var(--przygas); }
.startInfo b { color: var(--tekst); font-size: 17px; }

.wyborEkipy { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.ekipaKarta {
  text-align: left; display: grid; gap: 3px; padding: 11px 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, var(--tlo2)), var(--tlo2));
  border-left: 4px solid var(--c);
}
.ekipaKarta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.ekipaHerb {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
  background: var(--c); color: #06080c; font-weight: 800; font-size: 11px;
}
.ekipaNazwa { font-weight: 700; font-size: 15px; }
.ekipaMiasto { color: var(--przygas); font-size: 12px; }
.ekipaSila { color: var(--akcent); letter-spacing: 2px; font-size: 12px; }
.ekipaRel { display: grid; gap: 2px; font-size: 11px; font-style: normal; margin-top: 3px; }
.ekipaRel .zg { color: #6fd18a; }
.ekipaRel .ks { color: #ff8b84; }
.filtr {
  width: 100%; max-width: 420px; margin: 0 0 12px; padding: 9px 12px;
  background: var(--tlo2); border: 1px solid var(--linia); border-radius: 8px;
  color: var(--tekst); font: inherit;
  /* 16px zawsze, niezależnie od trybu — poniżej tego iOS przybliża stronę
     przy wejściu w pole */
  font-size: 16px;
}
.filtr:focus { outline: none; border-color: var(--akcent); }

/* --- krok 2: teren domowy --- */
.wyborTerenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.terenKarta {
  text-align: left; display: grid; gap: 4px; padding: 13px 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, var(--tlo2)), var(--tlo2));
  border-left: 4px solid var(--c);
}
.terenKarta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.terenTyp { color: var(--przygas); font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; }
.terenNazwa { font-weight: 700; font-size: 16px; }
.terenStat { color: var(--przygas); font-size: 12px; }
#btnWrocEkipa { margin-top: 16px; }

.startStopka { margin: 26px 0 10px; }
.dysk { color: #6b7684; font-size: 12px; max-width: 720px; margin-top: 14px; }

/* ------------------------------------------------------------- górny pasek */
#top {
  display: flex; align-items: center; gap: 18px; padding: 8px 14px;
  background: var(--tlo2); border-bottom: 1px solid var(--linia);
}
#topInfo { display: flex; align-items: center; gap: 10px; }
.topNazwa { display: grid; line-height: 1.25; }
.topNazwa span { color: var(--przygas); font-size: 12px; }
#topStats { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.zasob { background: var(--tlo3); border: 1px solid var(--linia); border-radius: 7px; padding: 4px 10px; font-size: 13px; }
.zasob.gorace { border-color: #7a2b2b; background: #241417; }
#topBtns { display: flex; gap: 8px; align-items: center; }

/* ------------------------------------------------------------ pasek energii
   Zastępuje dawny zegar kolejki (docs/swiat.md §11) — słupek 0..20, tekst
   "⚡ 14/20", odliczanie do pełnej puli i przycisk odnowienia, w jednym
   ciasnym rzędzie w #topBtns. Odliczanie tyka co sekundę (js/ui.js —
   zbrojSekundnik), ale samo #pasekEnergii przerysowuje się tylko przy
   zmianie stanu z serwera. */
#pasekEnergii { display: flex; align-items: center; gap: 7px; }
#pasekEnergii .energiaBar {
  width: 74px; height: 8px; background: #0c1017; border-radius: 4px;
  overflow: hidden; border: 1px solid var(--linia); flex: none;
}
#pasekEnergii .energiaBar i { display: block; height: 100%; background: linear-gradient(90deg, #388bfd, #79c0ff); }
#pasekEnergii .energiaTxt { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#pasekEnergii .energiaOdliczanie { font-size: 11px; color: var(--przygas); white-space: nowrap; font-variant-numeric: tabular-nums; }
#pasekEnergii .btnEnergia { padding: 4px 10px; font-size: 12px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { background: var(--tlo3); border-color: var(--linia); }

/* Tarcza nowicjusza (§8) — ten sam wzorzec co .banerWidza, ale ton spokojny/
   ochronny (zielonkawy), nie alarmowy: to dobra wiadomość, nie ostrzeżenie. */
.banerTarcza {
  padding: 7px 12px; text-align: center; font-size: 13px;
  background: color-mix(in srgb, var(--ok) 16%, var(--tlo2));
  border-bottom: 1px solid var(--linia); color: #bdf2c9;
}

/* ------------------------------------------------------------- panel marszów */
.listaMarszow { display: grid; gap: 8px; }
.marszRow { border-bottom: 1px solid var(--linia); padding-bottom: 8px; }
.marszRow:last-child { border-bottom: none; padding-bottom: 0; }
.marszTop { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.marszTop b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marszRow .mini span:first-child { font-variant-numeric: tabular-nums; }

/* Widz: ekipa padła, ale sezon trwa — pasek ma być jednoznaczny, a nie
   alarmujący, bo tu już nic nie da się zrobić. Oba banery siedzą w #banery
   (osobny wiersz strony), więc nie potrzebują już `grid-column: 1 / -1`. */
.banerWidza {
  padding: 7px 12px; text-align: center; font-size: 13px;
  background: color-mix(in srgb, var(--zle) 14%, var(--tlo2));
  border-bottom: 1px solid var(--linia); color: #ffd7d4;
}

.herb {
  display: inline-grid; place-items: center; border-radius: 5px;
  background: var(--c); color: #06080c; font-weight: 800; flex: none;
}

/* -------------------------------------------------------------- układ gry */
#gra { display: grid; grid-template-columns: 258px 1fr 300px; overflow: hidden; }
/* tryb pełnej mapy — panele znikają, zostaje sama plansza */
body.pelnaMapa #gra { grid-template-columns: 1fr; }
body.pelnaMapa #panelLewy, body.pelnaMapa #panelPrawy, body.pelnaMapa #stopka { display: none; }
#panelLewy, #panelPrawy { overflow-y: auto; padding: 10px; background: var(--tlo2); }
#panelLewy { border-right: 1px solid var(--linia); }
#panelPrawy { border-left: 1px solid var(--linia); }
.karta { background: var(--tlo3); border: 1px solid var(--linia); border-radius: 10px; padding: 11px; margin-bottom: 10px; }
.karta h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--przygas); }
.podtytul { margin: -4px 0 8px; color: var(--przygas); font-size: 12px; }
.pusto { color: var(--przygas); font-size: 12px; margin: 6px 0 0; }

.stat { margin-bottom: 8px; }
.statTop { display: flex; justify-content: space-between; font-size: 12px; color: var(--przygas); }
.bar { height: 7px; background: #0c1017; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; }
.bar .morale { background: linear-gradient(90deg, #d29922, #3fb950); }
.bar .heat { background: linear-gradient(90deg, #f0883e, #f85149); }
.bar .forma { background: linear-gradient(90deg, #388bfd, #79c0ff); }
.bar .wplywy { background: linear-gradient(90deg, #8957e5, #d2a8ff); }

.mini { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--przygas); margin-top: 6px; }
.mini b { color: var(--tekst); }

.listaTerenow { display: grid; gap: 4px; max-height: 210px; overflow-y: auto; }
.terenRow { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 5px 8px; }
.tName { display: grid; line-height: 1.2; font-size: 13px; }
.tName small { font-size: 11px; }
.wpl { font-weight: 700; font-size: 13px; }

.szaliki { display: grid; gap: 4px; }
.szalikTag { font-size: 12px; border-left: 3px solid var(--c); padding-left: 7px; }

.ranking { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; gap: 3px; }
.ranking li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; counter-increment: r; }
.ranking li::before { content: counter(r) "."; color: var(--przygas); width: 16px; }
.ranking li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking li.ja { color: var(--akcent); font-weight: 700; }

/* ---------------------------------------------------------------- zakładki */
.zakladki { display: flex; gap: 4px; margin-bottom: 10px; }
.zakladki button { flex: 1; padding: 6px 4px; font-size: 12.5px; }
.zakladki button.akt { background: var(--akcent); color: #1a1200; border-color: #b8810a; font-weight: 700; }
.przyciski { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.przyciski.kolumna { flex-direction: column; }
.przyciski button { text-align: left; display: grid; }
.wlasciciel { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tag { font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; border: 1px solid; }
.tag.zgoda { color: #6fd18a; border-color: #2c5f3c; background: #10231a; }
.tag.kosa { color: #ff8b84; border-color: #6a2b2b; background: #241417; }
.tag.rozejm { color: #d2a8ff; border-color: #4b3a6b; background: #1a1526; }
.tag.neutral { color: var(--przygas); border-color: var(--linia); }

.listaEkip, .dyplomacja { display: grid; gap: 8px; }
.ekipaRow, .dypRow { border-bottom: 1px solid var(--linia); padding-bottom: 7px; }
.dypRow.niedostepne { opacity: .5; }
.ekipaTop { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.ekipaTop b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wart { font-weight: 700; font-size: 12px; }

.kodeks { margin: 0; font-size: 12.5px; }
.kodeks dt { font-weight: 700; color: var(--akcent); margin-top: 8px; }
.kodeks dd { margin: 2px 0 0; color: #b6c0cc; }

/* -------------------------------------------------------------------- mapa */
#mapaWrap { position: relative; background: #070a0f; overflow: hidden; touch-action: none; }
/* --- dotyk --- */
/* touch-action: none na obu, bo inaczej przeglądarka przechwytuje przeciąganie
   i szczypanie na własny scroll/pinch-zoom strony zamiast oddać gest naszym
   Pointer Events (patrz js/ui-map.js) */
#mapa {
  width: 100%; height: 100%; display: block; cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#mapa:active { cursor: grabbing; }
.krajPath { fill: #0d141e; stroke: none; }
.krajObrys { fill: none; stroke: #3b5068; stroke-width: 2.6; pointer-events: none; }

/* --- województwa --- */
.wojKomorka { cursor: pointer; transition: fill-opacity .12s; }
@media (hover: hover) {
  .wojKomorka:hover { fill-opacity: .78 !important; }
}
.wojKomorka.aktywne { cursor: default; }
/* grubość kreski ustawia ui-map.js (atrybut), żeby nie puchła przy zoomie */
.wojGranica { stroke: #4a5f7a; stroke-opacity: .8; pointer-events: none; fill: none; }
.wojGranica.aktywna { stroke: #6f8bab; stroke-opacity: 1; }
.wojLabel {
  fill: #cfd8e3; text-anchor: middle; letter-spacing: 1.2px;
  text-transform: uppercase; pointer-events: none;
  paint-order: stroke; stroke: #070a0f; stroke-linejoin: round;
}
.wojLabelMaly {
  fill: #93a1b1; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: #070a0f; stroke-linejoin: round;
}
.miastaKropki circle { pointer-events: none; }
.terenG.obcy { opacity: .75; }
.miastoLabel.obcy { fill: #6b7684; }

/* --- pasek nad mapą --- */
.mapaPasek {
  position: absolute; top: 10px; left: 12px; right: 12px; z-index: 5;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.mapaPasek button, .mapaPasek span {
  pointer-events: auto;
  background: rgba(9,12,17,.9); border: 1px solid var(--linia); border-radius: 8px;
  padding: 5px 11px; font-size: 12.5px; color: var(--przygas);
}
.mapaPasek span b { color: var(--tekst); }
.mapaPasek button { color: var(--tekst); cursor: pointer; }
@media (hover: hover) {
  .mapaPasek button:hover { background: #1f2734; }
}
.droga { stroke: #1d2836; stroke-width: 2; stroke-dasharray: 5 6; }
/* uwaga: rozmiary napisów na mapie ustawiamy atrybutami SVG (skalują się
   odwrotnie do zoomu) — CSS nie może ich nadpisywać */
.miastoLabel { fill: #99a4b2; text-anchor: middle; letter-spacing: .8px; text-transform: uppercase;
  pointer-events: none; paint-order: stroke; stroke: #070a0f; stroke-linejoin: round; }
.terenLabel { fill: #c3ccd6; text-anchor: middle;
  pointer-events: none; paint-order: stroke; stroke: #070a0f; stroke-linejoin: round; }
.terenIkona { fill: rgba(0,0,0,.55); text-anchor: middle; pointer-events: none; }
.terenG { cursor: pointer; }
.terenStrefa { cursor: pointer; }
@media (hover: hover) {
  .terenG:hover .terenHex { stroke: #fff; stroke-width: 2; }
}
.relLinia { fill: none; stroke-width: 2; opacity: .75; }
.relLinia.zgoda { stroke: #3fb950; stroke-dasharray: none; }
.relLinia.kosa { stroke: #f85149; stroke-dasharray: 6 5; }

.legenda {
  position: absolute; left: 12px; bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap;
  background: rgba(9,12,17,.85); border: 1px solid var(--linia); border-radius: 8px;
  padding: 6px 11px; font-size: 11px; color: var(--przygas);
}
.legenda span { display: flex; align-items: center; gap: 5px; }
.lg { width: 11px; height: 11px; display: inline-block; border-radius: 2px; }
.lgStadion { background: #e5a00d; }
.lgTeren { background: linear-gradient(90deg, rgba(88,166,255,.25), #58a6ff); }
.lgZgoda { background: #3fb950; }
.lgKosa { background: #f85149; }
.legenda .hint { color: #5b6572; }
/* dwie wersje tej samej podpowiedzi — pod mysz i pod dotyk (patrz index.html);
   domyślnie (komputer) liczy się wersja "mysz", telefon podmienia niżej */
.legenda .hintDotyk { display: none; }

/* --- przycisk "?" chowający legendę na telefonie: na komputerze go nie ma,
   legenda zostaje rozłożona jak zawsze --- */
.legendaBtn { display: none; }

/* ----------------------------------------------------------------- kronika */
#stopka { background: var(--tlo2); border-top: 1px solid var(--linia); padding: 6px 12px 8px; height: 150px; overflow: hidden; }
#stopka h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--przygas); }
#kronika { display: flex; flex-direction: column; height: 116px; }
.kronikaZakladki { display: flex; gap: 4px; margin-bottom: 4px; flex: none; }
.kronikaZakladki button { flex: none; padding: 3px 9px; font-size: 11.5px; }
.kronikaZakladki button small { color: inherit; opacity: .75; margin-left: 3px; }
.kronikaLista { flex: 1; overflow-y: auto; font-size: 12.5px; display: grid; gap: 2px; align-content: start; }
.wpis { padding: 2px 6px; border-left: 3px solid var(--linia); background: #0e131b; border-radius: 0 5px 5px 0; }
.wpis .tura { color: #5b6572; margin-right: 7px; font-size: 11px; }
.wpis.dobre { border-left-color: var(--ok); }
.wpis.zle { border-left-color: var(--zle); }
.wpis.kosa { border-left-color: #ff8b84; background: #170e12; }
.wpis.klikalny { cursor: pointer; }
.wpis.klikalny:hover { background: #161d29; }

/* --------------------------------------------------------------- meldunki */
#btnMeldunki { position: relative; }
#btnMeldunki .licznik {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: var(--zle); color: #fff; font-size: 10px; font-weight: 700; margin-left: 2px;
}
#btnMeldunki.pilne { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent) inset; }
.listaMeldunkow { display: grid; gap: 8px; }
.meldunekRow { border-left: 3px solid var(--linia); background: var(--tlo3); border-radius: 0 8px 8px 0; padding: 8px 10px; }
.meldunekRow p { margin: 3px 0 0; }
.meldunekRow.meldunek-najazd, .meldunekRow.meldunek-wrzuty, .meldunekRow.meldunek-przejecie { border-left-color: var(--zle); }
.meldunekRow.meldunek-ustawka { border-left-color: var(--akcent); }
.meldunekRow.meldunek-oferta { border-left-color: #6fd18a; }
.meldunekRow .przyciski { margin-top: 8px; }

/* ------------------------------------------------------------------ modale */
/* z-index nad arkuszami telefonu (do 90) — akcje wywoływane z wnętrza
   arkusza "Teren" (np. Najazd) muszą otwierać modal ponad nim, nie pod nim */
.modalBack { position: fixed; inset: 0; background: rgba(4,6,10,.72); display: grid; place-items: center; z-index: 95; padding: 20px; }
.modal { width: min(560px, 100%); max-height: 86vh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--tlo2); border: 1px solid var(--linia); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal header { padding: 12px 16px; border-bottom: 1px solid var(--linia); font-weight: 700; letter-spacing: .5px; }
.modalBody { padding: 14px 16px; overflow-y: auto; }
.modal footer { padding: 11px 16px; border-top: 1px solid var(--linia); display: flex; gap: 8px; justify-content: flex-end; }
.duzy { font-size: 15px; font-weight: 600; margin-top: 0; }
.lista { margin: 8px 0 0; padding-left: 18px; color: #b6c0cc; }
.lista li { margin-bottom: 4px; }
.ostrzezenie { background: #241417; border: 1px solid #6a2b2b; border-radius: 7px; padding: 7px 10px; font-size: 12.5px; color: #ffb3ad; }
.pole, .suwak { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--przygas); }
.pole select { padding: 7px; background: var(--tlo3); color: var(--tekst); border: 1px solid var(--linia); border-radius: 7px; }
.suwak input { width: 100%; accent-color: var(--akcent); }
.suwak b { color: var(--tekst); }

@media (max-width: 1200px) {
  #gra { grid-template-columns: 240px 1fr 290px; }
}
/* Strefa 761–900px: JS-owa klasa body.telefon (próg 760px, patrz niżej)
   jeszcze nie złapała, więc to jest tylko siatka bezpieczeństwa — mapa
   dostaje gwarantowaną wysokość zamiast zjeżdżać do 0 (dawny błąd: sam
   "auto" wiersz kolapsował, bo SVG nie ma własnej wysokości). */
@media (max-width: 900px) {
  #gra { grid-template-columns: 1fr; grid-template-rows: auto minmax(320px, 55vh) auto; }
  #panelLewy, #panelPrawy { max-height: 40vh; }
}

/* =========================================================================
   TRYB TELEFONU — sterowany klasą body.telefon (js: ustawTrybEkranu() w
   main.js, próg window.innerWidth <= 760). Media queries tu są tylko
   dodatkowym zabezpieczeniem, nie głównym mechanizmem (matchMedia nie
   działa w jsdom, w którym chodzi tools/smoke.js).
   ========================================================================= */

/* --- viewport w jednostkach dvh (z zapasem vh dla starszych przeglądarek:
   silnik czyta obie deklaracje po kolei, wygrywa ostatnia zrozumiana) --- */
body.telefon {
  height: 100vh;
  height: 100dvh;
  grid-template-rows: auto 1fr auto;
}
body.telefon #top {
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-left: calc(10px + env(safe-area-inset-left));
  padding-right: calc(10px + env(safe-area-inset-right));
  gap: 8px; flex-wrap: nowrap;
}

/* pasek górny na telefonie: tylko herb+nazwa+tura+akcje, kasa, dzwonek, ☰ —
   topInfo dostaje min-width:0, żeby flex mógł go realnie ścisnąć/przyciąć
   zamiast rozpychać cały pasek poza ekran */
body.telefon #topInfo { min-width: 0; overflow: hidden; }
body.telefon #topInfo .topNazwa { min-width: 0; overflow: hidden; }
/* > (tylko bezpośrednie dzieci) — to jest naprawdę przyczyna dawnego łamania
   paska na trzy linie: bez ">" selektor łapał też <b> licznika akcji
   ZAGNIEŻDŻONY w .topNazwa span (patrz renderTop w ui.js), display:block go
   wyrywał z linii tekstu jako osobny blok, a resztę zdania spychał niżej */
body.telefon #topInfo .topNazwa > b, body.telefon #topInfo .topNazwa > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
body.telefon #topStats { flex: none; gap: 8px; }
body.telefon #topStats .zasob:not(.zasob-kasa) { display: none; }
body.telefon #topBtns { gap: 6px; }
body.telefon #top button { min-height: 44px; }
body.telefon #btnMeldunki .etykieta { display: none; }
/* Pasek energii z pełnym słupkiem i odliczaniem nie mieści się w ciasnym
   pasku górnym telefonu — tam samą liczbę i tak pokazuje #navEnergia w
   dolnej nawigacji (ten sam wzorzec co dawne #btnKoniec → "Kolejka ▶"). */
body.telefon #pasekEnergii { display: none; }

/* desktop: display:contents rozpłaszcza wrapper i menuRozwijane, więc
   btnUklady/btnReset/btnPelna/btnZapisz lądują jako zwykłe dzieci #topBtns —
   wygląda i działa jak przed falą B */
.menuWiecej, #menuRozwijane { display: contents; }
#btnMenu { display: none; }
body.telefon .menuWiecej { display: inline-flex; position: relative; }
body.telefon #btnMenu { display: inline-flex; }
body.telefon #menuRozwijane {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--tlo2); border: 1px solid var(--linia); border-radius: 10px;
  padding: 6px; z-index: 90; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  min-width: 180px;
}
body.telefon #menuRozwijane.otwarty { display: flex; flex-direction: column; gap: 4px; }
body.telefon #menuRozwijane button { width: 100%; min-height: 44px; justify-content: flex-start; }
/* etykiety w prawdziwym <span> w HTML (patrz index.html), nie w CSS ::after —
   ::after się rozjeżdża, gdy main.js podmienia textContent przycisku (tak jak
   robi to z btnUklady). Poza rozwijanym menu span jest niewidoczny — same ikony. */
.etykietaMenu { display: none; }
body.telefon #menuRozwijane .etykietaMenu { display: inline; }

/* --- układ gry: jedna kolumna, mapa zajmuje resztę ekranu ---
   Kolumna FLEX, nie grid: panele są tu arkuszami (position: fixed, niżej),
   więc jedynym normalnym dzieckiem #gra jest mapa i ma dostać całą wysokość.
   Banery stanu wyprowadziliśmy do #banery na poziomie strony — dopóki
   siedziały w środku, robiły z tego siatkę o dwóch wierszach `auto`, a takie
   wiersze dzielą wolne miejsce PO RÓWNO: jedno zdanie dostawało pół ekranu,
   a rozciągnięty baner łapał kliknięcia należące do mapy. */
body.telefon #gra { display: flex; flex-direction: column; }
body.telefon #mapaWrap { flex: 1 1 auto; min-height: 0; }

/* --- arkusze: panelLewy/panelPrawy/stopka nic nie zmieniają w tym, co
   renderują — tylko dostają inną pozycję i wjeżdżają z dołu na klasie
   .otwarty. Wysokość zależna od treści (height:auto + max-height), żeby
   krótki arkusz przylegał do dołu zamiast zostawiać pustkę pod sobą —
   #arkuszZamknij dostaje pozycję z JS (pozycjonujZamkniecie w main.js),
   bo przy zmiennej wysokości sztywny procent ekranu już się nie zgadza. --- */
body.telefon #panelLewy, body.telefon #panelPrawy, body.telefon #stopka {
  position: fixed; left: 0; right: 0; bottom: var(--wysNaw, 62px); top: auto;
  height: auto; max-height: 72dvh; min-height: 36dvh;
  border-radius: 16px 16px 0 0; border: 1px solid var(--linia); border-bottom: none;
  box-shadow: 0 -12px 40px rgba(0,0,0,.55);
  padding: 22px 12px 12px;
  transform: translateY(105%);
  transition: transform .22s ease;
  z-index: 82;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.telefon #panelLewy.otwarty, body.telefon #panelPrawy.otwarty, body.telefon #stopka.otwarty {
  transform: translateY(0);
}
body.telefon #panelLewy::before, body.telefon #panelPrawy::before, body.telefon #stopka::before {
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 2px; background: var(--linia);
}
body.telefon #stopka { max-height: 66dvh; }
/* max-height (nie 100%) — kronikaLista i tak przewija się sama w środku,
   to tylko górna granica dla całego arkusza kroniki */
body.telefon #kronika { max-height: 52dvh; height: auto; }

#arkuszTlo { display: none; }
body.telefon #arkuszTlo {
  display: block; position: fixed; inset: 0; background: rgba(4,6,10,.6);
  z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.telefon.arkuszOtwarty #arkuszTlo { opacity: 1; pointer-events: auto; }

#arkuszZamknij { display: none; }
body.telefon #arkuszZamknij {
  position: fixed; right: 12px; z-index: 83;
  width: 40px; height: 40px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; padding: 0;
  background: var(--tlo3);
}
/* bottom dokładny ustawia JS (pozycjonujZamkniecie w main.js) — arkusze mają
   teraz wysokość zależną od treści, więc sztywny procent ekranu by nie trafiał
   w krawędź; wartość niżej to tylko awaryjny fallback, zanim JS policzy realną */
body.telefon.arkuszOtwarty #arkuszZamknij { display: flex; bottom: calc(60dvh - 20px); }

/* --- dolny pasek nawigacji (tylko telefon) --- */
#navDolny { display: none; }
/* Widoczny dopiero po wejściu do gry: #start.ukryty pojawia się w wejdzDoGry()
   (main.js). Bez tego navDolny — jako grid item z własnym z-index — potrafi
   wyjść WYŻEJ niż startOverlay (z-index 60 < 84 tego paska) mimo że start
   wizualnie zakrywa cały ekran, i zasłania kartę wyboru ekipy/terenu. */
/* Arkusze rozgrywki są position:fixed, więc żyją własnym życiem niezależnie od
   nakładki startowej — zwinięta kronika wystawała spod ekranu logowania jak
   szuflada. Dopóki gracz nie wszedł do gry, chowamy je na amen. */
body.telefon #start:not(.ukryty) ~ #stopka,
body.telefon #start:not(.ukryty) ~ #gra > #panelLewy,
body.telefon #start:not(.ukryty) ~ #gra > #panelPrawy { display: none; }

body.telefon #start.ukryty ~ #navDolny {
  display: flex; align-items: stretch; gap: 4px;
  background: var(--tlo2); border-top: 1px solid var(--linia);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  z-index: 84;
}
/* Ekrany sprzed gry (konto, lobby, poczekalnia, wybór ekipy) też są dotykowe —
   dotąd reguła 44 px obowiązywała tylko w widoku rozgrywki, więc przyciski
   logowania wychodziły na 36 px i trudno było w nie trafić kciukiem. */
body.telefon #start button,
body.telefon #start input,
body.telefon #start select { min-height: 44px; }
body.telefon #start input,
body.telefon #start select { font-size: 16px; }   /* poniżej 16 px iOS przybliża stronę */

body.telefon #navDolny button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10.5px; min-height: 48px; padding: 4px 2px; border-radius: 9px;
}
body.telefon #navDolny button span { line-height: 1; }
body.telefon #navDolny button.akt { background: #2a3346; border-color: #4a5b78; }
/* #navEnergia pokazuje sam stan ("⚡ 14/20", js/ui.js renderEnergia) — nie
   otwiera zakładki jak reszta paska, więc dostaje akcent, żeby odróżnić
   "tu jest info i klik do odnowienia" od nawigacji po panelach. */
body.telefon #navDolny #navEnergia { color: var(--akcent); font-variant-numeric: tabular-nums; }

/* --- wybór dzielnicy z listy w panelLewy otwiera arkusz terenu (main.js) --- */

/* --- modale: pełna szerokość, dosunięte do dołu, stopka zawsze widoczna --- */
body.telefon .modalBack { align-items: flex-end; padding: 0; }
body.telefon .modal {
  width: 100%; max-width: 100%;
  max-height: 88vh; max-height: 88dvh;
  border-radius: 16px 16px 0 0;
}
body.telefon .modal footer { position: sticky; bottom: 0; background: var(--tlo2); flex-wrap: wrap; }
body.telefon .modal footer button { flex: 1 1 auto; min-height: 48px; }

/* --- cele dotykowe ≥44px i pola ≥16px w trybie telefonu --- */
body.telefon input, body.telefon select, body.telefon textarea { font-size: 16px; }
body.telefon .zakladki button { min-height: 44px; padding: 6px 4px; }
body.telefon .terenRow, body.telefon .ekipaRow, body.telefon .dypRow,
body.telefon .meldunekRow .przyciski button, body.telefon .przyciski button {
  min-height: 44px;
}
/* pasek nad mapą w jednej linii — treść (przycisk "← Kraj" i opis
   województwa) skraca renderPasekMapy() w js/ui.js na telefonie, tu tylko
   pilnujemy, żeby nic się nie łamało, gdyby jednak było za długie */
body.telefon .mapaPasek { flex-wrap: nowrap; }
body.telefon .mapaPasek button { min-height: 44px; padding: 10px 14px; white-space: nowrap; }
body.telefon .mapaPasek span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}

/* --- legenda mapy: na telefonie schowana za "?", rozwijana na stuknięcie
   (main.js przełącza .rozwinieta); podpowiedzi pod dotyk zamiast pod mysz --- */
body.telefon .hintMysz { display: none; }
body.telefon .hintDotyk { display: flex; }
body.telefon .legendaBtn {
  display: flex; position: absolute; left: 12px; bottom: 12px; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center;
  background: rgba(9,12,17,.9); border: 1px solid var(--linia); color: var(--tekst);
  font-weight: 700; font-size: 16px; padding: 0;
}
body.telefon .legenda {
  display: none; max-width: calc(100% - 24px);
}
body.telefon .legenda.rozwinieta {
  display: flex; bottom: 64px;
}
body.telefon #btnWrocEkipa { width: 100%; min-height: 44px; }
body.telefon .pole select { min-height: 44px; }
body.telefon input[type=range] {
  height: 44px; -webkit-appearance: none; appearance: none; background: transparent;
}
body.telefon input[type=range]::-webkit-slider-runnable-track {
  height: 6px; background: var(--linia); border-radius: 3px;
}
body.telefon input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--akcent); margin-top: -10px; cursor: pointer;
}
body.telefon input[type=range]::-moz-range-track { height: 6px; background: var(--linia); border-radius: 3px; }
body.telefon input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--akcent); border: none; }

/* --- ekran startowy na telefonie: jedna kolumna kart --- */
body.telefon .wyborEkipy, body.telefon .wyborTerenu { grid-template-columns: 1fr; }

/* ============================ PANEL ADMINA ============================
   Osobna strona (admin.html), więc `body` nie ma tu siatki gry — normalny
   przewijany dokument. Styl celowo oszczędny: to narzędzie obsługowe, ma
   być czytelne, nie efektowne. Zmienne kolorów te same co w grze. */
body.adminBody {
  display: block; overflow: auto; background: var(--tlo); color: var(--tekst);
  padding: 18px; font-size: 14px;
}
.adminPanel { max-width: 1200px; margin: 0 auto; }
.adminNaglowek {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linia); padding-bottom: 10px; margin-bottom: 16px;
}
.adminNaglowek h1 { font-size: 18px; letter-spacing: 3px; margin: 0; }
.adminNaglowek a { color: var(--przygas); }

.adminStan { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.adminKafel {
  background: var(--tlo2); border: 1px solid var(--linia); border-radius: 9px;
  padding: 9px 13px; min-width: 130px;
}
.adminKafel b { display: block; font-size: 19px; }
.adminKafel span { color: var(--przygas); font-size: 12px; }

/* Tabela w osobnym opakowaniu z własnym przewijaniem — na wąskim ekranie
   ma jechać w bok ona, a nie cała strona. */
/* Własna klasa na drobny szary tekst zamiast gry `.mini` — tamta jest
   `display: flex`, a flex na <td> wypina komórkę z układu tabeli tak samo
   jak na przyciskach niżej. Ta sama pułapka, dwa różne miejsca. */
.adminMini { font-size: 12px; color: var(--przygas); }

.adminTabelaOpakowanie { overflow-x: auto; }
.adminTabela { width: 100%; border-collapse: collapse; white-space: nowrap; }
.adminTabela th {
  text-align: left; font-weight: normal; color: var(--przygas);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 10px; border-bottom: 1px solid var(--linia);
}
.adminTabela td { padding: 8px 10px; border-bottom: 1px solid var(--linia); }
.adminTabela tr:hover td { background: var(--tlo2); }
/* Flex idzie na WEWNĘTRZNY div, nie na <td>. `display: flex` na komórce
   wyjmuje ją z układu tabeli — reszta wierszy przestaje trzymać kolumny i
   daty łamią się na dwie linijki pod cudzymi nagłówkami. Widać to wyłącznie
   na zrzucie: HTML jest poprawny, a każda asercja o treści komórek przechodzi. */
.adminAkcjeRzad { display: flex; gap: 5px; }
.adminAkcjeRzad button { padding: 4px 8px; font-size: 12px; }
.adminAkcjeRzad button[disabled] { opacity: .35; cursor: not-allowed; }