/* Liškola — hlavní strana. Světlá jako logo (krémový podklad), nahoře lišta, pod logem věk a hry, níž část pro rodiče.
   Společné věci (tlačítka-hračky, animace) jsou v app.css. */
:root{--krem:#FEFDF9;--krem-2:#FFF6E6;--obrys:#EEE6D8;}
html,body{height:auto;min-height:100%;}
body{background:var(--krem);overflow-x:hidden;overflow-y:auto;}
/* jemné barevné skvrny jako v logu (obláček, slunce, tráva), pod vším a bez pohybu */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(38vmax 30vmax at 12% 8%,rgba(158,221,245,.32),transparent 70%),
    radial-gradient(30vmax 26vmax at 92% 14%,rgba(255,212,92,.22),transparent 70%),
    radial-gradient(40vmax 30vmax at 85% 95%,rgba(155,222,126,.20),transparent 70%),
    radial-gradient(34vmax 28vmax at 6% 92%,rgba(255,138,101,.14),transparent 70%);}
.liska{display:none;}   /* liška je v logu; postava vlevo dole na rolovací stránce jen zakrývala karty */

/* ── horní lišta ── */
.horni{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  background:rgba(254,253,249,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .2s;}
.logo-v-liste .horni{box-shadow:0 1px 0 var(--obrys),0 6px 18px rgba(43,58,85,.06);}
.horni-logo{height:46px;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none;}
.horni-logo img{height:100%;width:auto;}
.logo-v-liste .horni-logo{opacity:1;transform:none;pointer-events:auto;}
.horni-akce{margin-left:auto;display:flex;align-items:center;gap:8px;}
.horni-tl,.cip-dite{display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 16px;border-radius:999px;background:#fff;
  font:800 16px/1 var(--titul);color:var(--inkoust);box-shadow:0 0 0 1.5px var(--obrys),0 3px 0 var(--obrys);transition:transform .12s;}
.horni-tl:active,.cip-dite:active{transform:translateY(2px);}
a.horni-tl{text-decoration:none;}
.horni-tl.prihlasen{background:#EAF7E4;}   /* přihlášený účtem Nunoi */
.horni-tl svg{width:20px;height:20px;}
.horni-tl.ikona{width:46px;padding:0;justify-content:center;}
.cip-dite{padding:0 12px 0 4px;}
.cip-dite img{width:38px;height:38px;border-radius:50%;object-fit:contain;background:var(--krem-2);}
.cip-dite svg{width:16px;height:16px;opacity:.6;}
.menu-obal{position:relative;}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:grid;padding:8px;border-radius:18px;background:#fff;
  box-shadow:0 0 0 1.5px var(--obrys),0 16px 40px rgba(43,58,85,.16);animation:fadein .15s;}
.menu button,.menu a{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:12px;font:700 16px/1 var(--titul);color:var(--inkoust);text-decoration:none;text-align:left;}
.menu button:hover,.menu a:hover{background:var(--krem-2);}
.menu svg{width:20px;height:20px;flex:none;}
.menu hr{border:0;border-top:1.5px solid var(--obrys);margin:6px 4px;}
@keyframes fadein{from{opacity:0}}
@media (max-width:640px){.horni-tl:not(.ikona) span,.cip-dite span{display:none;}.horni-tl{width:46px;padding:0;justify-content:center;}.cip-dite{padding:0 8px 0 4px;}.horni-logo{height:38px;}}

/* ── logo a hry (dětská část nahoře, na tabletu se vejde na první obrazovku) ── */
.domov{position:relative;z-index:1;width:min(100%,1240px);margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
.hero{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-6px;}
.hero-logo{width:min(80vw,560px,calc(34vh * 1.36));height:auto;filter:drop-shadow(0 10px 22px rgba(43,58,85,.10));}
.hero-text{font:800 clamp(17px,2.4vw,22px)/1.2 var(--titul);color:var(--sedy);}
.hry-sekce{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vh,22px);margin-top:clamp(12px,2.4vh,22px);}
.vek{display:flex;gap:8px;padding:6px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--obrys);}
.vek button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px clamp(12px,2.4vw,22px);border-radius:999px;transition:background .2s,color .2s;}
.vek b{font:800 clamp(17px,2.2vw,21px)/1 var(--titul);}
.vek small{font:700 12px/1 var(--titul);color:var(--sedy);}
.vek button.on{background:var(--v);color:#fff;box-shadow:0 4px 0 rgba(43,58,85,.15);}
.vek button.on small{color:rgba(255,255,255,.9);}
.hry{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2vw,22px);width:100%;}
.hra{position:relative;width:clamp(96px,14vw,176px);display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:clamp(8px,1.2vw,12px) clamp(8px,1.1vw,11px) clamp(12px,1.6vw,16px);border-radius:clamp(20px,2.6vw,30px);background:#fff;
  box-shadow:0 0 0 1.5px var(--obrys),0 8px 0 var(--stin-hry),0 16px 26px rgba(43,58,85,.12);transition:transform .15s var(--pruzina),box-shadow .15s;text-decoration:none;color:inherit;}
.hra:active{transform:translateY(7px) scale(.98);box-shadow:0 0 0 1.5px var(--obrys),0 1px 0 var(--stin-hry),0 6px 12px rgba(43,58,85,.12);}
.hra-obr{width:100%;aspect-ratio:1;border-radius:clamp(14px,2vw,22px);background:var(--barva-hry);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hra-obr img{width:86%;height:86%;object-fit:contain;transition:transform .3s var(--pruzina);}
.hra:hover .hra-obr img{transform:scale(1.06) rotate(-2deg);}
.hra b{font:800 clamp(14px,1.7vw,20px)/1.1 var(--titul);text-align:center;min-height:2.2em;display:flex;align-items:center;}
.hra.zamceno{cursor:default;}
.hra.zamceno .hra-obr{filter:saturate(.35) brightness(1.08);}
.hra.zamceno b{color:var(--sedy);}
.brzy{position:absolute;top:10px;right:-6px;background:var(--slunce);border-radius:12px;padding:5px 12px;font:800 15px/1 var(--titul);transform:rotate(6deg);box-shadow:0 4px 0 var(--slunce-tmave);}
.stitek-predplatne{position:absolute;top:8px;right:-8px;display:inline-flex;align-items:center;gap:4px;padding:5px 10px 5px 8px;border-radius:12px;background:#FFC12E;color:#6B4A00;
  font:800 14px/1 var(--titul);transform:rotate(6deg);box-shadow:0 4px 0 #E09A00;}
.stitek-predplatne svg{width:16px;height:16px;}
.stitek-predplatne i{font-style:normal;}
.stitek-predplatne.odemceno{padding:5px;right:-6px;}
/* jen s předplatným: obrázek přitlumený a zámek uprostřed, dlaždice se dál dá ťuknout (ukáže okénko pro rodiče) */
.hra.jen-predplatne .hra-obr{position:relative;}
.hra.jen-predplatne .hra-obr img{filter:saturate(.45) brightness(1.06);opacity:.8;}
.hra.jen-predplatne .hra-obr::after{content:"";position:absolute;width:38%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.92) center/52% no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3A55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  box-shadow:0 4px 12px rgba(43,58,85,.2);}
@media (max-width:640px){.stitek-predplatne i{display:none;}.stitek-predplatne{padding:5px;}}
.hra.dalsi{background:transparent;box-shadow:none;cursor:default;}
.hra.dalsi .hra-obr{background:transparent;border:3px dashed #E2D6C2;color:#D3C3A8;}
.hra.dalsi .hra-obr svg{width:38%;height:38%;}
.hra.dalsi b{color:#B9A98E;}

/* ── pro rodiče: klidnější karty pod hrami ── */
.rodice-sekce{margin-top:clamp(36px,6vh,64px);}
.rodice-sekce h2{font:800 clamp(24px,3vw,32px)/1.1 var(--titul);text-align:center;margin-bottom:16px;}
.karty-rodice{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
@media (max-width:1000px){.karty-rodice{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.karty-rodice{grid-template-columns:1fr;}}
.karta-rodice{position:relative;display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:24px;background:#fff;text-align:left;
  box-shadow:0 0 0 1.5px var(--obrys),0 4px 0 var(--obrys);transition:transform .12s;}
.karta-rodice:active{transform:translateY(3px);}
.kr-ikona{flex:none;width:52px;height:52px;border-radius:16px;background:var(--k);color:#fff;display:grid;place-items:center;}
.kr-ikona svg{width:28px;height:28px;}
.kr-text{display:grid;gap:4px;}
.kr-text b{font:800 19px/1.15 var(--titul);}
.kr-text small{font:600 14.5px/1.35 var(--titul);color:var(--sedy);}
.pripravujeme{position:absolute;top:-9px;right:14px;padding:4px 10px;border-radius:99px;background:var(--krem-2);box-shadow:0 0 0 1.5px var(--obrys);font:800 12px/1 var(--titul);color:#B08A4E;}

.paticka{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-top:40px;padding:18px 0 8px;border-top:1.5px solid var(--obrys);
  font:700 14px/1.2 var(--titul);color:var(--sedy);}
.paticka img{height:34px;width:auto;}
.paticka-odkazy{display:flex;flex-wrap:wrap;gap:14px;}
.paticka-odkazy button,.paticka-odkazy a{font:700 14px/1.2 var(--titul);color:var(--sedy);text-decoration:underline;text-underline-offset:3px;}

/* ── okna: připravované věci, brána a panel pro rodiče ── */
.panel{position:fixed;inset:0;z-index:70;background:rgba(43,58,85,.40);display:flex;align-items:center;justify-content:center;padding:18px;animation:fadein .15s;}
.panel-in{background:var(--papir);border-radius:32px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:26px 24px;display:grid;gap:14px;font:500 17px/1.5 system-ui,sans-serif;-webkit-user-select:text;user-select:text;}
.panel-in h2{font:800 30px/1.1 var(--titul);}
.panel-in h3{font:800 20px/1.2 var(--titul);margin-top:6px;}
.panel-in ul{padding-left:20px;display:grid;gap:6px;}
.panel-tl{display:flex;flex-wrap:wrap;gap:10px;}
.panel-tl .hracka{min-height:52px;font-size:19px;padding:0 20px;}
.list-in{max-width:440px;text-align:center;justify-items:center;}
.list-in p{color:var(--sedy);}
.list-ikona{width:72px;height:72px;border-radius:22px;background:var(--krem-2);color:var(--korala);display:grid;place-items:center;}
.list-ikona svg{width:40px;height:40px;}
.avatary{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;}
.avatary img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:50%;background:var(--krem-2);padding:4px;opacity:.85;}
.brana-in{max-width:420px;text-align:center;justify-items:center;}
.brana-in p{font:700 24px/1.3 var(--titul);}
.brana-in .panel-tl{justify-content:center;}
.brana-in .panel-tl .hracka{min-width:84px;font-size:28px;}

/* ── úvod: animace loga na krémovém plátně (stejná barva jako podklad videa), běží hned, ťuknutí přidá znělku nebo přeskočí ── */
.uvod{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#FDFCF8;transition:opacity .55s;cursor:pointer;}
.uvod.pryc{opacity:0;pointer-events:none;}
.uvod-box{position:relative;width:min(100vw,100vh,1080px);aspect-ratio:1;flex:none;}
/* podklad videa se během animace posune o jednu až dvě úrovně barvy a prohlížeče ho dekódují každý trochu jinak; okraje proto
   přecházejí do plátna, aby nebyl vidět čtverec (logo leží mezi 7 a 94 % šířky, prolnutí ho nezasáhne) */
.uvod-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4.5%,#000 95.5%,transparent),linear-gradient(transparent,#000 4.5%,#000 95.5%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4.5%,#000 95.5%,transparent),linear-gradient(transparent,#000 4.5%,#000 95.5%,transparent);mask-composite:intersect;}