/* Additive game tiles only. Keep the existing homepage art, copy and forms. */
.game-tiles { position:absolute; inset:0; z-index:8; list-style:none; margin:0; padding:0; pointer-events:none; }
.game-tile { position:absolute; width:clamp(146px,13vw,190px); pointer-events:auto; --edge:#b798dc; animation:game-tile-float 7s ease-in-out infinite; }
.game-tile--rail { left:3.5%; top:calc(50% - 250px); transform:rotate(-7deg); }
.game-tile--moon { right:3.5%; top:calc(50% - 250px); transform:rotate(7deg); --edge:#abb5d7; animation-delay:-2s; }
.game-tile--rally { left:5%; bottom:40px; transform:rotate(5deg); --edge:#d5a58f; animation-delay:-4s; }
.game-tile--soon { right:5%; bottom:40px; transform:rotate(-6deg); --edge:#a4c9bb; animation-delay:-1s; }
.game-tile__face { display:block; position:relative; overflow:hidden; border:2px solid #ffffffb3; border-radius:27px; background:#e5d9f5; color:#38265f; text-decoration:none; box-shadow:-6px 7px 0 var(--edge),0 18px 32px #30205228; transition:transform .2s ease,box-shadow .2s ease; }
a.game-tile__face:hover { transform:translateY(-5px) rotate(2deg); box-shadow:-6px 9px 0 var(--edge),0 24px 35px #30205235; }
a.game-tile__face:active { transform:translateY(-1px); }
a.game-tile__face:focus-visible { outline:3px solid #5631a3; outline-offset:6px; }
.game-tile__art { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.game-tile__label { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:13px 11px; font-size:13px; font-weight:700; background:#faf7ff; }
.game-tile__play { display:flex; align-items:center; gap:4px; font-size:10px; font-weight:600; color:#603aa5; }
.game-tile--soon .game-tile__face { aspect-ratio:1; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#d4eee2; color:#315948; }
.game-tile__placeholder { width:65px; height:65px; margin-bottom:8px; }
.game-tile__soon-title { font-size:15px; font-weight:600; }
.game-tile__soon-note { font-size:11px; margin-top:5px; }
@keyframes game-tile-float { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }
@media (min-width:1600px) { .game-tile { width:210px; } .game-tile--rail,.game-tile--moon { top:calc(50% - 280px); } .game-tile--rally,.game-tile--soon { bottom:70px; } }
/* Narrow screens cannot fit cards alongside the existing full-width headline.
   Put the same tiles after the original signup in normal reading order. */
@media (max-width:1150px) {
  #hero { position:relative; }
  .game-tiles { position:relative; inset:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; width:min(820px,calc(100% - 64px)); margin:0 auto 40px; flex:none; }
  .game-tile { position:relative; inset:auto; width:100%; }
  .game-tile--soon .game-tile__face { height:100%; aspect-ratio:auto; min-height:150px; }
}
@media (max-width:640px), (max-aspect-ratio:3/4) {
  #hero { position:relative; }
  .game-tiles { position:relative; inset:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; width:min(390px,calc(100% - 52px)); margin:0 auto 44px; flex:none; }
  .game-tile { position:relative; inset:auto; width:100%; }
  .game-tile--rail { transform:rotate(-4deg); }
  .game-tile--moon { transform:rotate(4deg); }
  .game-tile--rally { transform:rotate(3deg); }
  .game-tile--soon { transform:rotate(-3deg); }
  .game-tile__face { border-radius:23px; }
  .game-tile__label { font-size:12px; padding:12px 9px; }
  .game-tile--soon .game-tile__face { height:100%; aspect-ratio:auto; min-height:145px; }
  .game-tile__placeholder { width:54px; height:54px; }
}
@media (max-width:360px) { .game-tiles { gap:20px; width:calc(100% - 40px); } .game-tile__label { flex-wrap:wrap; gap:4px; } .game-tile__play { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { .game-tile { animation:none; } .game-tile__face { transition:none; } }