:root { --bg:#14101f; --panel:#1f1830; --text:#f1ecff; --muted:#b4a9d3; --accent:#ffcf4d; --accent2:#7a5cff; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color:var(--accent); }
.wrap { max-width:720px; margin:0 auto; padding:0 20px; }
header.site { padding:20px 0; border-bottom:1px solid #2d2445; }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { font:700 20px/1 "Courier New", ui-monospace, monospace; letter-spacing:.04em; color:var(--accent); text-decoration:none; text-transform:uppercase; }
nav a { color:var(--muted); text-decoration:none; margin-left:16px; font-size:15px; }
nav a:hover { color:var(--text); }
.hero { padding:72px 0 48px; text-align:center; }
.hero h1 { font:700 40px/1.15 "Courier New", ui-monospace, monospace; margin:0 0 16px; text-transform:uppercase; letter-spacing:.03em; }
.hero p.lead { font-size:20px; color:var(--muted); max-width:560px; margin:0 auto 32px; }
.card { background:var(--panel); border:1px solid #2d2445; border-radius:12px; padding:24px; margin:0 0 24px; }
form.signup { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
form.signup input[type=email] { flex:1 1 240px; padding:14px 16px; border-radius:8px; border:1px solid #3a2f58; background:#120d1d; color:var(--text); font-size:16px; }
form.signup button { padding:14px 22px; border:0; border-radius:8px; background:var(--accent); color:#1a1300; font-weight:700; font-size:16px; cursor:pointer; }
form.signup .hp { position:absolute; left:-5000px; }
.fine { color:var(--muted); font-size:14px; margin-top:12px; }
.points { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); padding:0; list-style:none; margin:0 0 48px; }
.points li { background:var(--panel); border:1px solid #2d2445; border-radius:12px; padding:18px; }
.points strong { display:block; color:var(--accent); margin-bottom:4px; }
main.doc { padding:40px 0 64px; }
main.doc h1 { font:700 30px/1.2 "Courier New", ui-monospace, monospace; text-transform:uppercase; }
main.doc h2 { margin-top:36px; font-size:21px; color:var(--accent); }
main.doc .updated { color:var(--muted); font-size:14px; }
main.doc .todo { background:#3a2a10; border:1px solid #7a5a1a; color:#ffe2a0; padding:10px 14px; border-radius:8px; font-size:15px; }
footer.site { border-top:1px solid #2d2445; padding:28px 0 40px; color:var(--muted); font-size:14px; }
footer.site a { color:var(--muted); margin-right:16px; }
@media (max-width:520px){ .hero h1{font-size:30px} nav a{margin-left:10px} }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand img { border-radius:6px; image-rendering:auto; }
.hero .icon { display:block; margin:0 auto 24px; border-radius:28px; box-shadow:0 8px 32px rgba(0,0,0,.45); }
.hero .soon { display:inline-block; margin:8px 0 0; padding:10px 18px; border-radius:999px; background:var(--panel); border:1px solid #3a2f58; color:var(--accent); font-weight:700; }
.hero { padding:56px 0 40px; }
h2.section { font:700 22px/1.2 "Courier New", ui-monospace, monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin:56px 0 20px; text-align:center; }
.shots { display:flex; gap:16px; justify-content:center; }
.shots img { width:calc(50% - 8px); max-width:260px; height:auto; border-radius:22px; border:1px solid #3a2f58; box-shadow:0 10px 36px rgba(0,0,0,.5); }
.games { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.game { background:var(--panel); border:1px solid #2d2445; border-radius:14px; overflow:hidden; }
.game .art { display:block; width:100%; height:auto; image-rendering:pixelated; }
.game .body { display:flex; gap:14px; padding:18px; align-items:flex-start; }
.game .logo { flex:none; border-radius:12px; image-rendering:pixelated; }
.game h3 { margin:0 0 6px; font-size:19px; }
.game p { margin:0 0 8px; }
.game .meta { color:var(--muted); font-size:14px; margin:0; }
.points { margin-bottom:64px; }
.points { grid-template-columns:repeat(2,1fr); max-width:720px; margin-left:auto; margin-right:auto; }
@media (max-width:520px){ .points { grid-template-columns:1fr; } }