/* Passport, town activities, Read-Along Library, headphones, holiday lights, always-glowing room spots */
:root{--pp-ink:#3c2364;--pp-purple:#7b2ff7;--pp-gold:#ffd23f;--pp-font:"Poppins","Baloo 2","Trebuchet MS",system-ui,sans-serif}

/* ---------- Nana V's room: tap spots always glow softly and slowly ---------- */
/* a soft halo around the EDGE of each tap spot only (never a wash over the art) */
.hotspots .hs-ring{stroke:#fff6c8;stroke-width:calc(var(--ring,5) * 2.2);filter:url(#glow-blur);animation:hs-soft 3.6s ease-in-out infinite}
.hotspots .hs:nth-child(2n) .hs-ring{animation-delay:-1.2s}.hotspots .hs:nth-child(3n) .hs-ring{animation-delay:-2.4s}
@keyframes hs-soft{0%,100%{opacity:.12}50%{opacity:.6}}
.hotspots .hs:hover .hs-ring{animation:none;opacity:.8}
html.calm .hotspots .hs-ring{animation:none;opacity:.35}

/* ---------- holiday lights: soft glow dots over her bulbs that fade in and out ---------- */
.tw-lights{position:absolute;left:0;top:0;width:1536px;height:1024px;pointer-events:none}
.tw-lights i{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle,#fffbe6 0,var(--g) 22%,transparent 70%);mix-blend-mode:screen;opacity:.15;animation:tw-twinkle 3s ease-in-out infinite}
@keyframes tw-twinkle{0%,100%{opacity:.08;transform:scale(.7)}45%{opacity:.95;transform:scale(1.15)}60%{opacity:.75;transform:scale(1)}}
html.calm .tw-lights i{animation:none;opacity:.35}

/* ---------- headphones on a hook ---------- */
.hp-btn{position:absolute;z-index:3;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 0 0 rgba(255,240,170,0));animation:hp-glow 3.6s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.hp-btn img{display:block;width:100%;height:auto;pointer-events:none;transform-origin:50% 8%}
.hp-btn:focus-visible{outline:5px solid #ffd54a;outline-offset:4px;border-radius:16px}
@keyframes hp-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,240,170,.3))}50%{filter:drop-shadow(0 0 14px rgba(255,240,170,.95))}}
.hp-btn.playing img{animation:hp-sway 1.2s ease-in-out infinite}
@keyframes hp-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.hp-notes{position:absolute;left:0;top:10%;width:100%;height:60%;pointer-events:none;display:none}
.hp-btn.playing .hp-notes{display:block}
.hp-notes i{position:absolute;font-style:normal;font-size:44px;font-weight:900;color:#b06cff;text-shadow:0 0 6px #fff,0 0 10px #fff;opacity:0;animation:hp-note 2.4s ease-out infinite}
.hp-notes i:nth-child(1){left:10%}.hp-notes i:nth-child(2){left:55%;animation-delay:.8s;color:#ff5fa2}.hp-notes i:nth-child(3){left:80%;animation-delay:1.6s;color:#2fa8ff}
@keyframes hp-note{0%{transform:translateY(20px) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-110px) scale(1.1) rotate(15deg);opacity:0}}
html.calm .hp-btn,html.calm .hp-btn.playing img,html.calm .hp-notes i{animation:none}
html.calm .hp-btn.playing .hp-notes i{opacity:.9;transform:translateY(-40px)}

/* ---------- the Passport button in the room ---------- */
.pp-roombtn{position:absolute;z-index:20;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 6px 4px;border:0;border-radius:14px;background:rgba(255,250,240,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer;font:700 13px/1 var(--pp-font);color:var(--pp-ink);animation:pp-glow 3.6s ease-in-out infinite}
.pp-roombtn img{width:clamp(44px,6vw,64px);height:auto;border-radius:6px;display:block}
.pp-roombtn:focus-visible{outline:4px solid #ffd54a;outline-offset:2px}
@keyframes pp-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,214,90,.0),0 4px 12px rgba(60,35,100,.18)}50%{box-shadow:0 0 18px 6px rgba(255,214,90,.75),0 4px 12px rgba(60,35,100,.18)}}
html.calm .pp-roombtn{animation:none}
body[data-screen="room"] #room-screen .pp-roombtn{display:flex}

/* ---------- toast, sparkles, confetti ---------- */
.pp-toast{position:fixed;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + 70px);transform:translateX(-50%);z-index:120;padding:12px 26px;border-radius:999px;background:#fff;border:4px solid var(--c,#ffd23f);color:var(--pp-ink);font:900 clamp(20px,4vw,30px)/1.1 var(--pp-font);box-shadow:0 10px 26px rgba(60,35,100,.3);white-space:nowrap;pointer-events:none;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
.pp-spark{position:fixed;z-index:119;font-size:22px;pointer-events:none;text-shadow:0 0 6px rgba(255,255,255,.9)}
.pp-conf{position:fixed;top:0;z-index:118;width:10px;height:16px;border-radius:2px;pointer-events:none}
.pp-fly{position:fixed;z-index:121;width:80px;height:80px;pointer-events:none}
.pp-fly svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 12px #fff)}
.pp-celebrate{position:fixed;inset:0;z-index:125;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;background:radial-gradient(circle,rgba(255,244,200,.97),rgba(206,170,255,.96));text-align:center}
.pp-celebrate h2{margin:0;max-width:16em;font:900 clamp(24px,5vw,44px)/1.15 var(--pp-font);color:var(--pp-purple);text-shadow:0 3px 0 #fff}
.pp-cel-starli{width:min(40vw,240px);height:auto}
.pp-cel-stars{display:flex;gap:6px}.pp-cel-stars span{width:clamp(30px,6vw,52px)}.pp-cel-stars svg{width:100%;fill:currentColor;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}

/* ---------- the six little pictures in each town ---------- */
.pp-track{position:absolute;z-index:26;left:50%;transform:translateX(-50%);top:calc(max(12px,env(safe-area-inset-top)) + 56px);display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.88);border:3px solid var(--c);box-shadow:0 4px 14px rgba(30,60,120,.25)}
.pp-act{width:clamp(30px,4.2vw,40px);height:clamp(30px,4.2vw,40px);display:grid;place-items:center;border-radius:50%;font-size:clamp(17px,2.4vw,22px);background:#eee;filter:grayscale(1);opacity:.45;transition:all .3s}
.pp-act.on{background:#fff6c8;filter:none;opacity:1;box-shadow:0 0 0 3px var(--c)}
.pp-tstar{width:clamp(30px,4.2vw,40px);margin-left:2px}.pp-tstar svg{width:100%;fill:#ddd;stroke:#bbb;stroke-width:1}
.pp-tstar.on svg{fill:var(--c);stroke:#fff}
@media (max-width:700px){.pp-track{top:calc(max(10px,env(safe-area-inset-top)) + 112px)}}

/* ---------- the Passport book ---------- */
.pp-root{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px 12px;background:rgba(40,20,70,.55)}
.pp-root[hidden]{display:none}
.pp-x{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:var(--pp-purple);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:2}
.pp-x svg{width:26px;stroke:currentColor;stroke-width:3;stroke-linecap:round;fill:none}
.pp-book{position:relative;width:min(760px,100%);max-height:100%;overflow:auto;border-radius:22px;font-family:var(--pp-font);color:var(--pp-ink)}
.pp-book.cover{display:flex;flex-direction:column;align-items:center;gap:10px;overflow:visible}
.pp-cover{border:0;padding:0;background:none;cursor:pointer;height:min(70vh,560px);aspect-ratio:760/1013;filter:drop-shadow(0 18px 30px rgba(0,0,0,.4))}
.pp-cover img{width:100%;height:100%;display:block}
.pp-cover:focus-visible{outline:5px solid #ffd54a;outline-offset:6px;border-radius:20px}
.pp-tap{font:800 20px/1 var(--pp-font);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.pp-book.inside,.pp-book.text,.pp-book.pin,.pp-book.card{background:linear-gradient(180deg,#fffaf0,#f6ecff);border:6px solid #9b5de5;padding:20px 18px 22px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.pp-h{margin:0 0 14px;text-align:center;font:900 clamp(22px,4vw,32px)/1.15 var(--pp-font);color:var(--pp-purple)}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pp-stamp{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:16px;background:#fff;border:3px dashed #d9c9f2;text-align:center}
.pp-stamp.on{border:3px solid var(--c);box-shadow:0 0 0 4px rgba(255,255,255,.8),0 6px 16px rgba(0,0,0,.12)}
.pp-star{width:64px}.pp-star svg{width:100%;fill:#eee;stroke:#ccc;stroke-width:.8}
.pp-stamp.on .pp-star svg{fill:var(--c);stroke:#fff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.pp-stamp strong{font-size:16px}.pp-n{font-size:13px;opacity:.75}
.pp-bonus{position:absolute;right:8px;top:6px;font-size:22px}
.pp-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.pp-btn{min-height:52px;padding:10px 24px;border:0;border-radius:999px;background:linear-gradient(180deg,#a66bff,#7b2ff7);color:#fff;font:800 18px/1.1 var(--pp-font);cursor:pointer;box-shadow:0 5px 0 #5a1fc0}
.pp-btn.alt{background:linear-gradient(180deg,#ff8cc0,#ff4f9a);box-shadow:0 5px 0 #c42d6f}
.pp-btn:disabled{opacity:.45;cursor:default}
.pp-btn:focus-visible,.pp-link:focus-visible,.pp-back:focus-visible,.pp-pic:focus-visible,.pp-slot:focus-visible{outline:4px solid #ffd54a;outline-offset:3px}
.pp-link{display:block;margin:14px auto 0;border:0;background:none;color:var(--pp-purple);font:700 16px var(--pp-font);text-decoration:underline;cursor:pointer;min-height:44px}
.pp-back{border:0;background:#efe4ff;border-radius:999px;padding:8px 16px;font:800 16px var(--pp-font);color:var(--pp-ink);cursor:pointer;min-height:44px}
.pp-book.text p{font-size:18px;line-height:1.5;margin:8px 0}
.pp-replay,.tw-rd-replay{display:inline-block;margin:10px 0;border:0;background:#fff3c4;border-radius:999px;padding:10px 18px;font:800 16px var(--pp-font);color:var(--pp-ink);cursor:pointer;min-height:44px}
.pp-icons{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px}
.pp-icons span{background:#fff;border-radius:999px;padding:6px 12px;font-size:15px;border:2px solid #e5d6fb}
.pp-slots{display:flex;gap:10px;justify-content:center;margin:6px 0 10px}
.pp-slot{width:clamp(56px,14vw,76px);aspect-ratio:1;border-radius:16px;border:4px dashed #b48cf0;background:#fff;font-size:clamp(30px,7vw,42px);cursor:pointer;padding:0}
.pp-slot.full{border-style:solid;border-color:var(--pp-purple);background:#fff9e0}
.pp-pics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:420px;margin:0 auto 14px}
.pp-pic{aspect-ratio:1;border-radius:18px;border:3px solid #e5d6fb;background:#fff;font-size:clamp(30px,8vw,46px);cursor:pointer;padding:0;box-shadow:0 4px 0 #e5d6fb}
.pp-pic:active{transform:translateY(3px);box-shadow:none}
.pp-book.pin{text-align:center}.pp-book.pin .pp-btn{display:block;margin:0 auto}
.pp-msg{min-height:1.4em;font:800 18px/1.3 var(--pp-font);color:#c42d6f;margin:4px 0 10px}
.pp-big{text-align:center;font:900 26px var(--pp-font);color:var(--pp-purple);margin:8px 0}
.pp-pincard{max-width:440px;margin:0 auto;padding:18px;border-radius:20px;background:#fff;border:5px solid var(--pp-gold);text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.pp-pincard h3{margin:0 0 8px;font:900 24px var(--pp-font);color:var(--pp-purple)}
.pp-pinrow{display:flex;gap:10px;justify-content:center;font-size:clamp(40px,11vw,60px);margin:6px 0 10px}
.pp-pinrow span{background:#fff9e0;border-radius:14px;padding:4px 8px;border:3px solid #ffe38a}
.pp-pincard p{font-size:16px;line-height:1.45;margin:6px 0}.pp-site{font-weight:800;color:var(--pp-purple)}

/* ---------- town activity buttons ---------- */
.tw-acts{position:absolute;z-index:26;left:max(10px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:8px}
#town-screen .tw-about{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 92px)}
.tw-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:clamp(60px,8vw,78px);height:clamp(60px,8vw,78px);border-radius:20px;border:4px solid #fff;background:var(--c);color:#fff;cursor:pointer;padding:0;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.tw-act-i{font-size:clamp(24px,3.2vw,30px);line-height:1}.tw-act-t{font:800 12px/1 var(--pp-font);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.tw-act:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
@media (max-width:520px){.tw-acts{gap:6px}.tw-act{width:54px;height:54px;border-width:3px;border-radius:16px}.tw-act-t{font-size:11px}}

/* ---------- hidden town friend ---------- */
.tw-friend{position:absolute;z-index:3;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tw-friend::before{content:"";position:absolute;inset:-25% -40% 0}
.tw-friend img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
@keyframes tw-peek{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8%)}90%{transform:translateY(0)}}
.tw-friend.glow img{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #ffd23f)}
.tw-friend:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
html.calm .tw-friend img{animation:none}
.starli-wrap.helper{pointer-events:auto;cursor:pointer}

/* ---------- activity overlay (riddle, puzzle, match) ---------- */
.tw-ov{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,250,240,.97),rgba(246,236,255,.97));font-family:var(--pp-font);color:var(--pp-ink)}
.tw-ov-top{display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 14px 6px}
.tw-ov-x{width:52px;height:52px;flex:0 0 auto;border-radius:50%;border:3px solid #fff;background:var(--c);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.tw-ov-x svg{width:24px;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;fill:none}
.tw-ov-h{margin:0;font:900 clamp(22px,4vw,32px)/1.1 var(--pp-font);color:var(--pp-ink)}
.tw-ov-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:8px 14px max(14px,env(safe-area-inset-bottom));overflow:auto}
.tw-btn{min-height:52px;padding:10px 22px;border:0;border-radius:999px;background:var(--c);color:#fff;font:800 18px/1.1 var(--pp-font);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.2);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.tw-btn.alt{background:#fff;color:var(--pp-ink);border:3px solid var(--c);text-shadow:none}
.tw-btn:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.tw-after,.tw-rd-after{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.tw-ov.puzzle .tw-after,.tw-ov.match .tw-after{position:absolute;left:0;right:0;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 64px);z-index:5}
/* riddle */
.tw-rd-starli{width:clamp(70px,12vw,110px);height:auto;animation:rd-bounce 1.6s ease-in-out infinite}
@keyframes rd-bounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
html.calm .tw-rd-starli{animation:none}
.tw-rd-q{max-width:32em;margin:8px 0 4px;text-align:center;font:800 clamp(19px,3.2vw,26px)/1.4 var(--pp-font)}
.tw-rd-answers{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px;width:100%}
.tw-rd-a{flex:1 1 150px;max-width:220px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:24px;border:4px solid #e5d6fb;background:#fff;cursor:pointer;box-shadow:0 6px 0 #e5d6fb;transition:transform .15s}
.tw-rd-e{font-size:clamp(46px,9vw,64px);line-height:1}.tw-rd-w{font:800 clamp(18px,3vw,22px)/1.1 var(--pp-font);color:var(--pp-ink)}
.tw-rd-a:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.tw-rd-a.no{opacity:.55}
.tw-rd-a.yes{border-color:#3fbf4a;background:#eaffea;box-shadow:0 0 0 6px rgba(63,191,74,.3)}
.tw-rd-a.hintglow{animation:rd-glow 1.4s ease-in-out infinite;border-color:#ffd23f}
@keyframes rd-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,.0),0 6px 0 #ffe38a}50%{box-shadow:0 0 22px 8px rgba(255,210,63,.9),0 6px 0 #ffe38a}}
html.calm .tw-rd-a.hintglow{animation:none;box-shadow:0 0 0 6px rgba(255,210,63,.8)}
@media (max-width:520px){.tw-rd-a{flex:1 1 30%;min-height:104px;border-radius:18px}}
/* puzzle */
.tw-pz{position:relative;width:100%;flex:1;min-height:260px}
.tw-pz-board{position:absolute;background:rgba(123,47,247,.08);border-radius:6px;box-shadow:inset 0 0 0 3px rgba(123,47,247,.35)}
.tw-pz-slot{position:absolute;border:2px dashed rgba(123,47,247,.45);background:transparent;padding:0;cursor:pointer}
.tw-pz-board.done{box-shadow:0 0 0 6px var(--c),0 0 30px 8px rgba(255,214,90,.9)}
.tw-pz-board.done .tw-pz-slot{border-color:transparent}
.tw-pz-piece{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:4px;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 0 0 3px rgba(255,255,255,.8);cursor:grab;touch-action:none;background-repeat:no-repeat}
.tw-pz-piece.drag{z-index:5;cursor:grabbing;box-shadow:0 12px 24px rgba(0,0,0,.4),inset 0 0 0 3px #fff}
.tw-pz-piece.sel{box-shadow:0 0 0 5px #ffd23f,0 6px 14px rgba(0,0,0,.3)}
.tw-pz-piece.locked{box-shadow:none;cursor:default;border-radius:0}
.tw-pz-piece:focus-visible{outline:4px solid #1f6dff}
/* match */
.tw-mm{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,16px);width:min(100%,calc((100vh - 200px) * 1.5),640px);margin:auto}
@media (orientation:portrait){.tw-mm{grid-template-columns:repeat(2,1fr);width:min(100%,calc((100vh - 220px) * .66),460px)}}
.tw-mm-card{aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;perspective:800px}
.tw-mm-in{position:relative;display:block;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.tw-mm-card.up .tw-mm-in{transform:rotateY(180deg)}
.tw-mm-back,.tw-mm-front{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tw-mm-back{display:grid;place-items:center;background:linear-gradient(135deg,#a66bff,#7b2ff7);border:4px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tw-mm-back svg{width:46%;fill:#ffd23f}
.tw-mm-front{transform:rotateY(180deg);background:#fff;border:4px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.tw-mm-front img{width:100%;height:100%;object-fit:cover;display:block}
.tw-mm-card.done .tw-mm-front{border-color:#3fbf4a;box-shadow:0 0 0 4px rgba(63,191,74,.45)}
.tw-mm-card:focus-visible{outline:4px solid #1f6dff;outline-offset:3px;border-radius:18px}
html.calm .tw-mm-in{transition:none}

/* ---------- Read-Along Library ---------- */
#library-screen{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#fff4e0,#f3e6ff);font-family:var(--pp-font);color:var(--pp-ink)}
.lb-top{position:absolute;left:12px;top:max(10px,env(safe-area-inset-top));z-index:5}
.lb-title{margin:0;padding:calc(max(10px,env(safe-area-inset-top)) + 64px) 16px 6px;text-align:center;font:900 clamp(24px,4.4vw,38px)/1.1 var(--pp-font);color:var(--pp-purple)}
#library-screen.reading .lb-title{display:none}
.lb-shelf{position:absolute;left:0;right:0;bottom:0;top:calc(max(10px,env(safe-area-inset-top)) + 118px);overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:6px 16px 24px;align-content:start}
.lb-book{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px 8px 12px;border-radius:18px;border:4px solid var(--c);background:#fff;cursor:pointer;text-align:center;box-shadow:0 6px 14px rgba(60,35,100,.15)}
.lb-book img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
.lb-book strong{font:800 17px/1.2 var(--pp-font);color:var(--pp-ink)}.lb-book span{font-size:14px;color:var(--c);font-weight:800}
.lb-heard{position:absolute;right:12px;top:12px;font-style:normal;background:#fff;border-radius:999px;padding:3px 8px;font-size:14px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.lb-book:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.lb-player{position:absolute;inset:0;display:flex;flex-direction:column;background:#1d1230}
.lb-player[hidden]{display:none}
.lb-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.lb-page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lb-art{width:100%;height:100%;object-fit:contain;display:block}
.lb-page.town .lb-art{object-fit:cover}
.lb-friend{position:absolute;left:50%;bottom:4%;height:58%;transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
/* guest reader (AUG): big in the middle while Nana V introduces him, then small in the corner with "Read by" */
.lb-guest{position:absolute;right:2%;bottom:3%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none}
.lb-guest img{height:clamp(80px,20vh,170px);width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.lb-guest span{background:#7a2fe0;color:#fff;font-weight:800;font-size:clamp(11px,1.6vw,15px);padding:2px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.lb-guest.intro{inset:0;background:radial-gradient(circle at 50% 45%,#b77cff 0%,#7a2fe0 55%,#3d1580 100%)}
.lb-guest.intro img{height:clamp(140px,calc(100% - 60px),620px);max-height:78%}
.lb-guest.intro span{font-size:clamp(14px,2.4vw,22px);padding:4px 16px}
.lb-words{min-height:3.2em;padding:12px 18px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fffaf0;font:800 clamp(20px,3.4vw,30px)/1.3 var(--pp-font);color:var(--pp-ink)}
.lb-words .sfx{color:#ff4f6d;font-size:1.15em;letter-spacing:.02em}.lb-words .end{color:var(--pp-purple);font-size:1.2em}
.lb-track{height:6px;background:#eadcff}.lb-bar{height:100%;width:0;background:linear-gradient(90deg,#ff5fa2,#7b2ff7);transition:width .4s}
.lb-ctr{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px 10px max(10px,env(safe-area-inset-bottom));background:#fffaf0}
.lb-b{min-height:48px;padding:8px 16px;border:0;border-radius:999px;background:#efe4ff;color:var(--pp-ink);font:800 16px var(--pp-font);cursor:pointer}
.lb-b.main{background:linear-gradient(180deg,#a66bff,#7b2ff7);color:#fff;min-width:130px}
.lb-b:focus-visible,.lb-turn:focus-visible,.lb-visit:focus-visible{outline:4px solid #ffd54a;outline-offset:3px}
.lb-turn{position:absolute;right:max(14px,env(safe-area-inset-right));top:40%;transform:translateY(-50%);width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:linear-gradient(180deg,#ffd23f,#ff9a1f);color:#fff;cursor:pointer;display:grid;place-items:center;animation:lb-glow 1.3s ease-in-out infinite;z-index:3}
.lb-turn svg{width:40px;stroke:currentColor;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lb-turn[hidden]{display:none}
@keyframes lb-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,214,90,.0),0 6px 14px rgba(0,0,0,.35)}50%{box-shadow:0 0 26px 10px rgba(255,214,90,.95),0 6px 14px rgba(0,0,0,.35)}}
html.calm .lb-turn{animation:none}
.lb-end{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4}
.lb-end[hidden]{display:none}
.lb-visit{min-height:64px;padding:12px 30px;border:5px solid #fff;border-radius:999px;background:var(--c);color:#fff;font:900 clamp(22px,4vw,30px)/1.1 var(--pp-font);cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.4);text-shadow:0 2px 3px rgba(0,0,0,.3);white-space:nowrap}

/* ---------- printing a colored page ---------- */
#dd-print{display:none}
@media print{body>*:not(#dd-print){display:none!important}#dd-print{display:block!important}#dd-print img{width:100%;height:auto}html,body{overflow:visible!important;height:auto!important;background:#fff!important}}
.dd-finish{background:#fff3c4!important;border-color:#ffd23f!important}

/* parent check */
.pc-root{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;background:rgba(40,20,70,.55);padding:16px}
.pc-card{width:min(420px,100%);background:#fff;border-radius:20px;padding:20px;text-align:center;font-family:var(--pp-font);color:var(--pp-ink);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.pc-card h2{margin:0 0 6px;font:900 24px var(--pp-font);color:var(--pp-purple)}
.pc-card p{margin:6px 0;font-size:17px}
.pc-card input{width:120px;font:800 26px var(--pp-font);text-align:center;padding:8px;border:3px solid #d9c9f2;border-radius:12px;margin:8px 0}
.pc-row{display:flex;gap:10px;justify-content:center;margin-top:8px}
.in-buy{display:inline-block;margin:4px 6px 4px 0;padding:10px 16px;border-radius:999px;background:#7b2ff7;color:#fff!important;font-weight:800;text-decoration:none;border:0;cursor:pointer;font-size:16px}
.in-buy[disabled]{background:#ccc;cursor:default}

@media (max-width:760px){.pp-roombtn{top:calc(max(10px,env(safe-area-inset-top)) + 46px)}}
@media (max-width:600px){.tw-ov-top{padding-right:150px}.tw-ov-h{font-size:19px}}

/* phones: the "I'm Finished!" button keeps its words; tools wrap onto a second line if needed */
@media (max-width:640px){.dd-tools{flex-wrap:wrap}.dd-tool{min-width:44px;min-height:44px;justify-content:center}.dd-finish span{display:inline!important}}
/* tablets held upright: the settings bar sits at the bottom, so the grown-up links move up above it */
#room-screen .room-foot{transition:bottom .2s}
@media (orientation:portrait) and (min-width:761px){#room-screen .room-foot{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 66px)}}

/* short screens (phones held sideways): the six pictures sit top-left under the back button, out of the middle of the town,
   the welcome note starts tucked (Nana V still reads it), and the Star PIN pictures are smaller so all 16 fit */
@media (max-height:520px){
  .pp-track{left:max(10px,env(safe-area-inset-left));transform:none;top:calc(max(8px,env(safe-area-inset-top)) + 50px);padding:3px 6px;gap:3px}
  .pp-act,.pp-tstar{width:30px;height:30px;font-size:16px}
  .pp-pics{grid-template-columns:repeat(8,1fr);max-width:600px;gap:6px}.pp-pic{font-size:26px;border-radius:12px}
  .pp-slot{width:48px;font-size:28px}.pp-book.pin .pp-h{font-size:20px;margin-bottom:6px}
  .tw-ov-top{padding-top:max(6px,env(safe-area-inset-top))}
  .tw-rd-a{min-height:84px}.tw-rd-e{font-size:38px}.tw-rd-starli{width:56px}
}
.hp-btn::before{content:"";position:absolute;inset:-22px}
@media (orientation:portrait) and (min-width:761px){#room-screen .room-foot{max-width:calc(100vw - 150px)}}

/* art studio: the tables never move; they only glow when pointed at, and open right away when tapped */
.ds-station img{transition:filter .2s ease!important}
.ds-station.hover img,.ds-station:focus-visible img{transform:none!important;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 16px rgba(255,205,70,.95))!important}
.ds-station.bounce img{animation:none!important}
/* holiday lights: quicker, brighter twinkle */
.tw-lights i{width:38px;height:38px;margin:-19px 0 0 -19px;animation-name:tw-twinkle2}
@keyframes tw-twinkle2{0%,100%{opacity:.1;transform:scale(.7)}40%{opacity:1;transform:scale(1.3)}60%{opacity:.85;transform:scale(1.05)}}

.lb-top{display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100vw - 150px)}
.lb-top .bk-btn[hidden]{display:none}

/* Nana V's words: a smaller, lighter box that fades in gently */
#captions.captions{background:rgba(255,250,240,.88);color:#3c2364;border:2px solid rgba(155,93,229,.35);font:600 clamp(15px,2vw,18px)/1.4 "Poppins",system-ui,sans-serif;padding:8px 16px;border-radius:14px;box-shadow:0 4px 14px rgba(60,35,100,.15);max-width:min(88%,36rem)}
#captions.captions.on{animation:cap-in .7s ease-out}
@keyframes cap-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
html.calm #captions.captions.on{animation:none}
#captions.captions{bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 62px)}

/* headphones hang straight and still (no tilting); music notes show when playing */
.hp-btn.playing img{animation:none!important;transform:none!important}

/* small headphones in the activity room get a bigger tap area */
.hp-btn.hp-small::after{content:"";position:absolute;inset:-22px}
.hp-btn.hp-small .hp-notes i{font-size:26px}
.hp-cover{position:absolute;z-index:4;pointer-events:none;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}