:root{
  --bg:#0b1020; --card:#131a33; --muted:#8ca0ff; --text:#eaf0ff;
  --accent:#7c5cff; --accent2:#00e1ff; --danger:#ff5c8a; --success:#2ee39a; --ghost:#1c2756;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;color:var(--text);background: radial-gradient(1200px 600px at 10% -10%, #132046 0%, #0b1020 40%) fixed no-repeat, var(--bg);}
.container{max-width:1100px;margin:40px auto;padding:0 16px}
.app-header{display:flex;gap:16px;align-items:center;justify-content:space-between}
.logo{width:48px;height:48px;filter:drop-shadow(0 0 6px rgba(124,92,255,.6))}
h1{margin:0;font-size:28px}.grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{margin-top:2px;color:#c9d3ffb8}
.app-footer{opacity:.6;margin:24px 0;text-align:center}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.card.sub{flex:1; min-width:280px}
.view{display:none; animation:fade .35s ease both}
.view.active{display:block}
.grid-2-col{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.flex{display:flex; gap:16px; flex-wrap:wrap}
.form-row{margin:12px 0; display:flex; gap:10px; align-items:center}
.form-row.grid-2{display:grid; grid-template-columns:1fr auto; gap:12px}
.form-row input, textarea, select{
  background:#0d1330; color:var(--text); border:1px solid #2b356b; border-radius:12px; padding:12px 14px; outline:none; width:100%;
}
label{opacity:.9}
.btn{border:none; padding:12px 16px; border-radius:12px; background:#1c2756; color:var(--text); cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, background .2s ease;}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.35)}
.btn.primary{background:linear-gradient(90deg, var(--accent), var(--accent2))}
.btn.small{padding:8px 10px; font-size:13px}
.btn.ghost{background:transparent; border:1px solid #2b356b}
.btn:disabled{opacity:.6; cursor:not-allowed}

.pulse{animation:pulse 1.8s infinite}
.spin{animation:spin 10s linear infinite}
.slide-down{animation:slideDown .5s ease both}
.slide-up{animation:slideUp .5s ease both}
.pop{animation:pop .4s ease both}
.lift{animation:lift .5s ease both}
.fade-in{animation:fade 0.6s ease both}
.bounce{animation:bounce 1.2s infinite}
.glow{box-shadow:0 0 12px rgba(0,225,255,.35);}

.hint{margin-top:8px; opacity:.8}
.hint summary{cursor:pointer}

.lobby-top{display:flex; justify-content:space-between; align-items:center}
.actions{display:flex; gap:8px; align-items:center}
.badge{background:#1a2359; padding:6px 10px; border-radius:999px; display:inline-block}

.players{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.players li{background:#0e1640; border:1px solid #2b356b; border-radius:12px; padding:10px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; animation:pop .3s ease both}
.players .badge{background:#15206b; padding:3px 8px; border-radius:10px; font-size:12px; opacity:.9}
.players .row-actions{display:flex; gap:6px}

.settings{align-items:center}

.notice{opacity:.8; margin-top:8px}

.game-top{display:flex; gap:10px; align-items:center; justify-content:space-between}
.timer{font-weight:800; font-size:24px; background:#0e1640; padding:8px 14px; border-radius:10px}
.lives{letter-spacing:2px}

.choices{display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:16px}
.choice{padding:14px 16px; border-radius:12px; border:1px solid #2b356b; background:#0e1640; cursor:pointer; transition:transform .06s ease, background .2s}
.choice:hover{transform:translateY(-1px); background:#15206b}
.choice.disabled{opacity:.5; cursor:not-allowed}
.choice.correct{background:linear-gradient(90deg,#0d7a49,#1aa56b); border-color:#2ee39a}
.choice.wrong{background:linear-gradient(90deg,#7a0d2f,#a51a50); border-color:#ff5c8a}

.result{min-height:24px; margin-top:10px; font-weight:600}

.jokers{display:grid; grid-template-columns:auto 80px auto 80px auto 80px; gap:10px; background:#0e1640; border:1px solid #2b356b; padding:10px; border-radius:12px}
.jokers-wrap{display:flex; gap:8px; margin-top:10px}

#confettiCanvas{position:fixed; inset:0; pointer-events:none}

.leaderboard{font-size:18px}
.leaderboard li{padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.1)}

.tabs{display:flex; gap:8px; margin-bottom:10px}
.tab{background:#0e1640; border:1px solid #2b356b; padding:8px 12px; border-radius:10px; cursor:pointer}
.tab.active{background:linear-gradient(90deg, var(--accent), var(--accent2))}

.tab-pane.hidden{display:none}

.mod-grid{display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center}

.hidden{display:none}

@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:scale(.97); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes lift{from{transform:translateY(6px); opacity:0} to{transform:translateY(0); opacity:1}}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}
@keyframes slideDown{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)}}
@keyframes slideUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}