[data-joystick]{display:none}[data-touch-controls=joystick] .pad:has(>[data-joystick]){grid-template:1fr/1fr;place-self:stretch stretch;place-items:stretch stretch;display:grid}[data-touch-controls=joystick] .pad:has(>[data-joystick])>:not([data-joystick]){display:none}[data-touch-controls=joystick] [data-joystick]{touch-action:none;-webkit-user-select:none;user-select:none;place-items:center;display:grid}.stick-base{--stick-travel:calc(var(--stick-size,8rem) * .27);box-sizing:border-box;width:var(--stick-size,8rem);aspect-ratio:1;border:3px solid var(--stick-color,#fff);background:#ffffff0f;border-radius:50%;place-items:center;display:grid}[data-joystick=left-right] .stick-base{aspect-ratio:2;border-radius:999px}.stick-knob{width:calc(var(--stick-size,8rem) * .4);aspect-ratio:1;border:3px solid var(--stick-color,#fff);background:var(--stick-fill,#444);transform:translate(calc(var(--stick-x,0) * var(--stick-travel)), calc(var(--stick-y,0) * var(--stick-travel)));border-radius:50%}html,body{background:#000;height:100%;margin:0}body{place-items:center;display:grid}#screen{height:min(100vh,128.571vw);image-rendering:pixelated}.panel{display:none}@media (pointer:coarse){:root{--panel-height:12.5rem;--side-width:12rem;--arrow:3.9rem}html,body{overscroll-behavior:none;height:100dvh;overflow:hidden}body{box-sizing:border-box;padding:env(safe-area-inset-top) max(env(safe-area-inset-right), .5rem) max(env(safe-area-inset-bottom), .5rem) max(env(safe-area-inset-left), .5rem);grid-template:"screen screen screen" auto "stick system start" minmax(var(--panel-height), 1fr) / 1fr auto 1fr;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#screen{height:min(100dvh - var(--panel-height) - env(safe-area-inset-top) - max(env(safe-area-inset-bottom), .5rem), (100vw - max(env(safe-area-inset-left), .5rem) - max(env(safe-area-inset-right), .5rem)) * 288 / 224);grid-area:screen}.panel{display:contents}.pad{justify-content:center;align-items:center;gap:.5rem;display:flex}.pad-stick{grid-area:stick;grid-template:". up ." var(--arrow) "left . right" var(--arrow) ". down ." var(--arrow) / var(--arrow) var(--arrow) var(--arrow);place-content:center;gap:.15rem;display:grid}.key-up{grid-area:up}.key-left{grid-area:left}.key-right{grid-area:right}.key-down{grid-area:down}.pad-system{flex-direction:column;grid-area:system}.pad-start{grid-area:start}.key{color:#fff;touch-action:none;background:#222;border:3px solid #fff;font:700 1rem/1 monospace}.key:active{background:#555}.key-arrow{border-color:#2121ff;border-radius:.8rem;width:100%;height:100%;font-size:1.5rem}.key-start{background:#505000;border-color:#ff0;border-radius:50%;width:5.5rem;height:5.5rem}.key-start:active{color:#000;background:#ff0}.key-small{border-width:2px;border-radius:1rem;padding:.4rem .8rem;font-size:.75rem}}@media (pointer:coarse) and (orientation:landscape){:root{--arrow:3.6rem}body{grid-template:"system screen start" auto "stick screen start" 1fr / var(--side-width) 1fr var(--side-width)}#screen{height:min(100dvh - env(safe-area-inset-top) - max(env(safe-area-inset-bottom), .5rem), ( 100vw - 2 * var(--side-width) - max(env(safe-area-inset-left), .5rem) - max(env(safe-area-inset-right), .5rem) ) * 288 / 224)}.pad-system{flex-flow:wrap;padding-top:.5rem}}.stick{--stick-size:8.5rem;--stick-color:#2121ff;--stick-fill:#222}
/*$vite$:1*/