/* Retro / pixel-inspired site styles */
@font-face {
  font-family: 'GameFont';
  /* Prefer modern woff2, fall back to ttf for compatibility */
  src: url('assets/font.woff2') format('woff2'),
       url('assets/font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --primary:#ffffff; /* primary text color */
  --main:#77e6f8;     /* main accent */
  --second:#00394d;   /* secondary / dark accent */
  --muted: rgba(119,230,248,0.85);
  --bg:#071019;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  /* Use a clean system sans-serif for body text and UI elements */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background:linear-gradient(180deg,#00121a 0%, var(--second) 60%);
  color:var(--primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Apply the retro GameFont only to headings and the site brand */
h1,h2,h3,h4,h5,h6, .topnav .brand {
  font-family: GameFont, 'Courier New', monospace;
  letter-spacing: 0.6px;
}

.topnav{
  position:fixed;
  left:0;right:0;top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  background:rgba(5,10,15,0.6);
  backdrop-filter: blur(4px);
  border-bottom:1px solid rgba(255,255,255,0.03);
  z-index:1000;
}
.topnav .brand{font-weight:700; color:var(--main)}
.nav-links{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:4px}
.nav-links a:hover{color:var(--main);background:rgba(119,230,248,0.06)}

.section{padding:100px 20px 80px;min-height:60vh}
.hero{display:flex;align-items:center;justify-content:center;text-align:center;padding-top:160px;background-image:radial-gradient(rgba(255,204,51,0.02) 1px, transparent 1px);background-size:10px 10px}
.hero h1{font-size:clamp(28px,6vw,56px);margin:0 0 12px}
.tagline{color:var(--muted);margin-bottom:18px}
.cta-row{display:flex;gap:12px;justify-content:center}
.btn{display:inline-block;padding:10px 16px;background:var(--main);color:var(--second);border-radius:6px;text-decoration:none;font-weight:700}
.btn.ghost{background:transparent;color:var(--main);border:2px solid rgba(119,230,248,0.12)}

.inner{max-width:1000px;margin:0 auto}

.jam-badge{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:18px}
.jam-badge img{display:block;border-radius:8px}
.jam-text{color:var(--main);font-weight:700}

.download-row{display:flex;gap:12px;flex-wrap:wrap}
.store-btn{background:linear-gradient(90deg,var(--main),#a7f7ff);color:var(--second)}
.small-note{margin-top:12px;color:rgba(255,255,255,0.7)}

/* Screenshots gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.gallery figure{margin:0}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,0.04)}
.gallery figcaption{font-size:0. ninerem;color:var(--muted);margin-top:8px;text-align:center}

@media(max-width:480px){
  .gallery img{height:140px}
}

.about h2,.play h2{margin-top:0}

.embed-wrap{display:flex;justify-content:center;margin:18px 0}
.embed-wrap iframe{width:100%;max-width:900px;height:506px;border:0;border-radius:8px;background:#000}

.download-row{display:flex;gap:12px;flex-wrap:wrap}

.site-footer{padding:40px 20px;background:transparent;border-top:1px solid rgba(255,255,255,0.02)}

@media(max-width:720px){
  .nav-links{display:none}
  .topnav{padding:10px}
  .embed-wrap iframe{height:320px}
  .section{padding:80px 16px}
}