/* Čudesna Šuma v1.11.30 – izgled stranice priče (sve vrste priča): zaglavlje „Šumski okvir” (.sb-head) · kratka napomena · A−/A+ uz tekst (.fs-bar)
   · tekst cik-cak (.reader.zz: slika + odlomak naizmjence, mobitel jedno ispod drugog) · „Prelistaj slikovnicu” (.kn, js/slikovnica.js) */
.story{max-width:1080px}
.story>*:not(.sb-head):not(.read-area){max-width:720px;margin-inline:auto}
.read-area>.reader:not(.zz){max-width:720px;margin-inline:auto}
.sb-head{margin:20px auto 22px;max-width:820px}
.sb-head .story-hero{margin:0}
.sb-title{text-align:center}
.sb-title h1{margin:0;text-wrap:balance}
.sb-title .src{font-size:.9rem;color:var(--ink-soft);margin:4px 0 0}
.sb-orn{display:block;width:170px;height:auto;margin:0 auto 2px;overflow:visible}
.sb-orn .ln{fill:none;stroke:var(--cd,var(--green));stroke-width:2;stroke-linecap:round;opacity:.45}
.sb-orn .lf{fill:var(--green)}.sb-orn .st{fill:#f2b84b}
.sb-med{width:120px;height:120px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:4rem;background:var(--c);box-shadow:inset 0 0 0 6px #fff,0 6px 18px rgba(47,61,54,.12)}
html.noc .sb-orn .lf{fill:#5f9d7a}html.noc .sb-orn .st{fill:#ffd76a}html.noc .sb-orn .ln{stroke:var(--cl,#9fe2bd)}
html.noc .sb-med{box-shadow:inset 0 0 0 6px #26305a}
/* napomena: jedan mali redak; gumbi ostaju istaknuti */
.box.citaj{max-width:760px!important;padding:14px 16px 12px}
.box.citaj .citaj-txt{margin:0 0 10px;font-size:.92rem}
.citaj-btns .btn{flex:1 1 190px;max-width:300px;padding-inline:16px}
.citaj-btns .btn.knj{--bc:var(--butter)}
.citaj-st:empty{min-height:0;margin:0}
@media(max-width:520px){
  .box.citaj{padding:12px 12px 10px}
  .citaj-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .citaj-btns .btn{max-width:none;font-size:.95rem;padding:10px 8px;min-height:50px;white-space:nowrap;gap:6px}
  .citaj-btns .btn.knj{grid-column:1/-1}
}
/* A−/A+ uz tekst */
.read-area .fs-bar{margin:0 0 10px;gap:8px}
.fs-bar .fs-l{font:800 1.15rem var(--head);color:var(--ink-soft);padding:0 4px}
/* tekst: cik-cak slika + odlomak (tablet/računalo), mobitel: jedno ispod drugog */
.reader.zz p:first-of-type::first-letter,html.noc .reader.zz p:first-of-type::first-letter{float:none;font:inherit;margin:0;color:inherit}
.reader.zz p.prvi::first-letter{font:600 2.6em/0.9 var(--head);float:left;margin:4px 8px 0 0;color:var(--cd,var(--green))}
html.noc .reader.zz p.prvi::first-letter{font:600 2.6em/0.9 var(--head);float:left;margin:4px 8px 0 0;color:var(--cl,#9fe2bd)}
.reader.zz .zz-par{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.2em 0 1.4em}
.reader.zz .zz-par .ilu{margin:0}
@media(max-width:759.98px){.reader.zz{max-width:720px;margin-inline:auto}.reader.zz .zz-blk p{margin:0 0 .6em}}
@media(max-width:520px){.reader.zz .zz-par{grid-template-columns:1fr;gap:14px}}
@media(min-width:760px){
  .reader.zz .zz-blk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:center;margin:0 0 clamp(28px,4vw,46px)}
  .reader.zz .zz-blk .ilu{margin:0;grid-row:1}
  .reader.zz .zz-blk p{margin:0;grid-row:1}
  .reader.zz .zz-l .ilu{grid-column:1}.reader.zz .zz-l p{grid-column:2}
  .reader.zz .zz-d .ilu{grid-column:2}.reader.zz .zz-d p{grid-column:1}
  .reader.zz .zz-par{gap:clamp(16px,3vw,32px);margin:0 auto clamp(28px,4vw,46px);max-width:880px}
  .reader.zz .zz-sama{max-width:620px;margin:0 auto clamp(28px,4vw,46px)}
  .reader.zz .zz-sama .ilu{margin:0}
  .reader.zz .zz-txt{max-width:720px;margin:0 auto 1em}
}
/* zaglavlje „Šumski okvir”: slika i naslov u istoj pastelnoj ploči s lišćem i zvjezdicama u kutovima; A−/A+ u traci ispod gornje trake */
.sb-head{position:relative;padding:14px 14px 22px;border-radius:38px;background:var(--c,var(--mint));box-shadow:0 8px 0 color-mix(in srgb,var(--cd,var(--green)) 18%,#fff),0 16px 34px rgba(47,61,54,.10)}
.sb-head::before,.sb-head::after{content:"";position:absolute;width:86px;height:86px;pointer-events:none;background-repeat:no-repeat;background-size:contain;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Cg fill='%234f9d72'%3E%3Cellipse cx='22' cy='30' rx='16' ry='7' transform='rotate(-35 22 30)'/%3E%3Cellipse cx='38' cy='14' rx='14' ry='6' transform='rotate(20 38 14)'/%3E%3Cellipse cx='12' cy='50' rx='12' ry='5' transform='rotate(-70 12 50)'/%3E%3C/g%3E%3Cg fill='%23f2b84b'%3E%3Cpath d='M62 6l3 7 7.5.7-5.7 5 1.7 7.4-6.5-3.9-6.5 3.9 1.7-7.4-5.7-5 7.5-.7z'/%3E%3Ccircle cx='70' cy='36' r='3'/%3E%3Ccircle cx='50' cy='42' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.sb-head::before{left:-12px;top:-14px}
.sb-head::after{right:-12px;bottom:-14px;transform:rotate(180deg)}
.sb-head .story-hero img{border-radius:26px;box-shadow:0 0 0 5px #fff}
.sb-title{padding:16px 10px 0}
.sb-title h1{font:800 clamp(2.1rem,5.4vw,3.5rem)/1.08 var(--head);color:var(--ink);letter-spacing:-.01em;text-shadow:0 3px 0 rgba(255,255,255,.75)}
.sb-title .src{font:700 1.4rem/1.2 "Caveat",var(--head);color:var(--cd,var(--green-d));margin-top:6px}
.sb-orn{width:190px;margin-bottom:6px}
html.noc .sb-head{box-shadow:0 8px 0 #0b1226,0 16px 34px rgba(0,0,0,.3)}
html.noc .sb-head .story-hero img{box-shadow:0 0 0 5px #2a3760}
html.noc .sb-title h1{text-shadow:0 3px 0 rgba(0,0,0,.35)}
html.noc .sb-title .src{color:var(--cl,#9fe2bd)}
@media(max-width:520px){.sb-head{padding:10px 10px 18px;border-radius:30px;margin-inline:-6px}.sb-head::before,.sb-head::after{width:62px;height:62px}}
/* A−/A+: traka zalijepljena ispod gornje trake dok se čita tekst */
.read-area .fs-bar{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:20;justify-content:center;margin:0 -8px 14px;padding:6px 8px;border-radius:0 0 20px 20px;
  background:rgba(255,251,243,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.read-area .fs-bar::before{content:"Veličina slova";font:700 .95rem var(--head);color:var(--ink-soft);margin-right:4px}
.read-area .fs-bar .fs-l{display:none}
.read-area .fs-bar button{min-width:52px;min-height:44px}
html.noc .read-area .fs-bar{background:rgba(22,34,63,.94);border-color:#2a3760}
/* ===== „Prelistaj slikovnicu”: otvorena knjiga preko cijelog zaslona, uvijek položeno ===== */
html.kn-lock,html.kn-lock body{overflow:hidden;overscroll-behavior:none}
.kn{--kfs:1.25;--ks:1;position:fixed;inset:0;z-index:1000;opacity:0;transition:opacity .4s ease;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,#5a3f2b 0%,#3a281b 60%,#24180f 100%)}
.kn.on{opacity:1}.kn[hidden]{display:none}.kn:focus{outline:none}
.kn-st{position:absolute;inset:0;display:grid;place-items:center;padding:calc(64px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
.kn-knj{position:relative;width:min(100%,calc((100dvh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.9));aspect-ratio:1.9/1;max-height:100%;perspective:2600px;
  border-radius:12px}
.kn-base{filter:drop-shadow(0 2px 0 #e6d6b3) drop-shadow(0 2px 0 #d2bd91) drop-shadow(0 2px 0 #bfa877) drop-shadow(0 20px 26px rgba(0,0,0,.55))}
.kn-base,.kn-ov,.kn-meas{position:absolute;inset:0}
.kn-meas{visibility:hidden;pointer-events:none;overflow:hidden}
.kn-ov{pointer-events:none;z-index:3}.kn-ov .kn-tx{pointer-events:auto}
/* polovice: ista slika preko obje strane; stranice se blago savijaju prema hrptu (ovalni rub + sjena pregiba) */
.kn-h{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#f6ecd6}
.kn-h.l{left:0;border-radius:12px 0 0 12px;clip-path:polygon(0 .7%,35% 0,70% .25%,88% .8%,96% 1.5%,100% 2.4%,100% 97.6%,96% 98.5%,88% 99.2%,70% 99.75%,35% 100%,0 99.3%)}
.kn-h.d{left:50%;border-radius:0 12px 12px 0;clip-path:polygon(0 2.4%,4% 1.5%,12% .8%,30% .25%,65% 0,100% .7%,100% 99.3%,65% 100%,30% 99.75%,12% 99.2%,4% 98.5%,0 97.6%)}
.kn-h::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.kn-h.l::after{background:linear-gradient(to left,rgba(50,30,12,.5) 0,rgba(50,30,12,.2) 2.4%,rgba(255,248,230,.16) 5%,rgba(255,248,230,0) 10%,rgba(0,0,0,0) 80%,rgba(50,30,12,.10) 100%),radial-gradient(140% 120% at 100% 50%,rgba(0,0,0,0) 62%,rgba(50,30,12,.10) 100%)}
.kn-h.d::after{background:linear-gradient(to right,rgba(50,30,12,.5) 0,rgba(50,30,12,.2) 2.4%,rgba(255,248,230,.16) 5%,rgba(255,248,230,0) 10%,rgba(0,0,0,0) 80%,rgba(50,30,12,.10) 100%),radial-gradient(140% 120% at 0 50%,rgba(0,0,0,0) 62%,rgba(50,30,12,.10) 100%)}
.kn-sp{position:absolute;top:0;left:0;height:100%;width:100%}
.kn-h .kn-sp{width:200%}.kn-h.d .kn-sp{left:-100%}
.kn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kn-sp.kraj .kn-img{filter:brightness(.8) saturate(.9)}
/* tekst na slici: mekana prozirna podloga u kutu koji ne pokriva likove (kut iz JSON-a priče) */
.kn-tx{position:absolute;max-width:36%;max-height:42%;overflow:hidden;box-sizing:border-box;padding:.75em 1.05em;border-radius:20px;
  background:rgba(255,250,238,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 6px 26px rgba(30,18,6,.28),0 0 0 1px rgba(255,255,255,.5) inset;
  font:600 calc(var(--kfs) * var(--ks) * 1rem)/1.5 var(--body);color:#3b3226;text-align:left}
.kn-tx p{margin:0}
.kn-tx.k-gl{left:2.5%;top:5%}.kn-tx.k-gd{right:2.5%;top:5%}.kn-tx.k-dl{left:2.5%;bottom:5%}.kn-tx.k-dd{right:2.5%;bottom:5%}
.kn-tx.k-ds{left:50%;bottom:4.5%;transform:translateX(-50%);width:max-content;max-width:58%;max-height:40%}
.kn-tx.k-sr{left:56%;width:38%;max-width:38%;max-height:84%;top:50%;transform:translateY(-50%);text-align:center}
.kn-dalje{color:#c8643a;font-weight:800}
.kn-sp.naslov .kn-tx{text-align:center;padding:.6em 1.6em .7em}
.kn-orn{color:#4f9d72;letter-spacing:.4em;font-size:.95em;margin-bottom:2px}
.kn-sp.naslov h2{font:400 calc(var(--ks) * 2.2rem)/1.25 "Pacifico",var(--head);color:#c8643a;margin:0}
.kn-sub{font:700 .78em var(--head);color:#7a6a55;margin:6px 0 0}
.kn-hint{font:600 .7em var(--body);color:#9a8a72;margin:8px 0 0}
.kn-tx.k-sr h2{font:400 calc(var(--ks) * 2.6rem)/1.3 "Pacifico",var(--head);color:#2f7a52;margin:0 0 6px}
.kn-tx.k-sr>p{font-size:.9em}
.kn-akc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.kn-akc .btn{font-size:.8em}
/* list koji se okreće: 3 dijela (savijanje), prednja i stražnja strana, sjene */
.kn-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:4;pointer-events:none}
.kn-leaf.d{left:50%}.kn-leaf.l{left:0}
.kn-seg{position:absolute;top:0;height:100%;width:33.334%;transform-style:preserve-3d}
.kn-leaf.d .kn-seg{left:0;transform-origin:0 50%}.kn-leaf.d .kn-seg .kn-seg{left:100%;width:100%}
.kn-leaf.l .kn-seg{right:0;transform-origin:100% 50%}.kn-leaf.l .kn-seg .kn-seg{right:100%;width:100%}
.kn-f{position:absolute;top:0;bottom:0;left:0;right:-1px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f6ecd6}
.kn-f.bk{transform:rotateY(180deg)}
.kn-f .kn-sp{width:600%}
.kn-sh{position:absolute;inset:0;opacity:0;pointer-events:none}
.kn-leaf.d .fr .kn-sh,.kn-leaf.l .bk .kn-sh{background:linear-gradient(to right,rgba(40,24,8,.25),rgba(40,24,8,.65))}
.kn-leaf.d .bk .kn-sh,.kn-leaf.l .fr .kn-sh{background:linear-gradient(to left,rgba(40,24,8,.25),rgba(40,24,8,.65))}
.kn-cast{position:absolute;top:0;bottom:0;width:50%;opacity:0;pointer-events:none;z-index:3}
.kn-cast.d{left:50%;background:linear-gradient(to right,rgba(20,12,4,.55),rgba(20,12,4,.18) 45%,rgba(20,12,4,0) 85%)}
.kn-cast.l{left:0;background:linear-gradient(to left,rgba(20,12,4,.55),rgba(20,12,4,.18) 45%,rgba(20,12,4,0) 85%)}
.kn-old{z-index:5;pointer-events:none;animation:kn-fade .26s ease forwards}
@keyframes kn-fade{to{opacity:0}}
/* kontrole */
.kn-x,.kn-fs button{position:absolute;z-index:6;border:2px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.kn-x{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));width:48px;height:48px;border-radius:50%;font:700 20px/1 system-ui,sans-serif}
.kn-fs{position:absolute;z-index:6;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));display:flex;gap:8px}
.kn-fs button{position:static;width:48px;height:48px;border-radius:16px;font:800 1rem var(--head)}
.kn-fs .kn-zv{font-size:1.15rem}
/* v1.11.32: diskretne strelice na samoj stranici (vanjski rubovi, okomito u sredini – tekst je u kutovima); dodir lijeve/desne polovice lista */
.kn-str{position:absolute;z-index:5;top:50%;width:calc(var(--ks) * 34px);height:calc(var(--ks) * 64px);margin-top:calc(var(--ks) * -32px);display:grid;place-items:center;pointer-events:none;
  font:400 calc(var(--ks) * 46px)/1 var(--head);color:#fff;opacity:.38;text-shadow:0 1px 6px rgba(0,0,0,.55);transition:opacity .3s}
.kn-str.l{left:.6%}.kn-str.d{right:.6%}
.kn-str[hidden]{display:none}
.kn-knj{cursor:pointer}
@media (hover:hover){.kn-knj:hover .kn-str{opacity:.55}}
/* broj stranice: sitno u donjem vanjskom kutu svake stranice, kao u pravoj knjizi */
.kn-pg{position:absolute;bottom:1.6%;z-index:2;font:600 max(11px,calc(var(--ks) * 13px))/1 var(--body);color:#fff8ea;opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 8px rgba(0,0,0,.4);letter-spacing:.04em;pointer-events:none}
.kn-pg.l{left:2.4%}.kn-pg.d{right:2.4%}
.kn button:focus-visible{outline:3px solid #ffd76a;outline-offset:3px}
/* mobitel položeno: manje margine, gumbi u stupcu */
@media (orientation:landscape) and (max-height:500px){
  .kn-st{padding:calc(4px + env(safe-area-inset-top)) calc(54px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(54px + env(safe-area-inset-left))}
  .kn-knj{width:min(100%,calc((100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.9))}
  .kn-x,.kn-fs button{width:40px;height:40px}.kn-fs{flex-direction:column;gap:6px}
  .kn-x{top:calc(6px + env(safe-area-inset-top));right:calc(6px + env(safe-area-inset-right))}.kn-fs{top:calc(6px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left))}
  .kn-tx{border-radius:14px;padding:.55em .8em}
}
/* uspravni zaslon (ako zaključavanje ne uspije): samo poruka „Okreni mobitel” */
.kn-rot{display:none}
@media (orientation:portrait){
  .kn-st,.kn-fs{visibility:hidden}
  .kn-rot{display:flex;position:absolute;inset:0;z-index:5;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center;color:#fff3dc;font:700 1.35rem/1.35 var(--head)}
  .kn-rot .ic{font-size:3.4rem;line-height:1;display:inline-block;animation:kn-rot 2.4s ease-in-out infinite}
  .kn-rot small{font:600 .98rem/1.4 var(--body);color:#e6d3b3;max-width:22em}
}
@keyframes kn-rot{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.kn-rot .ic{animation:none}.kn{transition:none}}
/* v1.11.35: gumb glazbe 🎵 uz A−/A+ i 🔊 (isključeno = prekriženo) */
.kn-fs .kn-gl{font-size:1.15rem;position:relative}
.kn-fs .kn-gl.off{opacity:.75}
.kn-fs .kn-gl.off::after{content:"";position:absolute;left:22%;right:22%;top:50%;height:2.5px;border-radius:2px;background:#fff;transform:rotate(-40deg);box-shadow:0 0 0 1px rgba(0,0,0,.35)}