@font-face{font-family:"Fredoka";src:url(fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:block}
:root{
  --ink:#2a2140; --night:#120f33; --gold:#ffd66b; --gold2:#ffb84d; --cream:#fff7e6; --rose:#ff8fa3;
  --spring:cubic-bezier(.34,1.56,.64,1); --soft:cubic-bezier(.65,0,.35,1);
  --Erzähler:#ffd66b; --Louisa:#5b8cff; --Wolle:#3fb8a8; --Mond:#f2b632; --Kasimir:#ff6b57; --Mathilde:#a98bd6; --Alle:#ff8fa3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--cream);
  font-family:"Fredoka","Nunito","Trebuchet MS",system-ui,sans-serif;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;cursor:pointer;border:none;color:inherit;background:none}

/* ---------- backdrop: blurred picture fills any gap ---------- */
#backdrop{position:fixed;inset:0;z-index:0;overflow:hidden}
#backdrop .bd{position:absolute;inset:-12%;background-size:cover;background-position:center;opacity:0;
  filter:blur(38px) saturate(1.35) brightness(.55);transition:opacity 1.4s ease}
#backdrop .bd.on{opacity:1}

/* ---------- living picture (WebGL) ---------- */
#world{position:fixed;inset:0;z-index:1}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 120% 95% at 50% 42%,transparent 55%,rgba(12,9,38,.55)),
             linear-gradient(transparent 62%,rgba(12,9,38,.62))}

/* ---------- caption (narrator) ---------- */
#caption{position:fixed;z-index:4;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));width:min(880px,calc(100vw - 210px));
  translate:-50% 0;padding:16px 30px 12px;border-radius:30px;cursor:pointer;
  background:linear-gradient(160deg,rgba(40,32,104,.62),rgba(18,15,51,.72));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,236,190,.18);box-shadow:0 14px 44px rgba(5,3,20,.5),inset 0 1px 0 rgba(255,255,255,.12);
  transition:opacity .55s var(--soft),transform .7s var(--spring),filter .55s;transform-origin:50% 100%}
#caption.off{opacity:0;transform:translateY(24px) scale(.94);filter:blur(4px);pointer-events:none}
#caption::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,236,190,.16) 50%,transparent 65%) 0 0/250% 100%;animation:sheen 7s linear infinite}
@keyframes sheen{from{background-position:150% 0}to{background-position:-100% 0}}
.ctext{font-size:clamp(18px,1.15vw + 11px,31px);line-height:1.42;font-weight:500;text-align:center;text-wrap:balance;
  text-shadow:0 2px 10px rgba(5,3,20,.55)}
.lines{display:flex;justify-content:center;gap:6px;margin-top:8px;height:7px}
.lines i{width:7px;height:7px;border-radius:4px;background:rgba(255,247,230,.25);transition:all .4s var(--spring)}
.lines i.on{width:22px;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* words: appear one by one, glow while spoken */
.w{display:inline-block;opacity:.36;transition:opacity .35s ease,color .35s ease,transform .45s var(--spring),text-shadow .4s ease}
.ctext.in .w{animation:wordin .6s var(--spring) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes wordin{from{opacity:0;transform:translateY(12px) scale(.8);filter:blur(4px)}}
.w.on{opacity:1}
.w.now{opacity:1;color:#fff3c4;transform:translateY(-2px) scale(1.05);text-shadow:0 0 14px rgba(255,214,107,.95),0 0 2px #fff}
.w.loud{font-weight:700;color:#ffb3a0}
.w.loud.now{color:#ff8a6e;transform:translateY(-4px) scale(1.22) rotate(-3deg);text-shadow:0 0 18px rgba(255,130,100,.9)}
.static .w{opacity:1}

/* ---------- speech bubble (characters) ---------- */
#bubble{position:fixed;z-index:5;left:0;top:0;max-width:min(480px,72vw);padding:22px 24px 14px;border-radius:30px;cursor:pointer;
  background:radial-gradient(circle at 30% 0%,#fff,#fff5df);color:var(--ink);border:3px solid var(--c,var(--gold));
  box-shadow:0 16px 40px rgba(5,3,20,.45),0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent);
  opacity:0;scale:.4;transform-origin:var(--tx,50%) var(--ty,100%);pointer-events:none;
  transition:opacity .35s,scale .6s var(--spring);will-change:transform}
#bubble.on{opacity:1;scale:1;pointer-events:auto}
#bubble::after{content:"";position:absolute;left:calc(var(--tx,50%) - 13px);width:26px;height:26px;background:inherit;
  border:3px solid var(--c);border-top:0;border-left:0;transform:rotate(45deg);bottom:-15px;border-radius:0 0 8px 0;background:#fff6e2}
#bubble.below::after{bottom:auto;top:-15px;transform:rotate(-135deg);background:#fff}
#bubble .ctext{font-weight:600;text-align:left;text-shadow:none;font-size:clamp(18px,1.05vw + 11px,28px)}
#bubble .w.now{color:var(--ink);text-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent)}
#bubble .w.loud{color:#e2412b}
#bubble .w.loud.now{color:#ff3d1f}
#bubble .name{position:absolute;top:-19px;left:18px;display:flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 3px;border-radius:17px;
  background:var(--c);color:#fff;font-weight:700;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,.25);letter-spacing:.02em}
#bubble .ava{width:28px;height:28px;border-radius:50%;background-repeat:no-repeat;border:2px solid #fff;background-color:#fff}
#bubble.on .name{animation:namepop .6s .12s var(--spring) both}
@keyframes namepop{from{transform:scale(0) rotate(-12deg)}}

/* ---------- top bar ---------- */
#top{position:fixed;z-index:6;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 16px 0;pointer-events:none}
#top>*{pointer-events:auto}
#stars{display:flex;gap:2px;padding:6px 10px;border-radius:22px;background:rgba(18,15,51,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#stars button{width:26px;height:26px;padding:0;display:grid;place-items:center}
#stars svg{width:15px;height:15px;fill:rgba(255,247,230,.28);transition:all .5s var(--spring)}
#stars .seen svg{fill:rgba(255,214,107,.7)}
#stars .on svg{width:24px;height:24px;fill:var(--gold);filter:drop-shadow(0 0 6px var(--gold));animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:rotate(18deg) scale(.88)}}
#ptitle{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));translate:-50% 0;padding:8px 22px;border-radius:20px;
  font-weight:600;font-size:clamp(15px,1vw + 9px,21px);letter-spacing:.03em;color:#ffe9a8;white-space:nowrap;
  background:rgba(18,15,51,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 0 12px rgba(255,214,107,.5);
  opacity:0;transform:translateY(-10px) scale(.9);transition:opacity .6s,transform .7s var(--spring);pointer-events:none}
#ptitle.on{opacity:1;transform:none}
#ptitle small{opacity:.65;font-weight:500;margin-right:8px}
#tools{display:flex;gap:8px}
.glass{height:44px;padding:0 16px;border-radius:22px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;
  background:rgba(255,247,230,.13);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,247,230,.16);
  transition:background .3s,transform .4s var(--spring),color .3s}
.glass.round{width:44px;padding:0;justify-content:center;font-size:20px}
.glass:active{transform:scale(.9)}
.glass[aria-pressed=true]{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);border-color:transparent;box-shadow:0 0 18px rgba(255,214,107,.45)}
#voice[aria-pressed=false],#ambient[aria-pressed=false]{opacity:.6}
#auto .i{font-size:12px;letter-spacing:-2px}

/* ---------- moon nav buttons ---------- */
.moonbtn{position:fixed;z-index:6;bottom:calc(28px + env(safe-area-inset-bottom));width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 30%,#fffbe8,#ffe08a 48%,#f0b94a);box-shadow:0 0 0 6px rgba(255,214,107,.15),0 0 30px rgba(255,214,107,.45),0 10px 24px rgba(0,0,0,.35);
  transition:transform .45s var(--spring),opacity .9s var(--soft)}
.moonbtn svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.moonbtn:hover{transform:scale(1.07)}
.moonbtn:active{transform:scale(.88)}
.moonbtn:disabled{opacity:0;pointer-events:none;transform:scale(.5)}
#prev{left:calc(22px + env(safe-area-inset-left));width:58px;height:58px;bottom:calc(35px + env(safe-area-inset-bottom));opacity:.85}
#prev svg{width:28px;height:28px}
#next{right:calc(22px + env(safe-area-inset-right))}
#next.hint{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:none;box-shadow:0 0 0 6px rgba(255,214,107,.15),0 0 30px rgba(255,214,107,.45),0 10px 24px rgba(0,0,0,.35)}
  50%{transform:translateX(5px) scale(1.08);box-shadow:0 0 0 14px rgba(255,214,107,.06),0 0 50px rgba(255,214,107,.8),0 10px 24px rgba(0,0,0,.35)}}

/* ---------- start ---------- */
#start{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;transition:opacity 1.1s var(--soft),transform 1.1s var(--soft)}
#start.away{opacity:0;transform:scale(1.12);pointer-events:none}
.startbg{position:absolute;inset:-4%;background:url(img/00_titel.webp) center/cover;animation:kenburns 26s ease-in-out infinite alternate}
.startbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(18,15,51,.15),rgba(18,15,51,.75) 75%),linear-gradient(transparent 40%,rgba(18,15,51,.8))}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%,1.5%)}}
.startcard{position:relative;text-align:center;align-self:end;padding:0 20px calc(7vh + env(safe-area-inset-bottom))}
#title{margin:0 0 6px;font-size:clamp(30px,5.4vmin + 6px,74px);font-weight:700;line-height:1.08;color:#fff3c4;
  text-shadow:0 3px 0 #c98a2a,0 6px 22px rgba(255,190,90,.65),0 0 60px rgba(255,214,107,.4)}
#title .wd{display:inline-block;white-space:nowrap;margin:0 .14em}
#title .ch{display:inline-block;animation:letterin .9s var(--spring) both,bob 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * 45ms),calc(var(--i) * 90ms + 1s)}
@keyframes letterin{from{opacity:0;transform:translateY(-60px) scale(.3) rotate(-20deg)}}
@keyframes bob{50%{transform:translateY(-6px)}}
.sub{margin:0 0 26px;font-size:clamp(16px,1.2vw + 10px,24px);opacity:.9;animation:fadeup 1s 1.1s both}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}
#go{position:relative;overflow:hidden;height:72px;padding:0 44px;border-radius:36px;font-size:clamp(20px,1vw + 14px,27px);font-weight:700;color:var(--ink);
  background:linear-gradient(135deg,#fff1b8,var(--gold) 45%,var(--gold2));box-shadow:0 0 0 8px rgba(255,214,107,.18),0 0 50px rgba(255,214,107,.55),0 12px 26px rgba(0,0,0,.35);
  animation:fadeup 1s 1.4s both,breathe 2.6s 2.4s ease-in-out infinite;transition:transform .4s var(--spring)}
#go::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);animation:shine 3.2s 2s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
@keyframes breathe{50%{transform:scale(1.05)}}
#go:active{transform:scale(.92)}
#go2{display:block;margin:14px auto 0;padding:10px 22px;border-radius:24px;font-size:clamp(15px,.6vw + 12px,19px);font-weight:500;color:#fff3c4;
  background:rgba(18,15,51,.42);border:1px solid rgba(255,236,190,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fadeup 1s 1.6s both;transition:transform .4s var(--spring),background .3s}
#go2:hover{background:rgba(18,15,51,.6)}
#go2:active{transform:scale(.94)}
.hint{margin:16px 0 0;font-size:14px;opacity:.65;animation:fadeup 1s 1.8s both}

/* ---------- small screens ---------- */
@media (max-width:560px){
  #stars{padding:4px 6px}
  #stars button{width:22px;height:24px}
  #stars svg{width:12px;height:12px}
  #stars .on svg{width:20px;height:20px}
}
@media (max-width:760px){
  #auto .t{display:none}
  #auto{width:44px;padding:0;justify-content:center}
  #ptitle{top:calc(58px + env(safe-area-inset-top))}
}
@media (orientation:portrait){
  #top{flex-direction:column;align-items:center;gap:8px}
  #ptitle{top:calc(112px + env(safe-area-inset-top))}
  #caption{width:calc(100vw - 24px);bottom:calc(112px + env(safe-area-inset-bottom));padding:14px 20px 10px}
  .moonbtn{bottom:calc(24px + env(safe-area-inset-bottom))}
  #prev{bottom:calc(31px + env(safe-area-inset-bottom))}
  #bubble{max-width:calc(100vw - 24px)}
}
@media (orientation:landscape) and (max-height:520px){
  #caption{width:calc(100vw - 170px);padding:8px 18px 6px;bottom:10px;border-radius:22px}
  .ctext{font-size:17px;line-height:1.3}
  .lines{margin-top:4px}
  .moonbtn{width:56px;height:56px;bottom:12px}
  #prev{width:46px;height:46px;bottom:17px}
  #ptitle{display:none}
  #bubble{padding:16px 18px 10px;max-width:min(340px,42vw)}
  #bubble .ctext{font-size:17px}
}
/* ---------- phones: landscape only ---------- */
#rotate{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;
  background:radial-gradient(ellipse at 50% 35%,#2b2470,var(--night) 70%)}
#rotate .phone{position:relative;width:86px;height:150px;margin-bottom:34px;border-radius:20px;border:5px solid var(--gold);overflow:hidden;
  background:linear-gradient(#1d1850,#2b2470);box-shadow:0 0 40px rgba(255,214,107,.45);animation:turn 2.8s var(--soft) infinite}
#rotate .moon{position:absolute;left:50%;top:22%;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fffbe8,#ffe08a 55%,#f0b94a);box-shadow:0 0 18px rgba(255,214,107,.8)}
#rotate .wave{position:absolute;left:-20%;right:-20%;bottom:0;height:34%;border-radius:50% 50% 0 0;background:#3a7bd5;opacity:.85}
#rotate .big{margin:0;font-size:28px;font-weight:700;color:#fff3c4;text-shadow:0 0 18px rgba(255,214,107,.6)}
#rotate .small{margin:0;font-size:17px;opacity:.75}
@keyframes turn{0%,15%{transform:rotate(0)}45%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (orientation:portrait) and (max-width:700px){
  #rotate{display:flex}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
#bubble.below{padding:16px 24px 24px}
#bubble.below .name{top:auto;bottom:-19px}
#bubble.side-l::after,#bubble.side-r::after{bottom:auto;top:calc(var(--ty) - 13px)}
#bubble.side-l::after{left:auto;right:-15px;transform:rotate(-45deg)}
#bubble.side-r::after{left:-15px;transform:rotate(135deg)}

/* ---------- calm: while the book plays, the controls step back; tap or hover brings them back ---------- */
#stars,#tools{transition:opacity .9s var(--soft)}
#prev:disabled,#next:disabled{opacity:0}
body.calm #stars,body.calm #tools,body.calm #prev:not(:disabled),body.calm #next:not(:disabled){opacity:.06}
body.calm #stars:hover,body.calm #tools:hover,body.calm #prev:hover,body.calm #next:hover{opacity:1}
body.calm #next.hint{animation:none}
/* ---------- good night: the light goes out ---------- */
#backdrop{transition:opacity 1.5s ease}
body.night #backdrop{opacity:0;transition:opacity 6.5s 4.5s ease}
body.night #ptitle{opacity:0}