/**
 * games-slider.css — BEM: games-slider
 *
 * Plain flex + native horizontal scroll, driven entirely by
 * games-slider.js (scrollBy on click) — no external carousel library,
 * so there is no CDN dependency and no risk of a JS-transform vs.
 * native-scroll conflict breaking the arrow buttons.
 */
.games-slider {
  /* Leaves clear space below the round nav buttons so they never sit on
     top of whatever content (TOC, paragraph, next section) follows. */
  padding-bottom: 1.75rem;
}

.games-slider__viewport {
  overflow: hidden;
}

.games-slider__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  scroll-behavior: smooth;
}

.games-slider__card {
  scroll-snap-align: start;
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 12rem;
  flex: 0 0 auto;
}

.games-slider__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.games-slider__media img { width: 100%; height: 100%; object-fit: cover; }

.games-slider__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  min-height: 2.5em;
}

.games-slider__play { font-size: var(--fs-small); padding: 0.65rem 1rem; }

/* Navigation controls sit centered below the carousel, not overlaid on it. */
.games-slider__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.games-slider__nav {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-btn-secondary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-base);
}
.games-slider__nav:hover { background-color: var(--color-accent-light); }
.games-slider__nav::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
}
.games-slider__nav--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.games-slider__nav--next::before { transform: rotate(45deg); margin-right: 4px; }
.games-slider__nav:hover::before { border-color: var(--color-text-on-btn); }

.games-slider__nav:disabled {
  opacity: 0.4;
  cursor: default;
}