/* Půjdu do školy — Tvary a barvy („Liščí hrad z tvarů“). Společné věci jsou v app.css. */
:root{--liska-s:clamp(104px,min(17vw,22vh),190px);--liska-v:0px;}
@media (max-aspect-ratio:1/1){:root{--liska-v:calc(var(--liska-s) * 1.3);}}
body{background:#BDE6A8;}
.obrazovka{position:fixed;inset:0;overflow:hidden;}
.start{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(155,222,126,.5);backdrop-filter:blur(3px);}
.lista-stred{flex:1;}
body[data-obrazovka]:not([data-obrazovka="hrad"]) .liska{z-index:30;}

/* plocha hry: nahoře lišta, vlevo dole liška (na výšku dole rezerva pod ní) */
.plocha{position:absolute;inset:0;display:flex;gap:clamp(10px,2vw,26px);align-items:center;justify-content:center;
  padding:calc(max(12px,env(safe-area-inset-top)) + 78px) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) calc(max(10px,env(safe-area-inset-left)) + var(--liska-s) + 16px);}
@media (max-aspect-ratio:1/1){.plocha{flex-direction:column;padding:calc(max(12px,env(safe-area-inset-top)) + 76px) 12px calc(var(--liska-v) + 12px);}}
.vyskoc-g,.vec-in,.geo-kolicek,.hrad-dil path{transform-box:fill-box;transform-origin:center;}
.hop{animation:hopT .8s var(--pruzina);}
@keyframes hopT{0%,100%{transform:none}35%{transform:translateY(-18%) scale(1.06)}65%{transform:translateY(0) scale(.97)}}
.kelimek{display:block;width:min(64px,100%);aspect-ratio:1;border-radius:50%;padding:0;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 12%,transparent 13%),var(--b);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),0 5px 10px var(--stin);transition:transform .2s var(--pruzina),box-shadow .2s;}
.kelimek.vybrane{transform:scale(1.15);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),0 0 0 4px #fff,0 0 0 7px var(--b),0 8px 14px var(--stin);}

/* ══ HRAD (rozcestí) ══ */
#hrad{background:#A8DA6A var(--bg-hrad) center bottom/cover no-repeat;}
.hrad-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,44px);
  padding:calc(max(12px,env(safe-area-inset-top)) + 78px) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) calc(max(10px,env(safe-area-inset-left)) + var(--liska-s) + 16px);}
.hrad-obal{flex:1 1 0;min-width:0;height:100%;container-type:size;display:flex;align-items:center;justify-content:center;}
#hradSvg{width:min(100cqw,133cqh);aspect-ratio:200/150;overflow:visible;filter:drop-shadow(0 10px 14px rgba(60,90,40,.25));}
.hrad-dil.pada path{animation:padaDil .55s cubic-bezier(.3,1.6,.6,1) both;}
@keyframes padaDil{from{transform:translateY(-60px) scale(.3);opacity:0}to{transform:none;opacity:1}}
.hrad-plan path{fill:rgba(255,255,255,.42)!important;stroke:rgba(255,255,255,.85)!important;stroke-width:.7!important;stroke-dasharray:2.5 2;}
.hrad-dalsi path{fill:rgba(255,255,255,.35)!important;stroke:#fff!important;stroke-width:1.2!important;stroke-dasharray:3 2.2;animation:obrysPulz 1.6s ease-in-out infinite;}
@keyframes obrysPulz{0%,100%{opacity:.45}50%{opacity:1}}
#hradSvg.hotovy{animation:hradSlavi 2.6s ease-in-out infinite;}
@keyframes hradSlavi{0%,100%{filter:drop-shadow(0 10px 14px rgba(60,90,40,.25))}50%{filter:drop-shadow(0 0 22px rgba(255,214,90,.9))}}
.hry-karty{--k:clamp(96px,min(15vw,22vh),168px);flex:0 0 auto;display:grid;grid-template-columns:repeat(2,var(--k));gap:clamp(10px,1.6vw,18px);}
.karta-hry{position:relative;width:var(--k);height:var(--k);border-radius:clamp(20px,3vw,30px);background:var(--b);padding:9px 9px 11px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 7px 0 rgba(43,58,85,.12),0 12px 22px var(--stin);transition:transform .15s var(--pruzina);}
.karta-hry:active{transform:translateY(5px) scale(.97);}
.karta-obr{position:relative;flex:1 1 0;min-height:0;width:100%;align-self:stretch;}   /* tlačítka mají z app.css centrování, bez šířky byla karta prázdná */
.karta-obr>img,.karta-obr>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(43,58,85,.15));}
.karta-tecky{display:flex;gap:4px;justify-content:center;}
.karta-tecky i{width:clamp(8px,1.1vw,11px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 2px rgba(43,58,85,.1);}
.karta-tecky i.ma{background:#FFC93C;box-shadow:inset 0 0 0 2px #E8A800;}
@media (max-aspect-ratio:1/1){
  .hrad-in{flex-direction:column;padding:calc(max(12px,env(safe-area-inset-top)) + 76px) 12px calc(var(--liska-v) + 12px);}
  .hrad-obal{width:100%;align-self:stretch;}   /* kontejner se měří sám sebou: ve sloupci by měl šířku 0 */
  .hry-karty{--k:min(28vw,15vh,150px);grid-template-columns:repeat(3,var(--k));}
}

/* ══ VÝBĚR ÚROVNĚ A VÝSLEDEK ══ */
.vrstva{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(43,58,85,.35);backdrop-filter:blur(3px);animation:fadein .2s;}
@keyframes fadein{from{opacity:0}}
.urovne-in{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px 26px 34px;background:var(--papir);border-radius:36px;box-shadow:0 30px 70px rgba(43,58,85,.3);max-width:min(94vw,760px);}
.urovne-hlava{width:clamp(84px,14vh,130px);aspect-ratio:1;border-radius:28px;background:var(--b);padding:10px;}
.urovne-hlava img,.urovne-hlava svg{width:100%;height:100%;object-fit:contain;}
.urovne-rada{display:grid;grid-template-columns:repeat(6,auto);gap:clamp(12px,2vw,20px);}
@media (max-width:620px){.urovne-rada{grid-template-columns:repeat(3,auto);row-gap:28px;}}
.uroven{position:relative;width:clamp(62px,9vw,92px);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 0 #D9E3EE,0 10px 18px var(--stin);}
.uroven b{font:800 clamp(26px,3.4vw,38px)/1 var(--titul);color:#4D7CFE;}
.uroven-hv{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);display:flex;}
.uroven-hv i{width:clamp(16px,2.2vw,22px);opacity:.25;}
.uroven-hv i.ma{opacity:1;}
.uroven-hv svg{width:100%;display:block;}
.uroven.zamceno{opacity:.6;}
.uroven.zamceno b{color:var(--sedy);}
.uroven-zamek{position:absolute;right:-4px;top:-4px;width:26px;}
.vysledek-karta{display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 36px;background:var(--papir);border-radius:40px;box-shadow:0 30px 70px rgba(43,58,85,.35);}
.vys-hvezdy{display:flex;gap:10px;}
.vys-hvezdy i{width:clamp(56px,10vh,88px);opacity:.22;}
.vys-hvezdy i svg{width:100%;display:block;}
.vys-hvezdy i.ma{animation:hvezdaVys .55s var(--pruzina) both;opacity:1;}
@keyframes hvezdaVys{from{opacity:0;transform:scale(.2) rotate(-50deg)}to{opacity:1;transform:none}}
.vys-dil{width:clamp(64px,11vh,100px);aspect-ratio:1;animation:dilDoHradu 1.6s var(--pruzina) .8s both;}
.vys-dil svg{width:100%;height:100%;overflow:visible;}
@keyframes dilDoHradu{0%{transform:scale(0) rotate(-90deg);opacity:0}40%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
.vys-tl{display:flex;gap:14px;}

/* ══ 1. PAPU ══ */
#papu{background:#CDEFE7 var(--bg-papu) center bottom/cover no-repeat;}
.papu-plocha{align-items:stretch;}
.papu-pas-obal{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;padding-bottom:3vh;}
.papu-pas{--v:clamp(76px,min(13vw,20vh),150px);position:relative;width:100%;height:calc(var(--v) * .5);border-radius:999px;
  background:repeating-linear-gradient(90deg,#8E9AAF 0 22px,#A9B4C8 22px 44px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),0 10px 0 #6F7A8F,0 16px 26px var(--stin);animation:pas 1.7s linear infinite;}
@keyframes pas{to{background-position:44px 0}}
.dobrota{position:absolute;bottom:55%;width:var(--v);height:var(--v);margin-left:calc(var(--v) / -2);padding:0;background:none;filter:drop-shadow(0 6px 5px rgba(43,58,85,.25));animation:vyskoc .45s var(--pruzina) both;touch-action:none;}
.dobrota .bonbon,.dobrota-leti .bonbon{width:100%;height:100%;display:block;}
.dobrota.spadne{animation:spadne .5s ease-in forwards;pointer-events:none;}
@keyframes spadne{to{transform:translateY(160%) rotate(40deg);opacity:0}}
.dobrota-leti{position:fixed;z-index:60;pointer-events:none;}
.papu-vpravo{flex:0 0 auto;width:clamp(170px,30vw,420px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;}
.papu-postava{width:100%;}
.papu-postava img{width:100%;display:block;filter:drop-shadow(0 12px 14px rgba(43,58,85,.22));}
.papu-postava.mluvi img{animation:mluvi .38s ease-in-out infinite alternate;}
.papu-talir{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:7px 12px;background:rgba(255,255,255,.88);border-radius:999px;box-shadow:0 5px 0 rgba(43,58,85,.1);}
.papu-talir i{width:clamp(26px,3.2vw,42px);aspect-ratio:1;border-radius:50%;background:#EEF2F7;box-shadow:inset 0 0 0 2px #DCE3EC;display:grid;place-items:center;}
.papu-talir i.ma{background:#fff;animation:vyskoc .4s var(--pruzina);}
.papu-talir i svg{width:92%;height:92%;}
@media (max-aspect-ratio:1/1){
  .papu-plocha{flex-direction:column-reverse;align-items:stretch;}
  .papu-vpravo{width:auto;flex:1 1 0;min-height:0;}
  .papu-postava{flex:1 1 0;min-height:0;display:flex;justify-content:center;}
  .papu-postava img{width:auto;height:100%;max-width:70vw;object-fit:contain;}
  .papu-pas-obal{flex:0 0 auto;padding:calc(var(--v) * 1.1) 0 10px;}
}

/* ══ 2. SKLÁDAČKA STÍNŮ ══ */
#skladacka{background:#FFEFD9 radial-gradient(circle at 20% 15%,#FFF8EE 0 20%,transparent 50%);}
.sk-obal{flex:1 1 0;min-width:0;height:100%;width:100%;container-type:size;display:flex;align-items:center;justify-content:center;}
.sk-svg{width:min(100cqw,172cqh);aspect-ratio:172/100;overflow:visible;touch-action:none;}
@media (max-aspect-ratio:1/1){.sk-svg{width:min(100cqw,59.5cqh);aspect-ratio:100/168;}}
.sk-deska{fill:#fff;stroke:#F0D9B5;stroke-width:1.2;}
.sk-zasobnik{fill:rgba(255,255,255,.5);stroke:#EBCFA3;stroke-width:.8;stroke-dasharray:3 2;}
.sk-stin path{fill:#BAC3D0;}
.sk-stin.pryc{opacity:0;transition:opacity .6s;}
.sk-obrysy path{fill:none;stroke:#fff;stroke-width:.9;stroke-dasharray:2.2 1.6;stroke-linejoin:round;}
.sk-dil{cursor:grab;}
.sk-dil.zapadl{cursor:default;}
.sk-dil path{transform-box:fill-box;transform-origin:center;}
.sk-dil.otoc-mne path{animation:otocMne 1s ease-in-out infinite;}
@keyframes otocMne{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.sk-hotove{transform-box:fill-box;transform-origin:center;}
.ozij-1 .sk-hotove,.ozij-2 .sk-hotove,.ozij-6 .sk-hotove{animation:hopT .8s var(--pruzina) 2;}
.ozij-2 .sk-hotove{animation:kymaci 1.1s ease-in-out 3;transform-origin:center bottom;}
@keyframes kymaci{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
.ozij-3 .sk-hotove{animation:plave 2.6s ease-in-out;}
@keyframes plave{0%,100%{transform:none}25%{transform:translateX(-8%) rotate(-4deg)}50%{transform:translateX(6%) rotate(3deg)}75%{transform:translateX(-4%)}}
.ozij-4 .sk-hotove{animation:raketa 2.4s cubic-bezier(.6,0,.9,.6) .5s forwards;}
@keyframes raketa{0%{transform:none}15%{transform:translateY(2%)}100%{transform:translateY(-150%)}}
.sk-plamen{fill:#FF9F43;opacity:0;transform-box:fill-box;transform-origin:center top;}
.ozij-4 .sk-plamen{opacity:1;animation:plamen .12s ease-in-out infinite alternate;}
@keyframes plamen{from{transform:scaleY(.8)}to{transform:scaleY(1.25)}}
.ozij-5 .sk-hotove{animation:houpe 1.2s ease-in-out 3;}
@keyframes houpe{0%,100%{transform:none}25%{transform:translateY(-3%) rotate(-3deg)}75%{transform:translateY(2%) rotate(3deg)}}

/* ══ 3. CHAMELEON DUHOŠ ══ */
#duhos{background:#E3F4E1 var(--bg-duhos) center/cover no-repeat;}
.duhos-plocha{flex-direction:column;gap:12px;}
.duhos-scena{position:relative;width:min(100%,calc((100vh - 230px) * 16 / 9));aspect-ratio:16/9;flex:0 1 auto;}
@media (max-aspect-ratio:1/1){.duhos-scena{width:min(100%,calc((100vh - var(--liska-v) - 210px) * 100 / 130));aspect-ratio:100/130;}}
.duhos-veci{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.duhos-vec{cursor:pointer;}
.duhos-vec.hotovo{cursor:default;}
.potok{fill:#8ED6F5;stroke:#6EC3EA;stroke-width:.6;}
.misto-kamene{fill:rgba(255,255,255,.35);stroke:#fff;stroke-width:.8;stroke-dasharray:2 1.5;}
.duhos-postava{position:absolute;z-index:3;pointer-events:none;transition:left .55s var(--pruzina),top .55s var(--pruzina),width .3s;}
.duhos-postava svg{width:100%;display:block;overflow:visible;filter:drop-shadow(0 4px 4px rgba(43,58,85,.2));}
.duhos-postava.skryty{visibility:hidden;}
.duhos-postava.mluvi svg{animation:mluvi .38s ease-in-out infinite alternate;}
@property --b{syntax:'<color>';inherits:true;initial-value:#C8E86B;}
.duhos-svg{--b2:var(--b);transition:--b .7s ease;}
@supports (color:color-mix(in srgb,red,blue)){.duhos-svg{--b2:color-mix(in srgb,var(--b) 70%,#1D2433);}}
.duhos-svg .d-telo{fill:var(--b);}
.duhos-svg .d-ocas{fill:none;stroke:var(--b);stroke-width:7;stroke-linecap:round;}
.duhos-svg .d-nohy{fill:none;stroke:var(--b2);stroke-width:5;stroke-linecap:round;}
.duhos-svg .d-hreben{fill:none;stroke:var(--b2);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;}
.duhos-svg .d-skvrna{fill:var(--b2);opacity:.45;}
.duhos-svg .d-oko{stroke:var(--b2);stroke-width:2;}
.straka{position:absolute;z-index:4;width:clamp(70px,16%,170px);pointer-events:none;filter:drop-shadow(0 8px 8px rgba(43,58,85,.2));}
.duhos-paleta{flex:0 0 auto;display:flex;gap:clamp(10px,2vw,18px);flex-wrap:wrap;justify-content:center;min-height:72px;align-items:center;}
.duhos-paleta .kelimek{width:clamp(54px,7vw,74px);}
.duhos-paleta.ceka{opacity:.55;pointer-events:none;}

/* ══ 4. KOUZELNÉ GUMIČKY ══ */
#geodeska{background:#F7E9D2 repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 40px,transparent 40px 80px);}
.geo-obal{flex:1 1 0;min-width:0;height:100%;width:100%;container-type:size;display:flex;align-items:center;justify-content:center;}
.geo-svg{width:min(100cqw,100cqh);aspect-ratio:1;overflow:visible;filter:drop-shadow(0 12px 16px rgba(110,70,30,.25));touch-action:none;}
.geo-deska{fill:#E9C38A;stroke:#C99A5B;stroke-width:1.2;}
.geo-zasah{fill:transparent;cursor:pointer;}
.geo-stin{fill:rgba(90,60,30,.35);}
.geo-hlava{fill:#B07A44;}
.geo-lesk{fill:#fff;opacity:.5;}
.geo-kolicek.na-gumicce .geo-hlava{fill:#7A4A22;}
.geo-kolicek.prvni .geo-hlava{fill:#4CB963;}
.geo-guma{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15));}
.geo-guma.spatne{stroke:#E0623E!important;}
.geo-tvar{fill-opacity:0;pointer-events:none;transition:fill-opacity .35s;transform-box:fill-box;transform-origin:center;}
.geo-tvar.ozil{fill-opacity:.55;animation:hopT .8s var(--pruzina);}
.geo-tvar.spatne{fill:#E0623E!important;fill-opacity:.22;}
.geo-oci{pointer-events:none;}
.geo-oci-in{animation:vyskoc .4s var(--pruzina) both;transform-box:fill-box;transform-origin:center;}
.geo-panel{display:flex;flex-direction:column;gap:14px;}
@media (max-aspect-ratio:1/1){.geo-panel{flex-direction:row;}}

/* ══ 5. LIŠČÍ HOTEL ══ */
#hotel{background:#BFE7FB var(--bg-hotel) center bottom/cover no-repeat;}
.hotel-plocha{flex-direction:row!important;align-items:flex-end;}
.hotel-obal{flex:1 1 0;min-width:0;height:100%;container-type:size;display:flex;align-items:flex-end;justify-content:center;}
.hotel{--okno:min(calc(74cqw / var(--c)),calc(100cqh / (var(--r) * 1.42 + 1.4)),150px);position:relative;display:flex;flex-direction:column;align-items:center;
  width:calc(var(--okno) * var(--c) * 1.22 + 30px);padding:0 14px;background:#FFB8C9;border-radius:10px 10px 4px 4px;box-shadow:inset -10px 0 0 rgba(0,0,0,.05),0 14px 26px rgba(43,58,85,.22);}
.hotel-strecha{position:relative;width:calc(100% + 34px);height:calc(var(--okno) * .62);margin-top:calc(var(--okno) * -.6);background:#E85D75;clip-path:polygon(50% 0,100% 100%,0 100%);}
.hotel-cedule{position:absolute;left:50%;bottom:6%;width:calc(var(--okno) * .42);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#fff center/86% no-repeat;box-shadow:0 0 0 3px #FFD23F;}
.hotel-okna{display:grid;grid-template-columns:repeat(var(--c),var(--okno));gap:calc(var(--okno) * .2);padding:calc(var(--okno) * .22) 0 calc(var(--okno) * .1);}
.okno{position:relative;width:var(--okno);aspect-ratio:1/1.12;padding:0;border-radius:14px 14px 8px 8px;overflow:hidden;background:linear-gradient(#BDE8FA,#DDF4FF);box-shadow:inset 0 0 0 5px #fff,0 4px 0 rgba(150,60,80,.18);}
.zaves{position:absolute;top:0;bottom:12%;width:28%;background:repeating-linear-gradient(90deg,#FFE08A 0 6px,#FFD24D 6px 12px);}
.zaves.l{left:5px;border-radius:0 0 50% 0;}
.zaves.p{right:5px;border-radius:0 0 0 50%;}
.okno.obsazene{background:linear-gradient(#FFF3C9,#FFE6A0);}
.okno.obsazene img{position:absolute;left:10%;bottom:2%;width:80%;}
.okno:active{transform:scale(.96);}
.hotel-prizemi{width:100%;height:calc(var(--okno) * .8);display:flex;justify-content:center;align-items:flex-end;}
.hotel-dvere{width:calc(var(--okno) * .56);height:88%;background:#8A5A3A;border-radius:999px 999px 4px 4px;box-shadow:inset -6px 0 0 rgba(0,0,0,.12);}
.hotel-recepce{flex:0 0 auto;width:clamp(84px,15vw,180px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:1vh;}
.host{width:100%;}
.host img{width:100%;display:block;filter:drop-shadow(0 8px 8px rgba(43,58,85,.2));}
.host-leti{position:fixed;z-index:60;pointer-events:none;}

/* ══ 6. KOUZELNICE ══ */
#kouzla{background:#2E3B6B var(--bg-kouzla) center bottom/cover no-repeat;}
.kouzla-stul-obal{position:relative;flex:1 1 0;min-width:0;height:100%;width:100%;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:1vh;}
.kouzla-klobouk{width:clamp(70px,16cqh,150px);margin-bottom:6px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));}
.kouzla-klobouk.kouzli{animation:klobouk .3s ease-in-out 6 alternate;}
@keyframes klobouk{from{transform:rotate(-10deg)}to{transform:rotate(10deg) translateY(-6%)}}
.kouzla-stul{--v:min(calc(84cqw / var(--sl)),calc((100cqh - 16cqh - 90px) / var(--rady)),150px);display:grid;grid-template-columns:repeat(var(--sl),var(--v));gap:14px;padding:18px 22px;
  background:#A23B5B;border-radius:26px;box-shadow:inset 0 0 0 5px #FFD23F,0 16px 0 #7A2A44,0 22px 30px rgba(0,0,0,.35);transition:opacity .25s;}
.kouzla-stul.mlha{opacity:0;}
.kouz-misto{position:relative;width:var(--v);aspect-ratio:1;padding:6%;border-radius:50%;border:3px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.08);}
.kouz-vec{display:block;width:100%;height:100%;}
.kouz-vec .bonbon{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 4px rgba(0,0,0,.3));}
.kouz-misto.nalezeno{border-color:#7BE08A;box-shadow:0 0 0 4px #4CB963,0 0 22px #7BE08A;}
.kouz-misto.ukaz{animation:pulz .7s ease-in-out 3;border-color:#FFD23F;box-shadow:0 0 0 4px #FFD23F;}
.kouzla-dym{position:absolute;left:0;right:0;bottom:0;height:80%;pointer-events:none;z-index:5;}
.kouzla-dym i{position:absolute;width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#E7DDFB 55%,rgba(231,221,251,0) 70%);opacity:0;}
.kouzla-dym i:nth-child(1){left:2%;top:40%}.kouzla-dym i:nth-child(2){left:22%;top:30%}.kouzla-dym i:nth-child(3){left:42%;top:38%}
.kouzla-dym i:nth-child(4){left:62%;top:30%}.kouzla-dym i:nth-child(5){left:12%;top:58%}.kouzla-dym i:nth-child(6){left:34%;top:56%}
.kouzla-dym i:nth-child(7){left:54%;top:58%}.kouzla-dym i:nth-child(8){left:70%;top:52%}.kouzla-dym i:nth-child(9){left:30%;top:16%}
.kouzla-dym.jde i{animation:dym 1.35s ease-out forwards;}
.kouzla-dym.jde i:nth-child(odd){animation-delay:.06s;}
@keyframes dym{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.3)}}