.controls {
    position: absolute;
    bottom: 15vh;
    display: none;
    justify-content: space-between;
    padding: 20px;
    pointer-events: none;
    z-index: 3;
}

.d-pad {
    width: 60vh;
    height: 20vh;
    position: relative;
    pointer-events: all;
}

.d-pad button {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(223, 223, 223, 0.8);
    border: 2px solid #333;
    border-radius: 8px;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    user-select: none;
}

.d-pad button:active {
    background: rgba(200, 200, 200, 0.8);
    transform: scale(0.95);
}

.up { top: 0; left: 30px; }
.right { top: 30px; left: 60px; }
.down { top: 60px; left: 30px; }
.left { top: 30px; left: 0; }

.action-buttons {
    display: flex;
    gap: 10px;
    pointer-events: all;
    margin-top: 40px;
}

.action-button {
    width: 40px;
    height: 40px;
    border: 2px solid #333;
    border-radius: 50%;
    touch-action: none;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.action-button:active {
    transform: scale(0.95);
}

#action {
    background: rgba(33, 255, 162, 0.8);
}

#speed {
    margin-top: -20px;
    background: rgba(33, 85, 255, 0.8);
}

@media (hover: none) and (pointer: coarse) {
    #controls {
        display: flex;
    }
}