/* Torre de Hanói — instrumento de evaluación.
 *
 * Lenguaje visual: plano. Ni un borde de contorno, ni un bisel, ni una sombra
 * decorativa. Las formas se separan por tono, no por línea. Lo único que se
 * dibuja en relieve es el disco que se lleva en la mano, porque ahí la altura
 * significa algo: está fuera del tablero.
 *
 * Regla de forma: lo que se toca es una cápsula (discos, botones); lo que
 * sostiene contenido es un rectángulo de esquinas suaves (tarjetas).
 *
 * Movimiento: sólo dos gestos, ambos cortos y ambos consecuencia directa de
 * algo que ha hecho quien mira. Todo bajo prefers-reduced-motion.
 */

:root {
  /* La sala */
  --sala:          #ECEDE7;
  --papel:         #FAFBF6;
  --papel-hundido: #F2F3ED;
  --tinta:         #1B1D1F;
  --tinta-suave:   #5C6169;
  --linea:         #E2E3DC;

  /* La madera del instrumento: un solo tono, como un tablero de verdad, que
     es una sola pieza. Llega a 3:1 contra la sala porque un poste vacío es lo
     único que dice que ahí hay una columna. */
  --madera:        #8C887D;

  /* Discos. Sin contorno que los ayude, así que cada color se sostiene solo:
     todos ≥3:1 contra la sala. Tres señales redundantes a la vez —tamaño,
     tono y claridad—: el disco más pequeño es el más claro y el mayor, el más
     oscuro, de modo que la torre se lee incluso sin distinguir colores. */
  --disco-1: #B57A0E;  /* ocre     — el más pequeño, 3.10:1 */
  --disco-2: #127C5B;  /* verde                       4.39:1 */
  --disco-3: #1D5C9B;  /* azul                        5.83:1 */
  --disco-4: #6E2E55;  /* ciruela  — el más grande,   8.16:1 */

  /* Única profundidad de la interfaz: el disco que está en el aire. */
  --sombra-mano: 0 14px 28px -10px rgba(27, 29, 31, 0.32),
                 0 4px 10px -4px rgba(27, 29, 31, 0.18);

  --fuente:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-datos: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --disco-h: clamp(30px, 5.4vw, 42px);
  --col-w:   clamp(94px, 28vw, 250px);
  --gap-col: clamp(6px, 2vw, 24px);
  --hueco:   calc(var(--disco-h) + 16px);
}

* { box-sizing: border-box; }

/* display:flex en .screen ganaría al display:none del atributo hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sala);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.screen {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Tipografía ─────────────────────────────────────────────────── */

.rotulo {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

h1 {
  font-size: clamp(1.75rem, 4.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 12px 0 10px;
  text-align: center;
}

h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
  text-align: center;
}

.subtitulo {
  margin: 0 0 44px;
  color: var(--tinta-suave);
  text-align: center;
}

/* ── Pantalla de inicio ─────────────────────────────────────────── */

.niveles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

/* Cada nivel se elige por su torre: el instrumento se presenta con la misma
   materia con la que se juega. */
.btn-nivel {
  flex: 1 1 210px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 26px 24px 22px;
  background: var(--papel);
  border: none;
  border-radius: 14px;
  color: var(--tinta);
  font-family: inherit;
  cursor: pointer;
}

.mini-torre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  width: 104px;
  height: 58px;
  margin-bottom: 20px;
  padding-bottom: 9px;
  background:
    linear-gradient(var(--madera), var(--madera)) bottom center / 100% 5px no-repeat;
}

.mini {
  height: 12px;
  border-radius: 999px;
}

.mini[data-tam="1"] { width: 40px; background: var(--disco-1); }
.mini[data-tam="2"] { width: 58px; background: var(--disco-2); }
.mini[data-tam="3"] { width: 76px; background: var(--disco-3); }
.mini[data-tam="4"] { width: 94px; background: var(--disco-4); }

.btn-nivel-titulo  { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; }
.btn-nivel-detalle { font-size: 0.9375rem; color: var(--tinta-suave); }

/* ── Barra del terapeuta ────────────────────────────────────────── */

/* Controles del instrumento, no del juego: rotulados como el resto del equipo
   para que se lean como algo que el niño no tiene que tocar. */
.barra {
  width: 100%;
  max-width: calc(var(--col-w) * 3 + var(--gap-col) * 2 + 24px);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: clamp(16px, 5vh, 48px);
}

.btn-barra {
  min-height: 30px;
  padding: 7px 14px;
  background: var(--papel-hundido);
  border: none;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-family: var(--fuente-datos);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Tablero ────────────────────────────────────────────────────── */

.tablero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap-col);
  width: 100%;
}

.columna {
  position: relative;
  width: var(--col-w);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Superficie de clic de la columna completa: queda por detrás de los discos,
   de modo que pulsar el poste, el aire o el disco elegido siempre acierta. */
.peg-btn {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

/* Con teclado no hay puntero al que seguir: el disco espera aquí, sobre su
   propia columna. */
.hueco-mano {
  position: relative;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: var(--hueco);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 10px;
}

.zona-poste {
  position: relative;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  min-height: calc(var(--disco-h) * 4 + 16px);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.zona-poste::before {           /* el poste */
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 100%;
  background: var(--madera);
  border-radius: 999px 999px 0 0;
}

.pila {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

/* La base sujeta los tres postes. Se solapa con ellos para que parezcan
   encajados en ella: es la misma madera, una sola pieza. */
.base {
  width: 100%;
  max-width: calc(var(--col-w) * 3 + var(--gap-col) * 2 + 24px);
  height: 14px;
  margin-top: -3px;
  background: var(--madera);
  border-radius: 999px;
}

/* La enhorabuena ocupa la banda que el tablero ya reserva sobre los postes:
   aparece y desaparece sin que nada se mueva de sitio, y queda junto a la
   torre, no perdida arriba junto a los controles. */
.celebracion {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hueco);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinta);
  pointer-events: none;
}

/* ── Piezas ─────────────────────────────────────────────────────── */

.pieza[data-tam="1"] { width: calc(var(--col-w) * 0.46); }
.pieza[data-tam="2"] { width: calc(var(--col-w) * 0.62); }
.pieza[data-tam="3"] { width: calc(var(--col-w) * 0.78); }
.pieza[data-tam="4"] { width: calc(var(--col-w) * 0.94); }

.disco {
  display: block;
  height: var(--disco-h);
  padding: 0;
  border: none;
  border-radius: 999px;
  font: inherit;
}

.disco[data-tam="1"] { background: var(--disco-1); }
.disco[data-tam="2"] { background: var(--disco-2); }
.disco[data-tam="3"] { background: var(--disco-3); }
.disco[data-tam="4"] { background: var(--disco-4); }

/* Coger: el cursor abre la mano sobre cualquier disco y la cierra en cuanto
   hay algo cogido, en toda la página. */
button.disco {
  pointer-events: auto;
  cursor: grab;
}

body.sosteniendo,
body.sosteniendo .peg-btn,
body.sosteniendo button.disco { cursor: grabbing; }

/* Lo que se lleva en la mano viaja por encima de la página, pegado al puntero.
   No intercepta clics: el destino siempre es lo que hay debajo. */
.mano {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

/* La única sombra del diseño, y es información: este disco está en el aire. */
.disco.en-mano { box-shadow: var(--sombra-mano); }

/* ── Informe ────────────────────────────────────────────────────── */

/* Descubrir el reporte es la acción de esta pantalla: maciza y en tinta,
   frente a los dos botones de abajo, que sólo llevan a otra parte. */
.btn-principal {
  min-height: 48px;
  margin-bottom: 40px;
  padding: 13px 34px;
  background: var(--tinta);
  border: none;
  border-radius: 999px;
  color: var(--papel);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.resultados {
  width: 100%;
  max-width: 460px;
  margin: 0 0 36px;
  padding: 6px 0;
  border: none;
  border-radius: 14px;
  background: var(--papel);
}

.resultado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--linea);
}

.resultado:last-child { border-bottom: none; }

.resultado dt {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--fuente-datos);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.resultado dd {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.btn-secundario {
  min-height: 44px;
  padding: 11px 24px;
  background: var(--papel);
  border: none;
  border-radius: 999px;
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

/* ── Movimiento ─────────────────────────────────────────────────── */

@keyframes posarse   { from { transform: translateY(-9px); } }
@keyframes festejar  { 0% { transform: translateY(0); }
                      45% { transform: translateY(-14px); }
                     100% { transform: translateY(0); } }
@keyframes felicitar { from { opacity: 0; transform: translateY(10px); } }
@keyframes reporte-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes fila-entra    { from { opacity: 0; transform: translateY(7px); } }

@media (prefers-reduced-motion: no-preference) {

  /* El disco se posa al llegar: 140 ms, sólo la pieza que se acaba de mover. */
  .disco.posando { animation: posarse 140ms ease-out; }

  /* Al pasar por encima se levanta lo que ese disco se llevaría consigo:
     él mismo y todo lo que descanse sobre él. */
  .pila button.disco { transition: transform 110ms ease-out; }

  body:not(.sosteniendo) .pila button.disco:hover,
  body:not(.sosteniendo) .pila button.disco:hover ~ button.disco {
    transform: translateY(-3px);
  }

  /* La torre resuelta lo celebra: una onda que sube de la base a la cima.
     Es el único momento de la prueba en que el tablero se permite algo así,
     y llega cuando el niño ya ha terminado. */
  .festeja button.disco { animation: festejar 440ms ease-out; }
  .festeja button.disco:nth-child(1) { animation-delay:   0ms; }
  .festeja button.disco:nth-child(2) { animation-delay:  95ms; }
  .festeja button.disco:nth-child(3) { animation-delay: 190ms; }
  .festeja button.disco:nth-child(4) { animation-delay: 285ms; }

  /* La enhorabuena entra después de la onda, no encima de ella. */
  .celebracion { animation: felicitar 320ms ease-out both; animation-delay: 620ms; }

  /* El reporte se imprime: primero la tarjeta, luego las filas en orden. */
  .resultados { animation: reporte-entra 240ms ease-out both; }
  .resultado  { animation: fila-entra 260ms ease-out both; }
  .resultado:nth-child(1) { animation-delay:  90ms; }
  .resultado:nth-child(2) { animation-delay: 150ms; }
  .resultado:nth-child(3) { animation-delay: 210ms; }
  .resultado:nth-child(4) { animation-delay: 270ms; }

  /* Botones: sólo el fondo, nunca la posición. */
  .btn-nivel, .btn-secundario, .btn-barra, .btn-principal {
    transition: background-color 130ms ease-out, color 130ms ease-out;
  }

  .btn-nivel:hover, .btn-secundario:hover { background: var(--papel-hundido); }
  .btn-barra:hover  { background: var(--linea); color: var(--tinta); }
  .btn-principal:hover { background: #000; }
}

/* ── Foco visible (obligatorio para el uso con teclado) ─────────── */

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

/* La columna ocupa toda su caja: el cerco va por dentro, ciñéndola. */
.peg-btn:focus-visible { outline-offset: -3px; }

/* La tarjeta recibe el foco al descubrirse, para que un lector de pantalla
   lea las cifras; no necesita cerco propio. */
.resultados:focus { outline: none; }

/* ── Solo para lectores de pantalla ─────────────────────────────── */

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Pantallas estrechas ────────────────────────────────────────── */

@media (max-width: 420px) {
  main { padding: 12px; }
  .resultado { padding: 15px 18px; }
  .resultado dd { font-size: 1.375rem; }
  .btn-nivel { padding: 22px 18px 18px; }
}