/* ══════════════════════════════════════
   PIANO KEYBOARD STYLING
   (reference + answer keyboards share same .pianow)
══════════════════════════════════════ */

.pianow {
  /* Horizontal overflow hidden — scrollLeft controlled by shared JS scroll manager. */
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  touch-action: none;   /* JS handles all touch gestures */
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  /* height is set by JS via registerKbWrapper to match .piano child */
}
.pianow:active { cursor: grabbing; }

.piano {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

/* ── WHITE KEYS ── */
.wkey {
  position: absolute;
  /* height set inline by JS (88px narrow / 112px wide) */
  background: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 6px;
  transition: background 0.08s;
  user-select: none;
  touch-action: none;
}

.wkey.inactive { background: rgba(255,255,255,0.8); cursor: default; }
.wkey.dis      { cursor: default; pointer-events: none; }
.wkey.ck       { background: rgba(255,255,94,0.55); }
.wkey.wk       { background: rgba(255,34,68,0.55); }
.wkey.pressed  { background: rgba(255,255,94,0.35); }

.wlbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--plus1);
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
  white-space: pre;
}

/* ── BLACK KEYS ── */
.bkey {
  position: absolute;
  /* width and height set inline by JS */
  background: #0A0820;
  z-index: 2;
  cursor: pointer;
  transition: background 0.08s;
  touch-action: none;
}

.bkey.dis     { cursor: default; pointer-events: none; }
.bkey.pressed { background: #2a1a6a; }

/* ── REFERENCE PIANO wrapper — sits below stage content ── */
.ref-piano-outer {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0.75rem 0;
  background: var(--bg2);
  overflow: visible;   /* .pianow handles its own clipping */
}

.ref-piano-lbl {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: #fff;
  width: 100%;           /* span full container width so text-align: center works */
  align-self: stretch;
  text-align: center;
}

/* ref piano key colour states */
.wkey.ref-upcoming { background: rgba(255,255,255,0.8); cursor: default; }
.wkey.selected-key { background: rgba(255,255,94,0.45); }

/* Desktop: show full piano centered, no scroll needed */
@media (min-width: 700px) {
  .pianow {
    overflow: visible;
    justify-content: center;
  }
  .ref-piano-outer { max-width: none; }
}