:root { color-scheme: dark; --ink:#f4f2ed; --muted:#a5a8ae; --line:#30343a; --hot:#f4bd4f; --panel:#17191d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 80% 0%,#31313b 0,#121316 48%); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.shell { max-width:980px; margin:auto; padding:8vh 28px 64px; }
.hero { border-bottom:1px solid var(--line); padding-bottom:48px; }
.eyebrow { color:var(--hot); font-size:12px; letter-spacing:.2em; font-weight:800; }
h1 { max-width:620px; margin:14px 0; font-size:clamp(48px,9vw,92px); line-height:.9; letter-spacing:-.07em; }
.lede { color:var(--muted); font-size:18px; max-width:480px; }
.joinbar { display:flex; gap:10px; max-width:600px; margin-top:30px; }
input,button { font:inherit; }
input { flex:1; min-width:0; border:1px solid var(--line); background:#0e0f11; color:var(--ink); padding:15px 17px; border-radius:4px; outline:none; }
input:focus { border-color:var(--hot); }
button { border:0; cursor:pointer; }
.joinbar button { background:var(--hot); color:#17130b; padding:0 22px; border-radius:4px; font-weight:800; }
.error { min-height:20px; color:#ff8f7d; }
.room-section { padding-top:34px; }
.section-head { display:flex; align-items:center; justify-content:space-between; }
h2 { margin:0 0 16px; font-size:22px; }
#refresh { color:var(--muted); font-size:12px; }
.rooms { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.room { text-align:left; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px; transition:.15s ease; }
.room:hover:not(:disabled),.room.selected { border-color:var(--hot); transform:translateY(-2px); }
.room:disabled { cursor:not-allowed; opacity:.62; }
.room-top,.count { display:flex; justify-content:space-between; align-items:center; }
.badge { color:#91e3af; font-size:10px; letter-spacing:.12em; font-weight:900; }
.badge.full { color:#ff8f7d; }
.map,.count { display:block; color:var(--muted); font-size:13px; margin-top:14px; }
.meter { display:block; height:5px; background:#292c31; margin-top:18px; border-radius:5px; overflow:hidden; }
.meter i { display:block; height:100%; background:var(--hot); }
.empty { color:var(--muted); }
@media (max-width:560px) { .shell { padding:34px 18px; } .joinbar { flex-direction:column; } .joinbar button { padding:14px; } }