/* «Un piso más» — maqueta.
   ---------------------------------------------------------------------------
   Paleta y tipos de zaxfun, mobile-first. El tablero manda: todo lo demás
   (marcador, menú, final) va encima en capas, para que la torre siga viéndose
   detrás incluso al perder — es lo que acabas de construir y es lo que se
   comparte. */

:root {
  --fondo:       #05060f;
  --panel:       rgba(255, 255, 255, .045);
  --panel-borde: rgba(255, 255, 255, .09);
  --texto:       #e9edfb;
  --texto-tenue: #8e97b8;
  --cian:        #6fd3ff;
  --violeta:     #b98cff;
  --oro:         #ffd479;
  --rojo:        #ff6b8a;
  --tipo-titulo: 'Space Grotesk', system-ui, sans-serif;
  --tipo-texto:  'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(62% 42% at 50% 18%, #141c40 0%, transparent 70%),
    var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-texto);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- El tablero ---------- */

.marco {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* EL LIENZO OCUPA LA VENTANA ENTERA, no los 520 px del marco. Encajado dentro,
   la ciudad y el cielo acababan en seco a media pantalla y se veía un rectángulo
   más claro alrededor del juego, como una caja pegada sobre el fondo. Ahora el
   mundo llega a los bordes y lo que sigue midiendo 520 es SOLO la zona de juego:
   `medir()` en `juego.js` guarda ese ancho aparte y centra la torre con un
   `translate`, así que la dificultad no cambia ni un píxel.

   Va `fixed` y no `absolute` para no depender del marco (que recorta), y
   detrás de todo con `z-index: 0`. */
#tablero {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;   /* o el navegador se lleva el toque para hacer scroll */
}

/* ---------- Marcador ----------
   El número de pisos, grande y translúcido detrás del juego: se lee de reojo
   sin quitarle sitio a la torre. */

.hud {
  position: absolute;
  top: max(.9rem, env(safe-area-inset-top));
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity .3s ease;
}
body[data-estado="menu"] .hud { opacity: 0; }

.hud-pisos {
  font: 700 clamp(2.6rem, 13vw, 3.6rem)/1 var(--tipo-titulo);
  letter-spacing: -.03em;
  color: rgba(233, 237, 251, .72);
  text-shadow: 0 2px 18px rgba(5, 6, 15, .9);
  font-variant-numeric: tabular-nums;
}
.hud-de {
  display: block;
  margin-top: .1rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(163, 173, 208, .9);
}
/* Los metros: la traducción del marcador a algo imaginable. Van pegados a los
   pisos y en cian, no a un lado como un segundo marcador — es el mismo dato. */
.hud-de b { color: var(--cian); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- El cartel de hito ----------
   «Más alto que la Torre de Pisa». Aparece a media pantalla, encima de la
   torre, y se va solo. Sin caja ni marco: es un rótulo, no un aviso del
   sistema, y no puede robarle la vista a la losa que está paseando. */

.aviso {
  position: absolute;
  left: 0;
  right: 0;
  top: 27%;
  z-index: 15;
  text-align: center;
  pointer-events: none;
  font: 600 clamp(.95rem, 4.4vw, 1.15rem)/1.3 var(--tipo-titulo);
  letter-spacing: -.01em;
  color: var(--oro);
  text-shadow: 0 2px 24px rgba(5, 6, 15, .95), 0 0 30px rgba(255, 212, 121, .35);
  opacity: 0;
  transform: translateY(10px) scale(.94);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .9, .3, 1.5);
}
.aviso.viva { opacity: 1; transform: none; }
body[data-estado="menu"] .aviso { display: none; }

/* La cadena de perfectos. Aparece sola a partir del segundo: antes sería un
   adorno permanente y dejaría de significar nada. */
.hud-cadena {
  display: block;
  margin-top: .35rem;
  height: 1.2rem;
  font: 700 1.05rem/1.2 var(--tipo-titulo);
  color: var(--oro);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, .9, .3, 1.4);
}
.hud-cadena.viva { opacity: 1; transform: scale(1); }

/* Las losas que quedan del reto del día. Solo sale en el reto, y hace falta:
   sin ella el jugador no sabe que la partida se acaba a la quince y suelta la
   última creyendo que va a haber otra. */
.hud-reto {
  display: block;
  margin-top: .15rem;
  font: 600 .78rem/1.2 var(--tipo-titulo);
  letter-spacing: .1em;
  color: rgba(163, 173, 208, .95);
  font-variant-numeric: tabular-nums;
}
.hud-reto:empty { display: none; }

/* ---------- Silencio ---------- */

/* Mismo caso que `#atras`: pegado al borde de la columna de 520 px, el
   silencio flotaba a media pantalla en vez de en su esquina. */
#sonido {
  position: fixed;
  top: max(.7rem, env(safe-area-inset-top));
  right: max(.8rem, env(safe-area-inset-right));
  z-index: 30;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(9, 12, 28, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--panel-borde);
  color: var(--texto-tenue);
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
}
#sonido.apagado { opacity: .55; }

/* ---------- Capas de menú y final ----------
   Las dos comparten forma: caja opaca, marco propio y sombra profunda, igual
   que las tarjetas de la portada. Sobre el cielo, un panel translúcido no
   separa nada. */

/* FIJA A LA VENTANA, no al marco: el velo tiene que apagar la torre de borde a
   borde. Encerrado en los 520 px del marco dibujaba su propio rectángulo sobre
   el cielo, que era la caja que se veía alrededor del juego. */
.capa {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1.2rem;
  /* Apaga la torre lo justo para que se lea el panel, no para taparla: lo que
     hay detrás es lo que acabas de construir y es la mitad del premio. */
  background: linear-gradient(180deg, rgba(5, 6, 15, .2), rgba(5, 6, 15, .62));
  animation: aparece .28s ease;
  /* SIN BARRA DE DESPLAZAMIENTO, NINGUNA.
     La capa desborda por DENTRO del tablero, así que su barra no cae en el
     borde de la ventana sino en medio de la pantalla, partiendo el juego en
     dos con una raya vertical. Primero era la del sistema (blanca, con carril
     y flechas), luego una fina translúcida, y seguía viéndose. Se quita
     entera: el menú se sigue arrastrando con el dedo y con la rueda, y que hay
     más abajo se ve porque el panel se va por el borde. Se necesitan las dos
     declaraciones (la estándar es la de Firefox). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.capa::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Ocultar la capa se escribe con los DOS identificadores, no con `.capa`.
   Más abajo `#menu` necesita `display: block` (el menú va en dos pisos y el
   flex se mudó a `.menu-juego`), y un id le gana a `body[…] .capa`: con la
   regla por clase, al pulsar «Jugar» el menú se quedaba encima de la partida
   tapando el lienzo entero, así que el toque no llegaba nunca a soltar la
   losa. El juego corría por debajo, invisible y sordo. */
body[data-estado="jugando"] #menu,
body[data-estado="cayendo"] #menu,
body[data-estado="jugando"] #fin,
body[data-estado="cayendo"] #fin { display: none; }
body[data-estado="menu"] #fin { display: none; }
body[data-estado="fin"]  #menu { display: none; }

@keyframes aparece { from { opacity: 0; } }

.caja {
  width: 100%;
  max-width: 340px;
  padding: 1.6rem 1.3rem 1.4rem;
  border: 1px solid var(--panel-borde);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(111, 211, 255, .07), transparent 55%),
    #0a0d1e;
  box-shadow: 0 40px 80px -40px #000;
  text-align: center;
  animation: entra .34s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.titulo {
  margin: 0 0 .5rem;
  font: 700 clamp(1.8rem, 8vw, 2.3rem)/1.05 var(--tipo-titulo);
  letter-spacing: -.02em;
}
.lema {
  margin: 0 auto 1.4rem;
  max-width: 26ch;
  color: var(--texto-tenue);
  font-size: .95rem;
  line-height: 1.5;
}

.boton {
  width: 100%;
  padding: .85rem 1.8rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe4a3, var(--oro));
  color: #2a1d02;
  font: 700 1.05rem/1 var(--tipo-titulo);
  cursor: pointer;
  box-shadow: 0 14px 34px -16px var(--oro);
  transition: transform .12s ease;
}
.boton:active { transform: scale(.98); }

.boton-plano {
  margin-top: .7rem;
  padding: .6rem 1.2rem;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-tenue);
  font: 600 .9rem/1 var(--tipo-texto);
  cursor: pointer;
}

.marca {
  margin: .9rem 0 0;
  min-height: 1.1rem;
  color: var(--texto-tenue);
  font-size: .86rem;
}
.marca b { color: var(--texto); }
.marca:empty { display: none; }

/* ---------- Las dos capas de la casa: reto del día y tabla ----------
   La pinta la ponen `css/reto.css` y `css/top.css`, que son de zaxfun y las
   comparten todos los arcades. Aquí solo se dice cómo caen DENTRO de la caja
   del menú, que es estrecha (340 px): a todo el ancho y alineadas a la
   izquierda, porque una lista de récords centrada no se lee. */

.fuera { display: none !important; }

.separador {
  height: 1px;
  margin: 1.15rem 0;
  background: var(--panel-borde);
}

#panel, #top { width: 100%; }
/* Las dos vienen con caja propia —marco, fondo y aire—, que es lo que hace
   falta cuando cuelgan sueltas en una pantalla. Dentro de otra caja sobra el
   marco: apiladas se ven como un cajón dentro de otro. El aire de dentro SÍ se
   queda, porque el reto se corona con un aro de luz al cerrarlo (`reto.css`) y
   sin margen el aro pasa por encima de las letras. */
#panel .reto-caja, #top .top-caja {
  border: 0;
  background: transparent;
  padding: .55rem .55rem .35rem;
  max-width: none;
}

/* El resultado del reto en la pantalla final. Los cuadritos, grandes: son lo
   que se comparte y lo primero que se mira. */
#fin-reto { margin: 0 0 1.1rem; }
.fin-reto-cuadros {
  font-size: 1.3rem;
  letter-spacing: .1em;
  line-height: 1.5;
  word-break: break-all;
}
.fin-reto-titular {
  margin-top: .3rem;
  color: var(--texto-tenue);
  font-size: .84rem;
}
.fin-reto-titular b { color: var(--oro); font-family: var(--tipo-titulo); }

#fin-top { margin: 0 0 1.1rem; }
/* En la derrota todo va centrado; dentro de la tabla, a la izquierda como el
   resto de la lista. */
#fin-top .top-firma { text-align: center; }

/* ---------- El final ---------- */

.cifra {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .35rem;
  font-family: var(--tipo-titulo);
  font-variant-numeric: tabular-nums;
}
.cifra span {
  font-size: clamp(3.4rem, 17vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cian);
  text-shadow: 0 0 40px rgba(111, 211, 255, .3);
}
.cifra small { font-size: 1.05rem; font-weight: 500; color: var(--texto-tenue); }

/* La altura real, justo debajo del número de pisos. Es lo que se cuenta luego:
   nadie dice «hice 124 pisos», se dice «pasé la Torre Eiffel». */
.altura {
  margin: .55rem 0 0;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--texto-tenue);
}
.altura b { color: var(--oro); font-family: var(--tipo-titulo); }

/* Y a cuánto se quedó del siguiente: el motivo para darle a «otra vez». */
.proximo {
  margin: .5rem 0 0;
  font-size: .84rem;
  color: rgba(142, 151, 184, .8);
}
.proximo:empty { display: none; }

/* Por qué se acabó. Va pegado al número y en rojo tenue: es la explicación del
   último segundo, que es lo que un arcade le debe al jugador. */
.porque {
  margin: .6rem 0 1.1rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--rojo);
  opacity: .85;
}

.cuentas {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin: 0 0 1.2rem;
  padding: .8rem 0;
  border-top: 1px solid var(--panel-borde);
  border-bottom: 1px solid var(--panel-borde);
  font-size: .78rem;
  color: var(--texto-tenue);
}
.cuentas b {
  display: block;
  font: 700 1.35rem/1.1 var(--tipo-titulo);
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

.pie {
  margin: 1.1rem 0 0;
  color: var(--texto-tenue);
  font-size: .8rem;
}
.pie b { color: var(--oro); }

/* ---------- Volver a zaxfun ----------
   Un solo botón de vuelta a la vez, la regla de toda la casa: jugando no está
   (el juego se toca en cualquier sitio de la pantalla y sería un enlace puesto
   justo donde se juega), parado saca de aquí.

   ARRIBA A LA IZQUIERDA, como en «el pulso» y como la barra de las demás
   páginas. Nació abajo y era el único juguete de la casa donde la salida
   estaba en otro sitio. El hueco está libre: el marcador va centrado y el
   botón de silencio, arriba a la derecha. */

/* `fixed`, no `absolute`: `.marco` es una columna de 520 px centrada, así que
   en una pantalla ancha el botón se quedaba pegado al borde de la tarjeta, a
   media pantalla, en vez de en la esquina. Era el único juguete de la casa
   donde la salida no estaba en la esquina de verdad. */
#atras {
  position: fixed;
  left: max(.9rem, env(safe-area-inset-left));
  top: max(.9rem, env(safe-area-inset-top));
  z-index: 30;
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--panel-borde);
  background: rgba(9, 12, 28, .72);
  backdrop-filter: blur(8px);
  color: var(--texto-tenue);
  font-size: .84rem;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

#atras span { font-weight: 600; }
body[data-estado="jugando"] #atras,
body[data-estado="cayendo"] #atras { display: none; }

/* EL MENÚ DE ZAXFUN, justo al lado. La cápsula de volver mide ~93 px con este
   tipo y este relleno; de ahí el hueco. Y se va con la MISMA regla que ella:
   mientras cae una losa no hay más botones que los del juego. */
:root {
  --zx-menu-izq: calc(max(.9rem, env(safe-area-inset-left)) + 6.4rem);
  /* +4 px: la cápsula de volver es más alta que la del menú y lo que tiene
     que coincidir es el centro de las dos, no el borde de arriba. */
  --zx-menu-arriba: calc(max(.9rem, env(safe-area-inset-top)) + 4px);
}
body[data-estado="jugando"] .zx-menu-suelto,
body[data-estado="cayendo"] .zx-menu-suelto { display: none; }

/* ---------- El menú, en dos pisos ----------
   Arriba el juego, centrado y a pantalla completa (lo de siempre); debajo, lo
   que se lee. El flex que centraba se muda de `.capa` a `.menu-juego`: si se
   queda en la capa, el texto de abajo cuenta para el centrado y al entrar ves
   el título a media altura en vez de la portada del juego. */

#menu {
  display: block;
  padding: 0;
  scroll-behavior: smooth;
}

.menu-juego {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 2rem 1.2rem;
}

/* La única señal de que abajo hay algo. Enlace de verdad a `#info`: rueda
   igual aunque el JavaScript del juego no haya llegado a cargar. */
.pista-abajo {
  margin-top: 1.1rem;
  color: var(--texto-tenue);
  font-size: .82rem;
  text-decoration: none;
  transition: color .18s ease;
  /* Cae justo encima de la torre del menú, que va llena de ventanas: sin la
     sombra propia se pierde entre ellas y nadie baja a leer nada. */
  text-shadow: 0 1px 12px #05060f, 0 0 22px #05060f;
}

.pista-abajo span:last-child {
  display: inline-block;
  animation: pista-baja 2.4s ease-in-out infinite;
}
@keyframes pista-baja {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ---------- Lo que se lee ----------
   Alineado a la IZQUIERDA, al revés que todo lo demás: tres párrafos centrados
   se leen como los créditos de una película, no como una explicación. */

.info {
  /* Ocupa TODO el ancho y centra el texto con el propio relleno, en vez de ser
     una columna estrecha centrada. Es la única manera de que el fondo opaco
     llegue de borde a borde: con una columna de 34rem, a los lados seguía
     viéndose la torre del menú por detrás y el texto no se podía leer. */
  padding: 2.5rem max(1.5rem, calc(50% - 17rem)) 4rem;
  background: linear-gradient(180deg, rgba(5, 6, 15, 0), #05060f 3.5rem);
  text-align: left;
  color: var(--texto-tenue);
  font-size: .92rem;
  line-height: 1.62;
  /* El resto de la página no deja seleccionar (se toca mucho y sin querer se
     pintaba de azul media pantalla). Aquí sí: es texto para leer y copiar. */
  -webkit-user-select: text;
  user-select: text;
}

.info-titulo {
  font-family: var(--tipo-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--texto);
  margin: 2.6rem 0 1.1rem;
}
.info-titulo:first-child { margin-top: 1.6rem; }

.info-pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}
.info-pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  column-gap: .95rem;
  row-gap: .15rem;
}
.info-pasos li::before {
  content: counter(paso);
  grid-row: 1 / span 2;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--panel-borde);
  background: var(--panel);
  color: var(--oro);
  font-family: var(--tipo-titulo);
  font-size: .9rem;
  font-weight: 600;
}
.info-pasos b { color: var(--texto); font-weight: 600; }

.info-preguntas { margin: 0; }
.info-preguntas dt {
  color: var(--texto);
  font-weight: 600;
  margin-top: 1.35rem;
}
.info-preguntas dt:first-of-type { margin-top: 0; }
.info-preguntas dd { margin: .25rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- El pasar por encima ----------
   TODO el `:hover` de esta hoja, en un solo bloque y encerrado en
   `@media (hover: hover)`. En un teléfono el navegador dispara el hover al
   TOCAR y LO DEJA PUESTO: sin esto, lo que acabas de pulsar se queda encendido
   hasta que toques otra cosa (Pieza 5 del acabado premium).
   El levantarse, el hundirse al pulsar y el aro no están aquí: son el gesto
   común de la casa y viven en `comun/css/tacto.css`, que se carga después. */
@media (hover: hover) {
  #atras:hover { color: var(--texto); border-color: rgba(255, 255, 255, .26); }
  .pista-abajo:hover { color: var(--texto); }
}