/* Memory — style specyficzne dla gry */

.memo {
  width: 100%;
  max-width: 520px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

.memo[data-size="6"] { grid-template-columns: repeat(6, 1fr); gap: 8px; }

.memo-card {
  aspect-ratio: 1;
  perspective: 700px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.memo-card__inner {
  display: block;          /* <span> jest inline — transform i wymiary by nie zadziałały */
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.3, .8, .3, 1.1);
}

.memo-card[aria-pressed="true"] .memo-card__inner,
.memo-card.is-matched .memo-card__inner { transform: rotateY(180deg); }

.memo-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: clamp(1.4rem, 7vw, 2.4rem);
  line-height: 1;
}

.memo-face--back {
  background:
    radial-gradient(circle at 30% 25%, rgba(167, 139, 250, .35), transparent 60%),
    var(--bg-soft);
}

.memo-face--back::after {
  content: "?";
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--muted);
  opacity: .7;
}

.memo-face--front {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
}

.memo-card:hover .memo-face--back { border-color: rgba(167, 139, 250, .6); }

.memo-card.is-matched { cursor: default; }

.memo-card.is-matched .memo-face--front {
  background: linear-gradient(150deg, rgba(34, 197, 94, .35), rgba(34, 197, 94, .12));
  border-color: rgba(34, 197, 94, .6);
  animation: matched .4s ease;
}

.memo-card.is-locked { pointer-events: none; }

@keyframes matched {
  /* rotateY musi zostać — bez niego backface-visibility chowa awers w połowie animacji */
  50% { transform: rotateY(180deg) scale(1.08); }
}