/* =============================================================
   GAME: Memory Match
   ============================================================= */
.board-memory {
  --cols: 4; --rows: 4; --gap: 8px;
  --cell: clamp(40px, min(calc((100vw - 64px) / var(--cols) - var(--gap)), calc((100vh - 280px) / var(--rows) - var(--gap))), 104px);
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); gap: var(--gap); padding: 10px;
  border-radius: 18px; background: #170a28;
  box-shadow: 0 0 0 2px #ff4fd8, 0 0 26px rgba(255, 79, 216, .35), inset 0 -5px 0 rgba(0, 0, 0, .3);
}
@media (max-width: 420px) { .board-memory { --gap: 6px; padding: 8px; } }
.mm-row { display: contents; }
.mm-cell { width: var(--cell); height: var(--cell); }
.mm-card { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.mm-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mm-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3, .7, .3, 1.15); }
.mm-up .mm-inner { transform: rotateY(180deg); }
.mm-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* card back: diamond lattice, double inner frame, glowing gem in the middle, glossy sheen */
.mm-back {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 150, 240, .38), transparent 42%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px 9px),
    linear-gradient(155deg, #8d2bc8, #4c1383 50%, #250842);
  box-shadow:
    inset 0 0 0 2px rgba(255, 79, 216, .7), inset 0 0 0 5px rgba(28, 6, 50, .6), inset 0 0 0 6px rgba(255, 157, 240, .4),
    inset 0 -5px 0 rgba(0, 0, 0, .28), 0 4px 10px -3px rgba(0, 0, 0, .6);
  transition: box-shadow .2s, translate .2s;
}
.mm-back::before { /* the gem */
  content: ""; position: absolute; inset: 0; margin: auto; width: 30%; height: 30%; rotate: 45deg; border-radius: 22%;
  background: radial-gradient(circle at 35% 35%, #fff 0 8%, transparent 30%), linear-gradient(135deg, #ffd6fa, #ff4fd8 45%, #7b1cc4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .28), 0 0 14px rgba(255, 79, 216, .85), inset 0 -3px 4px rgba(60, 0, 90, .45);
}
.mm-back::after { /* sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .24) 0 16%, rgba(255, 255, 255, 0) 38%);
}
.mm-card:not(.mm-up):hover .mm-back {
  translate: 0 -2px;
  box-shadow: inset 0 0 0 2px #ffb3f4, inset 0 0 0 5px rgba(28, 6, 50, .6), inset 0 0 0 6px rgba(255, 157, 240, .6), inset 0 -5px 0 rgba(0, 0, 0, .28), 0 0 18px rgba(255, 79, 216, .55);
}
.mm-front {
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 38%, #24164a, #0d0720 72%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 -4px 0 rgba(0, 0, 0, .3);
  transition: box-shadow .5s;
}
.mm-front svg { width: 68%; height: 68%; filter: drop-shadow(0 0 5px var(--sc)); transition: opacity .6s, scale .6s; }
/* lift while turning face up */
.mm-up:not(.mm-done) { animation: mmLift .42s ease-out; }
@keyframes mmLift { 45% { scale: 1.07; } }
.mm-done { cursor: default; }
.mm-done .mm-front { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 0 14px rgba(255, 79, 216, .25); }
.mm-done:not(.mm-hit) .mm-front svg { opacity: .55; scale: .92; }
/* a fresh match: pop, bright ring in the symbol colour, then settle */
.mm-hit { position: relative; z-index: 1; animation: mmPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.mm-hit .mm-front { box-shadow: inset 0 0 0 3px var(--sc), 0 0 26px 2px var(--sc); }
.mm-hit .mm-front::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px var(--sc); animation: mmRing .6s ease-out .05s;
}
@keyframes mmPop { 40% { scale: 1.12; } }
@keyframes mmRing { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.35; } }
.mm-own1 .mm-front { box-shadow: inset 0 0 0 3px var(--p1), 0 0 12px color-mix(in srgb, var(--p1) 45%, transparent); }
.mm-own2 .mm-front { box-shadow: inset 0 0 0 3px var(--p2), 0 0 12px color-mix(in srgb, var(--p2) 45%, transparent); }
.mm-miss .mm-front { background: radial-gradient(circle at 50% 38%, #3a1030, #14061a 72%); box-shadow: inset 0 0 0 2px #ff3d5e, 0 0 14px rgba(255, 61, 94, .45); animation: mmShake .35s ease .38s; }
@keyframes mmShake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
.mm-up:not(.mm-done):not(.mm-miss) .mm-front { box-shadow: inset 0 0 0 2px #fff, 0 0 18px rgba(255, 255, 255, .25); }
.board-memory.mm-wait .mm-card { cursor: default; }
.mm-ai[hidden] { display: none; }
.mm-chip strong, .play-area .score strong { font-variant-numeric: tabular-nums; }
.mm-clock { color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-time { color: var(--ink); }
.mm-turn { color: var(--muted); font-weight: 600; }