.piano-screen{position:absolute;inset:0;overflow:visible;background:transparent;touch-action:none;container-type:size}
.piano-backdrop{position:absolute;top:0;left:50%;width:100cqh;height:100%;transform:translateX(-50%);background:url('assets/final/piano/stage-wide-v3.png') center/100% 100% no-repeat}
.piano-header{position:absolute;left:5%;right:5%;top:5%;display:flex;gap:18px;align-items:center;z-index:8}
.piano-score{display:flex;align-items:center;gap:5px;min-width:110px;padding:7px 18px;background:#fff3df;border:2px solid #ac80c1;border-radius:10px;color:#613f76;font-size:22px;font-weight:800}
.piano-score .ui-icon{width:26px;height:26px}
.piano-trio{position:absolute;inset:0;pointer-events:none;z-index:2}
.piano-member{position:absolute;top:43%;height:29%;width:28%;pointer-events:none;filter:drop-shadow(0 5px 3px #29123f44)}
.piano-mina{left:7%}.piano-yuna{left:36%;top:43.5%}.piano-hana{left:65%;top:44%;height:28%}
.piano-member .hero-motion-frame{height:100cqh;width:calc(100cqh*var(--motion-ratio))}
.piano-member{container-type:size}
/* Fixed stage depth for every costume and motion frame: Mina, Hana, Yuna. */
.piano-mina{z-index:1}
.piano-hana{z-index:2}
.piano-yuna{z-index:3}
.piano-yuna>.hero-motion{left:50%;top:0;right:auto;bottom:auto;width:calc(100cqh*.6564103);height:100%;max-width:none;transform:translateX(-50%);object-fit:fill}
.piano-member>img,.piano-member>video,.piano-member>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.piano-keyboard{position:absolute;left:-2%;width:104%;bottom:0;height:29%;z-index:4}
.piano-keyboard>img{width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.piano-keys{position:absolute;left:5%;right:5%;top:12%;bottom:17%;display:grid;grid-template-columns:repeat(7,1fr)}
.piano-key{position:relative;border:0;background:transparent;box-shadow:none;padding:0;border-radius:0;touch-action:manipulation}
.piano-target,.piano-ring{display:none;position:absolute;left:50%;top:65%;width:62%;aspect-ratio:1;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 5px #704c98}
.has-cue .piano-target,.has-cue .piano-ring{display:block}.piano-ring{width:calc(62% * var(--ring-scale,1));transform:translate(-50%,-50%);border:1px solid #fff;box-shadow:0 0 0 .5px #382246,inset 0 0 0 .5px #382246;opacity:1}
.on-beat .piano-target{background:#ffe9749c}.piano-key[data-feedback=hit] .piano-target{display:block;background:#81e49fbf}.piano-key[data-feedback=miss] .piano-target{display:block;background:#e482a4a6}
.piano-key:focus-visible{outline:2px solid #fff;border-radius:5px}.piano-tutorial{position:absolute;left:13%;right:13%;top:59%;z-index:7;padding:14px 18px;border:2px solid #e4bded;border-radius:15px;background:#fff4edec;color:#67477c;font-weight:800;font-size:clamp(14px,4cqw,20px);box-shadow:0 4px 18px #2b1e5266}
.concert-card .piano-card-icon{width:70px;height:70px;object-fit:contain}

/* Two physical synth tiers keep all seven note IDs and their original timing. */
#game #overlay:has(>.piano-screen){left:50%;right:auto;width:min(100vw,100dvh);height:100dvh;transform:translateX(-50%)}
.piano-screen{--target-size:clamp(48px,13cqw,76px);overflow:hidden}
.piano-header{top:max(12px,env(safe-area-inset-top));left:12px;right:12px;gap:12px;pointer-events:none}
.piano-header button{pointer-events:auto}
.piano-back{width:48px;height:48px;flex:none}
.piano-score{min-width:0;font-size:clamp(18px,4cqw,25px);padding:8px 14px}
.piano-member{top:24%;height:30%;width:28%}
.piano-yuna{top:24%;height:30%}.piano-hana{top:25%;height:29%}
.piano-rig{position:absolute;z-index:4;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(100%,660px);height:43%;display:flex;flex-direction:column;gap:6px}
.piano-keyboard{position:relative;left:auto;bottom:auto;width:100%;height:calc((100% - 6px)/2);flex:1;min-height:0}
.piano-tier-0{width:88%;align-self:center}
.piano-keys{left:6%;right:6%;top:23%;bottom:17%;grid-template-columns:repeat(var(--keys),1fr)}
.piano-target,.piano-ring{top:61%;width:var(--target-size);height:var(--target-size);aspect-ratio:1;border:2px solid #fff;box-shadow:0 0 0 2px #583971,0 0 8px #9d5fe0;background:#9f60c32b}
.piano-ring{width:calc(var(--target-size)*var(--ring-scale,1));height:calc(var(--target-size)*var(--ring-scale,1));border:2px solid white;background:transparent;box-shadow:0 0 0 1px #583971,inset 0 0 0 1px #583971}
.piano-key-label{position:absolute;left:0;right:0;bottom:-20%;font-size:12px;line-height:1;color:#5b4377;font-weight:800;pointer-events:none;white-space:nowrap;text-shadow:0 1px #fff}
.piano-key-label kbd{font:inherit;font-size:10px;opacity:.65;margin-left:3px}
.piano-tutorial{top:12%;left:14%;right:14%;padding:12px;font-size:clamp(14px,3.5cqw,19px)}
@media(max-height:540px) and (orientation:landscape){
 #game #overlay:has(>.piano-screen){width:min(100vw,1100px)}
 .piano-screen{--target-size:48px}
 .piano-backdrop{width:100%;background-size:cover}
 .piano-rig{width:66%;height:70%;left:auto;right:12px;transform:none;bottom:8px}
 .piano-trio{width:32%;top:22%;height:75%}
 .piano-member{top:14%;height:70%;width:44%}.piano-mina{left:0}.piano-yuna{left:27%;top:14%}.piano-hana{left:56%;top:14%;height:70%}
 .piano-tutorial{top:12px;left:36%;right:12px;padding:8px;font-size:14px}
 .piano-key-label{font-size:11px}
}

/* One physical 3×2 controller; hitboxes align with its six colored faces. */
.piano-controller{display:block;width:min(96%,660px,60.9cqh);height:auto;aspect-ratio:1.45;bottom:max(12px,env(safe-area-inset-bottom))}
.piano-controller-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.piano-pads{position:absolute;inset:16.5% 7.4% 16.5% 7.4%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3% 3%}
.piano-pads .piano-key{border-radius:15%;isolation:isolate;min-width:0;min-height:0}
.piano-pads .piano-target,.piano-pads .piano-ring{top:50%;background:transparent}
.piano-pads .piano-target{border-color:#fff;box-shadow:0 0 0 2px #201629,0 0 8px var(--pad-color)}
.piano-pads .piano-ring{box-shadow:0 0 0 1px #201629,inset 0 0 0 1px #201629}
.piano-pads .on-beat .piano-target{background:#fff2}
.piano-pad-glow{position:absolute;inset:5%;border-radius:13%;background:radial-gradient(ellipse,color-mix(in srgb,var(--pad-color) 65%,white),var(--pad-color) 35%,transparent 75%);opacity:calc(var(--pad-press,0)*.65);pointer-events:none;transition:opacity 60ms linear}
.piano-pads .piano-key-label{bottom:8%;color:#fff;opacity:.85;font-size:clamp(11px,2.4cqw,15px);text-shadow:0 1px 3px #100d20}
.piano-pads .piano-key-label kbd{font-size:inherit;opacity:.65}
.piano-pads .piano-key:focus-visible{outline:3px solid white;outline-offset:-6px;border-radius:15%}
.piano-feedback{display:none;position:absolute;top:8%;left:0;right:0;font-size:clamp(10px,2.4cqw,14px);font-weight:800;color:white;text-shadow:0 1px 3px #130d22;pointer-events:none}
.piano-pads [data-feedback] .piano-feedback{display:block}
.piano-pads [data-feedback=miss] .piano-feedback{color:#ffd8e3}
.piano-pads [data-feedback=hit] .piano-target{display:block;background:#fff4}
.piano-pads [data-feedback=miss] .piano-target{background:transparent}
.piano-lights{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.piano-light{position:absolute;inset:0;opacity:0;transition:opacity 65ms linear;mix-blend-mode:screen}
.piano-light-beam{position:absolute;left:var(--origin);top:-4%;width:34%;height:65%;transform:translateX(-50%) rotate(var(--beam-angle));transform-origin:50% 0;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:linear-gradient(180deg,#fff9,color-mix(in srgb,var(--pad-color) 90%,transparent) 20%,transparent);filter:blur(3px)}
.piano-light-pool{position:absolute;left:var(--pool-x);top:var(--pool-y);width:37%;height:13%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,var(--pad-color),transparent 68%);filter:blur(5px)}
@media(max-height:540px) and (orientation:landscape){
 .piano-controller{width:min(64%,103cqh);height:auto;aspect-ratio:1.45;right:12px;bottom:8px}
 .piano-lights{width:100%}
 .piano-light-pool{top:72%}
}