/* =====================================================================
   MIMI - AAC. Arkusz napisany od nowa pod projekt z Figmy (wrzesień 2026).
   =====================================================================

   JEDNOSTKA PROJEKTU (--u)
   Wszystkie wymiary są wpisane DOKŁADNIE takimi liczbami, jakie zmierzono
   na makiecie (ramka 2000 x 1390). --u to szerokość jednej jednostki makiety
   w pikselach urządzenia i liczy ją skrypt w <head> index.html:
       --u = szerokość_aplikacji / 2000
   Dzięki temu "calc(328 * var(--u))" to po prostu "328 px z makiety", a
   proporcje zostają identyczne na każdym tablecie.

   JEDEN FORMAT: TABLET W POZIOMIE.
   Aplikacja nie ma już wariantu telefonowego ani pionowego - ekran trzymany
   pionowo dostaje obrót całego dokumentu (sekcja WYMUSZONY POZIOM na końcu
   pliku), więc layout zawsze jest ten sam.

   UKŁAD (liczby z makiety):
     margines strony        62 na boki, 42 na górze, 58 na dole
     pasek górny            wysokość 163
     odstęp pasek -> scena  46
     pasek kategorii        szerokość 277, kafel 198 x 206, odstęp 25
     odstęp pasek -> plansza 47
     plansza                padding 48 (boki) / 38 (góra), kafel 328 x 370,
                            odstęp 28 w poziomie i w pionie (zmiana 22.09.2026)
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

:root {
  /* --u wpisuje skrypt z <head>; wartość poniżej to tylko bezpieczny start,
     gdyby skrypt nie zdążył (np. przy podglądzie samego CSS). */
  --u: 0.6px;

  /* --- kolory interfejsu --- */
  --bg: #F2F2F2;
  --surface: #FFFFFF;
  --ink: #14181C;
  --ink-2: #6C757D;
  --line: #E8E8E8;
  --key: #EFEFEF;       /* klawisz klawiatury (Figma mimi_keyboard) */
  --learn-pill: #EBEBEB; /* podpis kafla w menu Nauki (Figma nauka) */
  --gear: #E0E0E0;
  --dark: #000000;
  --go: #00C20C;        /* zielony akcji: przełączniki, Enter, gry */
  --say: #5CC23B;       /* przycisk MÓW w polu mowy */
  --danger: #E33B33;

  /* SZEROKOŚĆ KAFLA PIKTOGRAMU w jednostkach projektu. Wpisuje ją
     applySettings() w settings.js, bo zależy od liczby kolumn: M/L/XL to
     5/4/3 kolumny, czyli kafel 252,8 / 328 / 453,3 jednostki. 328 (czyli L)
     to układ z makiety i zarazem wartość awaryjna.

     WSZYSTKO WEWNĄTRZ KAFLA liczy się od tej szerokości, a nie stałą liczbą
     jednostek - i to jest cała naprawa zgłoszenia "czy M, L czy XL, każdy ma
     inne zaokrąglenie". Przy stałym promieniu mniejszy kafel wyglądał na
     bardziej zaokrąglony, a większy na prawie prostokątny; przy udziale
     szerokości wszystkie trzy rozmiary są wizualnie identyczne.
     Udziały odczytane z załączonego kafla wzorcowego (536 px szerokości):
       promień 0,154 · pastylka: wys. 0,244, bok 0,056, dół 0,063,
       napis 0,097 · odstępy piktogramu: góra 0,114, bok 0,152, dół 0,121. */
  --card-wu: 328;
  --cw: calc(var(--card-wu) * var(--u));

  /* --- promienie --- */
  --r-panel: calc(76 * var(--u));   /* biały panel (pasek kategorii, plansza) */
  --r-card: calc(var(--cw) * .154); /* kafel piktogramu - patrz --cw wyżej */
  --r-tile: calc(48 * var(--u));    /* kafel kategorii (stały rozmiar) */
  --r-pill: 9999px;

  /* liczba kolumn siatki - ustawia settings.js (M/L/XL = 5/4/3) */
  --cols: 4;

  /* --- KRZYWE RUCHU (jedno źródło dla całej aplikacji) ---
     --ease   : płynne dojechanie do celu, bez przelotu. Dokładnie ta krzywa,
                co w tablicy Kanban - używamy jej wszędzie tam, gdzie coś
                PRZESUWA się na nowe miejsce (rozsuwanie kafli przy
                przeciąganiu, przejazd panelu).
     --bounce : z lekkim przelotem za cel i powrotem. Do POJAWIANIA SIĘ i do
                reakcji na dotknięcie - dzięki niej interfejs jest "miękki",
                a dziecko od razu widzi, że coś odpowiedziało na palec.
     --bounce-in: mocniejszy przelot, tylko dla wskakiwania kafli od zera. */
  --ease: cubic-bezier(.2, .85, .3, 1);
  --bounce: cubic-bezier(.34, 1.42, .64, 1);
  --bounce-in: cubic-bezier(.22, 1.5, .5, 1);

  /* SPRĘŻYNY JAK W iOS (25.09.2026) - te same trzy, co w SwiftUI:
     smooth (bez przelotu, 0.64 s), snappy (0.48 s, ślad przelotu) i bouncy
     (0.57 s, ok. 4 proc. przelotu). Policzone z fizyki sprężyny i zapisane
     jako linear(); starsze Safari dostają najbliższy cubic-bezier. Czas
     animacji MA być taki jak --t-*, bo krzywa kończy się dokładnie wtedy,
     gdy sprężyna staje. */
  --spring-smooth: cubic-bezier(.32, .72, 0, 1);
  --spring-snappy: cubic-bezier(.25, 1.05, .4, 1);
  --spring-bouncy: cubic-bezier(.34, 1.3, .64, 1);
  --t-smooth: .64s;
  --t-snappy: .48s;
  --t-bouncy: .57s;

  color-scheme: light;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-smooth: linear(0, 0.0299, 0.1006, 0.1914, 0.289, 0.3852, 0.4754, 0.557, 0.6292, 0.6919, 0.7455, 0.7909, 0.829, 0.8608, 0.887, 0.9086, 0.9263, 0.9407, 0.9524, 0.9619, 0.9695, 0.9757, 0.9806, 0.9846, 0.9877, 0.9903, 0.9923, 0.9939, 0.9952, 0.9962, 1);
    --spring-snappy: linear(0, 0.0276, 0.0957, 0.1866, 0.2877, 0.3902, 0.4884, 0.5787, 0.6592, 0.7291, 0.7886, 0.8383, 0.8789, 0.9116, 0.9375, 0.9575, 0.9728, 0.9841, 0.9923, 0.998, 1.0019, 1.0043, 1.0056, 1.0062, 1.0063, 1.006, 1.0055, 1.0049, 1.0042, 1.0036, 1);
    --spring-bouncy: linear(0, 0.0257, 0.0915, 0.1828, 0.2878, 0.3975, 0.5053, 0.6064, 0.6978, 0.7778, 0.8458, 0.9019, 0.9468, 0.9815, 1.0071, 1.0251, 1.0368, 1.0433, 1.0458, 1.0454, 1.0429, 1.0391, 1.0344, 1.0294, 1.0244, 1.0196, 1.0152, 1.0114, 1.0081, 1.0053, 1);
  }
}

/* Duch starego ekranu na czas przejścia (iosScreenSwap / iosGridSwap w
   app.js): zamrożona kopia, która odjeżdża, a pod nią/nad nią nowy ekran.
   Nic w kopii nie może się ruszać samo ani reagować na palec. */
.ios-ghost { pointer-events: none !important; }
.ios-ghost, .ios-ghost * { animation: none !important; transition: none !important; }
.app.ios-moving { background: var(--bg); }
.app.ios-top { box-shadow: calc(-24 * var(--u)) 0 calc(80 * var(--u)) rgba(0, 0, 0, .14); }

:root[data-theme="dark"] {
  --bg: #0E1114;
  --surface: #1A1F25;
  --ink: #FFFFFF;
  --ink-2: #9AA3AD;
  --line: #2C333B;
  --key: #2C333B;
  --learn-pill: #2C333B;
  --gear: #2A3037;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  /* dziecko trzyma palec na ekranie - nic nie ma się zaznaczać ani
     wywoływać systemowego menu "Udostępnij / Zachowaj w Zdjęciach" */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  position: fixed;
  inset: 0;
}

/* Krój "ułatwiający czytanie" = cięższa waga Nunito (nie osobna rodzina). */
:root[data-readable-font] body { font-weight: 800; }

button, input {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

img { display: block; }

[hidden] { display: none !important; }

/* Wspólny sposób przewijania palcem: pionowo, bez widocznego paska,
   bez "przeciągania" całej strony przy dojechaniu do końca. */
.rail,
.board,
.settings-card,
.side-nav,
.learn-bank-list {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar,
.board::-webkit-scrollbar,
.settings-card::-webkit-scrollbar,
.side-nav::-webkit-scrollbar,
.learn-bank-list::-webkit-scrollbar { width: 0; height: 0; display: none; }


/* =====================================================================
   SZKIELET
   ===================================================================== */

.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(46.6 * var(--u));
  padding: calc(49 * var(--u)) calc(60.2 * var(--u)) calc(58.6 * var(--u)) calc(57.9 * var(--u));
}

.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: calc(73.2 * var(--u)); /* Figma: pasek 57,9-312,4, plansza od 385,6 */
}


/* =====================================================================
   PASEK GÓRNY: logo + zębatka + pole mowy
   ===================================================================== */

.topbar {
  flex: 0 0 auto;
  height: calc(147.1 * var(--u));
  display: flex;
  align-items: center;
}

/* Logo ma pod spodem "dzióbek" dymka (10% wysokości), więc kwadrat bąbla
   wyrównuje się do środka paska, a dzióbek zwisa poniżej - dokładnie jak w
   makiecie. Stąd margines ujemny zamiast zwykłego wyśrodkowania. */
.logo-btn {
  flex: 0 0 auto;
  width: calc(116 * var(--u));
  height: calc(128 * var(--u));
  margin-bottom: calc(-12 * var(--u));
}
.logo-btn { position: relative; overflow: visible; }
/* Buźka: podskok z przysiadem (origin w dzióbku dymka), miny przełączane
   przenikaniem. Mrugnięcie 1,5 s co 5 minut, serduszka 2 s po dotknięciu. */
.logo-anim { display: block; width: 100%; height: 100%; transform-origin: 18% 100%; }
.logo-face { display: block; width: 100%; height: 100%; overflow: visible; }
.logo-face .lf-wink,
.logo-face .lf-love { opacity: 0; }
.logo-face .lf-heart { transform-box: fill-box; transform-origin: center; }

.logo-btn.is-wink .logo-anim { animation: logo-hop .75s cubic-bezier(.3, .7, .4, 1); }
.logo-btn.is-wink .lf-normal { animation: lf-out 1.5s linear both; }
.logo-btn.is-wink .lf-wink { animation: lf-in 1.5s linear both; }

.logo-btn.is-love .logo-anim { animation: logo-hop .75s cubic-bezier(.3, .7, .4, 1); }
.logo-btn.is-love .lf-normal { animation: lf-out 2s linear both; }
.logo-btn.is-love .lf-love { animation: lf-in 2s linear both; }
.logo-btn.is-love .lf-heart { animation: lf-beat .44s .3s ease-in-out 3; }

@keyframes logo-hop {
  0%   { transform: none; }
  18%  { transform: scale(1.08, .88); }
  45%  { transform: translateY(-16%) scale(.95, 1.07); }
  70%  { transform: translateY(0) scale(1.06, .94); }
  86%  { transform: scale(.98, 1.02); }
  100% { transform: none; }
}
@keyframes lf-out { 0%, 14% { opacity: 1; } 18%, 84% { opacity: 0; } 88%, 100% { opacity: 1; } }
@keyframes lf-in  { 0%, 14% { opacity: 0; } 18%, 84% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes lf-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* małe serduszka wylatujące z buźki po dotknięciu */
.logo-heart {
  position: absolute;
  top: 18%;
  width: 30%;
  opacity: 0;
  pointer-events: none;
}
.logo-heart svg { display: block; width: 100%; height: auto; }
.lh-1 { left: 8%; }
.lh-2 { left: 38%; width: 24%; }
.lh-3 { left: 66%; width: 27%; }
.logo-btn.is-love .lh-1 { animation: heart-fly 1.3s .25s ease-out both; --hx: -40%; }
.logo-btn.is-love .lh-2 { animation: heart-fly 1.3s .45s ease-out both; --hx: 10%; }
.logo-btn.is-love .lh-3 { animation: heart-fly 1.3s .35s ease-out both; --hx: 55%; }
@keyframes heart-fly {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  20%  { opacity: 1; transform: translate(calc(var(--hx) * .3), -60%) scale(1); }
  100% { opacity: 0; transform: translate(var(--hx), -260%) scale(.7) rotate(12deg); }
}

.gear-btn {
  flex: 0 0 auto;
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
  margin-left: calc(35 * var(--u));
  border-radius: 50%;
  background: var(--gear);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s var(--bounce);
}
.gear-btn .material-symbols-rounded {
  font-size: calc(54 * var(--u));
  color: var(--ink);
}
.gear-btn:active { transform: scale(.94); }

/* Pole mowy zaczyna się DOKŁADNIE tam, gdzie plansza (62 + 116 + 35 + 116 +
   57 = 386 jednostek makiety) - stąd wpisany na sztywno odstęp 57.

   Od 22.09.2026 (drugi załącznik z polem mowy) biała pastylka to SAMO pole
   zdania, a przyciski cofania i MÓW stoją obok niej na szarym tle strony.
   Zmierzone na makiecie: pastylka 385-1412, odstęp 33, cofanie 166, odstęp 16,
   MÓW 276, a MÓW kończy się 35 jednostek przed prawą krawędzią planszy. */
.saybar {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  /* pole zaczyna się tam, gdzie plansza: 57,9 + 116 + 35 + 116 + 60,7 = 385,6 */
  margin-left: calc(60.7 * var(--u));
  display: flex;
  align-items: center;
  padding-right: 0;
  gap: calc(44 * var(--u)); /* pole -> przycisk usuwania */
}
/* PASEK NAUKI 1:1 z Figmy (ramka "nauka", node 11587:276; wymiar z Figmy
   x 0,8475): turkusowa pastylka z książką i nazwą ekranu zaczyna się tam,
   gdzie siatka kafli (320), powitanie 64 za nią, niebieski głośniczek ⌀116
   34 przed prawą krawędzią planszy (jak MÓW). Tła paska nie ma. */
.learn-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin-left: calc(130.5 * var(--u));
  padding-right: calc(33.6 * var(--u));
  display: flex;
  align-items: center;
}

/* W Nauce pasek mowy ustępuje miejsca paskowi wskazówek (data-learn na <html>
   ustawia renderPictogramGrid). W Nauce nic się nie składa w zdanie, więc
   pole mowy byłoby tam martwe. */
:root[data-learn] .saybar { display: none; }
.learn-title {
  flex: 0 0 auto;
  height: calc(112 * var(--u));
  padding: 0 calc(45 * var(--u)) 0 calc(47.5 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(41 * var(--u));
  border-radius: var(--r-pill);
  background: #8EE5D9;
  color: #000000;
}
.learn-title-ico { width: calc(65.6 * var(--u)); height: calc(47.7 * var(--u)); flex: none; }
/* Gry: ta sama pastylka, lawendowa, z ikoną pada z paska kategorii */
.learn-title-img { display: none; width: calc(68 * var(--u)); height: auto; flex: none; }
:root[data-games] .learn-title { background: #C3B1FF; }
:root[data-games] .learn-title-ico { display: none; }
:root[data-games] .learn-title-img { display: block; }
.learn-title b {
  font-size: calc(49.5 * var(--u));
  font-weight: 900;
  white-space: nowrap;
}
.learn-hello {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(660 * var(--u));
  margin: 0 0 0 calc(64.5 * var(--u));
  font-size: calc(25.6 * var(--u));
  font-weight: 700;
  line-height: 1.066;
  color: var(--ink);
}
/* imię dziecka w liliowej pastylce (Figma: #F5CCFF, 124 x 44) */
.learn-bar-name {
  display: inline-flex;
  align-items: center;
  height: calc(44 * var(--u));
  margin-right: calc(14 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-radius: calc(22 * var(--u));
  background: #F5CCFF;
  color: #14181C;
  vertical-align: middle;
}
/* dodatki po prawej stronie paska (licznik rund, "Nowa gra", kłódka) */
.learn-extra {
  margin-left: auto;
  padding-left: calc(28 * var(--u)); /* odstęp od wskazówki - bez niego tekst sklejał się z licznikiem */
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}
.learn-crumb { color: var(--ink-2); margin-right: calc(8 * var(--u)); }
/* głośniczek w pasku Nauki usunięty z widoku (23.09.2026) */
.learn-say { display: none !important; }
.learn-say {
  flex: 0 0 auto;
  margin-left: calc(24 * var(--u));
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
  border-radius: 50%;
  transition: transform .22s var(--bounce);
}
.learn-say svg { display: block; width: 100%; height: 100%; }
.learn-say:active { transform: scale(.94); }

/* Nauka to osobny ekran jak Klawiatura: bez paska kategorii, logo i
   zębatki; krzyżyk po lewej (ten sam przycisk co w Klawiaturze). */
:root[data-learn] .logo-btn,
:root[data-learn] .gear-btn,
:root[data-learn] .rail { display: none; }

/* --- pasek składanego zdania --- */

/* Biała pastylka pola mowy. W środku przewijane zdanie, a po prawej (tylko
   przy pisaniu na klawiaturze) podpowiedź słownika - stoi poza przewijaniem,
   więc chipy chowają się przed nią, a nie pod nią (25.09.2026). */
.say-field {
  flex: 1 1 auto;
  min-width: 0;
  /* 23.09.2026: dwa razy o 6 jednostek niższe z góry i z dołu (uwagi
     użytkownika) - 139 przy pasku 163 */
  height: calc(144.9 * var(--u));
  background: var(--surface);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sentence-strip {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 calc(36 * var(--u)) 0 calc(75.5 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sentence-strip::-webkit-scrollbar { display: none; }
/* Ze słowami w środku pierwszy chip stoi 43 jednostki bliżej lewego brzegu
   niż napis-podpowiedź (uwaga użytkownika 22.09.2026: przerwa przed pierwszą
   pastylką była za duża). Podpowiedź zostaje na 87, jak w makiecie. */
.sentence-strip.has-words { padding-left: calc(44 * var(--u)); }

.sentence-placeholder {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; /* awaryjnie, gdyby podpowiedź słownika zabrała miejsce */
  font-size: calc(28.8 * var(--u));
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sentence-chip {
  flex: 0 0 auto;
  height: calc(106 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: var(--r-pill);
  background: var(--chip-color, var(--line));
  color: var(--ink);
  font-size: calc(30 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  /* obwódka mówionego słowa GAŚNIE miękko, gdy lektor przechodzi dalej
     albo kończy zdanie (zapala się bez przejścia - patrz .chip-speaking) */
  transition: box-shadow .45s ease;
}
.sentence-chip img {
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  object-fit: contain;
}
/* Zdjęcia własne (kategoria "Moje" ma czarny kolor, więc czarny napis ginął
   na czarnej pastylce): szara pastylka, czarny napis, zdjęcie w kółku. */
.sentence-chip.is-photo {
  background: var(--line);
  color: var(--ink);
}
.sentence-chip.is-photo img {
  border-radius: 50%;
  object-fit: cover;
}
.sentence-chip.is-text {
  background: var(--line);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.sentence-chip.is-new { animation: chip-in .3s var(--bounce-in); }
/* Mówione słowo: w chwili, gdy zaczyna być czytane, pastylka JEDEN raz
   delikatnie się powiększa (do 108%) i miękko wraca - chwilowy sygnał "teraz
   to", bez ciągłego ruchu. Ciemna obwódka zostaje, dopóki słowo trwa. Ruch
   idzie na właściwości `scale`, nie `transform` - ta należy do wskakiwania
   nowego chipa (chip-in). */
.sentence-chip.chip-speaking {
  box-shadow: 0 0 0 calc(5 * var(--u)) var(--ink);
  animation: chip-zoom .44s var(--ease);
  transition: none; /* zapala się od razu, razem ze słowem */
}
@keyframes chip-zoom {
  0%   { scale: 1; }
  40%  { scale: 1.08; }
  100% { scale: 1; }
}

/* usuwanie z pola mowy: pastylka znika zoomem 100 -> 0 (czas = CHIP_OUT_MS
   w app.js). `scale`, nie `transform` - ten należy do chip-in. */
.sentence-chip.is-leaving {
  animation: chip-out .24s cubic-bezier(.5, 0, .75, .5) forwards;
  pointer-events: none;
}
@keyframes chip-out { to { scale: 0; opacity: 0; } }

@keyframes chip-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* --- przyciski paska mowy --- */

.saybar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(28.4 * var(--u)); /* usuwanie -> MÓW */
}

.pill-btn {
  /* Figma 11805:73: MÓW 138,4 wysokości */
  height: calc(138.4 * var(--u));
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s var(--bounce), opacity .16s ease;
}
.pill-btn:active { transform: scale(.95); }
.pill-btn:disabled { opacity: .28; }

/* usuwanie to teraz KOŁO (Figma 11805:68), ⌀138,6, X wewnątrz w biało */
.pill-dark {
  width: calc(138.6 * var(--u));
  height: calc(138.6 * var(--u));
  border-radius: 50%;
  background: var(--dark);
  color: #FFFFFF;
}
/* ikona z Figmy jest eksportowana w obróconej ramce - obracamy o 90°, żeby wskazywała w lewo */
.pill-dark .del-ico { display: block; width: 100%; height: 100%; transform: rotate(90deg); }
.pill-dark .material-symbols-rounded { font-size: calc(60 * var(--u)); }

/* MÓW ma własny, jaśniejszy zielony z drugiego załącznika (#5CC23B) - reszta
   aplikacji (przełączniki, Enter na klawiaturze, gry) zostaje przy --go. */
.pill-go {
  background: #00C10D; /* Figma: zielony MÓW */
  color: #FFFFFF;
  padding: 0 calc(67.8 * var(--u)) 0 calc(57.5 * var(--u));
  gap: calc(47 * var(--u));
}
.pill-ico {
  width: calc(70.4 * var(--u));
  height: calc(61 * var(--u));
}
.pill-label {
  font-size: calc(49.7 * var(--u));
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* przytrzymany backspace wyczyścił całe zdanie - krótki błysk */
.pill-btn.did-clear { animation: did-clear .32s ease; }
@keyframes did-clear {
  0%, 100% { background: var(--dark); }
  50% { background: var(--danger); }
}



/* =====================================================================
   PASEK KATEGORII (lewa kolumna, przewijany palcem góra-dół)
   ===================================================================== */

.rail {
  flex: 0 0 auto;
  width: calc(254.4 * var(--u));
  background: var(--surface);
  border-radius: calc(71 * var(--u));
  padding: calc(23.9 * var(--u)) calc(27.5 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(29.3 * var(--u));
}

.cat-tile {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 199.5 / 208.1;
  border-radius: var(--r-tile);
  background: var(--cat-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(20 * var(--u)) calc(23 * var(--u)) calc(24.4 * var(--u));
  transition: transform .24s var(--bounce), scale var(--t-bouncy) var(--spring-bouncy), box-shadow var(--t-snappy) var(--spring-snappy), margin-bottom var(--t-smooth) var(--spring-smooth);
}
.cat-tile:active { transform: scale(.94); }

/* AKTYWNA KATEGORIA (projekt użytkownika 23.09.2026): pod wybranym kaflem
   wysuwa się PODCIEŃ w ciemniejszym odcieniu jego koloru (jak przycisk z
   głębią), kafel rośnie o 6%, a ikona robi podskok. Kolor samego kafla się
   nie zmienia - to jego tożsamość. (Wcześniej: ciemna obwódka, potem
   kreska przy krawędzi paska - obie odrzucone.)
   Podcień: 14 jednostek w dół, kolor = 64% koloru kafla + czerń (zmierzone
   na makiecie). Ruch na `scale` / `rotate`, nie na `transform` - transform
   należy do reakcji na wciśnięcie. */
.cat-tile { --cat-base: color-mix(in srgb, var(--cat-color) 64%, #000); }
/* czarny kafel "Moje": ciemniejszy od czerni się nie da, więc szary */
.cat-tile[data-cat="moje"] { --cat-base: #4A4A4A; }
/* margines pod spodem = miejsce na podcień (14) i wzrost kafla (6), żeby
   odstęp do następnej kategorii został taki jak w projekcie; scroll-margin -
   przewinięcie paska do dolnego kafla nie ucina podcienia */
.cat-tile { scroll-margin: calc(40 * var(--u)); }
.cat-tile.active {
  scale: 1.06;
  margin-bottom: calc(14 * var(--u));
  box-shadow: 0 calc(14 * var(--u)) 0 var(--cat-base);
}
/* ikona wybranej kategorii: krótkie "puknięcie" jak ikona w Docku iOS */
.cat-tile.is-picked .cat-ico img { animation: cat-hop .5s cubic-bezier(.3, 0, .3, 1); }
@keyframes cat-hop {
  0% { scale: 1; rotate: 0deg; }
  35% { scale: 1.14; rotate: -5deg; }
  100% { scale: 1; rotate: 0deg; }
}

.cat-ico {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* wysokość każdej ikony osobno (--ico-h z data.js) - dokładnie tak, jak
   poszczególne piktogramy siedzą w kaflach na makiecie */
.cat-ico img {
  height: calc(var(--ico-h, 70) * var(--u));
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cat-label {
  flex: 0 0 auto;
  width: 100%;
  height: calc(51 * var(--u));
  border-radius: var(--r-pill);
  /* pastylka NIE jest biała - to jaśniejszy odcień koloru kategorii
     (--pill-color / --pill-ink z data.js, ustawiane w renderCategoryBar) */
  background: var(--pill-color, #FFFFFF);
  color: var(--pill-ink, #14181C);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(10 * var(--u));
  font-size: calc(24.1 * var(--u));
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
}


/* =====================================================================
   PLANSZA I KAFLE PIKTOGRAMÓW
   ===================================================================== */

.board {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  border-radius: calc(69.5 * var(--u));
  padding: calc(38 * var(--u)) calc(33.5 * var(--u)) calc(38 * var(--u)) calc(41.7 * var(--u));
  position: relative;
}
/* Figma: pasek kategorii zaczyna się 7,3 wyżej niż plansza */
:root:not([data-phone]) .board { margin-top: calc(7.3 * var(--u)); }

.pictogram-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  /* równy odstęp 28 w obie strony - ta sama liczba co GRID_GAP_U w settings.js */
  gap: calc(24.3 * var(--u));
  align-content: start;
}

.pictogram-card,
.add-tile {
  position: relative;
  aspect-ratio: 351.5 / 368.9; /* Figma 11805:341 */
  border-radius: var(--r-card);
  background: var(--card-color, var(--line));
  display: flex;
  flex-direction: column;
  /* JAWNIE stretch: kafel to <button>, a przeglądarki dają przyciskom w
     arkuszu domyślnym align-items: flex-start. Przez to pastylka podpisu
     kurczyła się do szerokości słowa i stawała przy lewej krawędzi, a
     piktogram uciekał w lewo (zgłoszenie „opisy się rozjechały”, 23.09). */
  align-items: stretch;
  overflow: hidden;
  transition: transform .22s var(--bounce);
}

/* WEJŚCIE PO WYBRANIU KATEGORII: kafle wyrastają z 70% do pełnej wielkości
   z DELIKATNYM odbiciem (ok. 2% przelotu), falą biegnącą po przekątnej - z
   lewego górnego rogu do prawego dolnego. Opóźnienie każdego kafla
   (--in-delay) wylicza wejscieKafli() w app.js z jego wiersza i kolumny.
   Poprzednia wersja (od skali 0, przelot 1.5) była przytłaczająca - 22.09.2026
   uspokojona: mniejszy zakres skali, mniejszy przelot, dłużej i wolniej.
   Przezroczystość idzie OSOBNĄ, krótszą animacją bez przelotu, żeby kafel
   był już widoczny, zanim zacznie się odbijać.

   Animacja rusza właściwość `scale`, a nie `transform` - dzięki temu nie gryzie
   się z przesuwaniem kafli przy przeciąganiu (to pisze `transform` z JS).
   Mimo to klasa jest zdejmowana po przejściu fali: `both` jest potrzebne tylko
   po to, żeby kafel był niewidoczny ZANIM dojdzie do niego fala. */
.pictogram-card.is-entering,
.add-tile.is-entering,
.learn-card.is-entering,
.cat-tile.is-entering {
  animation:
    card-in var(--t-snappy) var(--spring-snappy) both,
    card-fade .26s ease-out both;
  animation-delay: var(--in-delay, 0ms), var(--in-delay, 0ms);
}
/* 25.09.2026 "jak w iOS": zamiast wyskakiwania z 70% kafle dojeżdżają
   zawsze OD GÓRY (--in-dy ujemne, ustawia iosGridSwap), rząd po rzędzie,
   z ledwie widocznym zoomem - tak samo w każdej kategorii. */
@keyframes card-in {
  from { translate: 0 var(--in-dy, calc(-44 * var(--u))); scale: .97; }
  to   { translate: 0 0; scale: 1; }
}
@keyframes card-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pictogram-card:active { transform: scale(.96); }

.card-art {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--cw) * .114) calc(var(--cw) * .152) calc(var(--cw) * .121);
}
.card-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Zdjęcie własne wypełnia CAŁY kafel, a podpis leży na nim - tak samo jak
   kafel "Moja Mama" w makiecie. */
.pictogram-card.is-photo .card-art {
  position: absolute;
  inset: 0;
  padding: 0;
}
.pictogram-card.is-photo .card-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
.pictogram-card.is-photo .caption {
  position: relative;
  margin-top: auto;
}

/* Świadomie display:block z wyśrodkowaniem tekstu, a NIE flex. Podpis, który
   się nie mieści, zmniejsza fitCaptionText() w app.js - a ten porównuje
   scrollWidth z clientWidth. W kontenerze flex z justify-content:center
   przepełniona treść wylewa się w OBIE strony i scrollWidth potrafi nie
   zauważyć nadmiaru; przy zwykłym bloku pomiar jest wiarygodny.
   line-height równa wysokości pastylki centruje tekst w pionie także po
   zmniejszeniu czcionki. */
/* Cała pastylka skaluje się razem z kaflem (--cw), więc wygląda tak samo przy
   M, L i XL. Marginesy są z zapasem względem łuku narożnika: przy promieniu
   0,154 szerokości narożnik wcina się na wysokości dolnego marginesu o 0,030
   szerokości, a pastylka stoi 0,056 od boku - czyli nic jej nie obcina. */
.caption {
  flex: 0 0 auto;
  margin: 0 calc(var(--cw) * .0646) calc(var(--cw) * .063);
  height: calc(var(--cw) * .2435);
  border-radius: var(--r-pill);
  /* jak w pasku kategorii: jaśniejszy odcień koloru kafla, nie biel */
  background: var(--pill-color, #FFFFFF);
  color: var(--pill-ink, #14181C);
  display: block;
  text-align: center;
  padding: 0 calc(var(--cw) * .05);
  font-size: calc(var(--cw) * .097);
  font-weight: 800;
  line-height: calc(var(--cw) * .244);
  white-space: nowrap;
  overflow: hidden;
}

:root[data-captions="upper"] .caption { text-transform: uppercase; }
:root[data-captions="none"] .caption { display: none; }
:root[data-captions="none"] .card-art { padding-bottom: calc(var(--cw) * .114); }

/* kafel "Dodaj zdjęcie" w kategorii Moje */
.add-tile {
  align-items: center;
  justify-content: center;
  gap: calc(var(--cw) * .055);
  background: var(--line);
  color: var(--ink);
  border: calc(var(--cw) * .018) dashed var(--ink-2);
}
.add-tile .material-symbols-rounded { font-size: calc(var(--cw) * .335); }
.add-tile span:last-child { font-size: calc(var(--cw) * .091); font-weight: 800; }


/* --- odznaki (serduszko / kosz) w trybie edycji --- */

.card-badge {
  position: absolute;
  top: calc(var(--cw) * .08);
  width: calc(var(--cw) * .30);
  height: calc(var(--cw) * .30);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .12s ease;
  z-index: 2;
}
/* rozmiar i wcięcie z projektu użytkownika (23.09.2026): koło 0,30 szerokości
   kafla, 0,08 od górnej i bocznej krawędzi */
.badge-fav { left: calc(var(--cw) * .08); }
.badge-del { right: calc(var(--cw) * .08); }
.card-badge.pressed { transform: scale(.86); }
.badge-svg { width: 100%; height: 100%; display: block; }
.badge-ring { fill: #FFFFFF; }
.badge-glyph { fill: #000000; }
.badge-heart { fill: none; stroke: #000000; stroke-width: 7; transition: fill .18s ease, stroke .18s ease; }
.badge-fav.is-fav .badge-heart { fill: #FF3D3D; stroke: #FF3D3D; stroke-width: 0; }

/* Odznaki są widoczne dopiero w trybie edycji (po przytrzymaniu kafla). */
:root[data-reorder] .card-badge { opacity: 1; pointer-events: auto; }

.card-badge.just-faved { animation: fav-pop .38s var(--bounce-in); }
@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Kafel ze zdjęciem: pod pastylką leży fotografia, a nie jednolity kolor
   kategorii, więc jaśniejszy odcień tego koloru nic by tu nie znaczył i bywał
   nieczytelny. Zdjęcia dostają BIAŁĄ pastylkę z czarnym napisem - tak jest
   narysowany kafel "Moja Mama" w makiecie aplikacji. */
.pictogram-card.is-photo .caption {
  background: #FFFFFF;
  color: #14181C;
}

/* --- reakcja kafla na dotknięcie --- */

/* kafel "odpowiada" na dotknięcie, zanim jeszcze odezwie się lektor */
.pictogram-card.speaking { animation: card-pulse .5s ease; }
@keyframes card-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
/* tryb "drżąca ręka": palec musnął kafel za krótko - kafel to pokazuje,
   zamiast po prostu nic nie zrobić */
.pictogram-card.too-short { animation: too-short .26s ease; }
@keyframes too-short {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(-8 * var(--u))); }
  75% { transform: translateX(calc(8 * var(--u))); }
}

/* --- tryb edycji: kafle się chwieją, przeciągany unosi --- */

/* Dygotanie rusza właściwość `rotate`, a nie `transform` - animacja CSS bije
   style inline, więc na `transform` zablokowałaby przesuwanie sąsiadów z JS
   (kafle przeskakiwały wtedy na nowe miejsce zamiast do niego dojechać). */
.pictogram-card.jiggling {
  animation: jiggle .5s ease-in-out infinite;
  animation-delay: var(--jiggle-delay, 0s);
}
@keyframes jiggle {
  0%, 100% { rotate: -.7deg; }
  50% { rotate: .7deg; }
}
/* W trybie edycji plansza NIE przewija się palcem: przeciąganie kafla i
   przewijanie to ten sam gest, a iPadOS w razie wątpliwości zawsze wybiera
   przewijanie (i zabiera zdarzenia wskaźnika przez pointercancel). Wyjście z
   trybu edycji to dotknięcie pustego miejsca, więc przewijanie wraca od razu. */
:root[data-reorder] .pictogram-grid { touch-action: none; }

/* PRZECIĄGANY KAFEL ("duch" doczepiony do <body>). Położenie i sprężynowy
   powrót pisze JS przez left/top + `transform`; uniesienie (powiększenie,
   lekki przechył jak na tablicy Kanban, cień) siedzi tu, na osobnych
   właściwościach `scale`/`rotate`, więc jedno z drugim się nie gryzie. */
.pictogram-card.dragging {
  position: fixed;
  z-index: 60;
  touch-action: none;
  animation: none;
  transform: none;
  scale: 1.06;
  rotate: 1.5deg;
  box-shadow: 0 calc(24 * var(--u)) calc(54 * var(--u)) rgba(0, 0, 0, .26);
  pointer-events: none;
  transition: scale .3s var(--ease), rotate .3s var(--ease), box-shadow .3s ease;
}
/* puszczony: odkłada się - skala, przechył i cień wracają do zera w tym samym
   czasie, w którym sprężyna dowozi go na miejsce */
.pictogram-card.dragging.drag-landing {
  scale: 1;
  rotate: 0deg;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
/* w trakcie przeciągania nic innego się nie chwieje */
.pictogram-grid.has-drag .pictogram-card:not(.dragging) { animation-play-state: paused; }
.drop-placeholder {
  aspect-ratio: 328 / 370;
  border-radius: var(--r-card);
  background: var(--line);
  animation: slot-in .22s var(--ease);
}
.drop-placeholder.leaving { animation: slot-out .24s var(--ease) forwards; }
@keyframes slot-in { from { scale: .88; opacity: 0; } }
@keyframes slot-out { to { scale: .88; opacity: 0; } }

/* USUWANIE KOSZEM (poprawka 23.09.2026 - "ma być dynamiczniej"): kafel
   najpierw lekko WYCHODZI DO PRZODU (do 108%, szybko i miękko), a potem
   ucieka zoomem do zera z mocnym przyspieszeniem - jak w iOS przy usuwaniu
   ikony. Krzywa jest ustawiona osobno dla każdego odcinka klatek kluczowych.
   Reguła stoi ZA .jiggling celowo - w trybie edycji kafel dygocze, a przy
   równej specyficzności wygrywa późniejsza reguła. `scale`, nie `transform`
   - transform należy do sprężyny z JS. Czas = CARD_OUT_MS w app.js. */
.pictogram-card.removing {
  animation: card-out .42s forwards;
  pointer-events: none;
}
@keyframes card-out {
  0%   { scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  28%  { scale: 1.08; opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  100% { scale: 0; opacity: 0; }
}

/* --- pusta kategoria --- */

.empty-state {
  grid-column: 1 / -1;
  min-height: calc(420 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  text-align: center;
  color: var(--ink-2);
  padding: calc(40 * var(--u));
}
.empty-state .material-symbols-rounded { font-size: calc(120 * var(--u)); }
.empty-state-ico { width: calc(150 * var(--u)); height: auto; opacity: .5; }
.empty-state p {
  margin: 0;
  max-width: calc(900 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: 1.4;
}


/* =====================================================================
   KLAWIATURA (kategoria "Litery")
   ===================================================================== */

/* EKRAN KLAWIATURY 1:1 z Figmy (plik Landing_Page_New, ramka "mimi_keyboard",
   node 11510:400). Ramka ma 2360 x 1640, aplikacja liczy w 2000 x 1390, więc
   każda liczba poniżej to wymiar z Figmy x 0,8475 (2000 / 2360):
     krzyżyk             ⌀116, od lewej 74 (w miejscu logo i zębatki)
     pole mowy           od 250 - 60 za krzyżykiem; przyciski bez zmian
     pisane słowo        środek na 371, napis 159 (Nunito Black, WIELKIE)
     podpowiedź          pastylka 93 wys., góra 489, #A2FFA8, napis 43
     biały panel         od 536 do samego dołu, na CAŁĄ szerokość ekranu,
                         górne rogi 85
     klawisz             156 x 150, rogi 28, litera 56, tło #EFEFEF
     odstępy             19,5 między klawiszami, 33,4 między rzędami,
                         pierwszy rząd 82 pod górną krawędzią panelu
     szersze klawisze    backspace 201 · 123 212 · spacja 685 · Enter 384
                         (napisy 45, Enter zielony z białym napisem)
   Wciśnięty klawisz: czarne tło i biała litera (klawisz "D" w projekcie). */

.keyboard-root {
  min-height: 100%;
}

/* --- tryb klawiatury: znika pasek kategorii, logo i zębatka --- */

.kbd-close { display: none; }
:root[data-kbd] .logo-btn,
:root[data-kbd] .gear-btn,
:root[data-kbd] .rail { display: none; }
:root[data-kbd] .kbd-close,
:root[data-learn] .kbd-close {
  flex: 0 0 auto;
  display: block;
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
  margin-left: calc(12 * var(--u));
  border-radius: 50%;
  transition: transform .22s var(--bounce);
}
.kbd-close svg { display: block; width: 100%; height: 100%; }
/* W ćwiczeniu Nauki krzyżyk zamienia się w strzałkę w lewo ("wróć do
   planszy Sylab"): krzyżyk obraca się i znika, strzałka wjeżdża obrotem. */
.kbd-close .kc-x,
.kbd-close .kc-arrow {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.32, .72, 0, 1), opacity .25s ease;
}
.kbd-close .kc-arrow { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-learn-back] .kbd-close .kc-x { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-learn-back] .kbd-close .kc-arrow { opacity: 1; transform: none; }
.kbd-close:active { transform: scale(.94); }
:root[data-kbd] .saybar { margin-left: calc(60 * var(--u)); }

/* Plansza przestaje być białym panelem z paddingiem - klawiatura rysuje się
   bezpośrednio na całej powierzchni aplikacji (.app jest jej układem
   odniesienia, stąd position: static po drodze). */
:root[data-kbd] .stage,
:root[data-kbd] .board { position: static; }
:root[data-kbd] .board {
  background: none;
  padding: 0;
  overflow: visible;
}
:root[data-kbd] .keyboard-root {
  position: absolute;
  inset: 0;
  pointer-events: none; /* pasek górny pod spodem zostaje klikalny */
}
:root[data-kbd] .keyboard-root > * { pointer-events: auto; }

.kbd-display {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(260 * var(--u));
  height: calc(221 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  /* 25.09.2026: +30% względem makiety (było 159) */
  font-size: calc(207 * var(--u) * var(--kbd-scale, 1));
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

/* Podpowiedź słownika: zielona pastylka po prawej w polu mowy (załącznik
   25.09.2026, zmierzony w skali 1492 px = 2000 u i dopasowany do naszego
   niższego pola 139 u). Dotknięcie wstawia gotowe słowo z piktogramem. */
.letter-suggestion {
  flex: 0 0 auto;
  height: calc(80 * var(--u));
  margin: 0 calc(44 * var(--u)) 0 calc(16 * var(--u));
  padding: 0 calc(52 * var(--u)) 0 calc(34 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  border-radius: var(--r-pill);
  background: #A2FFA8;
  color: #000000;
  font-size: calc(40 * var(--u));
  font-weight: 900;
  white-space: nowrap;
  animation: suggest-in .34s var(--bounce);
  transition: transform .18s var(--bounce);
}
.letter-suggestion:active { transform: scale(.94); }

/* Podpowiedź następnego obrazka (zdania.js, 03.10.2026): po prawej w polu
   mowy 2-3 małe pastylki w jaśniejszym kolorze kategorii, z przerywaną
   obwódką - widać, że to propozycja, a nie słowo w zdaniu. Dotknięcie
   dokłada słowo jak kafel. */
.next-hints {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-right: calc(30 * var(--u));
  padding-left: calc(18 * var(--u));
  border-left: calc(3 * var(--u)) solid var(--line);
  overflow: hidden;
}
.next-hints[hidden] { display: none; }
.next-hint {
  flex: 0 0 auto;
  height: calc(84 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(12 * var(--u));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chip-color) 30%, var(--surface));
  outline: calc(3 * var(--u)) dashed color-mix(in srgb, var(--chip-color) 85%, #000000 15%);
  outline-offset: calc(-3 * var(--u));
  color: var(--ink);
  font-size: calc(26 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  animation: suggest-in .34s var(--bounce) var(--d, 0ms) both;
  transition: transform .18s var(--bounce);
}
.next-hint:active { transform: scale(.92); }
.next-hint img { width: calc(58 * var(--u)); height: calc(58 * var(--u)); object-fit: contain; }
:root[data-phone] .next-hint { height: calc(70 * var(--u)); font-size: calc(22 * var(--u)); }
:root[data-phone] .next-hint img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.letter-suggestion[hidden] { display: none; }
.letter-suggestion b { font-weight: 900; }
.kbd-sparkle { width: calc(37 * var(--u)); height: calc(37 * var(--u)); flex: none; }
@keyframes suggest-in {
  from { transform: scale(.85); opacity: 0; }
}

.kbd {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(536 * var(--u));
  bottom: 0;
  background: var(--surface);
  border-radius: calc(85 * var(--u)) calc(85 * var(--u)) 0 0;
  padding-top: calc(82 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(33.4 * var(--u));
}
.kbd-row {
  display: flex;
  gap: calc(19.5 * var(--u));
  justify-content: center;
}
.kbd-key {
  position: relative;
  flex: 0 0 auto;
  width: calc(156 * var(--u));
  height: calc(150 * var(--u));
  border-radius: calc(28 * var(--u));
  background: var(--key);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* czarne podświetlenie to warstwa POD napisem - litera zostaje widoczna i
   tylko zmienia kolor na biały */
.kbd-key::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity .28s ease;
}
.kbd-key.is-pressed::before { opacity: 1; transition: none; }
.kbd-glyph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(56 * var(--u));
  font-weight: 900;
  letter-spacing: -.01em;
  transition: color .28s ease;
}
.kbd-key.is-pressed .kbd-glyph { color: var(--surface); transition: none; }
.kbd-ico { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.kbd-key.wide { width: calc(201 * var(--u)); }
.kbd-key.k-num { width: calc(212 * var(--u)); }
.kbd-key.k-space { width: calc(685 * var(--u)); }
.kbd-key.k-enter { width: calc(384 * var(--u)); background: var(--go); }
.kbd-key.k-num .kbd-glyph,
.kbd-key.k-space .kbd-glyph,
.kbd-key.k-enter .kbd-glyph { font-size: calc(45 * var(--u)); }
.kbd-key.k-enter .kbd-glyph { color: #FFFFFF; }
/* Polskie znaki dalej są pod przytrzymaniem klawisza (a -> ą ...), ale bez
   podpisu w rogu - projekt pokazuje czyste klawisze z jedną literą. */

/* --- WEJŚCIE I WYJŚCIE EKRANU KLAWIATURY (w stylu iOS, patrz
   playKbdEntrance w app.js) ---
   --ios-sheet to krzywa, której Apple używa dla wysuwanych paneli i
   klawiatury: bardzo szybki start i długie, miękkie dojście. Klawisze mają
   osobny, lekko sprężysty przelot. Ruch na właściwościach `translate` /
   `scale` / `rotate`, żeby nie gryzł się z niczym, co pisze `transform`. */
:root {
  --ios-sheet: cubic-bezier(.32, .72, 0, 1);
  --ios-spring: var(--spring-bouncy);
}
:root[data-kbd-in] .kbd { animation: kbd-sheet-in .62s var(--ios-sheet) both; }
@keyframes kbd-sheet-in { from { translate: 0 100%; } }

:root[data-kbd-in] .kbd-key {
  animation: kbd-key-in .52s var(--ios-spring) both;
  animation-delay: var(--kd, 0ms);
}
@keyframes kbd-key-in {
  from { opacity: 0; translate: 0 calc(70 * var(--u)); scale: .86; }
}

:root[data-kbd-in] .kbd-close { animation: kbd-close-in .5s cubic-bezier(.34, 1.4, .64, 1) .06s both; }
@keyframes kbd-close-in { from { opacity: 0; scale: .3; rotate: -90deg; } }

/* pole mowy "wydłuża się" w lewo na miejsce po logo i zębatce (136 = o tyle
   wcześniej zaczyna się pastylka na ekranie klawiatury) */
:root[data-kbd-in] .say-field { animation: kbd-strip-grow .56s var(--ios-sheet) both; }
@keyframes kbd-strip-grow {
  from { clip-path: inset(0 0 0 calc(136 * var(--u)) round calc(82 * var(--u))); }
  to   { clip-path: inset(0 0 0 0 round calc(82 * var(--u))); }
}

/* litery <-> cyfry: klawisze przelewają się krótką falą */
.kbd.kbd-swap .kbd-key {
  animation: kbd-key-swap .32s var(--ios-spring) both;
  animation-delay: var(--kd, 0ms);
}
@keyframes kbd-key-swap { from { opacity: 0; scale: .8; } }

/* zamknięcie: panel zjeżdża w dół, krzyżyk się zwija, napisy gasną */
:root[data-kbd-out] .kbd { animation: kbd-sheet-out .33s cubic-bezier(.4, 0, .9, .6) forwards; }
@keyframes kbd-sheet-out { to { translate: 0 100%; } }
:root[data-kbd-out] .kbd-close { animation: kbd-close-out .26s ease-in forwards; }
@keyframes kbd-close-out { to { opacity: 0; scale: .3; rotate: -90deg; } }
:root[data-kbd-out] .kbd-display,
:root[data-kbd-out] .letter-suggestion { animation: kbd-fade-out .22s ease-in forwards; }
@keyframes kbd-fade-out { to { opacity: 0; } }

/* po powrocie logo i zębatka wyskakują na swoje miejsce */
:root[data-kbd-back] .logo-btn,
:root[data-kbd-back] .gear-btn { animation: kbd-back-pop .46s var(--ios-spring) both; }
@keyframes kbd-back-pop { from { opacity: 0; scale: .4; } }
/* ...a pole mowy płynnie kurczy się z lewej (odwrotność kbd-strip-grow):
   zaczyna tam, gdzie leżało na klawiaturze, i przesuwa lewą krawędź na
   swoje miejsce obok logo i zębatki, zamiast przeskakiwać */
:root[data-kbd-back] .say-field { animation: kbd-strip-shrink .56s var(--ios-sheet) both; }
@keyframes kbd-strip-shrink { from { margin-left: calc(-136 * var(--u)); } }
:root[data-kbd-back] .logo-btn { animation-delay: .12s; }
:root[data-kbd-back] .gear-btn { animation-delay: .17s; }

@media (prefers-reduced-motion: reduce) {
  :root[data-kbd-in] *, :root[data-kbd-out] *, :root[data-kbd-back] *, .kbd.kbd-swap * {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}


/* =====================================================================
   NAUKA
   ===================================================================== */

.learn-root { min-height: 100%; }

/* MENU NAUKI 1:1 z Figmy: 3 x 2 białe kafle 415 x 394 (rogi 64) na szarym
   tle, odstępy 57 w poziomie i 65 w pionie, siatka wyśrodkowana, pierwszy
   rząd na 331 od góry ekranu. W kaflu: obrazek w polu 236 wys. (25 od góry),
   szara pastylka z podpisem 368 x 101, 26 od dołu. */
:root[data-learn-menu] .board {
  background: none;
  padding: calc(80.4 * var(--u)) 0 0;
  /* plansza jest tu przezroczysta, a jej zaokrąglenie (76u) i tak przycinało
     narożniki kart przy dolnych rogach (Memory: róg karty ma tylko 48u -
     zielona obwódka pary była ucięta, zrzut rodzica 25.09.2026) */
  border-radius: 0;
}
.learn-menu {
  display: grid;
  grid-template-columns: repeat(3, calc(415.3 * var(--u)));
  justify-content: center;
  column-gap: calc(56.8 * var(--u));
  row-gap: calc(65.3 * var(--u));
}
.learn-card {
  position: relative;
  aspect-ratio: 490 / 465;
  border-radius: calc(64.3 * var(--u));
  background: var(--surface);
  transition: transform .22s var(--bounce);
}
.learn-card:active { transform: scale(.95); }
.learn-card-art {
  position: absolute;
  top: calc(25.4 * var(--u));
  left: 0;
  right: 0;
  height: calc(235.6 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.learn-card-art svg { display: block; height: auto; overflow: visible; }
.learn-card-art img { height: 100%; width: auto; object-fit: contain; }
/* szerokości obrazków = ich obrys w Figmie */
.learn-card[data-art="sylaby"] svg { width: calc(299 * var(--u)); }
.learn-card[data-art="figury"] svg { width: calc(190 * var(--u)); }
.learn-card[data-art="balonik"] svg { width: calc(170 * var(--u)); }
.learn-card[data-art="kolko"] svg { width: calc(242 * var(--u)); }
.learn-card[data-art="memory"] svg { width: calc(314 * var(--u)); }
.learn-card-label {
  position: absolute;
  left: calc(23.5 * var(--u));
  right: calc(23.5 * var(--u));
  bottom: calc(26.3 * var(--u));
  height: calc(100.9 * var(--u));
  border-radius: var(--r-pill);
  background: var(--learn-pill);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(38.1 * var(--u));
  font-weight: 900;
}

.learn-pane {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  min-height: 100%;
}
.learn-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
}
.learn-board-head h2 {
  margin: 0;
  font-size: calc(42 * var(--u));
  font-weight: 900;
}

.learn-board {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(420 * var(--u)), 1fr));
  gap: calc(26 * var(--u));
  align-content: start;
}
.learn-word-card {
  min-height: calc(150 * var(--u));
  border-radius: var(--r-card);
  background: var(--cat-color, #A5E4DB);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  padding: calc(22 * var(--u));
  transition: transform .22s var(--bounce);
}
.learn-word-card:active { transform: scale(.97); }
.syllable-pill {
  padding: calc(10 * var(--u)) calc(26 * var(--u));
  border-radius: var(--r-pill);
  background: var(--pill-color, #FFFFFF);
  color: var(--pill-ink, #14181C);
  font-size: calc(44 * var(--u));
  font-weight: 900;
  text-transform: uppercase;
  transition: transform .18s ease, background .18s ease;
}
.syllable-pill.active { background: var(--ink); color: var(--surface); transform: scale(1.08); }
.learn-word-card { position: relative; }
/* złota gwiazdka za przećwiczony kafel */
.learn-card-star {
  position: absolute;
  top: calc(-14 * var(--u));
  right: calc(-14 * var(--u));
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  opacity: 0;
  scale: .3;
  transition: opacity .2s ease, scale .45s var(--bounce);
  filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .08));
}
.learn-card-star svg, .learn-progress-star svg { display: block; width: 100%; height: 100%; }
.learn-word-card.is-practiced .learn-card-star { opacity: 1; scale: 1; }
.learn-word-card.just-practiced .learn-card-star { animation: star-spin .6s var(--bounce); }
@keyframes star-spin { from { rotate: -120deg; } }
.learn-progress {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-left: auto;
  padding: calc(10 * var(--u)) calc(26 * var(--u));
  border-radius: var(--r-pill);
  background: var(--line);
  font-size: calc(30 * var(--u));
  font-weight: 800;
}
.learn-progress b { font-size: calc(38 * var(--u)); font-weight: 900; }
.learn-progress-star { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.learn-empty { grid-column: 1 / -1; }

/* --- Balonik --- */

.balloon-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(700 * var(--u));
  border-radius: var(--r-card);
  background: var(--line);
  overflow: hidden;
}
/* pasek celu: 10 małych baloników u góry, przebite dostają swój kolor */
.balloon-goal {
  position: absolute;
  top: calc(26 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(30 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
}
.balloon-slot { display: block; width: calc(34 * var(--u)); }
.balloon-slot svg { display: block; width: 100%; height: auto; }
.balloon-slot.is-filled { animation: slot-fill .5s var(--ios-spring, var(--bounce)); }
@keyframes slot-fill {
  0% { scale: 1; }
  40% { scale: 1.45; }
  100% { scale: 1; }
}
.balloon {
  position: absolute;
  left: var(--x);
  bottom: calc(-320 * var(--u));
  /* proporcje z szablonu balonik.svg: 137 x 241 */
  width: calc(165 * var(--u) * var(--size, 1));
  transform: translateX(-50%);
  animation: balloon-rise var(--rise, 8s) linear forwards;
}
/* po dziesiątym przebitym pozostałe baloniki szybko odlatują */
.balloon.is-away { animation-duration: 1.2s; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
.balloon svg { width: 100%; height: auto; }
.balloon.is-pop { animation: balloon-pop .18s ease forwards; }
/* 1600 jednostek projektu to więcej niż najwyższa możliwa plansza, więc balon
   zawsze wylatuje górą poza kadr. Świadomie nie vh: przy pionowo trzymanym
   tablecie cały dokument jest obrócony i vh znaczy wtedy KRÓTSZY bok ekranu,
   czyli za mało. */
@keyframes balloon-rise {
  from { transform: translate(-50%, 0); }
  to   { transform: translate(calc(-50% + var(--sway, 0px)), calc(-1600 * var(--u))); }
}
@keyframes balloon-pop {
  to { transform: translateX(-50%) scale(1.5); opacity: 0; }
}
.balloon-burst {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.balloon-burst i {
  position: absolute;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--balloon-color, #FF5A54);
  animation: shard .6s ease-out forwards;
  transform: rotate(var(--a));
}
@keyframes shard {
  to { transform: rotate(var(--a)) translateX(var(--d)); opacity: 0; }
}
/* numer przebitego balonika - dziecko widzi cyfrę, którą słyszy */
.balloon-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(150 * var(--u));
  font-weight: 900;
  line-height: 1;
  color: var(--balloon-color, #FF4648);
  -webkit-text-stroke: calc(8 * var(--u)) var(--surface);
  paint-order: stroke fill;
  animation: bam .85s ease-out forwards;
  white-space: nowrap;
}
@keyframes bam {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(1); opacity: 0; }
}

/* --- Kółko i krzyżyk --- */

.ttt-status {
  margin: 0;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  color: var(--ink-2);
  text-align: center;
}
.ttt-grid {
  width: min(100%, calc(820 * var(--u)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--u));
}
.ttt-cell {
  aspect-ratio: 1;
  border-radius: var(--r-card);
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ttt-cell.is-win { background: var(--cat-color, #A5E4DB); animation: ttt-win .6s var(--bounce) both; }
@keyframes ttt-win { 40% { scale: 1.06; } }
/* tablica wyników: Ty : Tablet */
.ttt-score {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: calc(12 * var(--u)) calc(30 * var(--u));
  border-radius: var(--r-pill);
  background: var(--line);
  font-size: calc(30 * var(--u));
  font-weight: 800;
}
.ttt-score-side { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.ttt-score b { font-size: calc(40 * var(--u)); font-weight: 900; }
.ttt-score-sep { font-weight: 900; color: var(--ink-2); }
.ttt-mini { display: inline-block; width: calc(30 * var(--u)); height: calc(30 * var(--u)); position: relative; }
.ttt-mini-o { border: calc(6 * var(--u)) solid var(--go); border-radius: 50%; }
.ttt-mini-x::before, .ttt-mini-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--danger);
}
.ttt-mini-x::before { transform: translateY(-50%) rotate(45deg); }
.ttt-mini-x::after { transform: translateY(-50%) rotate(-45deg); }
/* "Tablet myśli…" - trzy kropki jak w iMessage */
.ttt-dots { display: inline-flex; gap: calc(6 * var(--u)); margin-left: calc(10 * var(--u)); }
.ttt-dots i {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: currentColor;
  animation: ttt-dot 1s ease-in-out infinite;
}
.ttt-dots i:nth-child(2) { animation-delay: .15s; }
.ttt-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ttt-dot { 0%, 60%, 100% { opacity: .25; translate: 0 0; } 30% { opacity: 1; translate: 0 calc(-6 * var(--u)); } }
/* po przegranej przycisk "Nowa gra" delikatnie zaprasza do kolejnej partii */
.btn-inline.is-nudge { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.ttt-mark { display: block; width: 52%; height: 52%; position: relative; }
.ttt-o { border: calc(16 * var(--u)) solid var(--go); border-radius: 50%; }
.ttt-x::before, .ttt-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--danger);
}
.ttt-x::before { transform: translateY(-50%) rotate(45deg); }
.ttt-x::after { transform: translateY(-50%) rotate(-45deg); }
.ttt-mark.is-new { animation: mark-in .3s var(--bounce-in); }
@keyframes mark-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --- Dopasuj kształty --- */

.dragdrop-stage {
  position: relative; /* kotwica dla ekranu "Brawo!" (.dragdrop-celebrate) */
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: calc(30 * var(--u));
  min-height: calc(640 * var(--u));
}
.dragdrop-col {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 * var(--u));
  align-content: center;
}
.dragdrop-divider { width: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--line); }
.dragdrop-source-tile,
.dragdrop-target {
  aspect-ratio: 1;
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragdrop-source-tile { background: var(--line); }
.dragdrop-source-tile svg, .dragdrop-target svg { width: 70%; height: 70%; }
.dragdrop-source-tile.dragging {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  transform: scale(1.08);
}
.dragdrop-source-tile.placed { opacity: 0; pointer-events: none; }
.dragdrop-target { position: relative; background: transparent; color: var(--ink-2); }
/* kształt trzymany nad właściwym obrysem - obrys się rozjaśnia */
.dragdrop-target.hover { background: var(--line); }
.dragdrop-target.filled { color: inherit; }
.dragdrop-target.just-filled svg { animation: shape-land .5s var(--bounce); }
@keyframes shape-land { 0% { scale: .6; } 60% { scale: 1.12; } 100% { scale: 1; } }
/* kształt puszczony nad złym obrysem - krótkie "nie tutaj" */
.dragdrop-target.wrong { animation: too-short .32s ease; }
/* zielony ptaszek po trafieniu */
.fill-check {
  position: absolute;
  right: calc(10 * var(--u));
  top: calc(10 * var(--u));
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  background: var(--go);
  animation: fav-pop .34s cubic-bezier(.34, 1.4, .64, 1);
}
.fill-check::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 20%;
  width: 28%;
  height: 50%;
  border: calc(6 * var(--u)) solid #FFFFFF;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
/* --- Memory --- */

.memory-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--u));
  justify-content: center;
}
.memory-stage { position: relative; flex: 1 1 auto; }
.memory-grid {
  display: grid;
  grid-template-columns: repeat(var(--mem-cols, 6), minmax(0, 1fr));
  gap: calc(20 * var(--u));
}
.memory-grid[data-cols="3"] { --mem-cols: 3; }
.memory-grid[data-cols="4"] { --mem-cols: 4; }
.memory-grid[data-cols="6"] { --mem-cols: 6; }
.memory-card { aspect-ratio: 1; perspective: 1000px; }
.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .44s var(--ease);
  transform-style: preserve-3d;
}
.memory-card.flipped .memory-card-inner { transform: rotateY(180deg); }
.memory-card.matched { animation: pair-found .6s var(--bounce); }
.memory-card.matched .memory-face-front { box-shadow: inset 0 0 0 calc(8 * var(--u)) var(--go); }
@keyframes pair-found { 40% { scale: 1.1; } }
.memory-moves {
  width: max-content;
  margin: 0 auto calc(20 * var(--u));
  padding: calc(10 * var(--u)) calc(28 * var(--u));
  border-radius: var(--r-pill);
  background: var(--line);
  font-size: calc(30 * var(--u));
  font-weight: 800;
}
.memory-moves b { font-weight: 900; }
.memory-face {
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  font-size: calc(64 * var(--u));
  font-weight: 900;
  text-transform: uppercase;
}
.memory-face-back { background: var(--cat-color, #A5E4DB); color: #14181C; }
.memory-face-back .material-symbols-rounded { font-size: calc(72 * var(--u)); }
.memory-face-front {
  background: var(--line);
  transform: rotateY(180deg);
}
.memory-face-front img { width: 100%; height: 100%; object-fit: cover; }
.memory-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--u));
  text-align: center;
  color: var(--ink-2);
  padding: calc(40 * var(--u));
}
.memory-note .material-symbols-rounded { font-size: calc(110 * var(--u)); }
.memory-note p { margin: 0; font-size: calc(30 * var(--u)); max-width: calc(900 * var(--u)); }


/* --- SCENA WYGRANEJ (rewards.js, projekt użytkownika 23.09.2026) ---
   Leży nad CAŁĄ aplikacją. Scena ma stały układ 2000 x 1390 jednostek
   (--u), wyśrodkowany - pozycje każdego elementu (--l/--t/--w/--h) wpisuje
   rewards.js z plików wygrana_1.svg i wygrana_2.svg.
   Tu jest tylko UKŁAD - cały ruch (sprężyny, skok łukiem, squash &
   stretch, wyjście) liczy i puszcza rewards.js przez Web Animations API. */
.win {
  position: absolute;
  inset: 0;
  z-index: 75;
  overflow: hidden;
  background: #F3F1ED;
  animation: win-fade .25s ease both;
}
:root[data-theme="dark"] .win { background: var(--bg); }
@keyframes win-fade { from { opacity: 0; } }
.win-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(2000 * var(--u));
  height: calc(1390 * var(--u));
  translate: -50% -50%;
}
.win-el {
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.win-art { display: block; width: 100%; height: 100%; overflow: visible; }

/* Apla i ludzik z apli są narysowane od początku (schowane przez
   rewards.js pod ekranem / w przezroczystości) - bez visibility:hidden,
   bo wtedy Safari rysowałby je dopiero w klatce skoku (przycięcie). */
/* bez pierwszej części (brak animacji) - od razu gotowa apla */
.win:not(.is-s1) .win-mimi1, .win:not(.is-s1) .win-star, .win:not(.is-s1) .win-bubble { visibility: hidden; }

/* punkty obrotu = środek kształtu ludzika (z nich liczony jest skok),
   dół kształtu (przysiad), ogonek dymka, spód apli */
.win-mimi1 { transform-origin: 50.26% 44.02%; }
.win-mimi2 { transform-origin: 50% 89.7%; z-index: 1; }
.win-bubble { transform-origin: .4% 98.6%; }
.win-box { transform-origin: 50% 100%; }
.win-el { will-change: transform, opacity; }

.win-praise {
  position: absolute;
  left: calc(2.6 * var(--u));
  top: calc(3.5 * var(--u));
  width: calc(617 * var(--u));
  height: calc(279 * var(--u));
  margin: 0;
  /* równe marginesy w dymku przy każdym tekście (03.10.2026): z boków ok.
     2/3 promienia zaokrąglenia dymku, góra = dół; fitPraise zmniejsza
     czcionkę, aż tekst zmieści się w tym polu */
  padding: calc(34 * var(--u)) calc(60 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #000000; /* 25.09.2026: dymek biały, tekst czarny */
  font-size: calc(62 * var(--u));
  font-weight: 900;
  line-height: 1.04;
  text-align: center;
}
/* wiersz nigdy się nie łamie - "Świetnie, Michał!" zostaje razem */
.win-line { display: block; width: max-content; white-space: nowrap; }
/* imię zaznaczone żółtym "markerem" pod czarnym tekstem */
.win-name {
  color: #000000;
  /* Żółta apla to osobna warstwa (::before) z jawnymi odstępami - bez
     inline-block z ciasnym line-height, który w Safari na iPadzie rozjeżdżał
     napis względem boxa (26.09.2026). Uwagi rodzica mierzone na zrzucie iPada
     (2x): po bokach +4 px (.16em + 8px), w pionie box 7 px niższy u góry
     i u dołu niż napis (było 4); wysokość wiersza bez zmian. */
  position: relative;
  z-index: 0;
  padding: 0 calc(.16em + 8px);
  /* żółty box razem z imieniem 6 px bliżej poprzedniego słowa (uwagi rodzica
     26.09.2026). Ujemny margines, nie przesunięcie - szerokość wiersza maleje
     razem z nim, więc wiersz zostaje wyśrodkowany w dymku (03.10.2026) */
  margin-left: -6px;
}
.win-name::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 7px;
  bottom: 7px;
  background: #FFB100; /* ten sam żółty co buźka Mimi */
  border-radius: .18em;
}
.win.is-s1 .win-line { animation: win-line-in .42s cubic-bezier(.2,.8,.3,1) calc(.82s + var(--i) * .1s) both; }
@keyframes win-line-in { from { opacity: 0; translate: 0 calc(26 * var(--u)); } }

/* box wskakuje z dołu z odbiciem */
.win-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(53 * var(--u));
  padding-bottom: calc(13 * var(--u)); /* pastylka 81 od góry, przyciski 94 od dołu */
  border-radius: calc(66 * var(--u));
  background: var(--surface);
}
.win-detail {
  /* JEDEN wiersz: pastylka rośnie do szerokości apli, a gdy i to za mało,
     fitDetail() w rewards.js zmniejsza czcionkę (dłuższe teksty zadań
     wychodziły poza pastylkę) */
  box-sizing: border-box;
  min-width: calc(589 * var(--u));
  max-width: calc(860 * var(--u));
  height: calc(129 * var(--u));
  margin: 0;
  padding: 0 calc(56 * var(--u));
  border-radius: var(--r-pill);
  background: #A9FFF3;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: calc(43 * var(--u));
  font-weight: 800;
}
.win-detail-text { display: inline-block; white-space: nowrap; }
.win-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 calc(91 * var(--u));
}
.win-btn {
  height: calc(105 * var(--u));
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
  font-size: calc(44 * var(--u));
  font-weight: 800;
  transition: transform .22s var(--bounce);
}
.win-btn:active { transform: scale(.95); }
.win-btn-main { width: calc(395 * var(--u)); background: var(--ink); color: var(--surface); }
.win-btn-alt { width: calc(310 * var(--u)); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 calc(5.8 * var(--u)) var(--ink); }
.win-ico { width: calc(44 * var(--u)); height: calc(45 * var(--u)); flex: 0 0 auto; }

/* =====================================================================
   NAKŁADKI: USTAWIENIA I OKNA
   ===================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 13, 16, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(60 * var(--u));
  backdrop-filter: blur(calc(6 * var(--u)));
  -webkit-backdrop-filter: blur(calc(6 * var(--u)));
}

/* Okna wjeżdżają tą samą krzywą co kafle - żeby cała aplikacja "chodziła"
   jednakowo, a nie każdy element po swojemu. */
.overlay { animation: overlay-in .22s ease; }
@keyframes overlay-in { from { opacity: 0; } }
.modal-card { animation: panel-in .42s var(--spring-smooth); }
/* okienko jak alert w iOS: lekko "opada" z 1.08 do właściwej wielkości */
@keyframes panel-in {
  from { transform: scale(1.08); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.icon-btn {
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  border-radius: 50%;
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn .material-symbols-rounded { font-size: calc(46 * var(--u)); }

.setting-tile-foot {
  display: flex;
  justify-content: space-between;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  color: var(--ink-2);
}
.setting-hint {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-2);
}
.voice-diag {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: calc(20 * var(--u));
  word-break: break-word;
}

/* --- przełącznik --- */

.switch {
  width: calc(128 * var(--u));
  height: calc(70 * var(--u));
  border-radius: var(--r-pill);
  background: var(--line);
  padding: calc(6 * var(--u));
  display: flex;
  transition: background .18s ease;
}
.switch[aria-checked="true"] { background: var(--go); }
.switch-knob {
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .24s var(--bounce);
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(calc(58 * var(--u))); }
.switch-knob .material-symbols-rounded { font-size: calc(34 * var(--u)); color: #14181C; }

/* --- segmenty (M / L / XL itd.) --- */

.segmented {
  display: flex;
  gap: calc(8 * var(--u));
  background: var(--line);
  border-radius: var(--r-pill);
  padding: calc(6 * var(--u));
}
.segmented button {
  flex: 1 1 0;
  min-width: 0;
  height: calc(64 * var(--u));
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 800;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.segmented button.active { background: var(--surface); color: var(--ink); }
.segmented .material-symbols-rounded { font-size: calc(30 * var(--u)); }
/* zastępnik ikony tam, gdzie font Material Symbols nie ma glifu na literę
   (tryb "Literki" w grze Memory) */
.cat-glyph { font-size: calc(30 * var(--u)); font-weight: 900; }

/* --- suwak --- */

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(16 * var(--u));
  border-radius: var(--r-pill);
  background: var(--line);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  background: var(--ink);
  border: calc(6 * var(--u)) solid var(--surface);
}

/* --- przyciski w panelu --- */

.btn-inline,
.btn-reset,
.btn-cancel,
.btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  height: calc(76 * var(--u));
  padding: 0 calc(28 * var(--u));
  border-radius: var(--r-pill);
  font-size: calc(26 * var(--u));
  font-weight: 800;
  background: var(--line);
  color: var(--ink);
  transition: transform .22s var(--bounce);
}
.btn-inline:active, .btn-reset:active,
.btn-cancel:active, .btn-confirm:active { transform: scale(.94); }
.btn-inline .material-symbols-rounded { font-size: calc(32 * var(--u)); }
.btn-reset { background: var(--danger); color: #FFFFFF; }
.btn-confirm { background: var(--go); color: #FFFFFF; }
.btn-confirm:disabled { opacity: .35; }
/* "Zapisz" czeka jeszcze na podpis/zdjęcie: wygląda na nieaktywny, ale
   REAGUJE - po dotknięciu mówi wprost, czego brakuje (patrz whatIsMissing) */
.btn-confirm.is-waiting { background: var(--line); color: var(--ink-2); }
.tile-actions { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); }

/* --- wybór głosu --- */

.voice-list { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); }
.voice-row { flex: 1 1 calc(300 * var(--u)); }
.voice-btn {
  width: 100%;
  min-height: calc(92 * var(--u));
  padding: calc(14 * var(--u)) calc(22 * var(--u));
  border-radius: var(--r-card);
  background: var(--line);
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  text-align: left;
}
.voice-btn.active { background: var(--go); color: #FFFFFF; }
.voice-btn .material-symbols-rounded { font-size: calc(40 * var(--u)); }
.voice-btn-text { display: flex; flex-direction: column; font-size: calc(28 * var(--u)); font-weight: 800; }
.voice-btn-text small { font-size: calc(20 * var(--u)); font-weight: 600; opacity: .8; }

/* =====================================================================
   USTAWIENIA - PEŁNY EKRAN JAK W iPadOS (projekt 23.09.2026)
   =====================================================================
   Wymiary z makiety (1246 x 860 px -> jednostki 2000 x 1390, x1,605):
   lewa kolumna 624 szer., od krawędzi 55 / 51 góra / 55 dół; odstęp 66;
   prawa kolumna do 66 od prawej, biała karta od 183 od góry; promień 45;
   tytuł 58, "Gotowe" 202 x 72 w zieleni przycisku MÓW.
   Kontrolki jak w projekcie kafli ustawień: szare pola, CIEMNE zaznaczenie
   (segmenty, pozycja listy), ciemna gałka przełącznika - po włączeniu tor
   robi się zielony, a gałka biała.
   Ruch: krzywa iOS cubic-bezier(.32,.72,0,1) - ekran wjeżdża od dołu jak
   arkusz, pastylka zaznaczenia przejeżdża po liście, strona wsuwa się z
   boku, tytuł wymienia się przenikaniem. */

.settings-screen {
  padding: 0;
  display: block;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.settings-screen .settings-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(624 * var(--u)) minmax(0, 1fr);
  gap: calc(66 * var(--u));
  padding: calc(51 * var(--u)) calc(66 * var(--u)) calc(55 * var(--u)) calc(55 * var(--u));
  background: var(--bg);
  animation: sheet-in var(--t-smooth) var(--spring-smooth) both;
  will-change: transform;
}
.settings-screen.is-closing .settings-panel {
  animation: sheet-out .38s cubic-bezier(.4, 0, .9, .6) both;
}
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes sheet-out {
  from { transform: none; }
  to   { transform: translateY(100%); }
}

/* ---------- lewa kolumna ---------- */

.settings-side {
  min-height: 0;
  background: var(--surface);
  border-radius: calc(45 * var(--u));
  padding: calc(36 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));
  display: flex;
  flex-direction: column;
}
.side-head {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: 0 calc(12 * var(--u)) calc(34 * var(--u));
}
.side-avatar {
  width: calc(92 * var(--u));
  height: calc(92 * var(--u));
  border-radius: calc(26 * var(--u));
  flex: 0 0 auto;
}
.side-head h2 { margin: 0; font-size: calc(42 * var(--u)); font-weight: 900; line-height: 1.1; }
.side-head p { margin: calc(4 * var(--u)) 0 0; font-size: calc(22 * var(--u)); font-weight: 700; color: var(--ink-2); }

.side-nav {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}
/* ciemna pastylka zaznaczenia - jedna, przejeżdża pod dotkniętą pozycję */
.side-nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(92 * var(--u));
  border-radius: calc(28 * var(--u));
  background: var(--ink);
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), height .5s cubic-bezier(.32, .72, 0, 1);
  pointer-events: none;
}
.side-nav-pill.no-anim { transition: none; }
.side-item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  height: calc(92 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(28 * var(--u));
  text-align: left;
  font-size: calc(29 * var(--u));
  font-weight: 800;
  color: var(--ink);
  transition: color .3s ease, transform .22s var(--bounce);
}
.side-item:active { transform: scale(.97); }
.side-ico {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .3s ease;
}
.side-ico .material-symbols-rounded { font-size: calc(34 * var(--u)); }
.side-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-chev {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-right: calc(14 * var(--u));
  border-top: calc(5 * var(--u)) solid currentColor;
  border-right: calc(5 * var(--u)) solid currentColor;
  border-radius: calc(2 * var(--u));
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .3s ease;
}
.side-item.active { color: var(--surface); }
.side-item.active .side-ico { background: color-mix(in srgb, var(--surface) 16%, transparent); }
.side-item.active .side-chev { opacity: .9; }

.side-foot {
  margin-top: calc(20 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(24 * var(--u)) calc(26 * var(--u));
  border-radius: calc(28 * var(--u));
  background: var(--bg);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  color: var(--ink-2);
}
.side-foot .material-symbols-rounded { font-size: calc(30 * var(--u)); }

/* ---------- prawa kolumna ---------- */

.settings-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.settings-main-head {
  flex: 0 0 calc(132 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(30 * var(--u));
}
.settings-titles h1 {
  margin: 0;
  font-size: calc(58 * var(--u));
  font-weight: 900;
  line-height: 1.05;
}
.settings-titles p {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(21 * var(--u));
  font-weight: 600;
}
.settings-titles.swap { animation: title-swap .36s cubic-bezier(.32, .72, 0, 1); }
@keyframes title-swap {
  from { opacity: 0; transform: translateY(calc(12 * var(--u))); }
  to   { opacity: 1; transform: none; }
}
.btn-done {
  flex: 0 0 auto;
  height: calc(72 * var(--u));
  min-width: calc(202 * var(--u));
  margin-top: calc(18 * var(--u));
  padding: 0 calc(44 * var(--u));
  border-radius: var(--r-pill);
  background: var(--say);
  color: #FFFFFF;
  font-size: calc(32 * var(--u));
  font-weight: 800;
  transition: transform .22s var(--bounce);
}
.btn-done:active { transform: scale(.94); }

.settings-card {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--surface);
  border-radius: calc(45 * var(--u));
  padding: calc(52 * var(--u)) calc(60 * var(--u));
}
.settings-page.enter-right { animation: page-in-right var(--t-smooth) var(--spring-smooth); }
.settings-page.enter-left { animation: page-in-left var(--t-smooth) var(--spring-smooth); }
@keyframes page-in-right {
  from { opacity: 0; transform: translateX(calc(60 * var(--u))); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-in-left {
  from { opacity: 0; transform: translateX(calc(-60 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

/* ---------- wiersze opcji (jak grupy w Ustawieniach iOS) ---------- */

.set-row {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  padding: calc(38 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) solid var(--line);
}
.set-row:first-child { padding-top: 0; }
.set-row:last-child { padding-bottom: 0; border-bottom: 0; }
.set-row-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(32 * var(--u));
}
.set-row-head {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  min-width: 0;
}
.set-ico {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.set-ico .material-symbols-rounded { font-size: calc(34 * var(--u)); }
.set-text { min-width: 0; }
.set-text h3 { margin: 0; font-size: calc(31 * var(--u)); font-weight: 800; }
.set-text p {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-2);
}
.set-value {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: calc(130 * var(--u));
  height: calc(60 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(26 * var(--u));
  font-weight: 800;
}
.set-note {
  margin: 0;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- kontrolki w stylu projektu ---------- */

.settings-screen .segmented {
  background: none;
  padding: 0;
  gap: calc(16 * var(--u));
  flex-wrap: wrap;
}
.settings-screen .segmented button {
  flex: 0 0 auto;
  height: calc(76 * var(--u));
  padding: 0 calc(34 * var(--u));
  background: var(--bg);
  color: var(--ink);
  font-size: calc(26 * var(--u));
  font-weight: 800;
  gap: calc(12 * var(--u));
  transition: background .22s ease, color .22s ease, transform .22s var(--bounce);
}
.settings-screen .segmented button:active { transform: scale(.94); }
.settings-screen .segmented button.active { background: var(--ink); color: var(--surface); }
.settings-screen .segmented .material-symbols-rounded { font-size: calc(32 * var(--u)); }
.settings-screen .seg-round button {
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  padding: 0;
  font-size: calc(28 * var(--u));
}

.settings-screen .switch {
  flex: 0 0 auto;
  width: calc(150 * var(--u));
  height: calc(84 * var(--u));
  padding: calc(9 * var(--u));
  background: var(--bg);
  transition: background .25s ease;
}
.settings-screen .switch-knob {
  width: calc(66 * var(--u));
  height: calc(66 * var(--u));
  background: var(--ink);
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), background .25s ease;
}
.settings-screen .switch[aria-checked="true"] { background: var(--say); }
.settings-screen .switch[aria-checked="true"] .switch-knob {
  transform: translateX(calc(66 * var(--u)));
  background: #FFFFFF;
}

.settings-screen .slider { height: calc(20 * var(--u)); background: var(--bg); }
.settings-screen .slider::-webkit-slider-thumb {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  background: var(--ink);
  border: 0;
}

.settings-screen .btn-inline,
.settings-screen .btn-reset {
  height: calc(80 * var(--u));
  padding: 0 calc(36 * var(--u));
}
.settings-screen .btn-inline { background: var(--bg); }
.settings-screen .text-input {
  max-width: calc(720 * var(--u));
  background: var(--bg);
  border-color: transparent;
}
.settings-screen .text-input:focus { border-color: var(--say); }

/* Głos lektora: dwie duże opcje, kółko z twarzą - ciemne przy wybranej */
.settings-screen .voice-list { gap: calc(20 * var(--u)); flex-wrap: nowrap; }
.settings-screen .voice-row { flex: 1 1 0; min-width: 0; }
.settings-screen .voice-btn {
  min-height: calc(124 * var(--u));
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--bg);
  color: var(--ink);
  gap: calc(22 * var(--u));
  box-shadow: inset 0 0 0 calc(4 * var(--u)) transparent;
  transition: box-shadow .25s ease, transform .22s var(--bounce);
}
.settings-screen .voice-btn:active { transform: scale(.97); }
.settings-screen .voice-btn .material-symbols-rounded {
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(46 * var(--u));
  transition: background .25s ease, color .25s ease;
}
.settings-screen .voice-btn.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--ink);
}
.settings-screen .voice-btn.active .material-symbols-rounded { background: var(--ink); color: var(--surface); }
.settings-screen .voice-btn-text { font-size: calc(30 * var(--u)); }
.settings-screen .voice-btn-text small { font-size: calc(21 * var(--u)); color: var(--ink-2); opacity: 1; }

/* ---------- Dziecko: pochwała po zadaniu ---------- */
.praise-list { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); }
.praise-pill {
  height: calc(72 * var(--u));
  padding: 0 calc(30 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: calc(25 * var(--u));
  font-weight: 800;
  transition: background .22s ease, color .22s ease, transform .22s var(--bounce);
}
.praise-pill:active { transform: scale(.95); }
.praise-pill.active { background: var(--ink); color: var(--surface); }

/* ---------- Tryb opiekuna: co blokuje PIN ---------- */
.lock-list {
  display: flex;
  flex-direction: column;
  border-radius: calc(32 * var(--u));
  background: var(--bg);
  padding: calc(6 * var(--u)) calc(30 * var(--u));
}
.lock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(28 * var(--u));
  padding: calc(24 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) solid var(--line);
  transition: opacity .25s ease;
}
.lock-item:last-child { border-bottom: 0; }
.lock-item .set-text h3 { font-size: calc(28 * var(--u)); }
/* bez włączonej blokady wybór "co blokuje" jest przygaszony (dalej klikalny) */
.lock-item.is-off { opacity: .5; }
.lock-always {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(64 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: calc(24 * var(--u));
  font-weight: 800;
}
.lock-always .material-symbols-rounded { font-size: calc(30 * var(--u)); }
.lock-list .switch { background: var(--surface); }
.lock-list .switch[aria-checked="true"] { background: var(--say); }

/* ---------- Informacje ---------- */
.set-ico-app { padding: 0; object-fit: cover; }
.set-note-body { font-size: calc(24 * var(--u)); color: var(--ink); max-width: calc(1000 * var(--u)); }
button.set-value { color: var(--ink); }
a.btn-inline { text-decoration: none; }

/* ---------- Tryb opiekuna: PIN wpisywany na miejscu ----------
   Pole rozsuwa się płynnie (grid 0fr -> 1fr, ta sama krzywa iOS co reszta
   ustawień): tytuł, cztery kafelki cyfr, mała klawiaturka 3 x 4. */
.set-row-pin { gap: 0; }
.set-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(32 * var(--u));
}
.pin-setup {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}
.pin-setup.open { grid-template-rows: 1fr; opacity: 1; }
.pin-setup-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pin-setup-title {
  margin: calc(40 * var(--u)) 0 calc(22 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 800;
}
.pin-boxes { display: flex; gap: calc(18 * var(--u)); }
.pin-boxes span {
  width: calc(86 * var(--u));
  height: calc(96 * var(--u));
  border-radius: calc(24 * var(--u));
  background: var(--bg);
  box-shadow: inset 0 0 0 calc(4 * var(--u)) transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .2s ease;
}
.pin-boxes span.current { box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--ink); }
.pin-boxes span::after {
  content: "";
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform .26s var(--bounce);
}
.pin-boxes span.filled::after { transform: scale(1); }
.pin-boxes.shake { animation: pin-shake .42s ease; }
@keyframes pin-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(calc(-18 * var(--u))); }
  40% { transform: translateX(calc(16 * var(--u))); }
  60% { transform: translateX(calc(-10 * var(--u))); }
  80% { transform: translateX(calc(6 * var(--u))); }
}
.pin-setup-error {
  min-height: calc(34 * var(--u));
  margin: calc(14 * var(--u)) 0 calc(8 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 700;
  color: var(--danger);
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, calc(128 * var(--u)));
  gap: calc(14 * var(--u));
  padding-bottom: calc(6 * var(--u));
}
.pin-pad button {
  height: calc(84 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: calc(34 * var(--u));
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s var(--bounce), background .15s ease;
}
.pin-pad button:active { transform: scale(.92); background: var(--line); }
.pin-pad .pin-pad-text { font-size: calc(22 * var(--u)); color: var(--ink-2); }
.pin-pad .material-symbols-rounded { font-size: calc(36 * var(--u)); }

/* ---------- WYSOKI KONTRAST (Ustawienia -> Wygląd) ----------
   Mocniejsze teksty i linie, czarne obramowanie każdego kafla i białe
   pastylki podpisów z czarnym napisem - kolor kategorii zostaje, ale
   znaczenie nie zależy już od odcieni. W ciemnym motywie odwrotnie. */
:root[data-contrast] {
  --ink: #000000;
  --ink-2: #33393F;
  --line: #A3A9AF;
}
:root[data-contrast][data-theme="dark"] {
  --bg: #000000;
  --surface: #121212;
  --ink: #FFFFFF;
  --ink-2: #D9DEE2;
  --line: #6E767E;
}
:root[data-contrast] .pictogram-card:not(.dragging) {
  box-shadow: inset 0 0 0 calc(var(--cw) * .022) var(--ink);
}
:root[data-contrast] .cat-tile { box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--ink); }
/* aktywna kategoria: grubsze obramowanie (znacznik z boku zostaje) */
:root[data-contrast] .cat-tile.active { box-shadow: inset 0 0 0 calc(9 * var(--u)) var(--ink), 0 calc(14 * var(--u)) 0 var(--cat-base); }
:root[data-contrast] .caption {
  background: #FFFFFF;
  color: #000000;
  box-shadow: 0 0 0 calc(var(--cw) * .012) #000000;
}

@media (prefers-reduced-motion: reduce) {
  .settings-screen .settings-panel,
  .settings-page.enter-right,
  .settings-page.enter-left,
  .settings-titles.swap { animation-duration: 1ms !important; }
  .side-nav-pill { transition: none; }
}

/* --- okna modalne --- */

.modal-card {
  width: min(100%, calc(1000 * var(--u)));
  max-height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: calc(44 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  scrollbar-width: none;
}
.modal-card::-webkit-scrollbar { display: none; }
.modal-card h2 { margin: 0 0 calc(10 * var(--u)); font-size: calc(46 * var(--u)); font-weight: 900; }
.modal-warning {
  margin: 0;
  padding: calc(20 * var(--u));
  border-radius: var(--r-card);
  background: rgba(227, 59, 51, .12);
  color: var(--danger);
  font-size: calc(24 * var(--u));
  font-weight: 700;
}
.field-label {
  font-size: calc(26 * var(--u));
  font-weight: 800;
  margin-top: calc(10 * var(--u));
}
.text-input {
  width: 100%;
  height: calc(90 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: var(--r-card);
  border: calc(4 * var(--u)) solid var(--line);
  background: var(--surface);
  font-size: calc(30 * var(--u));
  font-weight: 700;
}
.text-input:focus { outline: none; border-color: var(--go); }
.pin-error { margin: 0; color: var(--danger); font-size: calc(24 * var(--u)); text-align: center; }

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(14 * var(--u));
  margin-top: calc(14 * var(--u));
}

/* --- Nauka: wybór na planszę --- */

.learn-bank-panel { width: min(100%, calc(1100 * var(--u))); }
.learn-add-btn { align-self: flex-start; margin: calc(20 * var(--u)) 0; }
.learn-bank-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(320 * var(--u)), 1fr));
  gap: calc(12 * var(--u));
  max-height: calc(760 * var(--u));
}
.learn-bank-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  border-radius: var(--r-card);
  background: var(--bg);
  font-size: calc(26 * var(--u));
  font-weight: 800;
  text-align: left;
}
.learn-bank-item.selected { background: var(--go); color: #FFFFFF; }
.learn-bank-item .material-symbols-rounded { font-size: calc(34 * var(--u)); }
.learn-bank-item small { display: block; font-size: calc(20 * var(--u)); font-weight: 600; opacity: .75; }
.learn-bank-item .badge-del {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  margin-left: auto;
  color: var(--danger);
}


/* =====================================================================
   DROBIAZGI: toast, błysk po dotknięciu
   ===================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(120 * var(--u));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(20 * var(--u)) calc(34 * var(--u));
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font-size: calc(30 * var(--u));
  font-weight: 800;
  animation: toast-in var(--t-snappy) var(--spring-snappy);
}
.toast .material-symbols-rounded { font-size: calc(36 * var(--u)); }
.toast.is-out { animation: toast-out .26s ease forwards; }
/* wyskakuje: wjeżdża z dołu i lekko się powiększa z małym odbiciem */
@keyframes toast-in {
  from { transform: translate(-50%, calc(40 * var(--u))) scale(.94); opacity: 0; }
}
@keyframes toast-out {
  to { transform: translate(-50%, calc(30 * var(--u))); opacity: 0; }
}

.tap-flash {
  position: fixed;
  left: var(--fx, -100px);
  top: var(--fy, -100px);
  width: calc(120 * var(--u));
  height: calc(120 * var(--u));
  margin: calc(-60 * var(--u)) 0 0 calc(-60 * var(--u));
  border-radius: 50%;
  background: rgba(0, 0, 0, .12);
  pointer-events: none;
  opacity: 0;
  z-index: 95;
}
.tap-flash.show { opacity: 1; transform: scale(.6); }
.tap-flash.hide { opacity: 0; transform: scale(1.5); transition: opacity .35s ease, transform .35s ease; }

/* --- intro: buźka wyskakuje, mruga i oddaje ekran --- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Warstwa kompozytora od PIERWSZEJ klatki (will-change + translateZ).
     Bez tego Safari tworzył ją dopiero w chwili startu przejścia, a po jego
     końcu przerysowywał cały ekran - stąd "zacięcie na końcu" wygaszania
     (zgłoszenie 23.09). */
  will-change: opacity;
  transform: translateZ(0);
  transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
}
.intro.is-out { opacity: 0; pointer-events: none; }
/* buźka już wyskoczyła - jej warstwy (maski, rozmyty cień) znikają PRZED
   wygaszaniem tła, żeby w trakcie przejścia nie było czego przeliczać */
.intro.is-done .bz-stage { visibility: hidden; }
/* INTRO: animacja buźki z Desktop/Buzia_Animacja (23.09.2026) - wyskok z
   odbiciem, mrugnięcie, wyskok na zewnątrz; razem ~3 s. Wszystkie klasy i
   nazwy animacji mają prefiks bz-, żeby nie gryzły się ze stylami aplikacji.
   Rozmiar w jednostkach makiety (w oryginale 22vw ~ 440 z 2000). */
.bz-stage { position: relative; width: calc(440 * var(--u)); aspect-ratio: 414 / 455; }
.bz-stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
  /* cień pod buźką – pulsuje razem z odbiciem */
  .bz-shadow {
    position: absolute; left: 8%; right: 8%; bottom: -12%;
    height: 7%; border-radius: 50%;
    background: rgba(0,0,0,.14); filter: blur(6px);
    opacity: 0; transform: scale(0);
  }

  .bz-pop  { width: 100%; height: 100%; transform-origin: 18% 100%; opacity: 0; }
  .bz-wink { width: 100%; height: 100%; transform-origin: 50% 92%; }

  .bz-stage svg g, .bz-stage svg path, .bz-stage svg rect { transform-box: fill-box; transform-origin: center; }

  /* ---------- 1. wyskok z odbiciem (squash & stretch) ---------- */
  .bz-play .bz-pop { animation: bz-pop 1000ms linear both; }
  @keyframes bz-pop {
    0%   { opacity: 0; transform: translateY(45%) scale(0) rotate(-38deg); animation-timing-function: cubic-bezier(.15,.75,.35,1); }
    8%   { opacity: 1; }
    36%  { opacity: 1; transform: translateY(-16%) scale(1.05,1.18) rotate(9deg); animation-timing-function: cubic-bezier(.55,0,.9,.45); }
    52%  { transform: translateY(0) scale(1.2,.8) rotate(-3deg); animation-timing-function: cubic-bezier(.2,.6,.35,1); }
    66%  { transform: translateY(-5%) scale(.93,1.09) rotate(2deg); animation-timing-function: ease-in-out; }
    79%  { transform: translateY(0) scale(1.05,.96) rotate(-.5deg); }
    90%  { transform: translateY(0) scale(.99,1.015) rotate(0); }
    100% { opacity: 1; transform: none; }
  }
  .bz-play .bz-shadow { animation: bz-shadow 1000ms linear both; }
  @keyframes bz-shadow {
    0%   { opacity: 0; transform: scale(0); }
    36%  { opacity: .25; transform: scale(.55); animation-timing-function: ease-in; }
    52%  { opacity: .6; transform: scale(1.18, 1); }
    66%  { opacity: .4; transform: scale(.88); }
    79%  { opacity: .55; transform: scale(1.04); }
    100% { opacity: .5; transform: scale(1); }
  }

  /* oczy i usta buzia_1 wskakują chwilę po bąbelku */
  .bz-play .bz-f1 .bz-eye-l { animation: bz-feat 460ms 330ms cubic-bezier(.3,1.6,.5,1) both; }
  .bz-play .bz-f1 .bz-eye-r { animation: bz-feat 460ms 390ms cubic-bezier(.3,1.6,.5,1) both; }
  .bz-play .bz-f1 .bz-mouth { animation: bz-mouthIn 520ms 450ms cubic-bezier(.3,1.5,.5,1) both; }
  @keyframes bz-feat    { from { transform: scale(0); } to { transform: none; } }
  @keyframes bz-mouthIn { from { transform: scale(.2, 0); } to { transform: none; } }

  /* ---------- 2. mrugnięcie ---------- */
  /* prawe oko buzia_1 się zamyka... */
  .bz-play .bz-f1 .bz-eye-r-close { animation: bz-close 120ms 1250ms cubic-bezier(.6,0,1,.6) both; }
  @keyframes bz-close { from { transform: none; } to { transform: scale(1.08, .05); } }

  /* ...i w tym momencie podmieniamy na buzia_2 */
  .bz-f2 { opacity: 0; }
  .bz-play .bz-f1 { animation: bz-hide 1ms 1365ms both; }
  .bz-play .bz-f2 { animation: bz-show 1ms 1365ms both; }
  @keyframes bz-hide { from { opacity: 1; } to { opacity: 0; } }
  @keyframes bz-show { from { opacity: 0; } to { opacity: 1; } }

  .bz-play .bz-f2 .bz-w-arc   { animation: bz-arc 420ms 1365ms cubic-bezier(.3,1.5,.5,1) both; }
  .bz-play .bz-f2 .bz-w-eye   { animation: bz-eyeSettle 460ms 1365ms ease-out both; }
  .bz-play .bz-f2 .bz-w-mouth { animation: bz-grin 520ms 1365ms cubic-bezier(.3,1.45,.5,1) both; }
  @keyframes bz-arc {
    from { transform: scale(1.25, .15); }
    to   { transform: none; }
  }
  @keyframes bz-eyeSettle {
    0%   { transform: scale(1.1, .88); }
    45%  { transform: scale(.95, 1.07); }
    75%  { transform: scale(1.02, .98); }
    100% { transform: none; }
  }
  @keyframes bz-grin {
    from { transform: scale(.82, .55) rotate(7deg); }
    to   { transform: none; }
  }

  /* bąbelek przechyla się razem z mrugnięciem */
  .bz-play .bz-wink { animation: bz-tilt 820ms 1250ms both; }
  @keyframes bz-tilt {
    0%   { transform: none; animation-timing-function: cubic-bezier(.3,0,.4,1); }
    20%  { transform: rotate(-7deg) scale(1.05, .93); animation-timing-function: cubic-bezier(.3,0,.3,1); }
    46%  { transform: rotate(3.5deg) scale(.97, 1.04); animation-timing-function: ease-in-out; }
    70%  { transform: rotate(-1.2deg) scale(1.01, .99); }
    100% { transform: none; }
  }

  /* ---------- 3. wyskok na zewnątrz ---------- */
  .bz-out, .bz-shadow-out { position: absolute; inset: 0; }
  .bz-out { transform-origin: 18% 100%; }
  .bz-play .bz-out { animation: bz-out 560ms 2500ms both; }
  @keyframes bz-out {
    0%   { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.3,0,.4,1); }
    22%  { transform: translateY(2%) scale(1.1, .86); animation-timing-function: cubic-bezier(.2,.7,.4,1); }
    42%  { transform: translateY(-9%) scale(.94, 1.14) rotate(5deg); opacity: 1; animation-timing-function: cubic-bezier(.6,0,.9,.5); }
    100% { transform: translateY(35%) scale(0) rotate(-35deg); opacity: 0; }
  }
  .bz-play .bz-shadow-out { animation: bz-shadowOut 560ms 2500ms both; }
  @keyframes bz-shadowOut {
    0%   { transform: none; opacity: 1; }
    22%  { transform: scale(1.12, 1); opacity: 1; }
    42%  { transform: scale(.7); opacity: .6; }
    100% { transform: scale(0); opacity: 0; }
  }


@media (prefers-reduced-motion: reduce) {
  .bz-play * { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}


/* =====================================================================
   WYMUSZONY POZIOM (obrót całego UI)
   =====================================================================
   Aplikacja ma ZAWSZE wyglądać jak na tablecie w poziomie - także wtedy, gdy
   dziecko trzyma iPada pionowo. Safari (ani PWA z ekranu głównego) nie
   pozwala tego wymusić programowo: `screen.orientation.lock()` nie istnieje
   na iOS, a `"orientation"` z manifestu respektuje tylko Android/Chrome.
   Jedyne, co działa wszędzie, to obrócenie CAŁEGO dokumentu o 90 stopni.

   Mechanika (skrypt w <head> index.html ustawia data-rot i --rot-*):
     --rot-w = window.innerHeight (dłuższy bok = SZEROKOŚĆ aplikacji)
     --rot-h = window.innerWidth  (krótszy bok = WYSOKOŚĆ aplikacji)
   transform: rotate(90deg) translateY(-100%) przy transform-origin 0 0
   odwzorowuje punkt aplikacji (ax, ay) na punkt ekranu (W - ay, ax), gdzie
   W = window.innerWidth. Ten sam wzór (i jego odwrotność) siedzi w app.js -
   patrz appPoint()/appRect(): zdarzenia wskaźnika przychodzą we
   WSPÓŁRZĘDNYCH EKRANU, a przeciąganie kafli liczy we współrzędnych
   aplikacji.

   transform na <body> tworzy przy okazji blok zawierający dla position:fixed,
   więc wszystkie nakładki (ustawienia, modale) obracają się razem z
   aplikacją i same z siebie nic nie wymagają. */
/* PWA na iPadzie: okno niższe od ekranu o pasek domowy - body rozciągnięte
   do pełnej wysokości ekranu (skrypt w <head>, data-fix-h). transform robi
   z body blok zawierający dla position:fixed: bez niego pełnoekranowe gry
   (Piesek, Balonik) i nakładki liczyły się dalej od KRÓTKIEGO okna i na dole
   zostawał szary pasek (zgłoszenie 03.10.2026, v182). */
:root[data-fix-h]:not([data-rot]) body { bottom: auto; height: var(--fix-h); transform: translateZ(0); }
:root[data-rot="1"] body {
  inset: auto;
  top: 0;
  left: 0;
  width: var(--rot-w);
  height: var(--rot-h);
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
}

/* =====================================================================
   NAUKA -> SYLABY (sylaby.js)
   =====================================================================
   Układ wg referencji rodzica, wykonanie w stylu Mimi: białe karty 64 na
   szarym tle, turkus Nauki (#8EE5D9), ciemne zaznaczenie, zielony (--say)
   przycisk akcji. Ekran zajmuje całą planszę (position:absolute), a
   wysoki tryb terapeuty przewija się w środku. */
.syl-screen {
  position: absolute;
  inset: calc(24 * var(--u)) 0 0;
  overflow-y: auto;
  scrollbar-width: none;
  --syl-accent: #8EE5D9;
  --syl-soft: #DDF7F3;
}
.syl-screen::-webkit-scrollbar { display: none; }
:root[data-theme="dark"] .syl-screen { --syl-soft: #1F3B38; }

/* --- pasek: licznik i przyciski --- */
.syl-counter { font-size: calc(34 * var(--u)); font-weight: 900; color: var(--ink-2); white-space: nowrap; }
.syl-bar-btn {
  height: calc(96 * var(--u));
  padding: 0 calc(34 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 800;
  transition: transform .22s var(--bounce);
}
.syl-bar-btn:active { transform: scale(.94); }
.syl-bar-btn .material-symbols-rounded { font-size: calc(36 * var(--u)); }
.syl-bar-btn > svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; }
.syl-bar-ther { background: var(--ink); color: var(--surface); padding: 0 calc(38 * var(--u)) 0 calc(30 * var(--u)); font-size: calc(30 * var(--u)); }
.syl-bar-ther .material-symbols-rounded { font-size: calc(40 * var(--u)); }
.syl-bar-go { background: var(--say); color: #FFFFFF; padding: 0 calc(46 * var(--u)); font-size: calc(32 * var(--u)); }

/* --- menu Sylab: 2 x 2 --- */
.syl-hub {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: calc(44 * var(--u));
}
.syl-hub-card {
  display: flex;
  align-items: center;
  gap: calc(60 * var(--u));
  padding: 0 calc(76 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
  text-align: left;
  animation: card-in .56s cubic-bezier(.3, 1.3, .5, 1) both, card-fade .3s ease-out both;
  animation-delay: var(--in-delay, 0ms), var(--in-delay, 0ms);
  transition: transform .22s var(--bounce);
}
.syl-hub-card:active { transform: scale(.97); }
.syl-hub-ico {
  flex: 0 0 auto;
  width: calc(236 * var(--u));
  height: calc(236 * var(--u));
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.syl-hub-ico svg { width: calc(118 * var(--u)); height: calc(118 * var(--u)); }
.syl-hub-ico .material-symbols-rounded { font-size: calc(120 * var(--u)); }
.syl-hub-text { display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-width: 0; }
.syl-hub-text b { font-size: calc(66 * var(--u)); font-weight: 900; line-height: 1.05; }
.syl-hub-text span { font-size: calc(32 * var(--u)); font-weight: 700; color: var(--ink-2); }
.syl-note { margin: 0; font-size: calc(24 * var(--u)); font-weight: 600; color: var(--ink-2); line-height: 1.45; }

/* --- ćwiczenia: obrazek po lewej, zadanie po prawej --- */
.syl-layout {
  height: 100%;
  display: grid;
  grid-template-columns: calc(620 * var(--u)) minmax(0, 1fr);
  gap: calc(40 * var(--u));
}
.syl-pic-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
  padding: calc(36 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
}
.syl-pic {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: calc(44 * var(--u));
  background: var(--syl-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.syl-pic img { max-width: 78%; max-height: 78%; object-fit: contain; }
/* zdjęcie z "Moje" wypełnia całe pole obrazka */
.syl-pic.is-photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.syl-listen {
  flex: 0 0 auto;
  height: calc(110 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 800;
  transition: transform .22s var(--bounce);
}
.syl-listen:active { transform: scale(.96); }
.syl-listen .material-symbols-rounded { font-size: calc(46 * var(--u)); }

.syl-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
.syl-panel {
  align-items: center;
  padding: calc(56 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
}
.syl-panel-center { justify-content: center; }

/* napis w jednym wierszu - sylFit() w sylaby.js zmniejsza go do szerokości */
.syl-fit { display: inline-block; white-space: nowrap; }

/* Złóż słowo - pole sylab powiększone (uwaga użytkownika 23.09.2026) */
.syl-slots-card {
  flex: 0 0 auto;
  min-height: calc(420 * var(--u));
  padding: calc(54 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .3s ease;
}
.syl-slots { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(26 * var(--u)); }
.syl-slot {
  flex: 0 1 calc(310 * var(--u));
  min-width: 0;
  height: calc(260 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: calc(46 * var(--u));
  border: calc(6 * var(--u)) dashed var(--ink-2);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(112 * var(--u));
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.syl-slot.filled { border-style: solid; border-color: transparent; background: var(--syl-accent); color: #000000; animation: syl-pop .3s var(--bounce); }
/* ułożone słowo: zielone pola + zielona obwódka całej karty */
.syl-slots-card.is-ok { box-shadow: inset 0 0 0 calc(8 * var(--u)) var(--say); }
.syl-slots-card.is-ok .syl-slot { background: var(--say); color: #FFFFFF; }
.syl-slots-card.shake { animation: pin-shake .42s ease; }

.syl-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(28 * var(--u)); }
.syl-tile {
  min-width: calc(250 * var(--u));
  max-width: 100%;
  height: calc(196 * var(--u));
  padding: 0 calc(40 * var(--u));
  border-radius: calc(44 * var(--u));
  background: var(--surface);
  font-size: calc(96 * var(--u));
  font-weight: 900;
  overflow: hidden;
  transition: transform .22s var(--bounce), opacity .2s ease, background .2s ease, color .2s ease;
}
.syl-tile:active { transform: scale(.94); }
.syl-tile.used { opacity: .22; transform: scale(.9); pointer-events: none; }
.syl-panel .syl-tile { background: var(--bg); }

/* Złóż słowo bez przycisków (v138): pole sylab i kafle na środku kolumny */
.syl-right-build { justify-content: center; gap: calc(48 * var(--u)); }
.syl-slot.filled { cursor: pointer; }
.syl-btn {
  height: calc(110 * var(--u));
  padding: 0 calc(52 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  transition: transform .22s var(--bounce), opacity .2s ease;
}
.syl-btn:active { transform: scale(.94); }
.syl-btn .material-symbols-rounded { font-size: calc(44 * var(--u)); }
.syl-panel .syl-btn { background: var(--bg); }
.syl-btn-dark { background: var(--ink) !important; color: var(--surface); }
.syl-btn-sm { height: calc(72 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: calc(25 * var(--u)); background: var(--bg); white-space: nowrap; flex: 0 0 auto; }
@keyframes syl-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Posłuchaj i zaznacz: duży przycisk "Słucham" po lewej, kafle po prawej */
.syl-hear-card { align-items: center; justify-content: center; gap: calc(40 * var(--u)); }
.syl-hear {
  width: calc(400 * var(--u));
  height: calc(400 * var(--u));
  border-radius: 50%;
  background: var(--say);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  transition: transform .22s var(--bounce);
}
.syl-hear:active { transform: scale(.94); }
.syl-hear .material-symbols-rounded { font-size: calc(160 * var(--u)); }
.syl-hear b { font-size: calc(52 * var(--u)); font-weight: 900; }
/* w trakcie mówienia pierścień fal wokół przycisku */
.syl-hear.is-on { animation: syl-hear-pulse 1.1s ease-out infinite; }
@keyframes syl-hear-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--say) 55%, transparent); }
  100% { box-shadow: 0 0 0 calc(60 * var(--u)) color-mix(in srgb, var(--say) 0%, transparent); }
}
.syl-hear-hint { margin: 0; font-size: calc(34 * var(--u)); font-weight: 800; color: var(--ink-2); text-align: center; }

.syl-choices {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--ch-cols, 2), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: calc(32 * var(--u));
}
.syl-choice {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: calc(56 * var(--u));
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(30 * var(--u));
  overflow: hidden;
  font-size: calc(110 * var(--u));
  font-weight: 900;
  transition: transform .22s var(--bounce);
}
.syl-choices.is-syl .syl-choice { font-size: calc(150 * var(--u)); }
.syl-choice:active { transform: scale(.96); }
.syl-choice img { max-width: 70%; max-height: 74%; object-fit: contain; }
.syl-choice.is-photo { padding: 0; }
.syl-choice.is-photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.syl-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow .2s ease;
}
.syl-choice.is-ok::after { box-shadow: inset 0 0 0 calc(12 * var(--u)) var(--say); }
.syl-choice.is-bad { animation: pin-shake .42s ease; }
.syl-choice.is-bad::after { box-shadow: inset 0 0 0 calc(10 * var(--u)) #FF9A93; }

/* Znajdź sylabę */
.syl-question { margin: 0 0 calc(44 * var(--u)); font-size: calc(48 * var(--u)); font-weight: 900; text-align: center; }
.syl-options { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(32 * var(--u)); }
.syl-option { min-width: calc(290 * var(--u)); height: calc(250 * var(--u)); }
.syl-option.is-ok { background: var(--say) !important; color: #FFFFFF; }
.syl-option.is-bad { animation: pin-shake .42s ease; background: #FFD9D7 !important; }

/* wystrzał gwiazdek za każde zgadnięte zadanie (sylBurst w sylaby.js) */
.syl-burst { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.syl-burst-star { position: absolute; left: 0; top: 0; display: block; opacity: 0; }
.syl-burst-star svg { display: block; width: 100%; height: 100%; }

/* Memory */
.syl-memory {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--mem-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--mem-rows, 2), minmax(0, 1fr));
  gap: calc(32 * var(--u));
  /* zapas na podskok znalezionej pary i obrót 3D - karty przy krawędzi nie
     wychodzą poza przewijany ekran ćwiczenia (tam byłyby ucięte) */
  padding: calc(24 * var(--u));
}
.syl-mem-card { perspective: calc(2400 * var(--u)); min-height: 0; min-width: 0; }
.syl-mem-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.syl-mem-card.flipped .syl-mem-inner,
.syl-mem-card.matched .syl-mem-inner { transform: rotateY(180deg); }
.syl-mem-back,
.syl-mem-front {
  position: absolute;
  inset: 0;
  border-radius: calc(48 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.syl-mem-back { background: var(--syl-accent); color: #FFFFFF; }
.syl-mem-back .material-symbols-rounded { font-size: calc(110 * var(--u)); }
.syl-mem-front { background: var(--surface); transform: rotateY(180deg); padding: 0 calc(26 * var(--u)); }
.syl-mem-front img { max-width: 72%; max-height: 72%; object-fit: contain; }
/* zdjęcie z "Moje" na CAŁĄ kartę, bez białej ramki (uwaga użytkownika) */
.syl-mem-front.is-photo { padding: 0; }
.syl-mem-front.is-photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.syl-mem-front b { font-size: calc(80 * var(--u)); font-weight: 900; }
/* obwódka pary leży NAD zdjęciem (::after), inaczej zdjęcie by ją zakryło */
.syl-mem-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.syl-mem-card.matched .syl-mem-front::after { box-shadow: inset 0 0 0 calc(9 * var(--u)) var(--say); }

.syl-empty {
  height: 100%;
  border-radius: calc(64 * var(--u));
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--u));
  padding: 0 calc(200 * var(--u));
  text-align: center;
  color: var(--ink-2);
}
.syl-empty .material-symbols-rounded { font-size: calc(110 * var(--u)); }
.syl-empty p { margin: 0; font-size: calc(32 * var(--u)); font-weight: 700; }

/* --- tryb terapeuty: strefy ćwiczeń ---
   Lewa kolumna (węższa) = cztery strefy, prawa (szersza) = zawartość
   wybranej strefy. Obie kolumny przewijają się SAME - wcześniej przewijał
   się cały ekran i po zjechaniu w dół lewa kolumna była pustą białą plamą. */
.syl-screen.is-fixed { overflow: hidden; }
.syl-ther {
  height: 100%;
  display: grid;
  grid-template-columns: calc(540 * var(--u)) minmax(0, 1fr);
  gap: calc(36 * var(--u));
}
.syl-ther-nav {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.syl-ther-main {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  padding-bottom: calc(24 * var(--u));
}
.syl-ther-nav::-webkit-scrollbar,
.syl-ther-main::-webkit-scrollbar { display: none; }
.syl-zone {
  flex: 1 0 calc(200 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  padding: 0 calc(36 * var(--u));
  border-radius: calc(56 * var(--u));
  background: var(--surface);
  text-align: left;
  transition: background .2s ease, color .2s ease, transform .22s var(--bounce);
}
.syl-zone:active { transform: scale(.97); }
.syl-zone-ico {
  flex: 0 0 auto;
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
  border-radius: 50%;
  background: var(--syl-soft);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.syl-zone-ico svg { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.syl-zone-text { min-width: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.syl-zone-text b { font-size: calc(38 * var(--u)); font-weight: 900; line-height: 1.05; }
.syl-zone-sum { font-size: calc(24 * var(--u)); font-weight: 700; color: var(--ink-2); white-space: pre-line; line-height: 1.3; }
.syl-zone-sum.is-low { color: var(--danger); }
.syl-zone.active { background: var(--ink); color: var(--surface); }
.syl-zone.active .syl-zone-ico { background: var(--surface); color: var(--ink); }
.syl-zone.active .syl-zone-sum { color: color-mix(in srgb, var(--surface) 70%, transparent); }

.syl-card { padding: calc(40 * var(--u)); border-radius: calc(64 * var(--u)); background: var(--surface); }
.syl-cfg-head { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.syl-cfg-top { display: flex; align-items: flex-start; gap: calc(30 * var(--u)); }
.syl-cfg-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.syl-cfg-titles h2 { margin: 0; font-size: calc(50 * var(--u)); font-weight: 900; line-height: 1.05; }
.syl-btn-try { height: calc(96 * var(--u)); font-size: calc(30 * var(--u)); padding: 0 calc(40 * var(--u)) 0 calc(32 * var(--u)); }
.syl-try-ico { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.syl-cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: calc(2 * var(--u)) solid var(--line);
}
.syl-cfg-label { font-size: calc(30 * var(--u)); font-weight: 800; }
/* opis wybranego źródła - czytelnie, co dziecko zobaczy */
.syl-cfg-hint { margin-top: calc(-10 * var(--u)); color: var(--ink); font-weight: 700; }
.syl-mode {
  display: flex;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
}
.syl-mode-btn {
  height: calc(80 * var(--u));
  padding: 0 calc(36 * var(--u));
  border-radius: var(--r-pill);
  font-size: calc(28 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.syl-mode-btn.active { background: var(--ink); color: var(--surface); }
.syl-seg { display: flex; gap: calc(12 * var(--u)); }
.syl-seg-btn { width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: 50%; background: var(--bg); font-size: calc(30 * var(--u)); font-weight: 900; transition: background .2s ease, color .2s ease; }
.syl-seg-btn.active { background: var(--ink); color: var(--surface); }
/* Ilość zadań: - liczba + (25.09.2026, zamiast "Ile do wyboru") */
.syl-stepper {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
}
.syl-step-btn {
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--surface);
  transition: transform .2s var(--bounce), opacity .2s ease;
}
.syl-step-btn svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.syl-step-btn:active { transform: scale(.9); }
.syl-step-btn:disabled { opacity: .25; cursor: default; }
.syl-step-val {
  min-width: calc(90 * var(--u));
  text-align: center;
  font-size: calc(40 * var(--u));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
/* podgląd słów w zadaniu (źródło "Sylaby") - bez ptaszka i ramki wyboru */
.syl-pick.is-preview .syl-pick-check { display: none; }

.syl-card-head { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.syl-card-head h3 { margin: 0; font-size: calc(34 * var(--u)); font-weight: 900; white-space: nowrap; }
.syl-card-meta { flex: 1 1 auto; font-size: calc(24 * var(--u)); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.syl-card-tools { display: flex; gap: calc(12 * var(--u)); }
.syl-pick-foot { margin-top: calc(20 * var(--u)); }

.syl-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(176 * var(--u)), 1fr));
  gap: calc(18 * var(--u));
}
.syl-pick {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--bg);
  transition: box-shadow .18s ease, transform .2s var(--bounce);
}
.syl-pick:active { transform: scale(.95); }
.syl-pick-art {
  aspect-ratio: 1;
  border-radius: calc(22 * var(--u));
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.syl-pick-art img { width: 80%; height: 80%; object-fit: contain; }
.syl-pick-art.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.syl-pick-label {
  font-size: calc(24 * var(--u));
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.syl-pick-check {
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(4 * var(--u));
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 0;
  transition: scale .24s var(--bounce);
}
.syl-pick-check .material-symbols-rounded { font-size: calc(34 * var(--u)); }
.syl-pick.is-on { box-shadow: inset 0 0 0 calc(6 * var(--u)) var(--ink); }
.syl-pick.is-on .syl-pick-check { scale: 1; }
.syl-pick:not(.is-on) .syl-pick-art { opacity: .55; }
.syl-pick-edit {
  position: absolute;
  top: calc(4 * var(--u));
  left: calc(4 * var(--u));
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--bg);
}
.syl-pick-edit svg { width: 56%; height: 56%; }

.syl-cat-tabs { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.syl-cat-tab {
  height: calc(72 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(20 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: calc(25 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.syl-cat-dot { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: var(--cat-color); }
.syl-cat-tab.active { background: var(--ink); color: var(--surface); }

.syl-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u));
  margin-bottom: calc(24 * var(--u));
  border-radius: calc(36 * var(--u));
  background: var(--bg);
}
.syl-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 * var(--u));
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  border-radius: calc(28 * var(--u));
  text-align: left;
  transition: background .2s ease;
}
.syl-level b { font-size: calc(30 * var(--u)); font-weight: 900; }
.syl-level span { font-size: calc(22 * var(--u)); font-weight: 700; color: var(--ink-2); }
.syl-level.active { background: var(--surface); }
.syl-ther-head { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.syl-ther-head h3 { flex: 1 1 auto; margin: 0; font-size: calc(30 * var(--u)); font-weight: 800; }
.syl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.syl-chip {
  height: calc(80 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--bg);
  font-size: calc(30 * var(--u));
  font-weight: 900;
  transition: background .18s ease, color .18s ease, transform .2s var(--bounce);
}
.syl-chip:active { transform: scale(.93); }
.syl-chip.active { background: var(--ink); color: var(--surface); }

/* =====================================================================
   BEZ ANIMACJI (Ustawienia -> Wygląd -> Animacje)
   =====================================================================
   Dla dzieci, które ruch na ekranie rozprasza albo niepokoi (m.in. przy
   autyzmie). Każda animacja i przejście trwa 1 ms zamiast zniknąć całkiem:
   elementy od razu stają w stanie KOŃCOWYM, a zdarzenia animationend /
   transitionend dalej przychodzą, więc nic w logice nie czeka w nieskończoność.
   Ruch sterowany z JS (sprężyna kafli, intro, konfetti, mrugające logo)
   sprawdza to samo ustawienie w app.js / rewards.js. */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* =====================================================================
   KREATOR „DODAJ ZDJĘCIE” (kategoria Moje) - projekt użytkownika 23.09.2026
   =====================================================================
   Cztery zrzuty (Zdjęcie / Kadr / Podpis / Głos) zmierzone pikselowo i
   przeliczone na jednostki makiety (--u). Okno 1758 x 1278, promień 76.
   Stała głowa: krzyżyk ⌀100, tytuł 48/900, pastylki kroków 76 wysokości.
   Stała stopka: Wstecz 120 wys., Dalej / Zapisz 120 wys.
   Między nimi strona: odstęp 39 od głowy i 57 do stopki - dokładnie tyle,
   ile ma ciemne pole kadru (886) na kroku 2.
   Szarości wpisane z makiety: tło przycisków #F2F2F2 (--bg), wyłączony
   przycisk #C8C8C8, podpowiedzi #6B6B6B / #808080. */

.wiz-overlay { padding: 0; }

.wiz {
  --wiz-soft: var(--bg);        /* #F2F2F2: przyciski, pola, panel nagrania */
  --wiz-muted: #6B6B6B;         /* podpowiedzi */
  --wiz-off: #C8C8C8;           /* „Dalej”, gdy czegoś brakuje */
  --wiz-done: #56C25C;          /* zielona kropka zrobionego kroku */
  --wiz-rec: #F54859;           /* przycisk Nagrywaj */
  position: relative;
  width: min(calc(1758 * var(--u)), calc(100% - 40 * var(--u)));
  height: min(calc(1278 * var(--u)), calc(100% - 40 * var(--u)));
  background: var(--surface);
  border-radius: calc(76 * var(--u));
  padding: calc(38 * var(--u)) calc(52 * var(--u)) calc(37 * var(--u));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--ink);
  animation: wiz-in var(--t-smooth) var(--spring-smooth) both;
}
:root[data-theme="dark"] .wiz { --wiz-muted: var(--ink-2); --wiz-off: #3A424B; }
.wiz.is-closing { animation: wiz-out .3s cubic-bezier(.4, 0, .9, .6) both; }
.wiz-overlay:has(.wiz.is-closing) { animation: wiz-fade-out .3s ease both; }
/* arkusz jak na iPadzie: wjeżdża od dołu ekranu, schodzi w dół */
@keyframes wiz-in {
  from { translate: 0 calc(1500 * var(--u)); }
}
@keyframes wiz-out {
  to { translate: 0 calc(1500 * var(--u)); }
}
@keyframes wiz-fade-out { to { opacity: 0; } }

.wiz svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wiz svg .fill { fill: currentColor; stroke: none; }

/* --- głowa --- */

.wiz-head {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
  height: calc(100 * var(--u));
  margin-bottom: calc(39 * var(--u));
}
.wiz-close {
  flex: 0 0 auto;
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  background: var(--wiz-soft);
  display: grid;
  place-items: center;
  transition: transform .22s var(--bounce);
}
.wiz-close svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); stroke-width: 2.6; }
.wiz-close:active { transform: scale(.9); }
.wiz-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: calc(48 * var(--u));
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiz-title.swap { animation: wiz-title-in .34s var(--ios-sheet) both; }
@keyframes wiz-title-in {
  from { opacity: 0; translate: 0 calc(14 * var(--u)); }
}

.wiz-steps {
  flex: 0 0 auto;
  display: flex;
  gap: calc(14 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.wiz-step {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  height: calc(76 * var(--u));
  padding: 0 calc(30 * var(--u)) 0 calc(13 * var(--u));
  border-radius: var(--r-pill);
  background: var(--wiz-soft);
  color: #939393;
  font-size: calc(33 * var(--u));
  font-weight: 800;
  transition: background-color .3s ease, color .3s ease, transform .22s var(--bounce);
}
.wiz-step:disabled { cursor: default; }
.wiz-step:not(:disabled):active { transform: scale(.94); }
.wiz-dot {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #DCDCDC;
  color: #1B1B1B;
  font-size: calc(28 * var(--u));
  font-weight: 900;
  transition: background-color .3s ease;
}
.wiz-dot svg { width: 72%; height: 72%; stroke-width: 3.2; }
.wiz-step[data-state="done"] { color: var(--ink); }
.wiz-step[data-state="done"] .wiz-dot { background: var(--wiz-done); color: #FFFFFF; }
.wiz-step[data-state="done"] .wiz-dot svg { animation: wiz-check-in .42s var(--bounce-in) both; }
.wiz-step[data-state="current"] { background: var(--ink); color: var(--surface); }
.wiz-step[data-state="current"] .wiz-dot { background: var(--surface); color: var(--ink); }
@keyframes wiz-check-in { from { scale: 0; } }
:root[data-theme="dark"] .wiz-dot { background: #3A424B; color: var(--ink); }

/* --- strona --- */

.wiz-body {
  position: relative;
  min-height: 0;
  display: grid;
}
.wiz-page {
  grid-area: 1 / 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wiz-page.enter-fwd { animation: wiz-page-fwd .44s var(--ios-sheet) both; }
.wiz-page.enter-back { animation: wiz-page-back .44s var(--ios-sheet) both; }
@keyframes wiz-page-fwd { from { opacity: 0; translate: calc(70 * var(--u)) 0; } }
@keyframes wiz-page-back { from { opacity: 0; translate: calc(-70 * var(--u)) 0; } }

/* --- stopka --- */

.wiz-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  margin-top: calc(57 * var(--u));
}
.wiz-back,
.wiz-next {
  display: inline-flex;
  align-items: center;
  height: calc(120 * var(--u));
  border-radius: var(--r-pill);
  font-size: calc(35 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  transition: transform .22s var(--bounce), background-color .25s ease, color .25s ease;
}
.wiz-back {
  gap: calc(23 * var(--u));
  padding: 0 calc(52 * var(--u)) 0 calc(44 * var(--u));
  background: var(--wiz-soft);
}
.wiz-next {
  gap: calc(20 * var(--u));
  padding: 0 calc(52 * var(--u)) 0 calc(58 * var(--u));
  background: var(--ink);
  color: var(--surface);
}
.wiz-back svg,
.wiz-next svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); stroke-width: 2.6; }
.wiz-back:active,
.wiz-next:active { transform: scale(.95); }
/* czegoś brakuje: wygląda na nieaktywny, ale reaguje (potrząsa podpowiedzią) */
.wiz-next.is-waiting { background: var(--wiz-off); color: #FFFFFF; }
.wiz-next .ico-save { display: none; }
.wiz[data-step="4"] .wiz-next .ico-next { display: none; }
.wiz[data-step="4"] .wiz-next .ico-save { display: block; stroke-width: 3; }
.wiz-hint {
  margin: 0;
  padding: 0 calc(29 * var(--u));
  text-align: right;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--wiz-muted);
}
.wiz-hint.is-shake { animation: wiz-shake .42s ease; }
@keyframes wiz-shake {
  20% { translate: calc(-14 * var(--u)) 0; }
  40% { translate: calc(12 * var(--u)) 0; }
  60% { translate: calc(-8 * var(--u)) 0; }
  80% { translate: calc(4 * var(--u)) 0; }
}
/* krok 1 nie ma stopki (dalej idzie się wyborem zdjęcia), ale jej miejsce
   zostaje - karty stoją na tej samej wysokości co w projekcie */
.wiz[data-step="1"] .wiz-foot { visibility: hidden; }

/* --- KROK 1: skąd zdjęcie --- */

.src-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(39 * var(--u));
}
.src-card {
  position: relative;
  height: calc(639 * var(--u));
  border-radius: calc(63 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(98 * var(--u));
  color: #1B1B1B;
  text-align: center;
  transition: transform .24s var(--bounce);
}
.src-card.pressed { transform: scale(.97); }
.src-camera { background: #FFE43E; --src-ring: #FFF7C3; }
.src-gallery { background: #8BE6D8; --src-ring: #ABFFF0; }
.src-ico {
  width: calc(254 * var(--u));
  height: calc(254 * var(--u));
  border-radius: 50%;
  background: var(--src-ring);
  display: grid;
  place-items: center;
}
.src-ico svg { width: calc(168 * var(--u)); height: calc(168 * var(--u)); stroke-width: 1.9; }
.src-title {
  margin-top: calc(41 * var(--u));
  font-size: calc(54 * var(--u));
  font-weight: 900;
  line-height: 1.1;
}
.src-sub {
  margin-top: calc(54 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}
/* Pole pliku LEŻY NA karcie i to ono dostaje dotknięcie (patrz index.html). */
.src-card input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.src-hint {
  margin: calc(47 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: #808080;
}
.wiz-warning { margin-top: calc(20 * var(--u)); text-align: center; }

/* --- KROK 2: kadr --- */

.crop-layout {
  height: 100%;
  max-height: calc(886 * var(--u));
  display: grid;
  grid-template-columns: calc(1055 * var(--u)) minmax(0, 1fr);
  gap: calc(46 * var(--u));
}
.crop-stage {
  position: relative;
  height: 100%;
  border-radius: calc(54 * var(--u));
  background: #1A1A1A;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.crop-stage.is-dragging { cursor: grabbing; }
/* Ramka ma kształt KAFLA: szerokość 603, proporcja 328 : 370, promień jak
   na kaflu (0,154 szerokości) - to, co jest w ramce, trafia na kafel. */
.crop-frame,
.crop-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(603 * var(--u));
  aspect-ratio: 328 / 370;
  translate: -50% -50%;
  border-radius: calc(603 * var(--u) * .154);
}
.crop-frame img {
  position: absolute;
  max-width: none;
  max-height: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.crop-stage.is-easing .crop-frame img {
  transition: left .34s var(--ease), top .34s var(--ease), width .34s var(--ease), height .34s var(--ease);
}
.crop-frame img.is-turning { animation: crop-turn .46s var(--ease); }
@keyframes crop-turn { from { rotate: -90deg; scale: .82; opacity: .4; } }
/* Maska: wszystko POZA ramką przyciemnione (ogromny cień), biała obwódka,
   siatka trójpodziału i przerywana pastylka „tu będzie podpis” w dokładnym
   miejscu i rozmiarze prawdziwego podpisu kafla. */
.crop-mask {
  pointer-events: none;
  box-shadow: 0 0 0 calc(1400 * var(--u)) rgba(26, 26, 26, .6);
}
.crop-mask::after {
  content: "";
  position: absolute;
  inset: calc(-2 * var(--u));
  border: calc(4 * var(--u)) solid #FFFFFF;
  border-radius: inherit;
}
.crop-grid {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  --gl: rgba(255, 255, 255, .34);
  background:
    linear-gradient(90deg, transparent calc(33.333% - 1px), var(--gl) calc(33.333% - 1px) calc(33.333% + 1px), transparent calc(33.333% + 1px)),
    linear-gradient(90deg, transparent calc(66.666% - 1px), var(--gl) calc(66.666% - 1px) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(180deg, transparent calc(33.333% - 1px), var(--gl) calc(33.333% - 1px) calc(33.333% + 1px), transparent calc(33.333% + 1px)),
    linear-gradient(180deg, transparent calc(66.666% - 1px), var(--gl) calc(66.666% - 1px) calc(66.666% + 1px), transparent calc(66.666% + 1px));
  opacity: 0;
  transition: opacity .25s ease;
}
.crop-stage.is-dragging .crop-grid { opacity: 1; }
.crop-cap {
  position: absolute;
  left: calc(603 * var(--u) * .056);
  right: calc(603 * var(--u) * .056);
  bottom: calc(603 * var(--u) * .063);
  height: calc(603 * var(--u) * .244);
  border: calc(3 * var(--u)) dashed rgba(255, 255, 255, .92);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-size: calc(28 * var(--u));
  font-weight: 800;
  text-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .35);
}

.crop-side {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
  padding-top: calc(20 * var(--u));
}
.crop-tip {
  display: grid;
  grid-template-columns: calc(58 * var(--u)) 1fr;
  align-items: start;
  gap: calc(22 * var(--u));
  margin: 0 0 calc(11 * var(--u));
  font-size: calc(31 * var(--u));
  font-weight: 700;
  line-height: 1.38;
}
.crop-tip svg { width: calc(58 * var(--u)); height: calc(58 * var(--u)); stroke-width: 1.9; }
.zoom-card {
  padding: calc(30 * var(--u)) calc(28 * var(--u)) calc(29 * var(--u)) calc(30 * var(--u));
  border-radius: calc(50 * var(--u));
  background: var(--wiz-soft);
}
.zoom-label {
  display: block;
  font-size: calc(30 * var(--u));
  font-weight: 800;
  line-height: 1.2;
}
.zoom-row {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  margin-top: calc(20 * var(--u));
}
.zoom-btn {
  flex: 0 0 auto;
  width: calc(95 * var(--u));
  height: calc(95 * var(--u));
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: transform .22s var(--bounce);
}
.zoom-btn svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); stroke-width: 2.6; }
.zoom-btn:active { transform: scale(.9); }
/* Suwak jak w projekcie: cienki biały tor i mała ciemna gałka - ale sama
   gałka jest DUŻA i przezroczysta dookoła kropki, żeby łatwo ją złapać. */
.zoom-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: calc(64 * var(--u));
  margin: 0;
  background: transparent;
}
.zoom-range::-webkit-slider-runnable-track {
  height: calc(14 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #DADADA;
}
.zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin-top: calc(-25 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 calc(13 * var(--u)), transparent calc(14 * var(--u)));
}
.zoom-range::-moz-range-track {
  height: calc(14 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
}
.zoom-range::-moz-range-thumb {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.wiz-tool {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  height: calc(112 * var(--u));
  padding: 0 calc(40 * var(--u)) 0 calc(41 * var(--u));
  border-radius: var(--r-pill);
  background: var(--wiz-soft);
  font-size: calc(34 * var(--u));
  font-weight: 800;
  text-align: left;
  transition: transform .22s var(--bounce);
}
.wiz-tool svg { flex: 0 0 auto; width: calc(50 * var(--u)); height: calc(50 * var(--u)); stroke-width: 2.3; }
.wiz-tool svg .dots { stroke-dasharray: .1 2.6; stroke-width: 2.6; }
.wiz-tool:active { transform: scale(.96); }
.wiz-tool:disabled { opacity: .5; }

/* --- KROK 3 i 4: kafel + kolumna --- */

.wiz-split {
  display: grid;
  align-items: center;
}
.wiz-split-caption { grid-template-columns: calc(542 * var(--u)) minmax(0, 1fr); gap: calc(78 * var(--u)); }
.wiz-split-voice { grid-template-columns: calc(447 * var(--u)) minmax(0, 1fr); gap: calc(65 * var(--u)); }

/* PRAWDZIWY kafel planszy w innym rozmiarze: wszystko w nim liczy się od
   --cw, więc wystarczy podać szerokość (i promień, który :root policzył ze
   swojej --cw). */
.wiz-tile {
  pointer-events: none;
  background: var(--wiz-soft);
}
.wiz-split-caption .wiz-tile { --cw: calc(542 * var(--u)); --r-card: calc(542 * var(--u) * .154); }
.wiz-split-voice .wiz-tile { --cw: calc(447 * var(--u)); --r-card: calc(447 * var(--u) * .154); }
.wiz-tile .card-art img:not([src]) { visibility: hidden; }
.wiz-tile .caption:empty { visibility: hidden; }
.wiz-tile .caption.is-empty { color: #BDBDBD; }

.wiz-q {
  margin: 0;
  font-size: calc(40 * var(--u));
  font-weight: 900;
  line-height: 1.2;
}
.wiz-sub {
  margin: calc(20 * var(--u)) 0 0;
  font-size: calc(29 * var(--u));
  font-weight: 700;
  color: var(--wiz-muted);
}
.wiz-input {
  display: block;
  width: 100%;
  height: calc(148 * var(--u));
  margin-top: calc(25 * var(--u));
  padding: 0 calc(58 * var(--u));
  border: 0;
  border-radius: var(--r-pill);
  background: var(--wiz-soft);
  font-size: calc(58 * var(--u));
  font-weight: 800;
  color: var(--ink);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  caret-color: var(--ink);
}
.wiz-input::placeholder { color: #767676; opacity: 1; }
.wiz-meta {
  display: flex;
  justify-content: space-between;
  margin-top: calc(26 * var(--u));
  padding: 0 calc(32 * var(--u)) 0 calc(33 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 700;
  color: var(--wiz-muted);
}
.wiz-listen {
  align-self: flex-start;
  height: calc(101 * var(--u));
  margin-top: calc(28 * var(--u));
  padding: 0 calc(44 * var(--u)) 0 calc(43 * var(--u));
  gap: calc(24 * var(--u));
  font-size: calc(33 * var(--u));
}
.wiz-col { display: flex; flex-direction: column; min-width: 0; }

/* wybór głosu */
.voice-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(23 * var(--u));
  margin-top: calc(32 * var(--u));
}
.voice-opt {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  height: calc(140 * var(--u));
  padding: 0 calc(30 * var(--u)) 0 calc(45 * var(--u));
  border-radius: calc(50 * var(--u));
  background: var(--wiz-soft);
  font-size: calc(33 * var(--u));
  font-weight: 800;
  text-align: left;
  transition: background-color .25s ease, box-shadow .25s ease, transform .22s var(--bounce);
}
.voice-opt svg { flex: 0 0 auto; width: calc(58 * var(--u)); height: calc(58 * var(--u)); stroke-width: 2.2; }
.voice-opt:active { transform: scale(.97); }
/* zaznaczony: białe pole, ciemna obwódka i złoty rant na zewnątrz (projekt) */
.voice-opt[aria-pressed="true"] {
  background: var(--surface);
  box-shadow:
    inset 0 0 0 calc(2.5 * var(--u)) var(--ink),
    0 0 0 calc(2.5 * var(--u)) #E0A21E;
}

/* panel nagrania */
.rec-panel {
  display: grid;
  grid-template-columns: calc(239 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(39 * var(--u));
  height: calc(338 * var(--u));
  margin-top: calc(30 * var(--u));
  padding: 0 calc(38 * var(--u));
  border-radius: calc(56 * var(--u));
  background: var(--wiz-soft);
}
.rec-big {
  width: calc(239 * var(--u));
  height: calc(239 * var(--u));
  border-radius: 50%;
  background: var(--wiz-rec);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  font-size: calc(31 * var(--u));
  font-weight: 900;
  transition: background-color .3s ease, transform .22s var(--bounce);
}
.rec-big:active { transform: scale(.94); }
.rec-big svg { width: calc(104 * var(--u)); height: calc(104 * var(--u)); stroke-width: 2.3; display: none; }
.rec-panel[data-state="idle"] .ico-mic,
.rec-panel[data-state="recording"] .ico-stop,
.rec-panel[data-state="playing"] .ico-stop,
.rec-panel[data-state="done"] .ico-play,
.rec-panel[data-state="app"] .ico-play { display: block; }
.rec-panel[data-state="recording"] .rec-big { animation: rec-pulse 1.3s ease-out infinite; }
.rec-panel[data-state="done"] .rec-big,
.rec-panel[data-state="playing"] .rec-big,
.rec-panel[data-state="app"] .rec-big { background: var(--ink); color: var(--surface); }
@keyframes rec-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 72, 89, .5); }
  100% { box-shadow: 0 0 0 calc(34 * var(--u)) rgba(245, 72, 89, 0); }
}

.rec-info { min-width: 0; }
.rec-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(96 * var(--u));
}
.rec-wave i {
  flex: 0 0 auto;
  width: calc(22 * var(--u));
  height: calc(10 * var(--u) + var(--h, 0) * 86 * var(--u));
  border-radius: var(--r-pill);
  background: #C9C9C9;
  transition: height .12s linear, background-color .2s ease;
}
.rec-panel[data-state="recording"] .rec-wave i { background: var(--wiz-rec); }
.rec-panel[data-state="done"] .rec-wave i,
.rec-panel[data-state="playing"] .rec-wave i { background: var(--ink); }
.rec-wave i.is-played { background: var(--say) !important; }
.rec-panel[data-state="app"] .rec-wave { opacity: .45; }

.rec-line {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  min-height: calc(64 * var(--u));
  margin: calc(18 * var(--u)) 0 0;
  font-size: calc(28 * var(--u));
  font-weight: 700;
}
.rec-line b { font-size: calc(34 * var(--u)); font-weight: 900; font-variant-numeric: tabular-nums; }
.rec-panel[data-state="app"] .rec-line b { display: none; }
/* po nagraniu zamiast podpowiedzi: nagraj jeszcze raz / usuń */
.rec-actions { display: none; gap: calc(12 * var(--u)); }
.rec-panel[data-state="done"] #recHint,
.rec-panel[data-state="playing"] #recHint { display: none; }
.rec-panel[data-state="done"] .rec-actions,
.rec-panel[data-state="playing"] .rec-actions { display: flex; }
.rec-mini {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(64 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(22 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: calc(26 * var(--u));
  font-weight: 800;
  transition: transform .22s var(--bounce);
}
.rec-mini svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); stroke-width: 2.4; }
.rec-mini:active { transform: scale(.94); }
.rec-mini-del { width: calc(64 * var(--u)); padding: 0; justify-content: center; color: var(--danger); }


/* =====================================================================
   PIN: KLAWIATURA I ODZYSKIWANIE MAILEM (projekt użytkownika 23.09.2026)
   =====================================================================
   Zrzuty zmierzone pikselowo, przelicznik 1 px zrzutu = 1,7 jednostki --u
   (krzyżyk ⌀45 px -> 76). Karta PIN 748 x 1200: tytuł 41/900, kropki ⌀32
   co 72, klawisze ⌀114 w siatce 166 x 146, „Nie pamiętasz kodu PIN?”
   428 x 83 z obwódką. Okno odzyskiwania 1231 x 473: tytuł 48/900 w dwóch
   liniach, pole 636 x 107, zielony „Odzyskaj” 272 x 107. */

.pin-overlay { --pin-key: #EEEEEE; }
:root[data-theme="dark"] .pin-overlay { --pin-key: var(--line); }

.pin-card,
.pin-recover {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border-radius: calc(76 * var(--u));
  animation: panel-in .42s var(--spring-smooth);
}
.pin-card.is-closing { animation: pin-out .18s ease both; }
@keyframes pin-out { to { opacity: 0; scale: .94; } }

.pin-close {
  position: absolute;
  top: calc(65 * var(--u));
  right: calc(63 * var(--u));
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  border-radius: 50%;
  background: var(--pin-key);
  display: grid;
  place-items: center;
  transition: transform .22s var(--bounce);
}
.pin-close:active { transform: scale(.88); }
.pin-close svg {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.pin-card {
  width: calc(748 * var(--u));
  max-height: 100%;
  padding: calc(169 * var(--u)) 0 calc(92 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pin-title {
  margin: 0;
  font-size: calc(41 * var(--u));
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.pin-dots {
  display: flex;
  gap: calc(40 * var(--u));
  margin-top: calc(40 * var(--u));
}
.pin-dots i {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(3.5 * var(--u)) var(--ink);
  transition: background-color .12s ease;
}
.pin-dots i.on { background: var(--ink); animation: pin-dot-in .24s var(--bounce-in); }
@keyframes pin-dot-in { from { scale: .5; } }
.pin-dots.shake { animation: pin-shake .42s ease; }
@keyframes pin-shake {
  20% { translate: calc(-22 * var(--u)) 0; }
  40% { translate: calc(18 * var(--u)) 0; }
  60% { translate: calc(-12 * var(--u)) 0; }
  80% { translate: calc(6 * var(--u)) 0; }
}
/* komunikat stoi w stałym pasie między kropkami a klawiszami - nic nie skacze */
.pin-card .pin-error {
  height: calc(87 * var(--u));
  margin: 0;
  display: grid;
  place-items: center;
  font-size: calc(26 * var(--u));
  font-weight: 800;
  color: var(--danger);
}
.pin-keys {
  display: grid;
  grid-template-columns: repeat(3, calc(114 * var(--u)));
  column-gap: calc(52 * var(--u));
  row-gap: calc(32 * var(--u));
}
.pin-key {
  width: calc(114 * var(--u));
  height: calc(114 * var(--u));
  border-radius: 50%;
  background: var(--pin-key);
  color: var(--ink);
  font-size: calc(36 * var(--u));
  font-weight: 900;
  display: grid;
  place-items: center;
  touch-action: manipulation;
  transition: background-color .16s ease, color .16s ease, transform .2s var(--bounce);
}
/* wciśnięty = czarny, jak „7” w projekcie */
.pin-key.is-down { background: var(--ink); color: var(--surface); transform: scale(.95); }
.pin-key-back { background: transparent; }
.pin-key-back.is-down { background: var(--pin-key); color: var(--ink); }
.pin-key-back svg { width: calc(46 * var(--u)); height: calc(36 * var(--u)); }
.pin-key-back .bk-shape { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.pin-key-back .bk-x { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.pin-forgot {
  margin-top: calc(95 * var(--u));
  width: calc(428 * var(--u));
  height: calc(83 * var(--u));
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 calc(3.5 * var(--u)) var(--ink);
  font-size: calc(28 * var(--u));
  font-weight: 800;
  transition: transform .2s var(--bounce), background-color .16s ease;
}
.pin-forgot:active { transform: scale(.96); background: var(--pin-key); }

.pin-recover {
  width: calc(1231 * var(--u));
  max-width: 100%;
  padding: calc(98 * var(--u)) calc(40 * var(--u)) calc(85 * var(--u));
}
.pin-recover .pin-close { top: calc(44 * var(--u)); right: calc(53 * var(--u)); }
.pin-recover-title {
  margin: 0;
  font-size: calc(48 * var(--u));
  font-weight: 800;
  line-height: calc(58 * var(--u));
  text-align: center;
}
/* druga linia z projektu zawsze w jednym kawałku */
.pin-recover-title span { white-space: nowrap; }
.pin-recover-row {
  display: flex;
  justify-content: center;
  gap: calc(37 * var(--u));
  margin-top: calc(65 * var(--u));
}
.pin-recover-input {
  width: calc(636 * var(--u));
  height: calc(107 * var(--u));
  padding: 0 calc(61 * var(--u));
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pin-key);
  color: var(--ink);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.pin-recover-input::placeholder { color: var(--ink); opacity: .85; }
.pin-recover-btn {
  width: calc(272 * var(--u));
  height: calc(107 * var(--u));
  border-radius: var(--r-pill);
  background: var(--say);
  color: #FFFFFF;
  font-size: calc(40 * var(--u));
  font-weight: 900;
  transition: transform .2s var(--bounce), opacity .2s ease;
}
.pin-recover-btn:active { transform: scale(.95); }
.pin-recover-btn:disabled { opacity: .65; }
/* komunikat pod polem - w dolnym marginesie, okno nie zmienia wysokości */
.pin-recover-msg {
  position: absolute;
  left: calc(90 * var(--u));
  right: calc(90 * var(--u));
  bottom: calc(22 * var(--u));
  margin: 0;
  text-align: center;
  font-size: calc(25 * var(--u));
  font-weight: 800;
  line-height: 1.25;
}
.pin-recover-msg[data-kind="error"] { color: var(--danger); }
.pin-recover-msg[data-kind="ok"] { color: #2E9E2E; }
/* klawiatura iPada zasłania dół ekranu - okno z polem e-mail idzie wtedy do góry */
.pin-overlay:has(.pin-recover-input:focus) { align-items: flex-start; padding-top: calc(90 * var(--u)); }

/* =====================================================================
   TELEFON (data-phone z <head> index.html) - ZAWSZE W POZIOMIE
   =====================================================================
   Od 23.09.2026 (druga prośba rodzica) telefon, tak jak tablet, zawsze
   pokazuje aplikację w poziomie - trzymany pionowo dostaje obrót dokumentu.
   Skala: --u = min(szerokość / 2000, wysokość / 1000), czyli ekran telefonu
   ma ~2000 jednostek szerokości (jak tablet), ale tylko ~1000 wysokości
   zamiast 1390. Reguły poniżej NADPISUJĄ układ tabletu tylko tam, gdzie
   liczy się wysokość: marginesy, pasek górny, pasek kategorii, klawiatura,
   ekrany Nauki, okna. Marginesy omijają wycięcie ekranu i pasek domowy
   (safe-area; przy obrocie krawędzie ekranu i aplikacji się zamieniają). */

:root[data-phone] {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}
/* obrócony (telefon trzymany pionowo): lewa krawędź aplikacji leży na
   górze ekranu, prawa na dole, górna po prawej, dolna po lewej */
:root[data-phone][data-rot="1"] {
  --sa-t: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-left, 0px);
  --sa-l: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-bottom, 0px);
}

:root[data-phone] .app {
  gap: calc(20 * var(--u));
  padding:
    max(calc(20 * var(--u)), var(--sa-t))
    max(calc(40 * var(--u)), var(--sa-r))
    max(calc(20 * var(--u)), var(--sa-b))
    max(calc(40 * var(--u)), var(--sa-l));
}

/* --- pasek górny: niższy (163 -> 130) --- */
:root[data-phone] .topbar { height: calc(130 * var(--u)); }
:root[data-phone] .logo-btn { width: calc(100 * var(--u)); height: calc(110 * var(--u)); margin-bottom: calc(-10 * var(--u)); }
:root[data-phone] .gear-btn { width: calc(100 * var(--u)); height: calc(100 * var(--u)); margin-left: calc(28 * var(--u)); }
:root[data-phone] .gear-btn .material-symbols-rounded { font-size: calc(48 * var(--u)); }
:root[data-phone] .saybar { margin-left: calc(40 * var(--u)); padding-right: 0; gap: calc(24 * var(--u)); }
:root[data-phone] .say-field { height: calc(100% - 10 * var(--u)); }
:root[data-phone] .sentence-chip { height: calc(94 * var(--u)); }
:root[data-phone] .sentence-chip img { width: calc(68 * var(--u)); height: calc(68 * var(--u)); }
:root[data-phone] .pill-btn { height: calc(112 * var(--u)); }
:root[data-phone] .pill-dark { width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
:root[data-phone] .pill-go { padding: 0 calc(56 * var(--u)); }
:root[data-phone][data-kbd] .kbd-close,
:root[data-phone][data-learn] .kbd-close { width: calc(100 * var(--u)); height: calc(100 * var(--u)); margin-left: 0; }

/* --- kategorie i plansza --- */
:root[data-phone] .stage { gap: calc(28 * var(--u)); }
:root[data-phone] .rail { width: calc(236 * var(--u)); padding: calc(28 * var(--u)); gap: calc(20 * var(--u)); }
:root[data-phone] .cat-tile { padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); }
:root[data-phone] .cat-ico img { height: calc(var(--ico-h, 70) * var(--u) * .85); }
:root[data-phone] .cat-label { height: calc(44 * var(--u)); font-size: calc(22 * var(--u)); }
:root[data-phone] .board { padding: calc(26 * var(--u)) calc(30 * var(--u)); }
:root[data-phone] .pictogram-grid { gap: calc(24 * var(--u)); }

/* --- LITERY: klawiatura niższa, przyklejona do dołu ekranu --- */
:root[data-phone] { --kbd-h: calc(520 * var(--u)); }
:root[data-phone] .kbd {
  top: auto;
  height: calc(var(--kbd-h) + max(calc(20 * var(--u)), var(--sa-b)));
  padding: calc(44 * var(--u)) 0 max(calc(20 * var(--u)), var(--sa-b));
  gap: calc(18 * var(--u));
  border-radius: calc(64 * var(--u)) calc(64 * var(--u)) 0 0;
}
:root[data-phone] .kbd-row { gap: calc(16 * var(--u)); }
:root[data-phone] .kbd-key { width: calc(150 * var(--u)); height: calc(102 * var(--u)); border-radius: calc(24 * var(--u)); }
:root[data-phone] .kbd-glyph { font-size: calc(48 * var(--u)); }
:root[data-phone] .kbd-ico { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
:root[data-phone] .kbd-key.wide { width: calc(196 * var(--u)); }
:root[data-phone] .kbd-key.k-num { width: calc(206 * var(--u)); }
:root[data-phone] .kbd-key.k-space { width: calc(660 * var(--u)); }
:root[data-phone] .kbd-key.k-enter { width: calc(372 * var(--u)); }
:root[data-phone] .kbd-display {
  top: auto;
  bottom: calc(var(--kbd-h) + 80 * var(--u));
  height: calc(210 * var(--u));
  font-size: calc(169 * var(--u) * var(--kbd-scale, 1));
}
:root[data-phone] .letter-suggestion {
  height: calc(76 * var(--u));
  margin-right: calc(24 * var(--u));
  font-size: calc(38 * var(--u));
}

/* --- NAUKA --- */
:root[data-phone] .learn-bar { margin-left: calc(40 * var(--u)); padding-right: 0; }
:root[data-phone] .learn-title { height: calc(100 * var(--u)); }
:root[data-phone] .learn-title b { font-size: calc(44 * var(--u)); }
:root[data-phone] .learn-hello { margin-left: calc(40 * var(--u)); }
:root[data-phone] .syl-bar-btn { height: calc(88 * var(--u)); }
:root[data-phone][data-learn-menu] .board { padding: 0; }
:root[data-phone] .syl-screen { inset: calc(6 * var(--u)) 0 0; }

:root[data-phone] .syl-hub { gap: calc(28 * var(--u)); }
:root[data-phone] .syl-hub-card { gap: calc(44 * var(--u)); padding: 0 calc(56 * var(--u)); border-radius: calc(56 * var(--u)); }
:root[data-phone] .syl-hub-ico { width: calc(180 * var(--u)); height: calc(180 * var(--u)); }
:root[data-phone] .syl-hub-ico svg { width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
:root[data-phone] .syl-hub-text b { font-size: calc(58 * var(--u)); }

:root[data-phone] .syl-layout { grid-template-columns: calc(540 * var(--u)) minmax(0, 1fr); gap: calc(28 * var(--u)); }
:root[data-phone] .syl-pic-card { padding: calc(26 * var(--u)); gap: calc(20 * var(--u)); border-radius: calc(56 * var(--u)); }
:root[data-phone] .syl-listen { height: calc(96 * var(--u)); font-size: calc(32 * var(--u)); }
:root[data-phone] .syl-right { gap: calc(24 * var(--u)); }
:root[data-phone] .syl-right-build { gap: calc(30 * var(--u)); }
:root[data-phone] .syl-slots-card { min-height: calc(300 * var(--u)); padding: calc(34 * var(--u)); border-radius: calc(56 * var(--u)); }
:root[data-phone] .syl-slot { flex-basis: calc(280 * var(--u)); height: calc(220 * var(--u)); font-size: calc(100 * var(--u)); }
:root[data-phone] .syl-tiles { gap: calc(20 * var(--u)); }
:root[data-phone] .syl-tile { min-width: calc(220 * var(--u)); height: calc(160 * var(--u)); font-size: calc(84 * var(--u)); }
:root[data-phone] .syl-panel { padding: calc(36 * var(--u)); border-radius: calc(56 * var(--u)); }
:root[data-phone] .syl-question { font-size: calc(44 * var(--u)); margin-bottom: calc(34 * var(--u)); }
:root[data-phone] .syl-option { min-width: calc(250 * var(--u)); height: calc(210 * var(--u)); }
:root[data-phone] .syl-hear { width: calc(300 * var(--u)); height: calc(300 * var(--u)); }
:root[data-phone] .syl-hear .material-symbols-rounded { font-size: calc(120 * var(--u)); }
:root[data-phone] .syl-hear b { font-size: calc(44 * var(--u)); }
:root[data-phone] .syl-choices { gap: calc(24 * var(--u)); }
:root[data-phone] .syl-choice { border-radius: calc(48 * var(--u)); font-size: calc(96 * var(--u)); }
:root[data-phone] .syl-choices.is-syl .syl-choice { font-size: calc(130 * var(--u)); }
:root[data-phone] .syl-memory { gap: calc(22 * var(--u)); }
:root[data-phone] .syl-mem-back,
:root[data-phone] .syl-mem-front { border-radius: calc(40 * var(--u)); }
:root[data-phone] .syl-mem-back .material-symbols-rounded { font-size: calc(84 * var(--u)); }
:root[data-phone] .syl-mem-front b { font-size: calc(70 * var(--u)); }
:root[data-phone] .syl-empty { padding: 0 calc(120 * var(--u)); }

/* tryb terapeuty: strefy niższe, żeby cztery mieściły się bez przewijania */
:root[data-phone] .syl-ther-nav { gap: calc(18 * var(--u)); }
:root[data-phone] .syl-zone { flex: 1 1 calc(150 * var(--u)); min-height: calc(140 * var(--u)); gap: calc(24 * var(--u)); padding: 0 calc(28 * var(--u)); border-radius: calc(48 * var(--u)); }
:root[data-phone] .syl-zone-ico { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
:root[data-phone] .syl-zone-ico svg { width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
:root[data-phone] .syl-zone-text b { font-size: calc(34 * var(--u)); }
:root[data-phone] .syl-card { padding: calc(34 * var(--u)); border-radius: calc(52 * var(--u)); }
:root[data-phone] .syl-cfg-row { flex-wrap: wrap; row-gap: calc(16 * var(--u)); }

/* scena wygranej ma 1390 wysokości - jej treść (ludzik, apla) zajmuje
   środkowe ~770 jednostek, więc mieści się, gdy scena lekko zmaleje */
:root[data-phone] .win-stage { scale: .9; }

/* --- USTAWIENIA: ciaśniej w pionie, bez nagłówka nad listą sekcji --- */
:root[data-phone] .settings-screen .settings-panel {
  gap: calc(40 * var(--u));
  padding:
    max(calc(24 * var(--u)), var(--sa-t))
    max(calc(40 * var(--u)), var(--sa-r))
    max(calc(24 * var(--u)), var(--sa-b))
    max(calc(40 * var(--u)), var(--sa-l));
}
:root[data-phone] .side-head { display: none; }
:root[data-phone] .settings-side { padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); }
:root[data-phone] .side-item { height: calc(84 * var(--u)); }
:root[data-phone] .side-nav-pill { height: calc(84 * var(--u)); }
:root[data-phone] .side-foot { margin-top: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(22 * var(--u)); }
:root[data-phone] .settings-main-head { flex-basis: calc(110 * var(--u)); }
:root[data-phone] .settings-titles h1 { font-size: calc(50 * var(--u)); }
:root[data-phone] .btn-done { margin-top: calc(6 * var(--u)); }
:root[data-phone] .settings-card { padding: calc(40 * var(--u)) calc(50 * var(--u)); }

/* --- KREATOR ZDJĘCIA: niższe karty i kafle, żeby strona mieściła się
   między głową a stopką --- */
:root[data-phone] .wiz-overlay { padding: 0; }
:root[data-phone] .wiz {
  width: min(calc(1758 * var(--u)), calc(100% - 2 * max(calc(20 * var(--u)), var(--sa-l), var(--sa-r))));
  height: calc(100% - 2 * max(calc(16 * var(--u)), var(--sa-b)));
  padding: calc(30 * var(--u)) calc(46 * var(--u)) calc(28 * var(--u));
  border-radius: calc(60 * var(--u));
}
:root[data-phone] .wiz-head { height: calc(90 * var(--u)); margin-bottom: calc(24 * var(--u)); }
:root[data-phone] .wiz-close { width: calc(90 * var(--u)); height: calc(90 * var(--u)); }
:root[data-phone] .wiz-foot { margin-top: calc(24 * var(--u)); }
:root[data-phone] .wiz-back,
:root[data-phone] .wiz-next { height: calc(104 * var(--u)); }
:root[data-phone] .src-card { height: calc(470 * var(--u)); padding-top: calc(56 * var(--u)); }
:root[data-phone] .src-ico { width: calc(200 * var(--u)); height: calc(200 * var(--u)); }
:root[data-phone] .src-ico svg { width: calc(130 * var(--u)); height: calc(130 * var(--u)); }
:root[data-phone] .src-title { margin-top: calc(30 * var(--u)); }
:root[data-phone] .src-sub { margin-top: calc(26 * var(--u)); }
:root[data-phone] .src-hint { margin-top: calc(26 * var(--u)); }
/* kadr: ramka w kształcie kafla mniejsza (603 -> 430), podpis liczony od niej */
:root[data-phone] .crop-layout { max-height: none; }
:root[data-phone] .crop-frame,
:root[data-phone] .crop-mask { width: calc(430 * var(--u)); border-radius: calc(430 * var(--u) * .154); }
:root[data-phone] .crop-cap {
  left: calc(430 * var(--u) * .056);
  right: calc(430 * var(--u) * .056);
  bottom: calc(430 * var(--u) * .063);
  height: calc(430 * var(--u) * .244);
  font-size: calc(24 * var(--u));
}
:root[data-phone] .crop-side { gap: calc(14 * var(--u)); padding-top: 0; }
:root[data-phone] .crop-tip { margin: 0; font-size: calc(26 * var(--u)); line-height: 1.3; }
:root[data-phone] .crop-tip svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
:root[data-phone] .wiz-tool { height: calc(80 * var(--u)); font-size: calc(30 * var(--u)); }
:root[data-phone] .wiz-tool svg { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
:root[data-phone] .zoom-card { padding: calc(18 * var(--u)) calc(24 * var(--u)); border-radius: calc(40 * var(--u)); }
:root[data-phone] .zoom-label { font-size: calc(27 * var(--u)); }
:root[data-phone] .zoom-row { margin-top: calc(10 * var(--u)); }
:root[data-phone] .zoom-btn { width: calc(76 * var(--u)); height: calc(76 * var(--u)); }
/* krok 4: niższe przyciski wyboru głosu i panel nagrania */
:root[data-phone] .voice-opts { margin-top: calc(22 * var(--u)); }
:root[data-phone] .voice-opt { height: calc(104 * var(--u)); font-size: calc(30 * var(--u)); gap: calc(22 * var(--u)); }
:root[data-phone] .voice-opt svg { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
:root[data-phone] .rec-panel { height: calc(270 * var(--u)); margin-top: calc(22 * var(--u)); grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr); gap: calc(32 * var(--u)); }
:root[data-phone] .rec-big { width: calc(200 * var(--u)); height: calc(200 * var(--u)); font-size: calc(28 * var(--u)); }
:root[data-phone] .rec-big svg { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
:root[data-phone] .wiz-split-caption { grid-template-columns: calc(400 * var(--u)) minmax(0, 1fr); gap: calc(60 * var(--u)); }
:root[data-phone] .wiz-split-voice { grid-template-columns: calc(380 * var(--u)) minmax(0, 1fr); gap: calc(56 * var(--u)); }
:root[data-phone] .wiz-split-caption .wiz-tile { --cw: calc(400 * var(--u)); --r-card: calc(400 * var(--u) * .154); }
:root[data-phone] .wiz-split-voice .wiz-tile { --cw: calc(380 * var(--u)); --r-card: calc(380 * var(--u) * .154); }

/* --- PIN: niższa karta (1200 -> ~870) --- */
:root[data-phone] .overlay { padding: calc(30 * var(--u)); }
:root[data-phone] .pin-card { padding: calc(86 * var(--u)) 0 calc(48 * var(--u)); }
:root[data-phone] .pin-close { top: calc(34 * var(--u)); right: calc(40 * var(--u)); }
:root[data-phone] .pin-dots { margin-top: calc(24 * var(--u)); }
:root[data-phone] .pin-card .pin-error { height: calc(60 * var(--u)); }
:root[data-phone] .pin-keys { grid-template-columns: repeat(3, calc(96 * var(--u))); row-gap: calc(18 * var(--u)); column-gap: calc(48 * var(--u)); }
:root[data-phone] .pin-key { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
:root[data-phone] .pin-forgot { margin-top: calc(40 * var(--u)); }

/* teksty zależne od urządzenia (np. liczba kafli w rzędzie w Ustawieniach) */
.only-phone { display: none; }
:root[data-phone] .only-phone { display: inline; }
:root[data-phone] .only-tablet { display: none; }


/* ============ GRY (gry.js, 25.09.2026) ============
   Plansza gier = plansza Nauki (.syl-hub), tylko w lawendzie kategorii. */
.gry-screen { --syl-accent: #C3B1FF; --syl-soft: #EEE8FF; }
:root[data-theme="dark"] .gry-screen { --syl-soft: #2E2A40; }
.gry-hub .syl-hub-card { position: relative; }
.gry-hub-ico svg { width: calc(140 * var(--u)); height: calc(140 * var(--u)); }
.syl-hub-card.is-soon .syl-hub-ico { filter: saturate(.55); opacity: .75; }
.syl-hub-card.is-soon .syl-hub-text b { color: var(--ink-2); }
.gry-soon {
  position: absolute;
  top: calc(34 * var(--u));
  right: calc(40 * var(--u));
  padding: calc(8 * var(--u)) calc(22 * var(--u));
  border-radius: var(--r-pill);
  background: var(--syl-soft);
  font-size: calc(24 * var(--u));
  font-weight: 800;
}

/* Z kim grasz: dwie duże karty */
.gry-modes {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(44 * var(--u));
}
.gry-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  padding: calc(40 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
  text-align: center;
  animation: card-in var(--t-snappy) var(--spring-snappy) both, card-fade .26s ease-out both;
  animation-delay: var(--in-delay, 0ms), var(--in-delay, 0ms);
  transition: transform .22s var(--bounce);
}
.gry-mode-card:active { transform: scale(.97); }
.gry-mode-art {
  width: calc(330 * var(--u));
  height: calc(330 * var(--u));
  margin-bottom: calc(20 * var(--u));
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  display: grid;
  place-items: center;
}
.gry-mode-art svg { width: calc(200 * var(--u)); height: calc(200 * var(--u)); }
.gry-mode-card b { font-size: calc(66 * var(--u)); font-weight: 900; line-height: 1.05; }
.gry-mode-card > span:last-child { font-size: calc(32 * var(--u)); font-weight: 700; color: var(--ink-2); }

/* Gra: na górze dwie pastylki graczy (kółko + imię dziecka, krzyżyk +
   Gracz AI / Przyjaciel), pod spodem kwadratowa plansza na środku całego
   ekranu (03.10.2026). Czyja kolej - pastylka dostaje delikatny obrys
   w kolorze znaku, druga lekko przygasa; jedno i drugie płynnie i powoli. */
.gry-ttt {
  --gry-top-h: calc(120 * var(--u));
  --gry-gap: calc(36 * var(--u));
  --gry-bs: min(100cqw, 100cqh - var(--gry-top-h) - var(--gry-gap));
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gry-gap);
}
.gry-ttt-box { height: 100%; container-type: size; }
.gry-top {
  height: var(--gry-top-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
}
.gry-chip {
  --ring: transparent;
  height: 100%;
  min-width: calc(440 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding: 0 calc(44 * var(--u)) 0 calc(28 * var(--u));
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 calc(6 * var(--u)) var(--ring);
  /* gaśnie wolno */
  transition: box-shadow 1.4s ease-out, opacity 1.4s ease-out;
}
.gry-chip-o { --ring-on: color-mix(in srgb, #007BFF 55%, #FFFFFF); }
.gry-chip-x { --ring-on: color-mix(in srgb, #FF282B 55%, #FFFFFF); }
.gry-chip.is-turn { --ring: var(--ring-on); transition: box-shadow .6s ease-in-out, opacity .6s ease-in-out; }
.gry-top.has-turn .gry-chip:not(.is-turn) { opacity: .5; }
.gry-chip-mark { flex: none; display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
.gry-chip-mark .gry-mark { width: 100%; height: 100%; }
.gry-chip-name { flex: 1 1 auto; font-size: calc(46 * var(--u)); font-weight: 900; white-space: nowrap; }
.gry-chip b { margin-left: calc(14 * var(--u)); font-size: calc(54 * var(--u)); font-weight: 900; font-variant-numeric: tabular-nums; }
.gry-chip .ttt-dots { display: none; margin-left: 0; }
.gry-chip.is-thinking .ttt-dots { display: inline-flex; }

.gry-board {
  position: relative;
  flex: none;
  width: var(--gry-bs);
  height: var(--gry-bs);
  padding: calc(30 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: calc(22 * var(--u));
}
.gry-screen { --gry-win: color-mix(in srgb, var(--say) 48%, #FFFFFF); }
.gry-cell {
  min-width: 0;
  min-height: 0;
  border-radius: calc(42 * var(--u));
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: transform .2s var(--bounce), background .3s ease;
}
.gry-cell:disabled { cursor: default; }
.gry-cell:not(:disabled):active { transform: scale(.93); }
.gry-cell .gry-mark { width: 66%; height: 66%; }
.gry-cell.is-win { background: var(--gry-win); animation: gry-win var(--t-bouncy) var(--spring-bouncy); }
@keyframes gry-win { 45% { scale: 1.07; } }

/* postawiony znak się "rysuje": kółko dookoła, krzyżyk kreska po kresce */
.gry-mark.is-new circle,
.gry-mark.is-new path { stroke-dasharray: 1; animation: gry-draw .34s cubic-bezier(.3, .7, .3, 1) both; }
.gry-mark.is-new path:nth-child(2) { animation-delay: .16s; }
@keyframes gry-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.gry-mark.is-new { animation: gry-mark-pop var(--t-bouncy) var(--spring-bouncy); }
@keyframes gry-mark-pop { from { scale: .7; } }

.syl-bar-btn.is-nudge { animation: nudge 1.4s ease-in-out infinite; }

/* --- TELEFON: niższy ekran, mniejsze napisy --- */
:root[data-phone] .gry-ttt { --gry-top-h: calc(96 * var(--u)); --gry-gap: calc(24 * var(--u)); }
:root[data-phone] .gry-chip-name { font-size: calc(38 * var(--u)); }
:root[data-phone] .gry-chip { min-width: calc(360 * var(--u)); }
:root[data-phone] .gry-board { padding: calc(22 * var(--u)); gap: calc(16 * var(--u)); border-radius: calc(52 * var(--u)); }
:root[data-phone] .gry-mode-art { width: calc(240 * var(--u)); height: calc(240 * var(--u)); margin-bottom: 0; }
:root[data-phone] .gry-mode-art svg { width: calc(150 * var(--u)); height: calc(150 * var(--u)); }
:root[data-phone] .gry-mode-card b { font-size: calc(56 * var(--u)); }

/* --- Dopasuj figury i Balonik w Grach (mechanika z dawnej Nauki) --- */
.gry-play { height: 100%; display: flex; flex-direction: column; }
.gry-figury .dragdrop-stage { min-height: 0; height: 100%; gap: calc(40 * var(--u)); }
.gry-figury .dragdrop-divider { display: none; }
/* 25.09.2026: bez szarych teł pod figurami i obrysami, bez ptaszków, figury
   większe - 2 kolumny x 3 rzędy na stronę, kafel tak wysoki jak rząd */
.gry-figury .dragdrop-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  justify-items: center;
  gap: calc(14 * var(--u)) calc(20 * var(--u));
  padding: calc(26 * var(--u)) calc(40 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
}
.gry-figury .dragdrop-source-tile,
.gry-figury .dragdrop-target {
  height: 100%;
  width: auto;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  background: none;
}
.gry-figury .dragdrop-source-tile svg,
.gry-figury .dragdrop-target svg { width: 92%; height: 92%; }
.gry-figury .dragdrop-target { color: #B9BEC4; transition: color .2s ease; }
/* figura nad obrysem: obrys ciemnieje zamiast szarego tła */
.gry-figury .dragdrop-target.hover { background: none; color: var(--ink-2); }
.gry-figury .dragdrop-target.filled { background: none; }
.gry-figury .fill-check { display: none; }
:root[data-theme="dark"] .gry-figury .dragdrop-target { color: #5A626B; }

.gry-balonik .balloon-stage {
  /* na CAŁYM ekranie jak Piesek: niebo od krawędzi do krawędzi, krzyżyk apki leży na nim */
  position: fixed;
  inset: 0;
  z-index: 1;
  min-height: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #CFEFFF 0%, #EAF8FF 70%, #F6FCFF 100%);
}
/* Balonik bez końca (gry.js): pozycję liczy JS (left/bottom), bez animacji wznoszenia */
.gry-bal-endless .balloon { animation: none; transform: translateX(-50%); }
.gry-bal-endless .balloon.is-pop { animation: balloon-pop .18s ease forwards; }
.gry-bal-endless .balloon.is-escape { animation: bal-escape .5s ease-in-out 2; }
@keyframes bal-escape { 25% { transform: translateX(-50%) rotate(-8deg); } 75% { transform: translateX(-50%) rotate(8deg); } }
/* wynik jak w Piesku: biała karta z liczbą i turkusowy rekord */
.gry-bal-score {
  position: absolute;
  z-index: 3;
  top: calc(84 * var(--u));
  right: calc(160 * var(--u));
  width: calc(348 * var(--u));
  height: calc(161 * var(--u));
  border-radius: calc(29 * var(--u));
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform-origin: 50% 60%;
}
.gry-bal-score b { position: relative; top: calc(-15 * var(--u)); font-size: calc(68 * var(--u)); font-weight: 900; line-height: 1; color: #000; font-variant-numeric: tabular-nums; }
.gry-bal-score span {
  position: absolute;
  left: 50%;
  top: calc(130 * var(--u));
  transform: translateX(-50%);
  height: calc(62 * var(--u));
  padding: 0 calc(34 * var(--u));
  border-radius: 999px;
  background: #A9FFF3;
  display: flex;
  align-items: center;
  font-size: calc(22 * var(--u));
  font-weight: 800;
  color: #000;
  white-space: nowrap;
}
.gry-bal-score.bump { animation: bal-bump .6s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes bal-bump { 25% { transform: scale(1.14, 1.08); } 50% { transform: scale(.95, 1.03); } 75% { transform: scale(1.03); } }
.gry-bal-endless .balloon-goal { display: none; }
/* baloniki o 30% większe niż w dawnej Nauce (165 -> 215) */
.gry-balonik .balloon { width: calc(215 * var(--u) * var(--size, 1)); bottom: calc(-420 * var(--u)); }
:root[data-theme="dark"] .gry-balonik .balloon-stage { background: linear-gradient(180deg, #1B2B3A 0%, #22313F 100%); }

:root[data-phone] .gry-figury .dragdrop-col {
  /* telefon jest niski - tam więcej daje układ 3 x 2 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  padding: calc(24 * var(--u));
  gap: calc(12 * var(--u));
  border-radius: calc(52 * var(--u));
}
:root[data-phone] .gry-figury .dragdrop-stage { gap: calc(28 * var(--u)); }

/* --- Piesek (piesek.js): łąka na CAŁYM ekranie, jak w projekcie (Desktop/piesek.svg) -
   niebo od krawędzi do krawędzi, krzyżyk apki leży na nim w lewym górnym rogu. */
.gry-piesek .piesek-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  font-family: inherit;
}

/* --- GRA NA PEŁNYM EKRANIE (data-game-full, 25.09.2026) ---
   Bez paska z pastylką i wskazówką: pasek górny wychodzi z układu i zostaje
   z niego sam krzyżyk w lewym górnym rogu, a gra zajmuje całą resztę - od
   góry do dołu, od kolumny krzyżyka do prawej krawędzi. */
:root[data-game-full] .topbar {
  position: absolute;
  /* dokładnie w rogu obszaru .app (= jego padding) */
  top: calc(42 * var(--u));
  left: calc(62 * var(--u));
  height: auto;
  z-index: 5;
}
:root[data-game-full] .learn-bar { display: none; }
:root[data-game-full] .kbd-close { margin-left: 0; }
:root[data-game-full] .stage { margin-left: calc(116 * var(--u) + 36 * var(--u)); }
:root[data-game-full] .syl-screen { inset: 0; overflow: hidden; }
/* gra na pełnym ekranie: żadnego przewijanego pojemnika (iPad potrafił lekko
   podciągnąć planszę palcem) i równe marginesy u góry i u dołu (dół był o 16u
   większy, więc plansza siedziała wyżej) */
:root[data-game-full] .board { overflow: hidden; }
:root[data-game-full]:not([data-phone]) .app { padding-bottom: calc(42 * var(--u)); }
:root[data-game-full][data-learn-menu] .board { padding: 0; }
.gry-again { align-self: flex-start; margin-top: calc(20 * var(--u)); background: var(--bg); }

:root[data-phone][data-game-full] .topbar { top: max(calc(20 * var(--u)), var(--sa-t)); left: max(calc(40 * var(--u)), var(--sa-l)); }
:root[data-phone][data-game-full] .stage { margin-left: calc(100 * var(--u) + 24 * var(--u)); }

/* =====================================================================
   GRY › ZNAJDŹ OBRAZEK (gry.js, 03.10.2026)
   Na górze pytanie lektora w białej pastylce (dotknięcie = powtórz), pod
   nim 2-4 duże białe karty z obrazkami, kwadratowe i jak największe.
   ===================================================================== */
.gry-find {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(44 * var(--u));
}
.gry-find-q {
  flex: none;
  height: calc(130 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(28 * var(--u));
  padding: 0 calc(64 * var(--u)) 0 calc(40 * var(--u));
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: calc(58 * var(--u));
  font-weight: 900;
  transition: transform .2s var(--bounce);
}
.gry-find-q:active { transform: scale(.96); }
.gry-find-q .material-symbols-rounded {
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #002BFF;
  color: #FFFFFF;
  font-size: calc(50 * var(--u));
}
.gry-find-row {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(44 * var(--u));
}
.gry-find-card {
  flex: none;
  width: min(calc((100cqw - (var(--n) - 1) * 44 * var(--u)) / var(--n)), 100cqh);
  aspect-ratio: 1;
  border-radius: calc(64 * var(--u));
  background: var(--surface);
  display: grid;
  place-items: center;
  animation: card-in .56s cubic-bezier(.3, 1.3, .5, 1) both, card-fade .3s ease-out both;
  animation-delay: var(--in-delay, 0ms), var(--in-delay, 0ms);
  transition: transform .2s var(--bounce), opacity .4s ease, background .3s ease;
}
.gry-find-card img { width: 72%; height: 72%; object-fit: contain; pointer-events: none; }
.gry-find-card:active { transform: scale(.95); }
.gry-find-card.is-wrong { animation: gry-find-no .45s ease both; }
@keyframes gry-find-no {
  20% { translate: calc(-18 * var(--u)) 0; }
  45% { translate: calc(16 * var(--u)) 0; }
  70% { translate: calc(-8 * var(--u)) 0; }
}
.gry-find-card.is-right { background: color-mix(in srgb, var(--say) 40%, #FFFFFF); }
.gry-find-row.is-done .gry-find-card:not(.is-right) { opacity: .35; }
:root[data-phone] .gry-find { gap: calc(24 * var(--u)); }
:root[data-phone] .gry-find-q { height: calc(100 * var(--u)); font-size: calc(46 * var(--u)); }

/* =====================================================================
   NAUKA › GRZYBKI (grzybki.js, 03.10.2026, wersja 2)
   Płaskie kolorowe kółka, bez podpisów, gradientów i obwódek. Naciśnięcie
   = kółko na chwilę się ugina. W trybie Ustaw wybrane kółko ma ciemną
   kropkę z numerem, a pod spodem jest panel ustawień.
   ===================================================================== */
.grz-screen.syl-screen { overflow: hidden; }
.grz {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--u));
}
.grz-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  container-type: size;
}
.grz-grid {
  --gap: calc(90 * var(--u));
  /* kółko = jak największe w swojej komórce siatki */
  --d: min((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols), (100cqh - (var(--rows) - 1) * var(--gap)) / var(--rows), 640 * var(--u));
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--d));
  grid-auto-rows: var(--d);
  justify-content: center;
  align-content: center;
  gap: var(--gap);
}
.grz-dot {
  position: relative;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--c);
  touch-action: manipulation;
  animation: card-in .56s cubic-bezier(.3, 1.3, .5, 1) both, card-fade .3s ease-out both;
  animation-delay: var(--in-delay, 0ms), var(--in-delay, 0ms);
}
.grz-dot.is-press { animation: grz-press .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes grz-press { 20% { scale: .9; } }
.grz-num {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .55);
  color: #000000;
  font-size: calc(48 * var(--u));
  font-weight: 900;
}
.grz-dot.is-sel .grz-num { background: #000000; color: #FFFFFF; }
.grz-empty { margin: 0; font-size: calc(32 * var(--u)); font-weight: 700; color: var(--ink-2); text-align: center; }

/* --- tryb Ustaw: panel pod kółkami --- */
.grz-edit {
  flex: none;
  width: min(100%, calc(1500 * var(--u)));
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "count one" "colors note";
  align-items: center;
  column-gap: calc(40 * var(--u));
  row-gap: calc(18 * var(--u));
  padding: calc(26 * var(--u)) calc(36 * var(--u));
  border-radius: calc(48 * var(--u));
  background: var(--surface);
}
.grz-count { grid-area: count; display: flex; align-items: center; gap: calc(16 * var(--u)); }
.grz-ed-label { font-size: calc(30 * var(--u)); font-weight: 800; color: var(--ink-2); margin-right: calc(8 * var(--u)); }
.grz-count-val { min-width: calc(50 * var(--u)); text-align: center; font-size: calc(52 * var(--u)); font-weight: 900; }
.grz-one { grid-area: one; display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; }
.grz-swatch {
  flex: none;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border-radius: 50%;
  background: var(--c);
  display: grid;
  place-items: center;
  font-size: calc(36 * var(--u));
  font-weight: 900;
}
.grz-input {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(84 * var(--u));
  padding: 0 calc(32 * var(--u));
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  font-size: calc(36 * var(--u));
  font-weight: 800;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.grz-round {
  flex: none;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: transform .2s var(--bounce), opacity .2s ease;
}
.grz-round svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.grz-round .material-symbols-rounded { font-size: calc(40 * var(--u)); }
.grz-round:disabled { opacity: .35; }
.grz-round:not(:disabled):active { transform: scale(.9); }
.grz-tool {
  flex: none;
  height: calc(84 * var(--u));
  padding: 0 calc(30 * var(--u)) 0 calc(22 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: calc(30 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s var(--bounce), background .3s ease, color .3s ease;
}
.grz-tool .material-symbols-rounded { font-size: calc(40 * var(--u)); }
.grz-tool:active { transform: scale(.95); }
.grz-rec.is-rec { background: #FF3B30; color: #FFFFFF; animation: grz-rec 1.2s ease-in-out infinite; }
@keyframes grz-rec { 50% { opacity: .7; } }
.grz-colors { grid-area: colors; display: flex; gap: calc(14 * var(--u)); }
.grz-color {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  background: var(--dot);
  transition: transform .2s var(--bounce);
}
.grz-color.is-on { box-shadow: 0 0 0 calc(4 * var(--u)) var(--surface), 0 0 0 calc(8 * var(--u)) var(--ink); }
.grz-note { grid-area: note; margin: 0; font-size: calc(26 * var(--u)); font-weight: 700; color: var(--ink-2); }

/* --- Gry › Memory: wybór przed grą (03.10.2026) --- */
.gry-mem-setup {
  max-width: calc(1100 * var(--u));
  margin: 0 auto;
  position: relative;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26 * var(--u));
  padding: calc(56 * var(--u)) calc(64 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--surface);
}
.gry-mem-h { margin: 0; font-size: calc(44 * var(--u)); font-weight: 900; }
.gry-mem-opts { display: flex; gap: calc(20 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.gry-mem-opt {
  width: calc(300 * var(--u));
  padding: calc(26 * var(--u)) calc(20 * var(--u));
  border-radius: calc(40 * var(--u));
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  transition: background .3s ease, color .3s ease, transform .2s var(--bounce);
}
.gry-mem-opt b { font-size: calc(36 * var(--u)); font-weight: 900; }
.gry-mem-opt span { font-size: calc(26 * var(--u)); font-weight: 700; color: var(--ink-2); }
.gry-mem-opt.is-on { background: var(--ink); color: var(--surface); }
.gry-mem-opt.is-on span { color: color-mix(in srgb, var(--surface) 70%, transparent); }
.gry-mem-opt:active { transform: scale(.96); }
.gry-mem-step { display: flex; align-items: center; gap: calc(36 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.gry-mem-stepbtn {
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: transform .2s var(--bounce), opacity .2s ease;
}
.gry-mem-stepbtn svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.gry-mem-stepbtn:disabled { opacity: .35; }
.gry-mem-stepbtn:not(:disabled):active { transform: scale(.9); }
.gry-mem-val { min-width: calc(200 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.gry-mem-val b { font-size: calc(96 * var(--u)); font-weight: 900; line-height: 1; }
.gry-mem-val span { font-size: calc(28 * var(--u)); font-weight: 700; color: var(--ink-2); }
.gry-mem-play {
  height: calc(116 * var(--u));
  padding: 0 calc(72 * var(--u)) 0 calc(56 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(18 * var(--u));
  border-radius: var(--r-pill);
  background: var(--say);
  color: #FFFFFF;
  font-size: calc(44 * var(--u));
  font-weight: 900;
  transition: transform .2s var(--bounce), opacity .2s ease;
}
.gry-mem-play .material-symbols-rounded { font-size: calc(52 * var(--u)); }
.gry-mem-play:disabled { opacity: .4; }
.gry-mem-play:not(:disabled):active { transform: scale(.95); }
.gry-mem-note { margin: 0; max-width: calc(820 * var(--u)); text-align: center; font-size: calc(30 * var(--u)); font-weight: 700; color: var(--ink-2); }