/* ==========================================================================
   Games slider block
   ========================================================================== */
.games-slider {
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  padding-block-end: 2.5rem;
}

.games-slider__slide {
  height: auto;
}

/* Fallback layout while Swiper JS has not initialised yet (or fails to load),
   so cards never render stretched to full width. */
.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.swiper:not(.swiper-initialized) .games-slider__slide {
  flex: 0 0 auto;
  width: 44%;
  scroll-snap-align: start;
}

@media (min-width: 480px) {
  .swiper:not(.swiper-initialized) .games-slider__slide {
    width: 36%;
  }
}

@media (min-width: 768px) {
  .swiper:not(.swiper-initialized) .games-slider__slide {
    width: 23%;
  }
}

@media (min-width: 1024px) {
  .swiper:not(.swiper-initialized) .games-slider__slide {
    width: 18.5%;
  }
}

@media (min-width: 1440px) {
  .swiper:not(.swiper-initialized) .games-slider__slide {
    width: 15%;
  }
}

/* Visible horizontal scrollbar (Swiper scrollbar module) — mobile only;
   desktop/tablet use the prev/next arrow buttons instead. */
.games-slider__scrollbar.swiper-scrollbar {
  position: relative;
  height: 6px;
  background-color: var(--color-bg-dark);
  border-radius: 3px;
  margin-block-start: 1rem;
}

.games-slider__scrollbar .swiper-scrollbar-drag {
  background-color: var(--color-accent-light);
  border-radius: 3px;
}

@media (min-width: 768px) {
  .games-slider__scrollbar {
    display: none;
  }
}

.game-card {
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}

.game-card__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-bg-primary);
}

.game-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  margin-block-end: 0;
}

.game-card__play {
  margin-block-start: auto;
}

/* Round prev/next arrow navigation is hidden site-wide — the mobile
   scrollbar plus native swipe/drag are the only nav affordances. */
.games-slider__nav {
  display: none;
}

.games-slider__arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-bg-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.games-slider__arrow:hover {
  background-color: var(--color-accent-light);
  color: var(--color-text-on-light-btn);
}

.games-slider .swiper-button-disabled {
  opacity: 0.4;
}