*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--void: #07080f;--deep: #0c0e1a;--surface: #13152a;--surface2: #1c1f3a;--border: rgba(255,255,255,.08);--text: #e8eaf0;--muted: rgba(232,234,240,.5);--gold: #c8a84b;--gold-dim: rgba(200,168,75,.15);--crew: #3b82f6;--evil: #dc2626;--glow-crew: rgba(59,130,246,.25);--glow-evil: rgba(220,38,38,.25);--radius-card: 16px;--radius-btn: 10px;--shadow-card: 0 8px 40px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);--font-display: "Orbitron", "Georgia", serif;--font-body: "Space Grotesk", system-ui, sans-serif;--transition: .2s ease}html,body,#root{height:100%;background:var(--void);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.font-display{font-family:var(--font-display)}.text-muted{color:var(--muted)}.text-gold{color:var(--gold)}.text-crew{color:var(--crew)}.text-evil{color:var(--evil)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.text-center{text-align:center}.w-full{width:100%}.grow{flex-grow:1}.screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:24px 20px;background:var(--void);position:relative;overflow:hidden}.screen:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 20% 10%,rgba(59,130,246,.06) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 90%,rgba(124,58,237,.06) 0%,transparent 60%);pointer-events:none;z-index:0}.screen>*{position:relative;z-index:1}.hub-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:40px 48px;background:var(--void);position:relative;overflow:hidden}.hub-screen:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 100% 60% at 50% 0%,rgba(59,130,246,.05) 0%,transparent 60%),radial-gradient(ellipse 80% 80% at 100% 100%,rgba(124,58,237,.05) 0%,transparent 60%);pointer-events:none}.hub-screen>*{position:relative;z-index:1}.phase-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.18;pointer-events:none;z-index:0}.card{background:var(--surface);border-radius:var(--radius-card);border:1px solid var(--border);box-shadow:var(--shadow-card);padding:20px}.card-glass{background:#13152acc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-card);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-card)}.role-card-wrapper{perspective:1200px;width:300px;height:420px}.role-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.4,0,.2,1);position:relative}.role-card-inner.flipped{transform:rotateY(180deg)}.role-card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-card);overflow:hidden}.role-card-back-face{background:linear-gradient(145deg,#0e1020,#0a0b18);border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:var(--shadow-card),0 0 30px #c8a84b26}.role-card-back-face .card-back-symbol{font-size:64px;opacity:.8}.role-card-back-face .card-back-title{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.2em;color:var(--gold);opacity:.8}.role-card-front-face{transform:rotateY(180deg);display:flex;flex-direction:column;border:2px solid;box-shadow:var(--shadow-card)}.role-card-front-face .card-header{padding:24px 24px 16px;flex-shrink:0}.role-card-front-face .card-emoji{font-size:48px;display:block;margin-bottom:12px;filter:drop-shadow(0 0 12px currentColor)}.role-card-front-face .card-role-name{font-family:var(--font-display);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}.role-card-front-face .card-flavor{font-size:11px;font-style:italic;opacity:.65;line-height:1.4}.role-card-divider{height:1px;background:#ffffff1a;margin:0 24px}.role-card-front-face .card-body{padding:16px 24px 24px;flex-grow:1;display:flex;flex-direction:column;gap:12px}.role-card-front-face .card-team-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;width:fit-content}.role-card-front-face .card-ability-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.5}.role-card-front-face .card-ability-text{font-size:12px;line-height:1.55;opacity:.9}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--radius-btn);border:none;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all var(--transition);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn-primary{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;box-shadow:0 4px 20px #2563eb66}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px #2563eb80}.btn-primary:active{transform:translateY(0)}.btn-danger{background:linear-gradient(135deg,#991b1b,#dc2626);color:#fff;box-shadow:0 4px 20px #dc262666}.btn-danger:hover{transform:translateY(-1px);box-shadow:0 6px 24px #dc262680}.btn-gold{background:linear-gradient(135deg,#92400e,#c8a84b);color:#000;box-shadow:0 4px 20px #c8a84b4d}.btn-gold:hover{transform:translateY(-1px)}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}.btn-ghost:hover{border-color:#fff3;color:var(--text)}.btn-lg{padding:18px 36px;font-size:15px}.btn-sm{padding:10px 20px;font-size:11px}.btn:disabled{opacity:.4;pointer-events:none}.player-chip{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface2);border-radius:10px;border:1px solid var(--border);transition:all var(--transition)}.player-chip.dead{opacity:.35;text-decoration:line-through}.player-chip.selected{border-color:var(--crew);background:#3b82f61a;box-shadow:0 0 0 1px var(--crew)}.player-avatar{width:36px;height:36px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;font-family:var(--font-display);color:var(--gold);flex-shrink:0}.player-name{font-size:15px;font-weight:500}.player-status{font-size:11px;color:var(--muted)}.target-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;background:var(--surface);border-radius:12px;border:1.5px solid var(--border);cursor:pointer;transition:all var(--transition);color:var(--text);font-family:var(--font-body);font-size:16px;font-weight:500;text-align:left;-webkit-tap-highlight-color:transparent}.target-btn:hover{border-color:#ffffff40;background:var(--surface2);transform:translate(2px)}.target-btn.selected{border-color:var(--crew);background:#3b82f61f;box-shadow:0 0 0 1px var(--crew),inset 0 0 20px #3b82f60d}.target-btn.danger.selected{border-color:var(--evil);background:#dc26261f;box-shadow:0 0 0 1px var(--evil),inset 0 0 20px #dc26260d}.target-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);margin-left:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.target-btn.selected .target-check{background:var(--crew);border-color:var(--crew)}.target-btn.danger.selected .target-check{background:var(--evil);border-color:var(--evil)}.timer-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.timer-ring svg{transform:rotate(-90deg)}.timer-ring .timer-text{position:absolute;font-family:var(--font-display);font-weight:700;text-align:center}.phase-header{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.phase-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:pulse-dot 2s infinite}.phase-dot.active{background:var(--crew)}.phase-dot.night{background:#6366f1}.phase-dot.dawn{background:var(--gold)}.phase-dot.danger{background:var(--evil)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.game-title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.05em}.input{width:100%;padding:14px 16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-btn);color:var(--text);font-family:var(--font-body);font-size:16px;outline:none;transition:border-color var(--transition);-webkit-appearance:none}.input:focus{border-color:var(--crew);box-shadow:0 0 0 3px #3b82f626}.input.code-input{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:.3em;text-align:center;text-transform:uppercase}.input-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}.hub-player-grid{display:flex;flex-wrap:wrap;gap:10px}.hub-player-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface2);border-radius:99px;border:1px solid var(--border);font-size:14px;font-weight:500;transition:all var(--transition)}.hub-player-chip.dead{opacity:.3;text-decoration:line-through}.hub-player-chip .pip{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}.hub-player-chip .pip.disconnected{background:#6b7280}.notify-banner{background:var(--surface2);border:1px solid var(--gold);border-radius:12px;padding:14px 18px;display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;box-shadow:0 0 20px #c8a84b33}.room-code-display{font-family:var(--font-display);font-size:52px;font-weight:900;letter-spacing:.25em;color:var(--gold);text-shadow:0 0 30px rgba(200,168,75,.5);line-height:1}.vote-tally-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.vote-bar-track{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}.vote-bar-fill{height:100%;background:linear-gradient(90deg,var(--crew),#60a5fa);border-radius:4px;transition:width .4s ease}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#07080fd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.stars-bg{position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 25% 60%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 50% 30%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 85% 20%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 40% 70%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1px 1px at 60% 45%,rgba(200,168,75,.4) 0%,transparent 100%),radial-gradient(1px 1px at 15% 85%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 90% 55%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 35% 10%,rgba(255,255,255,.5) 0%,transparent 100%);pointer-events:none;z-index:0}.scroll-area{overflow-y:auto;-webkit-overflow-scrolling:touch}.divider{height:1px;background:var(--border);width:100%}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow-pulse{0%,to{opacity:.6}50%{opacity:1}}.anim-fade-in{animation:fade-in .4s ease forwards}.anim-scale-in{animation:scale-in .4s ease forwards}.anim-float{animation:float 4s ease-in-out infinite}.phase-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.28;z-index:0;pointer-events:none;transition:opacity 1s ease}.night-bg{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(99,102,241,.08) 0%,transparent 70%),var(--void)}.winner-glow-crew{text-shadow:0 0 20px rgba(59,130,246,.8),0 0 60px rgba(59,130,246,.4)}.winner-glow-evil{text-shadow:0 0 20px rgba(220,38,38,.8),0 0 60px rgba(220,38,38,.4)}.qr-wrapper{background:#fff;border-radius:12px;padding:16px;display:inline-flex;box-shadow:0 0 40px #c8a84b33}