/* Godz Casino — games slider (native horizontal scroll-snap, no external JS dependency) */
.games-slider {
  position: relative;
}
.games-slider__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-cool-accent) transparent;
}
.games-slider__track::-webkit-scrollbar { height: 6px; }
.games-slider__track::-webkit-scrollbar-track { background: transparent; }
.games-slider__track::-webkit-scrollbar-thumb { background: var(--color-cool-accent); }

.game-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
  background: var(--color-card-bg);
  padding: 0.75rem 0.75rem 1rem;
  clip-path: var(--clip-corner);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.game-card__img {
  width: 100%;
  /* The width/height HTML attributes (267x400) are presentational hints that
     set an actual `height` value with just-above-UA-stylesheet priority —
     since this rule never declared its own `height`, that hint was winning
     and pinning every card image to 400px tall regardless of card width,
     leaving huge empty letterbox bars above/below the art. Declaring
     height:auto here beats the hint, so aspect-ratio drives both dimensions
     as intended and the artwork fills the card edge-to-edge. */
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: var(--color-bg-dark);
}
.game-card__name {
  color: var(--color-white);
  font-weight: var(--fw-btn);
  font-size: var(--fs-small);
  text-align: center;
  margin: 0;
}
.game-card__cta { margin-top: auto; }

.games-slider__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}
.games-slider__prev,
.games-slider__next {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--color-cool-accent);
  color: var(--color-white);
  clip-path: var(--clip-corner-sm);
  transition: background var(--transition-fast);
}
.games-slider__prev:hover,
.games-slider__next:hover { background: var(--color-accent-bg); }
.games-slider__prev.is-disabled,
.games-slider__next.is-disabled { opacity: 0.4; pointer-events: none; }

@media (min-width: 480px) {
  .game-card { width: 170px; }
}
@media (min-width: 768px) {
  .game-card { width: 195px; }
}
@media (min-width: 1024px) {
  .game-card { width: 210px; }
}