/* おとあそびピアノ */

.piano-area {
  display: grid;
  align-content: center;
}

/*
 * 鍵盤の並び。せまい画面（基本）：4列×2段。
 * 幅に上限を付けているのは、鍵盤が横に広がりすぎて、となりの鍵盤に指が届きにくくなるのを防ぐため
 */
.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  /* 押したときに沈む分 */
  padding-bottom: var(--pop);
  /* 指をすべらせたとき、ブラウザがスクロールと判断して操作を取り上げるのを防ぐ */
  touch-action: none;
}

/* 広い画面：8列×1段。8列でも鍵盤の幅が 64px を下回らない幅から切り替える */
@media (min-width: 42rem) {
  .keys {
    grid-template-columns: repeat(8, 1fr);
    max-width: 64rem;
  }
}

/* 鍵盤1つの見た目 */
.key {
  width: 100%;
  /* 高さ 360px の横長の画面でも、2段がスクロールなしで収まる割合にする */
  height: clamp(5rem, 28dvh, 14rem);
  border-radius: var(--radius-md);
  font-size: var(--label-md);
}

/*
 * 押している間：沈んで、明るくなる。
 * :active ではなく is-down（piano.js が付ける）で切り替える。指をすべらせて入った鍵盤には :active が付かないため
 */
.key.is-down {
  transform: translateY(var(--pop));
  box-shadow: none;
  filter: brightness(1.12);
}

/* すべらせて出たあとの鍵盤は、指やマウスを離すまで :active が残るので、元の見た目に戻す */
.key:active:not(.is-down) {
  transform: none;
  box-shadow: var(--shadow-pop);
}

/* 鍵盤の色。HTMLに style を書かず、data-note で選ぶ（5日目に入れるCSPで、HTML内の style を禁止できるようにするため） */
.key[data-note="c4"] {
  --btn-fill: var(--color-key-1);
}

.key[data-note="d4"] {
  --btn-fill: var(--color-key-2);
}

.key[data-note="e4"] {
  --btn-fill: var(--color-key-3);
}

.key[data-note="f4"] {
  --btn-fill: var(--color-key-4);
}

.key[data-note="g4"] {
  --btn-fill: var(--color-key-5);
}

.key[data-note="a4"] {
  --btn-fill: var(--color-key-6);
}

.key[data-note="b4"] {
  --btn-fill: var(--color-key-7);
}

.key[data-note="c5"] {
  --btn-fill: var(--color-key-8);
}