*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}.coordinates-display{position:fixed;top:20px;left:20px;background:#000000b3;color:#fff;padding:15px 20px;border-radius:8px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;z-index:1000;min-width:200px}.coordinates-display h2{font-size:16px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:8px}.coordinates-display p{margin:5px 0;line-height:1.5}.coordinates-display .coord-value{font-family:Courier New,monospace;color:#0f8}.instructions{position:fixed;bottom:20px;left:20px;background:#000000b3;color:#fff;padding:15px 20px;border-radius:8px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:13px;z-index:1000}.instructions h3{margin-bottom:8px;font-size:14px}.instructions ul{list-style:none;padding:0}.instructions li{margin:4px 0}.instructions kbd{background:#333;padding:2px 6px;border-radius:3px;border:1px solid #555;font-family:monospace}.audio-start-button{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:20px 40px;font-size:18px;border-radius:12px;cursor:pointer;z-index:2000;box-shadow:0 4px 15px #0000004d;transition:transform .2s,box-shadow .2s}.audio-start-button:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 6px 20px #0006}.audio-start-button:focus{outline:3px solid #00ff88;outline-offset:3px}.virtual-joystick{position:fixed;bottom:30px;right:30px;width:120px;height:120px;background:#fff3;border:3px solid rgba(255,255,255,.4);border-radius:50%;z-index:1000;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}.joystick-stick{width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 4px 10px #0000004d;transition:transform .05s ease-out}@media (min-width: 769px){.virtual-joystick{display:none}}@media (max-width: 768px){.instructions{display:none}.coordinates-display{font-size:12px;padding:10px 15px;min-width:150px}.coordinates-display h2{font-size:14px}}.join-screen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);z-index:3000}.join-screen h1{color:#fff;font-size:2.5rem;margin-bottom:40px;text-shadow:0 2px 10px rgba(0,0,0,.3)}.join-form{display:flex;gap:10px;margin-bottom:20px}.join-form input{padding:15px 20px;font-size:16px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#fff;outline:none;width:250px;transition:border-color .2s}.join-form input::placeholder{color:#ffffff80}.join-form input:focus{border-color:#667eea}.join-form button{padding:15px 30px;font-size:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,opacity .2s}.join-form button:hover:not(:disabled){transform:scale(1.05)}.join-form button:disabled{opacity:.5;cursor:not-allowed}.join-hint{color:#fff9;font-size:14px}.multiplayer-ui{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:1000}.connection-status,.player-count{background:#000000b3;color:#fff;padding:10px 15px;border-radius:8px;font-size:14px}.voice-status{background:#27ae60cc;color:#fff;padding:10px 15px;border-radius:8px;font-size:14px}.mic-button{padding:12px 20px;font-size:14px;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,opacity .2s}.mic-button:hover:not(:disabled){transform:scale(1.05)}.mic-button:disabled{background:linear-gradient(135deg,#27ae60,#2ecc71);cursor:default}@media (max-width: 768px){.join-screen h1{font-size:1.5rem;text-align:center;padding:0 20px}.join-form{flex-direction:column}.join-form input{width:220px}.multiplayer-ui{top:auto;bottom:20px;right:140px}}