/* ============================================
   css/music.css
   Mucha Exhibition v7.1.17 OSS (v6 起源 + v7.1.x 暗色/优化增量)
   v7.1.15 视觉同步 lang/theme 按钮：完全一致鎏金圆环
   ============================================ */

/* ===================== 浮动音乐按钮 ===================== */
/* v7.1.15: 与 lang-toggle / theme-toggle 完全一致的设计
   - 48px 圆形
   - 鎏金边框 2px
   - 米色径向背景（白天） / 暗月蓝径向背景（暗色）
   - 鎏金音符 svg（白天） / 月白音符 svg（暗色）
   - hover: scale 1.08 + 鎏金/月光光晕
   - playing: 鎏金/月光脉冲 box-shadow */
#music-toggle{
  position:fixed;bottom:30px;right:30px;z-index:9990;width:48px;height:48px;
  border:2px solid var(--gold);
  background:radial-gradient(circle at 30% 30%, var(--ivory-light), var(--ivory));
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.15), inset 0 0 12px rgba(var(--gold-deep-rgb), 0.15);
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  padding:0;
  outline:none;-webkit-tap-highlight-color:transparent;
}
#music-toggle:hover{
  transform:scale(1.08);
  box-shadow:0 6px 24px rgba(var(--gold-deep-rgb), 0.4), 0 0 16px rgba(var(--gold-rgb), 0.3), inset 0 0 16px rgba(var(--gold-deep-rgb), 0.25);
}
#music-toggle:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
#music-toggle.playing{animation:musicPulse 2s infinite}
@keyframes musicPulse{
  0%,100%{box-shadow:0 4px 16px rgba(0,0,0,0.15),0 0 0 0 rgba(var(--gold-rgb), 0.6)}
  50%{box-shadow:0 4px 16px rgba(0,0,0,0.15),0 0 0 14px rgba(var(--gold-rgb), 0)}
}
#music-toggle svg{width:20px;height:20px;fill:var(--gold);display:block}

/* v7.1.15 暗色：与 lang-toggle / theme-toggle 完全一致的暗色 design */
:root[data-theme="dark"] #music-toggle {
  background: radial-gradient(circle at 30% 30%, #1A2840, #0F1B2A);
  border-color: var(--gold-light);
  color: var(--gold-bright);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 0 12px rgba(168, 192, 216, 0.15);
}
:root[data-theme="dark"] #music-toggle:hover {
  box-shadow: 0 6px 24px rgba(168, 192, 216, 0.4), 0 0 16px rgba(168, 192, 216, 0.3), inset 0 0 16px rgba(168, 192, 216, 0.25);
}
:root[data-theme="dark"] #music-toggle.playing {
  animation: musicPulseDark 2s infinite;
}
:root[data-theme="dark"] #music-toggle svg { fill: var(--gold-bright); }
@keyframes musicPulseDark {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0 rgba(168, 192, 216, 0.6); }
  50%     { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 14px rgba(168, 192, 216, 0); }
}

/* 移动端适配：缩小到 42px */
@media (max-width: 900px) {
  #music-toggle {
    width: 42px;
    height: 42px;
    bottom: 20px;
    right: 20px;
  }
}

/* BGM replacement cheat-sheet
   Hidden visual element (display:none) but readable in DevTools / page
   source. Fork users can copy-paste the snippet inside to wire up
   their own public-domain BGM. */
.bgm-cheatsheet {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}