/* Hero game icons — in the column, where the capture form used to be.
 *
 * v2/v3 placed these absolutely on a ring around the lockup, which is how
 * smoke.games arranges its product cards. That arrangement existed to fill the
 * space either side of a headline that had a form under it. With the form gone
 * the tiles ARE the middle of the page, so they sit in normal flow directly
 * under the subline and the ring is retired.
 *
 * One shell for all four, carried over from v2: no border, no coloured offset
 * shadow, one soft drop shadow. The game art is the only colour in the row.
 */

.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);
  /* Narrower than the lockup on purpose. The row used to track the headline's
     own width (min(1010px,88vw)), which made each icon about 232px and gave
     the four of them the same visual weight as the type. */
  width:min(686px,60vw);
}
/* Five tiles (v8 adds Motion Boxing after 67 Speed): widen the row so each icon keeps the
   ~140px it had with four, instead of shrinking to ~116px. */
.game-tiles{ width:min(840px,72vw); }

.game-tile{
  position:relative; inset:auto;
  flex:1 1 0; min-width:0; max-width:152px;
  animation:game-tile-float 7s ease-in-out infinite;
}
/* A little rotation so the row reads as four objects rather than a strip of
   equal boxes. Small -- at the ring's 8-14deg they looked scattered once they
   were side by side. */
.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--box  { transform:rotate(-2.2deg); animation-delay:-5s; } /* 67 Speed (its own file) tilts +2.4 */
.game-tile--soon { transform:rotate(2.4deg);  animation-delay:-1s; }

/* The games are app icons now, not cards. The icon IS the tile: no white
   shell behind it, no label strip inside it. The <a> stops being the visible
   object and just wraps the art and its caption, so it must not clip -- the
   radius and the shadow move onto the <img> itself. */
.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));
}
.game-tile--soon 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))
         drop-shadow(0 0 13px rgba(173,138,255,.68))
         drop-shadow(0 0 32px rgba(150,110,245,.48));
}
a.game-tile__face:active{ transform:translateY(-2px); }
a.game-tile__face:focus-visible{ outline:3px solid #fff; outline-offset:6px; border-radius:24%; }

/* The icons arrive as RGBA with the rounded square already cut out, so there
   is no border-radius here and there must not be: rounding on top of the alpha
   would clip its own antialiased rim and leave a hard edge.
   
   For the same reason the shadow is a filter, not a box-shadow. box-shadow
   draws the element's BOX, which would put a rectangle behind a shape with
   transparent corners. drop-shadow follows the alpha. */
.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;
}

/* The four icons are NOT drawn to the same margin, so at one CSS width two of
   them render visibly larger. Measured from each file's alpha, the icon body
   fills its own box by:
       rail 96.7%   moon 95.8%   rally 99.3%   boxing 99.7%   motions 99.4%
   Scaling each down to the loosest of them (moon, 95.8%) makes the four BODIES
   the same size on screen, which is what the eye compares. Re-measure these if
   any icon is redrawn; they are a property of the art, not a taste call. */
.game-tile--rail  .game-tile__art{ width:99.1%; }
.game-tile--moon  .game-tile__art{ width:100%;  }
.game-tile--rally .game-tile__art{ width:96.5%; }
.game-tile--box   .game-tile__art{ width:96.1%; }
.game-tile--soon  .game-tile__art{
  width:96.4%;
  /* The Motions icon carries a glow the games do not: it is the one tile that
     is an offer rather than a game, and the row gives it no other emphasis
     now that it looks like the rest. Lilac rather than white -- a white glow
     around a violet icon reads as a halo of fog; a tint from inside the icon's
     own colour family reads as the icon being lit.
     The full filter is restated because filters replace, they do not merge. */
  filter:drop-shadow(0 11px 16px rgba(18,10,38,.20))
         drop-shadow(0 3px 5px rgba(18,10,38,.11))
         drop-shadow(0 0 10px rgba(173,138,255,.55))
         drop-shadow(0 0 26px rgba(150,110,245,.38));
}

/* The caption sits under the icon, on the sky, instead of in a strip inside
   the card. */
.game-tile__label{
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  padding:11px 2px 0; background:none;
  font-size:13px; font-weight:600; letter-spacing:-.01em; color:#fff;
  /* The row sits on the cloud line, where the sky runs from mid blue to near
     white. White captions vanish over the bright cloud -- the Rail Runner one
     did exactly that. A shadow is the right fix rather than a darker caption:
     it costs nothing over the blue and rescues the text over the white.
     In --lo-rgb, never --ink: an ink-coloured shadow behind light type reads
     as a glow. */
  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);
}
/* White, not the .72 it was -- at this size a knocked-back glyph read as grey
   rather than as a quieter white. */
.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));
}
/* Gold, not white like the play triangles. It is the one glyph that marks an
   offer rather than a game, and at 15px a colour change carries that further
   than any size change would. The shadow under it is warmer than the white
   glyphs' for the same reason -- a neutral shadow under gold greys it. */
.game-tile__glyph--crown{
  width:15px; height:15px; margin-top:-1px;
  color:#FFC53D;
  filter:drop-shadow(0 1px 2px rgba(74,42,8,.55));
}

/* Motions carries two lines: the name with its crown, then the offer under it. */
.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;
}

/* No Founder Pass card rules any more -- the fourth tile is an app icon like
   the other three and takes the same treatment. founder-pass-v1.css still
   styles the expanding sheet it opens, which is untouched. */

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

/* Phones: three up, then two centred under them (3 + 2), at about 96px an icon. The 2 x 2 + 1 grid it
   replaces made each icon ~157px, so the five filled the whole first screen and the 3D blimps had no sky
   left to fly in (their near lanes are measured from the free space above the headline and below the
   tiles; see sky-ads-3d-v3.js). At this size the hero reads like the desktop one: type, a row of app
   icons, and open sky with blimps around them. */
@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__face{ border-radius:18px; }
  .game-tile__label{ padding-top:7px; gap:5px; font-size:12px; 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; }
}

/* Flappy ships full-bleed square art; round only this icon. */
.game-tile--flappy{transform:rotate(1.6deg);animation-delay:-3s}
.game-tile--flappy .game-tile__art{width:95.8%;border-radius:24%}
@media(min-width:761px) and (min-aspect-ratio:3/4){.game-tiles{width:min(980px,78vw)}}

/* A quick specular sweep runs across the row in reading order (all six within a second), then rests.
   Mask against the original image alpha so light never paints transparent corners. */
.game-tile__visual{display:block;position:relative;width:var(--tile-art-width,100%);aspect-ratio:1;margin-inline:auto}
.game-tile .game-tile__visual .game-tile__art{width:100%}
.game-tile--rail{--tile-art-width:99.1%}
.game-tile--rally{--tile-art-width:96.5%}
.game-tile--speed{--tile-art-width:98.2%}
.game-tile--box{--tile-art-width:96.1%}
.game-tile--soon{--tile-art-width:96.4%}
.game-tile--flappy{--tile-art-width:95.8%}
.game-tile--flappy .game-tile__visual{border-radius:24%}
.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}}

.game-tile--flappy .game-tile__visual::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1.5px 2px #ffffffa6,inset 0 -2px 4px #291c5d33;
}