/* =============================================
   memory.css - Memory Match Specific Styles
   Mini Games Hub
   ============================================= */

#memory-board {
  grid-template-columns: repeat(4, 1fr);
  max-width: 480px;
  width: 100%;
}

#memory-board.medium {
  grid-template-columns: repeat(5, 1fr);
  max-width: 560px;
}

#memory-board.hard {
  grid-template-columns: repeat(6, 1fr);
  max-width: 600px;
}

#memory-board.previewing .memory-card {
  pointer-events: none;
}

.memory-card {
  width: 100%;
  aspect-ratio: 1;
  min-width: 70px;
}

.memory-card .card-back {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid rgba(108, 99, 255, 0.25);
}

.memory-card .card-back::after {
  content: '?';
  font-size: 1.4rem;
  opacity: 0.5;
}

#memory-board.previewing .memory-card .card-front {
  box-shadow: 0 0 18px rgba(206, 147, 216, 0.22);
}

.memory-card.matched .card-front {
  border-color: rgba(0, 230, 118, 0.5);
  background: linear-gradient(135deg, #0f2a1a 0%, #0d1f2d 100%);
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.2);
  animation: matchPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes matchPop {
  0% { transform: rotateY(180deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}

.memory-card.shake {
  animation: cardShake 0.4s ease;
}

@keyframes cardShake {
  0%, 100% { transform: rotateY(180deg) translateX(0); }
  25% { transform: rotateY(180deg) translateX(-4px); }
  75% { transform: rotateY(180deg) translateX(4px); }
}

.memory-accent .stat-card-value {
  color: var(--clr-accent-purple) !important;
  font-size: 0.85rem !important;
}

.memory-accent {
  border-color: rgba(206, 147, 216, 0.4) !important;
  background: rgba(206, 147, 216, 0.07) !important;
}

.all-matched {
  animation: boardVictory 0.6s ease;
}

@keyframes boardVictory {
  0% { transform: scale(1); }
  30% { transform: scale(1.04); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.pairs-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--clr-text-secondary);
}

.pairs-progress strong {
  color: var(--clr-accent-purple);
}

#memory-difficulty .diff-btn.active {
  background: linear-gradient(135deg, #ce93d8, #ab47bc);
}

.memory-win-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(206, 147, 216, 0.32);
  background: rgba(206, 147, 216, 0.08);
  color: #f3d8ff;
  font-size: var(--text-sm);
  font-weight: 700;
}

@media (max-width: 520px) {
  #memory-board {
    grid-template-columns: repeat(4, 1fr);
    max-width: 320px;
    gap: var(--space-2);
  }

  #memory-board.medium {
    grid-template-columns: repeat(4, 1fr);
    max-width: 320px;
  }

  #memory-board.hard {
    grid-template-columns: repeat(4, 1fr);
    max-width: 320px;
  }

  .memory-card {
    min-width: 50px;
  }

  .memory-card .card-back::after {
    font-size: 1rem;
  }

  .memory-card .card-front {
    font-size: 1.4rem;
  }
}