/* 音乐用独立圆形入口；线条和玻璃边缘跟随日夜主题。 */
.site-sound-button {
  display: inline-flex; position: relative; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; border: 1px solid var(--control-border); border-radius: 50%;
  color: var(--text); background: var(--control-bg); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--inset-highlight);
  transition: color 1.2s ease-in-out, background 1.2s ease-in-out, border-color 1.2s ease-in-out, box-shadow 1.35s ease-in-out, transform .25s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.site-sound-button[data-music-state="playing"] {
  color: var(--blue); border-color: var(--blue); background: var(--control-hover);
  box-shadow: inset 0 1px 0 var(--inset-highlight), 0 0 13px color-mix(in srgb, var(--blue) 14%, transparent);
}
.site-sound-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.site-sound-button:active { transform: scale(.97); }
@media (hover: hover) {
  .site-sound-button:hover { border-color: var(--blue); background: var(--control-hover); }
}
.site-sound-button .music-wave { display: block; width: 30px; height: 24px; overflow: hidden; clip-path: inset(0 4px); }
/* 同一条曲线用 1.35 秒舒展或收拢，避免两条线快速交叉淡化。 */
.music-wave-envelope { transform-origin: 16px 12px; transform: scaleY(.001); opacity: 0; transition: transform 1.35s cubic-bezier(.4,0,.6,1); }
[data-wave-ready="true"] .music-wave-envelope { opacity: 1; }
[data-wave-ready="true"] .music-flat-line { display: none; }
/* 收拢期间继续匀速流动，落成横线后再停，相位不会被重置。 */
.music-wave-travel { animation: music-wave-flow 1.8s linear infinite paused; }
.music-wave-travel path { vector-effect: non-scaling-stroke; }
[data-music-state="playing"] .music-wave-envelope { transform: scaleY(1); opacity: 1; }
[data-wave-motion="running"] .music-wave-travel { animation-play-state: running; }
@keyframes music-wave-flow { to { transform: translateX(-24px); } }
.lake-controls .lake-music-button { align-self: center; justify-self: center; }
/* 失败提示在沉浸模式内归入湖面焦点范围，手机同样能重试。 */
.site-sound-notice {
  position: fixed; z-index: 50; top: max(88px, calc(env(safe-area-inset-top, 0px) + 64px));
  right: max(16px, env(safe-area-inset-right, 0px)); width: min(350px, calc(100% - 32px));
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  padding: 10px 12px; color: var(--text); border: 1px solid var(--glass-border);
  border-radius: 16px; background: var(--surface-panel); box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.site-sound-notice[hidden] { display: none; }
#site-sound-status { margin: 0; font-size: 12px; line-height: 1.6; }
.site-sound-notice button { min-width: 44px; min-height: 44px; padding: 6px; border: 0; border-radius: 10px; color: var(--blue); background: transparent; cursor: pointer; }
#site-sound-dismiss { font-size: 22px; }
.site-sound-notice button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 小屏保持四个控制互不重叠，圆形按钮始终保留 44px 触控区域。 */
@media (max-width: 600px) {
  .site-header { padding-inline: 16px; gap: 6px; }
  .site-header .header-actions { gap: 3px; }
  .site-header .brand { font-size: 24px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 10px; gap: 3px; }
  .site-header .header-actions { gap: 1px; }
  .site-header .brand { font-size: 21px; }
}
/* 系统减少动态时仍以静态波形区分播放状态。 */
@media (prefers-reduced-motion: reduce) {
  .site-sound-button, .music-wave-envelope, .music-flat-line { transition: none; }
  .music-wave-travel { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-sound-notice { background: var(--glass-fallback); }
}