/**
 * Mobile Controls CSS
 *
 * Optimizes touch interactions for mobile devices:
 * - Larger touch targets
 * - Touch-friendly UI elements
 * - Mobile-specific visual feedback
 */

/* Mobile device detection and optimization */
@media (hover: none) and (pointer: coarse) {
    /* This CSS applies ONLY on touch devices */

    /* Ensure canvas is touch-friendly */
    #gameCanvas {
        touch-action: none; /* Prevent browser gestures */
        -webkit-touch-callout: none; /* Disable iOS callout */
        -webkit-user-select: none; /* Disable text selection */
        user-select: none;
    }

    /* Larger touch targets for all interactive UI elements */
    button,
    .button,
    .ui-button,
    .tab,
    .panel-header,
    .control-button {
        min-height: 44px; /* iOS minimum recommended touch target */
        min-width: 44px;
        padding: 12px 16px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Increase spacing between interactive elements */
    .button-group button {
        margin: 4px;
    }

    /* Make HUD elements easier to tap */
    .hud-element {
        padding: 12px;
    }

    /* Larger scrollbar for touch */
    .panel-scrollable::-webkit-scrollbar {
        width: 12px;
    }

    .panel-scrollable::-webkit-scrollbar-thumb {
        border-radius: 6px;
    }

    /* Touch feedback for buttons */
    button:active,
    .button:active,
    .ui-button:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    /* Disable hover effects on touch devices */
    *:hover {
        /* Reset hover styles that don't make sense on touch */
    }

    /* Make object grid items easier to tap */
    .object-grid-item {
        min-height: 50px;
        padding: 10px;
    }

    /* Make tab bar tabs easier to tap */
    .tab-button {
        min-height: 48px;
        min-width: 80px;
        font-size: 14px;
    }

    /* Make station UI buttons easier to tap */
    .station-button {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
        margin: 6px;
    }

    /* Make cargo items easier to drag/tap */
    .cargo-item {
        min-height: 48px;
        padding: 10px;
    }

    /* Increase touch target for close buttons */
    .close-button,
    .panel-close {
        min-height: 44px;
        min-width: 44px;
        font-size: 24px;
    }

    /* Make radial HUD easier to use on touch */
    .radial-hud-segment {
        stroke-width: 3px; /* Thicker segments for easier tapping */
    }

    /* Touch-friendly input fields */
    input,
    textarea,
    select {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 8px 12px;
    }

    /* Disable text selection on UI elements */
    .ui-panel,
    .hud-overlay,
    .radial-hud {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Make sliders easier to drag */
    input[type="range"] {
        height: 44px;
        cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    input[type="range"]::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }
}

/* Mobile landscape optimization */
@media (orientation: landscape) and (max-height: 500px) {
    /* Adjust UI for landscape mobile devices */
    .ui-panel {
        max-height: 80vh; /* Prevent panels from being too tall */
    }

    .hud-overlay {
        font-size: 12px; /* Slightly smaller text in landscape */
    }
}

/* Mobile portrait optimization */
@media (orientation: portrait) and (max-width: 500px) {
    /* Adjust UI for portrait mobile devices */
    .ui-panel {
        max-width: 90vw; /* Wider panels on portrait */
    }

    .button-group {
        flex-direction: column; /* Stack buttons vertically */
    }

    .button-group button {
        width: 100%; /* Full-width buttons in portrait */
    }
}

/* Touch gesture visual feedback */
.touch-indicator {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid rgba(88, 166, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: touch-pulse 0.3s ease-out;
    z-index: 10000;
}

@keyframes touch-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Double-tap navigation indicator */
.navigation-indicator {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 4px solid rgba(0, 255, 136, 0.8);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: nav-pulse 0.5s ease-out;
    z-index: 10000;
}

.navigation-indicator::before {
    content: '→';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: rgba(0, 255, 136, 0.9);
}

@keyframes nav-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Object selection indicator */
.selection-indicator {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 3px solid rgba(255, 208, 0, 0.8);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: selection-ring 1s ease-in-out infinite;
    z-index: 10000;
}

@keyframes selection-ring {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.4;
    }
}

/* Mobile control hints overlay */
.mobile-controls-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 17, 23, 0.9);
    border: 2px solid rgba(88, 166, 255, 0.5);
    border-radius: 8px;
    padding: 12px 20px;
    color: #F0F6FC;
    font-size: 14px;
    text-align: center;
    z-index: 9999;
    pointer-events: none;
    animation: hint-fade-in 0.5s ease-out;
}

@keyframes hint-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.mobile-controls-hint.fade-out {
    animation: hint-fade-out 0.5s ease-out forwards;
}

@keyframes hint-fade-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* Pinch zoom indicator */
.pinch-zoom-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: rgba(88, 166, 255, 0.8);
    pointer-events: none;
    z-index: 10000;
    animation: zoom-fade 0.3s ease-out;
}

@keyframes zoom-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Prevent iOS bounce/rubber-banding */
body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Prevent accidental zoom on double-tap in iOS */
* {
    touch-action: manipulation; /* Allows single-finger pan/pinch, prevents double-tap zoom */
}

/* Override for specific elements that need pan/zoom */
#gameCanvas {
    touch-action: none; /* Full control over touch gestures */
}

/* High-contrast mode for outdoor mobile use */
@media (prefers-contrast: high) {
    .ui-panel {
        background: rgba(0, 0, 0, 0.95);
        border-color: rgba(255, 255, 255, 0.8);
    }

    button,
    .button {
        border-width: 2px;
        font-weight: bold;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .touch-indicator,
    .navigation-indicator,
    .selection-indicator,
    .mobile-controls-hint {
        animation: none;
        transition: none;
    }
}