html,body,#app,section{-webkit-user-select:none;user-select:none;height:100%;margin:0}html,body{color:#f4efe6;background:#1e2a4a;font-family:system-ui,sans-serif;overflow:hidden}*,:before,:after{box-sizing:border-box}#app,section{background:#1e2a4a}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}#screen-pin{justify-content:center;align-items:center;display:flex}#screen-pin[hidden],#screen-shelf[hidden],#screen-player[hidden]{display:none}.pin-setup{text-align:center;margin:0 2rem;font-size:1.4rem;line-height:1.4}.pin-gate{flex-direction:column;align-items:center;gap:2rem;display:flex}.pin-dots{gap:1.25rem;display:flex}.pin-dot{background:0 0;border:2px solid #f4efe6;border-radius:50%;width:18px;height:18px}.pin-dot.filled{background:#f4efe6}.pin-pad{grid-template-columns:repeat(3,minmax(64px,88px));gap:14px;display:grid}.pin-key{cursor:pointer;background:#2b3a63;border:0;border-radius:50%;width:88px;min-width:64px;height:88px;min-height:64px;font-size:2rem}.pin-key:active{background:#3a4d7d}.pin-spacer{min-width:64px;min-height:64px}#screen-shelf{flex-direction:column;padding:6%;display:flex}.shelf{flex:1;align-items:center;gap:4%;display:flex;overflow-x:auto}.card{aspect-ratio:3/4;cursor:pointer;background:#14203a;border:0;border-radius:16px;flex:0 0 30%;width:30%;padding:0;position:relative;overflow:hidden;box-shadow:0 16px 28px #00000059}.card img{object-fit:cover;width:100%;height:100%;display:block}.card-label{color:#f7f1e6;letter-spacing:.01em;text-align:center;pointer-events:none;background:linear-gradient(#0000,#0a1020eb 55%);padding:1.6rem .55rem .7rem;font-size:clamp(1.55rem,3.8vw,2.35rem);font-weight:700;line-height:1.15;position:absolute;bottom:0;left:0;right:0}.card.openable{outline-offset:4px;outline:5px solid #ffd27a}.card.soon{opacity:.55;cursor:default}#screen-player{display:flex;position:relative}.theater{background:#0b1224;position:absolute;inset:0;overflow:hidden}.page-image{object-fit:contain;transform-origin:50%;background:#87c6f0;width:100%;height:100%;animation:7s ease-in-out infinite cartoon-breathe;display:block}@keyframes cartoon-breathe{50%{transform:scale(1.04)}}.cartoon-fx{pointer-events:none;z-index:1;position:absolute}canvas.scene3d{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.planet-labels{z-index:5}.planet-label{color:#fff8ea;letter-spacing:.02em;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #0000008c;background:#080c18c7;border-radius:999px;padding:.18em .55em .22em;font-family:system-ui,sans-serif;font-size:clamp(.95rem,2.2vw,1.25rem);font-weight:700;line-height:1.1}.planet-label.sun{color:#ffe7a0}.planet-label.hot{background:#141c30eb;outline:2px solid #ffd27a}.subtitle{color:#fff8ee;text-align:center;z-index:8;pointer-events:none;background:#0a0e16b8;border-radius:16px;width:min(92%,720px);padding:12px 18px;font-size:clamp(1.05rem,3.2vw,1.45rem);line-height:1.35;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.subtitle[hidden]{display:none}.spots{pointer-events:none;z-index:2;position:absolute;inset:0}.spot{cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:50%;padding:0;animation:1.6s ease-in-out infinite glow-pulse;position:absolute;box-shadow:0 0 0 5px #ffdc6e80,0 0 22px 10px #ffbe3c59}.spot.active{box-shadow:0 0 0 7px #ffecaad9,0 0 32px 14px #ffc8508c}.spot-label{color:#fff8ee;letter-spacing:.02em;text-shadow:0 1px 4px #000000a6;white-space:nowrap;pointer-events:none;font-size:13px;font-weight:600;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%)}.motion{pointer-events:none;position:absolute;inset:0;overflow:hidden}.motion.rain:before{content:"";background-image:repeating-linear-gradient(200deg,#0000 0 14px,#d2e6ff59 14px 16px);animation:1.4s linear infinite rain-fall;position:absolute;inset:-30% 0}.motion.wisps:before,.motion.wisps:after{content:"";background:radial-gradient(circle,#ffffff4d,#0000 70%);border-radius:50%;width:42%;height:38%;animation:5s ease-in-out infinite wisp-up;position:absolute;bottom:8%;left:22%}.motion.wisps:after{width:28%;animation-delay:1.6s;left:48%}@keyframes rain-fall{to{transform:translateY(22%)}}@keyframes wisp-up{0%{opacity:0;transform:translateY(18%)scale(.85)}35%{opacity:.65}to{opacity:0;transform:translateY(-80%)scale(1.2)}}.motion.fx-sun:before{content:"";aspect-ratio:1;background:radial-gradient(circle,#ffdc508c,#0000 70%);border-radius:50%;width:28%;animation:1.1s ease-in-out infinite sun-pulse;position:absolute;top:2%;right:4%}.motion.fx-cloud:before{content:"";background:radial-gradient(circle,#ffffff73,#0000 70%);border-radius:50%;width:30%;height:28%;animation:1.4s ease-in-out infinite cloud-bounce;position:absolute;top:4%;left:8%}.motion.fx-rain:before{content:"";background-image:repeating-linear-gradient(200deg,#0000 0 16px,#50a0e68c 16px 19px);animation:.9s linear infinite rain-fall;position:absolute;inset:-20% 8% 30%}.motion.fx-mist:before,.motion.fx-mist:after{content:"";background:radial-gradient(circle,#ffffff8c,#0000 70%);border-radius:50%;width:18%;height:34%;animation:2.8s ease-in-out infinite wisp-up;position:absolute;bottom:28%;left:52%}.motion.fx-mist:after{animation-delay:.7s;left:62%}.motion.fx-water:before{content:"";border:4px solid #46a0e673;border-radius:50%;width:44%;height:22%;animation:1.3s ease-out infinite water-ripple;position:absolute;bottom:18%;left:28%}@keyframes sun-pulse{50%{opacity:.85;transform:scale(1.18)}}@keyframes cloud-bounce{50%{transform:translateY(-8%)scale(1.06)}}@keyframes water-ripple{0%{opacity:.8;transform:scale(.7)}to{opacity:0;transform:scale(1.25)}}.glow{cursor:pointer;z-index:2;background:0 0;border:0;border-radius:50%;padding:0;animation:1.6s ease-in-out infinite glow-pulse;position:absolute;box-shadow:0 0 0 6px #ffdc6e8c,0 0 28px 12px #ffbe3c73}@keyframes glow-pulse{50%{opacity:.85;transform:scale(1.08)}}.ear{cursor:pointer;z-index:6;background:#14203a8c;border:0;border-radius:50%;width:56px;height:56px;font-size:1.6rem;line-height:1;position:absolute;bottom:16px;left:16px}.dots{opacity:.28;cursor:pointer;z-index:6;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:56px;height:56px;display:flex;position:absolute;top:16px;right:16px}.dots i{background:#f4efe6;border-radius:50%;width:6px;height:6px;display:block}.parent-panel{z-index:7;background:#0e1428eb;border-radius:16px;flex-direction:column;gap:8px;padding:12px;display:flex;position:absolute;top:76px;right:16px;box-shadow:0 12px 24px #00000059}.parent-panel button{cursor:pointer;background:#2b3a63;border:0;border-radius:999px;min-height:48px;padding:0 18px}.end-veil{z-index:5;background:linear-gradient(#0000 45%,#0a0e1ce0);flex-direction:column;justify-content:flex-end;align-items:center;gap:1rem;padding-bottom:8%;display:flex;position:absolute;inset:0}.again{color:#1e2a4a;cursor:pointer;background:#ffd27a;border:0;border-radius:999px;min-width:240px;min-height:88px;padding:0 2.5rem;font-size:2rem;font-weight:600}.back-books{opacity:.75;cursor:pointer;background:0 0;border:0;font-size:1.1rem}.motion[hidden],.glow[hidden],.ear[hidden],.parent-panel[hidden],.end-veil[hidden],.play-hint[hidden]{display:none}.pieces{pointer-events:none;z-index:3;position:absolute}.piece{cursor:grab;pointer-events:auto;filter:drop-shadow(6px 10px #281c1029);touch-action:none;background:0 0;border:0;padding:0;position:absolute;transform:translate(-50%,-50%)}.piece.locked{cursor:default}.piece.hint{animation:1.2s ease-in-out infinite piece-hint}.piece.dragging{cursor:grabbing;z-index:6;filter:drop-shadow(10px 16px #281c1038)}.piece img{pointer-events:none;border-radius:18px;width:100%;height:auto;display:block}@keyframes piece-hint{50%{transform:translate(-50%,-50%)scale(1.06)}}.play-hint{color:#fff8ee;z-index:4;pointer-events:none;background:#14100c73;border-radius:999px;padding:8px 16px;font-size:.95rem;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.theater:has(.quiz-layer) .subtitle{display:none}.quiz-layer{z-index:12;background:linear-gradient(#0000 10%,#080c18c7 62%);flex-direction:column;justify-content:flex-end;align-items:center;gap:4%;padding:5% 4% 6%;display:flex;position:absolute;inset:0}.quiz-bubble{color:#fff8ee;text-align:center;background:#0c1220e0;border-radius:22px;width:min(92%,760px);padding:16px 22px;font-size:clamp(1.2rem,3.4vw,1.7rem);font-weight:700;line-height:1.3}.quiz-options,.quiz-invite,.quiz-end{justify-content:center;gap:3.5%;width:100%;display:flex}.quiz-option{color:#fff8ee;cursor:pointer;background:#1a2746;border:0;border-radius:18px;flex:1 1 0;max-width:30%;padding:.45rem .45rem .7rem;box-shadow:0 10px 22px #00000059}.quiz-option img{aspect-ratio:1;object-fit:cover;border-radius:14px;width:100%;display:block}.quiz-option-label{text-align:center;margin-top:.5rem;font-size:clamp(1.4rem,4vw,2.05rem);font-weight:800;line-height:1.15;display:block}.quiz-option.wrong{opacity:.38;filter:grayscale();cursor:default}.quiz-yes,.quiz-no,.quiz-again,.quiz-look{cursor:pointer;border:0;border-radius:999px;min-width:28%;min-height:72px;padding:.7rem 1.4rem;font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800}.quiz-yes,.quiz-again{color:#1a1408;background:#ffd27a}.quiz-no,.quiz-look{color:#f4efe6;background:#2a385c}.quiz-look{min-height:58px;font-size:clamp(1rem,2.2vw,1.3rem)}.quiz-stars{justify-content:center;align-items:center;gap:1.2rem;display:flex}.quiz-star{fill:#0000;stroke:#ffd27a;stroke-width:1.4px;width:clamp(52px,10vw,84px);height:clamp(52px,10vw,84px)}.quiz-star.filled{fill:#ffd27a;filter:drop-shadow(0 0 10px #ffd27ab3)}.play-game-btn{z-index:9;color:#1a1408;writing-mode:vertical-rl;text-orientation:mixed;cursor:pointer;background:#ffd27a;border:0;border-radius:18px;min-width:72px;min-height:120px;padding:.85rem .7rem;font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:800;line-height:1.15;position:absolute;top:50%;right:14px;transform:translateY(-50%);box-shadow:0 10px 22px #00000059}.quiz-streamers{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.quiz-streamers i{border-radius:2px;width:10px;height:22px;animation-name:streamer-fall;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;top:-16px}@keyframes streamer-fall{to{transform:translateY(110vh) rotate(var(--spin,240deg));opacity:.2}}