/* css/criaturas-memoria.css — 🥚 Memoria de Huevos (js/juegos/criaturas-memoria.js).
   Diálogo propio .cm-dlg · cartas-huevo con giro 3D · eclosión con grieta + destello del color
   de la familia (--c / --c2 en cada carta). Rejilla sin scroll horizontal desde 320px. */
.cm-dlg{margin:auto;padding:0;border:0;border-radius:24px;width:min(96vw,680px);max-width:96vw;max-height:94dvh;
  background:var(--surface,#fff);color:var(--text,#1E1B4B);box-shadow:0 20px 60px rgba(30,27,75,.35);overflow:auto;overscroll-behavior:contain}
.cm-dlg::backdrop{background:rgba(30,27,75,.55)}
.cm-in{position:relative;padding:14px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.cm-in .lvl-confetti{z-index:5}
.cm-x{position:absolute;top:8px;right:8px;z-index:20;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--bg,#F1F0FF);color:var(--text,#1E1B4B);font-size:1.15rem;font-weight:800;cursor:pointer}
.cm-x:focus-visible,.cm-bt:focus-visible{outline:3px solid var(--purple,#7C3AED);outline-offset:3px}
.cm-tit{margin:4px 48px 0;font-size:clamp(1.2rem,4.8vw,1.55rem);font-weight:900;text-align:center;color:var(--deep,#2E1065)}
.cm-sub{margin:0;font-size:.95rem;color:var(--text2,#6B7280);text-align:center}
.cm-marcador{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:.95rem;font-weight:700}
.cm-marcador b{font-variant-numeric:tabular-nums}

/* rejilla: 12 cartas → 3 / 4 / 6 columnas · 8 → 4 · tríos (12) → 3 / 4 / 6 */
.cm-tablero{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(64px,1fr));gap:8px;width:100%}
.cm-tablero[data-n="8"]{--cols:4;max-width:520px}
@media (min-width:480px){.cm-tablero[data-n="12"]{--cols:4}}
@media (min-width:720px){.cm-tablero[data-n="12"]{--cols:6}}
@media (max-width:359px){.cm-tablero{gap:5px}}

.cm-carta{position:relative;display:block;width:100%;min-width:64px;min-height:64px;aspect-ratio:100/124;padding:0;border:0;background:none;
  cursor:pointer;perspective:700px;border-radius:18px;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
.cm-carta:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.cm-carta[aria-disabled="true"]{cursor:default}
.cm-giro{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.7,.3,1.2)}
.cm-carta.abierta .cm-giro{transform:rotateY(180deg)}
.cm-cara{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px}
.cm-dorso .cm-huevo{width:88%;height:auto;max-height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(30,27,75,.18))}
@media (hover:hover){.cm-carta:not(.abierta):hover .cm-huevo{animation:cm-balanceo .9s ease-in-out infinite;transform-origin:50% 92%}}
.cm-frente{transform:rotateY(180deg);flex-direction:column;gap:2px;padding:6px 4px;overflow:hidden;
  background:var(--c2);border:3px solid var(--c)}
.cm-frente img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain}
.cm-txt{flex:none;max-width:100%;font-size:clamp(.78rem,3.2vw,1rem);font-weight:900;line-height:1.1;text-align:center;overflow-wrap:anywhere;color:var(--text,#1E1B4B)}
.cm-palabra{font-size:clamp(1rem,4.6vw,1.45rem);font-weight:900;line-height:1.1;text-align:center;overflow-wrap:anywhere;color:var(--text,#1E1B4B)}
.cm-carta.solo-txt .cm-frente{background:#fff}

/* eclosión: grieta que se dibuja + destello del color de familia + la criatura da un saltito */
.cm-grieta{position:absolute;inset:0;width:100%;height:100%;color:var(--c);pointer-events:none;opacity:0}
.cm-grieta path{stroke-dasharray:1;stroke-dashoffset:1}
.cm-destello{position:absolute;inset:-10%;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0,var(--c2) 35%,var(--c) 60%,transparent 72%)}
.cm-carta.eclosiona .cm-grieta{animation:cm-grieta-op 1s ease-out forwards}
.cm-carta.eclosiona .cm-grieta path{animation:cm-grieta .45s ease-out forwards}
.cm-carta.eclosiona .cm-destello{animation:cm-destello .8s .3s ease-out forwards}
.cm-carta.eclosiona .cm-frente img,.cm-carta.eclosiona .cm-palabra{animation:cm-nace .55s .45s cubic-bezier(.3,.7,.3,1.4) both}
.cm-carta.ok .cm-frente{box-shadow:0 0 0 3px var(--c2),0 6px 16px rgba(30,27,75,.15)}

.cm-msg{min-height:1.4em;margin:2px 0 0;font-weight:800;text-align:center;color:var(--deep,#2E1065)}

.cm-fin{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin-top:4px}
.cm-estrellas{margin:0;font-size:2.4rem;line-height:1;letter-spacing:4px;color:#D1D5DB}
.cm-estrellas .on{color:#F59E0B;text-shadow:0 2px 0 #B45309}
.cm-fin-tit{margin:0;font-size:1.2rem;font-weight:900;color:var(--deep,#2E1065)}
.cm-fin-det{margin:0;color:var(--text2,#6B7280);font-weight:700}
.cm-fin-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;width:100%}
.cm-bt{min-height:48px;min-width:120px;max-width:320px;padding:0 20px;border:0;border-radius:999px;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;
  background:var(--bg,#F1F0FF);color:var(--deep,#2E1065)}
.cm-bt.otra{background:var(--purple,#7C3AED);color:#fff}

@keyframes cm-balanceo{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes cm-grieta{to{stroke-dashoffset:0}}
@keyframes cm-grieta-op{0%{opacity:1}60%{opacity:1}100%{opacity:0}}
@keyframes cm-destello{0%{opacity:0;transform:scale(.3)}40%{opacity:.9}100%{opacity:0;transform:scale(1.25)}}
@keyframes cm-nace{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .cm-giro{transition:none}
  .cm-carta .cm-huevo,.cm-carta.eclosiona .cm-grieta,.cm-carta.eclosiona .cm-grieta path,.cm-carta.eclosiona .cm-destello,
  .cm-carta.eclosiona .cm-frente img,.cm-carta.eclosiona .cm-palabra{animation:none}
}

/* vistazo inicial: cartas destapadas, no se pueden tocar */
.cm-tablero.vistazo .cm-carta{pointer-events:none}