/* hafiza sayfasına özel stiller */
.memory {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(6px, 1.6vw, 12px);
  width: min(100%, calc(var(--cols, 4) * 112px));
  border-radius: 16px;
}
.mcard {
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}
.mcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}
.mcard.open .mcard-inner,
.mcard.matched .mcard-inner { transform: rotateY(180deg); }
.mface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mface.back {
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 22%) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 70%, rgb(255 255 255 / 16%) 0 10%, transparent 11%),
    linear-gradient(135deg, #7c6cf2, #e267b8);
  color: rgb(255 255 255 / 85%);
  font-size: 2rem;
  font-size: 34cqi;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.mface.front {
  transform: rotateY(180deg);
  background: var(--surface);
  border: 2px solid var(--border);
  font-size: 2rem;
  font-size: 52cqi;
  line-height: 1;
}
.mcard.matched .mface.front {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, var(--surface));
}
.mcard.matched { cursor: default; }
.mcard.shake .mcard-inner { animation: shake 0.35s ease 0.35s; }
@keyframes shake {
  0%, 100% { transform: rotateY(180deg) translateX(0); }
  25% { transform: rotateY(180deg) translateX(-5px); }
  75% { transform: rotateY(180deg) translateX(5px); }
}