/* Mismo mundo que la app: equipo de radio, chasis oscuro, rótulos grabados, relieve en vez
   de sombra y ámbar como único relleno de acento. Los valores salen de
   src/shared/styles/base.css, que es la fuente: quien siga esta página abre el programa
   treinta segundos después, y dos estéticas distintas se leen como dos cosas distintas. */

:root {
  color-scheme: dark;
  --chasis: #101113;
  --panel: #1a1c1f;
  --panel-alto: #212429;
  --borde: #2c2f34;
  --relieve: #383c42;
  --texto: #e6e8ea;
  --grabado: #8d9299;
  /* Más claro que el de la app (#5c6067): allí es un rótulo de una palabra en un panel
     denso, aquí son párrafos que hay que leer. Medido: 4,72:1 sobre el panel, por encima
     del 4,5 que pide el texto normal. Con el valor de la app daba 2,6 y no se leía. */
  --apagado: #82878e;
  --ambar: #e5a93c;
  --tx: #64d18a;
  --alarma: #f08a7c;
  --radio: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-family: ui-sans-serif, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

/* `hidden` lo pone la hoja del navegador como `display: none`, y cualquier clase con
   `display` la pisa. Sin esto, el bloque del código revelado se veía vacío desde el
   principio y el formulario del acertijo no se iba al acertar. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--chasis);
  color: var(--texto);
}

/* Ancho fijo, no elástico: en pantalla grande un documento que se estira se lee como una
   página a medio hacer, y esto es un aparato, no un artículo. `max-width` deja que en un
   móvil estrecho siga cabiendo, que es lo único que no puede romperse. */
.marco {
  width: 520px;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* El rótulo grabado de la app: mayúsculas, monoespaciada, muy espaciado. */
.rotulo {
  font: 600 10px/1.3 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grabado);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  /* El borde superior más claro es lo que da el relieve, sin una sola sombra. */
  border-top-color: var(--relieve);
  border-radius: var(--radio);
}

.cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.cx {
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ambar);
  border: 1px solid var(--relieve);
  border-radius: var(--radio);
  padding: var(--space-2);
}

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.panel-cab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--panel-alto);
  border-bottom: 1px solid var(--borde);
}

/* El número es la jerarquía del paso: forma y relieve, no color saturado. */
.numero {
  font: 700 12px/1 var(--mono);
  color: var(--texto);
  background: var(--chasis);
  border: 1px solid var(--relieve);
  border-radius: var(--radio);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: none;
}

.cuerpo {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cuerpo p {
  margin: 0;
}

.pista {
  color: var(--apagado);
  font-size: 14px;
}

b {
  color: var(--texto);
  font-weight: 600;
}

/* Lo pulsable se ve pulsable: relieve arriba, hundido abajo, y al pulsar se invierte sin
   mover el contenido de sitio. */
.boton {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-top-color: var(--relieve);
  border-bottom-color: #15171a;
  border-radius: var(--radio);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background-color 90ms linear;
}

.boton:hover {
  background: var(--relieve);
}

.boton:active {
  border-top-color: #15171a;
  border-bottom-color: var(--relieve);
  background: var(--chasis);
}

.boton[disabled] {
  color: var(--grabado);
  cursor: progress;
}

.boton.principal {
  color: var(--chasis);
  background: var(--ambar);
  border-color: #b8862c;
  border-top-color: #f2c470;
}

.boton.principal:hover {
  background: #f0b954;
}

.boton.principal:active {
  background: #c9942f;
  border-top-color: #b8862c;
  border-bottom-color: #f2c470;
}

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

.secreto {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--space-4);
  background: var(--chasis);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.acertijo,
.revelado {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pregunta {
  margin: 0;
  font-size: 16px;
}

.fila {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  flex-wrap: wrap;
}

input[type='text'] {
  flex: 1 1 180px;
  min-width: 0;
  font: 400 15px/1 var(--mono);
  color: var(--texto);
  background: var(--panel);
  border: 1px solid var(--borde);
  /* Hundido, al revés que un botón: se escribe dentro, no se pulsa encima. */
  border-top-color: #15171a;
  border-radius: var(--radio);
  padding: var(--space-3);
}

.codigo {
  font: 700 15px/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ambar);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--space-3);
  flex: 1 1 180px;
  overflow-wrap: anywhere;
}

.codigo.bloque {
  display: block;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--texto);
}

/* La cuenta atrás manda: centrada y enorme. En una fila lateral el número quedaba huérfano
   en un hueco vacío; ocupando el centro, el hueco ES el número. */
.pie-acertijo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.alerta {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--ambar);
  border-radius: var(--radio);
  background: var(--chasis);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alerta p {
  margin: 0;
  font-size: 14px;
}

.comprobar summary {
  cursor: pointer;
  font: 600 10px/1.3 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grabado);
  padding: var(--space-2) 0;
}

.comprobar summary:hover {
  color: var(--texto);
}

.comprobar p {
  margin: var(--space-2) 0;
  font-size: 14px;
  color: var(--apagado);
}

pre {
  margin: 0;
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--space-3);
}

pre code {
  font: 400 13px/1.4 var(--mono);
  color: var(--texto);
}

.pie {
  padding-top: var(--space-4);
  border-top: 1px solid var(--borde);
}

@media (max-width: 420px) {
  .marco {
    padding: var(--space-4) var(--space-3) var(--space-6);
  }

  .boton {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* --- el acertijo: cuenta atrás, confirmación y los dos finales --------------------- */

.seguro,
.final {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}

.pregunta.grande {
  font-size: 20px;
  font-weight: 600;
}

/* La cuenta atrás es guasa: grande, en ámbar, y no bloquea nada. */
.cuenta {
  margin: 0;
  font: 700 84px/1 var(--mono);
  color: var(--grabado);
  text-align: center;
  /* Cifras de ancho fijo: sin esto el bloque salta de tamaño al pasar de 10 a 9. */
  font-variant-numeric: tabular-nums;
  min-height: 84px;
}

/* El mensaje pesa lo mismo que los números: encogerlo a letra de pie de página después de
   un «1» de 84 px hacía que el remate de la broma pasara desapercibido. Es una frase y no
   un dígito, así que ocupa dos líneas en vez de una. */
.cuenta.apura {
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ambar);
  min-height: 84px;
  display: flex;
  align-items: center;
  text-align: center;
}

.emoji {
  font-size: 96px;
  line-height: 1;
  /* Solo transform y opacity, que es lo único que no obliga a recalcular la página. */
  animation: entrar-emoji 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes entrar-emoji {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* Serif del sistema: en Mac sale Didot, en Windows Bodoni o Georgia. Ninguna se descarga,
   así que la página no pide nada a nadie para verse bien. */
.elegante {
  margin: 0;
  font-family: Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 44px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--texto);
}

.castigo {
  margin: 0;
  color: var(--apagado);
  font-size: 14px;
}

.mates {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: 'Latin Modern Math', 'Cambria Math', Cambria, Georgia, serif;
  font-size: 22px;
  width: 100%;
}

/* Acotado a `.mates`: los pasos de la guía son `<li class="panel paso">` y comparten el
   nombre. Sin el prefijo, el `opacity: 0` de aquí dejaba los tres pasos de la página
   invisibles, con su hueco y todo, y eso no da error en ningún sitio. */
.mates .paso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

.mates .paso.visible {
  opacity: 1;
  transform: none;
}

/* El sumatorio y la integral con sus límites encima y debajo: sin eso se leen como
   símbolos sueltos en una línea de texto, no como matemáticas. */
.operador {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.operador .signo {
  font-size: 34px;
}

.operador .limite {
  font-size: 12px;
  font-style: normal;
  color: var(--apagado);
}

.fraccion {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

.fraccion b {
  font-weight: 400;
  border-top: 1px solid var(--texto);
  padding-top: 2px;
}

.mates i {
  font-style: italic;
}

.igual {
  color: var(--apagado);
  padding: 0 var(--space-1);
}

.resultado {
  color: var(--ambar);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
}

@media (max-width: 420px) {
  .emoji {
    font-size: 76px;
  }

  .elegante {
    font-size: 36px;
  }

  .mates {
    font-size: 18px;
  }

  .cuenta {
    font-size: 64px;
    min-height: 64px;
  }

  .cuenta.apura {
    font-size: 29px;
    min-height: 64px;
  }

  /* En el móvil los dos botones de «¿estás seguro?» caben al lado; que uno ocupe toda la
     fila haría pensar que es el único. */
  .seguro .boton {
    width: auto;
    flex: 1 1 40%;
  }
}

/* --- el circo: lento y raro a propósito, que es de lo que va la página ------------- */

/* Solo transform y opacity en todo lo de abajo: mover width, top o left obliga al
   navegador a recalcular la página en cada cuadro. */

.temblor {
  animation: temblor 700ms ease-in-out;
}

@keyframes temblor {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-9px) rotate(-1deg); }
  28% { transform: translateX(8px) rotate(1deg); }
  44% { transform: translateX(-7px) rotate(-0.8deg); }
  60% { transform: translateX(6px) rotate(0.6deg); }
  76% { transform: translateX(-4px); }
  88% { transform: translateX(2px); }
}

#si {
  transition: transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* La caca gira despacio, para siempre. */
#mal .emoji {
  animation:
    entrar-emoji 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both,
    girar-despacio 9s linear 420ms infinite;
}

@keyframes girar-despacio {
  to {
    transform: rotate(360deg);
  }
}

/* El pulgar se balancea como si le costara. */
#bien .emoji {
  animation:
    entrar-emoji 420ms cubic-bezier(0.2, 1.4, 0.4, 1) both,
    bambolear 3.4s ease-in-out 420ms infinite;
}

@keyframes bambolear {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

/* «Correcto» entra letra a letra de lejos, con toda la calma del mundo. */
.elegante {
  animation: llegar-elegante 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes llegar-elegante {
  from {
    opacity: 0;
    transform: scale(2.4) translateY(-24px);
    letter-spacing: 0.6em;
  }
  to {
    opacity: 1;
    transform: none;
    letter-spacing: 0.02em;
  }
}

/* Mientras se descifra, el código late. */
.codigo {
  animation: latir 1.6s ease-in-out infinite;
}

@keyframes latir {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

.cuenta.apura {
  animation: tiritar 1.2s ease-in-out infinite;
}

@keyframes tiritar {
  0%, 100% { transform: translateX(0) }
  25% { transform: translateX(-2px) }
  75% { transform: translateX(2px) }
}

/* Todo lo de arriba se apaga entero para quien pidió menos movimiento: la broma no vale
   marear a nadie, y la página tiene que seguir dando el código igual. */
@media (prefers-reduced-motion: reduce) {
  .temblor,
  #mal .emoji,
  #bien .emoji,
  .elegante,
  .codigo,
  .cuenta.apura,
  .emoji {
    animation: none !important;
  }

  #si {
    transition: none !important;
  }
}

/* --- encendido: la página entra despacio, como un aparato que arranca --------------- */

/* Cada pieza llega con su retraso. Son casi tres segundos hasta que está todo: largo a
   propósito, que es lo que pidió el dueño de la broma. El contenido existe desde el primer
   momento —esto es solo opacidad y transform—, así que quien llegue con el teclado o con
   un lector de pantalla no se queda esperando a nada. */
.marco > * {
  animation: encender 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.marco > *:nth-child(1) { animation-delay: 120ms; }
.marco > *:nth-child(2) { animation-delay: 420ms; }
.marco > *:nth-child(3) { animation-delay: 700ms; }
.marco > *:nth-child(4) { animation-delay: 980ms; }

/* Los tres pasos van dentro del mismo `<ol>`, así que se escalonan aparte. */
.pasos > li {
  animation: encender 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pasos > li:nth-child(1) { animation-delay: 900ms; }
.pasos > li:nth-child(2) { animation-delay: 1500ms; }
.pasos > li:nth-child(3) { animation-delay: 2100ms; }

@keyframes encender {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* El rótulo de la cabecera se escribe como en una pantalla de equipo viejo. */
.cabecera .rotulo {
  animation: rotular 1400ms steps(30, end) 600ms both;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes rotular {
  from { max-width: 0; }
  to { max-width: 26em; }
}

/* El piloto de la cabecera tarda en calentarse. */
.cx {
  animation: calentar 2400ms ease-out 200ms both;
}

@keyframes calentar {
  0% { color: var(--apagado); }
  60% { color: var(--apagado); }
  100% { color: var(--ambar); }
}

@media (prefers-reduced-motion: reduce) {
  .marco > *,
  .pasos > li,
  .cabecera .rotulo,
  .cx {
    animation: none !important;
  }
}

/* --- los dedos que señalan el botón ------------------------------------------------ */

.descarga-esto {
  margin: 0;
  text-align: center;
  font: 700 22px/1.3 var(--mono);
  letter-spacing: 0.04em;
  color: var(--texto);
}

/* Desordenados a propósito: distinto tamaño, distinta inclinación y distinta altura. El
   `nth-child` evita repetir un estilo en línea por cada uno. */
.apuntan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.apuntan span {
  display: inline-block;
  transform-origin: center;
}

.apuntan span:nth-child(1) { font-size: 30px; transform: rotate(-18deg) translateY(4px); }
.apuntan span:nth-child(2) { font-size: 17px; transform: rotate(38deg); }
.apuntan span:nth-child(3) { font-size: 42px; transform: rotate(7deg) translateY(-3px); }
.apuntan span:nth-child(4) { font-size: 20px; transform: rotate(-44deg) translateY(6px); }
.apuntan span:nth-child(5) { font-size: 26px; transform: rotate(15deg); }
.apuntan span:nth-child(6) { font-size: 15px; transform: rotate(168deg); }
.apuntan span:nth-child(7) { font-size: 36px; transform: rotate(-9deg) translateY(2px); }
.apuntan span:nth-child(8) { font-size: 22px; transform: rotate(52deg) translateY(-4px); }
.apuntan span:nth-child(9) { font-size: 19px; transform: rotate(-30deg); }
.apuntan span:nth-child(10) { font-size: 33px; transform: rotate(24deg) translateY(5px); }

/* Los de debajo señalan hacia arriba, hacia el botón, y son más pequeños: el botón queda
   en medio del sándwich. */
.apuntan.abajo span:nth-child(odd) { font-size: 20px; }
.apuntan.abajo span:nth-child(even) { font-size: 28px; }
.apuntan.abajo span:nth-child(1) { transform: rotate(-22deg); }
.apuntan.abajo span:nth-child(2) { transform: rotate(11deg) translateY(-3px); }
.apuntan.abajo span:nth-child(3) { transform: rotate(-6deg); }
.apuntan.abajo span:nth-child(4) { transform: rotate(31deg) translateY(-2px); }
.apuntan.abajo span:nth-child(5) { transform: rotate(-14deg); }

/* Se balancean despacio, cada uno a su ritmo, para que nunca vayan a la vez. */
.apuntan span {
  animation: senalar 2.6s ease-in-out infinite;
}

.apuntan span:nth-child(2n) { animation-duration: 3.3s; }
.apuntan span:nth-child(3n) { animation-duration: 2.1s; animation-direction: reverse; }
.apuntan span:nth-child(5n) { animation-duration: 4.1s; }

@keyframes senalar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 7px; }
}

.apuntan.abajo span {
  animation-name: senalar-arriba;
}

@keyframes senalar-arriba {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@media (prefers-reduced-motion: reduce) {
  .apuntan span {
    animation: none !important;
  }
}