: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;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff}.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:2rem}.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 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}.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)}.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}.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,.phase-ended{text-align:center}.screen{min-height:100vh;display:flex;flex-direction:column;background:#0a0a14;color:#fff;overflow:hidden}.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:center;justify-content:center;padding:2rem}.lobby-screen{display:flex;gap:4rem;align-items:center;width:100%;max-width:1200px}.join-info{text-align:center;flex-shrink:0}.join-info h2{margin-bottom:1rem;font-size:1.5rem}.room-code-display{font-size:4rem;font-weight:700;font-family:monospace;letter-spacing:.2em;margin-bottom:1.5rem;background:linear-gradient(135deg,#e94560,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.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-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 2rem;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;min-width:120px}.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}.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}.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}*{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}}