/* 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. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400..1000&display=swap');
/* 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:        #F3F9F0;
  --pozadi-2:      #E2F0DC;
  --karta:         #FFFFFF;
  --karta-okraj:   #D3E5CC;
  --inkoust:       #17301F;
  --inkoust-slaby: #5B7A63;

  /* 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;
  --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;

  --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:        #0E1712;
    --pozadi-2:      #16241B;
    --karta:         #1A2A20;
    --karta-okraj:   #2A3F31;
    --inkoust:       #EAF6EC;
    --inkoust-slaby: #93B29C;
    --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í */
  }
}
:root[data-tema="tma"] {
  --pozadi:        #0E1712;
  --pozadi-2:      #16241B;
  --karta:         #1A2A20;
  --karta-okraj:   #2A3F31;
  --inkoust:       #EAF6EC;
  --inkoust-slaby: #93B29C;
  --spravne-svet:  #16301D;
  --spatne-svet:   #331A14;
  --stin:          rgba(0, 0, 0, .45);
  --zavoj:         rgba(14, 23, 18, .78);
  --otazka:        #B79BE0;
}

* { 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; }

/* 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: 120px; animation: otoceni 2.6s ease-in-out infinite; }
@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; }
@media (orientation: portrait) and (max-width: 820px) { .otoc { display: flex; } }

/* 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; }
.ukol.dva-sloupce { grid-template-columns: 1fr 1fr; align-items: center; }
.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; }

.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 {
  display: block; font-size: .62em; font-weight: 600;
  color: var(--inkoust-slaby); margin-bottom: 6px;
}
.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: 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%; }

/* 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. */
.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: center; gap: 18px; }
.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;
  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); }
/* 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); }
.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; }

  .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;
}
/* 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. */
.mistnosti {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 3; display: flex; flex-direction: column; gap: 8px; align-items: stretch;
}
.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: 12px; padding: 0 12px; }
  .pruh-hlava.jedna-rada { gap: 6px; }
}
/* Na úzkém telefonu se vedlejší tlačítko schová — nesmí ukrojit z hlavního. */
@media (max-width: 560px) {
  .tl.vedlejsi { display: none; }
}

/* 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. */
.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;
}

/* „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;
  gap: 8px; font-weight: 900; 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í */
.karty .karta              { width: 260px; 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); }
.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); }

.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; }
.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; }
.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; }
}