/* Memory Cards Custom Styles */

/* Game board responsive sizing */
#game-board {
  width: 100%;
  max-width: 600px;
}

/* Card styling */
.memory-card {
  aspect-ratio: 3/4;
  background-color: #8b5cf6;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark .memory-card {
  background-color: #6d28d9;
}

/* Card flip animation */
.memory-card.flipped {
  transform: rotateY(180deg);
}

.memory-card.matched {
  border: 2px solid #10b981;
  box-shadow: 0 0 10px #10b981;
  pointer-events: none;
}

.dark .memory-card.matched {
  border: 2px solid #34d399;
  box-shadow: 0 0 10px #34d399;
}

/* Card front and back faces */
.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card-front {
  background-color: #f1f5f9;
  transform: rotateY(180deg);
}

.dark .card-front {
  background-color: #334155;
}

.card-back {
  background-color: #8b5cf6;
  color: white;
  font-size: 1.5rem;
}

.dark .card-back {
  background-color: #6d28d9;
}

/* Symbol styling */
.card-symbol {
  font-size: 2rem;
  color: #6d28d9;
}

.dark .card-symbol {
  color: #a78bfa;
}

/* Card hover effect */
.memory-card:hover:not(.flipped):not(.matched) {
  transform: scale(1.05);
}

/* Responsive grid adjustments */
@media (max-width: 640px) {
  #game-board.easy, 
  #game-board.medium {
    grid-template-columns: repeat(4, 1fr);
  }
  
  #game-board.hard {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .card-symbol {
    font-size: 1.5rem;
  }
}

/* Animation when cards match */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.memory-card.pulse {
  animation: pulse 0.5s;
}

/* Difficulty grid layouts */
#game-board.easy {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#game-board.medium {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

#game-board.hard {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}