.board {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(.6rem, 1.6vw, 1.1rem);
  margin: 0 auto;
  max-width: calc(var(--cols) * 190px);
  perspective: 1100px;
}
.mcard {
  position: relative; aspect-ratio: 1; padding: 0;
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mcard-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, .7, .2, 1);
}
.mcard.flipped .mcard-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0;
  border-radius: 20px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
}
.cardback {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(233, 196, 106, .22), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #123a2d, #0a241c);
  color: var(--gold);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  transition: border-color .25s, transform .25s;
}
@media (hover: hover) { .mcard:not(.flipped):hover .cardback { border-color: var(--line-hi); transform: translateY(-3px); } }
.front { transform: rotateY(180deg); background: #0a1a15 center / cover no-repeat; display: grid; place-items: center; }
.front svg { width: 86%; height: auto; }
.front.mascot { background: radial-gradient(circle at 50% 40%, #2a5a46, #123327); }
.mcard.matched .front { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 196, 106, .55), 0 0 28px rgba(233, 196, 106, .35); }
.mcard.hinted .front { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(246, 220, 148, .8); }
.mcard:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 4px; border-radius: 20px; }
.mcard[disabled] { cursor: default; }