/* Mobile-Specific Styles */
/* This file contains all mobile responsive styles */

@media (max-width: 768px) {
    /* Prevent backdrop-filter from affecting entire page */
    body {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    html {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Mobile Navigation */
    .menu-toggle {
        display: flex !important;
        position: fixed !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
        z-index: 100000 !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 8px;
    }

    .navbar {
        padding: 0 !important;
        background: transparent !important;
        z-index: 99998 !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none !important;
    }
    
    .navbar > * {
        pointer-events: auto;
    }

    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        z-index: 99999 !important;
        padding: 2rem;
        pointer-events: none;
        margin: 0;
        border: none;
    }

    .nav-menu.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .nav-link {
        font-size: 2rem;
        padding: 1rem 2rem;
        width: 100%;
        text-align: center;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 15px;
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.6);
    }
    
    /* Mobile Popup Fixes */
    .popup-overlay {
        padding: 1rem;
    }
    
    .popup-container {
        max-width: 95% !important;
        max-height: 95vh !important;
        max-height: 95dvh !important;
        padding: 0;
        border-radius: 16px;
    }
    
    .popup-content {
        padding: 3rem 1.5rem 2rem !important;
        max-height: 95vh !important;
        max-height: 95dvh !important;
    }
    
    .popup-close {
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.75rem !important;
    }
    
    .character-popup {
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .character-popup-image {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .character-popup-image img {
        width: 100% !important;
        max-height: 50vh !important;
        max-height: 50dvh !important;
    }
    
    .character-popup-text {
        width: 100% !important;
    }
    
    .popup-text-content {
        padding: 1rem 0 !important;
    }
    
    .popup-text-body {
        padding: 0 !important;
    }
    
    .popup-text-body h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .popup-text-body p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Eltern Section Mobile */
    .eltern-main-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .eltern-shop-section,
    .eltern-newsletter-section {
        max-width: 100%;
    }
    
    /* Footer Mobile */
    .footer-links {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .footer-separator {
        display: none;
    }
    
    /* Cursor Follower - Hide on mobile */
    .cursor-follower {
        display: none;
    }
    
    /* Abenteuer Mobile - Sky 20%, character half in sky/half on ground */
    .scene-abenteuer::before {
        top: 20% !important;
        height: 80% !important;
    }
    
    .scene-abenteuer .character-image-container {
        margin-top: -10% !important; /* Position character so it's half in sky, half on ground */
    }
    
    /* Age Verification Mobile Fixes */
    .scene-eltern .age-verification-embedded {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        width: 100dvw !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 100000 !important;
        margin: 0 !important;
        padding: 1rem !important;
        transform: none !important;
    }
    
    .age-verification-content {
        max-width: 90% !important;
        width: 90% !important;
        padding: 2rem 1.5rem !important;
        margin: 0 !important;
        position: relative !important;
        transform: none !important;
    }
    
    .age-verification-content h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    .age-verification-content p {
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .age-verification-buttons {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .age-btn {
        width: 100% !important;
        padding: 1rem 2rem !important;
        font-size: 1.2rem !important;
        min-width: auto !important;
    }
}