:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh;width:100vw;position:relative}.info-panel{position:absolute;top:20px;left:20px;background:#000000b3;color:#fff;padding:20px;border-radius:10px;z-index:10;min-width:250px;transition:transform .3s ease,opacity .3s ease}.info-panel h1{margin:0;font-size:24px;font-weight:700}.info-panel p{margin-bottom:.5rem}.instructions{font-size:.9rem;margin-bottom:15px}.info-panel-hidden{transform:translate(-90%);opacity:.2}.info-panel-hidden:hover{transform:translate(-80%);opacity:.5;cursor:pointer}.controls{display:flex;gap:10px;margin-bottom:15px}.control-button{background-color:#369;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.control-button:hover{background-color:#47a}.control-button:active{background-color:#258}.server-status{display:flex;align-items:center;gap:8px;font-size:.8rem;margin-top:10px}.status-indicator{width:10px;height:10px;border-radius:50%}.status-indicator.connected{background-color:#4caf50;box-shadow:0 0 5px #4caf50}.status-indicator.disconnected{background-color:#f44336;box-shadow:0 0 5px #f44336}@media (max-width: 768px){.info-panel{max-width:100%;width:100%;border-radius:0;padding:.5rem}.info-panel h1{font-size:1.2rem}}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.players-list{margin:15px 0;padding:10px;background:#ffffff1a;border-radius:8px}.text-lg{font-size:1.125rem}.font-semibold{font-weight:600}.player-item{padding:4px 0;display:flex;align-items:center;gap:8px}.player-item span{font-size:.95rem}@media (max-width: 768px){.info-panel{top:10px;left:10px;right:10px;width:auto;min-width:0;max-width:none;padding:15px}.info-panel h1{font-size:1.2rem}.info-panel p,.player-item span{font-size:.85rem}.controls{flex-wrap:wrap}.control-button{padding:6px 10px;font-size:.8rem;flex:1}.instructions{display:none}}canvas{touch-action:none}