.game-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
  gap: 24px;
  padding: 0; /* Remove horizontal padding to prevent cropping */
  max-width: 100vw; /* Prevent overflow */
  box-sizing: border-box; /* Include padding and borders in the element's total width and height */
}

.game-score {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.nes-container.is-rounded {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #fff;
  border-radius: 0;
  font-size: 40px;
  margin: 0;
}

.card {
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.25s linear;
  height: calc(100vw / 4 - 24px); /* Adjust height based on viewport width */
  /* Ensure height adapts based on the number of cards and spacing */
}

.card img {
  display: block;
  width: 100%;
  height: 100%; /* Maintain aspect ratio */
}

.card.shake {
  animation: shake 0.35s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0) rotateY(180deg);
  }

  20% {
    transform: translateX(-13px) rotateY(180deg);
  }

  40% {
    transform: translateX(13px) rotateY(180deg);
  }

  60% {
    transform: translateX(-8px) rotateY(180deg);
  }

  80% {
    transform: translateX(8px) rotateY(180deg);
  }
}

.card div {
  width: 100%;
  height: 100%;
  transition: transform 0.25s linear;
  backface-visibility: hidden;
  position: absolute;
  top: 0%;
  left: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card.show div {
  pointer-events: none; /* Disable events when card is shown */
  user-select: none;
  transition: transform 0.25s linear;
}

.card .front {
  transform: rotateY(180deg);
}

.card .back {
  transform: rotateY(0);
  background-color: #000;
  color: #fff;
  font-size: 4rem;
}

.card.show {
  transform: rotateY(180deg);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .game-board {
    grid-template-columns: repeat(4, 1fr); /* Maintain 4 columns for tablets */
  }
}

@media (max-width: 768px) {
  .game-board {
    grid-template-columns: repeat(4, 1fr); /* Maintain 4 columns for large phones */
  }

  .card {
    height: calc(100vw / 4 - 24px); /* Adjust card height for smaller devices */
  }
}

@media (max-width: 425px) {
  .game-board {
    grid-template-columns: repeat(4, 1fr); /* Maintain 4 columns for smaller screens */
  }

  .card {
    height: calc(100vw / 4 - 24px); /* Adjust card height for very small devices */
  }
}