.memory-game {
  height: 100%;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(169, 149, 212, .24);
  border-radius: 16px;
  background:
    linear-gradient(rgba(8, 19, 25, .3), rgba(8, 19, 25, .58)),
    url('/minigames/memory/background.webp?v=1') center top / cover no-repeat;
  box-shadow: inset 0 0 60px rgba(7, 14, 24, .42), 0 18px 50px rgba(0, 0, 0, .22);
}

.memory-stats span,
.memory-status {
  border-color: rgba(205, 183, 239, .12);
  background: rgba(7, 17, 27, .78);
  backdrop-filter: blur(5px);
}

.memory-board {
  position: relative;
}

.memory-card {
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .32));
}

.memory-back {
  border: 0;
  background: url('/minigames/memory/card-back.webp?v=1') center / 100% 100% no-repeat;
  box-shadow: none;
  color: transparent;
}

.memory-front {
  grid-template-rows: 1fr auto;
  padding: 12px 7px 10px;
  border: 0;
  background: url('/minigames/memory/card-front.webp?v=1') center / 100% 100% no-repeat;
}

.memory-front b {
  align-self: center;
  display: grid;
  place-items: center;
  width: 76%;
  margin: 7% auto 0;
}

.memory-front b img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--element) 62%, transparent));
}

.memory-front small {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(7, 13, 24, .68);
  color: #f0e9da;
  line-height: 1.2;
}

.memory-card.matched .memory-front {
  box-shadow: 0 0 20px color-mix(in srgb, var(--element) 64%, transparent);
}

.memory-board.complete::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(68%, 320px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url('/minigames/memory/complete-sigil.webp?v=1') center / contain no-repeat;
  opacity: .34;
  pointer-events: none;
  animation: memory-sigil-in .65s ease-out both;
}

@keyframes memory-sigil-in {
  from { opacity: 0; scale: .72; rotate: -16deg; }
  to { opacity: .34; scale: 1; rotate: 0deg; }
}

@media (max-width: 560px) {
  .memory-game { padding: 14px 10px; border-radius: 13px; }
  .memory-front { padding: 8px 4px 7px; }
  .memory-front b { width: 78%; margin-top: 5%; }
  .memory-front small { padding: 2px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-board.complete::after { animation: none; }
}