/* Mobile-specific CSS overrides for disabled drag-drop functionality */

/* Ensure skills section works well on mobile without drag-drop */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    
    /* Reset any drag-drop specific styling */
    .skills-holographic-container {
        touch-action: auto !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .skill-icon.holo {
        touch-action: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: auto !important;
        cursor: default;
    }
    
    /* Improve mobile layout for skills */
    .skills-category {
        margin-bottom: 25px;
        width: 100%;
    }
    
    .skills-icons-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0 10px;
    }
    
    .skill-icon.holo {
        width: 70px;
        height: 70px;
        margin: 5px;
        font-size: 1.1rem;
        
        /* Smooth touch feedback */
        transition: transform 0.1s ease, box-shadow 0.2s ease;
    }
    
    .skill-icon.holo span {
        font-size: 0.7rem;
        margin-top: 4px;
    }
    
    /* Remove drag-related visual elements */
    .skills-reset-icon,
    .drag-trail,
    .neon-trail,
    .hover-glow,
    .grid-snap-indicator,
    .touch-gesture-guide {
        display: none !important;
    }
    
    /* Ensure skills container scrolls properly */
    .skills-all-container {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Mobile info message styling */
    .mobile-skills-info {
        animation: fadeInUp 0.5s ease-out;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Improve touch targets */
    .skill-icon.holo:active {
        transform: scale(0.95);
        box-shadow: 0 0 15px rgba(0, 195, 255, 0.4);
    }
    
    /* Ensure proper spacing and prevent layout shifts */
    .skills-holographic-container {
        min-height: auto;
        padding: 20px 15px;
    }
    
    /* Category headers should be clearly visible */
    .skills-category h4 {
        color: #00c3ff;
        font-size: 1.1rem;
        margin-bottom: 15px;
        text-align: center;
        text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .skill-icon.holo {
        width: 65px;
        height: 65px;
        font-size: 1rem;
        margin: 3px;
    }
    
    .skill-icon.holo span {
        font-size: 0.65rem;
    }
    
    .skills-icons-row {
        gap: 8px;
        padding: 0 5px;
    }
    
    .skills-holographic-container {
        padding: 15px 10px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .skills-holographic-container {
        padding: 15px;
    }
    
    .skill-icon.holo {
        width: 60px;
        height: 60px;
        font-size: 0.9rem;
    }
    
    .skills-category {
        margin-bottom: 20px;
    }
}