/* The cards, face down until turned. As big as fits without pushing the
   buttons off a short screen. */
.board {
  --cols: 4;
  --rows: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 8px;
  width: min(100%, max(240px, calc((100dvh - 320px) * var(--cols) / var(--rows))));
  aspect-ratio: var(--cols) / var(--rows);
  margin: 0 auto;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}

.card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  perspective: 600px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.card .inner {
  position: absolute;
  inset: 0;
  transition: transform 0.28s ease;
  transform-style: preserve-3d;
}
.card.up .inner { transform: rotateY(180deg); }
.card .face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* The back: a little diamond pattern. */
.card .back {
  border: 2px solid var(--line-strong);
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--b) 22%, transparent) 7px 9px),
    repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--a) 22%, transparent) 7px 9px),
    var(--surface-2);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.card .front {
  border: 2px solid var(--line-strong);
  background: var(--surface);
  font-size: calc(100cqw / var(--cols) * 0.46);
  line-height: 1;
  transform: rotateY(180deg);
}
.card.matched { cursor: default; }
.card.matched .front { border-color: var(--ok); background: var(--ok-bg); }
.card.miss .front { border-color: var(--error); }
.card.flash .front { animation: flash 0.9s ease; }
.card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 12px; }
.board.solved .card { animation: pop 0.45s ease both; animation-delay: calc(var(--wave) * 40ms); }
@media (hover: hover) {
  .card:not(.up):hover .back { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .card .inner { transition: none; }
}