/* Minimalny, ciemny. Kolory jako zmienne, żeby dokładanie ekranów w kolejnych
   kamieniach nie zaczynało się od szukania, który odcień szarości jest „ten". */

:root {
  --tlo: #0c0d10;
  --karta: #16181d;
  --ramka: #262a31;
  --tekst: #dfe3e8;
  --przygaszony: #8b93a0;
  --akcent: #d8a24a;
  --zle: #e0645c;
  --dobrze: #6fbf73;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* `dvh` zamiast `vh`: na telefonie pasek adresu zjeżdża i wjeżdża, a `vh`
     liczy się od najwyższego stanu — przez co dolna krawędź HUD-u chowała się
     pod paskiem dokładnie wtedy, gdy była potrzebna. */
  height: 100dvh;
  overflow: hidden;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Bez podwójnego tapnięcia jako „przybliż" — w grze każde takie opóźnienie
     (300 ms) jest widoczne. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

#gra {
  touch-action: none; /* Gest rozglądania należy do gry, nie do przewijania strony. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.schowane { display: none !important; }

/* TRYB GRY (Mandat M0-3). `main.js` oznacza węzły wyłączonych systemów
   z profilu `wspolne/tryby.js`; ich panele i tak nie powstają — ta reguła
   tylko nie zostawia pustych guzików i pasków w HUD-zie. */
[data-system-wylaczony] { display: none !important; }

/* Mandat: akcent PRL-owskiej czerwieni zamiast złota Stripa. `data-gra`
   stawia serwer w HTML-u i powtarza `main.js` z profilu z handshake. */
html[data-gra="mandat"] { --akcent: #c8463c; }

/* Mandat M2: HUD czytelny na jasnym wnętrzu (kabina windy, ściany klatek).
   Strip jeździ po ciemnym mieście i tego nie potrzebuje — dlatego tylko pod
   `data-gra="mandat"`. Ciemna, półprzezroczysta płytka pod górnym paskiem,
   zakładkami czatu i podpowiedzią, plus cień liter. Podpowiedź dostaje płytkę
   tylko z treścią — pusta zostaje niewidocznym wierszem. */
html[data-gra="mandat"] #gora,
html[data-gra="mandat"] #podpowiedz,
html[data-gra="mandat"] #akcja-podpowiedz,
html[data-gra="mandat"] #czat-zakladki button {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
html[data-gra="mandat"] #gora {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #b4bbc6;
}
html[data-gra="mandat"] #gora #pozycja,
html[data-gra="mandat"] #gora #zegar { color: #b4bbc6; }
html[data-gra="mandat"] #gora button.drugi,
html[data-gra="mandat"] #czat-zakladki button {
  background: rgba(0, 0, 0, 0.55);
  color: var(--tekst);
}
html[data-gra="mandat"] #czat-zakladki button.wybrana { color: #ff7a6e; }
html[data-gra="mandat"] #podpowiedz:not(:empty),
html[data-gra="mandat"] #akcja-podpowiedz:not(:empty) {
  width: fit-content;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #ff8a7e;
}
/* M3: zamrożony przez mandat (scena, pokuta-klęczenie, blokada) nie dostaje
   „WSAD chodzi…" — i tak nie może ruszyć. */
html[data-gra="mandat"] #podpowiedz.mandat-zamrozony { visibility: hidden; }

/* --- ekran wejścia -------------------------------------------------------- */

.nakladka {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 100% at 50% 0%, #191c22 0%, var(--tlo) 70%);
  overflow-y: auto;
}

.karta {
  width: min(420px, 100%);
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
}

.karta h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 0.22em;
  font-weight: 700;
}

.podtytul {
  margin: 6px 0 22px;
  color: var(--przygaszony);
  font-size: 14px;
}

#formularz { display: grid; gap: 10px; }

input {
  width: 100%;
  padding: 12px 14px;
  background: #0f1115;
  border: 1px solid var(--ramka);
  border-radius: 9px;
  color: var(--tekst);
  font: inherit;
  text-align: center;
}

input:focus { outline: 2px solid var(--akcent); outline-offset: -1px; }

button {
  padding: 12px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--akcent);
  color: #16181d;
  font: 600 14px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  /* Minimalny cel dotyku — 44 px to próg, poniżej którego kciuk chybia. */
  min-height: 44px;
}

button:disabled { opacity: 0.5; cursor: default; }

button.drugi {
  background: transparent;
  border: 1px solid var(--ramka);
  color: var(--przygaszony);
}

#blad {
  min-height: 20px;
  margin-top: 14px;
  color: var(--zle);
  font-size: 14px;
}

.uwaga {
  margin: 18px 0 0;
  color: var(--przygaszony);
  font-size: 12.5px;
  line-height: 1.6;
}

/* --- HUD ------------------------------------------------------------------ */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#gora {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--przygaszony);
}

#kasa { color: var(--akcent); font-variant-numeric: tabular-nums; }
#sezon-info { position:relative; color:#ffd36a; font-variant-numeric:tabular-nums; }
#sezon { cursor:pointer; }
#sezon-mnozniki { position:absolute; z-index:30; top:1.5em; left:0; min-width:250px;
  padding:8px 10px; white-space:pre-line; color:var(--tekst); background:#171717;
  border:1px solid #554a2a; box-shadow:0 6px 18px #000b; }

#gora button { pointer-events: auto; padding: 6px 10px; min-height: 32px; font-size: 11px; }

#pozycja, #zegar { color: var(--przygaszony); font-variant-numeric: tabular-nums; }

/* Przycisk mikrofonu dokłada tu `voice.js` (id `voice-btn`): `<b>` na ikonę,
   `<span>` na nazwę, `<i>` na zdanie opisu. W pasku HUD zostaje sama nazwa —
   opis ma sens w menu, którego jeszcze nie ma. */
#przyciski { display: inline-flex; gap: 6px; pointer-events: auto; }
#przyciski button { padding: 6px 10px; min-height: 32px; font-size: 11px; }
#przyciski button i { display: none; }
#przyciski button b { margin-right: 4px; }
#przyciski button.wlaczony { border-color: var(--dobrze); color: var(--dobrze); }
/* Guzik kanału roli (E6 §6f, `hud/kanal-roli.js`): na kanale roli ramka
   w barwie akcentu, w czasie nadawania — w barwie „dobrze", jak mikrofon.
   Obok mały guzik ciszy na wszystkich rolach. */
#voice-rola[data-kanal="rola"] { border-color: var(--akcent); }
#voice-rola.nadaje { border-color: var(--dobrze); color: var(--dobrze); }
#voice-rola-cisza { min-width: 32px; }
#voice-rola-cisza.wlaczona { border-color: var(--zle); }
#zgloszenia { position:fixed; z-index:45; inset:18% auto auto 50%; transform:translateX(-50%);
  width:min(520px,calc(100vw - 48px)); padding:18px; background:#111e; border:1px solid #587; }
#zgloszenia .panel-glowa { display:flex; justify-content:space-between; margin-bottom:12px; }
#zgloszenia textarea { display:block; box-sizing:border-box; width:100%; min-height:130px; resize:vertical;
  color:#eee; background:#091010; border:1px solid #465; padding:10px; }
#zgloszenia > button { margin:12px 8px 0 0; }
#przyciski button b svg { display: block; }

#ekipa-panel {
  position: fixed; z-index: 46; inset: 12% auto auto 50%; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); max-height: 76vh; overflow: auto;
  box-sizing: border-box; padding: 18px; pointer-events: auto;
  background: #111e; border: 1px solid #587; color: var(--tekst);
}
#ekipa-panel .panel-glowa, .ekipa-wiersz { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#ekipa-panel section { margin-top: 16px; }
#ekipa-panel h3 { margin: 0 0 10px; }
#ekipa-panel label, #ekipa-panel input { display: block; box-sizing: border-box; width: 100%; }
#ekipa-panel input { margin: 5px 0 9px; padding: 9px; color: var(--tekst); background: #091010; border: 1px solid #465; }
#ekipa-panel button { pointer-events: auto; }
.ekipa-wiersz { min-height: 38px; padding: 4px 0; border-bottom: 1px solid #ffffff18; }

/* --- ikona straży miejskiej (M8b-purlis2) ---------------------------------- */
/* Trzeci sposób na wezwanie Purlisa, obok klawisza P i `#dotyk-purlis`, i
   jedyny, który działa ZA KIEROWNICĄ i na telefonie naraz: `#przyciski` siedzi
   w pasku HUD, czyli poza obiema warstwami dotyku, a te chowają się nawzajem.
   Trzy stany, żadnego tekstu w samej ikonie — tarcza bierze barwę z `color`,
   bo SVG rysuje się `currentColor`. */
#straz-btn.dostepna { color: var(--tekst); }
#straz-btn.bez-klucza { color: var(--przygaszony); opacity: 0.5; }
#straz-btn.poscig {
  color: var(--zle);
  border-color: var(--zle);
  animation: straz-puls 0.9s ease-in-out infinite;
}
@keyframes straz-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
/* Kto woli mniej ruchu na ekranie, dostaje sam kolor — puls jest ozdobą,
   a informacją jest czerwień. */
@media (prefers-reduced-motion: reduce) {
  #straz-btn.poscig { animation: none; }
}

#dol { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Ostrzeżenie o krawędzi świata. Pusty tekst zostawia pusty wiersz, więc
   podpowiedź niżej nie skacze, gdy napis się pojawia i znika. */
/* Licznik debugowy ziemi: mały, szary, w rogu — ma nie zasłaniać gry, a przy
   `?debug=1` powiedzieć, ile instancji kostek trafia do karty. */
/* Bottom przesunięty od M11: przy `?debug=1` licznik i minimapa dzieliłyby
   prawą krawędź, a licznik ma być czytelny — to on mówi, czy budżety
   z kamieni jeszcze trzymają. */
#debug {
  position: absolute; right: 12px; bottom: 12px;
  font-size: 11px; line-height: 1.5; color: var(--przygaszony);
  font-variant-numeric: tabular-nums; white-space: pre; text-align: right;
  pointer-events: none; opacity: 0.75;
}

#ostrzezenie { font-size: 13px; color: var(--zle); min-height: 18px; letter-spacing: 0.04em; }

#woda-info {
  align-self: center;
  color: #b9e7ff;
  background: rgba(3, 30, 48, 0.82);
  border: 1px solid rgba(115, 205, 255, 0.55);
  padding: 7px 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
#woda-info.zagrozenie { color: #fff; border-color: var(--zle); background: rgba(90, 12, 18, 0.88); }

/* Znacznik „ścigany przez wieże" (M6). Mocniejszy od ostrzeżenia o granicy
   świata i pulsuje, bo mówi o czymś, co za chwilę zabije — a napis w tym
   samym kolorze i tej samej wadze co „granica świata" ginie w tle. Puls jest
   wolny (1,2 s): szybszy zaczyna migotać przy pełnym ekranie. */
#scigany {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--zle);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
  animation: scigany-puls 1.2s ease-in-out infinite;
}

#poszukiwany {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffb43b;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}

@keyframes scigany-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Kto się na to nie godzi (albo ma chorobę lokomocyjną), dostaje sam napis. */
@media (prefers-reduced-motion: reduce) {
  #scigany { animation: none; }
}

/* Licznik auta (M4). Prawy dolny róg, nad licznikiem debugowym — prędkość
   dużymi cyframi, bieg i obroty pod spodem. Cyfry tabelaryczne, żeby przy
   zmianie 99 → 100 km/h nic nie drgnęło. */
#auto-hud {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 40px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-variant-numeric: tabular-nums; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
#auto-predkosc { font-size: 30px; font-weight: 600; line-height: 1; }
#auto-bieg { font-size: 15px; color: var(--akcent); }
#auto-obroty { font-size: 11px; color: var(--przygaszony); }

/* Paliwo (M7). Ten sam pomysł, co przy pasku życia: szerokość stała,
   wypełnienie w procentach. Czerwień pod jedną ósmą baku — wtedy warto
   zawrócić na stację, a nie wtedy, gdy zostały dwa litry. */
#auto-paliwo {
  display: inline-block;
  width: 90px;
  height: 6px;
  border: 1px solid var(--ramka);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(10, 13, 18, 0.7);
}
#auto-paliwo i {
  display: block; height: 100%; width: 100%;
  background: var(--akcent);
  transition: width 0.2s linear;
}
#auto-paliwo.malo i { background: var(--zle); }
#auto-paliwo-l { font-size: 11px; color: var(--przygaszony); }
#auto-paliwo-l.pusto { color: var(--zle); }

/* --- czat bliski ---------------------------------------------------------- */

#czat {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 64px));
  width: min(420px, 60vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

#czat-lista { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }

#czat-lista .wiersz {
  background: rgba(10, 13, 18, 0.62);
  border-radius: 4px;
  padding: 3px 7px;
  line-height: 1.35;
  /* Zdanie bez spacji nie ma prawa rozepchnąć listy przez pół ekranu. */
  overflow-wrap: anywhere;
}

#czat-lista .kto { margin-right: 5px; }

#czat-wiersz {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

#czat-pole {
  flex: 1;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}

#czat-licznik { font-size: 11px; color: var(--przygaszony); min-width: 22px; text-align: right; }
#czat-licznik.blisko { color: var(--zle); }

/* Podpowiedź o Pointer Locku znika, gdy kursor jest złapany — pusty tekst
   zostawia pusty wiersz i nic nie skacze. */
#podpowiedz { font-size: 13px; color: var(--akcent); min-height: 18px; }

#stan { font-size: 13px; color: var(--dobrze); }
#stan.zle { color: var(--zle); }

/* --- walka (M3) ----------------------------------------------------------- */

/* Pasek życia. Szerokość stała, wypełnienie w procentach — z rogu oka liczy
   się, ILE zostało, a nie która to dokładnie liczba. Barwa zjeżdża z zielonej
   na czerwoną dopiero pod jedną trzecią, żeby zmiana coś znaczyła. */
#zycie {
  display: inline-block;
  width: 90px;
  height: 8px;
  border: 1px solid var(--ramka);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(10, 13, 18, 0.7);
}

#zycie i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--dobrze);
  transition: width 0.12s linear;
}

#zycie.malo i { background: var(--zle); }

#kule { color: var(--tekst); font-variant-numeric: tabular-nums; }
#kule.pusto { color: var(--zle); }

/* Celownik: cztery kreski wokół pustego środka. Kropka zasłaniałaby cel na
   dalekim dystansie, a przy armacie i tak nie ma toru lotu do pokazania. */
#celownik {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  opacity: 0.75;
}

#celownik i {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--tekst), var(--tekst)) 50% 0 / 1px 7px no-repeat,
    linear-gradient(var(--tekst), var(--tekst)) 50% 100% / 1px 7px no-repeat,
    linear-gradient(var(--tekst), var(--tekst)) 0 50% / 7px 1px no-repeat,
    linear-gradient(var(--tekst), var(--tekst)) 100% 50% / 7px 1px no-repeat;
}

/* Pasek ładowania pod celownikiem — moc rośnie w prawo. */
#ladowanie {
  position: absolute;
  left: 50%;
  top: calc(50% + 22px);
  width: 120px;
  height: 5px;
  margin-left: -60px;
  border: 1px solid var(--ramka);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(10, 13, 18, 0.7);
  pointer-events: none;
}

#ladowanie i { display: block; height: 100%; width: 0; background: var(--akcent); }
#ladowanie.pelne i { background: var(--zle); }

/* --- sklep ---------------------------------------------------------------- */

#sklep {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow: auto;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#plecak-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--karta); border: 1px solid var(--ramka); border-radius: 12px;
  padding: 14px; pointer-events: auto;
}
/* Informacja o bazie nie zasłania otwartego plecaka ani przycisku zamknięcia. */
body:has(#plecak-panel:not(.schowane)) #baza-hud { visibility: hidden; }
#plecak-glowa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#plecak-sloty { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.plecak-slot { min-height: 54px; padding: 5px; font-size: 11px; overflow-wrap: anywhere; }
#plecak-nadmiar-sekcja { margin-top: 14px; border-top: 1px solid var(--ramka); padding-top: 10px; }
#plecak-nadmiar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#plecak-nadmiar button { font-size: 11px; }
@media (max-width: 560px) { #plecak-sloty { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

#sklep-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#sklep-tytul { letter-spacing: 0.14em; font-size: 14px; }
#sklep-saldo { flex: 1; color: var(--akcent); font-size: 12px; font-variant-numeric: tabular-nums; }
#sklep-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }

#sklep-lista { display: flex; flex-direction: column; gap: 8px; }

/* --- bankomat przy szpitalu (D9-B) --------------------------------------- */

#bank-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px));
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#bank-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#bank-tytul { flex: 1; color: var(--akcent); letter-spacing: 0.14em; font-size: 14px; }
#bank-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#bank-salda { display: grid; gap: 5px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
#bank-kwota-etykieta { display: block; color: var(--przygaszony); font-size: 12px; margin-bottom: 5px; }
#bank-kwota { width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; }
#bank-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
#bank-akcje button { min-height: 34px; }
#bank-pozyczka { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--ramka); }
#bank-pozyczka p { margin: 4px 0; color: var(--przygaszony); font-size: 12px; line-height: 1.35; }
#bank-pozyczka #bank-pozyczka-stan { color: var(--tekst); }
#bank-pomoc { min-height: 1.4em; margin: 10px 0 0; color: var(--przygaszony); font-size: 12px; }

.sklep-wiersz {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--ramka);
}

.sklep-nazwa { flex: 1; font-size: 13px; }
.sklep-cena { color: var(--akcent); font-size: 12px; font-variant-numeric: tabular-nums; }
.sklep-guziki { display: inline-flex; gap: 4px; }
.sklep-guziki button { min-height: 30px; padding: 4px 9px; font-size: 12px; }

/* --- ekran śmierci -------------------------------------------------------- */

#smierc {
  z-index: 80;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: rgba(12, 13, 16, 0.55);
  pointer-events: none;
  text-align: center;
}

#smierc-tytul { font-size: 26px; letter-spacing: 0.2em; color: var(--zle); }
#smierc-powod { font-size: 13px; color: var(--przygaszony); letter-spacing: 0.04em; }
#smierc-odliczanie { font-size: 15px; color: var(--przygaszony); font-variant-numeric: tabular-nums; }

#odrodzenie-panel { pointer-events: auto; width: min(620px, calc(100vw - 32px)); padding: 20px; background: #172329f2; border: 1px solid #52616a; border-radius: 6px; }
#odrodzenie-tytul { margin: 0 0 12px; font-size: 18px; }
#odrodzenie-strata { color: var(--przygaszony); line-height: 1.5; }
#odrodzenie-cele { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-height: 28vh; overflow: auto; }
#odrodzenie-cele button { min-height: 44px; }
#odrodzenie-cele button[aria-pressed="true"] { background: #172329; box-shadow: inset 0 0 0 2px var(--akcent); color: var(--akcent); opacity: 1; }
#odrodzenie-status { min-height: 1.4em; margin-bottom: 0; }

/* --- komis (M4) ----------------------------------------------------------- */

/* Szerszy od sklepu, bo w wierszu jest pięć rzeczy zamiast trzech, i z własnym
   przewijaniem: dziesięć ofert nie mieści się na telefonie w poziomie. */
#komis {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#komis-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#komis-tytul { letter-spacing: 0.14em; font-size: 14px; }
#komis-saldo { flex: 1; color: var(--akcent); font-size: 12px; font-variant-numeric: tabular-nums; }
#komis-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }

#komis-lista { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }

.komis-wiersz {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--ramka);
}
.komis-wiersz:first-child { border-top: none; }
.komis-nazwa { font-size: 13px; }
.komis-dane { font-size: 11px; color: var(--przygaszony); font-variant-numeric: tabular-nums; }
.komis-cena { font-size: 13px; color: var(--akcent); font-variant-numeric: tabular-nums; }
.komis-cena.zadrogo { color: var(--zle); }
.komis-wiersz button { padding: 4px 12px; min-height: 28px; font-size: 12px; }
.komis-uwaga { padding-top: 8px; font-size: 12px; color: var(--zle); }
/* Druga linia ogłoszenia z EGZEMPLARZEM (M7b): przebieg, stan i liczba
   części. Własny wiersz siatki, bo wiersz systemowy ma cztery kolumny i piąty
   element rozwaliłby układ. */
.komis-uzywane {
  grid-column: 1 / -1;
  font-size: 11px; color: var(--akcent); font-variant-numeric: tabular-nums;
}

/* Sekcje „wystaw" i „moje ogłoszenia" (M7d). Nagłówek oddziela je od listy
   ofert; suwak ceny zajmuje kolumnę, którą w wierszu oferty zajmują dane. */
.komis-naglowek {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ramka);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--przygaszony);
}
.komis-suwak { width: 120px; accent-color: var(--akcent); }
.komis-wystaw, .komis-moje { grid-template-columns: 1fr auto auto auto; }

/* W pionie na telefonie wiersz nie mieści się w jednej linii — dane schodzą
   pod nazwę, a cena i guzik zostają obok siebie. */
@media (orientation: portrait) and (max-width: 520px) {
  .komis-wiersz { grid-template-columns: 1fr auto auto; }
  .komis-dane { grid-column: 1 / -1; grid-row: 2; }
  .komis-suwak { width: 90px; }
}

/* --- karta auta na placu (M7d) -------------------------------------------- */

#karta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}
#karta-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#karta-tytul { flex: 1; letter-spacing: 0.08em; font-size: 14px; }
#karta-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#karta-lista { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.karta-wiersz {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; border-top: 1px solid var(--ramka); font-size: 12px;
}
.karta-wiersz:first-child { border-top: none; }
.karta-etykieta { color: var(--przygaszony); }
.karta-wartosc { font-variant-numeric: tabular-nums; text-align: right; }
#karta-stopka {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px;
}
.karta-cena { font-size: 16px; color: var(--akcent); font-variant-numeric: tabular-nums; }
.karta-cena.zadrogo { color: var(--zle); }
#karta-stopka button { padding: 6px 16px; min-height: 32px; font-size: 13px; }

/* Podpowiedź interakcji (M7d): jedna linia nad `#podpowiedz`. */
#akcja-podpowiedz {
  font-size: 13px;
  color: var(--akcent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* --- warstwa dotykowa ----------------------------------------------------- */

/* Widgety ustawia `public/js/dotyk.js` (left/top/width/height w pikselach),
   tutaj jest sam wygląd. `pointer-events: none` — zdarzenia łapie okno,
   a nie te kółka: palec, który zjechał z przycisku, ma dalej sterować. */
#dotyk { position: absolute; inset: 0; pointer-events: none; }

#dotyk-galka, #dotyk-strzal, #dotyk-skok {
  position: absolute;
  border: 1px solid var(--ramka);
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.35);
  pointer-events: none;
}

#dotyk-galka i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  margin: -19% 0 0 -19%;
  border-radius: 50%;
  background: rgba(223, 227, 232, 0.35);
}

/* Przycisk akcji (M7d): jedyny widget warstwy pieszego, który ŁAPIE
   ZDARZENIA sam (`public/js/interakcja.js`) — reszta oddaje je oknu. */
#dotyk-akcja {
  position: absolute;
  border: 1px solid var(--akcent);
  border-radius: 50%;
  background: rgba(216, 162, 74, 0.28);
  pointer-events: auto;
}
#dotyk-akcja::after {
  content: "E";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--akcent);
}

/* Wezwanie Purlisa (M8b cz. 2): drugi widget warstwy pieszego, który ŁAPIE
   ZDARZENIA sam. Przygaszony wobec akcji — naciska się go raz na kilka minut
   i nie ma odbierać uwagi gałce ani strzałowi. */
#dotyk-purlis {
  position: absolute;
  border: 1px solid var(--ramka);
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.4);
  pointer-events: auto;
}
#dotyk-purlis::after {
  content: "P";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--przygaszony);
}

#dotyk-strzal { border-color: var(--akcent); }
#dotyk-strzal.laduje { background: rgba(216, 162, 74, 0.35); }
#dotyk-skok.trzyma { background: rgba(223, 227, 232, 0.25); }

/* Warstwa kierowcy (M4): ten sam wygląd, inny komplet przycisków. Jedna
   z dwóch warstw jest zawsze schowana — `dotyk.js` podmienia je przy
   wsiadaniu i wysiadaniu. */
#dotyk-auto { position: absolute; inset: 0; pointer-events: none; }

#auto-kierownica, #auto-gaz, #auto-hamulec, #auto-reczny,
#auto-bieg-gora, #auto-bieg-dol, #auto-wysiadka, #auto-strzal, #auto-wychyl {
  position: absolute;
  border: 1px solid var(--ramka);
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.35);
  pointer-events: none;
}

#auto-kierownica i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  margin: -19% 0 0 -19%;
  border-radius: 50%;
  background: rgba(223, 227, 232, 0.35);
}

#auto-gaz { border-color: var(--akcent); }
#auto-gaz.trzyma { background: rgba(216, 162, 74, 0.35); }
#auto-hamulec.trzyma { background: rgba(199, 84, 80, 0.32); }
#auto-reczny.trzyma { background: rgba(199, 84, 80, 0.22); }
#auto-bieg-gora.trzyma, #auto-bieg-dol.trzyma,
#auto-wysiadka.trzyma { background: rgba(223, 227, 232, 0.25); }

/* Strzał pasażera (M8c) — ta sama barwa, co przycisk strzału pieszego,
   bo to ta sama armata i ten sam gest: trzymasz, ładujesz, puszczasz. */
#auto-strzal { border-color: var(--akcent); }
#auto-strzal.laduje { background: rgba(216, 162, 74, 0.35); }
/* Wychylenie (M8c cz. 2) — przycisk trzymany, jak pedał. */
#auto-wychyl.trzyma { background: rgba(223, 227, 232, 0.25); }

/* --- przełącznik języka --------------------------------------------------- */

#jezyki {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  gap: 4px;
}

#jezyki button {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--ramka);
  color: var(--przygaszony);
}

#jezyki button.wybrany { border-color: var(--akcent); color: var(--akcent); }

/* W GRZE przełącznika języka w rogu nie ma (M11): od tego kamienia język
   siedzi w panelu ustawień, a róg jest potrzebny minimapie. Na ekranie
   wejścia zostaje — tam jest jedynym miejscem, w którym ktoś nierozumiejący
   polskiego może cokolwiek zrobić. */
body:not(.wejscie) #jezyki { display: none; }

/* Pion i poziom są równorzędne — nie ma nakładki „obróć urządzenie".
   W pionie karta wejścia dostaje więcej powietrza po bokach, a HUD zsuwa się
   z krawędzi, bo tam kciuk trzyma telefon. */
@media (orientation: portrait) {
  .karta { padding: 24px 18px; }
  #gora { flex-wrap: wrap; }
}

/* --- wyścig na stripie (M5) ----------------------------------------------- */

/* Pasek wyścigu wisi POD górnym HUD-em, na środku: kierowca patrzy przed
   siebie, a nie w rogi ekranu. Wszystko `pointer-events: none` — pasek nie ma
   nic do klikania, a łapanie w niego myszy odbierałoby sterowanie. */
#wyscig {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(12, 13, 16, 0.62);
  border: 1px solid var(--ramka);
  pointer-events: none;
  text-align: center;
  z-index: 5;
}
#wyscig-faza { font-size: 12px; letter-spacing: 0.16em; color: var(--przygaszony); }
#wyscig-tor { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--akcent); }
#wyscig-czas {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
  line-height: 1.1;
}
/* Odliczanie do zielonego czyta się inaczej niż czas przejazdu — inny kolor
   mówi to bez czytania. */
#wyscig-czas.start { color: var(--akcent); }
#wyscig-splity { display: flex; gap: 10px; font-size: 12px; color: var(--przygaszony); }
#wyscig-postep { font-size: 13px; font-variant-numeric: tabular-nums; }
.wyscig-split { font-variant-numeric: tabular-nums; }
#wyscig-miejsce { font-size: 13px; color: var(--akcent); }
#wyscig-kurs { font-size: 11px; color: var(--przygaszony); font-variant-numeric: tabular-nums; }
#wyscig-kurs.slaby { color: var(--zle); }

/* Karta wyniku: to samo pudełko, co sklep i komis, tylko szersze. */
#wynik {
  pointer-events: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  max-height: 80dvh;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--karta);
  border: 1px solid var(--ramka);
  z-index: 20;
}
#wynik-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#wynik-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; }
#wynik-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
.wynik-naglowek { font-size: 17px; margin-bottom: 10px; }
.wynik-lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.wynik-wiersz {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 13px;
}
.wynik-wiersz.ja { background: rgba(216, 162, 74, 0.14); }
.wynik-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wynik-czas { font-variant-numeric: tabular-nums; color: var(--przygaszony); }
.wynik-kwota { font-size: 20px; color: var(--akcent); font-variant-numeric: tabular-nums; }
.wynik-opis, .wynik-rekord, .wynik-usterka { font-size: 12px; color: var(--przygaszony); margin-top: 4px; }
.wynik-rekord { color: var(--dobrze); }
.wynik-usterka { color: var(--zle); }

/* Panel rekordów. */
#rekordy {
  pointer-events: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 94vw);
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--karta);
  border: 1px solid var(--ramka);
  z-index: 20;
}
#motd {
  pointer-events: auto; position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(420px, 90vw); padding: 18px;
  border-radius: 12px; background: var(--karta); border: 1px solid var(--ramka); z-index: 30;
}
#motd p { color: var(--przygaszony); }
#motd-ok { width: 100%; }
#rekordy-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#rekordy-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; }
#rekordy-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#rekordy-zakladki { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
#rekordy-tory { display: flex; gap: 4px; margin-bottom: 8px; }
#rekordy-tory button, #rekordy-zakladki button, #rekordy-lista .rekordy-podzakladki button {
  background: transparent; border: 1px solid var(--ramka); color: var(--przygaszony);
}
#rekordy-tory button { flex: 1; padding: 5px 10px; min-height: 28px; }
#rekordy-tory button.wybrana { color: var(--akcent); border-color: var(--akcent); }
#rekordy-zakladki button { padding: 4px 10px; min-height: 28px; font-size: 12px; }
#rekordy-zakladki button.wybrana { color: var(--akcent); border-color: var(--akcent); }
#rekordy-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
/* Przełącznik widoków wewnątrz zakładki mandatów (M8b część 2). Drugi rząd
   guzików, wyraźnie mniejszy od zakładek — to podział wewnątrz jednej z nich,
   a nie kolejna zakładka. */
#rekordy-lista .rekordy-podzakladki {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px;
}
#rekordy-lista .rekordy-podzakladki button {
  padding: 2px 8px; min-height: 24px; font-size: 11px;
}
#rekordy-lista .rekordy-podzakladki button.wybrana {
  color: var(--akcent); border-color: var(--akcent);
}
.rekordy-wiersz {
  display: grid;
  grid-template-columns: 26px minmax(60px, 1fr) minmax(60px, 1.4fr) auto;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.rekordy-wiersz.ja { background: rgba(216, 162, 74, 0.14); }
.rekordy-wiersz.statystyki-wiersz { grid-template-columns: minmax(120px, 1fr) auto; }
.rekordy-wiersz.historia-wiersz {
  grid-template-columns: minmax(96px, auto) minmax(100px, 1fr) auto;
  align-items: center;
}
.historia-data { color: var(--przygaszony); font-variant-numeric: tabular-nums; }
.historia-kwoty { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.historia-kwoty.dodatnia { color: var(--dobrze); }
.historia-kwoty.ujemna { color: var(--zle); }
#rekordy-lista button.rekordy-nick, button.wydarzenia-link-profil {
  min-height: 0; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; text-transform: none; cursor: pointer;
  text-decoration: underline;
}
#rekordy-lista button.rekordy-nick:focus-visible,
button.wydarzenia-link-profil:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.rekordy-nr { color: var(--przygaszony); }
.rekordy-nick, .rekordy-auto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rekordy-auto { color: var(--przygaszony); }
.rekordy-czas { font-variant-numeric: tabular-nums; color: var(--akcent); }
.rekordy-pusto, #rekordy-stopka { font-size: 12px; color: var(--przygaszony); margin-top: 6px; }

/* --- wydarzenia (M9) ------------------------------------------------------ */

/* Ten sam kadr, co panel rekordów: środek ekranu, bo wydarzenia ogląda się
   MIĘDZY przejazdami, nie w trakcie. Panel kierowcy (`#miejsce`) jest z boku
   właśnie dlatego, że tamten otwiera się w ruchu. */
#wydarzenia {
  pointer-events: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 94vw);
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--karta);
  border: 1px solid var(--ramka);
  z-index: 20;
}
#wydarzenia-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#wydarzenia-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; }
#wydarzenia-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#wydarzenia-tresc { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.wydarzenia-karta {
  border: 1px solid var(--ramka);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* --- prywatne zakłady (M13) --------------------------------------------- */

#zaklady {
  pointer-events: auto;
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  top: max(64px, env(safe-area-inset-top));
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100dvh - 250px);
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--karta) 94%, transparent);
  border: 1px solid var(--ramka);
  z-index: 19;
}
#zaklady-glowa { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
#zaklady-tytul { flex: 1; letter-spacing: 0.12em; font-size: 13px; }
#zaklady-saldo { color: var(--akcent); font-size: 12px; font-variant-numeric: tabular-nums; }
#zaklady-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#zaklady-tresc { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#zaklady-stopka { margin-top: 7px; color: var(--przygaszony); font-size: 11px; }
.zaklady-sekcja {
  margin-top: 3px; color: var(--przygaszony); font-size: 10px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.zaklady-karta {
  border: 1px solid var(--ramka); border-radius: 8px; padding: 8px 9px;
  display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,0.018);
}
.zaklady-karta.zaklady-auto { border-color: rgba(216, 162, 74, 0.55); }
.zaklady-karta-glowa { display: flex; align-items: baseline; gap: 8px; }
.zaklady-przeciwnik { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaklady-status { color: var(--akcent); font-size: 11px; text-transform: uppercase; }
.zaklady-stawka { font-size: 13px; }
.zaklady-szczegol, .zaklady-termin, .zaklady-podbicie, .zaklady-gotowy {
  color: var(--przygaszony); font-size: 11px;
}
.zaklady-depozyt { color: var(--dobrze); font-size: 11px; }
.zaklady-blokada, .zaklady-blad, .zaklady-pusto, .zaklady-czekaj {
  border-radius: 6px; padding: 6px 8px; font-size: 11px;
}
.zaklady-blokada, .zaklady-pusto, .zaklady-czekaj { color: var(--przygaszony); background: rgba(255,255,255,0.025); }
.zaklady-blad { color: var(--zle); background: rgba(224,100,92,0.08); }
.zaklady-akcje, .zaklady-suwak { display: flex; align-items: center; gap: 6px; }
.zaklady-akcje button, .zaklady-suwak button, .zaklady-auto-guzik {
  min-height: 28px; padding: 4px 9px; font-size: 11px;
}
.zaklady-glowny, .zaklady-auto-guzik { color: var(--akcent); border-color: var(--akcent); }
.zaklady-suwak input { min-width: 80px; flex: 1; accent-color: var(--akcent); }
.zaklady-suwak-kwota { min-width: 82px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.zaklady-historia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: 11px; }
.zaklady-historia-opis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaklady-historia-kwota { color: var(--przygaszony); font-variant-numeric: tabular-nums; }

@media (max-height: 650px) {
  #zaklady { top: 48px; max-height: calc(100dvh - 150px); }
}
.wydarzenia-karta-glowa { display: flex; align-items: center; gap: 8px; }
.wydarzenia-nazwa {
  flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wydarzenia-znacznik { font-size: 11px; color: var(--przygaszony); }
.wydarzenia-opis, .wydarzenia-pusto { font-size: 12px; color: var(--przygaszony); }
.wydarzenia-faza { font-size: 12px; color: var(--akcent); }
.wydarzenia-podtytul {
  font-size: 11px; letter-spacing: 0.12em; color: var(--przygaszony); margin-top: 8px;
}
.wydarzenia-odliczanie { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--akcent); }
.wydarzenia-wiersz {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
}
.wydarzenia-wiersz.ja { background: rgba(216, 162, 74, 0.14); }
.wydarzenia-nr { color: var(--przygaszony); }
.wydarzenia-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wydarzenia-znak { color: var(--akcent); font-variant-numeric: tabular-nums; }
.wydarzenia-guziki { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wydarzenia-guziki button { padding: 4px 10px; min-height: 28px; font-size: 12px; }
/* Wyróżnienie robi GRUBSZY KRÓJ, nie kolor tekstu: guzik bazowy ma złote tło
   (`button { background: var(--akcent) }`), więc `color: var(--akcent)` na nim
   jest napisem niewidocznym — pułapka z M7. */
.wydarzenia-guziki button.glowny { font-weight: 700; letter-spacing: 0.06em; }
.wydarzenia-guziki button.wybrana {
  color: #16181d;
  box-shadow: inset 0 0 0 2px #16181d;
}
.wydarzenia-zaloz {
  border-top: 1px solid var(--ramka);
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wydarzenia-zaloz input { font-size: 13px; }

/* --- miejsce usługowe (M7) ------------------------------------------------ */

/* Panel warsztatu, lakierni i stacji. Węższy od komisu i wysunięty w PRAWO
   od środka: otwiera się kierowcy, a kierowca patrzy na drogę przed maską —
   panel na środku ekranu zasłaniałby bramę, przez którą właśnie wjechał. */
#miejsce {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  width: min(320px, calc(100vw - 32px));
  max-height: min(72vh, 560px);
  overflow-y: auto;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#miejsce-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#miejsce-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; }
#miejsce-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#miejsce-lista { display: flex; flex-direction: column; gap: 6px; }
#miejsce-podpis {
  margin-top: 10px; font-size: 12px; color: var(--przygaszony); line-height: 1.4;
}

.miejsce-wiersz {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; border-top: 1px solid var(--ramka);
}
.miejsce-nazwa { flex: 1; font-size: 12px; color: var(--przygaszony); }
.miejsce-wartosc { font-size: 13px; font-variant-numeric: tabular-nums; }

#miejsce-lista button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
/* GŁÓWNY GUZIK PANELU MA CIEMNY NAPIS, nie złoty. Guzik bazowy jest ZŁOTY
   (`button { background: var(--akcent) }`), więc `color: var(--akcent)` z M7
   dawał złoty napis na złotym tle — „napraw auto", „tankuj" i „zakręć" były
   przez to pustymi paskami. Wyróżnienie robi teraz grubszy krój i odstęp. */
#miejsce-lista button.miejsce-glowny {
  margin-top: 8px; color: #16181d; font-weight: 800;
}

/* Paleta lakierni: kolumna guzików z paskiem barwy po lewej. Kolumna, nie
   siatka — dwanaście nazw w dwóch kolumnach nie mieści się na telefonie. */
.miejsce-paleta { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.miejsce-paleta button { text-align: left; }

/* Pasek baku w panelu stacji — ten sam kształt, co pasek paliwa w HUD-zie. */
.miejsce-pasek {
  height: 8px; border: 1px solid var(--ramka); border-radius: 4px;
  overflow: hidden; background: rgba(10, 13, 18, 0.7); margin: 2px 0 6px;
}
.miejsce-pasek i { display: block; height: 100%; background: var(--akcent); }

/* --- lista układów w warsztacie (M7f) ------------------------------------- */
/* Siedem pozycji, każda z paskiem stanu i guzikiem wymiany. Pasek jest CIEŃSZY
   niż bak stacji i bez marginesu na dole — inaczej panel z siedmioma pozycjami
   nie mieści się na telefonie. */
.miejsce-uklad-box { display: flex; flex-direction: column; }
.miejsce-uklad-box .miejsce-wiersz { padding-bottom: 2px; }
.miejsce-pasek-uklad { height: 5px; margin: 0 0 4px; }
/* Zjeżdżony układ świeci na czerwono — to jedyne miejsce w panelu, gdzie
   kolor niesie treść, więc obok paska stoi zawsze liczba. */
.miejsce-pasek-uklad i { background: var(--akcent); }
.miejsce-uklad-box button { margin-bottom: 4px; }

/* --- garaż w warsztacie (M7b) --------------------------------------------- */

/* Panel garażu. SZERSZY OD WARSZTATU i po LEWEJ: warsztat zostaje po prawej,
   a oba bywają otwarte naraz — kto stoi na podjeździe, ma widzieć i „napraw",
   i katalog części. Wysoki, bo lista pozycji jest długa; przewija się w środku,
   a nie razem ze stroną. */
#garaz {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  width: min(400px, calc(100vw - 32px));
  max-height: min(82vh, 680px);
  overflow-y: auto;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#garaz-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#garaz-tytul { flex: 1; letter-spacing: 0.08em; font-size: 14px; }
#garaz-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#garaz-lista { display: flex; flex-direction: column; gap: 5px; }

.garaz-wiersz {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; border-top: 1px solid var(--ramka);
}
.garaz-nazwa { flex: 1; font-size: 12px; color: var(--przygaszony); }
.garaz-wartosc { font-size: 13px; font-variant-numeric: tabular-nums; }

/* Pasek zakładek zawija się w wiersze — przy siedmiu zakładkach i telefonie
   poziome przewijanie znaczyłoby zakładki, o których nikt się nie dowie.
   NIEWYBRANA jest obwódką, WYBRANA plamą — odwrotnie niż domyślny guzik, bo
   siedem złotych plam obok siebie nie mówi, która jest która. */
.garaz-taby { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.garaz-taby button.garaz-tab {
  min-height: 26px; padding: 3px 8px; font-size: 11px;
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--ramka); color: var(--przygaszony);
}
.garaz-taby button.garaz-tab.wybrana {
  background: var(--akcent); border-color: var(--akcent); color: #16181d;
}
.garaz-tab-ile {
  font-size: 10px; color: var(--akcent);
  border: 1px solid currentColor; border-radius: 8px; padding: 0 4px;
}
.garaz-taby button.garaz-tab.wybrana .garaz-tab-ile { color: #16181d; }

/* Wiersz katalogu jest LISTĄ, nie paskiem guzików: gdyby każda pozycja była
   złotą plamą (tak wygląda guzik domyślny), trzydzieści części pod rząd
   zamieniłoby panel w ścianę koloru i nie dałoby się przebiec po niej okiem. */
.garaz-mod { border-top: 1px solid var(--ramka); padding: 2px 0; }
.garaz-mod.ma .garaz-mod-cena { color: var(--akcent); }
.garaz-mod.nie .garaz-mod-nazwa { color: var(--przygaszony); }
.garaz-mod.otwarta { background: rgba(216, 162, 74, 0.06); }
.garaz-mod-glowa {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  min-height: 30px; padding: 4px 2px; font-size: 12px; text-align: left;
  background: transparent; border: 0; border-radius: 0;
  color: var(--tekst); text-transform: none; letter-spacing: 0.02em; font-weight: 500;
}
.garaz-mod-glowa:hover { color: var(--akcent); }
.garaz-mod-nazwa { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.garaz-mod-cena { font-variant-numeric: tabular-nums; white-space: nowrap; }
.garaz-mod-szczegoly { padding: 2px 2px 8px; display: flex; flex-direction: column; gap: 5px; }
.garaz-mod-opis, .garaz-mod-powod, .garaz-mod-wypada, .garaz-mod-zysk {
  margin: 0; font-size: 11px; line-height: 1.4; color: var(--przygaszony);
}
.garaz-mod-powod { color: #d08a5a; }
.garaz-mod-zysk { font-variant-numeric: tabular-nums; }
.garaz-mod-zysk.lepiej { color: var(--akcent); }
.garaz-mod-zysk.gorzej { color: #d08a5a; }

#garaz-lista button { min-height: 30px; padding: 5px 9px; font-size: 12px; }
/* Ten sam powód, co przy `#miejsce-lista button.miejsce-glowny`: guzik bazowy
   jest złoty, więc złoty napis byłby napisem niewidocznym. */
#garaz-lista button.garaz-glowny { margin-top: 4px; color: #16181d; font-weight: 800; }
.garaz-polka-guziki { display: flex; gap: 5px; padding-bottom: 6px; }
.garaz-polka-guziki button { flex: 1; }
.garaz-uwaga {
  font-size: 11px; color: var(--przygaszony); line-height: 1.4; padding: 6px 0;
}

/* Suwak przełożenia: etykieta, suwak, odczyt. Bez pola tekstowego — panel
   kierowcy nie bierze ogniska z klawiatury (patrz `hud/garaz.js`). */
.garaz-suwak {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0; border-top: 1px solid var(--ramka);
}
.garaz-suwak input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--akcent); }
.garaz-suwak .garaz-nazwa { flex: 0 0 84px; }
.garaz-suwak .garaz-wartosc { flex: 0 0 42px; text-align: right; }

/* Na wąskim ekranie oba panele hali nie zmieszczą się obok siebie — garaż
   schodzi wtedy na całą szerokość i zasłania warsztat, a nie wychodzi poza
   kadr. */
@media (max-width: 760px) {
  #garaz { left: 8px; right: 8px; width: auto; max-height: 76vh; }
}

/* --- mandat i depozyt (M7c) ------------------------------------------------ */

/* Panel PIESZEGO stojącego przy własnym zablokowanym aucie. Wąski i po lewej
   stronie: pieszy patrzy na klamrę przy przednim lewym kole, więc panel po
   prawej kazałby mu wybierać między jednym a drugim. Wiersze i guzik dzielą
   klasy z panelem miejsca (`.miejsce-wiersz`, `.miejsce-glowny`) — to ten sam
   układ „nazwa · wartość" i nie ma powodu opisywać go drugi raz. */
#mandat {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, calc(100vw - 32px));
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#mandat-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#mandat-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; color: var(--akcent); }
#mandat-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#mandat-lista { display: flex; flex-direction: column; gap: 6px; }
#mandat-lista button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#mandat-podpis {
  margin-top: 10px; font-size: 12px; color: var(--przygaszony); line-height: 1.4;
}

/* Laweta na wezwanie (M7g). PO LEWEJ, dokładnie tam, gdzie #mandat — te dwa
   panele nigdy nie stoją obok siebie (do auta z klamrą laweta nie przyjeżdża),
   a jeden z nich bywa panelem KIEROWCY, więc nie może zająć prawej strony
   ekranu należącej do #miejsce. Wiersze i guzik dzielą klasy z panelem miejsca
   (`.miejsce-wiersz`, `.miejsce-glowny`) — to ten sam układ „nazwa · wartość". */
#laweta {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, calc(100vw - 32px));
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#laweta-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#laweta-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; color: var(--akcent); }
#laweta-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#laweta-lista { display: flex; flex-direction: column; gap: 6px; }
#laweta-lista button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#laweta-podpis {
  margin-top: 10px; font-size: 12px; color: var(--przygaszony); line-height: 1.4;
}

/* Karta mandatu sierżanta Purlisa (M8b). PO PRAWEJ i wysoko, nie po lewej jak
   #mandat: karta przychodzi w chwili, w której gracz zwykle biegnie albo jest
   ostrzeliwany, a lewa strona ekranu należy do czatu i paska życia. Bez
   pointer-events, bo nie ma w niej niczego do kliknięcia — kursor ma zostać
   tam, gdzie był. Wiersze dzielą klasy z panelem miejsca (`.miejsce-wiersz`). */
#purlis {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  top: max(84px, calc(env(safe-area-inset-top) + 84px));
  width: min(280px, calc(100vw - 32px));
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 12px 14px 14px;
  pointer-events: none;
}

#purlis-tytul {
  display: block; margin-bottom: 10px;
  letter-spacing: 0.14em; font-size: 13px; color: var(--akcent);
}
#purlis-lista { display: flex; flex-direction: column; gap: 5px; }
#purlis-lista .purlis-razem {
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--ramka);
}
#purlis-lista .purlis-razem .miejsce-wartosc { color: var(--akcent); }
#purlis-lista .purlis-dlug .miejsce-wartosc { color: #e0703c; }
#purlis-podpis {
  margin-top: 9px; font-size: 12px; color: var(--przygaszony); line-height: 1.4;
}

/* Mandat (M3-3): HUD rundy pod górnym paskiem, karta mandatu na środku
   u góry (scena trwa 2–3 s i gracz ma ją przeczytać, nie szukać), notes po
   lewej jak panele pieszego. Tylko węzły `data-system="mandat"` — Strip ich
   nie pokazuje (`[data-system-wylaczony]`). Bez pointer-events: nic tu nie
   klika się myszą, kursor zostaje w grze. */
#mandat-hud {
  position: absolute;
  left: 50%;
  top: max(52px, calc(env(safe-area-inset-top) + 52px));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
#mandat-hud > div {
  padding: 3px 12px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.5); color: var(--tekst);
  font-variant-numeric: tabular-nums;
}
#mandat-hud-miejsce { color: #ffd66b !important; font-weight: 700; font-size: 18px; }
/* M10-3: czas rekordu ducha — blady błękit jak sylwetka ducha. */
#mandat-hud-duch { color: #cfe2ff !important; background: rgba(20, 35, 70, 0.6) !important; }
#mandat-hud-modlitwa { color: #ffe3a3 !important; background: rgba(60, 30, 0, 0.7) !important; font-weight: 700; }
/* M6-3: łańcuch przedmiotów (węzły w #mandat-hud, data-system="mandat" po rodzicu). */
#mandat-hud-krok { color: #fff3c4 !important; font-weight: 700; }
#mandat-hud-podnies { color: #bff0c0 !important; background: rgba(0, 50, 10, 0.6) !important; font-weight: 700; }
#mandat-hud-zamek { color: #ffd0c8 !important; background: rgba(70, 10, 0, 0.65) !important; }
#mandat-hud-brakuje { color: #ffb3a8 !important; background: rgba(80, 0, 0, 0.7) !important; font-weight: 700; }
#mandat-hud-moneta { color: #ffd84a !important; background: rgba(60, 45, 0, 0.7) !important; font-weight: 700; font-size: 18px; }
/* M7-3: fuchy (lista, praca z paskiem, podpowiedź E, zapłata/przerwanie). */
#mandat-hud-fuchy { color: #e8f4ff !important; font-size: 13px; max-width: 520px; }
#mandat-hud-fucha-praca { color: #d6f5ff !important; background: rgba(0, 40, 60, 0.7) !important; font-weight: 700; font-family: ui-monospace, monospace; }
#mandat-hud-fucha-e { color: #bff0c0 !important; background: rgba(0, 50, 10, 0.6) !important; font-weight: 700; }
#mandat-hud-fucha-info { color: #ffd84a !important; background: rgba(60, 45, 0, 0.7) !important; font-weight: 700; font-size: 18px; }
#mandat-karta[data-rodzaj="babcia"] #mandat-karta-tytul { color: #ff8a6b; }
#mandat-karta {
  position: absolute;
  left: 50%;
  top: max(150px, calc(env(safe-area-inset-top) + 150px));
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  background: var(--karta);
  border: 2px solid var(--akcent);
  border-radius: 12px;
  padding: 12px 16px 14px;
  pointer-events: none;
}
#mandat-karta-tytul {
  display: block; text-align: center; font-size: 28px; letter-spacing: 0.12em; color: var(--akcent);
}
#mandat-karta[data-rodzaj="klasztor"] #mandat-karta-tytul { color: #d9b36b; }
#mandat-karta-scena { text-align: center; font-size: 12px; color: var(--przygaszony); margin-bottom: 8px; }
#mandat-karta-lista { display: flex; flex-direction: column; gap: 5px; }
#mandat-karta-lista .mandat-karta-przepis .miejsce-wartosc { text-align: right; }
#mandat-karta-lista .mandat-karta-saldo {
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--ramka);
}
#mandat-karta-licznik:not(:empty) {
  margin-top: 10px; text-align: center; font-size: 15px; font-weight: 700; color: #ffd66b;
  font-variant-numeric: tabular-nums;
}
#mandat-karta-opis:not(:empty) { margin-top: 6px; font-size: 12px; color: var(--przygaszony); line-height: 1.4; }
/* M8-2: łapówka — podpowiedź klawisza, oczekiwanie i wynik (jedno zdanie). */
#mandat-karta-lapowka:not(:empty) { margin-top: 6px; font-size: 13px; text-align: center; font-weight: 600; color: #e8c65a; }
#mandat-karta-lapowka[data-stan="czeka"] { color: var(--przygaszony); font-weight: 400; }
#mandat-karta-lapowka[data-stan="przyjeta"] { color: #7fd47f; }
#mandat-karta-lapowka[data-stan="odmowa"] { color: #ff8a7a; }
/* Mandat (M4-2): areszt — faza, odliczanie odsiadki z terminu serwera
   i podpowiedź wyjścia bramą. Nisko nad środkiem, żeby nie zasłaniać widoku
   z radiowozu ani kraty; bez pointer-events. */
#mandat-areszt {
  position: absolute;
  left: 50%;
  bottom: max(120px, calc(env(safe-area-inset-bottom) + 120px));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  padding: 8px 14px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(90, 140, 255, 0.55);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
#mandat-areszt[data-faza="wolny"] { border-color: rgba(120, 220, 140, 0.7); }
#mandat-areszt-faza { display: block; font-size: 18px; letter-spacing: 0.06em; color: #cfe0ff; }
#mandat-areszt[data-faza="wolny"] #mandat-areszt-faza { color: #a8f0b8; }
#mandat-areszt-licznik:not(:empty) {
  margin-top: 4px; font-size: 22px; font-weight: 700; color: #ffd66b; font-variant-numeric: tabular-nums;
}
#mandat-areszt-opis:not(:empty) { margin-top: 4px; font-size: 12px; color: var(--przygaszony); line-height: 1.4; }
/* Mandat (M5-2): cykl rundy — poczekalnia i wyniki na środku (gracz nie
   biegnie, ruch stoi do startu), widz jako wąski pasek u góry, duże 3–2–1
   na środku ekranu. Bez pointer-events: kursor zostaje w grze. */
#mandat-cykl {
  position: absolute;
  left: 50%;
  top: max(120px, calc(env(safe-area-inset-top) + 120px));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 240px);
  overflow: hidden;
  padding: 12px 16px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.66);
  border: 1px solid rgba(255, 214, 107, 0.55);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
#mandat-cykl[data-tryb="widz"] { padding: 6px 12px; width: auto; max-width: min(420px, calc(100vw - 32px)); }
#mandat-cykl[data-tryb="widz"] #mandat-cykl-tytul { font-size: 14px; letter-spacing: 0; }
#mandat-cykl-tytul { display: block; font-size: 22px; letter-spacing: 0.08em; color: #ffd66b; }
#mandat-cykl-info .mandat-cykl-linia { margin-top: 4px; font-size: 14px; color: var(--tekst); font-variant-numeric: tabular-nums; }
#mandat-cykl-naglowek { margin-top: 10px; font-size: 12px; color: var(--przygaszony); text-transform: uppercase; letter-spacing: 0.08em; }
#mandat-cykl-lista {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px; text-align: left;
}
#mandat-cykl-lista .mandat-cykl-wiersz {
  display: flex; gap: 8px; align-items: baseline;
  padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}
#mandat-cykl-lista .mandat-cykl-nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mandat-cykl-lista .mandat-cykl-ja { background: rgba(255, 214, 107, 0.18); }
#mandat-cykl-lista .mandat-cykl-dnf { color: var(--przygaszony); }
#mandat-cykl-lista .mandat-cykl-remis { font-size: 11px; color: #ffe3a3; }
#mandat-cykl-lista .mandat-cykl-czas { color: #cfe0ff; }
#mandat-cykl-lista .mandat-cykl-ty { font-size: 11px; color: #ffd66b; }
#mandat-odliczanie {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  font-size: 140px; font-weight: 800; line-height: 1;
  color: #ffd66b;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.85);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#mandat-odliczanie[data-start="1"] { color: #8ff0a4; font-size: 110px; letter-spacing: 0.06em; }
#mandat-odliczanie[data-dzwon="1"] {
  width: min(760px, calc(100vw - 32px));
  color: #fff1a8;
  font-size: clamp(42px, 7vw, 84px);
  line-height: 1.08;
  text-align: center;
}
#mandat-notes {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, calc(100vw - 32px));
  max-height: 70vh; overflow-y: auto;
  background: #efe6cf; color: #2b2418;
  border: 1px solid #b9a67a; border-radius: 8px;
  padding: 14px 16px 12px;
  pointer-events: none;
}
#mandat-notes-tytul { display: block; margin-bottom: 10px; letter-spacing: 0.14em; font-size: 14px; color: #7a2a20; }
#mandat-notes-lista { display: flex; flex-direction: column; gap: 8px; }
#mandat-notes-lista .mandat-notes-wpis { display: flex; flex-direction: column; gap: 2px; }
#mandat-notes-lista .mandat-notes-wpis b { font-size: 13px; }
#mandat-notes-lista .mandat-notes-wpis span,
#mandat-notes-lista .mandat-notes-pusty { font-size: 12px; color: #5c5040; }
#mandat-notes-lista .mandat-notes-wpis .mandat-notes-przedmiot { color: #7a3b12; font-weight: 700; }
#mandat-notes-podpis { margin-top: 10px; font-size: 11px; color: #7a6c55; }
#mandat-notes-zasady { margin-bottom: 12px; font-size: 13px; line-height: 1.4; color: #32281d; }
html[data-gra="mandat"] #mandat-notes { top: max(82px, calc(env(safe-area-inset-top) + 82px)); transform: none; }

/* Mandat M9-2: styl PRL — tylko pod html[data-gra="mandat"] (węzły i tak
   są `data-system="mandat"`, ale zakres pilnuje, że Strip nic nie dziedziczy).
   Wyłącznie fonty systemowe (bez @font-face i zewnętrznych arkuszy); treść
   dalej przez textContent. Kontrasty (WCAG) liczy test/mandat/tryb.mjs.
   • HUD: ciemniejsza płytka pod każdym wierszem (jasna lamperia, noc), a
     piętro jak emaliowana tabliczka: granat z kremową ramką, na piętrze
     celu — zielona;
   • notes: zeszyt w linię z czerwonym marginesem i grzbietem bloczka;
   • karta: druczek mandatu karnego — kremowy papier, czerwona ramka
     podwójna, pismo maszynowe, wiersze po kropkach. */
html[data-gra="mandat"] #mandat-hud > div {
  background: rgba(14, 16, 22, 0.74);
  border: 1px solid rgba(244, 236, 214, 0.22);
}
html[data-gra="mandat"] #mandat-hud #mandat-hud-pietro {
  padding: 4px 16px;
  border-radius: 5px;
  background: #1f3d74;
  color: #fdf8ea;
  border: 2px solid #fdf8ea;
  box-shadow: 0 0 0 2px #0e1c38, 0 3px 10px rgba(0, 0, 0, 0.55);
  font-size: 20px; font-weight: 800; letter-spacing: 0.04em;
  text-shadow: none;
}
html[data-gra="mandat"] #mandat-hud #mandat-hud-pietro[data-stan="na-miejscu"] { background: #1c5e33; }
html[data-gra="mandat"] #mandat-hud #mandat-hud-cel { font-weight: 600; }
html[data-gra="mandat"] #mandat-notes {
  background-color: #f4eedb;
  background-image:
    linear-gradient(90deg, transparent 30px, rgba(196, 52, 42, 0.6) 30px, rgba(196, 52, 42, 0.6) 32px, transparent 32px),
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(64, 104, 168, 0.3) 21px 22px);
  background-position: 0 38px;
  color: #1e1a14;
  border: 1px solid #b9a67a;
  border-top: 10px solid #8f1f18;
  border-radius: 3px 3px 6px 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 12px 16px 12px 44px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height: 22px;
}
html[data-gra="mandat"] #mandat-notes-tytul { color: #8f1f18; font-size: 16px; font-weight: 800; letter-spacing: 0.2em; }
html[data-gra="mandat"] #mandat-notes-lista { gap: 6px; }
html[data-gra="mandat"] #mandat-notes-lista .mandat-notes-wpis b { font-size: 14px; color: #1e1a14; }
html[data-gra="mandat"] #mandat-notes-lista .mandat-notes-wpis span,
html[data-gra="mandat"] #mandat-notes-lista .mandat-notes-pusty { font-size: 13px; color: #4f4433; }
html[data-gra="mandat"] #mandat-notes-lista .mandat-notes-wpis .mandat-notes-przedmiot { color: #7a3510; }
html[data-gra="mandat"] #mandat-notes-podpis { color: #5f523c; }
html[data-gra="mandat"] #mandat-karta {
  background-color: #f6f1e3;
  background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(60, 48, 30, 0.06) 23px 24px);
  color: #1d1a14;
  border: 2px solid #a8241e;
  border-radius: 4px;
  box-shadow: inset 0 0 0 4px #f6f1e3, inset 0 0 0 5px rgba(168, 36, 30, 0.55), 0 6px 20px rgba(0, 0, 0, 0.5);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}
html[data-gra="mandat"] #mandat-karta-tytul {
  color: #a8241e; font-weight: 800; letter-spacing: 0.18em;
  border-bottom: 2px dashed rgba(168, 36, 30, 0.6); padding-bottom: 4px; margin-bottom: 4px;
}
html[data-gra="mandat"] #mandat-karta[data-rodzaj="klasztor"] #mandat-karta-tytul { color: #74490c; }
html[data-gra="mandat"] #mandat-karta[data-rodzaj="babcia"] #mandat-karta-tytul { color: #a8311a; }
html[data-gra="mandat"] #mandat-karta-scena { color: #574c39; }
html[data-gra="mandat"] #mandat-karta-lista .miejsce-wiersz { border-top: none; border-bottom: 1px dotted rgba(60, 48, 30, 0.4); padding-bottom: 2px; }
html[data-gra="mandat"] #mandat-karta-lista .miejsce-nazwa { color: #574c39; }
html[data-gra="mandat"] #mandat-karta-lista .miejsce-wartosc { color: #1d1a14; font-weight: 700; }
html[data-gra="mandat"] #mandat-karta-lista .mandat-karta-saldo { border-top: 1px solid rgba(60, 48, 30, 0.55); }
html[data-gra="mandat"] #mandat-karta-licznik:not(:empty) { color: #a8241e; }
html[data-gra="mandat"] #mandat-karta-opis:not(:empty) { color: #4a4030; }
html[data-gra="mandat"] #mandat-karta-lapowka:not(:empty) { color: #6e5200; }
html[data-gra="mandat"] #mandat-karta-lapowka[data-stan="czeka"] { color: #574c39; }
html[data-gra="mandat"] #mandat-karta-lapowka[data-stan="przyjeta"] { color: #1c5e2a; }
html[data-gra="mandat"] #mandat-karta-lapowka[data-stan="odmowa"] { color: #a8241e; }

/* Wezwanie Purlisa (M8b część 2). Po lewej, jak panel działki i panel mandatu
   — po prawej wisi karta mandatu i te dwie rzeczy potrafią być na ekranie
   naraz (zgłaszam kogoś, a sam właśnie dostałem rachunek za strzał). */
#wezwanie {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  width: min(320px, calc(100vw - 32px));
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
}

#wezwanie-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#wezwanie-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; color: var(--akcent); }
#wezwanie-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#wezwanie-lista {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
  max-height: 132px; overflow-y: auto;
}
#wezwanie-lista button { padding: 4px 10px; min-height: 28px; font-size: 12px; }
#wezwanie-lista button.wybrana { color: var(--akcent); border-color: var(--akcent); }
#wezwanie-wiersz { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#wezwanie-opis {
  flex: 1; min-width: 0; padding: 6px 8px; font: inherit; font-size: 13px;
  color: var(--tekst); background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ramka); border-radius: 6px;
}
#wezwanie-licznik {
  font-size: 11px; color: var(--przygaszony); font-variant-numeric: tabular-nums;
}
#wezwanie-slij { width: 100%; min-height: 32px; padding: 6px 10px; font-size: 12px; }
#wezwanie-podpis {
  margin-top: 10px; font-size: 12px; color: var(--przygaszony); line-height: 1.4;
}

/* Uzasadnienie z werdyktu na karcie mandatu — zdanie, nie liczba, więc łamie
   się jak zwykły tekst i jest w kolorze akcentu, bo to ono jest karą. */
#purlis-lista .purlis-zdanie {
  display: block; font-size: 12px; line-height: 1.45; color: var(--tekst);
  font-style: italic;
}

/* Panel działki na sprzedaż (D4a). Ten sam układ i to samo miejsce, co panel
   mandatu: pieszy stoi przed tabliczką, a panel po lewej nie zasłania jej
   samej. Wiersze i guzik dzielą klasy z panelem miejsca (`.miejsce-wiersz`,
   `.miejsce-glowny`) — to ten sam układ „nazwa · wartość". */
#dzialka {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  width: min(420px, calc(100vw - 32px));
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 14px 16px 16px;
  pointer-events: auto;
  max-height: 82vh;
  overflow-y: auto;
}

#dzialka-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#dzialka-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; color: var(--akcent); }
#dzialka-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#dzialka-lista { display: flex; flex-direction: column; gap: 6px; }
#dzialka-lista button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#dzialka-podpis {
  margin-top: 10px; font-size: 12px; color: var(--przygaszony); line-height: 1.4;
}

/* Numerek w kolejce do warsztatu. Nad HUD-em auta, bo widać go także wtedy,
   gdy panel jest zamknięty i auto stoi na placu. */
/* PO LEWEJ, a nie po prawej: od M11 prawy górny róg zajmuje minimapa,
   a lewy pod górnym paskiem jest pusty (czat siedzi przy dolnej krawędzi). */
#kolejka {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  top: max(64px, calc(env(safe-area-inset-top) + 64px));
  padding: 6px 10px;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}


/* --- minimapa, ustawienia i samouczek (M11) -------------------------------- */

/* MINIMAPA. Prawy górny róg pod paskiem HUD-u: lewy dolny zajmuje czat, dolny
   środek — ostrzeżenia i podpowiedzi, a prawy dolny na telefonie należy do
   kciuka od strzału (`ROZKLAD` w `dotyk.js`). Rozmiar w pikselach CSS ustawia
   `hud/minimapa.js` razem z liczbą pikseli płótna — dwie liczby z dwóch miejsc
   znaczyłyby mapę rozmytą albo poszarpaną.

   Płótno jest też przyciskiem pełnej mapy. `dotyk.js` rozpoznaje ten cel w
   fazie przechwytywania, więc klik nie staje się jednocześnie gestem kamery. */
#minimapa {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  top: max(56px, calc(env(safe-area-inset-top) + 56px));
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 4;
}

/* PANEL USTAWIEŃ. Ten sam kształt co panel rekordów — okno na środku ekranu,
   otwierane między jednym a drugim przejazdem, a nie w trakcie. */
#opcje {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 94vw);
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--karta);
  border: 1px solid var(--ramka);
  pointer-events: auto;
  z-index: 21;
}
#opcje-glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#opcje-tytul { flex: 1; letter-spacing: 0.14em; font-size: 14px; }
#opcje-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#opcje-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }

.opcje-grupa {
  margin: 10px 0 2px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--przygaszony);
}
.opcje-grupa:first-child { margin-top: 0; }

.opcja {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 2px;
  font-size: 13px;
}
.opcja .nazwa { grid-column: 1; }
.opcja .wartosc {
  grid-column: 2;
  color: var(--akcent);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
/* Suwak zajmuje cały wiersz pod nazwą — przy 44-pikselowym celu dotyku nie ma
   sensu ściskać go do połowy szerokości. */
.opcja input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--akcent); }
.opcja.przelacznik { grid-template-columns: 1fr auto; }
.opcja input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--akcent); }
.opcje-jezyki { display: inline-flex; gap: 4px; }
.opcje-jezyki button, .opcja button {
  min-height: 30px; padding: 4px 10px; font-size: 11px;
}
.opcje-jezyki button.wybrany { border-color: var(--akcent); color: var(--akcent); }
#opcje-reset { margin-top: 12px; min-height: 34px; font-size: 11px; }
.opcje-uwaga {
  margin: 2px 0 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--akcent);
}

/* SAMOUCZEK. Pas przy dolnej krawędzi, szeroki na tyle, żeby zmieściły się
   dwa–trzy zdania, i wyraźnie oddzielony od reszty HUD-u: w czasie przelotu
   nie ma nic innego do czytania. */
#samouczek {
  position: absolute;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  padding: 12px 16px 14px;
  border-radius: 12px;
  background: rgba(12, 13, 16, 0.86);
  border: 1px solid var(--ramka);
  pointer-events: auto;
  z-index: 18;
}
#samouczek-pasek-tlo {
  height: 3px;
  margin: -4px -8px 10px;
  border-radius: 2px;
  background: var(--ramka);
  overflow: hidden;
}
#samouczek-pasek { display: block; height: 100%; width: 0; background: var(--akcent); }
#samouczek-glowa { display: flex; align-items: center; gap: 10px; }
#samouczek-tytul { flex: 1; letter-spacing: 0.16em; font-size: 14px; color: var(--akcent); }
#samouczek-licznik { font-size: 12px; color: var(--przygaszony); font-variant-numeric: tabular-nums; }
#samouczek-pomin { min-height: 32px; padding: 5px 12px; font-size: 11px; }
#samouczek-tresc { margin-top: 8px; font-size: 14px; line-height: 1.5; }

/* ZAKŁADKI CZATU (M11). Nad listą zdań, malutkie — to jest przełącznik, a nie
   nawigacja. Kropka na zakładce znaczy „tu coś padło, a ty patrzysz gdzie
   indziej". */
#czat-zakladki { display: flex; gap: 4px; pointer-events: auto; }
#czat-zakladki button {
  min-height: 24px;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
}
#czat-zakladki button.wybrana { color: var(--akcent); border-color: var(--akcent); }
#czat-zakladki button.nowe { color: var(--tekst); border-color: var(--tekst); }
#czat-zakladki button.nowe::after { content: ' •'; color: var(--akcent); }
#czat-zakladki button:disabled { opacity: 0.35; }
/* Wiersz od gry, nie od gracza („za szybko"). Przygaszony i bez nicku, żeby
   nie dało się go pomylić z czyimś zdaniem. */
#czat-lista .wiersz.komunikat { color: var(--przygaszony); font-style: italic; }

@media (orientation: portrait) and (max-width: 520px) {
  /* NA TELEFONIE GÓRNY PASEK SIĘ ZAWIJA (`#gora { flex-wrap: wrap }`) i ma
     wtedy ponad dziewięćdziesiąt pikseli wysokości zamiast trzydziestu —
     zmierzone na 390 × 844. Minimapa startująca 56 px od góry wchodziłaby
     w niego połową średnicy. Mapa jest tu przy okazji mniejsza (120 px)
     i pokazuje mniej świata (`hud/minimapa.js` zmniejsza też promień): sam
     mniejszy krążek z tym samym promieniem zlewa się w plamę. */
  #minimapa { top: max(112px, calc(env(safe-area-inset-top) + 112px)); }
  #samouczek { width: calc(100vw - 20px); padding: 10px 12px 12px; }
  #samouczek-tresc { font-size: 13px; }
  #opcje { width: calc(100vw - 20px); max-height: 88dvh; }
}

/* --- pełna mapa świata (M11 A) -------------------------------------------- */
/* Minimapa jest świadomym wejściem do mapy. `touch-action` zapobiega
   wygenerowaniu gestu kamery, a dotyk.js wycina ją jeszcze w capture. */
#minimapa:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

#mapa-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(4, 5, 7, 0.72);
  pointer-events: auto;
  touch-action: none;
}
#mapa-karta {
  width: calc(100vw - 32px);
  height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: 12px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
}
#mapa-glowa { display: flex; align-items: center; gap: 12px; min-height: 34px; }
#mapa-tytul { letter-spacing: 0.14em; font-size: 14px; }
#mapa-legenda { flex: 1; color: var(--przygaszony); font-size: 11px; text-align: center; }
#mapa-zamknij { padding: 2px 9px; min-height: 26px; font-size: 14px; line-height: 1; }
#mapa-plotno { width: 100%; height: calc(100% - 34px); min-height: 0; display: block; }

/* D2: plecak obok otwartego pojemnika; ręczne receptury poniżej. */
#plecak-panel { width: min(1100px, calc(100vw - 32px)); max-height: 88dvh; overflow: auto; }
.plecak-pasek { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.plecak-kolumny { display: flex; gap: 18px; align-items: flex-start; }
.plecak-kolumny > * { flex: 1; min-width: 0; }
#plecak-sloty, .plecak-siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#plecak-panel .plecak-slot { min-height: 54px; white-space: normal; line-height: 1.2; }
#plecak-panel .plecak-slot:disabled { opacity: 1; cursor: default; }
#plecak-panel .plecak-slot:not([data-przedmiot]) { color: var(--przygaszony); opacity: .55; }
#plecak-panel h3 { margin: 0 0 8px; }
#plecak-ilosc { width: 75px; margin-bottom: 10px; }
#plecak-panel select { max-width: 220px; }
#plecak-pomoc, #plecak-transfer-pomoc { color: var(--przygaszony); font-size: 12px; }
#plecak-receptury { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
#plecak-panel details { margin-top: 10px; }
#receptury-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff2b; }
#receptury-panel h3, #receptury-panel p { margin: 0 0 8px; }
#receptury-drzewko { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 7px; }
#receptury-drzewko button { white-space: normal; min-height: 48px; }
@media (max-width: 700px) {
  .plecak-kolumny { flex-direction: column; }
  .plecak-kolumny > * { width: 100%; }
  #plecak-receptury { grid-template-columns: 1fr; }
}

/* Skup współdzieli panel sklepu i jego serwerowy próg wejścia. */
/* Market surowców na rynku (MARKET-SUROWCOW): panel budki z NPC. */
#market-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  padding:18px; background:var(--karta); border:1px solid var(--ramka);
  border-radius:12px; pointer-events:auto; box-sizing:border-box; }
#market-glowa { display:flex; align-items:center; gap:14px; }
#market-tytul { flex:1; color:var(--akcent); letter-spacing:.08em; }
#market-saldo { font-size:13px; }
#market-pomoc, #market-limit { font-size:12px; line-height:1.45; margin:8px 0; }
#market-pomoc { color:var(--przygaszony); }
#market-limit { color:var(--akcent); }
#market-lista { display:grid; gap:10px; }
.market-wiersz { display:grid; grid-template-columns: 1fr auto; gap:4px 12px;
  padding:10px; border:1px solid var(--ramka); border-radius:8px; }
.market-nazwa { font-weight:700; }
.market-opis, .market-ceny { font-size:12px; }
.market-ceny { text-align:right; }
.market-guziki { grid-column: 1 / -1; display:flex; gap:8px; flex-wrap:wrap; }
.market-guziki input { width:76px; min-height:36px; padding:3px 5px; }
.market-guziki button { flex:1; min-height:36px; min-width:130px; }
#market-ponow { margin-top:10px; }
@media (max-width: 500px) {
  #sklep-glowa { flex-wrap: wrap; }
  .market-wiersz { grid-template-columns: 1fr; }
  .market-ceny { text-align:left; }
}

#dzialka-lista label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
#dzialka-lista input { width: 100%; box-sizing: border-box; }

/* D9-C: budka przywołania własnego auta. */
#budka-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px)); padding:18px; background:var(--karta);
  border:1px solid var(--ramka); border-radius:12px; pointer-events:auto; }
#budka-glowa { display:flex; align-items:center; gap:14px; }
#budka-tytul { flex:1; color:var(--akcent); }
#budka-pomoc { color:var(--przygaszony); line-height:1.5; }
#budka-auta { display:grid; gap:8px; max-height:50vh; overflow:auto; }
#budka-auta button { min-height:44px; }

/* Ratunek pozostawia widoczną scenę i zachowuje wybór miejsca D6. */
#smierc.ratunek-trwa { align-content: end; padding-bottom: 16px; background: linear-gradient(transparent 40%, #10191dbb); }
#smierc.ratunek-trwa #odrodzenie-panel { padding: 10px 18px; }
#smierc.ratunek-trwa #odrodzenie-strata { margin: 6px 0; }
#smierc.ratunek-trwa #odrodzenie-tytul { margin-bottom: 6px; }
#smierc.ratunek-trwa #odrodzenie-cele { max-height: 12vh; }
#smierc.ratunek-podroz { background: #0c1218; }
#ratunek-napis { font-size: 22px; color: #f1f0dc; text-shadow: 0 2px 5px #000; }
#ratunek-pomin { pointer-events: auto; padding: 6px 18px; }

/* --- panel modu: katalog widżetów, karta roli i tablica (E5-B1/B2) ---------
   Guzik bazowy jest ZŁOTY, więc akcentem piszemy WYŁĄCZNIE na ciemnym tle
   (pułapka z M7b); wyróżnienie na guziku robi krój, nie kolor. */
.mod-widzet { margin: 8px 0; padding: 6px 8px; background: #0b1822; border-radius: 6px; }
.mod-widzet-etykieta { font-size: 13px; opacity: .8; }
.mod-widzet-wartosc { font-size: 20px; font-weight: 700; color: var(--akcent); }
.mod-widzet-dymek { font-style: italic; }
.mod-widzet button { margin: 4px 4px 0 0; }
.mod-widzet label { display: block; }
.mod-pasek { height: 8px; margin-top: 4px; background: #203846; border-radius: 4px; overflow: hidden; }
.mod-pasek-wypelnienie { height: 100%; background: var(--akcent); }
#mod-karta { margin: 10px 0; padding: 8px; background: #0b1822; border-radius: 6px; }
#mod-karta h3 { margin: 0 0 6px; font-size: 14px; color: var(--akcent); }
.mod-karta-wiersz { display: flex; gap: 8px; justify-content: space-between; }
.mod-karta-wiersz[data-poziom="1"] { padding-left: 12px; }
.mod-karta-wiersz[data-poziom="2"] { padding-left: 24px; }
.mod-karta-etykieta { opacity: .75; }
.mod-karta-wartosc { font-weight: 600; }
#mod-tablica { display: block; max-width: 100%; margin-top: 6px; image-rendering: pixelated; }

/* --- E4: panel cyklu życia modu (klawisz J) ------------------------------ */
#mody-panel {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto;
  background: rgba(16, 18, 24, .94); color: #e8e8e8; border: 1px solid #3a4050; border-radius: 8px;
  padding: 12px 16px; font-size: 14px; z-index: 40; pointer-events: auto;
}
#mody-panel[hidden] { display: none; }
#mody-panel .mody-naglowek { display: flex; gap: 8px; align-items: center; }
#mody-panel .mody-naglowek h2 { flex: 1; margin: 0; font-size: 15px; letter-spacing: .06em; }
#mody-panel h3 { margin: 12px 0 4px; font-size: 12px; color: #9ab; text-transform: uppercase; letter-spacing: .08em; }
#mody-panel .mody-wiersz, #mody-panel .mody-instancja { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid #262a33; }
#mody-panel .mody-instancja { display: block; }
#mody-panel .mody-nazwa { font-weight: 600; }
#mody-panel code { color: #9c9; font-size: 12px; }
#mody-panel .mody-stan-kanoniczna { color: #8c8; }
#mody-panel .mody-stan-oczekuje { color: #e8b26a; }
#mody-panel .mody-status { min-height: 1.4em; color: #e8b26a; margin: 6px 0; }
#mody-panel .mody-pusto { color: #777; margin: 2px 0; }
#mody-panel .mody-pole { width: 110px; background: #1a1a1a; color: #eee; border: 1px solid #333; padding: 3px 6px; }
#mody-panel .mody-guzik { padding: 3px 10px; font-size: 13px; }

/* Osobiste zadania: wybór zostaje dostępny także w odliczaniu. */
#mandat-tryb-zadan {
  position: absolute; left: 50%; bottom: max(70px, env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(390px, calc(100vw - 32px));
  padding: 12px; border: 1px solid #bcb093; border-radius: 8px;
  background: #eee5d0; color: #272218; text-align: center; pointer-events: auto;
}
#mandat-tryb-zadan > div { display: flex; gap: 8px; margin: 8px 0; }
#mandat-tryb-zadan button { flex: 1; padding: 9px 8px; color: #272218; background: #fffaf0; border: 2px solid #95866a; border-radius: 5px; cursor: pointer; }
#mandat-tryb-zadan button[aria-pressed="true"] { background: #234f35; color: #fff; border-color: #153721; }
#mandat-tryb-zadan small { display: block; font-size: 12px; }
html[data-gra="mandat"] #mandat-notes {
  max-height: calc(100vh - 180px); pointer-events: auto; overscroll-behavior: contain;
}
@media (max-width: 1120px) {
  html[data-gra="mandat"] #mandat-hud { width: calc(100vw - 32px); }
  html[data-gra="mandat"] #mandat-notes {
    top: auto; bottom: max(64px, env(safe-area-inset-bottom));
    width: min(310px, calc(50vw - 24px)); max-height: 36vh;
    padding: 10px 12px 10px 28px; line-height: 1.35;
  }
  html[data-gra="mandat"] #mandat-notes-tytul { font-size: 13px; letter-spacing: .06em; }
  html[data-gra="mandat"] #mandat-notes-zasady,
  html[data-gra="mandat"] #mandat-notes-lista .mandat-notes-wpis b,
  html[data-gra="mandat"] #mandat-notes-lista .mandat-notes-wpis span { font-size: 12px; }
  #mandat-tryb-zadan { left: auto; right: 16px; transform: none; width: min(350px, calc(50vw - 24px)); }
}