*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--red: #e74c3c;--blue: #3498db;--neutral: #bdc3c7;--assassin: #2c3e50;--bg: #1a1a2e;--surface: #16213e;--text: #eee;--text-dim: #999}html,body,#root{height:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.home,.host,.play{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;gap:1rem}h1{font-size:clamp(2.5rem,8vw,5rem);font-weight:900;letter-spacing:.15em;background:linear-gradient(135deg,var(--red),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{font-size:1.5rem;font-weight:700}.subtitle{color:var(--text-dim);font-size:1.1rem;margin-bottom:1rem}.btn{padding:.8rem 2rem;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s}.btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--red);color:#fff}.btn-secondary{background:var(--blue);color:#fff}.home-actions{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:320px}.home-actions .btn-primary{width:100%;font-size:1.3rem;padding:1rem}.divider{color:var(--text-dim);font-size:.9rem}.join-form{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.code-input,.name-input{width:100%;padding:.8rem 1rem;border:2px solid #333;border-radius:8px;background:var(--surface);color:var(--text);font-size:1.3rem;text-align:center;letter-spacing:.3em;font-weight:700}.name-input{letter-spacing:normal;font-weight:400}.code-input:focus,.name-input:focus{outline:none;border-color:var(--blue)}.join-form .btn{width:100%}.error{color:var(--red);font-size:.9rem;margin-top:.5rem}.host-lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;gap:1.5rem}.room-code-display{text-align:center}.room-code-label{font-size:1rem;color:var(--text-dim);letter-spacing:.2em;margin-bottom:.25rem}.room-code{font-size:clamp(4rem,15vw,10rem);font-weight:900;letter-spacing:.3em;color:var(--text)}.player-count{color:var(--text-dim)}.waiting-msg{color:var(--text-dim);font-style:italic}.player-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:600px}.player-chip{padding:.4rem 1rem;background:var(--surface);border:1px solid #333;border-radius:20px;font-size:1rem}.player-chip.disconnected{opacity:.4}.player-teams{display:flex;gap:2rem;justify-content:center}.team-column{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:120px}.team-red h3{color:var(--red)}.team-blue h3{color:var(--blue)}.role-badge{font-size:.7rem;font-weight:700;margin-left:.4rem;padding:.1rem .3rem;background:#ffffff26;border-radius:4px;vertical-align:middle}.host-word-submission{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;gap:1.5rem}.ws-instruction{color:var(--text-dim);font-size:1.1rem}.ws-timer{display:flex;flex-direction:column;align-items:center}.timer-number{font-size:clamp(4rem,12vw,8rem);font-weight:900;font-variant-numeric:tabular-nums;transition:color .3s}.timer-urgent{color:var(--red);animation:pulse .5s ease-in-out infinite alternate}.timer-label{color:var(--text-dim);font-size:1rem}.ws-word-count{display:flex;flex-direction:column;align-items:center}.word-count-number{font-size:3rem;font-weight:700;color:var(--blue)}.word-count-label{color:var(--text-dim)}.ws-dots{display:flex;gap:.5rem}.ws-dots .dot{width:10px;height:10px;border-radius:50%;background:var(--text-dim);animation:bounce 1.4s ease-in-out infinite}.ws-dots .dot:nth-child(2){animation-delay:.2s}.ws-dots .dot:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}@keyframes pulse{0%{opacity:1}to{opacity:.5}}.board{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;width:100%;max-width:900px;aspect-ratio:5 / 4}.card{display:flex;align-items:center;justify-content:center;padding:.5rem;border:2px solid #444;border-radius:8px;background:var(--surface);color:var(--text);font:inherit;cursor:default;transition:background .2s,border-color .2s,transform .15s}.card-word{font-size:clamp(.7rem,2vw,1.2rem);font-weight:700;text-align:center;text-transform:uppercase;line-height:1.1}.card-word-md{font-size:clamp(.55rem,1.6vw,1rem)}.card-word-sm{font-size:clamp(.45rem,1.3vw,.85rem)}.card-word-xs{font-size:clamp(.4rem,1.1vw,.75rem)}.card-hidden{background:#1e2d4a;border-color:#3a4a6a;color:#f0f0f0}.card-red{background:var(--red);border-color:var(--red);color:#fff}.card-blue{background:var(--blue);border-color:var(--blue);color:#fff}.card-neutral{background:#95a5a6;border-color:#7f8c8d;color:#1a1a1a}.card-assassin{background:var(--assassin);border-color:#111;color:#fff}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-2px);border-color:var(--text)}.score-bar{display:flex;justify-content:center;gap:2rem;width:100%;max-width:400px}.score{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.2rem;border-radius:8px;font-weight:700;opacity:.6;transition:opacity .2s}.score.active-turn{opacity:1}.score-red{background:var(--red)}.score-blue{background:var(--blue)}.score-label{font-size:.9rem;letter-spacing:.1em}.score-number{font-size:1.8rem}.turn-info{display:flex;flex-direction:column;align-items:center;gap:.3rem}.turn-team{font-size:1.2rem;font-weight:700;letter-spacing:.1em}.turn-red{color:var(--red)}.turn-blue{color:var(--blue)}.clue-display{font-size:1.5rem;font-weight:700}.clue-display.waiting{color:var(--text-dim);font-style:italic;font-weight:400}.guesses-left{font-size:.9rem;font-weight:400;color:var(--text-dim)}.host-game{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1rem 2rem;gap:1rem}.host-game-over{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;gap:1.5rem}.winner-banner{font-size:clamp(2rem,6vw,4rem);font-weight:900;letter-spacing:.1em}.winner-red{color:var(--red)}.winner-blue{color:var(--blue)}.win-reason{color:var(--text-dim);font-size:1.1rem}.player-lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem;gap:1rem}.player-welcome{font-size:1.1rem;color:var(--text-dim)}.room-code-small{font-size:clamp(2rem,10vw,4rem)}.player-word-submission{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem;gap:1rem}.timer-small{font-size:clamp(2rem,8vw,4rem)}.word-form{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:320px}.word-input{width:100%;padding:.8rem 1rem;border:2px solid #333;border-radius:8px;background:var(--surface);color:var(--text);font-size:1.1rem;text-align:center}.word-input:focus{outline:none;border-color:var(--blue)}.word-form .btn{width:100%}.submitted-words{text-align:center}.submitted-label{color:var(--text-dim);font-size:.9rem;margin-bottom:.4rem}.word-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;max-width:320px}.word-chip{padding:.3rem .8rem;background:var(--surface);border:1px solid #333;border-radius:16px;font-size:.9rem}.total-word-count{color:var(--text-dim);font-size:.9rem}.player-spymaster,.player-operative{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1rem;gap:.75rem}.role-header{display:flex;flex-direction:column;align-items:center;gap:.2rem}.role-title{font-size:.8rem;font-weight:700;letter-spacing:.2em;padding:.2rem .8rem;border-radius:4px;text-transform:uppercase}.role-red{background:var(--red);color:#fff}.role-blue{background:var(--blue);color:#fff}.team-label{font-size:.8rem;font-weight:600;letter-spacing:.1em}.team-label-red{color:var(--red)}.team-label-blue{color:var(--blue)}.clue-form{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:400px;align-items:center}.clue-row{display:flex;gap:.5rem;width:100%;align-items:center}.clue-input{flex:1;padding:.7rem .8rem;border:2px solid #333;border-radius:8px;background:var(--surface);color:var(--text);font-size:1rem}.clue-input:focus{outline:none;border-color:var(--blue)}.clue-form .btn{width:100%}.number-picker{display:flex;align-items:center;gap:0;border:2px solid #333;border-radius:8px;overflow:hidden;background:var(--surface)}.picker-btn{width:44px;height:44px;border:none;background:transparent;color:var(--text);font-size:1.4rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}.picker-btn:hover:not(:disabled){background:#ffffff1a}.picker-btn:disabled{opacity:.3;cursor:not-allowed}.picker-value{width:36px;text-align:center;font-size:1.3rem;font-weight:700;color:var(--text)}.clue-form .btn{white-space:nowrap}.end-turn-btn{width:100%;max-width:400px}.player-game-over{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem;gap:1rem}.result-text{font-size:1.3rem;font-weight:700}.result-win{color:#2ecc71}.result-lose{color:var(--red)}