/* Spot Indicator Size Fix - Load this last */

/* Mobile spot indicators - override everything */
@media screen and (max-width: 768px) {
    /* Target all possible spot indicator selectors with maximum specificity */
    html body .spot-indicator,
    html body #spot-indicators .spot-indicator,
    html body #draggable-players .spot-indicator,
    html body #recall-court .spot-indicator,
    html body #input-phase .spot-indicator,
    html body div.spot-indicator,
    html body .spot-indicator.original-spot {
        /* Size - matching mobile player visual size */
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        
        /* Appearance */
        border: 2px solid #FFD700 !important;
        background: rgba(255, 215, 0, 0.7) !important;
        border-radius: 50% !important;
        
        /* Positioning */
        position: absolute !important;
        
        /* Interaction */
        pointer-events: all !important;
        cursor: pointer !important;
        z-index: 150 !important;
        
        /* Remove any animations or transitions */
        animation: none !important;
        transition: none !important;
        
        /* Box model */
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
        
        /* Remove any scale transforms except translate */
        transform-origin: center !important;
    }
    
    /* CRITICAL: Preserve translate transform for percentage positioning */
    html body .spot-indicator[style*="transform: translate"],
    html body #spot-indicators .spot-indicator[style*="transform: translate"] {
        /* Keep the inline transform style */
    }
    
    /* Original spot variant */
    html body .spot-indicator.original-spot {
        border-color: #2ecc71 !important;
        background: rgba(46, 204, 113, 0.7) !important;
    }
    
    /* Remove all pseudo elements */
    html body .spot-indicator::before,
    html body .spot-indicator::after {
        display: none !important;
    }
    
    /* Hover/active states - no size change */
    html body .spot-indicator:hover,
    html body .spot-indicator:active,
    html body .spot-indicator:focus {
        width: 20px !important;
        height: 20px !important;
        background: rgba(255, 215, 0, 0.9) !important;
        border-color: #FFD700 !important;
        /* Do not add any scale transform */
        transform: var(--inline-transform, translate(-50%, -50%)) !important;
    }
}

/* Very small mobile devices */
@media screen and (max-width: 480px) {
    html body .spot-indicator,
    html body #spot-indicators .spot-indicator,
    html body #draggable-players .spot-indicator {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        border-width: 1.5px !important;
    }
    
    html body .spot-indicator:hover,
    html body .spot-indicator:active {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Debug outline removed - uncomment if needed for testing
@media screen and (max-width: 768px) {
    html body .spot-indicator {
        outline: 1px solid red !important;
        outline-offset: 2px !important;
    }
}
*/