/* PROTOTYP — Ekspedycja, wygląd „Naukowiec” (oba tryby). Kolejność na stronie: ../wspolne/naukowiec.css → ten plik.
   Wzór układu: Grzybnia (polecenie i panel w lewej kolumnie, plansza po prawej, na telefonie jedno pod drugim).
   Kolory tylko z żetonów --n-*; barwy mapy (pasy wysokości, szlak, woda) są takie same w obu trybach, bo to „druk” mapy.
   Kontrast tekstów co najmniej 7:1 w obu trybach. */

:root {
  --e-szlak: #D7263D;          /* czerwony szlak (jak znakowanie w Tatrach) */
  --e-woda: #78B3E1;
  --e-poziomica: #54331C;      /* poziomice na mapie (brąz), też podpisy poziomic */
  --e-droga-a: #8B3FD9;
  --e-droga-b: #2F6FDB;
  --e-miarka: #FFD84D;
  --e-obrys-nad: #0A1620;      /* ciemny obrys i półka przycisków unoszących się nad terenem — ciemny w obu trybach (teren jest jasny) */
}

/* --- nagłówek ----------------------------------------------------------------------------------------------- */
#soundBtn .cisza, #soundBtn.wyciszony .fala { display: none; }
#soundBtn.wyciszony .cisza { display: inline; }
.top-prawo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.wyglad { display: flex; align-items: center; gap: 8px; }
.narzedzia { display: flex; gap: 8px; flex-wrap: wrap; }
.brand h1 em { color: var(--n-akcent); }

/* --- lewa kolumna: polecenie nad panelem, plansza po prawej na całą wysokość okna (jak Grzybnia) --------------------------- */
body { grid-template-rows: auto minmax(0, 1fr); }
.lewa { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; min-height: 0; }
.lewa > .polecenie { margin: 0; }
.lewa > .side { min-height: 0; }

/* rząd 1 polecenia: etykieta albo stan („Ups!” + krótkie zdanie) w tym samym miejscu (zasada 5, 06.11) */
.pol-stan { flex: 1 1 auto; align-self: stretch; min-width: 0; display: flex; align-items: center; }
.pol-stan.ups-jest .pol-lbl { display: none; }
.pol-ups { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 6px; color: var(--n-zle); font: 600 15.5px/1.35 var(--n-font); }
.pol-ups .ups {
  flex: none; padding: 3px 8px; border-radius: 6px; background: var(--n-zle); color: var(--n-na-zle);
  font: 700 12.5px/1.2 var(--n-mono); letter-spacing: .1em; text-transform: uppercase;
}
.pol-ups.dobrze { color: var(--n-tekst); }
.pol-ups.dobrze .ups { background: var(--n-ok); color: var(--n-na-ok); }

/* --- plansza ------------------------------------------------------------------------------------------------- */
.stage { position: relative; background: var(--n-tlo-2); }
.scena { position: absolute; inset: 0; overflow: hidden; }
.scena-plotno { position: absolute; inset: 0; display: block; touch-action: pan-y; opacity: 1; transition: opacity .9s ease; }
.stage.chwyta .scena-plotno { touch-action: none; }          /* linijka: palec musi móc ją obracać w każdą stronę */
html.n-blokada #stage .scena-plotno { touch-action: none; }  /* pełny widok na dotyku: palec obraca we wszystkie strony */
.stage:not(.gotowa) .scena-plotno, .stage:not(.gotowa) .scena-etykiety { opacity: 0; }
.stage:not(.gotowa) .ster, .stage:not(.gotowa) .widoki, .stage:not(.gotowa) .dol-sceny { visibility: hidden; }

.stage-gora-lewa { position: absolute; left: 14px; top: 14px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.stage-gora-lewa > .widoki { pointer-events: auto; }
.widoki button { min-height: 34px; padding: 6px 11px; }
.ster { position: absolute; top: 14px; right: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; }
.ster .ik-mniej, .ster [aria-pressed="true"] .ik-wiecej { display: none; }
.ster [aria-pressed="true"] .ik-mniej { display: inline; }
.n-ik-kw { min-width: 38px; min-height: 38px; justify-content: center; padding: 6px 0; }
.n-ik-kw svg.ik { width: 20px; height: 20px; stroke-width: 2.2; }

/* podpisy przypięte do miejsc w terenie: tekst nad „nóżką”, kropka w punkcie (nie przyciski — bez półki, nie łapią stuknięć) */
.scena-etykiety { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.etk { position: absolute; left: 0; top: 0; width: 0; height: 0; --noga: 34px; transition: opacity .2s; }
.etk-kropka { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1.5px #1D2A33; }
.etk-noga { position: absolute; left: -0.8px; bottom: 0; width: 1.6px; height: var(--noga); background: var(--n-tekst); }
.etk-tekst {
  position: absolute; bottom: var(--noga); left: 0; translate: -50% 0; padding: 5px 10px 6px; white-space: nowrap;
  border: 1px solid var(--n-linia-mocna); border-radius: 9px; background: var(--n-panel); color: var(--n-tekst);
  font: 700 12px/1.2 var(--n-mono); letter-spacing: .08em; text-transform: uppercase;
}
.etk-liczba { text-transform: none; letter-spacing: .02em; }   /* „2499 m n.p.m.”, nie „M N.P.M.” */
.etk-zasl { opacity: .35; }
.etk-szczyt .etk-tekst { color: var(--n-tekst); }
/* szczyt: czarny trójkąt jak znak szczytu w atlasie (zamiast białej kropki), w obu trybach ten sam — to „druk” mapy.
   Cienka biała obwódka (biały trójkąt pod spodem) odcina go od ciemnych brązów mapy i od skał w widoku „Teren” */
.etk-szczyt .etk-kropka { left: -8px; top: -12px; width: 16px; height: 14px; border-radius: 0; background: #FFFFFF; box-shadow: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.etk-szczyt .etk-kropka::before { content: ''; position: absolute; left: 2.6px; top: 3px; width: 10.8px; height: 9.5px; background: #000000; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.etk-a .etk-tekst { border-color: var(--e-droga-a); color: var(--n-tekst); box-shadow: inset 4px 0 0 var(--e-droga-a); padding-left: 13px; }
.etk-b .etk-tekst { border-color: var(--e-droga-b); color: var(--n-tekst); box-shadow: inset 4px 0 0 var(--e-droga-b); padding-left: 13px; }
.etk-pinezka .etk-tekst { border-color: var(--n-akcent); }
.etk-ok .etk-tekst { border-color: var(--n-ok); background: var(--n-ok-tlo); color: var(--n-tekst); }
.etk-zle .etk-tekst { border-color: var(--n-zle); background: var(--n-zle-tlo); color: var(--n-tekst); }
.etk-miarka .etk-tekst { border-color: #8A6A00; background: var(--e-miarka); color: #1A1400; }
.etk-miarka .etk-noga, .etk-miarka .etk-kropka { display: none; }
/* podpisy poziomic na mapie — jak na mapie w atlasie: liczba wzdłuż linii, w kolorze poziomic, z jasną obwódką */
.etk-poziomica {
  position: absolute; left: 0; top: 0; padding: 0 2px; color: var(--e-poziomica); font: 700 11.5px/1 var(--n-mono);
  text-shadow: 0 0 2px #FFFFFF, 0 0 2px #FFFFFF, 0 0 3px #FFFFFF; white-space: nowrap;
}

/* błąd 3D: jedno miejsce na planszy, tylko gdy coś się nie udało (zwykłe wczytywanie mówi polecenie) */
.blad-3d {
  position: absolute; left: 50%; top: 50%; z-index: 8; translate: -50% -50%; width: min(420px, calc(100% - 32px)); padding: 16px 18px;
  background: var(--n-panel); color: var(--n-tekst); border: 1px solid var(--n-zle); border-radius: var(--n-r); box-shadow: var(--n-cien);
  font: 600 16px/1.45 var(--n-font);
}

/* --- dół planszy: pola i przyciski zadania (pod kciukiem); unoszą się nad terenem, więc mają ciemny obrys i ciemną półkę ------- */
.dol-sceny {
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-end; gap: 10px; pointer-events: none;
}
.dol-sceny > * { pointer-events: auto; }
.dol-sceny.chwila > * { pointer-events: none; }   /* chwila po zmianie tacki: drugie kliknięcie dwukliku nie trafia w nowy przycisk */
.dol-sceny:empty { display: none; }
/* rogi tacki = rogi przycisków na tej samej planszy (lupy, „Pełny widok”, „Teren / Poziomice / Mapa”): żeton --n-r-sm z Design Systemu
   (Piotr 08.11 — elementy w tym samym divie muszą mieć spójny promień; wcześniej tacka miała --n-r jak plansza, potem wyliczone 5 px) */
.tacka {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; max-width: 100%; padding: 10px 12px;
  background: var(--n-panel); border: 1px solid var(--n-linia-mocna); border-radius: var(--n-r-sm); box-shadow: var(--n-cien);
}
/* przyciski na planszy (nad terenem): półka z Design Systemu — twardy cień 2 px w dół w kolorze --polka (Figma N/Przycisk główny,
   184:3753: #507999 pod wypełnionym przyciskiem) — a wokół niej ciemny obrys i ciemna półka, żeby przycisk odcinał się od jasnego
   terenu (Piotr 08.11: „ciemny outline jest dobry, ale oprócz tego drop-shadow jak w Figmie”). Kolejność warstw: półka na wierzchu,
   pod nią ciemny obrys i ciemna półka, na końcu poświata przy najechaniu (--halo, jak we wspólnej zasadzie). Puls zachęty pogrubia
   obrys i półki o --n-puls. Wciśnięty siada na półce: zostaje tylko ciemny obrys */
.dol-sceny .btn {
  box-shadow:
    0 2px 0 calc(var(--n-puls, 0) * 1px) var(--polka, var(--n-akcent-polka)),
    0 0 0 calc(2px + var(--n-puls, 0) * 1px) var(--e-obrys-nad),
    0 4px 0 calc(2px + var(--n-puls, 0) * 1px) var(--e-obrys-nad),
    0 0 0 calc(2px + var(--halo, 0px)) var(--n-poswiata);
}
.dol-sceny .btn:not(:disabled):active { box-shadow: 0 0 0 2px var(--e-obrys-nad) !important; }
.dol-sceny .btn:disabled { box-shadow: 0 0 0 2px var(--e-obrys-nad); }   /* nieaktywny = płaski (bez półki), jak w Design Systemie */
.btn svg.ik { width: 20px; height: 20px; stroke-width: 2.4; }
/* „Następny krok” (dalej w tym samym zadaniu, po pochwale) ma styl głównego przycisku Design Systemu (.btn: pełny niebieski) i puls
   zachęty, jak „Następny etap” w Grzybni (Piotr 08.11; wcześniej podbarwione tło — Piotr 07.11). Od „Dalej” różni go tylko strzałka „›” */
/* udana odpowiedź obok „Następny krok” zostaje czytelna: zablokowane pole i suwak nie szarzeją */
.odp input:disabled { opacity: 1; color: var(--n-tekst); -webkit-text-fill-color: var(--n-tekst); cursor: default; }
.suwak input[type="range"]:disabled { cursor: default; }

/* pole na liczbę: „… m”, „… cm”, „… km” — puste pokazuje „?” */
.odp { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1.2 var(--n-font); color: var(--n-tekst); }
.odp-lbl { color: var(--n-tekst-2); font: 700 12px/1.2 var(--n-mono); letter-spacing: .08em; text-transform: uppercase; }
.odp input {
  width: 6.2em; min-height: 42px; padding: 7px 10px; border: 1px solid var(--n-linia-mocna); border-radius: var(--n-r-sm);
  background: var(--n-panel-2); color: var(--n-tekst); font: 700 20px/1.1 var(--n-font); font-variant-numeric: tabular-nums; text-align: right;
}
.odp input::placeholder { color: var(--n-tekst-2); opacity: 1; }
.odp input:focus-visible { outline: 3px solid var(--n-akcent); outline-offset: 1px; }
.odp.zle input { border-color: var(--n-zle); background: var(--n-zle-tlo); }
.odp.dobrze input { border-color: var(--n-ok); background: var(--n-ok-tlo); }
.odp-jedn { font: 700 17px/1 var(--n-font); }

/* suwak poziomu wody */
.suwak { display: grid; grid-template-columns: auto minmax(150px, 280px) auto; align-items: center; gap: 10px 12px; }
.suwak-lbl { font: 700 12px/1.2 var(--n-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-tekst-2); }
.suwak input[type="range"] { width: 100%; height: 34px; margin: 0; accent-color: var(--n-akcent); cursor: pointer; }
.suwak-wart { min-width: 7.6em; font: 700 17px/1.2 var(--n-font); font-variant-numeric: tabular-nums; color: var(--n-tekst); text-align: right; }

/* wybór drogi A / B */
.drogi { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.droga { min-height: 44px; padding: 9px 16px; gap: 9px; font-size: 16px; }
.droga i { width: 22px; height: 6px; border-radius: 3px; background: var(--kol); }
.droga.zle { --obrys: var(--n-zle); background: var(--n-zle-tlo); }
.droga.dobrze { --obrys: var(--n-ok); background: var(--n-ok-tlo); }
.dol-sceny .droga { box-shadow: 0 0 0 1px var(--obrys), 0 2px 0 1px var(--polka, var(--obrys)), 0 0 0 3px rgba(5, 9, 14, .35); }

/* przekrój dwóch dróg (dowód po wyborze) */
.wykres { display: grid; gap: 6px; }
.wykres canvas { display: block; width: min(340px, 78vw); height: 140px; border: 1px solid var(--n-linia); border-radius: var(--n-r-sm); background: var(--n-panel-2); }
.wykres-podpis { font: 600 14px/1.35 var(--n-font); color: var(--n-tekst-2); max-width: 340px; }

/* liczniki wyprawy — płaskie (to nie przyciski), nazwy maszynowymi wersalikami, liczba zwykłym krojem */
.liczniki { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 0; }
.licznik { display: grid; gap: 3px; padding: 0 12px; min-width: 0; }
.licznik + .licznik { border-left: 1px solid var(--n-linia); }
.licznik span { font: 700 11px/1.25 var(--n-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n-tekst-2); white-space: nowrap; }
.licznik b { font: 700 18px/1.2 var(--n-font); font-variant-numeric: tabular-nums; color: var(--n-tekst); white-space: nowrap; }

/* --- panel: legenda i notatnik --------------------------------------------------------------------------------------- */
.panel-tyt { margin: 0 0 10px; font: 700 12.5px/1.3 var(--n-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--n-akcent); }
.legenda h3 { margin: 12px 0 7px; font: 700 15px/1.3 var(--n-font); }
/* skala barw jak pionowy pasek w atlasie: kolumna równych pasów (najwyżej u góry), obok liczby na granicach barw,
   nad nimi „m n.p.m.”, pod nimi (wyspa, błękity głębokości) „m p.p.m.”. 13–16 pasów: poziomo liczby by na siebie wchodziły */
.leg-pion { --pas: 15px; display: grid; grid-template-columns: 30px max-content; column-gap: 8px; justify-content: start; }
.leg-jedn { grid-column: 2; grid-row: 1; margin-bottom: 5px; font: 600 12px/1.2 var(--n-mono); color: var(--n-tekst-2); }
.leg-jedn-dol { grid-row: 3; margin: 5px 0 0; }
.leg-pasma {
  grid-column: 1; grid-row: 2; display: grid; grid-auto-flow: row; grid-auto-rows: minmax(0, 1fr);
  height: calc(var(--pasy, 13) * var(--pas)); border: 1px solid var(--n-linia-mocna); border-radius: 4px; overflow: hidden;
}
.leg-pasma i { display: block; }
/* pasa skali nie ma na tej mapie (np. zieleni w Tatrach): przygaszony, ale zostaje — skala jest jedna dla każdej mapy */
.leg-pasma i.brak { opacity: .3; }
.leg-pasma-podpisy { grid-column: 2; grid-row: 2; position: relative; min-width: 4ch; font: 600 12px/1 var(--n-mono); color: var(--n-tekst-2); }
.leg-pasma-podpisy span { position: absolute; left: 0; translate: 0 -50%; white-space: nowrap; }
.leg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leg-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.leg-lista li { display: flex; align-items: center; gap: 10px; font: 500 15.5px/1.35 var(--n-font); }
.leg-znak { flex: none; width: 30px; height: 14px; border-radius: 3px; }
.leg-poziomica { height: 0; border-top: 1.5px solid var(--e-poziomica); border-radius: 0; }
.leg-poziomica.gruba { border-top-width: 3px; }
:root[data-tryb="ciemny"] .leg-poziomica { border-top-color: #C9A27E; }   /* na ciemnym panelu jaśniejszy brąz (kontrast znaku ≥ 3:1) */
.leg-izobata { height: 0; border-top: 1.5px solid #1A4573; border-radius: 0; }   /* jak izobaty na mapie wyspy */
:root[data-tryb="ciemny"] .leg-izobata { border-top-color: #7FB2E5; }             /* na ciemnym panelu jaśniejszy błękit (kontrast znaku ≥ 3:1) */
.leg-jezioro { background: var(--e-woda); border: 1px solid #2E6E9E; }
.leg-szlak { height: 0; border-top: 4px solid var(--e-szlak); border-radius: 2px; box-shadow: 0 0 0 1.5px #FFFFFF; }
.leg-szczyt { width: 30px; height: 18px; fill: #000000; stroke: #FFFFFF; stroke-width: 2.6; stroke-linejoin: round; paint-order: stroke; }   /* jak na mapie: czarny z białą obwódką */
.leg-pietro { border: 1px solid var(--n-linia-mocna); }
.leg-skala { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--n-linia); border-radius: var(--n-r-sm); background: var(--n-panel-2); font: 600 15.5px/1.4 var(--n-font); }
.leg-skala b { font-family: var(--n-mono); }
/* blok legendy dla innego widoku: przygaszamy tylko znaki i paski, tekst zostaje czytelny (kontrast 7:1) */
.legenda [data-widoki].wygaszone :is(.leg-znak, .leg-pasma, .leg-pasma-podpisy, .leg-jedn) { opacity: .45; }
.legenda [data-widoki].wygaszone, .legenda [data-widoki].wygaszone h3 { color: var(--n-tekst-2); }
.notatnik { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--n-linia); }
.not-lista { margin: 0; padding: 0 0 0 22px; display: grid; gap: 8px; }
.not-lista li { font: 500 15.5px/1.45 var(--n-font); }
.not-lista li::marker { font: 700 13px var(--n-mono); color: var(--n-akcent); }
.not-pusty { margin: 0; font: 500 15px/1.45 var(--n-font); color: var(--n-tekst-2); }

/* --- okna wjeżdżają, treść pojawia się po wczytaniu (Do zamku, 06.11): polecenie z góry, plansza z dołu, panel z lewej --------- */
@keyframes okno-z-gory { from { opacity: 0; translate: 0 -28px; } }
@keyframes okno-z-dolu { from { opacity: 0; translate: 0 40px; } }
@keyframes okno-z-lewej { from { opacity: 0; translate: -28px 0; } }
html.wjazd .polecenie { animation: okno-z-gory .55s cubic-bezier(.2, .8, .2, 1) backwards; }
html.wjazd .stage { animation: okno-z-dolu .65s cubic-bezier(.2, .8, .2, 1) .12s backwards; }
html.wjazd .side { animation: okno-z-lewej .6s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
html.wjazd .pol-czytaj { visibility: hidden; }
.stage .ster > *, .stage .widoki, .stage .dol-sceny { transition: opacity .4s ease, translate .45s cubic-bezier(.2, .8, .2, 1); }
.stage:not(.gotowa) .ster > *, .stage:not(.gotowa) .widoki { opacity: 0; translate: 0 -8px; }
.stage.gotowa .ster > :nth-child(2) { transition-delay: .06s; }
.stage.gotowa .ster > :nth-child(3) { transition-delay: .12s; }

/* --- pełny widok: jedna kolumna — polecenie nad planszą, panel znika (jak Grzybnia; dotyk blokuje stronę w wspolne/naukowiec.js) */
body.lab-pelny .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
body.lab-pelny .lewa { display: contents; }
body.lab-pelny .side { display: none; }

/* --- telefon: polecenie zwija się do jednego wiersza (Piotr 08.11: „Polecenie mogłoby być collapsable”) — jak w Programie dla
   bohatera (Piotr 07.11 wybrał tam wariant, w którym zostaje wiersz). Zwinięte = rząd 1 karty: „Polecenie” (albo „Ups!”/„Dobrze!”
   w jednej linijce), zaraz za nim strzałka, z prawej głośnik. Cały zwinięty wiersz to jeden przycisk: #polZwin ma ::before
   rozciągnięty na całą kartę, karta ma półkę i przy wciśnięciu siada na niej jak każdy przycisk (głośnik zostaje osobnym
   przyciskiem nad nim). Rozwinięte leży NAD planszą, więc plansza nie zmienia wysokości; przyciskiem jest wtedy górny wiersz.
   Kiedy samo się otwiera i zwija: gra.js, Pol. Komputer bez zmian. */
.pol-zwin { display: none; }

/* --- telefon i wąski tablet ------------------------------------------------------------------------------------ */
@media (max-width: 900px) {
  :root { --pol-wiersz: 46px; }
  .top-prawo { align-items: flex-start; }
  .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--pol-wiersz) auto auto; }
  body.lab-pelny .desk { grid-template-rows: var(--pol-wiersz) minmax(0, 1fr); }
  .desk > * { min-width: 0; }
  .lewa { display: contents; }          /* jedna kolumna: polecenie, plansza, panel */
  /* polecenie i plansza na stałych polach siatki: rozwinięte polecenie leży na polu planszy, zamiast jej odsuwać */
  :is(.lewa > .polecenie, .stage, .lewa > .side) { grid-column: 1; }
  .lewa > .polecenie { grid-row: 1; position: relative; z-index: 7; height: var(--pol-wiersz); min-height: 0; margin: 0; gap: 0; padding: 0 0 0 14px; }   /* wymiary jak w Programie dla bohatera */
  .stage { grid-row: 2; }
  .lewa > .side { grid-row: 3; }
  /* stała wysokość planszy, niezależna od polecenia; razem z wierszem polecenia mieści się na ekranie telefonu */
  .stage { height: min(140vw, 660px); height: min(140vw, 660px, calc(100svh - 100px)); }
  body.lab-pelny .stage { height: auto; }

  .pol-gora { align-items: center; min-height: 44px; gap: 0; }
  .pol-stan { flex: 0 1 auto; }   /* strzałka zaraz za etykietą albo „Ups!” */
  .pol-czytaj { margin: 0 0 0 auto; height: 44px; }
  .pol-lbl { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pol-tresc { padding-right: 14px; }
  /* karta przytula treść (Piotr 08.11: „wysokość nie musi być fixed, skoro się wysuwa”): pusty wiersz „jak” nie trzyma miejsca;
     odstęp na dole daje wspólne .pol-tresc::after */
  .pol-jak-wiersz:has(> .pol-jak:empty) { display: none; }
  /* strzałka za etykietą — biała jak strzałki list, 6 px od tekstu; jej ::before robi z całej zwiniętej karty jeden przycisk */
  .pol-zwin { display: grid; place-items: center; flex: none; width: 34px; height: 44px; margin: 0 0 0 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--n-tekst); cursor: pointer; }
  .pol-zwin svg { width: 24px; height: 24px; transition: transform .2s, translate .08s; }
  .pol-zwin::before { content: ''; position: absolute; inset: 0; border-radius: 13px; }
  /* bez przesunięcia samego przycisku: ::before musi zostać na karcie. Wspólna zasada wciśnięcia (wspolne/naukowiec.css,
     !important) i odbicie po puszczeniu (wspolne/system.js, .is-released) przesuwały i filtrowały SAM przycisk — transform/filter
     robią z niego ramkę dla ::before, więc w chwili wciśnięcia pole dotyku kurczyło się do strzałki i reagowała tylko strzałka
     (Piotr 08.11: „akcje na touch-down tylko na chevron”). Program dla bohatera tych wspólnych reguł nie ma — wyłączamy je tu,
     a wciska się cała karta (reguła :has(.pol-zwin:active) niżej), dokładnie jak tam */
  .polecenie .pol-zwin:not(:disabled):active { transform: none !important; filter: none !important; box-shadow: none !important; }
  .polecenie .pol-zwin.is-released { animation: none !important; }
  .pol-zwin:active svg { translate: 0 2px; }
  .pol-zwin:focus-visible { outline: none; }
  .lewa > .polecenie:has(.pol-zwin:focus-visible) { outline: 3px solid var(--n-akcent); outline-offset: 3px; }
  /* zwinięte: obrys i półka jak listy („Tryb:”); rozwinięte wraca do niebieskiego obrysu karty. Wciśnięte siada na półce */
  .lewa > .polecenie:not(.otwarte) { border-color: var(--n-linia-mocna); box-shadow: 0 2px 0 var(--n-linia-mocna), var(--n-cien); transition: transform .08s, box-shadow .08s, filter .08s; }
  .lewa > .polecenie:not(.otwarte):has(.pol-zwin:active) { transform: translateY(2px) scale(.98); box-shadow: var(--n-cien); filter: brightness(1.25); }
  .polecenie:not(.otwarte) .pol-dol { display: none; }
  /* „Ups!”/„Dobrze!” w zwiniętym wierszu zamiast etykiety, w jednej linijce; strzałka zaraz za tekstem */
  .polecenie:not(.otwarte) .pol-ups { flex-wrap: nowrap; min-width: 0; margin: 0; white-space: nowrap; }
  .polecenie:not(.otwarte) #polUpsTekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .polecenie:not(.otwarte) .pol-czytaj { border-radius: 0 13px 13px 0; }
  /* rozwinięte: leży nad planszą (pola 1–2 siatki), przewija się w sobie, gdy jest dłuższe; przyciskiem „zwiń” jest górny wiersz */
  .lewa > .polecenie.otwarte { grid-row: 1 / 3; align-self: start; height: auto; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 16px 32px rgba(0, 0, 0, .55); }
  /* „Pełny widok” na telefonie (html.n-blokada): wspólny układ przypina polecenie u góry ekranu, a planszę stawia pod nim na
     wysokość karty (--n-pol-h), więc rozwinięta karta spychała planszę w dół. Tu, jak w Programie dla bohatera (Piotr 08.11:
     „polecenie ma się unosić nad planszą”): plansza zaczyna się pod ZWINIĘTYM wierszem i stoi w miejscu, a rozwinięte
     polecenie unosi się nad nią (karta z-index 60 nad planszą 59) i przewija się w sobie, gdy jest dłuższe niż ekran */
  html.n-blokada #stage { top: calc(var(--n-blok-g) + var(--pol-wiersz) + 10px); }
  html.n-blokada .lewa > .polecenie.otwarte { max-height: calc(100vh - var(--n-blok-g) - var(--n-blok-d)); max-height: calc(100dvh - var(--n-blok-g) - var(--n-blok-d)); }
  .polecenie.otwarte .pol-zwin svg { transform: rotate(180deg); }
  .polecenie.otwarte .pol-zwin::before { bottom: auto; height: 44px; border-radius: 13px 13px 0 0; }
  .polecenie.otwarte .pol-zwin:active::before { background: rgba(134, 201, 255, .14); }
}
@media (max-width: 620px), (max-height: 500px) {
  /* bez nazwy etapu na planszy (Piotr 08.11: „zbędne”): przełącznik widoków w lewym górnym rogu, a lupy i „Pełny widok” w dwóch
     rzędach w prawym (Piotr 08.11) — „Pełny widok” u góry, lupy pod nim, oba rzędy do prawej. Kolejność w HTML zostaje (−, +, „Pełny
     widok”): lupy wypełniają pierwszy rząd, „Pełny widok” się nie mieści i przechodzi do drugiego, a wrap-reverse kładzie go na górze */
  .stage-gora-lewa { left: 8px; top: 8px; gap: 6px; }
  .ster { top: 8px; right: 8px; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 168px; row-gap: 6px; }
  .widoki button { min-height: 38px; padding: 6px 9px; font-size: 11.5px; }
  .dol-sceny { left: 8px; right: 8px; bottom: 8px; gap: 8px; }
  .tacka { padding: 8px 10px; gap: 8px 10px; }
  /* suwak „Poziom wody” na całą szerokość planszy (Piotr 08.11): dłuższy tor = dokładniejsze ustawianie palcem */
  .tacka:has(.suwak) { flex: 1 1 100%; }
  .tacka .suwak { flex: 1 1 100%; min-width: 0; }
  /* „Następny krok” i „Dalej” stoją na planszy bez własnej tacki (Piotr 08.11) i na telefonie są NAD tacką obok (suwak, pole, wykres) */
  .dol-sceny > :is(#krokBtn, #dalejBtn) { order: -1; }
  .suwak { grid-template-columns: minmax(0, 1fr) auto; }
  .suwak-lbl { grid-column: 1 / -1; }
  .liczniki { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .licznik span { white-space: normal; }
  .licznik:nth-child(3) { border-left: 0; }
  .licznik b { font-size: 16px; }
  .etk-tekst { padding: 3px 7px 4px; font-size: 10.5px; letter-spacing: .05em; border-radius: 7px; }
}
/* bardzo wąski telefon (np. 320 px): przełącznik widoków nie mieści się obok lup — schodzi pod oba rzędy */
@media (max-width: 352px) { .stage-gora-lewa { top: 96px; } }
@media (prefers-reduced-motion: reduce) { .pol-zwin svg, .lewa > .polecenie { transition: none; } }
@media (pointer: coarse) { .odp input { font-size: 20px; } }   /* ≥ 16 px: iOS nie przybliża strony przy wpisywaniu */
@media (prefers-reduced-motion: reduce) { .scena-plotno, .stage .ster > *, .stage .widoki { transition: none; } }