* { box-sizing: border-box; }
:root {
  --bg:#0b1020; --panel:#111933; --ink:#dbeafe; --muted:#94a3b8;
  --accent:#7dd3fc; --accent2:#a78bfa; --line:#223055;
}
html,body { height:100%; }
body { margin:0; background: radial-gradient(1200px 800px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%);
  color:var(--ink); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #ffffff1a; background:#0c1428b3; backdrop-filter: blur(6px); position:sticky; top:0; z-index:10; }
.brand { font-weight:800; letter-spacing:.3px; }
.status { color:var(--muted); }
.app { display:grid; grid-template-columns: 320px 1fr; gap:16px; padding:16px; height: calc(100vh - 58px); }
.sidebar { background:#0c152b80; border:1px solid #ffffff1a; border-radius:12px; padding:12px; display:flex; flex-direction:column; min-height:0; }
.controls { display:flex; gap:8px; }
.btn { appearance:none; border:1px solid #ffffff22; background:var(--panel); color:var(--ink); padding:.5rem .7rem; border-radius:.6rem; cursor:pointer; }
.btn.primary { background: linear-gradient(180deg, #0f2748, #0c1e37); border-color:#7dd3fc66; }
.rooms { flex:1 1 auto; overflow:auto; margin-top:10px; border:1px solid #ffffff12; border-radius:8px; padding:8px; }
.room { display:flex; align-items:center; justify-content:space-between; background:#0a1426; border:1px solid #ffffff12; border-radius:8px; padding:10px; margin:6px 0; cursor:pointer; }
.room .name { font-weight:700; letter-spacing:.3px; }
.room .players { color:var(--muted); }
.chat { background:#0c152b80; border:1px solid #ffffff1a; border-radius:12px; padding:12px; display:flex; flex-direction:column; min-height:0; }
.roomInfo { display:flex; gap:12px; align-items:center; padding:6px 2px; border-bottom:1px solid #ffffff12; margin-bottom:8px; }
.muted { color:var(--muted); }
.chatList { list-style:none; padding:0; margin:0; flex:1 1 auto; overflow:auto; }
.msg { display:flex; gap:8px; margin:8px 0; }
.msg .bubble { max-width:70%; padding:8px 10px; border-radius:12px; background:#0f1c34; border:1px solid #ffffff18; }
.msg.me { justify-content: flex-end; }
.msg.me .bubble { background:#0d2b3f; border-color:#7dd3fc55; }
.msg .meta { font-size:12px; color:#9fb4ff; margin-bottom:3px; }
.inputRow { display:flex; gap:8px; padding-top:8px; border-top:1px solid #ffffff12; }
.inputRow input { flex:1; background:#0a1426; border:1px solid #ffffff22; border-radius:8px; padding:10px; color:var(--ink); }
.inputRow .name { max-width:200px; flex:0 0 200px; }
.footer { padding:10px 16px; color:var(--muted); border-top:1px solid #ffffff1a; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { order:2; }
  .chat { order:1; height: 65vh; }
}