/* ============================================================
   EL ESCAPARATE DE UN JUEGO

   Ojo a la diferencia, que es toda la razón de que este fichero exista:
   `/letras/` es EL JUEGO —una pantalla para una niña de seis años que no
   lee— y `/juegos/letras/` es la página que HABLA de ese juego, para el
   padre que llega desde un buscador. Son dos públicos que no caben en la
   misma pantalla: en el juego no puede haber texto (la regla de la casa es
   que no haya letra donde pueda haber un dibujo) y en un buscador no puede
   haber una página sin texto.

   Por eso no se le metió el texto al juego y se hizo esta otra: así el juego
   sigue siendo del todo suyo y esta página puede explicarse a gusto.

   Es hoja COMPARTIDA por las treinta y dos páginas de escaparate —dieciséis
   juegos en español y otros dieciséis en japonés—, al revés que `legal/` y
   `sobre/`, que llevan su CSS dentro. Allí es una página suelta y meterlo
   dentro ahorra una petición; aquí serían treinta y dos copias del mismo
   bloque, y cambiar un color pasaría a ser treinta y dos ediciones.

   Como va aparte, LLEVA `?v=N` y hay que subirlo al tocarla, en las treinta
   y dos. El `sed` de `recetas.md` sirve igual aquí.
   ============================================================ */

:root {
  --crema:  #fdf4dc;
  --oro:    #fbd973;
  --bg:     #5c3314;
  --text:   #3b2f16;
  --muted:  #8a7550;
  --linea:  #e6d5ab;
  --radio:  20px;
  --sombra: 0 10px 30px rgba(90, 68, 22, .18);
}

/* El color va en `html` y no sólo en la capa del paisaje: es el respaldo si
   la foto no carga. Mismo motivo que en `sobre/`. */
html { background: var(--bg); }

body {
  margin: 0;
  padding: 0 16px 64px;
  color: var(--text);
  font-family: Nunito, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

/* El paisaje de la CATEGORÍA del juego, que lo pone cada página en su
   `--paisaje`. Va en una capa `fixed` propia y NO con
   `background-attachment: fixed` en el body: en iOS Safari eso dimensiona la
   imagen al alto del DOCUMENTO y no al de la ventana, y estas páginas son
   largas, así que el paisaje saldría ampliado varias veces. El motivo largo
   está en `achievements/logros.css`.
   El velo oscuro va como primera capa del mismo `background-image`: el papel
   tiene que ganarle siempre al paisaje. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(50, 28, 10, .5), rgba(50, 28, 10, .5)),
    var(--paisaje);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

main {
  max-width: 44rem;   /* medida de lectura: más ancho y el ojo pierde el renglón */
  margin: 0 auto;
  padding-top: 28px;
}

/* ── La entrada ────────────────────────────────────────────────────────── */

.migas {
  font-size: .92rem; color: var(--oro);
  margin-bottom: 18px;
}
.migas a { color: var(--oro); text-decoration: none; border-bottom: 1px solid rgba(251, 217, 115, .4); }
.migas a:hover { border-bottom-color: var(--oro); }
.migas span { color: rgba(253, 244, 220, .55); margin: 0 .4em; }

.cabecera { text-align: center; padding: 6px 0 30px; }
.cabecera img {
  width: min(150px, 34vw); height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35));
}
.cabecera h1 {
  font-family: 'Bree Serif', Georgia, serif;
  font-size: clamp(1.6rem, 6.5vw, 2.3rem); line-height: 1.18;
  margin: 12px 0 0; color: var(--crema);
}
.cabecera p {
  margin: 10px auto 0; max-width: 30rem;
  color: rgba(253, 244, 220, .82); font-size: 1.05rem;
}

/* ── El botón de jugar ─────────────────────────────────────────────────── */

/* Es un <a> de verdad y no un botón con JavaScript, y ésa es media razón de
   ser de esta página: hasta ahora los dieciséis juegos se abrían desde el
   carrusel con `location.href` dentro de un manejador de clic, así que NO
   HABÍA UN SOLO ENLACE al que un buscador pudiera seguir. Los dieciséis eran
   páginas huérfanas. Éste es el enlace que faltaba. */
.jugar {
  display: block; width: fit-content; margin: 0 auto 34px;
  padding: 15px 40px;
  font-family: 'Bree Serif', Georgia, serif; font-size: 1.25rem;
  color: #4a2f0c; background: linear-gradient(180deg, #ffe89a, var(--oro));
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 6px 0 #c9a53f, 0 12px 26px rgba(0, 0, 0, .3);
  transition: transform .12s, box-shadow .12s;
}
.jugar:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #c9a53f, 0 16px 30px rgba(0, 0, 0, .34); }
.jugar:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9a53f, 0 6px 14px rgba(0, 0, 0, .3); }

/* ── Las hojas de texto ────────────────────────────────────────────────── */

section {
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 26px 26px 28px;
  margin: 0 0 20px;
}
section h2 {
  font-family: 'Bree Serif', Georgia, serif;
  font-size: 1.28rem; margin: 0 0 12px; color: #6b4410;
}
section h2:not(:first-child) { margin-top: 26px; }
section p { margin: 0 0 12px; }
section p:last-child { margin-bottom: 0; }
section ul { margin: 0 0 12px; padding-left: 1.3em; }
section li { margin-bottom: 6px; }
section strong { color: #6b4410; }

/* ── LOS ENLACES DENTRO DEL TEXTO ──────────────────────────────────────
   Los tenían todos menos éstos: había estilo para las migas, para las tarjetas
   de «después de éste» y para el pie, así que un enlace en mitad de un párrafo
   salía con el azul de fábrica del navegador. Sobre la crema y entre tipografía
   tierra eso no se lee como un enlace, se lee como una errata.
   No hacía falta hasta el 28 de agosto de 2026 porque el único escaparate que
   había no citaba a nadie. En cuanto fueron cinco empezaron a mandarse unos a
   otros —y a `levels/`, que es donde se explica la escalera— y aparecieron. */
section a {
  color: #8a4b12;
  text-decoration: underline;
  text-decoration-color: rgba(138, 75, 18, .38);
  text-underline-offset: .16em;
}
section a:hover { text-decoration-color: currentColor; }

/* La ficha de datos secos: edad, qué se practica, cuánto dura. Va en tabla y
   no en párrafo porque es lo que un padre mira de un vistazo antes de decidir
   si sigue leyendo. */
.ficha { width: 100%; border-collapse: collapse; margin: 0 0 4px; }
.ficha th, .ficha td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.ficha tr:last-child th, .ficha tr:last-child td { border-bottom: 0; }
.ficha th { width: 38%; color: var(--muted); font-weight: 700; padding-right: 14px; }

/* ── Los juegos de al lado ─────────────────────────────────────────────── */

.vecinos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vecinos a {
  display: block; padding: 13px 16px;
  background: #fff9e9; border: 1px solid var(--linea); border-radius: 14px;
  color: var(--text); text-decoration: none;
}
.vecinos a:hover { background: #fff; border-color: var(--oro); }
.vecinos b { display: block; color: #6b4410; }
.vecinos span { font-size: .93rem; color: var(--muted); }

/* ── El pie ────────────────────────────────────────────────────────────── */

.pie {
  text-align: center; padding: 26px 0 0;
  color: rgba(253, 244, 220, .7); font-size: .93rem;
}
.pie a { color: var(--oro); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .idioma { margin-bottom: 10px; }

/* El japonés necesita más aire entre renglones que el español: sin
   descendentes ni espacios entre palabras, el mismo 1.65 se lee apretado. */
:lang(ja) body, body:lang(ja) { line-height: 1.9; }