/* The on-screen piano drawn by js/piano/keyboard.js.

   Keys are placed from two numbers the script sets on each key, --x and --w
   (white-key units), over --piano-whites on the keyboard. White keys never
   go below 47px so black keys (0.6 of a white) stay ~28px for a five-year-old's finger; when
   the range does not fit, the keyboard scrolls sideways (the felt strip on
   top is the swipe-to-scroll handle, because the keys use touch-action:none
   so a slide plays a glissando instead of panning). */

.piano {
  --piano-white-min: 47px;
  --piano-height: clamp(150px, 34vh, 240px);
  --piano-felt: 18px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 14px;
  background: #3b2a20;
  padding: 0 4px 6px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

.piano-keys {
  position: relative;
  width: max(100%, calc(var(--piano-whites, 8) * var(--piano-white-min)));
  height: calc(var(--piano-height) + var(--piano-felt));
}

.piano-felt {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--piano-felt);
  background: linear-gradient(#7a1e2c, #5c1420);
  border-bottom: 2px solid #2a0c12;
  touch-action: pan-x;
}

.piano-key {
  position: absolute;
  top: var(--piano-felt);
  left: calc(var(--x) * 100% / var(--piano-whites, 8));
  width: calc(var(--w) * 100% / var(--piano-whites, 8));
  box-sizing: border-box;
  touch-action: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: transform 40ms ease-out, background-color 120ms, box-shadow 120ms;
}

.piano-white {
  height: var(--piano-height);
  z-index: 1;
  background: linear-gradient(#fff 0%, #fbfaf6 80%, #ece9e0 100%);
  border: 1px solid #b9b3a6;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 -6px 0 #ddd8cc;
}

.piano-black {
  height: calc(var(--piano-height) * 0.62);
  z-index: 2;
  background: linear-gradient(#3a3a3e 0%, #18181b 70%, #050506 100%);
  border: 1px solid #000;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 -5px 0 #2c2c30, 0 3px 4px rgba(0, 0, 0, 0.45);
}

.piano-label {
  pointer-events: none;
  font: 700 clamp(13px, 2.4vw, 18px)/1 system-ui, sans-serif;
  color: #5a5348;
  margin-bottom: 12px;
}
.piano-black .piano-label {
  font-size: 11px;
  color: #d8d8de;
  margin-bottom: 8px;
}
.piano-labels-none .piano-label { display: none; }

/* Middle-C-style octave marker so a child can find "home". */
.piano-white.piano-c::after {
  content: "";
  position: absolute;
  bottom: 32px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9c2b2;
  pointer-events: none;
}

/* Gentle rainbow by pitch class (colour: true), for Bella. */
.piano-colour .piano-white.piano-pc-0  { background: linear-gradient(#fff, #ffd9d9); }
.piano-colour .piano-white.piano-pc-2  { background: linear-gradient(#fff, #ffe4c7); }
.piano-colour .piano-white.piano-pc-4  { background: linear-gradient(#fff, #fff3b8); }
.piano-colour .piano-white.piano-pc-5  { background: linear-gradient(#fff, #d6f5cf); }
.piano-colour .piano-white.piano-pc-7  { background: linear-gradient(#fff, #cdeffa); }
.piano-colour .piano-white.piano-pc-9  { background: linear-gradient(#fff, #d9dcff); }
.piano-colour .piano-white.piano-pc-11 { background: linear-gradient(#fff, #ecd8fb); }

/* Pressed. */
.piano .piano-white.piano-down {
  transform: translateY(2px);
  background: linear-gradient(#f1efe8, #e2ded2);
  box-shadow: inset 0 -2px 0 #cfc9bb;
}
.piano .piano-black.piano-down {
  transform: translateY(2px);
  background: linear-gradient(#2a2a2e, #0c0c0e);
  box-shadow: inset 0 -2px 0 #222, 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Lights from the lesson. Wrong is a soft amber, never red: it teaches.
   Prefixed with .piano so they outrank the colour tints above. */
.piano .piano-key.piano-hint  { box-shadow: inset 0 0 0 4px #ffb703, inset 0 -6px 0 #ffd166; }
.piano .piano-key.piano-demo  { background: linear-gradient(#e6f2ff, #9cc9ff); }
.piano .piano-key.piano-hit   { background: linear-gradient(#e9fbe9, #8fe08f); }
.piano .piano-key.piano-wrong { background: linear-gradient(#fff4e0, #ffc98a); }
.piano .piano-black.piano-demo  { background: linear-gradient(#4f86c6, #1d4f8c); }
.piano .piano-black.piano-hit   { background: linear-gradient(#4caf50, #1f6f24); }
.piano .piano-black.piano-wrong { background: linear-gradient(#e0a050, #8a5a1c); }
.piano .piano-black.piano-hint  { box-shadow: inset 0 0 0 3px #ffb703; }

.piano-key:focus-visible {
  box-shadow: inset 0 0 0 3px #2563eb;
}

@media (prefers-reduced-motion: reduce) {
  .piano-key { transition: none; }
  .piano-key.piano-down { transform: none; }
}

/* The falling-notes lane (js/piano/notation.js createLane) when it is laid
   inside the keyboard's scroller, above the felt: it takes exactly the keys'
   width, so it scrolls with them and each note lands on its own key. */
.piano > .piano-lane {
  display: block;
  width: max(100%, calc(var(--piano-whites, 8) * var(--piano-white-min)));
  height: var(--piano-lane-height, clamp(120px, 24vh, 200px));
  background: linear-gradient(#fffdf7, #f3ede0);
  border-radius: 10px 10px 0 0;
}
.piano > .piano-lane[hidden] { display: none; }