/* Piano key dash: the room's floor becomes a keyboard. Keys are drawn in CSS, the pair reuse their art. */
.play-choice>svg.piano-choice-icon{width:65px;height:65px;padding:0;margin-inline:0}
#piano-dialog{max-width:620px;padding:28px;overflow:auto}#piano-dialog h2{margin-bottom:10px;padding-right:22px;font-size:25px}
.piano-stage{position:relative;height:250px;overflow:hidden;border:1px solid #d2be93;border-radius:16px;background:#c3ad7d url('./assets/room.png') center 62%/cover;isolation:isolate;--key-count:6;--inset:16px}
.piano-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#262e2418,#ecca8330 60%,#462d224a)}
.piano-keys{position:absolute;left:var(--inset);right:var(--inset);bottom:14px;height:48%;display:grid;grid-template-columns:repeat(var(--key-count),1fr);gap:4px;touch-action:manipulation}
.piano-key{position:relative;border:1px solid #d6ccb2;border-radius:0 0 10px 10px;background:linear-gradient(#fffef9,#f6f0e0 82%,#e8dfc8);box-shadow:0 3px 0 #cbbf9f,0 5px 10px #4a33201f;color:#8a8471;font-size:13px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 8px;min-width:0;transition:transform .08s,background .15s,box-shadow .15s}
.piano-key[aria-disabled="true"]{cursor:default}
/* The gaps under the black keys still belong to a white key, so no tap falls through. */
.piano-key:before{content:"";position:absolute;inset:0 -2px}
.piano-key.lit{background:linear-gradient(#fffbe0,#fff1b0 70%,#f3dc8b);box-shadow:0 3px 0 #d9bd6a,0 0 22px #ffe99a;color:#80641c}
.piano-key.pressed{transform:translateY(3px);background:linear-gradient(#f4fbef,#dcebcf 70%,#c9dcb6);box-shadow:0 1px 0 #a9bf93,0 0 16px #cfe8b8;color:#3b5b4b}
.piano-key.miss{background:linear-gradient(#fff9f2,#f2e2d0);box-shadow:0 1px 0 #d6bfa4}
.piano-black{position:absolute;top:0;width:9%;height:58%;transform:translateX(-50%);border-radius:0 0 6px 6px;background:linear-gradient(#4a4740,#2f2d29);box-shadow:0 2px 3px #0005;pointer-events:none;z-index:1}
.piano-actor{position:absolute;bottom:calc(48% + 14px);left:var(--x,10%);transform:translateX(-50%);object-fit:contain;pointer-events:none;transition:left .2s ease;z-index:2}
.piano-cat{width:17%;height:40%}
.piano-fairy{width:13.6%;height:32%;filter:drop-shadow(0 0 10px #fff0c2)}
.piano-actor.hop{animation:piano-hop .32s ease}
.piano-stage[data-phase="paused"]:after{content:"ひと休み";position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#fffbedb8;font-size:21px;color:#3b5b4b;backdrop-filter:blur(2px)}
.piano-notes{display:flex;list-style:none;justify-content:center;gap:8px;margin:12px 0 4px;padding:0;min-height:18px}.piano-notes li{width:14px;height:14px;border-radius:50%;border:1px solid #cfc9b3;background:#f0efe3}.piano-notes li.done{background:#9dbb86;border-color:#7f9f69}
.piano-feedback{font-size:14px!important;text-align:center;min-height:3.4em;line-height:1.7;margin:3px 0 8px;color:var(--muted)}
.piano-controls{display:flex;justify-content:center}.piano-pause{border:1px solid #cbd2bd;border-radius:12px;padding:10px 18px;min-height:44px;font-size:14px;background:#fffdf4;color:#527152;min-width:120px}
.piano-sound-note{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px!important;line-height:1.7;color:#865c28;background:#fbf2dc;border:1px solid #ecd9ae;border-radius:12px;padding:8px 12px;margin:0 0 12px}.piano-sound-note[hidden]{display:none}
.piano-sound-note button{border:1px solid #cbd2bd;border-radius:10px;background:#fffdf4;color:#285c50;min-height:40px;padding:6px 14px;font-size:14px;font-weight:600}.piano-sound-note button[hidden]{display:none}
.piano-keyboard{text-align:center;font-size:12px!important;color:var(--muted);margin-top:7px}
@keyframes piano-hop{45%{transform:translateX(-50%) translateY(-22px)}}
@media(max-width:600px){#piano-dialog{padding:23px 18px;width:calc(100% - 20px)}#piano-dialog h2{font-size:22px}.piano-stage{height:220px;--inset:10px}.piano-keys{gap:3px}.piano-key{font-size:12px}.piano-keyboard{display:none}}
@media(max-height:700px){.piano-stage{height:200px}.piano-feedback{min-height:1.8em}#piano-dialog{padding-top:20px}}
/* While playing on short screens, the intro text gives way so the keys stay in view. */
@media(max-height:760px){#piano-dialog[data-playing] :is(.eyebrow,.yarn-intro,.yarn-best,.piano-sound-note){display:none}}
@media(max-height:500px){#piano-dialog[data-playing] h2{display:none}#piano-dialog[data-playing] .piano-stage{height:170px}#piano-dialog[data-playing] .yarn-hud{padding-right:52px}}
@media(prefers-reduced-motion:reduce){.piano-actor{transition:none}.piano-actor.hop{animation:none}}
:root[data-reduce-motion="true"] .piano-actor{transition:none}:root[data-reduce-motion="true"] .piano-actor.hop{animation:none}