:root {
  --bg:#1a1640; --bg-2:#120f30; --fg:#f1f0fa; --muted:#a8a3c7;
  --primary:#7c5cff; --primary-glow:#a78bfa; --card:#221d4a; --border:#312a64; --radius:12px;
}
[data-theme="light"] { --bg:#f5f3ff; --bg-2:#e9e4ff; --fg:#1a1640; --muted:#5b5482; --card:#ffffff; --border:#d8d2f0; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  background:radial-gradient(ellipse at top,#2d2380 0%,var(--bg) 50%,var(--bg-2) 100%);
  background-attachment:fixed; color:var(--fg); min-height:100vh; }
a { color:inherit; text-decoration:none; }
.topbar { position:sticky; top:0; z-index:10; background:rgba(18,15,48,.7); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); padding:0 1.5rem; height:56px; display:flex; align-items:center; gap:2rem; }
.brand { font-weight:700; }
.topnav { display:flex; gap:1.25rem; margin-left:auto; font-size:.9rem; color:var(--muted); }
.topnav a:hover { color:var(--fg); }
.container { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
.container.narrow { max-width:720px; }
.hero { text-align:center; padding:3rem 1rem; }
.hero h1 { font-size:clamp(2rem,5vw,3.5rem); margin:0 0 1rem; text-shadow:0 0 24px rgba(124,92,255,.5); }
.hero p { color:var(--muted); margin:0 0 1.5rem; }
.search { width:100%; max-width:420px; padding:.75rem 1rem; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--fg); font-size:1rem; }
h2 { font-size:1.5rem; margin:2rem 0 1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1.25rem; }
.card { background:linear-gradient(135deg,#2a2456,#1d1842); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:all .2s; display:block; }
.card:hover { border-color:var(--primary); box-shadow:0 10px 40px -10px rgba(124,92,255,.5); transform:translateY(-2px); }
.cover,.cover-large { aspect-ratio:1/1; background:#2a2456; overflow:hidden; }
.cover img,.cover-large img { width:100%; height:100%; object-fit:cover; display:block; }
.placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; opacity:.4; }
.meta { padding:.75rem; }
.meta h3 { margin:0; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta p { margin:.25rem 0 0; font-size:.75rem; color:var(--muted); }
.game-page { max-width:900px; }
.back { color:var(--muted); display:inline-block; margin-bottom:1.5rem; }
.back:hover { color:var(--fg); }
.game-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:720px){ .game-grid { grid-template-columns:280px 1fr; } }
.cover-large { border-radius:var(--radius); border:1px solid var(--border); }
.game-grid h1 { font-size:2.5rem; margin:0; }
.meta-row { color:var(--muted); margin:.5rem 0 1.5rem; }
.desc { line-height:1.6; white-space:pre-line; color:rgba(241,240,250,.85); }
.btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--primary); color:white;
  padding:.75rem 1.5rem; border-radius:8px; font-weight:600; box-shadow:0 10px 40px -10px rgba(124,92,255,.6); margin-top:1rem; }
.btn:hover { background:var(--primary-glow); }
.hint { color:var(--muted); font-size:.75rem; margin-top:.75rem; }
.empty { color:var(--muted); text-align:center; padding:2rem 1rem; }
.changelog { margin-top:3rem; }
.timeline { list-style:none; padding:0; margin:0; border-left:2px solid var(--border); margin-left:.5rem; }
.timeline li { position:relative; padding:0 0 1.5rem 1.5rem; }
.timeline .dot { position:absolute; left:-.4rem; top:.4rem; width:.7rem; height:.7rem; border-radius:50%;
  background:var(--primary); box-shadow:0 0 12px var(--primary); }
.timeline .date { color:var(--muted); font-size:.75rem; margin-left:.5rem; }
.timeline p { margin:.25rem 0 0; color:rgba(241,240,250,.8); line-height:1.5; }