:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.home{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 2rem 6rem;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;position:relative}.home-content{text-align:center;max-width:400px;width:100%}.title{font-size:3rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,#e94560,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.1rem;color:#888;margin-bottom:3rem}.actions{display:flex;flex-direction:column;gap:1rem;margin-bottom:3rem}.btn{padding:1rem 2rem;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.game-types{text-align:left}.game-types h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:1rem}.game-list{display:flex;flex-direction:column;gap:.75rem}button.game-card{width:100%;cursor:pointer;transition:all .2s;text-align:left;color:#fff;font-family:inherit}button.game-card:hover{background:#ffffff1a;border-color:#e94560;transform:translateY(-2px)}.game-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.game-card.coming-soon{opacity:.5;cursor:not-allowed}.game-icon{font-size:1.5rem}.game-name{flex:1;font-weight:500}.badge{font-size:.7rem;padding:.25rem .5rem;background:#ffffff1a;border-radius:4px;text-transform:uppercase}.badge.info{background:#3b82f633;color:#60a5fa}.footer{position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;padding:0 1rem}.footer a{color:#666;text-decoration:none;font-size:.9rem}.footer a:hover{color:#888}.footer .connection-status{display:block;margin-bottom:.5rem;font-size:.8rem}.footer .connection-status.connected{color:#4ade80}.footer .connection-status.disconnected{color:#f87171}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal{background:#1a1a2e;border-radius:16px;padding:2rem;max-width:400px;width:100%;border:1px solid rgba(255,255,255,.1)}.modal.modal-wide{max-width:550px;max-height:90vh;overflow-y:auto}.modal h2{margin-bottom:.5rem;font-size:1.5rem}.modal p{color:#888;margin-bottom:1.5rem}.modal input{width:100%;padding:1rem;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff0d;color:#fff;font-size:1.1rem;margin-bottom:1.5rem}.modal input:focus{outline:none;border-color:#e94560}.modal input::placeholder{color:#666}.modal-actions{display:flex;gap:1rem}.modal-actions .btn{flex:1}.active-room-banner{background:#e945601a;border:1px solid rgba(233,69,96,.3);border-radius:12px;padding:1rem;margin-bottom:1rem;text-align:center}.active-room-banner span{display:block;margin-bottom:.75rem;font-size:.95rem}.active-room-banner strong{color:#e94560;font-family:monospace;letter-spacing:.1em}.active-room-actions{display:flex;gap:.5rem;justify-content:center}.active-room-actions .btn{padding:.5rem 1rem;font-size:.9rem}.btn-text{background:transparent;border:none;color:#666;cursor:pointer;text-decoration:underline}.role-card-container{position:relative;width:100%;max-width:320px;height:400px;margin:0 auto;border-radius:20px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab;background:#0a0a0f}.role-card-container:active{cursor:grabbing}.role-card-container.dead{opacity:.7}.role-revealed{position:absolute;inset:0;background:#0a0a0f;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;transition:transform .1s ease-out;color:#e5e5e5}.role-type-badge{width:32px;height:32px;border:1px solid #333;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;color:#888;margin-bottom:1rem}.role-name{font-size:1.75rem;font-weight:600;letter-spacing:.02em;margin-bottom:.25rem;color:#fff}.role-team{font-size:.85rem;color:#666;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.5rem}.role-divider{width:40px;height:1px;background:#333;margin-bottom:1.5rem}.role-ability{font-size:.9rem;line-height:1.6;color:#999;max-width:280px}.status-line{position:absolute;bottom:1.5rem;display:flex;gap:1rem;font-size:.7rem;letter-spacing:.15em;color:#555}.role-cover{position:absolute;inset:0;background:#0f0f14;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1);border:1px solid #1a1a1f;border-radius:20px}.role-cover.dragging{transition:none}.role-cover.locked{cursor:not-allowed;background:#08080c}.role-cover.locked .cover-icon{color:#333}.role-cover.locked .cover-text{color:#444}.role-cover.locked .cover-hint{color:#2a2a2a}.cover-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.cover-icon{color:#444}.cover-icon svg{width:48px;height:48px}.cover-text{font-size:1.25rem;font-weight:500;color:#555;letter-spacing:.05em}.cover-hint{font-size:.8rem;color:#333;text-align:center;max-width:200px}.peek-indicator{position:absolute;bottom:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.peek-line{width:32px;height:3px;background:#222;border-radius:2px}.peek-chevrons{color:#333;font-size:1.25rem;transform:rotate(-90deg);animation:peek-pulse 2s ease-in-out infinite}@keyframes peek-pulse{0%,to{opacity:.3}50%{opacity:.6}}@media(max-width:400px){.role-card-container{height:360px;border-radius:16px}.role-name{font-size:1.5rem}.role-ability{font-size:.85rem}.cover-icon svg{width:40px;height:40px}}.role-card-container:active .role-cover:not(.dragging){transform:scale(.99)}.nomination-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}.nomination-overlay.blocked{background:#8b0000e6}.nomination-content{text-align:center;padding:2rem}.nomination-icon{font-size:3rem;margin-bottom:1rem;animation:scaleIn .5s cubic-bezier(.175,.885,.32,1.275)}.nomination-content h2{font-size:1.75rem;font-weight:700;margin-bottom:1rem;letter-spacing:.05em;animation:slideDown .4s ease-out}.nomination-names{font-size:1.25rem;display:flex;align-items:center;justify-content:center;gap:.75rem;animation:slideUp .4s ease-out .1s both}.nomination-names .nominator{color:#fff;font-weight:600}.nomination-names .arrow{color:#888}.nomination-names .nominated{color:#f59e0b;font-weight:700}.nomination-status{margin-top:1rem;color:#888;font-size:.9rem;animation:fadeIn .5s ease-out .3s both}.ability-result{font-size:1.1rem;color:#ff6b6b;margin-bottom:.5rem}.voting-panel{padding:1.5rem;text-align:center}.voting-panel h3{font-size:1.5rem;font-weight:700;margin-bottom:.75rem}.vote-question{font-size:1.1rem;margin-bottom:1.25rem}.vote-question strong{color:#f59e0b}.vote-buttons{display:flex;gap:1.5rem;justify-content:center;margin:1.5rem 0}.btn-vote{width:90px;height:90px;border-radius:50%;font-size:1.25rem;font-weight:700;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}.btn-yes{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px 15px #22c55e66}.btn-no{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px #ef444466}.votes-needed{color:#888;font-size:.9rem}.ghost-indicator{background:#ffffff1a;padding:.5rem 1rem;border-radius:1rem;margin-bottom:1rem;font-size:.9rem;display:inline-block}.btn-ghost-skip{background:transparent;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;padding:.5rem 1rem;border-radius:.5rem;margin-top:1rem;cursor:pointer;transition:background .2s}.btn-ghost-skip:hover{background:#ffffff1a}.voting-panel.voted .checkmark{font-size:3rem;color:#22c55e;margin-bottom:.5rem}.voting-panel.ghost-used .ghost-icon{font-size:3rem;margin-bottom:.5rem;opacity:.5}.vote-progress{color:#888;font-size:.9rem;margin-top:.5rem}.hand-instruction{display:flex;flex-direction:column;align-items:center;margin:1.5rem 0}.hand-instruction .hand-icon{font-size:3rem;margin-bottom:.5rem}.host-counts{color:#666;font-size:.85rem}.vote-result-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}.vote-result-overlay.executed{background:linear-gradient(135deg,#8b0000,#2d0000)}.vote-result-overlay.survived{background:linear-gradient(135deg,#006400,#002d00)}.vote-result-content{text-align:center;padding:2rem}.result-icon{font-size:4rem;animation:scaleIn .5s cubic-bezier(.175,.885,.32,1.275)}.vote-result-content h2{font-size:2rem;font-weight:700;margin:1rem 0 .5rem;letter-spacing:.05em;animation:slideDown .4s ease-out .1s both}.result-name{font-size:1.25rem;margin-bottom:1rem;animation:fadeIn .5s ease-out .2s both}.vote-count{font-size:1rem;opacity:.8;animation:fadeIn .5s ease-out .3s both}.yes-count{color:#4ade80}.no-count{color:#f87171}.vote-separator{margin:0 .5rem;opacity:.5}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.phone{min-height:100vh;display:flex;flex-direction:column;background:#1a1a2e;color:#fff}.phone-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#0000004d}.room-code{font-family:monospace;font-size:1rem;color:#666}.header-buttons{display:flex;gap:.5rem;align-items:center}.btn-roles,.btn-players{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-roles:hover,.btn-players:hover{background:#ffffff1a;border-color:#ffffff80}.btn-players{border-color:#4ade8080;color:#4ade80}.phone-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem}.player-name{font-size:1.5rem;font-weight:600;margin-bottom:2rem;color:#e94560}.phase-lobby .player-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}.player-chip{padding:.5rem 1rem;background:#ffffff1a;border-radius:20px;font-size:.9rem}.hint{color:#666;font-size:.9rem}.role-card{background:linear-gradient(135deg,#2a2a4e,#1a1a2e);border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;text-align:center;margin-bottom:2rem;width:100%;max-width:280px}.role-header{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:.5rem}.role-name{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.role-team{font-size:.9rem;color:#888;margin-bottom:1rem}.role-ability{font-size:.85rem;color:#aaa;line-height:1.4}.phase-night{text-align:center}.phone.phase-night{background:linear-gradient(135deg,#0f0f1e,#1a1a2e)}.phase-day{text-align:center}.phone.phase-day{background:linear-gradient(135deg,#2e2a1a,#1e1a16)}.day-actions{display:flex;gap:1rem}.btn-action{padding:1rem 2rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:1rem;cursor:pointer}.phase-voting{text-align:center}.vote-buttons{display:flex;gap:1rem;margin-top:2rem}.btn-vote{flex:1;padding:2rem;border:none;border-radius:16px;font-size:1.5rem;cursor:pointer;transition:transform .1s}.btn-vote:active{transform:scale(.95)}.btn-yes{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.btn-no{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.btn-leave{padding:.5rem 1rem;background:#ffffff1a;border:none;border-radius:8px;color:#888;font-size:.8rem;cursor:pointer}.btn-leave:hover{background:#fff3}.error-banner{background:#dc2626;color:#fff;padding:.75rem 1rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:1rem}.error-banner button{padding:.25rem .75rem;background:#fff3;border:none;border-radius:4px;color:#fff;cursor:pointer}.player-chip.disconnected{opacity:.5}.host-badge,.you-badge{margin-left:.5rem;padding:.125rem .5rem;background:#e94560;border-radius:4px;font-size:.7rem;text-transform:uppercase}.waiting-text{color:#666;font-style:italic}.host-controls{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;width:100%;max-width:300px}.btn-danger{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;padding:1rem 2rem;border:none;border-radius:12px;font-size:1rem;cursor:pointer}.action-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.phase-setup,.phase-playing{text-align:center}.day-card{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}.card-back{width:200px;height:280px;background:linear-gradient(135deg,#2a1a3e,#1a1a2e,#2a1a3e);border:3px solid #4a3a5e;border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}.card-back:before{content:"";position:absolute;inset:8px;border:2px solid rgba(255,255,255,.1);border-radius:12px}.card-back:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px)}.card-back-design{display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:1}.card-icon{font-size:3rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.card-title{font-size:1rem;font-weight:600;color:#fff9;text-transform:uppercase;letter-spacing:.15em}.day-hint{margin-top:1rem;color:#888;font-size:.9rem;font-style:italic}.phase-ended{text-align:center}.modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100;animation:fadeIn .2s ease-out}.modal-content{background:#1a1a2e;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;max-width:320px;width:100%;text-align:center}.modal-content h3{margin:0 0 1rem;font-size:1.2rem}.nominate-player-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.nominate-player-btn{padding:1rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:1rem;cursor:pointer;transition:all .15s ease}.nominate-player-btn:hover{background:#e945604d;border-color:#e94560}.nominate-player-btn:active{transform:scale(.98)}.btn-nominate{background:linear-gradient(135deg,#e94560,#d63850);color:#fff;padding:1.25rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:16px}.voting-section{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;margin-top:1rem}.vote-prompt{text-align:center;font-size:1.1rem}.vote-prompt strong{color:#e94560}.vote-buttons{display:flex;gap:1.5rem;width:100%;max-width:300px}.btn-vote{flex:1;padding:2rem 1rem;border:none;border-radius:20px;font-size:1.5rem;font-weight:700;cursor:pointer;transition:transform .1s,opacity .2s}.btn-vote:active:not(.disabled){transform:scale(.95)}.btn-vote.btn-yes{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.btn-vote.btn-no{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.btn-vote.disabled{opacity:.5;cursor:not-allowed}.vote-submitted{color:#888;font-style:italic;text-align:center}.hand-vote-message{font-size:1.3rem;color:#e94560;font-weight:600;text-align:center;margin-top:1rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#0a0a14;color:#fff;overflow-x:hidden;overflow-y:auto}.screen-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#00000080}.game-title{font-size:1.2rem;font-weight:600;color:#e94560}.screen-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:1rem 1rem 2rem}@media(min-width:768px){.screen-main{align-items:center;padding:2rem}}.lobby-screen{display:flex;flex-direction:column;gap:2rem;align-items:center;width:100%;max-width:1200px;padding:1rem}@media(min-width:768px){.lobby-screen{flex-direction:row;gap:4rem}}.join-info{text-align:center;flex-shrink:0}.join-info h2{margin-bottom:1rem;font-size:1.5rem}.room-code-display{font-size:2.5rem;font-weight:700;font-family:monospace;letter-spacing:.2em;margin-bottom:1rem;background:linear-gradient(135deg,#e94560,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media(min-width:768px){.room-code-display{font-size:4rem;margin-bottom:1.5rem}}.join-url{font-size:.8rem;color:#666;margin-top:1rem}.player-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;flex:1}.player-list-container{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:.5rem}.player-list-sortable{display:flex;flex-direction:column;gap:.5rem;width:100%}.seating-hint{font-size:.85rem;color:#666;font-style:italic;margin-top:.5rem}.player-card{display:flex;flex-direction:row;align-items:center;gap:1rem;padding:1rem 1.5rem;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;min-width:120px;transition:transform .15s ease,box-shadow .15s ease}.player-card.sortable{flex-direction:row;justify-content:flex-start}.player-card.can-drag{cursor:grab}.player-card.can-drag:active{cursor:grabbing}.player-card.dragging{box-shadow:0 8px 24px #0006;background:#ffffff1a;border-color:#e94560}.player-card .drag-handle{margin-left:auto;color:#666;font-size:1.2rem;letter-spacing:.1em}.player-card .seat{font-size:.8rem;color:#666}.player-card .name{font-size:1.1rem;font-weight:500}.waiting{color:#666;font-style:italic}.btn-start{margin-top:2rem;padding:1rem 3rem;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:12px;color:#fff;font-size:1.2rem;font-weight:600;cursor:pointer}.host-controls{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}.btn-grimoire{padding:.75rem 1.5rem;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-grimoire:hover{transform:translateY(-2px);box-shadow:0 4px 12px #9b59b666}.btn-secondary{padding:.75rem 1.5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:1rem;cursor:pointer}.btn-danger{padding:.75rem 1.5rem;background:#e74c3c33;border:1px solid #e74c3c;border-radius:8px;color:#e74c3c;font-size:1rem;cursor:pointer}.btn-primary.btn-large{padding:1rem 2rem;background:linear-gradient(135deg,#646cff,#535bf2);border:none;border-radius:8px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer}.min-players{color:#666;margin-top:1rem}.player-circle{position:relative;width:80vmin;height:80vmin;max-width:600px;max-height:600px}.player-token{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem}.token-name{padding:.5rem 1rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:20px;font-size:.9rem;white-space:nowrap}.player-token.dead .token-name{opacity:.5;text-decoration:line-through}.shroud{font-size:1.5rem}.night-screen{text-align:center}.screen.phase-night{background:linear-gradient(180deg,#0a0a14,#1a0a1e)}.phase-title{font-size:2.5rem;margin-bottom:2rem}.night-message{margin-top:2rem;font-size:1.5rem;color:#666}.day-screen{text-align:center}.screen.phase-day{background:linear-gradient(180deg,#1a1a0a,#0a0a14)}.day-info{margin-top:2rem;font-size:1.5rem;color:#888}.voting-screen{text-align:center}.nomination-display{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:1.5rem;margin-bottom:2rem}.nomination-display .arrow,.nomination-display .nominated{color:#e94560}.vote-tally{display:flex;gap:3rem;justify-content:center;margin-top:2rem;font-size:2rem}.finished-screen{text-align:center}.finished-screen h1{font-size:3rem;margin-bottom:2rem}.lobby-main{display:flex;flex-direction:column;align-items:center;gap:1.5rem;flex:1}.game-settings-bar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#ffffff0d;border-radius:8px;flex-wrap:wrap;justify-content:center}.game-type-label{font-weight:500;color:#e94560}.mode-label{padding:.25rem .75rem;background:#ffffff1a;border-radius:4px;font-size:.85rem}.btn-icon{background:transparent;border:none;font-size:1.2rem;cursor:pointer;padding:.25rem;opacity:.7;transition:opacity .2s}.btn-icon:hover{opacity:1}.settings-panel{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem 1.5rem;width:100%;max-width:400px}.settings-panel h4{margin:0 0 .75rem;font-size:.9rem;color:#888;text-transform:uppercase;letter-spacing:.05em}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.setting-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.25rem 0}.setting-indicator{font-size:.75rem}.setting-item.enabled .setting-indicator{color:#22c55e}.setting-item.disabled .setting-indicator,.setting-item.disabled .setting-name{color:#666}.settings-panel-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-panel-modal{background:#1a1a24;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-panel-modal .config-actions .btn-primary{background:var(--color-primary, #646cff)}.settings-panel-modal .config-actions .btn-secondary{border-color:#444}.vote-progress-banner{background:linear-gradient(135deg,#8b00004d,#3c00004d);border:1px solid rgba(255,100,100,.3);border-radius:12px;padding:1.5rem 2rem;margin:1.5rem auto;max-width:400px;text-align:center;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #ff646433}50%{box-shadow:0 0 30px #ff646466}}.vote-target{font-size:1.3rem;margin-bottom:.75rem}.vote-target strong{color:#f59e0b}.vote-count{font-size:2rem;font-weight:700;color:#fff;margin-bottom:.5rem}.votes-needed{font-size:.9rem;color:#888}.game-info{text-align:center;color:#888;margin:1rem 0}.playing-screen{display:flex;flex-direction:column;align-items:center}.join{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff}.join-content{width:100%;max-width:360px}.join h1{text-align:center;margin-bottom:2rem;font-size:2rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.9rem;color:#888}.form-group input{width:100%;padding:1rem;font-size:1.25rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;text-align:center;letter-spacing:.2em;box-sizing:border-box}.form-group input::placeholder{color:#555;letter-spacing:normal}.form-group input:focus{outline:none;border-color:#e94560}#playerName{letter-spacing:normal;text-align:left}.error{background:#e9456033;border:1px solid #e94560;color:#ff6b6b;padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;text-align:center;font-size:.9rem}.join .btn{width:100%;margin-top:.5rem}.btn-text{background:none;border:none;color:#666;cursor:pointer;padding:1rem;font-size:1rem}.btn-text:hover{color:#888}.characters-page{min-height:100vh;background:#0a0a14;color:#fff}.characters-header{display:flex;align-items:center;gap:1rem;padding:1rem;background:#0000004d;position:sticky;top:0;z-index:10}.characters-header h1{flex:1;font-size:1.25rem;margin:0}.script-name{font-size:.8rem;color:#888;padding:.25rem .75rem;background:#ffffff1a;border-radius:12px}.filter-tabs{display:flex;gap:.5rem;padding:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.filter-tab{padding:.5rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;color:#888;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:all .2s}.filter-tab:hover{background:#ffffff1a}.filter-tab.active{background:var(--tab-color, #e94560);border-color:var(--tab-color, #e94560);color:#fff}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;padding:0 1rem 2rem}.character-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;text-align:center;cursor:pointer;transition:all .2s}.character-card:hover{background:#ffffff1a;border-color:var(--card-color);transform:translateY(-2px)}.character-type{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.character-name{font-size:1rem;font-weight:600;color:#fff;margin-bottom:.25rem}.character-team{font-size:.75rem;color:#666}.character-modal{background:#1a1a2e;border-radius:16px;max-width:400px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:#0000004d;border:none;border-radius:50%;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s}.modal-close:hover{background:#00000080}.ability-section,.tips-section{margin-bottom:1.5rem}.ability-section h3,.tips-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:.5rem}.ability-text{font-size:1rem;line-height:1.5;color:#fff}.tips-text{font-size:.9rem;line-height:1.5;color:#aaa;font-style:italic}.night-info{display:flex;flex-wrap:wrap;gap:.5rem}.night-badge{padding:.5rem 1rem;background:#9333ea33;border:1px solid rgba(147,51,234,.4);border-radius:20px;font-size:.8rem;color:#a78bfa}.night-badge.passive{background:#64646433;border-color:#64646466;color:#888}@media(max-width:400px){.character-grid{grid-template-columns:repeat(2,1fr)}.filter-tabs{padding:.75rem}.filter-tab{padding:.4rem .8rem;font-size:.75rem}}.debug-page{min-height:100vh;background:#0a0a14;color:#fff}.debug-header{display:flex;align-items:center;gap:1rem;padding:1rem;background:#00000080;border-bottom:1px solid rgba(255,255,255,.1)}.debug-header h1{flex:1;font-size:1.25rem;margin:0}.debug-badge{padding:.25rem .5rem;background:#f59e0b;color:#000;font-size:.7rem;font-weight:700;border-radius:4px}.btn-back{padding:.5rem 1rem;background:#ffffff1a;border:none;border-radius:8px;color:#fff;cursor:pointer}.debug-layout{display:grid;grid-template-columns:1fr 320px 1fr;gap:1rem;padding:1rem;max-width:1600px;margin:0 auto}@media(max-width:1200px){.debug-layout{grid-template-columns:1fr}}.debug-panel{display:flex;flex-direction:column;gap:1rem}.debug-section{background:#ffffff0d;border-radius:12px;padding:1rem}.debug-section h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:#888;margin:0 0 1rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-header h2{margin:0}.clear-btn{padding:.25rem .5rem;background:#ffffff1a;border:none;border-radius:4px;color:#888;font-size:.75rem;cursor:pointer}.phase-display{padding:1rem;text-align:center;font-size:1.25rem;font-weight:600;border-radius:8px;margin-bottom:1rem}.phase-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.phase-btn{padding:.5rem .75rem;background:#ffffff1a;border:1px solid transparent;border-radius:6px;color:#888;font-size:.75rem;cursor:pointer;text-transform:capitalize}.phase-btn:hover{background:#ffffff26}.phase-btn.active{background:#fff3;border-color:#fff;color:#fff}.day-controls{display:flex;align-items:center;justify-content:center;gap:1rem}.day-controls button{width:32px;height:32px;background:#ffffff1a;border:none;border-radius:6px;color:#fff;font-size:1.25rem;cursor:pointer}.trigger-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.trigger-btn{padding:.75rem;border:none;border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:transform .1s,opacity .1s}.trigger-btn:hover{transform:scale(1.02)}.trigger-btn:active{transform:scale(.98)}.trigger-btn.info{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.trigger-btn.action{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff}.trigger-btn.death{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}.trigger-btn.good{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.trigger-btn.evil{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff}.player-controls{display:flex;gap:.5rem;margin-bottom:1rem}.player-controls button{flex:1;padding:.5rem;background:#ffffff1a;border:none;border-radius:6px;color:#fff;font-size:.75rem;cursor:pointer}.player-list{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto}.player-row{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#ffffff0d;border-radius:8px;cursor:pointer;transition:background .2s}.player-row:hover{background:#ffffff1a}.player-row.dead{opacity:.5}.player-row.viewing{border:2px solid #3b82f6}.player-name{font-weight:500;min-width:60px}.player-role{flex:1;font-size:.8rem}.player-badges{display:flex;gap:.25rem}.badge{padding:.125rem .375rem;font-size:.65rem;border-radius:4px;text-transform:uppercase}.badge.dead{background:#ef444433;color:#f87171}.badge.drunk{background:#8b5cf633;color:#a78bfa}.badge.poisoned{background:#10b98133;color:#34d399}.view-as-btn{padding:.25rem .5rem;background:#3b82f633;border:1px solid #3b82f6;border-radius:4px;color:#60a5fa;font-size:.7rem;cursor:pointer}.debug-preview{position:sticky;top:1rem}.debug-preview h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:#888;margin:0 0 1rem;text-align:center}.phone-frame{background:#1a1a1a;border-radius:32px;padding:12px;box-shadow:0 20px 50px #00000080}.phone-screen{background:#0a0a14;border-radius:24px;min-height:500px;overflow:hidden}.no-player{display:flex;flex-direction:column;align-items:center;justify-content:center;height:500px;color:#666;text-align:center;padding:2rem;gap:.5rem}.no-player .hint{font-size:.8rem;color:#888}.phase-indicator{margin-top:1rem;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;text-align:center}.player-view{height:100%}.player-view-header{padding:2rem 1rem;text-align:center}.role-type{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;opacity:.8;margin-bottom:.5rem}.role-name{font-size:1.75rem;font-weight:700;margin-bottom:.25rem}.role-team{font-size:.9rem;opacity:.9}.player-view-body{padding:1.5rem}.player-view-body .ability-section h4,.status-section h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#888;margin:0 0 .5rem}.player-view-body .ability-section p{font-size:.95rem;line-height:1.5;margin:0 0 1.5rem}.status-badges{display:flex;gap:.5rem;margin-bottom:1.5rem}.status{padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:500}.status.alive{background:#10b98133;color:#34d399}.status.dead{background:#ef444433;color:#f87171}.status.poisoned{background:#8b5cf633;color:#a78bfa}.phase-info{text-align:center}.current-phase{display:inline-block;padding:.75rem 1.5rem;border-radius:20px;font-weight:600}.notification-list{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto}.empty-state{color:#666;font-size:.85rem;text-align:center;padding:1rem}.notification{padding:.75rem;border-radius:8px;border-left:3px solid}.notification.info{background:#3b82f61a;border-color:#3b82f6}.notification.action{background:#8b5cf61a;border-color:#8b5cf6}.notification.result{background:#10b9811a;border-color:#10b981}.notification.death{background:#ef44441a;border-color:#ef4444}.notif-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.notif-type{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#888}.notif-time{font-size:.65rem;color:#666}.notif-title{font-weight:600;font-size:.9rem;margin-bottom:.25rem}.notif-message{font-size:.85rem;color:#ccc;line-height:1.4}.character-grid-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.char-btn{display:flex;flex-direction:column;align-items:center;padding:.5rem;background:#ffffff0d;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s}.char-btn:hover{background:#ffffff1a}.char-type{font-size:.65rem;font-weight:700}.char-name{font-size:.7rem;color:#fff;text-align:center}.modal-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.debug-modal,.character-modal{background:#1a1a2e;border-radius:16px;max-width:400px;width:100%;position:relative}.modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:#0000004d;border:none;border-radius:50%;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;padding:0}.debug-modal{padding:2rem}.debug-modal h2{margin:0 0 .5rem;font-size:1.25rem}.player-role-display{font-size:1rem;margin-bottom:1.5rem}.toggle-list{display:flex;flex-direction:column;gap:1rem}.toggle-row{display:flex;align-items:center;gap:.75rem;cursor:pointer}.toggle-row input[type=checkbox]{width:20px;height:20px;cursor:pointer}.modal-header{padding:2rem;text-align:center;border-radius:16px 16px 0 0}.modal-type{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;opacity:.8;margin-bottom:.5rem}.modal-name{font-size:1.75rem;font-weight:700;margin:0 0 .25rem}.modal-team{font-size:.9rem;opacity:.9}.modal-body{padding:1.5rem}.modal-body .ability-section h3,.modal-body .tips-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#888;margin:0 0 .5rem}.modal-body .ability-section p,.modal-body .tips-section p{font-size:1rem;line-height:1.5;margin:0 0 1rem}.modal-body .tips-section p{color:#aaa;font-style:italic}.narrator-view{display:flex;flex-direction:column;width:100%;height:100%;min-height:500px;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}.narrator-compact{min-height:300px}.narrator-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.1)}.narrator-title{font-size:1.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.narrator-phase{display:flex;align-items:center;gap:.75rem}.phase-name{padding:.25rem .75rem;background:#ffffff26;border-radius:4px;font-size:.875rem;text-transform:capitalize}.day-number{font-size:.875rem;opacity:.7}.phase-ended{color:#fbbf24;font-weight:600}.narrator-circle{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.narrator-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;max-width:200px;text-align:center;z-index:1}.current-action{padding:1rem;background:#00000080;border-radius:12px;border:2px solid rgba(255,255,255,.2)}.action-label{font-size:.75rem;text-transform:uppercase;opacity:.7;margin-bottom:.25rem}.action-player{font-size:1.125rem;font-weight:600;color:#fbbf24}.action-ability{font-size:.875rem;opacity:.8;margin-top:.25rem}.narrator-token{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform .2s,z-index .2s;z-index:2}.narrator-token:hover{transform:translate(-50%,-50%) scale(1.1);z-index:10}.narrator-token.selected{transform:translate(-50%,-50%) scale(1.15);z-index:11}.narrator-token.acting{animation:narrator-pulse 2s ease-in-out infinite}@keyframes narrator-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.token-name{font-size:.75rem;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.token-role{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:3px solid rgba(255,255,255,.3);box-shadow:0 4px 12px #0006;transition:border-color .2s}.narrator-compact .token-role{width:36px;height:36px}.narrator-token.selected .token-role{border-color:#fbbf24;box-shadow:0 0 20px #fbbf2480}.role-initial{font-size:1.5rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.5)}.narrator-compact .role-initial{font-size:1rem}.role-name{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:.625rem;white-space:nowrap;background:#000c;padding:2px 6px;border-radius:3px;opacity:0;transition:opacity .2s}.narrator-token:hover .role-name{opacity:1}.token-statuses{display:flex;gap:2px;position:absolute;top:-6px;right:-6px}.status-badge{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.625rem;border:1px solid rgba(255,255,255,.3);box-shadow:0 2px 4px #0000004d}.death-shroud{position:absolute;inset:-4px;border-radius:50%;background:#0009;pointer-events:none}.death-shroud:after{content:"☠️";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;filter:grayscale(.5)}.narrator-token.dead .token-role{filter:grayscale(.8);opacity:.7}.narrator-token.dead .token-name{text-decoration:line-through;opacity:.5}.narrator-queue{padding:.75rem 1.5rem;background:#0000004d;border-top:1px solid rgba(255,255,255,.1)}.queue-label{font-size:.75rem;text-transform:uppercase;opacity:.6;margin-bottom:.5rem}.queue-items{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}.queue-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:#ffffff1a;border-radius:6px;font-size:.75rem;white-space:nowrap;flex-shrink:0}.queue-item.resolved{opacity:.5;background:#22c55e33}.queue-item.current{background:#fbbf244d;border:1px solid rgba(251,191,36,.5)}.queue-order{display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:#0000004d;border-radius:50%;font-size:.625rem;font-weight:600}.queue-player{font-weight:500}.queue-ability{opacity:.7}.queue-check{color:#22c55e}.narrator-legend{display:flex;justify-content:center;gap:1.5rem;padding:.75rem;background:#0003;border-top:1px solid rgba(255,255,255,.05)}.legend-item{display:flex;align-items:center;gap:.375rem;font-size:.75rem;opacity:.7;text-transform:capitalize}.legend-dot{width:10px;height:10px;border-radius:50%}@media(max-width:600px){.narrator-circle{padding:1rem}.token-role{width:40px;height:40px}.role-initial{font-size:1.25rem}.narrator-queue{display:none}.narrator-legend{flex-wrap:wrap;gap:.75rem}}.narrator-page{display:flex;flex-direction:column;width:100%;height:100vh;background:#0f0f1a;color:#fff}.narrator-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#00000080;border-bottom:1px solid rgba(255,255,255,.1);gap:1rem}.toolbar-center{display:flex;align-items:center;gap:.75rem}.room-badge{padding:.25rem .75rem;background:#ffffff1a;border-radius:4px;font-size:.875rem;font-family:monospace}.connection-dot{width:8px;height:8px;border-radius:50%;background:#ef4444}.connection-dot.connected{background:#22c55e}.toolbar-actions{display:flex;align-items:center;gap:.5rem}.auto-refresh-toggle{display:flex;align-items:center;gap:.375rem;font-size:.75rem;opacity:.7;cursor:pointer}.auto-refresh-toggle input{cursor:pointer}.btn{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s}.btn-sm{padding:.375rem .75rem;font-size:.75rem}.btn-icon{background:transparent;color:#fff;opacity:.7;padding:.375rem .75rem}.btn-icon:hover{opacity:1;background:#ffffff1a}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}.btn-secondary{background:#ffffff1a;color:#fff}.btn-secondary:hover{background:#fff3}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}.narrator-view-container{flex:1;overflow:hidden}.narrator-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.narrator-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;text-align:center;padding:2rem}.narrator-error h2{color:#ef4444}.narrator-error p{opacity:.7;max-width:400px}.error-actions{display:flex;gap:.75rem;margin-top:1rem}.player-details-panel{position:fixed;bottom:0;left:0;right:0;background:#0f0f1af2;border-top:1px solid rgba(255,255,255,.1);padding:1rem;animation:slideUp .2s ease-out;max-height:50vh;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.panel-header h3{margin:0;font-size:1.25rem}.btn-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;opacity:.7;padding:.25rem .5rem}.btn-close:hover{opacity:1}.panel-content{display:flex;flex-direction:column;gap:.75rem}.detail-row{display:flex;justify-content:space-between;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.detail-label{font-size:.75rem;text-transform:uppercase;opacity:.6}.detail-value{font-weight:500;text-transform:capitalize}.detail-statuses{display:flex;flex-wrap:wrap;gap:.375rem}.status-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500}.detail-description{margin-top:.5rem}.detail-description p{margin:.5rem 0 0;font-size:.875rem;line-height:1.5;opacity:.8}.voting-panel-toggle{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);padding:.75rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;box-shadow:0 4px 20px #3b82f666;z-index:100;transition:all .15s}.voting-panel-toggle:hover{background:#2563eb;transform:translate(-50%) scale(1.02)}.voting-panel-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}.voting-panel{background:#1a1a2e;border:1px solid rgba(255,255,255,.15);border-radius:16px;width:100%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.voting-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.voting-panel-header h3{margin:0;font-size:1.125rem}.voting-panel-summary{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:#0000004d;font-size:.875rem}.vote-count{font-weight:600;padding:.25rem .5rem;border-radius:4px}.vote-count.yes{background:#22c55e33;color:#22c55e}.vote-count.no{background:#ef444433;color:#ef4444}.vote-separator{opacity:.4}.vote-needed{opacity:.6;font-size:.75rem}.voting-panel-players{flex:1;overflow-y:auto;padding:.5rem 0}.voting-section{padding:.5rem 1rem}.voting-section h4{font-size:.75rem;text-transform:uppercase;opacity:.5;margin:0 0 .5rem;font-weight:500}.voting-section.dead-players{border-top:1px solid rgba(255,255,255,.1);margin-top:.5rem;padding-top:.75rem}.voting-player-row{display:flex;align-items:center;padding:.5rem 0;gap:.5rem}.voting-player-row .player-name{flex:1;font-weight:500}.voting-player-row .player-name.dead{opacity:.6;text-decoration:line-through}.voting-player-row .player-role{font-size:.75rem;opacity:.5;margin-right:auto}.vote-buttons{display:flex;gap:.25rem;align-items:center}.vote-btn{padding:.25rem .5rem;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:transparent;color:#fff;font-size:.75rem;cursor:pointer;opacity:.6;transition:all .15s}.vote-btn:hover{opacity:1;border-color:#fff6}.vote-btn.yes.active{background:#22c55e33;border-color:#22c55e;color:#22c55e;opacity:1}.vote-btn.no.active{background:#ef444433;border-color:#ef4444;color:#ef4444;opacity:1}.vote-btn.storyteller-set{box-shadow:0 0 0 2px #9333ea80}.vote-btn.storyteller-set:after{content:"*";margin-left:2px;color:#a855f7}.no-vote{font-size:.75rem;opacity:.3;padding:0 .5rem}.voting-panel-actions{display:flex;gap:.75rem;padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}.voting-panel-actions .btn{flex:1}@media(min-width:768px){.player-details-panel{left:auto;width:400px;bottom:auto;top:60px;right:1rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);max-height:calc(100vh - 80px)}@keyframes slideUp{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}}.night-panel-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}.night-panel-toggle{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:24px;padding:.75rem 1.5rem;font-weight:600;color:#fff;cursor:pointer;box-shadow:0 4px 20px #6366f166;z-index:100;transition:all .15s}.night-panel-toggle:hover{background:linear-gradient(135deg,#4f46e5,#7c3aed);transform:translate(-50%) scale(1.02)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a14;color:#fff}.btn{padding:1rem 2rem;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;text-decoration:none;display:inline-block;text-align:center}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,#e94560,#ff6b6b);color:#fff;box-shadow:0 4px 15px #e9456066}.btn-secondary{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.2)}.btn-large{padding:1.25rem 2.5rem;font-size:1.2rem}.connection-status{font-size:.8rem}.connection-status.connected{color:#4ade80}.connection-status.disconnected{color:#f87171}@media(max-width:768px){.btn-large{padding:1rem 2rem;font-size:1rem}}