#gameBoard {
  display: grid;
  gap: 10px;
  justify-content: center;
  margin: 20px auto;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  max-width: 600px;
}

.card {
  width: 100%;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #744E72;
  border-radius: 10px;
  overflow: hidden;
  backface-visibility: hidden;
}

.card-front {
  transform: rotateY(180deg);  /* kuva piilossa aluksi */
}

.card-back {
  transform: rotateY(0deg);     /* logo näkyy aluksi */
  background-color: #744E72;
}

.card-front img,
.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}