/* ==========================================================
   JOGO DA MEMÓRIA: cartas com as fotos de vocês
   ========================================================== */

.memoria__placar {
  margin-bottom: 1rem;
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--tinta-suave);
}

.memoria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  max-width: 30rem;
}

@media (min-width: 640px) {
  .memoria { grid-template-columns: repeat(4, 1fr); gap: .9rem; }
}

.carta {
  aspect-ratio: 4 / 5;
  perspective: 800px;
}

.carta__miolo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4, .2, .2, 1);
}

.virada .carta__miolo { transform: rotateY(180deg); }

.carta__verso,
.carta__face {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 8px 14px -8px rgba(58, 39, 49, .45);
}

/* verso: papel de presente com bolinhas e um coração carimbado */
.carta__verso {
  display: grid;
  place-items: center;
  border: 4px solid #fffefb;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .8) 1.6px, transparent 2.1px) 0 0 / 11px 11px,
    var(--rosa);
  color: var(--batom);
}

.carta__verso svg {
  width: 36%;
  fill: currentColor;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
  transform: rotate(-8deg);
}

.carta:hover:not(.virada) .carta__miolo { transform: rotateY(-10deg); }

.carta__face {
  transform: rotateY(180deg);
  padding: 5px;
  background: #fffefb;
}

.carta__face .foto { height: 100%; aspect-ratio: auto; border-radius: 3px; }

.achada .carta__face {
  box-shadow: 0 0 0 2px var(--rosa-forte), 0 8px 16px -8px rgba(201, 42, 90, .5);
}

.achada .carta__miolo { animation: achou .5s ease .25s; }

@keyframes achou {
  50% { transform: rotateY(180deg) scale(1.08); }
}

.memoria__fim {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.6rem;
}

.memoria__fim-titulo { font-size: 1.25rem; color: var(--batom); }