/* ==========================================================================
   JAK GRAĆ? — przewodnik v5 (opis-gry.html → #czesc-przewodnik)
   Jedyny dodatkowy blok CSS przewodnika. Wszystko w zasięgu `.przewodnik`,
   wyłącznie tokeny z tokens.css. Reszta wyglądu to istniejące klasy serwisu:
   .sekcja, .sekcja-naglowek, .zakladki, .karta, .karta-naglowek, .siatka-2,
   .siatka-3, .komunikat, .tabela, .przycisk, .wiersz.
   ========================================================================== */

.przewodnik {
  --przewodnik-izzi-wys: clamp(160px, 16vw, 210px);
  --przewodnik-bok: clamp(15rem, 36%, 23rem);
}

/* Uwaga Tomasza: „czemu takie ograniczenie szerokości? lepiej byłoby
   wyjustować na całą szerokość”. Akapity wypełniają kolumnę, w której stoją
   (w rzędach z grafiką to ~60–75 znaków), i od 48rem są justowane
   z dzieleniem wyrazów (html lang="pl"). */
.przewodnik .sekcja > p,
.przewodnik p {
  max-width: none;
}

@media (min-width: 48rem) {
  .przewodnik p,
  .przewodnik li,
  .przewodnik dd {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

.przewodnik-lead {
  font-size: var(--rozmiar-l);
  line-height: 1.6;
}

.przewodnik h3 {
  margin-top: var(--odst-6);
}

.przewodnik .karta h3,
.przewodnik .karta-naglowek {
  margin-top: 0;
}

/* --- Rząd: tekst + grafika obok (strony naprzemiennie) ------------------- */

.przewodnik-rzad {
  display: grid;
  gap: var(--odst-4) var(--odst-6);
  align-items: center;
  margin-block: var(--odst-5);
}

.przewodnik-rzad > * {
  min-width: 0;
}

@media (min-width: 48rem) {
  .przewodnik-rzad {
    grid-template-columns: minmax(0, 1fr) var(--przewodnik-bok);
  }

  .przewodnik-rzad--lewy {
    grid-template-columns: var(--przewodnik-bok) minmax(0, 1fr);
  }

  .przewodnik-rzad--lewy > .przewodnik-bok {
    order: -1;
  }

  /* Wykres rynku potrzebuje więcej miejsca niż winieta. */
  .przewodnik-rzad--wykres {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.przewodnik-bok {
  margin: 0;
  width: 100%;
  max-width: 23rem;
  justify-self: center;
}

.przewodnik-rzad--wykres .przewodnik-bok {
  max-width: 36rem;
}

.przewodnik-bok figcaption {
  margin-top: var(--odst-2);
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
  text-align: center;
}

/* Gotowa ilustracja: PNG/WebP z przezroczystą winietą. Bez ramki i cienia
   (jak .nius-obraz dla plików z alfą). */
.przewodnik-ilustracja {
  display: block;
  width: 100%;
  height: auto;
}

/* Miejsce na ilustrację, dopóki nie ma pliku. Rozmiar = docelowy (3:2). */
.przewodnik-miejsce {
  aspect-ratio: 3 / 2;
  display: grid;
  place-content: center;
  gap: var(--odst-1);
  padding: var(--odst-3);
  text-align: center;
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
  background: radial-gradient(ellipse at center, var(--tlo-papier) 35%, var(--tlo-papier-ciemny) 100%);
  border: 2px dashed var(--linia);
  border-radius: 50% / 40%;
}

.przewodnik-miejsce strong {
  font-family: var(--font-display);
  font-size: var(--rozmiar-s);
  color: var(--akcent);
}

/* --- Izzi z dymkiem ------------------------------------------------------ */

.przewodnik-izzi {
  display: grid;
  grid-template-columns: auto minmax(0, 46rem);
  justify-content: start;
  align-items: center;
  gap: var(--odst-2) var(--odst-4);
  margin-block: var(--odst-6);
}

.przewodnik-izzi--prawy {
  grid-template-columns: minmax(0, 46rem) auto;
  justify-content: end;
}

.przewodnik-izzi--prawy .przewodnik-izzi-postac {
  order: 2;
}

.przewodnik-izzi-postac {
  display: block;
  height: var(--przewodnik-izzi-wys);
  width: auto;
  max-width: 40vw;
  object-fit: contain;
  filter: drop-shadow(0 6px 5px rgba(58, 42, 26, 0.22));
}

.przewodnik-dymek {
  position: relative;
  padding: var(--odst-4) var(--odst-5);
  background: var(--tlo-wypowiedzi);
  border: 1px solid var(--linia);
  border-radius: var(--promien-l);
  box-shadow: var(--cien-1);
}

/* Ogonek dymka w stronę Izziego. */
.przewodnik-dymek::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -11px;
  width: 20px;
  height: 20px;
  background: inherit;
  border-left: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
  transform: translateY(-50%) rotate(45deg);
}

.przewodnik-izzi--prawy .przewodnik-dymek::before {
  left: auto;
  right: -11px;
  transform: translateY(-50%) rotate(225deg);
}

.przewodnik-dymek-tytul {
  display: block;
  margin-bottom: var(--odst-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--rozmiar-l);
  color: var(--akcent);
}

.przewodnik-dymek p {
  margin: 0;
}

.przewodnik-dymek p + p {
  margin-top: var(--odst-3);
}

/* Telefon: Izzi nad dymkiem (dymek na całą szerokość), ogonek w górę. */
@media (max-width: 34rem) {
  .przewodnik {
    --przewodnik-izzi-wys: 136px;
  }

  .przewodnik-izzi,
  .przewodnik-izzi--prawy {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--odst-2);
  }

  .przewodnik-izzi-postac {
    max-width: 70vw;
    justify-self: start;
    margin-left: var(--odst-3);
  }

  .przewodnik-izzi--prawy .przewodnik-izzi-postac {
    order: 0;
    justify-self: end;
    margin-left: 0;
    margin-right: var(--odst-3);
  }

  .przewodnik-dymek {
    padding: var(--odst-3) var(--odst-4);
  }

  .przewodnik-dymek::before,
  .przewodnik-izzi--prawy .przewodnik-dymek::before {
    top: -11px;
    left: 3.5rem;
    right: auto;
    transform: rotate(135deg);
  }

  .przewodnik-izzi--prawy .przewodnik-dymek::before {
    left: auto;
    right: 3.5rem;
  }
}

/* --- Karty w siatkach ----------------------------------------------------- */

.przewodnik .karta p {
  font-size: var(--rozmiar-s);
}

.przewodnik-ikona {
  font-size: 1.5rem;
  line-height: 1;
  margin-right: var(--odst-2);
}

/* Porównanie: Memphis | etykieta | typowa gra (etykiety na środku).
   Szerokość ogranicza KARTA, a tabela wypełnia ją w całości (23.10.2026):
   wcześniej `max-width` siedział na tabeli, więc po bokach paska nagłówka
   zostawały białe pasy — wyglądało to jak błąd, nie jak decyzja. */
.przewodnik-porownanie-karta {
  padding: 0;
  overflow: hidden;
  max-width: 54rem;
  margin-inline: auto;
}

/* Odstępy jak w pozostałych tabelach poradnika (23.10.2026). Właściciel:
   „sprawdź też marginesy by było jak w pozostałych (chyba na górze za mały)".
   Nagłówek dostaje taki sam odstęp górny jak inne h3 w przewodniku
   (`.przewodnik h3` → `--odst-6`), a karta z tabelą — standardowy odstęp
   dolny, żeby nie kleiła się do akapitu pod spodem. */
.przewodnik-porownanie-intro {
  margin: var(--odst-6) 0 var(--odst-3);
}

.przewodnik-porownanie-karta {
  margin-bottom: var(--odst-4);
}

.przewodnik-porownanie {
  margin: 0;
  table-layout: fixed;
  width: 100%;
}

/* Wyłącz wygląd arkusza/rankingu TYLKO na tej tabeli */
.przewodnik-porownanie th,
.przewodnik-porownanie td {
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  vertical-align: middle;
}

.przewodnik-porownanie tbody tr:nth-child(even) {
  background: transparent;
}

.przewodnik-porownanie tbody tr:hover {
  background: transparent;
}

/* ============================================================================
   WARIANT „KARTA" (23.10.2026) — wybrany przez właściciela jako nr 2.
   Bez paska nagłówka, etykiety cech jako PIGUŁKI na środku, wartości większe,
   między wierszami tylko cienka linia. Cel: lekkość karty Izzi („Cena ustala
   się sama"), ale z zachowanym porównaniem wiersz w wiersz — bez powtarzania
   etykiet w dwóch kartach (to był wariant 3, odrzucony).
   ========================================================================== */

/* Nagłówki trybów: JEDEN kolor dla obu (właściciel: „nagłówek kolor tekstu
   jednakowy dla obu") + GRUBA kreska pod nagłówkiem, która — jak w pozostałych
   tabelach poradnika — NIE DOCHODZI do krawędzi („to samo kreska na górze —
   w innych tabelkach nie jest do końca"). Dlatego zamiast `border-bottom`
   rysujemy kreskę gradientem: pierwsza komórka zaczyna ją z wcięciem,
   ostatnia kończy z wcięciem, środek jest pełny — linia wychodzi ciągła. */
.przewodnik-porownanie thead th {
  font-family: var(--font-naglowek);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tekst);
  text-align: center;
  padding: 0.25rem 0.5rem 0.6rem;
  border-bottom: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: bottom center;
  background-image: linear-gradient(var(--linia-mocna), var(--linia-mocna));
}

.przewodnik-porownanie thead th:first-child {
  background-image: linear-gradient(
    to right,
    transparent 0,
    var(--linia-mocna) 6%,
    var(--linia-mocna) 100%
  );
}

.przewodnik-porownanie thead th:last-child {
  background-image: linear-gradient(
    to right,
    var(--linia-mocna) 0,
    var(--linia-mocna) 94%,
    transparent 100%
  );
}

.przewodnik-porownanie thead th:nth-child(2) {
  background-color: transparent;
  width: 8.75rem;
  padding-inline: var(--odst-1);
}

/* Wartości trybów: większe niż w arkuszu — to one mają być czytane */
.przewodnik-porownanie tbody td {
  width: auto;
  font-size: 1.02rem;
  color: var(--tekst);
  text-align: center;
  padding: 0.85rem 0.6rem;
  border: 0;
}

/* Etykieta cechy NA ŚRODKU jako pigułka (span w th) */
.przewodnik-porownanie tbody th {
  width: 8.75rem;
  text-align: center;
  padding: 0.4rem 0.3rem;
  border: 0;
  background: transparent;
}

/* PIGUŁKI JEDNAKOWEGO ROZMIARU (23.10.2026). Właściciel: „dałoby się zrobić
   jednakowej wielkości/wysokości? teraz dziwnie, że każda ma inny kształt"
   oraz „mógłbyś tylko dodać lekki padding". Dlatego stała szerokość
   i wysokość, tekst wyśrodkowany w obu osiach, a w środku jest teraz
   oddech — wcześniej napis dotykał niemal obwódki. */
.przewodnik-porownanie tbody th span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2rem;
  /* ODDECH W PIGUŁCE (23.10.2026). Właściciel: „pigułki bez zmian” — napis
     nadal dotykał obwódki, bo width: 100% przy najdłuższym słowie
     („SKOMPLIKOWANIE”) nie zostawiał miejsca na padding. Teraz pigułka ma
     padding wynikający z treści i nie rozpycha kolumny powyżej 100%. */
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--tlo-papier-ciemny);
  font-family: var(--font-naglowek);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tekst-mutowany);
}

/* Cienka linia między wierszami — NIE DO KOŃCA (właściciel: „niżej kreski
   cienkie i nie do końca. daje to fajną lekkość"). Dlatego linia jest tłem
   gradientowym przyciętym po bokach, a nie `border` na całą szerokość. */
.przewodnik-porownanie tbody tr + tr td,
.przewodnik-porownanie tbody tr + tr th {
  border-top: 0;
  background-image: linear-gradient(
    to right,
    transparent 0,
    var(--linia-slaba) 14%,
    var(--linia-slaba) 86%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}

.przewodnik-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fazy partii: trzy jednakowe karty ze strzałkami (→, na telefonie ↓) */
.przewodnik-fazy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: var(--odst-1);
}

.przewodnik-strzalka {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--rozmiar-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--akcent);
}

.przewodnik-strzalka::before {
  content: "↓";
}

@media (min-width: 48rem) {
  .przewodnik-fazy {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--odst-2);
  }

  .przewodnik-strzalka::before {
    content: "→";
  }
}

/* Karty strategii: Izzi (lupa / krowa) pływa po prawej na dole karty, a
   ostatnie punkty listy i cytat opływają jego sylwetkę (shape-outside z
   kanału alfa PNG). Obrazek jest pierwszym dzieckiem karty; niewidoczny
   „rozpychacz” (::before, float o wysokości karty minus Izzi) spycha go na
   sam dół, niezależnie od długości tekstu i wysokości sąsiedniej karty.
   UWAGA: shape-outside działa tylko dla obrazka z tej samej domeny
   (albo z nagłówkiem CORS) — na serwisie to ten sam serwer, więc OK.
   .stos-maly to flex, a flex nie opływa floatów, dlatego tu zwykły blok. */
.przewodnik-strategia > ol {
  display: block;
  margin-bottom: var(--odst-3);
}

.przewodnik-strategia > ol > li + li {
  margin-top: var(--odst-2);
}

.przewodnik .przewodnik-strategia li,
.przewodnik .przewodnik-strategia .przewodnik-strategia-cytat {
  text-align: left;
}

.przewodnik-strategia-cytat {
  margin: 0;
}

.przewodnik-strategia {
  --przewodnik-strategia-izzi-wys: clamp(130px, 13vw, 170px);
}

.przewodnik-strategia::before {
  content: "";
  float: right;
  width: 0;
  height: calc(100% - var(--przewodnik-strategia-izzi-wys));
}

.przewodnik-strategia-izzi {
  float: right;
  clear: right;
  height: var(--przewodnik-strategia-izzi-wys);
  width: auto;
  margin: 0 calc(-1 * var(--odst-2)) 0 var(--odst-2);
  shape-image-threshold: 0.3;
  shape-margin: 6px;
  filter: drop-shadow(0 5px 4px rgba(58, 42, 26, 0.2));
}

.przewodnik-strategia-izzi--lupa {
  shape-outside: url("../img/przewodnik/izzi-lupa.png?h=e73606e6");
}

.przewodnik-strategia-izzi--krowa {
  shape-outside: url("../img/przewodnik/izzi-krowa.png?h=b24956da");
}

.przewodnik-strategia::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 47.99rem) {
  .przewodnik-strategia {
    --przewodnik-strategia-izzi-wys: 112px;
  }

  /* Zapas: wysokość karty liczy się, zanim Izzi zjedzie na dół; na wąskim
     ekranie tekst przy nim łamie się w więcej linii, więc bez zapasu
     cytat wystawałby z karty. */
  .przewodnik-strategia::after {
    height: 3em;
  }

  .przewodnik-strategia-izzi {
    shape-margin: 4px;
  }
}

/* Tabela sprzedaży w stylu arkusza gry (arkusz.css: .arkusz-karta,
   .tabela--arkusz, .wiersz--wyroznij). arkusz.css nie jest ładowany na
   opis-gry.html, więc potrzebne reguły są tu skopiowane 1:1 w zasięgu
   .przewodnik. */
.przewodnik .arkusz-karta {
  padding: var(--odst-4);
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
  box-shadow: var(--cien-1);
  min-width: 0;
}

.przewodnik .arkusz-karta > .rynek-podtytul {
  margin: 0 0 var(--odst-3);
  padding-bottom: var(--odst-2);
  border-bottom: 1px solid var(--linia-slaba);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--rozmiar-m);
}

.przewodnik .tabela--arkusz {
  width: 100%;
  font-size: var(--rozmiar-s);
}

.przewodnik .tabela--arkusz th,
.przewodnik .tabela--arkusz td {
  padding: var(--odst-2);
  border-bottom: 1px solid var(--linia-slaba);
  text-align: left;
  vertical-align: top;
}

.przewodnik .tabela--arkusz th {
  font-size: var(--rozmiar-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-mutowany);
  border-bottom: 2px solid var(--linia-mocna);
  background: rgba(139, 90, 43, 0.07);
  white-space: nowrap;
}

.przewodnik .tabela--arkusz td {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.przewodnik .tabela--arkusz tr.wiersz--wyroznij td {
  font-weight: 700;
  border-top: 3px double var(--linia-mocna);
}

@media (max-width: 34rem) {
  .przewodnik .tabela--arkusz {
    font-size: var(--rozmiar-xs);
  }

  .przewodnik .tabela--arkusz th,
  .przewodnik .tabela--arkusz td {
    padding-left: var(--odst-1);
    padding-right: var(--odst-1);
  }

  .przewodnik .tabela--arkusz th {
    white-space: normal;
  }

  .przewodnik .przewijalne .tabela--arkusz,
  .przewodnik .przewijalne .przewodnik-porownanie {
    min-width: 0;
  }

  /* Porównanie zostaje w TRZECH kolumnach także na telefonie — zestawienie
     bok w bok ma sens tylko wtedy, gdy obie ścieżki widać naraz. Zmniejszamy
     więc padding i pismo, zamiast rozkładać tabelę na karty. */
  .przewodnik-porownanie thead th,
  .przewodnik-porownanie tbody td {
    padding: var(--odst-2) var(--odst-1);
    font-size: 0.85rem;
  }

  .przewodnik-porownanie thead th {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
  }

  /* Pigułka musi się zmieścić w 5,5 rem — mniejszy tekst i ciaśniejszy padding */
  .przewodnik-porownanie tbody th {
    width: 5.5rem;
    padding: var(--odst-2) 0.15rem;
  }

  .przewodnik-porownanie tbody th span {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
  }
}

/* Równanie majątku */
.przewodnik-rownanie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odst-2);
  margin-block: var(--odst-4);
}

.przewodnik-rownanie > span:not(.przewodnik-op) {
  display: grid;
  padding: var(--odst-2) var(--odst-3);
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
  box-shadow: var(--cien-1);
}

.przewodnik-rownanie b {
  font-family: var(--font-display);
}

.przewodnik-rownanie small {
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.przewodnik-rownanie .przewodnik-wynik {
  background: var(--tlo-papier-ciemny);
  border-color: var(--linia-mocna);
}

.przewodnik-op {
  font-family: var(--font-display);
  font-size: var(--rozmiar-xl);
  font-weight: 700;
  color: var(--akcent);
}

/* Kroki tury: numer w kółku */
.przewodnik-nr {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: var(--odst-2);
  border-radius: 50%;
  background: var(--akcent);
  color: var(--tlo-papier);
  font-family: var(--font-liczby);
  font-size: var(--rozmiar-s);
  vertical-align: middle;
}

/* Oferty Zenka i Twoja: pięć komórek */
.przewodnik-komorki {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--odst-1);
  margin-block: var(--odst-3);
}

.przewodnik-komorki > div {
  display: grid;
  padding: var(--odst-1);
  text-align: center;
  background: var(--tlo-krem);
  border: 1px solid var(--linia-slaba);
  border-radius: var(--promien-s);
}

.przewodnik-komorki small {
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.przewodnik-komorki b {
  font-family: var(--font-liczby);
}

.przewodnik-komorki .przewodnik-traf {
  border: 2px solid var(--akcent-czerwony);
  background: rgba(168, 50, 50, 0.09);
}

/* Cytat na koniec zakładki */
.przewodnik-cytat {
  margin: var(--odst-6) auto var(--odst-4);
  max-width: 40rem;
  text-align: center;
  font-family: var(--font-kursywa);
  font-style: italic;
  font-size: var(--rozmiar-l);
  color: var(--tekst);
}

.przewodnik-cytat p {
  margin: 0 0 var(--odst-2);
  text-align: center;
  text-wrap: balance;
}

.przewodnik-cytat footer {
  font-family: var(--font-tresc);
  font-style: normal;
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

/* Nawigacja „dalej” na dole zakładki */
.przewodnik-dalej {
  margin-top: var(--odst-5);
}

/* --- Schematy SVG (mniejsze, tekst czytelny po skalowaniu) ---------------- */

.przewodnik-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-tresc);
}

.przewodnik-svg .s-os {
  font-size: 15px;
  fill: var(--tekst-mutowany);
}

.przewodnik-svg .s-os-t {
  font-size: 16px;
  fill: var(--tekst-mutowany);
  font-style: italic;
}

.przewodnik-svg .s-leg {
  font-size: 18px;
  font-weight: 700;
}

.przewodnik-svg .s-znacznik {
  font-size: 16px;
  font-weight: 700;
  fill: #fff;
}

.przewodnik-svg .s-srodek {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  fill: var(--akcent);
}

.przewodnik-svg .s-srodek2 {
  font-family: var(--font-display);
  font-size: 18px;
  fill: var(--tekst-mutowany);
}

.przewodnik-svg .s-nr {
  font-family: var(--font-liczby);
  font-size: 14px;
  font-weight: 700;
  fill: #fff;
}

.przewodnik-cykl-lista {
  margin: 0;
  display: grid;
  gap: var(--odst-2);
}

.przewodnik-dalej > a:only-child {
  margin-left: auto;
}

.przewodnik .karta-naglowek small {
  font-family: var(--font-tresc);
  font-weight: 400;
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.przewodnik-rzad--wykres,
.przewodnik-rzad--gora {
  align-items: start;
}