/* Mobile Optimizations for La Esquina */
@media (max-width: 768px) {

    /* 1. Splash Screen Fixes */
    #loader-esquina {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 50px;
        /* Offset visual center upwards */
    }

    #loader-esquina .logo-stack {
        transform: scale(0.6);
        margin-bottom: 20px;
        /* Space between logo and button */
    }

    /* Clean natural flow button */
    #loader-esquina #btn-splash-enter {
        position: static !important;
        /* Undo absolute */
        transform: none !important;
        margin-top: 20px !important;
        width: auto !important;
        min-width: 200px;
        z-index: 2001;
    }

    .hero-cta-wrapper {
        bottom: 10% !important;
        width: 100%;
        display: flex;
        justify-content: center;
        z-index: 2000;
        position: absolute;
    }

    /* Fix Splash Screen Z-Index to allow button interaction if it's on top */
    #loader-esquina {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 2. Navigation (Hamburger Menu) */
    .nav-container {
        padding: 0 20px;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden by default */
        width: 70%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease-out;
        z-index: 999;
        backdrop-filter: blur(10px);
        padding-top: 60px;
    }

    /* Full Screen Menu */
    #nav-links.active {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        /* Nearly opaque background */
        backdrop-filter: blur(10px);
        z-index: 1000;
        /* Behind the toggle button (z-index 1001) */
        gap: 30px;
        padding-top: 60px;
        /* Space for the logo/toggle */
    }

    #nav-links.active a {
        font-size: 2.5rem;
        /* Big links */
        margin: 0;
        opacity: 0;
        animation: fadeIn 0.5s forwards;
    }

    /* Staggered animation for links */
    #nav-links.active a:nth-child(1) {
        animation-delay: 0.1s;
    }

    #nav-links.active a:nth-child(2) {
        animation-delay: 0.2s;
    }

    #nav-links.active a:nth-child(3) {
        animation-delay: 0.3s;
    }

    #nav-links.active a:nth-child(4) {
        animation-delay: 0.4s;
    }

    #nav-links.active a:nth-child(5) {
        animation-delay: 0.5s;
    }

    #nav-links.active a:nth-child(6) {
        animation-delay: 0.6s;
    }

    #nav-links.active a:nth-child(7) {
        animation-delay: 0.7s;
    }

    .nav-links.active {
        right: 0;
        /* Slide in */
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
    }

    .nav-links a {
        margin: 15px 0;
        font-size: 1.5rem;
    }

    /* Hamburger Button */
    .menu-toggle {
        display: block !important;
        position: absolute;
        right: 20px;
        top: 25px;
        z-index: 1001;
        background: none;
        border: none;
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #fff;
        margin: 6px 0;
        transition: 0.4s;
    }

    /* Hamburger Animation when active */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* 3. Hero Section Overlap Fix */
    .hero-title {
        font-size: 3rem !important;
        /* Smaller font */
        line-height: 1.1 !important;
        /* More breathing room */
        margin-top: 10px;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
        letter-spacing: 3px;
        margin-bottom: 5px;
        position: relative;
        top: -5px;
        /* Pull it up slightly if needed, or push title down */
    }

    /* Global Overflow Fix */
    body,
    html {
        overflow-x: hidden;
        width: 100%;
    }

    /* 4. Section Sizing (News, Shorts, Freestyle) */
    .cinematic-section,
    #loquesuena,
    #tienda,
    #shorts,
    #freestyle,
    #trapvision {
        min-height: auto;
        /* Allow height to adapt */
        padding: 60px 0;
    }

    .section-content {
        padding: 20px;
    }

    /* Ensure images/content fit comfortably */
    .swiper-container,
    .video-container,
    .freestyle-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. Footer Social Icons */
    .footer-social {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    /* 6. Profile Modal Fixes */
    .profile-modal,
    .modal-content,
    #profile-modal {
        width: 90% !important;
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box;
    }

    .auth-input,
    .modal-btn {
        width: 100%;
    }

    .modal-btn {
        margin-top: 15px;
    }

    /* CSS-based Text Replacement for Mobile Footer */
    .explorer-footer p {
        visibility: hidden;
        /* Hide original text */
        position: relative;
    }

    .explorer-footer p::after {
        content: "USA EL JOYSTICK PARA MOVERTE";
        /* New mobile text */
        visibility: visible;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        font-weight: bold;
    }

    /* INFINITE SCREEN MODE (When Map is Active) */
    /* INFINITE SCREEN MODE (When Map is Active) */
    body:has(#map-explorer.active) .main-nav,
    body:has(#map-explorer.active) footer,
    body:has(#map-explorer.active) .menu-toggle,
    body:has(#map-explorer.active) .explorer-header {
        /* Hide header too */
        display: none !important;
    }

    /* Fallback for body class */
    body.map-active .main-nav,
    body.map-active footer,
    body.map-active .menu-toggle,
    body.map-active .explorer-header {
        display: none !important;
    }

    /* Joystick Styling */
    .joystick-zone {
        position: fixed;
        bottom: 50px;
        left: 50px;
        width: 150px;
        height: 150px;
        z-index: 99999;
        display: none;
        /* Shown by JS when active */
    }

    #map-explorer.active~.joystick-zone,
    #map-explorer.active+.joystick-zone,
    body:has(#map-explorer.active) #joystick-zone {
        display: block !important;
    }

    /* Helper for browsers not supporting :has yet, use JS to add class to body if needed */
    body.map-active .main-nav,
    body.map-active footer,
    body.map-active .menu-toggle {
        display: none !important;
    }

    body.map-active #joystick-zone {
        display: block !important;
    }

    /* Interact Button */
    #mobile-interact-btn {
        position: fixed;
        bottom: 80px;
        right: 40px;
        width: 80px;
        height: 80px;
        background: rgba(255, 0, 0, 0.5);
        border: 2px solid #fff;
        border-radius: 50%;
        color: white;
        display: none;
        /* Flex when active */
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        z-index: 99999;
        font-family: 'Staatliches';
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    }

    #mobile-interact-btn:active {
        transform: scale(0.9);
        background: rgba(255, 0, 0, 0.8);
    }

    /* HUD Settings Button */
    #hud-settings-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.6);
        border: 2px solid #ff003c;
        border-radius: 50%;
        color: white;
        font-size: 1.5rem;
        display: none;
        /* Hidden by default, shown in map-active */
        z-index: 20000;
        backdrop-filter: blur(5px);
        align-items: center;
        justify-content: center;
    }

    body.map-active #hud-settings-btn {
        display: flex !important;
    }

    /* HUD Menu */
    .hud-menu {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        width: 80%;
        max-width: 300px;
        background: rgba(10, 10, 10, 0.95);
        border: 1px solid #ff003c;
        padding: 20px;
        border-radius: 15px;
        display: none;
        flex-direction: column;
        gap: 15px;
        z-index: 20001;
        opacity: 0;
        transition: all 0.2s ease;
    }

    .hud-menu.active {
        display: flex;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .btn-hud-action {
        background: #222;
        border: 1px solid #444;
        color: white;
        padding: 12px;
        border-radius: 8px;
        font-family: 'Staatliches';
        font-size: 1.1rem;
        text-align: center;
    }

    .btn-hud-action.logout {
        background: #500;
    }

    .btn-hud-close {
        background: transparent;
        border: none;
        color: #888;
        margin-top: 10px;
    }

    /* Joystick RIGHT Side Modifier */
    body.joystick-right #joystick-zone {
        left: auto !important;
        right: 40px !important;
    }

    body.joystick-right #mobile-interact-btn {
        right: auto !important;
        left: 40px !important;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Base styles for hamburger (hidden on desktop) */
.menu-toggle {
    display: none;
}