:root{background:#7caa5a}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html,body{touch-action:none;overscroll-behavior:none;width:100%;height:100%;margin:0;overflow:hidden}canvas{image-rendering:pixelated;touch-action:none;display:block;width:100vw!important;height:100dvh!important}#mobile-controls{pointer-events:none;z-index:10;--stick-size:112px;--control-bottom:32px;position:fixed;inset:0}#mobile-controls[hidden]{display:none}#mobile-stick,#mobile-action{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;bottom:max(var(--control-bottom), env(safe-area-inset-bottom));border:2px solid #fff3cd80;border-radius:50%;position:absolute}#mobile-stick{left:max(24px, env(safe-area-inset-left));width:var(--stick-size);height:var(--stick-size);background:#223d3299;place-items:center;display:grid}.stick-ring{border:1px solid #fff3cd33;border-radius:50%;width:65%;height:65%}.stick-knob{width:38%;height:38%;transform:translate(var(--knob-x,0px), var(--knob-y,0px));pointer-events:none;background:#f1d596ee;border:2px solid #fff3cd;border-radius:50%;position:absolute}#mobile-action{right:max(24px, env(safe-area-inset-right));width:calc(var(--stick-size) * .7);height:calc(var(--stick-size) * .7);margin-bottom:calc(var(--stick-size) * .15);color:#354e39;cursor:pointer;background:#e8ce83ee;font:700 13px system-ui,sans-serif}#mobile-action.pressed{background:#fff0b8;transform:scale(.94)}