:root {
  --bg:#0c0f14; --card:#121826; --muted:#9aa4b2; --text:#e8eef7; --accent:#00e08a; --accent-2:#6cf; --warn:#ffa72b;
  --radius:14px; --radius-sm:10px; --shadow:0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing:border-box }
html,body {
  margin:0;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(0,224,138,.12),transparent 60%),
             radial-gradient(900px 500px at 10% -10%,rgba(102,204,255,.10),transparent 60%),
             var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased
}
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
.container { max-width:1200px; margin:0 auto; padding:0 20px }

/* Nav */
.nav { position:sticky; top:0; background:linear-gradient(180deg,rgba(12,15,20,.9),rgba(12,15,20,.7)); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06) }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:16px 0 }
.brand { display:flex; align-items:center; gap:10px; font-family:Nunito; font-weight:800; font-size:20px }
.brand-badge { width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#42ffd1 70%); display:grid; place-items:center; font-weight:800; color:#001a12 }
.nav-links { display:flex; gap:18px }
.nav-links a { padding:10px 12px; border-radius:10px; color:var(--muted) }
.nav-links a:hover { background:rgba(255,255,255,.06); color:var(--text) }
.cta { background:linear-gradient(135deg,var(--accent),#42ffd1); color:#001a12; padding:10px 16px; border-radius:12px; font-weight:700 }

/* Hero */
.hero { padding:42px 0 18px }
.hero-wrap { display:grid; grid-template-columns:1.2fr .8fr; gap:22px }
.hero-card { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px }
.hero h1 { font-family:Nunito; font-size:42px; line-height:1.08; margin:8px 0 10px }
.hero p { color:var(--muted); margin:0 0 14px }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#172033; font-weight:700 }
.btn.primary { background:linear-gradient(135deg,var(--accent),#42ffd1); color:#012116; border:none }
.pill { display:inline-flex; gap:8px; align-items:center; background:rgba(0,224,138,.12); color:#6ff5c7; padding:8px 12px; border-radius:999px; font-weight:700; font-size:13px }

/* Feature Game */
.feature { border-radius:var(--radius); background:#0a0e17; border:1px solid rgba(255,255,255,.08) }
.feature .bar { display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px; color:var(--muted) }
.embed { aspect-ratio:16/9; display:grid; place-items:center; background:#0a0e17 }
.embed .hint { color:#9fb6c9 }

/* Section */
.section { padding:24px 0 }
.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.section h2 { font-family:Nunito; font-size:24px; margin:0 }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px }

/* Cards */
.card { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.03)); border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.08); overflow:hidden; transition:transform .12s }
.card:hover { transform:translateY(-3px) }
.thumb { aspect-ratio:16/10; display:grid; place-items:center; background:#131a2a }
.card-body { padding:10px }
.title { font-weight:700 }
.meta { font-size:13px; color:var(--muted) }
.quick { display:flex; gap:8px; margin-top:10px }
.tag { font-size:12px; background:rgba(108,204,255,.12); padding:4px 8px; border-radius:999px }

/* Leaderboard */
.board { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:14px }
.board ul { list-style:none; margin:0; padding:0 }
.board li { display:flex; justify-content:space-between; padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.06) }

/* Footer */
footer { margin-top:30px; padding:22px 0; border-top:1px solid rgba(255,255,255,.06); font-size:14px; color:var(--muted) }

/* Search + filters */
.filters { display:flex; gap:10px; flex-wrap:wrap }
.search { display:flex; gap:8px; align-items:center; background:#11182a; border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.search input { background:transparent; border:0; outline:none; color:var(--text) }
.chip { padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1) }
.chip.active { background:rgba(0,224,138,.12); color:#baffea }

/* Responsive */
@media (max-width:1100px) { .grid { grid-template-columns:repeat(4,1fr) } .hero-wrap { grid-template-columns:1fr } }
@media (max-width:800px) { .grid { grid-template-columns:repeat(3,1fr) } .nav-links { display:none } }
@media (max-width:560px) { .grid { grid-template-columns:repeat(2,1fr) } .hero h1 { font-size:32px } }