/* Memory Animali — stile proprio del gioco */

.mm-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 8px 12px; font-size: 15px; color: var(--muted); min-height: 56px; }
.mm-info { flex-wrap: wrap; }
.mm-info .btn { min-height: 44px; padding: 6px 14px; }
.mm-info-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.mm-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; width: min(100%, 520px); margin: 0 auto; }
.mm-card { display: block; width: 100%; aspect-ratio: 3 / 4; border: none; padding: 0; background: transparent; perspective: 700px; border-radius: 12px; }
.mm-card:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.mm-inner { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform calc(var(--t) * 1.4) ease; }
.mm-card.up .mm-inner { transform: rotateY(180deg); }
.mm-face { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; backface-visibility: hidden; border: 2px solid rgba(0,0,0,.18); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
/* dorso calmo e uguale per tutte, con un motivo leggero */
.mm-back { background: var(--accent); background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 18%, transparent 19%); background-size: 22px 22px; }
.mm-front { transform: rotateY(180deg); font-size: clamp(28px, 9vw, 48px); }
.mm-card.matched .mm-front { box-shadow: 0 0 0 3px var(--good); }
.mm-card.matched { cursor: default; }
.mm-card.hint .mm-back { box-shadow: 0 0 0 4px var(--panel), 0 0 0 8px var(--calm); }
.mm-card.pop .mm-inner { animation: mm-pop calc(var(--t) * 1.6) ease; }
@keyframes mm-pop { 50% { transform: rotateY(180deg) scale(1.08); } }
body.reduce-motion .mm-inner { transition: none; }