.row button { align-self: end; }
dl.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 8px; text-align: center; }
dl.stats dd { text-align: center; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 420px; width: 100%; margin: 0 auto; }
.board[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.mcard { padding: 0; background: transparent; border: 0; aspect-ratio: 3 / 4; perspective: 600px; min-width: 0; }
.mcard .inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s var(--ease); }
.mcard.up .inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; backface-visibility: hidden; }
.back { background: var(--accent); background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgb(255 255 255 / .12) 6px 12px); }
.front { background: var(--bg); border: 1px solid var(--line); transform: rotateY(180deg); }
.mcard.matched .front { border-color: var(--accent); }
.front svg { width: 64%; height: 64%; }
.mcard.matched svg { opacity: .55; }
.c0 { fill: #e5484d; } .c1 { fill: #0b8f6a; } .c2 { fill: #2f7de1; } .c3 { fill: #d97706; } .c4 { fill: #8e4ec6; } .c5 { fill: #d6409f; }
@media (prefers-reduced-motion: reduce) { .mcard .inner { transition: none; } }