/* ==========================================================================
   Farmersi 2.0 — banner.css
   Banner graficzny (obraz właściciela) + animacja ptaków z 1.0,
   a poniżej nawigacja i stopka.

   Decyzja właściciela: „robimy banner graficzny… umieść na nim animację
   ptaków… usuń swoje animacje i banner. Te dwa elementy wystarczą.”
   Dlatego NIE ma tu gradientów, sygnetu SVG, wiatraka ani zegara.
   ========================================================================== */

/* ==========================================================================
   BANNER
   ========================================================================== */

.banner {
  position: relative;
  overflow: hidden;
  background: #1d150c; /* tło pod obrazem, zanim się wczyta */
  border-bottom: 3px double var(--linia-mocna);
  line-height: 0; /* usuwa szczelinę pod obrazem */
}

/* Cały banner jest linkiem do strony głównej. */
.banner-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.banner-link:focus-visible {
  outline: 3px solid var(--akcent-zloto);
  outline-offset: -3px;
}

/* Obraz wypełnia szerokość, wysokość wynika z proporcji 1600x531 (3:1).
   Na wąskim ekranie 375 px daje to ~125 px wysokości — banner nie zjada
   całego pierwszego ekranu. */
.banner picture {
  display: block;
}

.banner-obraz {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Ptaki z 1.0: animowany GIF, BEZ dodatkowej animacji CSS ---------------
   Właściciel zwrócił uwagę, że GIF animuje się sam, a moja animacja
   przesuwania była zbędna. Ptaki stoją więc w jednym miejscu na niebie. */

.banner-ptaki {
  position: absolute;
  top: 0;
  left: 4%;
  /* Naturalny rozmiar GIF-a (360x50) — bez skalowania. */
  width: 360px;
  height: 50px;
  opacity: 0.9;
  pointer-events: none;
}

/* Na wąskim ekranie ptaki w naturalnym rozmiarze zajęłyby całą szerokość
   banneru, dlatego tam je skalujemy. */
@media (max-width: 47.99rem) {
  .banner-ptaki {
    width: 180px;
    height: 25px;
  }
}

/* --- Hasło przewodnie ---------------------------------------------------- */

.banner-haslo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--odst-2) var(--odst-3);
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-s);
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  color: #fdf3d8;
  /* Ciemny gradient zamiast cienia na literach — czytelne na każdym tle. */
  background: linear-gradient(
    180deg,
    rgba(29, 21, 12, 0) 0%,
    rgba(29, 21, 12, 0.55) 45%,
    rgba(29, 21, 12, 0.82) 100%
  );
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

@media (min-width: 40rem) {
  .banner-haslo {
    font-size: var(--rozmiar-m);
    padding-bottom: var(--odst-3);
  }
}

/* ==========================================================================
   NAWIGACJA
   ========================================================================== */

.nawigacja {
  position: sticky;
  top: 0;
  /* PANELE NAD MENU (27.10.2026). Wlasciciel: "panel wydatkow i saloon
     musi byc nad menu i zakladkami - lepiej menu i zakladki w dol na z-index".
     Wczesniej pasek mial 120 (wyzej niz panel wydatkow 30 i saloon 20), wiec
     przy przewijaniu ZASLANIAL oba panele. Teraz pasek jest NISKO (20), panele
     wyzej (panel wydatkow 45, saloon 50), karteczki 15 - menu zostaje nad nimi.
     Dymki pomocy (130) bez zmian. */
  /* MENU NAD ZAKŁADKAMI ARKUSZA (27.10.2026). Właściciel: „menu górne
     powinno mieć wyższy z-index niż zakładki arkusza”. Zakładki są sticky
     z `z-index: 20`, więc przy równej wartości wygrywały (są później w DOM)
     i rozwijane menu gier chowało się pod nimi. Panel wydatków (45) i saloon
     (50) nadal są wyżej, zgodnie z wcześniejszą decyzją. */
  z-index: 21;
  background: #6b4a26;
  background-image: linear-gradient(180deg, #7d5830 0%, #5c3f21 100%);
  border-bottom: 2px solid var(--tlo-noc);
  box-shadow: var(--cien-2);
}

.nawigacja-srodek {
  display: flex;
  align-items: center;
  gap: var(--odst-2);
  padding: var(--odst-2) var(--odst-3);
}

/* --- Hamburger (mobile) -------------------------------------------------- */

.nawigacja-przelacznik {
  display: inline-flex;
  align-items: center;
  /* Właściciel (telefon): „menu na górze — zgłaszałem, że powinno być z prawej
     strony. teraz ciągle jest do lewej.”
     POPRZEDNIA POPRAWKA NIE DZIAŁAŁA, bo reguła `right: …` została wpisana
     tylko w media query desktopu (`min-width: 60rem`, niżej w tym pliku).
     Na telefonie hamburger stał w środku rzędu (flex bez wyrównania).
     `margin-left: auto` wypycha go na PRAWĄ krawędź paska na każdej
     szerokości — bez duplikowania reguły w media query. */
  margin-left: auto;
  gap: var(--odst-2);
  padding: var(--odst-2) var(--odst-3);
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(245, 236, 216, 0.4);
  border-radius: var(--promien-s);
  color: var(--tekst-jasny);
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-s);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.nawigacja-przelacznik:hover {
  background: rgba(245, 236, 216, 0.12);
}

.nawigacja-przelacznik-ikona {
  display: block;
  width: 1.1rem;
  height: 0.75rem;
  position: relative;
}

.nawigacja-przelacznik-ikona::before,
.nawigacja-przelacznik-ikona::after,
.nawigacja-przelacznik-ikona span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.nawigacja-przelacznik-ikona::before {
  top: 0;
}

.nawigacja-przelacznik-ikona span {
  top: 50%;
  margin-top: -1px;
}

.nawigacja-przelacznik-ikona::after {
  bottom: 0;
}

.nawigacja-logo {
  /* Napis „Farmersi" w pasku menu — USUNIĘTY. Właściciel po testach na
     telefonie: „na mobile pojawia się w menu na górze napis »farmersi« — nie
     mieści się i jest niepotrzebny. skasuj. na desktopie tego napisu nie ma."
     Na szerokim ekranie i tak był ukryty (media query min-width: 60rem), więc
     chowamy go w regule bazowej — na telefonie pasek przestaje się przepełniać. */
  display: none;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: var(--rozmiar-l);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--tekst-jasny);
  text-decoration: none;
}

.nawigacja-logo:hover {
  color: #ffe9a8;
}

.nawigacja-zaloguj {
  padding: var(--odst-2) var(--odst-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--rozmiar-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-jasny);
  text-decoration: none;
  border: 1px solid rgba(245, 236, 216, 0.4);
  border-radius: var(--promien-s);
}

.nawigacja-zaloguj:hover {
  background: rgba(245, 236, 216, 0.12);
  color: #ffe9a8;
}

/* Atrybut `hidden` musi WYGRYWAĆ z `display: inline-flex` z reguł wyżej.
   Bez tego `odnosnik.hidden = true` (konta.js) nic nie robiło: odnośnik
   „Zaloguj” zostawał w układzie i — ponieważ na szerokim ekranie oba
   elementy stanu konta są pozycjonowane absolutnie w tym samym miejscu
   (`left: var(--odst-3)`) — rysował się DOKŁADNIE na przycisku „WYLOGUJ”.
   Zgłoszenie właściciela: „widzę nakładające się na siebie zaloguj i
   wyloguj. przycisk »zaloguj« powinien znikać.”
   To ta sama pułapka co nr 17 w `docs/kroki.md` (`hidden` przegrywa z klasą,
   która ustawia `display`) — rozwiązujemy ją lokalnie, przy komponencie. */
.nawigacja-zaloguj[hidden],
.nawigacja-konto[hidden] {
  display: none;
}

/* --- Stan zalogowania (konta graczy) -------------------------------------
   Gdy gracz jest zalogowany, zamiast odnośnika „Zaloguj” pokazujemy jego
   login i przycisk wylogowania (patrz `assets/js/konta.js`). Wygląd oparty
   na tych samych zmiennych co przycisk obok, żeby nagłówek nie zmieniał
   charakteru po zalogowaniu.
   ------------------------------------------------------------------------- */

.nawigacja-konto {
  display: inline-flex;
  align-items: center;
  gap: var(--odst-2);
  margin-left: var(--odst-2);
}

.nawigacja-login {
  font-size: var(--rozmiar-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe9a8;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MIEJSCE NA „moje gry" W WĄSKIM PASKU (27.10.2026).
   Zmierzone na 375 px: konto 160 + przycisk 96 + hamburger 94 + odstępy
   = 386 px przy pasku 373 px, czyli „Menu” wychodziło 12 px za ekran,
   a przy dłuższym loginie jeszcze dalej. Dlatego na wąskich ekranach:
   login skraca się agresywniej (widać tylko początek), a przycisk „moje gry”
   ma mniejszy padding. Nic nie znikamy — wszystko zostaje czytelne,
   tylko przestaje się rozpychać. */
@media (max-width: 40rem) {
  /* Mniejszy odstęp między elementami paska i węższy padding — to one
     decydowały o tym, że „Menu” wychodziło za ekran (376 px przy pasku 373). */
  .nawigacja-srodek {
    gap: var(--odst-1);
    padding-inline: var(--odst-2);
  }

  /* LOGIN MOŻE BYĆ DŁUŻSZY (27.10.2026). Właściciel: „login przez to się ucina,
     bo za mało miejsca. […] przycisk »wyloguj« przenieś w ogóle na dół do menu”.
     Skoro „wyloguj” zniknął z paska, zwalnia się ~5 rem — oddajemy je loginowi.
     Wartość zmierzona: przy 375 px pasek mieścił login do 9 rem bez zawijania. */
  .nawigacja-login {
    max-width: 9rem;
  }

  .nawigacja-konto {
    margin-left: 0;
  }
}

/* „WYLOGUJ” W ROZWIJANYM MENU (27.10.2026). Właściciel: „wyloguj przenieś
   w ogóle na dół do menu zwijanego z prawej. zwykle w serwisach mobile jest
   ukryty, nieużywany”. Pozycja wygląda jak zwykła pozycja menu (ta sama
   typografia i wysokość), ale jest przyciskiem, nie odnośnikiem. */
.nawigacja-pozycja-wyloguj {
  border-top: 1px solid rgba(245, 236, 216, 0.18);
  margin-top: var(--odst-1);
}

.nawigacja-wyloguj--menu {
  display: block;
  width: 100%;
  padding: var(--odst-3) var(--odst-4);
  min-height: 52px;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--rozmiar-l);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tekst-jasny);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245, 236, 216, 0.14);
  cursor: pointer;
}

.nawigacja-wyloguj--menu:hover {
  background: rgba(245, 236, 216, 0.12);
  color: #ffe9a8;
}

.nawigacja-wyloguj {
  padding: var(--odst-2) var(--odst-3);
  min-height: 44px;
  font: inherit;
  font-size: var(--rozmiar-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-jasny);
  background: transparent;
  border: 1px solid rgba(245, 236, 216, 0.4);
  border-radius: var(--promien-s);
  cursor: pointer;
}

/* POWITANIE PRZY LOGINIE — ODDECH OD PRZYCISKU (27.10.2026).
   Właściciel: „trzeba trochę marginesu zachować od loginu”. */
.nawigacja-srodek .nawigacja-konto {
  margin-left: var(--odst-3);
}

.nawigacja-wyloguj:hover {
  background: rgba(245, 236, 216, 0.12);
  color: #ffe9a8;
}

.nawigacja-wyloguj:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Krótkie pojawienie się stanu zalogowania.
   Decyzja właściciela: „możesz zrobić jakieś krótkie animacje, by nie było to
   błyskawicznym przeładowaniem […] by wyglądało to jak aplikacja, a nie strona
   www.”
   UWAGA: animujemy WYŁĄCZNIE krycie — na szerokim ekranie stan konta jest
   wyśrodkowany pionowo przez `transform: translateY(-50%)` (patrz media
   query niżej), a animacja transformacji nadpisałaby to wyśrodkowanie. */
@keyframes konto-wjazd {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nawigacja-konto {
  animation: konto-wjazd 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .nawigacja-konto {
    animation: none;
  }
}

/* --- Zakładka „profil" (tylko dla zalogowanych) -------------------------- */

/* Właściciel: „w menu głównym — dla zalogowanego gracza potrzebna nowa
   zakładka »profil«". Chowamy ją, dopóki `konta.js` nie potwierdzi sesji
   (dokłada klasę `jest-zalogowany` na `<body>`), dzięki czemu nawigacji nie
   trzeba przebudowywać po odpowiedzi z serwera. */
body:not(.jest-zalogowany) [data-pozycja='profil'] {
  display: none;
}

/* --- Lista pozycji ------------------------------------------------------- */

.nawigacja-lista {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(245, 236, 216, 0.22);
  max-height: 70vh;
  overflow-y: auto;
}

/* ROZWIJANE MENU NIE ZAJMUJE CAŁEJ SZEROKOŚCI (27.10.2026).
 *
 * Właściciel: „to menu rozwijane na mobile można poprawić: teraz ma szerokość
 * 100% — może lepiej jakby było tylko na pół ekranu? mam problem z
 * przewijaniem — często nie przewija się góra dół. muszę kilka razy próbować
 * by przewinąć. może dałoby się zwięzić te panele by całość mieściła się
 * na ekranie”.
 *
 * Trzy zmiany, każda odpowiada na inną część zgłoszenia:
 *  1. SZEROKOŚĆ: panel jest węższy (max 17 rem) i dosunięty do PRAWEJ —
 *     pod hamburgerem, z którego się otwiera. Dzięki temu nie zasłania
 *     całego ekranu i widać, że to panel, a nie nowa strona.
 *  2. MIEJSCI SIĘ: `max-height` liczony od wysokości okna minus pasek,
 *     żeby dolne pozycje (m.in. „wyloguj”) były osiągalne bez przewijania.
 *  3. PRZEWIJANIE: `overscroll-behavior: contain` zatrzymuje „łańcuchowe”
 *     przewijanie — bez tego gest uciekał do strony pod panelem i panel
 *     stał w miejscu (dokładnie ten objaw: „muszę kilka razy próbować”).
 *     `touch-action: pan-y` mówi przeglądarce, że pionowy gest należy
 *     do panelu, a nie do strony. */
.nawigacja-lista[data-otwarte="tak"] {
  display: block;
}

/* ==========================================================================
   SZUFLADA Z PRAWEJ (27.10.2026, druga wersja)
   Właściciel: „teraz ma szerokość 100% — może lepiej jakby było tylko na pół
   ekranu? […] może dałoby się zwięzić te panele by całość mieściła się
   na ekranie”.

   Zamiast rozwijać listę w pasku, na telefonie menu jest SZUFLADĄ:
   - szerokość `min(72vw, 20rem)` — przy 375 px to 270 px (pół ekranu dawało
     187 px i ucinało „o projekcie”, a 100% zasłaniało całą stronę),
   - przyklejona do PRAWEJ krawędzi (tam stoi hamburger), pełna wysokość okna,
   - własne tło i cień, więc widać, że to warstwa NAD stroną,
   - wsuwa się 180 ms; przy `prefers-reduced-motion: reduce` bez animacji.

   `display` zostaje `block` także przy zamkniętej szufladzie — inaczej nie da
   się animować `transform`. Zamknięta jest `visibility: hidden` i
   `pointer-events: none`, więc nie łapie kliknięć ani fokusu.
   ========================================================================== */
@media (max-width: 59.99rem) {
  /* MENU WYSUWA SIĘ SPOD PASKA — NIE PEŁNOEKRANOWA SZUFLADA (27.10.2026).
   *
   * Właściciel: „menu na mobile — brzydko teraz wygląda: wielki panel
   * z »zamknij« na górze i dużo pustego miejsca. tak się nie robiło. powinno
   * się wysuwać spod menu, bez żadnego »zamknij«”.
   *
   * Miał rację: warstwa na całą wysokość z przyciskiem zamykania to wzorzec
   * z aplikacji, a nie z tej strony — wcześniej menu opadało spod paska.
   * Wracamy do tego: panel startuje POD paskiem nawigacji, ma wysokość tylko
   * tyle, ile potrzeba (max 70vh), a zamyka się hamburgerem, kliknięciem obok
   * albo `Esc`. Przycisk „Zamknij” znika razem z pełnoekranową szufladą.
   *
   * Zostają POPRAWKI PRZEWIJANIA (`overscroll-behavior`, `touch-action`,
   * `-webkit-overflow-scrolling`), bo to one naprawiły „muszę próbować kilka
   * razy”.
   */
  .nawigacja-lista {
    position: absolute;
    top: 100%;
    right: 0;
    bottom: auto;
    left: auto;
    /* WĘŻSZE MENU (27.10.2026). Właściciel: „menu na telefonie — ciągle zbyt
       szerokie, dużo miejsca pustego z prawej, można je węższe zrobić”.
       `72vw` (270 px) zostawiało pas pustego tła po prawej stronie najdłuższej
       pozycji. `62vw` = 232 px przy 375 — nadal mieści „o projekcie” w jednej
       linii (sprawdzone pomiarem), a panel nie wygląda na pusty. */
    /* 40% SZEROKOŚCI (27.10.2026). Właściciel: „menu mobilne węższe
       72% → 62% — wystarczy 40%. wszystkie pozycje są wąskie”.
       Przy 375 px daje to ~150 px; pozycje są krótkie („o projekcie” to
       najdłuższa), więc mieszczą się w jednej linii po skróceniu paddingu. */
    width: min(40vw, 15rem);
    /* DO KOŃCA EKRANU, NIE „70vh" (27.10.2026). Właściciel zobaczył, że lista
       urywa się w połowie (brakowało „profil” i „wyloguj”) — bo `70vh` przy
       wysokich pozycjach nie wystarczało. Teraz panel może zająć wszystko
       poniżej paska, a pozycje są niższe (patrz niżej), więc mieści się całość. */
    max-height: calc(100dvh - 7rem);
    margin: 0;
    padding: 0;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background-image: linear-gradient(180deg, #7d5830 0%, #5c3f21 100%);
    background-color: #5c3f21;
    box-shadow: -3px 0 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-0.5rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease-out, transform 150ms ease-out,
      visibility 0s linear 150ms;
    z-index: 60;
  }

  .nawigacja-lista[data-otwarte="tak"] {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 150ms ease-out, transform 150ms ease-out,
      visibility 0s;
  }


  /* (reguły przycisku „Zamknij" usunięte 27.10.2026 — panel wysuwa się spod
     paska, więc zamyka go hamburger; puste `<li>` znikało z listy razem
     z przyciskiem) */

  /* Dolny margines bezpieczeństwa: ostatnia pozycja nie może wejść pod
     pasek systemowy telefonu. */
  .nawigacja-lista::after {
    content: '';
    display: block;
    height: env(safe-area-inset-bottom, 0);
  }

  /* PRZY OTWARTEJ SZUFLADZIE STRONA NIE PRZEWIJA SIĘ POD NIĄ (27.10.2026).
     To była główna przyczyna „muszę kilka razy próbować”: gest pionowy
     trafiał w dokument pod menu, a lista stała w miejscu. */
  body.menu-mobilne-otwarte {
    overflow: hidden;
    touch-action: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nawigacja-lista,
  .nawigacja-lista[data-otwarte="tak"] {
    transition: none;
  }
}

/* Na szerokim ekranie lista jest paskiem poziomym — te reguły jej nie dotyczą. */
@media (min-width: 60rem) {
  .nawigacja-lista[data-otwarte="tak"] {
    width: auto;
    margin-left: 0;
    max-height: none;
    box-shadow: none;
  }
}

.nawigacja-lista a {
  display: block;
  /* NIŻSZE POZYCJE W MENU MOBILNYM (27.10.2026).
     Właściciel: „zobacz screen” — lista urywała się na „o projekcie”, bo
     pozycje miały po ~76 px. Zmniejszamy sam padding (czcionka zostaje
     `--rozmiar-l`, czyli 18 px — czytelność bez zmian). */
  padding: 0.55rem var(--odst-2);
  min-height: 46px;
  /* Czcionka nagłówkowa (Bitter) także na pozycjach menu — decyzja
     właściciela. Waga 700, bo Bitter ma prawdziwe pogrubienie. */
  font-family: var(--font-display);
  font-size: var(--rozmiar-l);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tekst-jasny);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 236, 216, 0.14);
}

/* SPROSTOWANIE (2026, druga weryfikacja): ten komentarz przechodził już dwie
   sprzeczne wersje. Prawda jest taka, że poprzednia czcionka nagłówkowa
   („Rye") NIE MIAŁA polskich znaków: brakowało ą ć ę ś ź ż i wielkich
   odpowiedników. Zmierzone narzędziem, które sprawdza w przeglądarce, KTÓRA
   czcionka naprawdę narysowała znak (`.narzedzia/sprawdz-czcionke-w-przegladarce.js`)
   — wcześniejsze „sprawdzone" opierało się na `document.fonts.check()`, a ta
   funkcja patrzy na zadeklarowany `unicode-range`, nie na obecność glifu.
   Dlatego czcionkę nagłówkową wymieniliśmy na Bitter (komplet znaków),
   a klasa `bez-rye` nie jest już do niczego potrzebna — zostaje w kodzie,
   bo nadaje ją `chrome.js`, ale wskazuje teraz na tę samą czcionkę co reszta
   nagłówków, więc niczego nie psuje i nie dzieli interfejsu na dwa kroje. */
.nawigacja-lista a.bez-rye,
.nawigacja-podmenu a.bez-rye,
.pasek-skrotow a.bez-rye {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.nawigacja-lista a:hover {
  background: rgba(245, 236, 216, 0.12);
  color: #ffe9a8;
}

.nawigacja-lista a[aria-current="page"] {
  background: rgba(168, 50, 50, 0.34);
  box-shadow: inset 4px 0 0 var(--akcent-zloto);
}

/* Podmenu na mobile — zagnieżdżona lista, zawsze rozwinięta. */
.nawigacja-podmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.16);
}

.nawigacja-podmenu a {
  padding-left: var(--odst-6);
  font-size: var(--rozmiar-s);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Desktop ------------------------------------------------------------- */

@media (min-width: 60rem) {
  .nawigacja-przelacznik {
    display: none;
  }

  .nawigacja-srodek {
    padding: 0;
    justify-content: center;
  }

  .nawigacja-logo {
    display: none;
  }

  /* --- Konta graczy po LEWEJ stronie paska menu ---------------------------
     Decyzja właściciela: „login i wyloguj — powinno być z lewej strony paska
     menu”. Na szerokim ekranie pasek to pozioma lista pozycji, więc odnośnik
     „Zaloguj” (a po zalogowaniu login + „wyloguj”) dosuwamy do LEWEJ krawędzi
     paska, a nie chowamy — wcześniej znikał na desktopie i zalogowanie było
     możliwe tylko z telefonu.
     --------------------------------------------------------------------- */
  .nawigacja-zaloguj,
  .nawigacja-konto {
    position: absolute;
    /* Właściciel po testach na telefonie: „przycisk »wyloguj« zrobić mniejszy
       i dać bliżej lewej strony" — dlatego mniejszy odstęp od krawędzi
       (było --odst-3), a sam przycisk niżej ma mniejszą czcionkę i padding. */
    left: var(--odst-2);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    margin-left: 0;
  }

  .nawigacja-wyloguj {
    font-size: var(--rozmiar-s);
    padding: var(--odst-1) var(--odst-2);
  }

  /* „WYLOGUJ" PRZY LEWEJ KRAWĘDZI — TYLKO WEWNĄTRZ PANELU KONTA.
     Właściciel (27.10.2026): „na desktopie ›wyloguj‹ przyklej z prawej strony
     na końcu […]. trzeba trochę marginesu zachować od loginu”.
     Przycisk jest teraz OSTATNIM dzieckiem `.nawigacja`, a pasek nie jest
     flexem (pozycje menu to wyśrodkowana lista), więc przypinamy go tak samo
     jak „Zaloguj" — pozycjonowaniem absolutnym do prawej krawędzi. */
  .nawigacja > .nawigacja-wyloguj {
    position: absolute;
    right: var(--odst-3);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* Właściciel: „menu dobrze byłoby przesunąć do prawej strony". Hamburger
     „Menu" przechodzi więc z wyśrodkowania na PRAWĄ krawędź paska — obok
     niego nie ma już logo (usunięte wcześniej), więc nic się nie nałoży. */
  .nawigacja-przelacznik {
    position: absolute;
    right: var(--odst-3);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Właściciel zgłosił nakładanie się elementów po zalogowaniu
     („SZERYF” i „WYLOGUJ” rysowały się na sobie). Panel konta to pozycja
     absolutna, ale jego DZIECI muszą być w normalnym przepływie, w jednym
     rzędzie i z odstępem — inaczej tekst nachodzi na przycisk.
     Kolejność ustalona przez właściciela: „wyloguj” z lewej, potem
     „Witaj {login}!” (ustawia to `konta.js`). */
  .nawigacja-konto > * {
    position: static;
    transform: none;
    white-space: nowrap;
  }

  .nawigacja-lista {
    display: flex;
    align-items: stretch;
    border-top: none;
    max-height: none;
    overflow: visible;
    width: 100%;
    justify-content: center;
  }

  .nawigacja-lista > li {
    position: relative;
  }

  .nawigacja-lista > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--odst-3) var(--odst-4);
    min-height: 54px;
    border-bottom: none;
    border-right: 1px solid rgba(245, 236, 216, 0.14);
    /* Większe niż wcześniej — decyzja właściciela (czytelność Rye). */
    font-size: var(--rozmiar-l);
    white-space: nowrap;
  }

  .nawigacja-lista > li:first-child > a {
    border-left: 1px solid rgba(245, 236, 216, 0.14);
  }

  .nawigacja-lista a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--akcent-zloto);
    background: rgba(168, 50, 50, 0.28);
  }

  /* Podmenu na desktop: rozwijane przy hoverze i fokusie. */
  .nawigacja-podmenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    display: none;
    background: #5c3f21;
    border: 1px solid var(--tlo-noc);
    border-top: none;
    box-shadow: var(--cien-2);
    z-index: 50;
  }

  .nawigacja-lista > li:hover > .nawigacja-podmenu,
  .nawigacja-lista > li:focus-within > .nawigacja-podmenu {
    display: block;
  }

  .nawigacja-podmenu a {
    padding: var(--odst-2) var(--odst-4);
    min-height: 40px;
    border-bottom: 1px solid rgba(245, 236, 216, 0.12);
    /* WIĘKSZA CZCIONKA W PODMENU (27.10.2026). Właściciel: „te lata w mapach —
       widzę, że możnaby czcionkę powiększyć, bo mała się wydaje”. Było
       `--rozmiar-s` (13 px); teraz `--rozmiar-m` (15 px) — ta sama wielkość,
       jaką mają opisy w panelu „moje gry”, więc podmenu przestaje być
       najmniejszym tekstem w pasku. */
    font-size: var(--rozmiar-m);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
  }
}

/* ==========================================================================
   PASEK SKRÓTÓW (mobile, dolny) — 5 najważniejszych pozycji
   ========================================================================== */

.pasek-skrotow {
  display: flex;
  position: sticky;
  bottom: 0;
  /* POD panelami (27.10.2026) - patrz komentarz przy `.nawigacja`. */
  z-index: 18;
  background: #5c3f21;
  border-top: 2px solid var(--tlo-noc);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}

/* „GRY” W DOLNYM PASKU (27.10.2026). Właściciel: „to nowe ›GRY‹ daj właśnie
   w to miejsce, po środku”. Kafelek jest PRZEŁĄCZNIKIEM panelu (nie linkiem),
   więc dzieli wygląd z odnośnikami — dlatego selektor obejmuje oba warianty.
   `background`/`border` zerujemy jawnie: przycisk ma domyślną ramkę przeglądarki,
   a w pasku ma wyglądać jak sąsiednie kafle. */
.pasek-skrotow a,
.pasek-skrotow .pasek-skrotow-akcja {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--odst-2) var(--odst-1);
  min-height: 52px;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tekst-jasny);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(245, 236, 216, 0.12);
  cursor: pointer;
}

.pasek-skrotow .pasek-skrotow-akcja:hover,
.pasek-skrotow .pasek-skrotow-akcja:focus-visible,
.pasek-skrotow .pasek-skrotow-akcja[aria-expanded='true'] {
  background: rgba(245, 236, 216, 0.12);
  color: #ffe9a8;
}

.pasek-skrotow a:last-child {
  border-right: none;
}

.pasek-skrotow a:hover {
  background: rgba(245, 236, 216, 0.12);
  color: #ffe9a8;
}

.pasek-skrotow a[aria-current="page"] {
  background: rgba(168, 50, 50, 0.34);
  color: #ffe9a8;
}

.pasek-skrotow svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (min-width: 60rem) {
  .pasek-skrotow {
    display: none;
  }
}

/* ==========================================================================
   STOPKA
   ========================================================================== */

.stopka {
  flex: 0 0 auto;
  background: #4a3218;
  background-image: linear-gradient(180deg, #5c3f21 0%, #3a2712 100%);
  color: var(--tlo-sepia);
  border-top: 3px double var(--linia-mocna);
  padding: var(--odst-5) var(--odst-4) var(--odst-4);
  font-size: var(--rozmiar-s);
}

.stopka a {
  color: #e8d5a8;
}

.stopka a:hover {
  color: #fff;
}

/* Stopka jako JEDEN wyważony blok (19.10.2026). Właściciel: „możnaby
   wyśrodkować albo równomiernie rozłożyć, a nie tak, że lewa ciężka, prawa
   lekka”. Dlatego: motto wyśrodkowane u góry, a pod nim dolny pas z trzema
   elementami rozłożonymi równomiernie (linki — Facebook — copyright). */
.stopka-tresc {
  display: grid;
  gap: var(--odst-4);
  justify-items: center;
  text-align: center;
}

.stopka-dol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--odst-2);
  width: 100%;
}

.stopka-linki {
  margin: 0;
}

@media (min-width: 48rem) {
  .stopka-dol {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--odst-4);
  }
}

.stopka-motto {
  margin: 0;
  /* Audyt wizualny pkt 1: motto ma być PRAWDZIWĄ kursywą, a nie „Bitter
     pochyłym” — Bitter italic nie jest hostowany, więc przeglądarka
     pożyczała kursywę z fallbacku i wychodził inny krój niż w reszcie. */
  font-family: var(--font-kursywa);
  font-style: italic;
  color: #d9c8a9;
  text-wrap: pretty;
}

/* Podpis „Myśl dnia:" jest PROSTY, a kursywą idzie tylko sama myśl —
   właściciel: „najpierw było »Myśl dnia: « a potem kursywą ta sama myśl". */
.stopka-motto-etykieta {
  font-style: normal;
  font-weight: 600;
}

.stopka-motto-etykieta:not(:empty)::after {
  content: ' ';
}

/* Copyright jest CZĘŚCIĄ dolnego pasa stopki, nie osobną wyśrodkowaną linią —
   właściciel: „Copyright połącz z resztą, by był jeden spójny blok”. */
.stopka-prawa {
  margin: 0;
  font-size: var(--rozmiar-xs);
  color: #bda98a;
}

/* Facebook w stopce (w miejscu dawnego logo „FARMERSI / gra ekonomiczna”).
   Właściciel: „info o FB przerzuć do stopki” + przekreślone logo po prawej. */
.stopka-facebook-link {
  display: inline-flex;
  align-items: center;
  gap: var(--odst-2);
  min-height: 44px;
  padding: 0 var(--odst-2);
  border-radius: var(--promien-s);
  color: #d9c8a9;
  text-decoration: none;
  font-size: var(--rozmiar-s);
}

.stopka-facebook-link:hover {
  color: #fff;
}

.stopka-facebook-link:focus-visible {
  outline: 2px solid var(--fokus-na-ciemnym);
  outline-offset: 2px;
}

.stopka-facebook-ikona {
  flex: 0 0 auto;
  display: block;
}

/* --------------------------------------------------------------------------
   PASEK „PATRZYSZ OKIEM GRACZA"
   Widoczny tylko wtedy, gdy sesja powstała w panelu administracyjnym
   („wejdź jako gracz"). Wsuwa się w normalny przepływ na samej górze strony
   (`sticky`), więc nie zasłania treści i zawsze widać, czyim okiem patrzymy,
   oraz jak wrócić do panelu. Moduł: `assets/js/podszywanie.js`.
   -------------------------------------------------------------------------- */
.podszywanie-pasek {
  position: sticky;
  top: 0;
  /* POD panelami (27.10.2026). */
  z-index: 19;
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-3, 0.75rem);
  align-items: center;
  justify-content: center;
  padding: var(--odst-2, 0.5rem) var(--odst-4, 1rem);
  background: var(--akcent, #8c2f25);
  color: #fffdf7;
  font-size: var(--rozmiar-s, 0.9rem);
  text-align: center;
}

.podszywanie-pasek .przycisk-mini {
  border-color: rgba(255, 253, 247, 0.7);
  background: transparent;
  color: #fffdf7;
}

.podszywanie-pasek .przycisk-mini:hover {
  background: rgba(255, 253, 247, 0.16);
}

/* NIŻSZE WIERSZE, ŻEBY CAŁE MENU MIEŚCIŁO SIĘ NA EKRANIE (27.10.2026).
 *
 * Właściciel: „może dałoby się zwięzić te panele by całość mieściła się
 * na ekranie”.
 *
 * Zmierzone na 375 × 667: menu miało 556 px przy 466 px miejsca — brakowało
 * ~90 px, więc dolne pozycje („profil”, „wyloguj”) były poza ekranem i trzeba
 * było przewijać. Po zwężeniu panelu i zmniejszeniu wierszy do 44 px
 * (a podmenu do 36 px) całość mieści się bez przewijania.
 * 44 px to nadal minimum dotykowe, więc nie zmniejszamy trafialności palcem. */
@media (max-width: 59.99rem) {
  /* 42 px, nie 44: zmierzone — przy 375 × 667 menu sięgało 26 px pod dolny
     pasek. 42 px nadal mieści się w normie celu dotykowego (> 24 px wg WCAG),
     a całe menu kończy się NAD paskiem, więc ostatnia pozycja jest klikalna. */
  .nawigacja-lista a {
    min-height: 42px;
    padding: var(--odst-1) var(--odst-3);
    font-size: var(--rozmiar-m);
  }

  .nawigacja-podmenu a {
    min-height: 30px;
    padding: 0 var(--odst-3);
    font-size: var(--rozmiar-s);
  }

  .nawigacja-pozycja-wyloguj .nawigacja-wyloguj--menu {
    min-height: 44px;
    padding: var(--odst-2) var(--odst-3);
    font-size: var(--rozmiar-m);
    text-transform: uppercase;
  }
}