/* ── MUSIC HUB (Phase F2) ── */
#musicHubScreen{
  display:none;position:fixed;inset:0;z-index:10;
  background:transparent;   /* shares the home-screen backdrop (HUB_BG_SCREENS) */
  align-items:center;justify-content:center;
}

/* ── PIANO ── */
#pianoScreen{display:none;position:fixed;inset:0;z-index:10;background:url('../Images/GameAssets/Piano/BG.webp') 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);}
/* ── Quick controls: hold-for-synth + key/octave slider ── */
.piano-quickbar{
  position:relative;z-index:5;width:min(92%,480px);
  display:flex;align-items:center;gap:12px;
  margin:0 0 6px;
}
.piano-key-slider-wrap{
  flex:1;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.85);border-radius:20px;
  padding:8px 14px;box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.piano-key-slider-label{
  font-family:'Baloo 2',cursive;font-weight:900;font-size:1rem;
  color:#5c3d99;min-width:2.2em;text-align:center;
}
/* Two same-size notes, low one sitting low and dim, high one sitting
   high and bright — position/brightness cue pitch (like where a note
   sits on a staff), not size, so it can't be misread as a volume icon
   (small speaker → big speaker) the way the first version could be
   (Jason: "using music notes will make people think its a volume
   slider"). */
.piano-key-slider-note{flex-shrink:0;line-height:1;font-size:1.1rem;}
.piano-key-slider-note-lo{opacity:.5;transform:translateY(4px);}
.piano-key-slider-note-hi{opacity:1;transform:translateY(-4px);}
/* Track: dark/cool at the low end fading to bright/warm at the high
   end (reusing the app's own purple label + gold thumb colours) — an
   asymmetric gradient so the track itself reads left-to-right instead
   of the old white-black-white piano-key look, which was symmetric
   and gave no directional cue at all (Jason: "the slider background
   needs to be different"). */
.piano-key-slider{
  flex:1;-webkit-appearance:none;appearance:none;
  height:14px;border-radius:8px;
  background:linear-gradient(90deg,#3d2f6b 0%,#8f6fd4 50%,#ffb454 100%);
  border:2px solid rgba(0,0,0,.15);
  cursor:pointer;touch-action:manipulation;
}
.piano-key-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(160deg,#ffd166,#ff9f43);
  border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
  cursor:pointer;
}
.piano-key-slider::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(160deg,#ffd166,#ff9f43);
  border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
  cursor:pointer;
}
.piano-synth-hold-btn{
  flex-shrink:0;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(160deg,#caa7f0,#8f6fd4);
  border:3px solid rgba(255,255,255,.7);
  box-shadow:0 3px 12px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  padding:11px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,box-shadow .12s;
}
.piano-synth-hold-btn.active{
  transform:scale(.9);
  background:linear-gradient(160deg,#a97bee,#6c3fc9);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.35),0 0 16px rgba(180,120,255,.7);
}
.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;}
/* ── CARTOON KEY STYLING (bug #12) ──
   The keys were rendered like a real piano: grey gradients, hard black edges,
   heavy drop shadows. That is the one place in the app that looked like a
   photograph of an instrument rather than a toy, which is exactly the clash
   Jason flagged. Restyled to the guide: warm creams instead of clinical white,
   soft brown edges instead of black, chunky rounded ends, gentle shading. */
.pw-key{
  border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  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{
  /* Warm cream, not clinical white — matches the toy palette. */
  background:linear-gradient(180deg,#fffdf7 0%,#fff8ea 55%,#ffeed6 100%);
  flex:1;height:100%;margin:0 2.5px;z-index:1;overflow:hidden;
  border-radius:6px 6px 16px 16px;
  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.95),
    inset 0 -8px 10px rgba(196,142,90,.18),
    0 8px 0 #c9a274,                 /* soft brown edge, not grey */
    0 11px 14px rgba(120,80,40,.25);
}
.pw-white.pressed{
  transform:translateY(6px);
  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.95),
    inset 0 6px 12px rgba(196,142,90,.30),
    0 0 26px 8px var(--glow-col,rgba(255,200,100,.5)),
    0 0 50px 14px var(--glow-col2,transparent),
    0 2px 0 #c9a274,
    0 3px 6px rgba(120,80,40,.25);
}
.pw-black{
  /* Soft chocolate brown rather than piano black. */
  background:linear-gradient(180deg,#7a5640 0%,#5e4030 45%,#4a3124 100%);
  position:absolute;z-index:2;top:0;height:60%;overflow:hidden;
  border-radius:5px 5px 12px 12px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.28),
    0 6px 0 #3a2619,
    0 8px 12px rgba(60,35,15,.45);
}
.pw-black.pressed{
  transform:translateY(4px);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.28),
    inset 0 4px 8px rgba(0,0,0,.35),
    0 0 20px 8px var(--glow-col,rgba(255,200,100,.5)),
    0 2px 0 #3a2619,
    0 3px 6px rgba(60,35,15,.4);
}
.pw-label{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:clamp(.48rem,.9vw,.62rem);font-weight:800;color:#b89574;pointer-events:none;z-index:3;text-shadow:0 1px 0 rgba(255,255,255,.6);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 */
/* Plate removed to match the other cogs — the icon carries its own form. */
#pianoCog{position:absolute;top:14px;right:14px;z-index:30;background:none;border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;}
#pianoCog:active{transform:scale(.9);}
/* 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;}

/* ── Dancing cat — bounces with every key press ── */
/* #pianoCat removed — see index.html note. */

/* ── Quick-access bar (sound + octave) on main piano screen ── */