/* Yaad Rakho - memory match pairs grid. */
.mem-arena { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.mem-grid {
  display: grid;
  gap: 8px;
  width: min(92vw, 380px);
  touch-action: manipulation;
  user-select: none;
}

.mem-card {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 10px;
  background: #3a3a52;
  color: transparent;
  font-size: clamp(20px, 6.5vw, 34px);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
  perspective: 600px;
}
.mem-card:active { transform: scale(.94); }
.mem-card.up {
  background: rgba(255,255,255,.08);
  color: inherit;
  animation: mem-flip .28s ease;
}
.mem-card.matched {
  background: rgba(55,224,160,.16);
  color: inherit;
  box-shadow: 0 0 14px rgba(55,224,160,.35) inset;
  animation: mem-pop .3s ease;
}
@keyframes mem-flip {
  0% { transform: rotateY(90deg) scale(.85); opacity: .3; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
@keyframes mem-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}