.memory-stage{padding:12px;background:radial-gradient(120% 120% at 50% 0%, #141d28, #0b1017 70%)}
.board{
  display:grid;
  grid-template-columns:repeat(var(--cols, 4), 1fr);
  gap:10px;
  width:100%;
  max-width:520px;
  margin:0 auto;
}
.card{
  position:relative;
  aspect-ratio:1/1;
  padding:0;
  border:0;
  background:none;
  perspective:700px;
  cursor:pointer;
  border-radius:12px;
  transition:transform .22s ease;
}
.card-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.75,.3,1);
}
.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}
.face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.face.back{
  background:linear-gradient(160deg,#1f2c3a,#141c26);
  border:1px solid #26333f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.face.back::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(196,181,253,.055) 0 6px, transparent 6px 12px);
}
.face.back::after{
  content:"";
  width:34%;height:34%;
  border-radius:50%;
  border:2px solid rgba(196,181,253,.35);
  box-shadow:0 0 18px rgba(196,181,253,.12);
}
.card:hover .face.back{border-color:#3a4a5c}
.card:active{transform:scale(.97)}
.face.front{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,#f6f2ff,#e6dcff);
  border:1px solid #cfc0f5;
  font-size:var(--fs, 30px);
  line-height:1;
}
.card.matched .face.front{
  background:linear-gradient(180deg,#f0e9ff,#d8c8ff);
  box-shadow:0 0 0 2px rgba(196,181,253,.55), 0 0 22px rgba(196,181,253,.25);
}
@keyframes match-pop{0%{transform:rotateY(180deg) scale(1)}45%{transform:rotateY(180deg) scale(1.09)}100%{transform:rotateY(180deg) scale(1)}}
.card.matched .card-inner{animation:match-pop .34s ease}

@media (max-width:600px){
  .memory-stage{padding:9px}
  .board{gap:7px}
}