/**
 * ============================================================================
 * SNIPER SHOOTER GAME - COMPREHENSIVE STYLING SYSTEM
 * ============================================================================
 * 
 * PURPOSE:
 * This file provides complete visual styling and responsive design for the
 * Sniper Shooter game, implementing a comprehensive UI/UX fragment architecture
 * that adapts seamlessly across desktop and mobile platforms.
 * 
 * FRAGMENT ROLE: UI Styling Fragment (Root)
 * - Manages all visual presentation layers
 * - Coordinates responsive behavior across devices
 * - Provides consistent styling framework for all UI fragments
 * - Implements mobile-first responsive design patterns
 * 
 * KEY COMPONENTS:
 * - Global Reset & Base Styles (Universal styling foundation)
 * - Game Canvas & Container System (3D rendering viewport)
 * - Crosshair & Scope System (Weapon targeting UI)
 * - Game HUD Framework (Health, ammo, score, timer displays)
 * - Start Menu System (Mission briefing, controls, navigation)
 * - Mobile Control Interface (Touch joystick, action buttons)
 * - Responsive Media Query System (Cross-device compatibility)
 * 
 * DEPENDENCIES:
 * - index.html (DOM structure and element IDs)
 * - script.js (Dynamic class manipulation and game state)
 * - gameConfig.js (UI text content and configuration values)
 * 
 * FRAGMENT DEPENDENCIES:
 * - Game Container Fragment (3D canvas and overlay system)
 * - HUD Components Fragment (Real-time game information display)
 * - Menu System Fragment (Start screen and navigation)
 * - Mobile Controls Fragment (Touch-based input interface)
 * - Responsive Layout Fragment (Cross-device adaptation)
 * 
 * USAGE:
 * This stylesheet is automatically loaded by index.html and provides:
 * - Complete visual styling for all game elements
 * - Responsive design that adapts to screen sizes from 320px to 4K
 * - Mobile-optimized touch interfaces with haptic feedback
 * - Accessibility features and high contrast support
 * - Performance-optimized animations and transitions
 * 
 * FRAGMENT LIFECYCLE:
 * 1. CSS loads with HTML document (immediate)
 * 2. Base styles apply to establish visual foundation
 * 3. Responsive queries activate based on device characteristics
 * 4. Dynamic classes applied by JavaScript for state changes
 * 5. Animations and transitions triggered by user interactions
 * 
 * PERFORMANCE NOTES:
 * - Uses hardware-accelerated transforms for smooth animations
 * - Implements efficient CSS Grid and Flexbox layouts
 * - Optimizes mobile performance with reduced visual complexity
 * - Minimizes reflows through careful property selection
 * - Total stylesheet size: ~1657 lines for comprehensive coverage
 * ============================================================================
 */

/* ============================================================================
 * GLOBAL RESET & BASE STYLES FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Universal Foundation Layer
 * Establishes consistent baseline styling across all browsers and devices.
 * Implements box-sizing border-box for predictable layout calculations.
 * 
 * FRAGMENT COMMUNICATION:
 * - Consumed by: All other style fragments
 * - Dependencies: None (foundation layer)
 * - Integration: Automatic inheritance by all elements
 * ============================================================================
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding/border included in element width/height */
}

/* ============================================================================
 * BODY & DOCUMENT FOUNDATION FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Document-Level Base Configuration
 * Establishes core document styling, prevents text selection during gameplay,
 * and configures touch behavior for mobile devices.
 * 
 * FRAGMENT COMMUNICATION:
 * - Inherited by: All child elements
 * - Affects: Global font, background, interaction behavior
 * - Mobile Integration: Touch-action prevents zoom, enables game controls
 * ============================================================================
 */
body {
    font-family: Arial, sans-serif;        /* Clean, readable font for UI elements */
    background-color: #000;               /* Pure black background for game immersion */
    overflow: hidden;                     /* Prevent scrollbars during gameplay */
    user-select: none;                    /* Prevent text selection during gameplay */
    touch-action: manipulation;           /* Allow scrolling and button taps, prevent zoom */
    -webkit-user-select: none;            /* Safari/WebKit text selection prevention */
    -webkit-touch-callout: none;          /* Disable iOS long-press context menu */
}

/* ============================================================================
 * GAME CONTAINER & CANVAS SYSTEM FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: 3D Rendering Viewport Management
 * Creates the primary container for Three.js 3D rendering and UI overlay system.
 * Manages full-viewport layout and pointer event coordination.
 * 
 * FRAGMENT COMMUNICATION:
 * - Contains: Three.js WebGL canvas, UI overlay, HUD elements
 * - Integrates with: script.js (canvas creation), mobile controls
 * - Coordinates: Z-index layering, pointer event management
 * 
 * PERFORMANCE CONSIDERATIONS:
 * - Full viewport size for maximum 3D rendering area
 * - Hardware-accelerated WebGL canvas
 * - Efficient pointer event delegation
 * ============================================================================
 */
#game-container {
    position: relative;                   /* Establishes positioning context for children */
    width: 100vw;                        /* Full viewport width for immersive experience */
    height: 100vh;                       /* Full viewport height for maximum game area */
}

#game-canvas {
    display: block;                      /* Removes inline spacing issues */
    width: 100%;                         /* Fill container completely */
    height: 100%;                        /* Fill container completely */
    cursor: crosshair;                   /* Indicates targeting/shooting mode */
    touch-action: manipulation;          /* Allow touch controls while preventing zoom */
}

#ui-overlay {
    position: absolute;                  /* Overlay above 3D canvas */
    top: 0;
    left: 0;
    width: 100%;                         /* Cover entire canvas area */
    height: 100%;                        /* Cover entire canvas area */
    pointer-events: none;                /* Allow mouse events to pass through to canvas */
    z-index: 100;                       /* Above canvas, below mobile controls */
}


/* ============================================================================
 * CROSSHAIR TARGETING SYSTEM FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Weapon Aiming Interface
 * Provides precise targeting crosshair for desktop gameplay with smooth
 * animations and high visibility against varied backgrounds.
 * 
 * FRAGMENT COMMUNICATION:
 * - Positioned by: script.js mouse tracking system
 * - Integrates with: Shooting mechanics, enemy targeting
 * - Visual feedback: Responds to weapon state, target acquisition
 * 
 * DESIGN FEATURES:
 * - High contrast white with black shadow for visibility
 * - Smooth transitions for responsive feel
 * - Minimal size to not obstruct view
 * - Hardware-accelerated transforms for smooth movement
 * ============================================================================
 */
#center-crosshair {
    position: absolute;                  /* Positioned dynamically by mouse tracking */
    top: 0;                             /* Initial position (updated by JavaScript) */
    left: 0;                            /* Initial position (updated by JavaScript) */
    width: 4px;                         /* Minimal size to avoid view obstruction */
    height: 4px;                        /* Minimal size to avoid view obstruction */
    z-index: 300;                       /* Above scope overlay for visibility */
    pointer-events: none;               /* Don't interfere with mouse events */
    transition: all 0.1s ease-out;     /* Smooth movement animation */
}

/* Crosshair line elements using pseudo-elements for efficiency */
#center-crosshair::before,
#center-crosshair::after {
    content: '';                        /* Required for pseudo-element display */
    position: absolute;                 /* Position relative to crosshair container */
    background: rgba(255, 255, 255, 0.9); /* High visibility white */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); /* Black shadow for contrast */
}

/* Horizontal crosshair line */
#center-crosshair::before {
    top: 50%;                          /* Center vertically */
    left: -8px;                        /* Extend left from center */
    right: -8px;                       /* Extend right from center */
    height: 1px;                       /* Thin line for precision */
    transform: translateY(-50%);       /* Perfect vertical centering */
}

/* Vertical crosshair line */
#center-crosshair::after {
    left: 50%;                         /* Center horizontally */
    top: -8px;                         /* Extend up from center */
    bottom: -8px;                      /* Extend down from center */
    width: 1px;                        /* Thin line for precision */
    transform: translateX(-50%);       /* Perfect horizontal centering */
}

/* ============================================================================
 * SNIPER SCOPE SYSTEM FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Advanced Weapon Scope Interface
 * Creates realistic sniper scope effect with circular viewport, blur effects,
 * and precision reticle for enhanced targeting experience.
 * 
 * FRAGMENT COMMUNICATION:
 * - Activated by: script.js scope mode toggle
 * - Integrates with: Crosshair system, shooting mechanics
 * - Performance: Uses backdrop-filter for realistic blur effects
 * 
 * VISUAL FEATURES:
 * - Circular scope viewport with darkened periphery
 * - Backdrop blur effect outside scope area
 * - Precision reticle with crosshairs
 * - Realistic scope ring with shadow effects
 * ============================================================================
 */
#scope-overlay {
    position: absolute;                  /* Full overlay above game canvas */
    top: 0;
    left: 0;
    width: 100%;                        /* Cover entire viewport */
    height: 100%;                       /* Cover entire viewport */
    background: transparent;             /* Transparent base for scope effects */
    z-index: 200;                       /* Above crosshair, below mobile controls */
    pointer-events: none;               /* Allow mouse events to pass through to canvas */
}

#scope-circle {
    position: absolute;                  /* Full overlay for scope effect */
    top: 0;
    left: 0;
    width: 100%;                        /* Cover entire viewport */
    height: 100%;                       /* Cover entire viewport */
    pointer-events: none;               /* Don't interfere with targeting */
    /* Radial gradient creates clear center (150px) with dark periphery */
    background: radial-gradient(circle at center, transparent 150px, rgba(0, 0, 0, 0.7) 155px);
}

/* Blur effect for area outside scope - advanced CSS feature */
#scope-circle::after {
    content: '';                        /* Required for pseudo-element */
    position: absolute;                 /* Full overlay positioning */
    top: 0;
    left: 0;
    width: 100%;                        /* Cover entire viewport */
    height: 100%;                       /* Cover entire viewport */
    backdrop-filter: blur(4px);         /* Modern blur effect for realism */
    -webkit-backdrop-filter: blur(4px); /* WebKit browser support */
    /* Mask creates blur only outside scope circle */
    mask: radial-gradient(circle at center, transparent 150px, black 155px);
    -webkit-mask: radial-gradient(circle at center, transparent 150px, black 155px);
}

/* Scope ring - realistic metallic appearance */
#scope-circle::before {
    content: '';                        /* Required for pseudo-element */
    position: absolute;                 /* Centered positioning */
    top: 50%;                          /* Center vertically */
    left: 50%;                         /* Center horizontally */
    width: 300px;                      /* Scope diameter */
    height: 300px;                     /* Scope diameter */
    border: 3px solid rgba(255, 255, 255, 0.9); /* White scope ring */
    border-radius: 50%;                /* Perfect circle */
    transform: translate(-50%, -50%);  /* Perfect centering */
    background: transparent;            /* Clear center for viewing */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); /* Inner shadow for depth */
}

/* Precision reticle inside scope */
#scope-reticle {
    position: absolute;                 /* Centered positioning */
    top: 50%;                          /* Center vertically */
    left: 50%;                         /* Center horizontally */
    width: 60px;                       /* Reticle size */
    height: 60px;                      /* Reticle size */
    transform: translate(-50%, -50%);  /* Perfect centering */
    z-index: 201;                      /* Above scope circle */
    pointer-events: none;              /* Allow mouse events to pass through */
}

/* Reticle crosshair lines */
#scope-reticle::before,
#scope-reticle::after {
    content: '';                       /* Required for pseudo-elements */
    position: absolute;                /* Position relative to reticle */
    background: rgba(255, 255, 255, 0.9); /* High visibility white */
}

/* Horizontal reticle line */
#scope-reticle::before {
    top: 50%;                         /* Center vertically */
    left: 10px;                       /* Start from edge */
    right: 10px;                      /* End at edge */
    height: 1px;                      /* Thin precision line */
    transform: translateY(-50%);      /* Perfect vertical centering */
}

/* Vertical reticle line */
#scope-reticle::after {
    left: 50%;                        /* Center horizontally */
    top: 10px;                        /* Start from edge */
    bottom: 10px;                     /* End at edge */
    width: 1px;                       /* Thin precision line */
    transform: translateX(-50%);      /* Perfect horizontal centering */
}

/* ============================================================================
 * GAME INSTRUCTIONS OVERLAY FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: In-Game Help System
 * Displays contextual game instructions and controls during gameplay.
 * Positioned to be visible but not obstruct critical game elements.
 * 
 * FRAGMENT COMMUNICATION:
 * - Content managed by: gameConfig.js GAME_CONFIG.UI text
 * - Responsive behavior: Mobile media queries adjust sizing
 * - Integration: Overlays game canvas without blocking interaction
 * ============================================================================
 */
#instructions {
    position: absolute;                 /* Fixed position overlay */
    top: 20px;                         /* Top-left positioning */
    left: 20px;                        /* Top-left positioning */
    color: white;                      /* High contrast text */
    background: rgba(0, 0, 0, 0.7);    /* Semi-transparent dark background */
    padding: 15px;                     /* Comfortable text spacing */
    border-radius: 8px;                /* Rounded corners for modern look */
    font-size: 14px;                   /* Readable text size */
    line-height: 1.4;                  /* Improved text readability */
}

#instructions h2 {
    margin-bottom: 10px;               /* Spacing below heading */
    color: #4169E1;                    /* Blue accent color for headings */
}

#instructions p {
    margin: 5px 0;                     /* Vertical spacing between paragraphs */
}


/* ============================================================================
 * MOBILE RESPONSIVE OPTIMIZATION FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Mobile Device Adaptation System
 * Comprehensive responsive design system that optimizes UI elements for
 * mobile devices, ensuring usability across screen sizes from 320px to tablets.
 * 
 * FRAGMENT COMMUNICATION:
 * - Overrides: Desktop styles for mobile-specific behavior
 * - Coordinates with: Mobile controls, HUD system, touch interfaces
 * - Performance: Reduces visual complexity for mobile performance
 * 
 * BREAKPOINT STRATEGY:
 * - 768px: Primary mobile/tablet breakpoint
 * - 480px: Small mobile devices
 * - 500px height: Landscape mobile optimization
 * - 400px height: Ultra-compact landscape screens
 * ============================================================================
 */
@media (max-width: 768px) {
    /* Mobile-optimized instructions overlay */
    #instructions {
        font-size: 12px;                   /* Smaller text for mobile screens */
        padding: 8px;                      /* Reduced padding for space efficiency */
        top: 10px;                         /* Closer to edge for more game area */
        left: 10px;                        /* Closer to edge for more game area */
        max-width: calc(100vw - 20px);     /* Prevent horizontal overflow */
        box-sizing: border-box;            /* Include padding in width calculation */
    }
    
    /* ========================================================================
     * MOBILE HUD OPTIMIZATION FRAGMENT
     * ========================================================================
     * 
     * FRAGMENT PURPOSE: Ultra-Compact Mobile Game Information Display
     * Redesigns desktop HUD for mobile constraints, prioritizing critical
     * information while avoiding interference with touch controls.
     * 
     * MOBILE DESIGN STRATEGY:
     * - Single-row layout to minimize vertical space usage
     * - Higher z-index to stay above mobile controls (z-index: 150)
     * - Reduced font sizes and padding for space efficiency
     * - Strategic positioning to avoid touch control areas
     * - Selective information hiding (health bar) for space conservation
     * ========================================================================
     */
    #game-hud {
        position: absolute;                 /* Fixed positioning for mobile */
        top: 0.3rem;                       /* Minimal top margin */
        left: 0.3rem;                      /* Minimal left margin */
        right: 0.3rem;                     /* Minimal right margin */
        display: flex;                     /* Flexible layout system */
        flex-direction: row;               /* Horizontal layout for space efficiency */
        flex-wrap: wrap;                   /* Allow wrapping if needed */
        justify-content: space-between;    /* Distribute elements evenly */
        align-items: flex-start;           /* Align to top edge */
        gap: 0.1rem;                      /* Minimal spacing between elements */
        font-size: 0.6rem;                /* Ultra-compact text size */
        max-width: calc(100vw - 0.6rem);  /* Prevent horizontal overflow */
        z-index: 150;                     /* Higher than mobile controls (z-index: 120) */
        pointer-events: none;             /* Don't interfere with touch events */
    }
    
    #game-hud > div {
        background: rgba(0, 0, 0, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 0.1rem 0.2rem !important;
        font-size: 0.55rem !important;
        min-height: auto !important;
        border-radius: 0.15rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        backdrop-filter: blur(2px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    
    /* Hide health bar on mobile to save space */
    #health-container {
        display: none !important;
    }
    
    /* Compact timer container */
    #timer-container {
        order: 1;
        flex-shrink: 0;
    }
    
    #timer-label {
        font-size: 0.45rem !important;
        color: #cccccc !important;
        margin-right: 0.1rem !important;
    }
    
    #timer-text {
        font-weight: bold !important;
        color: #00ff00 !important;
        font-size: 0.55rem !important;
    }
    
    /* Compact score container */
    #score-container {
        order: 2;
        flex-shrink: 0;
    }
    
    #score-label {
        font-size: 0.45rem !important;
        color: #cccccc !important;
        margin-right: 0.1rem !important;
    }
    
    #score-text {
        font-weight: bold !important;
        color: #ffff00 !important;
        font-size: 0.55rem !important;
    }
    
    /* Compact enemy count container */
    #enemy-count-container {
        order: 3;
        flex-shrink: 0;
    }
    
    #enemy-count-label {
        font-size: 0.45rem !important;
        color: #cccccc !important;
        margin-right: 0.1rem !important;
    }
    
    #enemy-count-text {
        font-weight: bold !important;
        color: #ff4444 !important;
        font-size: 0.55rem !important;
    }
    
    /* Compact ammo container - positioned at end */
    #ammo-container {
        order: 4;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.08rem !important;
        margin: 0 !important;
        flex-shrink: 0;
    }
    
    #ammo-label {
        font-size: 0.5rem !important;
        margin-bottom: 0 !important;
        margin-right: 0.05rem !important;
        color: #cccccc !important;
    }
    
    /* Smaller ammo display on mobile */
    #ammo-display {
        font-size: 0.55rem !important;
        font-weight: bold !important;
    }
    
    #chamber-ammo, #reserve-ammo {
        font-size: 0.55rem !important;
    }
    
    #ammo-separator {
        font-size: 0.55rem !important;
        margin: 0 0.05rem !important;
    }
    
    #reload-status {
        font-size: 0.45rem !important;
        margin-top: 0.1rem !important;
    }
}

@media (max-width: 480px) {
    #instructions {
        font-size: 11px;
        padding: 6px;
    }
    
    /* Ultra-compact HUD for very small screens */
    #game-hud {
        top: 0.2rem;
        left: 0.2rem;
        right: 0.2rem;
        gap: 0.08rem;
        font-size: 0.5rem;
        max-width: calc(100vw - 0.4rem);
    }
    
    #game-hud > div {
        padding: 0.08rem 0.15rem !important;
        font-size: 0.48rem !important;
        border-radius: 0.1rem !important;
    }
    
    /* Hide health bar on very small screens */
    #health-container {
        display: none !important;
    }
    
    /* Adjust text sizes for very small screens */
    #timer-text {
        font-size: 0.48rem !important;
    }
    
    #score-text {
        font-size: 0.48rem !important;
    }
    
    #enemy-count-text {
        font-size: 0.48rem !important;
    }
    
    /* Ultra-compact ammo container for very small screens */
    #ammo-container {
        gap: 0.05rem !important;
    }
    
    #ammo-label {
        font-size: 0.45rem !important;
    }
    
    /* Even smaller ammo display */
    #ammo-display {
        font-size: 0.48rem !important;
    }
    
    #chamber-ammo, #reserve-ammo {
        font-size: 0.48rem !important;
    }
    
    #ammo-separator {
        font-size: 0.48rem !important;
        margin: 0 0.03rem !important;
    }
    
    #reload-status {
        font-size: 0.4rem !important;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    #instructions {
        font-size: 10px;
        padding: 4px;
        top: 5px;
        left: 5px;
    }
    
    /* Ultra-compact HUD for landscape mobile - single row to save vertical space */
    #game-hud {
        top: 0.15rem;
        left: 0.15rem;
        right: 0.15rem;
        gap: 0.05rem;
        font-size: 0.45rem;
        max-width: calc(100vw - 0.3rem);
        flex-wrap: nowrap; /* Force single row in landscape */
        justify-content: flex-start; /* Align to left in landscape */
        overflow-x: auto; /* Allow horizontal scrolling if needed */
    }
    
    #game-hud > div {
        padding: 0.05rem 0.1rem !important;
        font-size: 0.42rem !important;
        border-radius: 0.08rem !important;
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    /* Hide health bar for landscape mobile to save space */
    #health-container {
        display: none !important;
    }
    
    /* Adjust text sizes for landscape */
    #timer-text {
        font-size: 0.42rem !important;
    }
    
    #score-text {
        font-size: 0.42rem !important;
    }
    
    #enemy-count-text {
        font-size: 0.42rem !important;
    }
    
    /* Ultra-compact ammo container for landscape */
    #ammo-container {
        gap: 0.04rem !important;
    }
    
    #ammo-label {
        font-size: 0.4rem !important;
    }
    
    /* Ultra-compact ammo display */
    #ammo-display {
        font-size: 0.42rem !important;
    }
    
    #chamber-ammo, #reserve-ammo {
        font-size: 0.42rem !important;
    }
    
    #ammo-separator {
        font-size: 0.42rem !important;
        margin: 0 0.02rem !important;
    }
    
    #reload-status {
        font-size: 0.38rem !important;
    }
    
    /* Comprehensive landscape optimization for start/end screens */
    #start-menu {
        padding: 2px 0; /* Minimal vertical padding */
        align-items: flex-start; /* Top alignment for landscape */
        overflow-y: auto; /* Enable scrolling if needed */
    }
    
    #start-menu-content {
        padding: 8px 15px; /* Compact padding */
        max-width: 95vw; /* Use most of screen width */
        width: 95vw;
        max-height: 95vh; /* Ensure it fits in viewport */
        margin: 5px auto; /* Small top margin */
        overflow-y: auto; /* Scrollable content */
    }
    
    #game-title {
        font-size: 28px !important; /* Bigger title for landscape */
        margin-bottom: 10px !important;
        letter-spacing: 1px;
    }
    
    #game-subtitle {
        font-size: 14px !important; /* Bigger subtitle */
        margin-bottom: 15px !important;
    }
    
    /* Compact tab system for landscape */
    #menu-tabs {
        margin: 8px 0 !important;
        gap: 8px;
    }
    
    .tab-btn {
        padding: 8px 16px !important; /* Bigger buttons */
        font-size: 13px !important; /* Bigger tab text */
    }
    
    #tab-content {
        max-height: 35vh !important; /* Slightly more height for bigger text */
        min-height: 180px !important;
        overflow-y: auto;
        font-size: 13px !important; /* Bigger content text */
    }
    
    #start-game-btn {
        padding: 10px 24px !important; /* Bigger start button */
        font-size: 14px !important; /* Bigger button text */
        margin-top: 12px !important;
    }
    
    /* Optimize briefing content for landscape */
    #briefing-content p, #objective-details p {
        font-size: 12px !important; /* Bigger briefing text */
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    .highlight {
        font-size: 12px !important; /* Bigger highlight text */
    }
    
    /* Controls section optimization */
    .controls-section {
        margin-bottom: 10px !important;
    }
    
    .controls-section h3 {
        font-size: 14px !important; /* Bigger section headers */
        margin-bottom: 6px !important;
    }
    
    .control-item {
        font-size: 12px !important; /* Bigger control text */
        margin-bottom: 3px !important;
    }
    
    /* Game Over Screen optimization for landscape */
    div[style*="z-index: 10000"] {
        padding: 15px !important; /* More padding */
    }
    
    div[style*="z-index: 10000"] h1 {
        font-size: 32px !important; /* Bigger game over title */
        margin-bottom: 10px !important;
    }
    
    div[style*="z-index: 10000"] h2 {
        font-size: 24px !important; /* Bigger game over subtitle */
        margin-bottom: 8px !important;
    }
    
    div[style*="z-index: 10000"] p {
        font-size: 16px !important; /* Bigger game over text */
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
    }
    
    /* Instructions text optimization */
    div[style*="background: rgba(0, 0, 0, 0.8)"] {
        padding: 12px !important; /* More padding */
        font-size: 12px !important; /* Bigger instructions */
    }
    
    div[style*="background: rgba(0, 0, 0, 0.8)"] h2 {
        font-size: 18px !important; /* Bigger instruction headers */
        margin-bottom: 6px !important;
    }
    
    div[style*="background: rgba(0, 0, 0, 0.8)"] p {
        font-size: 12px !important; /* Bigger instruction text */
        margin: 4px 0 !important;
    }
}

/* Additional landscape optimization for very short screens */
@media (max-height: 400px) and (orientation: landscape) {
    /* Ultra-compact HUD for very short landscape screens */
    #game-hud {
        top: 0.1rem;
        left: 0.1rem;
        right: 0.1rem;
        gap: 0.03rem;
        font-size: 0.4rem;
        max-width: calc(100vw - 0.2rem);
        flex-wrap: nowrap; /* Single row only */
    }
    
    #game-hud > div {
        padding: 0.03rem 0.08rem !important;
        font-size: 0.38rem !important;
        border-radius: 0.05rem !important;
    }
    
    /* Ensure health is hidden on very short landscape */
    #health-container {
        display: none !important;
    }
    
    /* Minimize all text for very short landscape */
    #timer-text, #score-text, #enemy-count-text {
        font-size: 0.38rem !important;
    }
    
    #ammo-display, #chamber-ammo, #reserve-ammo, #ammo-separator {
        font-size: 0.38rem !important;
    }
    
    #ammo-label {
        font-size: 0.36rem !important;
    }
    
    #reload-status {
        font-size: 0.34rem !important;
    }
    
    /* Start menu optimizations */
    #start-menu-content {
        max-height: 98vh !important;
        padding: 4px 10px !important;
    }
    
    #game-title {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    
    #game-subtitle {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }
    
    #tab-content {
        max-height: 28vh !important;
        min-height: 120px !important;
        font-size: 11px !important;
    }
    
    #start-game-btn {
        padding: 6px 16px !important;
        font-size: 12px !important;
        margin-top: 8px !important;
    }
    
    .tab-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    
    /* Game over text optimizations */
    div[style*="z-index: 10000"] h1 {
        font-size: 26px !important;
        margin-bottom: 6px !important;
    }
    
    div[style*="z-index: 10000"] h2 {
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }
    
    div[style*="z-index: 10000"] p {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
}

/* ============================================================================
 * DESKTOP GAME HUD SYSTEM FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Real-Time Game Information Display
 * Comprehensive heads-up display system providing critical game information
 * including health, ammunition, score, timer, and enemy count.
 * 
 * FRAGMENT COMMUNICATION:
 * - Updated by: script.js Game class methods
 * - Data sources: Player health, weapon system, game timer, enemy manager
 * - Integration: Coordinates with mobile HUD overrides
 * 
 * DESIGN PHILOSOPHY:
 * - Non-intrusive positioning (top-left corner)
 * - High contrast for readability in various lighting
 * - Vertical layout for logical information grouping
 * - Smooth transitions for value changes
 * ============================================================================
 */
#game-hud {
    position: absolute;                 /* Fixed positioning for consistent placement */
    top: 20px;                         /* Standard desktop margin from top */
    left: 20px;                        /* Standard desktop margin from left */
    display: flex;                     /* Flexible layout container */
    flex-direction: column;            /* Vertical stacking of HUD elements */
    gap: 15px;                        /* Comfortable spacing between elements */
    font-family: 'Arial', sans-serif;  /* Clean, readable font */
    font-size: 16px;                   /* Standard desktop text size */
    color: white;                      /* High contrast against dark backgrounds */
    z-index: 100;                     /* Above game canvas, below scope/crosshair */
    pointer-events: none;             /* Don't interfere with game interactions */
}

#game-hud > div {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#health-bar {
    width: 150px;
    height: 20px;
    background: #333;
    border: 1px solid #666;
    border-radius: 3px;
    overflow: hidden;
}

#health-fill {
    height: 100%;
    background: #00ff00;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 100%;
}

#timer-text {
    font-weight: bold;
    min-width: 60px;
}

#score-text, #enemy-count-text {
    font-weight: bold;
    color: #ffff00;
}

#enemy-count-text {
    color: #ff4444;
}

/* Health bar color states */
.health-low {
    background: #ff6600 !important;
}

.health-critical {
    background: #ff0000 !important;
}

/* Timer color states */
.timer-warning {
    color: #ff6600 !important;
}

.timer-critical {
    color: #ff0000 !important;
}

/* Ammo display */
#ammo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 15px;
}

#ammo-label {
    color: #ffffff;
    font-size: 12px;
    margin-bottom: 5px;
}

#ammo-display {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

#chamber-ammo {
    color: #00ff00; /* Green for chamber ammo */
    min-width: 20px;
    text-align: center;
}

#chamber-ammo.empty {
    color: #ff0000; /* Red when empty */
}

#ammo-separator {
    color: #ffffff;
    margin: 0 5px;
}

#reserve-ammo {
    color: #ffff00; /* Yellow for reserve ammo */
    min-width: 20px;
    text-align: center;
}

#reserve-ammo.empty {
    color: #ff6666; /* Light red when empty */
}

#reload-status {
    color: #ff6600;
    font-size: 12px;
    margin-top: 2px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ============================================================================
 * START MENU SYSTEM FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Game Entry Point & Navigation Hub
 * Comprehensive start menu system providing mission briefing, controls
 * documentation, and game initialization interface.
 * 
 * FRAGMENT COMMUNICATION:
 * - Content managed by: gameConfig.js GAME_CONFIG.UI
 * - Activated by: Game initialization, game over states
 * - Integration: Coordinates with mobile responsive system
 * 
 * DESIGN FEATURES:
 * - Full-screen overlay with immersive background gradient
 * - Tabbed interface for organized information presentation
 * - Responsive design adapting from desktop to mobile
 * - Courier New font for tactical/military aesthetic
 * - High z-index (10000) to overlay all game elements
 * ============================================================================
 */
#start-menu {
    position: fixed;                    /* Full-screen overlay positioning */
    top: 0;                            /* Cover entire viewport */
    left: 0;                           /* Cover entire viewport */
    width: 100vw;                      /* Full viewport width */
    height: 100vh;                     /* Full viewport height */
    /* Sophisticated gradient background for depth and atmosphere */
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    display: flex;                     /* Flexible centering system */
    justify-content: center;           /* Center horizontally */
    align-items: center;               /* Center vertically */
    z-index: 10000;                   /* Highest priority - overlay everything */
    touch-action: pan-y;              /* Allow vertical scrolling on mobile */
    font-family: 'Courier New', monospace; /* Tactical/military aesthetic font */
}

#start-menu-content {
    max-width: 800px;
    width: 90%;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(0, 255, 0, 0.3);
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.2);
    backdrop-filter: blur(10px);
}

#game-title {
    font-size: 48px;
    color: #00ff00;
    margin: 0 0 10px 0;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    letter-spacing: 4px;
    font-weight: bold;
}

#game-subtitle {
    font-size: 18px;
    color: #cccccc;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

/* Tabbed Interface */
#menu-tabs {
    margin: 30px 0;
}

#tab-navigation {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(0, 255, 0, 0.3);
}

.tab-btn {
    background: rgba(0, 0, 0, 0.3);
    color: #cccccc;
    border: none;
    padding: 15px 30px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    touch-action: manipulation; /* Enable touch interactions */
    border-top: 3px solid transparent;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-btn:first-child {
    border-left: none;
    border-top-left-radius: 8px;
}

.tab-btn:last-child {
    border-right: none;
    border-top-right-radius: 8px;
}

.tab-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    color: #ffffff;
}

.tab-btn.active {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
    border-top-color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

#tab-content {
    min-height: 300px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 25px;
}

.tab-panel {
    display: none;
    text-align: left;
}

.tab-panel.active {
    display: block;
}

/* Mission Briefing Tab */
#briefing-content p {
    color: #ffffff;
    margin: 12px 0;
    font-size: 16px;
    line-height: 1.5;
}

#objective-details {
    margin-top: 25px;
    padding: 20px;
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 6px;
}

#objective-details h4 {
    color: #00ff00;
    margin: 0 0 15px 0;
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
}

#objective-details p {
    margin: 8px 0;
    font-size: 14px;
}

.highlight {
    color: #00ff00;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.warning {
    color: #ff0000;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Controls Tab */
#desktop-controls-tab, #mobile-controls-tab {
    margin-bottom: 30px;
}

#desktop-controls-tab h4, #mobile-controls-tab h4 {
    color: #ffffff;
    margin: 0 0 20px 0;
    font-size: 18px;
    letter-spacing: 2px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#controls-grid, #mobile-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.control-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0, 255, 0, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 0, 0.2);
    transition: all 0.2s ease;
}

.control-item:hover {
    background: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.4);
}

.key {
    color: #00ff00;
    font-weight: bold;
    font-size: 14px;
    min-width: 120px;
    text-shadow: 0 0 3px rgba(0, 255, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.action {
    color: #cccccc;
    font-size: 14px;
    text-align: right;
}

#start-buttons {
    margin: 40px 0 20px 0;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.menu-btn {
    padding: 15px 30px;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    border: 2px solid;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    touch-action: manipulation; /* Enable touch interactions */
}

.menu-btn.primary {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.menu-btn.primary:hover {
    background: rgba(0, 255, 0, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    transform: translateY(-2px);
}

.menu-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
}

.menu-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

#menu-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#difficulty-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.difficulty-label {
    color: #cccccc;
    font-size: 14px;
}

.difficulty-value {
    color: #ff6600;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.5);
}

/* Responsive design for start menu */
/* Loading Spinner Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading Indicator Styles */
#loading-indicator {
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    border: 2px solid #00ff00;
}

#loading-indicator .loading-spinner {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

#loading-progress {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

#loading-bar {
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}

@media (max-width: 768px) {
    /* Make start menu scrollable on mobile */
    #start-menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        align-items: flex-start; /* Change from center to flex-start */
        padding: 20px 0; /* Add padding for better spacing */
    }
    
    #start-menu-content {
        padding: 30px 20px;
        width: 95%;
        max-height: none; /* Remove any height restrictions */
        margin: auto; /* Center horizontally but allow vertical scrolling */
        min-height: auto; /* Allow content to determine height */
    }
    
    #game-title {
        font-size: 36px;
    }
    
    #controls-grid, #mobile-controls-grid {
        grid-template-columns: 1fr;
    }
    
    .tab-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    #start-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .menu-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    /* Enhanced mobile scrolling for small screens */
    #start-menu {
        padding: 10px 0; /* Reduce padding on very small screens */
    }
    
    #start-menu-content {
        width: 98%; /* Slightly wider on very small screens */
        padding: 20px 15px; /* Reduce padding */
    }
    
    #game-title {
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    #briefing-content p, #objective-details p {
        font-size: 14px;
    }
    
    .tab-btn {
        padding: 10px 15px;
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    #tab-content {
        padding: 20px 15px;
        min-height: 250px;
        max-height: 60vh; /* Limit tab content height */
        overflow-y: auto; /* Make tab content scrollable if needed */
        -webkit-overflow-scrolling: touch;
    }
    
    .control-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px 15px;
        background: rgba(0, 255, 0, 0.08) !important;
    }
    
    .key {
        min-width: auto;
        margin-bottom: 5px;
        justify-content: center;
        font-size: 13px;
        gap: 6px;
    }
    
    .action {
        text-align: center;
        font-size: 13px;
        line-height: 1.4;
    }
    
    /* Enhanced mobile control styling */
    #mobile-controls-grid .control-item {
        background: rgba(0, 150, 255, 0.1) !important;
        border-color: rgba(0, 150, 255, 0.3) !important;
    }
    
    #mobile-controls-grid .control-item:hover {
        background: rgba(0, 150, 255, 0.15) !important;
        border-color: rgba(0, 150, 255, 0.5) !important;
    }
    
    #mobile-controls-grid .key {
        color: #00aaff !important;
        text-shadow: 0 0 3px rgba(0, 170, 255, 0.5) !important;
    }
}

/* ============================================================================
 * MOBILE CONTROLS SYSTEM FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Touch-Based Game Control Interface
 * Comprehensive mobile control system providing virtual joystick, action
 * buttons, and movement controls for touch-enabled devices.
 * 
 * FRAGMENT COMMUNICATION:
 * - Input handling: script.js mobile input event system
 * - Integration: Coordinates with HUD positioning (z-index layering)
 * - Responsive: Adapts to various mobile screen sizes and orientations
 * 
 * CONTROL COMPONENTS:
 * - Virtual joystick (movement control)
 * - Action buttons (shoot, reload, scope)
 * - Movement buttons (alternative movement system)
 * - Responsive sizing for different screen sizes
 * 
 * DESIGN PHILOSOPHY:
 * - Non-intrusive positioning to maximize game view
 * - High contrast green theme matching game aesthetic
 * - Haptic feedback through visual animations
 * - Performance-optimized for smooth touch response
 * ============================================================================
 */
.mobile-only {
    display: none;                     /* Hidden by default on desktop */
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;                /* Show on mobile devices */
    }
    
    .desktop-only {
        display: none;                 /* Hide desktop-specific elements */
    }
}

#mobile-controls {
    position: fixed;                   /* Full-screen control overlay */
    top: 0;                           /* Cover entire viewport */
    left: 0;                          /* Cover entire viewport */
    width: 100%;                      /* Full viewport width */
    height: 100%;                     /* Full viewport height */
    pointer-events: none;             /* Allow events to pass through by default */
    z-index: 1000;                   /* Above game canvas, below HUD (z-index: 1000) */
    font-family: 'Courier New', monospace; /* Consistent tactical font */
    touch-action: none;               /* Prevent interference with game canvas, child elements override */
}

/* ============================================================================
 * VIRTUAL JOYSTICK FRAGMENT
 * ============================================================================
 * 
 * FRAGMENT PURPOSE: Touch Movement Control System
 * Advanced virtual joystick providing smooth, responsive movement control
 * for mobile devices with realistic visual feedback and animations.
 * 
 * FRAGMENT COMMUNICATION:
 * - Input events: Processed by script.js mobile input handlers
 * - Movement data: Converted to player movement vectors
 * - Visual feedback: Real-time knob positioning and animation states
 * 
 * DESIGN FEATURES:
 * - Realistic 3D appearance with gradients and shadows
 * - Smooth animations and hover effects
 * - Hardware-accelerated transforms for performance
 * - Green theme matching game's tactical aesthetic
 * ============================================================================
 */
#virtual-joystick {
    position: absolute;                /* Fixed positioning for consistent placement */
    bottom: 20px;                     /* Standard margin from bottom edge */
    left: 20px;                       /* Standard margin from left edge */
    pointer-events: auto;             /* Enable touch interactions */
    text-align: center;               /* Center joystick label */
}

#joystick-base {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.15), rgba(0, 200, 0, 0.08));
    border: 3px solid rgba(0, 255, 0, 0.4);
    position: relative;
    box-shadow: 
        0 0 25px rgba(0, 255, 0, 0.3),
        inset 0 0 25px rgba(0, 255, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#joystick-base:hover {
    transform: scale(1.05);
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.4),
        inset 0 0 30px rgba(0, 255, 0, 0.15),
        0 12px 24px rgba(0, 0, 0, 0.4);
}

#joystick-knob {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #00ff88, #00ff00, #00cc00);
    border: 2px solid #00ff00;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 20px rgba(0, 255, 0, 0.6),
        inset 0 3px 6px rgba(255, 255, 255, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#joystick-knob::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 30%;
    height: 30%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
    border-radius: 50%;
    pointer-events: none;
}

#joystick-knob:active {
    transform: translate(-50%, -50%) scale(0.92);
    box-shadow: 
        0 0 25px rgba(0, 255, 0, 0.8),
        inset 0 2px 8px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

#joystick-label {
    margin-top: 10px;
    color: #00ff00;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.9;
    transition: all 0.3s ease;
}

#virtual-joystick:hover #joystick-label {
    opacity: 1;
    text-shadow: 0 0 12px rgba(0, 255, 0, 0.8);
}

/* Action Buttons */
#mobile-action-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: auto;
}

.mobile-btn {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.85), rgba(20, 20, 20, 0.9));
    border: 2px solid #00ff00;
    border-radius: 18px;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    padding: 0;
    cursor: pointer;
    user-select: none;
    box-shadow: 
        0 0 20px rgba(0, 255, 0, 0.4),
        inset 0 3px 6px rgba(0, 255, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
}

.mobile-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.mobile-btn:hover::before {
    left: 100%;
}

.mobile-btn:hover {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.12), rgba(0, 200, 0, 0.08));
    border-color: #00ffaa;
    box-shadow: 
        0 0 25px rgba(0, 255, 0, 0.6),
        inset 0 3px 8px rgba(0, 255, 0, 0.25),
        0 8px 16px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px) scale(1.02);
}

.mobile-btn:active {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.25), rgba(0, 200, 0, 0.15));
    border-color: #00ff88;
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.8),
        inset 0 4px 12px rgba(0, 255, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.6);
    transform: translateY(1px) scale(0.96);
}

.action-btn {
    width: 80px;
    height: 80px;
    flex-direction: column;
    gap: 4px;
}

.action-btn .btn-icon {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
}

.action-btn:hover .btn-icon {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
    transform: scale(1.1);
}

.action-btn .btn-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

.action-btn:hover .btn-label {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Movement Buttons */
#mobile-movement-buttons {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    pointer-events: auto;
    z-index: 1001;
}

.movement-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
}

.movement-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(0, 255, 0, 0.3), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    pointer-events: none;
}

.movement-btn:active::after {
    width: 100%;
    height: 100%;
}

.movement-btn .btn-icon {
    font-size: 26px;
    font-weight: bold;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.movement-btn:hover .btn-icon {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
    transform: scale(1.15);
}


/* Button States */
.mobile-btn.pressed {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.35), rgba(0, 200, 0, 0.25)) !important;
    border-color: #00ff88 !important;
    box-shadow: 
        0 0 35px rgba(0, 255, 0, 0.9),
        inset 0 4px 15px rgba(0, 255, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.7) !important;
    transform: scale(0.92) !important;
    animation: pulse-glow 0.6s ease-in-out;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 35px rgba(0, 255, 0, 0.9), inset 0 4px 15px rgba(0, 255, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.7); }
    50% { box-shadow: 0 0 45px rgba(0, 255, 0, 1), inset 0 4px 20px rgba(0, 255, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.7); }
}

.mobile-btn.disabled {
    opacity: 0.5;
    background: rgba(128, 128, 128, 0.8) !important;
    border-color: #666 !important;
    color: #666 !important;
    cursor: not-allowed;
}

.mobile-btn.active {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.45), rgba(0, 200, 0, 0.35)) !important;
    border-color: #00ffaa !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.9),
        inset 0 3px 12px rgba(0, 255, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.5) !important;
    animation: active-glow 2s ease-in-out infinite alternate;
}

@keyframes active-glow {
    0% { box-shadow: 0 0 30px rgba(0, 255, 0, 0.9), inset 0 3px 12px rgba(0, 255, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.5); }
    100% { box-shadow: 0 0 40px rgba(0, 255, 0, 1), inset 0 3px 15px rgba(0, 255, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.5); }
}

/* Mobile-specific responsive adjustments */
@media (max-width: 768px) {
    /* Adjust mobile controls for smaller screens - ensure no overlap with HUD */
    #virtual-joystick {
        bottom: 15px;
        left: 15px;
        z-index: 120; /* Below HUD but above game */
    }
    
    #joystick-base {
        width: 100px;
        height: 100px;
    }
    
    #joystick-knob {
        width: 40px;
        height: 40px;
    }
    
    #mobile-action-buttons {
        bottom: 15px;
        right: 15px;
        z-index: 120; /* Below HUD but above game */
    }
    
    .action-btn {
        width: 70px;
        height: 70px;
    }
    
    .action-btn .btn-icon {
        font-size: 20px;
    }
    
    .action-btn .btn-label {
        font-size: 9px;
    }
    
    #mobile-movement-buttons {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        gap: 12px;
        z-index: 120; /* Below HUD but above game */
    }
    
    .movement-btn {
        width: 50px;
        height: 50px;
    }
    
    .movement-btn .btn-icon {
        font-size: 20px;
    }
    
    
    /* Ensure HUD doesn't overlap with mobile controls by adjusting top margin */
    #game-hud {
        margin-top: 0.2rem; /* Add small margin to prevent any overlap */
    }
}

/* Very small screens */
@media (max-width: 480px) {
    
    /* Smaller mobile controls for very small screens */
    #virtual-joystick {
        bottom: 10px;
        left: 10px;
        z-index: 120; /* Below HUD but above game */
    }
    
    #joystick-base {
        width: 90px;
        height: 90px;
    }
    
    #joystick-knob {
        width: 35px;
        height: 35px;
    }
    
    #mobile-action-buttons {
        bottom: 10px;
        right: 10px;
        gap: 12px;
        z-index: 120; /* Below HUD but above game */
    }
    
    .action-btn {
        width: 65px;
        height: 65px;
    }
    
    .action-btn .btn-icon {
        font-size: 18px;
    }
    
    .action-btn .btn-label {
        font-size: 8px;
    }
    
    #mobile-movement-buttons {
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        gap: 10px;
        z-index: 120; /* Below HUD but above game */
    }
    
    .movement-btn {
        width: 45px;
        height: 45px;
    }
    
    .movement-btn .btn-icon {
        font-size: 18px;
    }
    
    /* Ensure adequate spacing between HUD and mobile controls */
    #game-hud {
        margin-top: 0.15rem; /* Slightly less margin for small screens */
    }
}