:root {
  --bg:#07060d; --bg2:#0e0b1a; --card:#120f20; --ink:#f4f1ff; --muted:#9d97b8;
  --accent:#7c4dff; --accent2:#a78bfa; --line:#241d3d; --glow:rgba(124,77,255,.35);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
  background:radial-gradient(900px 500px at 50% -120px, rgba(124,77,255,.22), transparent 70%), var(--bg);
  font:16px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color:var(--accent2); }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; width:100%; }

/* header */
header.site { position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); background:rgba(7,6,13,.8); border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; gap:20px; height:64px; }
.brand { display:flex; align-items:center; text-decoration:none; }
.brand .crop { width:74px; height:46px; overflow:hidden; position:relative; }
.brand img { position:absolute; width:170px; max-width:none; left:-46px; top:-14px; }
header.site nav { margin-left:auto; display:flex; gap:22px; }
header.site nav a { color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem; }
header.site nav a:hover, header.site nav a.on { color:var(--ink); }

/* hero */
.hero { text-align:center; padding:56px 0 24px; }
.hero img.logo { width:min(520px,90%); height:auto; mix-blend-mode:lighten; margin:-30px auto -20px; display:block; }
.hero p { color:var(--muted); max-width:560px; margin:0 auto; font-size:1.1rem; }

h1 { font-size:clamp(2rem,5vw,3rem); line-height:1.1; margin:0 0 10px; letter-spacing:-.02em; }
h2 { font-size:1.3rem; margin:36px 0 8px; }
h2.section { font-size:.85rem; text-transform:uppercase; letter-spacing:.18em; color:var(--accent2); margin:56px 0 18px; }
.muted { color:var(--muted); }

/* game cards */
.games { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.game { display:block; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s; }
.game:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 40px var(--glow); }
.game .art { aspect-ratio:16/9; display:grid; place-items:center; background:linear-gradient(135deg,#2a1466,#0e0b1a); }
.game .art img { width:96px; height:96px; border-radius:22px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.game .body { padding:18px 20px 22px; }
.game h3 { margin:0 0 4px; font-size:1.2rem; }
.game p { margin:0; color:var(--muted); font-size:.95rem; }
.tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:99px; background:var(--accent); color:#fff; margin-bottom:10px; }
.game.soon { border-style:dashed; background:transparent; pointer-events:none; }
.game.soon .art { background:repeating-linear-gradient(45deg,#0e0b1a,#0e0b1a 12px,#120f20 12px,#120f20 24px); font-size:2.4rem; color:var(--line); font-weight:800; }
.game.soon .tag { background:var(--line); color:var(--muted); }

/* game page */
.game-head { display:flex; gap:22px; align-items:center; padding:48px 0 8px; flex-wrap:wrap; }
.game-head img { width:104px; height:104px; border-radius:24px; box-shadow:0 8px 40px var(--glow); }
.video { position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.6); margin-top:28px; }
.video video { width:100%; height:100%; display:block; object-fit:cover; }
.video .placeholder { position:absolute; inset:0; display:none; place-items:center; text-align:center; color:var(--muted); background:linear-gradient(135deg,#1b0f45,#07060d); }
.video.empty .placeholder { display:grid; }
.video.empty video { display:none; }
.play { width:76px; height:76px; border-radius:50%; background:var(--accent); display:grid; place-items:center; margin:0 auto 12px; box-shadow:0 0 40px var(--glow); }
.play::after { content:""; border-left:22px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:6px; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 24px; margin:20px 0; }
.features .card { margin:0; }
.features h3 { margin:0 0 6px; color:var(--accent2); font-size:1rem; }
.features p { margin:0; color:var(--muted); }
.btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; padding:11px 22px; border-radius:12px; }
.btn:hover { filter:brightness(1.15); }

/* legal / text pages */
main.text { max-width:760px; margin:0 auto; padding:40px 20px 24px; width:100%; }
main.text p, main.text li { color:#d9d4ee; }

main { flex:1; }
footer { border-top:1px solid var(--line); margin-top:64px; padding:26px 0; color:var(--muted); font-size:.9rem; }
footer .wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }