/* ── PIANO ── */
#pianoScreen{display:none;position:fixed;inset:0;z-index:10;background:url('../Images/GameAssets/Piano/BG.png') center/cover no-repeat;overflow:hidden;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:clamp(18px,3.5vh,36px);}
#pianoScreen::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#1a1a2e,#16213e,#0f3460);opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:0;}
#pianoScreen.calm-bg::before{opacity:1;}
/* calm — no outer glow on press, no glow overlay */
#pianoScreen.calm-bg .pw-white.pressed{box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset -2px 0 4px rgba(0,0,0,.07),inset 0 6px 12px rgba(0,0,0,.16),0 3px 0 #787878,0 4px 6px rgba(0,0,0,.25);}
#pianoScreen.calm-bg .pw-black.pressed{box-shadow:inset 0 1px 3px rgba(255,255,255,.22),inset 2px 0 3px rgba(255,255,255,.07),inset 0 4px 8px rgba(0,0,0,.6),0 2px 0 #000,0 3px 6px rgba(0,0,0,.5);}
#pianoScreen.calm-bg .pw-glow{display:none;}
.piano-note-display{font-size:clamp(2.8rem,12vw,5.5rem);font-weight:900;color:white;text-align:center;min-height:1.1em;transition:opacity .4s,color .15s;letter-spacing:2px;position:absolute;top:clamp(68px,11vh,110px);left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap;
  -webkit-text-stroke:clamp(2px,0.5vw,4px) rgba(0,0,0,.55);
  paint-order:stroke fill;
  text-shadow:0 0 40px var(--note-glow,white),0 2px 0 rgba(0,0,0,.4);}
.piano-wrap{position:relative;overflow:visible;width:100%;padding:0 0 10px;}
.piano-keys{position:relative;display:flex;align-items:flex-start;width:100%;height:clamp(170px,50vh,310px);overflow:visible;}
/* 3-D key base */
.pw-key{border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:0 0 10px 10px;font-family:'Baloo 2',cursive;position:relative;touch-action:none;transition:transform 45ms ease-out,box-shadow 45ms ease-out;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.pw-white{
  background:linear-gradient(180deg,#ffffff 0%,#f8f8f8 5%,#f2f2f2 70%,#e2e2e2 100%);
  flex:1;height:100%;margin:0 1.5px;z-index:1;overflow:hidden;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.95),
    inset -2px 0 4px rgba(0,0,0,.07),
    inset 1px 0 2px rgba(255,255,255,.6),
    0 9px 0 #787878,
    0 11px 18px rgba(0,0,0,.45);}
.pw-white.pressed{
  transform:translateY(6px);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.95),
    inset -2px 0 4px rgba(0,0,0,.07),
    inset 0 6px 12px rgba(0,0,0,.16),
    0 0 28px 8px var(--glow-col,rgba(255,200,100,.5)),
    0 0 56px 16px var(--glow-col2,transparent),
    0 3px 0 #787878,
    0 4px 6px rgba(0,0,0,.25);}
.pw-black{
  background:linear-gradient(180deg,#3c3c3c 0%,#222 25%,#111 65%,#080808 100%);
  position:absolute;z-index:2;top:0;height:60%;overflow:hidden;
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.22),
    inset 2px 0 3px rgba(255,255,255,.07),
    0 7px 0 #000,
    0 9px 16px rgba(0,0,0,.7);}
.pw-black.pressed{
  transform:translateY(4px);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.22),
    inset 2px 0 3px rgba(255,255,255,.07),
    inset 0 4px 8px rgba(0,0,0,.6),
    0 0 22px 8px var(--glow-col,rgba(255,200,100,.5)),
    0 2px 0 #000,
    0 3px 6px rgba(0,0,0,.5);}
.pw-label{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:clamp(.48rem,.9vw,.62rem);font-weight:800;color:#bbb;pointer-events:none;z-index:3;text-shadow:0 1px 0 rgba(255,255,255,.5);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.pw-black .pw-label{display:none;}
/* glow overlay — held=steady, pulse=fade on release */
.pw-glow{position:absolute;inset:0;border-radius:0 0 10px 10px;pointer-events:none;opacity:0;}
.pw-glow.held{opacity:1;transition:none;}

.pw-glow.fade{opacity:0;animation:pwGlowFade .35s ease-out forwards;}
/* piano cog button */
#pianoCog{position:absolute;top:14px;right:14px;z-index:30;background:rgba(255,255,255,.82);border:2px solid rgba(0,0,0,.07);border-radius:50%;width:44px;height:44px;font-size:1.25rem;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;}
/* settings backdrop */
#pianoSettingsBg{display:none;position:fixed;inset:0;z-index:28;}
/* settings panel */
#pianoSettingsPanel{display:none;position:absolute;top:64px;right:14px;z-index:29;background:rgba(255,255,255,.97);border-radius:20px;padding:16px 18px;min-width:220px;max-width:280px;box-shadow:0 6px 28px rgba(0,0,0,.22);flex-direction:column;gap:10px;}
#pianoSettingsPanel.open{display:flex;}
#pianoSettingsBg.open{display:block;}
.pset-title{font-size:.95rem;font-weight:900;color:#5d4e3c;border-bottom:2px solid #f0e8e0;padding-bottom:8px;margin-bottom:2px;}
.pset-lbl{font-size:.6rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#b0a090;margin-top:4px;}
.pset-row{display:flex;gap:6px;}
.pset-col{display:flex;flex-direction:column;gap:5px;}
.pset-btn{flex:1;padding:8px 6px;border-radius:12px;border:2px solid #e0d8d0;background:white;color:#7a6a5a;font-size:.78rem;font-weight:800;font-family:'Baloo 2',cursive;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .12s;}
.pset-btn.active{border-color:#66bb6a;background:#e8f5e9;color:#2e7d32;}
.pset-song{padding:8px 12px;border-radius:12px;border:2px solid #e0d8d0;background:white;color:#7a6a5a;font-size:.82rem;font-weight:800;font-family:'Baloo 2',cursive;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;transition:all .12s;}
.pset-song.active{border-color:#7c4dff;background:#ede7f6;color:#4527a0;}
.pset-oct{flex:1;padding:7px 4px;border-radius:10px;border:2px solid #e0d8d0;background:white;color:#7a6a5a;font-size:.78rem;font-weight:800;font-family:'Baloo 2',cursive;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;transition:all .12s;}
.pset-oct.active{border-color:#f57c00;background:#fff3e0;color:#e65100;}
#pianoSongSection{display:none;flex-direction:column;gap:6px;}
#pianoSongSection.visible{display:flex;}
/* next-key highlight */

.pw-next{background:linear-gradient(180deg,#fffde7,#fff9c4)!important;animation:pwNextPulse 1.4s ease-in-out infinite!important;}
.pw-black.pw-next{background:linear-gradient(180deg,#5a5200,#3d3800)!important;animation:pwNextPulse 1.4s ease-in-out infinite!important;}
/* landscape mobile piano */
@media(orientation:landscape) and (max-height:500px){
  #pianoScreen{padding-bottom:4px;}
  .piano-note-display{top:clamp(2px,2vh,20px);font-size:clamp(1.6rem,7vw,2.8rem);}
  .piano-keys{height:clamp(90px,38vh,160px)!important;}
  .piano-mode-row{padding:2px 0 3px;}
  .piano-song-btns{padding:0 4px;}
}
/* rotate hint badge */
#pianoRotateHint{display:none;position:absolute;bottom:clamp(4px,1.5vh,10px);right:10px;background:rgba(255,255,255,.13);border:1.5px solid rgba(255,255,255,.28);border-radius:50px;padding:4px 12px 4px 8px;gap:5px;align-items:center;z-index:5;pointer-events:none;}
#pianoRotateHint .rh-icon{font-size:1.1rem;animation:rotateWiggle 2.2s ease-in-out infinite;}
#pianoRotateHint span.rh-txt{font-size:.7rem;font-weight:800;color:rgba(255,255,255,.82);white-space:nowrap;}