/**
 * Minimal joystick styles
 */

/* Basic container positioning */
#joystick-container {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    z-index: 1000;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    #joystick-container {
        bottom: 60px;
    }
}

/* Hide joystick when dialogs are open */
.dialog-open #joystick-container {
    display: none;
}

/* Basic nipple styling */
.back {
    background: rgba(120, 120, 120, 0.9) !important; /* Darker grey color for better contrast */
}

.front {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Remove all outlines and borders */
#joystick-container, .nipple, .front, .back, .nipple-collection, .nipple-collection > div {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}