/*!
 * SPDX-FileCopyrightText: © 2026 Amitiel Angelisme <armitiel@gmail.com>
 * SPDX-License-Identifier: LicenseRef-EwolucJA-Proprietary
 *
 * EwolucJA — gra edukacyjna dla dzieci.
 * Produkt powstał w ramach projektu Stowarzyszenia na Rzecz Edukacji „Pomost”;
 * autorskie prawa majątkowe pozostają przy autorze. Licencja: LICENSE.
 */
/* ═══════════════════════════════════════════════════════════════════════
   TOKENY — jedyne miejsce, w ktorym ustala sie wyglad EwolucJA.

   Zasady sa w docs/SYSTEM_STYLOW.md. W skrocie:
   - nowy kolor, promien, cien czy rozmiar wchodzi TU, nie do reguly komponentu,
   - komponent czyta `var(--token)`, nie wpisuje `#hex`,
   - wyjatek per ekran robi sie przez NADPISANIE ZMIENNEJ w kontenerze
     (tak jak dzis `--cta-*` w `.popup-postaci`), nie przez nowa wartosc w elemencie.

   DLACZEGO W public/, A NIE W src/:
   `hud.css` sceny 3D laduje sie z index.html PRZED bundlem Reacta (musi byc
   w dokumencie przed pierwszym malowaniem — patrz komentarz w index.html).
   Gdyby tokeny siedzialy w bundlu, HUD narysowalby pierwsza klatke bez nich.
   Ten plik jest wiec linkowany w index.html PRZED hud.css i obowiazuje wszedzie:
   w hubie, w Przygodzie, w minigrach, w HUD-zie i na samodzielnej stronie
   /scena-3d/.

   WERSJA: plik w public/ nie ma hasha w nazwie, wiec po KAZDEJ zmianie podbij
   `?v=N` przy obu linkach (index.html oraz scena-3d/index.html) — dokladnie
   ta sama zasada, co dla hud.css i WERSJA_SCENY. Bez tego przegladarka poda
   stare tokeny z cache.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. RAMPY BARW — kazdy odcien ma nazwe i miejsce na skali ──────────
   Numer = ciemnosc: 50 najjasniejszy, 950 najciemniejszy (jak w Tailwind).
   Sasiednie stopnie roznia sie o deltaE >= 4, czyli sa ROZROZNIALNE golym
   okiem — blizniaki zostaly scalone 9.09.2026 (scripts/ujednolic-barwy.mjs).

   Wartosci NIE sa wymyslone: to dokladnie te hexy, ktore juz siedzialy
   w arkuszach (krok 3 planu, 9.09.2026). Nadanie nazwy niczego nie
   przemalowalo — zmienilo tylko to, ze odcien uzywany 25 razy w 5 plikach
   ma teraz JEDNA definicje. Stopnie o zerowym uzyciu celowo nie istnieja;
   luki w numeracji (np. zloto 700) sa miejscem na przyszle odcienie.

   Rampy z alfa: NIE dokladaj wariantu „--braz-800-50”. Piszesz
   `color-mix(in srgb, var(--braz-800) 50%, transparent)` — to samo, co
   rgba(79,43,12,.5), a zmiana odcienia w rampie przechodzi tez na cienie.

   ZLOTO: przed 9.09.2026 istnialo w czterech wersjach, kazda w innym pliku
   (#F4C95D bursztyn UI, #EFB937 HUD, #F5C45E Przygoda, #FFD24A mapa). Teraz
   to JEDNA rampa, a stare nazwy (--p-amber, --hud-gold, --adv-gold) sa jej
   aliasami. Przygoda zeszla z #F5C45E na #F4C95D (deltaE 3.7). Mapa zostaje
   poza CSS-em: jej kolory siedza w mapa.json. */
:root{
  /* zloto — nagrody, lamowki, gwiazdki */
  --zloto-100:#FFF19A;   /* gorna lamowka, rozblysk gwiazdki */
  --zloto-150:#FFE08C;   /* jasny blask, poswiata */
  --zloto-200:#FFDF82;
  --zloto-250:#FFD66D;   /* poswiata dokow, tla chipow z alfa */
  --zloto-300:#F4C95D;   /* bursztyn UI: nagrody, gwiazdki, chipy */
  --zloto-350:#F6CD54;
  --zloto-400:#EFB937;   /* zloto wlasciwe HUD-u — srodek lamowki */
  --zloto-450:#E6A832;   /* obrys monety, cieplejsze zloto tekstu */
  --zloto-500:#D59A31;
  --zloto-600:#B86A1C;   /* dolna lamowka */
  --zloto-800:#8D4818;   /* twardy cien 3 px pod zlotym kaflem */
  --zloto-matowe:#E1B66A; /* przygaszone zloto — podpisy, nieaktywne */

  /* krem — jasne tla kart, pergamin, tekst na ciemnym */
  --biel-ciepla:#FFFDF4; /* cieply bialy — gora gradientu okna; wchlonal #FFFAF0 (deltaE 1.5) */
  --krem-50:#FFFBE0;     /* najjasniejszy krem; wchlonal #FFF9E5 i #fff9d9 (deltaE < 4) */
  --krem-100:#FFF4C9;    /* tlo kart HUD-u */
  --krem-200:#FFF3BD;
  --krem-300:#FFF3A8;    /* cieplejszy, bardziej zolty */
  --krem-400:#FFE6A8;
  --krem-500:#FFE29A;    /* dol gradientu kremu, tekst na brazie */
  --piasek:#F4E1AC;      /* matowy pergamin (mniej nasycony niz krem) */
  /* Dwa przyciemnienia kremu — NIE kolejne stopnie rampy, tylko CIEN na kremie.
     Maja te sama jasnosc co krem, mniej nasycenia: to nimi robi sie „glina"
     (miekkie zejscie przy dolnej krawedzi chmurki), nie osobnym box-shadow. */
  --krem-cien-1:#F0E2BD; /* poczatek zejscia */
  --krem-cien-2:#D5C7A4; /* dolna krawedz — najciemniej */

  /* ochra — zoltawe brazy: deski, ramy, listwy */
  --ochra-300:#C4922C;   /* jasna ochra — obrysy z alfa */
  --ochra-400:#96691E;
  --ochra-450:#765A30;   /* przygaszona, szarawa */
  --ochra-500:#8A5A18;
  --ochra-550:#785A1E;
  --ochra-600:#7A4D10;
  --ochra-700:#48351A;
  --ochra-750:#4A3410;   /* ciemna rama, tekst na kremie */
  --ochra-800:#50320A;
  --ochra-900:#281905;   /* najciemniejsza ochra — cien pod deska */

  /* braz — czerwonawe brazy: kontury, cienie CTA, tekst na zlocie */
  --braz-300:#B47322;    /* cien pod pomaranczowym CTA (--akcent-drugi-cien), obrysy z alfa */
  --braz-400:#A2621C;    /* najczesciej uzywany braz UI (25x) */
  --braz-500:#8F5017;
  --braz-550:#86511B;
  --braz-600:#7F4517;
  --braz-700:#5A3311;
  --braz-800:#4F2B0C;    /* kontur i cien glowny (21x) */
  --braz-900:#3E2610;
  --braz-950:#1A1008;    /* niemal czern, cieple */

  /* szarosc — JEDYNA neutralna rodzina w tej palecie. Reszta tokenow jest
     ciepla (zloto, krem, braz, ochra), wiec szarosci nie da sie z nich zmieszac
     bez zolciutkiego nalotu. Uzywana tam, gdzie element jest OBUDOWA, a nie
     czescia swiata gry — dzis: rant ramki ekranu wewnetrznego na desktopie. */
  --szarosc-200:#CBCBCB;  /* jasny rant — pierwszy pierscien */
  --szarosc-400:#9B9B9B;  /* ciemniejszy rant — drugi pierscien, cien rantu */
  --szarosc-900:#14161A;  /* neutralna ciemnosc pod cien rzucany */

  /* noc — ciemne tla okien, overlay, Przygoda */
  --noc-700:#251D4A;     /* fioletowa noc, jasniejsza — tla nagrod, tutorial */
  --noc-800:#241D3C;     /* fioletowa noc — tla okien w hubie */
  --noc-850:#1B1338;     /* glebszy fiolet nocy — overlay hubu */
  --noc-900:#0E162A;     /* granat — panel Przygody (bez alfa) */
  --noc-950:#060A18;     /* najglebsza noc — overlay Przygody */

  /* fiolet — magia (uzupelnia --p-magic / --p-magic-dk) */
  --fiolet-200:#C8A0F0;  /* jasna poswiata magii */
  --fiolet-500:#6B3C97;  /* lamowka chmurek Medrca — jedno zrodlo dla wszystkich */
  --fiolet-600:#5F438A;
  --fiolet-800:#4A2D80;  /* gleboki fiolet — tla nagrod */

  /* pomarancz — lisek: lamowka jego chmurki i przycisku zamykania */
  --pomarancz-500:#FB8F18;

  /* czerwien — zycia, blad, uwaga */
  --czerwien-500:#E94560; /* serce, animacje */
  --czerwien-700:#8D2A27; /* tekst ostrzezenia, X zamykania */
  --czerwien-900:#4D2316; /* cien pod czerwienia */

  /* blekit — jasne niebo */
  --blekit-100:#C9E9FF;

  /* turkus — kredka na tablecie Pudelka z nieba */
  --turkus-400:#64CDBD;
  --turkus-700:#28515B;
}

/* ── 1. FUNDAMENT — paleta, kroje, promienie, cienie, skala CTA ─────────
   Przeniesione 1:1 z src/styles/ewolucja.css (wrzesien 2026).
   --p-amber od 9.09 wskazuje na rampe zlota (ta sama wartosc). */
:root{
  --p-sky-1:#B7E3FF; --p-sky-2:#FFE0B5; --p-leaf:#5FA76F; --p-leaf-dk:#2F5841;
  --p-dusk:#E89A3D; --p-amber:var(--zloto-300); --p-magic:#B886E8; --p-magic-dk:#7A4DC2;
  --p-paper:#FBF1D6; --p-paper-2:#F4E3B8; --p-ink:#4e4d76; --p-ink-soft:#5A4F77;
  --p-rose:#F08C8C; --p-shadow: rgba(78,77,118,.18);

  /* Typografia: Display = Baloo 2 (kid-friendly + pelne PL znaki), Body = Nunito */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  --r-card:22px; --r-pill:999px;

  /* ─── SKALA CTA (jedno zrodlo prawdy dla WSZYSTKICH przyciskow akcji) ───
     Wzorcem jest zielony przycisk ze zwoju zadania ("OTWORZ"): 56 px wysokosci,
     21 px liter, na cala szerokosc karty. Kazdy glowny przycisk w grze ma
     wygladac DOKLADNIE tak samo - dziecko uczy sie jednego ksztaltu "tu sie
     klika", zamiast zgadywac przy kazdym ekranie.
     Wczesniej kazdy ekran ustawial sobie wlasna wysokosc (47 / 50 / 52 / 54 /
     56 / 62 px) i CTA w zakladce zadania bylo zauwazalnie mniejsze od tego na
     zwoju. Teraz kazdy ekran siega po te zmienne; jesli gdzies trzeba inaczej,
     nadpisuje sie ZMIENNA w kontenerze, a nie wysokosc pojedynczego guzika.

     --cta-*      = przycisk glowny (zielony, „zrob to")
     --cta-sec-*  = przycisk drugorzedny / odmowa („nie teraz", „wroc") */
  --cta-h:58px; --cta-fs:21px; --cta-pad:12px 20px; --cta-r:26px;
  --cta-sec-h:48px; --cta-sec-fs:16px; --cta-sec-r:18px; --cta-sec-obrys:3px;

  /* WYGLAD CTA — zmierzony z Figmy (EwolucJA UI Kit, wezel 19:24 „BTN",
     15.09.2026). Poprzednia makieta (BTN.pdf, 9.09) miala obrys 3 px, promien
     18 i rant 8; nowa jest wyrazniej cukierkowa: grubszy jasny obrys, mocniej
     zaokraglone rogi i lico, ktore z zoltawej zieleni schodzi w ciemna juz
     w polowie wysokosci.

     Wszystkie wartosci siedza TUTAJ, a reguly (`.hub-btn-primary`,
     `.puzzle-cta`) tylko je skladaja — wariant w innej barwie to podmiana
     zmiennych w kontenerze ekranu, a nie nowy gradient w regule. */
  --cta-obrys:5px;
  /* Punkty procentowe sa z Figmy 1:1 (8,62 / 53,12 / 85,35), zaokraglone do
     jednego miejsca — roznica wypada ponizej piksela przy 58 px wysokosci. */
  --cta-lico:linear-gradient(180deg,#8EE13D 8.6%,#41AB0A 53.1%,#248F05 85.3%);
  /* Obrys jest JEDNOLITY (#A9E53F), ale zapisany jako gradient: reguly kladą
     go w `border-box` obok lica w `padding-box`, wiec obie warstwy musza byc
     obrazem, nie barwa. */
  --cta-obrys-barwa:linear-gradient(180deg,#A9E53F,#A9E53F);
  --cta-rant:7px;               /* twardy dolny rant, bez rozmycia */
  --cta-rant-barwa:#3C761F;
  /* Napis ma w makiecie PIONOWY gradient: chlodna biel u gory, cieple zloto
     u dolu. Reguly wycinaja go przez `background-clip:text`, a `--cta-tekst`
     zostaje barwa zapasowa tam, gdzie tej wlasciwosci nie ma. */
  --cta-tekst:#F3EFC3;
  --cta-tekst-lico:linear-gradient(180deg,#E6F6F5 23%,#F9E37C 67%);
  /* Cien napisu dziala TYLKO w wersji zapasowej. Nad napisem wycietym
     z gradientu klad(zie) sie NA literach i zamula je — sprawdzone w Chromium,
     bo cien rysuje sie wyzej niz warstwa tla przycieta do liter. */
  --cta-tekst-cien:0 2px 1.4px rgba(0,0,0,.25);
  /* Swiatlo na gornej krawedzi — w Figmie osobny prostokat 379x22 wewnatrz
     lica. Tu jest ulamkiem WYSOKOSCI, zeby dzialalo przy kazdej szerokosci
     przycisku, a nie tylko przy 396 px z makiety. */
  --cta-polysk:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 60%,rgba(255,255,255,0) 100%);
  --cta-polysk-h:34%;
  --cta-tracking:-.04em;        /* Figma: -1.44 px przy 36 px = -4% */

  --shadow-sm: 0 2px 0 rgba(78,77,118,.08), 0 4px 14px rgba(78,77,118,.10);
  --shadow-md: 0 3px 0 rgba(78,77,118,.10), 0 10px 24px rgba(78,77,118,.14);
  --shadow-lg: 0 6px 0 rgba(78,77,118,.10), 0 20px 40px rgba(78,77,118,.20);
}

/* Niski ekran (telefon w poziomie, male okno) i bardzo waski telefon: cala
   skala CTA schodzi RAZEM, w jednym miejscu. Wczesniej kazdy ekran mial wlasny
   media query z wlasnymi liczbami i po zmniejszeniu okna przyciski przestawaly
   byc rowne. Stoi PO bazowym :root w tym samym pliku, wiec przy dopasowaniu
   media wygrywa — ta sama specyficznosc, pozniej w kaskadzie. */
@media (max-height:600px), (max-width:360px){
  :root{ --cta-h:50px; --cta-fs:18px; --cta-pad:10px 16px; --cta-sec-h:44px; --cta-sec-fs:15px; }
}

/* ── 2. HUD SCENY 3D — krem i atrament; zloto z rampy ──────────────────
   Przeniesione z public/scena-3d/hud.css. Piec z siedmiu nazw to od 9.09
   aliasy ramp (zloto, krem). Gora kremu byla #fff9d9 — od kroku 3 wskazuje
   na --krem-50 (#FFFBE0, deltaE 2.7, nie do odroznienia). Dol kremu
   i atrament HUD-u zostaja wlasne — nie maja pary w rampach (deltaE > 4). */
:root {
  --hud-cream-top: var(--krem-50);
  --hud-cream-bottom: #f1d997;
  --hud-gold-light: var(--zloto-100);
  --hud-gold: var(--zloto-400);
  --hud-gold-deep: var(--zloto-600);
  --hud-shadow: var(--zloto-800);
  --hud-ink: #473653;
}

/* ── 3. PRZYGODA — noc i szklo (dawniej w adventure.css na .adv-root) ───
   Definicje tokenow przeniesione tutaj; uklad (.adv-root: position, inset…)
   zostal w adventure.css. Jeden selektor w dwoch plikach — celowo: tu wartosci,
   tam geometria. --adv-gold to alias rampy (bylo #F5C45E, deltaE 3.7). */
.adv-root {
  --adv-ink: #F2F6FF;
  --adv-ink-soft: rgba(242, 246, 255, 0.76);
  --adv-panel: color-mix(in srgb, var(--noc-900) 62%, transparent);      /* bylo rgba(14,22,42,.62) — ta sama barwa, z rampy */
  --adv-panel-solid: color-mix(in srgb, var(--noc-900) 90%, transparent);
  --adv-edge: rgba(255, 255, 255, 0.16);
  --adv-accent: #57C7D4;
  --adv-gold: var(--zloto-300);
  --adv-radius: 22px;
}

/* ── 4. ROLE — do czego kolor sluzy ─────────────────────────────────────
   Komponent czyta ROLE, nie prymitywy. Rola mowi „to jest tlo karty",
   a nie „to jest #FBF1D6" — dzieki temu motyw (nizej) moze ja przebarwic,
   a przemalowanie calej gry to zmiana jednej linii tutaj.
   Wartosci sa dzis 1:1 z prymitywami, wiec podpiecie komponentu pod role
   NIE zmienia wygladu — zmienia tylko to, kto o nim decyduje. */
:root{
  /* tla */
  --tlo-karty: var(--p-paper);          /* pergamin kart i paneli */
  --tlo-karty-2: var(--p-paper-2);      /* dol gradientu karty, papier cieplejszy */
  --tlo-jasne: var(--biel-ciepla);      /* cieply bialy — gora gradientu okna */

  /* tekst */
  --tekst: var(--p-ink);                /* fiolet zamiast czerni */
  --tekst-cichy: var(--p-ink-soft);     /* drugorzedny, podpisy */
  --tekst-odwrocony: #FFFFFF;           /* na kolorowym CTA */

  /* akcenty — kazdy z twardym cieniem pod spodem (glina) */
  --akcent-cta: var(--p-leaf);          --akcent-cta-cien: var(--p-leaf-dk);
  --akcent-drugi: var(--p-dusk);        --akcent-drugi-cien: var(--braz-300);
  --akcent-magia: var(--p-magic);       --akcent-magia-gleboka: var(--p-magic-dk);
  --akcent-nagrody: var(--zloto-300);   /* gwiazdki, monety, chipy nagrod */
  --uwaga: var(--p-rose);               /* zycia, ostrzezenie, plakietka */

  /* zlota lamowka i cien — HUD, okna postaci, przyciski „ghost" */
  --lamowka-jasna: var(--zloto-100);
  --lamowka: var(--zloto-400);
  --lamowka-ciemna: var(--zloto-600);
  --cien-twardy: var(--zloto-800);      /* 0 3px 0 pod kaflem — to robi „glina" */
  --cien-miekki: var(--p-shadow);
}

/* ── 5. MOTYWY — te same role, inne wartosci ────────────────────────────
   HUD i Przygoda nie sa osobnymi systemami. To kontenery, ktore przebarwiaja
   role. Komponent z --tlo-karty w hubie dostaje pergamin, w HUD-zie krem,
   w Przygodzie ciemne szklo — z JEDNEJ reguly. */
.game-hud{
  --tlo-karty: var(--hud-cream-top);
  --tlo-karty-2: var(--hud-cream-bottom);
  --tekst: var(--hud-ink);
}
.adv-root{
  --tlo-karty: var(--adv-panel);
  --tlo-karty-2: var(--adv-panel-solid);
  --tekst: var(--adv-ink);
  --tekst-cichy: var(--adv-ink-soft);
  --akcent-nagrody: var(--adv-gold);
  --lamowka: var(--adv-accent);         /* w Przygodzie krawedz jest cyjanowa, nie zlota */
}

/* ── 6. ODSTEPY — jedna skala zamiast 40 roznych liczb ─────────────────
   Audyt z 9.09.2026: w arkuszach jest ~40 roznych wartosci padding/gap/margin
   (5, 6, 7, 9, 10, 11, 13, 14, 15, 17, 18…). Dziecko nie widzi roznicy miedzy
   13 a 14 px, ale my widzimy niespojne odstepy miedzy ekranami. Skala ponizej
   to 8 stopni; NOWY kod bierze odstep stad. Stary kod NIE jest przepisywany
   automatycznie (rozne liczby to czasem swiadome dopasowanie do grafiki),
   tylko przy okazji dotykania reguly — patrz docs/SYSTEM_STYLOW.md, krok 3. */
:root{
  --o-1:2px;    /* obrys, szczelina miedzy warstwami */
  --o-2:4px;    /* mikro: ikona–tekst, cien 3D */
  --o-3:8px;    /* gap w rzedzie, padding chipa */
  --o-4:12px;   /* padding malego przycisku, gap w kolumnie */
  --o-5:16px;   /* padding karty, odstep miedzy blokami */
  --o-6:24px;   /* padding okna, sekcja */
  --o-7:32px;   /* duzy oddech: naglowek–tresc */
  --o-8:56px;   /* duza strefa dotyku. Od 15.09 NIE jest rowne --cta-h (58 px):
                   skala odstepow ma wlasny rytm i nie chodzi za makieta CTA. */
}

/* ── 7. CHMURKI KOMUNIKATOW — jeden ksztalt dla Medrca, liska i Porady ──
   W grze mowia do dziecka trzy chmurki: Medrzec z porada o ciele
   (`PodpowiedzMedrca`), lisek zapraszajacy do minigier i Medrzec z Porada dnia
   (obie z `Reflektor`). Przed 9.09.2026 kazda miala WLASNA lamowke (#5F438A,
   #7b3fb0, #ff8a17), wlasna grubosc (3 px w DOM, 3 j. w SVG), wlasne tlo
   i wlasny krzyzyk. Wygladaly jak trzy gry.

   Teraz roznia sie JEDNA linia — `--chmurka-akcent` ustawionym na kontenerze.
   Reszta (grubosc, wypelnienie, glina, krzyzyk) jest tutaj i zmienia sie raz.

   GLINA (soft 3D clay) to nie box-shadow, tylko WYPELNIENIE: pasek swiatla na
   gornej krawedzi i zejscie w cien na dolnej, zrobione stopniami gradientu.
   Dzieki temu ten sam przepis dziala w DOM-owej karcie Medrca i w sciezce SVG
   liska (`ksztaltChmurki.js`), gdzie box-shadow nie istnieje — a bańka i jej
   dzióbek cieniuja sie jednym ruchem, bez szwu na styku. */
:root{
  --chmurka-akcent:var(--fiolet-500);  /* domyslnie Medrzec; lisek nadpisuje */
  --chmurka-lamowka:4px;               /* bylo 3 px — za cienko na „glinę" */
  --chmurka-r:41px;

  /* Piec stopni. 0–10% to swiatlo na gornej krawedzi, 90–100% zejscie w cien:
     zmierzone z wzorca, nie zgadniete. Procenty licza sie od gory SAMEJ banki
     (bez dziobka), dlatego w SVG gradient dostaje `gradientUnits`. */
  --chmurka-tlo-0:var(--biel-ciepla);
  --chmurka-tlo-1:var(--krem-50);
  --chmurka-tlo-2:var(--krem-100);
  --chmurka-tlo-3:var(--krem-cien-1);
  --chmurka-tlo-4:var(--krem-cien-2);
  --chmurka-wypelnienie:linear-gradient(180deg,
    var(--chmurka-tlo-0) 0%, var(--chmurka-tlo-1) 10%,
    var(--chmurka-tlo-2) 90%, var(--chmurka-tlo-3) 95.5%, var(--chmurka-tlo-4) 100%);

  /* Cien pod chmurka: twarda podstawka w tonie lamowki (to ona robi „lezy na
     czyms") + jedno miekkie rozmycie. Dwa wpisy, nie cztery — wiecej warstw
     robi mydlo, nie glebie. */
  --chmurka-cien-1:0 6px 0 color-mix(in srgb, var(--chmurka-akcent) 30%, transparent);
  --chmurka-cien-2:0 14px 26px color-mix(in srgb, var(--noc-850) 34%, transparent);
  /* To samo dla ksztaltu SVG, gdzie box-shadow nie dziala: `drop-shadow` idzie
     za sylwetka, wiec cien obejmuje takze dzióbek. Ta sama geometria i barwy —
     zmiana wyzej ma isc TU RAZEM, dlatego liczby stoja obok siebie. */
  --chmurka-cien-filtr:
    drop-shadow(0 6px 0 color-mix(in srgb, var(--chmurka-akcent) 30%, transparent))
    drop-shadow(0 14px 22px color-mix(in srgb, var(--noc-850) 34%, transparent));
}