.gm-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px; }
.gm-card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.gm-card span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; transition: transform .35s ease; }
.gm-back { background: linear-gradient(135deg, var(--c, #0d9488), #134e4a); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); }
.gm-back::after { content: "✦"; color: rgba(255, 255, 255, .55); font-size: 1.4rem; }
.gm-face { background: var(--surface); border: 2px solid var(--border); font-size: clamp(1.6rem, 7vw, 2.6rem); transform: rotateY(180deg); }
.gm-card.up .gm-back { transform: rotateY(180deg); }
.gm-card.up .gm-face { transform: rotateY(360deg); }
.gm-card.done .gm-face { border-color: #16a34a; background: #f0fdf4; }
.gm-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 14px; }