/* game-type-1.css - Specific styles for type 1 games */
.card {
  display: flex;
  border-radius: 1.25rem;
  width: 60rem;
  height: 60vh;
  position: relative;
  flex-direction: column;
  align-content: stretch;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}

[data-game="arsredovisningen"] .card {
  background: linear-gradient(135deg, #F2F0FF, #B29EFF);
}

[data-game="vanskapsbandet"] .card {
  background: linear-gradient(135deg, #FFE3F5, #FF84D9);
}

[data-game="hetsigt"] .card {
  background: linear-gradient(135deg, #FEE6FF, #FBBEFF);
}

[data-game="minnesresan"] .card {
  background: linear-gradient(135deg, #FFE5E5, #FF8C8C);
}

[data-game="forspelet"] .card {
  background: linear-gradient(135deg, #FDF2E4, #F6AE5C);
}

[data-game="parduellen"] .card {
  background: linear-gradient(135deg, #CDEDFF, #7EC6FF);
}

[data-game="provspela-parduellen"] .card {
  background: linear-gradient(135deg, #CDEDFF, #7EC6FF);
}

[data-game="ick-picks-tjejkvall-edition"] .card {
  background: linear-gradient(135deg, #FFEDF3, #FF7A9E);
}

[data-game="provspela-ick-picks-tjejkvall-edition"] .card {
  background: linear-gradient(135deg, #FFEDF3, #FF7A9E);
}

[data-game="pekleken"] .card {
  background: linear-gradient(135deg, #E2FFCD, #95F782);
}

[data-game="samboprovningen"] .card {
  background: linear-gradient(135deg, #B8FDFF, #69D8F4);
}

[data-game="provspela-samboprovningen"] .card {
  background: linear-gradient(135deg, #B8FDFF, #69D8F4);
}

[data-game="kvalitetstid"] .card {
  background: linear-gradient(135deg, #FFF59A, #F6AE5C);
}

[data-game="jag-har-aldrig"] .card {
  background: linear-gradient(135deg, #F3CDFF, #CA70FF);
}

.card:not(.animated) {
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5vw;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: normal;
  font-size: clamp(2.2vh, 3vw, 3vh);
  color: black;
}

.front p {
  font-size: clamp(2.2vh, 2.5vw, 3vh);
  margin: 0;
  text-align: center;
}

.front p + p {
  margin-top: 1.2rem;
  font-weight: 500;
}

.front .category {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: bold;
  font-size: clamp(3vh, 4vw, 4vh);
  color: black;
  position: absolute;
  top: 2rem;
}

.stacked-answers {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Fly-out animation */
.card.fly-out {
  transform: translateX(100vw) rotate(10deg);
  opacity: 0;
}

/* Pop-in animation */
.card.pop-in {
  transform: scale(0.5) translateX(-100vw) rotate(-10deg);
  opacity: 0;
  animation: pop-in-animation 0.6s ease forwards;
}

@keyframes pop-in-animation {
  0% {
    transform: scale(0.5) translateX(-100vw) rotate(-10deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateX(0) rotate(0);
    opacity: 1;
  }
}