/* ===== MOBILE BASE STYLES ===== */
/* Base styles specifically for mobile devices */

/* Mobile viewport and coverage fixes */
@media (max-width: 768px) {
    html {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        position: relative;
    }

    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-width: 100vw;
        width: 100%;
        height: 100%;
        position: relative;
        overflow-x: hidden;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Enhanced mobile app container */
    .app {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-width: 100vw;
        width: 100%;
        height: 100%;
        position: relative;
        overflow-x: hidden;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Enhanced mobile animated background */
    .animated-background {
        position: fixed;
        top: -20px;
        left: -20px;
        width: calc(100% + 40px);
        height: calc(100% + 40px);
        pointer-events: none;
        z-index: 0;
        background: var(--color-bg-primary);
        opacity: 1;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
    .header-btn,
    .action-btn,
    .start-game-btn,
    .btn {
        min-height: 44px; /* Apple's minimum touch target */
        min-width: 44px;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    .header-btn {
        padding: var(--spacing-2) var(--spacing-3);
    }
    
    .action-btn {
        padding: var(--spacing-3) var(--spacing-4);
    }
    
    /* Disable hover effects on touch devices */
    .card:hover,
    .header-btn:hover,
    .action-btn:hover,
    .character-name:hover,
    .character-age:hover,
    .interest-tag:hover {
        transform: translateZ(0) !important;
        box-shadow: none !important;
    }
    
    /* Enhanced touch feedback */
    .header-btn:active,
    .action-btn:active,
    .card:active {
        transform: translateZ(0) scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Mobile-specific variables */
:root {
    --mobile-header-height: 60px;
    --mobile-footer-height: 70px;
    --mobile-safe-area-top: env(safe-area-inset-top);
    --mobile-safe-area-bottom: env(safe-area-inset-bottom);
    --mobile-safe-area-left: env(safe-area-inset-left);
    --mobile-safe-area-right: env(safe-area-inset-right);
    --mobile-touch-target-size: 44px;
    --mobile-swipe-threshold: 50px;
    --mobile-card-stack-height: calc(100vh - var(--mobile-header-height) - var(--mobile-footer-height) - 40px);
}

/* Prevent zoom on inputs */
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
    font-size: 16px !important;
    transform: translateZ(0);
    -webkit-appearance: none;
    border-radius: 0;
}

/* Improve scrolling performance */
.cards-stack,
.modal-content,
.preferences-content,
.collections-content,
.chat-messages {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    transform: translateZ(0);
}

/* Fix sticky hover states */
@media (hover: none) {
    .card:hover,
    .header-btn:hover,
    .action-btn:hover,
    .footer-tab:hover,
    .collection-card:hover {
        transform: translateZ(0) !important;
        box-shadow: none !important;
        background: inherit !important;
    }
}