.mm-board { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: clamp(6px, 1.2vw, 10px); max-width: 620px; margin: 0 auto; perspective: 900px; }
.mm-card { position: relative; aspect-ratio: 1; border-radius: 14px; transform-style: preserve-3d; transition: transform .4s var(--ease); cursor: default; }
.mm-card.can { cursor: pointer; }
.mm-card.can:hover .back { border-color: var(--primary); }
.mm-card.open { transform: rotateY(180deg); }
.mm-card .back, .mm-card .front { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: grid; place-items: center; }
.mm-card .back { background: radial-gradient(circle at 50% 40%, rgb(var(--primary-rgb) / .35), transparent 70%), var(--surface-2); border: 2px solid var(--line); }
.mm-card .back::after { content: ''; width: 34%; height: 34%; border: 3px solid rgb(var(--primary-rgb) / .55); transform: rotate(45deg); border-radius: 4px; }
.mm-card .front { transform: rotateY(180deg); background: var(--surface); border: 2px solid var(--line-soft); padding: 16%; }
.mm-card.up .front { border-color: var(--primary); }
.mm-card.got .front { opacity: .8; }
.mm-card.got.o0 .front { border-color: #ef4444; } .mm-card.got.o1 .front { border-color: #3b82f6; } .mm-card.got.o2 .front { border-color: #22c55e; }
.mm-card.got.o3 .front { border-color: #eab308; } .mm-card.got.o4 .front { border-color: #a855f7; } .mm-card.got.o5 .front { border-color: #f97316; }
.shp { width: 100%; height: 100%; display: block; }