:root { --bg:#000; --text:#f5f5f5; --muted:#9ca3af; --accent:#dc2626; --header-h:64px; }
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline}
.header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:rgba(0,0,0,.35); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06); min-height: var(--header-h);
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:40px; width:auto; display:block}
.nav{display:flex; gap:18px; font-weight:700}
.nav a{opacity:.9; padding:8px 10px; border-radius:10px}
.nav a:hover{opacity:1; background:rgba(255,255,255,.06)}
.hero{
  min-height:100vh; position:relative; display:grid; place-items:end start; overflow:hidden;
  padding-top: var(--header-h);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: url('../assets/hero.jpg') center center / cover no-repeat;
}
/* Removed bottom fade so full image is visible; keep only a subtle top shade if needed */
/* .hero::after removed intentionally */

.hero-inner{position:relative; z-index:1; padding:24px; max-width: 1100px;}
.tagline{font-size: clamp(18px, 3vw, 28px); color:#e5e7eb; text-shadow:0 2px 18px rgba(0,0,0,.6);}
.section{padding:80px 24px; max-width:1100px; margin:0 auto; border-top:1px solid rgba(255,255,255,.06); scroll-margin-top: calc(var(--header-h) + 12px);}
.section h2{margin:0 0 12px 0}
.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.card{background:#111; border:1px solid #222; border-radius:14px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.card h3{margin:6px 0 8px 0}
.footer{padding:16px 24px; color:var(--muted); font-size:12px; text-align:center; border-top:1px solid rgba(255,255,255,.06)}

/* Mobile tweaks */
@media (max-width: 720px){
  :root { --header-h: 56px; }
  .header{flex-wrap:wrap; gap:10px}
  .brand img{height:32px}
  .nav{gap:10px; width:100%; justify-content:flex-start}
  .nav a{padding:8px 10px}
  .hero-inner{padding:18px}
  .section{padding:64px 16px}
}

/* About & Games section fonts */
#about, #games {
  font-family: "Barlow Condensed", "Oswald", Arial, sans-serif;
  letter-spacing: 0.3px;
}

#about h2, #games h2,
#games .card h3 {
  font-family: "Oswald", "Barlow Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Nav link font only */
.header .nav a {
  font-family: "Oswald", "Barlow Condensed", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Hover/active polish (optional) */
.header .nav a:hover { opacity: 1; text-decoration: underline; }
.header .nav a:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

/* Mobile size tweak */
@media (max-width: 720px){
  .header .nav a { font-size: 14px; }
}