.joistick.svelte-1syjnga{--_background: var(--clr-shade-300);display:grid;text-align:center;justify-content:center;grid-template-areas:". up ." "left center right" ". down ."}.joistick.svelte-1syjnga>:where(.svelte-1syjnga){width:2.5rem;aspect-ratio:1;background-color:var(--_background);border:none;display:flex;justify-content:center;align-items:center;color:var(--clr-background)}.joistick.svelte-1syjnga>button:where(.svelte-1syjnga){position:relative;border-radius:.5rem 0 0 .5rem;transition:all .2s ease}.joistick.svelte-1syjnga>button:where(.svelte-1syjnga):hover{--_background: color-mix(in srgb, var(--clr-shade-300), black 10%)}.joistick.svelte-1syjnga>button:where(.svelte-1syjnga):active{box-shadow:inset 4px 0 4px #0003}.up.svelte-1syjnga{grid-area:up;rotate:90deg;box-shadow:0 0 4px #0003}.right.svelte-1syjnga{grid-area:right;rotate:180deg;box-shadow:0 -4px 4px #0003,0 0 4px #0003}.down.svelte-1syjnga{grid-area:down;rotate:270deg;box-shadow:-4px 0 4px #0003,0 0 4px #0003}.left.svelte-1syjnga{grid-area:left;box-shadow:0 4px 4px #0003,0 0 4px #0003}.center.svelte-1syjnga{grid-area:center;z-index:100;scale:1.01;display:flex;justify-content:center;align-items:center}.center.svelte-1syjnga:after{content:"";display:block;width:85%;aspect-ratio:1;border-radius:100%;box-shadow:inset 0 0 4px 2px #0003}main.svelte-ho7xw4{margin-bottom:2rem}.controll.svelte-ho7xw4{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:.5rem;margin:1rem .5rem}.controll.svelte-ho7xw4>:where(.svelte-ho7xw4){width:100%;max-width:30rem}.joisticks.svelte-ho7xw4{display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.invisible.svelte-ho7xw4{display:none}