/* controles-juego.css — LA barra de control de los cinco juegos (28-sep-2026).
 *
 * Nico: «los abandonar y lo de quitar el sonido, siempre en el mismo sitio».
 * Antes cada juego ponía cada botón donde le cabía: el sonido arriba a la
 * derecha en la portada del Duelo, arriba a la izquierda en su tablero, abajo a
 * la izquierda en Supervivencia, Cazador y Boss (y encima de «ENTRAR»); el
 * Abandonar del Boss dentro de la foto; el «!» a un lado u otro.
 *
 * La norma, igual en TODAS las pantallas de los cinco juegos, en una sola fila
 * arriba del todo:
 *
 *   [‹ Volver] [🔊] [!]  ·····························  [Abandonar ✕ | ⏸]
 *
 *   · «‹ Volver» a la izquierda (lo pone js/vp-back.js, ya era canon).
 *   · El sonido y el «!» justo a su derecha, siempre en la misma x.
 *   · Abandonar (o Pausa en el Cazador) a la derecha.
 *
 * Se carga la ÚLTIMA en cada juego y gana con !important a las reglas sueltas
 * de cada uno. Cada juego deja libre esa franja (--ctl-fila) para su contenido.
 */
:root {
  --ctl-top: max(10px, env(safe-area-inset-top, 0px));
  --ctl-alto: 38px;
  --ctl-izq: max(12px, env(safe-area-inset-left, 0px) + 12px);
  --ctl-der: max(12px, env(safe-area-inset-right, 0px) + 12px);
  --ctl-fila: calc(var(--ctl-top) + var(--ctl-alto) + 8px); /* alto que ocupa la fila */
}

/* ── sonido: al lado de «Volver» ── */
.vp-sound {
  position: fixed !important;
  top: var(--ctl-top) !important;
  left: calc(var(--ctl-izq) + 92px) !important;
  right: auto !important; bottom: auto !important;
  width: var(--ctl-alto) !important; height: var(--ctl-alto) !important;
  border-radius: 12px !important;
  z-index: 2147481000 !important;
}
/* el mute propio de juice.js duplica al global: nunca a la vista */
.jx-mute { display: none !important; }

/* ── «!» avisar de un fallo: al lado del sonido ── */
.vp-fb-btn {
  position: fixed !important;
  top: calc(var(--ctl-top) + 4px) !important;
  left: calc(var(--ctl-izq) + 138px) !important;
  right: auto !important; bottom: auto !important;
  width: 30px !important; height: 30px !important;
}

/* ── Abandonar / Pausa: a la derecha ── */
#s4Abandon, #s5Abandon,          /* Duelo: ruleta y tablero */
#quit,                           /* Supervivencia */
#btnQuit,                        /* Boss, examen */
#cz-pause {                      /* Cazador */
  position: fixed !important;
  top: var(--ctl-top) !important;
  right: var(--ctl-der) !important;
  left: auto !important; bottom: auto !important;
  height: var(--ctl-alto) !important;
  min-width: var(--ctl-alto) !important;
  margin: 0 !important;
  zoom: 1 !important;
  z-index: 2147481000 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important;
}
/* los Abandonar se leen igual en todos: pastilla oscura con filo rojo */
#s4Abandon, #s5Abandon, #quit, #btnQuit {
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: rgba(6, 6, 8, .66) !important;
  border: 1px solid rgba(255, 90, 72, .55) !important;
  color: #ffd2cb !important;
  font: 700 .8rem 'DM Sans', system-ui, sans-serif !important;
  letter-spacing: .04em !important; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255, 70, 50, .18) !important;
  backdrop-filter: blur(4px);
}
#cz-pause { width: var(--ctl-alto) !important; padding: 0 !important; transform: none !important; } /* sin la escala de tablet: mismo tamaño que los demás */

/* ── lo que cada juego tenía en esa fila, fuera de ella ── */

/* Duelo · tablero: el rótulo «Duelo de Titanes» quedaba debajo del sonido y
   el «!» en móvil; el turno ya dice de quién es la partida. */
@media (max-width: 600px) {
  .board-screen .du-title { visibility: hidden; }
}

/* Boss · examen: su barra (cara de quien examina y reloj) baja una fila para
   dejar arriba la de control, como en los otros cuatro juegos. */
body.boss-examen .bx-top { margin-top: calc(var(--ctl-alto) + 8px) !important; }

/* ── que se VEAN: el sonido y el «!» salían apagados (opacidad .6, gris); ahora
   con la misma pastilla que «Volver» y el icono en oro ── */
.vp-sound, .vp-fb-btn {
  opacity: 1 !important;
  background: rgba(6, 6, 8, .66) !important;
  border: 1px solid rgba(178, 110, 255, .45) !important;
  color: #ffc24a !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 12px rgba(178, 110, 255, .18) !important;
}
.vp-fb-btn { border-radius: 10px !important; font-weight: 900 !important; }
html.vp-muted .vp-sound { color: #ff8a7a !important; border-color: rgba(255, 90, 72, .55) !important; } /* silenciado: se nota */
/* «Abandonar ✕» siempre en una línea */
#s4Abandon, #s5Abandon, #quit, #btnQuit { white-space: nowrap !important; gap: 6px; }

/* ── Zona de toque ≥44 px (auditoría 28-sep, T2) ─────────────────────────────
   El dibujo se queda como está (38 px el sonido y los Abandonar); lo que crece
   es la zona que recibe el dedo, con un ::after transparente. El «!» (30 px) y
   el «Volver» (38 px) lo traen de serie en js/feedback.js y js/vp-back.js. */
.vp-sound::after,
#s4Abandon::after, #s5Abandon::after, #quit::after, #btnQuit::after, #cz-pause::after {
  content: ""; position: absolute; inset: -4px; /* se mide desde dentro del borde de 1 px: 36 + 8 = 44 */
}
/* el «!» 6 px más a la derecha: así su zona de 44 px no pisa la del sonido */
.vp-fb-btn { left: calc(var(--ctl-izq) + 144px) !important; }

/* ── Duelo · tablet: «Volver» tapado por el sonido y el «!» (DU1) ────────────
   El cambio de pantalla del Duelo animaba con transform: scale(.98). Mientras
   una pantalla tiene un transform, sus botones fijos (el «Volver» del tablero y
   de la portada) dejan de medirse contra la ventana y se meten en la columna
   centrada: en tablet quedaban debajo del sonido y el «!», que viven en la
   ventana. El fundido queda solo con la opacidad. */
.du-screen.du-screen-enter-prep,
.du-screen.du-screen-exit { transform: none !important; }

/* ── Boss · veredicto (BO2): Volver arriba y sin barra de scroll gris ── */
#scrFin .fin-in { scrollbar-width: none; }
/* sin la escena del veredicto (boss/escena-fin.js pone su propio padding-top
   inline para dejar sitio al dibujo), el contenido baja una fila */
body:not(.bfin-on) #scrFin .fin-in { padding-top: calc(var(--ctl-fila) + 6px); }
#scrFin .fin-in::-webkit-scrollbar, #scrFin::-webkit-scrollbar { display: none; }

/* ── Tablet (≥768 px): la fila crece con el resto de la UI (2-oct-2026) ──────
   En tablet los cinco juegos escalan su contenido y la fila se quedaba en
   móvil: letra de 13 px y botones de 38 px junto a respuestas de 20 px. Mismo
   orden y mismo sitio ([‹ Volver] [🔊] [!] ····· [Abandonar | ⏸]); crecen la
   letra (17 px) y el botón (48 px, el «!» 44), que ya es zona de toque por sí
   mismo. --ctl-alto sube a 48 y con él la franja que cada juego deja libre
   (--ctl-fila). Solo arcade: la piel soft tiene su propia pasada en
   css/soft/juegos-comun.css §8 con los mismos tamaños. */
@media (min-width: 768px) {
  html:not([data-piel="soft"]) { --ctl-alto: 48px; }
  html:not([data-piel="soft"]) body .vp-back {
    height: 48px !important; padding: 0 17px 0 13px !important; gap: 8px !important; border-radius: 14px !important;
    font: 700 17px/1 'DM Sans', system-ui, sans-serif !important;
  }
  html:not([data-piel="soft"]) body .vp-back .vpb-ch { font-size: 22px !important; }
  html:not([data-piel="soft"]) body .vp-sound {
    width: 48px !important; height: 48px !important; border-radius: 14px !important;
    left: calc(var(--ctl-izq) + 120px) !important;
  }
  html:not([data-piel="soft"]) body .vp-sound svg { width: 24px !important; height: 24px !important; }
  html:not([data-piel="soft"]) body .vp-fb-btn {
    width: 44px !important; height: 44px !important; border-radius: 13px !important;
    top: calc(var(--ctl-top) + 2px) !important; left: calc(var(--ctl-izq) + 182px) !important;
    font-size: 19px !important;
  }
  html:not([data-piel="soft"]) body #s4Abandon, html:not([data-piel="soft"]) body #s5Abandon,
  html:not([data-piel="soft"]) body #quit, html:not([data-piel="soft"]) body #btnQuit {
    height: 48px !important; padding: 0 18px !important; border-radius: 14px !important;
    font: 700 17px/1 'DM Sans', system-ui, sans-serif !important;
    width: auto !important; /* Supervivencia fija 120 px en su HTML y «ABANDONAR ✕» a 17 px se salía */
  }
  /* el Boss baja la letra de «salir» con su escala (--bk); el botón no escala */
  html:not([data-piel="soft"]) body.boss-examen #btnQuit#btnQuit { font-size: 17px !important; }
  html:not([data-piel="soft"]) body #cz-pause { width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 22px !important; border-radius: 14px !important; }
  html:not([data-piel="soft"]) body .vp-back::after, html:not([data-piel="soft"]) body .vp-fb-btn::after,
  html:not([data-piel="soft"]) body .vp-sound::after,
  html:not([data-piel="soft"]) body #s4Abandon::after, html:not([data-piel="soft"]) body #s5Abandon::after,
  html:not([data-piel="soft"]) body #quit::after, html:not([data-piel="soft"]) body #btnQuit::after,
  html:not([data-piel="soft"]) body #cz-pause::after { inset: 0 !important; }
  /* Cazador: su HUD va fijo a 54 px; con la fila de 48 px baja lo justo para no tocarla */
  html:not([data-piel="soft"]) body.cz-partida .cz-hud { top: calc(env(safe-area-inset-top, 0px) + 68px); }
}