.game-prize-card {
  border-radius: 1vh;
}

.game-prize-img {
  width: 150px;
  max-width: 100%;
}

img.spin-reward {
  transform: rotate(-260deg) translate(-16px, -20%) translateY(-10px) !important;
  max-height: 150px;
  width: auto;
}

.treasure {
  cursor: pointer;
}

.treasure img {
  transition: 0.25s ease;
}

.gshake {
  animation: gshake 0.25s infinite;
}

@keyframes gshake {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  25% {
    transform: translate(2px, -2px) rotate(1deg);
  }

  50% {
    transform: translate(-2px, 2px) rotate(-1deg);
  }

  75% {
    transform: translate(2px, 2px) rotate(1deg);
  }

  100% {
    transform: translate(0, 0) rotate(0);
  }
}

@media only screen and (max-width: 770px) {
  img.spin-reward {
    max-height: 130px;
  }
}

@media only screen and (max-width: 420px) {
  img.spin-reward {
    max-height: 100px;
  }

  .game-prize-img {
    width: 100px;
  }
}

/* Lotto */
.lotto-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, 76px);
  justify-content: center;
  gap: 12px;

  max-width: 1200px;
  margin: 20px auto;
}

.lotto-card {
  width: 86px;
  height: 76px;
  border: 0;
  background: transparent;
  perspective: 900px;
  cursor: pointer;
}

.lotto-inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 12px;
  transform-style: preserve-3d;
  transition:
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 0.25s ease;
}

.lotto-card:hover .lotto-inner {
  scale: 1.05;
}

.lotto-card.opened {
  pointer-events: none;
}

.lotto-card.flipped .lotto-inner {
  transform: rotateY(180deg) scale(1.18);
  z-index: 5;
}

.lotto-front,
.lotto-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backface-visibility: hidden;
  font-weight: 800;
}

.lotto-front {
  color: #fff;
  font-size: 26px;
  background: linear-gradient(135deg, var(--main), var(--sub) 180%);
  border: 2px solid var(--main);
  /* box-shadow: 0 6px 14px rgba(124, 60, 255, .25); */
}

.lotto-back {
  transform: rotateY(180deg);
  background: #f3f4f6;
  border: 2px solid #9ca3af;
  color: #555;
}

.lotto-reward-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.lotto-card.disabled {
  pointer-events: none;
  opacity: 0.65;
}