body {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 margin: 0;
 background-color: #282c34;
 color: white;
 box-sizing: border-box;
 padding: 10px;
 overflow: hidden;
}

canvas {
 border: 2px solid white;
 max-width: 100%;
 max-height: 80vh;
 object-fit: contain;
 box-sizing: border-box;
}

#joystick-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none; 
    z-index: 10;
}

#joystick-knob {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    position: relative;
    transition: transform 0.05s linear;
}

@media (min-width: 769px) {
    #joystick-container {
        display: none !important;
    }
    canvas {
        max-height: 90vh;
    }
}