:root { --gold:#d4af37; --bg:#0a0a0a; --bg2:#14141a; --card:rgba(255,255,255,0.04); --border:rgba(255,255,255,0.08); --text:#f5f5f5; --muted:#9999a8; --green:#10b981; --red:#ef4444; --blue:#60a5fa; }
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;}
.nav{padding:18px 32px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border);background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;color:var(--gold);text-decoration:none;}
.brand img{width:32px;height:32px;border-radius:6px;}
.nav-links{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;transition:all 0.15s;}
.nav-links a:hover, .nav-links a.active{color:var(--gold);background:rgba(212,175,55,0.08);}
.nav-links a.signin{background:linear-gradient(135deg,var(--gold),#b8941f);color:#000 !important;font-weight:700;margin-left:8px;}
main{flex:1;max-width:1100px;margin:0 auto;padding:48px 24px;width:100%;}
h1{font-size:38px;font-weight:900;letter-spacing:-1px;margin-bottom:8px;color:var(--text);}
.lead{font-size:16px;color:var(--muted);margin-bottom:32px;max-width:720px;}
h2{font-size:22px;font-weight:800;margin-top:36px;margin-bottom:12px;color:var(--gold);}
p,li{font-size:15px;color:var(--text);margin-bottom:10px;}
ul{margin-left:24px;margin-bottom:14px;}
a{color:var(--gold);}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:14px 0 24px;}
.cards .card h3{color:var(--gold);font-size:15px;margin-bottom:6px;font-weight:700;}
.cards .card p{color:var(--muted);font-size:13px;}
.bot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.bot{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;}
.bot .dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);flex-shrink:0;}
.bot .info{flex:1;min-width:0;}
.bot .name{font-weight:700;font-size:14px;color:var(--text);}
.bot .game{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
.game-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:14px;}
.game-card h3{color:var(--gold);font-size:18px;margin-bottom:6px;}
.game-card .platform{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:8px;}
.game-card .bots-list{font-size:13px;color:var(--text);margin-top:10px;}
.steps{counter-reset:step;}
.step{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 18px 18px 60px;margin-bottom:10px;position:relative;}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:18px;width:30px;height:30px;background:var(--gold);color:#000;border-radius:50%;display:grid;place-items:center;font-weight:900;}
.step h3{color:var(--gold);font-size:15px;margin-bottom:6px;}
.step p{color:var(--text);font-size:14px;margin:0;}
details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:10px;cursor:pointer;}
details summary{font-weight:700;color:var(--text);font-size:15px;list-style:none;display:flex;justify-content:space-between;}
details summary::after{content:'+';color:var(--gold);font-size:22px;transition:transform 0.15s;}
details[open] summary::after{transform:rotate(45deg);}
details p{margin-top:10px;color:var(--muted);font-size:14px;}
.footer{padding:24px 32px;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:13px;}
.footer a{color:var(--gold);text-decoration:none;margin:0 8px;}
.footer a:hover{text-decoration:underline;}
@media(max-width:640px){.nav{padding:14px 16px;}h1{font-size:28px;}main{padding:24px 16px;}}