/* ==========================================================================
   Reproductor de juegos HTML5 — /jugar?g=<slug>

   Hoja aparte y minima a proposito: esta pagina no carga createhub.css porque
   no tiene nada del chrome del club (ni app bar, ni navbar, ni tarjetas). Solo
   una barra delgada y el juego ocupando el resto.
   ========================================================================== */

/* Misma fuente que el club: aqui se pide aparte porque esta pagina no carga
   createhub.css, que es donde vive el @import del resto del sitio. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* el juego maneja su propio scroll dentro del iframe */
  background-color: #0C0B0D;
}

.ch-play {
  display: flex;
  flex-direction: column;
  /* 100dvh sigue a la barra del navegador movil cuando aparece y desaparece;
     100vh queda de respaldo para los navegadores que no lo soportan. */
  height: 100vh;
  height: 100dvh;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.ch-play-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px;
  /* El notch del iPhone: con viewport-fit=cover el area segura hay que pedirla. */
  padding-top: env(safe-area-inset-top);
  height: calc(48px + env(safe-area-inset-top));
  background-color: #0C0B0D;
  color: #fff;
}

.ch-play-back {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;  /* 36 de caja visible, con el area tactil que le da la barra de 48 */
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .14);
  color: #fff;
  text-decoration: none;
}
.ch-play-back:hover { background-color: rgba(255, 255, 255, .26); }

.ch-play-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  /* Los nombres largos se recortan en vez de empujar el boton de volver. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   El juego
   -------------------------------------------------------------------------- */
.ch-play-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0; /* sin esto el iframe no se encoge dentro del flex y desborda */
  border: 0;
  display: block;
  background-color: #000;
}

/* --------------------------------------------------------------------------
   Aviso de girar el telefono

   Solo lo pinta jugarUi.php para los juegos de canvas apaisado (el catalogo
   marca cuales). Aparece unicamente con el telefono en vertical, que es donde
   el juego queda con bandas negras.

   Es un aviso, no un bloqueo: el boton "Jugar asi" pone .ch-girar-off en el
   body y no vuelve a salir. Quien trae el giro bloqueado en su telefono tiene
   que poder jugar igual.
   -------------------------------------------------------------------------- */
.ch-play-girar { display: none; }

@media (orientation: portrait) {
  body.ch-play-apaisado:not(.ch-girar-off) .ch-play-girar {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(12, 11, 13, .88);
  }
}

.ch-play-girar-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 280px;
  padding: 26px 22px;
  border-radius: 20px;
  background-color: #17161A;
  color: #fff;
  text-align: center;
}

.ch-play-girar-txt {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.ch-play-girar-txt span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .65);
}

.ch-play-girar-btn {
  min-height: 44px; /* piso tactil, igual que el resto del club */
  padding: 0 22px;
  border: 0;
  border-radius: 28px;
  background-color: #FF5A1F; /* --ch-brand del club */
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ch-play-girar-btn:hover { background-color: #E64E17; }