/* Půjdu do školy — vzhled. Styl Sago Mini: ploché oblé tvary, sytě veselé barvy, tlačítka jako hračky. */
:root{
  --nebe:#9EDDF5; --nebe-tmave:#5BC0EB; --trava:#9BDE7E; --trava-tmave:#5DBB63;
  --slunce:#FFD45C; --slunce-tmave:#F4B400; --korala:#FF8A65; --malina:#FF6F91;
  --tyrkys:#2EC4B6; --levandule:#B39DDB; --papir:#FFFBF2; --bila:#FFFFFF;
  --inkoust:#2B3A55; --sedy:#7A8AA6; --stin:rgba(43,58,85,.18);
  /* písmena jako ve školních pomůckách: samohlásky červeně, souhlásky modře */
  --samohlaska:#E8453C; --souhlaska:#2A6FDB;
  --titul:'Baloo 2',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --pismo:'Andika','Baloo 2',ui-rounded,system-ui,sans-serif;
  --r:28px; --r-m:20px;
  --pruzina:cubic-bezier(.34,1.56,.64,1); --plyn:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
/* bez zoomu na každém prvku (Safari to z body spolehlivě nepřebírá): jen posouvání. manipulation zakazovala jen dvojité
   ťuknutí, roztažení dvěma prsty povolovala a v Malování (dlaň, dva prsty na plátně) se stránka dál zvětšovala.
   Plátna k malování mají vlastní touch-action:none. */
html,*{touch-action:pan-x pan-y;}
html,body{height:100%;}
body{background:var(--nebe);color:var(--inkoust);font:500 18px/1.4 var(--titul);overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y;overflow:hidden;}
img{display:block;max-width:100%;-webkit-user-drag:none;user-drag:none;pointer-events:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
[hidden]{display:none!important;}

/* ── tlačítko jako hračka: zespodu tlustý stín, při stisku se zamáčkne ── */
.hracka{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:64px;padding:0 28px;border-radius:999px;background:var(--slunce);color:var(--inkoust);
  font:800 24px/1 var(--titul);box-shadow:0 7px 0 var(--slunce-tmave),0 12px 22px var(--stin);
  transition:transform .12s,box-shadow .12s;}
.hracka:active,.hracka.zmacknuto{transform:translateY(6px);box-shadow:0 1px 0 var(--slunce-tmave),0 4px 10px var(--stin);}
.hracka.zelena{background:var(--trava);box-shadow:0 7px 0 var(--trava-tmave),0 12px 22px var(--stin);}
.hracka.zelena:active{box-shadow:0 1px 0 var(--trava-tmave),0 4px 10px var(--stin);}
.hracka.kulata{width:72px;height:72px;min-height:0;padding:0;border-radius:50%;}
.hracka.bila{background:var(--bila);box-shadow:0 7px 0 #D9E3EE,0 12px 22px var(--stin);}
.hracka.bila:active{box-shadow:0 1px 0 #D9E3EE,0 4px 10px var(--stin);}
/* tlačítka jen s ikonou (13. 10. 2026): dítě nečte a text zabíral místo */
.hracka.ikona-velka{width:84px;height:84px;min-height:0;padding:0;border-radius:50%;}
.hracka.ikona-velka svg,.hracka.ikona-velka img{width:48px;height:48px;object-fit:contain;}
.hracka.start-hrat{width:128px;height:128px;min-height:0;padding:0;border-radius:50%;}
.hracka.start-hrat svg{width:66px;height:66px;margin-left:10px;}
.hracka svg{width:34px;height:34px;}

/* ── liška průvodkyně ── */
/* pořád jemně dýchá a pohupuje se; legrace, mrkání a poskoky řídí zaklad.js */
.liska{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(6px,env(safe-area-inset-bottom));z-index:30;
  width:clamp(104px,min(17vw,22vh),190px);pointer-events:auto;cursor:pointer;transform-origin:50% 100%;animation:dech 3.6s ease-in-out infinite;}
.liska img{width:100%;transform-origin:50% 100%;filter:drop-shadow(0 8px 10px rgba(43,58,85,.18));}
@keyframes dech{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(1.012,.988) rotate(-.7deg)}65%{transform:scale(.994,1.012) rotate(.6deg)}}
.liska.mluvi img{animation:mluvi .5s ease-in-out infinite alternate;}
/* liška jako loutka z dílů (assets/js/loutka.js): pohyb řídí skript, statický obrázek jen pro pózy, které loutka neumí */
.loutka{position:relative;width:100%;aspect-ratio:700/905;pointer-events:none;}
.loutka .lk{position:absolute;inset:0;}
.loutka .lk-dil{position:absolute;display:block;max-width:none;}
.liska.s-loutkou{animation:none;}
.liska.s-loutkou>img{display:none;}
.liska.s-loutkou.obrazkem>img{display:block;width:82%;margin:0 auto;}   /* obrázek póz, které loutka neumí, ve stejné velikosti jako loutka */
.liska.s-loutkou.obrazkem .loutka{display:none;}
.liska.s-loutkou .loutka{filter:drop-shadow(0 8px 10px rgba(43,58,85,.18));}
.liska.kasp img{animation:kasp .5s var(--pruzina);}
.liska.vrtni img{animation:vrtni .85s ease-in-out;}
.liska.skok img{animation:skok .7s var(--pruzina);}
@keyframes kasp{0%{transform:scale(1)}30%{transform:scale(1.12,.86)}60%{transform:scale(.94,1.08)}100%{transform:scale(1)}}
@keyframes vrtni{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
@keyframes mluvi{from{transform:rotate(-2deg) scale(1)}to{transform:rotate(2deg) scale(1.03)}}
@keyframes skok{0%{transform:translateY(0)}40%{transform:translateY(-38px) scale(1.05)}100%{transform:translateY(0)}}
.bublina{position:fixed;z-index:31;left:calc(max(10px,env(safe-area-inset-left)) + clamp(96px,15vw,170px));
  bottom:calc(max(6px,env(safe-area-inset-bottom)) + clamp(80px,12vw,140px));max-width:min(420px,60vw);
  background:var(--bila);border-radius:24px 24px 24px 6px;padding:12px 18px;font:600 17px/1.35 var(--titul);
  box-shadow:0 8px 24px var(--stin);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .25s,transform .3s var(--pruzina);pointer-events:none;}
.bublina.videt{opacity:1;transform:none;}
/* bublina je hlavně pro rodiče: na malé obrazovce jen krátce a menší */
@media(max-width:600px){.bublina{font-size:15px;padding:9px 14px;max-width:56vw;}}
.bez-bubliny .bublina{display:none;}

/* ── horní lišta ── */
.lista{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));pointer-events:none;}
.lista>*{pointer-events:auto;}
.lista .hracka.kulata{width:60px;height:60px;}
.lista .hracka.kulata svg{width:30px;height:30px;}
.postup{flex:1;max-width:520px;height:22px;border-radius:99px;background:rgba(255,255,255,.7);overflow:hidden;box-shadow:inset 0 3px 0 rgba(43,58,85,.08);}
.postup i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--trava),var(--tyrkys));transition:width .6s var(--plyn);}
.hvezdy-pocet{display:flex;align-items:center;gap:6px;background:var(--bila);border-radius:99px;padding:6px 14px 6px 8px;font:800 22px/1 var(--titul);box-shadow:0 5px 0 #D9E3EE;}
.hvezdy-pocet svg{width:30px;height:30px;}

/* ── písmena ── */
.pismeno{font-family:var(--pismo);font-weight:700;line-height:1;color:var(--souhlaska);}
.pismeno.sam{color:var(--samohlaska);}
.karta-pismeno{display:inline-flex;align-items:center;justify-content:center;background:var(--bila);border-radius:var(--r);
  box-shadow:0 8px 0 #D9E3EE,0 16px 30px var(--stin);}

/* ── vstupní animace ── */
.vyskoc{animation:vyskoc .55s var(--pruzina) both;}
@keyframes vyskoc{from{opacity:0;transform:scale(.6) translateY(30px)}to{opacity:1;transform:none}}
.zatres{animation:zatres .45s;}
@keyframes zatres{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
.pulz{animation:pulz 1.4s ease-in-out infinite;}
@keyframes pulz{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* konfety */
.konfety{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden;}
.konfety i{position:absolute;top:-20px;width:14px;height:20px;border-radius:4px;animation:padej linear forwards;}
@keyframes padej{to{transform:translateY(110vh) rotate(720deg)}}

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