/* Ognisko / Ember — system wizualny.

   DECYZJE, nie wartości domyślne:

   1. SKALA TYPOGRAFICZNA — cztery stopnie w proporcji 1,25. Nic poza nimi.
      Wcześniej na jednym ekranie było 15 rozmiarów z przeliczeń rem.

   2. RAMPA TEKSTU — cztery stopnie, nie dwa. Hierarchia buduje się
      rozmiarem, wagą I kolorem naraz, nie samym rozmiarem.

   3. GŁĘBIA — jedna strategia: włoskowate obramowania, zero cieni.
      Aplikacja ma być cicha. Jedyny wyjątek to karta zadania: ona jedna
      dostaje cień i akcent, bo to ona ma wygrywać wzrokiem.

   4. PROMIENIE — koncentryczne: zewnętrzny = wewnętrzny + padding.

   5. HIERARCHIA DNIA — zadanie prowadzi, rytuały i przypowieść schodzą
      do cichych wierszy. Promocja bez degradacji reszty nie jest hierarchią.
*/

:root {
  /* --- powierzchnie ------------------------------------------------ */
  --tlo:          #fdf8f2;
  --tlo-karta:    #fffdfa;
  --tlo-cichy:    #f7f0e7;

  /* --- rampa tekstu: cztery stopnie -------------------------------- */
  --tekst:        #2b1f16;
  --tekst-2:      #5b4839;
  --tekst-3:      #8a7663;
  --tekst-4:      #ab9a86;

  /* --- linie -------------------------------------------------------- */
  --linia:        #ece0d2;
  --linia-mocna:  #ddcdb9;

  /* --- akcent: jeden, znaczący -------------------------------------- */
  --zar:          #c9541f;
  --zar-tlo:      #fbeee4;
  --zielen:       #4d8c26;
  --grunt:        #e4d6c4;
  --kora:         #6b4b33;

  /* --- promienie koncentryczne -------------------------------------- */
  --r-zewn:       20px;
  --r-wewn:       12px;
  --r-pigulka:    999px;

  /* --- skala typograficzna: 13 / 16 / 20 / 25 ---------------------- */
  --t-meta:       0.8125rem;
  --t-body:       1rem;
  --t-lead:       1.25rem;
  --t-title:      1.5625rem;

  --cien-hero:    0 1px 2px rgba(80, 50, 25, .06), 0 12px 28px rgba(80, 50, 25, .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo:         #16100b;
    --tlo-karta:   #201810;
    --tlo-cichy:   #1b140e;
    --tekst:       #f4ebe1;
    --tekst-2:     #cbb8a5;
    --tekst-3:     #9c8975;
    --tekst-4:     #7a6a59;
    --linia:       #33261b;
    --linia-mocna: #4a3728;
    --zar:         #f08a45;
    --zar-tlo:     #2c1c11;
    --zielen:      #8bc34a;
    --grunt:       #2b1f17;
    --kora:        #8a6647;
    --cien-hero:   0 1px 2px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app { padding-bottom: 96px; }
/* `hidden` MUSI działać wszędzie. Reguła przeglądarki ma specyficzność
   atrybutu, więc każde `.klasa { display: ... }` ją unieważnia — i tak było
   z `.glowny`: przycisk „Zaczynamy" zostawał na ekranie obok „Zrobione ✓",
   bo hidden nic nie robił. Łatanie tego selektor po selektorze zostawia
   następne takie miejsce na później. */
[hidden] { display: none !important; }

.ekran[hidden] { display: none; }

.tresc { max-width: 560px; margin: 0 auto; padding: 24px 20px 40px; }
.tresc.waska { max-width: 460px; }

h1 {
  font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em;
  margin: 0 0 8px; text-wrap: balance;
}
h2 {
  font-size: var(--t-lead); font-weight: 600; letter-spacing: -.02em;
  margin: 0 0 10px; text-wrap: balance;
}

.znak { font-size: 1.75rem; color: var(--zar); margin: 4px 0 0; }
.lead { color: var(--tekst-2); margin: 0 0 32px; }
.pomoc { color: var(--tekst-3); font-size: var(--t-meta); line-height: 1.55; }
/* Czwarty stopień rampy jest DEKORACYJNY (2,6 kontrastu). Nie stawiamy
   na nim tekstu, który ma być przeczytany — a .pomoc to zawsze wyjaśnienie. */
.pomoc.mini { font-size: var(--t-meta); color: var(--tekst-3); }

.etykieta { font-size: var(--t-body); font-weight: 600; margin: 28px 0 6px; }
.etykieta.mini {
  font-size: var(--t-meta); letter-spacing: .04em; text-transform: none;
  color: var(--tekst-3); font-weight: 500; margin: 0 0 4px; display: block;
}

/* ------------------------------------------------- stany, wszędzie */

:where(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--zar);
  outline-offset: 2px;
  border-radius: var(--r-wewn);
}

button {
  font: inherit; cursor: pointer;
  border-radius: var(--r-pigulka);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
button:active { transform: scale(.985); }

.glowny {
  display: block; width: 100%;
  padding: 15px 20px;
  background: var(--zar); color: #fff;
  font-weight: 600; font-size: var(--t-body);
  margin-top: 16px;
}
.glowny:hover { background: color-mix(in srgb, var(--zar) 88%, #000); }
.glowny:disabled { background: var(--linia); color: var(--tekst-4); cursor: default; }
.glowny:disabled:hover { background: var(--linia); }
.glowny.jasny { background: #fff; color: #17100b; max-width: 320px; margin: 32px auto 0; }
.glowny.jasny:hover { background: #efe6dc; }

.wtorny {
  padding: 11px 18px; background: transparent;
  border-color: var(--linia-mocna); color: var(--tekst-2);
  font-size: var(--t-meta); font-weight: 500;
}
.wtorny:hover { background: var(--tlo-cichy); border-color: var(--tekst-4); }
.wtorny[aria-pressed="true"] {
  background: color-mix(in srgb, var(--zielen) 12%, transparent);
  border-color: color-mix(in srgb, var(--zielen) 40%, transparent);
  color: var(--zielen); font-weight: 600;
}
.tekstowy {
  background: none; border: none; padding: 10px 12px; min-height: 44px;
  color: var(--tekst-3); font-size: var(--t-meta); text-decoration: underline;
  text-underline-offset: 3px;
}
.tekstowy:hover { color: var(--tekst); }

/* ------------------------------------------------- onboarding */

.lista-osob { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-osob li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 6px;
  background: var(--tlo-karta); border: 1px solid var(--linia);
  border-radius: var(--r-wewn);
}
.lista-osob .wiek { color: var(--tekst-3); font-size: var(--t-meta); margin-left: auto; }

.dodaj input[type="text"] {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 1px solid var(--linia-mocna); border-radius: var(--r-wewn);
  background: var(--tlo-karta); color: var(--tekst);
}
.wiersz-dodania { display: flex; gap: 8px; }
.wiersz-dodania input { flex: 1; }
.wiersz-dodania .wtorny { flex: none; white-space: nowrap; }

.grupy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 6px; }
.grupa {
  padding: 13px 4px; background: var(--tlo-karta);
  border: 1px solid var(--linia-mocna); color: var(--tekst);
  border-radius: var(--r-wewn); font-weight: 600; font-size: var(--t-meta);
}
.grupa:hover { border-color: var(--zar); color: var(--zar); background: var(--zar-tlo); }

/* ------------------------------------------------- nagłówek dnia */

.naglowek-dnia { margin: 4px 0 20px; }
.dzien-licznik {
  font-size: var(--t-title); font-weight: 600; letter-spacing: -.03em;
  margin: 0; font-variant-numeric: tabular-nums;
}
.dzien-tydzien {
  color: var(--tekst-3); font-size: var(--t-meta); margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

/* --------------------------- ciche wiersze: rytuały i przypowieść */

.sekcja { border-top: 1px solid var(--linia); }
.sekcja:last-of-type { border-bottom: 1px solid var(--linia); }

.wiersz {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 4px; min-height: 56px;
  background: none; border: none; border-radius: 0;
  color: var(--tekst-2); text-align: left; font-size: var(--t-body);
}
.wiersz:hover { color: var(--tekst); }
.wiersz svg { flex: none; color: var(--tekst-4); }
.wiersz-tytul { flex: 1; }
.wiersz-stan { font-size: var(--t-meta); color: var(--tekst-4); }
.wiersz-stan.zrobiony { color: var(--zielen); font-weight: 600; }
.strzalka { transition: transform .18s ease; }
.wiersz[aria-expanded="true"] .strzalka { transform: rotate(180deg); }
.wiersz[aria-expanded="true"] { color: var(--tekst); }

.wiersz-tresc { padding: 2px 4px 20px; }
.wiersz-tresc[hidden] { display: none; }

/* ------------------------------------------------- karta zadania */

.hero {
  background: var(--tlo-karta);
  border: 1.5px solid color-mix(in srgb, var(--zar) 38%, transparent);
  border-radius: var(--r-zewn);
  padding: 22px;
  margin: 22px 0;
  box-shadow: var(--cien-hero);
}
.etykieta-karty {
  font-size: var(--t-meta); letter-spacing: .02em;
  color: var(--zar); font-weight: 600; margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.hero h2 {
  font-size: var(--t-title); line-height: 1.2; letter-spacing: -.03em;
  margin: 0 0 12px;
}
.hero .opis { color: var(--tekst-2); margin: 0 0 14px; }
.hero .materialy { color: var(--tekst-3); font-size: var(--t-meta); margin: 12px 0 0; }

.rola {
  border-left: 2px solid color-mix(in srgb, var(--zar) 45%, transparent);
  padding: 2px 0 2px 14px; margin: 14px 0 4px;
}
.rola p:last-child { margin: 0; font-size: var(--t-meta); color: var(--tekst-2); }

blockquote {
  margin: 0 0 8px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.0625rem; line-height: 1.65;
  color: var(--tekst); white-space: pre-line;
}

/* ---- rytuał: gest jest stały, słowa tylko przykładem ---- */

.gest { margin: 0 0 16px; padding-left: 20px; color: var(--tekst-2); }
.gest li { margin-bottom: 6px; }
.gest li::marker { color: var(--zar); font-weight: 600; }

.przyklad {
  background: var(--zar-tlo);
  border: 1px dashed color-mix(in srgb, var(--zar) 30%, transparent);
  border-radius: var(--r-wewn);
  padding: 14px 16px 8px; margin-bottom: 16px;
}
.przyklad .etykieta.mini { color: var(--zar); }
.przyklad-stopka { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.przyklad-stopka .pomoc { margin: 0; flex: 1 1 190px; }

.zrobione { text-align: center; padding-top: 6px; }
.potwierdzenie { color: var(--zielen); font-weight: 600; margin: 0 0 2px; }

/* ------------------------------------------------- przypowieści */

.przypowiesc-wpis { padding: 4px 0 20px; border-bottom: 1px solid var(--linia); }
.przypowiesc-wpis:last-child { border-bottom: none; padding-bottom: 0; }
.przypowiesc-wpis h3 { font-size: var(--t-body); font-weight: 600; margin: 0 0 2px; }
.przypowiesc-wpis .kto { font-size: var(--t-meta); color: var(--tekst-4); margin: 0 0 10px; }
.przypowiesc-wpis .body {
  font-family: ui-serif, Georgia, serif; line-height: 1.7;
  color: var(--tekst-2); margin: 0 0 12px;
}
.przypowiesc-wpis .moral {
  font-size: var(--t-meta); padding: 10px 14px; border-radius: var(--r-wewn);
  background: var(--zar-tlo); color: var(--tekst); margin: 0;
}

/* ------------------------------------------------- tryb wspólny */

.tryb {
  position: fixed; inset: 0; z-index: 50;
  background: #0d0906; color: #f4ece2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center;
}
.tryb-nazwa { color: #8d7b6c; font-size: var(--t-meta); margin: 0 0 8px; }
.tryb-czas {
  font-size: 5rem; font-weight: 200; margin: 0;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
}
.tryb-podpis { color: #6f6055; line-height: 1.7; margin: 14px 0 0; font-size: var(--t-meta); }

/* ------------------------------------------------- emocje */

/* ISKRA — jedno zdanie sezonu, mówione sobie w oczy przed zadaniem.
   Celowo nie jest kartą ani przyciskiem: ma być widoczna i nieodhaczalna.
   Linia z boku zamiast ramki, bo to nie zadanie, tylko sposób zaczynania. */
.iskra {
  border-left: 3px solid var(--zar);
  padding: 2px 0 2px 16px;
  margin: 4px 0 22px;
}
.iskra .etykieta.mini { color: var(--zar); margin: 0 0 4px; }
.iskra-slowa {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem; line-height: 1.35;
  color: var(--tekst); margin: 0 0 6px;
}
.iskra-gest { font-size: var(--t-meta); color: var(--tekst-3); margin: 0; line-height: 1.5; }

/* Karta zadania — po jednej na grupę wiekową obecną w rodzinie. Etykieta
   wieku pojawia się TYLKO przy kilku kartach: przy jednym dziecku byłaby
   szumem, przy czworgu jest jedyną rzeczą, która mówi, czyje to zadanie. */
.karta-zadania + .karta-zadania { margin-top: 18px; }
.karta-zadania.zrobiona { opacity: .62; }
.karta-zadania .wiek-karty {
  display: inline-block; font-size: var(--t-meta); font-weight: 600;
  color: var(--zar); background: var(--zar-tlo);
  padding: 3px 10px; border-radius: var(--r-pigulka); margin-bottom: 8px;
}
.karta-zadania [data-pole="gotowe"] { text-align: center; margin: 6px 0 0; }

/* -------------------------------------------------------------- finał */
/* Ekran finału nie ma nawigacji — rodzina ma tu dojść i podjąć jedną
   decyzję, a nie przeskakiwać między zakładkami. */
.final .tresc { padding-top: 32px; }
.final h1 { margin: 2px 0 18px; }
.final .lead { margin: 20px 0 8px; }
.final .glowny { margin-top: 26px; }
.final .pomoc.mini { text-align: center; margin: 10px 0 0; }
#final-nad { color: var(--zar); margin: 0; }

/* ------------------------------------------------------------- sezony */
/* Kafel sezonu nosi swoją barwę na lewej krawędzi — rodzic rozpoznaje sezon
   po kolorze, zanim przeczyta nazwę. Ta sama barwa wybarwi potem liście. */
.sezony { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; gap: 8px; }
/* Barwa sezonu podana surowo gubi się na ciemnym tle — granat Zachwytu
   albo purpura Obfitości znikają. Mieszamy ją więc z kolorem tekstu: sezon
   zostaje rozpoznawalny, a krawędź i znak są widoczne w każdym z 19 wypadków. */
.sezon-kafel, #opis-znak {
  --barwa-czytelna: color-mix(in oklab, var(--barwa, currentColor) 72%, var(--tekst));
}
.sezon-kafel {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px 14px 20px;
  border-radius: var(--r-karta);
  background: var(--tlo-karta); border: 1px solid var(--linia-mocna);
  border-left: 4px solid var(--barwa-czytelna);
  color: var(--tekst);
}
.sezon-kafel:hover { border-color: var(--barwa-czytelna); background: var(--tlo-cichy); }
.sezon-kafel .nazwa {
  display: block; font-size: var(--t-body); font-weight: 600;
  color: var(--tekst); margin-bottom: 2px;
}
.sezon-kafel .zajawka {
  display: block; font-size: var(--t-meta); color: var(--tekst-3); line-height: 1.5;
}
.sezon-kafel .para-info {
  display: block; font-size: var(--t-meta); color: var(--tekst-4); margin-top: 6px;
}

#opis-znak { color: var(--barwa-czytelna); }
.wroc { margin: 0 0 12px; }
#opis-tresc h2 { font-size: var(--t-body); font-weight: 600; margin: 26px 0 8px; }
#opis-tresc p { color: var(--tekst-2); margin: 0 0 12px; }
#opis-tresc .trudne {
  border-left: 2px solid var(--linia-mocna); padding-left: 14px;
  color: var(--tekst-3); font-size: var(--t-meta); line-height: 1.6;
}
#opis-tresc .wtorek { list-style: none; padding: 0; margin: 0; }
#opis-tresc .wtorek li {
  padding: 10px 0; border-bottom: 1px solid var(--linia);
  color: var(--tekst-2); font-size: var(--t-meta); line-height: 1.55;
}
#opis-tresc .wtorek li:last-child { border-bottom: none; }
#opis-tresc .wtorek .kto {
  display: block; color: var(--tekst-4); font-size: var(--t-meta); margin-bottom: 2px;
}
#opis-tresc .bez-opisu { color: var(--tekst-3); font-size: var(--t-meta); }

.emocje-siatka { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.emocja {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; min-height: 46px;
  border-radius: var(--r-pigulka);
  background: var(--tlo-karta); border: 1px solid var(--linia-mocna);
  color: var(--tekst); font-size: var(--t-meta);
}
.emocja:hover { border-color: currentColor; }
.emocja .kropka { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.emocja[aria-pressed="true"] {
  border-color: currentColor; border-width: 2px; font-weight: 600;
  background: var(--tlo-cichy);
}

textarea {
  width: 100%; padding: 12px 14px; font: inherit; resize: vertical;
  border: 1px solid var(--linia-mocna); border-radius: var(--r-wewn);
  background: var(--tlo-karta); color: var(--tekst);
}

/* Na ekranie drzewa prowadzi drzewo. Liczby to podpis pod obrazem,
   nie tablica wyników — więc siedzą na przyciemnionej płytce i schodzą
   o stopień w rampie tekstu. */
body[data-ekran="ekran-drzewo"] .statystyki {
  background: color-mix(in oklab, var(--chrome-tlo, var(--tlo)) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-zewn);
  padding: 14px 12px;
}
body[data-ekran="ekran-drzewo"] .statystyki span { color: var(--chrome-tekst, var(--tekst)); }
body[data-ekran="ekran-drzewo"] .statystyki small,
body[data-ekran="ekran-drzewo"] .pomoc,
body[data-ekran="ekran-drzewo"] .plamka { color: var(--chrome-tekst-2, var(--tekst-3)); }

/* ------------------------------------------------- drzewo */

/* Drzewo należy do TEGO SAMEGO ŚWIATA co rzeka: to samo niebo, ta sama pora
   dnia, ten sam papier. Wcześniej unosiło się na kremowym tle z beżową
   elipsą i przez to czytało się jak ilustracja obok aplikacji, a nie jak
   miejsce, do którego się dopłynęło. */

.drzewo-plotno { margin: 0 auto; max-width: 560px; }
.drzewo { width: 100%; height: auto; display: block; }

/* --- sceneria u ujścia ------------------------------------------------ */

.drzewo .wzgorze-dal    { fill: var(--wzgorze-dal); }
.drzewo .wzgorze-srodek { fill: var(--wzgorze-srodek); }
.drzewo .woda-ujscie    { fill: var(--woda); }
.drzewo .brzeg-linia    { fill: none; stroke: var(--plycizna); stroke-width: 7; }
.drzewo .brzeg          { fill: var(--plycizna); }
.drzewo .cien-pnia      { fill: var(--cien-ziemi); }
.drzewo .trawa   { fill: none; stroke: var(--trawa-brzeg); stroke-width: 1.5; stroke-linecap: round; }
.drzewo .trzcina { fill: none; stroke: var(--trzcina); stroke-width: 1.4; stroke-linecap: round; }

/* Odbicie w wodzie: kopia korony przez <use>, więc nie kosztuje kształtów.
   Woda nie jest lustrem — odbicie jest blade i lekko rozmyte falą. */
.drzewo .odbicie { opacity: .26; }
.drzewo .odbicie .poswiata { display: none; }

/* --- drewno ------------------------------------------------------------ */

/* Gałęzie są WYPEŁNIENIAMI, nie kreskami — tylko tak mogą się zwężać.
   Trzy tony: pień najciemniejszy, gałązki najjaśniejsze. */
.drzewo .galezie .nabieg  { fill: var(--kora-ciemna); }
.drzewo .galezie .pien    { fill: var(--kora-ciemna); }
.drzewo .galezie .grube   { fill: var(--kora-srednia); }
.drzewo .galezie .cienkie { fill: var(--kora-jasna); }

/* Słoje mają WŁASNY, ciemniejszy ton. Dzielone z pniem wypełnienie znaczyło,
   że kora jest gładką rurą — smugi były tam, ale w kolorze tła, na którym
   leżały. Krycie niepełne, żeby czytały się jak usłojenie, a nie jak paski. */
.drzewo .galezie .sloj    { fill: var(--sloj-kory); opacity: .55; }

/* --- listowie ---------------------------------------------------------- */

/* Kolor liścia liczy tree.js z witalności — tutaj tylko głębia planów. */
.drzewo .listowie-tyl   { opacity: .9; }
.drzewo .listowie-przod { opacity: 1; }

/* OBRYS ROZDZIELA LIŚCIE. Bez niego sąsiednie liście w tym samym tonie zlewają
   się w jedną plamę i korona wygląda jak zieleń rozlana pędzlem, a nie jak
   listowie. Cienki, ciemniejszy — ma dzielić, nie rysować. */
.drzewo .listowie path {
  stroke: var(--obrys-liscia);
  stroke-width: .85;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Żyłka główna z ogonkiem. Razem z wcięciem u nasady i ostrym czubkiem
   to ona przesądza, że kształt czyta się jako LIŚĆ, a nie jako plama. */
.drzewo .zylka {
  fill: none; stroke: var(--zylka-liscia);
  stroke-width: .6; stroke-linecap: round; opacity: .26;
}
.drzewo .zylka-barwna { stroke: var(--zylka-barwna); opacity: .3; }

/* --- liście emocji ------------------------------------------------------ */

/* Barwy emocji niosą LIŚCIE, nie kwiaty. Kwiat siedział NA drzewie i korona
   czytała się jak choinka z lampionami; liść, który zmienił barwę, jest
   częścią korony. Metafora też trwalsza: kwiat przekwitnie, przebarwiony
   liść zostaje — a to zapis przeżytych dni. */
/* Barwa emocji WMIESZANA w zieleń listowia. Pełne nasycenie odklejało liście
   od korony — czytały się jak cukierki rzucone na drzewo, a nie jak listowie,
   które zmieniło kolor. 82% wystarcza, żeby jedenaście emocji nadal dało się
   od siebie odróżnić. */
.drzewo .barwny { fill: color-mix(in oklab, var(--barwa) 72%, var(--zielen-korony)); }

/* BARWNY LIŚĆ TEŻ POTRZEBUJE OBRYSU. Reguła obrysu celowała w `.listowie`,
   a liście emocji siedzą w `.liscie-emocji` — nie łapała ich w ogóle. Dwa
   sąsiednie liście tej samej emocji zlewały się więc bezszwowo w jedną łatę
   i przestawały być policzalne, a barwa czytała się jak plama farby, nie jak
   listowie. Obrys bierzemy z WŁASNEJ barwy liścia przyciemnionej, nie ze
   wspólnej zieleni — inaczej jedenaście emocji dostałoby jedną obwódkę.
   Kolejność malowania zostaje domyślna (wypełnienie, potem obrys): liście
   jednej emocji są scalone w jedną ścieżkę, więc `paint-order: stroke fill`
   zakryłby wypełnieniem właśnie te linie, które mają je rozdzielać. */
.drzewo .barwny {
  stroke: color-mix(in oklab, var(--barwa) 30%, #16280e);
  stroke-width: .75;
  stroke-linejoin: round;
}

/* Karta zadania: zadanie, które czeka na pogodę. Ton jest spokojny i bez
   wykrzykników — to nie jest błąd rodziny, tylko lipiec. */
.pogoda {
  margin: 10px 0 2px; padding: 10px 12px;
  background: color-mix(in oklab, var(--woda-jasna, #c2dcea) 42%, transparent);
  border-radius: 10px; font-size: 13px;
}
.pogoda p { margin: 0 0 4px; opacity: .85; }

.komunikat {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: color-mix(in oklab, var(--woda-jasna, #c2dcea) 50%, transparent);
}

/* --- ogród ----------------------------------------------------------------

   Ogród niesie klasę `drzewo`, bo rysuje te same drzewa i ma korzystać z tych
   samych reguł korony, liści i zalewki. Wszystko poniżej to tylko jego własna
   sceneria i przewijanie. */
.ogrod { display: block; height: 100%; width: auto; }
.ogrod .niebo-gora { stop-color: var(--niebo-gora); }
.ogrod .niebo-dol  { stop-color: var(--niebo-dol); }
.ogrod-wzgorze-dal    { fill: var(--wzgorze-dal); }
.ogrod-wzgorze-srodek { fill: var(--wzgorze-srodek); }
.ogrod-laka           { fill: var(--trawa-brzeg); }
.ogrod-drzewo         { cursor: pointer; }
.ogrod-drzewo:focus-visible { outline: 2px solid var(--akcent, #c9a14a); outline-offset: 4px; border-radius: 8px; }

/* Podpis pod drzewem to nie ozdoba, tylko WARUNEK dostępności: przy dziewiętnastu
   barwach nie da się zbudować palety czytelnej dla daltonisty, więc barwa nigdy
   nie może być jedyną informacją. Leży nad zalewką razem z liśćmi emocji, żeby
   po zmroku dalej dało się go przeczytać. */
.ogrod-podpis {
  fill: var(--atrament, #2b2217);
  font-size: 19px; font-weight: 600; letter-spacing: .01em;
  paint-order: stroke fill;
  stroke: var(--papier, #f7f1e4); stroke-width: 4; stroke-linejoin: round;
}

/* Ogród jest szerszy niż ekran — idzie się wzdłuż niego, tak jak wzdłuż rzeki. */
.ogrod-plotno {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  height: min(62vh, 460px);
  border-radius: 14px;
}

/* Lista pod ogrodem: to samo, co drzewa, ale czytelne dla kogoś, kto nie
   rozpozna sezonu po barwie ani nie przewinie kadru na bok. */
.ogrod-lista { display: grid; gap: 6px; margin: 18px 0 4px; }
.ogrod-wpis {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--linia);
  font-size: var(--t-meta);
}
.ogrod-wpis:last-child { border-bottom: none; }
.ogrod-wpis i {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  align-self: center;
}
.ogrod-wpis .kiedy { color: var(--tekst-3); }
.ogrod-wpis .ile { margin-left: auto; color: var(--tekst-4); white-space: nowrap; }
.ogrod-pusty { color: var(--tekst-3); font-size: var(--t-meta); line-height: 1.6; }

/* Kiedy korona przyjmuje barwę sezonu, liść NIE MOŻE już mieszać się z zielenią:
   na różowym Drzewie Miłości różowe liście znikały, bo mieszanka barwy z zielenią
   trafiała w ton samej korony. Zapis przeżytych dni musi być czytelny na każdym
   drzewie w ogrodzie, więc tutaj barwa idzie pełna, a obrys mocniejszy — drzewo
   niesie kolor sezonu, liście niosą dni. */
.drzewo .wybarwiona .barwny {
  fill: var(--barwa);
  stroke: color-mix(in oklab, var(--barwa) 28%, #17100a);
  stroke-width: 2;
}

/* Po zmroku to one są jedynym światłem w koronie — tyle punktów, ile dni.
   Ta sama zasada, co nad rzeką: świeci to, co zrobiliście. */
/* Poświata rośnie z KWADRATEM siły światła, nie liniowo. Przy zależności
   liniowej w dzień dawała 0,11 krycia i każdy barwny liść miał wokół siebie
   miękką akwarelową plamę — a poświata jest pomyślana na noc, kiedy to ona
   jest jedynym światłem w koronie. Teraz w dzień praktycznie znika (0,03),
   o zmierzchu jest wyraźna (0,14), w nocy mocna (0,32). */
.drzewo .poswiata {
  fill: var(--barwa);
  opacity: calc(.055 * var(--blask-sila) * var(--blask-sila));
}

/* --- oddech ------------------------------------------------------------ */

/* Bardzo wolno i bardzo mało — jak drzewo w bezwietrzny dzień. Ruch ma być
   czuty, nie oglądany. Korona i liście emocji dostają identyczne parametry,
   żeby nie rozjechały się względem siebie. */
@media (prefers-reduced-motion: no-preference) {
  .drzewo .korona,
  .drzewo .liscie-emocji {
    animation: oddech 13s cubic-bezier(.45, 0, .55, 1) infinite;
    transform-origin: 360px 556px;
  }
}
@keyframes oddech {
  0%, 100% { transform: rotate(-.32deg); }
  50%      { transform: rotate(.32deg); }
}

.statystyki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 18px; }
.statystyki div {
  background: var(--tlo-cichy); border-radius: var(--r-wewn);
  padding: 14px 8px; text-align: center;
}
.statystyki span {
  display: block; font-size: var(--t-lead); font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.statystyki small { color: var(--tekst-3); font-size: var(--t-meta); }

.emocje-pasek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.emocje-pasek .plamka {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-meta); color: var(--tekst-2);
  padding: 5px 11px; border-radius: var(--r-pigulka); border: 1px solid var(--linia);
  font-variant-numeric: tabular-nums;
}
.emocje-pasek i { width: 11px; height: 11px; border-radius: 50%; }

/* ------------------------------------------------- ustawienia */

.przelacznik {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 18px 0 12px;
  background: var(--tlo-karta); border: 1px solid var(--linia);
  border-radius: var(--r-wewn); cursor: pointer;
}
.przelacznik:hover { border-color: var(--linia-mocna); }
.przelacznik input { width: 20px; height: 20px; accent-color: var(--zar); }

.godziny { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.godziny input[type="time"] {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 1px solid var(--linia-mocna); border-radius: var(--r-wewn);
  background: var(--tlo-karta); color: var(--tekst);
  font-variant-numeric: tabular-nums;
}

.wtorny.szeroki { display: block; width: 100%; margin-top: 10px; }
.wtorny.niebezpieczny { color: #a8391a; border-color: color-mix(in srgb, #a8391a 32%, transparent); }
.wtorny.niebezpieczny:hover { background: color-mix(in srgb, #a8391a 8%, transparent); }

.potwierdz {
  margin-top: 12px; padding: 16px;
  border: 1px solid color-mix(in srgb, #a8391a 32%, transparent);
  border-radius: var(--r-wewn);
  background: color-mix(in srgb, #a8391a 6%, transparent);
}
.potwierdz p { margin: 0 0 12px; font-size: var(--t-meta); color: var(--tekst-2); }
.potwierdz-akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.potwierdz-akcje button { width: 100%; }

/* ------------------------------------------------- nawigacja */

#nawigacja {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--tlo) 90%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linia);
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  z-index: 20;
}
#nawigacja button {
  background: none; border: none; padding: 12px; min-height: 48px;
  color: var(--tekst-3); font-size: var(--t-meta); border-radius: var(--r-wewn);
}
#nawigacja button:hover { color: var(--tekst); }
#nawigacja button.aktywny { color: var(--zar); font-weight: 600; }
#nawigacja[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════ ŚWIAT — drugie piętro koloru ═══

   Pierwsze piętro (papier) jest wyżej w tym pliku i się nie zmienia.
   Trzecie (żar — 11 barw emocji) wchodzi wyłącznie na zapalone ogniska.

   To piętro istnieje, bo brązy robiły dotąd robotę, którą powinien robić
   kolor. Dopiero gdy dookoła ognisk pojawi się zieleń świerku i siny
   wapień, barwy emocji stają się klejnotami, a nie kropkami na papierze.

   GŁĘBIA: jedna strategia — WARSTWY CIĘTEGO PAPIERU. Zero cieni na terenie,
   zero obrysów, zero gradientów na kształtach. Głębia bierze się wyłącznie
   z kolejności warstw i z tego, że dalsze są jaśniejsze i bardziej zamglone.

   Wartości poniżej to tylko punkt wyjścia — swiat.js nadpisuje je co
   otwarcie, według prawdziwej godziny. */

:root {
  --zalewka:        #ffffff;
  --zalewka-sila:   .10;
  --niebo-gora:     #b7d1e3;
  --niebo-dol:      #e9e3d5;
  --mgla-sila:      .10;
  --blask-sila:     .7;
  --sylwetka:       #3a2a1e;

  /* Ognisko, które czeka, świeci na biało ZAWSZE — także gdy system stoi
     w trybie ciemnym. To jest znaczenie, nie kolor powierzchni: biel mówi
     „jeszcze nas nie zapaliliście". Dlatego te dwie wartości nie należą do
     piętra papieru i nigdy nie przewracają się razem z nim. */
  --plomien-czeka:  #fffdfa;
  --plomien-obrys:  #8a7157;

  --sciezka-ziemia: #cbb69c;
  --sciezka-slad:   #e3d6c1;

  /* Woda należy do piętra ŚWIATA, więc idzie za porą dnia razem z terenem. */
  --woda:           #7fa8bd;
  --woda-jasna:     #c2dcea;
  --plycizna:       #d8ccb0;
  --deski:          #b0905f;
  --deski-rysa:     #8e7048;
  --deski-obrys:    #6f5836;
  --kladka-cien:    rgba(22, 34, 44, .30);
  --korona-ujscie:  #6f8f4e;
  --wzgorze-dal:    #b3bfae;
  --wzgorze-srodek: #98a984;
  --cien-ziemi:     #b9a68c;
  --trawa-brzeg:    #7d8f57;
  --zielen-korony:  #4f7a2e;
  --obrys-liscia:   rgba(22, 40, 14, .55);
  --zylka-liscia:   #26400f;
  --zylka-barwna:   rgba(38, 30, 12, .8);
  --trzcina:        #8a9463;
  --kora-ciemna:    #4a3524;
  --sloj-kory:      #33241a;
  --kora-srednia:   #6b4b33;
  --kora-jasna:     #8a6647;
  --nazwa-krainy:   rgba(255, 252, 246, .58);
}

/* Na ekranie drogi o jasności interfejsu decyduje pora dnia, nie ustawienie
   systemu. Ciemny nagłówek nad rozświetlonym południowym szlakiem byłby
   sprzecznością — tu dzień i noc mają jedno źródło: zegar. */
:root[data-pora="swit"],
:root[data-pora="dzien"],
:root[data-pora="zmierzch"] {
  --chrome-tlo:     #fdf8f2;
  --chrome-karta:   #fffdfa;
  --chrome-cichy:   #f7f0e7;
  --chrome-tekst:   #2b1f16;
  --chrome-tekst-2: #5b4839;
  --chrome-tekst-3: #7c6957;
  --chrome-tekst-4: #ab9a86;
  --chrome-linia:   #ece0d2;
  --chrome-linia-m: #ddcdb9;
  --chrome-cien:    0 1px 2px rgba(80, 50, 25, .06), 0 12px 28px rgba(80, 50, 25, .08);
}
:root[data-pora="noc"] {
  --chrome-tlo:     #14121c;
  --chrome-karta:   #1d1a28;
  --chrome-cichy:   #191621;
  --chrome-tekst:   #f0ece6;
  --chrome-tekst-2: #c6bfcc;
  --chrome-tekst-3: #9a9099;
  --chrome-tekst-4: #78717f;
  --chrome-linia:   #2b2636;
  --chrome-linia-m: #3f3850;
  --chrome-cien:    0 1px 2px rgba(0, 0, 0, .5), 0 12px 28px rgba(0, 0, 0, .45);
}

/* Niebo stoi, teren idzie — i to jest cała paralaksa. Zero JS na klatkę,
   jedno przemalowanie przy zmianie pory dnia. */
.niebo {
  position: fixed; inset: 0; z-index: 0; display: none;
  background: linear-gradient(to bottom, var(--niebo-gora), var(--niebo-dol));
}

/* Ziarno papieru. Jedna kafelkowana tekstura na całą aplikację — to ona
   sprawia, że przestaje wyglądać jak wykres, a zaczyna jak wycinanka. */
.ziarno {
  position: fixed; inset: 0; z-index: 3; display: none;
  pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)'/%3E%3C/svg%3E");
}

body[data-ekran="ekran-droga"],
body[data-ekran="ekran-drzewo"],
body[data-ekran="ekran-dzien"],
body[data-ekran="ekran-tryb"],
body[data-ekran="ekran-emocja"],
body[data-ekran="ekran-ustawienia"] { background: transparent; }

/* Ogród, finał i wybór sezonu ZOSTAJĄ na papierze. Niebo w tle jest dla
   ekranów, które są obrazem; te trzy są tekstem z obrazem w środku, a nocne
   niebo pod nagłówkiem robi z nich ciemny napis na ciemnym tle. Świat niosą
   tu własne kadry SVG — i to wystarczy. */
body[data-ekran="ekran-droga"] .niebo,
body[data-ekran="ekran-droga"] .ziarno,
body[data-ekran="ekran-drzewo"] .niebo,
body[data-ekran="ekran-drzewo"] .ziarno,
body[data-ekran="ekran-dzien"] .niebo,
body[data-ekran="ekran-dzien"] .ziarno,
body[data-ekran="ekran-ustawienia"] .niebo,
body[data-ekran="ekran-ustawienia"] .ziarno,
body[data-ekran="ekran-tryb"] .niebo,
body[data-ekran="ekran-tryb"] .ziarno,
body[data-ekran="ekran-emocja"] .niebo,
body[data-ekran="ekran-emocja"] .ziarno { display: block; }

/* ══════════════ EKRAN DNIA I RYTUAŁY — ten sam świat, bez terenu ═══════

   Te dwa ekrany służą do CZYTANIA, więc dostają samo niebo i ziarno —
   krajobraz pod tekstem byłby ozdobą kosztem czytelności. Treść leży na
   półprzezroczystym arkuszu, a niebo widać dookoła: papier na krajobrazie,
   dokładnie ten sam idiom, co wycinanka nad rzeką.

   Cała rampa koloru przełącza się tu na chrome, czyli idzie za PORĄ DNIA,
   a nie za trybem ciemnym systemu. Wieczorem ekran dnia ciemnieje razem
   z rzeką i drzewem — trzy ekrany, jedno światło. */

body[data-ekran="ekran-dzien"],
body[data-ekran="ekran-tryb"],
body[data-ekran="ekran-emocja"],
body[data-ekran="ekran-ustawienia"] {
  --tlo-karta:   var(--chrome-karta);
  --tlo-cichy:   var(--chrome-cichy);
  --tekst:       var(--chrome-tekst);
  --tekst-2:     var(--chrome-tekst-2);
  --tekst-3:     var(--chrome-tekst-3);
  --tekst-4:     var(--chrome-tekst-4);
  --linia:       var(--chrome-linia);
  --linia-mocna: var(--chrome-linia-m);
  --cien-hero:   var(--chrome-cien);
}

body[data-ekran="ekran-dzien"] .tresc,
body[data-ekran="ekran-tryb"] .tresc,
body[data-ekran="ekran-emocja"] .tresc,
body[data-ekran="ekran-ustawienia"] .tresc {
  background: color-mix(in oklab, var(--chrome-tlo) 84%, transparent);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  border: 1px solid color-mix(in oklab, var(--chrome-linia) 70%, transparent);
  border-radius: var(--r-zewn);
  /* Margines boczny jest tu istotny, nie kosmetyczny: bez niego arkusz
     wypełnia całą szerokość telefonu i nieba dookoła w ogóle nie widać —
     a to ono robi z tego papier położony na krajobrazie. */
  width: calc(100% - 24px);
  margin: 14px auto 28px;
  padding: 22px 18px 32px;
}

.ekran, #nawigacja { position: relative; z-index: 1; }
#nawigacja { z-index: 4; }

/* --------------------------------------------------- droga ognisk */

.droga-ekran { padding: 0; }

/* Nagłówek pływa nad krajobrazem, zamiast go przecinać paskiem tła. */
.droga-naglowek {
  position: sticky; top: 0; z-index: 2;
  padding: 14px 20px 12px;
  background: color-mix(in oklab, var(--chrome-tlo, var(--tlo)) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid color-mix(in oklab, var(--chrome-linia, var(--linia)) 60%, transparent);
}
.droga-naglowek p { margin: 0; }
.droga-tytul {
  font-size: var(--t-lead); font-weight: 600;
  color: var(--chrome-tekst, var(--tekst));
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.droga-podtytul {
  color: var(--chrome-tekst-2, var(--tekst-3)); font-size: var(--t-meta);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
}

.droga-plotno { max-width: 460px; margin: 0 auto; padding: 0 8px 40px; }
.droga { width: 100%; height: auto; display: block; }

/* --- trzy plany ciętego papieru ----------------------------------- */

.droga .plan-dal    .teren { fill: url(#teren-dal); }
.droga .plan-srodek .teren { fill: url(#teren-srodek); }
.droga .plan-blisko .teren { fill: url(#teren-blisko); }

.droga .teren-kreska { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.droga .plan-dal    .teren-kreska { stroke: url(#teren-dal); }
.droga .plan-srodek .teren-kreska { stroke: url(#teren-srodek); }
.droga .plan-blisko .teren-kreska { stroke: url(#teren-blisko); }

/* Dal ginie we mgle, bliski plan stoi pełną barwą. Nic poza tym — żadnego
   rozmycia, żadnego cienia. Papier po prostu leży dalej. */
.droga .plan-dal    { opacity: calc(.66 - var(--mgla-sila)); }
.droga .plan-srodek { opacity: .84; }
.droga .plan-blisko { opacity: 1; }

/* Światło pory dnia: jedna zalewka na terenie i szlaku, PRZED ogniskami. */
/* Zalewka należy do ŚWIATA, nie do jednego ekranu. Przypięta do .droga
   zamieniała drzewo w czarny prostokąt: rect bez reguły dostaje domyślne
   SVG, czyli czerń i krycie 1. Nigdy nie wiążemy jej z pojedynczą sceną. */
.zalewka { fill: var(--zalewka); opacity: var(--zalewka-sila); }

/* --- rzeka ---------------------------------------------------------- */

/* Woda jest WYPEŁNIENIEM między brzegami, nie kreską — tylko tak szerokość
   nurtu może rosnąć razem z sezonem. Płycizna to ten sam kształt pod spodem,
   rozlany obrysem: piasek i żwir, które rzeka usypuje przy brzegu. */
.droga .brzeg-plycizna {
  fill: var(--plycizna);
  stroke: var(--plycizna); stroke-width: 11; stroke-linejoin: round;
}
.droga .nurt   { fill: var(--woda); }
/* Główna struga — jaśniejsza nitka na osi, żeby woda miała kierunek. */
.droga .struga {
  fill: none; stroke: var(--woda-jasna); stroke-width: 1.6;
  stroke-linecap: round; opacity: .5;
}

/* KŁADKA — jedna forma przeprawy na całej rzece, od źródła po ujście.
   Kamienie były półśrodkiem: przy czterdziestu jednostkach wody u ujścia
   czytały się jako za małe na tę rzekę. */
.droga .kladka-cien   { fill: var(--kladka-cien); }
.droga .kladka-poklad { fill: var(--deski); }
.droga .kladka-deski  {
  fill: none; stroke: var(--deski-rysa); stroke-width: .9; stroke-linecap: round;
}
.droga .kladka-porecz {
  fill: none; stroke: var(--deski-obrys); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.droga .kladka-slupek { fill: var(--deski-obrys); }

/* Drzewo u ujścia: to do niego płynie wszystko, co nazwaliście. */
.droga .drzewo-ujscie .pien   { fill: var(--kora-srednia); }
.droga .drzewo-ujscie .korona { fill: var(--korona-ujscie); }

/* --- nazwy krain: cicha nawigacja ---------------------------------- */

.droga .nazwa-krainy {
  font-size: 12px; font-weight: 600; text-anchor: middle;
  letter-spacing: .22em; text-transform: uppercase;
  fill: var(--nazwa-krainy);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* --- ogniska -------------------------------------------------------- */

.droga .polana { stroke: var(--sciezka-ziemia); stroke-width: 2.2; stroke-linecap: round; fill: none; }

/* Ognisko niezapalone świeci na biało — czeka, aż rodzina je zapali. */
.droga .plomien {
  fill: var(--plomien-czeka);
  stroke: var(--plomien-obrys);
  stroke-width: 1.2;
  transition: transform .18s cubic-bezier(.23, 1, .32, 1);
}
.droga .minione .plomien { opacity: .45; }

/* Zapalone przyjmuje barwę emocji tamtego dnia — --barwa ustawia sciezka.js. */
.droga .zapalone .plomien { fill: var(--barwa, var(--zar)); stroke: none; }

/* SYGNATURA: poświata jest światłem tego świata, nie ozdobą ogniska.
   Po zmroku --blask-sila rośnie do 2,4 i zapalone ognie realnie rozjaśniają
   szlak. Pięć ogni to ciemna droga, sześćdziesiąt — rozświetlona. Świat
   jaśnieje nie od punktów, tylko od tego, że się żyło. */
.droga .blask {
  fill: var(--barwa, var(--zar));
  opacity: calc(.13 * var(--blask-sila));
}
.droga .zapalone .blask {
  transform: scale(calc(.75 + var(--blask-sila) * .55));
  transform-box: fill-box; transform-origin: center;
}

/* Dziś — ogień gotowy do zapalenia. Poświatę skalujemy również statycznie,
   żeby przy wyłączonym ruchu w systemie dzisiejsze ognisko nie zgubiło
   swojej wielkości razem z animacją. */
.droga .dzisiaj .plomien { stroke: var(--zar); stroke-width: 2; }
.droga .dzisiaj .blask {
  transform: scale(calc(.78 + var(--blask-sila) * .5));
  transform-box: fill-box; transform-origin: center;
}

.droga .numer {
  font-size: 11px; font-weight: 600; text-anchor: middle;
  fill: var(--nazwa-krainy); font-variant-numeric: tabular-nums;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.droga .dzisiaj .numer,
.droga .final   .numer { fill: var(--plomien-czeka); }
.droga .final   .numer { font-size: 13px; }

.droga .ognisko { cursor: pointer; }
.droga .ognisko:hover .plomien { transform: scale(1.22); }
.droga .ognisko:focus-visible { outline: none; }
.droga .ognisko:focus-visible .plomien { stroke: var(--zar); stroke-width: 2.5; }

/* --- rodzina -------------------------------------------------------- */

/* Sylwetki bez twarzy. Nie maskotki — im mniej dosłowna figurka, tym
   łatwiej dziecko widzi w niej siebie. Maskotka z miną przejęłaby uwagę,
   którą ta aplikacja ma oddawać prawdziwej rodzinie. */
.droga .sylwetka { fill: var(--sylwetka); }
.droga .osoba    { opacity: var(--gleb, .9); }

/* WĘDRÓWKA — jedyna animacja w tej aplikacji, która coś świętuje.
   Odpala się RAZ, po zamknięciu dnia, i nie da się jej powtórzyć: to nagroda
   za przeżyty dzień, nie pętla do oglądania. Warstwa zewnętrzna trzyma
   pozycję w atrybucie, ta animuje sam krok — inaczej CSS nadpisałby atrybut
   i rodzina skoczyłaby do zera płótna. */
.droga .rodzina-krok.wedruje {
  animation: wedrowka 1.7s cubic-bezier(.42, 0, .3, 1) both;
}
@keyframes wedrowka {
  from { transform: translate(var(--krok-x, 0), var(--krok-y, 0)); }
  to   { transform: translate(0, 0); }
}

/* Gdy po drodze zmienia się brzeg, wędrówka prowadzi przez PRZEPRAWĘ.
   Prosta linia z brzegu na brzeg przeprowadzałaby rodzinę przez nurt. */
.droga .rodzina-krok.przez-most {
  animation-name: wedrowka-przez-most;
  animation-duration: 2.2s;
}
@keyframes wedrowka-przez-most {
  0%   { transform: translate(var(--krok-x, 0), var(--krok-y, 0)); }
  52%  { transform: translate(var(--most-x, 0), var(--most-y, 0)); }
  100% { transform: translate(0, 0); }
}

/* Drobne podskoki, żeby to było chodzenie, a nie przesuwanie obrazka.
   Każda sylwetka rusza o ułamek sekundy później — rodzina idzie razem,
   ale nie w nogę. */
@media (prefers-reduced-motion: no-preference) {
  .droga .wedruje .osoba {
    animation: krok .42s ease-in-out 5;
    transform-box: fill-box;
    transform-origin: bottom center;
  }
}
@keyframes krok {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-1.6px) scaleY(1.03); }
}

/* --- ruch ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .droga .dzisiaj .blask {
    animation: tetno 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
    transform-box: fill-box; transform-origin: center;
  }
}
@keyframes tetno {
  0%, 100% { opacity: calc(.13 * var(--blask-sila)); transform: scale(calc(.78 + var(--blask-sila) * .5)); }
  50%      { opacity: calc(.28 * var(--blask-sila)); transform: scale(calc(.94 + var(--blask-sila) * .58)); }
}

/* --- legenda -------------------------------------------------------- */

.droga-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
  font-size: var(--t-meta); color: var(--tekst-3);
}
.droga-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.droga-legenda i { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.droga-legenda i.pusty { background: var(--plomien-czeka); border: 2px solid var(--linia-mocna); }
.droga-legenda i.pelny { background: var(--zar); }
.droga-legenda i.teraz { background: var(--plomien-czeka); border: 2px solid var(--zar); }

/* ══════════════════════════ TRZY METAFORY — do porównania ═══════════════
   Tymczasowe. Zostaje ten wariant, który Michał wybierze; reszta znika.
   Znacznik dnia trzyma tę samą logikę stanów co ognisko: niezapalony jest
   biały i czeka, zapalony bierze barwę emocji. Zmienia się tylko to, czy
   po zmroku cokolwiek świeci.                                            */

/* --- lampion: światło w naczyniu, nic nie pali ----------------------- */
.droga .szklo {
  fill: var(--plomien-czeka);
  stroke: var(--plomien-obrys); stroke-width: 1;
  transition: transform .18s cubic-bezier(.23, 1, .32, 1);
}
.droga .zapalone .szklo { fill: var(--barwa, var(--zar)); stroke: none; }
.droga .dzisiaj  .szklo { stroke: var(--zar); stroke-width: 1.8; }
.droga .okucie   { fill: var(--okucie); }
.droga .minione .szklo,
.droga .minione .okucie { opacity: .45; }

/* --- naczynie: wlewamy uczucia. NIE ŚWIECI — i o to w tym teście chodzi */
.droga .plyn    { fill: var(--barwa, transparent); }
.droga .ognisko:not(.zapalone) .plyn { fill: none; }
.droga .scianka {
  fill: none; stroke: var(--plomien-obrys); stroke-width: 1.4;
  stroke-linejoin: round;
}
.droga .krawedz { fill: var(--okucie); }
.droga .dzisiaj .scianka { stroke: var(--zar); stroke-width: 2; }
.droga .minione .scianka,
.droga .minione .krawedz { opacity: .45; }

/* Okucia i krawędzie idą za porą dnia — o zmierzchu metal jest ciemniejszy. */
:root { --okucie: #6b5644; }
:root[data-pora="zmierzch"] { --okucie: #4a3140; }
:root[data-pora="noc"]      { --okucie: #2b2f4a; }