/* ==========================================================
   AUDIO CONTROLS
   ========================================================== */
#audio-controls {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(180, 160, 210, 0.52);
  text-shadow: var(--glow-violet-low);
}

#audio-toggle,
#sfx-toggle,
#audio-volume-label {
  text-transform: uppercase;
}

.audio-divider {
  color: rgba(180, 160, 210, 0.34);
  text-shadow: var(--glow-violet-low);
}

#audio-toggle,
#sfx-toggle {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  color: rgba(196, 178, 224, 0.68);
  font: inherit;
  letter-spacing: inherit;
  cursor: var(--cursor-pointer);
  text-shadow: var(--glow-violet-medium);
}

#audio-toggle:hover,
#audio-toggle:focus-visible,
#sfx-toggle:hover,
#sfx-toggle:focus-visible {
  outline: none;
  color: rgba(218, 202, 242, 0.9);
  text-shadow: var(--glow-violet-high);
}

#audio-volume-label {
  color: rgba(180, 160, 210, 0.44);
  margin-left: 2px;
}

#audio-volume {
  width: 62px;
  height: 12px;
  appearance: none;
  background: transparent;
  cursor: var(--cursor-pointer);
  filter:
    drop-shadow(0 0 4px rgba(180, 160, 210, 0.28))
    drop-shadow(0 0 12px rgba(160, 140, 200, 0.1));
}

#audio-volume::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(188, 170, 214, 0.28);
  box-shadow:
    0 0 4px rgba(180, 160, 210, 0.24),
    0 0 8px rgba(160, 140, 200, 0.1);
}

#audio-volume::-webkit-slider-thumb {
  appearance: none;
  width: 3px;
  height: 8px;
  margin-top: -3.5px;
  border: none;
  background: rgba(222, 208, 244, 0.92);
  box-shadow:
    0 0 4px rgba(214, 194, 248, 0.82),
    0 0 10px rgba(186, 162, 232, 0.34);
}

#audio-volume::-moz-range-track {
  height: 1px;
  background: rgba(188, 170, 214, 0.28);
  border: none;
  box-shadow:
    0 0 4px rgba(180, 160, 210, 0.24),
    0 0 8px rgba(160, 140, 200, 0.1);
}

#audio-volume::-moz-range-thumb {
  width: 3px;
  height: 8px;
  border: none;
  border-radius: 0;
  background: rgba(222, 208, 244, 0.92);
  box-shadow:
    0 0 4px rgba(214, 194, 248, 0.82),
    0 0 10px rgba(186, 162, 232, 0.34);
}

@media (max-width: 768px) {
  #audio-controls {
    left: 26px;
    bottom: 38px;
    transform: none;
    gap: 7px;
    font-size: 7px;
    justify-content: flex-start;
  }

  #audio-volume {
    width: 54px;
  }
}