.controls { display: flex; gap: 10px; }
.controls select { width: auto; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; color: var(--muted); }
.stats strong { color: var(--ink); }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 560px; margin: 0 auto 20px; }
.board.cols-5 { grid-template-columns: repeat(5, 1fr); max-width: 680px; }
@media (max-width: 480px) { .board.cols-5 { grid-template-columns: repeat(4, 1fr); } }
.card-btn { aspect-ratio: 1; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font: inherit; font-size: clamp(1.6rem, 7vw, 2.6rem); cursor: pointer; display: grid; place-items: center; transition: transform .18s, background-color .18s; }
.card-btn:hover { transform: translateY(-2px); }
.card-btn > * { grid-area: 1 / 1; }
.card-btn .face { visibility: hidden; }
.card-btn.is-open { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #cdd5e1; }
.card-btn.is-open .face, .card-btn.is-matched .face { visibility: visible; }
.card-btn.is-matched { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); cursor: default; transform: none; }
.card-btn .back { width: 28%; aspect-ratio: 1; border-radius: 50%; background: #2b3a57; }
.card-btn.is-open .back, .card-btn.is-matched .back { display: none; }
.ok { max-width: 560px; margin: 0 auto; text-align: center; }