/* One readable sound switch across the collection and concert HUD. */
button.sound-toggle[aria-pressed] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 98px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #ff85be99;
  border-radius: 10px;
  color: #ffc4df;
  background: linear-gradient(145deg, #352046, #1b1833);
  box-shadow: inset 0 1px 0 #ffffff18;
  font: 700 11px/1 "DM Mono", monospace;
  white-space: nowrap;
  -webkit-text-fill-color: currentColor;
}
button.sound-toggle::before {
  content: "";
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("images/sound-off.svg") center / contain no-repeat;
  mask: url("images/sound-off.svg") center / contain no-repeat;
}
button.sound-toggle[aria-pressed="true"] {
  color: #d5ff85;
  border-color: #c9f66b;
  background: linear-gradient(145deg, #273d38, #231c3d);
  box-shadow: inset 0 1px 0 #ffffff18, 0 0 10px #b5f76630;
}
button.sound-toggle[aria-pressed="true"]::before {
  -webkit-mask-image: url("images/sound-on.svg");
  mask-image: url("images/sound-on.svg");
  filter: drop-shadow(0 0 3px #c9f66b66);
}
button.sound-toggle:hover { border-color: #fff2ad; }
button.sound-toggle:focus-visible { outline: 2px solid #ffe57f; outline-offset: 3px; }
button#sound-button.sound-toggle {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 38px;
  padding: 6px;
  font-size: 10px;
}
button#sound-button.sound-toggle > span { display: inline; color: inherit; font: inherit; opacity: 1; }
@media (max-width: 600px) {
  button.sound-toggle[aria-pressed] { min-width: 91px; padding-inline: 7px; font-size: 10px; }
  button#sound-button.sound-toggle { min-width: 0; padding-inline: 5px; }
}