/* ==========================================================================
   El juego de contar — sumas y restas para peques
   HTML, CSS y JavaScript sin dependencias ni recursos externos.
   ========================================================================== */

:root {
  --tinta: #2B1B4A;
  --tinta-suave: #59466F;
  --rosa: #FF5C8A;
  --rosa-sombra: #C93B63;
  --naranja: #FF8A3D;
  --amarillo: #FFD23F;
  --verde: #2FBF71;
  --azul: #1F6FD2;
  --morado: #7C3AED;
  --blanco: #FFFFFF;
  --borde: #E7DAFA;
  --fuente: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --velocidad: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--tinta);
  font-family: var(--fuente);
  line-height: 1.45;
  background-color: #FFF7E6;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255, 210, 63, 0.55) 0 12%, transparent 12.5%),
    radial-gradient(circle at 92% 8%, rgba(76, 201, 240, 0.4) 0 10%, transparent 10.5%),
    radial-gradient(circle at 86% 88%, rgba(255, 92, 138, 0.35) 0 12%, transparent 12.5%),
    radial-gradient(circle at 12% 86%, rgba(155, 93, 229, 0.3) 0 9%, transparent 9.5%),
    linear-gradient(165deg, #FFF7E6 0%, #EAF8FF 45%, #F6EDFF 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
}

/* --- Accesibilidad ------------------------------------------------------- */
.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;
}

.saltar {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
  background: var(--tinta);
  border-radius: 0 0 14px 14px;
  transition: top 0.2s var(--velocidad);
}

.saltar:focus {
  top: 0;
}

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

/* --- Barra superior ------------------------------------------------------ */
.barra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 14px clamp(14px, 4vw, 26px) 0;
}

.volver,
.sonido {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 18px;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--borde);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(124, 58, 237, 0.14);
  cursor: pointer;
  transition: transform 0.12s var(--velocidad), box-shadow 0.12s var(--velocidad);
}

.volver:hover,
.sonido:hover {
  transform: translateY(-2px);
}

.volver:active,
.sonido:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.14);
}

.sonido[aria-pressed="false"] {
  color: #7A6B8F;
  background: rgba(255, 255, 255, 0.6);
  border-style: dashed;
}

.volver__flecha {
  font-size: 1.2rem;
  line-height: 1;
}

.sonido__icono {
  font-size: 1.15rem;
  line-height: 1;
}

/* Selector de idioma */
.lang {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 3px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--borde);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(124, 58, 237, 0.14);
}

.lang__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 34px;
  padding: 0 8px;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 999px;
}

.lang__opt:hover {
  color: var(--morado);
}

.lang__opt.is-active {
  color: var(--morado);
  background: #F3E8FF;
}

/* Marcador de estrellas */
.marcador {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  min-width: 120px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--borde);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(124, 58, 237, 0.14);
}

.marcador__texto {
  display: flex;
  gap: 4px;
  align-items: baseline;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.marcador__estrella {
  font-size: 1.05rem;
}

.marcador__de {
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.marcador__barra {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  background: #EFE6FF;
  border-radius: 999px;
}

.marcador__barra i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--amarillo), var(--naranja), var(--rosa));
  border-radius: 999px;
  transition: width 0.5s var(--velocidad);
}

/* --- Zona de juego ------------------------------------------------------- */
.juego {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.pantalla {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px) clamp(14px, 4vw, 26px) clamp(30px, 6vw, 48px);
  text-align: center;
  animation: entrar 0.45s var(--velocidad) both;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.saludo {
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 0.16em;
  animation: flotar 3s ease-in-out infinite;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.pantalla h1 {
  margin-top: 4px;
  font-size: clamp(2rem, 7.5vw, 3.4rem);
  color: var(--morado);
  text-wrap: balance;
}

.pantalla h2 {
  margin-top: 4px;
  font-size: clamp(1.8rem, 6.5vw, 2.8rem);
  color: var(--morado);
  text-wrap: balance;
}

.intro {
  max-width: 34ch;
  margin: 10px auto 0;
  color: var(--tinta-suave);
  font-size: clamp(1.02rem, 3.4vw, 1.2rem);
  font-weight: 600;
}

/* --- Pantalla de inicio: modos ------------------------------------------ */
.modos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 20px);
  margin: clamp(20px, 4.5vw, 34px) 0 clamp(18px, 4vw, 28px);
}

.modo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: clamp(126px, 20vw, 156px);
  padding: clamp(14px, 3vw, 22px) 10px;
  color: var(--blanco);
  font-size: 1rem;
  border: 0;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.12s var(--velocidad), box-shadow 0.12s var(--velocidad);
}

.modo__emoji {
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1.1;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.12));
}

.modo__nombre {
  font-size: clamp(1.3rem, 4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.modo__pista {
  font-size: 0.92rem;
  font-weight: 700;
  opacity: 0.92;
}

.modo:hover {
  transform: translateY(-3px) scale(1.02);
}

.modo:active {
  transform: translateY(5px) scale(0.99);
}

.modo--suma {
  background: linear-gradient(160deg, #FFA34D, #FF5C8A);
  box-shadow: 0 9px 0 var(--rosa-sombra), 0 22px 30px -20px rgba(201, 59, 99, 0.9);
}

.modo--suma:active {
  box-shadow: 0 3px 0 var(--rosa-sombra);
}

.modo--resta {
  background: linear-gradient(160deg, #56D4F5, #2D7FE0);
  box-shadow: 0 9px 0 #1B5AA3, 0 22px 30px -20px rgba(27, 90, 163, 0.9);
}

.modo--resta:active {
  box-shadow: 0 3px 0 #1B5AA3;
}

.modo--mezcla {
  background: linear-gradient(160deg, #B57BFF, #7C3AED);
  box-shadow: 0 9px 0 #54259E, 0 22px 30px -20px rgba(84, 37, 158, 0.9);
}

.modo--mezcla:active {
  box-shadow: 0 3px 0 #54259E;
}

/* Selector de números */
.rango {
  max-width: 460px;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.rango__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.rango legend {
  width: 100%;
  margin-bottom: 10px;
  color: var(--tinta-suave);
  font-size: 1.02rem;
  font-weight: 800;
  text-align: center;
}

.rango__opcion {
  position: relative;
}

.rango__opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rango__opcion span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  color: var(--tinta-suave);
  font-size: 1.05rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--borde);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(124, 58, 237, 0.12);
  cursor: pointer;
  transition: transform 0.12s var(--velocidad);
}

.rango__opcion input:checked + span {
  color: #3A2A00;
  background: var(--amarillo);
  border-color: #E6A800;
  box-shadow: 0 4px 0 #E6A800;
}

.rango__opcion input:focus-visible + span {
  outline: 4px solid var(--tinta);
  outline-offset: 3px;
}

.rango__opcion:active span {
  transform: translateY(3px);
}

.nota {
  margin-top: clamp(18px, 4vw, 26px);
  color: #7A6B8F;
  font-size: 0.92rem;
  font-weight: 600;
}

/* --- Pantalla del juego -------------------------------------------------- */
.consigna {
  margin-bottom: 10px;
  color: var(--tinta-suave);
  font-size: clamp(1.2rem, 4.2vw, 1.6rem);
  font-weight: 800;
}

.tablero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 2vw, 18px);
  align-items: center;
  justify-content: center;
  min-height: clamp(124px, 30vw, 180px);
  padding: clamp(14px, 3.5vw, 24px);
  background: rgba(255, 255, 255, 0.82);
  border: 3px dashed #E3D3FF;
  border-radius: 32px;
  box-shadow: inset 0 3px 0 #fff, 0 24px 50px -38px rgba(43, 27, 74, 0.85);
}

.grupo {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2px, 1vw, 10px);
  align-items: center;
  justify-content: center;
  max-width: min(100%, 320px);
}

.objeto {
  position: relative;
  display: inline-block;
  padding: 2px;
  font-size: clamp(28px, 7.5vw, 46px);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  animation: aparecer 0.4s var(--velocidad) backwards;
  animation-delay: var(--retraso, 0s);
  transition: transform 0.15s var(--velocidad);
}

.objeto:hover {
  transform: scale(1.12);
}

.objeto.objeto--pop {
  transform: scale(1.35) rotate(-7deg);
}

.objeto.fuera {
  opacity: 0.35;
  filter: grayscale(0.6);
}

.objeto.fuera::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -6%;
  right: -6%;
  height: 4px;
  background: #FF3D71;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
  transform: rotate(-14deg);
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}

.signo {
  padding: 0 2px;
  font-size: clamp(2rem, 6.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
}

.signo--suma {
  color: var(--morado);
}

.signo--resta {
  color: var(--azul);
}

/* Ecuación y botón de escuchar */
.ecuacion-fila {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 2.5vw, 18px);
  align-items: center;
  justify-content: center;
  margin: clamp(14px, 3vw, 20px) 0 clamp(12px, 3vw, 18px);
}

.ecuacion {
  color: var(--tinta);
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.ecuacion__op {
  color: var(--morado);
}

.interrogante {
  display: inline-block;
  padding: 0 0.28em;
  color: var(--blanco);
  background: linear-gradient(150deg, var(--naranja), var(--rosa));
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--rosa-sombra);
  animation: latido 1.8s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.escuchar {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 48px;
  padding: 8px 18px;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 800;
  background: var(--blanco);
  border: 2px solid var(--amarillo);
  border-radius: 999px;
  box-shadow: 0 4px 0 #E6A800;
  cursor: pointer;
  transition: transform 0.12s var(--velocidad), box-shadow 0.12s var(--velocidad);
}

.escuchar:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #E6A800;
}

/* Opciones de respuesta */
.opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.5vw, 16px);
  max-width: 580px;
  margin: 0 auto;
}

.opcion {
  position: relative;
  min-height: clamp(76px, 18vw, 106px);
  color: var(--blanco);
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 800;
  border: 0;
  border-radius: 26px;
  cursor: pointer;
  transition: transform 0.1s var(--velocidad), box-shadow 0.1s var(--velocidad);
  -webkit-tap-highlight-color: transparent;
}

.opcion__num {
  display: block;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
}

.opcion--0 {
  background: linear-gradient(160deg, #56D4F5, #2D9CDB);
  box-shadow: 0 8px 0 #1B6FA3, 0 20px 26px -20px rgba(27, 111, 163, 0.9);
}

.opcion--1 {
  background: linear-gradient(160deg, #FFB03A, #FF8A3D);
  box-shadow: 0 8px 0 #C96A1E, 0 20px 26px -20px rgba(201, 106, 30, 0.9);
}

.opcion--2 {
  background: linear-gradient(160deg, #5EE39B, #2FBF71);
  box-shadow: 0 8px 0 #1E8A50, 0 20px 26px -20px rgba(30, 138, 80, 0.9);
}

.opcion:hover {
  transform: translateY(-2px);
}

.opcion:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.opcion:disabled {
  opacity: 1;
  cursor: default;
}

.opcion.es-correcta {
  background: linear-gradient(160deg, #5EE39B, #16A34A);
  box-shadow: 0 8px 0 #0F7A36, 0 20px 26px -20px rgba(15, 122, 54, 0.9);
  animation: acertar 0.5s var(--velocidad);
}

.opcion.es-correcta::after {
  content: "✓";
  position: absolute;
  top: -12px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #16A34A;
  font-size: 1.2rem;
  background: var(--blanco);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(43, 27, 74, 0.22);
}

.opcion.es-incorrecta {
  background: linear-gradient(160deg, #FF9B9B, #E23D3D);
  box-shadow: 0 8px 0 #A32424;
  animation: temblar 0.45s ease;
  opacity: 0.85;
}

.opcion.es-incorrecta::after {
  content: "✕";
  position: absolute;
  top: -12px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #E23D3D;
  font-size: 1.1rem;
  background: var(--blanco);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(43, 27, 74, 0.22);
}

.opcion.es-ayuda {
  animation: latido 0.9s ease-in-out 2;
}

@keyframes acertar {
  40% {
    transform: scale(1.12) rotate(-2deg);
  }
}

@keyframes temblar {
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.pista {
  min-height: 1.9em;
  margin-top: 14px;
  color: var(--morado);
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  font-weight: 800;
}

/* --- Pantalla final ------------------------------------------------------ */
.final__texto {
  margin-top: 10px;
  color: var(--tinta-suave);
  font-size: clamp(1.05rem, 3.6vw, 1.25rem);
  font-weight: 700;
}

.final__estrellas {
  margin: clamp(14px, 3vw, 22px) 0;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  letter-spacing: 0.08em;
  line-height: 1.25;
}

.final__botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.boton {
  min-height: 58px;
  padding: 14px 34px;
  font-size: clamp(1.08rem, 3.6vw, 1.25rem);
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s var(--velocidad), box-shadow 0.12s var(--velocidad);
}

.boton--grande {
  color: var(--blanco);
  background: linear-gradient(150deg, #FFA34D, #FF5C8A);
  box-shadow: 0 7px 0 var(--rosa-sombra), 0 20px 30px -22px rgba(201, 59, 99, 0.9);
}

.boton--grande:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--rosa-sombra);
}

.boton--suave {
  color: var(--tinta);
  background: var(--blanco);
  border: 2px solid var(--borde);
  box-shadow: 0 6px 0 var(--borde);
}

.boton--suave:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--borde);
}

/* --- Confeti ------------------------------------------------------------- */
.confeti {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

.confeti i {
  position: fixed;
  display: block;
  border-radius: 4px;
  animation-name: caer;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  animation-fill-mode: forwards;
}

@keyframes caer {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(0.7);
  }
}

/* --- Pantallas pequeñas -------------------------------------------------- */
@media (max-width: 560px) {
  .modos {
    grid-template-columns: 1fr;
  }

  .modo {
    flex-direction: row;
    gap: 12px;
    min-height: 78px;
    padding: 14px 20px;
    justify-content: flex-start;
    text-align: left;
  }

  .modo__emoji {
    font-size: 1.9rem;
  }

  .modo__pista {
    margin-left: auto;
    font-size: 0.82rem;
  }

  .barra {
    padding-top: 10px;
  }

  .sonido__texto {
    display: none;
  }

  .sonido {
    padding: 8px 14px;
  }

  .volver {
    padding: 8px 14px;
    font-size: 0.95rem;
  }
}

/* --- Menos movimiento, si el sistema lo pide ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}