/* Čudesna Šuma v1.11.44 (traka u kutiji .ct) / v1.11.4 – glazba za čitanje + slušanje priče */
.box.citaj{background:#fff;border:2px solid var(--line);border-style:solid;margin:0 0 26px;text-align:center}
.box.citaj .citaj-txt{margin:0 0 14px;font-size:1.02rem;color:var(--ink-soft)}
.citaj-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.citaj-btns .btn{flex:1 1 220px;justify-content:center;max-width:320px}
.citaj-btns .btn[aria-pressed="true"]{background:var(--green-d);box-shadow:0 5px 0 #1f5a3b}
.citaj-btns .btn.alt[aria-pressed="true"]{background:#eaf7ee;color:var(--ink);border-color:#bfe5cb;box-shadow:0 5px 0 #bfe5cb}
.citaj-btns .btn:focus-visible{outline:3px solid #1f5a3b;outline-offset:3px}
.citaj-btns .btn .ic{width:1.05em;height:1.05em;flex:0 0 auto;fill:currentColor}
.citaj-st{min-height:1.4em;margin:10px 0 0;font-size:.92rem;color:var(--ink-soft)}
@media(max-width:420px){.box.citaj{padding:16px 14px}.citaj-btns{gap:10px}.citaj-btns .btn{flex-basis:100%;max-width:none;font-size:1.05rem}}
.story-hero{margin:20px 0 0}
.story-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);background:var(--c,#eee)}
.story-hero + .story-top{margin-top:16px}
/* v1.11.1 – „Poslušaj priču” na cijelom zaslonu: slajdovi + titlovi */
html.pl-lock,html.pl-lock body{overflow:hidden;overscroll-behavior:none}
.pl{position:fixed;inset:0;z-index:1000;width:100%;height:100vh;height:100dvh;background:#0d1526;color:#fff;opacity:0;transition:opacity .45s ease;overscroll-behavior:contain;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.pl.on{opacity:1}.pl:focus{outline:none}.pl.bye{opacity:0;transition-duration:1.1s}
.pl[hidden]{display:none}
.pl:fullscreen{width:100%;height:100%}
.pl-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;cursor:pointer}
.sl{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease-in-out}
.sl.act{opacity:1}
.sl-bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(22px) brightness(.55) saturate(1.15);display:none}
.sl-fr{position:absolute;inset:0;overflow:hidden}
.sl-fg{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.sl.kb .sl-fg{animation:kb0 20s cubic-bezier(.42,0,.58,1) forwards;animation-duration:inherit}
.sl.kb.kb0 .sl-fg{animation-name:kb0}.sl.kb.kb1 .sl-fg{animation-name:kb1}.sl.kb.kb2 .sl-fg{animation-name:kb2}.sl.kb.kb3 .sl-fg{animation-name:kb3}
/* uspravni mobitel: cijela slika (4:3 isječak) gore, ostatak zaslona ispunjava zamućena ista slika */
@media (orientation:portrait),(max-aspect-ratio:1/1){
  .sl-bg{display:block}
  .sl-fr{inset:auto 0 auto 0;top:max(calc(env(safe-area-inset-top) + 60px),calc((100dvh - 240px - 75vw) / 2));height:auto;aspect-ratio:4/3;box-shadow:0 18px 50px rgba(0,0,0,.45)}
}
/* v1.11.4 Ken Burns – vrlo nježno (mirno, za laku noć): neparne slike (1., 3., 5. …) polako se PRIBLIŽAVAJU 1.00→1.06,
   parne se polako UDALJAVAJU 1.06→1.00, kroz cijelo trajanje slike, uz tek malen pomak (≤1 %, unutar ruba povećanja) */
@keyframes kb0{from{transform:scale(1) translate(0,0)}to{transform:scale(1.06) translate(-1%,-.6%)}}
@keyframes kb1{from{transform:scale(1.06) translate(.8%,.5%)}to{transform:scale(1) translate(0,0)}}
@keyframes kb2{from{transform:scale(1) translate(0,0)}to{transform:scale(1.06) translate(1%,-.5%)}}
@keyframes kb3{from{transform:scale(1.06) translate(-.8%,.5%)}to{transform:scale(1) translate(0,0)}}
.sl-mag,.sl-zvj{position:absolute;pointer-events:none}
.sl-mag{inset:-10% -100% -10% 0;width:200%;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(40% 30% at 15% 70%,rgba(255,255,255,.55),transparent 70%),radial-gradient(35% 25% at 45% 85%,rgba(255,255,255,.45),transparent 70%),radial-gradient(30% 22% at 70% 65%,rgba(255,255,255,.5),transparent 70%),radial-gradient(40% 30% at 95% 80%,rgba(255,255,255,.4),transparent 70%);
  animation:mag 70s linear infinite}
.sl-mag.b{opacity:.32;animation-duration:110s;animation-direction:reverse;top:-30%;
  background:radial-gradient(30% 25% at 10% 40%,rgba(255,255,255,.5),transparent 70%),radial-gradient(35% 22% at 40% 55%,rgba(255,255,255,.4),transparent 70%),radial-gradient(30% 25% at 75% 45%,rgba(255,255,255,.45),transparent 70%)}
@keyframes mag{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sl-zvj{inset:0 0 45% 0;opacity:.9;
  background-image:radial-gradient(1.8px 1.8px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 27% 42%,#fff,transparent),radial-gradient(2.2px 2.2px at 44% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 63% 30%,#fff,transparent),radial-gradient(2px 2px at 81% 16%,#fff,transparent),radial-gradient(1.4px 1.4px at 92% 48%,#fff,transparent);
  animation:zvj 3.8s ease-in-out infinite alternate}
.sl-zvj.b{background-image:radial-gradient(1.6px 1.6px at 7% 52%,#fff,transparent),radial-gradient(2px 2px at 35% 26%,#fff,transparent),radial-gradient(1.4px 1.4px at 55% 50%,#fff,transparent),radial-gradient(1.8px 1.8px at 72% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 34%,#fff,transparent);
  animation-duration:5.3s;animation-delay:-2s}
@keyframes zvj{from{opacity:.15}to{opacity:.95}}
.pl.paused .sl-fg,.pl.paused .sl-mag,.pl.paused .sl-zvj{animation-play-state:paused}
.sl-svici{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:1}
.pl.paused .sl-svici{/* crtanje staje u JS-u */}

/* v1.11.2 – donji dio: samo titl; gumbi u kutovima + tanka traka na dnu, pokažu se na dodir i skriju nakon 3 s */
.pl-bot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:72px max(18px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:linear-gradient(to top,rgba(8,12,24,.88) 0%,rgba(8,12,24,.72) 55%,rgba(8,12,24,0) 100%);pointer-events:none}
.pl-sub{position:relative;margin:0 auto;max-width:34ch;min-height:calc(3 * 1.28em);font:700 clamp(1.3rem,5.4vw,2.3rem)/1.28 "Baloo 2",var(--head,system-ui),sans-serif;text-align:center;letter-spacing:.005em;transition:transform .5s ease}
.pl:not(.ui) .pl-sub{transform:translateY(calc(18px + env(safe-area-inset-bottom) * .5))}
.pl-sub span{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;text-shadow:0 2px 3px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.6);text-wrap:balance}
.pl-sub span.on{opacity:1;transform:none}
.pl-sub span.nas{font-size:1.18em;color:#ffe9a8}
.pl-c{z-index:3;transition:opacity .35s ease}
.pl:not(.ui) .pl-c{opacity:0;pointer-events:none}
.pl:not(.ui) .pl-stage{cursor:none}
.pl-pp,.pl-x{position:absolute;top:calc(10px + env(safe-area-inset-top));width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.pl-pp{left:calc(10px + env(safe-area-inset-left))}
.pl-x{right:calc(10px + env(safe-area-inset-right));font:700 19px/1 system-ui,sans-serif}
.pl-pp svg{width:20px;height:20px;fill:currentColor}
.pl-pp:active,.pl-x:active{transform:scale(.94)}
.pl-bar{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:env(safe-area-inset-bottom);height:44px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.pl-bar::before,.pl-bar i{content:"";position:absolute;left:0;right:0;bottom:16px;height:7px;border-radius:4px;background:rgba(255,255,255,.32);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pl-bar i{background:#ffd76a;transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear;box-shadow:none}
.pl-bar b{position:absolute;left:0;bottom:10.5px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#ffd76a;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45);transition:left .25s linear,transform .15s ease;pointer-events:none}
.pl-bar:hover b,.pl.seek .pl-bar b{transform:scale(1.2)}
.pl.seek .pl-bar i,.pl.seek .pl-bar b{transition:none}
.pl button:focus-visible,.pl-bar:focus-visible{outline:3px solid #ffd76a;outline-offset:3px}
@media (orientation:landscape) and (max-height:480px){.pl-bot{padding-top:40px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}.pl-sub{font-size:clamp(1.15rem,5.4vh,1.6rem);max-width:46ch;min-height:calc(2 * 1.28em)}.pl:not(.ui) .pl-sub{transform:translateY(14px)}.pl-pp,.pl-x{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){
  .pl,.sl{transition-duration:.3s}.sl.kb .sl-fg,.sl-mag,.sl-zvj{animation:none!important}.sl-zvj{opacity:.6}.sl-svici{display:none}
  .pl-sub span{transition:opacity .2s;transform:none}
  .pl-sub{transition:none}.pl-c{transition-duration:.15s}
}
/* v1.11.3 – poruka „Okreni mobitel” (iPhone / gdje se zaslon ne može zaključati) */
.pl-rot{position:absolute;z-index:4;left:50%;top:42%;transform:translate(-50%,-50%) scale(.96);max-width:min(86vw,340px);padding:14px 20px;border-radius:18px;background:rgba(8,12,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font:700 1.1rem/1.3 "Baloo 2",var(--head,system-ui),sans-serif;text-align:center;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pl-rot.on{opacity:1;transform:translate(-50%,-50%)}
.pl-rot-ic{display:block;font-size:1.8rem;line-height:1.3;margin-bottom:4px;white-space:nowrap}
.pl-rot-ic i{display:inline-block;font-style:normal;margin-right:.15em}
.pl-rot.on .pl-rot-ic i{animation:rot 1.6s ease-in-out .3s 2}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.pl-rot{transition:opacity .2s}.pl-rot.on .pl-rot-ic i{animation:none}}
/* ilustracije u tekstu */
.reader .ilu{margin:1.2em 0 1.4em}
.reader .ilu img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--c,#eee)}
/* v1.11.4 – titlovi na vrhu (po priči: "titloviGore" u JSON-u). Gumbi pauza/✕ su gore u kutovima:
   dok su vidljivi, titl se spusti ispod njih; kad se skriju, titl se podigne prema rubu. */
.pl.gore .pl-bot{top:0;bottom:auto;padding:calc(14px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 64px max(18px,env(safe-area-inset-left));
  background:linear-gradient(to bottom,rgba(8,12,24,.86) 0%,rgba(8,12,24,.66) 55%,rgba(8,12,24,0) 100%)}
.pl.gore .pl-sub span{top:0;bottom:auto;transform:translateY(-6px)}
.pl.gore .pl-sub span.on{transform:none}
.pl.gore.ui .pl-sub{transform:translateY(54px)}
.pl.gore:not(.ui) .pl-sub{transform:none}
@media (orientation:portrait),(max-aspect-ratio:1/1){
  .pl.gore .sl-fr{top:max(calc(env(safe-area-inset-top) + 190px),calc((100dvh - 75vw) / 2 + 60px))}
}
@media (orientation:landscape) and (max-height:480px){
  .pl.gore .pl-bot{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:44px}
  .pl.gore.ui .pl-sub{transform:translateY(48px)}
}
/* v1.11.4 – ukras "kisa": tanke kapi kiše koje nježno padaju (umjesto zvjezdica i magle) */
.sl-kis{position:absolute;left:-15%;right:-15%;top:-300px;bottom:-40px;pointer-events:none;opacity:.3;will-change:transform;
  background-image:radial-gradient(1.1px 13px at 8% 10%,rgba(225,238,255,.95),transparent),radial-gradient(1px 11px at 27% 55%,rgba(225,238,255,.9),transparent),radial-gradient(1.2px 14px at 46% 22%,rgba(225,238,255,.95),transparent),radial-gradient(1px 10px at 63% 78%,rgba(225,238,255,.85),transparent),radial-gradient(1.1px 12px at 81% 40%,rgba(225,238,255,.9),transparent),radial-gradient(1px 11px at 94% 88%,rgba(225,238,255,.85),transparent);
  background-size:230px 260px;animation:kis 1.15s linear infinite}
.sl-kis.b{opacity:.18;background-size:170px 200px;animation-name:kisb;animation-duration:1.7s;filter:blur(.4px)}
@keyframes kis{from{transform:rotate(9deg) translateY(0)}to{transform:rotate(9deg) translateY(260px)}}
@keyframes kisb{from{transform:rotate(9deg) translateY(0)}to{transform:rotate(9deg) translateY(200px)}}
.pl.paused .sl-kis{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sl-kis{animation:none!important;opacity:.15}.pl.gore .pl-sub{transition:none}.pl.gore .pl-sub span{transform:none}}
/* ilustracije u tekstu: dvije uz isti odlomak – jedna do druge (na uskom zaslonu jedna ispod druge) */
.reader .ilu-par{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.2em 0 1.4em}
.reader .ilu-par .ilu{margin:0}
@media(max-width:520px){.reader .ilu-par{grid-template-columns:1fr;gap:14px}}
/* v1.11.10 – tamni prijelaz iza titlova upola niži (dolje i gore, svi zasloni); čitljivost čuva blaga sjena teksta */
.pl-bot{background:none}
.pl-bot::before{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,24,.82) 0%,rgba(8,12,24,.6) 50%,rgba(8,12,24,0) 100%)}
.pl.gore .pl-bot{background:none}
.pl.gore .pl-bot::before{top:0;bottom:auto;background:linear-gradient(to bottom,rgba(8,12,24,.8) 0%,rgba(8,12,24,.58) 50%,rgba(8,12,24,0) 100%)}
.pl-sub span{text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.7),0 0 20px rgba(0,0,0,.55)}
/* v1.11.27/28 – veći titlovi na računalu/velikim zaslonima (raste s širinom: ~1,5× na 1280 px); mobitel (uspravno i položeno) ostaje isti.
   Najviše 2 retka gdje može (šire polje), tamni prijelaz ostaje iste relativne visine (50 % donjeg/gornjeg pojasa). */
@media (min-width:860px) and (min-height:481px){
  .pl-sub{font-size:clamp(2.3rem,4.3vw,3.6rem);max-width:min(42ch,100%);min-height:calc(2 * 1.28em)}
  .pl-sub span{text-shadow:0 2px 3px rgba(0,0,0,.95),0 3px 10px rgba(0,0,0,.75),0 0 26px rgba(0,0,0,.6)}
}

/* v1.11.44: traka napretka u kutiji (bajke bez slajdova) – 44 px zona dodira, okrugla ručica 18 px */
.ct{margin:12px 0 0}
.ct-bar{position:relative;height:44px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0 9px}
.ct-bar::before,.ct-bar i{content:"";position:absolute;left:0;right:0;top:18.5px;height:7px;border-radius:4px;background:rgba(47,61,54,.16)}
.ct-bar i{background:#e9a91c;transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear}
.ct-bar b{position:absolute;left:0;top:13px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#ffc83d;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35);transition:left .25s linear,transform .15s ease;box-sizing:border-box}
.ct-bar:hover b,.ct.seek .ct-bar b{transform:scale(1.2)}
.ct.seek .ct-bar i,.ct.seek .ct-bar b{transition:none}
.ct-bar:focus-visible{outline:3px solid #1f5a3b;outline-offset:-3px;border-radius:12px}
.ct-tm{display:flex;justify-content:space-between;margin:-2px 0 0;padding:0 2px;font-size:.85rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ct + .citaj-st{margin-top:4px}
html.noc .ct-bar::before{background:rgba(255,255,255,.22)}
html.noc .ct-bar i{background:#ffd76a}
html.noc .ct-bar b{background:#ffd76a;border-color:#fff}
html.noc .ct-bar:focus-visible{outline-color:#ffd76a}