*,*:before,*:after{box-sizing:border-box}:root{--font-primary: black;--red: #e76f51;--red-hover: #c75e42;--yellow: #f3c040;--yellow-hover: #e9c46a;--green: #2a9d8f;--green-hover: #1a7d70;--blue: #264653;--blue-hover: #1f3b47}body{margin:0;background-color:#f5f5f5;min-height:100vh;font-family:JetBrains Mono,Fira Code,Source Code Pro,monospace;font-size:16px}h1{font-size:56px;margin-bottom:15px;font-family:inherit}p,li,span,textarea,input,label{font-family:inherit;font-size:16px;margin:0}.header{position:fixed;top:50%;left:50%;width:80%;max-width:800px;transform:translate(-50%,-50%);padding:20px;background-color:#6847fe;color:#fff;text-align:center;border-radius:20px;z-index:2000}#user-form{display:flex;justify-content:center;gap:20px;margin-bottom:10px;flex-wrap:wrap}#user-form input{padding:8px 12px;border:none;border-radius:4px;width:200px;font-family:inherit}.button{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#000;border:3px solid black;border-radius:25px;font-family:inherit;padding:10px 20px;transition:background-color .2s;cursor:pointer;box-shadow:#000 4px 4px}.button:hover{background-color:#ddd}.button--red{background-color:var(--red);color:#fff}.button--red:hover{background-color:var(--red-hover)}.button--yellow{background-color:var(--yellow)}.button--yellow:hover{background-color:var(--yellow-hover)}.button--green{background-color:var(--green);color:#fff}.button--green:hover{background-color:var(--green-hover)}.button--blue{background-color:var(--blue);color:#fff}.button--blue:hover{background-color:var(--blue-hover)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:auto;border:5px solid black;border-radius:20px;gap:20px;padding:10px;margin:10px;background-color:#fff}.admin-settings-container{position:fixed;top:10px;left:10px;padding:15px;z-index:1000;display:flex;flex-direction:row;align-items:start;gap:10px}.admin-setting-panel{width:200px;padding:15px;display:flex;flex-direction:column;align-items:center;gap:10px}.users-panel{padding:15px}#users-list{list-style:none;padding:0;margin:0}#users-list li{padding:5px 0;border-bottom:1px solid #ddd}.canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}#game-canvas{width:100%;height:100%;background-color:#fff}.switch{--switch_width: 2em;--switch_height: 1em;--thumb_color: #e8e8e8;--track_color: #e8e8e8;--track_active_color: #888;--outline_color: #000;font-size:17px;position:relative;display:inline-block;width:var(--switch_width);height:var(--switch_height)}.switch input{opacity:0;width:0;height:0}.slider{width:var(--switch_width);box-sizing:border-box;border:2px solid var(--outline_color);position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--track_color);transition:.15s;border-radius:var(--switch_height)}.slider:before{box-sizing:border-box;position:absolute;content:"";height:var(--switch_height);width:var(--switch_height);border:2px solid var(--outline_color);border-radius:100%;left:-2px;bottom:-2px;background-color:var(--thumb_color);transform:translateY(-.2em);box-shadow:0 .2em 0 var(--outline_color);transition:.15s}input:checked+.slider{background-color:var(--track_active_color)}input:checked+.slider:before{transform:translate(calc(var(--switch_width) - var(--switch_height))) translateY(-.2em)}input:hover+.slider:before{transform:translateY(-.3em);box-shadow:0 .3em 0 var(--outline_color)}input:hover:checked+.slider:before{transform:translate(calc(var(--switch_width) - var(--switch_height))) translateY(-.3em);box-shadow:0 .3em 0 var(--outline_color)}.whiteboard-container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:100}#whiteboard-canvas{aspect-ratio:16/9;max-width:100%;max-height:100vh;width:auto;height:auto;background-color:#fff;border:2px solid #333;box-shadow:0 0 10px #0000004d;cursor:crosshair}@media (min-aspect-ratio: 16/9){#whiteboard-canvas{width:auto;height:100vh}}@media (max-aspect-ratio: 16/9){#whiteboard-canvas{width:100vw;height:auto}}.wb-toolbar{position:absolute;top:12px;right:12px;display:flex;flex-direction:row;align-items:flex-start;gap:8px;z-index:10}.wb-toolbar-group{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}.wb-toolbar-btn{width:44px;height:44px;border-radius:50%;border:3px solid black;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#000c 3px 3px;transition:background-color .15s;flex-shrink:0}.wb-toolbar-btn:hover{background-color:#eee}.wb-color-dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.35);pointer-events:none}.wb-thickness-icon{display:block;width:20px;background:#000;border-radius:3px;min-height:2px;pointer-events:none}.wb-popover{background:#fff;border:3px solid black;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:#000c 3px 3px}.wb-color-swatch{width:30px;height:30px;border-radius:50%;border:2px solid rgba(0,0,0,.25);cursor:pointer;transition:transform .1s;flex-shrink:0}.wb-color-swatch:hover{transform:scale(1.15)}.wb-color-swatch--active{border:3px solid black;box-shadow:0 0 0 2px #fff inset}.wb-popover--thickness{padding:10px 12px}.wb-thickness-range{writing-mode:vertical-lr;direction:rtl;width:28px;height:120px;cursor:pointer;accent-color:#333}.wb-thickness-label{font-size:11px;font-family:inherit;color:#333}.key-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:35px;height:35px;border:5px solid black;border-radius:10px;padding:5px;margin:0;background-color:#fff}.joystick-container{position:fixed;bottom:10px;left:10px;width:100px;height:100px}.joystick-button{position:fixed;width:60px;height:60px;border-radius:50%;background:#ffffffb3;border:2px solid rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:24px;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;user-select:none}.joystick-button:active{background:#c8c8c8b3}.joystick-up{bottom:130px;left:80px}.joystick-down{bottom:10px;left:80px}.joystick-left{bottom:70px;left:10px}.joystick-right{bottom:70px;left:150px}.interaction-button{bottom:70px;right:70px}.joystick-show-hide-switch{top:10px;right:10px}.lobby-footer{position:fixed;bottom:24px;left:0;right:0;text-align:center;font-size:.75rem;color:#aaa;z-index:1000}.lobby-footer a{color:#aaa;text-decoration:none}.lobby-footer a:hover{color:#888;text-decoration:underline}.lobby-footer span{margin:0 .35em;color:#ccc}.auth-indicator{position:fixed;top:12px;right:12px;z-index:3000;font-size:.8rem;font-family:inherit;background:#ffffffd9;padding:6px 12px;border-radius:8px;border:2px solid rgba(0,0,0,.15)}.auth-indicator a{color:#4a69bd;text-decoration:none;margin-left:8px}.auth-indicator a:hover{text-decoration:underline}.sketch-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000008c;z-index:300;display:flex;justify-content:center;align-items:center}.sketch-panel{background:#fff;border:5px solid black;border-radius:20px;box-shadow:#000c 6px 6px;display:flex;flex-direction:column;gap:12px;padding:16px;width:min(440px,92vw)}.sketch-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.sketch-panel-title{font-weight:700;font-size:1rem;white-space:nowrap}.sketch-panel-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;justify-content:center}.sketch-tool-swatch{width:26px;height:26px}.sketch-thickness-range{width:80px;cursor:pointer;accent-color:#333}.sketch-close-btn{padding:6px 12px;font-size:.85rem;flex-shrink:0}.sketch-canvas{width:100%;aspect-ratio:1;border:3px solid black;border-radius:10px;cursor:crosshair;background-color:#f8f8f8;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.sketch-panel-footer{display:flex;gap:10px;justify-content:flex-end}.draw-object-btn{top:10px;right:80px;font-size:20px}.no-border{border:none}.flex-row{flex-direction:row}.justify-start{justify-content:flex-start}.gap-10{gap:10px}.gap-0{gap:0}.margin-0{margin:0}.width-100percent{width:100%}