/* =========================================================
PIANO / INSTRUMENT
Este archivo define ÚNICAMENTE el instrumento físico.
NO timing
NO feedback
NO UI
========================================================= */

#piano {
  position: relative;
  height: 160px;
  user-select: none;
}

#piano-wrapper {
  background: var(--piano-container-bg);
  box-shadow: var(--piano-container-shadow);
  border: var(--piano-container-border, 1px solid transparent);
  border-radius: var(--piano-container-radius, 0);
}

/* ===============================
BASE KEY (SHARED)
=============================== */

.piano-key,
.white-key,
.black-key {
  position: absolute;
  cursor: pointer;
}

/* ===============================
WHITE KEYS – BASE
=============================== */

.white-key {
  bottom: 0;
  /* ⬅️ ancladas abajo */

  width: var(--white-key-w);
  height: var(--white-key-h);

  background: var(--piano-white-bg);
  border: var(--piano-white-border);
  border-radius: 0 0 6px 6px;

  box-shadow: var(--piano-white-shadow-inner);
}

/* ===============================
BLACK KEYS – BASE
=============================== */

.black-key {
  top: 0;
  /* ⬅️ ancladas ARRIBA */
  bottom: auto;
  /* ⬅️ CLAVE: cancela bottom heredado */

  width: var(--black-key-w);
  height: var(--black-key-h);
  top: var(--black-key-top);
  background: var(--piano-black-bg);
  border-radius: 0 0 5px 5px;

  z-index: 2;

  box-shadow: var(--piano-black-shadow-inner);
}

/* ===============================
KEY LABELS (NOTE NAMES)
=============================== */

.key-label {
  position: absolute;
  bottom: 8px;
  width: 100%;

  font-size: 11px;
  font-weight: 600;
  text-align: center;

  color: var(--piano-white-label-color);
  pointer-events: none;
}

.black-key .key-label {
  color: var(--piano-black-label-color);
}

/* ===============================
KEY STATES – PHYSICAL
=============================== */

/* Sustain (key held down physically) */
.white-key.key-sustain {
  background: var(--piano-white-active-bg, linear-gradient(#e8e8e8, #d2d2d2));
}

.black-key.key-sustain {
  background: var(--piano-black-active-bg, linear-gradient(#111, #000));
}

/* ===============================
ACTIVE STATE (INPUT ENGINE)
=============================== */

.white-key.active {
  background: var(--piano-white-active-bg, linear-gradient(#eaeaea, #d8d8d8));
}

.black-key.active {
  background: var(--piano-black-active-bg, linear-gradient(#111, #000));
}


/* ===============================
DUPLICATES / TECH DEBT
=============================== */

/* DUPLICATE NOTICE:

* .white-key.key-sustain appears multiple times in legacy CSS
* .black-key.key-sustain appears multiple times in legacy CSS
  Behavior preserved intentionally.
  */