.sound-control {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  left: max(0.85rem, env(safe-area-inset-left));
  z-index: 120;
}

.sound-control[hidden] {
  display: none;
}

.sound-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(255, 241, 196, 0.2);
  border-radius: 999px;
  background: rgba(21, 34, 53, 0.22);
  box-shadow: 0 0.35rem 1.2rem rgba(15, 26, 41, 0.12);
  color: rgba(255, 246, 215, 0.74);
  font: inherit;
  cursor: pointer;
  opacity: 0.74;
  backdrop-filter: blur(0.3rem);
  transition:
    opacity 0.8s ease,
    border-color 0.8s ease,
    background 0.8s ease;
  -webkit-tap-highlight-color: transparent;
}

.sound-toggle:hover,
.sound-toggle:focus-visible,
.sound-toggle[data-state="playing"] {
  border-color: rgba(255, 235, 166, 0.44);
  background: rgba(21, 34, 53, 0.38);
  opacity: 1;
}

.sound-toggle:focus-visible {
  outline: 1px solid rgba(255, 235, 166, 0.78);
  outline-offset: 0.2rem;
}

.sound-toggle:disabled {
  cursor: wait;
}

.sound-toggle__mark {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
}

.sound-toggle__mark span {
  width: 0.12rem;
  height: 0.72rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
  transform: scaleY(0.34);
}

.sound-toggle__mark span:nth-child(2) {
  height: 0.95rem;
}

.sound-toggle[data-state="playing"] .sound-toggle__mark span {
  animation: sound-wave 1.8s ease-in-out infinite;
}

.sound-toggle[data-state="playing"] .sound-toggle__mark span:nth-child(2) {
  animation-delay: -0.55s;
}

.sound-toggle[data-state="playing"] .sound-toggle__mark span:nth-child(3) {
  animation-delay: -1.05s;
}

.sound-toggle__label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

@keyframes sound-wave {
  0%,
  100% {
    opacity: 0.5;
    transform: scaleY(0.34);
  }

  50% {
    opacity: 1;
    transform: scaleY(0.92);
  }
}

@media (max-width: 420px) {
  .sound-toggle {
    gap: 0.42rem;
    padding-inline: 0.62rem;
  }

  .sound-toggle__label {
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sound-toggle {
    transition-duration: 0.01ms;
  }

  .sound-toggle[data-state="playing"] .sound-toggle__mark span {
    animation: none;
    opacity: 0.9;
    transform: scaleY(0.72);
  }
}