/* Mobile Optimizations for Pathfinder Dice */

/* Base mobile optimizations */
@media screen and (max-width: 768px), (max-height: 768px) {
    /* Improve touch targets */
    button, input, select {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 8px 12px;
        margin: 4px;
    }
    
    /* Optimize main interface */
    #canvas {
        /* Improve rendering performance */
        will-change: transform;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Additional smoothness optimizations */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    /* Control panel optimizations */
    #control_panel {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Better scrolling on iOS */
        -webkit-overflow-scrolling: touch;
        /* Prevent bounce scrolling */
        overscroll-behavior: contain;
    }
    
    /* Settings panel improvements */
    #control_panel fieldset {
        margin: 8px 0;
        padding: 8px;
    }
    
    #control_panel legend {
        font-size: 14px;
        font-weight: bold;
    }
    
    /* Dice selector improvements */
    #selector_div {
        padding: 8px;
    }
    
    #selector_div button {
        margin: 4px 2px;
    }
    
    #set {
        width: 120px !important;
        font-size: 16px !important;
    }
    
    /* Info display */
    #info_div {
        font-size: 16px;
        padding: 8px;
    }
    
    #label {
        font-size: 18px;
        font-weight: bold;
    }
    
    /* Favorites container */
    #fav_container .fav_draggable {
        margin: 4px 0;
        padding: 8px;
    }
    
    #fav_container button {
        min-width: 36px;
        min-height: 36px;
        margin: 2px;
    }
    
    /* Login form improvements */
    .loginform {
        padding: 20px;
        max-width: 90vw;
    }
    
    .loginform h1 {
        font-size: 20px;
        margin: 10px 0;
    }
    
    .loginform button {
        width: 100%;
        max-width: 300px;
        font-size: 18px;
        padding: 12px;
    }
}

/* Landscape mobile optimizations */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #control_panel {
        max-height: 50vh;
    }
    
    .loginform h1 {
        font-size: 18px;
        margin: 5px 0;
    }
    
    #control_panel fieldset {
        margin: 4px 0;
        padding: 6px;
    }
}

/* iOS specific optimizations */
@supports (-webkit-touch-callout: none) {
    /* iOS specific styles */
    body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    input, select, textarea {
        /* Prevent zoom on focus */
        font-size: 16px !important;
        /* Better appearance on iOS */
        -webkit-appearance: none;
        appearance: none;
        border-radius: 6px;
    }
    
    button {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 6px;
    }
    
    /* Prevent iOS bounce scrolling */
    #control_panel {
        -webkit-overflow-scrolling: touch;
        overflow: auto;
    }
}

/* Android specific optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    /* Android Chrome specific */
    input[type="text"], select {
        /* Better touch response */
        touch-action: manipulation;
    }
}

/* High DPI optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize for high DPI displays */
    #canvas {
        /* Better rendering on retina displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
}

/* Reduce motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode optimizations for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    /* Reduce bright colors on mobile dark mode */
    #canvas {
        filter: brightness(0.9);
    }
}

/* Performance optimizations for low-end devices */
@media screen and (max-width: 480px) {
    /* Further optimizations for very small screens */
    #canvas {
        /* Reduce complexity */
        will-change: auto;
    }
    
    button {
        /* Simplify button styles */
        border-radius: 4px;
        box-shadow: none;
    }
    
    #control_panel {
        /* Simplify panel */
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
}