:root {
  --fondo: #fff7ed;
  --tarjeta: #ffffff;
  --primario: #ff7a1a;
  --secundario: #3aa0ff;
  --texto: #2b2b2b;
  --suave: #ffe6cc;
  --radio: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

#app { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; }
.pantalla { display: flex; flex-direction: column; gap: 16px; min-height: 100dvh; }
.pantalla[hidden] { display: none; }

h1 { font-size: 1.9rem; margin: 8px 0; text-align: center; }
.ayuda { text-align: center; color: #7a6a5c; margin: 0; }
.error { text-align: center; color: #c1121f; font-weight: 700; }

.boton {
  border: none; border-radius: var(--radio); padding: 20px;
  font-size: 1.3rem; font-weight: 700; font-family: inherit;
  min-height: 72px; cursor: pointer; background: var(--suave); color: var(--texto);
}
.boton-grande { background: var(--primario); color: #fff; font-size: 1.5rem; }
.boton-suave { background: var(--suave); }
.boton-atras { align-self: flex-start; min-height: 56px; padding: 12px 20px; font-size: 1.1rem; background: transparent; }
.boton:active { transform: scale(0.97); }

.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tarjeta {
  background: var(--tarjeta); border-radius: var(--radio); padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: none; font: inherit; font-weight: 700; cursor: pointer; min-height: 130px;
}
.tarjeta img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 16px; background: #fff; }
.tarjeta .emoji { font-size: 3rem; }

.campo {
  font-size: 1.5rem; padding: 18px; border-radius: var(--radio);
  border: 3px solid var(--suave); font-family: inherit; text-align: center;
}

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teclado .boton { font-size: 2rem; }
.pin-puntos { display: flex; justify-content: center; gap: 14px; height: 28px; }
.pin-puntos span { width: 22px; height: 22px; border-radius: 50%; background: var(--suave); }
.pin-puntos span.lleno { background: var(--primario); }

/* La pantalla del paso tiene que caber entera sin scroll: es donde ella pulsa
   "Siguiente" seis veces por dibujo, con el móvil apoyado en la mesa.
   Altura fija (no min-height) menos el padding vertical de #app, y overflow
   oculto para que sea la imagen la que ceda espacio, no el botón el que
   se salga de la pantalla. */
#pantalla-paso { height: calc(100dvh - 60px); min-height: 0; overflow: hidden; }
.paso-imagen { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radio); }
/* .paso-imagen la comparten #paso-imagen (pantalla-paso) y #final-imagen (pantalla-final);
   el crecimiento flexible solo debe aplicarse dentro de pantalla-paso, si no #final-imagen
   pierde su forma cuadrada y el dibujo terminado sale con un margen enorme arriba y abajo. */
#pantalla-paso .paso-imagen { flex: 1 1 auto; min-height: 0; }
.frase { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0; flex-shrink: 0; }
.cabecera-paso { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.progreso { display: flex; gap: 6px; font-size: 1.4rem; }
.controles { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; margin-top: auto; flex-shrink: 0; }

.lapiz { font-size: 5rem; text-align: center; animation: bailar 1.2s ease-in-out infinite; }
@keyframes bailar { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

@media (prefers-reduced-motion: reduce) { .lapiz { animation: none; } }