/* Půjdu do školy — hra Počítáme (Liščí autobus) */
body{background:var(--nebe);}
.obrazovka{position:fixed;inset:0;overflow:hidden;}
.cislice{font-family:var(--pismo);font-weight:700;line-height:1;color:var(--souhlaska);font-variant-numeric:lining-nums;}

/* ── mapa: silnice se zastávkami ── */
#mapa{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#B7E8F7 0,#BFE9A9 380px,#A5E08A 900px,#9BDE7E);}
.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-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 70%;   /* 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);}
.silnice{position:absolute;left:0;top:0;width:100%;pointer-events:none;}
.silnice path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.silnice .okraj{stroke:#8FA3B8;stroke-width:58;}
.silnice .asfalt{stroke:#B7C3D0;stroke-width:48;}
.silnice .cara{stroke:#FFFFFF;stroke-width:5;stroke-dasharray:18 18;}
.zastavka{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--pruzina);}
.zastavka:active{transform:translateY(6px) scale(.97);}
.zastavka .cedule{width:100%;height:100%;}
.cedule{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bila);border:7px solid #E53935;box-shadow:0 8px 0 #C9D3DF,0 14px 24px var(--stin);}
.cedule .cislice{font-size:58px;}
.cedule .rozsah{font:800 28px/1 var(--titul);color:var(--inkoust);}
.cedule .oko{width:60px;}
.zastavka.ted .cedule{background:var(--slunce);animation:pulz 1.6s ease-in-out infinite;}
.zastavka.hotovo .cedule{border-color:var(--trava-tmave);background:#E8F8DF;}
.zastavka.zamceno .cedule{border-color:#C9D3DF;background:#EEF2F7;}
.zastavka.zamceno .cislice,.zastavka.zamceno .rozsah{color:#B9C4D3;}
.zastavka.zamceno .oko{opacity:.35;}
.uzel-hvezdy{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);display:flex;gap:2px;}
.uzel-hvezdy svg{width:26px;height:26px;}
.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-bus{position:absolute;width:150px;margin:-62px 0 0 -75px;pointer-events:none;transition:left .6s var(--plyn),top .6s var(--plyn);}
.mapa-bus .bus{animation:pulz 2.2s ease-in-out infinite;}
.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 16px;font-size:22px;}
.album-btn svg{width:44px;height:44px;}

/* ── 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(12px,2.4vh,26px);
  padding:calc(92px + env(safe-area-inset-top)) 14px 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;}

/* autobus: SVG a nad ním okna (sedadla) a řidička */
.bus{position:relative;width:min(92vw,560px);max-width:100%;flex:none;}
.bus.maly{width:min(80vw,460px);}
.bus-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.bus .kolo{transform-box:fill-box;transform-origin:center;}   /* střed kola; pevný bod v souřadnicích autobusu se s fill-box sčítal a kola kroužila po obrazovce */
.bus.jede .kolo{animation:kolo .5s linear infinite;}
@keyframes kolo{to{transform:rotate(360deg)}}
.sedadlo{position:absolute;display:flex;align-items:flex-end;justify-content:center;border-radius:12px;overflow:hidden;cursor:pointer;}
.sedadlo .zvire{width:96%;height:96%;object-fit:contain;object-position:50% 100%;transition:transform .25s var(--pruzina);}
.sedadlo .zvire.nastoupil{animation:nastoupil .45s var(--pruzina);}
@keyframes nastoupil{from{transform:translateY(80%) scale(.6);opacity:0}to{transform:none;opacity:1}}
.sedadlo.spocitano{box-shadow:inset 0 0 0 4px var(--trava-tmave);background:rgba(155,222,126,.35);}
.sedadlo.pocita{box-shadow:inset 0 0 0 5px var(--slunce-tmave);background:rgba(255,212,92,.45);}
.sedadlo.pocita .zvire,.sedadlo.hopsa .zvire{animation:hopsa .4s var(--pruzina);}
@keyframes hopsa{40%{transform:translateY(-14%) scale(1.08)}}
.zaves{position:absolute;inset:0;border-radius:12px;background:repeating-linear-gradient(90deg,#FF8A65 0 14%,#FF9E7A 14% 28%);transform-origin:50% 0;transform:scaleY(0);transition:transform .45s var(--pruzina);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.08);}
.zaves.zatazeno{transform:scaleY(1);}
.ridic{position:absolute;display:flex;align-items:flex-end;justify-content:center;border-radius:18px;overflow:hidden;pointer-events:none;}
.ridic img{width:150%;max-width:none;margin-bottom:-18%;}
.bus.mini{width:150px;}
.bus.mini .sedadlo{pointer-events:none;}

/* odpovědi */
.volby{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2.6vw,24px);}
.karta-cislo{width:clamp(92px,20vw,140px);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);}
.karta-cislo .cislice{font-size:clamp(60px,13vw,96px);}
.karta-cislo .kostka{width:78%;}
.karta-cislo:active{transform:translateY(5px) scale(.97);}
.karta-cislo.spravne{background:#DFF7D2;box-shadow:0 8px 0 var(--trava-tmave),0 16px 28px var(--stin);}
.karta-cislo.ztlumeny{opacity:.35;transform:scale(.92);}

/* představení čísla */
.intro-radek{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,28px);flex-wrap:wrap;}
.karta-velka{width:clamp(130px,30vw,210px);aspect-ratio:1;border-radius:36px;background:var(--bila);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 0 #D9E3EE,0 18px 34px var(--stin);}
.karta-velka .cislice{font-size:clamp(100px,22vw,160px);}
.intro-pomucky{display:flex;align-items:center;gap:12px;}
.kostka{width:clamp(84px,18vw,120px);aspect-ratio:1;background:var(--bila);border-radius:22%;box-shadow:0 7px 0 #D9E3EE,0 12px 22px var(--stin);}
.kostka.ramecek{background:none;box-shadow:none;width:clamp(120px,28vw,190px);}
.kostka.mala{box-shadow:none;}
.tlapky{display:flex;gap:4px;}
.tlapka{width:clamp(90px,20vw,130px);}
.scena>.vyskoc>.tlapky .tlapka{width:clamp(130px,34vw,200px);}

/* tečky na kostce: ukáže se, pak se zakryje */
.kostka-obal{position:relative;}
.kostka-obal .kostka{width:clamp(150px,34vw,230px);}
.kostka-obal .kostka.ramecek{width:clamp(220px,52vw,340px);}
.kostka-zakryt{position:absolute;inset:-6px;border-radius:24%;background:var(--slunce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ctext x='20' y='29' font-size='26' text-anchor='middle' fill='%23E8A800' font-family='sans-serif' font-weight='bold'%3E%3F%3C/text%3E%3C/svg%3E") center/50% no-repeat;
  transform:rotateY(90deg);transition:transform .35s var(--plyn);}
.kostka-obal.zakryto .kostka-zakryt{transform:none;}

/* nástup: peron se zvířátky a troubení */
.peron{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:84px;width:min(96vw,640px);padding:8px;border-radius:24px;background:rgba(255,255,255,.55);}
.cekajici{width:clamp(62px,13vw,84px);aspect-ratio:1;border-radius:18px;background:var(--bila);padding:4px;box-shadow:0 5px 0 #D9E3EE;transition:transform .25s var(--pruzina),opacity .25s;}
.cekajici img{width:100%;height:100%;object-fit:contain;}
.cekajici.nastoupil{opacity:.18;transform:scale(.8);}
.hracka.troubit{min-height:76px;padding:0 30px;font-size:28px;}
.hracka.troubit svg{width:40px;height:40px;}
.nastupuje,.vystupuje{width:clamp(60px,12vw,80px);transition:transform .6s var(--plyn),opacity .6s;}
.nastupuje img,.vystupuje img{width:100%;}
.nastupuje.jde{transform:translateY(-140px) scale(.5);opacity:0;}
.vystupuje{animation:vystoupil .7s var(--plyn) forwards;}
@keyframes vystoupil{from{transform:translateY(-120px) scale(.5);opacity:0}to{transform:none;opacity:1}}

/* najdi zastávku */
.ulice{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,4vw,40px);align-items:flex-end;}
.cedule-zastavky{display:flex;flex-direction:column;align-items:center;}
.cedule-zastavky .cedule{width:clamp(96px,20vw,130px);aspect-ratio:1;}
.cedule-zastavky .cedule .cislice{font-size:clamp(56px,11vw,76px);}
.cedule-zastavky i{display:block;width:12px;height:clamp(60px,10vh,100px);border-radius:6px;background:#8FA3B8;}
.cedule-zastavky:active{transform:translateY(5px);}
.cedule-zastavky.spravne .cedule{background:#DFF7D2;border-color:var(--trava-tmave);}
.bus.maly-bus{width:min(56vw,300px);}

/* obtahování číslice */
.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-tecka{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--slunce);box-shadow:0 0 0 6px rgba(255,212,92,.4);pointer-events:none;}
.obtah-tl{display:flex;gap:14px;}

/* víc / míň */
.dva-busy{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,3vw,30px);width:100%;}
.bus-volba{border-radius:28px;padding:10px;background:rgba(255,255,255,.55);transition:transform .15s var(--pruzina),background .2s;}
.bus-volba .bus{width:min(44vw,300px);}
.bus-volba:active{transform:scale(.97);}
.bus-volba.spravne{background:#DFF7D2;}
@media(max-aspect-ratio:1/1){.dva-busy{flex-direction:column;align-items:center;}.bus-volba .bus{width:min(78vw,320px);}}
.stejne-btn{width:88px;height:88px;font:800 54px/1 var(--titul);}

/* krokování: silnice se zastávkami a autobus */
.osa{position:relative;width:calc(100% - 70px);max-width:820px;height:200px;}
.osa::before{content:'';position:absolute;left:-30px;right:-30px;bottom:30px;height:40px;border-radius:20px;background:#B7C3D0;box-shadow:inset 0 -6px 0 #8FA3B8;}
.osa-zastavka{position:absolute;bottom:72px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;}
.osa-zastavka::after{content:'';width:6px;height:28px;border-radius:3px;background:#8FA3B8;}
.cedule.mala{width:clamp(34px,7vw,52px);height:clamp(34px,7vw,52px);border-width:4px;box-shadow:0 4px 0 #C9D3DF;}
.cedule.mala .cislice{font-size:clamp(20px,4.4vw,30px);}
.bus.osa-bus{position:absolute;bottom:34px;width:clamp(96px,22vw,150px);transform:translateX(-50%);transition:left .5s var(--pruzina);cursor:pointer;}

/* 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:16px;padding:24px;}
.odmena-liska{width:clamp(160px,26vw,240px);}
.odmena-hvezdy{display:flex;gap:14px;}
.odmena-hvezdy svg{width:clamp(60px,11vw,90px);height:clamp(60px,11vw,90px);opacity:.25;transform:scale(.6);transition:opacity .3s,transform .5s var(--pruzina);}
.odmena-hvezdy svg.svitit{opacity:1;transform:scale(1);}
.novy-dum{position:relative;width:clamp(150px,26vw,210px);animation:nalepka .9s var(--pruzina) both;animation-delay:1.6s;}
.novy-dum .dum{width:100%;}
.novy-dum .obyvatel,.domek .obyvatel{position:absolute;right:-12%;bottom:-4%;width:46%;}
@keyframes nalepka{from{opacity:0;transform:scale(.2) rotate(-30deg)}to{opacity:1;transform:none}}
.odmena-tl{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}

/* městečko */
#mestecko{overflow-y:auto;background:var(--nebe) var(--mestecko-bg) center top/cover no-repeat fixed;}
.mestecko-in{max-width:980px;margin:0 auto;padding:calc(100px + env(safe-area-inset-top)) 16px 180px;}
.mestecko-in h2{font:800 clamp(34px,6vw,52px)/1 var(--titul);text-align:center;margin-bottom:18px;color:var(--bila);text-shadow:0 4px 0 #3A9CC9;}
.mestecko-louka{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 14px;}
.domek{position:relative;aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center;}
.domek .dum{width:86%;}
.domek.prazdny .parcela{width:70%;height:22%;border-radius:50%;background:rgba(93,187,99,.45);border:3px dashed rgba(255,255,255,.7);}
.domek.hopsa .obyvatel{animation:hopsa .45s var(--pruzina);}
/* domeček vyzdobený v Malování: girlanda a teplá záře */
.domek.vyzdobeny .dum{filter:drop-shadow(0 0 12px rgba(255,212,92,.85));}
.domek.vyzdobeny::before{content:'';position:absolute;left:8%;right:8%;top:8%;height:18%;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 50' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q150 40 300 6' fill='none' stroke='%238A5A3A' stroke-width='3'/%3E%3Cpath d='M30 10l22 0-11 18z' fill='%23FF5A5F'/%3E%3Cpath d='M80 18l22 0-11 18z' fill='%23FFD23F'/%3E%3Cpath d='M139 22l22 0-11 18z' fill='%234CB963'/%3E%3Cpath d='M198 18l22 0-11 18z' fill='%234D7CFE'/%3E%3Cpath d='M248 10l22 0-11 18z' fill='%23FF8FC7'/%3E%3C/svg%3E") center/100% 100% no-repeat;}

/* poslední spočítaný (nebo ukázaný výsledek) poskočí: to je počet */
.sedadlo.posledni .zvire{animation:posledni .6s var(--pruzina);}
@keyframes posledni{0%{transform:scale(1)}35%{transform:scale(1.28) translateY(-12%)}70%{transform:scale(.95)}100%{transform:none}}

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