.card {
    position: absolute;
    left: 50%;
    width: 240px;
    height: 320px;
    --ty: 0px;
    --s: 1;
    transform: translate(-50%, var(--ty)) scale(var(--s));
    transition:
    left .35s ease,
    transform .35s ease,
    opacity .35s ease,
    box-shadow .35s ease;
    cursor: pointer;
    border-radius: 0.75rem;
    overflow: hidden;
}
.card[data-pos="front"] {
    left: 50%;
    --ty: 0px;
    --s: 1;
    opacity: 1;
    z-index: 30;
}
.card[data-pos="middle-1"] {
    left: 80%;
    --ty: 10px;
    --s: 0.96;
    opacity: 0.95;
    z-index: 20;
}
.card[data-pos="middle-2"] {
    left: 30%;
    --ty: 10px;
    --s: 0.96;
    opacity: 0.95;
    z-index: 20;
}
.card[data-pos="back-1"] {
    left: 100%;
    --ty: 20px;
    --s: 0.92;
    opacity: 0.9;
    z-index: 10;
}
.card[data-pos="back-2"] {
    left: 10%;
    --ty: 20px;
    --s: 0.92;
    opacity: 0.9;
    z-index: 10;
}
.card:hover {
    transform: translate(-50%, calc(var(--ty) - 8px)) scale(calc(var(--s) + .04));
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.card-img {
    width: 100%;
    height: 100%;
    background-color: #e5e7eb; /* gray-200 */
    background-size: cover;
    background-position: center;
}

/* Animasi transisi konten deskripsi gamemode */
#gamemode {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 250ms ease;
}

#gamemode.gm-hidden {
  opacity: 0;
  transform: translateY(12px); /* geser turun sedikit waktu menghilang */
}