.mm-grid { display: grid; gap: 8px; width: 100%; }
.mm-grid.c4 { grid-template-columns: repeat(4, 1fr); max-width: 380px; }
.mm-grid.c6 { grid-template-columns: repeat(6, 1fr); max-width: 520px; }
.mm-card {
  aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--card-line); background: var(--btn); color: var(--text);
  display: grid; place-items: center; font: inherit; font-size: clamp(20px, 6vw, 34px); padding: 0; line-height: 1;
}
button.mm-card { cursor: pointer; transition: transform .12s, background .12s; }
button.mm-card:not(.up):hover { transform: translateY(-2px); }
button.mm-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mm-card.up { background: var(--chip); }
.mm-card.found { background: color-mix(in srgb, var(--green) 16%, var(--panel)); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.mm-card.wrong { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.mm-grid.c6 .mm-card { font-size: clamp(18px, 4.6vw, 30px); border-radius: 10px; }
.mm-stats { font-size: 13.5px; color: var(--dim); margin-top: -6px; }
.mm-stats b { color: var(--text); font-weight: 500; }