:root{
  --bg:#0b1020; --panel:#111933cc; --ink:#e5e7eb; --muted:#9ca3af;
  --accent:#7dd3fc; --good:#34d399; --bad:#ef4444;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto; color:var(--ink);
  background: radial-gradient(1200px 800px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%);
}
#app{min-height:100dvh; display:grid; place-items:center; padding:24px}
.view{display:none; width:min(980px, 96vw)}
.view.active{display:block}
.hero{background:var(--panel); padding:28px; border:1px solid #ffffff22; border-radius:16px; text-align:center; box-shadow:0 20px 60px #000a}
h1{margin:.2rem 0 0} h2{margin:.2rem 0}
.muted{color:#bcd7ff99}
.small{font-size:.9rem}
.toolbar{display:flex; align-items:center; gap:10px; background:var(--panel); padding:10px 14px; border:1px solid #ffffff22; border-radius:12px; margin-bottom:12px}
.spacer{flex:1}
.btn{appearance:none; border:1px solid #ffffff22; background:#0e1a30; color:var(--ink); padding:.5rem .8rem; border-radius:.6rem; cursor:pointer}
.btn.primary{background: linear-gradient(180deg, #0e2741cc, #0d1f36cc)}
.btn.success{background: linear-gradient(180deg, #094126cc, #08321ecc); border-color:#0f5132}
.rooms{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.rooms li{display:flex; align-items:center; gap:10px; background:var(--panel); padding:12px; border:1px solid #ffffff22; border-radius:10px}
.rooms .pill{margin-left:auto}
.pill{background:#0e1a30; border:1px solid #ffffff22; padding:.25rem .6rem; border-radius:999px}
.hint{margin:8px 0 12px; color:#bcd7ffcc}
.share{display:flex; gap:8px; align-items:center; margin-top:10px}
.share.hidden{display:none}
input{background:#081225; color:var(--ink); border:1px solid #ffffff22; border-radius:6px; padding:.45rem .6rem; width:100%}
.wait-grid{display:grid; grid-template-columns: 1fr; gap:12px}
.card{background:var(--panel); padding:12px; border:1px solid #ffffff22; border-radius:12px}
.chat-log{background:#081225; border:1px solid #ffffff22; border-radius:8px; height:280px; padding:8px; overflow:auto; font-size:.95rem}
.chat-line{margin:.2rem 0}
.chat-line .from{opacity:.7; margin-right:.4rem}
.chat-input{display:flex; gap:8px; margin-top:8px}
.game-host{height:70dvh; background:#081225; border:1px solid #ffffff22; border-radius:12px; overflow:hidden}
iframe{width:100%; height:100%; border:0}
@media (min-width: 860px){
  .wait-grid{grid-template-columns: 2fr 1fr}
}