/* Play Page Styles (browse/search games) */

/* The page is built like the landing, build, and profile pages: a full-bleed
   .landing scroll region between the fixed header/footer (shared shell in
   common/style.css -- including the html/body scroll lock, applied
   automatically via :has). Only the browse panel below is play-specific. */

/* The cross-document navigation cross-fade is universal -- every
   `@view-transition` rule behind it lives in common/style.css. */

/* ====================
   BROWSE PANEL (genre + sort + search drive one shared results grid)
   ==================== */

/* The browse-filter controls/search/grid framework and the 2x2 hero
   spotlight are shared and live in common/Section.css; only the
   gallery's five-row skeleton reveal below is games-specific. */

/* The Game Gallery opens on five rows (GRID_INITIAL_ROWS, the site-wide
   default in Section.js), so its loading skeleton fills five rows too.
   Section.css reveals a single skeleton row (one tile per column, gated by
   the grid's panel width); these overrides reveal enough tiles for five FULL
   rows at each column count -- accounting for the 2x2 hero (>=3 cols), which
   covers four cells, so the counts step down rather than a plain 5x. Loaded
   after Section.css, so equal-specificity rules win. Ships 27 skeleton tiles
   (ProjectBrowse resultsSkeleton) -- the 6-column maximum (hero + 26). */
/* 2 columns (never fewer, see .project-grid), no hero: 2 x 5 = 10 tiles */
.browse-filter-grid > .project-card-skeleton:nth-child(-n + 10) {
  display: flex;
}
.browse-filter-grid > .project-card-skeleton:nth-child(n + 11) {
  display: none;
}

/* 3 columns: the 2x2 hero + 2 beside + 3x3 below = 12 tiles (five full rows) */
@container (min-width: 620px) {
  .browse-filter-grid > .project-card-skeleton:nth-child(-n + 12) {
    display: flex;
  }
  .browse-filter-grid > .project-card-skeleton:nth-child(n + 13) {
    display: none;
  }
}

/* 4 columns: the 2x2 hero + 4 beside + 3x4 below = 17 tiles (five full rows) */
@container (min-width: 830px) {
  .browse-filter-grid > .project-card-skeleton:nth-child(-n + 17) {
    display: flex;
  }
  .browse-filter-grid > .project-card-skeleton:nth-child(n + 18) {
    display: none;
  }
}

/* 5 columns: the 2x2 hero + 6 beside + 3x5 below = 22 tiles (five full rows) */
@container (min-width: 1040px) {
  .browse-filter-grid > .project-card-skeleton:nth-child(-n + 22) {
    display: flex;
  }
  .browse-filter-grid > .project-card-skeleton:nth-child(n + 23) {
    display: none;
  }
}

/* 6 columns: the 2x2 hero + 8 beside + 3x6 below = 27 tiles (five full rows).
   The last step -- a seventh column wants 1460px of grid and the content cap
   gives 1348. */
@container (min-width: 1250px) {
  .browse-filter-grid > .project-card-skeleton:nth-child(-n + 27) {
    display: flex;
  }
}

/* A grid that opens on three rows (data-initial-rows, the home page) ships
   fifteen tiles and reveals three rows' worth per column count instead:
   2 x 3 = 6; hero + 2 beside + 3 below = 6; hero + 4 + 4 = 9; hero + 6 + 5
   = 12; hero + 8 + 6 = 15. Each rule outranks its five-row twin above by the
   attribute. */
.browse-filter-grid[data-initial-rows='3'] > .project-card-skeleton:nth-child(-n + 6) {
  display: flex;
}
.browse-filter-grid[data-initial-rows='3'] > .project-card-skeleton:nth-child(n + 7) {
  display: none;
}

@container (min-width: 830px) {
  .browse-filter-grid[data-initial-rows='3'] > .project-card-skeleton:nth-child(-n + 9) {
    display: flex;
  }
  .browse-filter-grid[data-initial-rows='3'] > .project-card-skeleton:nth-child(n + 10) {
    display: none;
  }
}

@container (min-width: 1040px) {
  .browse-filter-grid[data-initial-rows='3'] > .project-card-skeleton:nth-child(-n + 12) {
    display: flex;
  }
  .browse-filter-grid[data-initial-rows='3'] > .project-card-skeleton:nth-child(n + 13) {
    display: none;
  }
}

@container (min-width: 1250px) {
  .browse-filter-grid[data-initial-rows='3'] > .project-card-skeleton:nth-child(-n + 15) {
    display: flex;
  }
}

/* Continue the skeleton shimmer stagger past the shared :nth-child(5) cap
   (Section.css) so the gallery's tiles 6-22 don't shimmer in sync with
   the first tile. Capped at the tile-5 delay so later tiles still start within
   the skeleton's lifetime. */
.browse-filter-grid > .project-card-skeleton:nth-child(n + 6) {
  animation-delay: 0.5s;
}