: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 90% 60% at 50% 0%,rgba(139,26,22,.08) 0%,transparent 70%);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden}@media (min-width: 768px){body{background-image:radial-gradient(ellipse 100% 80% at 50% 10%,rgba(139,26,22,.12) 0%,transparent 80%)}}#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;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-danger-dark{background:linear-gradient(180deg,#8b1a1647,#8b1a161f);color:#ffdede;border:1px solid rgba(139,26,22,.82);box-shadow:none}.btn-danger-dark:hover:not(:disabled){background:linear-gradient(180deg,#8b1a1661,#8b1a162e);color:#fff;box-shadow:0 2px 12px #8b1a1640,inset 0 -1px #00000059}.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;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;inset: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:400;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-hero{background:linear-gradient(180deg,#8b1a1629,#100b0bf5);border:1px solid rgba(139,26,22,.55);border-radius:var(--radius-lg);padding:14px 16px 12px;text-align:center;box-shadow:0 0 22px #8b1a1633}.room-code-hero-label{margin-bottom:8px;color:#ffffffb8}.room-code{letter-spacing:.25em;font-size:2.4rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;text-align:center;text-shadow:0 0 20px rgba(255,255,255,.12)}.copy-room-code-btn{margin-top:10px;width:100%;border:1px solid rgba(255,255,255,.25);background:#ffffff1a;color:#fff;border-radius:8px;font-size:.88rem;font-weight:700;padding:10px 12px;cursor:pointer}.copy-room-code-btn:hover{background:#ffffff29}.room-code-hero-hint{font-size:.72rem;color:#ffffff94;margin-top:7px}.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;justify-content:space-between;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:.9rem;color:var(--text)}.setting-row-controls{display:inline-flex;align-items:center;margin-left:12px;flex-shrink:0}.setting-step-btn{width:34px;height:34px;border:1px solid var(--border2);background:#ffffff0f;color:var(--text);border-radius:6px;font-size:1.05rem;cursor:pointer}.setting-step-btn:disabled{opacity:.45;cursor:not-allowed}.setting-row-val{width:44px;text-align:center;font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--text);background:#ffffff12;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);height:34px;line-height:32px}@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)}@keyframes bloodPulse{0%,to{opacity:1}50%{opacity:.85}}.home-hero{justify-content:center;background-image:url(/image.webp);background-size:170%;background-position:center 50px;background-repeat:no-repeat;min-height:100vh;overflow:auto;position:relative;background-color:var(--bg);contain:layout style}.home-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,#000000b3,#000000d9,#000000f2);pointer-events:none}.home-overlay-atmo{position:absolute;inset:0;background:linear-gradient(45deg,rgba(139,0,0,.15) 0%,transparent 30%,transparent 70%,rgba(139,0,0,.1) 100%);pointer-events:none}.home-content{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;padding:30px 20px;contain:layout style}.home-title{font-size:6rem;font-weight:900;letter-spacing:.1em;color:#fff;text-transform:uppercase;line-height:.9;text-shadow:0 0 40px rgba(255,255,255,.8),0 0 80px rgba(139,0,0,1),0 8px 32px rgba(0,0,0,.9);margin:0 0 12px;min-height:1em}.home-subtitle{font-size:1.3rem;color:#ffffffe6;font-weight:400;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 30px rgba(139,0,0,.8),0 4px 16px rgba(0,0,0,.9)}.home-tagline{font-size:1.1rem;color:#fffc;text-align:center;font-weight:400;letter-spacing:.05em;margin-bottom:24px;text-shadow:0 2px 10px rgba(0,0,0,.8)}.home-roles{display:flex;align-items:center;gap:16px;margin-bottom:48px;padding:12px 20px;font-size:.8rem;color:#ffffffb3}.home-btn-create{font-size:1.1rem;padding:20px 48px;background:linear-gradient(135deg,#2d0808,#4d0f0f,#6d1717 60%,#8b0000);border:2px solid rgba(139,0,0,1);color:#fff;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:16px;box-shadow:0 16px 64px #8b0000cc,0 0 40px #8b0000,inset 0 1px #ffffff1a;transition:transform .3s ease,box-shadow .3s ease;text-shadow:0 2px 12px rgba(0,0,0,1),0 0 20px rgba(139,0,0,.8);cursor:pointer;position:relative;overflow:hidden;animation:bloodPulse 3s infinite ease-in-out;will-change:opacity;background-size:200% 200%}.home-btn-create:hover{transform:translateY(-2px);box-shadow:0 20px 80px #8b0000,0 0 60px #8b0000}.home-btn-join{font-size:1rem;padding:18px 40px;background:#000000b3;border:2px solid rgba(255,255,255,.3);color:#fff;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:16px;backdrop-filter:blur(20px);box-shadow:0 16px 64px #000c,inset 0 1px #ffffff1a;transition:background .3s ease,border-color .3s ease,color .3s ease;text-shadow:0 2px 12px rgba(0,0,0,1),0 0 20px rgba(255,255,255,.3);cursor:pointer}.home-btn-join:hover{background:#ffffff1a;border-color:#ffffff80}.home-section{border-top:2px solid rgba(139,0,0,.5);padding:24px 20px;margin-bottom:32px;background:#000c;border-radius:20px;backdrop-filter:blur(20px);box-shadow:0 16px 64px #000c,inset 0 1px #ffffff1a;border:1px solid rgba(139,0,0,.3);width:100%}.home-section-title{font-size:2rem;font-weight:700;margin-bottom:12px;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.5),0 0 50px rgba(139,0,0,.8);text-align:center}.home-section-heading{font-size:1.3rem;font-weight:700;margin-bottom:6px;margin-top:16px;color:#dc143c;text-shadow:0 0 20px rgba(220,20,60,.8),0 2px 8px rgba(0,0,0,1)}.home-section-text{color:#ffffffe6;font-size:.95rem;line-height:1.6;text-shadow:0 2px 12px rgba(0,0,0,1)}.home-phase-title{font-size:1.1rem;font-weight:600;margin-bottom:4px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,1),0 0 20px rgba(255,255,255,.3);display:flex;align-items:center;gap:8px}@media (max-width: 420px){.home-title{font-size:5rem;letter-spacing:.05em;margin:0 12px 12px}.home-subtitle{font-size:1rem;letter-spacing:.15em}}@media (max-width: 720px){.home-section{padding:8px}}