/* ═══════════════════════════════════════════════════════════════
   PIANO PLAYER  piano-player.css  v1.0
   Theme: Ivory & Obsidian — classic concert grand
═══════════════════════════════════════════════════════════════ */

:root {
  --piano-accent:     #e8d5a3;
  --piano-accent-dim: rgba(232,213,163,.14);
  --piano-bg-from:    #07060a;
  --piano-bg-to:      #0e0b14;
}

body.inst-piano {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(232,213,163,.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 8% 75%, rgba(139,92,246,.04) 0%, transparent 55%);
}

/* Override accent color for piano */
body.inst-piano { --player-accent: #e8d5a3; --player-accent-dim: rgba(232,213,163,.13); --player-accent-glow: rgba(232,213,163,.22); }

/* Loading overlay instrument icon */
body.inst-piano #loading-overlay::before { content: '🎹'; }

/* ── KEYBOARD VISUALIZER CONTAINER ── */
#staff-visualizer {
  background: linear-gradient(180deg, #0a0812 0%, #14101e 60%, #0a0812 100%);
  border: 1px solid rgba(232,213,163,.14);
  border-radius: 16px;
  margin: 16px 0 12px;
  overflow-x: auto; overflow-y: hidden;
  height: 200px;
  position: relative;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.7),
    0 4px 24px rgba(0,0,0,.5),
    0 0 0 1px rgba(232,213,163,.06);
  transition: box-shadow .4s ease;
}
#staff-visualizer::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 60% 30% at 50% 0%, rgba(232,213,163,.05) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
/* Side fade masks */
#staff-visualizer::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg,
    #0a0812 0%, transparent 60px,
    transparent calc(100% - 60px), #0a0812 100%);
  pointer-events: none; z-index: 3;
}

#keyboard-container {
  display: flex;
  height: 168px;
  padding: 16px 20px 0;
  min-width: max-content;
  position: relative; z-index: 1;
  overflow: visible;
  justify-content: center;
}

/* ── OCTAVE ── */
.octave {
  display: flex;
  width: 196px; min-width: 196px;
  position: relative;
}

/* ── WHITE KEYS ── */
.white-key {
  position: relative;
  width: 28px; height: 100%;
  background: linear-gradient(180deg, #f7f2ea 0%, #ede5d4 100%);
  border: 1px solid #c8baa0;
  border-radius: 0 0 6px 6px;
  z-index: 1;
  transition: background .04s, transform .04s, box-shadow .04s;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.1), 0 3px 5px rgba(0,0,0,.35);
  cursor: pointer;
}
.white-key:hover {
  background: linear-gradient(180deg, #fff 0%, #f5ede0 100%);
}
.white-key.active {
  background: linear-gradient(180deg, var(--key-active-color, #e8d5a3) 0%, color-mix(in srgb, var(--key-active-color, #e8d5a3) 70%, #000) 100%);
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 8px var(--key-active-color, #e8d5a3);
}

/* ── BLACK KEYS ── */
.black-key {
  position: absolute; top: 0;
  height: 62%; width: 18px;
  background: linear-gradient(180deg, #1e1828 0%, #0d0a12 100%);
  border: 1px solid #2a2038;
  border-radius: 0 0 5px 5px;
  z-index: 2;
  transition: background .04s;
  box-shadow: 0 5px 10px rgba(0,0,0,.7), inset 0 -2px 3px rgba(255,255,255,.04);
  cursor: pointer;
}
.black-key:hover { background: linear-gradient(180deg, #2a2240 0%, #161028 100%); }
.black-key.active {
  background: linear-gradient(180deg, var(--player-accent), rgba(232,213,163,.6)) !important;
  box-shadow: 0 0 10px rgba(232,213,163,.6) !important;
}

/* Black key offsets */
.white-key[data-note^="C"] + .black-key { left: 19px; }
.white-key[data-note^="D"] + .black-key { left: 47px; }
.white-key[data-note^="F"] + .black-key { left: 103px; }
.white-key[data-note^="G"] + .black-key { left: 131px; }
.white-key[data-note^="A"] + .black-key { left: 159px; }

/* ── PLAYER ZONE OVERRIDES ── */
body.inst-piano .now-info .now-title {
  background: linear-gradient(135deg, #e8d5a3, #f5cc7a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.inst-piano .ctrl-btn.primary {
  background: linear-gradient(135deg, #c9943a, #e8d5a3);
  color: #07060a;
}
body.inst-piano .seek-fill {
  background: linear-gradient(90deg, #c9943a, #e8d5a3);
}
body.inst-piano .fp-btn.play-btn {
  background: linear-gradient(135deg, #c9943a, #e8d5a3);
  color: #07060a;
}

/* ── INSTRUMENT BADGE ── */
#vis-badge {
  position: absolute; top: 10px; right: 14px; z-index: 10;
  background: rgba(0,0,0,.65); border: 1px solid rgba(232,213,163,.25);
  border-radius: 20px; padding: 4px 12px;
  font-family: var(--font-body); font-size: .68rem;
  color: #e8d5a3; letter-spacing: .5px; pointer-events: none;
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  #staff-visualizer { height: 140px; border-radius: 10px; }
  #keyboard-container { height: 110px; padding: 10px 10px 0; }
  .octave { width: 140px; min-width: 140px; }
  .white-key { width: 20px; }
  .black-key { width: 13px; }
  .white-key[data-note^="C"] + .black-key { left: 14px; }
  .white-key[data-note^="D"] + .black-key { left: 34px; }
  .white-key[data-note^="F"] + .black-key { left: 74px; }
  .white-key[data-note^="G"] + .black-key { left: 94px; }
  .white-key[data-note^="A"] + .black-key { left: 114px; }
}