/**
 * ================================================================
 *  RoxyPiano v2.0 — Canvas & Falling Notes Area
 *  © 2026 Roxy Emanuel. All Rights Reserved.
 * ================================================================
 */

.canvas-section {
  position: relative; width: 100%;
  background: linear-gradient(180deg, #08080d, #0d0d16);
  border-bottom: 1px solid var(--border-2);
}
#fallingCanvas { display: block; width: 100%; height: 400px; }

.chord-display {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--warning); text-shadow: 0 0 10px rgba(255,215,0,.5);
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5;
}
.chord-display.visible { opacity: 1; }

.transpose-ind {
  position: absolute; top: 10px; left: 14px;
  font-family: var(--font-display); font-size: .7rem; color: var(--accent-2);
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5;
}
.transpose-ind.visible { opacity: 1; }

.metronome-dot {
  position: absolute; top: 10px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  z-index: 5; transition: var(--transition);
}
.metronome-dot.beat {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scale(1.15);
}