:root{--bg:#0C0D10;--s1:#13151A;--s2:#1C1F26;--s3:#252830;--amber:#F5C842;--red:#E8453C;--green:#3EC97A;--purple:#9B7EFF;--text:#DDE1E8;--muted:#5A5F6E;--border:rgba(255,255,255,.07);--bord2:rgba(255,255,255,.13)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:'Barlow',sans-serif;display:flex;justify-content:center}
#app{width:100%;max-width:520px;padding:0 18px 72px;min-height:100vh}
.hidden{display:none!important}.screen{display:flex;flex-direction:column;gap:16px;padding-top:20px}.strip{padding:22px 0 16px;border-bottom:1px solid var(--border);margin-bottom:4px}
.label{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-weight:600}.title{font-family:'Barlow Condensed',sans-serif;font-size:54px;font-weight:700;line-height:.95}.amber{color:var(--amber)}.red{color:var(--red)}.green{color:var(--green)}.purple{color:var(--purple)}.muted{color:var(--muted)}
.card{background:var(--s1);border:1px solid var(--border);border-radius:7px;padding:18px}.card+.card{margin-top:0}.info{font-size:14px;color:var(--muted);line-height:1.6}.center{text-align:center}.err{font-size:13px;color:var(--red);line-height:1.5}.warning{background:rgba(232,69,60,.09);border:1px solid rgba(232,69,60,.34);border-radius:7px;padding:14px 16px;color:#f28e88;font-size:14px;line-height:1.5}.warning a{color:var(--amber);font-weight:600}
input,select,textarea{width:100%;background:var(--s1);border:1px solid var(--bord2);border-radius:4px;color:var(--text);font:16px 'Barlow',sans-serif;padding:13px 15px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--amber)}input::placeholder,textarea::placeholder{color:var(--muted)}textarea{resize:vertical;min-height:88px}
.btn{width:100%;padding:14px 18px;border-radius:4px;font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;letter-spacing:.7px;cursor:pointer;border:1px solid transparent;min-height:48px}.btn:disabled{opacity:.32;cursor:not-allowed}.btn:active{transform:scale(.985)}.btn-amber{background:var(--amber);color:#0C0D10;border-color:var(--amber)}.btn-ghost{background:transparent;color:var(--text);border-color:var(--bord2)}.btn-green{background:rgba(62,201,122,.12);color:var(--green);border-color:rgba(62,201,122,.3)}.btn-danger{background:rgba(232,69,60,.12);color:var(--red);border-color:rgba(232,69,60,.3)}.btn-purple{background:rgba(155,126,255,.12);color:var(--purple);border-color:rgba(155,126,255,.3)}
.row{display:flex;align-items:center;gap:10px}.row>*{min-width:0}.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}.stack{display:flex;flex-direction:column;gap:10px}.p-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);min-height:48px}.p-row:last-child{border-bottom:none}.av{width:34px;height:34px;border-radius:4px;background:var(--s2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font:13px 'JetBrains Mono',monospace;color:var(--amber)}.av.dim{opacity:.35}
.tag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:3px;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.5px}.tag-amber{background:rgba(245,200,66,.12);color:var(--amber)}.tag-green{background:rgba(62,201,122,.12);color:var(--green)}.tag-red{background:rgba(232,69,60,.12);color:var(--red)}.tag-purple{background:rgba(155,126,255,.12);color:var(--purple)}.tag-muted{background:var(--s2);color:var(--muted)}
.room-card{background:var(--s1);border:1px solid var(--border);border-radius:7px;padding:16px;cursor:pointer}.room-card:hover{border-color:var(--bord2);background:var(--s2)}.room-card.in-game{border-color:rgba(245,200,66,.2)}
.cat-grid{display:flex;flex-wrap:wrap;gap:8px}.cat-chip{padding:7px 12px;border-radius:4px;font:600 13px 'Barlow Condensed',sans-serif;border:1px solid var(--bord2);background:var(--s2);color:var(--muted);cursor:pointer}.cat-chip.selected{background:rgba(245,200,66,.12);border-color:var(--amber);color:var(--amber)}
.settings-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--s1);border:1px solid var(--border);border-radius:7px;padding:15px 17px;color:var(--text);cursor:pointer}.settings-toggle:hover{border-color:var(--bord2);background:var(--s2)}.settings-toggle-title{font:600 17px 'Barlow Condensed',sans-serif;letter-spacing:.4px}.settings-summary{font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-chevron{font:600 24px 'Barlow Condensed',sans-serif;color:var(--muted);line-height:1}.settings-panel{padding:0 18px}.settings-section{padding:17px 0;border-bottom:1px solid var(--border)}.settings-section:last-child{border-bottom:none}.settings-section-head{margin-bottom:12px}.compact-btn{width:auto;min-height:0;padding:7px 11px;font-size:13px;flex:0 0 auto}.disconnect-warning{color:#f28e88}

.vote-btn{width:100%;padding:13px 15px;background:var(--s1);border:1px solid var(--bord2);border-radius:4px;color:var(--text);text-align:left;font:15px 'Barlow',sans-serif;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:52px}.vote-btn:hover{border-color:var(--amber);background:var(--s2)}
.reveal-circle{width:116px;height:116px;border-radius:50%;background:var(--amber);color:#0C0D10;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;margin:22px auto;font:700 15px 'Barlow Condensed',sans-serif}.word-big{font:700 54px 'Barlow Condensed',sans-serif;letter-spacing:2px;color:var(--amber);text-align:center;line-height:1}.imp-big{font:700 40px 'Barlow Condensed',sans-serif;color:var(--red);text-align:center;line-height:1.05}.question-big{font:600 30px 'Barlow Condensed',sans-serif;text-align:center;line-height:1.25}.hint-box{background:rgba(155,126,255,.08);border:1px solid rgba(155,126,255,.25);border-radius:6px;padding:14px 16px;text-align:center;margin-top:14px}.hint-text{font-size:16px;color:var(--purple);font-style:italic}.stopwatch{font:28px 'JetBrains Mono',monospace;color:var(--muted);text-align:center;padding:8px 0}
.category-card{display:inline-block;min-width:190px;max-width:100%;margin:0 auto 20px;padding:13px 22px;border-radius:7px;background:rgba(245,200,66,.09);border:1px solid rgba(245,200,66,.32);text-align:center}.category-card .label{color:var(--amber);margin-bottom:4px}.category-name{font:700 27px 'Barlow Condensed',sans-serif;line-height:1.05;letter-spacing:1px;text-transform:uppercase;color:var(--text);overflow-wrap:anywhere}.category-imposter{background:rgba(155,126,255,.08);border-color:rgba(155,126,255,.32);margin-top:18px;margin-bottom:2px}.category-imposter .label{color:var(--purple)}.result-category{margin-bottom:18px}.ready-progress{padding:13px 16px}
.bar-track{height:5px;background:var(--s3);border-radius:3px;overflow:hidden;margin-top:8px}.bar-fill{height:100%;background:var(--amber);border-radius:3px;transition:width .3s ease}.bar-fill.imp{background:var(--red)}.result-player{padding:11px 0;border-bottom:1px solid var(--border)}.result-player:last-child{border-bottom:none;padding-bottom:0}.result-player:first-child{padding-top:0}.result-player-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.result-player-name{font-size:15px;font-weight:500}.imposter-name{color:var(--red)}.vote-number{font:12px 'JetBrains Mono',monospace;color:var(--muted);white-space:nowrap;padding-top:2px}.result-answer{margin-top:4px;max-width:320px}.result-imposters{font:700 28px 'Barlow Condensed',sans-serif;color:var(--red);margin-top:5px;line-height:1.1}.result-detail{font-size:17px;line-height:1.35;margin-top:5px}.result-hero{padding-top:22px;padding-bottom:22px}.eliminated-card{padding:28px 20px}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}#modal-box{width:100%;max-width:390px;background:var(--s1);border:1px solid var(--bord2);border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:14px}
#connection-overlay{position:fixed;inset:0;z-index:100;background:rgba(12,13,16,.97);display:flex;align-items:center;justify-content:center;padding:24px}#connection-overlay .card{width:100%;max-width:390px;text-align:center}.spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--s3);border-top-color:var(--amber);animation:spin .85s linear infinite;margin:0 auto 14px}@keyframes spin{to{transform:rotate(360deg)}}
.answer{font-size:13px;margin-top:4px;color:var(--text);line-height:1.35}.answer::before{content:'“'}.answer::after{content:'”'}
.actions{display:flex;gap:8px}.actions .btn{width:auto;flex:1}.footer{position:fixed;bottom:14px;left:14px;right:14px;pointer-events:none}.footer-inner{max-width:520px;margin:auto;display:flex;justify-content:space-between;font:11px 'JetBrains Mono',monospace;color:var(--muted)}.footer a{color:var(--muted);pointer-events:auto;text-decoration:none}
@media(max-width:480px){.title{font-size:48px}.question-big{font-size:27px}.word-big{font-size:46px}.category-name{font-size:24px}.actions{flex-direction:column}.actions .btn{width:100%}}

.game-leave{position:fixed;top:12px;right:12px;z-index:40;width:auto;min-height:0;padding:6px 10px;border:1px solid rgba(232,69,60,.28);border-radius:4px;background:rgba(12,13,16,.82);color:rgba(242,142,136,.8);font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:.5px;cursor:pointer;opacity:.72;backdrop-filter:blur(5px)}.game-leave:hover{opacity:1;background:rgba(232,69,60,.1);border-color:rgba(232,69,60,.5);color:#f28e88}.game-leave:active{transform:scale(.97)}
@media(max-width:480px){.game-leave{top:9px;right:9px;padding:5px 9px;font-size:11px}}