/* =======================================================================
   KRAINA WYOBRAŹNI — style
   Scena ma stałe 1920x1080 i jest skalowana do rozmiaru tablicy.
   Wszystkie animacje na transform/opacity, żeby szły po GPU — tablice
   mają słabe procesory i każda animacja layoutu je zabija.
   ======================================================================= */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#140d2b;touch-action:manipulation;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
img{display:block;pointer-events:none}

#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;overflow:hidden}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block}
/* SVG musi być pozycjonowany, inaczej absolutnie pozycjonowane tła
   (.tlo-pelne, .par) malują się NAD nim i gra znika. */
svg.full{position:absolute;left:0;top:0;display:block;width:1920px;height:1080px}
.tap{cursor:pointer}

/* ---------------- warstwy paralaksy ---------------- */
.sky{position:absolute;inset:0}
.sky-dzien{background:linear-gradient(#3fa9e8 0%,#7cc9f0 45%,#bfe7fb 78%,#e3f5ff 100%)}
.par{position:absolute;left:-6%;width:112%;pointer-events:none;will-change:transform}
#par-chmurki{top:2%;opacity:.85;animation:plyn1 44s ease-in-out infinite}
#par-dal    {bottom:26px;opacity:.55;animation:plyn2 58s ease-in-out infinite}
#par-blisko {bottom:-10px;animation:plyn3 50s ease-in-out infinite}
.par img{width:100%;height:auto}
@keyframes plyn1{0%,100%{transform:translateX(-46px)}50%{transform:translateX(46px)}}
@keyframes plyn2{0%,100%{transform:translateX(26px)}50%{transform:translateX(-26px)}}
@keyframes plyn3{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}

/* ---------------- animacje postaci ---------------- */
@keyframes oddech{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.035) translateY(-10px)}}
@keyframes unos  {0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes skok  {0%{transform:scale(.72);opacity:0}
                  55%{transform:scale(1.09);opacity:1}
                  75%{transform:scale(.97)}100%{transform:scale(1);opacity:1}}
@keyframes chwiej{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
@keyframes migot {0%,100%{opacity:.3;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes radosc{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-34px) rotate(4deg)}}

.oddech{animation:oddech 3.8s ease-in-out infinite}
.unos  {animation:unos 3.2s ease-in-out infinite}
.skok  {animation:skok .6s cubic-bezier(.3,1.5,.5,1) both}
.chwiej{animation:chwiej .36s ease-in-out 2}

/* ---------------- iskierki pod palcem ---------------- */
#iskry{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.iskra{position:absolute;width:18px;height:18px;border-radius:50%;
  will-change:transform,opacity;animation:iskra .62s ease-out forwards}
@keyframes iskra{0%{transform:translate(0,0) scale(1);opacity:1}
                 100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---------------- przejście „przez chmurę" ---------------- */
#zaslona{position:absolute;inset:0;pointer-events:none;z-index:45;display:none}
#zaslona.gra{display:block}
#zaslona b{position:absolute;display:block;border-radius:50%;background:#fff;
  will-change:transform;transform:scale(0)}
#zaslona.zamykaj b{animation:puch .42s cubic-bezier(.4,0,.6,1) forwards}
#zaslona.otwieraj b{animation:puchZnikaj .46s cubic-bezier(.4,0,.6,1) forwards}
@keyframes puch{to{transform:scale(1)}}
@keyframes puchZnikaj{from{transform:scale(1)}to{transform:scale(0)}}

/* ---------------- GRA: CHMURKI ---------------- */
#chm-scena{position:absolute;left:50%;top:48px;width:660px;height:660px;
  margin-left:-330px;will-change:transform}
#chm-scena img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  will-change:opacity,filter;transition:opacity .55s ease,-webkit-filter .55s ease,filter .55s ease}
#chm-chmura{opacity:1}
#chm-stwor{opacity:0;-webkit-filter:blur(34px);filter:blur(34px)}

#chm-opcje{position:absolute;left:0;right:0;top:752px;height:260px;
  display:flex;justify-content:center;align-items:center;gap:72px}
.opcja{position:relative;width:236px;height:236px;border-radius:50%;background:#fff;
  box-shadow:0 14px 0 rgba(40,80,120,.18);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;animation:skok .5s cubic-bezier(.3,1.5,.5,1) both}
.opcja img{width:84%;height:84%;object-fit:contain}
.opcja.zle{animation:chwiej .36s ease-in-out 2}
/* animation-fill-mode:both z .opcja trzyma opacity:1, więc trzeba ją tu wyłączyć */
.opcja.znikaj{opacity:.22;pointer-events:none;animation:none;transition:opacity .45s ease}
.opcja.dobra{animation:none;box-shadow:0 0 0 11px #6ee37b,0 14px 0 rgba(40,80,120,.18)}

.swietlik{position:absolute;width:210px;height:210px;z-index:20;
  animation:unos 3.2s ease-in-out infinite;transition:left .8s ease,top .8s ease}
.swietlik.cieszy{animation:radosc .55s ease-in-out infinite}
#swietlik{left:170px;top:470px}
#swietlik-pot{left:1596px;top:214px}
#swietlik-kol{left:64px;top:252px}
#swietlik-dz{left:118px;top:150px}
#swietlik-mem{left:86px;top:120px}
#swietlik-start{left:1420px;top:300px;width:250px;height:250px}

/* ---------------- przyciski ---------------- */
.btn-powrot,.btn-dalej{position:absolute;cursor:pointer;z-index:25}
/* UWAGA: powrót MUSI być po prawej. Lewy górny róg zajmuje niewidzialne pole
   otwierające panel nauczyciela (#thit) i przykryłoby ten przycisk. */
.btn-powrot{right:36px;top:36px;width:124px;height:124px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 8px 0 rgba(40,80,120,.18)}
.btn-powrot::after{content:"";position:absolute;inset:24px;
  background:url(grafika/strzalka-lewo.webp) center/contain no-repeat}
.btn-dalej{right:44px;bottom:44px;width:168px;height:168px;border-radius:50%;
  background:#ffd93d;box-shadow:0 10px 0 rgba(180,120,0,.3);display:none}
.btn-dalej.widoczny{display:block;animation:skok .5s cubic-bezier(.3,1.5,.5,1) both}
.btn-dalej::after{content:"";position:absolute;inset:38px;
  background:url(grafika/strzalka-prawo.webp) center/contain no-repeat}

/* powrót jest celowo wysoko w rogu — poza odruchowym zasięgiem dziecka */

/* ---------------- panel nauczyciela ---------------- */
#thit{position:absolute;left:0;top:0;width:150px;height:150px;z-index:40}
#tpanel{position:absolute;inset:0;background:rgba(12,8,28,.85);display:none;
  align-items:center;justify-content:center;z-index:50}
#tpanel.on{display:flex}
#tbox{background:#fff;border-radius:34px;padding:48px 58px;text-align:center;max-width:1040px}
#tbox h2{font-size:48px;color:#2b2050;margin-bottom:8px}
#tbox p{font-size:24px;color:#6a6390;margin-bottom:28px;line-height:1.45}
#tbox button{font:600 28px/1 inherit;padding:24px 32px;margin:8px;border:0;border-radius:20px;
  background:#efecff;color:#36296b;cursor:pointer}
#tbox button.pri{background:#6c4de6;color:#fff}
#tbox button.akt{background:#6ee37b;color:#14432a}
.tsekcja{border-top:2px solid #eee;margin-top:22px;padding-top:22px}
.tsekcja span{display:block;font-size:22px;color:#9a93b8;margin-bottom:10px}

/* ---------------- kraina (hub) i ekran startowy ---------------- */
/* Tło jest przeskalowane, żeby bramy były większymi celami dotykowymi
   i siedziały niżej — dzieci wchodzą na stopień, ale i tak lepiej nisko. */
.tlo-pelne{position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  margin:-540px 0 0 -960px;object-fit:cover;transform:scale(1.22)}

/* delikatne przyciemnienie góry i dołu — żeby tytuł i przycisk czytały się
   nad ilustracją, bez zasłaniania samej krainy */
.start-mgla{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(42,16,70,.55) 0%,rgba(42,16,70,0) 34%,
             rgba(42,16,70,0) 58%,rgba(42,16,70,.5) 100%)}
.start-tytul{position:absolute;left:0;right:0;top:132px;text-align:center;
  font-size:112px;font-weight:800;color:#fff;letter-spacing:2px;
  text-shadow:0 8px 30px rgba(30,6,50,.8)}
.tlo-pelne.bez-zoom{transform:none}
.start-btn{position:absolute;left:50%;top:814px;width:210px;height:210px;margin-left:-105px;
  border-radius:50%;background:#ffd93d;box-shadow:0 12px 0 rgba(150,90,0,.35);
  animation:oddech 2.6s ease-in-out infinite}
.start-btn::after{content:"";position:absolute;left:82px;top:58px;width:0;height:0;
  border-left:66px solid #fff;border-top:47px solid transparent;border-bottom:47px solid transparent}

.brama{position:absolute;width:280px;height:460px;top:530px;margin-left:-140px;cursor:pointer;
  will-change:transform;transition:transform .25s ease}
.brama:active{transform:scale(.96)}
.brama .ikona{position:absolute;left:50%;top:84px;width:188px;height:188px;margin-left:-94px;
  display:flex;align-items:center;justify-content:center;animation:unos 3.4s ease-in-out infinite}
.brama .ikona img,.brama .ikona svg{width:100%;height:100%;object-fit:contain}
.brama .podpis{position:absolute;left:0;right:0;top:356px;text-align:center;
  font-size:38px;font-weight:700;color:#fff;opacity:.92;text-shadow:0 3px 12px rgba(0,0,0,.5)}

/* ---------------- GRA: POTWÓR ---------------- */
#par-jaskinia{bottom:-14px;animation:plyn3 56s ease-in-out infinite}
@keyframes taniec{0%,100%{transform:translateY(0) rotate(0)}
  20%{transform:translateY(-30px) rotate(-6deg)}
  45%{transform:translateY(0) rotate(5deg)}
  70%{transform:translateY(-20px) rotate(-3deg)}}
#monster{transform-box:fill-box;transform-origin:50% 92%}
#monster.tanczy{animation:taniec .7s ease-in-out infinite}
#monster.drgnij{animation:chwiej .36s ease-in-out 2}

/* ---------------- GRA: KOLORY ---------------- */
/* Szara dolina leży NAD kolorową; po pomalowaniu wszystkiego gaśnie
   i świat odzyskuje barwy. */
#kol-tlo-szare{transition:opacity 1.8s ease}
#kol-tlo-szare.znikniete{opacity:0}
#kol-znowu{background:#6c4de6;box-shadow:0 10px 0 rgba(50,20,120,.4)}

/* ---------------- MAPA KRAINY ---------------- */
.mapa-tytul{position:absolute;left:0;right:0;top:34px;text-align:center;
  font-size:66px;font-weight:800;color:#fff;letter-spacing:1px;
  text-shadow:0 5px 22px rgba(40,10,70,.75)}
.miejsce{position:absolute;width:200px;height:200px;margin:-100px 0 0 -100px;cursor:pointer;
  will-change:transform;animation:unos 3.6s ease-in-out infinite}
.miejsce .krazek{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.95);
  box-shadow:0 10px 0 rgba(40,20,80,.35)}
.miejsce .ikona{position:absolute;inset:28px;display:flex;align-items:center;justify-content:center}
.miejsce .ikona img,.miejsce .ikona svg{width:100%;height:100%;object-fit:contain}
.miejsce .podpis{position:absolute;left:-50px;right:-50px;top:208px;text-align:center;
  font-size:34px;font-weight:700;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.8)}
.miejsce .gwiazdka{position:absolute;right:-18px;top:-10px;width:98px;height:98px;
  display:none;animation:migot 3s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(60,20,90,.65))}
.miejsce.zdobyte .gwiazdka{display:block}

/* ---------------- GRA: DŹWIĘKI ---------------- */
#par-dz-dal{bottom:26px;opacity:.55;animation:plyn2 58s ease-in-out infinite}
#par-dz-blisko{bottom:-10px;animation:plyn3 50s ease-in-out infinite}
.opcja-svg{animation:skok .5s cubic-bezier(.3,1.5,.5,1) both;
  transform-box:fill-box;transform-origin:center}
.zle-svg{animation:chwiej .36s ease-in-out 2}
/* animation-fill-mode trzyma opacity:1, więc gaszenie wymaga wyłączenia animacji */
.znikaj-svg{animation:none;opacity:.22;transition:opacity .45s ease}
.dobra-svg{animation:none}
@keyframes falaAnim{0%,100%{opacity:.15}50%{opacity:1}}
.fala{animation:falaAnim .5s ease-out infinite}
.fala.f2{animation-delay:.12s}
.fala.f3{animation-delay:.24s}

/* ---------------- GRA: MEMORY ---------------- */
@keyframes kartaPop{0%{transform:scaleX(.06)}62%{transform:scaleX(1.05)}100%{transform:scaleX(1)}}
@keyframes kartaZamykaj{from{transform:scaleX(1)}to{transform:scaleX(.06)}}
.karta-pop{animation:kartaPop .26s ease-out both;transform-box:fill-box;transform-origin:center}
.karta-zamykaj{animation:kartaZamykaj .2s ease-in both;transform-box:fill-box;transform-origin:center}
#mem-znowu{background:#6c4de6;box-shadow:0 10px 0 rgba(50,20,120,.4)}