/* ==========================================================================
   Juegos — piezas de tablero reutilizables
   Todo cuadrado tiene esquinas muy redondeadas. Nunca un ángulo vivo.
   ========================================================================== */

/* ==========================================================================
   Rejilla genérica
   ========================================================================== */

.rejilla {
  --cols: 3;
  --hueco: var(--e-3);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--hueco);
  width: 100%;
  max-width: min(100%, 380px);
  margin-inline: auto;
}

.rejilla--apretada { --hueco: var(--e-2); }

/* ==========================================================================
   Celda (base de casi todos los tableros)
   ========================================================================== */

.celda {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  display: grid;
  place-items: center;
  background: var(--neu-fondo);
  box-shadow: var(--sombra-neu-sutil);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.07);
  font-family: var(--f-display);
  font-weight: var(--peso-display-medio);
  font-size: clamp(1.1rem, 6vw, 1.7rem);
  color: var(--texto);
  transition:
    transform var(--d-rapida) var(--ease-suave),
    background var(--d-media) var(--ease-suave),
    box-shadow var(--d-media) var(--ease-suave),
    color var(--d-media) var(--ease-suave),
    opacity var(--d-media) var(--ease-suave);
  user-select: none;
  overflow: hidden;
}

.celda:active { transform: scale(0.94); }
.celda:disabled { cursor: default; }

/* Encendida: el estado "mírame" */
.celda[data-estado="encendida"] {
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  box-shadow: 0 0 26px rgb(var(--verde-300-rgb) / 0.55), var(--sombra-2);
  transform: scale(1.04);
}

/* Elegida por la persona */
.celda[data-estado="elegida"] {
  background-image: linear-gradient(140deg, var(--verde-700), var(--verde-800));
  color: var(--verde-100);
  border-color: var(--acento-borde);
}

/* Acierto */
.celda[data-estado="bien"] {
  background-image: linear-gradient(140deg, var(--logro), var(--verde-300));
  color: var(--relleno-texto);
  box-shadow: 0 0 22px rgb(var(--verde-300-rgb) / 0.42);
}

/* Casi — ámbar sereno, nunca rojo de alarma */
.celda[data-estado="casi"] {
  background-image: linear-gradient(140deg, var(--atencion), var(--verde-700));
  color: var(--relleno-texto);
}

.celda[data-estado="apagada"] { opacity: 0.34; }
.celda[data-estado="vacia"] {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  pointer-events: none;
}

/* ==========================================================================
   Pulsadores grandes (Eco / Simon)
   ========================================================================== */

.pads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
  width: min(84vw, 320px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.pad {
  border-radius: var(--r-2xl);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.10);
  background: var(--neu-fondo);
  box-shadow: var(--sombra-neu);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--d-rapida) var(--ease-suave),
    box-shadow var(--d-rapida) var(--ease-suave),
    filter var(--d-rapida) var(--ease-suave);
}

.pad::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pad-color, var(--verde-700));
  opacity: 0.30;
  transition: opacity var(--d-rapida) var(--ease-suave);
}

.pad[data-encendido="si"] {
  transform: scale(1.035);
  box-shadow: 0 0 34px var(--pad-color, var(--verde-300)), var(--sombra-2);
}
.pad[data-encendido="si"]::after { opacity: 1; }

.pad:active { transform: scale(0.96); box-shadow: var(--sombra-neu-hundida); }

/* Cuatro tonos derivados de la paleta, distinguibles también por posición */
.pad:nth-child(1) { --pad-color: #8EB69B; }
.pad:nth-child(2) { --pad-color: #DAF1DE; }
.pad:nth-child(3) { --pad-color: #235347; }
.pad:nth-child(4) { --pad-color: #4E8A72; }

/* ==========================================================================
   Cartas que giran (Espejo / parejas)
   ========================================================================== */

.carta {
  aspect-ratio: 1;
  perspective: 900px;
  background: none;
  border: none;
  padding: 0;
}

.carta__interior {
  /* Es un span, y un inline ignora width y height. Sin esto se queda en 0×0
     —sus dos caras van en absolute y no le dan altura— y las cartas
     desaparecen: solo se ven los bordes de 1 px, como motas en el tablero. */
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--d-lenta) var(--ease-entrada);
  border-radius: var(--r-tile);
}

.carta[data-vuelta="si"] .carta__interior { transform: rotateY(180deg); }

.carta__cara {
  position: absolute;
  inset: 0;
  border-radius: var(--r-tile);
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: clamp(1.5rem, 8vw, 2.2rem);
}

.carta__dorso {
  background: var(--neu-fondo);
  box-shadow: var(--sombra-neu-sutil);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.09);
  color: var(--acento);
}
.carta__dorso svg { width: 38%; height: 38%; opacity: 0.55; }

.carta__frente {
  transform: rotateY(180deg);
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  box-shadow: var(--sombra-2);
}
.carta__frente svg { width: 46%; height: 46%; }

.carta[data-resuelta="si"] {
  animation: asentir var(--d-media) var(--ease-elastico);
}
.carta[data-resuelta="si"] .carta__frente {
  background-image: linear-gradient(140deg, var(--logro), var(--verde-300));
  opacity: 0.65;
}
.carta[data-resuelta="si"] { pointer-events: none; }

/* ==========================================================================
   Opciones de respuesta
   ========================================================================== */

.opciones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}

.opciones--una { grid-template-columns: 1fr; }
.opciones--tres { grid-template-columns: repeat(3, 1fr); }

.opcion {
  min-height: 64px;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-xl);
  background: var(--neu-fondo);
  box-shadow: var(--sombra-neu-sutil);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.08);
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 4.8vw, 1.3rem);
  font-weight: var(--peso-display-medio);
  color: var(--texto);
  letter-spacing: var(--track-titulo);
  transition:
    transform var(--d-rapida) var(--ease-suave),
    box-shadow var(--d-media) var(--ease-suave),
    background var(--d-media) var(--ease-suave),
    color var(--d-media) var(--ease-suave);
  display: grid;
  place-items: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.opcion:active { transform: scale(0.96); box-shadow: var(--sombra-neu-hundida); }

.opcion[data-estado="bien"] {
  background-image: linear-gradient(140deg, var(--logro), var(--verde-300));
  color: var(--relleno-texto);
  box-shadow: 0 0 24px rgb(var(--verde-300-rgb) / 0.42);
}

.opcion[data-estado="casi"] {
  background-image: linear-gradient(140deg, var(--atencion), var(--verde-700));
  color: var(--relleno-texto);
}

.opcion[data-estado="atenuada"] { opacity: 0.40; }

/* ==========================================================================
   Zona de toque grande (Reflejo, Impulso)
   ========================================================================== */

.zona-toque {
  width: min(76vw, 290px);
  /* Se centra ella sola. Reflejo la mete en un contenedor centrado, pero
     Impulso la pinta suelta: sin esto queda pegada a la izquierda, porque
     display:grid la vuelve un bloque y un bloque más estrecho que su
     contenedor se alinea al inicio. */
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--e-2);
  background: var(--neu-fondo);
  box-shadow: var(--sombra-neu);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.09);
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: var(--peso-display-medio);
  color: var(--texto-suave);
  transition:
    background var(--d-rapida) var(--ease-suave),
    color var(--d-rapida) var(--ease-suave),
    box-shadow var(--d-rapida) var(--ease-suave),
    transform var(--d-rapida) var(--ease-suave);
  padding: var(--e-5);
  line-height: 1.2;
}

.zona-toque:active { transform: scale(0.97); }

.zona-toque[data-fase="ya"] {
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  box-shadow: 0 0 50px rgb(var(--verde-300-rgb) / 0.55);
  transform: scale(1.03);
}

.zona-toque[data-fase="espera"] {
  background-image: linear-gradient(140deg, var(--verde-800), var(--verde-900));
  color: var(--texto-tenue);
}

.zona-toque[data-fase="no"] {
  background-image: linear-gradient(140deg, var(--atencion), var(--verde-700));
  color: var(--relleno-texto);
}

/* ==========================================================================
   Letras (Anagrama, Palabra)
   ========================================================================== */

.tira-letras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: center;
  max-width: 340px;
  margin-inline: auto;
}

.letra {
  width: clamp(42px, 12.5vw, 54px);
  height: clamp(50px, 14.5vw, 62px);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--neu-fondo);
  box-shadow: var(--sombra-neu-sutil);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.08);
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 5.5vw, 1.55rem);
  font-weight: var(--peso-display-medio);
  text-transform: uppercase;
  transition:
    transform var(--d-rapida) var(--ease-suave),
    opacity var(--d-media) var(--ease-suave),
    background var(--d-media) var(--ease-suave),
    color var(--d-media) var(--ease-suave);
}

.letra:active { transform: scale(0.92); }
.letra[data-usada="si"] { opacity: 0.28; pointer-events: none; }

.hueco-letras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: center;
  min-height: 62px;
  max-width: 340px;
  margin-inline: auto;
}

.hueco {
  width: clamp(42px, 12.5vw, 54px);
  height: clamp(50px, 14.5vw, 62px);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--neu-fondo-hundido);
  box-shadow: var(--sombra-neu-hundida);
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 5.5vw, 1.55rem);
  font-weight: var(--peso-display-medio);
  text-transform: uppercase;
  color: var(--acento);
}
.hueco:empty::after {
  content: "";
  width: 40%;
  height: 2px;
  border-radius: var(--r-full);
  background: rgb(var(--verde-100-rgb) / 0.14);
}

/* ---- Rejilla de Palabra oculta ----------------------------------------- */

.palabra-rejilla {
  display: grid;
  gap: 7px;
  margin-inline: auto;
  width: min(88vw, 320px);
}

.palabra-fila {
  display: grid;
  grid-template-columns: repeat(var(--largo, 5), 1fr);
  gap: 7px;
}

.palabra-casilla {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 5.5vw, 1.5rem);
  font-weight: var(--peso-display-medio);
  text-transform: uppercase;
  background: var(--neu-fondo-hundido);
  box-shadow: var(--sombra-neu-hundida);
  color: var(--texto);
  transition: transform var(--d-media) var(--ease-elastico), background var(--d-media) var(--ease-suave);
}

.palabra-casilla[data-marca="exacta"] {
  background-image: linear-gradient(140deg, var(--logro), var(--verde-300));
  color: var(--relleno-texto);
  box-shadow: var(--sombra-1);
}
.palabra-casilla[data-marca="presente"] {
  background-image: linear-gradient(140deg, var(--atencion), #B8A05F);
  color: var(--relleno-texto);
  box-shadow: var(--sombra-1);
}
.palabra-casilla[data-marca="ausente"] {
  background: rgb(var(--verde-100-rgb) / 0.05);
  box-shadow: none;
  color: var(--texto-tenue);
}
.palabra-casilla[data-lleno="si"] { animation: asentir var(--d-rapida) var(--ease-elastico); }

/* ---- Teclado en pantalla ----------------------------------------------- */

.teclado {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

/* En pantallas estrechas el teclado recupera los márgenes de la partida:
   cada milímetro cuenta y así las teclas no salen raquíticas. */
@media (max-width: 400px) {
  .teclado {
    width: calc(100% + var(--margen) * 2);
    max-width: none;
    margin-inline: calc(var(--margen) * -1);
    padding-inline: 4px;
  }
}

.teclado__fila {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.tecla {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--cristal-fondo-alto);
  border: 1px solid var(--cristal-borde);
  font-family: var(--f-texto);
  font-size: clamp(0.8rem, 3.6vw, 0.95rem);
  font-weight: var(--peso-texto-fuerte);
  text-transform: uppercase;
  color: var(--texto);
  display: grid;
  place-items: center;
  transition: transform var(--d-instante) var(--ease-suave), background var(--d-media) var(--ease-suave);
}
.tecla:active { transform: scale(0.92); background: var(--acento-tenue); }
.tecla--ancha { flex: 1.6 1 0; font-size: var(--t-etiqueta); }
.tecla svg { width: 18px; height: 18px; }

.tecla[data-marca="exacta"] {
  background-image: linear-gradient(140deg, var(--logro), var(--verde-300));
  color: var(--relleno-texto);
  border-color: transparent;
}
.tecla[data-marca="presente"] {
  background-image: linear-gradient(140deg, var(--atencion), #B8A05F);
  color: var(--relleno-texto);
  border-color: transparent;
}
.tecla[data-marca="ausente"] { opacity: 0.34; }

/* ==========================================================================
   Figuras (Rotación, Simetría)
   ========================================================================== */

.figura {
  width: min(40vw, 150px);
  aspect-ratio: 1;
  border-radius: var(--r-2xl);
  background: var(--neu-fondo-hundido);
  box-shadow: var(--sombra-neu-hundida);
  display: grid;
  place-items: center;
  padding: var(--e-4);
}
.figura svg { width: 100%; height: 100%; }
.figura svg .pieza { fill: var(--acento); }

.par-figuras {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  justify-content: center;
}

.par-figuras__vs {
  color: var(--texto-tenue);
  font-size: var(--t-h3);
  font-weight: var(--peso-display-medio);
  font-family: var(--f-display);
}

/* ==========================================================================
   Fichas numéricas (Objetivo)
   ========================================================================== */

.fichas-num {
  display: flex;
  gap: var(--e-3);
  justify-content: center;
  flex-wrap: wrap;
}

.ficha-num {
  width: 62px;
  height: 62px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--neu-fondo);
  box-shadow: var(--sombra-neu-sutil);
  border: 1px solid rgb(var(--verde-300-rgb) / 0.08);
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: var(--peso-display-medio);
  font-variant-numeric: tabular-nums;
  transition: all var(--d-media) var(--ease-suave);
}
.ficha-num:active { transform: scale(0.93); }
.ficha-num[data-estado="elegida"] {
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  transform: scale(1.06);
}
.ficha-num[data-estado="gastada"] { opacity: 0.22; pointer-events: none; transform: scale(0.88); }

.operadores {
  display: flex;
  gap: var(--e-3);
  justify-content: center;
}

.operador {
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--cristal-fondo-alto);
  border: 1px solid var(--cristal-borde);
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: var(--peso-display-medio);
  color: var(--acento);
  transition: all var(--d-rapida) var(--ease-suave);
}
.operador:active { transform: scale(0.92); }
.operador[data-estado="elegido"] {
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  border-color: transparent;
}

/* ==========================================================================
   Palabra grande de color (Contraste / Stroop)
   ========================================================================== */

.palabra-color {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 15vw, 4rem);
  font-weight: var(--peso-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: 1;
  animation: brotar var(--d-media) var(--ease-elastico);
  text-align: center;
}

/* Muestras de color: alto contraste entre sí y legibles sobre el fondo */
.muestra-color {
  width: 100%;
  aspect-ratio: 2.1;
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-neu-sutil);
  border: 1px solid rgb(var(--verde-100-rgb) / 0.10);
  transition: transform var(--d-rapida) var(--ease-suave), box-shadow var(--d-media) var(--ease-suave);
}
.muestra-color:active { transform: scale(0.95); }

/* ==========================================================================
   Puzle deslizante
   ========================================================================== */

.deslizante {
  --lado: 3;
  display: grid;
  grid-template-columns: repeat(var(--lado), 1fr);
  gap: var(--e-2);
  width: min(82vw, 320px);
  aspect-ratio: 1;
  padding: var(--e-3);
  border-radius: var(--r-2xl);
  background: var(--neu-fondo-hundido);
  box-shadow: var(--sombra-neu-hundida);
  margin-inline: auto;
}

.pieza-desliza {
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background-image: linear-gradient(140deg, var(--relleno-hondo-desde), var(--relleno-hondo-hasta));
  color: var(--relleno-texto);
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 6vw, 1.6rem);
  font-weight: var(--peso-display-medio);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sombra-1), inset 0 1px 0 rgb(255 255 255 / 0.24);
  transition: transform var(--d-rapida) var(--ease-suave), opacity var(--d-media) var(--ease-suave);
}
.pieza-desliza:active { transform: scale(0.93); }
.pieza-desliza[data-hueco="si"] {
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
}
.pieza-desliza[data-colocada="si"] {
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
}

/* ==========================================================================
   Torres de Hanói
   ========================================================================== */

.torres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-3);
  width: min(92vw, 380px);
  margin-inline: auto;
}

.torre {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 180px;
  padding: var(--e-3) var(--e-2);
  border-radius: var(--r-xl);
  background: var(--neu-fondo-hundido);
  box-shadow: var(--sombra-neu-hundida);
  transition: box-shadow var(--d-media) var(--ease-suave);
}
.torre[data-activa="si"] { box-shadow: var(--sombra-neu-hundida), var(--resplandor); }

.torre::before {
  content: "";
  position: absolute;
  bottom: var(--e-3);
  top: var(--e-4);
  width: 6px;
  border-radius: var(--r-full);
  background: rgb(var(--verde-100-rgb) / 0.09);
}

.disco {
  position: relative;
  z-index: 1;
  height: 22px;
  border-radius: var(--r-full);
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  box-shadow: var(--sombra-1), inset 0 1px 0 rgb(255 255 255 / 0.35);
  transition: transform var(--d-media) var(--ease-elastico);
}
.disco[data-levantado="si"] {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 0 22px rgb(var(--verde-300-rgb) / 0.45);
}

/* ==========================================================================
   Marcas de retroalimentación en el tablero
   ========================================================================== */

.destello {
  position: absolute;
  border-radius: var(--r-full);
  pointer-events: none;
  background: radial-gradient(circle, rgb(var(--verde-300-rgb) / 0.55), transparent 70%);
  animation: destello var(--d-lenta) var(--ease-salida) forwards;
}

/* Señal breve tras responder: un pulso de color en el borde del tablero */
.tablero[data-senal="bien"]::after,
.tablero[data-senal="casi"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  pointer-events: none;
  animation: aparecer var(--d-rapida) var(--ease-suave) alternate 2;
}
.tablero { position: relative; }
.tablero[data-senal="bien"]::after { box-shadow: inset 0 0 0 2px rgb(var(--verde-300-rgb) / 0.5); }
.tablero[data-senal="casi"]::after { box-shadow: inset 0 0 0 2px rgb(217 198 142 / 0.5); }

/* Contador de vidas/intentos: círculos, nunca corazones rojos */
.intentos {
  display: flex;
  gap: 7px;
  justify-content: center;
}
.intentos span {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--acento);
  transition: opacity var(--d-media) var(--ease-suave), transform var(--d-media) var(--ease-suave);
}
.intentos span[data-gastado="si"] {
  opacity: 0.22;
  transform: scale(0.72);
}