:root{--bg: #0f0e17;--panel: #1b1a2b;--panel-2: #24233a;--line: #302f48;--text: #eef0f6;--muted: #9a99b5;--primary: #ff8906;--primary-ink: #1a1300;--accent: #a786ff;--win: #2cb67d;--danger: #ef4565;--radius: 16px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 600px at 50% -10%,#1c1a33 0%,var(--bg) 60%);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;justify-content:center}.screen{width:100%;max-width:480px;min-height:100dvh;display:flex;flex-direction:column;padding:16px}.lobby{justify-content:center;gap:28px}.brand{text-align:center}.brand h1{font-size:2.6rem;margin:0;letter-spacing:1px;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{color:var(--muted);margin:6px 0 0}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted)}.field input{background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:14px;font-size:1rem;outline:none}.field input:focus{border-color:var(--accent)}#codeInput,.field input[maxlength="4"]{letter-spacing:6px;text-transform:uppercase;text-align:center;font-weight:700}.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:12px;padding:14px 16px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .05s ease,filter .15s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--primary);color:var(--primary-ink);border-color:transparent}.btn.win{background:var(--win);color:#04231a;border-color:transparent}.btn.win.alt{background:var(--accent);color:#1c0f3a}.btn.ghostbtn{background:transparent}.ghost{background:transparent;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:6px 8px}.ghost.small{font-size:.72rem;border:1px solid var(--line);border-radius:8px;padding:3px 8px;margin-left:8px}.error{color:var(--danger);margin:0;font-size:.9rem}.hint{color:var(--muted);font-size:.85rem;line-height:1.4}.game{gap:14px}.topbar{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--muted)}.roomcode b,.round b{color:var(--text);letter-spacing:2px}.scoreboard{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}.score{display:flex;flex-direction:column;align-items:center;flex:1}.score .pname{font-size:.85rem;color:var(--muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score .pnum{font-size:2rem;font-weight:800}.score.me .pnum{color:var(--primary)}.score.opp .pnum{color:var(--accent)}.vs{color:var(--muted);font-size:.8rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;flex:1;display:flex;flex-direction:column}.panel.center{align-items:center;justify-content:center;text-align:center;gap:14px}.prompt{font-size:1.3rem;font-weight:700;margin:0}.letterbox{width:96px;height:96px;text-align:center;font-size:3rem;font-weight:800;text-transform:uppercase;background:var(--panel-2);border:2px solid var(--accent);color:var(--text);border-radius:20px;outline:none}.lockedletter{display:flex;flex-direction:column;align-items:center;gap:8px}.statusrow{display:flex;flex-direction:column;gap:8px;margin-top:6px;width:100%;max-width:260px}.statusdot{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}.statusdot i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}.statusdot.on i{background:var(--win);box-shadow:0 0 8px var(--win)}.bigcode{font-size:1.6rem;letter-spacing:6px;color:var(--primary)}.spinner{width:42px;height:42px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.play{gap:12px;padding:16px}.targetword{display:flex;align-items:center;justify-content:center;gap:14px}.letterchip{display:flex;flex-direction:column;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:8px 16px;min-width:68px}.letterchip small{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.letterchip b{font-size:2.2rem;font-weight:800;text-transform:uppercase}.letterchip.start b{color:var(--primary)}.letterchip.end b{color:var(--accent)}.dots{color:var(--muted);letter-spacing:2px}.chat{flex:1;min-height:180px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px}.chat-empty{color:var(--muted);font-size:.9rem;text-align:center;margin:auto}.bubble{max-width:80%;padding:8px 12px;border-radius:14px;display:flex;flex-direction:column;gap:2px}.bubble .who{font-size:.7rem;color:var(--muted)}.bubble .msg{font-size:1rem}.bubble.mine{align-self:flex-end;background:var(--primary);color:var(--primary-ink)}.bubble.mine .who{color:#7a5a12}.bubble.theirs{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line)}.chatform{display:flex;gap:8px}.chatform input{flex:1;background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px 14px;font-size:1rem;outline:none}.chatform input:focus{border-color:var(--accent)}.btn.send{padding:12px 18px}.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.proposal{background:var(--panel-2);border:1px solid var(--accent);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;text-align:center}.proposal p{margin:0;font-size:.95rem}.proposal.decide{border-color:var(--win)}.proposal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.topbar-right{display:flex;align-items:center;gap:8px}.lang-toggle{background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:5px 10px;font-size:.75rem;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1}.lang-toggle:active{transform:translateY(1px)}.lang-toggle.fixed-topright{position:fixed;top:14px;right:14px;z-index:20}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#06050fb8;display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}.modal{background:var(--panel);border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:82dvh;display:flex;flex-direction:column;animation:slideup .18s ease}@keyframes slideup{0%{transform:translateY(24px);opacity:0}}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:1.1rem}.modal-body{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}.center-text{text-align:center}.hist-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}.hist-row{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;background:transparent;border:none;color:var(--text);cursor:pointer;font-size:.95rem}.hist-num{color:var(--muted);font-weight:700;min-width:28px;text-align:left}.hist-letters{display:inline-flex;align-items:center;gap:4px}.hist-letters b{color:var(--primary);text-transform:uppercase}.hist-letters b:last-child{color:var(--accent)}.hist-letters i{color:var(--muted);font-style:normal}.hist-badge{margin-left:auto;font-size:.8rem;padding:3px 8px;border-radius:8px;white-space:nowrap}.hist-badge.win{background:#2cb67d2e;color:var(--win)}.hist-badge.skip{background:var(--line);color:var(--muted)}.hist-caret{color:var(--muted);font-size:.7rem}.hist-messages{display:flex;flex-direction:column;gap:6px;padding:4px 14px 14px;border-top:1px solid var(--line)}.hist-msg{max-width:82%;padding:6px 10px;border-radius:12px;display:flex;flex-direction:column;gap:1px}.hist-msg .who{font-size:.65rem;color:var(--muted)}.hist-msg.mine{align-self:flex-end;background:var(--primary);color:var(--primary-ink)}.hist-msg.mine .who{color:#7a5a12}.hist-msg.theirs{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}@media (min-width: 700px){.modal-overlay{align-items:center}.modal{border-radius:20px}.screen{padding:28px}}