/* ============================================================================
   RETO · juego.css — Cartas del juego de MEMORIA
   Los colores salen de las variables de cada web (--r-…): rosa/granate en
   enviaunarosa.com, morado/dorado en velario.es.
   ========================================================================== */
.memoria-cuenta { display: flex; gap: 14px; font-weight: 700; }
.memoria-cuenta b { color: var(--r-acento-claro); }
.memoria-fallos b { color: #ff7b8f; }

/* Tablero: el nº de columnas lo pone juego.js (--cols) según las cartas y la pantalla. */
.memoria-tablero {
  --cols: 4;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px;
  margin: 6px 0 10px;
}
.memoria-ayuda { text-align: center; margin: 0; }

/* Carta: botón con dos caras que gira en 3D. */
.memoria-carta {
  position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer;
  perspective: 600px; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit;
}
.memoria-carta:focus { outline: none; }
.memoria-carta:focus-visible { outline: 2px solid var(--r-acento-claro); outline-offset: 2px; border-radius: 10px; }
.memoria-giro {
  position: absolute; inset: 0; transition: transform .35s ease; transform-style: preserve-3d;
}
.memoria-carta.abierta .memoria-giro, .memoria-carta.encontrada .memoria-giro { transform: rotateY(180deg); }
.memoria-dorso, .memoria-cara {
  position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; text-align: center;
}
/* Dorso: color de la web con el emoji de la web en marca de agua. */
.memoria-dorso {
  background: linear-gradient(145deg, var(--r-boton), var(--r-seleccion));
  border: 1px solid var(--r-borde-fuerte);
  font-size: clamp(18px, 6vw, 28px); opacity: .95;
}
.memoria-dorso::after { content: attr(data-emoji); opacity: .35; }
.memoria-cara {
  transform: rotateY(180deg); background: #f7f3ee; color: #1b1b1b; border: 2px solid var(--r-acento);
}
.memoria-cara-e { font-size: clamp(24px, 8vw, 40px); line-height: 1; }
/* Texto de la carta: el tamaño se ajusta a la palabra más larga (--largo, lo pone juego.js)
   para que «cumpleaños» o «Espiritualidad» quepan sin partirse. cqi = ancho de la carta;
   los navegadores antiguos se quedan con el clamp() de la primera línea. */
.memoria-carta, .memoria-resumen span { container-type: inline-size; }
.memoria-cara-t { font-size: clamp(11px, 2.9vw, 14px); font-size: max(8px, min(14px, calc((100cqi - 14px) / (var(--largo, 8) * .64)))); line-height: 1.15; font-weight: 700;
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
/* Pareja encontrada: verde y un poco atenuada. */
.memoria-carta.encontrada .memoria-cara { border-color: #2ea866; background: #eafaf0; }
.memoria-carta.encontrada { cursor: default; }
.memoria-carta.acierto .memoria-giro { animation: memoria-acierto .45s ease; }
.memoria-carta.fallo .memoria-cara { border-color: #e0455e; background: #fdecef; }
.memoria-carta.fallo .memoria-giro { animation: memoria-fallo .4s ease; }
@keyframes memoria-acierto { 50% { transform: rotateY(180deg) scale(1.08); } }
@keyframes memoria-fallo { 25% { transform: rotateY(180deg) translateX(-4px); } 75% { transform: rotateY(180deg) translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .memoria-giro { transition: none; } .memoria-carta .memoria-giro { animation: none !important; } }

/* Tablero final en miniatura (resultado). */
.memoria-resumen { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 4px; max-width: 260px; margin: 14px auto 0; }
.memoria-resumen span { aspect-ratio: 3 / 4; border-radius: 6px; background: #f7f3ee; color: #1b1b1b; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 18px; padding: 2px; text-align: center; }
.memoria-resumen small { font-size: 8px; font-size: max(6px, min(9px, calc((100cqi - 6px) / (var(--largo, 8) * .64)))); line-height: 1.1; font-weight: 700; overflow-wrap: anywhere; }
.memoria-resumen .ok { outline: 2px solid #2ea866; }

/* Móviles muy estrechos (320 px): menos margen dentro de la carta para que quepa el texto. */
@media (max-width: 359px) {
  .memoria-cara { padding: 2px; }
  .memoria-cara-t { font-size: max(8px, min(14px, calc((100cqi - 8px) / (var(--largo, 8) * .64)))); }
}