/* ============================================
   MOBILE OPTIMIZATIONS
   Touch-friendly interactions, safe areas,
   and performance optimizations for mobile
   ============================================ */

/* Touch Target Sizes (Apple HIG: 44x44px minimum) */
button,
a,
input[type="button"],
input[type="submit"],
select {
    min-height: 44px;
    min-width: 44px;
}

/* Larger tap targets for game buttons */
.game-option,
.game-button,
[class*="btn"] {
    min-height: 56px;
    min-width: 56px;
    padding: 12px 16px;
}

/* Touch Feedback */
button:active,
.clickable:active,
[onclick]:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-out;
}

/* Prevent text selection on game elements */
.game-area,
.game-container,
.game-scene {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    /* Disable double-tap zoom */
}

/* Prevent tap highlight on iOS */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Safe Area Insets for Notched Devices (iPhone X+) */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Prevent zoom on input focus (iOS) */
input,
select,
textarea {
    font-size: 16px;
    /* Minimum to prevent zoom */
}

/* Optimize for mobile performance */
@media (max-width: 768px) {

    /* Faster animations on mobile */
    * {
        animation-duration: 0.2s !important;
    }

    /* Disable complex animations */
    .complex-animation {
        animation: none !important;
    }

    /* Hardware acceleration for transforms */
    .animated,
    [class*="transition"] {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
}

/* Landscape Mode Optimizations */
@media (orientation: landscape) and (max-height: 500px) {

    .game-header,
    #game-header-container {
        height: 40px;
        min-height: 40px;
    }

    .game-container {
        padding: 8px;
    }

    h1 {
        font-size: 1.5rem;
    }
}

/* Portrait Mode Optimizations */
@media (orientation: portrait) and (max-width: 768px) {

    .game-grid,
    .options-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-container {
        padding: 12px;
    }
}

/* Prevent overscroll/bounce on game areas */
.game-area,
.game-container {
    overscroll-behavior: contain;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-behavior: smooth;
}

/* Optimize button spacing for touch */
@media (max-width: 768px) {

    button+button,
    .button-group>* {
        margin-top: 8px;
    }
}

/* Full-width buttons on mobile */
@media (max-width: 640px) {
    .mobile-full-width {
        width: 100%;
    }
}

/* Improve readability on small screens */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* Sticky elements respect safe areas */
.sticky,
.fixed {
    top: env(safe-area-inset-top);
}

/* Bottom navigation/buttons respect safe areas */
.bottom-nav,
.bottom-buttons {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Optimize images for mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}