:root{--bg:#040303;--card:#0f0e0e;--line:#2b2b2b;--gold:#edb23f;--red:#e03100;--muted:#9aa3ab}
*{box-sizing:border-box}body{margin:0;font-family:Alegreya,Georgia,serif;background:#040303;color:#d5d5d5}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#0a0a0a;border-bottom:1px solid #383838;position:sticky;top:0;z-index:10}
.topbar a{color:#d5d5d5;text-decoration:none;margin-left:14px}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#edb23f}
.card{background:#0f0e0e;border:1px solid #2b2b2b;border-radius:10px;padding:16px;margin:12px 0;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.layout{display:grid;grid-template-columns:320px 1fr 300px;gap:14px;padding:14px;max-width:1400px;margin:0 auto}
@media(max-width:1100px){.layout{grid-template-columns:1fr} }
.btn{background:#040303;color:#e03100;border:1px solid #e03100;padding:8px 14px;border-radius:6px;cursor:pointer}
.btn.primary{background:#edb23f;color:#040303;border-color:#edb23f;font-weight:700}
.btn.small{padding:4px 8px;font-size:12px}
.btn.full{width:100%}
.btn.danger{color:#ff6b6b;border-color:#ff6b6b}
.badge{background:#1a1a1a;border:1px solid #383838;padding:2px 6px;border-radius:4px;font-size:11px;color:#edb23f}
.badge.private{color:#72e7b8;border-color:#72e7b8}
.badge.public{color:#8ed1fc;border-color:#8ed1fc}
input,select{width:100%;background:#040303;border:1px solid #383838;color:#d5d5d5;padding:8px;border-radius:6px;margin:6px 0}
.row{display:flex;gap:8px} .row input{flex:1}
.muted{color:#9aa3ab} .small{font-size:12px}
.games{display:flex;flex-direction:column;gap:8px}
.game-row{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#0a0a0a;border:1px solid #2b2b2b;border-radius:8px}
.friends{list-style:none;padding:0;margin:0} .friends li{padding:6px 0;border-bottom:1px solid #1f1f1f;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;background:#22c55e;border-radius:50%;display:inline-block}
.log{list-style:none;padding:0;max-height:120px;overflow:auto;font-size:12px}
.log li{padding:4px 0;border-bottom:1px solid #1f1f1f}
.seats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seat{padding:14px;border-radius:8px;text-align:center;border:1px dashed #383838}
.seat.filled{background:#111;border-style:solid;border-color:#edb23f}
.room{max-width:1400px;margin:0 auto;padding:14px}
.room-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.room-grid{display:grid;grid-template-columns:1fr 520px 320px;gap:14px}
@media(max-width:1100px){.room-grid{grid-template-columns:1fr}}
#map{width:100%;background:#020202;border:1px solid #2b2b2b;border-radius:8px}
.gate{max-width:720px;margin:40px auto;text-align:center}
.gate-actions{display:flex;gap:12px;justify-content:center;margin:18px 0}
.hidden{display:none !important}
.footer{text-align:center;padding:20px;opacity:.6}