/**
 * Device, platform, and capability-specific styles
 */

/* ==========================================
   Touch Device Optimizations
   ========================================== */

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Remove all hover effects on touch devices */
    .btn:hover,
    .upload-label:hover,
    .btn-generate:hover,
    .modal-btn:hover,
    .btn-confirm:hover,
    .btn-cancel:hover,
    .prompt-item:hover,
    .control-group:hover,
    .action-item:hover,
    .image-name-display:hover,
    .chatbot-send-btn:hover,
    .prompt-selector-btn:hover,
    .chatbot-prompt-option:hover,
    .prompt-edit-btn:hover,
    .toggle-btn:hover,
    .image-item:hover,
    .image-item:hover .image-overlay,
    .image-item:hover .remove-btn,
    .upload-btn:hover,
    .share-btn:hover,
    .download-panel-close-btn:hover,
    .video-action-button:hover,
    .download-button:hover,
    .share-button:hover,
    .video-player-mute-btn:hover,
    .video-player-close:hover,
    .tip-item:hover {
        transform: none !important;
        box-shadow: none !important;
        background: inherit !important;
        border-color: inherit !important;
    }

    /* Use active state for feedback instead */
    .btn:active,
    .upload-label:active,
    .modal-btn:active,
    .action-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Increase touch targets for mobile */
    .btn,
    .modal-btn,
    .action-btn,
    button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Only apply hover effects on devices that support it */
@media (hover: hover) and (pointer: fine) {
    /* Keep all existing hover effects here */
    /* They will only apply on desktop/laptop with mouse */
}

/* ==========================================
   Mobile-specific Optimizations
   ========================================== */

.mobile {
    /* Disable text selection on interactive elements */
    button,
    .btn,
    .action-btn,
    .direction-button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Optimize animations for mobile */
    .spinner,
    .spinner-small,
    .loading-spinner {
        animation-duration: 1.5s; /* Slower for better performance */
    }

    /* Simplify shadows for performance */
    * {
        box-shadow: none !important;
    }

    /* Add subtle shadows only where necessary */
    .modal-content,
    .download-panel,
    .video-player-container {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    }
}

/* ==========================================
   Tablet-specific Styles
   ========================================== */

.tablet .game-wrapper {
    width: min(1200px, calc(100vw - 40px));
}

.tablet #video-container {
    min-height: 400px;
    max-height: 600px;
}

/* ==========================================
   Low Performance Device Optimizations
   ========================================== */

/* Detect low-end devices using reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Remove backdrop filters for performance */
    .modal-content,
    .download-panel,
    .prompt-edit-btn,
    #image-selector-panel {
        backdrop-filter: none !important;
    }

    /* Simplify gradients */
    .modern-title,
    .btn,
    .modal-btn {
        background: solid !important;
    }
}

/* ==========================================
   iOS-specific Fixes
   ========================================== */

.ios {
    /* Fix iOS rubber band scrolling */
    body {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }

    .container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100vh;
    }

    /* Fix iOS input zoom */
    input[type="text"],
    input[type="email"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on focus */
    }

    /* Fix iOS button styling */
    button,
    input[type="button"],
    input[type="submit"] {
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* ==========================================
   Android-specific Fixes
   ========================================== */

.android {
    /* Fix Android keyboard issues */
    input:focus,
    textarea:focus {
        outline: 2px solid #4a69bd;
        outline-offset: 2px;
    }

    /* Fix Android Chrome address bar hiding */
    .game-wrapper {
        min-height: calc(100vh - 56px); /* Account for address bar */
    }
}

/* ==========================================
   High-DPI Display Optimizations
   ========================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Use higher resolution images or SVGs */
    .modern-title {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Thinner borders for retina displays */
    .btn,
    .modal-content,
    #image-selector-panel {
        border-width: 0.5px;
    }
}

/* ==========================================
   Landscape Orientation Fixes
   ========================================== */

@media (orientation: landscape) {
    .mobile #video-container,
    .tablet #video-container {
        max-height: calc(100vh - 100px);
    }

    .mobile .tips-section,
    .tablet .tips-section {
        display: none; /* Hide tips in landscape to save space */
    }
}

/* ==========================================
   Touch-friendly Adjustments
   ========================================== */

@media (pointer: coarse) {
    /* Larger click targets for touch */
    .close-btn,
    .download-panel-close-btn,
    .video-player-close,
    .collapse-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* More spacing between interactive elements */
    .action-buttons {
        gap: 10px;
    }

    .button-group {
        gap: 8px;
    }

    /* Remove double-tap delay */
    button,
    .btn,
    a {
        touch-action: manipulation;
    }
}