*{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#1a1a2e;font-family:system-ui,sans-serif}#root{flex-direction:column;height:100vh;display:flex;position:relative}header{background:#16162a;border-bottom:1px solid #2a2a44;align-items:center;gap:12px;padding:8px 16px;display:flex}header h1{font-size:16px}.status{color:#8f8fb0;font-size:12px}.call-status{color:#b0b0d0}.meeting-room-status{color:#8fd0a8}.mute-toggle-container{align-items:center;gap:8px;display:flex}.mute-toggle{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 10px;font-size:12px}.mute-toggle:disabled{cursor:not-allowed;opacity:.6}.mute-toggle--active{color:#ffb0b0;background:#4a2a2a;border-color:#6a3a3a}.mute-toggle-error{color:#ffb0b0;background:#4a2a2a;border:1px solid #6a3a3a;border-radius:6px;padding:2px 8px;font-size:11px}#game-container{flex:1;min-height:0}#game-container canvas{display:block}.user{color:#8f8fb0;align-items:center;gap:8px;margin-left:auto;font-size:12px;display:flex}.user button,.login button{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px}.user button{padding:2px 8px;font-size:12px}.device-settings{position:relative}.device-settings-toggle{cursor:pointer;color:#eee;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 8px;font-size:17px;line-height:1}.device-settings-panel{z-index:10;background:#20203a;border:1px solid #2a2a44;border-radius:8px;flex-direction:column;gap:8px;width:240px;padding:12px;font-size:12px;display:flex;position:absolute;bottom:calc(100% + 6px);right:0}.device-settings-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.device-settings-select{color:#eee;width:100%;font:inherit;background:#2a2a44;border:1px solid #3a3a5a;border-radius:6px;padding:4px 6px}.device-settings-checkbox{color:#eee;align-items:center;gap:6px;font-size:12px;display:flex}.device-settings-note{color:#8f8fb0;font-size:11px}.device-settings-error{color:#e0a0a0;font-size:11px}.call-tiles{z-index:10;background:#16162ad9;border:1px solid #2a2a44;border-radius:10px;gap:8px;padding:8px;display:flex;position:absolute;top:56px;left:50%;transform:translate(-50%)}.call-tile{background:#2a2a44;border-radius:6px;width:120px;height:90px;position:relative;overflow:hidden}.call-tile-video{object-fit:cover;width:100%;height:100%}.call-tile-video-mirrored{transform:scaleX(-1)}.call-tile-portrait{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.call-tile-portrait img{height:100%;image-rendering:pixelated}.call-tile-name{color:#eee;text-overflow:ellipsis;white-space:nowrap;background:#00000080;padding:2px 6px;font-size:11px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.call-tile-mic-off{background:#be3232e6;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;line-height:1;display:flex;position:absolute;bottom:20px;right:4px}.call-tile-local-mute{z-index:1;gap:4px;display:flex;position:absolute;top:4px;right:4px}.call-tile-local-mute-btn{color:#eee;cursor:pointer;opacity:0;background:#00000080;border:1px solid #2a2a44;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:12px;line-height:1;transition:opacity .12s;display:flex}.call-tile:hover .call-tile-local-mute-btn,.call-tile-local-mute-btn:focus-visible,.call-tile-local-mute-btn.is-active{opacity:1}.call-tile-local-mute-btn:hover{background:#000000b3;border-color:#3a3a5a}.call-tile-local-mute-btn.is-active{background:#be3232e6;border-color:#be3232e6}.call-tile-local-badge{color:#fff;white-space:nowrap;background:#be3232e6;border-radius:6px;padding:1px 5px;font-size:10px;line-height:1.4;position:absolute}.call-tile-local-badge-video{bottom:20px;left:4px}.call-tile-local-badge-audio{bottom:38px;left:4px}.call-overlay-open{z-index:10;cursor:pointer;color:#eee;font:inherit;background:#16162ad9;border:1px solid #2a2a44;border-radius:6px;padding:6px 8px;font-size:16px;line-height:1;position:absolute;top:56px;right:12px}.call-overlay{z-index:100;background:#0a0a14eb;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:48px 48px 88px;display:flex;position:fixed;inset:0}.call-overlay-close{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:6px 12px;font-size:12px;position:absolute;top:16px;right:16px}.call-overlay-grid{gap:16px;width:100%;max-width:1200px;display:grid}.call-overlay-grid .call-tile{width:100%;height:0;padding-bottom:75%}.call-overlay-grid .call-tile-video,.call-overlay-grid .call-tile-portrait{position:absolute;inset:0}.call-tile-clickable{cursor:pointer}.call-tile-clickable:hover,.call-tile-clickable:focus-visible{outline-offset:-2px;outline:2px solid #3a5a6a}.call-tile.is-speaking{outline-offset:-2px;outline:2px solid #4da3ff}.call-overlay-focus{gap:16px;width:100%;height:100%;min-height:0;display:flex}.call-overlay-sidebar{flex-direction:column;flex:0 0 180px;gap:12px;padding-right:4px;display:flex;overflow-y:auto}.call-overlay-sidebar .call-tile{flex:none;width:100%;height:135px}.call-overlay-main{cursor:pointer;background:#16162a;border:1px solid #2a2a44;border-radius:10px;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;overflow:hidden}.call-overlay-main .call-tile{background:0 0;width:100%;height:100%}.call-overlay-main .call-tile-video{object-fit:contain}.call-overlay-main-video{object-fit:contain;background:#000;width:100%;height:100%}.loading,.login{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.login button{padding:10px 20px;font-size:14px}.screen-share-toggle-container{align-items:center;gap:8px;display:flex}.call-controls{z-index:110;background:#16162ad9;border:1px solid #2a2a44;border-radius:10px;align-items:center;gap:8px;padding:8px 12px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.call-controls .media-toggle,.call-controls .mute-toggle,.call-controls .screen-share-toggle,.call-controls .device-settings-toggle{height:28px}.media-toggles{align-items:center;gap:8px;display:flex}.media-toggle{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 10px;font-size:12px}.media-toggle:disabled{cursor:not-allowed;opacity:.6}.media-toggle--off{color:#ffb0b0;background:#4a2a2a;border-color:#6a3a3a}.media-toggle-error{color:#ffb0b0;background:#4a2a2a;border:1px solid #6a3a3a;border-radius:6px;padding:2px 8px;font-size:11px}.screen-share-toggle{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 10px;font-size:12px}.screen-share-toggle:disabled{cursor:not-allowed;opacity:.6}.screen-share-toggle--active{color:#a0d0ff;background:#2a3a4a;border-color:#3a5a6a}.screen-share-toggle-error{color:#ffb0b0;background:#4a2a2a;border:1px solid #6a3a3a;border-radius:6px;padding:2px 8px;font-size:11px}.call-tile-screen-share{cursor:pointer;font:inherit;color:inherit;border:none;padding:0}.call-tile-screen-share:hover{outline-offset:-2px;outline:2px solid #3a5a6a}.share-focus-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.share-focus-panel{background:#16162a;border:1px solid #2a2a44;border-radius:10px;flex-direction:column;width:min(90vw,1100px);display:flex;overflow:hidden}.share-focus-header{background:#20203a;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.share-focus-name{color:#eee;font-size:13px}.share-focus-close{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:2px 8px;font-size:12px}.share-focus-video{background:#000;width:100%;max-height:80vh;display:block}.avatar-editor-toggle{cursor:pointer;color:#eee;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 10px;font-size:12px}.avatar-editor-overlay{z-index:20;background:#0a0a1499;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.avatar-editor{background:#20203a;border:1px solid #2a2a44;border-radius:10px;flex-direction:column;gap:14px;width:320px;padding:20px;display:flex}.avatar-editor h2{font-size:15px}.avatar-editor-preview{background:#16162a;border:1px solid #2a2a44;border-radius:8px;justify-content:center;align-items:center;height:140px;display:flex}.avatar-editor-preview img{height:100%;image-rendering:pixelated}.avatar-editor-preview-placeholder{width:100%;height:100%}.avatar-editor-layers{flex-direction:column;gap:8px;display:flex}.avatar-editor-layer-row{grid-template-columns:64px 28px 1fr 28px;align-items:center;gap:6px;font-size:12px;display:grid}.avatar-editor-layer-row button{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:2px 0}.avatar-editor-part-name{text-align:center;color:#cfcfe6}.avatar-editor-loading{color:#8f8fb0;font-size:12px}.avatar-editor-error{color:#e0a0a0;font-size:12px}.avatar-editor-actions{justify-content:flex-end;gap:8px;display:flex}.avatar-editor-actions button{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:6px 14px;font-size:12px}.avatar-editor-actions button:disabled{cursor:not-allowed;opacity:.6}.avatar-editor-save{background:#2a4a3a!important;border-color:#3a6a4a!important}.simple-avatar-picker{width:420px}.simple-avatar-picker-grid{grid-template-columns:repeat(4,1fr);gap:8px;max-height:360px;padding:2px;display:grid;overflow-y:auto}.simple-avatar-cell{cursor:pointer;color:#cfcfe6;font:inherit;background:#16162a;border:1px solid #2a2a44;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;display:flex}.simple-avatar-cell img{object-fit:contain;width:48px;height:48px}.simple-avatar-cell-name{text-align:center;word-break:break-word;font-size:11px;line-height:1.2}.simple-avatar-cell.is-selected{background:#24382e;border-color:#3a6a4a}.map-editor-toggle{cursor:pointer;color:#eee;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 10px;font-size:12px}.map-editor-toggle:disabled{cursor:not-allowed;opacity:.6}.map-editor{z-index:30;background:#20203a;border-left:1px solid #2a2a44;flex-direction:column;gap:14px;width:280px;padding:16px;font-size:12px;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto}.map-editor-header{justify-content:space-between;align-items:center;display:flex}.map-editor-header h2{font-size:15px}.map-editor-close{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 10px;font-size:12px}.map-editor-section{flex-direction:column;gap:8px;display:flex}.map-editor-label{color:#cfcfe6;font-size:12px}.map-editor-tools{flex-wrap:wrap;gap:6px;display:flex}.map-editor-tool{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 8px;font-size:12px}.map-editor-tool--active{color:#a8e0c0;background:#2a4a3a;border-color:#3a6a4a}.map-editor-field{justify-content:space-between;align-items:center;gap:8px;display:flex}.map-editor-field input{color:#eee;width:80px;font:inherit;background:#2a2a44;border:1px solid #3a3a5a;border-radius:6px;padding:4px 6px}.map-editor-toggle-row{gap:6px;display:flex}.map-editor-zone-list{flex-direction:column;gap:4px;list-style:none;display:flex}.map-editor-zone-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.map-editor-zone-row label{cursor:pointer;align-items:center;gap:6px;display:flex}.map-editor-zone-remove{cursor:pointer;color:#ffb0b0;font:inherit;background:#4a2a2a;border:1px solid #6a3a3a;border-radius:6px;padding:2px 8px;font-size:11px}.map-editor-add-zone{gap:6px;display:flex}.map-editor-add-zone input{color:#eee;min-width:0;font:inherit;background:#2a2a44;border:1px solid #3a3a5a;border-radius:6px;flex:1;padding:4px 6px}.map-editor-add-zone button{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:4px 10px;font-size:12px}.map-editor-note{color:#8f8fb0;font-size:11px;line-height:1.5}.map-editor-conflict{color:#e0c0a0;background:#33262a;border:1px solid #6a4a3a;border-radius:8px;flex-direction:column;gap:8px;padding:10px;display:flex}.map-editor-conflict-actions{flex-direction:column;gap:6px;display:flex}.map-editor-conflict-actions button{cursor:pointer;color:#eee;font:inherit;background:#3a2a2a;border:1px solid #6a4a3a;border-radius:6px;padding:4px 10px;font-size:12px}.map-editor-message{color:#cfcfe6;background:#16162a;border:1px solid #2a2a44;border-radius:6px;padding:8px}.map-editor-actions{justify-content:flex-end;gap:8px;margin-top:auto;display:flex}.map-editor-actions button{cursor:pointer;color:#eee;font:inherit;background:#2a2a44;border:1px solid #2a2a44;border-radius:6px;padding:6px 14px;font-size:12px}.map-editor-actions button:disabled{cursor:not-allowed;opacity:.6}.map-editor-save{background:#2a4a3a;border-color:#3a6a4a}