@font-face{font-family:'Fredoka';font-weight:500;font-display:swap;src:url(fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format('woff2')}

:root{--blue:#1479ff;--yellow:#fffc00;--gold:#ffd21f;--dim:#a9b1bd;--line:#1c1f26}
*{box-sizing:border-box}
html{background:#000}
body{margin:0;background:#000;color:#fff;font-family:'Fredoka',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;
  font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;text-align:center}
img{max-width:100%;height:auto;display:block}
a{color:#fff}
main{max-width:1080px;margin:0 auto;padding:0 16px}

.top{padding:22px 16px 18px;display:flex;justify-content:center}
.top img{width:150px}

/* Banner: landscape image with the game logo on top. Without img/banner.jpg the blue sea shows. */
.banner{position:relative;aspect-ratio:21/9;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%,#3d95ff 0%,var(--blue) 55%,#0b5fd6 100%);
  display:flex;align-items:center;justify-content:center}
.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner-logo{position:relative;height:86%;width:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
/* With a real banner image the logo is expected to be in the picture already */
.banner:has(.banner-img) .banner-logo{display:none}

.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tag{margin:30px 0 0;font-weight:700;font-size:clamp(28px,6vw,46px);line-height:1.1;color:var(--gold)}
.lead{max-width:620px;margin:14px auto 0;color:#dfe4ea;font-size:clamp(17px,2.4vw,20px)}

.play{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:16px 34px 16px 28px;border-radius:999px;
  background:var(--yellow);color:#000;font-weight:700;font-size:22px;text-decoration:none;
  box-shadow:0 6px 0 #b8b400;transition:transform .12s,box-shadow .12s}
.play svg{width:26px;height:26px;fill:#000}
.play:hover{transform:translateY(-2px);box-shadow:0 8px 0 #b8b400}
.play:active{transform:translateY(4px);box-shadow:0 2px 0 #b8b400}
.play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.free{margin:18px 0 0;color:var(--dim);font-size:15px}

.screens{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px}
.screens figure{margin:0}
.screens img{width:100%;border-radius:18px;border:3px solid var(--line)}
.screens figcaption{margin-top:10px;color:var(--dim);font-size:15px;line-height:1.3}

.scan{display:flex;align-items:center;gap:28px;max-width:640px;margin:72px auto 0;padding:24px;border-radius:22px;
  background:#0d0f13;border:1px solid var(--line);text-align:left}
.scan img{width:150px;flex:none}
.scan h2{margin:0 0 6px;font-size:24px;font-weight:700}
.scan p{margin:0;color:#dfe4ea;font-size:17px}

footer{margin-top:80px;padding:34px 16px 44px;border-top:1px solid var(--line);color:var(--dim);font-size:15px}
footer img{width:110px;margin:0 auto 14px}
footer p{margin:4px 0}
footer .small{font-size:13px;color:#6f7783}

@media (max-width:760px){
  .banner{aspect-ratio:16/9;border-radius:16px}
  .screens{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:48px}
  .scan{flex-direction:column;text-align:center;gap:16px;margin-top:56px}
  .play{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.play{transition:none}}