/* Půjdu do školy — hra Učíme se číst */
body{background:var(--nebe);}
.obrazovka{position:fixed;inset:0;overflow:hidden;}

/* ── mapa: cestička s lekcemi shora dolů ── */
#mapa{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#B7E8F7 0,#BFE9A9 380px,#A5E08A 900px,#9BDE7E);}
.mapa-krajina{position:absolute;left:50%;transform:translateX(-50%);top:0;width:100vw;max-width:none;height:clamp(470px,46vw,640px);object-fit:cover;object-position:center 72%;   /* přes celou šířku: dřív na tabletu na šířku nedosáhla k okrajům */
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);}
.mapa-ozdoba{position:absolute;width:clamp(78px,20vw,120px);pointer-events:none;filter:drop-shadow(0 6px 6px rgba(43,58,85,.12));}
.mapa-in{position:relative;margin:0 auto;width:min(100%,560px);padding:calc(100px + env(safe-area-inset-top)) 0 calc(200px + env(safe-area-inset-bottom));}
.mapa-cesta{position:absolute;left:0;top:0;width:100%;pointer-events:none;}
.mapa-cesta path{fill:none;stroke:#FFF3D6;stroke-width:34;stroke-linecap:round;stroke-linejoin:round;}
.mapa-cesta path.teckovana{stroke:#E9C98B;stroke-width:6;stroke-dasharray:2 18;}
.uzel{position:absolute;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bila);box-shadow:0 9px 0 #D9E3EE,0 16px 26px var(--stin);transition:transform .15s var(--pruzina);}
.uzel:active{transform:translateY(6px) scale(.97);}
.uzel .pismeno{font-size:66px;}
.uzel.hotovo{background:#E8F8DF;box-shadow:0 9px 0 var(--trava-tmave),0 16px 26px var(--stin);}
.uzel.ted{background:var(--slunce);box-shadow:0 9px 0 var(--slunce-tmave),0 16px 26px var(--stin);animation:pulz 1.6s ease-in-out infinite;}
.uzel.zamceno{background:#EEF2F7;box-shadow:0 9px 0 #C9D3DF,0 16px 26px var(--stin);}
.uzel.zamceno .pismeno{color:#B9C4D3!important;}
.uzel .zamek{position:absolute;right:-4px;bottom:-4px;width:40px;height:40px;border-radius:50%;background:#C9D3DF;display:flex;align-items:center;justify-content:center;}
.uzel .zamek svg{width:22px;height:22px;}
.uzel .ucho{width:66px;height:66px;}
.uzel-hvezdy{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);display:flex;gap:2px;}
.uzel-hvezdy svg{width:28px;height:28px;}
.uzel-nazev{position:absolute;left:50%;top:-14px;transform:translate(-50%,-100%);white-space:nowrap;background:var(--bila);border-radius:99px;padding:4px 12px;font:800 16px/1.2 var(--titul);box-shadow:0 4px 0 #D9E3EE;}
.mapa-liska{position:absolute;width:110px;margin:-130px 0 0 -55px;pointer-events:none;transition:left .6s var(--plyn),top .6s var(--plyn);}
.mapa-liska img{width:100%;animation:pulz 2.2s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(43,58,85,.2));}
.album-btn{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:25;}
.album-btn .hracka{min-height:76px;padding:0 24px 0 14px;font-size:22px;}
.album-btn img{width:52px;height:52px;object-fit:contain;}

/* ── lekce ── */
#lekce{background:var(--nebe) var(--lekce-bg) center bottom/cover no-repeat;}
.scena{position:absolute;inset:0;contain:paint;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,28px);
  padding:calc(96px + env(safe-area-inset-top)) 16px calc(150px + env(safe-area-inset-bottom));}
@media(min-width:900px){.scena{padding-left:200px;padding-right:200px;}}
.dal{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:25;}
.dal .hracka{width:96px;height:96px;}
.dal .hracka svg{width:48px;height:48px;}

.volby{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2.4vw,24px);}
.obrazek{width:clamp(120px,26vw,200px);aspect-ratio:1;border-radius:var(--r);background:var(--bila);display:flex;align-items:center;justify-content:center;padding:12px;
  box-shadow:0 8px 0 #D9E3EE,0 16px 28px var(--stin);transition:transform .15s var(--pruzina),box-shadow .2s,background .2s;}
.obrazek img{width:100%;height:100%;object-fit:contain;}
.obrazek:active{transform:translateY(5px) scale(.97);}
.obrazek.velky{width:clamp(180px,40vw,300px);}
.obrazek.spravne,.volba-pismeno.spravne,.dlan.spravne{background:#DFF7D2;box-shadow:0 8px 0 var(--trava-tmave),0 16px 28px var(--stin);}
.obrazek.ztlumeny{opacity:.35;transform:scale(.92);}
.volba-pismeno{width:clamp(96px,20vw,150px);aspect-ratio:1;border-radius:var(--r);background:var(--bila);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 0 #D9E3EE,0 16px 28px var(--stin);transition:transform .15s var(--pruzina);}
.volba-pismeno .pismeno{font-size:clamp(62px,13vw,100px);}
.volba-pismeno:active{transform:translateY(5px) scale(.97);}

/* tleskání: počet dlaní */
.dlane{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.dlan{min-width:120px;height:104px;padding:0 16px;border-radius:24px;background:var(--bila);display:flex;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 7px 0 #D9E3EE,0 12px 22px var(--stin);transition:transform .15s var(--pruzina);}
.dlan svg{width:44px;height:44px;}
.dlan:active{transform:translateY(5px);}
.slabiky{display:flex;gap:10px;min-height:76px;}
.slabika-chip{font:700 clamp(36px,7vw,54px)/1 var(--pismo);background:var(--bila);border-radius:20px;padding:10px 18px;box-shadow:0 6px 0 #D9E3EE;}

/* představení písmena */
.intro{display:flex;flex-direction:column;align-items:center;gap:20px;}
.intro .karta-pismeno{width:clamp(200px,40vw,300px);aspect-ratio:1;}
.intro .karta-pismeno .pismeno{font-size:clamp(170px,34vw,260px);}
.intro-slova{display:flex;gap:18px;}
.intro-slovo{display:flex;flex-direction:column;align-items:center;gap:6px;}
.intro-slovo .obrazek{width:clamp(110px,22vw,160px);}
.slovo-popis{font:700 clamp(24px,4vw,32px)/1 var(--pismo);letter-spacing:.04em;}
.slovo-popis b{color:var(--samohlaska);}

/* obtahování */
.obtah{position:relative;border-radius:36px;background:var(--bila);box-shadow:0 10px 0 #D9E3EE,0 18px 34px var(--stin);touch-action:none;}
.obtah canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:36px;touch-action:none;}
.obtah-tl{display:flex;gap:14px;}

/* bubliny s písmeny */
.bubliny{position:relative;width:min(100%,760px);height:clamp(300px,46vh,440px);}
.bublinka{position:absolute;width:clamp(96px,17vw,128px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 12%,rgba(255,255,255,.55) 13% 40%,rgba(200,236,252,.6) 70%,rgba(158,221,245,.8));
  box-shadow:inset 0 -6px 14px rgba(91,192,235,.35),0 10px 22px rgba(43,58,85,.12);animation:vznas 4s ease-in-out infinite alternate;}
.bublinka .pismeno{font-size:clamp(56px,10vw,76px);}
.bublinka.praskla{animation:praskni .35s forwards;}
@keyframes vznas{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
@keyframes praskni{to{transform:scale(1.5);opacity:0}}

/* slabiky: posouvání písmen k sobě */
.spoj{position:relative;width:min(100%,640px);height:200px;}
.dlazdice{position:absolute;top:20px;width:150px;height:160px;border-radius:30px;background:var(--bila);display:flex;align-items:center;justify-content:center;
  box-shadow:0 9px 0 #D9E3EE,0 16px 28px var(--stin);touch-action:none;transition:left .45s var(--pruzina),box-shadow .2s;}
.dlazdice .pismeno{font-size:120px;}
.dlazdice.tahni{cursor:grab;}
.dlazdice.drzi{transition:none;box-shadow:0 14px 0 #D9E3EE,0 26px 38px var(--stin);z-index:3;}
.dlazdice.spojeno{box-shadow:0 9px 0 var(--trava-tmave),0 16px 28px var(--stin);background:#DFF7D2;}
.sipka-tah{position:absolute;top:84px;left:50%;transform:translateX(-50%);width:120px;height:40px;opacity:.6;animation:tah 1.2s ease-in-out infinite;}
@keyframes tah{0%,100%{transform:translateX(-80%)}50%{transform:translateX(-20%)}}

/* čtení slova a věty */
.slovo-pismena{display:flex;gap:clamp(4px,1.4vw,12px);transition:gap .5s var(--pruzina);}
.slovo-pismena.splynulo{gap:0;}
.slovo-pismeno{min-width:clamp(64px,13vw,104px);height:clamp(96px,18vw,140px);border-radius:24px;background:var(--bila);display:flex;align-items:center;justify-content:center;
  box-shadow:0 7px 0 #D9E3EE;transition:transform .2s var(--pruzina),background .2s,border-radius .4s;}
.slovo-pismeno .pismeno{font-size:clamp(66px,13vw,104px);}
.slovo-pismeno.dalsi{animation:pulz 1s ease-in-out infinite;background:#FFF6D6;box-shadow:0 7px 0 var(--slunce-tmave);}
.slovo-pismeno.precteno{background:#E9F7FF;}
.slovo-pismena.splynulo .slovo-pismeno{border-radius:0;box-shadow:0 7px 0 #D9E3EE;}
.slovo-pismena.splynulo .slovo-pismeno:first-child{border-radius:24px 0 0 24px;}
.slovo-pismena.splynulo .slovo-pismeno:last-child{border-radius:0 24px 24px 0;}
.veta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;max-width:900px;}
.veta-slovo{font:700 clamp(46px,9vw,80px)/1.1 var(--pismo);background:var(--bila);border-radius:22px;padding:8px 18px;box-shadow:0 7px 0 #D9E3EE;transition:background .2s,transform .2s var(--pruzina);}
.veta-slovo.cte{background:var(--slunce);transform:translateY(-6px);}
.veta-slovo.precteno{background:#E9F7FF;}
.otazka{font:800 clamp(26px,4.4vw,38px)/1.2 var(--titul);background:rgba(255,255,255,.85);border-radius:99px;padding:8px 22px;}

/* odměna */
#odmena{background:radial-gradient(circle at 50% 30%,#FFF6C9,var(--slunce) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;}
.odmena-liska{width:clamp(180px,30vw,280px);}
.odmena-hvezdy{display:flex;gap:14px;}
.odmena-hvezdy svg{width:clamp(64px,12vw,96px);height:clamp(64px,12vw,96px);opacity:.25;transform:scale(.6);transition:opacity .3s,transform .5s var(--pruzina);}
.odmena-hvezdy svg.svitit{opacity:1;transform:scale(1);}
.nalepka{width:clamp(150px,26vw,210px);aspect-ratio:1;border-radius:50%;background:var(--bila);display:flex;align-items:center;justify-content:center;padding:18px;
  box-shadow:0 0 0 8px rgba(255,255,255,.6),0 14px 30px var(--stin);animation:nalepka .9s var(--pruzina) both;animation-delay:1.6s;}
@keyframes nalepka{from{opacity:0;transform:rotate(-200deg) scale(.2)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
.odmena-tl{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}

/* album */
#album{overflow-y:auto;background:#FFE9C7;}
.album-in{max-width:980px;margin:0 auto;padding:calc(100px + env(safe-area-inset-top)) 16px 180px;}
.album-in h2{font:800 clamp(34px,6vw,52px)/1 var(--titul);text-align:center;margin-bottom:18px;}
.album-mrizka{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px;}
.album-nalepka{aspect-ratio:1;border-radius:50%;background:var(--bila);display:flex;align-items:center;justify-content:center;padding:14px;box-shadow:0 7px 0 #E8C99B;}
.album-nalepka img{width:100%;height:100%;object-fit:contain;}
.album-nalepka.chybi{background:#F5DDB7;box-shadow:none;}
.album-nalepka.chybi img{filter:brightness(0);opacity:.12;}

/* tlačítka jen s ikonou (13. 10. 2026) */
.album-btn .hracka.ikona-velka{width:84px;height:84px;min-height:0;padding:0;}