/* ==========================================================================
   Farmersi 2.0 — karteczki tutorialowe (Izzi Farmer)

   Właściciel o wyglądzie:
     „budowa karteczki: dwuczłonowa. pierwsza część to okienko, brąz,
      minimalistycznie ładnie stylizowane […] tekst przewijany, bo czasami
      jest go dużo […] drugi element to grafika png — Izzy Farmer […]
      grafika z boku karteczki, czasem z prawej, czasem z lewej."
   oraz (poprawka po pierwszej wersji):
     „chciałem, by grafika była obok karteczki. karteczka mniejsza,
      OK po środku […] może czcionkę mógłbyś dać inną, jakąś pisaną lub
      lekko stylizowaną? czytelna i polskie znaki potrzebne. by odciąć od UI,
      bo to jakby osobna warstwa."
   oraz:
     „nie chcę jej jako okienko modalne. chcę jako po prostu div na wierzchu
      przed arkuszem rozgrywki" — dlatego NIE MA przygaszonego tła ani
      `position: fixed; inset: 0`; karta leży nad arkuszem i niczego nie
      blokuje poza sobą.

   UKŁAD (dwie warstwy, nie jedna ramka):
     `.karteczka`    — przezroczysty wiersz: [karta] + [Izzy]. Sam NIE ma tła
                       ani ramki, więc Izzy stoi OBOK kartki, a nie w niej.
     `.karteczka-okno` — właściwa kartka: brązowy pergamin, ramka i cień.
     `.karteczka-izzy` — grafika doradcy, bez tła, po stronie z `strona` kartki.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CZCIONKA KARTECZEK — pisana, ale CZYTELNA (poprawka właściciela).

   Właściciel po pierwszej wersji: „czcionka zła, mało czytelna. trzeba inną."
   Caveat (cienki, kaligraficzny) został wymieniony na **Kalam** — pisany, ale
   o grubszej kresce i większym x-heightcie, przez co czyta się wyraźnie
   lepiej w rozmiarze kartki. Wybór NIE był na oko: kandydatów (Kalam,
   Patrick Hand, Neucha, Comic Neue) porównano planszą
   `.narzedzia/porownaj-czcionki.py`, a polskie znaki sprawdzono odczytem
   tablicy znaków (cmap) każdego pliku. **Neucha odpadła** — nie ma polskich
   znaków (w kartce zostałyby puste miejsca).

   Pliki self-hosted w `assets/fonts/kalam-400/700-latin-ext.woff2`, podzbiór
   latin + latin-ext (polskie ą ć ę ł ń ó ś ź ż, także wielkie), cudzysłowy
   drukarskie, myślniki i wielokropek. `font-display: swap`, bez `preload`
   w HTML — czcionka jest potrzebna tylko wtedy, gdy kartka się pokaże.
   W tekście używamy wagi 700: właściciel prosił o grubszą kreskę.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Kalam karteczki';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-400-latin-ext.woff2') format('woff2');
}

@font-face {
  font-family: 'Kalam karteczki';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/kalam-700-latin-ext.woff2') format('woff2');
}

.karteczka {
  position: fixed;
  /* 110 — NAD pływającym panelem wydatków (ma `z-index: 99`), a POD dymkami
     pomocy (130). Właściciel po testach na telefonie: „karteczki powinny być
     na wierzchu. panel ma z-index=99 — musi być niższy niż grafika."
     Wcześniej było 60, więc panel zasłaniał kartkę i grafikę. */
  z-index: 15;
  left: 50%;
  bottom: var(--odst-3, 1.5rem);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;      /* Izzy „stoi" na dole, obok kartki */
  /* ------------------------------------------------------------------------
     ODSTĘP I WSUNIĘCIE GRAFIKI — jedna para liczb, żeby kolizja z tekstem była
     NIEMOŻLIWA (właściciel: „k3 — grafika zbyt blisko tekstu, przykrywa go").

     BŁĄD, KTÓRY TO POWODOWAŁ: komentarze zakładały, że `--odst-3` to 1,5 rem
     (24 px), a token ma **0,75 rem = 12 px** (`tokens.css`). Dlatego realny
     padding karty wynosił 12 px, a grafika nachodziła 32 px (44 px wsunięcia
     minus 12 px odstępu) — czyli **20 px wchodziło na obszar tekstu**.
     Rachunek potwierdzał pomiar (nachodzenie 32 px), a nie komentarz.

     Teraz: `gap` 12 px (token), wsunięcie 32 px → nachodzenie 20 px, a padding
     boczny karty 28 px → **8 px zapasu** między grafiką a pierwszą literą.
     WARUNEK UTRZYMANIA: nachodzenie = wsunięcie − gap MUSI być mniejsze od
     `--kart-padding-x`. Kto zwiększa wsunięcie, musi zwiększyć padding. */
  --kart-padding-x: 1.75rem;   /* 28 px — padding boczny karty (i zapas dla grafiki) */
  --kart-wsuniecie: 2rem;      /* 32 px — o tyle grafika wchodzi w stronę karty */
  gap: var(--odst-3, 0.75rem);
  width: max-content;
  /* SZEROKOŚĆ WARSTWY — to ona była prawdziwym wąskim gardłem, nie sama karta.
     Przy 40 rem (640 px) grafika (320 px) + odstęp (12 px) zostawiały karcie
     tylko ~308 px, więc długie teksty łamały się na kilkanaście linii i dlatego
     pojawiał się scroll (właściciel: „k2, k4, k5 — przewijanie — może przy długich
     tekstach zrobisz trochę szersze okienka, a nie tylko wyższe?").
     56 rem = 896 px mieści kartę 544 px (patrz `--dluga` niżej) + grafikę 320 px
     + odstęp. Na wąskich ekranach warstwa rozciąga się na całą szerokość
     (media query niżej), więc ta zmiana dotyczy desktopu. */
  max-width: min(56rem, calc(100% - 2rem));
  /* Wysokość: właściciel zauważył, że „czasem ten scroll jednak się pojawia".
     Podnosimy limit tak, by średnie kartki mieściły się w CAŁOŚCI (przy 18 px
     Kalam i karcie 26 rem najdłuższy tekst ma ok. 460 px), a przewijanie
     zostaje tylko dla naprawdę długich treści. Karta nadal nie zajmuje
     całego ekranu — 64vh przy 900 px to ok. 576 px.
     POPRAWKA (właściciel): „k1 na serwerze ma pasek przewijania" — okno 780×439,
     a przy `80vh` limit wypadał na 351 px, więc NAWET krótki tekst dostawał pasek.
     Limit liczymy teraz od realnej wysokości okna minus zapas (pasek zostaje
     tylko wtedy, gdy treść naprawdę się nie mieści w oknie).

     DRUGA POPRAWKA (właściciel, 2026-10-15): „na desktopie mam bardzo dużo
     miejsca na karteczkę, zajmuje może 1/3 wysokości ekranu, powiększenie nie
     powinno być problemem". Zmierzone: najdłuższa kartka (9, 804 znaki) miała
     451 px przy oknie 621–900 px, czyli ~⅓–½ wysokości — miejsca było dużo.
     Dlatego limit to teraz `100vh - 3rem` (zostaje 24 px marginesu u góry i tyle
     samo u dołu, bo warstwa stoi na `bottom: 1.5rem`) i kubełek `52rem`, żeby
     limit działał także na wysokich ekranach. Efekt: kartki 9, 11 i 13 mieszczą
     się BEZ paska na wszystkich typowych wysokościach okna.
     NIE dotyczy telefonu — tam media query niżej zostawia miejsce na grafikę. */
  max-height: min(calc(100vh - 2.5rem), 52rem);
  /* Ta warstwa jest przezroczysta — kartką jest dopiero `.karteczka-okno`. */
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;       /* klika się tylko kartka, nie puste pole wokół */
}

.karteczka > * {
  pointer-events: auto;
}

/* Izzy raz z prawej, raz z lewej (właściciel) — kolejność w wierszu. */
.karteczka--lewa {
  flex-direction: row-reverse;
}

/* --- WŁAŚCIWA KARTKA: brąz, pergamin, wyraźnie „osobna warstwa" ---------- */
.karteczka-okno {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Kolejność warstw: na TELEFONIE kartka jest nad Izzym (grafika jest tam mała,
     więc wsunięcie pod kartę daje efekt głębi). Na DESKTOPIE odwrotnie — decyzja
     właściciela: „na desktopie fajnie, jakby grafika była na wierzchu […]
     ogonek lekko przykrywa kartkę, ale nie wpływa na czytelność". Reguła dla
     szerokich ekranów jest niżej, w media query. */
  position: relative;
  z-index: 2;
  max-width: min(26rem, calc(100% - 6rem));
  /* LIMIT WYSOKOŚCI MUSI BYĆ TAKŻE TUTAJ, nie tylko na warstwie `.karteczka`.
     Warstwa jest wyrównana do dołu (`align-items: flex-end`), więc element
     wyższy od niej rośnie W GÓRĘ i wychodzi za ekran: zmierzone na 375 px
     dawało okno od -149 px (pierwsze linie tekstu poza ekranem), a jednocześnie
     `overflow: auto` na tekście nie miał się od czego włączyć. Z tym limitem
     tekst przewija się w środku, a przycisk OK zostaje widoczny.
     ZWIĘKSZONY razem z limitem warstwy wyżej (właściciel: na desktopie jest
     dużo miejsca) — oba limity MUSZĄ być takie same, inaczej karta wyższa od
     warstwy rośnie w górę i wychodzi za ekran. */
  max-height: min(calc(100vh - 2.5rem), 52rem);
  /* Padding boczny bierze się z `--kart-padding-x` (28 px) — to on wyznacza
     zapas między grafiką a tekstem. Wcześniej stało tu `var(--odst-3)`, czyli
     12 px, i grafika wchodziła na litery. Padding PIONOWY zmniejszony z 12 px
     do 10 px, bo właściciel zgłosił pasek przewijania przy K1, K3 i K8, gdzie
     teksty są krótkie (220–470 znaków) — winna była wysokość karty, nie treść. */
  /* Padding pionowy 8 px (było 10 px) — ZAPAS WYSOKOŚCI dla pola tekstu.
     Właściciel po testach (okno 967×621): „w karteczkach dodaj trochę wysokości,
     szczególnie 8 i 9, ale dobrze by miały trochę px zapasu, a nie na styk, bo
     czasem pasek przewijania się pojawia". Pomiar kartki 8 pokazał dokładnie
     ten stan: TEKST_widoczna=216, TEKST_naturalna=217, czyli ZAPAS 1 px —
     przy innym skalowaniu systemu (albo zaokrągleniu wysokości linii) ta
     jedynka zamienia się w widoczny pasek. Zapas budujemy po bokach układu
     (tu i przy `margin` przycisku OK), a NIE przez zmniejszenie czcionki:
     18 px / 1,5 zostają (właściciel: „nie zmniejszaj czcionki"). */
  padding: 8px var(--kart-padding-x) 8px;
  border: 2px solid #5a3a17;
  border-radius: 8px;
  /* Pergamin cieplejszy niż karty arkusza + podwójna ramka: to ma wyglądać jak
     kartka od doradcy, a nie jak element interfejsu.
     PÓŁPRZEZROCZYSTE tło (właściciel: „może tło kartki zrobić półprzezroczyste")
     — 0,88 to najniższa wartość, przy której tekst #3a2410 pozostaje czytelny
     nad jasnym arkuszem; niżej kontrast spada i czyta się męcząco. Wartość
     `rgba` jest jednocześnie ZAPASEM, gdy przeglądarka nie zna `backdrop-filter`
     (rozmycie jest tylko dodatkiem, nie warunkiem czytelności). */
  background:
    linear-gradient(180deg, rgba(247, 236, 214, 0.88) 0%, rgba(237, 220, 187, 0.88) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 230, 0.75),
    var(--cien-2, 0 10px 26px rgba(40, 26, 12, 0.35));
}

/* SZERSZA karta dla długich tekstów. Właściciel po testach na desktopie:
   „k2, k4, k5 — przewijanie — może przy długich tekstach zrobisz trochę szersze
   okienka, a nie tylko wyższe?". Klasę `karteczka--dluga` dodaje `karteczki.js`,
   gdy tekst ma więcej niż 380 znaków. 32 rem = 512 px, czyli przy 18 px Kalam
   ok. 57 znaków w wierszu — wciąż w granicach czytelności (45–75 znaków),
   a liczba wierszy (i przewijania) spada. Na telefonie karta zajmuje całą
   szerokość, więc reguła dotyczy wyłącznie szerokich ekranów. */
@media (min-width: 48rem) {
  .karteczka--dluga .karteczka-okno {
    /* 34 rem = 544 px dla tekstów dłuższych niż 380 znaków. Przy 18 px Kalam to
       ok. 60 znaków w wierszu — w granicach czytelności (45–75), a liczba linii
       (i przewijania) wyraźnie spada. Wcześniej 32 rem, ale karta i tak była
       ściśnięta do ~308 px przez szerokość warstwy — patrz `max-width` wyżej. */
    max-width: min(34rem, calc(100% - 20rem));
  }
}

.karteczka-tekst {
  flex: 1 1 auto;
  overflow: auto;
  /* `min-height: 0` jest KONIECZNE: bez tego element flex nie chce się kurczyć
     poniżej swojej treści, więc zamiast przewijania karta ROSŁA w górę i przy
     długim tekście wyjeżdżała za górną krawędź ekranu (zmierzone: kartka 9 na
     375 px miała okno od -149 px, czyli pierwsze linie były poza ekranem).
     Z `max-height` na `.karteczka-okno` (niżej) daje to przewijanie w środku. */
  min-height: 0;
  font-family: 'Kalam karteczki', 'Segoe Script', cursive;
  /* WAGA 400 — poprawka właściciela po testach: „zmień font-weight na 500
     zamiast 700 — przy 700 nie widać pogrubień. poza tym przy 500 będzie tekst
     zajmował mniej miejsca".
     Kalam NIE MA wagi 500 (sprawdzone dwiema drogami: Google Fonts pomija
     `wght@500` w CSS, a interpolacja statycznych 400 i 700 kończy się
     „incompatible masters" na konturach), więc bierzemy **400** — czyli jeszcze
     lżejszy od 500, a więc i mniej miejsca, i mocniejszy kontrast wobec
     pogrubień. Pogrubienie ma osobną regułę niżej (700), dlatego `<b>` jest
     teraz WIDOCZNE, a wcześniej nie było (tekst i bold miały tę samą wagę). */
  font-weight: 400;
  font-size: var(--rozmiar-l, 1.125rem);
  line-height: 1.5;
  color: #3a2410;
  white-space: pre-line;   /* akapity z tabeli właściciela rozdzielamy sami */
  /* Długie, nieprzerywalne wyrazy (albo wklejony adres) rozpychały kartkę
     w poziomie — na telefonie karta wychodziła poza ekran i trzeba było
     przewijać w bok (zgłoszenie właściciela: „karteczka 2 ciągle wychodzi
     w prawo poza ekran"). `anywhere` łamie takie wyrazy, nie ruszając
     zwykłego tekstu. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* POGRUBIENIA — muszą być widoczne (właściciel: „czy możemy robić pogrubienie
   w karteczkach? znaczkami <b> albo **Jesień:**?"). `karteczki.js` zamienia
   `**…**` na `<b>`, a `<b>`/`<strong>` przechodzą przez dozwoloną listę.
   Waga 700 wobec tekstu 400 daje wyraźny kontrast — przy poprzedniej parze
   700/700 pogrubienie było niewidoczne i właśnie to zgłosił właściciel. */
/* GŁOS BOHATERA I KOMUNIKAT SYSTEMOWY (25.10.2026).
 *
 * Właściciel: „ten komunikat systemowy »Od następnej tury George wystawia
 * połowę stada…« powinien być może inną czcionką, jakoś odróżnić to, co on
 * mówi, od komunikatu. chyba jego zdanie w cudzysłów”.
 *
 * ZDANIE BOHATERA — kursywa i cudzysłowy. Cudzysłowy dodaje CSS
 * (`::before`/`::after`), a NIE tekst w panelu: właściciel edytuje treść
 * w panelu i przy pierwszej poprawce usunąłby znaki, gdyby były w tekście.
 *
 * KOMUNIKAT SYSTEMOWY — mniejszy, bez kursywy, wyciszony i oddzielony
 * kreską. To nie wypowiedź postaci, tylko informacja o zasadach, więc nie
 * może wyglądać jak kolejne zdanie George'a.
 * -------------------------------------------------------------------------- */
.karteczka-cytat {
  margin: 0 0 0.75rem 0;
  font-style: italic;
}

.karteczka-cytat::before {
  content: '„';
}

.karteczka-cytat::after {
  content: '”';
}

.karteczka-system {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(58, 36, 16, 0.28);
  /* Czcionka treści (nie „pisanina” Kalam) — komunikat jest oderwany od
     głosu postaci, więc zmiana kroju jest tu informacją, nie ozdobnikiem. */
  font-family: var(--font-tresc);
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(58, 36, 16, 0.78);
}

.karteczka-tekst b,
.karteczka-tekst strong {
  font-weight: 700;
}

/* RAMKA FOKUSA TYLKO PRZY NAWIGACJI KLAWIATURĄ (27.10.2026).
   Właściciel: „mają domyślnie content zaznaczony, robi się ramka wokół niego,
   słabo to wygląda, lepiej bez”.
   Kartka dostaje fokus programowo po pokazaniu, a Chrome traktuje taki fokus
   jak klawiaturę — stąd obwódka od razu. `data-fokus-programowy` (ustawiany
   w `karteczki.js`) wyłącza obwódkę TYLKO w tym przypadku: pierwszy Tab
   zdejmuje znacznik i dostępność działa dalej. */
.karteczka-tekst:focus-visible:not([data-fokus-programowy]) {
  outline: 2px solid #8a6a3a;
  outline-offset: 2px;
}

.karteczka-tekst[data-fokus-programowy]:focus {
  outline: none;
}

.karteczka-ok {
  /* OK po środku (właściciel) */
  align-self: center;
  /* Odstęp nad przyciskiem 4 px (było 8 px) — drugie źródło ZAPASU dla pola
     tekstu (patrz komentarz przy `padding` karty). Razem z cieńszym paddingiem
     daje to ok. 8 px więcej miejsca na tekst, więc kartki o treści „na styk"
     (8 i 9) przestają łapać pasek przewijania. Uwaga: `--odst-2` to 8 px,
     a nie 12 px — dawny fallback `0.75rem` był mylący. */
  margin: var(--odst-1, 0.25rem) auto 0;
  min-height: 44px;         /* wymóg dotykowy — zasada z arkusza */
  min-width: 6rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #5a3a17;
  border-radius: 8px;
  background: linear-gradient(180deg, #c79a52 0%, #a9762f 100%);
  color: #2b1a08;
  font-family: 'Kalam karteczki', 'Segoe Script', cursive;
  font-size: var(--rozmiar-l, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.karteczka-ok:hover,
.karteczka-ok:focus-visible {
  background: linear-gradient(180deg, #d6ac66 0%, #b9843a 100%);
}

/* --- GRAFIKA: obok kartki, częściowo pod jej krawędzią ------------------
   Właściciel: „grafika może częściowo chować się za karteczką. to będzie fajny
   efekt." Robimy to PRZESUNIĘCIEM (transform), a nie ujemnym marginesem:
   przesunięcie nie zmienia szerokości wiersza, więc grafika nie wypycha kartki
   ani nie wychodzi za ekran na telefonie. Kartka ma `z-index: 2`, więc
   zasłania tę część grafiki, która wchodzi pod nią.

   Ile zasłaniamy: tyle, by zniknął bok/tors, a TWARZ i ręce zostały widoczne —
   grafiki Izzy'ego są portretami, więc zasłonięcie liczone jest od wewnętrznej
   krawędzi (tej od kartki), a nie od środka obrazu. */
.karteczka-izzy {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 1;               /* pod kartką — na telefonie (patrz media query) */
  background: none;
  border: 0;
}

/* Izzy po prawej (kartka po lewej) → wsuwamy go w LEWO, pod prawą krawędź kartki.
   Nachodzenie = `--kart-wsuniecie` (32 px) − gap (12 px) = **20 px**, a padding
   boczny karty to 28 px, więc grafika wchodzi wyłącznie na margines (8 px zapasu
   do pierwszej litery). Wcześniej stało tu 2,75 rem, co przy paddingu 12 px
   dawało 20 px nachodzenia NA TEKST — to zgłosił właściciel („k3 — grafika
   zbyt blisko tekstu, przykrywa go"). */
.karteczka--prawa .karteczka-izzy {
  transform: translateX(calc(-1 * var(--kart-wsuniecie)));
}

/* Izzy po lewej (wiersz odwrócony) → wsuwamy go w PRAWO, pod lewą krawędź kartki */
.karteczka--lewa .karteczka-izzy {
  transform: translateX(var(--kart-wsuniecie));
}

.karteczka-izzy img {
  display: block;
  width: auto;
  height: auto;
  /* GRAFIKI BEZ POWIĘKSZANIA (poprawka właściciela: „grafiki troszkę
     powiększyłeś, przez to straciły na jakości. ja ci dałem dobre rozmiary
     i dobrą jakość […] nie obniżaj im jakości").
     Pliki w `assets/img/karteczki/` są teraz kopiami 1:1 od właściciela —
     300×350 (k1, k2) i 350×350 (k3–k13), bez rekompresji i bez zmiany
     wymiarów. Żeby ich nie rozmyć, wyświetlamy je WYŁĄCZNIE w dół od
     naturalnego rozmiaru: `max-height` 320 px i `max-width` 350 px to górne
     granice, więc przeglądarka nigdy nie skaluje obrazu w górę. */
  max-height: min(52vh, 20rem, 350px);
  max-width: 350px;
  object-fit: contain;      /* nigdy nie ucinamy Izzy'ego */
}

/* --- Desktop: GRAFIKA NA WIERZCHU ----------------------------------------
   Właściciel: „na desktopie fajnie, jakby grafika była na wierzchu […] ogonek
   lekko przykrywa kartkę, ale nie wpływa na czytelność." Odwracamy więc
   kolejność warstw względem telefonu: Izzy wychodzi NAD kartę i nachodzi na jej
   krawędź. Bezpieczeństwo czytelności: grafika nachodzi maksymalnie tyle, ile
   wynosi poziomy padding karty (1,5 rem = 24 px) minus odstęp wiersza — czyli
   wchodzi na margines, a NIE na tekst. Gdyby ktoś zwiększył wsunięcie poniżej,
   musi też zwiększyć padding, inaczej zasłoni litery. */
@media (min-width: 48rem) {
  .karteczka-izzy {
    z-index: 3;             /* nad kartką (kartka ma 2) */
  }
}

/* --- Telefon: kartka ma zmieścić się nad arkuszem i nie zająć ekranu ----- */
@media (max-width: 47.99rem) {
  .karteczka {
    left: var(--odst-2, 0.75rem);
    right: var(--odst-2, 0.75rem);
    bottom: var(--odst-2, 0.75rem);
    transform: none;
    width: auto;
    max-width: none;
    /* UKŁAD KOLUMNOWY (właściciel, po testach na telefonie): „chciałbym, aby
       karteczka była NAD grafiką, a grafika ok. 2× większa, bo teraz malutka
       jest". Wcześniej na wąskim ekranie karta i grafika stały OBOK siebie —
       karta dostawała tylko ~71% szerokości, a Izzy miał 99 px. Teraz karta
       zajmuje całą szerokość, a grafika jest pod nią i dwa razy większa. */
    flex-direction: column;
    align-items: stretch;
    /* W pionie nie ma czego wsuwać pod kartę — wsunięcie dotyczyło układu
       poziomego (grafika obok karty na desktopie). */
    --kart-wsuniecie: 0;
    /* Wysokość warstwy = okno minus zapas; w środku mieści się karta (ze
       własnym limitem niżej) i grafika (~32vh). */
    max-height: min(calc(100vh - 1.5rem), 34rem);
    gap: var(--odst-1, 0.375rem);
  }

  /* Warianty „lewa/prawa" na desktopie odwracają wiersz — na telefonie układ
     jest zawsze kolumnowy (karta nad grafiką), więc je neutralizujemy. */
  .karteczka--lewa,
  .karteczka--prawa {
    flex-direction: column;
  }

  .karteczka--lewa .karteczka-izzy,
  .karteczka--prawa .karteczka-izzy {
    transform: none;
  }

  /* Grafika ~2× większa (24vw → 48vw) i przycięta wysokością, żeby nie
     zjadła miejsca karcie. `flex: 0 0 auto` — grafika trzyma swój rozmiar,
     a kurczy się karta (i przewija w środku). */
  .karteczka-izzy {
    flex: 0 0 auto;
  }

  .karteczka-izzy img {
    max-height: 32vh;
    max-width: 48vw;
  }

  .karteczka-okno {
    width: 100%;
    /* Szerokość liczona OD EKRANU, nie od strony (właściciel: „zauważyłem, że
       `max-width: 100%` w `.karteczka-okno` rozszerza to okienko. może lepiej
       używać `100vw`?"). Strona gry bywa szersza od ekranu, bo zakładki
       wystają w prawo — karta nie może dziedziczyć tej szerokości. */
    max-width: calc(100vw - 1.5rem);
    /* `min-width: 0` — element flex domyślnie nie kurczy się poniżej treści,
       więc długi wyraz potrafił rozepchnąć kartkę poza ekran. */
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    /* Na telefonie padding boczny 12 px (karta jest wąska — 28 px zjadłoby tekst). */
    padding: var(--odst-2, 0.75rem);
    /* Limit MUSI zostawić miejsce na grafikę pod kartą (32vh + odstępy),
       inaczej karta wypchnęłaby obrazek poza ekran. */
    max-height: min(calc(100vh - 34vh - 2rem), 30rem);
  }

  .karteczka-tekst {
    /* Właściciel po testach: „w karteczce możesz trochę zmniejszyć interlinię
       i czcionkę". 17 px → 16 px, interlinia 1,5 → 1,35 (czytelność zostaje —
       Kalam ma grubą kreskę; niżej nie schodzimy). */
    font-size: calc(var(--rozmiar-l, 1.125rem) - 2px);
    line-height: 1.35;
  }
}

/* --- KARTECZKI OGÓLNE („ko") na stronie głównej ---------------------------
   Te same klasy co kartki tutorialowe (jedna kartka, jedno zachowanie), ale
   grafiki KO są WYŻSZE (ko1 455×535, ko2 347×535) i portretowe, więc dostają
   własne górne granice — nadal NIGDY nie większe od naturalnego rozmiaru
   (właściciel: „nie obniżaj im jakości"). Reszta układu (odstęp, wsunięcie,
   warstwy) zostaje wspólna. */
.karteczka--ko .karteczka-izzy img {
  max-height: min(60vh, 26rem, 535px);
  max-width: 455px;
}

@media (max-width: 47.99rem) {
  .karteczka--ko .karteczka-izzy img {
    max-height: 44vh;
    max-width: 30vw;
  }
}

/* Animacja wejścia jest krótka (150–250 ms) i wyłączana na życzenie
   użytkownika — zasada obowiązująca w całym projekcie. */
@media (prefers-reduced-motion: no-preference) {
  .karteczka {
    animation: karteczka-wejscie 180ms ease-out;
  }

  @keyframes karteczka-wejscie {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  @media (max-width: 47.99rem) {
    .karteczka {
      animation-name: karteczka-wejscie-mobile;
    }

    @keyframes karteczka-wejscie-mobile {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

/* ==========================================================================
   KARTECZKI OGÓLNE (KO) NA STRONIE GŁÓWNEJ — poprawki właściciela
   Cytat: „KO1 ma pasek przewijania. przesuń może karteczkę trochę bliżej
   grafiki i całość bardziej w prawo, troszkę na prawo od logowania
   (częściowo za obrys contentu)."

   Trzy zmiany, wszystkie dotyczą WYŁĄCZNIE karteczek KO (kartki w arkuszu
   zostają bez zmian):
   1. `left: 58%` zamiast 50% → cała kompozycja (kartka + Izzy) przesuwa się
      w prawo, więc prawa krawędź grafiki wychodzi poza obrys treści.
      `transform: translateX(-50%)` z reguły bazowej zostaje, więc to nadal
      wyśrodkowanie — tylko wokół 58% szerokości, a nie 50%.
   2. `gap: 8 px` zamiast 12 px → kartka bliżej grafiki. UWAGA: to zwiększa
      nachodzenie grafiki na kartę z 20 px do 24 px; padding boczny karty ma
      28 px, więc zapas do pierwszej litery nadal wynosi 4 px. Kto zmniejszy
      `gap` albo zwiększy `--kart-wsuniecie`, MUSI podnieść `--kart-padding-x`,
      inaczej grafika wejdzie na tekst (ten błąd już raz wystąpił).
   3. Wyższy limit wysokości karty → krótki tekst (KO1 ma ~130 znaków) nie ma
      prawa dostać paska przewijania. Pasek zostaje wyłącznie dla naprawdę
      długich treści.
   Na telefonie (poniżej 48 rem) NIC nie zmieniamy: tam karta zajmuje szerokość
   ekranu, a przesunięcie w prawo wypchnęłoby ją poza ekran. */
@media (min-width: 48rem) {
  .karteczka--ko {
    left: 62%;                 /* było 58% — właściciel: „całość bardziej w prawo" */
    top: 2.5rem;               /* właściciel: „i troszkę w dół"; `top` zamiast
                                  `transform`, bo animacja wejścia nadpisuje
                                  transform i przesunięcie by przepadło */
    gap: var(--odst-2, 0.5rem);
  }
}

/* WĄSKIE PULPITY (48–64 rem) — ZMIERZONY DEFEKT.
   Pełne przesunięcie w prawo (62%) wypychało kartkę KO za prawą krawędź okna:
   przy 800 px prawa krawędź wypadała na 860 px, czyli 60 px poza ekran i
   pojawiał się poziomy pasek przewijania (pomiar sondą: `w_ekranie: false`).
   Na telefonie (< 48 rem) karta zajmuje szerokość ekranu, więc tam problemu
   nie ma — to dotyczy wyłącznie wąskich okien desktopowych. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .karteczka--ko {
    left: 50%;
  }
}

.karteczka--ko .karteczka-okno {
  /* KO też ma liczyć limit od realnej wysokości okna — właściciel ma niskie okno
     (692 px) i przy `vh` karta dostawała pasek przy krótkim powitaniu. */
  max-height: min(calc(100vh - 1.5rem), 52rem);
}

/* Zapas na zaokrąglenie `line-height` (1,5 × 18 px = 27 px, więc ostatnia linia
   potrafi przekroczyć pole o 1–3 px). Bez tego zapasu przy NISKIM oknie
   (u właściciela 1596 × 692 px) pojawia się pasek przewijania mimo krótkiego
   tekstu — a nie jest to wina limitu wysokości, tylko zaokrąglenia. */
.karteczka--ko .karteczka-tekst {
  padding-bottom: 3px;
}

/* Grafika KO jest ozdobna i — po przesunięciu kompozycji w prawo — nachodzi na
   panel logowania na stronie głównej. Bez tej reguły obrazek PRZECHWYTYWAŁBY
   kliknięcia w pola formularza (`.karteczka > *` ma `pointer-events: auto`),
   więc część formularza byłaby nieklikalna. Kliknięcia muszą przechodzić na
   stronę pod spodem. */
.karteczka--ko .karteczka-izzy {
  pointer-events: none;
}