/* ============================================================
   Games slider
   ============================================================ */
.games-slider {
  position: relative;
  margin-top: var(--space-h2-text);
}
.games-slider__swiper {
  overflow: hidden;
  padding-block: 6px;
}
.games-slider__slide {
  width: var(--game-card-w);
  height: auto;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 12px;
  height: 100%;
}
.game-card__media {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-surface);
}
.game-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.game-card:hover .game-card__media img { transform: scale(1.05); }
.game-card__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  text-align: center;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
}
.game-card__play {
  padding: 9px 14px;
  font-size: var(--fs-small);
  width: 100%;
}

/* ---- Nav arrows ---- */
.games-slider__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.games-slider__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-gold);
  transition: background-color var(--transition), color var(--transition), opacity var(--transition);
}
.games-slider__btn:hover { background: var(--color-gold); color: var(--color-on-gold); }
.games-slider__btn.swiper-button-disabled { opacity: .4; cursor: default; }
.games-slider__btn svg { width: 22px; height: 22px; }