/* ===== UI-ЗВУК: mute-кнопка =====
   Маленькая иконка-тоггл в углу HUD. Не перекрывает .badge/.sysline:
   .badge живёт справа в .topbar, кнопку уводим в ПРАВЫЙ НИЖНИЙ край topbar'а
   (чуть ниже бейджа) абсолютным позиционированием под safe-area.
   z-index выше HUD (.topbar = 30). */

.sfx-mute{
  display:none;   /* кнопка звука убрана из UI (по запросу) */
  position:fixed;
  top:calc(40px + var(--safe-t));
  right:16px;
  z-index:60;

  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  line-height:1;

  color:var(--neon-soft);
  background:rgba(8,8,10,.5);
  border:1px solid var(--line);
  border-radius:6px;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  appearance:none;
  user-select:none;
  transition:transform .15s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}

.sfx-mute:active{ transform:scale(.92); }

.sfx-mute:hover{ border-color:var(--neon-soft); }

/* приглушённое состояние (звук выключен) */
.sfx-mute.is-muted{
  color:var(--muted);
  opacity:.8;
}