/* Layout: a moving picture-book stage. Characters hop to new spots each page;
   the speech bubble flies to whoever speaks. Built for a TV, read from the sofa.
   Everything is sized in vw/vh so the same stage also works inside the small
   "TV" frames on the landing page. */
:root{
  --ink:#2a2230; --paper:#fffdf7; --muted:#7a6f80; --quiz:#8f52c8; --quiz-soft:#f4ecff; --ok:#23885a; --ok-soft:#e3f6ec;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --read:"Andika","Comic Sans MS","Trebuchet MS",sans-serif;
  --sky1:#9fdcff; --sky2:#fff3d9; --grass1:#94d66e; --grass2:#62b047;
  --base:min(42vh,26vw);
  color-scheme:light;
}
html,body{height:100%;margin:0;overflow:hidden}
body{background:#9fdcff;color:var(--ink);font-family:var(--read);
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M6 4 L6 44 L16 34 L24 52 L32 48 L24 31 L38 31 Z' fill='%23ff8a1f' stroke='%232a2230' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto}
button{cursor:inherit}
.book{position:relative;height:100%;overflow:hidden;background:linear-gradient(180deg,var(--sky1),var(--sky2) 72%);transition:background 1.2s}

/* ---------- scenery shared by every world ---------- */
.scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.outdoor{position:absolute;inset:0;transition:opacity .9s}
.sun{position:absolute;top:7vh;right:8vw;width:12vh;height:12vh;border-radius:50%;background:#ffd23f;
  box-shadow:0 0 0 2vh rgba(255,210,63,.25),0 0 0 4vh rgba(255,210,63,.1);transition:opacity 1s,transform 1s}
.cloud{position:absolute;height:6vh;border-radius:6vh;background:#fff;opacity:.9;transition:background 1s,opacity 1s;animation:drift 50s linear infinite}
.cloud::before{content:"";position:absolute;width:50%;height:150%;left:18%;bottom:30%;border-radius:50%;background:inherit}
.c1{width:15vw;top:10vh;left:-20vw}.c2{width:10vw;top:22vh;left:-20vw;animation-duration:65s;animation-delay:-30s}
.c3{width:20vw;top:4vh;left:-22vw;animation-duration:70s;animation-delay:-45s}
@keyframes drift{to{transform:translateX(145vw)}}
.ground{position:absolute;left:-10vw;right:-10vw;bottom:-6vh;height:24vh;border-radius:50% 50% 0 0/40% 40% 0 0;
  background:linear-gradient(var(--grass1),var(--grass2));transition:background 1.2s,filter 1s}

/* ---------- world: garden (day, night, kitchen) ---------- */
.book.night{--sky1:#18204a;--sky2:#41508a;--grass1:#3f7a46;--grass2:#2c5a34}
.book.days .sun{animation:dayarc 2.6s ease-in-out infinite}
@keyframes dayarc{0%{transform:translate(-80vw,40vh);opacity:0}15%{opacity:1}50%{transform:translate(-40vw,0)}85%{opacity:1}100%{transform:translate(0,40vh);opacity:0}}
.moon{position:absolute;top:8vh;right:10vw;width:11vh;height:11vh;border-radius:50%;box-shadow:-2.6vh 1.4vh 0 0 #fff1b8;opacity:0;transition:opacity 1.2s}
.star{position:absolute;color:#fff6c8;opacity:0;transition:opacity 1.2s;font-size:2.4vh;animation:twinkle 2s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.5)}}
.book.night .sun{opacity:0}.book.night .moon,.book.night .star{opacity:1}
.book.night .cloud{opacity:.15}
.burrow{position:absolute;left:-3vw;bottom:12vh;width:30vw}
.flowers{position:absolute;bottom:3vh;left:0;right:0;height:5vh}
.flowers i{position:absolute;width:1.6vh;height:1.6vh;border-radius:50%;box-shadow:0 0 0 .6vh rgba(255,255,255,.7)}
.indoor{position:absolute;inset:0;opacity:0;transition:opacity .9s;background:linear-gradient(#ffe9c9 0 78%,#d39a62 78%)}
.indoor::before{content:"";position:absolute;left:0;right:0;top:76%;height:3%;background:#b97a45}
.window{position:absolute;left:8vw;top:12vh;width:22vw;height:26vh;border:1.4vh solid #fff;border-radius:2vh;background:linear-gradient(#9fdcff,#e6f6ff);box-shadow:0 0 0 .5vh #e7c79a}
.window::before,.window::after{content:"";position:absolute;background:#fff}
.window::before{left:50%;top:0;bottom:0;width:1vh;transform:translateX(-50%)}
.window::after{top:50%;left:0;right:0;height:1vh;transform:translateY(-50%)}
.shelf{position:absolute;right:10vw;top:16vh;width:20vw;height:1.4vh;background:#b97a45;border-radius:1vh}
.jar{position:absolute;bottom:1.4vh;width:3.6vw;height:7vh;border-radius:1vh 1vh .6vh .6vh;background:#ffcf8a;border:.4vh solid #fff}
.book.kitchen .indoor{opacity:1}
.book.kitchen .outdoor{opacity:0}

.prop{position:absolute;pointer-events:none;transition:opacity .6s,left 1.2s}
#bed{bottom:3vh;height:46vh;transform:translateX(-50%);opacity:0;z-index:1}
#bed svg{height:100%;width:auto;overflow:visible}
.leaves{transform-box:view-box;transform-origin:150px 330px;animation:leafsway 3s ease-in-out infinite}
@keyframes leafsway{50%{transform:rotate(3deg)}}
.book[data-bed="pull"] .leaves{animation:tugleaf .6s ease-in-out infinite alternate}
@keyframes tugleaf{from{transform:rotate(14deg)}to{transform:rotate(22deg) translateY(-4px)}}
.sprout{transform-box:fill-box;transform-origin:50% 100%;animation:grow 1.2s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes grow{from{transform:scale(0)}}
#bigcarrot{left:20vw;bottom:5vh;width:30vw;opacity:0;z-index:1}
.book.carrot #bigcarrot{opacity:1;animation:popout 1s cubic-bezier(.3,1.5,.5,1)}
@keyframes popout{0%{transform:translateY(20vh) rotate(-60deg) scale(.4)}60%{transform:translateY(-12vh) rotate(10deg) scale(1.05)}100%{transform:none}}
#table{left:50%;bottom:6vh;width:30vw;transform:translateX(-50%);opacity:0;z-index:1}
#sink{right:2vw;bottom:6vh;width:18vw;opacity:0;z-index:1}
.book.kitchen #table,.book.kitchen #sink{opacity:1}
.cakeonly,.bowlonly{transition:opacity .5s}
.book[data-cake="bowl"] .cakeonly{opacity:0}
.book[data-cake="cake"] .bowlonly{opacity:0}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .3s ease-in-out infinite alternate}
@keyframes flick{to{transform:scale(.8,1.15) rotate(4deg)}}
.bubbles circle{animation:soap 1.6s ease-in infinite}
.bubbles circle:nth-child(2){animation-delay:.5s}.bubbles circle:nth-child(3){animation-delay:1s}
@keyframes soap{from{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}

/* ---------- world: jungle (sunny, cloudy, rainy, rainbow) ---------- */
.book.w-jungle{--sky1:#bfe9ff;--sky2:#fff6d6;--grass1:#7ccf5a;--grass2:#55a83f}
.book.w-jungle.cloudy{--sky1:#9fb3c8;--sky2:#dfe6ec}
.book.w-jungle.rainy{--sky1:#7d8fa6;--sky2:#c3ced8}
.book.w-jungle.golden{--sky1:#ffcf9a;--sky2:#fff0d6}
.w-jungle .sun{animation:spin 30s linear infinite}
@keyframes spin{to{rotate:360deg}}
.rainbow{position:absolute;left:50%;bottom:14vh;width:90vw;height:45vw;transform:translateX(-50%) scale(.6);opacity:0;
  border-radius:45vw 45vw 0 0;transition:opacity 1.4s,transform 1.4s;
  background:radial-gradient(circle at 50% 100%,transparent 52%,#8f52c8 52%,#8f52c8 55%,#4b5fd6 55%,#4b5fd6 58%,#2f9ee8 58%,#2f9ee8 61%,#3fbf5a 61%,#3fbf5a 64%,#ffd23f 64%,#ffd23f 67%,#ff9a2e 67%,#ff9a2e 70%,#ef4a3c 70%,#ef4a3c 73%,transparent 73%)}
.tree{position:absolute;bottom:13vh;height:46vh}
.t1{left:-2vw}.t2{right:-3vw;height:38vh;transform:scaleX(-1)}
.pond{position:absolute;right:3vw;bottom:3vh;width:34vw;height:10vh;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#8fd8ff,#3a9fd8);box-shadow:inset 0 -.8vh 0 rgba(0,0,0,.08)}
.pond::after{content:"";position:absolute;left:20%;top:30%;width:20%;height:12%;border-radius:50%;background:rgba(255,255,255,.6);animation:ripple 3s ease-in-out infinite}
@keyframes ripple{50%{transform:scaleX(1.5);opacity:.3}}
.puddle{position:absolute;left:33vw;bottom:3.5vh;width:26vw;height:6vh;border-radius:50%;background:#6fb6e6;opacity:0;transition:opacity 1s}
.rain{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.drop{position:absolute;top:-10vh;width:.35vw;min-width:2px;height:5vh;border-radius:9px;background:rgba(70,130,200,.55);animation:fall linear infinite}
@keyframes fall{to{transform:translateY(120vh)}}
.book.cloudy .sun,.book.rainy .sun{opacity:0;transform:translateY(-20vh)}
.book.cloudy .cloud,.book.rainy .cloud{background:#8794a3}
.book.rainy .rain{opacity:1}
.book.drizzle .rain{opacity:.35}
.book.rainy .ground,.book.cloudy .ground{filter:saturate(.7) brightness(.9)}
.book.rainy .puddle,.book.splash .puddle{opacity:1}
.book.rainbowed .rainbow{opacity:.85;transform:translateX(-50%) scale(1)}

/* ---------- world: hill (windy, uphill, tree, sunset) with a kite on a string ---------- */
.book.w-hill{--sky1:#d7c8ff;--sky2:#fff1f8;--hill1:#bfa6f2;--hill2:#9a7ee0}
.book.w-hill.sunset{--sky1:#5b2f9a;--sky2:#ffb38a;--hill1:#7c5cc4;--hill2:#5a3f9e}
.w-hill .sun{top:8vh;right:10vw;background:#ffd86b;box-shadow:0 0 0 2vh rgba(255,216,107,.25);transition:top 1.6s,background 1.4s}
.w-hill.sunset .sun{top:52vh;background:#ff8a5c;box-shadow:0 0 0 3vh rgba(255,138,92,.25)}
.w-hill.windy .cloud{animation-duration:22s}
.w-hill.sunset .cloud{background:#ffc4d8;opacity:.6}
.wind{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.wind i{position:absolute;height:.5vh;border-radius:9px;background:rgba(255,255,255,.85);animation:gust 2.4s linear infinite}
@keyframes gust{from{transform:translateX(-30vw);opacity:0}20%{opacity:1}to{transform:translateX(110vw);opacity:0}}
.book.windy .wind{opacity:1}
.hill{position:absolute;left:-15vw;right:-15vw;bottom:-6vh;height:30vh;border-radius:50% 50% 0 0/45% 45% 0 0;background:linear-gradient(var(--hill1),var(--hill2));transition:background 1.4s,height 1.4s}
.book.uphill .hill{height:38vh}
#tree{position:absolute;right:1vw;bottom:5vh;height:72vh;opacity:0;transition:opacity 1s;z-index:1}
.book.tree #tree{opacity:1}
.petal{position:absolute;width:1.2vh;height:1.6vh;border-radius:50% 50% 50% 0;background:#b38cf5;opacity:0;animation:petal 6s linear infinite}
.book.tree .petal{opacity:.9}
@keyframes petal{from{transform:translate(0,0) rotate(0)}to{transform:translate(-14vw,60vh) rotate(540deg)}}
#kite{position:absolute;z-index:2;width:8vw;min-width:24px;transform:translate(-50%,-50%);transition:left 1.6s ease-in-out,top 1.6s ease-in-out,width 1.2s,opacity .6s;opacity:0;pointer-events:none}
#kite svg{display:block;width:100%;height:auto;overflow:visible}
#kite.show{opacity:1}
#kite.flying svg{animation:kitesway 2.6s ease-in-out infinite}
@keyframes kitesway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) translateY(-4%)}}
#kite.stuck svg{transform:rotate(28deg)}
.ktail{transform-box:fill-box;transform-origin:50% 0;animation:ktail 1.2s ease-in-out infinite alternate}
@keyframes ktail{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
#string{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.notrans #kite,.notrans .mound{transition:none}
/* a character standing higher up gets a mound of hill (or a rock) under its feet */
.mound{display:none}
.w-hill .mound{display:block;position:absolute;top:calc(100% - 4vh);left:50%;width:175%;min-width:18vw;transform:translateX(-50%);height:calc(var(--up,0) * 1vh + 11vh);
  background:linear-gradient(var(--hill1),var(--hill2) 80%);border-radius:50% 50% 0 0/70% 70% 0 0;transition:height 1.4s cubic-bezier(.45,0,.3,1),opacity .6s;z-index:-1}
.char[data-up="0"] .mound,.char[data-perch="none"] .mound{opacity:0}
.char[data-perch="rock"] .mound{background:radial-gradient(ellipse at 35% 25%,#e2dbf2,#ada0cf 70%);border-radius:46% 54% 8% 8%/62% 72% 8% 8%;width:125%;min-width:13vw}

/* ---------- characters on the stage ---------- */
.char{position:absolute;bottom:7vh;z-index:3;transform:translateX(-50%);transition:left 1.4s cubic-bezier(.45,0,.3,1),bottom 1.4s cubic-bezier(.45,0,.3,1);display:flex;flex-direction:column;align-items:center}
.notrans .char{transition:none}
.hop{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%}
.char.walking .hop{animation:walkhop .35s ease-in-out infinite}
@keyframes walkhop{50%{transform:translateY(-5vh)}}
.pose{transform-origin:50% 100%;transition:transform .8s cubic-bezier(.4,1.4,.5,1)}
.char svg{height:calc(var(--s) * var(--base));width:auto;filter:drop-shadow(0 .8vh 0 rgba(0,0,0,.12));transition:filter .3s}
.char:hover svg{filter:drop-shadow(0 0 1.4vh #fff) drop-shadow(0 .8vh 0 rgba(0,0,0,.12))}
.nametag{font-family:var(--display);font-weight:800;font-size:clamp(.5rem,2vw,2.4rem);color:#fff;background:var(--c);padding:.05em .8em;border-radius:99px;margin-top:.4vh;line-height:1.3;white-space:nowrap}
.charge{width:60%;height:.9vh;border-radius:9px;background:rgba(255,255,255,.5);margin-top:.6vh;overflow:hidden}
.charge i{display:block;height:100%;width:0;background:#fff}
.char.charging .charge i{width:100%;transition:width .45s linear}
.turn{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;margin-bottom:1vh;
  font-family:var(--display);font-weight:800;font-size:clamp(.55rem,2vw,2.4rem);color:#fff;text-align:center;line-height:1;white-space:nowrap;text-shadow:0 .25vh 0 rgba(42,34,48,.55),0 0 1.2vh rgba(42,34,48,.45)}
.turn b{display:block;font-size:2.2em;line-height:.9}
/* whoever is next always stands in front of the speech bubble, sign and all */
.char.is-next{z-index:8!important}
.char.is-next .turn{opacity:1;animation:bounce .9s ease-in-out infinite}
@keyframes bounce{50%{transform:translate(-50%,1.4vh)}}
.char.is-next svg,.char.right svg{filter:drop-shadow(0 0 1.6vh #fff) drop-shadow(0 0 .6vh #fff)}
.char.nope .hop{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-4%)}40%{transform:translateX(4%)}60%{transform:translateX(-3%)}80%{transform:translateX(3%)}}
/* something to hide behind */
.rockcover{display:none;position:absolute;left:-8%;bottom:4.5vh;width:78%;height:58%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 35% 30%,#b9b4ab,#8a857c);border-radius:55% 45% 20% 20%/70% 70% 25% 25%;box-shadow:inset -1.4vh -1vh 0 rgba(0,0,0,.12)}
.char[data-hide="rock"] .rockcover{display:block;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}

/* ---------- top bar ---------- */
.top{position:absolute;z-index:7;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:1vw;padding:1.6vh 2.4vw 0}
.pagetitle{font-family:var(--display);font-weight:800;font-size:clamp(.6rem,2.6vw,3rem);color:#fff;margin:0;white-space:nowrap;
  text-shadow:0 .25vh 0 rgba(0,0,0,.25),0 0 1.4vh rgba(0,0,0,.15)}
.dots{display:flex;gap:1vw;align-items:center}
.dot{width:1.8vh;height:1.8vh;border-radius:50%;background:rgba(255,255,255,.45);transition:transform .3s,background .3s}
.dot.done{transform:scale(1.3);background:var(--c)}
.qstar{font-size:clamp(.7rem,3vw,3.4rem);line-height:1;color:rgba(255,255,255,.5);transition:color .3s,transform .4s}
.qstar.on{color:#ffc400;transform:scale(1.25) rotate(-10deg);text-shadow:0 .3vh 0 #c49200}
.toolbar{display:flex;gap:.8vw}
.pill{font-family:var(--display);font-weight:600;font-size:clamp(.5rem,1.4vw,1.6rem);background:rgba(255,255,255,.85);color:var(--ink);border:0;border-radius:99px;padding:.4em 1em;font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none}
button.pill,a.pill,.nav button{transition:transform .4s cubic-bezier(.3,1.9,.5,1),background .2s}
button.pill:hover,a.pill:hover{background:#fff;transform:scale(1.08)}
.nav button:hover{transform:scale(1.08)}
button:focus-visible,a:focus-visible{outline:4px solid var(--ink);outline-offset:3px}

/* ---------- the speech bubble that flies to the speaker ---------- */
#bubble{position:absolute;z-index:6;left:22vw;top:10vh;width:min(56vw,1000px);box-sizing:border-box;background:var(--paper);
  border:.7vh solid #fff;border-radius:4vh;padding:2vh 2.6vw 2.4vh;box-shadow:0 1.2vh 0 rgba(0,0,0,.12);
  transition:left .7s cubic-bezier(.4,1.35,.5,1),top .7s cubic-bezier(.4,1.35,.5,1),border-color .3s,background .3s}
.notrans #bubble{transition:none}
#bubble.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.85)}}
#bubble::after{content:"";position:absolute;width:4.6vh;height:4.6vh;background:inherit;border-right:.7vh solid;border-bottom:.7vh solid;border-color:inherit;display:none;border-radius:0 0 1vh 0}
#bubble[data-mode="above"]::after{display:block;bottom:-2.9vh;left:var(--tail,50%);transform:translateX(-50%) rotate(45deg)}
#bubble[data-mode="side-l"]::after{display:block;left:-2.9vh;top:var(--ty,40%);transform:translateY(-50%) rotate(135deg)}
#bubble[data-mode="side-r"]::after{display:block;right:-2.9vh;top:var(--ty,40%);transform:translateY(-50%) rotate(-45deg)}
#bubble.says{border-color:var(--c);background:var(--soft)}
#bubble.ask{border-color:var(--quiz);background:var(--quiz-soft);width:min(84vw,1300px)}
#bubble.ask.right{border-color:var(--ok);background:var(--ok-soft)}
.who{font-family:var(--display);font-weight:800;font-size:clamp(.55rem,2vw,2.4rem);line-height:1;margin:0 0 .6vh}
#bubble.says .who{color:var(--c)}
#bubble.ask .who{color:var(--quiz)}#bubble.ask.right .who{color:var(--ok)}
.line{font-family:var(--read);font-weight:700;font-size:clamp(.8rem,4.2vw,5.4rem);line-height:1.18;margin:0;text-wrap:balance}
.line.hint{font-weight:400;color:var(--muted);font-size:clamp(.65rem,3vw,3.8rem)}
.line .w{display:inline-block;animation:wordin .4s backwards}
@keyframes wordin{from{opacity:0;transform:translateY(1.5vh) scale(.8)}}
.cover h1{font-family:var(--display);font-weight:800;font-size:clamp(1rem,6.4vw,9rem);line-height:.95;margin:0;color:var(--title,#ff7a1a);text-shadow:.5vh .5vh 0 var(--title-shadow,#2f9e4a);text-wrap:balance}
.cover p{font-size:clamp(.55rem,2.4vw,3rem);margin:1vh 0 0;color:var(--muted)}
.bigbtn{font-family:var(--display);font-weight:800;font-size:clamp(.65rem,2.8vw,3.4rem);border:0;border-radius:99px;padding:.2em 1.2em;
  background:#ff8a1f;color:#fff;box-shadow:0 .8vh 0 #c4610a;margin-top:2vh}
.bigbtn{transition:transform .4s cubic-bezier(.3,1.9,.5,1)}
.bigbtn:hover{transform:translateY(-.4vh) scale(1.06)}
.choices{display:flex;flex-wrap:wrap;gap:1.6vw;justify-content:center;margin-top:2vh}
.choice{font-family:var(--read);font-weight:700;font-size:clamp(.6rem,3vw,3.8rem);border:.6vh solid var(--quiz);background:#fff;color:var(--ink);
  border-radius:3vh;padding:.25em .9em;transition:transform .2s,background .2s,opacity .3s}
.choice:hover{transform:translateY(-.6vh) scale(1.05);background:#fbf7ff}
.choice.right{background:var(--ok);border-color:var(--ok);color:#fff;transform:scale(1.1)}
.choice.faded{opacity:.3}
.choice.nope{animation:shake .5s}
.pointhint{margin:2vh 0 0;font-family:var(--display);font-weight:800;font-size:clamp(.6rem,2.6vw,3.2rem);color:var(--quiz);animation:pulse 1.4s ease-in-out infinite}
.bigstars{margin:1vh 0 0;display:flex;gap:1.4vw;justify-content:center}
.bigstars .qstar{font-size:clamp(1.2rem,7vw,8rem);color:rgba(0,0,0,.12)}
.bigstars .qstar.on{color:#ffc400}

.toast{position:absolute;z-index:7;left:50%;bottom:2.4vh;transform:translateX(-50%);font-family:var(--display);font-weight:800;
  font-size:clamp(.55rem,2.2vw,2.6rem);color:#fff;background:rgba(42,34,48,.7);padding:.2em 1em;border-radius:99px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}
.nav{position:absolute;z-index:7;bottom:2vh;left:0;right:0;display:flex;justify-content:space-between;padding:0 1.6vw;pointer-events:none}
.nav button{pointer-events:auto;font-family:var(--display);font-weight:800;font-size:clamp(.55rem,2vw,2.4rem);border:0;border-radius:99px;padding:.2em .9em;background:rgba(255,255,255,.8);color:var(--ink)}
.nav button:hover{background:#fff}
.nav button[disabled]{opacity:0;pointer-events:none}
.nav .ready{background:#ff8a1f;color:#fff;box-shadow:0 .6vh 0 #c4610a;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.1)}}
.heart{position:absolute;z-index:8;bottom:20vh;color:#ff5c8a;pointer-events:none;animation:floatup 3.2s ease-out forwards}
@keyframes floatup{to{transform:translateY(-70vh) scale(1.6);opacity:0}}
#confetti{position:absolute;inset:0;z-index:9;pointer-events:none;width:100%;height:100%}

/* inside a small frame on the landing page: keep only what fits */
.book.embed .home{display:none}
@media (max-width:520px){.book.embed #snd{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}

/* picture mode (play.html#...&shot=): everything is already in place */
.book.still .line .w,.book.still #bubble{animation:none}
.book.still #bubble,.book.still .char,.book.still #kite{transition:none}
.book.still .char.walking .hop{animation:none}