/* 
 * Mobile Optimization Styles 
 * Improves touch targets and responsive layout for better mobile experience
 * and improved Core Web Vitals scores
 */

/* ===== Offline Experience ===== */
.offline-notice {
    display: none;
    padding: 8px 16px;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    margin: 8px 0;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
}

.offline-mode .offline-notice {
    display: block;
}

.offline-mode .requires-connection {
    opacity: 0.6;
    pointer-events: none;
}

/* ===== Touch Target Optimization ===== */
/* Make touch targets at least 48px for better accessibility */

@media (max-width: 767px) {
    /* Card navigation for games */
    .card {
        margin-bottom: 20px;
    }
    
    .card-body {
        padding: 16px;
    }
    
    /* Make game cards easier to tap */
    .play-now-button {
        height: 48px;
        min-width: 120px;
    }
    
    /* Improve comment form usability */
    .comment-form textarea,
    .comment-form input {
        font-size: 16px !important; /* Prevent iOS zoom on input */
        padding: 12px;
    }
    
    /* Increase spacing between interactive elements */
    .btn + .btn,
    .nav-item + .nav-item {
        margin-left: 8px;
    }
    
    /* Optimize mobile padding and margin */
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Better spacing for FAQs */
    .faq-item {
        padding: 16px;
    }
    
    /* Improved mobile header */
    .site-header {
        padding: 10px 0;
    }
}

/* ===== Tap State Enhancement ===== */
@media (max-width: 767px) {
    /* Add tap state visual feedback */
    a:active, 
    button:active, 
    .btn:active,
    .card:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }
    
    /* Remove hover states on mobile */
    a:hover, 
    button:hover, 
    .btn:hover {
        opacity: 1;
    }
}

/* ===== Text Size Optimization ===== */
@media (max-width: 767px) {
    body {
        font-size: 16px; /* Minimum recommended size to prevent auto-zoom */
    }
    
    h1 {
        font-size: 24px !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    .card-body h3 {
        font-size: 16px !important;
    }
}

/* ===== Game Frame Responsive Sizing ===== */
@media (max-width: 767px) {
    .game-ratio {
        max-height: 80vh;
    }
}