/*
 * El marco de los puzzles: la barra de arriba y la llamada de abajo.
 *
 * Los 31 puzzles llegaron como HTML autónomos y sueltos: cada uno una isla,
 * sin forma de volver al catálogo ni de enterarse de que existen salas de
 * pago. Como además son lo que va a indexar Google —31 puertas de entrada al
 * sitio—, alguien podía aterrizar en un puzzle, resolverlo, y salir sin haber
 * visto nunca Exit Riddles. Este archivo es lo que convierte cada puzzle en
 * una puerta y no en un callejón.
 *
 * Se inyecta en cada puzzle con `puzzles/_tools/generar-catalogo.mjs`, que es
 * idempotente: reconoce lo que ya puso y no lo duplica.
 *
 * MUY DELIBERADO: aquí no se toca NADA del interior del puzzle. Ni una
 * variable, ni un `body`, ni un reset. Cada puzzle trae su propio CSS
 * completo y su propia paleta, y es justo lo que gusta de ellos. Todo lo de
 * aquí va prefijado con `.er-` y solo estiliza nodos que añade el marco. Si
 * algún día un selector de este archivo empieza a pisar el puzzle, está mal
 * escrito.
 */

/*
 * La página que ENVUELVE un acertijo: barra, acertijo y llamada, en columna.
 *
 * El acertijo va dentro de un `<iframe>` y no incrustado, y no es por pereza:
 * los 31 son aplicaciones a pantalla completa —velo que cubre la ventana,
 * `body { overflow: hidden }`— y cualquier barra metida dentro quedaba tapada.
 * Comprobado, no supuesto. Envolviendo, el acertijo conserva su ventana entera
 * (la del marco) y nosotros conservamos la nuestra.
 *
 * `100dvh` y no `100vh`: en un móvil la barra del navegador se come `vh` y el
 * acertijo quedaba recortado por abajo. Es la misma corrección que ya lleva
 * `.app` del cliente de juego.
 */
.er-envoltura {
  margin: 0;
  background: #14100e;
  /* Alto de la barra, en un sitio: lo usa `.er-juego` para descontarlo. Si se
     cambia el relleno de `.er-bar`, se cambia aquí. */
  --er-bar-h: 49px;
}

/*
 * EL ACERTIJO SE LLEVA LA VENTANA ENTERA MENOS LA BARRA. No es una elección
 * estética: es la única medida que funciona.
 *
 * CORRECCIÓN (2026-08-11). Esto era `flex: 1` con un tope de
 * `min(80dvh, 620px)`, y estaba roto de una forma que no se veía en una
 * comprobación normal: los 31 acertijos son aplicaciones a pantalla completa
 * con `body { overflow: hidden }`, así que al meterlos en un marco más bajo
 * NO aparece barra de desplazamiento — el contenido sobrante simplemente se
 * recorta y deja de existir. Medido: **17 de 31 en escritorio y 28 de 31 en
 * móvil** tenían elementos por debajo del borde, hasta 894px de más.
 *
 * Y la primera medición que hice tampoco lo vio, porque comparaba
 * `scrollHeight` con `clientHeight` — y con `overflow: hidden` esos dos
 * valores son IGUALES aunque se esté recortando media pantalla. Hubo que
 * medir el `getBoundingClientRect()` de cada elemento contra el borde del
 * marco para que apareciera.
 *
 * `100dvh` y no `100vh`: en un móvil la barra del navegador se come `vh`.
 * `dvh` es la que se ajusta al espacio real, que es justo el que el acertijo
 * cree tener.
 */
.er-juego {
  display: block;
  width: 100%;
  height: calc(100dvh - var(--er-bar-h));
  border: 0;
}

/*
 * Salida de emergencia: abrir el acertijo a pantalla completa, sin marco.
 *
 * Existe porque el marco descuenta 49px, y en una ventana muy baja hay
 * acertijos que no caben ni con la ventana entera — como tampoco caben
 * abiertos sueltos. Antes de dejar a alguien mirando un puzzle recortado sin
 * entender por qué, se le da la puerta. `target="_blank"` para no perder el
 * catálogo desde el que llegó.
 */
.er-bar__full {
  color: #a2957c;
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.er-bar__full:hover,
.er-bar__full:focus-visible {
  color: #f0d49a;
}

.er-bar,
.er-cta {
  /* Tipografía propia y no la del puzzle: el marco tiene que leerse como
     Exit Riddles, no como parte de la ficción de cada acertijo. Las familias
     son las de la portada (`site/assets/portada.css`), servidas desde aquí. */
  font-family: "Cinzel", Georgia, serif;
  box-sizing: border-box;
}

.er-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem clamp(0.8rem, 3vw, 1.4rem);
  background: #14100e;
  border-bottom: 1px solid rgb(184 147 78 / 0.28);
  color: #efe3cb;
}

.er-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #efe3cb;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.er-bar__brand img {
  width: 26px;
  height: auto;
  display: block;
}

.er-bar__sep {
  color: rgb(184 147 78 / 0.5);
}

.er-bar__up {
  color: #b8934e;
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.er-bar__up:hover,
.er-bar__up:focus-visible {
  color: #f0d49a;
}

/* El conmutador de idioma se pega al borde derecho. `margin-inline-start:
   auto` en vez de `justify-content: space-between` en el padre: así el día
   que haya un tercer elemento en la barra no hay que rehacer el reparto. */
.er-bar__langs {
  margin-inline-start: auto;
  display: flex;
  gap: 0.4rem;
}

.er-bar__lang {
  min-width: 44px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  border: 1px solid rgb(184 147 78 / 0.35);
  border-radius: 4px;
  color: #a2957c;
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.er-bar__lang[aria-current="true"] {
  color: #14100e;
  background: linear-gradient(180deg, #d9b978, #a8853f);
  border-color: transparent;
}

/*
 * La llamada del final. Es lo único de este archivo que existe por dinero:
 * quien acaba de resolver un acertijo es la persona más predispuesta que va a
 * haber a probar una sala entera. Va DESPUÉS del puzzle, nunca encima: si
 * estorbara mientras se juega, el puzzle dejaría de ser un regalo y pasaría a
 * ser un anuncio, y entonces no cumple ni su función de embudo.
 */
.er-cta {
  padding: clamp(1.6rem, 5vw, 2.6rem) clamp(0.8rem, 3vw, 1.4rem);
  background: #14100e;
  border-top: 1px solid rgb(184 147 78 / 0.28);
  color: #a2957c;
  text-align: center;
}

.er-cta__t {
  margin: 0 0 0.4rem;
  color: #efe3cb;
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  letter-spacing: 0.02em;
}

.er-cta__p {
  margin: 0 auto 1.1rem;
  max-width: 46ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.5;
}

.er-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.er-cta__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.3rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #d9b978, #a8853f);
  color: #2a1d08;
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.er-cta__btn--ghost {
  background: none;
  box-shadow: inset 0 0 0 1px rgb(184 147 78 / 0.45);
  color: #b8934e;
}

.er-cta__btn:hover,
.er-cta__btn:focus-visible {
  filter: brightness(1.08);
}