/* Piano keyboard visualization */
.piano-keyboard {
  display: flex;
  justify-content: center;
  margin: 10px auto;
  user-select: none;
}

.piano-octave {
  position: relative;
  display: flex;
  height: 80px;
}

.piano-key {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease;
}

.piano-key.white {
  width: 28px;
  height: 80px;
  background: #f5f5f5;
  border-radius: 0 0 4px 4px;
  z-index: 1;
}

.piano-key.black {
  position: absolute;
  width: 18px;
  height: 50px;
  background: #333;
  border-radius: 0 0 3px 3px;
  z-index: 2;
}

/* Position black keys based on which white key they follow */
.piano-key.black[data-after="0"] { left: 19px; }
.piano-key.black[data-after="1"] { left: 47px; }
.piano-key.black[data-after="3"] { left: 103px; }
.piano-key.black[data-after="4"] { left: 131px; }
.piano-key.black[data-after="5"] { left: 159px; }

/* Second octave offset: 7 white keys × 28px = 196px */
.piano-octave:nth-child(2) .piano-key.black[data-after="0"] { left: 19px; }
.piano-octave:nth-child(2) .piano-key.black[data-after="1"] { left: 47px; }
.piano-octave:nth-child(2) .piano-key.black[data-after="3"] { left: 103px; }
.piano-octave:nth-child(2) .piano-key.black[data-after="4"] { left: 131px; }
.piano-octave:nth-child(2) .piano-key.black[data-after="5"] { left: 159px; }

/* Highlighted keys */
.piano-key.white.highlighted {
  background: var(--accent, #667eea);
  border-color: var(--accent, #667eea);
}

.piano-key.black.highlighted {
  background: var(--accent, #667eea);
  border-color: var(--accent, #667eea);
}

/* Key labels */
.piano-key-label {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  opacity: 0;
  color: #666;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.piano-key.highlighted .piano-key-label {
  opacity: 1;
  color: #fff;
  font-weight: 600;
}

/* Piano display container in practice screens */
.piano-display {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.piano-display.hidden {
  display: none;
}