/**
 * Responsive Game Styles - Mobile & Desktop Optimization
 * Ensures smooth gameplay on any device with proper touch controls
 */

/* Base responsive utilities */
@media (max-width: 768px) {
    :root {
        --spacing-xs: 3px;
        --spacing-sm: 8px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --spacing-xxl: 32px;
    }
    
    body {
        padding: var(--spacing-xs);
        font-size: 14px;
    }
    
    /* Ensure games fit on mobile */
    canvas {
        max-width: 100vw !important;
        max-height: 70vh !important;
        height: auto !important;
        width: 100% !important;
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Mobile-optimized buttons */
    button, .btn, .auth-button {
        min-height: 44px !important; /* Apple touch target size */
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* Control hints become collapsible */
    .control-hint {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .control-hint.show {
        max-height: 500px;
    }
    
    /* Touch-friendly HUD */
    #hud, .hud {
        font-size: 10px !important;
        padding: 8px !important;
    }
    
    /* Mobile navigation */
    .container {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-sm);
    }
    
    header h1 {
        font-size: 1.5rem;
    }
    
    header .subtitle {
        font-size: 0.9rem;
    }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    canvas {
        max-width: 90vw;
        max-height: 65vh;
    }
    
    button, .btn {
        font-size: 15px;
        padding: 10px 18px;
    }
}

/* Desktop optimization */
@media (min-width: 1025px) {
    canvas {
        max-width: 1200px;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }
    
    /* Hover effects only on devices that support hover */
    button:hover, .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(74, 144, 226, 0.4);
    }
}

/* Performance optimizations */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform;
}

canvas {
    /* Hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Smooth animations */
@media (prefers-reduced-motion: no-preference) {
    * {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #6cb3ff;
        --text-primary: #ffffff;
    }
    
    button, .btn {
        border: 2px solid currentColor;
    }
}

/* Dark mode optimization (default) */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #0a0e27 0%, #16213e 100%);
    }
}

/* Light mode support */
@media (prefers-color-scheme: light) {
    :root {
        --primary-bg: #f5f7fa;
        --secondary-bg: #ffffff;
        --tertiary-bg: #e8ecf1;
        --text-primary: #2c3e50;
        --text-secondary: #7f8c8d;
    }
    
    body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        color: var(--text-primary);
    }
    
    canvas {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    canvas {
        max-height: 85vh;
    }
    
    .control-hint {
        display: none;
    }
    
    #hud {
        font-size: 8px;
    }
}

/* Very small devices (old phones) */
@media (max-width: 360px) {
    canvas {
        max-height: 60vh;
    }
    
    button, .btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    header h1 {
        font-size: 1.2rem;
    }
}

/* Large desktop displays */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    canvas {
        max-width: 1400px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button, .btn, a {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Remove hover effects */
    button:hover, .btn:hover {
        transform: none;
    }
    
    /* Active state instead */
    button:active, .btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Loading states */
.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

.loading::after {
    content: '⏳';
    margin-left: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Smooth canvas scaling */
canvas {
    transition: width 0.3s ease, height 0.3s ease;
}

/* Fix iOS input zoom */
input, select, textarea {
    font-size: 16px !important;
}

/* Prevent elastic scrolling on iOS */
html, body {
    overscroll-behavior: none;
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
        padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
        padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    }
}