/* ============================================================
   games-slider — Top-Spiele als Swiper-Karussell
   ============================================================ */

.games {
  margin-bottom: var(--space-section);
}

.games__head {
  margin-bottom: var(--space-h2-text);
}

.games__slider {
  position: relative;
  padding-inline: 0;
}

.games__card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  clip-path: var(--clip-corner);
  overflow: hidden;
  height: 100%;
}

.games__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-card-2);
}

.games__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  flex: 1;
}

.games__name {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

.games__play {
  margin-top: auto;
  padding: 0.5rem 1rem;
  font-size: var(--fs-small);
}

/* Swiper Navigation & Pagination */
.games .swiper {
  padding-bottom: 2.5rem;
}

.games .swiper-button-next,
.games .swiper-button-prev {
  color: var(--color-heading);
  width: 40px;
  height: 40px;
  background: rgba(15, 22, 23, 0.85);
  clip-path: var(--clip-corner);
  top: 42%;
}

.games .swiper-button-next::after,
.games .swiper-button-prev::after {
  font-size: 18px;
  font-weight: 700;
}

.games .swiper-pagination-bullet {
  background: var(--color-cold);
  opacity: 1;
}

.games .swiper-pagination-bullet-active {
  background: var(--color-heading);
}