.mgc-joystick{position:relative;width:112px;height:112px;flex:none;border:2px solid #c6dfba;border-radius:50%;background:radial-gradient(circle,#dceccc 0 35%,#f6fbed 36% 65%,#dfedcf 66%);box-shadow:inset 0 3px 9px #34552218,0 6px 15px #34552218;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab}
.mgc-joystick::before{content:"";position:absolute;inset:12px;border:1px dashed #79a45d66;border-radius:50%;pointer-events:none}
.mgc-joystick-stick{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border:2px solid #fff8;border-radius:50%;background:linear-gradient(145deg,#94d953,#4a8f1e);box-shadow:0 5px 0 #356c19,0 8px 14px #34552230;pointer-events:none;transform:translate(var(--stick-x,0px),var(--stick-y,0px));transition:transform .14s ease-out}
.mgc-joystick-stick::after{content:"";position:absolute;inset:12px;border:2px solid #ffffff66;border-radius:50%}
.mgc-joystick.active{cursor:grabbing;border-color:#f9a34c}
.mgc-joystick.active .mgc-joystick-stick{transition:none;background:linear-gradient(145deg,#ffb05b,#f97316);box-shadow:0 4px 0 #c95a0a,0 8px 14px #34552230}
.mgc-joystick:focus-visible{outline:3px solid #478626;outline-offset:4px}

@media(pointer:coarse) and (max-height:700px){.mgc-joystick{width:96px;height:96px}.mgc-joystick-stick{width:44px;height:44px;margin:-22px}}