.joystick-box{position:fixed;right:calc(2vw + 220px);bottom:2vh;background:#1e0c33;padding:12px 14px;border-radius:10px;border:1px solid #a864ff;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:9999;box-shadow:0 0 12px rgb(168 100 255 / .2)}.joystick-middle{display:flex;gap:10px}.joystick-img{width:48px;height:48px;cursor:pointer;user-select:none;transition:transform 0.1s ease}.joystick-img:hover{transform:scale(1.1)}.character{position:absolute;width:80px;height:80px;z-index:9999;transition:top 0.3s ease,left 0.3s ease;background-image:url(../images/joystick/character-idle.gif);background-size:contain;background-repeat:no-repeat;background-position:center}.character.moving-right{background-image:url(../images/joystick/character-right.gif)}.character.moving-left{background-image:url(../images/joystick/character-left.gif)}.character.moving-top{background-image:url(../images/joystick/character-top.gif)}.character.moving-bottom{background-image:url(../images/joystick/character-bottom.gif)}@media (max-width:768px){.joystick-box{display:none}.character{display:none!important}}