*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#111118;
  --card-bg:#1a1a25;
  --card-border:#252533;
  --text:#e4e4ec;
  --muted:#7c7c94;
  --green:#4ade80;
  --amber:#f59e0b;
  --purple:#a78bfa;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.container{max-width:640px;width:100%;padding:48px 24px}

header{text-align:center;margin-bottom:40px}
h1{font-size:1.75rem;font-weight:700;margin-bottom:6px;letter-spacing:-0.02em}
.subtitle{color:var(--muted);font-size:0.9rem}

.summary{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 18px;
  border-radius:10px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  margin-bottom:32px;
  font-size:0.88rem;
  color:var(--muted);
}
.summary strong{color:var(--green);font-size:1.1rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}

.room-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}

.room-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 24px;
  border-radius:12px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  transition:border-color .2s;
}
.room-card.idle:hover{border-color:rgba(74,222,128,.25)}
.room-card.busy{border-color:rgba(245,158,11,.2)}

.room-icon{font-size:1.5rem;line-height:1}

.room-body{flex:1;min-width:0}
.room-title{font-size:0.95rem;font-weight:600;color:var(--text);margin-bottom:2px}
.room-desc{font-size:0.78rem;color:var(--muted)}
.room-desc strong.idle-hint{color:var(--green);font-weight:500}
.room-desc strong.busy-hint{color:var(--amber);font-weight:500}

.room-status{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.tag{
  font-size:0.72rem;
  font-weight:600;
  padding:4px 12px;
  border-radius:20px;
  white-space:nowrap;
}
.tag.idle{background:rgba(74,222,128,.1);color:var(--green)}
.tag.busy{background:rgba(245,158,11,.1);color:var(--amber)}

.btn{
  font-size:0.82rem;
  font-weight:600;
  padding:8px 16px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  border:none;
  transition:all .15s;
}
.btn-join{background:var(--purple);color:#fff}
.btn-join:hover{background:#8b6fe0}
.btn-spectate{background:rgba(255,255,255,.08);color:var(--text)}
.btn-spectate:hover{background:rgba(255,255,255,.14)}

footer{text-align:center;color:var(--muted);font-size:0.7rem;margin-top:48px;opacity:.6}