/* PROSTŘEDÍ APPKY, Píchalovo doupě. 28. 8. 2026, CC4.
   Koncept: `prostredi/KONCEPT.md`.

   Pozadím každé obrazovky je KRAJINA Z PŘÍBĚHU, ne barevná plocha. Doplňkové
   barvy jsou z Píchalova trička (modrá, oranžová, žlutá, zelená), nevymýšlím
   paletu, beru ji z postavy, kterou dítě zná z příběhu.
   Hnědá v appce není (Norka, 28. 8. 2026: „je to smutné a depresivní").

   Staví se od telefonu nahoru. Na monitoru se z obrazovky stane karta doprostřed
   okna, ne sloupec roztažený přes celou výšku (Norka: „obojí rovnocenně").

   POZOR na past z `CO_PLATI.md` A9: procenta v CSS se vztahují k oknu, ne k rodiči.
   Proto se výška počítá přes `dvh` a bezpečné zóny telefonu. */

/* PÍSMO MÁME U SEBE, NEBERE SE OD GOOGLU.
//
   Do 31. 8. 2026 se tahalo z `fonts.googleapis.com`. Změřeno na běžící appce:
   byl to **jediný požadavek na cizí službu** ze sedmnácti. Znamenalo to, že
   prohlížeč dítěte poslal při každé návštěvě svou IP adresu Googlu, a to
   nebylo v textu o osobních údajích přiznáno; jsou tam jen Vercel, Upstash
   a poštovní služba.

   Stažené jsou jen dva řezy, které čeština potřebuje (latin a latin-ext),
   dohromady 73 kB. Cyrilice a vietnamština se nestažely, appka je nepoužívá.

   Nunito je pod licencí SIL Open Font License, která vlastní hostování
   dovoluje. Licence leží v `pisma/LICENCE.txt`. */
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
  src: url(../pisma/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
  src: url(../pisma/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fredoka se zkusila na název appky a Norka ji 29. 8. 2026 vrátila:
   nadpis má mít TOTÉŽ PÍSMO JAKO TLAČÍTKA. Import je pryč, jedno písmo
   v celé appce je i o jeden stažený soubor míň. */

:root {
  /* Žádná hnědá (Norka, 28. 8. 2026: „je to smutné a depresivní"). Paleta je
     zelený les a nebe nad ním; doplňky jsou z Píchalova trička. */
  --pozadi:        #F4F5F7;
  --pozadi-2:      #E7E9ED;
  --karta:         #FFFFFF;
  --karta-okraj:   #DADDE3;
  --inkoust:       #1C1C24;
  --inkoust-slaby: #6C6E76;

  /* Barvy z doupěte (Norka 28. 8. 2026): malinová, borůvková, jahodová,
     bleděmodrá, žlutá. Ke každé patří tmavší odstín na spodní hranu tlačítka,
     na té stojí celá hloubka. */
  --malinova:      #D23A6E;  --malinova-t:   #9E2450;
  --boruvkova:     #5A63B8;  --boruvkova-t:  #3D4489;
  --jahodova:      #E04434;  --jahodova-t:   #A82C1F;
  --bledemodra:    #A9CDE7;  --bledemodra-t: #7BA5C4;   /* Píchalova mikina */
  --bledemodra-tx: #123243;                              /* text na ní, světlá barva chce tmavý */
  --zluta:         #F2B01E;  --zluta-t:      #BC820A;

  --ruzova:        #E86AA0;  --ruzova-t:     #B8407A;   /* doplněna 29. 8. 2026 */
  --fialova:       #7A5AA8;  --fialova-t:    #543B77;   /* doplněna 29. 8. 2026 */
  /* Pastely pro úvodní stranu (Norka 29. 8. 2026). Tmavé písmo, ne bílé,
     na pastelu by bílá nebyla čitelná.
     **Staré pravidlo „žádná hnědá, zelená ani oranžová v rozhraní" Norka
     29. 8. 2026 ZRUŠILA.** Barvy se vybírají podle toho, jak to vypadá. */
  --past-zelena:   #A8D5A2;  --past-zelena-t:  #7BAE74;
  --past-modra:    #A9CDE7;  --past-modra-t:   #7BA5C4;
  --past-zluta:    #F2D68A;  --past-zluta-t:   #C4A855;
  --past-ruzova:   #F2AECB;  --past-ruzova-t:  #C77FA0;
  --seda:          #D8DCD9;  --seda-t:         #A9AFAC;
  --past-fialova:  #C6B2E4;  --past-fialova-t: #9B84C2;
  /* Šedá na úvodní tlačítka, kterými se nehraje (Rodiče, O aplikaci). */
  --past-seda:     #C9CDD4;  --past-seda-t:    #979CA5;
  --modra:         #64AEDA;
  /* Barva OTÁZKY ve slovní úloze. Norka 30. 8. 2026: *„ten tučný řádek ne,
     odlišuj to barvou, ale stejně velké jako horní řádek."* Nesmí to být
     `--modra`, tou svítí čísla v příběhu a spletlo by se to. */
  --otazka:        #7A5AA8;
  --modra-tmava:   #3E82AA;

  /* Odkaz v textu (e-mail v podmínkách a v návodech). Musí být na první
     pohled poznat, že se na něj dá ťuknout, i pro toho, kdo barvy nerozezná;
     proto podtržení, ne jen barva. */
  --odkaz:         #2C6E93;

  --spravne:       #2E9E4B;
  --spravne-svet:  #E4F6E6;
  --spatne:        #DC4A34;
  --spatne-svet:   #FDEBE6;

  --stin:          rgba(23, 48, 31, .16);
  --zavoj:         rgba(255, 255, 255, .70);   /* clona nad krajinou, ať je text čitelný */
  --r:             22px;
  --r-male:        14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetlo"]) {
    --pozadi:        #111318;
    --pozadi-2:      #191B20;
    --karta:         #1C1E23;
    --karta-okraj:   #2C2F37;
    --inkoust:       #ECEDEF;
    --inkoust-slaby: #A6A7AD;
    --spravne-svet:  #16301D;
    --spatne-svet:   #331A14;
    --stin:          rgba(0, 0, 0, .45);
    --zavoj:         rgba(14, 23, 18, .78);
    --otazka:        #B79BE0;   /* na tmavé kartě musí být světlejší, jinak zmizí */
    --odkaz:         #7FC6EF;
  }
}
:root[data-tema="tma"] {
  --pozadi:        #111318;
  --pozadi-2:      #191B20;
  --karta:         #1C1E23;
  --karta-okraj:   #2C2F37;
  --inkoust:       #ECEDEF;
  --inkoust-slaby: #A6A7AD;
  --spravne-svet:  #16301D;
  --spatne-svet:   #331A14;
  --stin:          rgba(0, 0, 0, .45);
  --zavoj:         rgba(14, 23, 18, .78);
  --otazka:        #B79BE0;
  --odkaz:         #7FC6EF;
}

/* VÝBĚR PŘÍBĚHU. Norka 31. 8. 2026: *„po jméně dvě tlačítka a na nich obrázek
   z příběhu, kliknou a jsou v prostředí."*

   Vedle sebe na širokém, pod sebou na úzkém telefonu: dvě postavy vedle sebe
   na šířku 320 px vyjdou tak malé, že se nepoznají, a vybírá se podle nich.
   `contain` proto, že postava stojí na bílém pozadí celá od hlavy k patě;
   `cover` by jí uřízl hlavu nebo nohy. */
.pribehy-volba {
  display: grid; gap: 12px; margin-top: 10px;
  /* VŽDYCKY VEDLE SEBE. Appka je na šířku všude (Norka 28. 8. 2026), takže
     dvě dlaždice pod sebou přetekly obrazovku a naskočila posuvná lišta.
     Norka 31. 8. 2026: „proč tu je ta lišta? všude to máme na šířku." */
  grid-template-columns: 1fr 1fr;
  max-width: 620px; margin-inline: auto;
}

/* Dlaždice sedí na `.predmet`, takže má tutéž 3D stavbu jako tlačítka předmětů
   (Norka 31. 8. 2026: „tlačítka udělej 3d, jako všude"). Tady se jen srazí
   výška a doplní obrázek, nic se nekreslí podruhé. */
.predmet.pribeh-volba {
  min-height: 0; padding: 12px 12px 16px; gap: 8px;
  /* TMAVÝ INKOUST, NE BÍLÁ. Tlačítka předmětů mají bílý text, jenže ta jsou
     v syté barvě; tady je bledě modrá a bílá na ní není vidět. */
  color: var(--inkoust);
}
.predmet.pribeh-volba.vybrany { outline: 4px solid var(--past-zelena-t); outline-offset: 3px; }
/* Voltova volba příběhu má JEHO barvu (petrolejová) a bílý text; Píchalova
   zůstává bledě modrá. Obrazovka je `.ucet` (mimo svět), takže se každá volba
   barví za svého průvodce, ne za právě aktivního. (Norka 1. 9. 2026.) */
.predmet.pribeh-volba.volba-volt {
  background: #1F6F7A; background-image: none; color: #fff;
  border: 0; border-radius: 18px;
  /* 3D se šedým stínem jako Voltova tlačítka v prostředí (Norka 1. 9. 2026:
     „nesmí to být placka"). Týž vrstvený stín jako `#app.svet-volt .predmet`. */
  box-shadow:
    0 7px 0 rgba(0, 0, 0, .30),
    0 14px 21px rgba(0, 0, 0, .28),
    inset 0 2px 0 rgba(255, 255, 255, .28);
}
.predmet.pribeh-volba.volba-volt:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 rgba(0,0,0,.30), 0 4px 8px rgba(0,0,0,.28),
    inset 0 2px 0 rgba(255,255,255,.28);
}
/* NOVÉ VOLTOVO TLAČÍTKO (Norka 2. 9. 2026: „Voltovi dát nové tlačítko"): týž
   obrázkový podklad jako jeho karty v prostředí (tyrkysový neon, 9-slice),
   místo ploché petrolejové. Obrazovka je `.ucet`, takže sem Voltova pravidla
   ze světa nedosáhnou a podklad se nastavuje tady. Tmavé písmo, na světlém
   neonu by bílé zmizelo. */
.predmet.pribeh-volba.volba-volt {
  background: none; box-shadow: none; color: var(--inkoust);
  --tl-obr: url(../obrazky/tlacitka/volt-karta-neon.webp);
  --tl-rez: 227 227 281 227; --m: 180px;
}
.predmet.pribeh-volba.volba-volt::before { display: block; }
.predmet.pribeh-volba.volba-volt:active { transform: translateY(4px); box-shadow: none; }

.predmet.pribeh-volba img {
  width: 100%; max-width: 210px;
  /* Výška se řídí obrazovkou, ne pevným číslem: telefon naležato má kolem
     390 px celkem a pevných 180 px na obrázek z toho udělalo rolování. */
  height: clamp(64px, 20vh, 150px);
  object-fit: contain;
  /* Postavy jsou ořezy s odebraným pozadím, takže se žádné pozadí nekreslí;
     bílý obdélník za nimi by v tmavém režimu svítil jako lampa. */
}
/* Písmo větší (Norka 31. 8. 2026). Název příběhu je na dlaždici to hlavní,
   tak má velikost blízkou názvu předmětu, jen o kousek menší, protože je to
   celá věta, ne jedno slovo. */
.pribeh-volba .pribeh-volba-nazev { font-size: clamp(18px, 1.9vw, 24px); font-weight: 900; line-height: 1.15; }
.pribeh-volba .pribeh-volba-ceka  { font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; }

/* Věta nad dlaždicemi. Bývala `drobne`, což je písmo pro poznámky pod čarou,
   a tohle čte dítě. */
.vyber-uvod {
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 600;
  margin: 4px auto 0; max-width: 860px;
}

/* JAK DOPADL NÁVRAT Z E-MAILOVÉHO ODKAZU. Vidět hned na úvodní straně,
   protože přesně tam rodič po kliknutí spadne. */
.hlaska-prihlaseni {
  /* Drží se nízko schválně: když je vidět, nesmí odsunout děti dolů tak,
     že na úvodní straně naskočí posuvná lišta. */
  margin: 0 0 10px; padding: 9px 14px; border-radius: var(--r-male);
  background: var(--spravne-svet); border: 2px solid var(--spravne);
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.3;
}
.hlaska-prihlaseni.chyba {
  background: var(--spatne-svet); border-color: var(--spatne);
}
.hlaska-prihlaseni .tl { margin-top: 8px; min-height: 40px; padding: 0 16px; font-size: 16px; }

/* PROHLÍDKA: PÍCHAL UKÁŽE, CO JE CO. Norka 31. 8. 2026: *„vyskočí Píchal
   v bačkorách a po jednom vysvětlí tlačítka."*

   Celá obrazovka ztmavne a právě jedno tlačítko zůstane svítit. Dítě tak
   nemusí hledat, o kterém se zrovna mluví; to je celý rozdíl proti seznamu
   pod otazníkem. */
/* ZÁVOJ JEN PŘES SCÉNU. Přes tlačítka ležet nemůže: rozsvícené tlačítko by se
   nad něj muselo dostat, a leží v cizí vrstvě (`nad-scenou`), odkud se nad
   něco s vyšším z-indexem dostat nedá. Ztmavuje se proto obrázek nory
   a ostatní tlačítka se ztlumí průhledností. */
.prohlidka-zavoj {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(12, 22, 16, .55); pointer-events: none;
}
.prohlidka {
  position: absolute; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 12px; padding: 16px; pointer-events: none;
}
.prohlidka-bublina, .prohlidka-pichal { pointer-events: auto; }

/* Co se zrovna nevysvětluje, ustoupí do pozadí. */
.prohlidka-bezi .pruh-hlava > *,
.prohlidka-bezi .mistnosti > *,
.prohlidka-bezi .narok > * { opacity: .3; }
.prohlidka-bezi .zvyraznene,
.prohlidka-bezi .mistnosti.zvyraznene > * { opacity: 1; }
.prohlidka-pichal {
  width: clamp(90px, 14vw, 170px); height: auto;
  align-self: flex-end; flex: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.prohlidka-bublina {
  background: var(--karta); color: var(--inkoust);
  border-radius: var(--r); padding: 14px 18px;
  max-width: 520px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* Štítek nad prohlídkou, ať dítě hned ví, co se objevilo (Norka 1. 9. 2026:
   „napiš nad to, co je co, jinak jeden hned neví, co to je"). */
.prohlidka-stitek {
  margin: 0 0 4px; font-size: 12px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--inkoust-slaby);
}
.prohlidka-bublina h3 { margin: 0 0 6px; font-size: clamp(19px, 2vw, 24px); }
.prohlidka-bublina p  { margin: 0 0 10px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.35; }
.prohlidka-bublina .drobne { margin: 8px 0 0; }

/* ROZSVÍCENÉ TLAČÍTKO. Musí být NAD závojem, jinak by ztmavlo s ostatními.
   Prsten kolem něj je ze dvou stínů: světlý těsně u tlačítka a tmavý kolem,
   ať je vidět na světlém i tmavém pozadí. */
.zvyraznene {
  position: relative; z-index: 60;
  border-radius: var(--r-male);
  box-shadow: 0 0 0 4px var(--past-zelena), 0 0 0 10px rgba(0,0,0,.45),
              0 0 24px 6px rgba(168, 213, 162, .55);
}
.mistnosti.zvyraznene { padding: 6px; }

@media (max-width: 700px) {
  .prohlidka { align-items: center; }
  .prohlidka-pichal { width: 84px; }
}

/* Cesty k vlastnímu kontu na úvodní straně. Dvě tišší tlačítka vedle sebe,
   na úzkém telefonu pod sebou. Nesmějí přetlačit děti: ty jsou to hlavní. */
/* ÚVODNÍ STRANA BEZ KONTA má o řádek tlačítek víc, tak se všechno o kus
   smačkne. Bez toho přebývalo 60 px a naskočila posuvná lišta, kterou Norka
   nechce nikde. Čísla jsou změřená v prohlížeči, ne odhadnutá. */
.rozcestnik.bez-konta .rozcestnik-hlava { margin-bottom: 0; }
.rozcestnik.bez-konta .nazev { font-size: clamp(28px, 4vw, 40px); margin: 0 0 6px; }
.rozcestnik.bez-konta .deti.dve .dite { min-height: 104px; }
.rozcestnik.bez-konta .deti.dve + .deti.dve { margin-top: 8px; }
.rozcestnik.bez-konta .deti.dve + .deti.dve .dite { min-height: 58px; }
.rozcestnik.bez-konta .konto { min-height: 42px; padding: 6px 8px; }
.rozcestnik.bez-konta .pravni-odkaz { margin: 6px 0 0; }

/* DEMO nad názvem. Drobné a proložené, ne křiklavé: je to informace, ne varování. */
.demo-znacka {
  margin: 0 0 2px; text-align: center;
  font-size: clamp(13px, 1.4vw, 16px); font-weight: 900; letter-spacing: .22em;
  color: var(--otazka);
}

.konta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.konto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 8px 10px; min-height: 48px;
  border: 2px solid var(--karta-okraj); border-radius: var(--r-male);
  background: var(--karta); color: var(--inkoust);
  font: inherit; cursor: pointer; text-align: center;
}
.konto:active { transform: translateY(2px); }
.konto b { font-size: clamp(13px, 1.35vw, 16px); font-weight: 800; }
.konto span { font-size: clamp(11px, 1.15vw, 13px); color: var(--inkoust-slaby); }

/* ── ÚVODNÍ STRANA = NORČIN OBRÁZEK (1. 9. 2026) ────────────────────────────
   Obrázek se vejde CELÝ a nikdy se neořezává; tlačítka leží na namalovaných
   dlaždicích v procentech jeho plochy. Kdyby se ořezával, rozešlo by se to.

   Souřadnice dlaždic jsou z obrázku změřené, ne odhadnuté:
   blok x 35,2 %..64,8 %, y 31,5 %..69,3 %, mezera mezi pásy 56,0 %..58,3 %. */
/* Kolem obrázku je ČISTĚ BÍLÁ, ne tmavá (Norka 1. 9. 2026). Platí i na
   tělo stránky, ať se to nelíší v prohlížeči s vlastním zbarvením. */
.obrazovka.rozcestnik.uvodni { padding: 0; background: #FFFFFF; }
body:has(.rozcestnik.uvodni) { background: #FFFFFF; background-image: none; }
.uvodni-plocha {
  position: relative; margin: auto;
  aspect-ratio: 2784 / 1536;
  height: 100%; max-width: 100%;
  background: url(../obrazky/krajina/uvod-strana-1600.jpg) center / 100% 100% no-repeat;
}

/* DLAŽDICE. Průhledné: barvu i tvar má obrázek pod nimi, tady je jen text
   a plocha, na kterou se dá ťuknout. */
/* `.rozcestnik.uvodni` před třídou schválně: obecné pravidlo pro tlačítka
   dělá z prvku mřížku a text by se v ní roztáhl na dva konce dlaždice. */
.rozcestnik.uvodni .dlazdice {
  position: absolute; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15em; padding: 0 4%; text-align: center; color: #23212A;
  font: inherit; line-height: 1.05;
}
.rozcestnik.uvodni .dlazdice:active { transform: translateY(.4%); }
.dlazdice-nazev { font-size: clamp(14px, 2.7vw, 30px); font-weight: 900; line-height: 1.05; }
/* Šedé dlaždice jsou nižší a „O aplikaci“ je dlouhé, tak má menší písmo.
   Norka 1. 9. 2026: menší a netučné, ať nekřičí jako jména dětí. */
.dlazdice.seda .dlazdice-nazev { font-size: clamp(11px, 1.7vw, 18px); font-weight: 600; }
.dlazdice-pod   { font-size: clamp(9px, 1.15vw, 14px); font-weight: 700; color: #5C5866; }
.dlazdice.prazdna .dlazdice-nazev { font-size: clamp(20px, 4vw, 44px); }

.dlazdice.mist-0 { left: 35.2%; right: 50.7%; top: 31.5%; bottom: 44.0%; }
.dlazdice.mist-1 { left: 50.7%; right: 35.2%; top: 31.5%; bottom: 44.0%; }
.dlazdice.mist-2 { left: 35.2%; right: 50.7%; top: 58.3%; bottom: 30.7%; }
.dlazdice.mist-3 { left: 50.7%; right: 35.2%; top: 58.3%; bottom: 30.7%; }

/* NAD DLAŽDICEMI a POD NIMI. Volné pásy obrázku nahoře a dole. */
.uvodni-nad {
  position: absolute; left: 4%; right: 4%; top: 3%; height: 26%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center;
}
.uvodni-nad .nazev { margin: 0; color: #F2F0F5; font-size: clamp(24px, 4.6vw, 52px); }
.uvodni-veta { margin: 0; color: #BEBAC4; font-size: clamp(12px, 1.6vw, 19px); font-weight: 600; }
/* Tyrkysová věta záměru pod nadpisem (Norka 1. 9. 2026): pár slovy, že appka
   zbaví rodiče mučení učit se s dítětem. Akcentní barva, ať vytáhne oko. */
/* Věta o povaze appky pod názvem: tmavá, ne zelená, protože je to sdělení,
   ne slogan. */
.uvodni-povaha { margin: 6px auto 0; max-width: 38em; font-weight: 700;
                 font-size: clamp(14px, 1.4vw, 18px); line-height: 1.3;
                 color: var(--inkoust); }
@media (max-height: 500px) { .uvodni-povaha { font-size: clamp(11px, 2.9vh, 14px); margin-top: 2px; } }
.uvodni-zamer { margin: 4px 0 0; color: #0E8C82; font-weight: 800;
  font-size: clamp(13px, 1.75vw, 21px); }
/* Ročníky pod dlaždicemi, větší (Norka 1. 9. 2026: „důležité info"). */
.uvodni-rocniky { margin: 6px 0 0; color: var(--inkoust); font-weight: 700;
  font-size: clamp(15px, 2.1vw, 26px); text-align: center; }
.rozcestnik.uvodni .demo-znacka {
  margin: 0; color: #C9B6E8; letter-spacing: .22em; font-weight: 900;
  font-size: clamp(11px, 1.3vw, 15px);
}

.uvodni-pod {
  position: absolute; left: 4%; right: 4%; top: 70.5%; bottom: 1%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; overflow: hidden;
}
.rozcestnik.uvodni .konta { margin: 0; max-width: 34em; width: 100%; }
.rozcestnik.uvodni .konto {
  background: rgba(237, 234, 241, .1); color: #EDEAF1;
  border-color: rgba(237, 234, 241, .35); min-height: 0; padding: 5px 8px;
}
.rozcestnik.uvodni .konto b { font-size: clamp(11px, 1.3vw, 15px); }
.rozcestnik.uvodni .konto span { color: #BEBAC4; font-size: clamp(9px, 1.05vw, 12px); }
.rozcestnik.uvodni .pravni-odkaz { margin: 0; }
.rozcestnik.uvodni .pravni-odkaz .odkaz-drobny {
  color: #BEBAC4; font-size: clamp(10px, 1.1vw, 13px);
}
.rozcestnik.uvodni .nova-verze {
  position: absolute; left: 0; right: 0; top: 1%; justify-content: center; z-index: 3;
}

/* Technická informace o širokém formátu. **Jen na dotykovém zařízení**:
   na počítači se nic otočit nedá a věta by tam jen překážela.
   (Norka 1. 9. 2026: „já ji na PC vůbec nesmím vidět.") */
/* Věta „Aplikace je širokoúhlá, na telefonu ji otoč naležato" je od 3. 9. 2026
   PRYČ (Norka: „je pak třeba všude odstranit tu větu o tel. naležato, bylo to
   na úvodní stránce a možná i jinde"). Úvodní strana se od té doby na telefonu
   nastojato vykreslí správně, takže se nemá co omlouvat. Třídu tu nechávám
   prázdnou jen proto, že na ni míří ještě pravidlo v @media níž; kdyby se
   uklízelo CSS, může jít celá. */
.uvodni-technicka { display: none; }
@media (pointer: coarse) {
  .uvodni-technicka {
    display: block; margin: 12px auto 0; max-width: 30em;
    text-align: center; line-height: 1.3;
    /* Výrazně větší než poznámka pod čarou: na telefonu je to jediná věta,
       kterou člověk potřebuje přečíst dřív, než začne. */
    font-size: clamp(17px, 4.4vw, 22px); font-weight: 800;
    color: var(--inkoust-slaby);
  }
}

/* Instalace se na úvodu NENABÍZÍ. Na PC tam nemá co dělat (na plochu se
   neinstaluje) a na telefonu vede vlastní přepážka nastojato (`.otoc`), která
   vyskočí jako první. Norka 1. 9. 2026: „jen na mobilu to musí vyskočit jako
   první." */

.rozcestnik.uvodni .konto {
  background: rgba(237, 234, 241, .1); color: #EDEAF1;
  border-color: rgba(237, 234, 241, .35);
}
.rozcestnik.uvodni .konto span { color: #BEBAC4; }
.rozcestnik.uvodni .pravni-odkaz .odkaz-drobny { color: #BEBAC4; }

/* PRUH UKÁZKY. Jeden řádek a nic víc: delší pruh odsunul děti dolů a na
   úvodní straně naskočila posuvná lišta, kterou Norka nechce nikde. */
.pruh-ukazky {
  position: absolute; top: 4px; left: 0; right: 0; z-index: 5;
  margin: 0; text-align: center; pointer-events: none;
  font-size: clamp(13px, 1.3vw, 15px); line-height: 1.25;
  color: var(--spravne);
}
.pruh-ukazky b { color: var(--inkoust); }

/* E-MAIL JAKO ODKAZ. Norka 31. 8. 2026: *„tady dej funkční odkaz."* Adresa
   byla ve všech textech jen vysázená. `word-break` je tam proto, že na úzkém
   telefonu se celá adresa na řádek nevešla a vytlačovala kartu do strany. */
.mail {
  color: var(--odkaz); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  word-break: break-word;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: Nunito, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  color: var(--inkoust);
  background: var(--pozadi);
  background-image: radial-gradient(130% 70% at 50% 0%, var(--pozadi-2) 0%, var(--pozadi) 62%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }

/* ── Kostra ───────────────────────────────────────────────────────────────────
   CELÁ APPKA JE NA ŠÍŘKU (Norka 28. 8. 2026: „na monitor, na tablet a mobil
   naležato"). Není to telefonní sloupec roztažený do stran, je to jiná kostra:
   výška je vzácná (telefon naležato má kolem 390 px), takže se nic nedává pod
   sebe, když to jde vedle sebe.

   POZOR na past z `CO_PLATI.md` A9: procenta v CSS se vztahují k oknu, ne k rodiči.
   Proto se výška počítá přes `dvh` a bezpečné zóny telefonu. */
#app { min-height: var(--vh, 100dvh); display: grid; place-items: center; }

.obrazovka {
  position: relative; isolation: isolate;
  width: 100%; height: var(--vh, 100dvh);
  display: flex; flex-direction: column; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: hidden;
  animation: prijezd .26s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes prijezd { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Na monitoru se z toho stane široká karta doprostřed okna, ne plocha přes celou
   obrazovku, na velkém monitoru by se dlaždice roztáhly do nesmyslu. */
@media (min-width: 900px) {
  #app { padding: 24px; }
  .obrazovka {
    height: min(calc(var(--vh, 100dvh) - 48px), 740px);
    max-width: 1180px;
    border-radius: 28px;
    box-shadow: 0 26px 70px var(--stin);
    padding: 16px 20px;
  }
}

.stred { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 0; }
.stred.nahoru { justify-content: flex-start; overflow-y: auto; }
.stred-text { text-align: center; }
.dole { display: flex; flex-direction: column; gap: 8px; }
.rada { display: flex; gap: 10px; flex-wrap: wrap; }
.mezera { flex: 1; }

/* OTOČ TELEFON, dětská část nastojato. Základ je můj (Aplikace 6), vzhled
   doladí reklama. Ukazuje se jen tam, kde se hraje a učí (`body.du-hraje`
   z app.js), a jen když je okno vyšší než širší. Bez tlačítka „přesto
   pokračovat": rozvržení lekce je kreslené na šířku a nastojato se rozsype,
   takže by to bylo tlačítko do rozbité obrazovky. */
.otoc-lezato { display: none; }
/* JEN NA TELEFONU. Norka 3. 9. 2026 (má Fold): „nastav, ať foldy bere apka jako
   tablety a nenutí mě to otáčet… můžou se učit na mobilu od rodičů". Dotaz na
   orientaci sám nerozezná telefon od tabletu a přepážka se ukazovala i na
   tabletu drženém na výšku. Rozhoduje šířka: rozložený Fold má na výšku
   kolem 670 až 710 CSS px, tablety víc, telefony do 430. Hranice 600 px:
   pod ní telefon a výzva k otočení, nad ní se scéna vykreslí rovnou. Zavřený
   Fold (přední displej ~320 px) zůstává telefonem. */
@media (orientation: portrait) and (max-width: 599px) {
  body.du-hraje .otoc-lezato {
    display: flex; position: fixed; inset: 0; z-index: 98;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: var(--pozadi); color: var(--inkoust); text-align: center; padding: 30px;
  }
}
/* VÝZVA K OTOČENÍ. Chování drží Aplikace 6 (třída du-hraje na body a dotaz
   na orientaci), tohle je jen vzhled.

   Tři pravidla, podle kterých je udělaná:
   1. Nedá se přeskočit. Žádné tlačítko "přesto pokračovat": za ním je
      rozsypané rozvržení a dítě by si stěžovalo, že je to rozbité.
   2. Není to chybová hláška. Dítě neudělalo nic špatně, jen drží telefon
      jinak, než jak je scéna nakreslená. Proto klidná barva, ne červená.
   3. Obrázek napřed, věta potom. Dítě ve druhé třídě pochopí telefon se
      šipkou dřív, než přečte řádek. */
.otoc-lezato-obr {
  width: min(52vw, 230px); height: auto; color: var(--modra-tmava);
  animation: otoc-nahnuti 2.6s ease-in-out infinite;
}
@keyframes otoc-nahnuti {
  0%, 55%, 100% { transform: rotate(0deg); }
  75%, 92%      { transform: rotate(-82deg); }
}
@media (prefers-reduced-motion: reduce) { .otoc-lezato-obr { animation: none; } }
.otoc-lezato-veta {
  font-size: clamp(22px, 6.2vw, 30px); font-weight: 900; max-width: 14em;
  line-height: 1.15; color: var(--inkoust);
}
.otoc-lezato-drobne {
  font-size: clamp(14px, 3.8vw, 17px); font-weight: 600; max-width: 20em;
  line-height: 1.35; color: var(--inkoust-slaby);
}

/* Telefon nastojato appka neumí, a nemá to předstírat. Místo rozsypaného
   rozvržení se řekne, co má dítě udělat. */
.otoc {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: var(--pozadi); color: var(--inkoust);
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  text-align: center; padding: 30px; font-weight: 800; font-size: 21px;
}
.otoc img { width: 108px; border-radius: 24px; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
@keyframes otoceni { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-86deg); } }
.otoc-drobne { font-size: 15px; font-weight: 600; color: var(--inkoust-slaby); max-width: 22em; }
/* Na TELEFONU se přepážka ukáže, dokud si appku nepřidá na plochu, a to
   naležato i nastojato. Do 2. 9. 2026 se ukazovala jen nastojato, takže stačilo
   otočit telefon a appka se otevřela v prohlížeči, kde se rozvržení deformuje
   (Norka: „prostě se to musí nainstalovat"). Na tabletu a PC se neukáže. Původně tu byla jen hláška „otoč
   telefon" (Norka ji 1. 9. dočasně zrušila); teď tu vede NABÍDKA INSTALACE,
   protože appka se má na telefonu hned nabídnout ke stažení, jinak ji lidi
   zavřou (Norka 1. 9. 2026). Na PC (široké okno) se neukáže. */
@media (pointer: coarse) and (max-width: 1024px) { .otoc { display: flex; } }
/* NAINSTALOVANÁ APPKA PŘEPÁŽKU NEVIDÍ. Běží ze plochy, tedy `standalone`
   nebo `fullscreen`, a tam už je všechno v pořádku. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .otoc { display: none !important; }
}
.otoc-nadpis { font-size: 23px; font-weight: 900; max-width: 15em; line-height: 1.15; }
/* Tlačítko jede na TÝCHŽ tlačítkách jako zbytek appky (třídy `tl hlavni
   b-past-modra`), ne na vlastní tyrkysové. Ta vypadala jako Voltova a na
   přepážce, kterou vidí obě děti, tam nepatří (Norka 2. 9. 2026). */
.otoc-instal { width: auto; min-width: 15em; }
.otoc-ios { margin: 0; font-size: 16px; font-weight: 700; max-width: 22em; line-height: 1.35; }
.otoc-ios b { color: #1F6F7A; }

/* Naležato v appce přidané na plochu. Prohlížeč pak nemá adresní řádek a
   `display: fullscreen` z manifestu mu bere i stavovou lištu, obsah by jinak
   vlezl pod výřez fotoaparátu. */
@supports (padding: env(safe-area-inset-left)) {
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right)
                 env(safe-area-inset-bottom) env(safe-area-inset-left); }
}

/* ── Tlačítka ─────────────────────────────────────────────────────────────────
   Spodní hrana místo rámečku: při stisku tlačítko sjede na hranu. Dítě vidí,
   že se něco stalo, dřív než se překreslí obrazovka. */
/* HLOUBKA (Norka 28. 8. 2026: „ať to má hloubku"). Dělá ji trojice:
   1. spodní hrana v tmavším odstínu, tlačítko na něčem stojí,
   2. světlo shora dovnitř (`inset`), plocha se prohne ven,
   3. při stisku sjede na hranu a hrana zmizí, zamáčkne se.
   Je to čisté CSS. Žádná knihovna, žádné zpomalení, funguje i na starém telefonu. */
.tl {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 62px; padding: 0 24px; border: 0; border-radius: var(--r);
  background: var(--modra); color: #fff; font-weight: 900; font-size: 21px;
  box-shadow: 0 6px 0 var(--modra-tmava),
              inset 0 2px 0 rgba(255, 255, 255, .45),
              inset 0 -3px 6px rgba(0, 0, 0, .16),
              0 10px 20px var(--stin);
  cursor: pointer;
  transition: transform .07s, box-shadow .07s;
  -webkit-tap-highlight-color: transparent;
}
.tl:active:not(:disabled) {
  transform: translateY(6px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3),
              inset 0 -2px 5px rgba(0, 0, 0, .2), 0 3px 8px var(--stin);
}
.tl:disabled { opacity: .4; cursor: default; }
.tl:focus-visible { outline: 3px solid var(--jahodova); outline-offset: 3px; }
.tl.siroke  { width: 100%; }
/* Bleděmodrá z Píchalovy mikiny místo zelené (Norka 28. 8. 2026). */
.tl.bledemodre { background: var(--bledemodra); color: var(--bledemodra-tx);
  box-shadow: 0 6px 0 var(--bledemodra-t), inset 0 2px 0 rgba(255,255,255,.6),
              inset 0 -3px 6px rgba(0,0,0,.12), 0 10px 20px var(--stin); }
.tl.cervene { background: var(--jahodova);
  box-shadow: 0 6px 0 var(--jahodova-t), inset 0 2px 0 rgba(255,255,255,.45),
              inset 0 -3px 6px rgba(0,0,0,.16), 0 10px 20px var(--stin); }
/* Tiché tlačítko mělo jen měkký stín a ŽÁDNOU SPODNÍ HRANU, takže vedle
   ostatních vypadalo useknuté, jako by mu chyběl spodek. Norka 29. 8. 2026:
   *„ta spodní hrana, a udělej ty tlačítka pěkně 3D."*
   Dostává tedy tutéž stavbu jako barevná tlačítka, jen v barvách karty:
   plná hrana dole, světlý přechod nahoře, měkký stín pod tím. */
.tl.tise {
  background: var(--karta); color: var(--inkoust-slaby);
  font-weight: 800; min-height: 48px;
  box-shadow: 0 5px 0 var(--karta-okraj),
              inset 0 2px 0 rgba(255, 255, 255, .75),
              inset 0 -3px 6px rgba(0, 0, 0, .07),
              0 8px 16px var(--stin);
}
/* Při stisku sjede na hranu, stejně jako ostatní, dítě i rodič vidí, že se
   něco stalo, dřív než se překreslí obrazovka. Dřív se nedělo nic. */
.tl.tise:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4),
              inset 0 -2px 5px rgba(0, 0, 0, .1), 0 2px 6px var(--stin);
}
/* Zvolené dítě v rodičovské části, modré, ale hranu má taky. */
.prepinac-deti .tl.tise.zvoleny {
  background: var(--modra); color: #fff;
  box-shadow: 0 5px 0 var(--modra-tmava),
              inset 0 2px 0 rgba(255, 255, 255, .45),
              inset 0 -3px 6px rgba(0, 0, 0, .16),
              0 8px 16px var(--stin);
}

/* Kolečka nahoře musí být pod prstem a musí být poznat, co dělají.
   Předtím měla 42 px a holý šipkovitý znak, Norka se ptala „co to je",
   což je odpověď sama o sobě. */
.kolecko {
  flex: none; width: 56px; height: 56px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .88); color: var(--inkoust);
  font-size: 28px; font-weight: 900; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .8),
              0 8px 18px var(--stin);
  transition: transform .08s, box-shadow .08s;
}
.kolecko:active { transform: translateY(4px); box-shadow: 0 3px 8px var(--stin); }

/* Kolečko, které přepíná, kdo cvičí. Není to šipka, je to to dítě. */
.kolecko.kdo { color: #fff; font-size: 24px; background: var(--modra); }
.kolecko.kdo small { display: block; font-size: 9px; font-weight: 800;
                     letter-spacing: .4px; opacity: .9; margin-top: -2px; }

.odznak {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 99px;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px);
  font-weight: 900; font-size: 22px; white-space: nowrap; color: var(--inkoust);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .8),
              0 8px 18px var(--stin);
}
.odznak img { width: 28px; height: 28px; }

/* ── Krajina jako pozadí obrazovky ────────────────────────────────────────────
   Pozadí je fotka z příběhu, ne barva. Nad ní leží clona: bez ní není na fotce
   vidět text. Na obrazovce úkolu se pozadí ještě rozostří, ostrý les za zadáním
   by dítěti bral pozornost, o kterou nám právě jde. */
.pozadi-obrazovky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pozadi-obrazovky img { width: 100%; height: 100%; object-fit: cover; }
.pozadi-obrazovky.se-clonou::after { content: ''; position: absolute; inset: 0; background: var(--zavoj); }
/* Bez clony přes celou plochu, „plná barva" (Norka 28. 8. 2026). Text se čte
   proto, že sedí na vlastní dlaždici, ne proto, že se krajina přebarví doběla.
   Zůstává jen jemné ztmavení u kraje, aby bílé dlaždice neplavaly v jasu. */
.pozadi-obrazovky::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, .28) 100%);
}
.pozadi-obrazovky.rozostrene img { filter: blur(10px) saturate(1.05); transform: scale(1.09); }
@media (min-width: 900px) { .pozadi-obrazovky, .doupe-plocha { border-radius: 28px; } }

/* ── Scéna doupěte ────────────────────────────────────────────────────────────
   Doupě se nekreslí zevnitř (nora zevnitř je hnědá), ale jako MÍSTO: Píchalův
   domov z příběhu a věci rozmístěné kolem díry pod kořeny. Souřadnice věcí jsou
   v procentech scény, takže drží svá místa na telefonu i na monitoru. */
/* Nora vyplní celou obrazovku, obsah leží na ní. Tím se výřez obrázku drží
   blízko jeho vlastnímu poměru a `cover` neuřízne podlahu, kde věci stojí. */
.doupe-plocha { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.nad-scenou { position: relative; z-index: 2; }
.doupe .dole { margin-top: auto; }
.scena { position: absolute; inset: 0; }
.scena-pozadi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* `top` je SPODEK věci, věc stojí na zemi, ať je obrázek jakkoli vysoký. */
.scena-vec, .scena-obrys, .scena-pichal { position: absolute; transform: translate(-50%, -100%); }

/* Věc se neobjeví, ale doskočí, sedmileté dítě má vidět, že přibyla. */
.scena-vec { animation: dopad .45s cubic-bezier(.2, 1.5, .4, 1) both;
             animation-delay: calc(var(--poradi) * 20ms); transform-origin: center bottom;
             filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .35)); }
@keyframes dopad {
  from { transform: translate(-50%, -100%) translateY(-24px) scale(.86); opacity: 0; }
  to   { transform: translate(-50%, -100%); opacity: 1; }
}

/* Věc, která je na řadě. Obrys se jménem, dítě vidí, kam míří. */
.scena-obrys {
  aspect-ratio: 1; display: grid; place-items: center; padding: 3px;
  border: 3px dashed rgba(255, 255, 255, .9); border-radius: 16px;
  background: rgba(255, 255, 255, .2); backdrop-filter: blur(2px);
  animation: dycha 2.6s ease-in-out infinite;
}
.scena-obrys span {
  font-size: clamp(9px, 1.5vw, 13px); font-weight: 800; color: #fff;
  text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .75); line-height: 1.15;
}
@keyframes dycha { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

.scena-pichal { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4));
                animation: mavani 3.4s ease-in-out infinite; transform-origin: center bottom; }
@keyframes mavani {
  0%, 100% { transform: translate(-50%, -100%) rotate(0); }
  50%      { transform: translate(-50%, -100%) translateY(-6px) rotate(-1.2deg); }
}

.doupe-pruh {
  position: absolute; inset: auto 0 auto 0; top: max(10px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
}

/* ── Úvod ────────────────────────────────────────────────────────────────── */
.pichal-cely { display: block; width: min(52vw, 200px); margin: 0 auto;
               filter: drop-shadow(0 12px 20px var(--stin)); }
.pichal-cely.mava { animation: mavani 3.2s ease-in-out infinite; }

.nazev { font-size: clamp(30px, 8vw, 46px); font-weight: 1000; text-align: center;
         margin: 0; letter-spacing: -.5px; text-wrap: balance; }
.podnazev { text-align: center; color: var(--inkoust-slaby); font-weight: 700; margin: 4px 0 0; }
.drobne { font-size: 13px; color: var(--inkoust-slaby); font-weight: 600; margin: 0; }
.drobne b { color: var(--inkoust); }

.profily { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profil {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 10px; border-radius: var(--r);
  border: 2px solid var(--karta-okraj); border-bottom-width: 5px;
  background: var(--karta); font-weight: 800; cursor: pointer; transition: transform .08s;
}
.profil:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.profil-kolecko { width: 50px; height: 50px; border-radius: 50%; display: grid;
                  place-items: center; font-size: 23px; font-weight: 900; color: #fff; }

/* ── Obrazovka úkolu ─────────────────────────────────────────────────────── */
.pruh-hlava { display: flex; align-items: center; gap: 12px; }

/* Úkol na šířku. Dvě rozvržení, protože dlaždice a písmenkovník mají jiné nároky:
   – `dva-sloupce` (výběr, ano/ne): zadání vlevo, dlaždice vpravo. Na telefonu
     naležato je výška vzácná, takže se nic nedává pod sebe zbytečně.
   – `pod-sebou` (písmenkovník, číselník): abeceda potřebuje celou šířku, jinak by
     42 dlaždic bylo velikosti špendlíkové hlavičky. */
.ukol { flex: 1; min-height: 0; display: grid; gap: 14px; }
/* OTÁZKA VEDLE ODPOVĚDÍ (výběr ze čtyř, ano/ne) je psaná JAKO ODPOVĚDI, jen
   o něco větší (Norka 2. 9. 2026 v noci: „napiš ji stejně jako odpovědi, je
   o něco větší, teď je to nepřehledné"): stejně tučná, velikost 2.6vw proti
   2.1vw dlaždic, a sloupec otázky je širší, ať se text neláme do čtyř řádků. */
.ukol.dva-sloupce { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.ukol.dva-sloupce .zadani { font-weight: 800; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.25; }
.ukol.dva-sloupce .zadani-pokyn { font-weight: 700; }
.ukol.pod-sebou   { grid-template-rows: auto 1fr; align-content: center; }
.ukol-otazka { display: flex; flex-direction: column; justify-content: center;
               gap: 10px; min-height: 0; }
.odpoved-plocha { display: flex; flex-direction: column; justify-content: center;
                  gap: 10px; min-height: 0; }
/* Písmenkovník/číselník VÝŠ, ne uprostřed s velkou mezerou nad ním (Norka
   1. 9. 2026: „klávesnice je zbytečně dole"). Jen u `pod-sebou`; karty
   (dva-sloupce) zůstávají vystředěné se zadáním. */
.ukol.pod-sebou .odpoved-plocha { justify-content: flex-start; }

.zadani {
  font-size: clamp(22px, 5.6vw, 32px); font-weight: 600; line-height: 1.3;
  text-align: center; text-wrap: balance;
  padding: 16px 18px; border-radius: var(--r);
  background: var(--karta); box-shadow: 0 6px 20px var(--stin);
}
/* ČÍSLA A ZVÝRAZNĚNÁ SLOVA se liší BARVOU, ne tučností. Norka 30. 8. 2026:
   *„ty čísla taky nedělej tučné, nic nedělej tučné.“* `font-weight: inherit`
   musí být výslovně, prohlížeč dává `<b>` tučnost sám od sebe. */
.zadani b, .zadani em { color: var(--modra); font-style: normal; font-weight: inherit; }

/* Pokyn a příklad na dvou řádcích. Slité do jedné řádky byly past: Norka
   odpověděla „ano" na „Začíná tahle věta velkým písmenem? sova spí ve dne."
   protože přečetla otázku jako celek, a ta velkým písmenem začíná.
   Pokyn je menší a klidnější, příklad velký; oko jde rovnou na něj. */
.zadani-pokyn {
  /* STEJNĚ VELKÝ JAKO ZBYTEK, LIŠÍ SE BARVOU. Norka 31. 8. 2026: *„malý text
     otázky a viděla jsem to u více cvičení."* Byl na 0,62 násobku, tedy kolem
     20 px tam, kde zbytek měl 32, a na tabletu se to četlo hůř než materiál
     pod tím. Je to přitom POKYN, tedy to, co má dítě udělat.
     Je to táž oprava, jakou už Norka žádala 30. 8. u slovních úloh:
     *„odlišuj to barvou, ale stejně velké jako horní řádek."* Tehdy jsem ji
     udělal jen u příběhových úloh a na pokyn zapomněl. */
  display: block; font-weight: 600;
  color: var(--otazka); margin-bottom: 8px;
}
.zadani-priklad { display: block; }

/* PŘÍBĚH A ÚKOL, jiný tvar než pokyn a materiál výš.
   Norka 30. 8. 2026: *„ty tučné otázky se špatně čtou a nijak neodděluješ otázku
   a pak větu která je úkol."* „Adam nasbíral 24 kaštanů, Nela 15. O kolik méně
   má Nela?" se sázelo jako jeden blok v tučnosti 800 a řádek se zlomil
   po „kaštanů,", tečka nebyla vidět a příběh splynul s otázkou.

   Příběh se **nezdrobňuje na 0.62em jako pokyn**, jsou v něm čísla, bez
   kterých se úloha nespočítá. Ubírá se jen tučnost a kus velikosti, aby
   měl důraz kam stít: když je tučné všechno, nevynikne nic. */
.zadani-veta {
  display: block; font-size: .8em; font-weight: 600; line-height: 1.35;
  margin-bottom: 12px;
}
/* Otázka je STEJNĚ VELKÁ A STEJNĚ TUČNÁ jako příběh nad ní, liší se jen
   barvou. Do 30. 8. 2026 byla 32px a tučností 800 proti 25.6px a 600, a Norka
   na to řekla: *„ten tučný řádek ne."* Důraz dělá barva, ne velikost. */
.zadani-pribeh .zadani-priklad {
  display: block; font-size: .8em; font-weight: 600; color: var(--otazka);
}


/* Díra ve slově. `____` = celé slovo, `_` = jedno písmeno. Motor ten rozdíl
   používá na netipnutelnost, takže ho rozhraní musí ukázat jinak. */
.dira, .pismeno-dira {
  display: inline-block; vertical-align: -3px;
  border-bottom: 4px solid var(--jahodova); border-radius: 2px;
}
.dira { width: 2.4em; }
.pismeno-dira { width: .75em; }

.obrazek-cviceni { display: block; max-width: 100%; max-height: 28dvh; margin: 0 auto;
                   border-radius: var(--r); }

.odpoved-plocha { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* Karty (výběr ze čtyř, ano/ne) */
/* DLAŽDICE, ne obdélníky pod sebou (Norka 28. 8. 2026). Dvě vedle sebe, vysoké,
   každá ve své barvě z Píchalova trička, dají se rozlišit i podle barvy. */
.karty { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.karty.dve { grid-template-columns: 1fr 1fr; }
.karta {
  min-height: 96px; padding: 14px 12px;
  border: 0; border-radius: var(--r);
  background: var(--karta); color: var(--inkoust);
  font-size: clamp(23px, 2.6vw, 32px); font-weight: 900; text-align: center; cursor: pointer;
  box-shadow: 0 6px 0 var(--karta-okraj), inset 0 2px 0 rgba(255,255,255,.6),
              0 10px 20px var(--stin);
  transition: transform .07s, box-shadow .07s, background .15s;
}
.karta.velka { min-height: 128px; font-size: clamp(30px, 3.4vw, 42px); }

/* Barvy dlaždic jsou barvy z doupěte: malina, borůvka, jahoda, bleděmodrá, žlutá.
   Bílý text nesou tmavší tři; na bleděmodré a žluté zůstává tmavý, jinak by nešel číst. */
.karta.barva0 { background: var(--malinova);   color: #fff;     box-shadow: 0 6px 0 var(--malinova-t),   inset 0 2px 0 rgba(255,255,255,.4), 0 10px 20px var(--stin); }
.karta.barva1 { background: var(--boruvkova);  color: #fff;     box-shadow: 0 6px 0 var(--boruvkova-t),  inset 0 2px 0 rgba(255,255,255,.4), 0 10px 20px var(--stin); }
.karta.barva2 { background: var(--jahodova);   color: #fff;     box-shadow: 0 6px 0 var(--jahodova-t),   inset 0 2px 0 rgba(255,255,255,.4), 0 10px 20px var(--stin); }
.karta.barva3 { background: var(--bledemodra); color: var(--bledemodra-tx);  box-shadow: 0 6px 0 var(--bledemodra-t), inset 0 2px 0 rgba(255,255,255,.55), 0 10px 20px var(--stin); }
.karta.barva4 { background: var(--zluta);      color: #46320A;  box-shadow: 0 6px 0 var(--zluta-t),      inset 0 2px 0 rgba(255,255,255,.55), 0 10px 20px var(--stin); }
.karta[class*="barva"]:active:not(:disabled) { transform: translateY(6px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -2px 5px rgba(0,0,0,.22), 0 3px 8px var(--stin); }
.karta:active:not(:disabled) { transform: translateY(6px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 5px rgba(0,0,0,.2), 0 3px 8px var(--stin); }
.karta:disabled { cursor: default; }
.karta[class*="barva"]:disabled { filter: saturate(.55) brightness(.96); }
.karta.zvolena { border-color: var(--modra); background: color-mix(in srgb, var(--modra) 10%, var(--karta)); }
.karta.spravna, .karta[class*="barva"].spravna {
  background: var(--spravne); color: #fff; box-shadow: 0 5px 0 #1F7537, 0 8px 16px var(--stin); }
.karta.spatna, .karta[class*="barva"].spatna {
  background: var(--spatne);  color: #fff; box-shadow: 0 5px 0 #A5341F, 0 8px 16px var(--stin); }

/* Písmenkovník a číselník, hlavní stavební kámen appky.
   Změřeno na 816 cvičeních: písmeno 87, slovo 231. Systémová klávesnice je pro
   sedmileté dítě lovení v malém, tohle jsou velké dlaždice pod palcem. */
.dlazdice { display: grid; gap: 6px; }
.dlazdice.pismena { grid-template-columns: repeat(14, 1fr); }
.dlazdice.cislice { grid-template-columns: repeat(10, 1fr); gap: 8px; }

.dlazdice-znak {
  min-height: 52px; padding: 0 2px; border: 0; border-radius: var(--r-male);
  background: var(--karta); color: var(--inkoust);
  font-size: clamp(20px, 2.1vw, 27px); font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 var(--karta-okraj), inset 0 2px 0 rgba(255,255,255,.6), 0 5px 10px var(--stin);
  transition: transform .06s, box-shadow .06s, background .12s;
}
.dlazdice.cislice .dlazdice-znak { min-height: 78px; font-size: clamp(28px, 3.2vw, 40px); }
.dlazdice-znak:active:not(:disabled) { transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.18); }
.dlazdice-znak:disabled { color: var(--inkoust-slaby); cursor: default; box-shadow: none; }
.dlazdice-znak.prepinac {
  grid-column: span 3; background: var(--pozadi-2); font-size: 16px; gap: 6px;
}

.dlazdice-znak.samohlaska { background: #FFF6DC; color: #7A5A07; }
.dlazdice-znak.zvolena { border-color: var(--modra); background: color-mix(in srgb, var(--modra) 12%, var(--karta)); }
.dlazdice-znak.spravna { border-color: var(--spravne); background: var(--spravne-svet); color: var(--spravne); }
.dlazdice-znak.spatna  { border-color: var(--spatne);  background: var(--spatne-svet);  color: var(--spatne); }

/* Co dítě skládá. Velké uprostřed, ne řádek ve formuláři. */
.skladane-rada { display: flex; gap: 8px; align-items: stretch; }
.skladane {
  flex: 1; min-height: 58px; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 6px 10px;
}
.skladane .znak {
  min-width: 42px; padding: 6px 8px; border-radius: var(--r-male);
  background: var(--karta); box-shadow: 0 3px 10px var(--stin);
  font-size: 26px; font-weight: 900; text-align: center;
}
.skladane .znak.prazdny { min-width: 42px; height: 44px; background: rgba(255,255,255,.45);
                          box-shadow: none; border: 2px dashed var(--karta-okraj); }
.skladane.ok .znak { color: var(--spravne); }
.skladane.ne .znak { color: var(--spatne); }
.smazat {
  flex: none; width: 62px; border: 2px solid var(--karta-okraj); border-bottom-width: 4px;
  border-radius: var(--r-male); background: var(--pozadi-2); color: var(--inkoust);
  font-size: 21px; cursor: pointer;
}
.smazat:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.smazat:disabled { opacity: .35; cursor: default; }
.napsane {
  flex: 1; min-height: 68px; display: flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--r);
  background: var(--karta); border: 2px dashed var(--karta-okraj);
  font-size: 30px; font-weight: 900; letter-spacing: 2px; word-break: break-all;
}
.napsane.ok { border-style: solid; border-color: var(--spravne); color: var(--spravne); }
.napsane.ne { border-style: solid; border-color: var(--spatne);  color: var(--spatne); }
.kurzor { display: inline-block; width: 3px; height: 30px; background: var(--jahodova);
          animation: blika 1.05s steps(2) infinite; }
@keyframes blika { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Tečky postupu, dítě vidí, že se blíží konec. */
/* Kolikátá část dne běží a kolik z ní zbývá. Nahradilo to tečky za úkoly,
   části se měří na čas, takže počet úkolů v nich není předem známý. */
.cast-postup { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
               background: rgba(255,255,255,.88); border-radius: 99px; padding: 7px 20px;
               box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 8px 18px var(--stin); }
.cast-postup b { font-size: 15px; font-weight: 900; line-height: 1; }
.cast-postup small { font-size: 11px; font-weight: 800; color: var(--inkoust-slaby); line-height: 1; }
.cas-pruh { width: min(260px, 34vw); height: 10px; border-radius: 99px; overflow: hidden;
            background: #DCCFC0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }
.cas-pruh > i { display: block; height: 100%; border-radius: 99px;
                background: linear-gradient(90deg, var(--malinova), var(--jahodova) 55%, var(--zluta));
                box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
                transition: width 1s linear; }
.tecka { width: 9px; height: 9px; border-radius: 50%; background: var(--karta-okraj); transition: all .25s; }
.tecka.hotova { background: var(--bledemodra-t); }
.tecka.ted { background: var(--jahodova); transform: scale(1.5); }

/* ── Píchal vyskočí ───────────────────────────────────────────────────────────
   Vyskakuje VŽDYCKY NA STEJNÉ MÍSTO, vpravo dole, zpoza spodní hrany. Proto má
   bublina pevné místo vedle něj: až Norka vymění pózu za jinou, nic se neposune
   a nemusí se nic přepočítávat podle obrázku.
   Výška se drží v `dvh`, ne v procentech rodiče, past z `CO_PLATI.md` A9. */
.vyskok {
  position: absolute; inset: auto 0 0 0; z-index: 5;
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: 0; padding: 0 max(14px, env(safe-area-inset-right)) 0 0;
  pointer-events: none;
}
.vyskok > * { pointer-events: auto; }

/* Vyskakuje ZLEVA do dvou třetin výšky (Norka 28. 8. 2026). Žádný rámeček,
   žádné kolečko, je to postava, ne ikonka. Stojí vždycky na stejném místě,
   takže bublina vedle něj má pevné místo a při výměně pózy se nic neposune. */
.vyskok-pichal {
  flex: none; width: auto; height: 60dvh;   /* menší, ať neleze z obrazu a nepřekrývá
                                                zadání (Norka 1. 9. 2026); bylo 74dvh */
  margin: 0 -7dvh 5dvh -8dvh;   /* blíž k levému kraji a nadzvednutý ode dna */
  pointer-events: none;         /* čtvercové plátno je z větší části průhledné */
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45));
  animation: vyskoceni .42s cubic-bezier(.2, 1.5, .35, 1) both;
  transform-origin: center bottom;
}
@keyframes vyskoceni {
  from { transform: translate(-30%, 55%) scale(.92); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* BUBLINA, modrá, černé písmo (Norka 28. 8. 2026). Kulatá jako opravdová
   bublina, ne obdélník s růžkem: velký rádius a ocásek dole u Píchala. */
.bublina {
  position: relative; flex: 1; max-width: 780px; margin: 0 0 8dvh 0;
  background: var(--bledemodra); color: var(--inkoust);
  border-radius: 36px; padding: 20px 30px;
  box-shadow: 0 10px 34px var(--stin), inset 0 2px 0 rgba(255, 255, 255, .5);
  animation: bublinaSem .32s .1s cubic-bezier(.2, 1.3, .35, 1) both;
}
@keyframes bublinaSem {
  from { transform: translateY(14px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Ocásek míří VODOROVNĚ k Píchalovi, ne šikmo dolů, bublina je hned vedle něj
   a puntíky vedou rovně k jeho rameni. Dvě kolečka místo trojúhelníku:
   trojúhelník na kulaté bublině vypadá jako přilepený štítek. */
.bublina::before, .bublina::after {
  content: ''; position: absolute; border-radius: 50%; background: var(--bledemodra);
}
.bublina::before { width: 26px; height: 26px; left: -16px; bottom: 46%; }
.bublina::after  { width: 13px; height: 13px; left: -38px; bottom: 42%; }

/* Volt stojí VLEVO jako Píchal (Norka 1. 9. 2026: „Volta dát tam, kde máme
   Píchala"). Baňky nezakrývá proto, že Voltovo pozadí cvičení (`stul-volt-4`)
   je zrcadlené, takže stůl s baňkami je napravo, dál od Voltova místa.
   Jediné, co se liší od Píchala, je velikost: Voltova póza má nad hlavou
   průhledné odsazení (postava ~78 % plátna), tak by byla při stejné výšce
   menší. Vyšší plátno to dorovná, aby byli oba stejně velcí. */
/* Volt nemá v plátně prázdný levý okraj jako Bodlinka, takže záporný okraj
   ho na počítači uřízl v půlce (Norka 2. 9. 2026: „Volt je tam jen z půlky").
   Na telefonu platí vlastní pravidlo níž. */
#app.svet-volt .vyskok-pichal { height: 68dvh; margin-left: 0; margin-right: -3dvh; }

/* Všechno v bublině je ČERNÉ, i to, co Píchal říká (Norka 28. 8. 2026).
   Jestli to vyšlo, se pozná z dlaždic, proto se přestaly odbarvovat, viz níž. */
.bublina-nadpis { font-weight: 900; font-size: 23px; margin: 0 0 6px; color: var(--inkoust); }
.bublina-veta { margin: 0 0 4px; font-size: 19px; line-height: 1.45; font-weight: 700; color: var(--inkoust); }
.bublina-veta em { font-style: normal; font-weight: 900; color: #14415C; }

/* „Pokračovat" sedí na KONCI bubliny vpravo a je hranaté, ne pilulka,
   na hranatém se dítěti líp trefuje (Norka 28. 8. 2026). */
.bublina-spodek { display: flex; gap: 16px; align-items: center; justify-content: flex-end;
                  margin-top: 14px; }
/* Pořadí se řeší v CSS, ne v kódu: tlačítko je v HTML první (aby na něj šlo
   z klávesnice dřív), ale na obrazovce patří na konec bubliny vpravo. */
.bublina-spodek .nahlasit { order: 1; margin-right: auto; }
.bublina-spodek .tl { order: 2; }
/* ČTVEREC na konci bubliny (Norka 28. 8. 2026). Velká plocha, na kterou se dobře
   trefuje, a znak místo slova: šipka dál, kolečko zkusit znovu. Dítě si to spojí
   po prvním ťuknutí a nemusí to číst pokaždé znovu. */
.bublina-spodek .tl.ctverec {
  flex: 0 0 auto; width: 74px; height: 74px; min-height: 0; padding: 0;
  font-size: 32px; line-height: 1; border-radius: 20px;
  box-shadow: 0 5px 0 var(--modra-tmava), inset 0 2px 0 rgba(255,255,255,.4), 0 6px 12px var(--stin);
}
.bublina-spodek .tl.ctverec.cervene {
  box-shadow: 0 5px 0 var(--jahodova-t), inset 0 2px 0 rgba(255,255,255,.4), 0 6px 12px var(--stin);
}
.bublina-spodek .tl:active:not(:disabled) { transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 6px var(--stin); }
/* Nahlásit chybu. Text je od 30. 8. 2026 delší a hlavně LÁKAVÝ, slibuje
   lístečky, tak nemá vypadat jako drobná poznámka pod čarou. Zůstává ale
   TIŠE: hlavní je pořád tlačítko „dál", ne tohle. */
/* VÝKLAD ZNOVU v hlavě lekce (Norka 2. 9. 2026 v noci: „možnost se na to
   vysvětlení vracet"). Tichá pilulka vedle lístků, ne další velké tlačítko. */
.vyklad-znovu {
  margin-left: auto; border: 1.5px solid var(--karta-okraj); background: var(--karta);
  color: var(--inkoust); font: inherit; font-size: 13px; font-weight: 800;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; line-height: 1;
}
.vyklad-znovu:active { transform: translateY(2px); }
@media (max-height: 500px) { .vyklad-znovu { font-size: 11px; padding: 4px 9px; } }
/* Bublina, která čeká na vysvětlení z modelu. */
.bublina-ceka { opacity: .55; letter-spacing: .2em; }
/* „Vysvětli mi to jinak" NENÍ tichý odkaz jako nahlášení chyby: dítě, které
   třikrát nepochopilo, ho musí najít. Pilulka, ale menší než ▶, hlavní cesta
   je pořád „dál". */
.bublina-spodek .jinak {
  order: 1; margin-right: auto; text-decoration: none; color: var(--inkoust);
  background: var(--karta); border: 1.5px solid var(--karta-okraj); border-radius: 999px;
  padding: 10px 16px; font-size: 15px; font-weight: 800; max-width: none;
}
.bublina-spodek .jinak:active { transform: translateY(2px); }
@media (max-height: 500px) { .bublina-spodek .jinak { font-size: 13px; padding: 7px 12px; } }

.nahlasit { border: 0; background: transparent; color: var(--inkoust-slaby);
            font-size: 13px; font-weight: 700; text-decoration: underline;
            cursor: pointer; padding: 8px 4px; text-align: left;
            max-width: 260px; line-height: 1.25; }

/* Když Píchal mluví, dlaždice pod ním ustoupí do pozadí, pozornost patří jemu. */
/* Když Píchal mluví, ODPOVĚDI zešednou, pozornost patří jemu (Norka 28. 8. 2026).
   ZADÁNÍ zůstává barevné a čitelné: dítě si u nápovědy potřebuje přečíst, na co
   vlastně odpovídá. Když šedlo všechno, otázka zmizela zrovna ve chvíli,
   kdy je nejvíc potřeba. */
/* Když Píchal vyskočí, úkol se odsune doprava, jinak mu stojí přes zadání
   a dítě si nepřečte otázku, ke které si právě čte nápovědu. */
.lekce:has(.vyskok) .ukol {
  padding-left: min(28%, 290px);
  transition: padding-left .32s cubic-bezier(.2, .8, .3, 1);
}
.lekce .ukol { transition: padding-left .32s cubic-bezier(.2, .8, .3, 1); }

.lekce:has(.vyskok) .odpoved-plocha {
  filter: grayscale(1) opacity(.5);
  transition: filter .3s ease;
}

.dalsi-vec { padding: 12px 16px; gap: 14px; max-width: 620px; }
.dalsi-vec-obrys {
  flex: none; width: 68px; height: 68px; display: grid; place-items: center;
  padding: 4px; text-align: center; border-radius: var(--r-male);
  border: 3px dashed var(--malinova); color: var(--malinova);
  font-size: 10px; font-weight: 800; line-height: 1.1;
}
.dalsi-vec-text { flex: 1; display: flex; flex-direction: column; gap: 5px; }
/* Proužky jsou SYTÉ. Bleděmodrá do žluté na světlém podkladu splývala a vypadala
   vybledle, Norka na to narazila hned. Výplň je teď malina → žlutá a drážka je
   tmavá, takže je i pár procent vidět. */
.pruh-postupu {
  height: 14px; border-radius: 99px; overflow: hidden;
  background: #DCCFC0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18);
}
.pruh-postupu > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--malinova), var(--jahodova) 55%, var(--zluta));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}

/* Dlaždice pro text nad scénou. Krajina ani nora se nepřebarvují clonou, takže
   všechno, co se má číst, musí stát na vlastní ploše. Tohle pravidlo se jednou
   omylem smazalo při přepisu odezvy a texty pak ležely přímo na obrázku. */
.panel {
  background: var(--karta); border-radius: var(--r);
  box-shadow: 0 10px 30px var(--stin);
  padding: 14px 20px; margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 18px; text-align: left;
}
.panel .nazev, .panel .podnazev, .panel .drobne { text-align: left; }
.uvod-panel .pichal-cely { width: min(20vw, 120px); margin: 0; }
.odmena-panel { flex-wrap: wrap; justify-content: center; }
.odmena-panel .pas { flex: 1 0 100%; }
/* Panel, okýnka a tlačítka jsou JEDEN vycentrovaný blok se stejnými mezerami.
   Předtím byla tlačítka přilepená dolů a mezi nimi a okýnky zela díra, zatímco
   nahoře bylo nacpáno, Norka na to narazila hned. */
.odmena .stred { justify-content: flex-start; gap: 18px; padding-top: 5dvh; }
.rada-dole { display: flex; flex-direction: row; justify-content: center; gap: 14px; }
.rada-dole .tl { flex: 0 1 260px; }

/* ── Letící lístek ────────────────────────────────────────────────────────────
   Odměna za každý úkol. Nahradil hvězdičku (Norka 28. 8. 2026) a hlavně LETÍ,
   dítě musí vidět, že něco dostalo, ne jen že se zvedlo číslo.
   Lístky jsou zároveň body do miniher na konci dne.

   Let je DLOUHÝ A PROSTOROVÝ: lístek nejdřív vyskočí k divákovi (zvětší se),
   pak se odnese stranou a nahoru a teprve odtud padá do počítadla. Krátký přímý
   přelet přes půl obrazovky si dítě ani nestačilo všimnout. */
.listek {
  position: fixed; z-index: 60; pointer-events: none;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  display: grid; place-items: center; font-size: 84px; line-height: 1;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
  animation: listekLeti 1.75s cubic-bezier(.32, .05, .35, 1) both;
}
.listek img { width: 100%; height: 100%; object-fit: contain; }

@keyframes listekLeti {
  /* vyskočí k divákovi */
  0%   { transform: translate(0, 0) scale(.3) rotate(0deg);      opacity: 0; }
  12%  { transform: translate(0, -30px) scale(1.9) rotate(-12deg); opacity: 1; }
  30%  { transform: translate(0, -46px) scale(1.75) rotate(10deg); opacity: 1; }
  /* odnese se obloukem stranou a nahoru */
  55%  { transform: translate(calc(var(--dx) * .3 - 90px), calc(var(--dy) * .35 - 70px))
                    scale(1.35) rotate(-24deg); opacity: 1; }
  78%  { transform: translate(calc(var(--dx) * .72 + 40px), calc(var(--dy) * .6 - 20px))
                    scale(1) rotate(18deg); opacity: 1; }
  /* a spadne do počítadla */
  100% { transform: translate(var(--dx), var(--dy)) scale(.34) rotate(-6deg); opacity: 0; }
}

/* Počítadlo lístků je větší než ostatní odznaky, je to jediné číslo,
   které dítě během cvičení sleduje. */
.odznak.pocet-listku {
  font-size: 28px; padding: 11px 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .7),
              0 8px 18px var(--stin);
}
.odznak.pocet-listku img { width: 30px; height: 30px; object-fit: contain; }
.odznak.cukni { animation: cuknuti .5s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes cuknuti { 0% { transform: scale(1); } 42% { transform: scale(1.42) rotate(-5deg); } 100% { transform: scale(1); } }

/* ── Odměna ───────────────────────────────────────────────────────────────────
   Každá věc, kterou dítě sbírá, má svoje velké okýnko: co to je, kolik toho má
   a, po najetí nebo ťuknutí, proč to sbírá (Norka 28. 8. 2026).
   Každé okýnko má svou barvu z doupěte, aby se daly rozeznat na první pohled. */
.odmena-panel { max-width: 720px; }
.odmena-obrazek { flex: none; width: min(22vw, 130px); aspect-ratio: 1; object-fit: contain;
                  animation: skok .55s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes skok { 0% { transform: scale(.5) rotate(-14deg); opacity: 0; }
                  60% { transform: scale(1.12) rotate(4deg); } 100% { transform: none; opacity: 1; } }

.okna {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 1000px; margin: 0 auto; width: 100%;
}
@media (max-width: 780px) { .okna { grid-template-columns: repeat(2, 1fr); } }

.okno {
  position: relative; overflow: visible;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 10px 12px; border: 0; border-radius: var(--r);
  color: #fff; cursor: pointer; text-align: center;
  box-shadow: 0 6px 0 var(--okno-hrana), inset 0 2px 0 rgba(255,255,255,.35),
              0 10px 22px var(--stin);
  transition: transform .1s, box-shadow .1s;
}
.okno:active { transform: translateY(6px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 8px var(--stin); }

.b-jahodova  { background: var(--jahodova);  --okno-hrana: var(--jahodova-t); }
.b-bledemodra { background: var(--bledemodra); --okno-hrana: var(--bledemodra-t); color: var(--bledemodra-tx); }
.b-boruvkova { background: var(--boruvkova); --okno-hrana: var(--boruvkova-t); }
.b-malinova  { background: var(--malinova);  --okno-hrana: var(--malinova-t); }

.okno-ikona { font-size: 30px; line-height: 1; }
.okno-ikona img { width: 38px; height: 38px; object-fit: contain; display: block; }
.odznak img { width: 26px; height: 26px; object-fit: contain; vertical-align: -5px; }
.okno-cislo { font-size: clamp(22px, 2.6vw, 30px); font-weight: 1000; line-height: 1.05; }
.okno-popis { font-size: 13px; font-weight: 800; opacity: .92; line-height: 1.15; }
.okno-pruh { width: 100%; height: 10px; border-radius: 99px; margin-top: 6px;
             background: rgba(0, 0, 0, .3); overflow: hidden;
             box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.okno-pruh > i { display: block; height: 100%; border-radius: 99px;
                 background: linear-gradient(90deg, #FFF3C9, var(--zluta));
                 box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5);
                 transition: width .5s cubic-bezier(.2, .8, .3, 1); }

/* Nápověda. Najetím u myši, ťuknutím na dotyku, jinak by se k ní na tabletu
   nikdo nedostal. Vyjíždí nad okýnko, aby nezakryla tlačítka pod ním. */
.okno-napoveda {
  position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 0;
  width: max(220px, 100%); padding: 10px 13px; border-radius: var(--r-male);
  background: var(--inkoust); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.4; text-align: left;
  box-shadow: 0 10px 26px var(--stin);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none; z-index: 10;
}
.okno-napoveda::after {
  content: ''; position: absolute; left: 50%; top: 100%; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--inkoust); border-bottom: 0;
}
.okno:hover .okno-napoveda, .okno.otevrene .okno-napoveda {
  opacity: 1; visibility: visible; transform: none;
}

/* ── Rodiče ──────────────────────────────────────────────────────────────── */
.blok { background: var(--karta); border: 1px solid var(--karta-okraj); border-radius: var(--r);
        padding: 15px; display: flex; flex-direction: column; gap: 9px; }
.blok h3 { margin: 0; font-size: 16px; font-weight: 900; }
.blok label { font-size: 14px; font-weight: 700; color: var(--inkoust-slaby); }
.blok select { font: inherit; font-weight: 700; padding: 11px; border-radius: var(--r-male);
               border: 2px solid var(--karta-okraj); background: var(--pozadi); color: var(--inkoust); }
.chyba-radek { font-size: 13px; padding: 7px 0; border-top: 1px solid var(--karta-okraj);
               color: var(--inkoust-slaby); font-weight: 600; word-break: break-word; }
.hlaska-chyby { background: var(--spatne-svet); color: var(--spatne);
                border-radius: var(--r); padding: 14px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── ROZCESTNÍK, vstupní strana pro všechny ročníky ──────────────────────────
   Neutrální schválně. Není tu Píchal ani Volt, není tu nora: kdo sem přijde,
   ještě neví, kterého průvodce dostane. Barvy jsou z palety appky, obrázek
   žádný, jediné místo v appce, kde se nic nekreslí. */
/* POZOR na výšku: `.obrazovka.rozcestnik` je specifičtější než `.obrazovka`,
   takže kdyby si tu nastavil vlastní `height`, přebil by tím pravidlo pro velké
   obrazovky o pár řádků výš, karta by byla o odsazení vyšší než okno a stránka
   by se posouvala o 48 px. Stalo se to 29. 8. 2026. **Výška se sem nepíše**,
   dědí se z `.obrazovka`. */
.obrazovka.rozcestnik {
  display: grid; place-items: center; padding: 18px;
  /* Bez obrázku. Blokový podklad tu byl jeden den (2. 9. 2026 dopoledne),
     s hesly po stranách se pod textem tloukl a Norka ho odpoledne odvolala. */
  background: var(--pozadi);
}
.rozcestnik-vnitrek {
  width: 100%; max-width: 760px; max-height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  /* MÍSTO NA BOK A STÍN, ZE VŠECH STRAN. Tlačítka jsou tělesa, bok, obrys
     i dosedací stín leží MIMO rámec prvku. Bez odsazení je `overflow` ořízne.
     Norka 29. 8. 2026 nejdřív našla uříznutý spodek, pak i boky.

     Pozor, `overflow-x: visible` by nepomohlo: když je jedna osa `auto`,
     druhá se `visible` chovat nemůže. Musí to být odsazení. */
  padding: 4px 22px 34px;
}
.rozcestnik-vnitrek.uzsi { max-width: 460px; }
.rozcestnik-hlava { text-align: center; }

/* PRUH „JE NOVÁ VERZE“, úplně nahoře na rozcestníku, nad názvem appky.
   Norka 30. 8. 2026 si předtím musela appku přeinstalovat, aby měla novou.

   Tlačítko jde přes celou šířku: je to jediná věc v řadě a půl širokého
   tlačítka s prázdnem vedle vypadá jako chyba vykreslení.
   Žádná červená, žádný vykřičník, není to porucha, je to nabídka. */
.nova-verze { margin-bottom: 4px; }
.nova-verze .tl { width: 100%; }
.rozcestnik-otazka { margin: 0; text-align: center; font-weight: 800;
                     color: var(--inkoust-slaby); }

/* Dlaždice dětí. `auto-fit` místo pevných dvou sloupců: na účtu může být jedno
   dítě i čtyři a mřížka se tomu přizpůsobí sama. */
.deti { display: grid; gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Úvodní strana: nejvýš dvě dlaždice vedle sebe. Když je dítě jedno, stojí
   vedle „Přidat dítě"; když jsou dvě, tlačítko zmizí a zbydou jen ony.
   Na úzkém telefonu pod sebe. */
/* Výška dlaždice je JEDNO ČÍSLO pro dítě i pro rodiče, jinak se to rozejde,
   jakmile někdo sáhne na jedno z nich. Norka 29. 8. 2026 chtěla „Pro rodiče"
   stejně velké jako dlaždice dětí. */
.rozcestnik-vnitrek { --vyska-dlazdice: 156px; }
.deti.dve { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.deti.dve .dite { padding: 22px 14px; min-height: var(--vyska-dlazdice); }
@media (max-width: 420px) { .deti.dve { grid-template-columns: 1fr; } }
/* Dlaždice na úvodní straně jsou FYZICKÁ TLAČÍTKA, ne kartičky (Norka
   29. 8. 2026): lesk shora, bok pod tělem, dosedací stín. Táž stavba jako
   u `.tl`, jen ve větším a v pastelu.

   **Písmo je totéž jako u jmen**, řez i velikost, ne barva. Text je tmavý,
   protože na pastelu by bílá nebyla čitelná. */
.dite {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px 12px; border: 0; border-radius: 30px;
  background-color: var(--karta); color: var(--inkoust);
  font: inherit; font-weight: 800; cursor: pointer; text-align: center;
  --bok: var(--karta-okraj); --hloubka: 8px;
  transition: transform .08s, box-shadow .08s;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 7%,
                    rgba(255,255,255,0) 22%),
    radial-gradient(ellipse 82% 58% at 40% 2%, rgba(255,255,255,.20), rgba(255,255,255,0) 68%),
    linear-gradient(to top, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 12%),
    linear-gradient(to bottom, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 44%, rgba(0,0,0,.18) 100%);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--bok) 70%, transparent),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    0 2px 0 color-mix(in srgb, var(--bok) 76%, white),
    0 var(--hloubka) 0 var(--bok),
    0 calc(var(--hloubka) + 3px) 8px -1px var(--stin),
    0 calc(var(--hloubka) + 11px) 24px -4px var(--stin);
}
.dite:active {
  transform: translateY(var(--hloubka));
  box-shadow: inset 0 2px 5px rgba(0,0,0,.2), 0 2px 6px var(--stin);
}
.b-past-zelena { background-color: var(--past-zelena); --bok: var(--past-zelena-t); }
.b-past-modra  { background-color: var(--past-modra);  --bok: var(--past-modra-t); }
.b-past-zluta  { background-color: var(--past-zluta);  --bok: var(--past-zluta-t); }
.b-past-ruzova { background-color: var(--past-ruzova); --bok: var(--past-ruzova-t); }
.b-past-seda   { background-color: var(--past-seda);   --bok: var(--past-seda-t); }
/* Druhá řada (Rodiče, Návod) je nižší, nemá kolečko ani ročník. */
.deti.dve + .deti.dve { margin-top: 12px; }
.deti.dve + .deti.dve .dite { min-height: 84px; }
.dite-kolecko { width: 54px; height: 54px; border-radius: 50%; display: grid;
                place-items: center; font-size: 24px; font-weight: 900; color: #fff; }
.dite-kolecko.prazdne { background: var(--pozadi-2); color: var(--inkoust-slaby);
                        border: 2px dashed var(--karta-okraj); }
.dite-jmeno { font-size: clamp(20px, 2.4vw, 26px); }
.dite-rocnik { font-size: clamp(14px, 1.5vw, 17px); font-weight: 700; color: var(--inkoust-slaby); }

/* Dítě, jehož průvodce ještě nestojí. Nesmí být vypnuté, ťuknout na svoje
   jméno musí jít vždycky, jinak si dítě myslí, že je s appkou něco špatně.
   Jen je vidět, že tam ještě nic není. */
.dite.ceka { opacity: .72; border-style: dashed; }
.dite.pridat { background-image: none; box-shadow: 0 4px 0 var(--karta-okraj), 0 8px 16px var(--stin);
               outline: 3px dashed var(--karta-okraj); outline-offset: -8px; }

.rozcestnik-pata { display: flex; justify-content: center; }
/* „Pro rodiče" je na úvodní straně jedna ze dvou cest, ne poznámka pod čarou,
   tak ať se podle toho i ťuká. Norka 29. 8. 2026: *„větší tlačítko pro rodiče."* */
/* „Pro rodiče" je na úvodní straně TŘETÍ ROVNOCENNÁ CESTA, ne poznámka pod
   čarou. Je proto stejně velké jako dlaždice dětí, jen jinou barvou, aby bylo
   poznat, že nevede k dítěti. Norka 29. 8. 2026. */
.rozcestnik-pata { margin-top: 2px; display: flex; justify-content: center; }
.rozcestnik-pata .tl.pro-rodice {
  /* Táž šířka jako jedna dětská dlaždice: polovina řady mínus půlka mezery. */
  width: calc(50% - 7px); min-width: 180px;
  min-height: var(--vyska-dlazdice); padding: 18px 14px; font-size: 22px;
  border-radius: var(--r);
  --hloubka: 12px;
}
@media (max-width: 420px) {
  .rozcestnik-pata .tl.pro-rodice { width: 100%; min-height: 88px; }
}

.pruh-hlava.jednoduchy { padding-bottom: 4px; }

.pole { font: inherit; font-weight: 700; padding: 11px; border-radius: var(--r-male);
        border: 2px solid var(--karta-okraj); background: var(--pozadi);
        color: var(--inkoust); width: 100%; }
.pole:focus { outline: 3px solid var(--modra); outline-offset: 1px; }
.drobne.chyba { color: var(--spatne); font-weight: 800; }

/* Rodičovská část otevřená z neutrálního rozcestníku. Nora tam nepatří,
   dítě ještě není vybrané, takže není ani průvodce, jehož nora by to byla. */
.obrazovka.rodice.bez-pozadi { background: var(--pozadi); }

/* Listování učivem. „Učit se" zůstává hlavní cestou a proto zůstává široké;
   „Vybrat učivo" je vedle něj a schválně tišší. */
.rada.dve-tlacitka { display: flex; gap: 10px; }
.rada.dve-tlacitka .tl.siroke { flex: 2; }
.rada.dve-tlacitka .tl.tise   { flex: 1; width: auto; }

.temata { display: grid; gap: 8px;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tema {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-radius: var(--r-male); text-align: left;
  border: 2px solid var(--karta-okraj); border-bottom-width: 4px;
  background: var(--karta); font-weight: 800; cursor: pointer; transition: transform .08s;
}
.tema:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.tema-nazev { font-size: 15px; }
.tema-stav { font-size: 12px; font-weight: 700; color: var(--inkoust-slaby);
             white-space: nowrap; }
/* Zvládnuté téma je vidět, ale NENÍ vypnuté, projít si ho znovu musí jít. */
.tema.hotove { background: var(--pozadi-2); }
.tema.hotove .tema-stav { color: var(--spravne); }

/* ── Rodičovská stránka: přepínač dětí, slabiny, proužky dní ───────────────── */
.prepinac-deti { display: flex; gap: 8px; flex-wrap: wrap; }
.prepinac-deti .tl { width: auto; padding: 8px 16px; }

.slabina { display: flex; align-items: baseline; justify-content: space-between;
           gap: 10px; padding: 7px 0; border-top: 1px solid var(--karta-okraj); }
/* Hodnota „napoprvé 38 %" se u dlouhého názvu tématu lámala na „38" / „%"
   (změřeno 3. 9. 2026 na 390 px). Hodnota se nezalamuje a nezužuje, láme se
   název, ten to snese. */
.slabina > .drobne:last-child { white-space: nowrap; flex: 0 0 auto; margin-left: 12px; }

.slabina:first-of-type { border-top: 0; }

/* Sloupečky dní. Bez knihovny, je to osm řádků CSS a čárový graf by tu stejně
   nikdo nečetl; rodiče zajímá jediné, jestli to jde nahoru nebo dolů. */
.prouzky { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.prouzek { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
           align-items: center; height: 100%; gap: 3px; }
.prouzek-sloup { width: 100%; background: var(--modra); border-radius: 4px 4px 0 0;
                 min-height: 4px; }
.prouzek-popis { font-size: 10px; font-weight: 700; color: var(--inkoust-slaby); }

/* Rodičovská stránka je ČTENÍ, ne cvičení, a proto se chová jinak než zbytek.
   Dětské obrazovky jsou schválně jedna plocha bez posouvání: dítě má vidět jeden
   úkol a nic víc. Rodič naopak čte odshora dolů a na telefonu naležato je výška
   to jediné, čeho je málo. Proto tady:
     – bloky ve dvou sloupcích, kde je místo (posouvání je pak poloviční),
     – čitelnější řádkování,
     – posuvník patří stránce, ne škvíře uprostřed.  */
.obrazovka.rodice .stred.nahoru {
  display: grid; align-content: start; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding-right: 4px; padding-bottom: 18px;
  /* Obsah se u spodní hrany ROZPLYNE, místo aby se uťal uprostřed dlaždice.
     Ostrý řez vypadá jako rozbité okno; rozplynutí říká „pokračuje to níž".
     Norka 29. 8. 2026: *„a pro rodiče je nějaké useklé."* */
  --mizeni: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image: var(--mizeni);
          mask-image: var(--mizeni);
}
/* Posuvník je vidět schválně, je to jediné, co rodiči řekne, že níž něco je. */
.obrazovka.rodice .stred.nahoru { scrollbar-width: thin; }
.obrazovka.rodice .stred.nahoru::-webkit-scrollbar { width: 10px; }
.obrazovka.rodice .stred.nahoru::-webkit-scrollbar-thumb {
  background: var(--karta-okraj); border-radius: 6px;
}
/* Přepínač dětí a účet drží celou šířku, jsou to věci, které platí pro celou
   stránku, ne jeden sloupec. */
.obrazovka.rodice .prepinac-deti,
.obrazovka.rodice #blok-uctu { grid-column: 1 / -1; }
.obrazovka.rodice .blok { line-height: 1.5; }
.obrazovka.rodice .blok .drobne { font-size: 13.5px; }

/* Telefon naležato: výšky je málo, tak ať se nemrhá odsazením. */
@media (max-height: 460px) {
  .obrazovka.rodice .blok { padding: 11px 13px; gap: 6px; }
  .obrazovka.rodice .prouzky { height: 64px; }
}

/* Návod se čte odshora dolů, ne po sloupcích, text v úzkých sloupcích
   s přeskakováním očí by se četl hůř než delší stránka. */
.obrazovka.navodova .stred.nahoru { display: block; max-width: 720px; margin: 0 auto; }
.obrazovka.rodice .blok p { margin: 0; }


/* Řádek dítěte v rodičovské části, dá se na něj ťuknout a upravit ho. */
.radek-dite {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 2px; border: 0; background: none; cursor: pointer;
  border-top: 1px solid var(--karta-okraj); font: inherit; text-align: left;
  color: var(--inkoust);
}
.radek-dite:first-of-type { border-top: 0; }
.radek-dite:active { opacity: .6; }

/* ── Obrazovka učiva ──────────────────────────────────────────────────────────
   Norka 29. 8. 2026: les na pozadí, velká barevná 3D tlačítka, šipka bez textu
   a všechno větší, *„na mobilu to bude nečitelné."*
   Proto se tahle obrazovka jako JEDINÁ roztahuje přes celý prohlížeč: je to
   rozcestí, ne úkol, a na úzkém telefonu je každý pixel navíc znát. */
.obrazovka.ucivo-obrazovka { max-width: none; width: 100%; border-radius: 0; }
/* Přes CELÝ prohlížeč, bez odsazení kolem i bez zaoblených rohů karty.
   `#app` má na velkém okně odsazení 24 px; tady se ruší zápornou vnější
   mezerou, jinak by kolem lesa zůstal zelený rámeček. */
@media (min-width: 900px) {
  .obrazovka.ucivo-obrazovka {
    height: var(--vh, 100dvh); max-width: none; border-radius: 0;
    box-shadow: none; padding: 20px 26px;
    margin: -24px; width: calc(100% + 48px);
  }
  .obrazovka.ucivo-obrazovka .pozadi-obrazovky { border-radius: 0; }
}
/* Obsah doprostřed výšky, les pod ním má být vidět, ne prázdný. */
.ucivo-stred {
  max-width: 1400px; width: 100%; margin: 0 auto;
  justify-content: center; align-content: center;
}
/* Les je tu bez clony, v plné barvě, clona se nepřidává už v `app.js`. */

/* Šipka zpátky: velká, kulatá, bez popisku. Je jediná na obrazovce, takže
   se nemá s čím splést. */
/* Kolečko se šipkou. Šipka zabírá VĚTŠINU kolečka, u znaku z písma to nešlo,
   ten byl drobný a nešel zvětšit. Norka na to upozorňovala dvakrát. */
.kolecko.velke {
  width: 68px; height: 68px; padding: 0;
  display: grid; place-items: center;
  box-shadow: 0 6px 0 var(--karta-okraj), 0 12px 22px var(--stin);
}
.kolecko.velke svg { width: 42px; height: 42px; color: var(--inkoust); }
@media (min-width: 900px) {
  .kolecko.velke { width: 78px; height: 78px; }
  .kolecko.velke svg { width: 48px; height: 48px; }
}
.kolecko.velke:active { transform: translateY(6px); box-shadow: 0 2px 6px var(--stin); }

/* Předměty, velké 3D dlaždice, každá jinou barvou. */
/* Užší a vyšší: Norka 29. 8. 2026 *„udělej je vyšší, víc 3D a můžeš je trochu
   zmenšit."* Dlaždice se drží u sebe doprostřed, ne roztažené přes celou šířku. */
.predmety {
  display: grid; gap: 26px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
}
.predmet {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 230px; padding: 30px 22px; border: 0;
  border-radius: var(--r); cursor: pointer; color: #fff;
  transition: transform .08s, box-shadow .08s;
}
.predmet-nazev { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; }
.predmet-stav  { font-size: clamp(15px, 1.5vw, 18px); font-weight: 700; opacity: .92; }
/* Předměty v učivu, týž pohled shora, jen větší. */
.predmet {
  border-radius: 26px;
  background-image:
    radial-gradient(ellipse 64% 42% at 32% 12%, rgba(255,255,255,.5), rgba(255,255,255,0) 66%),
    linear-gradient(to bottom, rgba(255,255,255,.14), rgba(0,0,0,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 3px 0 color-mix(in srgb, var(--bok) 84%, white),
    0 var(--hloubka) 0 var(--bok),
    0 calc(var(--hloubka) + 8px) 20px -3px var(--stin),
    0 calc(var(--hloubka) + 18px) 34px -8px var(--stin);
}
.predmet:active {
  transform: translateY(var(--hloubka));
  box-shadow: inset 0 3px 8px rgba(0,0,0,.24), 0 3px 8px var(--stin);
}
.predmet.barva0 { background-color: var(--ruzova);   --bok: var(--ruzova-t); }
.predmet.barva1 { background-color: var(--modra);    --bok: var(--modra-tmava); }
.predmet.barva2 { background-color: var(--malinova); --bok: var(--malinova-t); }

/* PŘEDMĚT, KTERÝ SE TEPRVE DĚLÁ (Norka 30. 8. 2026).
   Text je tmavý, na šedém tlačítku by bílá nebyla čitelná, stejně jako
   u jmen dětí na pastelu. Obrázek tlačítka se přiřazuje níž, u ostatních
   barev, ne tady: pořadí v souboru rozhoduje. */
.predmet.ceka { color: var(--inkoust); cursor: default; }
.predmet.ceka .predmet-stav { opacity: .8; font-weight: 800; }
/* Nemačká se, tak se ani nepropadá. */
.predmet.ceka:active { transform: none; }

/* Témata uvnitř předmětu, taky větší, ať se na mobilu daly trefit prstem. */
.ucivo-obrazovka .temata { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ucivo-obrazovka .tema { min-height: 74px; padding: 16px 20px; }
.ucivo-obrazovka .tema-nazev { font-size: clamp(17px, 1.8vw, 21px); }
.ucivo-obrazovka .tema-stav  { font-size: 14px; }

/* Přepínač předmětu v rodičovské části. Zaškrtávátko je velké, rodič to bude
   ťukat na telefonu, ne myší. */
.prepinac-radek {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  font-weight: 700; cursor: pointer;
  border-top: 1px solid var(--karta-okraj);
}
.prepinac-radek:first-of-type { border-top: 0; }
.prepinac-radek input { width: 26px; height: 26px; accent-color: var(--modra); cursor: pointer; }

/* ── Telefon naležato: nízká obrazovka ────────────────────────────────────────
   Norka 29. 8. 2026: *„na mobilu zmenši tlačítka, tlačítko Hotovo se překrývá
   s čísly."* Číselník má klávesy 78 px vysoké a pod nimi ještě „Hotovo",
   na obrazovce vysoké 350 px se to nevejde a leze to přes sebe.

   Zmenšuje se JEN to, co roste do výšky: klávesy, potvrzovací tlačítko,
   mezery. Písmo zadání zůstává, to je to jediné, co dítě musí přečíst. */
@media (max-height: 500px) {
  .obrazovka { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .ukol { gap: 8px; }

  /* Úkol s klávesnicí přerůstal do kláves: zadání mělo plné odsazení i velikost
     a spolu s klávesnicí se to na nízké obrazovce nevešlo, překrývalo se (Norka
     1. 9. 2026: „úkoly s klávesnicí jsou moc velké, překrývají se, zmenšit").
     Ubírá se hlavně odsazení a mezery, písmo jen mírně; číst se musí dál. */
  .zadani { padding: 8px 12px; font-size: clamp(18px, 4.8vh, 26px); line-height: 1.2; }
  .ukol-otazka { gap: 6px; }
  .odpoved-plocha { gap: 8px; }

  .dlazdice { gap: 6px; }
  .dlazdice-znak { min-height: 40px; font-size: clamp(16px, 4.4vh, 22px); }
  .dlazdice.cislice .dlazdice-znak { min-height: 52px; font-size: clamp(20px, 6vh, 30px); }
  .dlazdice-znak.prepinac { font-size: 13px; }

  .skladane { min-height: 44px; padding: 3px 8px; }
  .skladane .znak { min-width: 32px; padding: 4px 6px; font-size: 20px; }
  .smazat { width: 52px; font-size: 18px; }

  /* Potvrzení je to poslední pod klávesnicí, když se zmenší, přestane se
     to překrývat. Zůstává přes celou šířku, aby se dalo trefit prstem. */
  .tl { min-height: 46px; font-size: 17px; box-shadow: 0 4px 0 var(--modra-tmava),
        inset 0 2px 0 rgba(255,255,255,.45), 0 6px 12px var(--stin); }
  .tl:active:not(:disabled) { transform: translateY(4px); }
  .tl.tise { min-height: 40px; box-shadow: 0 4px 0 var(--karta-okraj),
             inset 0 2px 0 rgba(255,255,255,.7), 0 6px 12px var(--stin); }
  .kolecko { width: 44px; height: 44px; }
  .kolecko.velke { width: 48px; height: 48px; }
  .kolecko.velke svg { width: 30px; height: 30px; }

  /* Karty výběru ze čtyř, taky nižší, ať se vejdou dvě řady. */
  .karta { min-height: 54px; font-size: clamp(16px, 4.6vh, 22px); }

  /* Předměty v učivu: na nízké obrazovce nemají cenu být vysoké dlaždice. */
  .predmet { min-height: 132px; padding: 16px 14px; gap: 6px; }
  .predmet-nazev { font-size: clamp(20px, 6.5vh, 28px); }
  .predmet-stav { font-size: 13px; }
}

/* Ještě nižší, tam už jde o každý pixel. */
@media (max-height: 380px) {
  .dlazdice-znak { min-height: 34px; }
  .dlazdice.cislice .dlazdice-znak { min-height: 44px; }
  .tl { min-height: 40px; font-size: 16px; }
  .skladane { min-height: 38px; }
}

/* Odměna na nízké obrazovce. Norka 29. 8. 2026: *„takhle to padá na mobilu"*,
   panel s hláškou, čtyři okýnka a dvě tlačítka se na 350 px výšky nevejdou
   a tlačítka vypadnou pod spodní hranu.

   Zmenšuje se odshora: nejdřív hláška (tu si dítě přečte a jde dál), pak
   okýnka, tlačítka nakonec, na ta se musí dát ťuknout, takže zůstávají
   největší z toho všeho. */
@media (max-height: 500px) {
  .odmena .stred { gap: 8px; }
  .odmena-panel { padding: 8px 14px; gap: 10px; }
  .odmena .nazev { font-size: clamp(20px, 6.5vh, 30px); }
  .odmena .podnazev { font-size: 13px; }
  .odmena-obrazek { width: min(14vw, 74px); }

  .okna { gap: 8px; }
  .okno { padding: 8px 8px 7px; gap: 1px; border-radius: var(--r-male);
          box-shadow: 0 4px 0 var(--okno-hrana), inset 0 2px 0 rgba(255,255,255,.3),
                      0 6px 14px var(--stin); }
  .okno:active { transform: translateY(4px); }
  .okno-ikona { font-size: 20px; }
  .okno-ikona img { width: 24px; height: 24px; }
  .okno-cislo { font-size: clamp(16px, 4.4vh, 22px); }
  .okno-popis { font-size: 11px; }
  .okno-pruh { height: 7px; margin-top: 3px; }

  .rada-dole { gap: 10px; }
  .rada-dole .tl { flex: 0 1 210px; }
}

/* Když je opravdu nízko, okýnka do jedné řady a bez proužků, proužek je
   ozdoba, tlačítko je cesta dál. */
@media (max-height: 400px) {
  .okna { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .okno-pruh { display: none; }
  .okno-ikona { display: none; }
  .odmena .podnazev { display: none; }
}

/* ZÁCHRANNÁ SÍŤ PROTI „VIDÍM JEN VÝŘEZ".
   Norka 29. 8. 2026 na telefonu v prohlížeči: *„vůbec to nejde přes prohlížeč,
   vidím jen výřez."*

   Obrazovka má `overflow: hidden`, aby dítě nemohlo odrolovat od úkolu. Jenže
   když se obsah do výšky nevejde, a v prohlížeči ubere adresní řádka dost,
   `hidden` ho neschová jen tak: UŘÍZNE ho a nedá se k němu vůbec dostat.
   Tlačítko pod hranou pak neexistuje.

   Na nízké obrazovce se proto raději roluje, než aby něco zmizelo. Rolování je
   drobná nepříjemnost; nedostupné tlačítko je konec. */
@media (max-height: 560px) {
  .obrazovka { overflow-y: auto; overflow-x: hidden; }
  /* Pozadí zůstane na místě i při rolování, jinak by se scéna odsouvala. */
  .obrazovka > .pozadi-obrazovky { position: fixed; }
}

/* Mezerník. Je široký jako přepínač vedle sebe a stejně tichý, není to
   písmeno, tak nemá vypadat jako písmeno. */
.dlazdice-znak.mezernik {
  grid-column: span 3; background: var(--pozadi-2); font-size: 15px;
  letter-spacing: .5px;
}
/* Znaménka (tečka, čárka, otazník, vykřičník) a desetinná čárka. Odliší se
   podkladem jako mezerník, ať je z klávesnice na první pohled vidět, že to
   nejsou písmena ani číslice. Znak je malý, tak se sází větší, jinak by se
   tečka na tabletu nedala trefit očima. (Norka 1. 9. 2026: chyběly.) */
.dlazdice-znak.znamenko {
  background: var(--pozadi-2); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900; line-height: 1;
}
/* Mezera ve složeném slově. Ne prázdná dlaždice, ta by vypadala jako
   nenapsané písmeno, ale opravdová mezera mezi dlaždicemi. */
.znak-mezera { display: inline-block; width: 20px; }
@media (max-height: 500px) {
  .dlazdice-znak.mezernik { font-size: 12px; }
  .znak-mezera { width: 14px; }
}

/* Poznámka pod tématy leží přímo na lese a v té změti byla nečitelná.
   Dostává vlastní podklad, je to totéž pravidlo jako u dlaždic: co se má
   číst, nesmí stát na fotce. */
.ucivo-obrazovka .drobne {
  background: color-mix(in srgb, var(--karta) 88%, transparent);
  border-radius: 99px; padding: 7px 16px; width: fit-content;
  margin: 4px auto 0; color: var(--inkoust); font-weight: 700;
}

/* Přepínač místností v doupěti. Vodorovná řádka nad spodní lištou, dítě na ni
   dosáhne palcem a je to jediné místo v appce, kde se smí jen tak koukat.
   Na fotce nory musí být čitelný, takže má vlastní podklad. */
/* U PRAVÉHO OKRAJE, ne uprostřed, doupě je obrázek, na který se má dítě
   koukat, a ovládání mu nemá stát v cestě. Na nízké obrazovce se srovná
   do vodorovné řádky nahoře, protože svisle by se čtyři tlačítka nevešla. */
/* LIŠTY NORY NAPEVNO (Norka 2. 9. 2026 v noci). Obě jsou nakreslené na
   962 px a zmenšují se jako celek podle `--meritko` (miry.js), takže mají na
   každém zařízení stejný tvar, stejné nápisy a stejné pořadí. Nic se nezalamuje,
   nic se neschovává. */
.lista-pevna { height: calc(48px * var(--meritko, 1)); flex: 0 0 auto; }
.lista-pevna > * { width: 962px; height: 48px; transform: scale(var(--meritko, 1)); transform-origin: top left; }
.lista-pevna.dole { margin-top: auto; }
.lista-pevna.dole > * { transform-origin: bottom left; }
.doupe .lista-pevna .pruh-hlava.jedna-rada { flex-wrap: nowrap; gap: 8px; align-items: center; }
.doupe .lista-pevna .pruh-hlava .tl,
.doupe .lista-pevna .pruh-hlava .jmenovka,
.doupe .lista-pevna .pruh-hlava .odznak,
.doupe .lista-pevna .pruh-hlava .kolecko {
  height: 44px; min-height: 44px; max-height: 44px; --m: 44px; flex: 0 0 auto;
  font-size: 15px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Šířky nahoře: 44+110+78+78+140+130+122+92+44 = 838 + 8 mezer × 8 = 902 < 962.
   (Zpět přibylo 3. 9. 2026, 44 px i s mezerou; do lišty se pořád vejde.) */
.doupe .lista-pevna .pruh-hlava .jmenovka { width: 110px; font-size: 16px; }
.doupe .lista-pevna .pruh-hlava .odznak   { width: 78px; padding: 0 8px; justify-content: center; font-size: 16px; }
.doupe .lista-pevna .pruh-hlava .tl.hlavni { width: 140px; min-width: 0; max-width: none; font-size: 17px; }
.doupe .lista-pevna .pruh-hlava .tl.vedlejsi { width: 130px; }
.doupe .lista-pevna .pruh-hlava .tl.vybaveni-tl { width: 122px; }
.doupe .lista-pevna .pruh-hlava .tl.pribeh-tl { width: 92px; }
.doupe .lista-pevna .pruh-hlava .kolecko { width: 44px; padding: 0; }
/* Šipka zpět je `.kolecko.velke`, ta má jinde svg 42 až 48 px. V liště doupěte
   je kolečko 44 px, takže by se šipka o okraje otírala; tady je menší. */
.doupe .lista-pevna .pruh-hlava .kolecko.velke svg { width: 26px; height: 26px; }
/* Dole: vlevo Vyfoť (pevná šířka) a rozdělané věci, které se při nedostatku
   místa ZKRACUJÍ (tři tečky), vpravo místnosti v plné šířce. Nic nepřeteče. */
.pruh-dole { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rozpracovane { display: flex; gap: 8px; align-items: center; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.rozpracovane .tl { height: 44px; min-height: 44px; --m: 44px; font-size: 15px; padding: 0 14px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                    flex: 0 1 auto; min-width: 60px; max-width: 240px; display: block; line-height: 44px; }
.rozpracovane .tl.vyfot-tl { flex: 0 0 auto; width: 104px; color: var(--inkoust); }
.rozpracovane .tl.narok-tl { width: auto; min-height: 44px; flex: 0 0 auto; }   /* Nová věc se nezkracuje, zkracují se jen rozdělané lekce */
.mistnosti { display: flex; flex-direction: row; gap: 8px; align-items: center; flex: 0 0 auto; }
.mistnost { height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.mistnost {
  border: 0; border-radius: 99px; padding: 9px 18px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800;
  background: color-mix(in srgb, var(--karta) 88%, transparent);
  color: var(--inkoust-slaby);
  box-shadow: 0 4px 0 var(--karta-okraj), 0 6px 14px var(--stin);
  transition: transform .07s, box-shadow .07s;
}
.mistnost:active { transform: translateY(4px); box-shadow: 0 1px 4px var(--stin); }
/* Místnost, ve které dítě zrovna je. */
.mistnost.tady {
  background: var(--modra); color: #fff;
  box-shadow: 0 4px 0 var(--modra-tmava), 0 6px 14px var(--stin);
}
/* NA NÍZKÉ OBRAZOVCE SE MÍSTNOSTI JEN ZMENŠÍ, NEPŘESOUVAJÍ SE NAHORU.
   Do 30. 8. 2026 se tu přepínač překlápěl na vodorovnou řadu s `top: 8px`,
   tedy přesně tam, kde stojí horní pruh. Na telefonu naležato (844×390) pak
   místnosti LEŽELY PŘES „Učit se" a „Vybrat učivo" a ta tlačítka se nedala
   trefit. Na monitoru to nebylo vidět, protože pravidlo platí až pod 500 px
   výšky, a okno se mi zmenšit nedaří, takže se to našlo až rámem.
   Svisle u pravého kraje se čtyři zmenšená tlačítka vejdou i do 320 px:
   4 × 30 px a tři mezery je 138 px. */
@media (max-height: 500px) {
  .mistnost { padding: 6px 13px; font-size: 13px; }
  .mistnosti { gap: 6px; }
}

/* ── OPRAVDU 3D, NE NÁZNAK ────────────────────────────────────────────────────
   Norka 29. 8. 2026 potřetí: *„chci opravdu 3D, ne náznak."* Dohledáno, jak se
   to dělá pořádně (css-tricks, Josh Comeau, Gregory Schier), a chyběla mi
   jedna věc:

   **BOK SE SKLÁDÁ Z VÍC STÍNŮ ZA SEBOU, NE Z JEDNOHO.**

   Jeden `0 14px 0 tmavší` udělá plochou desku pod tlačítkem. Skutečná hrana má
   po výšce stín, nahoře světlejší, dole tmavší, protože světlo jde shora.
   Skládá se tedy žebřík stínů s nulovým rozostřením, každý o kus níž a o kus
   tmavší. Teprve to vypadá jako TĚLESO.

   K tomu tři věci, které to dodělávají:
     – horní plocha má přechod (světlejší nahoře), to je zaoblení hrany,
     – tenká světlá linka úplně nahoře, odlesk,
     – měkký stín NA ZEM, posazený pod celý bok, tím se tlačítko vznáší.

   Při stisku sjede o celou tloušťku dolů a bok zmizí; zůstane jen stín pod ním,
   takže to vypadá, že se tlačítko domáčklo k podložce. */

/* ── 3D TLAČÍTKO, POHLED SHORA ────────────────────────────────────────────────
   Norka 29. 8. 2026 poslala předlohu: lesklý plastový kvádr focený mírně shora.
   Proti dřívějšku se to liší dvěma věcmi a obě jsou podstatné:

   1. **TENČÍ BOK.** Čím víc shora se člověk dívá, tím míň boku vidí. Hluboký
      bok znamená pohled zboku. Proto se hloubka zmenšila.
   2. **LESK NA HORNÍ PLOŠE.** Plast má odlesk, světlou elipsu vlevo nahoře,
      která se rozplyne. To je to, co dělá „těleso" místo „barevný obdélník".

   K tomu měkký DOSEDACÍ STÍN posazený níž a širší než tlačítko, v předloze
   je vidět, jak se pod ním rozlévá po podložce.

   Zaoblení je velké: v předloze jsou rohy skoro půlkruhy. */
.tl, .predmet, .mistnost, .dite, .tema, .karta, .okno, .kolecko {
  --hloubka: 9px;
}
.tl.hlavni, .predmet, .pro-rodice, .dite { --hloubka: 14px; }

.tl {
  /* LESKLÝ PLAST SHORA, podle Norčiny předlohy (29. 8. 2026).
     Cíl: hravé a hmatatelné, ne nakreslený obdélník.

     Čtyři věci to dělají a všechny jsou potřeba naráz:

     1. ZAOBLENÝ OBDÉLNÍK, ne pilulka. Rohy jsou velké, ale rovná část hrany
        zůstane, pilulka tělo úplně skulatí a kvádr se ztratí.
     2. OSTRÝ LESK PŘI HORNÍ HRANĚ. Na předloze je to úzký světlý pruh těsně
        u hrany, ne velká rozmazaná skvrna uprostřed. Plast má tvrdý odlesk.
     3. DRUHÝ ODLESK V PRAVÉM HORNÍM ROHU. Ten dělá ten dojem „vyfoceno", je
        malý a jasný.
     4. TĚSNÝ DOSEDACÍ STÍN. Na předloze se díváme skoro kolmo, takže bok skoro
        není vidět, hloubku nese stín u paty, ne vysoká hrana. */
  border-radius: 30px;
  background-image:
    /* Lesk při horní hraně. **Slabší, než by se chtělo**, Norka 29. 8. 2026:
       *„pořád není tlačítko viditelné."* Silný bílý pruh nahoře vysvítil pastel
       do běla a ten na světlém pozadí zmizel: tlačítko přišlo o horní obrys.
       Lesk musí být znát na barvě, ne ji přebít. */
    linear-gradient(to bottom, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 7%,
                    rgba(255,255,255,0) 22%),
    radial-gradient(ellipse 82% 58% at 40% 2%, rgba(255,255,255,.20), rgba(255,255,255,0) 68%),
    /* Odražené světlo u spodní hrany. */
    linear-gradient(to top, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 12%),
    /* Tělo: ke spodní hraně potemní. */
    linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 44%, rgba(0,0,0,.18) 100%);
  box-shadow:
    /* OBRYS po celém obvodu. Bez něj se pastelové tlačítko na světlém pozadí
       ztratí, nemá se čím od podkladu odlišit. Je to tenká tmavší linka
       v barvě boku, ne černá: černá by vypadala jako nakreslený rámeček. */
    0 0 0 1.5px color-mix(in srgb, var(--bok, var(--modra-tmava)) 70%, transparent),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    /* ── BOK ──────────────────────────────────────────────────────────────
       Norka 29. 8. 2026 potřetí: *„moje je vyšší a to stínování výraznější."*
       Jeden stín pod tlačítkem udělá PLOCHOU DESKU. Skutečná hrana je vysoká
       a po výšce stínovaná, nahoře, kam dopadá světlo, je světlejší, dole
       tmavne. Skládá se proto ŽEBŘÍK stínů s nulovým rozostřením, každý o kus
       níž a o kus tmavší. Teprve to vypadá jako těleso, ne jako obrázek. */
    0 2px  0 color-mix(in srgb, var(--bok, var(--modra-tmava)) 70%, white),
    0 4px  0 color-mix(in srgb, var(--bok, var(--modra-tmava)) 86%, white),
    0 calc(var(--hloubka) * .45) 0 var(--bok, var(--modra-tmava)),
    0 calc(var(--hloubka) * .72) 0 color-mix(in srgb, var(--bok, var(--modra-tmava)) 88%, black),
    0 var(--hloubka) 0 color-mix(in srgb, var(--bok, var(--modra-tmava)) 72%, black),
    /* Dosedací stín, pod celým bokem, ne pod plochou. */
    0 calc(var(--hloubka) + 3px) 9px -1px var(--stin),
    0 calc(var(--hloubka) + 12px) 26px -4px var(--stin);
}
.tl:active:not(:disabled) {
  transform: translateY(var(--hloubka));
  box-shadow: inset 0 2px 5px rgba(0,0,0,.22), 0 2px 6px var(--stin);
}
.tl.bledemodre { --bok: var(--bledemodra-t); }
.tl.cervene    { --bok: var(--jahodova-t); }
.tl.tise       { --bok: var(--karta-okraj); }

/* Tlačítka nad norou: „Učit se" je hlavní cesta, „Vybrat učivo" vedlejší. */
/* Jedna řada nahoře: kdo · dny · Učit se · Vybrat učivo · Vybavení nory.
   „Učit se" roste do zbylého místa, aby bylo největší a nešlo minout. */
.pruh-hlava.jedna-rada { align-items: center; gap: 10px; }
.tl.hlavni {
  flex: 1 1 auto; min-width: 180px; max-width: 520px; min-height: 62px;
  font-size: clamp(19px, 2.4vw, 28px); letter-spacing: .2px;
}
.tl.vedlejsi { flex: 0 0 auto; min-height: 44px; font-size: 14px; padding: 0 18px; }
@media (max-height: 500px) {
  .tl.hlavni   { min-height: 46px; font-size: clamp(16px, 4.6vh, 21px); }
  .tl.vedlejsi { min-height: 34px; font-size: 13px; padding: 0 12px; }
  /* „písmo o fous větší" (Norka 2. 9. 2026): +1 px všude v liště, ne víc,
     jinak se řada zase nevejde. */
  .pruh-hlava.jedna-rada .jmenovka { font-size: 20px; }   /* bylo 19 */
  .pruh-hlava.jedna-rada .odznak   { font-size: 20px; }   /* v liště bylo 19 */
  .pruh-hlava.jedna-rada { gap: 6px; }
  /* „Učit se" bralo do 520 px a na telefonu vytlačilo Příběh a otazník z lišty
     ven (Norka 2. 9. 2026: „když uděláš užší Učit se, vejde se to tam"). Je to
     pořád nejširší tlačítko v řadě, jen si nebere všechno místo. */
  .pruh-hlava.jedna-rada .tl.hlavni { max-width: 190px; min-width: 110px; }
  .pruh-hlava.jedna-rada .tl.vybaveni-tl,
  .pruh-hlava.jedna-rada .tl.pribeh-tl { font-size: 13px; padding: 0 10px; }
}
/* Na úzkém telefonu se vedlejší tlačítko schová, nesmí ukrojit z hlavního. */
@media (max-width: 560px) {
  .tl.vedlejsi { display: none; }
}
/* Tlačítka v liště doupěte NETUČNĚ. Tučné 900 řadu roztáhne tak, že se na lištu
   nevejde a tlačítka z ní čouhají. Netučné písmo je užší a řada se srovná
   (Norka 1. 9. 2026: „stačí dát pryč tučné písmo"). Jen v téhle liště. */
.pruh-hlava.jedna-rada .tl,
/* Jmenovka dítěte a dva odznaky (dny, lístky) nejsou `.tl`, takže je odtučnění
   minulo a v řadě zůstaly tři tučné nápisy proti netučnému zbytku. Na telefonu
   se tím řada roztáhla (Norka 2. 9. 2026: „ty tři první taky odtučni"). */
.pruh-hlava.jedna-rada .jmenovka,
.pruh-hlava.jedna-rada .odznak { font-weight: 500; }   /* 600 Norka pořád viděla jako tučné (2. 9.) */
/* Příběh černým písmem: na žluté je bílé písmo nečitelné (Norka 2. 9. 2026). */
.pruh-hlava.jedna-rada .tl.pribeh-tl { color: var(--inkoust); }

/* Předměty v učivu, táž stavba, jen tlustší a v barvě předmětu. */
.predmet {
  background-image: linear-gradient(to bottom,
                    rgba(255,255,255,.22), rgba(255,255,255,0) 50%,
                    rgba(0,0,0,.10));
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.5),
    0 3px 0 color-mix(in srgb, var(--bok) 78%, white),
    0 6px 0 color-mix(in srgb, var(--bok) 88%, white),
    0 9px 0 var(--bok),
    0 calc(var(--hloubka) - 3px) 0 color-mix(in srgb, var(--bok) 86%, black),
    0 var(--hloubka) 0 color-mix(in srgb, var(--bok) 70%, black),
    0 calc(var(--hloubka) + 16px) 30px -6px var(--stin);
}
.predmet:active {
  transform: translateY(var(--hloubka));
  box-shadow: inset 0 4px 10px rgba(0,0,0,.3), 0 3px 8px var(--stin);
}

/* ── Vybavení Píchalovy nory ──────────────────────────────────────────────────
   Obrazovka pro DÍTĚ, ne pro rodiče: vysvětluje, proč cvičí, a ukazuje, co už
   noře přibylo. Nahradila rodičovský zámek (Norka 29. 8. 2026), do rodičovské
   části se chodí z úvodní strany, tak v doupěti nebylo co zamykat. */
/* Vybavení má hlavičku NAD obsahem jako každá obrazovka se šipkou zpět. Dědila
   mřížku úvodu (`.rozcestnik`, place-items: center), ve které hlavička neměla
   pevnou řadu a na telefonu ležela šipka přes text (Norka 2. 9. 2026, dvakrát). */
.obrazovka.rozcestnik.vybaveni-obrazovka { display: flex; flex-direction: column; gap: 10px; }
.vybaveni-obrazovka .pruh-hlava { flex: none; }
.vybaveni-obrazovka .stred.nahoru { max-width: 940px; margin: 0 auto; width: 100%; }
.blok.vysvetleni p { margin: 0; font-size: 16px; line-height: 1.55; }

/* Čtyři místnosti jako náhledy. Ťuknutím se do místnosti rovnou skočí,
   dítě si má noru prohlédnout, ne o ní jen číst. */
.pokoje {
  display: grid; gap: 12px; margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pokoj {
  position: relative; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-male); overflow: hidden; background: var(--karta);
  box-shadow: 0 5px 0 var(--karta-okraj), 0 8px 18px var(--stin);
  transition: transform .08s, box-shadow .08s;
}
.pokoj:active { transform: translateY(5px); box-shadow: 0 1px 5px var(--stin); }
.pokoj-obrazek { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pokoj-nazev {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color: #fff; font-weight: 900; font-size: 16px; text-align: left;
}

/* NÁHLED VĚCI VE VÝBĚRU MÍSTNOSTI. Norka 1. 9. 2026: „předměty mají být vidět
   v místnostech, že jsou k dispozici; teď se bere naslepo." Místnost je karta:
   obrázek věci nahoře, pod ním název místnosti a název věci, co přibude. */
.pokoje-volba { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mistnost.mistnost-volba {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 10px 14px; height: auto; text-align: center; line-height: 1.2;
}
.mistnost-volba .mistnost-vec-obr {
  width: 100%; max-width: 120px; aspect-ratio: 1 / 1; object-fit: contain;
}
.mistnost-volba .mistnost-nazev   { font-weight: 900; font-size: 15px; }
.mistnost-volba .mistnost-vec-nazev { font-size: 13px; font-weight: 700; opacity: .85; }
.mistnost-volba .mistnost-vec-nazev.tise { opacity: .5; }
.mistnost.mistnost-volba.hotovy { opacity: .55; }

/* „Vybavení Píchalovy nory", fialové a delší, ať se odliší od učení.
   Norka 29. 8. 2026. Vede jinam než ostatní dvě tlačítka: ne do cvičení,
   ale k tomu, PROČ se cvičí. */
.tl.fialove { background: var(--fialova); color: #fff; --bok: var(--fialova-t); }
.tl.vybaveni-tl {
  flex: 0 1 auto; min-height: 52px; font-size: 15px; padding: 0 26px;
  white-space: nowrap;
}
@media (max-height: 500px) {
  .tl.vybaveni-tl { min-height: 38px; font-size: 12px; padding: 0 14px; }
}
/* Na úzkém telefonu se zkrátí, ať neukrojí z „Učit se". */
@media (max-width: 820px) {
  .tl.vybaveni-tl { font-size: 13px; padding: 0 14px; }
}

/* Borůvková, pro rodičovskou cestu. Odlišuje se od bílých dlaždic dětí
   i od fialového „Vybavení nory". */
.tl.boruvkove { background: var(--boruvkova); color: #fff; --bok: var(--boruvkova-t); }


/* ── Doupě: jmenovka a barvy tlačítek (Norka 29. 8. 2026) ──────────────────── */

/* Jmenovka dítěte, ovál s celým jménem, modrý. Nahradila kolečko s iniciálou. */
.jmenovka {
  border: 0; border-radius: 999px; padding: 0 22px; min-height: 48px;
  background-color: var(--past-modra); color: var(--inkoust); --bok: var(--past-modra-t);
  font: inherit; font-weight: 900; font-size: 19px; cursor: pointer;
  white-space: nowrap; transition: transform .07s, box-shadow .07s;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,.78) 0%, rgba(255,255,255,.28) 7%,
                    rgba(255,255,255,0) 22%),
    linear-gradient(to bottom, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,.16) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.8),
    0 2px 0 color-mix(in srgb, var(--bok) 70%, white),
    0 5px 0 var(--bok),
    0 8px 0 color-mix(in srgb, var(--bok) 74%, black),
    0 11px 20px -3px var(--stin);
}
.jmenovka:active { transform: translateY(8px); box-shadow: inset 0 2px 5px rgba(0,0,0,.22), 0 2px 6px var(--stin); }

/* „Učit se" pastelově zeleně, „Vybavení nory" šedě, obě s tmavým písmem. */
/* Horní řada v doupěti, zleva doprava (Norka 29. 8. 2026):
   jmenovka modrá · dny zelené · Učit se modré · Vybrat učivo šedé ·
   Vybavení fialové. Všechno pastelové, písmo tmavé. */
.tl.b-past-modra   { background-color: var(--past-modra);   color: var(--inkoust); --bok: var(--past-modra-t); }
.tl.b-past-zelena  { background-color: var(--past-zelena);  color: var(--inkoust); --bok: var(--past-zelena-t); }
.tl.sede           { background-color: var(--seda);         color: #14211A;        --bok: var(--seda-t); }
.tl.b-past-fialova { background-color: var(--past-fialova); color: var(--inkoust); --bok: var(--past-fialova-t); }

/* Místnosti: vybraná modrá, ostatní BÍLÉ s modrým stínem a černým písmem. */
.mistnost {
  background-color: var(--karta); color: #14211A; --bok: var(--modra-tmava);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    0 2px 0 color-mix(in srgb, var(--modra) 40%, white),
    0 5px 0 color-mix(in srgb, var(--modra) 70%, white),
    0 8px 0 var(--modra-tmava),
    0 12px 20px -3px var(--stin);
}
.mistnost.tady { background-color: var(--modra); color: #fff; }
.mistnost:active { transform: translateY(8px); box-shadow: inset 0 2px 5px rgba(0,0,0,.2), 0 2px 6px var(--stin); }

/* Počítadlo dní, druhé zleva, pastelově zelené. Není to tlačítko, ale stojí
   v řadě s nimi, tak má tutéž stavbu, jen se nedá zmáčknout. */
.pruh-hlava.jedna-rada .odznak {
  background: var(--past-zelena); color: var(--inkoust); border-radius: 999px;
  padding: 0 18px; min-height: 48px; display: inline-flex; align-items: center;
  /* 500, ne 900: tohle pravidlo je později než odtučnění lišty a přebíjelo ho,
     takže odznaky s ikonami zůstaly tučné (Norka 2. 9. 2026, potřetí). */
  gap: 8px; font-weight: 500; font-size: 19px;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--past-zelena-t) 70%, transparent),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    0 2px 0 color-mix(in srgb, var(--past-zelena-t) 70%, white),
    0 5px 0 var(--past-zelena-t),
    0 8px 0 color-mix(in srgb, var(--past-zelena-t) 72%, black),
    0 11px 20px -3px var(--stin);
}

/* ── PEVNÉ VELIKOSTI TLAČÍTEK ─────────────────────────────────────────────────
   Norka 29. 8. 2026: velikosti mají být PEVNÉ, jedna pro všechna zařízení.
   Bez toho by se obrázková tlačítka na každém okně roztahovala jinak
   a zdeformovala by se jim rohy i bok.

   Míra je TELEFON NALEŽATO (844 px na šířku), nejužší, co appka potká.
   Horní řada v doupěti tam vyjde na 792 px i s mezerami, takže se vejde.
   Na velkém monitoru zůstanou tlačítka stejná; to je záměr, ne opomenutí,
   roztažené tlačítko přes půl obrazovky nikdo netrefí líp než menší. */

/* Úvodní strana */
.deti.dve .dite            { width: 200px; min-height: 150px; }   /* jmenovka, 4:3 */
.deti.dve + .deti.dve .dite { width: 200px; min-height: 84px; }   /* Rodiče, Návod */
.deti.dve                  { grid-template-columns: repeat(2, 200px); justify-content: center; }

/* Doupě, horní řada */
.jmenovka                  { width: 84px;  min-height: 48px; padding: 0; }
.pruh-hlava.jedna-rada .odznak { width: 96px; min-height: 48px; padding: 0; justify-content: center; }
/* Počítadlo „kolik můžeš postavit" je jen ikona a jedna číslice, tak je užší,
   horní řada je vyměřená na telefon naležato a každý pixel se tam počítá. */
.pruh-hlava.jedna-rada .odznak.postavit { width: 68px; }
.tl.hlavni                 { flex: 0 0 auto; width: 280px; min-height: 56px; }
.tl.vedlejsi               { width: 124px; min-height: 44px; padding: 0; }
.tl.vybaveni-tl            { width: 184px; min-height: 44px; padding: 0; font-size: 13px; }
.mistnost                  { width: 108px; min-height: 40px; padding: 0; }

/* Učivo */
.predmety                  { grid-template-columns: repeat(auto-fit, 240px); }
.predmet                   { width: 240px; min-height: 210px; }
.temata                    { grid-template-columns: repeat(auto-fit, 300px); }
.ucivo-obrazovka .tema     { width: 300px; min-height: 72px; }

/* Cvičení. KARTA SE VEJDE DO SVÉHO SLOUPCE, i když je sloupec užší než 260 px.
   Do 3. 9. 2026 tu byla pevná šířka 260 px a dvě karty vedle sebe tak
   potřebovaly 530 px; odpovědní sloupec je ale jen necelá polovina okna, takže
   pod ~1180 px šířky ležely DVĚ ZE ČTYŘ KARET MIMO OBRAZOVKU a nešlo na ně
   ťuknout (`.obrazovka.lekce` má `overflow: hidden`, stránka se neposouvá).
   Tedy na každém telefonu i tabletu, zrovna tam, kde se appka používá; na
   monitoru 1280 px to vypadalo v pořádku a nikdo si toho rok nevšiml.
   Našel to chat na reklamu 3. 9. 2026, změřeno a potvrzeno vykreslením.
   `min(260px, 100%)` drží dosavadní velikost všude, kde je místo, a jinde
   kartu zúží. Obrázek se tím nezdeformuje: 3D dělá `border-image`, který
   protahuje jen prostředek. */
.karty .karta              { width: min(260px, 100%); min-height: 90px; }

/* Na opravdu malém telefonu (667 px) se horní řada zalomí do dvou řádek,
   tlačítka si nechají velikost, přeskládá se jen jejich pořadí. */
@media (max-width: 700px) {
  .pruh-hlava.jedna-rada { flex-wrap: wrap; }
}

/* ── TLAČÍTKA Z OBRÁZKU ───────────────────────────────────────────────────────
   Norka tlačítka nakreslila v Gemini (29. 8. 2026). Nasazují se přes
   `border-image`, ne jako `background-image`, a to má jediný důvod:

   **PROTAHUJE SE JEN PROSTŘEDEK.** Rohy a 3D bok si drží svou velikost, takže
   se nezaoblí jinak a nesplácnou. Kdyby to bylo `background-size: 100% 100%`,
   tlačítko 900 × 258 by mělo rohy natažené do oválu.

   Díky tomu stačí **jeden obrázek od barvy na všechny velikosti**. Původní plán
   byl 20 obrázků, každý v jiném rozměru, nešel: Gemini zadaný poměr stran
   nedodrží a vrací pořád týž váleček 2:1. Podrobně v `OBRAZKY_TLACITEK.md`.

   Řez je v obou rodinách 42 % kratší strany na roh a 52 % dole (roh + bok).
   VĚTŠÍ ROH NEDĚLAT, při 50 % a 58 % se uprostřed tlačítka objeví viditelný šev.

   Stín se do obrázku nedává, kreslí ho `drop-shadow`. Zapečený stín zůstane při
   protažení viset vedle jako šedá skvrna s ostrou hranou.

   `--m` je KRATŠÍ strana tlačítka; z ní se počítá roh. Velikosti jsou pevné
   (viz blok výše), takže se dá napsat rovnou. */

.dite, .tl.hlavni, .tl.vedlejsi, .tl.vybaveni-tl, .jmenovka, .mistnost,
.mistnost.tady, .tema, .ucivo-obrazovka .tema, .karta, .predmet,
.pruh-hlava.jedna-rada .odznak {
  position: relative;
  isolation: isolate;          /* aby ::before nepropadlo pod pozadí obrazovky */
  background: none;
  box-shadow: none;
  border: 0;
  transition: transform .07s;
}

.dite::before, .tl.hlavni::before, .tl.vedlejsi::before, .tl.vybaveni-tl::before,
.jmenovka::before, .mistnost::before, .tema::before, .karta::before,
.predmet::before, .pruh-hlava.jedna-rada .odznak::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image-source: var(--tl-obr);
  border-image-slice: var(--tl-rez) fill;
  border-image-width: calc(var(--m) * .42) calc(var(--m) * .42)
                      calc(var(--m) * .52) calc(var(--m) * .42);
  filter: drop-shadow(0 4px 6px rgba(70, 60, 75, .30));
}

/* Zdroje 1000 × 540 → roh 227 px, dole 281 px. */
.dite, .tl.hlavni, .tl.vedlejsi, .tl.vybaveni-tl, .jmenovka, .mistnost,
.tema, .karta, .pruh-hlava.jedna-rada .odznak { --tl-rez: 227 227 281 227; }
/* Předměty jedou na TÝCHŽ válečcích jako zbytek appky. Měly vlastní svislé
   obrázky, ale ty nešly vyříznout bez zbytku stínu a v lese kolem nich svítil
   bílý flek. Protahování rohy nezkřiví, takže z válečku vyjde i skoro čtverec
   240 × 210, vyzkoušeno. Barvy zůstávají domluvené: čeština růžová, prvouka
   modrá, matematika fialová. */
.predmet { --tl-rez: 227 227 281 227; }

/* Barvy. Šedá jen tam, kde se nehraje, na výběr učiva, seznam témat
   a nevybranou místnost (Norka 29. 8. 2026: „šedou bych volila na nehravé,
   nebo neaktivní"). */
.b-past-modra   { --tl-obr: url(../obrazky/tlacitka/modra.webp); }
.b-past-zelena  { --tl-obr: url(../obrazky/tlacitka/zelena.webp); }
.b-past-zluta   { --tl-obr: url(../obrazky/tlacitka/zluta.webp); }
.b-past-ruzova  { --tl-obr: url(../obrazky/tlacitka/ruzova.webp); }
.b-past-fialova { --tl-obr: url(../obrazky/tlacitka/fialova.webp); }
.tl.sede, .tl.vedlejsi, .tema, .mistnost { --tl-obr: url(../obrazky/tlacitka/seda.webp); }
/* Rodiče a O aplikaci na úvodu. Tlačítka jedou na OBRÁZKU, ne na barvě pozadí,
   takže samotné background-color se nikde neprojeví (Norka 2. 9. 2026:
   „text je, ale tlačítka ne"). */
.b-past-seda    { --tl-obr: url(../obrazky/tlacitka/seda.webp); }
.jmenovka       { --tl-obr: url(../obrazky/tlacitka/modra.webp); }
.mistnost.tady  { --tl-obr: url(../obrazky/tlacitka/modra.webp); }
.pruh-hlava.jedna-rada .odznak { --tl-obr: url(../obrazky/tlacitka/zelena.webp); }

.predmet.barva0 { --tl-obr: url(../obrazky/tlacitka/ruzova.webp); }
.predmet.barva1 { --tl-obr: url(../obrazky/tlacitka/modra.webp); }
.predmet.barva2 { --tl-obr: url(../obrazky/tlacitka/fialova.webp); }
/* Předmět, který se teprve dělá, Norčina šedá na nehravé a neaktivní.
   Musí to být TÝŽ obrázek jako u ostatních, jen šedý: 3D dělá `border-image`,
   ne stín, takže dlaždice bez obrázku vyjde placatá a vedle tří vypouklých
   vypadá jako chyba, ne jako vypnutá. */
.predmet.ceka { --tl-obr: url(../obrazky/tlacitka/seda.webp); }
/* Zavřené téma v ukázce: stejná dlaždice, šedá, ať je vidět, KOLIK toho za
   peníze je (Norka 3. 9. 2026: „všechny ostatní budou zašedlé"). Ťuknutím jde
   do Pro rodiče, tak zůstává hmatatelné, jen ztlumené. Aplikace 6 dala základ,
   podobu si vezme reklama. */
.tema.ceka.zamcene { --tl-obr: url(../obrazky/tlacitka/seda.webp); opacity: .8; }
.tema.ceka.zamcene .tema-stav { font-weight: 800; }

.karta.barva0 { --tl-obr: url(../obrazky/tlacitka/karta-ruzova.webp); }
.karta.barva1 { --tl-obr: url(../obrazky/tlacitka/karta-boruvkova.webp); }
.karta.barva2 { --tl-obr: url(../obrazky/tlacitka/karta-jahodova.webp); }
.karta.barva3 { --tl-obr: url(../obrazky/tlacitka/karta-bledemodra.webp); }

/* Kratší strana tlačítka. Musí odpovídat pevným velikostem výše, kdyby
   nesouhlasila, roh se nafoukne nebo scvrkne a tlačítko přestane sedět. */
.deti.dve .dite               { --m: 150px; }
.deti.dve + .deti.dve .dite   { --m:  84px; }
.tl.hlavni                    { --m:  56px; }
.tl.vedlejsi, .tl.vybaveni-tl { --m:  44px; }
.jmenovka                     { --m:  48px; }
.pruh-hlava.jedna-rada .odznak{ --m:  48px; }
.mistnost                     { --m:  40px; }
.ucivo-obrazovka .tema        { --m:  72px; }
.karty .karta                 { --m:  90px; }
.predmet                      { --m: 210px; }

/* Stisk: sjede a stín se stáhne. Bez toho by obrázkové tlačítko působilo
   jako obrázek, ne jako tlačítko. */
.dite:active, .tl.hlavni:active, .tl.vedlejsi:active, .tl.vybaveni-tl:active,
.jmenovka:active, .mistnost:active, .tema:active, .karta:active, .predmet:active {
  transform: translateY(4px);
}
.dite:active::before, .tl.hlavni:active::before, .tl.vedlejsi:active::before,
.tl.vybaveni-tl:active::before, .jmenovka:active::before, .mistnost:active::before,
.tema:active::before, .karta:active::before, .predmet:active::before {
  filter: drop-shadow(0 1px 2px rgba(70, 60, 75, .28));
}

/* Kolečka nahoře se NEŘEŽOU na devítinu, jsou kulatá, stačí je zvětšit.
   Modré na šipku zpět, šedé na křížek: zavírání není hra, tak nemá vybízet. */
.kolecko {
  background: url(../obrazky/tlacitka/kolecko-modra.webp) center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 6px rgba(70, 60, 75, .30));
}
.kolecko.konec {
  background-image: url(../obrazky/tlacitka/kolecko-seda.webp);
}
.kolecko:active { transform: translateY(4px); filter: drop-shadow(0 1px 2px rgba(70,60,75,.28)); }

/* Zbývající tlačítka, formulářová, rodičovská a čtverec v bublině. Jedou na
   téže stavbě, ať v appce nezůstanou dva různé druhy tlačítek vedle sebe.
   Šedá na rodičovskou část a tichá tlačítka (nehravé), barva na to ostatní. */
.tl { position: relative; isolation: isolate; background: none; box-shadow: none;
      border: 0; --m: 62px; --tl-rez: 227 227 281 227;
      --tl-obr: url(../obrazky/tlacitka/modra.webp); }
.tl::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image-source: var(--tl-obr);
  border-image-slice: var(--tl-rez) fill;
  border-image-width: calc(var(--m) * .42) calc(var(--m) * .42)
                      calc(var(--m) * .52) calc(var(--m) * .42);
  filter: drop-shadow(0 4px 6px rgba(70, 60, 75, .30));
}
.tl:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.tl:active:not(:disabled)::before { filter: drop-shadow(0 1px 2px rgba(70,60,75,.28)); }

.tl.tise { --m: 48px; --tl-obr: url(../obrazky/tlacitka/seda.webp); box-shadow: none; }
.prepinac-deti .tl.tise.zvoleny { --tl-obr: url(../obrazky/tlacitka/modra.webp); box-shadow: none; }
.tl.bledemodre { --tl-obr: url(../obrazky/tlacitka/karta-bledemodra.webp); box-shadow: none; }
.tl.cervene    { --tl-obr: url(../obrazky/tlacitka/karta-jahodova.webp);   box-shadow: none; }
.bublina-spodek .tl.ctverec { --m: 74px; box-shadow: none; }
.bublina-spodek .tl.ctverec.cervene { box-shadow: none; }
.bublina-spodek .tl:active:not(:disabled) { box-shadow: none; }

/* Obecné `.tl` výše nastavuje modrou jako výchozí a stojí v souboru ZA barevnými
   pravidly, takže by je přebilo (Vybavení by zmodralo, Vybrat učivo taky).
   Barvy se proto přiřazují znovu tady, na konci. Pořadí v souboru rozhoduje,
   specifičnost je u obou stejná. */
.tl.b-past-modra   { --tl-obr: url(../obrazky/tlacitka/modra.webp); }
.tl.b-past-zelena  { --tl-obr: url(../obrazky/tlacitka/zelena.webp); }
.tl.b-past-zluta   { --tl-obr: url(../obrazky/tlacitka/zluta.webp); }
.tl.b-past-ruzova  { --tl-obr: url(../obrazky/tlacitka/ruzova.webp); }
.tl.b-past-fialova { --tl-obr: url(../obrazky/tlacitka/fialova.webp); }
.tl.sede, .tl.vedlejsi { --tl-obr: url(../obrazky/tlacitka/seda.webp); }

/* Stará plná barva pozadí musí pryč, jinak prosvítá zpod obrázku jako barevný
   čtverec kolem něj (bylo vidět u předmětů: růžový rám okolo růžového tlačítka).
   Pravidla jako `.predmet.barva0` mají vyšší specifičnost než `.predmet`,
   takže je nestačí přebít jednou třídou, musí se vyjmenovat stejně přesně. */
.predmet.barva0, .predmet.barva1, .predmet.barva2,
.karta.barva0, .karta.barva1, .karta.barva2, .karta.barva3, .karta.barva4,
.mistnost.tady, .tema.hotove, .dite.ceka, .dite.pridat,
.tl.bledemodre, .tl.cervene, .tl.tise, .prepinac-deti .tl.tise.zvoleny,
.bublina-spodek .tl.ctverec, .bublina-spodek .tl.ctverec.cervene,
.pruh-hlava.jedna-rada .odznak {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border: 0;
}
/* Hotové téma se pozná zeleným textem stavu, ne šedým pozadím, to by
   pod obrázkem stejně nebylo vidět. */
.tema.hotove .tema-stav { color: var(--spravne); font-weight: 800; }

/* ── NÁROK NA VĚC DO DOUPĚTE ──────────────────────────────────────────────────
   Jedna věc za pět dní učení. Tlačítko se ukazuje jen tehdy, když je opravdu
   co vybrat, viset tam pořád by znamenalo, že na něj dítě mačká nadarmo.
   Stojí vlevo dole, aby nekřížilo horní řadu ani přepínač místností vpravo. */
.narok { position: absolute; left: 14px; bottom: 14px; z-index: 3; }   /* už se nepoužívá, tlačítko je ve spodní liště */
.tl.narok-tl { width: 260px; min-height: 52px; --m: 52px; font-size: 16px; }
.tl.narok-tl svg, .tl.narok-tl img { width: 22px; height: 22px; }

/* Co právě přibylo. Zmizí, jakmile dítě někam klikne, není to chyba,
   nemá tam trčet. */
.hlaska-ziskano {
  align-self: center; background: var(--karta); color: var(--inkoust);
  font-weight: 800; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 4px 10px var(--stin);
}

/* Výběr pokoje: čtyři tlačítka pod sebou, větší než přepínač v doupěti,
   tady se vybírá, tam se jen přepíná. */
.pokoje { display: grid; grid-template-columns: repeat(2, 200px);
          gap: 12px; justify-content: center; }
.pokoje .mistnost { width: 200px; min-height: 64px; --m: 64px; font-size: 18px; }
.pokoje .mistnost.hotovy { opacity: .45; cursor: default; }
@media (max-width: 700px) {
  .pokoje { grid-template-columns: repeat(4, 160px); }
  .pokoje .mistnost { width: 160px; min-height: 52px; --m: 52px; font-size: 15px; }
}

/* Pokoje na obrazovce výběru mají BARVY, ne šedou. Šedá je podle Norčina
   pravidla na nehravé a neaktivní, a výběr odměny je pravý opak. Barva navíc
   dítěti pomáhá pokoje rozeznat dřív, než přečte jméno. */
.pokoje .mistnost[data-hodnota="obyvak"]   { --tl-obr: url(../obrazky/tlacitka/modra.webp); }
.pokoje .mistnost[data-hodnota="loznice"]  { --tl-obr: url(../obrazky/tlacitka/fialova.webp); }
.pokoje .mistnost[data-hodnota="kuchyn"]   { --tl-obr: url(../obrazky/tlacitka/zluta.webp); }
.pokoje .mistnost[data-hodnota="koupelna"] { --tl-obr: url(../obrazky/tlacitka/zelena.webp); }

/* ── CO JE V POKOJI ───────────────────────────────────────────────────────────
   Deset věcí pokoje. Co dítě má, je barevné; co nemá, je šedé. Šedá tady
   neznamená „zakázáno", ale „ještě to nemáš", proto zůstává čitelná a název
   je pořád vidět. */
.veci {
  display: grid; grid-template-columns: repeat(auto-fit, 148px);
  gap: 12px; justify-content: center;
}
.vec {
  width: 148px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--karta); border-radius: 16px; padding: 10px 8px 12px;
  box-shadow: 0 3px 8px var(--stin);
}
.vec-obrazek { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 10px; }
/* Obrázek, který se nenačte, MLČÍ, dítě by vidělo prázdno a nikdo by nevěděl
   proč. Tečkovaný rámeček řekne „tohle se teprve kreslí". */
.vec-obrazek.chybi {
  background: repeating-linear-gradient(45deg, var(--pozadi-2) 0 8px, transparent 8px 16px);
  border: 2px dashed var(--karta-okraj);
}
.vec-nazev { font-size: 13px; font-weight: 800; text-align: center; line-height: 1.2; }
.vec-znacka { font-size: 11px; font-weight: 700; color: var(--spravne); }
/* Dlaždice „co přijde další" stojí DOLE a u kraje, ať nezakrývá pokoj.
   Uprostřed ležela přesně přes nábytek, který si dítě postavilo. */
.pokoj-dalsi { position: absolute; left: 14px; bottom: 14px; z-index: 3; }
.vec.seda { opacity: .55; }
.vec.seda .vec-obrazek { filter: grayscale(1); }
.vec.seda .vec-nazev { color: var(--inkoust-slaby); }

@media (max-width: 700px) {
  .veci { grid-template-columns: repeat(auto-fit, 118px); }
  .vec { width: 118px; padding: 8px 6px 10px; }
  .vec-nazev { font-size: 11px; }
}

/* `.stred` je v pružném sloupci a bez tohohle se scvrkne na šířku jedné
   dlaždice, deset věcí se pak vyskládá do jednoho úzkého pruhu přes celou
   obrazovku a leze pod nadpis. */
/* Obrazovka pokoje NEPOUŽÍVÁ `.rozcestnik` (Norka 30. 8. 2026).
   Ten centruje všechno doprostřed (`place-items: center`) a hlavička se
   sesunula přes nábytek. Rozcestník je strana bez obrázku; tady je fotka
   pokoje přes celou plochu, takže se hodí obyčejná svislice odshora. */
.pokoj-obrazovka .stred { width: 100%; align-self: stretch; }
.pokoj-obrazovka .veci { width: 100%; padding: 4px 8px 12px; }

/* Kolečko: zbytky staré stavby PRYČ. `.kolecko.velke` a `.kolecko.kdo` mají
   vyšší specifičnost než `.kolecko`, takže si prosadily starý `box-shadow`
   se zelenou hranou `--karta-okraj`, pod modrým obrázkem svítil zelený lem.
   Norka to našla na obrazovce pokoje 30. 8. 2026.

   Je to potřetí totéž: obecné pravidlo napsané POZDĚJI nepřebije konkrétnější
   pravidlo napsané DŘÍV. Rozhoduje specifičnost, ne pořadí, proto se tady
   varianty vypisují stejně přesně. */
.kolecko, .kolecko.velke, .kolecko.kdo, .kolecko.konec {
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.kolecko:active, .kolecko.velke:active, .kolecko.kdo:active, .kolecko.konec:active {
  box-shadow: none;
}

/* Podmínky a soukromí, drobným písmem dole na úvodní straně. Rodič to musí
   najít, dítě to nemá zajímat. */
.pravni-odkaz { text-align: center; margin: 14px 0 0; }
.odkaz-drobny {
  border: 0; background: transparent; color: var(--inkoust-slaby);
  font-size: 13px; font-weight: 700; text-decoration: underline;
  cursor: pointer; padding: 8px 10px;
}
.odkaz-drobny:hover { color: var(--inkoust); }
/* Nadpis oddílu v právních textech, ať se v dlouhé stránce dá zorientovat. */
.pravni-nadpis { font-size: 22px; margin: 0 0 10px; }
/* Nadpisy v O aplikaci a v návodu VĚTŠÍ (Norka 2. 9. 2026 v noci u „Dělá tři
   věci": „zvětšit"). Je to prodejní text pro rodiče, ne hustý formulář, a po
   smazání úvodního bloku je první nadpis zároveň hlavou stránky. */
.navodova .blok h3 { font-size: 22px; margin-bottom: 2px; }
.navodova .blok ul { margin: 8px 0 0 20px; padding: 0; }
.navodova .blok li { margin: 4px 0; }

/* Věty na obrazovce vybavení nory. Norka 30. 8. 2026: *„větší černé písmo,
   ne tučné, nejsou to nadpisy, jen normální větší černé písmo."*
   Tučné zůstává jen tam, kde je opravdu důraz (pět dní učení). */
.veta-velka {
  color: var(--inkoust);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  margin: 10px 0;
}
@media (max-width: 700px) { .veta-velka { font-size: 16px; } }

/* PRÁZDNÉ POLÍČKO NA ODPOVĚĎ. Norka 30. 8. 2026: *„to políčko udělej větší,
   působí dojmem, že se mi tam přece nemůže vejít, co když se netrefím… je to
   blbost, ale mrňousek se vystresuje už dopředu."*

   Není to blbost. Dítě se řídí tím, co VIDÍ, ne tím, co je pravda, a čtvereček
   42 × 44 px vypadá jako škvíra na jeden znak, i když se do něj vejde celé
   slovo. Zástupka je proto široká jako řádek a vysoká jako klávesa, aby řekla
   „sem se to vejde". Jakmile dítě začne psát, nahradí ji skutečné znaky. */
.skladane .znak.prazdny {
  min-width: 240px; height: 62px; border-radius: var(--r-male);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .07), 0 3px 10px var(--stin);
}
@media (max-width: 900px) {
  .skladane .znak.prazdny { min-width: 190px; height: 52px; }
}
@media (max-height: 460px) {
  .skladane .znak.prazdny { min-width: 170px; height: 44px; }
}

/* OKÝNKA NA KONCI ČÁSTI. Mřížka měla natvrdo čtyři sloupce, jenže okýnka jsou
   od 29. 8. 2026 jen tři, čtvrté („ještě N do další věci") se zrušilo, protože
   slibovalo něco, co po přechodu na dny přestalo platit. Po něm zůstal prázdný
   sloupec vpravo a celá řada se tím vysunula doleva, zatímco tlačítka pod ní
   zůstala uprostřed. Norka 30. 8. 2026: *„tlačítka jsou šejdrem."*

   Pružná řada místo mřížky se srovná sama, ať jsou okýnka tři, čtyři nebo dvě,
   a nemůže se to rozejít znovu, až se počet zase změní. */
.okna {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; max-width: 1000px; margin: 0 auto; width: 100%;
}
.okna .okno { flex: 1 1 190px; max-width: 260px; }
@media (max-width: 780px) { .okna .okno { flex: 1 1 140px; } }

/* JEDEN ŘÁDEK NA PŘEDMĚT v rodičovském nastavení: název · téma · čas.
   Norka 30. 8. 2026: *„když máme 3, musí to být na tři řádky, včetně času."* */
.predmet-radky { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.predmet-radek {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center;
}
.predmet-jmeno { font-weight: 800; font-size: 16px; }
.predmet-radek .pole.uzke { width: 116px; }
/* Vypnutý předmět zůstane čitelný, jen ustoupí, aby bylo vidět, že neběží. */
.predmet-radek.vypnuty .predmet-jmeno,
.predmet-radek.vypnuty .pole { opacity: .55; }
/* Rozdělaný předmět v rodičovském nastavení: vidět, ale BEZ OVLÁDÁNÍ.
   Vypnutý (0 minut) a rozdělaný jsou dvě různé věci, vypnutý si rodič vypnul
   sám a může ho zapnout, rozdělaný ještě neexistuje. */
.predmet-radek.ceka { grid-template-columns: auto 1fr; }
.predmet-radek.ceka .predmet-jmeno { opacity: .55; }
.predmet-radek.ceka .predmet-ceka {
  font-size: 14px; font-weight: 700; color: var(--inkoust-slaby);
}
@media (max-width: 640px) {
  .predmet-radek { grid-template-columns: 1fr auto; }
  .predmet-radek .pole:not(.uzke) { grid-column: 1 / -1; }
}

/* ── ÚVOD PŘÍBĚHU ──────────────────────────────────────────────────────────
   Vzhled je daný v CC/obal/2-3/pribeh-realny/PRAVIDLA_TITULKY.md a platí pro
   celý příběh, ne jen pro úvod: dole, vycentrovaně, bílá na poloprůhledném
   černém pruhu, vypravěč kurzívou, postava v uvozovkách.

   Podklad je ČERNÝ, ne barvy appky. Obraz je fotografický a na 16:9; když se
   nevejde do tvaru okna, dokreslí se černá po stranách. Oříznout ho nesmím,
   v rozích obrázků něco je. */
.pribeh-obrazovka {
  position: relative; width: 100%; height: 100%;
  background: #000; overflow: hidden;
}
.pribeh-medium {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;                  /* nic se neuřízne */
  display: block;
}
.pribeh-cerno { position: absolute; inset: 0; background: #000; }

/* RÁM O POMĚRU OBRAZU. Vysředí se v okně a všechno uvnitř se ukotvuje k němu,
   ne k oknu. Bez toho by titulek na úzkém displeji seděl v černém pruhu. */
.pribeh-ramec {
  position: absolute; inset: 0; margin: auto;
  aspect-ratio: 16 / 9; max-width: 100%; max-height: 100%;
}

/* Titulek. Velikost se váže na VÝŠKU okna, ne na šířku: pravidlo mluví
   o 5,5 % výšky obrazu a naležato je výška to, co určuje, jak je text velký
   proti scéně. */
.pribeh-titulek {
  /* Kotví se přes CELOU šířku a středí se okrajem, ne `left: 50%`.
     Při `left: 50%` zbývá prvku jen prostor od poloviny doprava, takže se
     do svého `max-width` nikdy nevejde: měl povoleno 900 px a dostal 424. */
  /* VOLNÁ PŮLKA, ne celá šířka. Norka při testování narážela na to, že text
     přes celou šířku leze přes Píchala. `left` a `top` doplňuje appka podle
     toho, která půlka je u daného záběru volná. */
  position: absolute; top: 6%; left: 3%;
  width: max-content;
  /* Nejvýš půlka obrazu, ať text nikdy nedosáhne na postavu ve druhé půlce. */
  max-width: 46%;
  text-align: center;
  /* Menší písmo. Chat na příběhy 30. 8. 2026: při 4,6 % výšky bylo moc velké
     a hůř se četlo. Teď 3,75 %, což je i to, co říkají pravidla titulků. */
  font-size: clamp(13px, 3.75vh, 26px);
  line-height: 1.3;
  /* BÍLÝ RÁMEČEK, ČERNÉ PÍSMO. Norka 31. 8. 2026: *„titulky nepřitáhnou oči,
     takže když se díváš na video, ani si nevšimneš, že tam vůbec nějaký text je.
     Původně jsem chtěla bubliny, ale to nešlo, tak jsme dali jen ty rámečky,
     ale bílé a černé písmo a bylo to lepší."*

     Tmavý průhledný pruh s bílým písmem splýval s obrazem: les je tmavý,
     noční scény obzvlášť, a titulek se do nich ztratil. Bílá plocha je naopak
     nejsvětlejší věc na celém záběru, takže oko na ni skočí samo.

     Stín pod písmem už není potřeba, černé na bílém je čitatelné samo. Místo něj
     má stín celý rámeček, aby se oddělil i od světlé scény. */
  color: #14211A;
  background: rgba(255, 255, 255, .94);
  padding: .5em .85em;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.pribeh-titulek.vypravec { font-style: italic; }
.pribeh-titulek.postava  { font-style: normal; }


/* U videa se „Další" neschovává zmizením, ale zneviditelněním. Kdyby zmizelo
   úplně, obraz by při jeho objevení poskočil. */

/* Přeskočit je schválně nenápadné a v rohu. Není to hlavní cesta a dítě po něm
   nemá sáhnout omylem, ale rodič, který appku ukazuje potřetí, ho ocení. */
.pribeh-preskocit {
  position: absolute; top: 12px; right: 14px;
  background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .8);
  border: 0; border-radius: 999px;
  padding: 7px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}

/* Tlačítko Příběh v doupěti. Norka chtěla „trochu větší": je o kousek vyšší
   a širší než sousedi, aby bylo vidět, že za ním něco je, ale nepřebilo
   „Učit se", které zůstává tím hlavním. */
.pribeh-tl { padding-left: 1.5em; padding-right: 1.5em; font-size: 1.06em; }

/* ARCHIV PŘÍBĚHU: MŘÍŽKA DLAŽDIC.
   Norka 30. 8. 2026 nechce seznam řádků, ale kachlíky s názvem. Dílků bude
   časem hodně, takže se to samo přelévá do dalších řad. */
.pribeh-mrizka {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.pribeh-dlazdice {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px; border: 2px solid var(--karta-okraj);
  background: var(--karta); border-radius: var(--r);
  cursor: pointer; text-align: left; color: var(--inkoust);
  box-shadow: 0 4px 14px var(--stin);
}
.pribeh-dlazdice:hover:not(.seda) { border-color: var(--modra); }
.pribeh-dlazdice-obraz {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-male); display: block;
}
.pribeh-dlazdice-nazev { font-size: .98em; font-weight: 800; line-height: 1.25; }

/* Neviděný dílek. Týž jazyk jako nezískaná věc v doupěti: vybledlá a bez barvy.
   Název zůstává čitelný, aby dítě vědělo, co ho čeká. */
.pribeh-dlazdice.seda { opacity: .55; cursor: default; }
.pribeh-dlazdice.seda .pribeh-dlazdice-obraz { filter: grayscale(1); }
.pribeh-dlazdice.seda .pribeh-dlazdice-nazev { color: var(--inkoust-slaby); }



/* OVLÁDÁNÍ PŘÍBĚHU: jedna řada vpravo dole. Tlačítek může být jedno až tři
   (Zpět, Opakovat, Další) a řada je srovná sama. Počítat každému odstup od
   kraje zvlášť znamenalo, že se při třech tlačítkách překryla. */
/* KLIK MUSÍ BÝT VIDĚT, I KDYŽ SE OBRAZ NEMĚNÍ. Tři beaty soumraku stojí na
   jednom obrázku; bez tohohle vypadá ťuknutí na „Další" jako by nezabralo.
   Krátké ztmavení obrazu a náběh titulku, nic víc: při čtyřech desetinách
   vteřiny se to nestače zdržovat, ale oko to chytí. */
@keyframes pribeh-obraz-mrk { from { filter: brightness(.7); } to { filter: none; } }
@keyframes pribeh-titulek-nabehne {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.pribeh-ramec.prolnuti .pribeh-medium { animation: pribeh-obraz-mrk .26s ease-out; }
.pribeh-ramec.prolnuti .pribeh-titulek { animation: pribeh-titulek-nabehne .3s ease-out; }

/* Komu se od pohybů na obrazovce dělá zle, ten má v systému přepínač a appka
   ho posloucha. Titulek se pak jen objeví. */
@media (prefers-reduced-motion: reduce) {
  .pribeh-ramec.prolnuti .pribeh-medium,
  .pribeh-ramec.prolnuti .pribeh-titulek { animation: none; }
}

/* LIŠTA S POSUNEM. Norka 31. 8. 2026: *„přidat lištu, ať je vidět posun
   videa."* Leží na spodní hraně obrazovky přes celou šířku.

   Tlačítko je vysoké (dá se do něj trefit prstem), čára v něm tenká. Kdyby
   byla vysoká celá, ubírala by z obrazu; kdyby bylo tlačítko tenké jako čára,
   dítě by se do něj netrefilo. */
.pribeh-osa {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  height: 34px; padding: 0 10px; border: 0; background: none;
  display: flex; align-items: center; cursor: pointer;
}
.pribeh-osa-cara {
  display: block; width: 100%; height: 6px; border-radius: 99px;
  background: rgba(255, 255, 255, .3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.pribeh-osa-plna {
  display: block; height: 100%; width: 0;
  background: #fff; border-radius: 99px;
}
/* Ovládání se posune nad lištu, ať ji nepřekrývá. */
.pribeh-ovladani { bottom: 40px; }

.pribeh-ovladani {
  position: absolute; right: 4%; bottom: 5%;
  display: flex; align-items: center; gap: 10px;
}
.pribeh-ovladani .tl { padding-top: .5em; padding-bottom: .5em; min-width: 120px; }
/* Vypravěč stojí UPROSTŘED a jeho věty bývají delší než hlášky postav, tak
   dostane širší pruh. Postavy zůstávají na půlce, aby text nikdy nesahal
   na tu druhou stranu, kde stojí někdo jiný. */
.pribeh-titulek.vypravec { max-width: 70%; }

/* CO JE CO. Seznam tlačítek a dětských vět, k čemu jsou.
   Řádky pod sebou, název tučně, věta za ním. Na telefonu naležato se to
   zalomí pod sebe, aby se věta nezmáčkla do dvou slov na řádek. */
.copoco { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.copoco-radek {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 16px;
  align-items: baseline;
  padding-bottom: 12px; border-bottom: 2px solid var(--karta-okraj);
}
.copoco-radek:last-child { border-bottom: 0; padding-bottom: 0; }
.copoco-nazev { font-weight: 800; }
.copoco-text { color: var(--inkoust); }
@media (max-width: 560px) {
  .copoco-radek { grid-template-columns: 1fr; }
}

/* Otazník v doupěti. Menší než ostatní tlačítka, ať nepřebije „Učit se",
   ale pořád dost velký na dětský prst. */
.copoco-tl {
  width: 44px; height: 44px; font-size: 22px; font-weight: 900;
  flex: 0 0 auto;
}


/* ── VOLTŮV SVĚT ────────────────────────────────────────────────
   Norka 1. 9. 2026: „a jinak variantu 2" a „a pak ty tlačítka podle tohoto
   stylu udělej v celém Voltově prostředí."

   Ze tří zkoušených variant zůstala druhá: PLNÁ BARVA, žádný kov, žádný lesk.
   Píchalova tlačítka jsou obrázky, devítina vyříznutá z `webp` a nakreslená
   do `::before`. Voltova jsou barva a stín, takže se ten `::before` musí
   vypnout: jinak pod barvou zůstane Píchalův váleček a kolem něj svítí jeho
   okraj.

   Třídu `svet-volt` nese kořen `#app`, ne jednotlivé obrazovky. Kdyby se
   psala na obrazovky, na té, na kterou se zapomene, by zůstala Píchalova
   tlačítka a nikdo by si toho nevšiml dřív než dítě.

   RODIČOVSKÁ ČÁST SE NEMĚNÍ. Je společná oběma příběhům a Norka už jednou
   psala „ty jsi vyměnil tlačítka, to nechci"; průvodce dítěte není důvod
   překreslovat stránku pro dospělého.

   ZELENÁ A ČERVENÁ V PALETĚ NEJSOU. Appka jimi říká „správně" a „špatně";
   kdyby jimi svítily i odpovědi, dítě by nepoznalo, jestli tlačítko svítí
   zeleně proto, že odpovědělo dobře, nebo proto, že je zelené. */
#app.svet-volt {
  --v0: #1F6F7A;     /* petrolejová, hlavní cesta */
  --v1: #B08430;     /* mosazná */
  --v2: #6B4C9A;     /* fialová */
  --v3: #4A6785;     /* šedomodrá */
  --v-klid: #4E555C; /* nehravé a neaktivní, Norčino pravidlo o šedé */
}

/* Dětské obrazovky, které kvůli rozvržení nesou třídu `.rodice` (Co je co,
   archiv příběhu), dostanou ve Voltově světě JEHO tlačítka - nejsou rodičovské.
   Skutečná rodičovská část zůstává šedá.

   Od 2. 9. 2026 jedou na TÝCHŽ OBRÁZKOVÝCH tlačítkách jako zbytek Voltova
   světa. Do té doby si tu držely starou plochou barvu, takže na nich svítilo
   černé kolečko a šedý obdélník, zatímco všude jinde už byl ocelový plast
   (Norka 2. 9. 2026: „černé tlačítko"). */
#app.svet-volt .obrazovka.detska .tl {
  --tl-obr: url(../obrazky/tlacitka/volt-ocel.webp);
  background: none; background-image: none; box-shadow: none; border: 0;
  color: var(--inkoust);
}
#app.svet-volt .obrazovka.detska .tl::before { display: block; }
#app.svet-volt .obrazovka.detska .tl:active { transform: translateY(4px); box-shadow: none; }

/* Kulatá tlačítka (šipka zpět, křížek) na svém válečku, ne na Píchalově modré. */
#app.svet-volt .obrazovka.detska .kolecko {
  background: url(../obrazky/tlacitka/volt-kolecko.webp) center / contain no-repeat;
  box-shadow: none; border-radius: 50%;
  filter: drop-shadow(0 4px 6px rgba(70, 60, 75, .30));
}
#app.svet-volt .obrazovka.detska .kolecko.konec {
  background-image: url(../obrazky/tlacitka/kolecko-seda.webp);
}
#app.svet-volt .obrazovka.detska .kolecko svg { color: var(--inkoust); }
#app.svet-volt .obrazovka.detska .kolecko:active {
  transform: translateY(4px); filter: drop-shadow(0 1px 2px rgba(70, 60, 75, .28));
}

#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .odznak,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno {
  --v: var(--v3);
  --h: 7px;
  background: var(--v);
  background-image: none;
  border: 0;
  border-radius: 18px;
  color: #FFFFFF;
  backdrop-filter: none;
  filter: none;
  box-shadow:
    0 var(--h) 0 rgba(0, 0, 0, .30),
    0 calc(var(--h) * 2) calc(var(--h) * 3) rgba(0, 0, 0, .28),
    inset 0 2px 0 rgba(255, 255, 255, .28);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .odznak::before { display: none; }

/* Stisk: sjede o svou hloubku a stín se stáhne. Bez toho je to obrázek. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl:active:not(:disabled),
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta:active:not(:disabled),
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet:active:not(:disabled),
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema:active:not(:disabled),
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost:active,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka:active,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko:active,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno:active {
  transform: translateY(var(--h));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28);
}

/* Kolečka (křížek, otazník) jsou kulatá, jmenovka a odznaky pilulky. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko { --v: var(--v-klid); border-radius: 50%; }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .odznak { --v: var(--v-klid); border-radius: 999px; }

/* Barvy. Hlavní cesta petrolejová, ať je z řady poznat na první pohled. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-modra   { --v: var(--v0); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-zelena  { --v: var(--v1); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-zluta   { --v: var(--v3); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-fialova { --v: var(--v2); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-ruzova  { --v: var(--v2); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.bledemodre     { --v: var(--v3); }
/* Šedá zůstává na nehravé a neaktivní, tak si to Norka určila 29. 8. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.sede,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.vedlejsi,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.tise           { --v: var(--v-klid); }
/* Červená je varování, ta se nepřebarvuje. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.cervene        { --v: var(--spatne); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.hlavni,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema              { --h: 10px; }

#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost      { --v: var(--v-klid); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost.tady { --v: var(--v0); }

#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.barva0 { --v: var(--v0); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.barva1 { --v: var(--v3); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.barva2 { --v: var(--v2); }

#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva0 { --v: var(--v0); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva1 { --v: var(--v1); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva2 { --v: var(--v2); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva3 { --v: var(--v3); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva4 { --v: var(--v1); }

/* Odměna: okýnka mají vlastní barevné třídy, ty se přepíšou stejně. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-jahodova   { --v: var(--v0); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-bledemodra { --v: var(--v3); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-boruvkova  { --v: var(--v2); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-malinova   { --v: var(--v1); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno { border-radius: var(--r); }

/* ── VOLTOVA TLAČÍTKA JSOU ZASE PLASTOVÁ (Norka 2. 9. 2026) ──────────────────
   *„chci vrátit ty tlačítka i Voltovi, ale asi jiné barvy."*

   Volt měl ploché barevné obdélníky. Vrací se mu TÝŽ lesklý plast, jaký má
   Bodlinka, protože to je to, co dělá tlačítko hmatatelným, jen v jeho paletě:
   ledová tyrkysová (hlavní cesta), levandulová, jantarová a šedá.

   Barvy jsou vyrobené POSUNEM ODSTÍNU z Bodlinčiných válečků, ne překreslené:
   jas nese lesk shora, bok a dosedací stín, takže se posouvá jen odstín.
   Zelená ani červená v paletě nejsou, ty appka drží na „správně" a „špatně".

   Pravidla musí stát ZA plochým blokem výš a být stejně specifická, jinak by
   je nepřebila (past z `CO_PLATI.md`: rozhoduje specifičnost, ne pořadí). */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka::before,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .odznak::before { display: block; }

/* Ploché pozadí a stín pryč, tvar nese obrázek pod prvkem. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .odznak,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko {
  background: none; background-image: none; box-shadow: none;
  color: var(--inkoust);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl:active:not(:disabled),
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet:active:not(:disabled),
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema:active:not(:disabled),
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost:active,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka:active,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko:active {
  box-shadow: none;
}

/* Barvy. Hlavní cesta tyrkysová, ať je z řady poznat na první pohled. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-modra,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.hlavni,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost.tady,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .jmenovka {
  --tl-obr: url(../obrazky/tlacitka/volt-neon.webp);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-fialova,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.vybaveni-tl,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-ruzova {
  --tl-obr: url(../obrazky/tlacitka/volt-ocel.webp);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-zluta,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.b-past-zelena,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .odznak {
  --tl-obr: url(../obrazky/tlacitka/volt-krem.webp);
}
/* Šedá zůstává na nehravé a neaktivní, tak si to Norka určila 29. 8. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.sede,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.vedlejsi,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.tise,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .mistnost,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema {
  --tl-obr: url(../obrazky/tlacitka/seda.webp);
}
/* Předměty: táž trojice barev jako u Bodlinky, jen v Voltově paletě. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.barva0 { --tl-obr: url(../obrazky/tlacitka/volt-ocel.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.barva1 { --tl-obr: url(../obrazky/tlacitka/volt-neon.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.barva2 { --tl-obr: url(../obrazky/tlacitka/volt-krem.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.ceka   { --tl-obr: url(../obrazky/tlacitka/seda.webp); }

/* ZBYTKY BODLINČINÝCH BAREV VE VOLTOVĚ SVĚTĚ (Norka 2. 9. 2026: „pořád máš
   v apce ty Voltovy původní tlačítka"). Tlačítko bez třídy barvy (▶ v bublině)
   bralo výchozí modrou z `.tl`, „Další část" na odměně bledě modrou karty,
   a karty „Část hotová" byly ploché obdélníky bez válečku. Červené ↻ zůstává
   červené schválně: červená drží na „špatně" v obou světech. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl                { --tl-obr: url(../obrazky/tlacitka/volt-ocel.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.bledemodre,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.ctverec        { --tl-obr: url(../obrazky/tlacitka/volt-neon.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tl.ctverec.cervene { --tl-obr: url(../obrazky/tlacitka/karta-jahodova.webp); }

/* Karty odměny na Voltových válečcích. `.okno` není v obecné 9-slice stavbě,
   tak tu má vlastní `::before`, stejnou jako mají ostatní. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno {
  background: none; background-image: none; box-shadow: none;
  color: var(--inkoust); isolation: isolate;
  --tl-rez: 227 227 281 227; --m: 110px;
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image-source: var(--tl-obr);
  border-image-slice: var(--tl-rez) fill;
  border-image-width: calc(var(--m) * .42) calc(var(--m) * .42)
                      calc(var(--m) * .52) calc(var(--m) * .42);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno:active { transform: translateY(4px); box-shadow: none; }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-jahodova   { --tl-obr: url(../obrazky/tlacitka/volt-karta-ocel.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-bledemodra { --tl-obr: url(../obrazky/tlacitka/volt-karta-neon.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-boruvkova  { --tl-obr: url(../obrazky/tlacitka/volt-karta-modra.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno.b-malinova   { --tl-obr: url(../obrazky/tlacitka/volt-karta-krem.webp); }

/* Kolečka (šipka zpět, otazník) jedou na svém válečku, ne na 9-slice. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko {
  background: url(../obrazky/tlacitka/volt-kolecko.webp) center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(70, 60, 75, .30));
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko.konec {
  background-image: url(../obrazky/tlacitka/kolecko-seda.webp);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko svg { color: var(--inkoust); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .kolecko:active {
  transform: translateY(4px); filter: drop-shadow(0 1px 2px rgba(70, 60, 75, .28));
}

/* Nehotový předmět a zamčené téma. **Ztlumit se nesmí průhledností**: pod
   dlaždicemi leží fotka lesa a přes poloprůhlednou dlaždici prosvítala tak,
   že se název nedal přečíst. Ztlumuje se tedy tmavší plnou barvou a slabším
   písmem, dlaždice zůstane krycí. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.ceka,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema.ceka {
  /* Tlačítka jsou od 2. 9. 2026 světlá (plastová), takže bílý text na nich
     nebyl vidět. Ztlumuje se tmavým písmem, ne bílým. */
  --v: #3B4147; color: rgba(35, 33, 42, .62);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet.ceka .predmet-stav,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema.ceka .tema-stav {
  color: rgba(35, 33, 42, .55);
}

/* Drobný text na tlačítkách byl počítaný na světlý podklad. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .predmet-stav,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema-stav,
/* Popisky na kartách odměny zůstávají BÍLÉ i u Volta. Šedý inkoust je na
   barevných kartách neviditelný (Norka 2. 9. 2026, snímek „Část hotová"). */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .okno-popis { color: var(--inkoust); opacity: .85; }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .tema.hotove .tema-stav { color: #1F7537; }

/* SPRÁVNĚ A ŠPATNĚ PŘEBÍJÍ VŠECHNO OSTATNÍ. To je ta jediná zpráva, kterou
   dítě po ťuknutí opravdu potřebuje. Třídy se jmenují `spravna` a `spatna`;
   v mém minulém bloku stálo `spravne`/`spatne`, to se nikdy nechytlo a zelená
   s červená se ve Voltově cvičení neukázaly. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.spravna,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta[class*="barva"].spravna {
  --v: var(--spravne);
  box-shadow: 0 var(--h) 0 #1F7537, 0 calc(var(--h) * 2) calc(var(--h) * 3) rgba(0, 0, 0, .28);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.spatna,
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta[class*="barva"].spatna {
  --v: var(--spatne);
  box-shadow: 0 var(--h) 0 #A5341F, 0 calc(var(--h) * 2) calc(var(--h) * 3) rgba(0, 0, 0, .28);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.zvolena { --v: var(--v-klid); }

/* „Jak na to: návod pro rodiče" je dlouhý nápis na hlavním tlačítku, kde je
   písmo počítané na krátká slova jako „Učit se". Text z tlačítka padal ven
   (Norka 2. 9. 2026), tak má menší řez a smí se zlomit do dvou řádků. */
.tl.hlavni.navod-tl {
  font-size: clamp(15px, 1.7vw, 20px); line-height: 1.2;
  white-space: normal; padding: 10px 18px;
}

/* ── ŽÁDNÉ OZNAČOVÁNÍ TEXTU (Norka 2. 9. 2026) ───────────────────────────────
   Na mobilu stačilo prstem chvíli podržet a text se označil, vyskočila nabídka
   Kopírovat / Sdílet / Vyhledávání na webu a dítě zůstalo koukat na modrý blok
   přes půl obrazovky. Appka se ovládá ťukáním, ne čtením ke zkopírování.

   `-webkit-touch-callout` vypíná tu nabídku na iOS, `user-select` označování
   všude. **Do políček, kam se píše, se to nesmí vztáhnout**, tam označování
   patří (rodič si opravuje e-mail). */
body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text; user-select: text;
}


/* „Další" v klikacím příběhu. Sedí nad filmovým ovládáním, je široké na palec
   a nesmí splynout s obrazem pod ním (Norka 2. 9. 2026: příběh se bez něj
   zasekl na snímku). */
.pribeh-dal-tl {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 92px; z-index: 6; min-width: 190px;
}
@media (max-height: 500px) { .pribeh-dal-tl { bottom: 74px; min-width: 150px; } }


/* ── VOLTOVY KARTY A JEHO POSTAVA NA TELEFONU (Norka 2. 9. 2026) ─────────────
   Karty výběru ze čtyř zůstaly na staré ploché barvě, když jsem Voltovi vracel
   plastová tlačítka („staré tlačítka"). Jedou teď na týchž válečcích jako
   zbytek jeho světa, v jeho paletě. */
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta {
  background: none; background-image: none; box-shadow: none; border: 0;
  color: var(--inkoust);
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta::before { display: block; }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta:active:not(:disabled) {
  transform: translateY(4px); box-shadow: none;
}
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva0 { --tl-obr: url(../obrazky/tlacitka/volt-karta-neon.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva1 { --tl-obr: url(../obrazky/tlacitka/volt-karta-ocel.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva2 { --tl-obr: url(../obrazky/tlacitka/volt-karta-krem.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva3 { --tl-obr: url(../obrazky/tlacitka/volt-karta-modra.webp); }
#app.svet-volt .obrazovka:not(.rodice):not(.ucet) .karta.barva4 { --tl-obr: url(../obrazky/tlacitka/volt-karta-ocel.webp); }

/* NA TELEFONU JE POSTAVA MENŠÍ A BUBLINA TAKY. Norka 2. 9. 2026: *„Volt utíká
   z obrazu, zmenšit tu odpověď a velkého Volta."* Na nízké obrazovce zabírala
   postava skoro celou výšku a bublina přes ni ležela tak, že z Volta koukal
   jen kus hlavy. */
@media (max-height: 500px) {
  /* Norka 2. 9. 2026 z telefonu: „Píchal je malinký, bublina obrovská."
     Postava nahoru na 64 % výšky, bublina jen tak široká, kolik chce text
     (`flex: 0 1 auto` místo `flex: 1`, které ji táhlo přes celou šířku),
     a menší písmo i tlačítko. */
  /* O HLAVU VĚTŠÍ (Norka 2. 9. 2026 v noci z telefonu: „okno i postavu u obou
     verzí zvětši o hlavu postavy"): postava z 64 na 77 % výšky u Píchala i
     Volta, bublina širší a písmo i tlačítko o pětinu větší. */
  .vyskok-pichal { height: 77dvh; margin: 0 -7dvh 1dvh -8dvh; }
  /* Volt stojí v plátně víc vpravo než Bodlinka, na telefonu vyčníval do
     obrazu (Norka 2. 9. 2026: „Volta posuň doleva, a to dost"). */
  /* Voltovy pózy jsou ořezané natěsno (změřeno 2. 9.: 4 % okraje, 245–343 px
     na 700), takže záporný okraj ho vždycky ukrojí, a při -20dvh zmizel celý
     (Norka: „je mimo mobil vlevo, prostě tam není vůbec"). Bodlinka má okraje
     v plátně, proto jí záporný okraj sedí a Voltovi ne. */
  #app.svet-volt .vyskok-pichal { height: 77dvh; margin: 0 -2dvh 1dvh 0; }
  .bublina { flex: 0 1 auto; max-width: min(520px, 70vw); padding: 12px 18px;
             border-radius: 26px; margin-bottom: 3dvh; }
  .bublina-nadpis { font-size: 18px; margin-bottom: 3px; }
  .bublina-veta { font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
  .bublina-spodek { gap: 10px; margin-top: 6px; }
  .bublina-spodek .tl.ctverec { width: 48px; height: 48px; min-width: 0; min-height: 0;
                                padding: 0; font-size: 20px; }
  .bublina-spodek .nahlasit { font-size: 13px; line-height: 1.2; }
  .bublina::before { width: 16px; height: 16px; left: -10px; }
  .bublina::after  { width: 8px;  height: 8px;  left: -23px; }
}

/* „Další" je vypnuté, dokud klip nedojede, aby ho dítě nepřeklikalo. Nesmí
   zmizet, jen ztlumit: mizející tlačítko vypadá jako porucha a dítě by čekalo,
   jestli se vrátí. (Norka 2. 9. 2026, ovládání na tři symboly.) */
.pribeh-ovladani .kolecko.ceka {
  opacity: .38; pointer-events: none;
}

/* ── ÚVOD NA TELEFONU (Norka 2. 9. 2026: „ladíme hlavně na mobil") ───────────
   Tlačítka na úvodu měla napevno 150 a 84 px, tedy 234 px jen na ně. S nadpisem,
   větou, ročníky a patičkou to na telefonu naležato (kolem 360 px) přeteklo.
   Našlo se to průchodem rozměrů, ne v provozu.

   `--m` je kratší strana tlačítka a počítá se z ní roh obrázku, takže se musí
   měnit SPOLU s výškou; jinak se roh natáhne a tlačítko se zkřiví. */
@media (max-height: 500px) {
  .rozcestnik-vnitrek { gap: 8px; padding: 4px 16px 18px; }
  .rozcestnik-hlava .nazev { font-size: clamp(19px, 6vh, 28px); }
  .uvodni-zamer   { font-size: clamp(11px, 2.9vh, 15px); }
  .uvodni-rocniky { font-size: clamp(12px, 3.1vh, 16px); margin: 2px 0 0; }

  .deti.dve .dite             { width: auto; min-height: 86px; padding: 10px 12px; --m: 86px; }
  .deti.dve + .deti.dve .dite { width: auto; min-height: 54px; --m: 54px; margin-top: 0; }
  .deti.dve + .deti.dve       { margin-top: 6px; }
  .dite-jmeno   { font-size: clamp(15px, 4.2vh, 21px); }
  .dite-rocnik  { font-size: clamp(10px, 2.6vh, 13px); }
  .dite-kolecko { width: 34px; height: 34px; font-size: 17px; }

  .rozcestnik.uvodni .konto { min-height: 38px; padding: 4px 6px; }
  .rozcestnik-pata .odkaz-drobny { font-size: 11px; }
}

/* ── ÚVOD: TŘI SLOUPCE (Norka 2. 9. 2026) ────────────────────────────────────
   Vlevo hesla pro dítě, uprostřed to, čím se vchází, vpravo hesla pro rodiče
   zarovnaná doprava. Prostřední sloupec si bere jen tolik, kolik potřebuje;
   hesla si rozdělí zbytek rovným dílem, takže střed zůstane opravdu uprostřed. */
/* PROSTOR (Norka 2. 9. 2026 odpoledne: „celkově prostorově vyladit"). První
   verze měla hesla zlomená na tři řádky: rámec úvodu byl 760 px, jak stačil
   samotným tlačítkům, a do něj se tři sloupce vešly jen tak, že hesla dostala
   150 px. Teď: rámec širší, střed má PEVNOU šířku a hesla si rozdělí zbytek. */
.rozcestnik-vnitrek:has(.uvodni-tri) { max-width: 1040px; }
.uvodni-tri {
  display: grid; grid-template-columns: 1fr 360px 1fr;
  align-items: start; gap: 32px; width: 100%;
  margin-top: 14px;   /* vzduch pod názvem (Norka 2. 9. 2026); s podtitulem míň */
}
/* Tlačítka začínají na úrovni PRVNÍHO HESLA, ne nadpisu sloupce (Norka
   2. 9. 2026): 46 px = nadpis „Pro děti" (asi 26) + jeho mezera (10) + odsazení
   sloupce (8), plus kousek na horní okraj puntíku. */
.uvodni-stred { display: flex; flex-direction: column; gap: 22px; padding-top: 46px; }
/* Název má shora stejný vzduch, jaký má k tlačítkům: mezera bloku (16) +
   odsazení sloupců (30) = 46. */
.rozcestnik-vnitrek:has(.uvodni-tri) { padding-top: 22px; }
/* Tlačítka vedle hesel nemusí být tak vysoká jako když stála sama.
   `--m` JE KRATŠÍ STRANA TLAČÍTKA a jde z něj velikost rohů 9-slice obrázku.
   Musí se měnit spolu s výškou, jinak roh neodpovídá tělesu a tlačítko
   ztratí plastiku. Přesně to se stalo třetí řadě (Norka 2. 9.: „3d tlačítko"):
   neměla `--m` vůbec. */
.uvodni-tri .deti.dve .dite { min-height: 118px; padding: 16px 12px; --m: 118px; }
.uvodni-tri .deti.dve + .deti.dve { margin-top: 0; }
.uvodni-tri .deti.dve + .deti.dve .dite { min-height: 64px; --m: 64px; }
.uvodni-rocniky.pod-nazvem {
  margin: 2px 0 0; font-weight: 900; color: var(--inkoust);
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.15;
}
@media (max-height: 500px) {
  .uvodni-rocniky.pod-nazvem { font-size: clamp(15px, 4.4vh, 21px); margin-top: 0; }
}
/* Třetí řada, jedno tlačítko přes celou šířku (Domácí úkoly s AI). */
.uvodni-tri .deti.jedna { grid-template-columns: 1fr; }
.uvodni-tri .deti.jedna .dite { min-height: 64px; padding: 12px; --m: 64px; }
/* Zapnutí doplňku, dokud režim neběží: tlačítko je vidět, ale nejde stisknout. */
.ukoly-ai .tl[disabled] { opacity: .45; pointer-events: none; }
/* HESLA JSOU VÁBNIČKA (Norka 2. 9. 2026: „ty věty jsou mega důležité, musí
   skutečně vábit"). Proto: větší a těžší písmo, puntík před každým, a každé
   heslo zlomené na dva krátké řádky (max-width v em + balance), protože jeden
   dlouhý řádek se přečte hůř než dva krátké. Pravý sloupec je zrcadlo levého:
   puntík za textem, text u pravého okraje. */
.hesla { padding-top: 8px; }
.hesla-nadpis {
  margin: 0 0 10px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 800;
  color: var(--inkoust);
}
.hesla ul { margin: 0; padding: 0; list-style: none; }
.hesla li {
  position: relative; padding: 9px 0 9px 22px; max-width: 12.5em;
  font-size: clamp(16px, 1.55vw, 20px); line-height: 1.25; font-weight: 800;
  text-wrap: balance;
}
.hesla li::before {
  content: ''; position: absolute; left: 0; top: calc(9px + .35em);
  width: 11px; height: 11px; border-radius: 50%; background: var(--past-modra);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.hesla-rodice { text-align: right; }
.hesla-rodice li { padding: 9px 22px 9px 0; margin-left: auto; }
.hesla-rodice li::before { left: auto; right: 0; background: var(--past-ruzova); }

/* TELEFON NALEŽATO: SLOUPCE ZŮSTÁVAJÍ. Napoprvé jsem je skládal pod sebe, a to
   bylo obráceně (Norka 2. 9. 2026: „telefon je naležato"). Appka běží jen
   naležato, takže ŠÍŘKY je dost (kolem 740 px) a vzácná je VÝŠKA (kolem 360).
   Skládáním pod sebe bych utrácel právě to, čeho je málo. Sloupce se tedy
   nechají a ubere se z písma a mezer. */
@media (max-height: 500px) {
  .uvodni-tri { gap: 14px; grid-template-columns: 1fr 260px 1fr; margin-top: 8px; }
  /* Norka 2. 9. 2026 z telefonu: „tlačítka jak sardinky, mezery 2,5x širší" */
  .uvodni-stred { gap: 20px; padding-top: 20px; }
  /* Název a ročníky NA JEDNOM ŘÁDKU stejně velkým písmem. */
  .rozcestnik-hlava { display: flex; flex-wrap: wrap; justify-content: center;
                      align-items: baseline; gap: 0 .35em; }
  .rozcestnik-hlava .nazev, .uvodni-rocniky.pod-nazvem {
    font-size: clamp(18px, 5.6vh, 26px); margin: 0; line-height: 1.15; }
  /* Ročník na tlačítku a odkaz na podmínky dvakrát větší než dřív. */
  .dite-rocnik { font-size: clamp(20px, 5.2vh, 26px); }
  .rozcestnik-pata .odkaz-drobny { font-size: 22px; }
  .rozcestnik-vnitrek:has(.uvodni-tri) { padding-top: 16px; }
  .uvodni-tri .deti.dve .dite { min-height: 72px; padding: 8px 10px; --m: 72px; }
  .uvodni-tri .deti.dve + .deti.dve .dite { min-height: 44px; --m: 44px; }
  .uvodni-tri .deti.jedna .dite { min-height: 40px; padding: 6px; --m: 40px; }
  .hesla { padding-top: 2px; }
  .hesla-nadpis { font-size: 15px; margin-bottom: 2px; }
  .hesla li { padding: 3px 0 3px 16px; font-size: clamp(12px, 3.5vh, 16px); line-height: 1.2; }
  .hesla li::before { width: 8px; height: 8px; top: calc(3px + .3em); }
  .hesla-rodice li { padding: 3px 16px 3px 0; }
}
/* Opravdu úzké okno (PC zmenšené do půlky obrazovky) sloupce složí. Na telefonu
   tenhle stav nenastane, appka je tam vždycky naležato. */
@media (max-width: 700px) and (min-height: 501px) {
  .uvodni-tri { grid-template-columns: 1fr; gap: 10px; }
  .uvodni-stred { order: -1; }
  .hesla-rodice { text-align: left; }
}

/* NAINSTALOVANÁ APPKA je zamčená naležato a bez adresního řádku, takže věta
   „otoč naležato" nemá komu radit (Norka 2. 9. 2026). V prohlížeči zůstává. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .uvodni-technicka { display: none !important; }
}

/* SKEN STRÁNKY na výběru učiva (Norka 2. 9. 2026). Jedno široké tlačítko nad
   předměty a pod ním jediná věta stavu; nic víc, ať to nepřebije předměty. */
.sken-blok { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
/* VYFOŤ: dvě volby pod sebou, a rozhovor u domácího úkolu. */
.vyfot-volby { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.vyfot-volby .tl { width: 100%; max-width: none; text-align: left; padding: 0 18px; font-size: clamp(16px, 2vw, 22px); }
.vyfot-volby .tl b { margin-right: 6px; }
.ukol-rozhovor { display: flex; gap: 14px; align-items: flex-end; }
.ukol-pruvodce { width: clamp(90px, 16vw, 170px); flex: 0 0 auto; }
.ukol-bublina { flex: 1; }
.ukol-rec { font-size: clamp(17px, 2vw, 22px); font-weight: 700; line-height: 1.4; margin: 0 0 10px; }
.ukol-odezva { display: block; margin-top: 10px; font-weight: 800; }
.ukol-odezva.ano { color: #0E8C82; }
.ukol-odezva.ne { color: #14415C; }
.ukol-vstup-rada { display: flex; gap: 10px; align-items: stretch; }
.ukol-vstup-rada .pole { flex: 1; font-size: 20px; }
.ukol-vstup-rada .tl { flex: 0 0 auto; min-width: 150px; }
.ukol-pocet { margin-left: auto; font-size: 15px; padding: 6px 14px; }
.ai-prehled { margin: 0; padding-left: 1.2em; }
@media (max-height: 500px) {
  .ukol-pruvodce { width: 80px; }
  .ukol-rec { font-size: 15px; }
  .ukol-vstup-rada .pole { font-size: 16px; padding: 8px; }
}
/* ROZDĚLANÁ LEKCE ZE SKENU (učení na písemku): nad skenem, dokud není hotová. */
.pisemka-blok { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.pisemka-tl { min-width: 360px; max-width: 100%; }
/* Odkaz leží na fotce lesa: bílý se stínem, jinak na zelené zmizí. */
.pisemka-blok .odkaz-drobny { color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
/* Počítadlo v hlavě lekce ze skenu místo hodin: cíl a chyby, obojí čitelné. */
.pisemka-postup b { font-size: 17px; }
.pisemka-postup small { color: var(--inkoust); font-size: 12px; }
.sken-tl { min-width: 280px; }
.sken-hlaska { margin: 0; font-weight: 700; color: var(--inkoust); text-align: center; max-width: 34em; }
@media (max-height: 500px) {
  .sken-blok { margin-bottom: 8px; gap: 4px; }
  .pisemka-blok { margin-bottom: 6px; gap: 2px; }
  .pisemka-tl { min-width: 220px; }
  .pisemka-postup b { font-size: 14px; }
  .pisemka-postup small { font-size: 10px; }
  .sken-tl { min-width: 220px; }
  .sken-hlaska { font-size: 12px; }
}

/* CO APPKA DĚLÁ pod podtitulem a ŘÁDEK O DEMU pod tlačítky (Norka 2. 9. 2026
   večer, „teprve teď píšeme to, co appka skutečně dělá"). */
.uvodni-zamer { color: var(--inkoust); font-weight: 700; }
.co-dela { margin: 10px auto 0; max-width: 46em; text-align: left; }
.co-dela-veta { margin: 0 0 4px; font-weight: 800; font-size: clamp(15px, 1.5vw, 19px); text-align: center; }
.co-dela ul { margin: 0; padding-left: 1.2em; font-size: clamp(13px, 1.3vw, 16px); line-height: 1.4; }
.co-dela li { margin: 2px 0; }
.uvodni-demo {
  margin: 14px auto 0; max-width: 46em; text-align: center;
  padding: 10px 16px; border-radius: var(--r-male);
  background: var(--karta); border: 1.5px solid var(--karta-okraj);
  font-size: clamp(13px, 1.3vw, 16px); line-height: 1.35;
}
@media (max-height: 500px) {
  .co-dela { margin-top: 4px; }
  .co-dela-veta { font-size: 13px; margin-bottom: 2px; }
  .co-dela ul { font-size: 11px; line-height: 1.25; }
  .uvodni-demo { margin-top: 6px; padding: 6px 10px; font-size: 11px; }
}



/* ── ÚVOD, NOVÉ ROZLOŽENÍ (Norka, Uvodni_strana_hesla_pro_CC.md, 2. 9. 2026 v noci) ──
   Nadpis, čtyři tlačítka v jedné řadě, drobně ročníky, velká věta a tři bloky,
   dva sloupce hesel, řádek o demu, Podmínky. Stránka se posouvá. */
.rozcestnik-vnitrek:has(.tri-bloky) { max-width: 1040px; padding-top: 18px; }
.deti.ctyri {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  width: 100%; max-width: 900px; margin: 8px auto 0;
}
.deti.ctyri .dite { min-height: 108px; --m: 108px; padding: 14px 10px; }
.deti.ctyri .dite.pridat .dite-kolecko { width: 40px; height: 40px; font-size: 24px; }
.uvodni-rocniky.drobne-rocniky {
  margin: 10px 0 0; font-size: clamp(18px, 2vw, 26px); font-weight: 900;
  color: var(--inkoust); text-align: center;
}
/* Tři čtverce jsou přesně na šířku řady tlačítek nad nimi (Norka 2. 9. 2026
   22:57: „velikost tak, ať to přesně vejde do prostoru těch tlačítek"):
   stejná nejvyšší šířka 900 px a stejná mezera 14 px jako `.deti.ctyri`. */
.co-dela { max-width: 900px; width: 100%; }
.co-dela-veta { font-size: clamp(18px, 2.1vw, 26px); margin: 14px 0 10px; }
/* Tři čtverce ROZTAŽENÉ NA ŠÍŘKU ŘADY TLAČÍTEK nad nimi (Norka 2. 9. 2026
   23:00 na čtverce přes celou šířku: „to je moc velké", 23:15: „udělej je
   menší, s větší mezerou mezi sebou a zarovnané hrany s tlačítky nahoře").
   Na 200 px Norka 23:25: „to už je moc malé, vypadá to divně", 250 px je střed.
   Pevná strana čtverce, krajní čtverce lícují s krajními tlačítky (`.co-dela`
   má stejnou šířku 900 px jako `.deti.ctyri`), mezery vyjdou samy. */
/* Norka 3. 9. 2026: „jen rozložení těch černých tlačítek je na PC blbé, tam
   jsou obří mezery, dala bych je víc k sobě." Do té doby tu bylo
   `justify-content: space-between`, takže tři čtverce po 250 px v řadě široké
   900 px nechaly mezi sebou 75 px. Nově se řada vystředí a mezera je 18 px.
   TÍM PADÁ starší pokyn z 2. 9. („zarovnané hrany s tlačítky nahoře"): obojí
   naráz nejde, buď lícují krajní hrany, nebo jsou čtverce u sebe. Platí to
   novější. */
/* Strana čtverce: Norka 2. 9. na 200 px „to už je moc malé, vypadá to divně",
   3. 9. na 250 px „udělej ty černé tlačítka o trochu menší, je to jak balvanem
   do hlavy". 225 px je mezi tím. Písmo se z ní počítá, takže se zmenší s ní
   a text zůstane uvnitř. */
.tri-bloky { --ctverec: min(225px, 24vw); display: grid; grid-template-columns: repeat(3, var(--ctverec));
             width: 100%; justify-content: center; gap: 18px; }
.blok-co {
  background: var(--karta); border: 1.5px solid var(--karta-okraj); border-radius: var(--r-male);
  padding: 14px 16px; text-align: left; font: inherit; color: var(--inkoust); cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}
.blok-co b { display: block; font-size: clamp(19px, 2vw, 25px); font-weight: 900; margin-bottom: 6px; line-height: 1.15; }
.blok-co span, .blok-co p { display: block; margin: 0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.4; font-weight: 600; }
/* PÍSMO SE ŘÍDÍ VELIKOSTÍ ČTVERCE, ne obrazovkou. Pevné velikosti se na
   telefonu rozešly s tlačítkem a text z něj lezl ven (Norka 2. 9. 2026 v noci:
   „v mobilu je to obři"). Podíl je změřený: nejdelší ze tří textů se vejde
   i do nejmenšího čtverce. */
.blok-co.b-cerna b { font-size: calc(var(--ctverec) * .082); margin-bottom: .25em; line-height: 1.12; }
.blok-co.b-cerna span { font-size: calc(var(--ctverec) * .061); line-height: 1.25; }
/* ČERNÉ ČTVERCE Z OBRÁZKU (Norka, Gemini 2. 9. 2026 22:35, vyříznuté do
   `obrazky/tlacitka/cerna.webp`, 1000 × 1000, bez stínu; Norka 22:55: „ty
   tlačítka chci černé čtverce"). Do 2. 9. v noci byly široké obdélníky z CSS
   přechodů. Stavba jako u barevných: `border-image` s vlastním řezem 42 % /
   52 % z 1000 = 420 a 520, stín kreslí `drop-shadow`. Tlačítko je ČTVEREC
   (`aspect-ratio`), takže se šířka rohu dá napsat v PROCENTECH plochy a obrázek
   se vykreslí přesně jako v předloze, bez protahování; `--m` tu není potřeba.
   Text sedí na ploše, ne na spodním boku (o něco větší odsazení dole). */
.blok-co.b-cerna {
  position: relative; isolation: isolate;
  background: none; border: 0; box-shadow: none; color: #fff;
  aspect-ratio: 1 / 1;
  --tl-rez: 420 420 520 420;
  --tl-obr: url(../obrazky/tlacitka/cerna.webp);
  padding: 9% 9% 12%;
  /* Text uprostřed čtverce, svisle i vodorovně (Norka 2. 9. 2026 23:16:
     „text na tlačítka usaď doprostřed"). */
  justify-content: center; align-items: center; text-align: center;
  transition: transform .07s;
}
.blok-co.b-cerna::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image-source: var(--tl-obr);
  border-image-slice: var(--tl-rez) fill;
  border-image-width: 42% 42% 52% 42%;
  filter: drop-shadow(0 4px 6px rgba(70, 60, 75, .30));
}
.blok-co.b-cerna:active { transform: translateY(4px); }
.blok-co.b-cerna:active::before { filter: drop-shadow(0 1px 2px rgba(70, 60, 75, .28)); }
.hesla-dva { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 900px; margin: 18px auto 0; }
.hesla-dva .hesla li { max-width: none; }
.hesla-dva .hesla-rodice { text-align: right; }
@media (max-height: 500px) {
  .rozcestnik-vnitrek:has(.tri-bloky) { padding-top: 6px; }
  .deti.ctyri { gap: 8px; margin-top: 4px; }
  .deti.ctyri .dite { min-height: 66px; --m: 66px; padding: 6px 8px; }
  .uvodni-rocniky.drobne-rocniky { margin-top: 4px; font-size: 15px; }
  .tri-bloky { gap: 8px; margin-top: 8px; }
  .blok-co { padding: 8px 10px; }
  /* Telefon naležato: Norka 2. 9. 2026 v noci „v mobilu je to obři,
     tam to musíš zmenšit, aspoň trochu"; ze 165 px na 150 px. */
  .tri-bloky { --ctverec: min(138px, 18vw); }
  .blok-co.b-cerna { padding: 8% 8% 11%; }
  .blok-co b { font-size: 15px; margin-bottom: 3px; }
  .blok-co span, .blok-co p { font-size: 12.5px; line-height: 1.3; }
  .hesla-dva { gap: 14px; margin-top: 10px; }
}
@media (max-width: 560px) {
  /* Telefon na výšku: jeden sloupec, čtverec na necelou polovinu šířky.
     Do 2. 9. 2026 v noci tu stálo 250 px, na 390px displeji přes dvě třetiny. */
  .tri-bloky { --ctverec: min(170px, 44vw); grid-template-columns: var(--ctverec);
               justify-content: center; row-gap: 12px; }
  .deti.ctyri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* UKÁZKOVÁ DATA V DEMU. Věta musí být vidět dřív, než rodič přečte známky,
   proto stojí hned pod nadpisem a má vlastní podklad, ne drobné písmo v řadě
   s ostatními. Není to varování, je to vysvětlení, tak je to modré, ne červené. */
/* UPOZORNĚNÍ NA UKÁZKOVÁ DATA (Norka 3. 9. 2026: „tak to tam dáme
   s vysvětlením, že je to jen pro účely dema"). Stavbu udělala Aplikace 6,
   vzhled je můj.

   Musí stát NAD známkami, ne pod nimi: rodič to má přečíst dřív, než ta čísla
   uvidí, jinak je bere jako měření a my mu pak bereme zpátky, co jsme právě
   ukázali.

   Drží se stejné žluté jako ostatní upozornění v aplikaci, ne modré. Modrá je
   v rodičovské části barva odkazů a nadpisů, takže modrý pruh vypadal jako
   další oddíl, ne jako poznámka. Žlutá říká „přečti si to" a nekřičí. */
.demo-vysvetleni {
  display: flex; gap: 8px; align-items: flex-start;
  background: color-mix(in srgb, var(--zluta) 16%, var(--karta));
  border: 1px solid color-mix(in srgb, var(--zluta) 45%, var(--karta));
  border-left: 4px solid var(--zluta);
  padding: 9px 12px; border-radius: var(--r-male); margin: 0 0 10px;
  color: var(--inkoust); line-height: 1.4;
}
.demo-vysvetleni::before { content: 'i'; flex: 0 0 auto;
  width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  background: var(--zluta-t); color: #fff;
  font-weight: 900; font-size: 12px; line-height: 17px; text-align: center; }
.demo-vysvetleni b { color: var(--inkoust); }

/* OBJEDNÁVKA v Pro rodiče (Aplikace 6, 3. 9. 2026). Funkční, ne krásná:
   vzhled dělá chat na reklamu, tohle je jen tolik, aby to šlo přečíst
   a ťuknout. Políčko souhlasu je záměrně velké a text u něj celý, ne
   „souhlasím s podmínkami" s odkazem: rodič musí vidět, s čím souhlasí. */
.objednavka { margin-top: 10px; }
.objednavka h4 { margin: 0 0 6px; font-size: 15px; }
/* OBDOBÍ POD SEBOU, KAŽDÉ PŘES CELOU ŠÍŘKU. Norka 3. 9. 2026 ke dvěma úzkým
   tlačítkům vedle sebe: „tlačítka jsou na špatném místě, dej je vedle nebo víc
   místa, udělej všechny široký obdélník, ty úzké jsou na mobilu děs". Na
   telefonu se dvě vedle sebe mačkala a levé se zvoleným rámečkem ořízlo o okraj
   karty. Teď je každé období jeden široký řádek jako tlačítko objednávky pod
   ním; rámeček zvoleného jde dovnitř, ať ho nic neořízne. */
.objednavka-volby { flex-direction: column; gap: 10px; }
.objednavka-volby .tl { width: 100%; min-height: 52px; text-align: left; padding: 8px 16px; }
.objednavka-volby .tl.zvoleny { outline: 3px solid var(--modra); outline-offset: -3px; }
/* TLAČÍTKA OBJEDNÁVKY SI BEROU ŠÍŘKU PODLE TEXTU. `.tl.hlavni` má v bloku
   pevných velikostí šířku 280 px a jednu řádku, jenže nápis „Objednávka
   zavazující k platbě" je dlouhý a Norka 3. 9. 2026 hlásila „tečou čudlíky":
   text lezl z tlačítka ven. Tady se tedy pevná šířka ruší, text se zalomí
   a tlačítko povyroste do výšky. Pevné velikosti platí dál všude jinde. */
.objednavka .tl, .objednavka .tl.hlavni {
  width: 100%; min-width: 0; max-width: 100%;
  height: auto; min-height: 44px; padding: 8px 16px;
  white-space: normal; line-height: 1.2; text-align: center;
  /* Menší písmo než u ostatních hlavních tlačítek (Norka 3. 9. 2026: „menší
     čudlík, menší text"). Nápis je dlouhý a ve velkém písmu se lámal na tři
     řádky a dělal z tlačítka cedule. */
  font-size: 15px;
}
.objednavka-volby .tl { text-align: left; }
/* Vstup pro toho, kdo už zaplatil. Musí být vidět (Norka 3. 9. 2026), ale
   nesmí soupeřit s objednávkou, tak má vlastní ohraničení a klidnější tlačítko. */
.vstup-zaplacene { margin-top: 14px; padding-top: 10px; border-top: 1.5px solid var(--karta-okraj); }
.vstup-zaplacene h4 { margin: 0 0 4px; font-size: 15px; }
/* Tlačítko přihlášení: široké, černé písmo, víc vzduchu (Norka 3. 9. 2026 ke
   snímku: „černé písmo, větší tlačítko, víc místa"; šedé písmo na šedém
   tlačítku o dvou řádcích se nedalo přečíst). */
.vstup-zaplacene .rada { margin-top: 12px; }
.vstup-zaplacene .tl, .vstup-zaplacene .tl.tise, .vstup-zaplacene .tl.hlavni {
  width: 100%; min-width: 0; max-width: 100%; height: auto; min-height: 52px;
  padding: 10px 16px; white-space: normal; line-height: 1.2;
  color: var(--inkoust); font-size: 16px;
}

.objednavka-mail { display: block; margin: 8px 0; font-size: 13px; font-weight: 700; }
.objednavka-mail .pole { display: block; width: 100%; max-width: 22em; margin-top: 4px; font-size: 16px; }
.souhlas-platba { display: flex; gap: 10px; align-items: flex-start;
                  margin: 10px 0; font-size: 13px; line-height: 1.35; cursor: pointer; }
.souhlas-platba input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }
/* QR kód: bílý podklad kolem něj musí zůstat, čtečka potřebuje klidovou zónu.
   Kód se nezvětšuje přes celou šířku, na velkém monitoru by byl jako plakát. */
.qr-platba { margin: 8px 0; }
.qr-platba svg {
  /* VĚTŠÍ A BEZ ZAOBLENÍ. Norka 3. 9. 2026: „vůbec to banka nevidí jako QR kód."
     Kód má 37 modulů; při 200 px vyjde jeden modul na 5 px a po vyhlazení se
     hrany rozmažou. Při 280 px je to 7 px na modul. Zaoblení rohů se ruší,
     ať se nekousne do klidové zóny, kterou čtečka potřebuje celou. */
  width: min(280px, 78vw); height: auto; display: block;
  background: #fff; border-radius: 0; padding: 10px;
}
.platba-udaje { border-collapse: collapse; margin: 6px 0; font-size: 15px; }
.platba-udaje td { padding: 2px 10px 2px 0; }
.objednavka-hotovo { margin-top: 10px; }

/* VYPNOUT ROZVRH v Pro rodiče (Norka 2. 9. 2026 v noci). */
.rozvrh-prepinac { align-items: center; gap: 12px; margin: 6px 0 12px; flex-wrap: wrap; }
.rozvrh-prepinac .drobne { flex: 1 1 260px; margin: 0; }
.predmet-radky.vypnuty-rozvrh { opacity: .55; }
/* ════════════════════════════════════════════════════════════════════════════
   ÚVODNÍ STRANA, NOVÝ VZHLED (chat na reklamu, 3. 9. 2026).
   ════════════════════════════════════════════════════════════════════════════ */

/* OBRÁZKY ÚVODNÍ STRANY JSOU VLASTNÍ, MENŠÍ (3. 9. 2026).
   Napřed tu byly krajiny v 1600 px, tedy 1 268 kB jen na první obrazovku,
   a zobrazovaly se ve dvou stech pixelech. Rodič, který ťukne na reklamu na
   mobilních datech, čeká vteřiny, ne půl minuty. Ořezané kopie v `obrazky/uvod`
   jsou webp: poloviny hlavičky 900 px (zobrazují se nejvýš 450), dlaždice
   600 px (nejvýš 290). Dohromady 242 kB.
   Originály v `obrazky/krajina` zůstávají, používá je zbytek aplikace.

   1. OBRAZOVÁ HLAVIČKA. Dnes je nahoře holý nadpis na šedé a stránka nikde
   neukáže, jak aplikace vypadá. Pás s Bodlinkou v lese to řekne za tři vteřiny.
   Text leží na tmavém spodku obrázku, ne na světlém nebi, proto přechod. */
.uvod-obraz {
  position: relative; width: 100%; max-width: 900px; margin: 0 auto;
  /* ⚠️ `flex: 0 0 auto` MUSÍ ZŮSTAT. Hlavička je položkou svislé ohebné
     svislice rozcestníku, takže ji prohlížeč smí smrsknout. Do 3. 9. 2026 ji
     držela nahoře jen `min-height`, `aspect-ratio` se vůbec neuplatnil:
     na monitoru měl pás 150 px místo počítaných 337 a na telefonu nastojato,
     kde jsem `min-height` sám vynuloval, se smrskl na NULU a obrázek zmizel
     (Norka 3. 9. 2026: „na mobilu nemám na úvodní straně obrázek").
     S `flex: 0 0 auto` se položka nesmršťuje a poměr stran platí. */
  flex: 0 0 auto;
  /* VÝŠKA NAPEVNO, ne poměrem stran. Poměr se dřív vůbec neuplatňoval (pás
     držela jen `min-height`), takže Norka schvalovala pás vysoký 150 px.
     Kdybych teď nechal `aspect-ratio: 16/6`, vyrostl by na monitoru na 338 px
     a byla by to jiná stránka, než jakou viděla. */
  height: 150px; border-radius: var(--r-male);
  overflow: hidden; background: #2B3A22; display: flex;
  box-shadow: 0 6px 18px rgba(70, 60, 75, .22);
}
.uvod-obraz::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,14,8,.66) 0%, rgba(10,14,8,.34) 46%, rgba(10,14,8,.02) 78%);
}
.uvod-obraz-text {
  position: absolute; inset: 0 0 auto 0; z-index: 1; padding: 12px 16px 0; text-align: center;
}
.uvod-obraz-text .nazev {
  margin: 0; color: #fff; font-size: clamp(26px, 5vw, 50px);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.uvodni-rocniky.na-obrazu {
  margin: 2px 0 0; color: #EDF3E6; font-weight: 800;
  font-size: clamp(13px, 1.7vw, 20px); text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.uvod-obraz .demo-znacka { color: #FFF; opacity: .9; margin: 0 0 2px; }

/* 2. POZVÁNKA MÍSTO ŠEDÉHO ŘÁDKU DOLE. Byl to nejdůležitější řádek stránky
   a byl nejmíň vidět: drobný šedý text v bílém rámečku pod hesly. Text je
   Norčin, jen zkrácený a doplněný o to, co má návštěvník udělat. */
.uvod-pozvanka {
  width: 100%; max-width: 900px; margin: 12px auto 0; padding: 9px 18px;
  border-radius: var(--r-male); text-align: center; line-height: 1.4;
  background: var(--past-zelena); color: #17301A;
  border: 0; box-shadow: 0 3px 0 var(--past-zelena-t), 0 6px 12px rgba(70,60,75,.14);
  font-size: clamp(12px, 1.2vw, 15px);
}
.uvod-pozvanka b { font-size: clamp(14px, 1.6vw, 19px); display: block; margin-bottom: 1px; }
.uvod-pozvanka-tuk { font-weight: 800; }

/* 3. ŠVY V ČERNÝCH ČTVERCÍCH. Přes tlačítka šly slabé svislé linky v třetinách:
   `border-image` roztahoval prostřední pruh zdroje (1000 - 420 - 420 = 160 px)
   na 16 % šířky a hrany toho pruhu byly vidět. Čtverec má `aspect-ratio: 1/1`
   a zdroj je 1000 x 1000, takže je obojí stejného tvaru a obrázek se dá
   nakreslit celý, bez řezání. Žádné protažení, žádný šev. */
.blok-co.b-cerna::before {
  border-image-source: none;
  border-width: 0;
  background: url(../obrazky/tlacitka/cerna.webp) center / 100% 100% no-repeat;
}

/* 4. PÁS „CO DÍTĚ UVIDÍ". Jediné místo na stránce, kde se dá ukázat, co si
   rodič kupuje. Tři dlaždice: cvičení, navádění po chybě, doupě.
   V náhledu jsou první dvě POSKLÁDANÉ Z ŽIVÝCH PRVKŮ aplikace, ne snímky;
   do ostrého nasazení je nahradí skutečné snímky obrazovky. */
.ukazka { width: 100%; max-width: 900px; margin: 22px auto 0; }
.ukazka-nadpis {
  margin: 0 0 10px; text-align: center; font-weight: 900;
  font-size: clamp(16px, 1.9vw, 24px); color: var(--inkoust);
}
.ukazka-tri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ukazka-dil { margin: 0; }
.ukazka-obraz {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-male);
  overflow: hidden; background: #C9A87C center / cover no-repeat;
  box-shadow: 0 4px 12px rgba(70, 60, 75, .20);
}
.ukazka-dil figcaption {
  margin-top: 7px; text-align: center; font-weight: 700; line-height: 1.3;
  font-size: clamp(11px, 1.15vw, 15px); color: var(--inkoust);
}
.u-cviceni { background-image: url(../obrazky/uvod/dlazdice-cviceni.webp); }
.u-cviceni-volt { background-image: url(../obrazky/uvod/dlazdice-cviceni-volt.webp); }
.u-doupe { background-image: url(../obrazky/uvod/dlazdice-doupe.webp); }
.u-laborator { background-image: url(../obrazky/uvod/dlazdice-laborator.webp); }

/* Kartička s otázkou a karty s odpověďmi se musí VEJÍT DO DLAŽDICE. Do 3. 9.
   2026 tu bylo `right: 6%; width: 34%` a karty se na užší dlaždici ořízly
   (Norka: „to vyměň, je to useknuté"). Nově mají obě části pevný podíl šířky,
   který se sečte na 100 % i s mezerami, takže se nemá co uříznout. */
.ukazka-otazka {
  position: absolute; left: 5%; top: 24%; width: 44%; padding: 6% 4%;
  background: var(--karta); border-radius: var(--r-male); color: var(--otazka);
  font-weight: 800; font-size: clamp(8px, .95vw, 12px); line-height: 1.25; text-align: center;
  box-shadow: 0 3px 8px rgba(70,60,75,.18);
}
.ukazka-otazka b { color: var(--modra-tmava); }
.ukazka-karty { position: absolute; right: 5%; top: 26%; display: grid; gap: 8%; width: 36%; }
.uk-karta {
  display: grid; place-items: center; border-radius: 999px; color: #fff;
  font-weight: 900; font-size: clamp(9px, 1.1vw, 15px); padding: 11% 0;
  width: 100%; box-sizing: border-box;
}
.uk-ruzova { background: var(--ruzova);   box-shadow: 0 3px 0 var(--ruzova-t); }
.uk-modra  { background: var(--boruvkova); box-shadow: 0 3px 0 var(--boruvkova-t); }

.ukazka-postava {
  position: absolute; left: 2%; bottom: 0; height: 84%; width: auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
/* Volt je vysoký a úzký (výška 700, šířka kolem 280), ať má v kartě stejnou
   váhu jako ježek, stojí o kus výš. */
.ukazka-postava.u-volt { height: 92%; left: 4%; }
.ukazka-bublina {
  position: absolute; right: 5%; bottom: 8%; width: 62%; padding: 6% 6%;
  background: var(--past-modra); color: var(--bledemodra-tx); border-radius: var(--r-male);
  font-weight: 700; font-size: clamp(7px, .85vw, 11px); line-height: 1.3;
  box-shadow: 0 3px 8px rgba(70,60,75,.20);
}
.ukazka-bublina b { display: block; }

/* Na telefonu naležato je výška vzácná: pás se ukáže, ale nižší, a hlavička
   se zkrátí, ať se řada tlačítek pořád vejde nad ohyb. */
@media (max-height: 500px) {
  .uvod-obraz { height: 96px; }
  .uvod-obraz-text { padding-top: 6px; }
  .uvod-pozvanka { margin-top: 8px; padding: 8px 14px; font-size: 11px; }
  .uvod-pozvanka b { font-size: 14px; }
  .ukazka { margin-top: 14px; }
  .ukazka-nadpis { font-size: 15px; margin-bottom: 6px; }
  .ukazka-tri { gap: 10px; }
}
/* Pod 560 px šířky (telefon nastojato) jdou dlaždice pod sebe, jinak by byly
   velikosti poštovní známky. */
/* Čtyři dlaždice vedle sebe jsou na tabletu úzké, na telefonu neviditelné.
   Pod 900 px dvě a dvě, pod 560 px pod sebou a širší. */
@media (max-width: 900px) { .ukazka-tri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ukazka-tri { grid-template-columns: 1fr; }
  .ukazka-obraz { aspect-ratio: 16 / 9; }
  /* Jeden sloupec = široká karta, bublina má místo, ať je čitelná i na 390 px. */
  .ukazka-bublina { font-size: 12px; width: 56%; }
  .ukazka-postava { height: 90%; }
}

/* Třetí dlaždice: doupě UŽ S PÁR VĚCMI, ne prázdná bedna. Ukazuje, k čemu to
   roste, a je to zároveň obrázek toho, jak má vypadat trochu předvyplněné demo
   (Norka 3. 9. 2026: „demo předvyplň, ale to zařízení jen trochu"). */
.uk-vecka {
  position: absolute; inset: auto 0 8% 0; display: flex; justify-content: center; gap: 6%;
}
.uk-vecka-dil {
  display: grid; justify-items: center; gap: 2px; width: 30%;
  background: var(--karta); border-radius: 10px; padding: 4% 3%;
  box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
.uk-vecka-dil img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; }
.uk-vecka-dil i {
  font-style: normal; font-weight: 800; line-height: 1.1;
  font-size: clamp(6px, .72vw, 10px); color: var(--inkoust);
}

/* DVA SVĚTY V HLAVIČCE. Norka 3. 9. 2026: „a co s Voltem? na to se zas nechtějí
   starší děti." Měla pravdu: hlavička jen s ježkem říká deseti a jedenáctiletým
   „tohle je pro malé". Pás je proto rozdělený na dvě poloviny, les vlevo a
   Voltovo město vpravo, každá se svým ročníkem. */
.uvod-pul { position: relative; flex: 1 1 50%; min-width: 0; background: center / cover no-repeat; }
/* Norka 3. 9. 2026 nad celým obrázkem `bodlinka-ucivo`: „to je správná
   bodlinka i prostředí." Bere se tedy CELÁ SCÉNA i s norou a s Bodlinkou,
   která v ní stojí; nelepí se sem zvlášť. Výřez 3:1 je z levé části, aby
   v něm byla nora i celá Bodlinka od hlavy k nohám, a poloha 36 % ji drží
   v obraze i na úzkém telefonu, kde se pás zužuje. */
.u-les   { background-image: url(../obrazky/uvod/hlava-les.webp);   background-position: 36% 50%; }
.u-mesto { background-image: url(../obrazky/uvod/hlava-mesto.webp); background-position: 50% 50%; }
/* Popisek NENÍ vystředěný: v levé polovině stojí Bodlinka uprostřed a nápis
   by jí ležel na nohou. Každá polovina si ho odsune ke svému kraji. */
.uvod-pul-popis {
  position: absolute; left: 0; right: 0; bottom: 5%; z-index: 2; text-align: center;
  color: #fff; font-weight: 900; font-size: clamp(10px, 1.25vw, 16px);
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
.uvod-pul-volt, .uvod-pul-pichal {
  position: absolute; bottom: 0; height: 72%; width: auto; z-index: 1;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
.uvod-pul-volt { right: 6%; }
/* Píchal je vlevo, ať se obě postavy dívají do stránky, ne ven z ní.
   Norka 3. 9. 2026: „dej jiný obrázek ježka, zrovna na té co tam máš se mračí."
   Do té doby tu byl výřez z krajiny s Bodlinkou, kde měla nešťastný výraz.
   Teď je v pozadí les bez postavy a přes něj Píchal, který mává a usmívá se,
   stejnou stavbou jako Dr. Volt vpravo.

   ⚠️ POZADÍ MUSÍ BÝT BEZ POSTAVY. Napoprvé jsem sáhl po `1-les-realny`,
   jenže v něm Bodlinka JE, takže v hlavičce stáli dva ježci vedle sebe.
   Proto je tam `4-mytinka`, prázdná mýtina. Kdo bude pozadí měnit, ať se
   napřed podívá, jestli v něm někdo nestojí.

   ⚠️ PÍCHAL NENÍ „PRO 2. A 3. ROČNÍK". Norka 3. 9. 2026: „není pro 2 a 3, je
   pro všechny!" Ani jeden z průvodců není vázaný na ročník, dítě si vybírá
   samo. Kdyby sem někdo chtěl připsat ročníky, je to špatně: patří jen
   k aplikaci jako celku („pro 2. až 5. ročník" v nadpisu). */
/* ⚠️ V APLIKACI JE BODLINKA, NE PÍCHAL. Norka 3. 9. 2026: „jéžiš, mi došlo,
   že mám v apce Píchala, ne Bodlinku" a k mé hlavičce „špatné pozadí, to je
   stará verze Píchala".
   Postava se v aplikaci jmenuje Bodlinka (app.js, PRUVODCI: `jmeno: 'Bodlinka'`),
   jen KLÍČ a názvy souborů zůstaly `pichal` z dřívějška a schválně se nemění.
   Proto se sem bere `obrazky/postavy/pichal.webp`, což JE Bodlinka s batohem,
   a ne `obrazky/pichal/vita.webp`, což je stará podoba postavy.
   Pozadí je výřez z `bodlinka-ucivo`, tedy z TÉHOŽ ilustrovaného lesa, jaký
   dítě vidí v učení; fotografické krajiny z cesty sem nepatří, je to jiný svět.
   Výřez je z pravé části, kde Bodlinka nestojí, aby v pásu nebyla dvakrát. */
.uvod-pul-pichal { left: 4%; height: 92%; bottom: -2%; }
/* Věta o dvou světech. Znění je z obrazovky výběru příběhu v aplikaci
   („Učivo je v obou příbězích stejné, mění se jen tvůj kamarád"), jen do
   vykání, protože tenhle řádek čte rodič. */
.uvod-dva-svety {
  width: 100%; max-width: 900px; margin: 10px auto 0; text-align: center;
  font-size: clamp(12px, 1.25vw, 16px); line-height: 1.35; color: var(--inkoust);
}
.uvod-dva-svety b { font-weight: 800; }
@media (max-height: 500px) {
  .uvod-dva-svety { margin-top: 6px; font-size: 11px; }
  .uvod-pul-popis { bottom: 3%; font-size: 10px; }
}

/* ── TELEFON NASTOJATO ────────────────────────────────────────────────────────
   Norka 3. 9. 2026: „a ty jsi udělal tablet na výšku, tak neuděláme na výšku
   i ten telefon?" Má pravdu a je to důležitější, než to vypadá: aplikace je
   sice širokoúhlá, ale rodič, který ťukne na reklamu, přiletí sem NASTOJATO
   a nebude telefon kvůli rozhodování otáčet. Úvodní strana proto musí být
   čitelná i takhle, i když se pak uvnitř otáčí. */
@media (max-width: 560px) {
  /* Pás je na úzké obrazovce vyšší, jinak jsou z obou světů dva proužky
     a nepozná se, co na nich je. */
  /* Na telefonu nastojato je pás vyšší, jinak jsou z obou světů dva proužky. */
  .uvod-obraz { height: 175px; }
  .uvod-obraz-text { padding: 8px 10px 0; }
  .uvod-obraz-text .nazev { font-size: clamp(22px, 7.4vw, 32px); }
  .uvodni-rocniky.na-obrazu { font-size: clamp(11px, 3.4vw, 15px); }
  /* Volt se zmenší a odsune, aby nelezl do nadpisu. */
  .uvod-pul-volt { height: 56%; right: 2%; }
  .uvod-pul-popis { font-size: clamp(9px, 2.9vw, 13px); bottom: 4%; }
  /* Věta o dvou světech se na telefonu zkrátí na to podstatné: druhá půlka
     („Učivo je v obou stejné") je ta, kvůli které tam ta věta je. */
  .uvod-dva-svety { font-size: 12px; margin-top: 8px; }
  .uvod-dva-svety .jen-siroke { display: none; }
  .uvod-pozvanka { padding: 8px 12px; font-size: 12px; margin-top: 8px; }
  .uvod-pozvanka b { font-size: 15px; }
  /* Čtyři tlačítka na dvě řady po dvou, ať jsou trefitelná prstem. */
  .deti.ctyri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Tři černé čtverce pod sebou by byly tři obrazovky rolování. Vedle sebe
     v jedné řadě jsou zase moc malé na čtení. Kompromis: jeden sloupec, ale
     čtverec se rozbije na širší dlaždici, takže text není v komínku. */
  .tri-bloky { grid-template-columns: 1fr; gap: 10px; }
  .blok-co.b-cerna { aspect-ratio: 5 / 2; padding: 5% 7%; }
  .blok-co.b-cerna b { font-size: 17px; }
  .blok-co.b-cerna span { font-size: 13px; }
  /* Dva sloupce hesel se na telefonu nevejdou vedle sebe, text se láme po
     dvou slovech. Pod sebe, a Pro rodiče se zarovná doleva jako Pro děti. */
  .hesla-dva { grid-template-columns: 1fr; gap: 6px; }
  .hesla-dva .hesla-rodice { text-align: left; }
  .hesla-rodice li { padding: 9px 0 9px 22px; margin-left: 0; }
  .hesla-rodice li::before { left: 0; right: auto; }
  .konta { grid-template-columns: 1fr; }
}

/* ── INSTALAČNÍ PŘEPÁŽKA JEN NA CESTĚ DÍTĚTE DO UČENÍ ────────────────────────
   Nález chatu na reklamu, 3. 9. 2026: `.otoc` je `position: fixed; inset: 0`
   a zapínala se na KAŽDÉM dotykovém zařízení pod 1024 px, dokud si člověk
   aplikaci nenainstaloval. Návštěvník, který přišel z reklamy na telefonu,
   tedy neviděl z prodejní strany vůbec nic: žádného ježka, žádné „vyzkoušejte
   zdarma", žádnou cenu. První, co jsme po něm chtěli, bylo nainstalovat si
   něco, o čem nikdy neslyšel.

   Norka 3. 9. 2026 na srovnání obou stavů vedle sebe: „vidím souhlasím."

   Přepážka proto zůstává, jen se posunula o ťuknutí dál. Aplikace 6 dává na
   `<body>` třídu `du-uvod` na obrazovkách ze seznamu `BEZ_PREPAZKY`
   (`app.js`): rozcestník, O aplikaci, návod, podmínky, pro rodiče, přihlášení,
   úkoly s AI, nové dítě, účet. Učení, doupě a příběh v seznamu schválně nejsou,
   ty jsou kreslené na šířku a bez instalace se v prohlížeči rozsypou. */
/* ⚠️ TOHLE PRAVIDLO DNES NIC NEDĚLÁ a je to schválně. Když byla `.otoc` zeď
   přes celou obrazovku, schovávalo ji na prodejní straně. Od chvíle, kdy je
   z ní úzká lišta, se nemá skrývat nikde: úvodní strana je právě to místo,
   kde má nabídka instalace být (Aplikace 6 proto 3. 9. 2026 vyprázdnila
   `BEZ_PREPAZKY` v app.js a třída `du-uvod` se od té doby na `<body>`
   nedostane). Pravidlo i třída zůstávají pro případ, že by se lišta někde
   skrývat měla; kdo je bude rušit, ať zruší obojí naráz. */
body.du-uvod .otoc { display: none !important; }

/* ── Z PŘEPÁŽKY JE LIŠTA ──────────────────────────────────────────────────────
   Norka 3. 9. 2026, doslova: „tu přepážku jste tam dali vy, od začátku platí,
   že je přístupná celá apka, mimo cvičení, to je pouze 1."

   Přepážka byla `position: fixed; inset: 0`, tedy zeď přes celou obrazovku,
   a na telefonu z prodejní strany nebylo vidět vůbec nic. Nabídka instalace
   zůstává, ale odteď NIC NEZAKRÝVÁ: je to úzký pruh u spodní hrany.

   Chování (zavření a paměť do konce návštěvy) drží skript v navrh.html,
   Aplikace 6. Já měním jen tvar. Tlačítko `.otoc-dal` zůstalo, jen z něj je
   křížek; skript ho pořád najde podle třídy. */
.otoc { /* LIŠTA, ne zeď */
  inset: auto 0 0 0;
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  text-align: left; font-size: 15px;
  background: var(--karta); color: var(--inkoust);
  border-top: 1.5px solid var(--karta-okraj);
  box-shadow: 0 -6px 18px rgba(70, 60, 75, .18);
}
.otoc img { width: 34px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.22); flex: 0 0 auto; }
.otoc-nadpis { font-size: 14px; font-weight: 800; line-height: 1.2; max-width: none; flex: 1 1 auto; }
/* Velikost stažení MÁ BÝT VIDĚT u nabídky instalace (Norka 3. 9. 2026:
   „to musí být vidět u možnosti stažení"). Změřeno na živém webu: soubory,
   které si service worker ukládá dopředu, váží 302 kB komprimovaně. Zbytek
   (obrázky, cvičení) se stahuje postupně, jak na něj dítě narazí, a videa
   se streamují a do zařízení se neukládají vůbec. */
.otoc-drobne {
  flex: 1 1 100%; order: 4; margin: 0;
  font-size: 11px; font-weight: 600; color: var(--inkoust-slaby); line-height: 1.3;
}
.otoc-drobne b { color: var(--inkoust); }
.otoc-instal { width: auto; min-width: 0; flex: 0 0 auto; min-height: 40px; font-size: 14px; padding: 0 14px; }
.otoc-ios { font-size: 12px; font-weight: 700; max-width: 18em; margin: 0; flex: 1 1 auto; }
.otoc-dal {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--pozadi-2); color: var(--inkoust-slaby);
  font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit;
}
.otoc-dal:active { transform: translateY(1px); }
/* Na úzkém telefonu se lišta zalomí do dvou řádek, křížek zůstane vpravo. */
@media (max-width: 470px) {
  /* Dvě řady, ne tři: nahoře ikona, text a křížek, dole tlačítko přes celou
     šířku, ať se dá trefit palcem. */
  .otoc { gap: 8px; }
  .otoc img       { order: 0; width: 30px; }
  .otoc-nadpis    { order: 1; flex: 1 1 auto; font-size: 13px; }
  .otoc-dal       { order: 2; }
  .otoc-instal    { order: 3; flex: 1 1 100%; width: 100%; }
  .otoc-ios       { order: 3; flex: 1 1 100%; max-width: none; }
}

/* Řada věcí v pokoji: první barevná, ostatní šedé (Norka 3. 9. 2026). Patnáct
   dlaždic se na obrazovku nevejde, proto se řada posouvá do strany a nezalomí
   se; kdyby se lámala, vytlačila by nábytek, kvůli kterému sem dítě přišlo. */
.veci.rada-veci {
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  overflow-x: auto; overflow-y: hidden; gap: 10px;
  padding: 2px 2px 6px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.veci.rada-veci .vec { flex: 0 0 auto; scroll-snap-align: start; }
/* Šedá dlaždice je menší: nese jen to, že něco přijde, ne že si to dítě
   může vzít teď. */
.veci.rada-veci .vec.seda { width: 118px; padding: 8px 6px 10px; }
.veci.rada-veci .vec.seda .vec-nazev { font-size: 11px; }
.veci.rada-veci .vec.seda .vec-znacka {
  font-size: 10px;
  /* Zelená patří tomu, co si dítě může vzít teď. Na šedé dlaždici by
     slibovala něco, co ještě nemá. */
  color: var(--inkoust-slaby);
}
/* Na nízké obrazovce (telefon naležato) je výška vzácná, dlaždice se zúží. */
@media (max-height: 500px) {
  .veci.rada-veci .vec { width: 118px; padding: 8px 6px 10px; }
  .veci.rada-veci .vec.seda { width: 96px; }
}

/* Tlačítko výměny je TICHÉ. Je to možnost, ne pobídka: hlavní věc na obrazovce
   je pořád pokoj a to, co v něm přibude. Název vyměňované věci je pod nápisem
   drobně, aby dítě vědělo, o co přijde, dřív než ťukne. */
.vymena-tl { margin: 8px auto 0; display: block; width: auto; min-width: 0;
             padding: 8px 16px; min-height: 0; font-size: 14px; line-height: 1.2; }
.vymena-co { display: block; font-size: 11px; font-weight: 600; opacity: .7; margin-top: 2px; }
/* Věta po výměně: obě strany, klidně, nad řadou věcí. */
.hlaska-vymena {
  margin: 0 auto 8px; max-width: 34em; text-align: center; line-height: 1.35;
  background: var(--karta); border-radius: var(--r-male); padding: 8px 14px;
  font-size: clamp(13px, 1.4vw, 16px); box-shadow: 0 3px 10px rgba(70,60,75,.16);
}
@media (max-height: 500px) {
  .vymena-tl { margin-top: 5px; padding: 6px 12px; font-size: 12px; }
  .vymena-co { font-size: 10px; }
  .hlaska-vymena { font-size: 12px; padding: 6px 10px; margin-bottom: 5px; }
}

/* ── VÍC NEŽ DVĚ DĚTI (jen v ukázce) ─────────────────────────────────────────
   Norka 3. 9. 2026: „ty děti tam do dema dej 4, ale musí být někde vidět, že
   je to jen v demu, že jinak aplikace umožňuje pouze 2 děti."

   Řada je vyměřená na ČTYŘI tlačítka. Se šesti by v jedné řadě byla na telefonu
   neťuknutelná, proto se láme: tři a tři na širokém, dvě a dvě a dvě na úzkém.
   `auto-fit` s pevnou minimální šířkou to udělá samo a nemusí se hlídat počet. */
.deti.ctyri.vic-deti {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 12px;
}
@media (max-width: 700px) {
  .deti.ctyri.vic-deti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Poznámka pod tlačítky. Musí být vidět, ale nesmí přebít samotná tlačítka:
   je to vysvětlení, ne nabídka. */
.deti-demo-pozn {
  width: 100%; max-width: 900px; margin: 8px auto 0; text-align: center;
  font-size: clamp(11px, 1.15vw, 14px); line-height: 1.35; color: var(--inkoust-slaby);
}
.deti-demo-pozn b { color: var(--inkoust); }
@media (max-height: 500px) {
  .deti.ctyri.vic-deti { row-gap: 8px; }
  .deti-demo-pozn { font-size: 10px; margin-top: 5px; }
}

/* Bodlinka stojí zhruba uprostřed levé poloviny, tak jde nápis k levému kraji.
   Volt stojí vpravo, tak jde jeho nápis doleva od něj. */
.u-les   .uvod-pul-popis { text-align: left;  padding-left: 5%; }
.u-mesto .uvod-pul-popis { text-align: left;  padding-left: 5%; }

/* ── SKLÁDANÁ ODPOVĚĎ SE MUSÍ VEJÍT ──────────────────────────────────────────
   Změřeno 3. 9. 2026 v okně 390 × 844 (telefon nastojato) na skutečném
   průchodu cvičením: po napsání čtrnácti znaků byl řádek se skládanou
   odpovědí široký 686 px a písmenkovník 756 px, tedy dvakrát přes okraj
   obrazovky. Táhl to `.skladane`, který měl `flex-wrap: nowrap` a
   `min-width: auto`, takže se nemohl ani zalomit, ani zúžit, a roztáhl celou
   mřížku úkolu; přetékalo pak i zadání a plocha s odpovědí (o 481 px).

   Tři deklarace to spraví: řádek se smí zalomit a jeho sousedé se smí zúžit.
   Po opravě je při týchž čtrnácti znacích řádek 191 px a všechno sedí uvnitř
   390 px. Naležato se nic nemění, dokud se odpověď vejde na jeden řádek;
   když se nevejde, zalomí se místo aby zmizela za okrajem.

   Delší odpovědi nejsou výjimka: „ilustrátor" má deset písmen,
   „na shledanou" jedenáct i s mezerou. */
.skladane { flex-wrap: wrap; min-width: 0; }
.odpoved-plocha, .ukol-otazka, .dlazdice { min-width: 0; }

/* ── TLAČÍTKO OBJEDNÁVKY MUSÍ BÝT NA DOSAH ───────────────────────────────────
   Norka 3. 9. 2026 nad objednávkou na telefonu: „po napsání e-mailu je potřeba
   někam kliknout, potvrdit, ale tady je to tlačítko hodně dole."

   Měla pravdu: mezi polem na e-mail a tlačítkem je volba období, příplatek za
   druhé dítě, součet a celý text souhlasu, což je na telefonu s vytaženou
   klávesnicí víc, než se vejde na obrazovku. Člověk dopíše e-mail a neví,
   co dál.

   Tlačítko se proto v objednávce drží u spodní hrany, dokud je objednávka na
   obrazovce. NEOBCHÁZÍ TO SOUHLAS: políčko zůstává nezaškrtnuté a nad
   tlačítkem, takže si ho člověk musí přečíst a zaškrtnout, jinak objednávka
   neodejde. Mění se jen to, že tlačítko je vidět dřív, ne že se dá ťuknout
   bez souhlasu. */
.objednavka .rada:has([data-akce="objednat"]) {
  position: sticky; bottom: 0; z-index: 3;
  margin: 10px -14px -10px; padding: 10px 14px;
  background: linear-gradient(to top, var(--karta) 72%, transparent);
}
.objednavka .rada:has([data-akce="objednat"]) .tl { width: 100%; }
/* Naležato na telefonu (výška do 520 px) by přilepené tlačítko zabralo čtvrtinu
   obrazovky a leželo přes pole s e-mailem (změřeno 3. 9. 2026 na 844 × 390).
   Rodičovská část je na výšku; naležato se tlačítko chová jako běžný řádek. */
@media (max-height: 520px) {
  .objednavka .rada:has([data-akce="objednat"]) { position: static; box-shadow: none; }
}

/* O aplikaci, Norka 3. 9. 2026 ke snímkům: „velké tučné" u věty o internetu
   a „černé písmo" na tlačítku „Jak na to: návod pro rodiče" (bílé písmo na
   světle modrém tlačítku se nedalo přečíst). */
.velke-tucne { font-size: 1.3em; font-weight: 800; line-height: 1.3; }
.tl.hlavni.navod-tl { color: var(--inkoust); }

/* BUBLINA S REAKCÍ, Norka 3. 9. 2026 ke snímkům z PC a mobilu: „na mobilu je
   moc vlevo, posunout doprava a tu reakci udělat menší, je přes půlku mobilu,
   na pc by to taky mohlo být menší". A na PC ležela bublina přes spodní řádek
   klávesnice. Tři věci:
   1. Bublina menší: užší, menší písmo, méně vzduchu. */
.bublina { max-width: 560px; padding: 12px 20px; margin-bottom: 5dvh; border-radius: 26px; }
.bublina-nadpis { font-size: 18px; margin-bottom: 4px; }
.bublina-veta { font-size: 16px; line-height: 1.35; }
/* 2. Klávesnice pod bublinou zmizí, dokud reakce visí. Zůstává jen to, co
      má značku správně/špatně (výběr ze čtyř, znaménka), protože ta značka je
      část odpovědi. Napsané slovo dítě vidí v bublině. */
.ukol.s-odezvou .odpoved-plocha .dlazdice:not(:has(.spravna)):not(:has(.spatna)) { visibility: hidden; }
/* 3. Na mobilu postava dál od levého kraje a o kousek menší, ať se vejde
      celá a nechá bublině místo. */
@media (max-width: 900px) {
  .vyskok-pichal { height: 50dvh; margin-left: 1dvh; margin-right: -4dvh; }
  .bublina { padding: 10px 16px; margin-bottom: 4dvh; }
  .bublina-nadpis { font-size: 16px; }
  .bublina-veta { font-size: 15px; }
}

/* HLÁŠKA V DOUPĚTI („Do doupěte přibylo: …", chyba) LEŽÍ NAD SPODNÍ LIŠTOU, ne
   v řadě s ní. Norka 3. 9. 2026 („někdo to rozhodil"): lišta s místnostmi
   seděla uprostřed pokoje. Příčina: `.lista-pevna.dole` i `.doupe .dole` mají
   `margin-top: auto`, a když se hláška vykreslí, dělí si obě volné místo
   napůl, takže lišta vyjede do půlky obrazovky. Hláška je teď položená přes
   scénu kousek nad lištou a do rozvržení nevstupuje. */
.doupe .dole.nad-scenou:has(.hlaska-ziskano), .doupe .dole.nad-scenou:has(.hlaska-chyby) {
  position: absolute; left: 0; right: 0;
  bottom: calc(48px * var(--meritko, 1) + 24px);
  margin: 0; align-items: center; z-index: 4; pointer-events: none;
}
/* BODLINKA NA PC MENŠÍ (Norka 3. 9. 2026: „pc-zmenšit"). Je čtvercová, takže
   60dvh výšky bylo i 60dvh šířky a zakrývala zadání. Volt je úzký, tomu 46dvh
   stačí stejně. Mobil má vlastní pravidlo výš (50dvh). */
.vyskok-pichal { height: 46dvh; }

/* ── MINIHRY ZA LÍSTKY (Aplikace 6, 3. 9. 2026) ──────────────────────────────
   Základ od Aplikace 6, podobu si může vzít reklama. Vše se musí vejít na
   telefon naležato (390 px na výšku): karty a pole se měří v dvh. */
.minihry-stred { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.minihry .nazev { margin: 0; }
.minihry .podnazev { margin: 0 0 6px; text-align: center; }
.hra-volby { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hra-volba {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: min(220px, 28vw); min-height: 96px; padding: 14px 16px; border: 0; cursor: pointer;
  border-radius: 22px; font: inherit; color: var(--inkoust);
  box-shadow: 0 5px 0 var(--bok, var(--karta-okraj)), 0 8px 16px var(--stin);
}
.hra-volba b { font-size: 20px; }
.hra-volba span { font-size: 14px; font-weight: 600; }
.hra-volba small { font-size: 13px; font-weight: 800; opacity: .8; }
.hra-volba:disabled { opacity: .5; cursor: default; }
.hra-stav { font-weight: 900; font-size: clamp(16px, 3dvh, 22px); color: var(--inkoust);
            background: var(--karta); padding: 4px 16px; border-radius: 999px; }
.pex-mrizka { display: grid; grid-template-columns: repeat(6, min(96px, 16dvh)); gap: min(10px, 1.5dvh); }
.pex-karta {
  width: min(96px, 16dvh); height: min(96px, 16dvh); border: 0; border-radius: 14px; cursor: pointer;
  background: var(--bledemodra); box-shadow: 0 4px 0 var(--bledemodra-t), 0 6px 12px var(--stin);
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
.pex-karta.otocena { background: var(--karta); box-shadow: 0 4px 0 var(--karta-okraj), 0 6px 12px var(--stin); }
.pex-karta.nalezena { opacity: .45; }
.pex-karta img { max-width: 100%; max-height: 100%; }
.chyt-mrizka { display: grid; grid-template-columns: repeat(3, min(140px, 20dvh)); gap: min(10px, 1.5dvh); }
.chyt-pole {
  width: min(140px, 20dvh); height: min(140px, 20dvh); border: 0; border-radius: 18px; cursor: pointer;
  background: color-mix(in srgb, var(--karta) 80%, transparent);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 10px var(--stin);
  display: flex; align-items: flex-end; justify-content: center; padding: 4px; overflow: hidden;
}
.chyt-pole img { height: 92%; width: auto; animation: vyskoceni .18s ease-out both; }
/* Skákačka: plocha přes šířku, průvodce vlevo, překážka jede zprava. Výška
   v dvh, ať se pod hlavičku a stav vejde i na telefonu naležato. */
.skok-plocha {
  position: relative; display: block; width: min(900px, 92vw); height: min(260px, 46dvh);
  border: 0; border-radius: 22px; cursor: pointer; overflow: hidden; padding: 0;
  background: color-mix(in srgb, var(--karta) 70%, transparent);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 6px 14px var(--stin);
}
.skok-plocha.konec { filter: saturate(.6); }
.skok-zem { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: var(--past-zelena); }
.skok-hrac {
  position: absolute; left: 10%; bottom: 12%; height: 62%; width: auto;
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.skok-hrac.skace { transform: translateY(-70%); }
.skok-prekazka {
  position: absolute; bottom: 12%; width: 8%; height: 22%; border-radius: 40% 40% 8px 8px;
  background: var(--jahodova); box-shadow: 0 3px 0 var(--jahodova-t);
}
.hra-rekord { margin: 0; font-weight: 800; color: var(--inkoust); }
.skok-napoveda {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  font-size: 14px; font-weight: 800; color: var(--inkoust-slaby);
  background: color-mix(in srgb, var(--karta) 80%, transparent);
  padding: 4px 12px; border-radius: 999px; pointer-events: none;
}
.rozpracovane .tl.hry-tl { flex: 0 0 auto; width: auto; color: var(--inkoust); display: flex;
                           align-items: center; gap: 6px; line-height: normal; }
.rozpracovane .tl.hry-tl svg { width: 20px; height: 20px; }



/* CO TO VLASTNĚ JE: první věta pod hlavičkou úvodu. Musí být na mobilu vidět
   BEZ rolování, proto stojí hned za obrazem a před vším ostatním, a je
   výrazná, ale ne křiklavá. Norka 3. 9. 2026: „na celé ploše mobilu není
   jednoznačně napsáno co to je." */
.uvod-co-to-je {
  margin: 10px auto 0; max-width: 640px; padding: 0 6px;
  text-align: center; line-height: 1.35;
  font-size: clamp(15px, 3.6vw, 20px); font-weight: 600; color: var(--inkoust);
}
.uvod-co-to-je b { display: block; font-weight: 900; font-size: 1.12em; margin-bottom: 2px; }
@media (max-height: 500px) {
  .uvod-co-to-je { margin-top: 6px; font-size: 13px; }
  .uvod-co-to-je b { font-size: 1.08em; }
}