/**
 * Y888 Rewrite — Game Grids + Sections
 * Fresh CSS written from scratch for the game listing sections.
 *
 * Covers:
 *   .y888-game-list-box   — outer wrapper per category section
 *   .y888-game-list       — scroll/slide container (Hot carousel etc.)
 *   .y888-game-list-design— design variant hook
 *   .game-grid            — 3-column card grid
 *   section-header        — element + light-DOM mirror classes
 *   category-tabs         — page-level positioning
 *
 * Dimensions referenced from compiled theme CSS, rewritten clean.
 * Colors/spacing come from css/tokens.css. No hashed class names.
 */

/* ============================================================
 * 1. Section wrapper — one per game category
 *    (Hot, Mini Games, Slot, Cards, Fishing, Live, Sports)
 * ============================================================ */
.y888-game-list-box {
  padding-top: var(--y888-space-md);
  /* Reference: NO gap between Hot section end and next section start */
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.y888-game-list-box:first-of-type {
  padding-top: 0;
}

/* ============================================================
 * 2. Game list slide container
 *    Hot section uses this as a 2-row x 3-col carousel viewport.
 * ============================================================ */
.y888-game-list {
  position: relative;
  width: 100%;
  opacity: 1;
  box-sizing: border-box;
}

.y888-game-list-design {
  /* design variant hook — layout identical, theme may vary */
}

/* ============================================================
 * 3. Card grid — 3 columns, gap matches reference
 *    Card width driven by --y888-card-width (2.1rem).
 * ============================================================ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--y888-card-width, 2.1rem));
  gap: var(--y888-space-lg);
  justify-content: center;
  align-content: start;
  padding: 0 var(--y888-space-md);
  margin-top: var(--y888-space-xs);
  box-sizing: border-box;
}

/* Hot carousel shows 2 rows; extra rows scroll via arrows */
.y888-game-list--carousel .game-grid {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: none;
  grid-auto-columns: var(--y888-card-width, 2.1rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: start;
}

.y888-game-list--carousel .game-grid::-webkit-scrollbar {
  display: none;
}

/* ============================================================
 * 4. Section header — light-DOM mirror
 *    (Web Component renders shadow DOM; these cover plain markup)
 * ============================================================ */
.y888-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.52rem;
  padding: 0 var(--y888-space-md);
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.y888-section-header__title {
  display: flex;
  align-items: center;
  min-height: 0.52rem;
  min-width: 0;
  color: var(--y888-text);
}

.y888-section-header__icon {
  width: 0.52rem;
  height: 0.52rem;
  margin-right: 0.05rem;
  object-fit: contain;
  flex-shrink: 0;
}

.y888-section-header__text {
  font-size: 0.3rem;
  font-weight: var(--y888-font-weight);
  color: var(--y888-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.y888-section-header__actions {
  display: flex;
  align-items: center;
  height: 0.46rem;
  border-radius: 1rem;
  border: thin solid var(--y888-border);
  overflow: hidden;
  flex-shrink: 0;
}

.y888-section-header__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.6rem;
  height: 100%;
  font-size: 0.16rem;
  color: var(--y888-text);
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.y888-section-header__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.y888-section-header__all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 100%;
  font-size: var(--y888-font-size-sm);
  color: var(--y888-text);
  text-decoration: none;
  border-left: thin solid var(--y888-border);
  border-right: thin solid var(--y888-border);
}

/* ============================================================
 * 5. Category tabs — page-level placement below header
 * ============================================================ */
.y888-category-tabs-wrap {
  position: relative;
  width: 100%;
  background: var(--y888-bg);
  z-index: 5;
}

/* Sticky tabs under the site header on scroll */
.y888-category-tabs-wrap--sticky {
  position: sticky;
  top: 0;
}

/* ============================================================
 * 6. Mini jackpot badge row inside game list (Hot section)
 * ============================================================ */
.y888-game-list__jackpot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--y888-space-xs) var(--y888-space-md);
  font-size: var(--y888-font-size-sm);
  color: var(--y888-warning);
}

/* ============================================================
 * 7. Empty state (no games in category)
 * ============================================================ */
.y888-game-list__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  color: var(--y888-text-dim);
  font-size: var(--y888-font-size-md);
}

/* ============================================================
 * 8. Responsive — card width scales with viewport
 * ============================================================ */
@media (max-width: 750px) {
  .game-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--y888-space-sm);
  }

  .y888-game-list--carousel .game-grid {
    grid-auto-columns: calc((100vw - 0.6rem) / 3.2);
  }
}

/* ============================================================
 * 9. Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .game-grid,
  .y888-game-list--carousel .game-grid {
    scroll-behavior: auto;
  }
}

/* ============================================================
 * 10. RTL
 * ============================================================ */
[dir="rtl"] .y888-section-header__icon {
  margin-right: 0;
  margin-left: 0.05rem;
}

[dir="rtl"] .y888-section-header__all {
  border-left: thin solid var(--y888-border);
  border-right: thin solid var(--y888-border);
}

/* Custom element display fix */
game-card {
  display: block;
  width: var(--y888-card-width, 2.1rem);
  min-width: 0;
}