/* 
=================================================
MOBILE-CLEAN: Single Source of Truth for Mobile
=================================================
Device-capability detection only - no width queries
Consolidated mobile solution without conflicts
=================================================
*/

/* MOBILE-ONLY: ALL styles contained within device detection */
@media (hover: none) and (pointer: coarse) {
    
    /* ================================
       CORE MOBILE LAYOUT RESET
       ================================ */
    
    /* Remove all desktop cursors on touch devices */
    * {
        cursor: auto !important;
    }
    
    /* Mobile body optimizations */
    body {
        overflow: hidden !important;
        -webkit-text-size-adjust: 100% !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* ================================
       MOBILE CONTAINER STRUCTURE  
       ================================ */
    
    /* Force mobile single-view system */
    .main-container {
        flex-direction: column !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* Hide sections by default - mobile view manager controls visibility */
    .main-container:not(.mobile-chat-mode):not(.mobile-kitchen-mode) .chat-section,
    .main-container:not(.mobile-chat-mode):not(.mobile-kitchen-mode) .kitchen-section {
        display: none !important;
    }
    
    /* Mobile chat mode - full screen */
    .main-container.mobile-chat-mode .chat-section {
        display: flex !important;
        width: 100% !important;
        height: 100vh !important;
        flex-direction: column !important;
    }
    
    .main-container.mobile-chat-mode .kitchen-section {
        display: none !important;
    }
    
    /* Mobile kitchen mode - full screen */
    .main-container.mobile-kitchen-mode .kitchen-section {
        display: flex !important;
        width: 100% !important;
        height: 100vh !important;
        flex-direction: column !important;
    }
    
    .main-container.mobile-kitchen-mode .chat-section {
        display: none !important;
    }
    
    /* ================================
       MOBILE HEADER CONSOLIDATION
       ================================ */
    
    /* Compact blue header - OPTIMIZED SPACING */
    .chat-header, .kitchen-header {
        position: relative !important;
        padding: 10px 15px 35px 15px !important; /* Reduced bottom padding for compact layout */
        margin: 0 !important;
        min-height: 100px !important; /* Reduced header height */
        height: auto !important;
        background: rgba(26, 35, 126, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Header content optimization */
    .chat-header-content, .kitchen-header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hide redundant elements */
    .chat-title, .kitchen-title {
        display: none !important;
    }
    
    .kitchen-nav-btn, .chat-nav-btn {
        display: none !important;
    }
    
    /* ================================
       VILLAGE BADGE POSITIONING - TOP CENTER, NO OVERLAP
       ================================ */
    
    .village-badge {
        position: absolute !important;
        top: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 20 !important; /* Higher than toggle buttons */
        font-size: 0.85em !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        width: auto !important;
        max-width: calc(100vw - 140px) !important; /* Account for home button space on both sides */
    }
    
    /* ================================
       HOME BUTTON INTEGRATION
       ================================ */
    
    .home-btn {
        position: absolute !important;
        top: 12px !important;
        left: 15px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 1500 !important;
        border-radius: 50% !important;
    }
    
    /* ================================
       MOBILE TOGGLE BUTTONS
       ================================ */
    
    /* Position toggle buttons BELOW badge - PROPER SEPARATION */
    #mobile-header-toggle {
        position: absolute !important;
        top: 55px !important; /* Position below badge */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important; /* Lower than badge */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 20px !important;
        padding: 4px !important;
        gap: 4px !important;
    }
    
    /* Toggle button styling - SLIMMER */
    .mobile-tab-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
        min-height: 32px !important;
        min-width: 55px !important;
        background: transparent !important;
        color: #1a237e !important;
        border: none !important;
        border-radius: 14px !important;
        transition: all 0.2s ease !important;
        font-weight: 600 !important;
        font-family: 'Jua', sans-serif !important;
        cursor: pointer !important;
    }
    
    .mobile-tab-btn.active {
        background: #1a237e !important;
        color: #FFFFFF !important;
    }
    
    /* ================================
       MOBILE CHAT OPTIMIZATION
       ================================ */
    
    /* Chat messages area */
    .main-container.mobile-chat-mode .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        background: transparent !important;
        /* Start after header */
        margin-top: 0 !important;
        padding-top: 8px !important;
    }
    
    /* Chat message bubbles */
    .message {
        margin-bottom: 12px !important;
        padding: 12px 16px !important;
        border-radius: 18px !important;
        max-width: 85% !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }
    
    .message:first-child {
        margin-top: 0 !important;
    }
    
    /* ================================
       MOBILE CHAT INPUT
       ================================ */
    
    .main-container.mobile-chat-mode .chat-input {
        position: relative !important;
        bottom: 0 !important;
        padding: 12px 16px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        border-top: 2px solid #333 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .main-container.mobile-chat-mode .chat-input input {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px 16px !important;
        border-radius: 24px !important;
        border: 2px solid #555 !important;
        background: #222 !important;
        color: white !important;
        min-height: 48px !important;
        flex: 1 !important;
    }
    
    .main-container.mobile-chat-mode .chat-input button {
        padding: 12px 20px !important;
        font-size: 16px !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, #9B59B6, #8E44AD) !important;
        color: white !important;
        border: none !important;
        min-height: 48px !important;
        min-width: 80px !important;
    }
    
    /* ================================
       MOBILE KITCHEN OPTIMIZATION
       ================================ */
    
    /* Kitchen content spacing */
    .main-container.mobile-kitchen-mode .kitchen-inner {
        padding: 16px !important;
        margin-top: 0 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Kitchen ingredient grids - 2x2 layout */
    .meat-options,
    .spell-options,
    .vegetable-options,
    .spice-options,
    .bowl-options {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 15px !important;
        padding: 20px !important;
        justify-items: center !important;
        align-items: center !important;
    }
    
    /* Kitchen ingredient cards */
    .meat-option,
    .spell-option,
    .vegetable-option,
    .spice-option,
    .bowl-option {
        min-height: 120px !important;
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    /* ================================
       MOBILE ENVELOPE/WELCOME
       ================================ */
    
    /* Envelope button touch optimization */
    #show-invite-btn {
        padding: 20px !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        z-index: 1000 !important; /* Higher than video, lower than overlay */
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3) !important;
        -webkit-touch-callout: none !important;
        user-select: none !important;
        display: flex !important; /* Ensure envelope is visible initially */
    }
    
    /* ONLY hide envelope when overlay is active AND visible */
    #welcome-overlay.active#welcome-overlay[style*="display: flex"] ~ #show-invite-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    .envelope {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        min-width: 120px !important;
        min-height: 80px !important;
    }
    
    .envelope-label {
        font-size: 18px !important;
        padding: 12px 20px !important;
    }
    
    /* ================================
       ENVELOPE OVERLAY - EXACT DESKTOP REPLICATION
       ================================ */
    
    /* Full-screen overlay like desktop */
    #welcome-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.7) !important; /* Dark background like desktop */
        z-index: 2000 !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 15px !important;
    }
    
    #welcome-overlay.active {
        display: flex !important;
        opacity: 1 !important;
    }
    
    #welcome-overlay.fade-out {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.7s ease !important; /* Same as desktop */
    }
    
    /* Parchment poster like desktop - centered */
    .wanted-poster {
        position: relative !important;
        width: 90% !important;
        max-width: 400px !important; /* Same as desktop */
        background: #f4e8d0 !important; /* Parchment color like desktop */
        border: 8px solid #8b6914 !important; /* Same border as desktop */
        border-radius: 5px !important;
        padding: 25px 20px !important; /* Same padding as desktop */
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.5) !important;
        transform: rotate(-2deg) !important; /* Same rotation as desktop */
        transition: all 0.3s ease !important;
    }
    
    /* Poster content structure like desktop */
    .poster-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    .poster-image {
        font-size: 3em !important;
        margin: 10px 0 !important;
    }
    
    /* Full content text like desktop */
    .poster-title {
        font-family: 'Black Han Sans', sans-serif !important;
        font-size: 2em !important; /* Slightly smaller for mobile readability */
        color: #8b0000 !important;
        text-shadow: 3px 3px 0 #000 !important;
        text-align: center !important;
        margin-bottom: 15px !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
    }
    
    .poster-text {
        font-size: 1em !important; /* Readable on mobile */
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        color: #2c1810 !important;
        font-weight: 500 !important;
    }
    
    .poster-text strong {
        color: #8b0000 !important;
        font-weight: 700 !important;
    }
    
    /* Button styling like desktop */
    #enter-village-btn {
        background: linear-gradient(45deg, #ff6b35, #f7931e) !important;
        color: white !important;
        border: none !important;
        padding: 15px 30px !important;
        font-size: 1.1em !important;
        font-weight: bold !important;
        border-radius: 25px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4) !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        font-family: 'Jua', sans-serif !important;
    }
    
    /* ================================
       MOBILE UTILITY CLASSES
       ================================ */
    
    /* Touch-friendly interactions */
    .clickable,
    button,
    [onclick],
    [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Scrollable areas */
    .scrollable {
        -webkit-overflow-scrolling: touch !important;
        overflow-scrolling: touch !important;
    }
    
    /* Text input improvements */
    input, textarea {
        font-size: 16px !important; /* Prevent zoom */
        border-radius: 8px !important;
    }
    
    /* ================================
       MOBILE ANIMATIONS/TRANSITIONS
       ================================ */
    
    /* Smooth section transitions */
    .main-container .chat-section,
    .main-container .kitchen-section {
        transition: all 0.3s ease-in-out !important;
    }
    
    /* Button press feedback */
    .mobile-tab-btn:active,
    button:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* ================================
       MOBILE SPECIFIC OVERRIDES
       ================================ */
    
    /* Disable desktop-specific features */
    .layout-control-panel,
    .mobile-view-toggle:not(#mobile-header-toggle) {
        display: none !important;
    }
    
    /* Force mobile font sizes */
    h1, h2, h3 {
        font-size: 1.5em !important;
    }
    
    /* Mobile-optimized z-index stack */
    .home-btn { z-index: 1500 !important; }
    .village-badge { z-index: 1400 !important; }
    #mobile-header-toggle { z-index: 1400 !important; }
    .chat-header, .kitchen-header { z-index: 1300 !important; }
    #welcome-overlay { z-index: 2000 !important; }
    #show-invite-btn { z-index: 1000 !important; /* Higher than video, lower than overlay */ }
}

/* ================================
   END MOBILE-ONLY STYLES
   ================================ */