/* ================================
GAME PAGE - FIXED TO MATCH FIGMA
================================ */
.game-page {
  padding: 3rem 0;
  min-height: calc(100vh - 400px);
}

.game-hero {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 3rem 3rem;
  box-shadow: var(--shadow-md);
  animation: fadeInUp 0.3s ease-out;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
  -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
  -ms-transition: transform 0.3s ease, box-shadow 0.3s ease;
  -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-animation: fadeInUp 0.3s ease-out;
}

.game-hero:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
}

/* Page entrance animation (only on rekomendasi.html via body.page-rekomendasi) */
.page-rekomendasi .game-hero {
  animation: fadeInUp 0.3s ease-out;
  -webkit-animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}

/* When an arrow is hovered, JS will add `.no-lift` to prevent the card from
lifting; restore original shadow/position in that case. */
.game-hero.no-lift:hover {
  transform: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* GAME ITEM - Gambar di atas, teks di bawah */
.game-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 0.3s ease-out;
}

/* GAMBAR LEBIH BESAR SESUAI MOCKUP PERTAMA */
.game-image {
  width: 100%;
  max-width: 1000px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}



/* GAME CONTENT (teks description) */
.game-content {
  width: 100%;
  max-width: 900px;
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
}

.game-content p {
  margin: 0;
  text-align: left;
}

.game-content p.title {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.3;
  margin-top: 0.8rem;
}


/* UPDATES SECTION - DIHAPUS/DISEMBUNYIKAN */
.updates-section {
  display: none;/
}

/* ================================
RESPONSIVE - MOBILE
================================ */
@media (max-width: 900px) {
  .game-hero {
    padding: 2rem;
  }

  .game-image {
    width: 100%;
    max-width: 100%;
  }

  .update-grid {
    grid-template-columns: 1fr;
  }
}

.game-hero {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.3s ease;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.arrow img {
  width: 54px;
  object-fit: contain;
}

.arrow-left {
  left: -100px;
}

.arrow-right {
  right: -100px;
}

/* Keep arrows visually in place when the card rises on hover by counteracting
the parent's translateY(-5px). Only apply this when the card is hovered AND
no arrow is hovered — this prevents both arrows moving when one arrow is
hovered (uses :has; JS fallback already toggles `.no-lift`). */
.game-hero:hover:not(:has(.arrow:hover)) .arrow {
  transform: translateY(calc(-50% + 5px));
  -webkit-transform: translateY(calc(-50% + 5px));
  -moz-transform: translateY(calc(-50% + 5px));
  -ms-transform: translateY(calc(-50% + 5px));
  -o-transform: translateY(calc(-50% + 5px));
}

/* Normal arrow hover: scale the hovered arrow. */
.arrow:hover {
  transform: translateY(-50%) scale(1.1);
  -webkit-transform: translateY(-50%) scale(1.1);
  -moz-transform: translateY(-50%) scale(1.1);
  -ms-transform: translateY(-50%) scale(1.1);
  -o-transform: translateY(-50%) scale(1.1);
}

/* When card is hovered and no arrow is hovered, combine lift-counteraction
with arrow hover scaling (keeps consistent transform). */
.game-hero:hover:not(:has(.arrow:hover)) .arrow:hover {
  transform: translateY(calc(-50% + 5px)) scale(1.1);
  -webkit-transform: translateY(calc(-50% + 5px)) scale(1.1);
  -moz-transform: translateY(calc(-50% + 5px)) scale(1.1);
  -ms-transform: translateY(calc(-50% + 5px)) scale(1.1);
  -o-transform: translateY(calc(-50% + 5px)) scale(1.1);
}