/* Mobile Responsive Styles */

/* Touch Target Optimizations - Ensure minimum 44x44px touch targets */
@media (max-width: 768px) {
    .game-area {
        padding: 24px 20px;
        border-radius: 20px;
        box-shadow: 
            0 12px 40px rgba(0,0,0,0.15),
            0 0 0 1px rgba(255,255,255,0.2);
    }
    
    .question-card {
        padding: 16px;
    }
    
    .question-content {
        font-size: 1rem;
    }
    
    .options-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Optimized touch targets - minimum 44x44px */
    .option-btn {
        padding: 18px 16px;
        font-size: 0.9rem;
        min-height: 56px; /* Exceeds 44px minimum */
        touch-action: manipulation; /* Disable double-tap zoom */
    }
    
    .options-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    /* All buttons meet 44x44px minimum touch target */
    button {
        width: 100%;
        padding: 16px;
        font-size: 0.875rem;
        min-height: 44px;
        touch-action: manipulation;
    }
    
    .back-btn {
        padding: 12px 16px;
        font-size: 0.9rem;
        border-radius: 12px;
        min-width: 44px;
        min-height: 44px;
        width: auto;
        touch-action: manipulation;
    }
    
    .score {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .progress-bar {
        height: 10px;
        border-radius: 5px;
        margin-top: 10px;
    }
    
    .progress-fill {
        border-radius: 5px;
    }
    
    .result {
        padding: 16px;
        font-size: 1rem;
        border-radius: 12px;
        margin-bottom: 16px;
    }
    
    .result.correct,
    .result.incorrect {
        animation-duration: 0.6s;
    }
}

@media (max-width: 768px) {
    .menu-title {
        font-size: 1.65rem;
        margin-bottom: 28px;
    }
    
    .menu-options {
        gap: 28px;
    }
    
    .menu-btn {
        padding: 28px 20px;
        border-radius: 20px;
        touch-action: manipulation;
        min-height: 160px;
    }
    
    .menu-btn-content {
        gap: 14px;
    }
    
    .menu-btn-icon {
        font-size: 3.5rem;
    }
    
    .menu-btn-title {
        font-size: 1.15rem;
    }
    
    .menu-btn-desc {
        font-size: 0.85rem;
    }
    
    .daily-stats {
        padding: 20px;
        margin-top: 24px;
    }
    
    .daily-complete,
    .daily-progress {
        font-size: 0.9rem;
    }
    
    .menu-btn-icon {
        font-size: 2rem;
    }
    
    .menu-btn-title {
        font-size: 1.1rem;
    }
    
    .menu-btn-desc {
        font-size: 0.8rem;
    }
    
    .menu-btn-arrow {
        font-size: 1.25rem;
    }
    
    .menu-btn:hover {
        transform: none;
    }
    
    .menu-btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .version-info {
        margin-top: 20px;
    }
    
    .version-text {
        font-size: 0.7rem;
    }
    
    .share-app-btn, .share-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .game-header {
        margin-bottom: 16px;
        padding: 0 4px;
    }
    
    .game-mode-label {
        font-size: 0.9rem;
        text-align: right;
        flex: 1;
    }
    
    .menu-button {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
        touch-action: manipulation;
    }
    
    .dropdown-menu {
        top: 70px;
        right: 16px;
        min-width: 180px;
    }
}

@media (max-width: 768px) {
    .results-content {
        padding: 32px 24px;
        width: 92%;
    }
    
    .results-emoji {
        font-size: 4rem;
    }
    
    .results-title {
        font-size: 1.5rem;
    }
    
    .results-score-big {
        font-size: 3rem;
    }
    
    .results-percentage {
        font-size: 1.25rem;
    }
    
    .results-blocks {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
    
    .results-share-btn {
        padding: 16px 24px;
        font-size: 1rem;
        min-height: 52px;
        touch-action: manipulation;
    }
    
    .results-close-btn {
        padding: 14px 24px;
        font-size: 0.95rem;
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .about-content {
        width: 95%;
        max-height: 85vh;
    }
    
    .about-header {
        padding: 20px 24px;
    }
    
    .about-title {
        font-size: 1.3rem;
    }
    
    .about-body {
        padding: 20px 24px;
        max-height: calc(85vh - 90px);
    }
    
    .loading-state::after {
        width: 14px;
        height: 14px;
        right: 16px;
    }
    
    button:hover:not(:disabled) {
        transform: none;
    }
    
    button:active {
        transform: scale(0.97);
        transition: transform 0.05s ease;
    }
    
    .back-btn:active {
        transform: scale(0.95);
        background: rgba(102,126,234,0.15);
    }
    
    .shake {
        animation: shake 0.4s ease-in-out;
    }
    
    .pulse {
        animation: pulse 0.8s ease-in-out;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .game-area {
        padding: 16px 12px;
        margin: 0 4px;
    }
    
    .game-header {
        margin-bottom: 12px;
    }
    
    .back-btn {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .game-mode-label {
        font-size: 0.85rem;
    }
    
    .question-card {
        padding: 12px;
    }
    
    .question-content {
        font-size: 0.95rem;
    }
    
    .option-btn {
        padding: 14px;
        font-size: 0.85rem;
        min-height: 52px;
    }
    
    #skipBtn {
        padding: 14px;
        font-size: 0.8rem;
        min-height: 44px;
        touch-action: manipulation;
    }
    
    .result {
        padding: 14px;
        font-size: 0.9rem;
    }
    
    .score {
        font-size: 1rem;
    }
    
    .menu-title {
        font-size: 1.4rem;
        margin-bottom: 24px;
    }
    
    .menu-btn {
        padding: 24px 16px;
        min-height: 140px;
    }
    
    .menu-btn-icon {
        font-size: 3rem;
    }
    
    .menu-btn-title {
        font-size: 1.05rem;
    }
    
    .menu-btn-desc {
        font-size: 0.8rem;
    }
    
    .daily-stats {
        padding: 16px;
        margin-top: 20px;
    }
}

/* Mobile Touch Enhancements */
@media (max-width: 768px) {
    /* Increase touch area for small interactive elements */
    .about-close,
    .dropdown-item,
    .home-button {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
    
    /* Add padding to increase touch area for links and small buttons */
    a, .link-button {
        padding: 8px;
        margin: -8px;
        touch-action: manipulation;
    }
    
    /* Ensure circular progress and streak indicators are touch-friendly */
    .circular-progress {
        min-width: 64px;
        min-height: 64px;
    }
    
    .streak-indicator {
        min-height: 36px;
        padding: 8px 16px;
    }
    
    /* Prevent text selection during touch interactions */
    .option-btn,
    .menu-btn,
    button {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Optimize chart bars for touch */
    .chart-bar {
        min-width: 32px;
        touch-action: manipulation;
    }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .game-area {
        padding: 16px 20px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .question-card {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .options-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .option-btn {
        padding: 12px;
        min-height: 48px;
        font-size: 0.85rem;
    }
    
    .results-content {
        max-height: 85vh;
        overflow-y: auto;
        padding: 24px 28px;
    }
    
    .results-emoji {
        font-size: 3rem;
        margin-bottom: 8px;
    }
    
    .results-score-big {
        font-size: 2.5rem;
    }
    
    .menu-btn {
        min-height: 100px;
        padding: 16px;
    }
    
    .menu-btn-icon {
        font-size: 2rem;
    }
}

/* Portrait orientation optimizations */
@media (max-width: 768px) and (orientation: portrait) {
    .options-container {
        grid-template-columns: 1fr;
    }
    
    .menu-options {
        grid-template-columns: 1fr;
    }
    
    .game-area {
        max-height: none;
    }
}