/* Authentic-looking fixed 2-octave piano. Same physical geometry for all songs/instruments. */
.keyboard.piano-keyboard{
 display:block;position:relative;overflow:hidden;gap:0;
 height:clamp(180px,28vw,300px);min-height:0;
 padding:8px 7px 12px;
 background:linear-gradient(180deg,#d5b5ef,#e9d8ff);
 border:6px solid #b18ed9;border-radius:22px;
 box-shadow:inset 0 4px 0 rgba(255,255,255,.5),0 8px 0 #8759b7;
 touch-action:none;
}
.piano-white-strip{position:relative;z-index:1;display:flex;width:100%;height:100%;gap:0}
.keyboard.piano-keyboard .key.piano-white{
 position:relative;display:block;flex:1 1 0;
 min-width:0;width:auto;padding:0;
 background:linear-gradient(180deg,#fff 0%,#fff 68%,#f2ecfa 100%);
 border:1px solid #d7cfe3;border-bottom:4px solid #cec2dc;border-radius:0 0 7px 7px;
 box-shadow:inset 0 -7px rgba(152,136,176,.06),1px 0 0 rgba(237,233,244,.8);
 color:#625572;transform:none;touch-action:none;
 font-family:'Jua',sans-serif;z-index:1;
}
.keyboard.piano-keyboard .key.piano-white:first-child{border-radius:7px 0 7px 7px}
.keyboard.piano-keyboard .key.piano-white:last-child{border-radius:0 7px 7px 7px}
.keyboard.piano-keyboard .key.piano-white::before{content:none}
.keyboard.piano-keyboard .key.piano-white .piano-key-label{
 position:absolute;bottom:17px;left:0;right:0;pointer-events:none;
 text-align:center;font-size:clamp(12px,1.7vw,21px);font-weight:400;
}
.keyboard.piano-keyboard .key.piano-white .piano-octave-label{
 position:absolute;bottom:3px;left:0;right:0;text-align:center;
 color:#a397b2;font:800 9px 'Nunito',sans-serif;pointer-events:none;
}
.piano-black-layer{position:absolute;top:8px;bottom:12px;left:7px;right:7px;z-index:3;pointer-events:none}
.keyboard.piano-keyboard .key.piano-black{
 position:absolute;top:0;width:4.15%;height:62%;min-width:0;padding:0;
 pointer-events:auto;touch-action:none;
 background:linear-gradient(95deg,#514b60 0%,#322d3e 16%,#25212f 67%,#3b344c 100%);
 border:1px solid #241f33;border-bottom:6px solid #1c1729;
 border-radius:0 0 8px 8px;box-shadow:2px 5px 4px rgba(33,20,43,.3),inset 1px 0 rgba(255,255,255,.22);
 transform:translateX(-50%);color:white;z-index:4;font-family:'Jua',sans-serif;
}
.keyboard.piano-keyboard .key.piano-black::before{content:none}
.keyboard.piano-keyboard .key.piano-black .piano-key-label{
 position:absolute;left:0;right:0;bottom:11px;text-align:center;
 font-size:clamp(10px,1.5vw,16px);color:#eae3f5;pointer-events:none;
}
.keyboard.piano-keyboard .key.piano-white.pressed{
 background:linear-gradient(180deg,#fff8d7,#ffebb3);border-bottom-width:1px;
 box-shadow:inset 0 0 0 2px #f1cc79;
}
.keyboard.piano-keyboard .key.piano-black.pressed{
 background:linear-gradient(110deg,#aa92c2,#765a93);
 border-bottom-width:2px;box-shadow:inset 0 0 0 2px #ffe18c;
}
.keyboard.piano-keyboard .key.highlight{
 animation:piano-pulse 1.15s ease-in-out infinite;
 opacity:1;filter:none;outline:0;box-shadow:inset 0 0 0 4px #f3b832;
}
.keyboard.piano-keyboard .key.piano-white.highlight{
 background:linear-gradient(180deg,#fffce6,#ffe7b3);
 border-bottom-color:#e2b963;
}
.keyboard.piano-keyboard .key.piano-black.highlight{
 background:linear-gradient(180deg,#8567b3,#563b80);
 box-shadow:inset 0 0 0 3px #ffda6e,0 4px 6px rgba(40,20,61,.25);
}
.keyboard.piano-keyboard .key.highlight::after{
 content:'★';position:absolute;top:34%;left:0;right:0;text-align:center;
 font-size:clamp(12px,1.9vw,21px);color:#eaa624;text-shadow:0 1px #fff3c1;pointer-events:none;animation:none;
}
.keyboard.piano-keyboard .key.piano-black.highlight::after{color:#ffe7aa;text-shadow:none;top:21%}
.keyboard.piano-keyboard .key.dimmed{opacity:1}
@keyframes piano-pulse{50%{filter:brightness(1.09)}}
.orientation-hint{display:none;color:#8c7fa3;text-align:center;font-weight:800;font-size:12px}
@media (orientation:portrait) and (max-width:650px){
 .orientation-hint{display:block;margin:-7px 0 12px}
 .keyboard.piano-keyboard{height:235px;padding:6px 4px 8px;border-width:4px}
 .piano-black-layer{top:6px;bottom:8px;left:4px;right:4px}
 .keyboard.piano-keyboard .key.piano-white .piano-key-label{font-size:12px;bottom:13px}
 .keyboard.piano-keyboard .key.piano-white .piano-octave-label{font-size:8px}
 .keyboard.piano-keyboard .key.piano-black .piano-key-label{font-size:10px}
}
@media(orientation:landscape) and (max-height:540px){
 .topbar{height:48px}
 .header-right .page-name{display:none}
 .main-content{padding-top:6px;padding-bottom:8px}
 .section-heading{margin-bottom:6px}
 .section-heading h2{font-size:26px}
 .section-heading .overline,.section-heading p:not(.overline){display:none}
 .section-sticker{font-size:24px}
 .instrument-list,.song-list{margin:0 -10px 6px;padding:1px 10px 6px;flex-wrap:nowrap;overflow-x:auto}
 .pick,.song-pick{min-height:37px;padding:5px 12px;font-size:15px}
 .stage{padding:8px;border-radius:19px}
 .stage-header{margin-bottom:6px}
 .stage-title>span{width:38px;height:38px;font-size:24px}
 .stage-title strong,.song-message strong{font-size:17px}
 .stage-title small,.song-message small{font-size:10px}
 .song-progress{align-items:center;flex-wrap:nowrap;gap:10px}
 .song-buttons{width:auto}
 .action-button{padding:8px 10px}
 .progress-track{margin:8px 0}
 .keyboard.piano-keyboard{height:clamp(120px,35vh,180px);min-height:0;padding:5px 5px 7px;border-width:4px;border-radius:14px}
 .piano-black-layer{top:5px;bottom:7px;left:5px;right:5px}
 .keyboard.piano-keyboard .key.piano-white .piano-key-label{font-size:clamp(12px,1.7vw,18px);bottom:10px}
 .keyboard.piano-keyboard .key.piano-white .piano-octave-label{font-size:8px;bottom:1px}
 .keyboard.piano-keyboard .key.piano-black .piano-key-label{bottom:6px;font-size:11px}
 .stage-footer{margin-top:7px}
 .song-tempo-controls{margin:8px 4px;padding:5px 9px}
 .key-helper{margin:5px auto;font-size:10px}
 .footer{padding:2px 4px 6px;font-size:9px}
}
@media (orientation:landscape) and (min-height:541px) and (max-height:850px){
 .keyboard.piano-keyboard{height:clamp(210px,31vh,292px)}
 .instrument-list,.song-list{margin-bottom:12px}
 .section-heading{margin-bottom:13px}
}
@media(prefers-reduced-motion:reduce){.keyboard.piano-keyboard .key.highlight{animation:none}}
@media (orientation:landscape){
 .song-list,.instrument-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .song-list::-webkit-scrollbar,.instrument-list::-webkit-scrollbar{display:none}
 .song-pick,.pick{flex:0 0 auto}
}