:root{color-scheme:dark;font-family:monospace;color:#dfd5b9;background:#0e131c}*{box-sizing:border-box}body{margin:0;overflow:hidden}main{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;place-items:center}#stage{width:min(100%,calc(100dvh * var(--court-aspect,1.7778)));aspect-ratio:var(--court-aspect,1.7778)}canvas{width:100%;height:100%;display:block}button,input,summary{min-height:48px;border:2px solid #777b86;background:#202530;color:inherit;padding:8px 12px;font:inherit;border-radius:3px}button{cursor:pointer}button:disabled{opacity:.45}button.selected,button[aria-pressed=true]{border-color:#d6c07c;background:#514527}header{position:fixed;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));max-width:calc(100vw - 16px);background:#151b28e8;padding:6px;border:1px solid #747886;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px}details{max-width:400px}form{padding:5px;display:flex;flex-wrap:wrap;gap:6px}input{width:160px}#skins{display:flex;overflow:auto;width:100%;gap:4px;max-height:70px}#skins button{min-width:52px;padding:0}#skins img{width:40px;height:60px;object-fit:contain;image-rendering:pixelated}#roster{max-width:300px}#actions{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:8px}#actions[hidden]{display:none}#movement{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:140px;height:140px;background:#1e273066;border:1px solid #bfc1c477;border-radius:50%;touch-action:none}#joystick{position:absolute;inset:0}#notice{position:fixed;bottom:max(4px,env(safe-area-inset-bottom));left:180px;color:#fff;background:#111b;pointer-events:none}#reconnect{position:fixed;right:20px;bottom:90px}button:focus-visible,input:focus-visible{outline:2px solid #fff}#fullscreen{margin-left:auto}@media(max-height:500px){header{font-size:12px}header:has(#join-panel:not([open])){max-width:80vw}#actions{max-width:55vw;flex-wrap:wrap}#actions button{min-width:52px;height:52px;padding:6px}#notice{font-size:12px;max-width:55vw}}