/* ============================================================
   BLUES PIANO — Tastiera interattiva
   I tasti sono generati da keyboard.js. Qui solo l'estetica.
   ============================================================ */

.keyboard-wrap {
  background: linear-gradient(180deg, #0a0910, #15121c);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 14px 14px 16px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6), var(--shadow-2);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* feltro rosso sopra i tasti, come un pianoforte vero */
.keyboard-felt {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--wine), var(--wine-deep));
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.keyboard {
  position: relative;
  display: flex;
  height: 190px;
  min-width: max-content;
  user-select: none;
  touch-action: none;
}

/* --- Tasti bianchi --- */
.key {
  position: relative;
  cursor: pointer;
}
.key.white {
  width: 46px;
  height: 100%;
  background: linear-gradient(180deg, #fdfaf2 0%, var(--key-white) 70%, #ddd2bb 100%);
  border: 1px solid #b9ad96;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 -6px 8px rgba(0,0,0,0.10), 0 2px 3px rgba(0,0,0,0.4);
  z-index: 1;
}
.key.white + .key.white { margin-left: -1px; }

/* --- Tasti neri --- */
.key.black {
  width: 30px;
  height: 62%;
  background: linear-gradient(180deg, #2a2530 0%, var(--key-black) 80%, #000 100%);
  border: 1px solid #000;
  border-radius: 0 0 5px 5px;
  box-shadow: inset 0 -4px 6px rgba(255,255,255,0.06), 0 3px 5px rgba(0,0,0,0.6);
  margin-left: -15px;
  margin-right: -15px;
  z-index: 2;
}

/* --- Pressione --- */
.key.white.pressed {
  background: linear-gradient(180deg, #f6e2b4, var(--key-white-press) 80%, #c9a45c 100%);
  box-shadow: inset 0 -3px 10px rgba(154,124,62,0.5), 0 1px 2px rgba(0,0,0,0.4);
  transform: translateY(1px);
}
.key.black.pressed {
  background: linear-gradient(180deg, #6f5a2e, var(--key-black-press) 90%);
  box-shadow: inset 0 -3px 8px rgba(0,0,0,0.5), 0 0 14px var(--brass-glow);
  transform: translateY(1px);
}

/* --- Evidenziazione scala --- */
.key.deg-scale.white { background: linear-gradient(180deg, #fdfaf2, #f0e4c4 75%, #e2cf9d 100%); }
.key.deg-scale.black { background: linear-gradient(180deg, #6a5a36, var(--brass-deep) 90%); }

.key.deg-tonic.white { background: linear-gradient(180deg, #fde9ea, #f3c3c8 75%, #e79aa2 100%); }
.key.deg-tonic.black { background: linear-gradient(180deg, #7a3b43, var(--wine) 90%); }

.key.deg-blue.white  { background: linear-gradient(180deg, #e9f4fc, #bfe0f5 75%, #93c9ec 100%); }
.key.deg-blue.black  { background: linear-gradient(180deg, #2f5e7a, var(--blue) 90%); }

/* pallino indicatore in cima al tasto evidenziato */
.key .dot {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  opacity: 0;
}
.key.deg-scale .dot { background: var(--brass-deep); opacity: 1; }
.key.deg-tonic .dot { background: var(--wine-deep); opacity: 1; box-shadow: 0 0 0 2px rgba(122,31,43,0.3); }
.key.deg-blue  .dot { background: var(--blue); opacity: 1; box-shadow: 0 0 0 2px var(--blue-glow); }
.key.black .dot { bottom: 7px; }

/* --- Etichetta nome nota --- */
.key .label {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.key.white .label { color: #6b5f48; }
.key.black .label { color: #d9cba8; bottom: 6px; }
.keyboard:not(.show-labels) .key .label { display: none; }

/* --- Diteggiatura (numeri 1-5) --- */
.key .finger {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
}
.key.white .finger { background: #2a2433; color: var(--brass-hi); border: 1px solid var(--brass-deep); }
.key.black .finger { background: var(--brass-hi); color: #1a1722; top: 6px; width: 16px; height: 16px; font-size: 0.62rem; }
.keyboard.show-fingers .key.has-finger .finger { opacity: 1; }

/* --- Mappa tasto PC (lettera) --- */
.key .pc {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text-faint);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
}
.key.black .pc { color: #8a7f6a; top: 6px; }
.keyboard.show-pc .key .pc { opacity: 1; }
/* se mostro le dita, nascondo le lettere PC per non sovrapporre */
.keyboard.show-fingers.show-pc .key.has-finger .pc { opacity: 0; }

/* C4 marcato leggermente per orientarsi */
.key.white.is-c::after {
  content: "";
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-dim);
}
.keyboard.show-labels .key.white.is-c::after { display: none; }

/* --- Feedback giochi (giusto / sbagliato / bersaglio quiz) --- */
.key.mark-ok.white  { background: linear-gradient(180deg, #d8f0d2, #8fd08a 80%, #5fb05a) !important; }
.key.mark-ok.black  { background: linear-gradient(180deg, #3f7a3a, #2f8a2a 90%) !important; }
.key.mark-no.white  { background: linear-gradient(180deg, #f6d2d0, #e08b88 80%, #d05a55) !important; }
.key.mark-no.black  { background: linear-gradient(180deg, #7a3a38, #8a2f2a 90%) !important; }

.key.found::before {
  content: "✓";
  position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  color: #2f7a2a;
}
.key.black.found::before { color: #9fe09a; }

.key.quiz-target {
  animation: targetPulse 1.1s ease-in-out infinite;
}
.key.quiz-target.white { box-shadow: inset 0 0 0 3px var(--brass), 0 0 16px var(--brass-glow); }
.key.quiz-target.black { box-shadow: inset 0 0 0 2px var(--brass-hi), 0 0 16px var(--brass-glow); }
@keyframes targetPulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.25); }
}

/* --- Evidenziazione accordo (Lezione 3) --- */
.key.chord.white      { background: linear-gradient(180deg, #fdfaf2, #f0e4c4 75%, #e2cf9d 100%); }
.key.chord.black      { background: linear-gradient(180deg, #6a5a36, var(--brass-deep) 90%); }
.key.chord-root.white { background: linear-gradient(180deg, #fde9ea, #f3c3c8 75%, #e79aa2 100%); }
.key.chord-root.black { background: linear-gradient(180deg, #7a3b43, var(--wine) 90%); }
.key.chord .deg-badge, .key.chord-root .deg-badge {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  padding: 1px 4px; border-radius: 4px;
  background: #2a2433; color: var(--brass-hi); border: 1px solid var(--brass-deep);
  white-space: nowrap;
}
.key.chord-root .deg-badge { color: #f0a8af; border-color: var(--wine); }
.key.black .deg-badge { top: 6px; font-size: .56rem; }

/* hint scroll su mobile */
.kbd-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  margin-top: 0.5rem;
  text-align: center;
}

@media (max-width: 620px) {
  .keyboard { height: 160px; }
  .key.white { width: 40px; }
  .key.black { width: 26px; margin-left: -13px; margin-right: -13px; }
}