/* ==========================================================================
   MELIOR UI: SOUND TOGGLE (КИБЕР-ЭКРАН: ON / OFF)
   Референс 1: Включённый звук — зелёная версия (icon_sound_on.png / webp)
   Референс 2: Выключенный звук — красная версия (icon_sound_off.png / webp)
   Плавный cross-fade переход без мигания и сдвига
   ========================================================================== */

/* Legacy sizes apply ONLY outside #top-nav-bar */
:not(#top-nav-bar) > .sound-btn.sound-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(30px, 4.0vh, 44px) !important;
  min-width: 0 !important;
  max-width: 44px !important;
  height: clamp(28px, 3.7vh, 41px) !important;
  min-height: 0 !important;
  max-height: 41px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  outline: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  transition: transform 0.16s ease, filter 0.22s ease !important;
}

.sound-btn.sound-toggle:hover {
  transform: translateY(-1px) !important;
  filter: drop-shadow(0 0 8px rgba(0, 220, 255, 0.65)) brightness(1.1) !important;
}

.sound-btn.sound-toggle:active {
  transform: scale(0.92) !important;
  filter: brightness(0.95) !important;
}

.sound-btn.sound-toggle:focus-visible {
  outline: 2px solid rgba(0, 220, 255, 0.85) !important;
  outline-offset: 2px !important;
}

/* Удаляем псевдоэлементы старой капсулы */
.sound-toggle::before,
.sound-toggle::after {
  display: none !important;
  content: none !important;
}

.sound-toggle__visual {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.sound-toggle__pic {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sound-toggle__img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) !important;
}

/* Красное состояние (звук ВЫКЛЮЧЕН / is-muted) */
.sound-btn.is-muted .sound-toggle__pic--off {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
.sound-btn.is-muted .sound-toggle__pic--on {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.96) !important;
  pointer-events: none !important;
}

/* Зеленое состояние (звук ВКЛЮЧЕН / unmuted) */
.sound-btn:not(.is-muted) .sound-toggle__pic--on {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
.sound-btn:not(.is-muted) .sound-toggle__pic--off {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.96) !important;
  pointer-events: none !important;
}

/* Адаптивность для мобильных и планшетов (ТОЛЬКО вне #top-nav-bar) */
@media (max-width: 768px), (max-height: 700px) {
  :not(#top-nav-bar) > .sound-btn.sound-toggle {
    width: clamp(30px, 4.0vh, 40px) !important;
    min-width: 0 !important;
    max-width: 40px !important;
    height: clamp(28px, 3.7vh, 37px) !important;
    min-height: 0 !important;
    max-height: 37px !important;
  }
}

@media (max-width: 480px) {
  :not(#top-nav-bar) > .sound-btn.sound-toggle {
    width: 34px !important;
    min-width: 0 !important;
    max-width: 34px !important;
    height: 31px !important;
    min-height: 0 !important;
    max-height: 31px !important;
  }
}