.movement-joystick{--joy-x:0px;--joy-y:0px;--stick-size:164px;position:absolute;display:none;left:var(--screen-left,18px);bottom:calc(var(--screen-bottom,12px) + var(--nav-height,76px) + 12px);width:var(--stick-size);height:var(--stick-size);box-sizing:border-box;border:3px solid #b79b65;border-radius:50%;background:radial-gradient(circle at 43% 33%,#dbca9aab,#ac986c99 61%,#6c684dba);box-shadow:0 0 0 3px #414d37a6,0 7px 0 #36422e66,0 12px 24px #26382140,inset 0 2px 2px #fff0bc80,inset 0 -4px 12px #4a4a324d;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;z-index:4;cursor:grab;isolation:isolate}
.joystick-orbit{position:absolute;inset:16px;border:1px solid #f5e2a96b;border-radius:50%;box-shadow:inset 0 0 0 1px #6f68454d,0 0 0 5px #d3c08c1c;pointer-events:none}
.joystick-mark{position:absolute;font:16px Georgia,serif;line-height:1;color:#5b6345c9;text-shadow:0 1px #f4e2b080;pointer-events:none}.joystick-mark.north{top:9px;left:50%;translate:-50% 0}.joystick-mark.south{bottom:9px;left:50%;translate:-50% 0}.joystick-mark.west{left:10px;top:50%;translate:0 -50%}.joystick-mark.east{right:10px;top:50%;translate:0 -50%}
.joystick-thumb{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;box-sizing:border-box;border:2px solid #e5cd91;border-radius:50%;background:radial-gradient(circle at 35% 25%,#efdeb0,#c5ac76 55%,#9d8657);box-shadow:inset 0 2px 2px #fff2c29e,inset 0 -3px 5px #6b613e66,0 5px 0 #726b455c,0 8px 13px #3e472f5c;transform:translate(var(--joy-x),var(--joy-y));transition:transform .14s ease-out;pointer-events:none}
.joystick-thumb i{position:absolute;inset:13px;border:1px solid #9b895e;border-radius:50%;box-shadow:inset 0 1px #f9e7b196;background:radial-gradient(circle,#b7a16d33,#efdca31c)}
.movement-joystick.is-dragging{cursor:grabbing;border-color:#e7d19a}.is-dragging .joystick-thumb{transition:none;box-shadow:inset 0 2px 2px #fff2c29e,inset 0 -3px 5px #6b613e66,0 5px 0 #726b455c,0 9px 18px #3e472f73}
.joystick-caption{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-size:10px;letter-spacing:2px;color:#eee1b6;text-shadow:0 1px 3px #263821;pointer-events:none}
.movement-joystick:focus-visible{outline:3px solid #f1d698;outline-offset:6px}

@media(any-pointer:coarse),(max-width:1024px){.movement-joystick{display:block}:root{--home-stack-bottom:calc(var(--screen-bottom,12px) + var(--nav-height,76px) + 212px)}}
@media(max-width:380px){.movement-joystick{--stick-size:156px}:root{--home-stack-bottom:calc(var(--screen-bottom,12px) + var(--nav-height,76px) + 204px)}}
@media(max-height:600px) and (min-width:601px){:root{--home-stack-bottom:116px}.movement-joystick{--stick-size:136px;left:calc(var(--screen-left,12px) + var(--home-left-width) + 18px)}.joystick-thumb{width:60px;height:60px;margin:-30px 0 0 -30px}.joystick-orbit{inset:13px}}
#app:has(.window-shade,.dialogue) .movement-joystick,body:has(dialog[open]) .movement-joystick{visibility:hidden}
@media(prefers-reduced-motion:reduce){.joystick-thumb{transition:none}}