/* ============================================================
   Botón "Volver / Salir" de abajo (#btn-back-bottom) — UNA sola
   definición para TODOS los juegos.

   Antes cada juego lo definía a su manera como pastilla flotante
   (position:fixed), y cada vez que una pantalla tenía contenido de sobra
   la pastilla terminaba ENCIMA de otro botón ("Siguiente ronda",
   "Empezar", etc.) — un arreglo distinto en cada juego. Ahora
   assets/js/brk-exit.js mueve la pastilla DENTRO de la pantalla activa,
   al final de su contenido: es parte del flujo normal, así que por
   construcción no puede quedar encima de nada.

   Los selectores llevan .brk-exit-wrap > para ganarle en especificidad a
   las reglas viejas de cada juego (que siguen en sus archivos pero ya no
   tienen efecto sobre la pastilla). Para ocultarla en una pantalla, cada
   juego puede seguir usando body:has(#screen-x.active) #btn-back-bottom
   { display:none } — el contenedor desaparece solo (.is-empty).
   ============================================================ */
.brk-exit-wrap {
  width: 100%; flex-shrink: 0;
  display: flex; justify-content: center;
  margin-top: 24px;
}
.brk-exit-wrap.is-empty { display: none; }

.brk-exit-wrap > #btn-back-bottom {
  position: static; left: auto; bottom: auto; transform: none; z-index: auto;
  width: 100%; max-width: 360px;
  --pill-c: var(--coral, #ff5264);
  text-align: center;
  box-shadow: 0 0 22px color-mix(in srgb, var(--coral, #ff5264) 28%, transparent);
}
.brk-exit-wrap > #btn-back-bottom:active { transform: scale(0.97); }
.brk-exit-wrap > #btn-back-bottom.loading { pointer-events: none; opacity: 0.5; }

/* Con la pastilla en el flujo ya no hace falta reservar abajo el hueco que
   ocupaba flotando — solo un margen y la zona segura del celular. */
.screen:has(> .brk-exit-wrap:not(.is-empty)) {
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* ============================================================
   Menús principales centrados verticalmente — también compartido por
   todos los juegos (por eso vive acá aunque el archivo se llame "exit":
   es la única hoja que ya cargan los 9 y evita tocar cada juego).

   Antes el menú quedaba pegado arriba (empezaba a ~40px del borde y
   dejaba ~100px libres abajo, con la pastilla "Volver"), y se veía
   corrido hacia arriba. Ahora el bloque (título + tarjetas + "Volver")
   se centra, con el mismo margen arriba y abajo. Solo en pantallas con altura de sobra (>=760px, para no pisar la barra fija de volver/tema): en celulares
   bajitos todo sigue como antes (alineado arriba, con scroll) para no
   gastar espacio. Aplica a: inicio de cada juego (#screen-home), el menú
   de Multijugador (#screen-multi) y el menú de El Impostor.
   ============================================================ */
@media (min-height: 760px) {
  #screen-home.active,
  #screen-multi.active,
  #screen-multi-inicio.active {
    justify-content: center;
    padding-top: 40px;
    /* Algunos juegos reservan 84px abajo (hueco de la pastilla flotante de
       antes); ahora la pastilla va en el flujo, así que sobra y empujaba la
       página a tener scroll. */
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}