@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";:root{--bg: #080506;--surface: #100b0b;--surface2: #181010;--surface3: #201515;--border: rgba(255,255,255,.055);--border2: rgba(255,255,255,.11);--text: #ede8e8;--text-dim: #7a6e6e;--text-muted: #4d4242;--red: #3a0a08;--red-bright: #8b1a16;--red-light: #b83028;--red-glow: rgba(139,26,22,.18);--green: #163d25;--green-light: #2e9e55;--cyan: #163542;--yellow: #6b4c10;--radius: 6px;--radius-lg: 10px;--radius-xl: 14px;--shadow: 0 2px 16px rgba(0,0,0,.6);--shadow-lg: 0 8px 40px rgba(0,0,0,.8)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(139,26,22,.08) 0%,transparent 70%);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden}#root{min-height:100dvh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px 40px;gap:16px;min-height:100dvh}.screen-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:72px 20px 40px;min-height:100dvh}.card{background:var(--surface);border:1px solid var(--border);border-top:1.5px solid var(--red-bright);border-radius:var(--radius-lg);padding:24px 20px;width:100%;max-width:420px;box-shadow:var(--shadow),inset 0 1px #ffffff08}.card-sm{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0;overflow:hidden}.stats-strip{display:flex;align-items:stretch;width:100%;max-width:420px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.stat-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;gap:3px;border-right:1px solid var(--border)}.stat-col:last-child{border-right:none}.stat-label{font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}.stat-value{font-size:1.5rem;font-weight:900;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.stat-value.sm{font-size:1.1rem}.stat-value.red{color:var(--red-light)}.stat-value.green{color:var(--green-light)}h1{font-size:2rem;font-weight:900;line-height:1.05;letter-spacing:-.02em}h2{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}h3{font-size:1rem;font-weight:600}p{color:var(--text-dim);line-height:1.6}small{font-size:.75rem;color:var(--text-dim)}.label-cap{font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}input[type=text],.input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:1rem;padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s}input[type=text]:focus,.input:focus{border-color:var(--red-bright);box-shadow:0 0 0 3px var(--red-glow)}input[type=text]::placeholder,.input::placeholder{color:var(--text-muted)}input[type=number]{width:60px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:1rem;padding:8px 10px;outline:none;text-align:center;transition:border-color .15s}input[type=number]:focus{border-color:var(--red-bright)}.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:3px;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--red-bright);color:#fff}.badge-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.badge-green{background:var(--green)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 20px;border:none;border-radius:var(--radius);font-family:inherit;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:opacity .12s,transform .08s,box-shadow .12s;text-decoration:none;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.97) translateY(1px)}.btn:disabled{opacity:.22;cursor:not-allowed;transform:none}.btn-primary{background:var(--red-bright);color:#fff;border-bottom:2px solid rgba(0,0,0,.5);box-shadow:0 2px 12px #8b1a164d}.btn-primary:hover:not(:disabled){opacity:.88;box-shadow:0 4px 20px #8b1a1666}.btn-primary:active:not(:disabled){border-bottom-width:1px;box-shadow:none}.btn-danger{background:var(--red-bright);color:#fff;border-bottom:2px solid rgba(0,0,0,.5)}.btn-danger:hover:not(:disabled){opacity:.88}.btn-success{background:var(--green);color:#fff;border-bottom:2px solid rgba(0,0,0,.4)}.btn-success:hover:not(:disabled){opacity:.88}.btn-warning{background:var(--yellow);color:#fff;border-bottom:2px solid rgba(0,0,0,.4)}.btn-warning:hover:not(:disabled){opacity:.88}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){color:var(--text-dim);border-color:var(--border2);background:var(--surface2)}.btn-outline{background:transparent;color:var(--red-light);border:1px solid rgba(139,26,22,.4)}.btn-outline:hover:not(:disabled){background:var(--red-glow);border-color:var(--red-bright)}.btn-sm{padding:6px 12px;font-size:.68rem;width:auto}.btn-xs{padding:4px 8px;font-size:.62rem;width:auto}.role-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:3px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.role-mafia{background:var(--red-bright);color:#fff}.role-doctor{background:var(--green);color:#fff}.role-detective{background:#16354280;color:#5ac8dc;border:1px solid rgba(26,106,122,.35)}.role-villager{background:var(--surface2);color:var(--text-muted);border:1px solid var(--border)}.player-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border);transition:border-color .12s}.player-row:hover{border-color:var(--border2)}.player-row.dead{opacity:.28;text-decoration:line-through}.player-row.selected{border-color:var(--red-bright);background:var(--red-glow)}.tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}.player-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border);border-bottom:2px solid rgba(0,0,0,.5);cursor:pointer;transition:background .1s,transform .08s,border-color .1s,box-shadow .1s;text-align:center;-webkit-user-select:none;user-select:none}.player-tile:hover:not(.dead):not(.selected){background:var(--surface3);border-color:var(--border2);transform:translateY(-1px)}.player-tile:active:not(.dead){transform:translateY(1px);border-bottom-width:1px}.player-tile.selected{background:var(--red-bright);border-color:var(--red-bright);border-bottom-color:#00000080;transform:translateY(1px);border-bottom-width:1px;box-shadow:0 0 16px #8b1a1659}.player-tile.dead{opacity:.2;pointer-events:none}.player-tile-avatar{width:42px;height:42px;border-radius:5px;background:#e0cece;color:#1a0808;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:900;letter-spacing:-.02em;border-bottom:2px solid rgba(0,0,0,.16);flex-shrink:0}.player-tile.selected .player-tile-avatar{background:#ffffff2e;color:#fff;border-bottom-color:#0000004d}.player-tile-name{font-size:.62rem;font-weight:600;color:var(--text-dim);word-break:break-word;line-height:1.2}.player-tile.selected .player-tile-name{color:#fffc}.avatar{width:34px;height:34px;border-radius:5px;background:#d8c8c6;color:#1a0808;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:900;flex-shrink:0;border-bottom:2px solid rgba(0,0,0,.18)}.timer-wrap{position:relative;width:80px;height:80px}.timer-wrap svg{transform:rotate(-90deg)}.timer-ring-bg{fill:none;stroke:#ffffff0a;stroke-width:6}.timer-ring-fill{fill:none;stroke:var(--red-bright);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .9s linear}.timer-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--red-bright);border-radius:var(--radius);padding:10px 16px;font-size:.8rem;font-weight:500;z-index:9999;white-space:nowrap;animation:slideUp .18s ease;box-shadow:var(--shadow);max-width:calc(100vw - 40px)}.toast.error{border-left-color:var(--red-bright)}.toast.success{border-left-color:var(--green-light);color:var(--green-light)}.room-code{letter-spacing:.25em;font-size:2.4rem;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums}.divider{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:4px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.vote-bar-wrap,.vote-bar-track{width:100%;height:3px;background:var(--surface3);border-radius:99px;overflow:hidden}.vote-bar-fill{height:100%;background:var(--red-bright);border-radius:99px;transition:width .4s ease}.setting-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border)}.setting-row:last-child{border-bottom:none}.setting-row-label{flex:1;font-size:.84rem;color:var(--text-dim)}.setting-row-val{width:28px;text-align:center;font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.pulse{animation:pulse 2s ease-in-out infinite}.fade-in{animation:fadeIn .2s ease}.scroll-list{display:flex;flex-direction:column;gap:5px;max-height:360px;overflow-y:auto;padding-right:2px}.scroll-list::-webkit-scrollbar{width:2px}.scroll-list::-webkit-scrollbar-track{background:transparent}.scroll-list::-webkit-scrollbar-thumb{background:#ffffff12;border-radius:2px}.detective-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background:var(--surface);border:1.5px solid var(--red-bright);border-radius:var(--radius-lg);padding:28px;text-align:center;min-width:220px;box-shadow:0 0 40px #8b1a1640,var(--shadow-lg)}.detective-popup.safe{border-color:var(--green-light);box-shadow:0 0 40px #2e9e552e,var(--shadow-lg)}