*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a14;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif;color:#e0e0e0}
#backBtn{position:fixed;top:14px;left:16px;z-index:20;color:rgba(255,255,255,0.35);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:2px;padding:6px 12px;border-radius:4px;transition:all .2s}
#backBtn:hover{color:#fff;background:rgba(255,255,255,0.1)}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,10,20,0.95);z-index:5;transition:opacity .3s}
.screen.hidden{opacity:0;pointer-events:none}
h1{font-size:48px;font-weight:900;letter-spacing:8px;margin-bottom:12px;background:linear-gradient(135deg,#818cf8,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
h2{font-size:28px;font-weight:800;color:#fff;margin-bottom:16px}
p{font-size:14px;color:#8899aa;margin-bottom:8px;text-align:center;max-width:500px}
.sub{font-size:11px;letter-spacing:2px;color:#556;margin-bottom:24px}

.btn{background:linear-gradient(135deg,#818cf8,#a855f7);color:#fff;border:none;padding:12px 40px;font-size:14px;font-weight:800;letter-spacing:3px;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .3s}
.btn:hover{transform:scale(1.04);box-shadow:0 0 30px rgba(129,140,248,0.3)}
.btn:disabled{opacity:0.4;cursor:default;transform:none}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626)}
.btn-small{padding:8px 20px;font-size:12px;letter-spacing:1px}

input[type="text"],input[type="number"]{
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
    color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;
    outline:none;transition:border-color .2s;width:220px;text-align:center;
}
input:focus{border-color:#818cf8}

/* Setup screen */
.setup-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:28px;max-width:480px;width:90%;text-align:center}
.player-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0}
.player-tag{background:rgba(129,140,248,0.15);color:#818cf8;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.player-tag .remove{cursor:pointer;opacity:0.5;font-size:14px}
.player-tag .remove:hover{opacity:1}

/* Role reveal */
.role-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:40px 50px;text-align:center;min-width:320px}
.role-word{font-size:42px;font-weight:900;margin:20px 0;letter-spacing:2px;transition:opacity .15s}
.role-word.civilian{color:#4ade80}
.role-word.impostor{color:#ef4444}
.role-hint{font-size:14px;color:#fbbf24;font-weight:600;margin-top:8px}
.role-hidden{font-size:18px;color:rgba(255,255,255,0.2);letter-spacing:3px}

/* Discussion */
.discuss-wrap{text-align:center;max-width:600px;width:90%}
.timer-big{font-size:72px;font-weight:900;color:#fff;margin:16px 0}
.round-info{font-size:13px;color:rgba(255,255,255,0.4);margin-bottom:8px;text-transform:uppercase;letter-spacing:2px}
.word-hint{font-size:20px;font-weight:700;color:#818cf8;margin:12px 0;padding:12px 24px;background:rgba(129,140,248,0.1);border:1px solid rgba(129,140,248,0.2);border-radius:12px;display:inline-block}

/* Voting */
.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-width:600px;width:90%;margin:16px 0}
.vote-card{
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;
}
.vote-card:hover{background:rgba(129,140,248,0.12);border-color:rgba(129,140,248,0.3)}
.vote-card.selected{background:rgba(129,140,248,0.2);border-color:#818cf8;box-shadow:0 0 16px rgba(129,140,248,0.15)}
.vote-card.eliminated{opacity:0.3;cursor:default;pointer-events:none}
.vote-card .avatar{font-size:28px;margin-bottom:6px}
.vote-card .vname{font-size:13px;font-weight:700;color:#fff}
.vote-count{font-size:11px;color:#818cf8;font-weight:700;margin-top:4px}

/* Results */
.result-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:20px 30px;margin:8px 0;text-align:center}
.result-player{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);justify-content:space-between}
.result-player:last-child{border-bottom:none}

/* Ring visualization */
.player-ring{position:relative;width:300px;height:300px;margin:20px auto}
.ring-player{
    position:absolute;width:50px;height:50px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:20px;
    background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.12);
    transition:all .3s;
}
.ring-player.eliminated{opacity:0.2;border-color:rgba(255,0,0,0.3)}
.ring-player.impostor-reveal{border-color:#ef4444;box-shadow:0 0 20px rgba(239,68,68,0.3)}