/* Playit — the endless MARQUEE row (a shared component; driven by static/js/marquee.js).
   Markup: .marquee[data-marquee] > .marquee-track > .marquee-set (a <ul>) > .marquee-item (<li>).
   The row fills its column exactly like a .game-grid does (game_grid.css): the same number of cards
   across at each screen width, the same gap — so a sliding row and a grid beneath it line up card
   for card. Each card's width comes from the row's own width (a size container, `cqw`), so it
   needs no JavaScript to measure.

   Two knobs a page may set: --marquee-per-row (cards across) and --marquee-gap (the space between
   cards — also after the LAST card of a set, so the gap between two copies matches the rest and the
   loop has no seam). The defaults mirror .game-grid: 4 across, 3 on tablets, 2 on phones, 26px. */

.marquee {
  --marquee-per-row: 4;
  --marquee-gap: 26px;
  container-type: inline-size;
  overflow: hidden;
  padding: 8px 0 14px;               /* room for a card's hover lift and its drop shadow */
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;            /* its own layer: the slide is a pure compositor move */
}

.marquee-set {
  display: flex;
  gap: var(--marquee-gap);
  margin: 0;
  padding: 0 var(--marquee-gap) 0 0;
  list-style: none;
}

.marquee-item {
  flex: none;
  width: calc((100cqw - (var(--marquee-per-row) - 1) * var(--marquee-gap)) / var(--marquee-per-row));
}

@media (max-width: 900px) {
  .marquee { --marquee-per-row: 3; }
}
@media (max-width: 620px) {
  .marquee { --marquee-per-row: 2; }
}

/* Reduced motion: marquee.js makes no copies and runs no animation; the row becomes a normal strip
   the player swipes through. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .marquee-item { scroll-snap-align: start; }
}