/* ===== 音乐方块(下落节奏版) ===== */
.rhythm-wrap { max-width: 760px; margin: 0 auto; color: #e6e9f2; }
.music-header { text-align: center; margin-bottom: 10px; }
.music-title { font-size: 22px; font-weight: 700; }
.music-sub { font-size: 12px; color: #9aa0b4; margin-top: 4px; }

.rhythm-scores {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px;
}
.rhythm-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; margin-bottom: 10px;
}
.music-tempo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c0c4d4; }
.music-check { font-size: 12px; color: #c0c4d4; display: flex; align-items: center; gap: 4px; }

#rhythmCanvas {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  background: #0a0d1e;
  border-radius: 12px;
  margin: 0 auto;
}

.rhythm-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 720px;
  margin: 8px auto 0;
}
.rh-lane-btn {
  --c:#fff;
  height: 64px;
  border: 2px solid var(--c);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--c);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .08s, transform .05s, box-shadow .1s;
  touch-action: manipulation;
  user-select: none;
}
.rh-lane-btn:hover { background: color-mix(in srgb, var(--c) 15%, transparent); }
.rh-lane-btn.pressed {
  background: var(--c);
  color: #0a0d1e;
  transform: translateY(2px);
  box-shadow: 0 0 16px var(--c);
}

.music-hint { font-size: 11px; color: #7a809a; text-align: center; margin-top: 10px; }

/* 按键命中闪光动画 */
@keyframes rhFlash {
  0%   { box-shadow: 0 0 0 0 var(--c), 0 0 0 0 var(--c); transform: translateY(2px) scale(0.96); }
  40%  { box-shadow: 0 0 26px 4px var(--c), 0 0 60px 10px color-mix(in srgb, var(--c) 40%, transparent); transform: translateY(2px) scale(1.04); }
  100% { box-shadow: 0 0 16px var(--c); transform: translateY(2px) scale(1); }
}
.rh-lane-btn.flash { animation: rhFlash .22s ease-out; }
