/* Gelli Belle Magic Toychest V2 / immersive, aspect-safe panoramic reader */
:root{color-scheme:dark;--night:#10243b;--gold:#eed8b2}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:white;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,input{font:inherit}button{cursor:pointer}[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
#readerApp,.reader-experience,.book,.slides{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden}
.book{background:#18344c;touch-action:none;outline:none;user-select:none;-webkit-user-select:none}
.slides{isolation:isolate}
.scene{position:absolute;inset:0;overflow:hidden;transform:translate3d(100%,0,0);will-change:transform;pointer-events:none;background:#1b3750;transition:transform 640ms cubic-bezier(.18,.78,.18,1)}
.scene.from-left{transform:translate3d(-100%,0,0)}
.scene.from-right{transform:translate3d(100%,0,0)}
.scene.active{transform:translate3d(0,0,0);z-index:2;pointer-events:auto}
.scene.out-left{transform:translate3d(-100%,0,0);z-index:1}
.scene.out-right{transform:translate3d(100%,0,0);z-index:1}
.scene .bleed{position:absolute;inset:-9%;width:118%;height:118%;object-fit:cover;filter:blur(16px) brightness(.61) saturate(.83);transform:scale(1.055);pointer-events:none}
.scene .bleed::after{content:"";position:absolute;inset:0}
.scene .visual{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;will-change:transform;overflow:hidden}
.scene.active .visual{animation:subtle-leftward-drift 32s linear both}
@keyframes subtle-leftward-drift{from{transform:translate3d(.08%,0,0)}to{transform:translate3d(-.08%,0,0)}}
.scene video,.scene .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;user-select:none;-webkit-user-select:none}
.scene video{display:block;background:transparent}
.scene video::-webkit-media-controls{display:none!important}
.scene .poster{opacity:1}.scene.started .poster{opacity:0}
.scene .poster,.scene .bleed{transition:opacity .16s linear}
/* Keep all source pixels visible; blurred scene extension fills the space a 2.5:1 spread cannot occupy in a 16:9 viewport. */
.edge{position:absolute;z-index:6;top:13%;height:72%;width:min(7vw,86px);min-width:30px;padding:0;display:grid;place-items:center;border:0;color:#fff;background:transparent;opacity:.36;text-shadow:0 4px 15px #000;transition:opacity .2s}
.edge span{font:300 clamp(30px,4vw,52px)/1 system-ui}.edge-prev{left:0}.edge-next{right:0}
.edge:hover,.edge:focus-visible{opacity:.95;background:#0d29486e;outline:none}.edge:disabled{opacity:0;pointer-events:none}
.reader-exit{position:absolute;z-index:12;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));text-decoration:none;color:white;background:#10293d9e;border:1px solid #ffffff3d;backdrop-filter:blur(14px);padding:9px 13px;border-radius:99px;opacity:.58;font-weight:650;font-size:13px;box-shadow:0 4px 18px #0003;transition:opacity .2s}.reader-exit:hover,.reader-exit:focus-visible{opacity:1;outline:2px solid #fff}
.reader-footer{position:absolute;z-index:14;left:50%;bottom:max(9px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,85vw);display:flex;align-items:center;gap:13px;padding:7px 13px;min-height:47px;border-radius:99px;background:#102637a6;border:1px solid #ffffff3a;backdrop-filter:blur(18px);opacity:.52;transition:opacity .2s}.reader-footer:hover,.reader-footer:focus-within{opacity:1}
.reader-footer input{min-width:0;flex:1;accent-color:#f0d3a4;cursor:pointer}.footer-button{border:0;background:transparent;color:white;font-size:24px;height:31px;min-width:32px;border-radius:50%;display:grid;place-items:center}.footer-button:hover,.footer-button:focus-visible{background:#ffffff26;outline:1px solid #fff7}.footer-button.muted{opacity:.45}
.scene-label{font-size:12px;min-width:49px;text-align:center;font-weight:700;white-space:nowrap}
.load-error,.sound-hint{position:absolute;z-index:17;left:50%;transform:translateX(-50%);max-width:min(520px,90vw);background:#09243aec;box-shadow:0 8px 20px #0006;border:1px solid #ffffff4f;border-radius:14px;padding:12px 18px;text-align:center;font-size:13px}.load-error{top:42%}.sound-hint{bottom:92px}
.rotate-gate{display:none;position:absolute;inset:0;background:linear-gradient(145deg,#172e52,#372351);z-index:50;align-items:center;justify-content:center;flex-direction:column;gap:17px;padding:32px;text-align:center}.rotate-gate>span{font-size:70px;color:#e9d2b0}.rotate-gate strong{font-size:clamp(22px,6vw,34px)}.rotate-gate p{margin:0;line-height:1.5}.rotate-gate a{color:#fff;padding:13px 21px;border-radius:99px;background:#ffffff21;text-decoration:none}
@media(orientation:portrait){.rotate-gate{display:flex}}
@media(max-width:680px){.reader-exit span{display:none}.reader-footer{width:min(490px,85vw);gap:5px;padding:4px 10px;min-height:39px}.reader-exit{padding:7px 12px}.footer-button{height:29px}}
@media(max-height:360px){.reader-footer{bottom:3px;min-height:31px;padding:2px 12px}.reader-exit{top:3px}}
.nightlight{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 14s ease;background:radial-gradient(ellipse at 65% 25%,transparent 0 11%,#0313238c 60%,#020a18df 100%)}
.nightlight.awake{opacity:1}.night-moon{position:absolute;top:11%;right:16%;width:clamp(42px,8vmin,94px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 37% 29%,#fffce7,#e7e5c7 54%,#bacde2 100%);box-shadow:0 0 32px 13px #bde2ff8a,0 0 115px 55px #94bff04a;animation:moon-pulse 8s ease-in-out infinite alternate}
@keyframes moon-pulse{from{box-shadow:0 0 28px 9px #bde2ff89,0 0 95px 35px #94bff039}to{box-shadow:0 0 42px 16px #bde2ffaf,0 0 134px 64px #94bff05a}}
.night-star{position:absolute;color:#d6e6ff;opacity:.5;animation:star-pulse 6s ease-in-out infinite alternate}.star-a{top:20%;left:25%}.star-b{top:33%;right:35%;animation-delay:-2s}
@keyframes star-pulse{from{opacity:.13;transform:scale(.72)}to{opacity:.65;transform:scale(1.15)}}
.embedded-preview{position:fixed;inset:0;display:grid;place-items:center;background:#122a42;overflow:hidden}.embedded-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65)}.embedded-preview button{position:relative;z-index:3;max-width:90%;padding:12px 23px;border-radius:99px;border:1px solid #ffffff9c;background:#1d3953e0;box-shadow:0 8px 40px #0007;color:#fff;font-weight:700}
@media(prefers-reduced-motion:reduce){.scene,.nightlight,.reader-footer,.reader-exit{transition-duration:0ms!important}.scene.active .visual,.night-moon,.night-star{animation:none!important}}

/* V2.2: preserve compositor headroom when navigating high-resolution originals. */
.scene:not(.active) .visual{animation:none!important}
.scene .poster{will-change:opacity}

/* FINAL reader V3: quiet chrome, clear keyboard focus, no gameplay overlay. */
.reader-footer{box-shadow:0 7px 26px #0003,inset 0 1px 0 #fff1;background:#10263796;opacity:.45}
.reader-footer:hover,.reader-footer:focus-within{opacity:.98}
.reader-exit{background:#10293d94;box-shadow:0 5px 18px #0004}
.edge{touch-action:manipulation;opacity:.24}
.edge:hover,.edge:focus-visible{opacity:.94}
.reader-experience button:focus-visible,.reader-exit:focus-visible{outline:2px solid #f3e4c8;outline-offset:3px}
@media(hover:none){.reader-footer{opacity:.62}.edge{opacity:.3}}
@media(prefers-reduced-motion:reduce){.reader-footer,.reader-exit,.edge{transition-duration:0ms!important}}