#playroom{position:relative;aspect-ratio:16/9;max-width:960px;margin:auto;overflow:hidden;background:#080707}
#playroom[hidden]{display:none}
#playroom-world{position:absolute;width:100%;aspect-ratio:16/9;top:50%;transform:translateY(-50%);background:center/100% 100% no-repeat}
.art-ready #playroom-world{background-image:url(playroom.webp)}
#playroom #player{width:12%;height:34%;z-index:4}
.playroom-toy{position:absolute;pointer-events:none;z-index:2}
.toy-picture{position:absolute;inset:0;background-repeat:no-repeat;transform-origin:50% 90%}
.art-ready .toy-picture{background-image:url(playroom.webp)}
.toy-musicBox.is-active .toy-picture{animation:playroom-mechanism 2.4s ease-in-out infinite}
.toy-mellotron.is-active .toy-picture{animation:playroom-keys 1.9s ease-in-out infinite}
.toy-accordion.is-active .toy-picture{animation:playroom-bellows 2.8s ease-in-out infinite}
.toy-accordion .toy-picture{transition:opacity 4s ease,filter 4s ease,transform 4s ease}
.toy-accordion.erased{z-index:4}
.toy-accordion.erased .toy-picture{opacity:0;filter:grayscale(.7) contrast(.45) brightness(1.28) blur(2.6px);transform:scale(.985);animation:none}
#accordion-clean-plate{position:absolute;inset:0;z-index:3;background:center/100% 100% no-repeat;opacity:0;filter:brightness(1.04) blur(2px);mask-image:radial-gradient(ellipse 10.5% 17% at 41.5% 56%,#000 0 58%,#000c 70%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 10.5% 17% at 41.5% 56%,#000 0 58%,#000c 70%,transparent 100%);transition:opacity 4s ease,filter 4s ease;pointer-events:none}
.art-ready #accordion-clean-plate{background-image:url(playroom-accordion-clean.jpg)}
#accordion-clean-plate.visible{opacity:1;filter:brightness(1) blur(0)}
.toy-accordion::before{content:'';position:absolute;inset:-34% -36%;z-index:2;background:radial-gradient(circle at 20% 58%,#5f493a99 0 1px,transparent 2px),radial-gradient(circle at 38% 34%,#8e71598c 0 1.5px,transparent 2.5px),radial-gradient(circle at 54% 66%,#4d3b3080 0 1px,transparent 2px),radial-gradient(circle at 71% 39%,#95775c80 0 1.5px,transparent 2.5px),radial-gradient(circle at 82% 61%,#58443773 0 1px,transparent 2px);opacity:0;pointer-events:none}
.toy-accordion.erased::before{animation:accordion-dust 4s ease-out both}
.toy-wait{position:absolute;left:50%;bottom:calc(100% + 7px);width:24px;height:24px;margin-left:-12px;border:1px solid #ccbca4cc;border-radius:47% 53% 49% 51%;background:conic-gradient(from -90deg,#ccbca4d9 0deg var(--fill-angle,0deg),#211914dc var(--fill-angle,0deg) 360deg);box-shadow:0 1px 4px #000b;opacity:0;transform:rotate(-2deg);transition:opacity .12s}
.is-pending .toy-wait{opacity:.88}
@keyframes playroom-mechanism{50%{transform:rotate(1.5deg)}}
@keyframes playroom-keys{50%{filter:brightness(1.12);transform:translateY(.5px)}}
@keyframes playroom-bellows{50%{transform:scaleX(1.025)}}
@keyframes accordion-dust{0%{opacity:0;transform:scale(.78) translateY(2px)}28%{opacity:.45}100%{opacity:0;transform:scale(1.12) translateY(-9px)}}
#playroom-door{position:absolute;right:10.9%;top:19%;width:.65%;height:52%;background:linear-gradient(90deg,#17110a,#e7c28b);opacity:0;transform:skewY(-8deg);transition:opacity 1.6s;pointer-events:none}
#playroom-door.inviting{opacity:.7}
#playroom-note{padding:8px 8px 10px;border:0;background:transparent;color:#302a22;text-align:center;max-width:88vw;max-height:90dvh;overflow:auto;box-sizing:border-box}
#playroom-note::backdrop{background:#080604d9}
#playroom-note-text{box-sizing:border-box;white-space:pre-line;width:min(76vw,620px);padding:clamp(28px,7vw,75px);background:#bcae8c;box-shadow:inset 0 0 60px #756142;font:clamp(21px,4vw,33px)/1.7 'Bradley Hand','Segoe Print',cursive;transform:rotate(-1deg)}
#playroom-note-close{margin-top:16px;background:#161311;color:#c7b8a2;border:1px solid #5a4c3c}
#playroom-wall-line{position:absolute;left:4.5%;top:28%;z-index:3;width:26%;margin:0;color:#ccbca4;opacity:0;transform:rotate(-.5deg);text-align:center;font:clamp(10px,1.35vw,17px)/1.3 Georgia,serif;letter-spacing:.18em;text-shadow:0 2px 6px #000;transition:opacity 1.3s;pointer-events:none}
#playroom-wall-line.visible{opacity:.85}
.stage5-placeholder{background:#000}
.stage5-placeholder header{display:none}
#stage5{min-height:80vh;display:grid;place-content:center;text-align:center;gap:12px;color:#b9b0a3;letter-spacing:.2em;font-family:Georgia,serif}
#stage5[hidden]{display:none}
#stage5 p{font-size:14px}
@media(max-width:650px){#playroom{aspect-ratio:1.2}#playroom-wall-line{left:10%;top:21%;width:20%;font-size:clamp(6.5px,1.65vw,8px);line-height:1.2;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.is-active .toy-picture{animation:none}.is-active .toy-picture{filter:brightness(1.1)}}