:root{--bg:#0f172a;--panel:#1e293b;--panel-2:#273449;--text:#e2e8f0;--muted:#94a3b8;--primary:#22c55e;--border:#334155;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,sans-serif}#root{height:100dvh}.input{border:1px solid var(--border);background:var(--panel);width:100%;color:var(--text);border-radius:10px;padding:12px 14px;font-size:16px}.btn{border:1px solid var(--border);background:var(--panel-2);width:100%;color:var(--text);cursor:pointer;border-radius:10px;padding:12px 14px;font-size:16px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--primary);border-color:var(--primary);color:#06240f;font-weight:600}.btn.small{width:auto;padding:6px 10px}.lobby{max-width:420px;padding:calc(24px + var(--safe-top)) 20px;flex-direction:column;gap:12px;margin:0 auto;display:flex}.lobby h1{text-align:center;margin:0}.divider{text-align:center;color:var(--muted);margin:8px 0}.muted{color:var(--muted)}.error{color:#f87171}.game{height:100%;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);flex-direction:column;display:flex}.topbar{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:10px 14px;display:flex}.topbar .code{font-weight:600}.topbar .timer{font-variant-numeric:tabular-nums;margin-left:auto}.status.open{color:var(--primary)}.status.closed,.status.connecting{color:#f59e0b}.wordbar{text-align:center;border-bottom:1px solid var(--border);min-height:40px;padding:10px 14px}.wordbar .mask{letter-spacing:4px;color:var(--muted)}.stage{flex:1;min-height:0;display:flex}.canvas-wrap{background:#fff;flex:1;min-width:0;position:relative}.canvas{width:100%;height:100%;display:block}.toolbar{background:#0f172ad9;border-radius:12px;gap:6px;padding:6px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:28px;height:28px}.swatch.active{border-color:var(--primary)}.side{border-left:1px solid var(--border);flex-direction:column;width:300px;min-height:0;display:flex}.scoreboard{border-bottom:1px solid var(--border);max-height:180px;padding:8px;overflow-y:auto}.player{justify-content:space-between;padding:4px 8px;display:flex}.player.offline{opacity:.45}.player .score{font-variant-numeric:tabular-nums;font-weight:600}.chat{flex-direction:column;flex:1;min-height:0;display:flex}.chat-lines{flex-direction:column;flex:1;gap:4px;padding:8px;display:flex;overflow-y:auto}.chat-line.correct{color:var(--primary)}.chat-line.system{color:var(--muted);font-style:italic}.chat-input{border-top:1px solid var(--border);gap:6px;padding:8px;display:flex}.chat-input .btn{width:auto}.overlay{background:#0f172acc;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:12px;width:100%;max-width:380px;padding:24px;display:flex}.winner{text-align:center;font-size:20px;font-weight:600}@media (width<=640px){.stage{flex-direction:column}.side{border-left:none;border-top:1px solid var(--border);width:100%;height:42%}.canvas-wrap{flex:none;height:58%}}