:root{--bg: #0f1117;--panel: #171a23;--text: #e6e8ee;--muted: #8a90a2}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.stage{position:relative;height:100vh;width:100vw;overflow:hidden}.bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);border-bottom:1px solid #232735;cursor:default}.dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}.tabs{display:flex;gap:4px;background:#0f1117;padding:3px;border-radius:9px;border:1px solid #2a2f40}.tab{background:transparent;border:none;color:var(--muted);font-size:13px;padding:5px 12px;border-radius:7px;cursor:pointer}.tab.on{background:#2a3142;color:var(--text)}.watch{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;height:calc(100vh - 57px);cursor:default}.watch-bar{display:flex;gap:8px;width:100%;max-width:880px}.watch-bar input{flex:1;background:var(--panel);border:1px solid #2a2f40;color:var(--text);padding:10px 14px;border-radius:10px;font-size:14px;outline:none}.watch-bar input:focus{border-color:#3b82f6}.watch-bar button{background:#3b82f6;color:#fff;border:none;padding:0 20px;border-radius:10px;font-weight:600;cursor:pointer}.watch-bar button:hover{background:#2563eb}.player-wrap{position:relative;width:100%;max-width:880px;flex:1;background:#000;border-radius:12px;overflow:hidden}.player,.player iframe{width:100%;height:100%}.player-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;pointer-events:none;text-align:center;padding:24px}.code{background:#0f1117;border:1px solid #2a2f40;color:var(--text);font-size:13px;padding:6px 10px;border-radius:8px;cursor:pointer}.code b{letter-spacing:1px;color:#60a5fa}.code:hover{border-color:#3b82f6}.leave{background:transparent;border:1px solid #2a2f40;color:var(--muted);font-size:13px;padding:6px 10px;border-radius:8px;cursor:pointer}.leave:hover{color:var(--text);border-color:#3a3f50}.lobby{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}.lobby h1{font-size:44px;margin:0}.tagline{color:var(--muted);margin:0 0 24px}.lobby-actions{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:320px}.lobby .primary{width:100%;background:#3b82f6;color:#fff;border:none;padding:14px;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer}.lobby .primary:hover{background:#2563eb}.divider{color:var(--muted);font-size:13px}.join{display:flex;gap:8px;width:100%}.join input{flex:1;background:var(--panel);border:1px solid #2a2f40;color:var(--text);padding:12px;border-radius:10px;font-size:16px;letter-spacing:2px;text-align:center;outline:none}.join input:focus{border-color:#3b82f6}.join button{background:var(--panel);border:1px solid #2a2f40;color:var(--text);padding:0 18px;border-radius:10px;font-weight:600;cursor:pointer}.join button:disabled{opacity:.4;cursor:default}.lobby-note{color:var(--muted);font-size:13px;max-width:340px;margin-top:24px;line-height:1.5}.count{margin-left:auto;color:var(--muted);font-size:14px}.name{background:#0f1117;border:1px solid #2a2f40;color:var(--text);padding:6px 10px;border-radius:8px;font-size:14px;outline:none}.name:focus{border-color:#3b82f6}.game{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 16px;cursor:default}.board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tile{width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;text-transform:uppercase;color:#fff;border:2px solid #3a3f4b;border-radius:4px;transition:border-color 80ms ease,background .12s ease}.tile.filled{border-color:#6b7280}.tile.correct{background:#6aaa64;border-color:#6aaa64}.tile.present{background:#c9b458;border-color:#c9b458}.tile.absent{background:#3a3f4b;border-color:#3a3f4b}.status-line{min-height:36px;display:flex;align-items:center;gap:14px;font-size:16px}.win{color:#6aaa64;font-weight:700}.lose{color:var(--muted)}.newgame{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.newgame:hover{background:#2563eb}.keyboard{display:flex;flex-direction:column;gap:6px;width:100%;max-width:500px}.krow{display:flex;justify-content:center;gap:6px}.key{min-width:30px;height:48px;flex:1;background:#818384;color:#fff;border:none;border-radius:5px;font-size:15px;font-weight:600;text-transform:uppercase;cursor:pointer}.key.wide{flex:1.5;font-size:12px}.key:hover{filter:brightness(1.1)}.key.correct{background:#6aaa64}.key.present{background:#c9b458}.key.absent{background:#3a3f4b}.hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:420px;text-align:center;color:var(--muted);line-height:1.6}.faces{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:50}.cam-btn{background:#2a3142;color:var(--text);border:1px solid #3a3f50;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer}.cam-btn:hover{background:#343c50}.cam-controls{display:flex;gap:8px}.cc{width:40px;height:40px;border-radius:50%;border:1px solid #3a3f50;background:#2a3142;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}.cc:hover{background:#343c50}.cc.off{background:#b91c1c;border-color:#ef4444}.cam-off{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#11141c;color:var(--muted);font-size:13px}.face{position:relative;width:180px;height:135px;border-radius:12px;overflow:hidden;background:#000;border:2px solid #3a3f50;box-shadow:0 6px 20px #00000073}.face video{width:100%;height:100%;object-fit:cover;display:block}.face-name{position:absolute;left:6px;bottom:6px;padding:1px 7px;border-radius:8px;font-size:11px;font-weight:600;color:#fff;background:#0000008c}.cursor{position:absolute;pointer-events:none;transform:translate(-2px,-2px);transition:left 80ms linear,top 80ms linear;z-index:10}.label{position:absolute;top:20px;left:16px;padding:2px 8px;border-radius:10px;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}