:root{--brand-pink:#ff7dfa;--brand-pale:#ffe1fa;--brand-dark:#3c0500;--brand-red:#e8173c;--ink:#1c1210;--page:#fff6fd}*{box-sizing:border-box}html,body,#root{height:100%;color:var(--ink);background:var(--page);margin:0;font-family:DM Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.muted{color:#6b7280}.dot{border-radius:50%;flex:none;width:10px;height:10px;display:inline-block}.login{background:linear-gradient(160deg, var(--brand-pale), var(--brand-pink));place-items:center;height:100%;padding:16px;display:grid}.login-card{background:#fff;border-radius:16px;flex-direction:column;gap:8px;width:100%;max-width:360px;padding:28px;display:flex;box-shadow:0 10px 40px #0f172a1f}.login-card h1{margin:0;font-size:22px}.login-card p{margin:0 0 12px}.login-card label{margin-top:6px;font-size:13px;font-weight:600}.login-card input{font:inherit;border:1px solid #d1d5db;border-radius:8px;outline:none;padding:10px 12px}.login-card input:focus{border-color:var(--brand-pink);box-shadow:0 0 0 3px #ff7dfa59}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;border:3px solid #0000;border-radius:50%;outline:none;width:30px;height:30px}.swatch.selected{box-shadow:0 0 0 2px var(--brand-dark);border-color:#fff}.primary{font:inherit;background:var(--brand-dark);color:var(--brand-pale);cursor:pointer;border:none;border-radius:8px;margin-top:16px;padding:11px;font-weight:600}.primary:disabled{opacity:.4;cursor:default}.workspace{height:100%;position:relative;overflow:hidden}.hud{z-index:20;pointer-events:none;position:absolute}.hud>*{pointer-events:auto}.top-left{background:#ffffffeb;border-radius:12px;padding:10px 14px;top:16px;left:16px;box-shadow:0 4px 16px #3c05001f}.title{font-size:18px;font-weight:700}.status{text-transform:capitalize;color:#6b7280;align-items:center;gap:6px;font-size:13px;display:flex}.status .dot{background:#9ca3af}.status.online .dot{background:#22c55e}.status.offline .dot{background:#ef4444}.top-right{top:16px;right:16px}.panel{pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffe6;border-radius:12px;width:220px;max-width:calc(100vw - 32px);padding:14px;font-size:14px;box-shadow:0 4px 20px #0f172a1a}.panel-title{margin-bottom:8px;font-weight:700}.people{max-height:40vh;margin:0 0 12px;padding:0;list-style:none;overflow-y:auto}.people li{align-items:center;gap:8px;padding:4px 0;display:flex}.toggle{cursor:pointer;align-items:center;gap:6px;font-size:13px;display:flex}.link{color:#6b7280;font:inherit;cursor:pointer;background:0 0;border:none;margin-top:8px;padding:0;font-size:13px;text-decoration:underline}.bottom{bottom:16px;left:50%;transform:translate(-50%)}.hint{color:#fff;white-space:nowrap;background:#1f2937cc;border-radius:999px;padding:8px 14px;font-size:13px}.nametag{white-space:nowrap;-webkit-user-select:none;user-select:none;background:#ffffffeb;border-radius:999px;align-items:center;gap:6px;padding:3px 9px;font-size:12px;font-weight:600;display:flex;box-shadow:0 2px 8px #0f172a26}.nametag.self{background:var(--brand-dark);color:#fff}.room-label{color:#fff;letter-spacing:.02em;white-space:nowrap;-webkit-user-select:none;user-select:none;background:#1f29378c;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600}.room-label.meeting{background:#3c0500bf}.room-label.relax{background:#b46428b3}.room-label.kitchen{background:#14826eb3}.wc-sign{background:var(--brand-dark);color:#fff;-webkit-user-select:none;user-select:none;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700}.bottom-left{bottom:16px;left:16px}.chat{width:320px;padding:10px}.chat-messages{height:160px;margin:0 0 8px;padding:0;font-size:13px;line-height:1.4;list-style:none;overflow-y:auto}.chat-messages li{overflow-wrap:anywhere;padding:2px 0}.chat-name{margin-right:6px;font-weight:700}.chat-input{width:100%;font:inherit;border:1px solid #d1d5db;border-radius:8px;outline:none;padding:8px 10px;font-size:13px}.chat-input:focus{border-color:var(--brand-pink)}.bubbles{flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.bubble{overflow-wrap:anywhere;-webkit-user-select:none;user-select:none;background:#fff;border-radius:10px;width:max-content;max-width:220px;padding:6px 10px;font-size:25px;position:relative;box-shadow:0 2px 10px #0f172a33}.bubble:not(:last-child):after{display:none}.bubble.private{background:#f3e8ff;outline:2px solid #a855f7}.bubble.private:after{border-top-color:#f3e8ff}.bubble-tag{color:#7e22ce;font-size:13px;font-weight:600;display:block}.bubble:after{content:"";border:6px solid #0000;border-top-color:#fff;margin-left:-6px;position:absolute;top:100%;left:50%}@media (width<=900px){.hint{display:none}}.chat-tabs{gap:4px;margin-bottom:8px;display:flex;overflow-x:auto}.chat-tab{background:var(--brand-pale);color:#374151;font:inherit;cursor:pointer;border:none;border-radius:999px;flex:none;align-items:center;gap:5px;padding:4px 9px;font-size:12px;font-weight:600;display:flex}.chat-tab.active{background:var(--brand-dark);color:#fff}.chat-tab .close{opacity:.6;font-size:14px;line-height:1}.chat-tab .close:hover{opacity:1}.badge{color:#fff;text-align:center;background:#ef4444;border-radius:999px;min-width:16px;padding:0 4px;font-size:10px;line-height:16px}.menu-overlay{z-index:40;background:#0a0f198c;place-items:center;display:grid;position:absolute;inset:0}.menu-ring{--size:min(560px, 92vw);width:var(--size);height:var(--size);position:relative}.menu-title{color:#fff;letter-spacing:.03em;white-space:nowrap;font-size:clamp(16px,3.6vw,24px);position:absolute;top:34%;left:50%;transform:translate(-50%)}.menu-option{color:#fff;font:inherit;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;transform:translate(-50%,-50%)}.menu-option.call{top:15%;left:18%}.menu-option.game{top:15%;left:82%}.menu-option.message{top:90%;left:50%}.menu-label{letter-spacing:.03em;white-space:nowrap;font-size:clamp(14px,3.2vw,22px)}.menu-circle{width:calc(var(--size) * .24);height:calc(var(--size) * .24);border:4px solid #22d3ee;border-radius:50%;place-items:center;transition:transform .15s,background .15s;display:grid}.menu-option:hover:not(:disabled) .menu-circle{background:#22d3ee26;transform:scale(1.08)}.menu-option:disabled{opacity:.35;cursor:default}.menu-close{width:calc(var(--size) * .14);height:calc(var(--size) * .14);color:#fff;cursor:pointer;background:#ef1c1c;border:none;border-radius:50%;place-items:center;display:grid;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 24px #00000059}.menu-close:hover{background:#d41414}.top-center{flex-direction:column;align-items:center;gap:8px;display:flex;top:16px;left:50%;transform:translate(-50%)}.call-area{top:16px}.toasts{top:72px}.toast{color:#fff;background:#1f2937eb;border-radius:12px;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 14px;font-size:14px;display:flex;box-shadow:0 4px 20px #0f172a40}.btn{color:var(--brand-dark);font:inherit;cursor:pointer;background:#e5e7eb;border:none;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600}.btn.primary-sm{background:var(--brand-pink);color:var(--brand-dark)}.btn.accept{color:#fff;background:#22c55e}.btn.danger{color:#fff;background:#ef4444}.live-dot{background:#22c55e;border-radius:50%;width:10px;height:10px;animation:1.2s infinite pulse}@keyframes pulse{50%{opacity:.3}}.modal-overlay{z-index:35;background:#0a0f1973;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.modal{text-align:center;background:#fff;border-radius:16px;width:100%;max-width:400px;padding:24px;box-shadow:0 10px 40px #0f172a4d}.modal h2{margin:0;font-size:20px}.modal p{margin:6px 0}.hands{justify-content:center;align-items:center;gap:14px;margin:18px 0 10px;display:flex}.hand{cursor:pointer;background:#f9fafb;border:2px solid #e5e7eb;border-radius:16px;width:76px;height:76px;font-size:38px}.hand:hover:not(:disabled){border-color:var(--brand-pink)}.hand:disabled{cursor:default;opacity:.4}.hand.picked{opacity:1;border-color:var(--brand-pink);background:#eff6ff}.hand.big{cursor:default;place-items:center;font-size:46px;display:grid}.vs{color:#9ca3af;font-weight:700}.outcome{margin:8px 0 16px;font-size:22px}.outcome.win{color:#16a34a}.outcome.lose{color:#dc2626}.modal-actions{justify-content:center;gap:8px;display:flex}.mode-switch{background:var(--brand-pale);border-radius:10px;gap:4px;margin:4px 0 8px;padding:4px;display:flex}.mode-switch button{color:#4b5563;font:inherit;cursor:pointer;background:0 0;border:none;border-radius:7px;flex:1;padding:8px;font-weight:600}.mode-switch button.active{color:var(--brand-dark);background:#fff;box-shadow:0 1px 3px #0f172a1f}.hint-text{color:#6b7280;margin:0;font-size:13px}.login-card .error{color:#dc2626;margin:8px 0 0;font-size:14px}.login-card .notice{color:#92400e;background:#fef3c7;border-radius:8px;margin:0;padding:8px 10px;font-size:14px}.pong-label{background:#1f6f4ad9}.pong{background:#fff;border-radius:16px;gap:16px;width:100%;max-width:1080px;max-height:calc(100vh - 32px);padding:20px;display:flex;overflow:auto;box-shadow:0 10px 40px #0f172a4d}.pong-main{flex:1;min-width:0}.pong-header{align-items:baseline;gap:10px;display:flex}.pong-header h2{margin:0;font-size:20px}.pong-names{justify-content:space-between;margin:8px 0 6px;font-size:14px;font-weight:600;display:flex}.pong-canvas-wrap{position:relative}.pong canvas{aspect-ratio:8/5;border-radius:10px;width:100%;display:block}.pong canvas.playing{cursor:none}.pong-result{color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.pong-result h3{margin:0 0 4px;font-size:26px}.pong-result p{margin:2px 0}.pong-result .up{color:#86efac}.pong-result .down{color:#fca5a5}.pong-result.muted{color:#ffffffbf}.pong-status{color:#374151;margin:10px 0 0;font-size:14px}.pong-side{flex-direction:column;flex:none;gap:8px;width:230px;font-size:14px;display:flex}.pong-side h4{margin:10px 0 0}.pong-side ol{margin:0;padding-left:20px}.pong-side p{margin:0}.leaderboard li span:first-child{margin-right:6px}.leaderboard li{padding:2px 0}.leaderboard li>span:last-child{float:right}@media (width<=760px){.pong{flex-direction:column}.pong-side{width:auto}}.meeting-bar{flex-direction:column;align-items:center;gap:8px;display:flex;bottom:56px;left:50%;transform:translate(-50%)}.notice-toast{top:120px;left:50%;transform:translate(-50%)}.lock-sign{color:#fff;white-space:nowrap;background:#b91c1c;border-radius:8px;padding:4px 10px;font-size:14px;font-weight:600}.menu-subtitle{opacity:.85;margin-top:4px;font-size:14px;font-weight:500}.mic-prompt{max-width:380px}.mic-prompt p{margin:8px 0 12px;line-height:1.45}.check{align-items:center;gap:6px;font-size:14px;display:flex}.mic-prompt .modal-actions{justify-content:flex-end;margin-top:16px}.screen-view{z-index:25;background:#111827;border-radius:12px;width:min(480px,100vw - 32px);position:absolute;top:16px;right:16px;overflow:hidden;box-shadow:0 8px 30px #0f172a59}.screen-view.big{width:min(1200px,100vw - 64px);top:50%;left:50%;right:auto;transform:translate(-50%,-50%)}.screen-view-bar{color:#fff;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:13px;display:flex}.screen-view video{background:#000;width:100%;max-height:calc(100vh - 140px);display:block}.sound-toggle{margin-top:6px;padding:0;display:block}.status-dot{border-radius:50%;flex:none;width:9px;height:9px;margin-right:6px;display:inline-block;box-shadow:0 0 0 2px #ffffffe6}.person{align-items:center;display:flex}.person-status{margin-left:15px;font-size:12px}.status-picker{border-top:1px solid #e5e7eb;grid-template-columns:auto 1fr;align-items:center;gap:6px;margin-top:10px;padding-top:10px;display:grid}.status-picker select,.status-picker input{min-width:0;font:inherit;border:1px solid #d1d5db;border-radius:6px;padding:4px 6px;font-size:13px}.status-picker input{grid-column:1/-1}.idle-dot{background:#9ca3af;border-radius:50%;width:10px;height:10px}.desk-modal{width:min(980px,100vw - 32px);max-width:none}.desk-modal .modal-actions{justify-content:flex-end;align-items:center;margin-top:12px}.desk-modal .modal-actions .muted{margin-right:auto}.desk-map{background:#e5e7eb;border-radius:10px;width:100%;height:auto;margin-top:8px;display:block}.map-floor{fill:#efe6d6}.map-room{fill:#dbe7f3}.map-room.meeting{fill:#e3dcf5}.map-room.kitchen{fill:#f5ead6}.map-block{fill:#b8bec7}.map-desk{fill:#fff;stroke:#9aa6b2;stroke-width:.04px}.map-wall{fill:#475569}.map-wall.glass,.map-wall.window{fill:#7dd3fc}.map-label{fill:#64748b;text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:.5px}.map-seat circle{stroke:#fff;stroke-width:.06px}.map-seat text{fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:.34px;font-weight:700}.map-seat.free{cursor:pointer}.map-seat.free circle{fill:#22c55e}.map-seat.free:hover circle{fill:#16a34a}.map-seat.taken circle{fill:#9ca3af}.map-seat.selected{cursor:pointer}.map-seat.selected circle{fill:var(--brand-pink);stroke:var(--brand-dark)}.desk-button{text-align:left;width:100%}.desk-plate{color:#374151;white-space:nowrap;background:#ffffffd9;border-radius:5px;padding:1px 6px;font-size:11px;font-weight:600}.desk-plate.mine{background:var(--brand-pink);color:var(--brand-dark)}.login .modal-overlay{position:fixed}.brand{letter-spacing:-.02em;color:var(--ink);align-items:center;gap:8px;font-weight:800;display:inline-flex}.brand-mark{flex:none;width:30px;height:20px;position:relative}.brand-mark:before,.brand-mark:after{content:"";border-radius:50%;position:absolute;top:50%;transform:translateY(-50%)}.brand-mark:before{background:var(--brand-pink);width:20px;height:20px;right:0}.brand-mark:after{background:var(--brand-red);mix-blend-mode:multiply;width:13px;height:13px;left:2px}.brand-sub{color:var(--brand-dark);opacity:.7;font-weight:500}.login-card h1 .brand{font-size:28px}.customizer{width:min(720px,100vw - 32px);max-width:none}.customizer-body{grid-template-columns:220px 1fr;gap:20px;margin-top:8px;display:grid}.customizer-preview{background:linear-gradient(180deg, var(--brand-pale), #fff);border-radius:12px;height:300px}.customizer-options{text-align:left;flex-direction:column;gap:6px;display:flex}.customizer-options label{margin-top:6px;font-size:13px;font-weight:600}.customizer .modal-actions{justify-content:flex-end;margin-top:16px}.choices{flex-wrap:wrap;gap:6px;display:flex}.choice{color:var(--ink);font:inherit;cursor:pointer;background:#fff;border:1px solid #e5d3e2;border-radius:8px;padding:5px 10px;font-size:13px}.choice.active{border-color:var(--brand-dark);background:var(--brand-dark);color:var(--brand-pale)}@media (width<=640px){.customizer-body{grid-template-columns:1fr}.customizer-preview{height:220px}}
