/* ── KidsNotes — overrides and additions on top of pianokids.css ── */

/* Background overrides for KidsNotes screens */
#home .bg          { background-image: url('Screenshots/homescreen_notes.jpeg') }
#modes .bg         { background-image: url('Screenshots/mode_selection_notes.jpg') }
#champ-selection .bg { background-image: url('Screenshots/champ_selection_notes.jpg') }
#gameplay .bg-farm       { background-image: url('Screenshots/game_screen_mode_1_2_farm_notes.png') }
#gameplay .bg-fantasy    { background-image: url('Screenshots/game_screen_mode_1_2_fantasy_notes.png') }
#gameplay .bg-freestyle  { background-image: url('Screenshots/game_screen_mode_4_farm_notes.jpeg') }

/* ── Staff section (replaces .kb-section / .keyboard) ── */
.staff-section {
  position: absolute;
  left: 0; right: 0;
  top: 56%; bottom: 0;
  background: #fffcf0;
  border-top: 20px solid #7a4220;
  z-index: 5;
  overflow: visible;
}

#staff-container {
  position: absolute;
  inset: 0;
  overflow: visible;
}

/* ── Staff lines ── */
.staff-line {
  position: absolute;
  left: 12%; right: 1%;
  height: 4px;
  background: #333;
}

/* ── Treble clef ── */
.treble-clef-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 12%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.treble-clef-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ── Note heads ── */
.note-head {
  position: absolute;
  width: 72px;
  height: 48px;
  background: #1a1a1a;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  cursor: pointer;
  z-index: 6;
  transition: background 0.08s;
  touch-action: none;
}
.note-head::before {
  content: '';
  position: absolute;
  inset: -22px -28px;
}
.note-head.correct  { background: #27ae60 !important; transition: none; }
.note-head.wrong    { background: #e74c3c !important; transition: none; }
.note-head.inactive { opacity: 0.15; pointer-events: none; cursor: default; }
.note-head.playing  { background: #27ae60 !important; }

/* Label above note — sibling in #staff-container, no rotation issues */
#staff-container .key-label {
  position: absolute;
  transform: translate(-50%, -70px);
  width: max-content;
  height: 46px;
  line-height: 46px;
  font-size: 36px;
  font-weight: 900;
  color: #333;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(255,255,255,0.85);
  border-radius: 6px;
  padding: 0 10px;
  z-index: 9;
}

/* ── Ledger line for C4 — sibling of note head in container ── */
.ledger-line {
  position: absolute;
  width: 6%;
  height: 4px;
  background: #333;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}