/* All coordinates share the unchanged 1672 × 941 room-art plane. */
.piano-focused .room-camera{transform:translateY(-50%) scale(1.025)}
.piano-hotspot{z-index:2}.piano-active .piano-hotspot{pointer-events:none}.piano-hotspot .hotspot-dot{opacity:.45;width:7px;height:7px;box-shadow:0 0 13px #ffd79b55}.piano-active .hotspot-dot{display:none}
.score-glow{position:absolute;pointer-events:none;opacity:0;border-radius:5px;background:#ffe7b51a;box-shadow:0 0 22px #ffe6bb2a;transition:opacity 1s}.score-glow.lit{opacity:1}
.piano-prompt{position:absolute;left:11.8%;top:51.4%;width:25.1%;margin:0;text-align:center;font-family:'Songti SC',serif;font-size:clamp(11px,1.05vw,17px);letter-spacing:.08em;color:#fff0d0;text-shadow:0 1px 8px #251006;pointer-events:none;z-index:4;animation:prompt-appear 1.2s both}
.piano-keys{position:absolute;z-index:6;display:grid;grid-template-columns:repeat(8,1fr);transform:rotate(-1.8deg);transform-origin:center;touch-action:none}
.piano-key{position:relative;min-width:0;height:100%;padding:0;touch-action:none;transition:background .3s;outline-offset:0!important;border-radius:0 0 3px 3px}
.piano-key span{position:absolute;left:0;right:0;top:46%;line-height:1;font:600 clamp(11px,1.15vw,19px) Georgia,serif;text-align:center;color:#fff2dd;text-shadow:0 1px 2px #542d1c,0 0 4px #542d1c;opacity:.33;transition:opacity .35s,transform .14s}
.piano-key.key-current{background:linear-gradient(0deg,#f3bbc04d,transparent 72%)}.piano-key.key-current span{opacity:1;animation:key-breathe 2s ease-in-out infinite}.piano-key.key-done span{opacity:.85;color:#ffe8b4}.piano-key.key-complete{background:linear-gradient(0deg,#ffe1b338,transparent 80%)}.piano-key.key-down span{transform:translateY(2px)}.piano-key.key-down{background:#ffc0c34a}
.piano-actions{position:absolute;left:12%;top:63%;width:25%;display:flex;justify-content:center;gap:18px;z-index:6}.piano-actions button{padding:8px 5px;color:#ffe7c4;font-size:clamp(11px,.92vw,14px);letter-spacing:.08em;opacity:.78;text-shadow:0 1px 8px #2d140b;touch-action:manipulation}.piano-actions button:hover{opacity:1}
.room-particle{position:absolute;left:50%;top:25%;font-size:14px;color:#ffe7ac;pointer-events:none;text-shadow:0 0 8px #fff0c680;animation:small-note .65s ease-out both;z-index:9}
/* Only this feathered crop of the repaired wall is shown; room.webp is untouched. */
.toy-cover{position:absolute;z-index:3;pointer-events:none;background-repeat:no-repeat;mask-image:radial-gradient(ellipse 65% 64% at 50% 50%,#000 64%,transparent 96%)}
.toy-hotspot{position:absolute;z-index:4;padding:0;touch-action:manipulation;overflow:visible;cursor:grab}
.toy-hotspot:active{cursor:grabbing}
.toy-lift{position:absolute;inset:0 12%;transform-origin:50% 36%;transition:transform .1s ease-out}
.toy-body{position:absolute;inset:0;transform-origin:50% 92%;filter:sepia(.17) saturate(.83) brightness(.88) contrast(.94)}
.toy-body>img{width:100%;height:100%;object-fit:contain;clip-path:inset(20% 0 0);pointer-events:none}
.toy-antenna{position:absolute;inset:0;background:url('assets/childhood/red-teletubby.webp') center/contain no-repeat;clip-path:inset(0 0 79%);pointer-events:none;transform-origin:50% 20%}
.toy-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,#38200e30,transparent 55%,#ffd59433);mask:url('assets/childhood/red-teletubby.webp') center/contain no-repeat;mix-blend-mode:soft-light}
.toy-shadow{position:absolute;left:23%;bottom:1%;width:58%;height:8%;border-radius:50%;background:#35180bb3;filter:blur(2px);transform:rotate(2deg);opacity:.7;pointer-events:none}
.toy-pressed .toy-lift{transform:translateY(2px) scale(.98,.96)}
.toy-bounce .toy-lift{animation:toy-pickup 1.5s cubic-bezier(.35,0,.25,1) both}
.toy-bounce .toy-shadow{animation:toy-shadow-lift 1.5s ease-in-out both}
.toy-bounce .toy-antenna{animation:antenna-wiggle .65s ease-in-out 2}
.toy-speaking .toy-body{animation:toy-listening 2.8s ease-in-out infinite}
@keyframes toy-pickup{0%{transform:translateY(1px) scale(1,.96)}18%{transform:translateY(-18px) scale(1.08) rotate(-7deg)}38%{transform:translate(3px,-20px) scale(1.08) rotate(8deg)}58%{transform:translate(-2px,-17px) scale(1.07) rotate(-6deg)}75%{transform:translate(1px,-12px) scale(1.04) rotate(3deg)}90%{transform:translateY(1px) scale(1.02,.98)}100%{transform:none}}
@keyframes toy-shadow-lift{0%,100%{opacity:.7;transform:scale(1) rotate(2deg);filter:blur(2px)}20%,65%{opacity:.25;transform:scale(1.35,.8) translateX(3px);filter:blur(4px)}90%{opacity:.78;transform:scale(1.05)}}
@keyframes toy-listening{0%,100%{transform:rotate(0)}35%{transform:rotate(-1.5deg)}70%{transform:rotate(1deg)}}
.photo-inlays .photo-frame{position:absolute;z-index:3;padding:0;overflow:visible;touch-action:manipulation;transition:filter .25s,transform .25s,box-shadow .25s}.photo-inlays .photo-frame>img{position:relative;inset:auto;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}.photo-frame:after{content:'';position:absolute;inset:-6px;border-radius:inherit}.photo-frame:hover,.photo-frame:focus-visible{filter:brightness(1.12);transform:scale(1.025);box-shadow:0 0 10px 3px #ffdfa32b}.photo-frame.memory-glimmer{animation:frame-glimmer 1.8s ease-in-out}
.memory-name{font-size:12px;letter-spacing:.04em;margin-right:4px}.memory-toast{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);max-width:90%;white-space:nowrap;margin:0;padding:11px 20px;color:#fff1d5;background:#381d195c;backdrop-filter:blur(8px);border-radius:3px;letter-spacing:.09em;font-size:clamp(12px,1.05vw,16px);font-family:'Songti SC',serif;z-index:15;pointer-events:none;animation:prompt-appear .6s both;transition:opacity .35s}.memory-toast.leaving{opacity:0;animation:none}
.photo-inspecting .scene-viewport{filter:blur(1.5px) brightness(.8);transition:filter .4s}.scene-viewport{transition:filter .4s}
.photo-viewer{position:fixed;inset:0;z-index:30;overflow:hidden;touch-action:none;perspective:1400px}.photo-shade{position:absolute;inset:0;background:#20120c24;animation:prompt-appear .4s both}.photo-figure{position:absolute;margin:0;transform:rotate(-2deg);transform-origin:0 0;perspective:1200px;touch-action:none;z-index:1}.photo-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.3,.7,.3,1)}.photo-card.is-flipped{transform:rotateY(180deg)}.photo-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f3e9d9;color:#735b49;box-shadow:0 15px 65px #1b0e0766;border:1px solid #d6c5ad;overflow:hidden}.photo-front{display:flex;flex-direction:column;padding:5% 5% 0}.photo-front img{width:100%;min-height:0;flex:1;object-fit:contain;background:#e6dac8;pointer-events:none}.photo-front p{flex:0 0 10%;margin:0;display:grid;place-items:center;font-size:clamp(10px,1vw,14px);letter-spacing:.12em}.photo-back{transform:rotateY(180deg);padding:15% 10%;display:flex;flex-direction:column;gap:12%;background:repeating-linear-gradient(0deg,transparent 0 28px,#bca88e1a 29px),#f3e9d9}.photo-back small{font-size:12px;color:#8b7864;letter-spacing:.1em}.photo-back p{font-family:'Songti SC',serif;font-size:clamp(16px,2vw,24px);line-height:1.7}.photo-back blockquote{margin:0;font-size:12px;line-height:1.8;opacity:.65}.photo-back>span{margin-top:auto;font-size:9px;letter-spacing:.14em;opacity:.6}
.photo-controls{position:absolute;bottom:max(14px,3dvh);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#fff0d8;white-space:nowrap;z-index:2}.photo-controls button{min-width:40px;min-height:40px;padding:5px 10px;text-shadow:0 2px 8px #29130e;font-size:13px;touch-action:manipulation}.photo-controls #photoPrev,.photo-controls #photoNext{font-size:28px}.photo-controls span{font-size:11px;opacity:.7}.photo-controls button:hover{color:#fff;filter:drop-shadow(0 0 8px #ffde9f)}
.tv-hotspot,.bed-hotspot{position:absolute;z-index:3;padding:0;touch-action:manipulation;border-radius:8px}.tv-hotspot.tv-static{background:repeating-linear-gradient(0deg,#ddddddba 0 1px,#262626b0 1px 3px);animation:crt-noise .12s steps(2) infinite;box-shadow:0 0 16px #c9e7e055}.tv-hotspot:focus-visible{outline-offset:1px}
@keyframes key-breathe{50%{opacity:.5;text-shadow:0 0 8px #ffe4af}}@keyframes prompt-appear{from{opacity:0}to{opacity:1}}@keyframes small-note{from{opacity:.8;transform:translate(0,0) rotate(-12deg)}to{opacity:0;transform:translate(8px,-24px) rotate(15deg)}}@keyframes toy-wiggle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-3deg)}60%{transform:translateY(-2px) rotate(3deg)}80%{transform:translateY(-1px) rotate(-1deg)}}@keyframes antenna-wiggle{25%{transform:rotate(5deg)}60%{transform:rotate(-5deg)}}@keyframes frame-glimmer{50%{filter:brightness(1.2);box-shadow:0 0 20px #ffd89370}}@keyframes crt-noise{50%{filter:brightness(1.3);background-position:0 5px}}
@media(max-height:500px){.memory-name{display:none}.piano-actions{gap:12px;top:62%}.piano-actions button{padding:8px 3px}.photo-controls{bottom:4px;gap:6px}.photo-back{gap:5%;padding:10%}.photo-back p{margin:6px 0}.memory-toast{bottom:8%;padding:9px 13px}.piano-key span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.piano-focused .room-camera{transform:translateY(-50%)}.photo-inspecting .scene-viewport{filter:brightness(.8)}}
/* A clipped world cannot be scrolled vertically by browser focus handling. */
.room-world{overflow:clip}
.piano-key.key-current,.piano-key.key-complete,.piano-key.key-down{background:none}.piano-key:before{content:'';position:absolute;left:0;right:0;top:22%;height:36%;border-radius:0 0 2px 2px;pointer-events:none}.piano-key.key-current:before{background:#f3bbc038}.piano-key.key-complete:before{background:#ffe1b32b}.piano-key.key-down:before{background:#ffc0c360}.piano-key span{top:29%}

.scene-viewport{touch-action:none}.piano-key{min-height:44px}.piano-key span{text-shadow:0 1px 2px #210b05,1px 0 1px #210b05,-1px 0 1px #210b05}

@media(prefers-reduced-motion:reduce){.toy-bounce .toy-lift,.toy-bounce .toy-shadow,.toy-bounce .toy-antenna,.toy-speaking .toy-body{animation:none}.toy-pressed .toy-lift{transform:none}}