/* Memory Match board. Platform tokens only. */

.mm-status {
  margin: 0 0 var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/*
 * The column count comes from the module, which sets it from the number of
 * pairs: four columns for twelve and sixteen cards, five for twenty, six for
 * twenty-four. Wider decks also get a wider board, or a six-column grid at
 * 22rem would be 3rem cards.
 */
.mm-grid {
  display: grid;
  grid-template-columns: repeat(var(--mm-cols, 4), 1fr);
  gap: clamp(var(--space-1), 2vw, var(--space-3));
  width: 100%;
  max-width: calc(var(--mm-cols, 4) * 5.5rem);
  margin-inline: auto;
}

.mm-card {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  /* Scaled to the column, so a symbol fills a card on every deck size. */
  font-size: min(calc(28rem / var(--mm-cols, 4)), calc(7vw * 4 / var(--mm-cols, 4)), 2rem);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}

/* Face-down cards carry a quiet pattern so the grid does not read as a wall
   of empty boxes. */
.mm-card[data-state="down"] {
  background:
    repeating-linear-gradient(45deg,
      var(--surface-sunken) 0 6px,
      var(--surface-hover) 6px 12px);
}

.mm-card[data-state="up"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Matched pairs are settled: colour plus a solid border, and no longer
   interactive. */
.mm-card[data-state="matched"] {
  background: var(--good-soft);
  border-color: var(--good);
  color: var(--good);
  cursor: default;
}