/* ===== Piano theme variables (inherits your site theme) ===== */
:root {
  /* container background uses your premixed site accents */
  --piano-bg-a: var(--bg-accent-3); /* primary glow */
  --piano-bg-b: var(--bg-accent-1); /* secondary glow */

  /* lines / shadows */
  --piano-border: var(--line-06);
  --piano-shadow: var(--card-shadow);
  --piano-extra-glow: var(--primary-glow-35);

  /* key borders & inner highlights */
  --key-border-10: rgba(255, 255, 255, 0.10);
  --key-border-08: rgba(255, 255, 255, 0.08);
  --key-inner-hi-60: rgba(255, 255, 255, 0.60);
  --key-inner-lo-15: rgba(0, 0, 0, 0.15);
  --key-outer-lo-60: rgba(0, 0, 0, 0.60);

  /* key face colors (keep subtle material look) */
  --white-key-top: #f9f9ff;
  --white-key-bot: #d9d9ef;

  --black-key-top: #222330;
  --black-key-bot: #0d0d14;

  /* active / pressed effects (reuse your global glow) */
  --key-press-glow: var(--glow-strong);
  --key-press-border: var(--highlight);
}

/* ===== Piano area ===== */
.piano-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.25rem 0 1.5rem;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--piano-bg-a), var(--piano-bg-b));
  border: 1px solid var(--piano-border);
  box-shadow: var(--piano-shadow), 0 0 24px var(--piano-extra-glow);
}

.piano-keys-list {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* keep black keys aligned at top */
  padding: 0;
  margin: 0;
  position: relative; /* allows overlaying if needed */
}

/* ===== Base key styles ===== */
.piano-keys {
  width: 5rem;
  height: 20rem;
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--key-border-10);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}

/* White keys */
.white-key {
  background: linear-gradient(180deg, var(--white-key-top), var(--white-key-bot));
  box-shadow:
    inset 0 1px 0 var(--key-inner-hi-60),
    inset 0 -2px 6px var(--key-inner-lo-15);
  z-index: 1;
}

/* Black keys */
.black-key {
  width: 2rem;
  height: 13rem;
  margin: 0 -20px 0 -20px; /* overlay spacing */
  z-index: 2;
  background: linear-gradient(180deg, var(--black-key-top), var(--black-key-bot));
  border: 1px solid var(--key-border-08);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 16px var(--key-outer-lo-60);
}

/* Interaction */
.piano-keys:hover {
  filter: brightness(1.02);
}

.piano-keys:active,
.piano-keys.active {
  transform: translateY(2px);
  /* uses your theme's highlight+cyan via --glow-strong */
  box-shadow: var(--key-press-glow);
  border-color: var(--key-press-border);
}

/* Optional: slight visual change per key type when active */
.white-key.active { filter: brightness(1.03); }
.black-key.active { filter: brightness(1.05); }

/* ===== Responsiveness ===== */
@media screen and (min-width: 821px) and (max-width: 1024px) {
  .piano-keys { width: 4rem; height: 20rem; }
  .black-key { width: 2rem; height: 13rem; margin: 0 -20px; }
}

@media screen and (min-width: 768px) and (max-width: 820px) {
  .piano-keys { width: 3.5rem; height: 16rem; }
  .black-key { width: 1.8rem; height: 10rem; margin: 0 -20px; }
}

@media screen and (max-width: 576px) {
  .piano-container {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .piano-keys { width: 3.5rem; height: 16rem; }
  .black-key { width: 1.8rem; height: 10rem; margin: 0 -20px; }
}