#modal.piano-playing{width:min(1200px,98vw);max-width:98vw;padding:12px;background:#100d0b}
.piano-playing #modalBody>h2:empty{display:none}.piano-stage{position:relative;width:100%;overflow:hidden}.piano-stage>img{display:block;width:100%}
.piano-key{position:absolute;padding:0;border:0;border-radius:0;background:transparent!important;cursor:pointer;min-height:0;box-shadow:none;transform-origin:top}
.piano-key span{font:italic clamp(9px,1vw,15px) Georgia;color:#302013b3;pointer-events:none}
.piano-key:focus-visible{outline:2px solid #e1c17e}.piano-key.pressed{background-image:url('assets/piano-seated-v2.png')!important;background-size:var(--key-size)!important;background-position:var(--key-position)!important;animation:piano-press .24s ease-out}.piano-black{z-index:2}
@keyframes piano-press{0%,45%{transform:translateY(3px);box-shadow:inset 0 8px 12px #160f0ab0}100%{transform:none;box-shadow:none}}
#pianoReadScore{position:absolute;left:36%;top:27%;width:29%;height:30%;border:0;background:transparent;padding:0;cursor:zoom-in}
.piano-score{position:absolute;inset:12% 5% auto;background:#c7ad7c;color:#302215;padding:20px;box-shadow:0 5px 60px #000;border:1px solid #76542f;z-index:6}
.piano-score[hidden],#pianoCompartment[hidden]{display:none}.piano-score svg{width:100%;fill:currentColor;font-family:Georgia,serif}.piano-score svg path{stroke:currentColor;stroke-width:1.6}.score-title{font-size:26px;font-style:italic}
#pianoCompartment{position:absolute;right:6%;top:64%;width:24%;padding:12px;color:#dfc79d;background:linear-gradient(#080503,#302014);border:6px ridge #38271a;box-shadow:0 12px 15px #000b;animation:drawer-slide .6s ease-out}
#pianoCompartment span{display:block}#pianoCompartment button{font-size:13px;margin-top:7px}#pianoFeedback{font:15px Georgia;text-align:center;min-height:36px;margin:12px}
@keyframes drawer-slide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(max-width:700px) and (orientation:portrait){.piano-stage{width:220%;margin-left:-60%}.piano-playing #modalBody{overflow:hidden}.piano-score{inset:12% 2% auto;padding:8px}#pianoCompartment{right:27%;width:21%;top:64%;font-size:12px}.piano-key span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.piano-key.pressed,#pianoCompartment{animation:none}}

#modal.piano-playing{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#100d0b;overflow:hidden}
.piano-playing #modalBody{position:relative;width:100%;height:100%;padding:0}.piano-playing #modalBody>.actions{position:absolute;bottom:12px;left:12px;z-index:5}.piano-playing .piano-stage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(100vw,177.7778dvh);margin:0}
.piano-playing #pianoFeedback{position:absolute;top:12px;left:10%;right:10%;margin:0;padding:8px;background:#100d0bb0;color:#e2cfaa;font:14px Georgia;pointer-events:none}.piano-playing .piano-score{inset:15% 10% auto}
@media(max-width:700px) and (orientation:portrait){.piano-playing .piano-stage{width:220vw}.piano-playing .piano-stage.piano-solved{left:-10%;transform:translate(-50%,-50%)}.piano-playing .piano-score{inset:20% 2% auto}.piano-playing #pianoFeedback{left:5%;right:12%;font-size:13px}}
#pianoCompartment{left:82%;right:auto;top:65%;width:16%;height:17%;padding:0;background:none;border:0;box-shadow:none}#pianoCompartment span{display:none}#pianoCompartment button{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:transparent;cursor:pointer}#pianoCompartment button:focus-visible{outline:2px solid #e5ca95}

/* Readable note names and broader ivory targets on desktop and touch screens. */
.piano-key:not(.piano-black){top:80%!important;height:11.2%!important;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;outline:1px solid #372a164d;outline-offset:-1px}
.piano-key span{display:block;background:#ead6a9f2;color:#21170e;font:bold clamp(14px,1.3vw,20px)/1.15 Georgia,serif;padding:2px 3px;border-radius:2px;box-shadow:0 1px 3px #0006;text-shadow:none}
.piano-key:not(.piano-black):hover,.piano-key:not(.piano-black):focus-visible{box-shadow:inset 0 0 0 2px #e3b858}
.piano-key.pressed span{background:#e1b44f;color:#110d07;transform:translateY(2px)}
@media(max-width:700px) and (orientation:portrait){.piano-key span{font-size:15px;padding:2px}.piano-playing #pianoFeedback{font:15px/1.4 Georgia,serif}}
/* Keep exits above the full-screen scene and score, including phone safe areas. */
#modal.piano-playing>#closeModal{position:absolute;z-index:30;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:48px;height:48px;padding:0;background:#17110de6;border:1px solid #e0c99b80;color:#fff1d4;pointer-events:auto}
.piano-playing #modalBody>.actions{position:absolute;z-index:20;bottom:max(12px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));margin:0;display:block}
.piano-playing #modalBody>.actions button{min-height:48px;background:#21180ff2;color:#fff1d4;border-color:#d7bc83}
.piano-playing .piano-score{max-height:calc(100dvh - 150px);overflow:auto;padding-bottom:12px}
#pianoFoldScore{position:sticky;bottom:0;display:block;min-height:48px;background:#302012;color:#fff1d4;border:1px solid #76542f}
.piano-playing .piano-score{cursor:pointer}
/* One physical keyboard layer: painted keys and interaction share exact geometry. */
.piano-keyboard{position:absolute;left:0;right:0;top:76%;height:16%;background:#130c07;border-top:6px solid #2a1c11;border-bottom:8px ridge #382619;box-shadow:0 -6px 12px #0009,0 5px 8px #000b;isolation:isolate}
.piano-keyboard .piano-key:not(.piano-black){top:0!important;height:100%!important;border:1px solid #42321e;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#baa371 0%,#e5d5ac 12%,#dcc99d 76%,#bca371 100%)!important;box-shadow:inset 0 12px 16px #302014aa,inset 0 -7px 0 #9a8156;outline:none;padding-bottom:8px;touch-action:manipulation}
.piano-keyboard .piano-key span{font:bold clamp(12px,1.2vw,18px)/1 Georgia;background:none;box-shadow:none;color:#382514;padding:0;min-height:1em}
.piano-keyboard .piano-black{top:0!important;height:61%!important;border:1px solid #090704;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#080706,#514638 25%,#191511 45%,#090807 85%)!important;box-shadow:3px 5px 4px #0009,inset 0 -8px 1px #080604;touch-action:manipulation}
.piano-keyboard .piano-key.pressed{background-image:none!important;animation:none;transform:translateY(3px);filter:brightness(.76);box-shadow:inset 0 12px 20px #20160f99!important}
.piano-keyboard .piano-key:focus-visible{outline:2px solid #f4c869;outline-offset:-3px}
.piano-keyboard .piano-key:hover{filter:brightness(1.12)}
@media(max-width:700px) and (orientation:portrait){.piano-playing .piano-stage{width:280vw}.piano-keyboard{height:18%}.piano-keyboard .piano-key span{font-size:16px}}
/* Worn ivory, matte ebony, grain and bevels share each button's exact surface. */
.piano-keyboard{transform:perspective(950px) rotateX(16deg);transform-origin:50% 100%;border-top:4px solid #160f0b;border-bottom:7px solid #251a12;box-shadow:0 -5px 12px #000c,0 5px 9px #000b}
.piano-keyboard .piano-key:not(.piano-black){border-color:#30271dbb;border-radius:0 0 2px 2px;background:linear-gradient(180deg,#160f0eb0 0%,#2c221449 16%,transparent 44%,#eddcc220 83%,#8b725b 84%,#bcaa8a 89%,#86735b 100%),repeating-linear-gradient(88deg,transparent 0px,#493c2110 1px,transparent 2px,transparent 9px),linear-gradient(90deg,#91816a 0%,#c9bda3 6%,#d0c2a5 45%,#baad91 93%,#796b58 100%)!important;box-shadow:inset 1px 0 1px #ead7ad55,inset -1px 0 1px #120b06aa,inset 0 3px 10px #0009;filter:none;padding-bottom:14px}
.piano-keyboard .piano-key:not(.piano-black):nth-child(4n){filter:sepia(.12) brightness(.91)}
.piano-keyboard .piano-key:not(.piano-black):nth-child(7n){filter:brightness(.96)}
.piano-keyboard .piano-key:not(.piano-black)::after{content:'';position:absolute;inset:4% 10% 22%;pointer-events:none;opacity:.35;background:linear-gradient(4deg,transparent 62%,#47321e55 62.5%,transparent 63%),repeating-linear-gradient(94deg,transparent 0 17px,#f0e2c31c 18px,transparent 19px 31px)}
.piano-keyboard .piano-black{border-color:#070605;background:linear-gradient(180deg,#050505 0%,#11100e 24%,#26231e 79%,#51483a 82%,#14120f 86%,#060504 100%),repeating-linear-gradient(90deg,#090807 0 3px,#2a251d 4px,#090807 5px 8px)!important;box-shadow:2px 5px 4px #000b,inset 1px 0 1px #8c7a5a50,inset -2px 0 1px #000;border-radius:0 0 2px 2px}
.piano-keyboard .piano-key span{font:italic bold clamp(13px,1.1vw,18px)/1 Georgia,serif;color:#382b20;text-shadow:0 1px #e1d1af60;transform:rotate(-4deg);z-index:3}
.piano-keyboard .piano-key.pressed{transform:translateY(3px) rotateX(-2deg);filter:brightness(.83)!important;background-size:auto!important}
.piano-keyboard .piano-key:hover{filter:brightness(1.06)!important}
@media(max-width:700px) and (orientation:portrait){.piano-keyboard .piano-key span{font-size:16px}}

/* Restore the photographed drawer in front of the playable keyboard. The
   clipping follows the drawer itself, leaving the surrounding keys playable. */
.piano-stage .piano-keyboard{z-index:1}
.piano-stage.piano-solved::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:url('assets/piano-key-reveal.png') center/100% 100% no-repeat;clip-path:polygon(82.7% 66.3%,93.8% 66.3%,98% 72.1%,98% 80.4%,84.5% 80.7%,82.7% 74.8%)}
.piano-stage #pianoCompartment{z-index:4}