:root{
  --bg:#0b0e14; --bg2:#11151f; --card:#151a25; --line:#212736;
  --tx:#e7ebf3; --mut:#93a0b5; --acc:#6ea8fe; --acc2:#8b7bfb; --ok:#3fb950; --star:#f2c744;
  --radius:14px; --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,rgba(110,168,254,.14),transparent 60%),radial-gradient(1000px 500px at -10% 10%,rgba(139,123,251,.12),transparent 55%),var(--bg);
  color:var(--tx);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px;width:100%}
main{flex:1}
/* nav */
header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(11,14,20,.72);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:26px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.logo svg{filter:drop-shadow(0 2px 6px rgba(110,168,254,.5))}
.navlinks{display:flex;gap:24px;margin-left:14px;color:var(--mut);font-size:14.5px}
.navlinks a:hover,.navlinks a.active{color:var(--tx)}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;border:1px solid var(--line);color:var(--tx);background:#141926;transition:.15s;cursor:pointer}
.btn:hover{border-color:#33405c;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:#0a0d14;box-shadow:0 8px 22px rgba(110,168,254,.28)}
.btn.primary:hover{box-shadow:0 10px 28px rgba(110,168,254,.4)}
.btn.sm{padding:6px 12px;font-size:13px}
@media(max-width:820px){.navlinks{display:none}}
/* hero */
.hero{padding:80px 0 54px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);border:1px solid var(--line);background:#121724;padding:6px 13px;border-radius:999px;margin-bottom:24px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(63,185,80,.18);flex:none}
h1{font-size:clamp(34px,6vw,56px);line-height:1.08;margin:0 0 18px;letter-spacing:-1px;font-weight:800}
h1 .grad{background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:640px;margin:0 auto 30px;color:var(--mut);font-size:18px}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:52px;color:var(--mut);font-size:14px}
.stats b{display:block;color:var(--tx);font-size:26px;font-weight:800;letter-spacing:-.5px}
/* subpage header */
.pagehead{padding:56px 0 6px}
.pagehead h1{font-size:clamp(28px,5vw,42px);margin-bottom:8px}
.pagehead p{color:var(--mut);max-width:640px;margin:0}
/* sections + shelves */
section{padding:34px 0}
.shelfhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;gap:16px}
.shelfhead h2{font-size:22px;margin:0;letter-spacing:-.4px}
.shelfhead a{color:var(--acc);font-size:14px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
/* game card */
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.gcard:hover{transform:translateY(-4px);border-color:#33405c;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.cover{aspect-ratio:3/4;position:relative;display:flex;align-items:flex-end;padding:14px;color:#fff}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55));pointer-events:none}
.cover .ct{position:relative;z-index:1;font-weight:800;font-size:19px;line-height:1.15;letter-spacing:-.3px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.cover .genre-chip{position:absolute;top:12px;left:12px;z-index:1;font-size:11px;font-weight:600;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);padding:4px 9px;border-radius:999px}
.ginfo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.ginfo .row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--mut)}
.stars{color:var(--star);letter-spacing:1px;font-size:13px}
/* filter chips */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 26px}
.chip{font-size:13.5px;color:var(--mut);border:1px solid var(--line);background:#121724;padding:7px 14px;border-radius:999px;transition:.15s}
.chip:hover{color:var(--tx);border-color:#33405c}
.chip.active{color:#0a0d14;background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;font-weight:600}
/* game detail */
.detail{display:grid;grid-template-columns:300px 1fr;gap:38px;padding:44px 0;align-items:start}
.detail .cover{border-radius:var(--radius);border:1px solid var(--line)}
.detail h1{font-size:clamp(28px,4vw,40px);margin:0 0 6px}
.detail .meta{color:var(--mut);display:flex;gap:16px;flex-wrap:wrap;font-size:14.5px;margin-bottom:18px}
.detail .lead{font-size:17px;color:var(--tx);margin:0 0 14px}
.detail p{color:var(--mut)}
.detail .actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:26px;font-size:14.5px}
.kv dt{color:var(--mut)}
.kv dd{margin:0;color:var(--tx)}
.back{display:inline-flex;gap:7px;color:var(--mut);font-size:14px;margin:26px 0 0}
.back:hover{color:var(--tx)}
@media(max-width:720px){.detail{grid-template-columns:1fr}.detail .cover{max-width:260px}}
/* collections */
.collgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.coll{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);transition:.18s}
.coll:hover{transform:translateY(-3px);border-color:#33405c}
.coll .band{height:96px;position:relative}
.coll .band .n{position:absolute;bottom:12px;left:16px;font-weight:800;font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.coll p{padding:14px 16px;margin:0;color:var(--mut);font-size:14px}
/* tables (stats) */
.regiontable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.regiontable th,.regiontable td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
.regiontable th{color:var(--mut);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:1px}
.regiontable tr:last-child td{border-bottom:none}
/* login */
.authbox{max-width:400px;margin:60px auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px}
.authbox h1{font-size:24px;text-align:center;margin:0 0 6px}
.authbox .lead{text-align:center;color:var(--mut);font-size:14px;margin:0 0 24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
.field input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:#0e131d;color:var(--tx);font-size:14px}
.field input:focus{outline:none;border-color:var(--acc)}
.authbox .btn{width:100%;justify-content:center;margin-top:6px}
.authbox .alt{text-align:center;color:var(--mut);font-size:13.5px;margin-top:18px}
.err{background:rgba(210,45,45,.12);border:1px solid rgba(210,45,45,.4);color:#f4a3a3;font-size:13.5px;padding:10px 13px;border-radius:9px;margin-bottom:18px}
/* 404 */
.center{text-align:center;padding:120px 0}
.center .big{font-size:96px;font-weight:800;letter-spacing:-3px;background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:40px 0;color:var(--mut);font-size:14px}
.fgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.fcol h4{color:var(--tx);font-size:13px;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px}
.fcol a{display:block;color:var(--mut);margin-bottom:8px}
.fcol a:hover{color:var(--tx)}
.copy{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}