/* ============================================================================
   VialPro · sound.css — el botón de silencio
   ----------------------------------------------------------------------------
   Un control que existe en los cuatro juegos, siempre en el mismo sitio y con
   el mismo aspecto. Que esté SIEMPRE en el mismo sitio es la mitad del trabajo:
   un botón que salta de esquina según la pantalla es un botón que no se
   encuentra cuando hace falta, que es exactamente cuando el juego está sonando
   y no debería.

   Arriba a la derecha y no abajo: abajo compiten los pulgares con los botones
   de respuesta, y un silencio pulsado sin querer en mitad de una partida es
   peor que no tenerlo.
   ========================================================================== */

/* Abajo a la izquierda, no arriba a la derecha (Nico, 21-sep-2026: «en survival
   sale partida la pantalla por arriba»). Arriba a la derecha ya vive un control
   en CADA juego —ABANDONAR en el Survival, la pausa en el Cazador, el menú en
   Pass or Smash— y el mute se les montaba encima, pisando además el marcador de
   récord. Abajo a la izquierda no hay nada en ninguno de los cinco. */
.vp-sound {
  position: fixed;
  bottom: max(10px, env(safe-area-inset-bottom, 0px) + 8px);
  left: max(10px, env(safe-area-inset-left, 0px) + 8px);
  z-index: 2147481500;

  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;

  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(14, 12, 18, .62);
  color: rgba(255, 255, 255, .72);

  /* El desenfoque de fondo es estático y sobre un elemento de 34 px: se
     rasteriza una vez y no vuelve a tocarse. Nada que ver con poner un
     backdrop-filter sobre algo que se anima, que sí se paga caro. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);

  transition: transform .12s cubic-bezier(.34, 1.4, .64, 1),
              color .18s ease-out,
              border-color .18s ease-out,
              opacity .18s ease-out;
  opacity: .62;
}

.vp-sound:hover  { opacity: 1; color: #fff; border-color: rgba(255,255,255,.3) }
.vp-sound:active { transform: scale(.9) }
.vp-sound svg    { display: block; pointer-events: none }

/* Silenciado: se marca en ámbar y sube de opacidad. Un estado "apagado" que se
   ve apagado se confunde con un botón deshabilitado; y el jugador que no oye
   nada tiene que poder saber de un vistazo que es porque él lo quiso. */
html.vp-muted .vp-sound {
  opacity: .95;
  color: #d4a843;
  border-color: rgba(212, 168, 67, .45);
  background: rgba(30, 22, 6, .72);
}

/* Estas pantallas ya se comen la esquina superior derecha con su propio botón
   de abandonar. Se baja el nuestro para no solaparlos. */
.vp-sound { top: max(10px, env(safe-area-inset-top, 0px) + 6px) }
html[data-vp-game="survival"] .vp-sound,
html[data-vp-game="pos"] .vp-sound,
html[data-vp-game="cazador"] .vp-sound,
html[data-vp-game="boss"] .vp-sound {
  top: auto;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  right: 12px;
}

/* Mientras hay un overlay a pantalla completa (guía, resultados) el botón
   estorba y además queda por debajo: se aparta.

   Con `:has()` sobre <body> y no con el combinador de hermanos `~`: el botón se
   añade al DOM ANTES que la guía, así que `.vp-gg ~ .vp-sound` no coincide
   nunca — el hermano tiene que ir después. Comprobado en pantalla: el botón
   seguía encima de la guía. */
body:has(.vp-gg) .vp-sound,
body:has(.jx-results) .vp-sound { opacity: 0; pointer-events: none }

@media (prefers-reduced-motion: reduce) {
  .vp-sound { transition: none }
}

/* Pass or Smash se marca como "passorsmash" (no "pos"), así que la regla de
   arriba nunca le llegó y el altavoz se montaba sobre «Volver» (28-sep).
   Abajo chocaría con las cúpulas: va arriba, a la derecha de «Volver». */
html[data-vp-game="passorsmash"] .vp-sound {
  top: max(10px, env(safe-area-inset-top, 0px) + 6px);
  left: max(106px, env(safe-area-inset-left, 0px) + 104px);
  bottom: auto; right: auto;
}