*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#0A0E1A;--panel:#121930;--card:#1A2240;--border:#2A3460;
    --text:#E8EAFF;--muted:#8B95C0;--gold:#FFB830;--purple:#9A7CFF;
    --green:#32E18D;--danger:#FF4C6D;--cyan:#40D8F0;
    --radius:16px;
}
html{min-height:100%}
body{
    font-family:'Cairo',system-ui,sans-serif;color:var(--text);min-height:100vh;
    background:radial-gradient(circle at 20% 10%,rgba(154,124,255,.18),transparent 40%),
               radial-gradient(circle at 80% 80%,rgba(255,184,48,.12),transparent 35%),
               linear-gradient(160deg,#070B15,#0E1428 60%,var(--bg));
}
.page{max-width:540px;margin:0 auto;padding:1.2rem 1rem 2.5rem}
h1{font-size:1.5rem;font-weight:900;text-align:center;margin-bottom:.25rem}
.subtitle{text-align:center;font-size:.82rem;color:var(--muted);font-weight:700;margin-bottom:1.2rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin-bottom:.85rem}
.card-header{font-size:.88rem;font-weight:800;color:var(--gold);margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:.3rem}
input,select{width:100%;padding:.6rem .8rem;background:#0D1225;color:var(--text);border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;outline:none;font-family:inherit}
input:focus,select:focus{border-color:var(--purple)}
.btn{display:block;width:100%;padding:.7rem;border:none;border-radius:12px;font-size:.95rem;font-weight:800;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--purple),#7C5AFF);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),#E09E00);color:#000}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--muted)}
.btn-sm{padding:.45rem .8rem;font-size:.78rem;width:auto;display:inline-flex;align-items:center;gap:.3rem;border-radius:8px}
.fg{margin-bottom:.85rem}
.room-code{font-size:2rem;font-weight:900;text-align:center;letter-spacing:6px;color:var(--gold);margin:.5rem 0}
.player-list{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.player-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;background:rgba(255,255,255,.04);border-radius:10px;font-size:.85rem;font-weight:700;border:1px solid transparent}
.player-item.me{border-color:var(--purple)}
.player-item.eliminated{opacity:.45;text-decoration:line-through}
.player-item .badge{font-size:.62rem;padding:.1rem .35rem;border-radius:999px;font-weight:800;margin-right:auto}
.badge-host{background:rgba(255,184,48,.15);color:var(--gold)}
.badge-imp{background:rgba(255,76,109,.15);color:var(--danger)}
.badge-out{background:rgba(139,149,192,.15);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-on{background:var(--green)}.dot-off{background:var(--danger)}
.word-reveal{text-align:center;padding:1.2rem .5rem}
.word-text{font-size:1.6rem;font-weight:900;color:var(--cyan);margin:.4rem 0}
.word-label{font-size:.78rem;color:var(--muted);font-weight:700}
.imp-badge{font-size:1.1rem;font-weight:900;color:var(--danger);text-align:center;margin:.5rem 0}
.pair-card{text-align:center;padding:1rem;background:rgba(154,124,255,.08);border:1px solid rgba(154,124,255,.25);border-radius:14px;margin-bottom:.85rem}
.pair-card .arrow{font-size:1.5rem;color:var(--purple);margin:0 .4rem}
.pair-card .name{font-weight:900;font-size:1.05rem}
.pair-hint{font-size:.75rem;color:var(--muted);margin-top:.35rem}
.vote-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.vote-btn{padding:.6rem;border-radius:10px;border:1.5px solid var(--border);background:var(--panel);color:var(--text);font-weight:800;font-size:.82rem;cursor:pointer;transition:all .15s;font-family:inherit}
.vote-btn:hover{border-color:var(--purple);background:rgba(154,124,255,.1)}
.vote-btn.voted{border-color:var(--danger);background:rgba(255,76,109,.12);color:var(--danger)}
.progress-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:.6rem 0}
.progress-fill{height:100%;border-radius:3px;background:var(--purple);transition:width .3s}
.result-box{text-align:center;padding:1.5rem .5rem}
.result-title{font-size:1.3rem;font-weight:900;margin-bottom:.5rem}
.result-word{font-size:1.1rem;color:var(--cyan);font-weight:800;margin:.3rem 0}
.cat-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.cat-chip{padding:.35rem .7rem;border-radius:999px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.cat-chip.active{border-color:var(--purple);background:var(--purple);color:#fff}
.votes-remaining{text-align:center;font-size:.82rem;color:var(--gold);font-weight:800;margin:.5rem 0}
.hidden{display:none!important}
@media(max-width:420px){
    .page{padding:1rem .75rem 2rem}
    h1{font-size:1.25rem}
    .room-code{font-size:1.6rem;letter-spacing:4px}
    .vote-grid{grid-template-columns:1fr}
}