/* ==========================================================================
   MUNDO ROL - pagina de descarga
   Paleta y tipografia identicas a las de la app (ver CLAUDE.md, "Tema visual").

   Diferencia con la pagina de La Guarida del Horror: alli la portada es
   VERTICAL (pensada para movil) y ocupa la pantalla con object-fit: cover.
   Aqui la portada es APAISADA (1672x941) y se vera sobre todo en PC, donde
   un "cover" recortaria justo por los lados: el logotipo de abajo a la
   izquierda y la guerrera. Por eso el planteamiento cambia: la imagen se ve
   SIEMPRE ENTERA y el marco se ajusta a ella.
   ========================================================================== */

/* --- Paleta ------------------------------------------------------------- */
:root {
  --negro-cuero:   #140C07;
  --cuero-oscuro:  #241610;
  --oro-viejo:     #A98B66;
  --oro-claro:     #CBB28E;
  --pergamino:     #EADAB9;
  --rojo-forja:    #F12B09;
  --naranja-brasa: #F35F15;
  --ambar-brasa:   #F79620;
  --obsidiana:     #0E0D0F;

  /* Medidas de la portada. Si algun dia se cambia la imagen, estos son los
     UNICOS dos numeros que hay que tocar. */
  --portada-ancho: 1672;
  --portada-alto: 941;
}

/* --- Tipografia --------------------------------------------------------- */
/* Cinzel autoalojada, la misma que usa la app. Es OFL: la licencia viaja al
   lado, en fuentes/OFL-Cinzel.txt. Autoalojada y no desde Google Fonts para
   que la pagina funcione tambien en la red local sin salida a internet. */
@font-face {
  font-family: 'Cinzel';
  src: url('fuentes/cinzel_regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fuentes/cinzel_bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* --- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--negro-cuero);
  overflow-x: hidden;
}

/* En apaisado la escena cabe siempre: se bloquea el scroll para que no aparezca
   una barra por un pixel de redondeo. En vertical NO se bloquea, porque ahi el
   boton va debajo de la imagen y en pantallas muy cortas hay que poder bajar. */
@media (min-aspect-ratio: 1/1) {
  html, body { overflow: hidden; }
}

body {
  /* Brasas apagadas detras de la imagen: el letterboxing de las pantallas muy
     anchas o muy estrechas deja de parecer una barra negra y parece parte de
     la escena. */
  background:
    radial-gradient(ellipse 90% 70% at 50% 60%,
                    var(--cuero-oscuro) 0%,
                    var(--negro-cuero) 70%);
  color: var(--pergamino);
  font-family: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}

/* Titulo para lectores de pantalla y buscadores: el visible ya va dentro de
   la imagen. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Escena: la imagen entera y centrada -------------------------------- */
.escena {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;               /* movil: descuenta las barras del navegador */
  padding: 0;
}

/*
  El marco tiene EXACTAMENTE la relacion de aspecto de la portada, y su ancho
  es el mayor que cabe sin desbordar ni a lo ancho ni a lo alto. Asi la imagen
  se ve completa, sin recortes, y el boton -que va posicionado DENTRO del
  marco- queda siempre sobre la composicion y nunca flotando en la banda
  negra, que es lo que pasaria si se anclara al borde de la ventana.
*/
.marco {
  position: relative;
  margin: 0;
  /* La linea con vh va primero a proposito: en un navegador sin svh la
     segunda declaracion se descarta entera y queda esta. */
  width: min(100vw, calc(100vh  * var(--portada-ancho) / var(--portada-alto)));
  width: min(100vw, calc(100svh * var(--portada-ancho) / var(--portada-alto)));
  aspect-ratio: var(--portada-ancho) / var(--portada-alto);
  line-height: 0;                   /* mata el hueco fantasma bajo la imagen */
}

.portada {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* el marco ya cuadra: no recorta nada */
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Boton de descarga --------------------------------------------------- */
/*
  Colocado ABAJO A LA DERECHA, no al centro. En esta composicion la accion
  esta a la izquierda y en el centro (la guerrera y las brasas) y el logotipo
  ocupa la esquina inferior izquierda: la derecha es la unica zona tranquila y
  oscura de la escena. Al centro, el boton se le venia encima a la figura.
  Las medidas van en % del ancho del marco para que el boton se encoja con la
  imagen y siempre caiga en el mismo punto de la escena.
*/
.boton-descarga {
  position: absolute;
  right: 4.5%;
  bottom: 7%;

  /* inline-flex, y no inline-block, para poder imponer un alto minimo con el
     rotulo centrado dentro. Sin esto, en un movil tumbado la letra se encoge
     con el alto de la pantalla y el boton se queda en unos 24 px: se ve, pero
     no hay quien lo acierte con el dedo. 44 px es el minimo tocable. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;

  /* El padding derecho lleva descontado el letter-spacing: la ultima letra
     arrastra un hueco de 0.16em que, sin esto, descentraria el rotulo. */
  padding: 0.7em calc(1.9em - 0.16em) 0.7em 1.9em;

  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.78rem, 1.35vw, 1.25rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;        /* Cinzel es capital romana: ya sale en versales */
  line-height: 1.35;
  text-decoration: none;

  /*
    El rotulo es largo ("Descargar la ultima edicion"): NO se fuerza a una
    linea. Se le pone un tope de ancho relativo al marco y se deja partir.
    Asi, en una pantalla ancha entra de una linea, y en cuanto el marco se
    encoge pasa solo a dos, en vez de desbordar el boton o salirse de la
    imagen. `balance` reparte las dos lineas en vez de dejar una huerfana;
    donde no este soportado, el salto normal tambien queda bien.
  */
  max-width: min(46%, 34rem);
  text-align: center;
  text-wrap: balance;

  /* Brasa de MUNDO ROL: el degradado de titulos de la app, ambar -> rojo. */
  color: var(--obsidiana);
  background: linear-gradient(160deg,
              var(--ambar-brasa) 0%,
              var(--naranja-brasa) 55%,
              var(--rojo-forja) 100%);
  border: 1px solid var(--oro-viejo);
  border-radius: 3px;

  animation: latido 3.2s ease-in-out infinite;
  transition: transform 160ms ease, filter 160ms ease;
}

/* Latido suave, el mismo pulso de brasa que el boton de La Guarida: solo
   respira el halo, el boton no cambia de tamano ni da saltos. */
@keyframes latido {
  0%, 100% {
    box-shadow:
      0 0 0 rgba(247, 150, 32, 0),
      0 0 14px rgba(247, 150, 32, 0.28),
      0 3px 12px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      0 0 6px rgba(247, 150, 32, 0.35),
      0 0 34px rgba(247, 150, 32, 0.60),
      0 3px 12px rgba(0, 0, 0, 0.55);
  }
}

.boton-descarga:hover,
.boton-descarga:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.12);
  animation-play-state: paused;     /* al apuntarlo, el halo se queda arriba */
  box-shadow:
    0 0 8px rgba(247, 150, 32, 0.45),
    0 0 40px rgba(247, 150, 32, 0.70),
    0 5px 16px rgba(0, 0, 0, 0.6);
}

.boton-descarga:focus-visible {
  outline: 2px solid var(--pergamino);
  outline-offset: 3px;
}

.boton-descarga:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* --- Version, en un rincon discreto -------------------------------------- */
.version {
  position: fixed;
  right: 0.9rem;
  bottom: 0.6rem;
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom);

  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--oro-viejo);
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   Adaptaciones
   ========================================================================== */

/*
  MOVIL EN VERTICAL. Una imagen 16:9 dentro de una pantalla 9:16 se queda en
  una franja de menos de un tercio de la altura: el boton encima seria diminuto
  e ilegible. Ahi el boton SE SALE de la imagen, se pone debajo, centrado y
  grande, y la escena pasa a ser una columna. La imagen sigue viendose entera.
*/
@media (max-aspect-ratio: 1/1) {
  .escena {
    padding: 1.5rem 1rem 4.5rem;
    /* `safe` evita el clasico recorte del centrado en flex: si en una pantalla
       muy corta el conjunto no cabe, se alinea arriba y se puede llegar a todo,
       en vez de quedar la parte de arriba fuera y sin scroll posible. */
    align-items: safe center;
  }

  .marco {
    width: 100%;
    aspect-ratio: auto;             /* la altura la manda ya la propia imagen */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.6rem, 6vh, 3rem);
  }

  .portada {
    height: auto;
  }

  .boton-descarga {
    position: static;               /* deja de flotar sobre la escena */
    font-size: clamp(0.88rem, 4vw, 1.25rem);
    padding: 0.8em calc(1.7em - 0.16em) 0.8em 1.7em;
    /* Aqui el tope en % del marco no sirve: el marco es toda la pantalla, y un
       46% dejaria el rotulo en cuatro lineas. Se le deja casi todo el ancho. */
    max-width: min(100%, 24rem);
  }
}

/* Movil tumbado: pantalla muy apaisada y muy baja. La imagen ya llena casi
   todo, y el boton se acerca al borde para no pisar las brasas del centro. */
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .boton-descarga {
    /* Se mide en vh, no en vw: aqui lo escaso es el alto, y el rotulo tiene
       que caber en dos lineas sin comerse el borde inferior de la imagen. */
    font-size: clamp(0.72rem, 2.6vh, 0.95rem);
    padding: 0.5em calc(1.5em - 0.16em) 0.5em 1.5em;
    max-width: min(52%, 20rem);
    right: 3.5%;
    bottom: 6%;
  }

  .version {
    font-size: 0.62rem;
  }
}

/* Pantallas de PC muy anchas (ultrapanoramicas): el marco ya se queda limitado
   por la altura, asi que solo hay que evitar que la imagen se agigante y se
   vea blanda. */
@media (min-width: 2200px) {
  .marco {
    max-width: 2000px;
  }
}

/* Quien tenga desactivadas las animaciones del sistema no ve el latido. */
@media (prefers-reduced-motion: reduce) {
  .boton-descarga {
    animation: none;
    transition: none;
    box-shadow:
      0 0 20px rgba(247, 150, 32, 0.40),
      0 3px 12px rgba(0, 0, 0, 0.55);
  }
}