/* 1. TABLET & SMALL LAPTOP (Below 1400px) */
@media (max-width: 1400px) {
    /* Kill the "Huge Empty Space" - allow sections to hug content */
    section { min-height: auto !important; height: auto !important; }
    .container { padding: 60px 10% !important; }

    /* HERO: Hide floating masks, center the text and the main mask */
    .m01, .m02, .m03, .m04, .m05, .m06, .m07, .m08, .m09 { display: none !important; }
    .m10 { position: relative !important; margin: 0 auto 30px; display: block !important; width: 250px !important; height: 340px !important; right: auto !important;top: auto !important;}
    .text-group { margin-top: 20px !important; align-items: center !important; }
    .main-title, .indie-label, .social-label { text-align: center !important; }

    /* RELICS: KEEP THE NAME, KILL THE DESCRIPTION */
    .relic-grid { flex-wrap: wrap !important; justify-content: center; gap: 20px; }
    .relic-item { width: calc(33.33% - 20px) !important; min-width: 180px; padding: 15px !important;}
    .relic-info p, .tier-tag { display: none !important; }
    .relic-item h3 { display: block !important; text-align: center; margin-top: 10px; font-size: 0.95rem; color: #A855F7;}
}

/* 2. MOBILE & PHONES (Below 900px) */
@media (max-width: 900px) {
    /* FIX: Keep the bar for the logo, but hide the text links */
    .nav-links { display: none !important; }
    
    /* Center the logo in the bar since links are gone */
    .nav-container { justify-content: center !important; }
    .nav-fixed { height: 60px; } /* Slightly slimmer for mobile */

    .container { padding: 50px 5% !important; }
    
    /* Global Stack Logic for all Grids */
    .mask-flex, .dyn-row, .v-flex, .media-grid, .footer-grid { flex-direction: column !important; text-align: center !important; gap: 40px !important; }
    
    .sec-title { text-align: center !important; }

    /* Roadmap: Force list style */
    .roadmap-container::before { left: 20px !important; }
    .roadmap-item { width: 100% !important; text-align: left !important; padding-left: 50px !important; padding-right: 0 !important; }
    .roadmap-item::after { left: 12px !important; }
    .roadmap-item:nth-child(odd) { align-self: flex-start !important; text-align: left !important; }

    /* Dynamics: Stop the zig-zag alignment on phones */
    .dyn-row:nth-child(even) { flex-direction: column !important; }
    .dyn-row:nth-child(even) .dyn-text { text-align: center !important; }

    /* Relics: 2 columns for phones */
    .relic-item { width: calc(50% - 10px) !important; }

    /* Footer: Center Everything */
    .footer-col { text-align: center !important; align-items: center !important; width: 100%; margin-bottom: 25px;}
    .footer-col:last-child { align-items: center !important; }
    .footer-col ul li { justify-content: center !important; }
}