/* === Audio toggle button — bottom-right corner === */
#audio-toggle {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 30;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.45);
  color: #d4cfc6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0.7;
}

#audio-toggle:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.45);
}

#audio-toggle svg {
  display: block;
}

/* When muted: hide sound waves, show X lines */
#audio-toggle .audio-wave1,
#audio-toggle .audio-wave2 {
  transition: opacity 0.2s;
}

#audio-toggle .audio-x1,
#audio-toggle .audio-x2 {
  opacity: 0;
  transition: opacity 0.2s;
}

#audio-toggle.is-muted .audio-wave1,
#audio-toggle.is-muted .audio-wave2 {
  opacity: 0;
}

#audio-toggle.is-muted .audio-x1,
#audio-toggle.is-muted .audio-x2 {
  opacity: 1;
}