/**
 * Y888 Rewrite — Game Section Carousel
 *
 * Tabbed pagination for homepage game sections, matching y888.com reference.
 * Each slide shows 5 rows x 3 columns (15 cards). Horizontal swipe/drag
 * or section-header arrows navigate between slides with 0.5s animation.
 *
 * Reference specs (from compiled theme):
 * - Slide: 5 rows x 3 cols, card 2.1rem x 2.793rem, gap 0.3rem
 * - Viewport: overflow hidden, user-select none
 * - Track: transform translateX, transition-duration .5s
 * - Dragging: cursor grabbing, transition disabled during drag
 *
 * No hashed class names. Tokens from css/tokens.css.
 */

/* ============================================================
 * 1. Carousel viewport — replaces .game-grid as the visible area
 * ============================================================ */
/* When a .game-grid has been converted to a carousel, it becomes
   a plain block wrapper (the slide handles the grid layout). */
.game-grid.game-grid--carousel-ready {
  display: block;
  padding: 0;
  margin-top: 0;
  gap: 0;
  justify-content: normal;
  align-content: normal;
}

.game-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* vertical page scroll allowed, horizontal captured */
  box-sizing: border-box;
}

/* ============================================================
 * 2. Track — flex row of slides, animated via transform
 *    Reference: transition-duration .5s
 * ============================================================ */
.game-carousel__track {
  display: flex;
  flex-direction: row;
  width: 100%;
  transform: translateX(0);
  transition: transform 0.5s ease;
  cursor: grab;
  will-change: transform;
}

.game-carousel__track--dragging {
  transition: none;
  cursor: grabbing;
}

/* ============================================================
 * 3. Slide — one page of 5 rows x 3 columns (15 cards)
 *    Reference: grid-template-rows 2.793rem x5,
 *               grid-template-columns 2.1rem x3, gap 0.3rem
 * ============================================================ */
.game-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, var(--y888-card-width, 2.1rem));
  grid-template-rows: repeat(5, auto);
  gap: var(--y888-space-lg, 0.3rem);
  justify-content: center;
  align-content: start;
  padding: 0 var(--y888-space-md, 0.2rem);
  margin-top: var(--y888-space-xs, 0.1rem);
}

/* Last slide may be partial — keep grid alignment */
.game-carousel__slide > game-card {
  min-width: 0;
}

/* ============================================================
 * 4. Page indicator dots (optional, shown when >1 page)
 *    Reference uses arrows; dots are a subtle enhancement.
 *    Hidden by default to match reference exactly.
 * ============================================================ */
.game-carousel__dots {
  display: none;
  justify-content: center;
  gap: 0.08rem;
  padding: 0.1rem 0 0;
}

.game-carousel__dot {
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  background: var(--y888-text-dim, #9a9a9a);
  opacity: 0.4;
  transition: opacity 0.3s, background 0.3s;
}

.game-carousel__dot--active {
  background: var(--y888-primary, #EB05F2);
  opacity: 1;
}