/* Hero game icons (the game picker). v11, not an edit to v10: /assets/* is
 * cached immutable for a year, so a changed sheet only ships under a new name.
 *
 * What changed from v10:
 *   * Fluid size. The icons were capped at 152px (desktop) and 112px (phones and
 *     portrait tablets), and big screens got a stepped transform:scale(1.16 /
 *     1.30). So from ~430px to ~1500px wide they sat at a fixed size in an
 *     ever larger window and looked small and weak; a 768px tablet showed 104px
 *     icons. One size, --tile, now drives the row (index.html and sponsor.css
 *     read it): on phones it is a third of the row, the row growing to 600px; on
 *     desktop it follows the width AND the height, so the panel still fits above
 *     the fold. Captions and the "new skins" badge scale with the icon
 *     (container query units), so a large icon never carries 12px type.
 *   * One frame for all six. The art is rebuilt by tools/build-game-icons.py at
 *     256/512/1024 (srcset) with every icon body at 94% of its square, so the
 *     per-icon width fudges of v7-v10 are gone and each icon is width:100%.
 *     Flappy Arms is now cut to the same rounded square as the rest instead of
 *     a CSS border-radius over a full-bleed square.
 *   * game-tile-67-speed-v1.css is folded in.
 *   * While an icon decodes its square shows a soft glass placeholder, never an
 *     empty box.
 */

.game-tiles{
  position:relative; inset:auto; z-index:auto;
  list-style:none; margin:clamp(22px,3.4vh,42px) 0 0; padding:0;
  display:flex; justify-content:center; align-items:stretch;
  gap:clamp(14px,1.7vw,26px);
  width:min(840px,72vw);
}
@media(min-width:761px) and (min-aspect-ratio:3/4){ .game-tiles{ width:min(980px,78vw); } }

/* The size every homepage layout reads (index.html's flex rows, sponsor.css's
   grid). Desktop: 15vw, but never so tall that two rows + captions + the Newly
   bar run under the fold or onto "Fly a blimp", and never below the 152px it
   used to be fixed at, nor above 240px. The height term is measured: the
   panel is ~2.13 x --tile + 162px tall and gets about 100svh - 440px (title-
   sponsor bar, sponsor.css's hero padding, the pill) -- so 166px at 800px
   tall, 212px at 900, 240px at 1080. */
html:is(:not([data-sponsor]),[data-current-homepage]) body #hero .game-tiles{
  --tile-gap:clamp(14px,1.8vw,28px);
  --tile:clamp(152px, min(15vw, (100vh - 440px) * .46), 240px);
  --tile:clamp(152px, min(15vw, (100svh - 440px) * .46), 240px);
  --tiles-w:calc(3 * var(--tile) + 2 * var(--tile-gap));
}
/* Phones and portrait tablets: three across, the row filling the screen up to
   600px (the old cap was 340px, so anything wider than a phone got phone-sized
   icons), held back only on short screens. */
@media (max-width:760px), (max-aspect-ratio:3/4){
  html:is(:not([data-sponsor]),[data-current-homepage]) body #hero .game-tiles{
    --tile-gap:clamp(12px,3vw,22px);
    --tiles-w:min(calc(100vw - 28px), 600px, max(340px, 150vh - 620px));
    --tiles-w:min(calc(100vw - 28px), 600px, max(340px, 150svh - 620px));
    --tile:calc((var(--tiles-w) - 2 * var(--tile-gap)) / 3);
  }
}

.game-tile{
  position:relative; inset:auto;
  flex:1 1 0; min-width:0; max-width:152px;
  container-type:inline-size;
  animation:game-tile-float 7s ease-in-out infinite;
}
/* A little rotation so the row reads as objects rather than a strip of equal
   boxes. */
.game-tile--rail  { transform:rotate(-2.5deg); }
.game-tile--moon  { transform:rotate(1.8deg);  animation-delay:-2s; }
.game-tile--rally { transform:rotate(-1.6deg); animation-delay:-4s; }
.game-tile--speed { transform:rotate(2.4deg);  animation-delay:-1s; }
.game-tile--flappy{ transform:rotate(1.6deg);  animation-delay:-3s; }
.game-tile--box   { transform:rotate(-2.2deg); animation-delay:-5s; }
.game-tile--soon  { transform:rotate(2.4deg);  animation-delay:-1s; }

/* The icon IS the tile: the <a> just wraps the art and its caption, so it must
   not clip -- the shadow lives on the <img>. */
.game-tile__face{
  display:block; position:relative; overflow:visible;
  border:0; border-radius:0; background:none; box-shadow:none;
  color:#fff; text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
a.game-tile__face:hover{ transform:translateY(-6px); }
a.game-tile__face:hover .game-tile__art{
  filter:drop-shadow(0 16px 22px rgba(18,10,38,.26))
         drop-shadow(0 4px 7px rgba(18,10,38,.14));
}
a.game-tile__face:active{ transform:translateY(-2px); }
a.game-tile__face:focus-visible{ outline:3px solid #fff; outline-offset:4px; border-radius:24%; }

/* The art is RGBA with the rounded square already cut out, so no border-radius
   (it would clip the antialiased rim) and the shadow is a drop-shadow, which
   follows the alpha. Every file has the same 3% margin, so width:100% puts all
   six bodies at the same size. */
.game-tile__visual{
  display:block; position:relative; width:100%; aspect-ratio:1; margin-inline:auto;
}
.game-tile__art{
  display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain;
  margin-inline:auto;
  filter:drop-shadow(0 11px 16px rgba(18,10,38,.20))
         drop-shadow(0 3px 5px rgba(18,10,38,.11));
  transition:filter .22s ease, opacity .25s ease;
}
.game-tile .game-tile__visual .game-tile__art{ width:100%; }

/* Until the art is decoded (index.html holds it at opacity 0), the square is a
   soft glass tile where the icon will be, so a slow phone never shows a label
   over an empty box. */
html.hero-images-decoding #hero .game-tile__visual:has(> .game-tile__art:not(.is-decoded))::before{
  content:""; position:absolute; inset:3%; border-radius:23%; pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.30) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.30) 70%) 100% 0 / 300% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(18,10,38,.10);
  animation:game-tile-loading 1.4s ease-in-out infinite;
}
@keyframes game-tile-loading{ to{ background-position:0 0; } }

/* The caption sits under the icon, on the sky, and grows with it (cqi = 1% of
   the tile's width). */
.game-tile__label{
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  padding:clamp(8px,6cqi,14px) 2px 0; background:none;
  font-size:13px; font-size:clamp(13px, 8cqi, 17px);
  font-weight:600; letter-spacing:-.01em; color:#fff;
  /* White captions vanish over the bright cloud; a shadow rescues them there
     and costs nothing over the blue. */
  text-shadow:0 1px 2px rgba(14,8,32,.60), 0 2px 8px rgba(14,8,32,.45), 0 0 22px rgba(14,8,32,.35);
}
.game-tile__play{ display:inline-flex; align-items:center; color:#fff; }
.game-tile__glyph{
  display:block; width:12px; height:12px;
  filter:drop-shadow(0 1px 2px rgba(14,8,32,.45));
}
.game-tile__glyph--crown{
  width:15px; height:15px; margin-top:-1px;
  color:#FFC53D;
  filter:drop-shadow(0 1px 2px rgba(74,42,8,.55));
}
.game-tile__label--stacked{ flex-direction:column; align-items:center; gap:1px; }
.game-tile__name{ display:inline-flex; align-items:center; gap:5px; }
.game-tile__sub{ font-size:10.5px; font-weight:500; color:#fff; opacity:.9; }

/* "new skins" (motions-locker-nav-v1.css) scales with the icon too. */
.game-tile .game-tile__badge{ font-size:clamp(9px, 7cqi, 13px); }
.game-tile .game-tile__badge svg{ width:1em; height:1em; }

@keyframes game-tile-float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -7px } }

@media (max-width:760px), (max-aspect-ratio:3/4){
  .game-tiles{
    display:flex; flex-wrap:wrap; justify-content:center;
    column-gap:clamp(12px,4vw,20px); row-gap:6px;
    width:min(340px,calc(100% - 40px));
    margin-top:clamp(18px,2.6vh,28px);
  }
  .game-tile{
    flex:0 0 calc((100% - 2 * clamp(12px,4vw,20px)) / 3);
    max-width:112px;
  }
  .game-tile__label{ gap:5px; font-size:12px; font-size:clamp(12px, 9.5cqi, 16px); white-space:nowrap; }
  .game-tile__glyph{ width:10px; height:10px; }
  @keyframes game-tile-float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -4px } }
}
@media (max-width:360px){
  .game-tiles{ column-gap:10px; width:calc(100% - 28px); }
  .game-tile{ flex-basis:calc((100% - 20px) / 3); }
  .game-tile__label{ font-size:11px; gap:4px; }
}
@media (prefers-reduced-motion:reduce){
  .game-tile{ animation:none; }
  .game-tile__face{ transition:none; }
  html.hero-images-decoding #hero .game-tile__visual::before{ animation:none; }
}

/* A quick specular sweep runs across the row in reading order (all six within
   a second), then rests. Masked by the icon's own alpha (--tile-mask, set per
   tile in index.html) so light never paints the transparent corners. */
.game-tile__visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  -webkit-mask-image:var(--tile-mask);mask-image:var(--tile-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;mask-mode:alpha;
  background:linear-gradient(110deg,transparent 43%,#ffffff0a 46%,#ffffff70 50%,#ffffff0a 54%,transparent 57%) 100% 0 / 300% 100% no-repeat;
  opacity:0;animation:game-tile-shine 5s ease-in-out infinite;
  animation-delay:calc(.2s + var(--shine-order,0) * .12s);
}
.game-tile:nth-child(1){--shine-order:0}
.game-tile:nth-child(2){--shine-order:1}
.game-tile:nth-child(3){--shine-order:2}
.game-tile:nth-child(4){--shine-order:3}
.game-tile:nth-child(5){--shine-order:4}
.game-tile:nth-child(6){--shine-order:5}
@keyframes game-tile-shine{
  0%{background-position:100% 0;opacity:0}
  1%{opacity:1}
  7%{background-position:0% 0;opacity:1}
  8%,100%{background-position:0% 0;opacity:0}
}
@media(prefers-reduced-motion:reduce){.game-tile__visual::after{animation:none;opacity:0}}