/* Z-Index Fix - Ensure proper layering on mobile */

/* Base layer structure:
   - Canvas: z-index 1
   - Players: z-index 10
   - Number input: z-index 5 (below players)
   - Spot indicators: z-index 150 (above everything)
*/

/* Lower the number input container z-index */
.number-input-container {
    z-index: 5 !important; /* Below players and spots */
    pointer-events: all;
}

/* Ensure draggable players are above input but below spots */
.draggable-player {
    z-index: 10 !important;
    pointer-events: all;
}

/* Spot indicators must be on top */
.spot-indicator {
    z-index: 150 !important; /* Already set in spot-fix.css but reinforce */
    pointer-events: all !important;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    /* Move input field to avoid center court area where spots appear */
    .number-input-container {
        top: 10% !important; /* Move higher to avoid spots */
        z-index: 5 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        padding: 10px 15px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Ensure recall court doesn't block interactions */
    #recall-court {
        z-index: auto !important;
    }
    
    /* Draggable players container */
    #draggable-players {
        z-index: auto !important;
        pointer-events: none !important; /* Let children handle events */
    }
    
    /* Individual draggable players */
    #draggable-players .draggable-player {
        pointer-events: all !important;
        z-index: 10 !important;
    }
    
    /* Spot indicators with maximum priority */
    #draggable-players .spot-indicator,
    #spot-indicators .spot-indicator {
        z-index: 150 !important;
        pointer-events: all !important;
        cursor: pointer !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .number-input-container {
        top: 8% !important; /* Even higher on small screens */
        padding: 8px 12px !important;
    }
    
    .number-input-container h3 {
        font-size: 1.2rem !important;
        margin: 0 0 5px 0 !important;
    }
    
    #number-input {
        font-size: 2rem !important;
        width: 80px !important;
        padding: 5px 10px !important;
    }
}