/* =====================================================================
   Site game, the small part (only while site.game is switched on; layout() loads it on every page but the
   checkout steps). The header Play button, the Play row in the mobile menu, the footer's "Top players" box, and
   the header fit rules that make room for one more button. The game's own styles (game.css) load after Play.
   Behaviour: assets/js/game-boot.js. Everything here needs JavaScript, so it stays hidden without it.
   ===================================================================== */

html:not(.js) :is([data-game-play], [data-game-board]) { display: none !important; }

/* ------------------------------------------------------------ header button */
/* an .icon-btn like Glow and the cart (its 44px touch target comes from base.css); the gamepad is a little wider */
.game-play-btn .i { width: 20px; height: 20px; }

/* Header fit with one more button (spec 3.2): tighter gaps on small phones, no Play button in the header on the
   narrowest ones (the menu row stays), and no social icon at laptop widths just above the menu button's (it is still
   in the footer and the menu), the same range where base.css gives the nav links a little less padding. */
@media (max-width: 400px) {
  .site-header__inner { gap: 12px; }
  .site-header__actions { gap: 4px; }
}
@media (max-width: 340px) {
  .site-header__actions .game-play-btn { display: none; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .site-header__actions > a.icon-btn.hide-sm { display: none; }
}

/* ------------------------------------------------------- mobile menu row */
/* looks and enters like the menu's links (base.css .mobile-menu li a) */
.game-menu-play {
  display: block; width: 100%; padding: 14px 0; text-align: left;
  font-family: var(--font-display); font-size: clamp(34px, 9vw, 52px); letter-spacing: -.03em; line-height: 1.05;
  animation: rise .7s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 120ms);
}

/* ---------------------------------------------------- footer high scores */
/* filled and shown by game-boot.js once the board has at least 3 scores */
.game-mini {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px;
  margin-bottom: 32px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink);
}
.site-footer .game-mini__title { margin: 0; }
.game-mini__list {
  list-style: none; padding: 0; margin: 0 auto 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 28px; counter-reset: game-rank;
}
.game-mini__list li { display: inline-flex; align-items: baseline; gap: 10px; counter-increment: game-rank; }
.game-mini__list li::before { content: counter(game-rank); font-size: 12px; font-weight: 800; color: var(--muted); }
.game-mini__list b {
  font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: .06em; line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.game-mini__list span { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.game-mini__play { flex: none; }
@media (max-width: 520px) {
  .game-mini { flex-direction: column; align-items: flex-start; }
  .game-mini__list { margin: 0; flex-direction: column; gap: 6px; }
}

/* ------------------------------------------------------- loading the game */
/* game-boot.js: the pressed Play button while the game downloads (aria-busy): a small spinning ring, in place of the
   header button's gamepad, after the words on the others. The header button draws it with ::before, in the gamepad's
   grid cell, because its ::after is the 44px touch target (base.css, absolutely placed); the others use ::after,
   since a .btn's ::before is its hover fill. */
[data-game-play].is-loading { cursor: progress; }
[data-game-play]:not(.game-play-btn).is-loading::after, .game-play-btn.is-loading::before {
  content: ""; display: inline-block; flex: none; width: 16px; height: 16px; margin-left: 10px; vertical-align: middle;
  border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: game-boot-spin .8s linear infinite;
}
.game-play-btn > .i, .game-play-btn.is-loading::before { grid-area: 1 / 1; }
.game-play-btn.is-loading::before { margin: 0; }
.game-play-btn.is-loading > .i { visibility: hidden; }
.btn.game-mini__play.is-loading::after { margin-left: 0; }   /* .btn already has a gap */
@keyframes game-boot-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  [data-game-play]:not(.game-play-btn).is-loading::after, .game-play-btn.is-loading::before {
    animation: none; border-right-color: color-mix(in srgb, currentColor 30%, transparent);
  }
}

/* ------------------------------------------------------ load failure note */
/* game-boot.js: when the game cannot load (offline) or start, a short note by the Play button that was pressed; it
   goes in empty (a live region screen readers know) and gets its words a moment later */
.game-boot-note {
  position: fixed; z-index: 9003; max-width: min(320px, calc(100vw - 24px));
  padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--bg);
  font: 700 14px/1.35 var(--font-sans); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.game-boot-note:empty { opacity: 0; }
/* centred: at the top of the page (after a warp), or under the button on a narrow screen */
.game-boot-note--top { top: 84px; }
.game-boot-note--top, .game-boot-note--mid { left: 50%; translate: -50% 0; width: max-content; }