/* 鼓面容器：用 D 調鼓圖片當底 */
.drum-container {
  position: relative;
  width: min(520px, 80vw);
  height: min(520px, 80vw);
  border-radius: 50%;
  background-image: url("../images/drum_d_layout.png"); /* ← 重點只有這行 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
  margin: 16px auto;
}


/* 鼓面按鈕：透明，只留下點擊區 */
.pad {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.06s ease-out,
    box-shadow 0.08s ease-out,
    border-color 0.08s ease-out,
    background 0.08s ease-out;
}
/* 預設主題：紫色 */
body.theme-purple .drum-container {
  filter: hue-rotate(0deg);
}

/* 藍色 */
body.theme-blue .drum-container {
  filter: hue-rotate(-40deg);
}

/* 綠色 */
body.theme-green .drum-container {
  filter: hue-rotate(-90deg);
}

/* 顏色選擇按鈕（看你要放哪一區） */
.color-picker {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.color-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #666;
  background: #222;
  color: #eee;
  font-size: 12px;
  cursor: pointer;
}
.color-btn.active {
  border-color: #f5d36f;
  background: linear-gradient(90deg, #f3d36f 0%, #cc8a33 60%, #7b4b15 100%);
  color: #181818;
}




/* 中央最大圈（低音 3） */
.pad-center {
  width: 22%;
  height: 22%;
}

/* 內圈大圓 */
.pad-inner {
  width: 18%;
  height: 18%;
}

/* 外圈小圓 */
.pad-outer {
  width: 14%;
  height: 14%;
}

.pad span {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
  transition: opacity 0.12s;
}

.pad:hover span,
.pad.active span {
  opacity: 0.18;
}

/* 光暈效果（共用基底） */
.pad::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f3d36f 0, #cc8a33 60%, #7b4b15 100%);
  box-shadow: 0 0 12px rgba(0,0,0,0.9);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

/* 一般舌片 hover / active */
.pad:hover::before {
  opacity: 0.18;
}
.pad.active::before {
  opacity: 0.85;
  transform: scale(1.02);
}

/* ⭐ 中央低音 3：亮一點、稍微大一圈，但保留半透明 */
.pad-center:hover::before,
.pad-center.active::before {
  opacity: 0.35;
  transform: scale(1.12); /* 比其他舌片大一點 */
}