/* BOOST GAMES FESTIVE SEASON. Everything here only applies under
   html.festive, which /festive.js sets until 7 January 2027. Scope every rule
   to the brief (.select): the shop's game list is also a `.grid`. */

/* The festive cards carry a hat and holly inside the same box, which shrinks
   the card itself; give them more room so they read big. */
.festive .select { --bg-card-max: min(210px, 29cqh); }
@media (max-width: 595px) {
  /* The phone grid hard-codes its column width; widen it to match. Sized by
     the width, not the height, so the cards fill the screen side to side
     (owner, 22 Oct 2026); the area scrolls to the fifth on short phones. */
  .festive .select .grid { grid-template-columns: repeat(2, min(170px, 45cqw)); gap: 1cqh 3cqw; padding: .6cqh 0 3cqh; }
  .festive .select .card:nth-child(5) { width: min(170px, 45cqw); }
}

/* Full size at rest (the site shrinks unpicked cards to 94%); picked still pops. */
.festive .select .card:not([aria-checked="true"]) { transform: none; }

/* START's festive art spends its edges on a hat and holly, so its button is
   about three quarters the height of the plain SHOP GAMES art at the same
   width. Size SHOP GAMES down to match and centre the pair on one line. */
/* Sized against the screen (cqw), not the row: the row shrink-wraps its two
   buttons, so percentages here would be circular. */
.festive .start__ctas--pair { align-items: center; }
.festive .start__ctas.start__ctas--pair .img-btn--start { width: min(50cqw, 290px); }
.festive .start__ctas.start__ctas--pair .img-btn--shop { width: min(37.5cqw, 218px); }