/**
 * MOBILE UI - Bulletproof Touch Styles
 * ONLY applies on mobile devices (screen width <= 768px)
 */

/* ============================================
   DESKTOP: HIDE ALL MOBILE ELEMENTS
   ============================================ */
@media (min-width: 769px) {
    .mobile-ui,
    .mobile-controls,
    .mobile-options-panel,
    .mobile-fullscreen-float {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ============================================
   MOBILE ONLY STYLES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    
    /* ============================================
       CRITICAL: Force all interactive elements to be clickable
       ============================================ */
    .mobile-options-panel,
    .mobile-options-panel *,
    .mobile-opt-btn,
    .mobile-check,
    .mobile-btn,
    .mobile-controls,
    .mobile-controls *,
    .mobile-fullscreen-float {
        pointer-events: auto !important;
    }

    /* ============================================
       Mobile Controls Bar - VISIBLE on mobile
       ============================================ */
    .mobile-controls {
        display: flex !important;
        position: relative;
        z-index: 500 !important;
    }

    /* ============================================
       Mobile Options Panel - Above Everything
       ============================================ */
    .mobile-options-panel {
        display: none;
        position: relative;
        z-index: 1000 !important;
        isolation: isolate;
    }

    .mobile-options-panel.active {
        display: flex !important;
    }

    /* ============================================
       Option Buttons - Maximum Clickability
       ============================================ */
    .mobile-opt-btn {
        position: relative;
        z-index: 100 !important;
        min-height: 60px !important;
        min-width: 60px !important;
        padding: 14px 12px !important;
        cursor: pointer !important;
        
        /* Touch optimization */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        
        /* Visual */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        
        background: var(--bg-elevated, #2a2d35) !important;
        border: 2px solid var(--border, #3a3d45) !important;
        border-radius: 12px !important;
        color: var(--text-secondary, #a0a4b0) !important;
        
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        
        transition: all 0.15s ease !important;
    }

    /* Active state feedback */
    .mobile-opt-btn.touching,
    .mobile-opt-btn:active {
        transform: scale(0.94) !important;
        background: var(--bg-hover, #35383f) !important;
    }

    /* Selected state */
    .mobile-opt-btn.active {
        background: linear-gradient(135deg, #4f9d69, #3d8a5a) !important;
        border-color: #4f9d69 !important;
        color: white !important;
        box-shadow: 0 4px 20px rgba(79, 157, 105, 0.4) !important;
    }

    .mobile-opt-btn.active.touching,
    .mobile-opt-btn.active:active {
        background: linear-gradient(135deg, #3d8a5a, #2d7a4a) !important;
    }

    /* ============================================
       Game Mode Buttons - Larger & Horizontal
       ============================================ */
    .mobile-opt-btn.mode {
        min-height: 70px !important;
        flex-direction: row !important;
        gap: 12px !important;
        padding: 16px 20px !important;
    }

    .mobile-opt-btn.mode svg {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }

    .mobile-opt-btn.mode span {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    /* ============================================
       Difficulty Buttons - With Emoji
       ============================================ */
    .mobile-opt-btn.diff {
        min-height: 75px !important;
        padding: 12px 10px !important;
    }

    .mobile-opt-btn.diff .diff-icon {
        font-size: 1.8rem !important;
        line-height: 1 !important;
    }

    .mobile-opt-btn.diff span:last-child {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .mobile-opt-btn.diff.active {
        background: linear-gradient(135deg, #f5a623, #e59400) !important;
        border-color: #f5a623 !important;
        color: #1a1d21 !important;
        box-shadow: 0 4px 20px rgba(245, 166, 35, 0.4) !important;
    }

    /* ============================================
       Timer Buttons
       ============================================ */
    .mobile-opt-btn.time {
        min-height: 65px !important;
        padding: 10px 8px !important;
    }

    .mobile-opt-btn.time .time-val {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .mobile-opt-btn.time .time-unit {
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        opacity: 0.7 !important;
    }

    .mobile-opt-btn.time.active .time-val,
    .mobile-opt-btn.time.active .time-unit {
        color: white !important;
        opacity: 1 !important;
    }

    /* Timer disabled state */
    .mobile-option-btns.timer-btns.disabled {
        opacity: 0.3 !important;
        pointer-events: none !important;
    }

    /* ============================================
       Checkboxes - Large Touch Targets
       ============================================ */
    .mobile-check {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        min-height: 54px !important;
        
        background: var(--bg-elevated, #2a2d35) !important;
        border: 2px solid var(--border, #3a3d45) !important;
        border-radius: 12px !important;
        
        cursor: pointer !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--text-secondary, #a0a4b0) !important;
        
        transition: all 0.15s ease !important;
    }

    .mobile-check:active {
        transform: scale(0.97) !important;
        background: var(--bg-hover, #35383f) !important;
    }

    .mobile-check input {
        display: none !important;
    }

    .mobile-check .checkmark {
        width: 24px !important;
        height: 24px !important;
        border: 2px solid var(--border, #3a3d45) !important;
        border-radius: 6px !important;
        background: var(--bg-base, #1a1d21) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: all 0.15s ease !important;
    }

    .mobile-check input:checked + .checkmark {
        background: #4f9d69 !important;
        border-color: #4f9d69 !important;
    }

    .mobile-check input:checked + .checkmark::after {
        content: '✓' !important;
        color: white !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
    }

    .mobile-check:has(input:checked) {
        border-color: #4f9d69 !important;
        background: rgba(79, 157, 105, 0.1) !important;
        color: var(--text-primary, #ffffff) !important;
    }

    /* ============================================
       Control Bar Buttons
       ============================================ */
    .mobile-btn {
        min-height: 60px !important;
        min-width: 60px !important;
        padding: 12px !important;
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        
        background: var(--bg-elevated, #2a2d35) !important;
        border: 2px solid var(--border, #3a3d45) !important;
        border-radius: 12px !important;
        
        color: var(--text-secondary, #a0a4b0) !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        
        transition: all 0.15s ease !important;
    }

    .mobile-btn:active,
    .mobile-btn.touching {
        transform: scale(0.92) !important;
        background: var(--bg-hover, #35383f) !important;
    }

    .mobile-btn.active {
        background: linear-gradient(135deg, #f5a623, #e59400) !important;
        border-color: #f5a623 !important;
        color: #1a1d21 !important;
        box-shadow: 0 4px 15px rgba(245, 166, 35, 0.3) !important;
    }

    .mobile-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* ============================================
       Fullscreen Button - Maximum Visibility
       ============================================ */
    .mobile-fullscreen-float {
        display: flex !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 9999 !important;
        
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        
        min-width: 50px !important;
        min-height: 50px !important;
        padding: 12px 18px !important;
        
        background: linear-gradient(135deg, #4f9d69, #3d8a5a) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 14px !important;
        
        color: white !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4),
                    0 0 0 3px rgba(79, 157, 105, 0.3) !important;
        
        transition: all 0.15s ease !important;
        isolation: isolate !important;
    }

    .mobile-fullscreen-float:active,
    .mobile-fullscreen-float.touching {
        transform: scale(0.9) !important;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3) !important;
    }

    .mobile-fullscreen-float span {
        pointer-events: none !important;
    }

    /* ============================================
       Fullscreen Exit Button
       ============================================ */
    .fs-exit-btn {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        
        min-height: 44px !important;
        padding: 10px 20px !important;
        
        background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
        border: none !important;
        border-radius: 10px !important;
        
        color: white !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        
        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
        transition: all 0.15s ease !important;
    }

    .fs-exit-btn:active,
    .fs-exit-btn.touching {
        transform: scale(0.95) !important;
        background: linear-gradient(135deg, #c0392b, #a93226) !important;
    }

    .fs-exit-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* ============================================
       Fullscreen Mode - Hide Mobile Controls
       ============================================ */
    .fullscreen-active .mobile-fullscreen-float {
        display: none !important;
    }

    .fullscreen-active .mobile-controls {
        display: none !important;
    }

    .fullscreen-active .mobile-options-panel {
        display: none !important;
    }

    .fullscreen-active .fullscreen-status {
        display: flex !important;
    }

    /* ============================================
       Small Screen Adjustments (400px and below)
       ============================================ */
    @media (max-width: 400px) {
        .mobile-opt-btn {
            min-height: 55px !important;
            padding: 10px 8px !important;
        }
        
        .mobile-opt-btn.mode {
            min-height: 60px !important;
            padding: 12px 14px !important;
        }
        
        .mobile-opt-btn.mode svg {
            width: 26px !important;
            height: 26px !important;
        }
        
        .mobile-opt-btn.diff {
            min-height: 65px !important;
        }
        
        .mobile-opt-btn.diff .diff-icon {
            font-size: 1.5rem !important;
        }
        
        .mobile-fullscreen-float {
            top: 8px !important;
            right: 8px !important;
            min-width: 46px !important;
            min-height: 46px !important;
            padding: 10px 14px !important;
        }
        
        .mobile-fullscreen-float .fs-text-enter,
        .mobile-fullscreen-float .fs-text-exit {
            display: none !important;
        }
    }

    /* ============================================
       Animation for Visual Feedback
       ============================================ */
    @keyframes tapPulse {
        0% { transform: scale(1); }
        50% { transform: scale(0.95); }
        100% { transform: scale(1); }
    }

    .touching {
        animation: tapPulse 0.15s ease !important;
    }

} /* End of @media (max-width: 768px) */