/* 
 * Mobile UI Fix - Core Skills Pages
 * Ensures exceptional mobile experience at 375px width
 */

/* Base mobile adjustments */
@media only screen and (max-width: 480px) {
    /* Ensure tap targets are at least 44px */
    button, 
    .btn, 
    input[type="button"], 
    input[type="submit"],
    .game-card,
    .lesson-card,
    .option-card {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
    }
    
    /* Ensure links are tappable */
    a, 
    .nav-link,
    .card-link {
        min-height: 44px !important;
        padding: 12px !important;
        display: inline-block;
    }
    
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Fix containers */
    .container,
    main,
    .content,
    .lesson-content,
    .game-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure text is readable */
    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    p, li, td, th {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }
    h4 { font-size: 1.1rem !important; }
    
    /* Fix cards */
    .exercise,
    .lesson,
    .game-card,
    .card {
        padding: 15px !important;
        margin: 10px 0 !important;
        border-radius: 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Fix images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix tables */
    table {
        font-size: 14px !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix grids */
    .grid,
    .card-grid,
    .lesson-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Fix flex */
    .flex,
    .flex-row,
    .button-group {
        flex-wrap: wrap !important;
    }
    
    /* Fix navigation */
    .header-inner,
    .nav,
    .nav-items {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Fix inputs */
    input, 
    textarea, 
    select {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix game elements */
    .game-board,
    .puzzle-area,
    .word-bank {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .word-chip {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-height: 40px !important;
    }
    
    /* Fix quiz options */
    .quiz-option,
    .option-label {
        padding: 12px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Fix progress bars */
    .progress-bar,
    .score-bar {
        height: 24px !important;
        font-size: 12px !important;
    }
    
    /* Ensure modals work on mobile */
    .modal,
    .popup,
    .overlay {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding: 15px !important;
    }
    
    /* Hide non-essential on mobile */
    .desktop-only {
        display: none !important;
    }
}

/* Very small screens (iPhone SE) */
@media only screen and (max-width: 320px) {
    body {
        font-size: 14px !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
    button:hover,
    .btn:hover,
    a:hover {
        /* Disable hover effects on touch */
        transform: none !important;
    }
    
    /* Add active states */
    button:active,
    .btn:active,
    a:active {
        opacity: 0.8 !important;
        transform: scale(0.98) !important;
    }
}

/* Responsive logo sizing */
@media only screen and (max-width: 768px) {
    .header-logo {
        height: 50px !important;
        width: auto !important;
    }
    .header {
        padding: 10px 0 !important;
    }
}

@media only screen and (max-width: 480px) {
    .header-logo {
        height: 40px !important;
        width: auto !important;
    }
}