/* ====================================
   MOBILE OVERFLOW FIXES
   Critical fixes for mobile display issues
   ==================================== */

/* Prevent any horizontal overflow */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix hero section on mobile */
@media (max-width: 768px) {
    
    /* Game hero section */
    .game-hero {
        max-width: 100vw;
        overflow-x: hidden;
        padding: 1rem;
    }
    
    .hero-content {
        max-width: 100%;
        padding: 0;
    }
    
    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        max-width: 100%;
    }
    
    /* Image section - CRITICAL */
    .hero-image-section {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Main image container */
    .main-image-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    /* Main image itself */
    .main-image {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }
    
    /* Info section */
    .hero-info {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }
    
    /* Stats grid */
    .quick-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 100%;
    }
    
    /* Buttons */
    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* How to Play section */
    .how-to-play {
        max-width: 100vw;
        overflow-x: hidden;
        padding: 2rem 1rem;
    }
    
    .how-to-play-image-container {
        max-width: 100%;
        width: 100%;
        margin: 1rem 0;
    }
    
    .how-to-play-image {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    
    /* What's in the Box */
    .whats-included {
        max-width: 100vw;
        overflow-x: hidden;
        padding: 2rem 1rem;
    }
    
    .components-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .quick-stats {
        grid-template-columns: 1fr;
    }
    
    .components-grid {
        grid-template-columns: 1fr;
    }
}