/* ===========================
   Piano
   =========================== */
.piano-wrap {
  overflow-x: auto;
  padding: .75rem 0;
}

.piano {
  display: flex;
  position: relative;
  height: 180px;
  width: max-content;
  margin: 0 auto;
  user-select: none;
}

.key {
  position: relative;
  cursor: pointer;
  border-radius: 0 0 3px 3px;
  transition: background 50ms ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .4rem;
}

.key.white {
  width: 44px;
  height: 180px;
  background: #f0f0ea;
  border: 1px solid var(--border);
  border-top: none;
  z-index: 1;
}

[data-theme="dark"] .key.white {
  background: #1a1a1e;
  border-color: #333;
}

.key.black {
  width: 28px;
  height: 115px;
  background: #222;
  border: 1px solid #111;
  margin-left: -14px;
  margin-right: -14px;
  z-index: 2;
  color: #666;
}

[data-theme="dark"] .key.black {
  background: #000;
  border-color: #1a1a1a;
}

/* Active states */
.key.white.active {
  background: var(--accent);
}
.key.black.active {
  background: var(--accent);
}

[data-theme="dark"] .key.white.active {
  background: var(--accent);
}

.key-label {
  font-family: var(--font);
  font-size: .55rem;
  pointer-events: none;
  opacity: .4;
}

.key.white .key-label { color: #888; }
.key.black .key-label { color: #555; }
.key.active .key-label { color: #fff; opacity: .9; }

.piano-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  margin: .25rem 0 .5rem;
}

/* Volume slider */
.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.vol-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* Help text */
.piano-help {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  font-size: .65rem;
  color: var(--text-3);
  margin: .35rem 0 .5rem;
  flex-wrap: wrap;
}

/* Mobile: smaller keys */
@media (max-width: 768px) {
  .key.white { width: 36px; height: 150px; }
  .key.black { width: 22px; height: 95px; margin-left: -11px; margin-right: -11px; }
  .piano { height: 150px; }
}

@media (max-width: 480px) {
  .key.white { width: 28px; height: 120px; }
  .key.black { width: 18px; height: 76px; margin-left: -9px; margin-right: -9px; }
  .piano { height: 120px; }
  .key-label { font-size: .45rem; }
}