/**
 * ================================================================
 *  RoxyPiano v2.0 — Piano Keyboard Styles
 *  © 2026 Roxy Emanuel. All Rights Reserved.
 * ================================================================
 *  88 tuts piano dengan state visual: active, target, correct, wrong.
 * ================================================================
 */

.piano-section {
  position: relative; overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
}
.piano-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; width: 100%; }
.piano-keyboard { position: relative; display: flex; padding: 0; }

/* ── Tuts Piano ────────────────────────────────────────────────── */
.pkey {
  position: relative; flex-shrink: 0; cursor: pointer;
  transition: background 80ms, box-shadow 80ms, transform 80ms;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.pkey.w {
  background: linear-gradient(180deg, #fff, #f0f0f0);
  border: 1px solid #ccc; border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1;
  box-shadow: 0 4px 6px rgba(0,0,0,.3);
}
.pkey.b {
  background: linear-gradient(180deg, #2d2d2d, #1a1a1a);
  border: 1px solid #111; border-top: none;
  border-radius: 0 0 3px 3px;
  position: absolute; z-index: 2;
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

/* State: Hover */
.pkey.w:hover { background: linear-gradient(180deg, #fff, #f8f8ff); }

/* State: Active (sedang ditekan) */
.pkey.w.active { background: var(--accent) !important; box-shadow: 0 0 18px var(--accent-glow), 0 2px 4px rgba(0,0,0,.3) !important; transform: scaleY(.98); }
.pkey.b.active { background: #003d55 !important; box-shadow: 0 0 14px var(--accent-glow) !important; transform: scaleY(.97); }

/* State: Target (nada yang harus dimainkan - Wait Mode) */
.pkey.w.target { background: linear-gradient(180deg, #fff5cc, #ffd700) !important; box-shadow: 0 0 14px rgba(255,215,0,.5) !important; animation: tpulse 1s infinite; }
.pkey.b.target { background: #7a5c00 !important; box-shadow: 0 0 14px rgba(255,215,0,.4) !important; animation: tpulse 1s infinite; }
@keyframes tpulse { 0%,100%{ box-shadow:0 0 14px rgba(255,215,0,.4) } 50%{ box-shadow:0 0 24px rgba(255,215,0,.7) } }

/* State: Correct & Wrong */
.pkey.correct { background: var(--success) !important; box-shadow: 0 0 20px rgba(0,255,136,.6) !important; }
.pkey.wrong { background: var(--error) !important; box-shadow: 0 0 20px rgba(255,51,102,.6) !important; animation: shake .3s; }
@keyframes shake { 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-3px) } 75%{ transform:translateX(3px) } }

/* ── Label Nada ────────────────────────────────────────────────── */
.pkey-label {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  font-size: .5rem; font-weight: 600; color: #999;
  pointer-events: none; white-space: nowrap;
}
.pkey.b .pkey-label { color: #555; bottom: 3px; font-size: .45rem; }
.pkey-label.c4 { color: var(--accent); font-weight: 700; }

/* ── Penanda Area Tangan ───────────────────────────────────────── */
.left-range  { border-bottom: 3px solid rgba(124,58,237,.4) !important; }
.right-range { border-bottom: 3px solid rgba(0,212,255,.4) !important; }