*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1a1a2e;--panel: #16213e;--panel-border: #0f3460;--available: #00c853;--busy: #ff1744;--blue: #2196f3;--blue-dark: #1565c0;--text: #ffffff;--text-secondary: #b0bec5;--msg-other: #37474f;--danger: #f44336;--success: #4caf50}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{height:100vh;display:flex}.nickname-screen{flex:1;display:flex;align-items:center;justify-content:center}.nickname-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:40px;text-align:center;width:360px}.nickname-card h1{margin-bottom:8px;font-size:1.6rem}.nickname-card p{color:var(--text-secondary);margin-bottom:16px}.nickname-card form{display:flex;flex-direction:column;gap:12px}.nickname-card input{padding:10px 14px;border-radius:8px;border:1px solid var(--panel-border);background:var(--bg);color:var(--text);font-size:1rem;outline:none}.nickname-card input:focus{border-color:var(--blue)}.nickname-card button{padding:10px;border-radius:8px;border:none;background:var(--blue);color:#fff;font-size:1rem;cursor:pointer}.nickname-card button:disabled{opacity:.5;cursor:not-allowed}.nickname-card .error{color:var(--danger);margin-top:8px;font-size:.9rem}.nickname-card small{color:var(--text-secondary);display:block;margin-top:12px;font-size:.8rem}.lobby-screen{flex:1;display:grid;grid-template-columns:240px 1fr 240px;height:100vh;gap:1px;background:var(--panel-border)}.player-list{background:var(--panel);padding:16px;overflow-y:auto}.player-list h2{font-size:.9rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;letter-spacing:.5px}.player-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;margin-bottom:4px}.player-item:hover{background:#ffffff0d}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.available{background:var(--available)}.status-dot.busy{background:var(--busy)}.player-name{flex:1;font-weight:500}.player-status{font-size:.75rem;color:var(--text-secondary)}.whisper-btn,.invite-btn{background:none;border:none;cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:4px}.whisper-btn:hover,.invite-btn:hover:not(:disabled){background:#ffffff1a}.invite-btn:disabled{opacity:.3;cursor:not-allowed}.empty{color:var(--text-secondary);font-size:.85rem;font-style:italic}.chat-panel{background:var(--panel);display:flex;flex-direction:column;overflow:hidden}.chat-panel h2{font-size:.9rem;text-transform:uppercase;color:var(--text-secondary);padding:16px 16px 12px;letter-spacing:.5px}.chat-messages{flex:1;overflow-y:auto;padding:0 16px 8px}.chat-msg{margin-bottom:8px}.chat-msg .chat-meta{display:block;font-size:.75rem;color:var(--text-secondary);margin-bottom:2px}.chat-msg .chat-content{display:inline-block;background:var(--msg-other);padding:6px 10px;border-radius:8px;font-size:.9rem;max-width:80%;word-break:break-word}.chat-msg.mine{text-align:right}.chat-msg.mine .chat-content{background:var(--blue-dark)}.chat-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--panel-border)}.chat-input input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--panel-border);background:var(--bg);color:var(--text);font-size:.9rem;outline:none}.chat-input input:focus{border-color:var(--blue)}.chat-input button{padding:8px 14px;border-radius:8px;border:none;background:var(--blue);color:#fff;cursor:pointer;font-size:.9rem}.chat-input button:disabled{opacity:.4;cursor:not-allowed}.invite-panel{background:var(--panel);padding:16px;overflow-y:auto}.invite-panel h2{font-size:.9rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;letter-spacing:.5px}.invite-card{background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;padding:12px;margin-bottom:8px}.invite-card p{margin-bottom:8px;font-size:.9rem}.invite-actions{display:flex;gap:8px;margin-bottom:6px}.accept-btn{flex:1;padding:6px;border-radius:6px;border:none;background:var(--success);color:#fff;cursor:pointer;font-size:.85rem}.reject-btn{flex:1;padding:6px;border-radius:6px;border:none;background:var(--danger);color:#fff;cursor:pointer;font-size:.85rem}.countdown{font-size:.8rem;color:var(--text-secondary)}.session-screen{flex:1;display:grid;grid-template-columns:1fr 350px;height:100vh;gap:1px;background:var(--panel-border)}.session-game{background:var(--panel);display:flex;flex-direction:column;padding:16px}.session-game h2{font-size:.9rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:16px;letter-spacing:.5px}.game-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);gap:8px}.leave-btn{padding:10px;border-radius:8px;border:none;background:var(--danger);color:#fff;font-size:.95rem;cursor:pointer}.leave-btn:hover{opacity:.9}.session-chat{background:var(--panel);display:flex;flex-direction:column;overflow:hidden}.session-chat h2{font-size:.9rem;text-transform:uppercase;color:var(--text-secondary);padding:16px 16px 12px;letter-spacing:.5px}.session-chat .chat-messages{flex:1;overflow-y:auto;padding:0 16px 8px}.session-chat .chat-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--panel-border)}.whisper-panel{position:fixed;bottom:16px;right:16px;width:340px;height:400px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0006;z-index:100}.whisper-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--panel-border);font-weight:600}.whisper-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.1rem;padding:2px 6px;border-radius:4px}.whisper-close:hover{background:#ffffff1a;color:var(--text)}.whisper-messages{flex:1;overflow-y:auto;padding:8px 16px}.whisper-panel .chat-input{padding:10px 12px;border-top:1px solid var(--panel-border)}.whisper-panel .chat-input input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--panel-border);background:var(--bg);color:var(--text);font-size:.9rem;outline:none}.whisper-panel .chat-input input:focus{border-color:var(--blue)}