/* ===== Memoria de Palabras ===== */
.game { flex: 1; display: flex; flex-direction: column; }

.stats { display: flex; gap: 10px; justify-content: center; margin: 4px 0 6px; }
.chip {
  background: rgba(255,255,255,0.9);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}

.hint-line {
  text-align: center; color: #fff; font-weight: 700;
  margin: 4px 0 2px; opacity: 0.9;
}
.message {
  text-align: center; min-height: 26px;
  color: #fff; font-weight: 800; font-size: 1.05rem;
  text-shadow: 0 2px 0 rgba(0,0,0,0.15); margin: 2px 0;
}

/* Tablero de cartas (las columnas las define el juego según el nivel) */
.board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 6px 0 10px;
}
.card {
  aspect-ratio: 4 / 3;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  perspective: 700px;
  touch-action: manipulation;
}
.card .inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.35s ease;
  transform-style: preserve-3d;
}
.card.flipped .inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 0 rgba(0,0,0,0.18);
  padding: 6px;
}
.face.back {
  background: linear-gradient(160deg, var(--purple), var(--blue));
  color: #fff;
  font-size: 2.4rem; font-weight: 800;
}
.face.front {
  transform: rotateY(180deg);
  background: #fff;
  color: var(--ink);
}
/* Emoji grande; palabra que se achica para entrar (se adapta a 2 o 3 columnas) */
.card:not(.is-word) .face.front { font-size: clamp(1.6rem, 8vw, 2.8rem); }
.card.is-word .face.front {
  font-size: clamp(0.9rem, 5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  word-break: break-word;
}

.card.matched .face.front {
  background: var(--green);
  color: #053d2c;
  animation: popin 0.3s ease;
}
.card.matched { cursor: default; }

/* Carta central: cofre sorpresa (no es par) */
.card.chest { cursor: default; }
.card.chest .chestface {
  width: 100%; height: 100%; border-radius: 18px;
  display: grid; place-items: center;
  font-size: clamp(1.7rem, 8.5vw, 2.8rem);
  background: linear-gradient(160deg, var(--yellow), #ffb703);
  box-shadow: 0 5px 0 rgba(0,0,0,0.18);
  animation: chestbob 1.6s ease-in-out infinite;
}
.card.chest.opened .chestface {
  background: linear-gradient(160deg, var(--green), #06d6a0);
  animation: popin 0.4s ease;
}
@keyframes chestbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@keyframes popin {
  0% { transform: scale(0.7); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Overlay de festejo (mismo estilo que los otros juegos) */
.overlay {
  position: fixed; inset: 0;
  background: rgba(43, 35, 80, 0.55);
  backdrop-filter: blur(3px);
  display: none; place-items: center; z-index: 50; padding: 24px;
}
.overlay.show { display: grid; }
.celebrate {
  background: #fff; border-radius: 28px; padding: 26px 24px;
  text-align: center; box-shadow: 0 10px 0 rgba(0,0,0,0.18);
  animation: pop 0.35s ease; max-width: 360px; width: 100%;
}
.celebrate .big-emoji { font-size: 4.4rem; }
.celebrate .word {
  font-size: 1.8rem; font-weight: 800;
  color: var(--ink); margin: 6px 0;
}
.celebrate .praise { font-size: 1.2rem; font-weight: 800; color: var(--pink); margin: 0 0 6px; }
.celebrate .btn { width: 100%; font-size: 1.2rem; }

@keyframes pop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Regalo tocable en el modal de recompensa: tiembla invitando a tocarlo. */
.celebrate .big-emoji.giftable {
  display: inline-block; cursor: pointer; touch-action: manipulation;
  animation: gift-wiggle 0.85s ease-in-out infinite;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.12));
}
.celebrate .big-emoji.giftable:active { transform: scale(0.9); }
@keyframes gift-wiggle {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50% { transform: rotate(7deg) scale(1.09); }
}
/* Al abrirlo: estalla. */
.celebrate .big-emoji.opened { display: inline-block; animation: gift-burst 0.6s ease; }
@keyframes gift-burst {
  0% { transform: scale(0.7); }
  40% { transform: scale(1.5) rotate(8deg); }
  70% { transform: scale(0.95) rotate(-4deg); }
  100% { transform: scale(1); }
}
/* Premio y botón que aparecen al abrir el cofre. */
.celebrate .reward-pop { animation: reward-pop 0.5s ease; }
@keyframes reward-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

/* ===== Encaje en la pantalla visible (PWA): sin scroll, todas las cards a la vista =====
   El tablero ocupa el alto sobrante y reparte filas iguales (grid-auto-rows:1fr), que
   acotan el alto disponible para las cards (antes el aspect-ratio fijo se pasaba del
   viewport en los niveles altos 3x5). overflow:auto en .app es red de seguridad. */
html, body { height: 100dvh; overflow: hidden; }
.app {
  min-height: 0; overflow: auto;
  /* Colchón inferior garantizado: en el PWA de Android la barra de nav (atrás/home) no
     siempre reporta env(safe-area-inset-bottom) — con el max() siempre queda aire abajo. */
  padding-bottom: max(env(safe-area-inset-bottom), 20px);
}
.game { min-height: 0; }

.topbar { padding: 6px 0; }
.board {
  flex: 1;
  min-height: 0;
  grid-auto-rows: 1fr;       /* filas iguales que llenan el alto → garantiza el fit */
  margin: 6px 0 14px;        /* respiro extra arriba de la barra de Android */
}
/* La carta mantiene su 4/3 cuando hay lugar (centrada en su celda); si la celda es más
   chica (niveles altos en pantallas bajitas), max-height la achica para no desbordar. */
.card {
  aspect-ratio: 4 / 3;
  width: 100%; height: auto;
  max-height: 100%;
  margin: auto;
  min-height: 0;
}