*{box-sizing:border-box}
:root{
  --bg: #0b0f14;
  --card: rgba(255,255,255,0.06);
  --muted: #8aa0b2;
  --text: #e8f0f7;
  --accent: #77e0ff;
  --accent2:#a0ff83;
  --danger:#ff7a7a;
}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:
    radial-gradient(1000px 600px at 10% -20%, #13253a 10%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #1a2d3f 10%, transparent 60%),
    linear-gradient(180deg, #0a111b, #0b0f14);
  color:var(--text);
}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.topbar h1{margin:0;font-size:28px;letter-spacing:.5px}
.badge{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#001923;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;box-shadow:0 0 22px rgba(119,224,255,.3)}

.grid{display:grid;gap:16px;grid-template-columns:1.2fr 1.6fr .9fr}
@media (max-width: 980px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.card h2{margin:0 0 12px 0;font-size:18px}

.join label{display:block;color:var(--muted);font-size:12px;margin:10px 0 6px}
input{
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color:var(--text); outline:none;
}
.roomrow{display:flex;gap:8px;align-items:center}
button{
  cursor:pointer;border:0;border-radius:14px;padding:12px 16px;font-weight:800;letter-spacing:.4px;
  background:linear-gradient(180deg,#2cf6ff,#36b7ff); color:#00212c; transition:transform .08s ease;
  box-shadow: 0 8px 18px rgba(44,246,255,.2);
}
button:active{transform:translateY(1px)}

.hint{color:var(--muted);font-size:12px;margin-top:8px}
.error{background:rgba(255,0,0,.1);border:1px solid rgba(255,255,255,.3);padding:8px 10px;border-radius:10px;color:#ffbdbd;margin-top:8px}

.game .status{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}
#players{display:flex;gap:8px;flex-wrap:wrap}
#players .p{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:12px}

.arena{display:flex;gap:16px;flex-direction:column;align-items:center;justify-content:center;min-height:280px;border:1px dashed rgba(255,255,255,.12);border-radius:16px;padding:12px}
.choices{display:flex;gap:12px}
.choice{font-size:34px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15)}
.choice:hover{transform:translateY(-2px)}

.log{min-height:56px;text-align:center;color:var(--muted)}

.scores{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.scores li{display:flex;gap:8px;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:12px}
.scores .name{font-weight:600}
.scores .meta{font-size:12px;color:var(--muted)}

.foot{margin-top:18px;text-align:center;color:var(--muted)}