/* Music room and tactile instrument presentation; shared UI remains outside this scene. */
.music-screen{max-width:1240px;padding:0 10px 14px}
.music-heading{margin:4px 0}.music-heading h1{font-size:clamp(25px,3vw,35px);text-shadow:0 2px #fff}
.music-heading button{background:linear-gradient(#fff0a8,#ffd577);box-shadow:0 4px #c9a668,0 6px 10px #83649b24}
.music-picker{gap:7px;margin:7px 0;overflow-x:auto;overscroll-behavior-x:contain;padding:0 2px 5px;scrollbar-width:thin}
.music-picker button{min-width:88px;min-height:68px;flex:1 0 88px;box-shadow:0 3px #a78ab4,0 5px 8px #77558820;transition:transform .15s,background .15s}
.music-picker button[aria-pressed=true]{background:linear-gradient(#fff0b5,#fbd18c);border-color:#fffbe2;transform:translateY(-2px);box-shadow:0 4px #d0a267,inset 0 0 0 2px #efb459}
.music-picker strong{font-size:12px}.instrument-icon{height:33px;width:47px}
.instrument-icon.drums{background-image:url('music-art/drums-v2.svg')}.instrument-icon.trumpet{background:transparent url('music-art/trumpet.svg') center/contain no-repeat}.instrument-icon.tambourine{background:transparent url('music-art/tambourine.svg') center/contain no-repeat}
.music-meter{margin:3px 5px 7px;font-size:13px}.music-progress{height:8px}
.music-room{position:relative;padding:10px 18px 12px;background:url('music-art/room-v1.webp') center 65%/cover;border:4px solid #fff4df;border-radius:26px;box-shadow:0 6px #ad9cbb,0 12px 24px #72507829;isolation:isolate}
.music-room-label{position:relative;width:fit-content;margin:0 auto;padding:5px 20px 7px;border:2px solid #fff8e8;border-radius:18px;background:linear-gradient(#fffaf2ed,#f5e5daf0);box-shadow:0 4px 8px #5f447b2b;text-align:center;z-index:2}
.music-room h2{margin:0;color:#705681;font-size:21px}.music-room p{margin:2px 0 0;font-size:12px;color:#7e6b84;font-weight:700}
.music-instrument{height:clamp(290px,calc(100dvh - 285px),555px);max-width:1000px;margin:auto;overflow:visible}
.music-note{transition:filter .08s; -webkit-touch-callout:none}.music-note.held{filter:brightness(1.16);outline:3px solid #fff0a6;outline-offset:-3px}.music-note.played{animation:none}
.music-drum-kit{width:min(100%,850px);height:100%;filter:drop-shadow(0 10px 8px #48324a38)}
.music-drum-kit button{background:none!important;border:0!important;box-shadow:none!important;border-radius:28%;overflow:visible;display:block}
.music-drum-kit button:after{display:none}.drum-visual{display:block;position:absolute;inset:0;pointer-events:none}.drum-visual svg{width:100%;height:100%;overflow:visible}
.music-drum-kit button>span:last-of-type{position:absolute;bottom:14%;left:15%;right:15%;width:fit-content;margin:auto;background:#fff8e9e8;border:2px solid #fff;border-radius:14px;padding:3px 10px;font-size:13px;color:#70506e;box-shadow:0 3px 5px #482c5429}
.music-drum-kit .crash{width:31%;height:50%;left:0;top:3%}.music-drum-kit .hat{width:28%;height:48%;right:0;top:7%}.music-drum-kit .tom{width:28%;height:45%;left:32%;top:8%}.music-drum-kit .snare{width:29%;height:44%;left:65%;top:49%}.music-drum-kit .kick{width:38%;height:57%;left:28%;top:42%}
.music-drum-kit .crash>span:last-of-type,.music-drum-kit .hat>span:last-of-type{bottom:49%}.music-drum-kit .kick>span:last-of-type{bottom:23%}
.drum-stick{position:absolute;left:44%;top:0;width:9px;height:49%;border-radius:9px;background:linear-gradient(90deg,#986135,#ffe1a0,#c79552);box-shadow:2px 3px 4px #37294755;opacity:0;transform:rotate(-35deg);transform-origin:50% 100%;pointer-events:none}
.music-drum-kit button.played .drum-stick{animation:music-stick .3s ease-out}.music-drum-kit button.played .drum-face{animation:music-skin .3s ease-out;transform-origin:center;transform-box:fill-box}.music-drum-kit .crash.played .drum-face,.music-drum-kit .hat.played .drum-face{animation:music-cymbal .6s ease-out}.music-drum-kit .kick.played .kick-pedal{animation:music-pedal .3s ease-out;transform-origin:center;transform-box:fill-box}
.music-keys{height:73%;width:92%;padding:35px 12px 19px;border:9px solid #573d77;background:linear-gradient(110deg,#bc8ed6,#70478d 45%,#c698db);box-shadow:0 12px #462e60,0 20px 18px #3d264a44;transform:perspective(1000px) rotateX(9deg);border-radius:25px}
.music-keys:before{content:'LisaLand';position:absolute;top:4px;left:0;right:0;text-align:center;font-size:15px;font-weight:900;letter-spacing:3px;color:#fff1d5;text-shadow:0 2px #604079}
.black-key{top:35px;height:56%}.white-key{background:linear-gradient(95deg,#d0ccc9,#fffdf6 20%,#fffdf6 75%,#d9d1c6);border:1px solid #cbc2be;box-shadow:inset 0 -12px #e1d8c9,0 5px #9e9198;}.white-key.held{transform:translateY(5px);background:linear-gradient(#fffdf1,#ffe3a5);box-shadow:inset 0 -5px #d7c296}.black-key.held{transform:translateY(4px);background:linear-gradient(90deg,#373148,#817084,#252238)}
.music-bars{width:92%;height:73%;background:linear-gradient(100deg,#d0a579,#82583b 48%,#b88a5c);border:7px solid #e4bd8e;box-shadow:0 12px #734b34,0 20px 14px #44314a44;transform:perspective(900px) rotateX(9deg);padding:16px;gap:8px;}
.music-bars button{background:linear-gradient(95deg,#ffffff80,transparent 25%,#00000022 80%,#ffffff40),var(--color);box-shadow:inset 0 -10px #59405c66,0 9px #564451;}.music-bars button.held{transform:translateY(4px)}.music-bars button.played:after{animation:music-mallet .32s ease-out;background:#dec79f;width:16px;height:50px;bottom:60%;left:calc(50% - 8px);box-shadow:0 -10px 0 7px #f6d69d;transform-origin:center bottom}
.music-guitar{width:98%;height:87%;margin:0;border:0;border-radius:0;box-shadow:none;background:url('music-art/guitar-v2.svg') center/contain no-repeat;filter:drop-shadow(0 12px 7px #4c354641)}.music-guitar:before{display:none}.guitar-hole{display:none}.music-guitar button{left:7%;right:23%;top:calc(39% + var(--string)*4%);height:4%;min-height:20px;text-align:right;font-size:13px}.music-guitar button:before{right:0;top:50%;background:linear-gradient(#fff6e0,#b39e86);height:2px;box-shadow:0 2px 1px #422c4555}.music-guitar button span{position:absolute;left:101%;top:0;background:#fff6dc;border:2px solid #f5d9ad;color:#70474a;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-size:12px;padding:0}.music-guitar button.played:before{animation:music-string .32s linear}.music-guitar button.held:before{height:4px;background:#fff0a3}
.music-sax{height:88%;width:87%;filter:drop-shadow(0 10px 7px #65484b33)}.music-sax button,.brass-keys button{background:radial-gradient(circle at 30% 15%,#fffef5,#f4dd9f 40%,#b7813e);border:4px solid #fff1bb;box-shadow:0 6px #a2794e,inset 0 -5px #b99660;font-size:20px;color:#754f42}.music-sax button.held,.brass-keys button.held{transform:translateY(4px);box-shadow:0 2px #9c7347}
.music-trumpet{position:relative;width:95%;height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.trumpet-visual{width:min(90%,720px);height:73%;filter:drop-shadow(0 9px 6px #4b354443)}.trumpet-visual svg{width:100%;height:100%}.brass-keys{display:flex;gap:8px;justify-content:center;width:90%}.brass-keys button{width:11%;min-height:52px;border-radius:50%}.trumpet.sounding .trumpet-visual{animation:music-horn .3s ease-out}
.music-tambourine{width:min(80%,460px);height:95%;position:relative;filter:drop-shadow(0 9px 6px #4b354443)}.music-tambourine>svg{width:100%;height:100%;pointer-events:none}.music-tambourine button{position:absolute;min-width:64px;min-height:54px;border-radius:24px;background:linear-gradient(#fffdf0,#e9d6ed);border:3px solid #fff;box-shadow:0 4px #a588ac;font-size:16px}.music-tambourine .tap{left:34%;right:34%;top:40%;height:24%;background:transparent;box-shadow:none;color:#72537e}.music-tambourine .shake{left:2%;bottom:0}.music-tambourine .jingle{right:2%;bottom:0}.tambourine.sounding>div{animation:music-shake .36s ease-out}.music-tambourine button.held{background:#fff0b3;transform:translateY(3px)}
@keyframes music-stick{0%{opacity:1;transform:rotate(-35deg) translateY(-16px)}40%{opacity:1;transform:rotate(-15deg) translateY(20px)}100%{opacity:0;transform:rotate(-35deg)}}
@keyframes music-skin{40%{transform:scaleY(.92);filter:brightness(1.25)}}@keyframes music-cymbal{20%{transform:rotate(7deg)}45%{transform:rotate(-5deg)}70%{transform:rotate(2deg)}}@keyframes music-pedal{40%{transform:translateY(5px) rotate(7deg)}}
@keyframes music-string{20%,60%{translate:0 -2px}40%,80%{translate:0 2px}}
@keyframes music-mallet{0%{opacity:0;transform:rotate(-25deg) translateY(-20px)}35%{opacity:1;transform:rotate(10deg) translateY(10px)}100%{opacity:0;transform:rotate(-20deg) translateY(-20px)}}
@keyframes music-horn{45%{transform:translateX(4px) rotate(-1deg)}}@keyframes music-shake{20%,60%{transform:rotate(4deg)}40%,80%{transform:rotate(-4deg)}}
@media(max-width:650px){.music-picker button{flex:0 0 86px}.music-room{padding:8px 4px}.music-room-label{padding:4px 10px}.music-room p{font-size:10px}.music-instrument{height:clamp(285px,calc(100dvh - 315px),480px)}.music-note{font-size:12px}.music-drum-kit button>span:last-of-type{font-size:10px;padding:2px 5px}.music-keys{padding-top:30px;width:98%;border-width:5px;gap:1px}.black-key{top:30px}.music-bars{width:97%;gap:3px;padding:8px;border-width:4px}.music-sax{width:97%;padding-left:50%;gap:6px}.brass-keys{width:96%;gap:4px}.brass-keys button{min-height:43px;border-width:2px;font-size:15px}.music-guitar button span{width:20px;height:20px;font-size:10px}}
@media(orientation:landscape) and (max-height:600px){.music-picker button{min-height:56px}.instrument-icon{height:25px}.music-room p{display:none}.music-room-label{padding:3px 14px}.music-room h2{font-size:17px}.music-instrument{height:clamp(245px,calc(100dvh - 235px),330px)}}
@media(prefers-reduced-motion:reduce){.music-screen *{animation:none!important;transition:none!important}}
.music-instrument{height:clamp(260px,calc(100dvh - 375px),520px)}
.instrument-icon.guitar{border:0;border-radius:0;box-shadow:none;background:transparent url('music-art/guitar-v2.svg') center/contain no-repeat}
@media(max-width:650px){.music-instrument{height:clamp(285px,calc(100dvh - 355px),470px)}}
@media(orientation:landscape) and (max-height:600px){.music-instrument{height:clamp(215px,calc(100dvh - 270px),310px)}}
.music-drum-kit .tom>span:last-of-type{bottom:auto;top:24%}
.music-guitar>button span{display:none}
.guitar-notes{position:absolute;bottom:-4%;left:14%;right:14%;display:flex;gap:8px;justify-content:center}
.music-guitar .guitar-pad{position:relative;left:auto;right:auto;top:auto;width:52px;min-height:44px;height:44px;background:linear-gradient(#ffedbc,#dca875);border:3px solid #fff5db;border-radius:15px;box-shadow:0 4px #ad7d57;text-align:center;font-size:16px;flex:1;max-width:75px}
.music-guitar .guitar-pad:before{display:none}.music-guitar .guitar-pad span{position:static;display:inline;background:none;border:0;border-radius:0;font-size:16px;width:auto;height:auto;color:#6b4d44}
.music-guitar .guitar-pad.held{transform:translateY(3px);background:#fff0a3}
@media(max-width:650px){.guitar-notes{left:5%;right:5%;gap:5px;bottom:2%}.music-guitar .guitar-pad{min-height:44px;height:44px;border-width:2px}.music-guitar{height:80%;margin-top:-15%}}
/* Player-facing kit: cymbals behind mounted toms, snare left, floor tom right. */
.music-drum-kit{width:min(100%,820px);position:relative;isolation:isolate}
.music-drum-kit button{position:absolute;touch-action:none}
.music-drum-kit .crash{left:1%;top:0;width:28%;height:52%;z-index:1}
.music-drum-kit .hat{left:0;right:auto;top:37%;width:24%;height:49%;z-index:3}
.music-drum-kit .ride{left:71%;top:1%;width:28%;height:54%;z-index:1}
.music-drum-kit .tom{left:29%;top:11%;width:24%;height:38%;z-index:3}
.music-drum-kit .tom-mid{left:51%;top:14%;width:25%;height:40%;z-index:3}
.music-drum-kit .floor{left:73%;top:49%;width:27%;height:48%;z-index:5}
.music-drum-kit .snare{left:16%;top:50%;width:28%;height:40%;z-index:6}
.music-drum-kit .kick{left:39%;top:43%;width:34%;height:57%;z-index:4}
.music-drum-kit .tom>span:last-of-type,.music-drum-kit .tom-mid>span:last-of-type{top:26%;bottom:auto}
.music-drum-kit .ride>span:last-of-type{bottom:49%}
.music-drum-kit .snare>span:last-of-type,.music-drum-kit .floor>span:last-of-type{bottom:24%}
.music-drum-kit .ride.played .drum-face{animation:music-cymbal .8s ease-out}
.music-trumpet .trumpet-visual{width:98%;height:78%;filter:drop-shadow(0 12px 6px #44343a55)}
.music-tambourine{width:min(86%,480px)}
.music-tambourine svg{filter:drop-shadow(2px 7px 3px #46345145)}
.tambourine.sounding .jingle{animation:music-jingle .45s linear}
.music-flute{width:96%;height:90%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px}
.music-flute>svg{width:100%;height:55%;filter:drop-shadow(0 10px 6px #483b5440)}
.flute.sounding>div>svg{animation:music-horn .3s ease-out}
.music-flute .brass-keys button{background:radial-gradient(circle at 30% 20%,#fff,#c6dce7 45%,#8195b6);border-color:#f5fcff;box-shadow:0 5px #7787a6}
.music-triangle{position:relative;width:min(90%,450px);height:95%}
.music-triangle>svg{width:100%;height:100%;filter:drop-shadow(0 8px 4px #42394c44)}
.music-triangle .triangle-ring{position:absolute;inset:20% 14% 9%;background:transparent;border:0;box-shadow:none;border-radius:25%;color:#68547f;font-size:22px}
.triangle.sounding .triangle-beater{animation:music-beater .35s ease-out;transform-box:fill-box;transform-origin:right bottom}
.instrument-icon.triangle{background:transparent url('music-art/triangle.svg') center/contain no-repeat}.instrument-icon.flute{background:transparent url('music-art/flute.svg') center/contain no-repeat}
@keyframes music-beater{40%{transform:rotate(-22deg) translateX(-15px)}}
@keyframes music-jingle{20%,60%{translate:0 -2px}40%,80%{translate:0 2px}}
@media(max-width:650px){.music-drum-kit button>span:last-of-type{font-size:9px;padding:2px 3px;white-space:nowrap}.music-drum-kit .snare{left:15%;width:30%}.music-triangle .triangle-ring{font-size:18px}.music-flute{gap:12px}}
@media(prefers-reduced-motion:reduce){.music-screen *{animation:none!important}}
.drum-rack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.music-drum-kit .tom{top:20%;left:32%}.music-drum-kit .tom-mid{top:23%;left:53%}.music-drum-kit .kick{top:46%}.music-drum-kit .floor{left:75%;top:52%;width:25%}