/** * ============================================================================ * 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: * - 896px+: Large mobile/tablet screens * - 768px: Primary mobile/tablet breakpoint * - 480px: Small mobile devices * - 500px height: Landscape mobile optimization * - 400px height: Ultra-compact landscape screens * ============================================================================ */ @media (min-width: 844px) and (max-width: 1024px) { /* ========================================================================= * TABLET HUD STYLING — VISUAL PARITY WITH MOBILE, SLIGHTLY EXPANDED * ========================================================================= */ #game-hud { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; justify-content: space-between; align-items: flex-start; font-size: 0.75rem; max-width: calc(100vw - 1.2rem); z-index: 150; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); } #game-hud>div { background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 50%, rgba(0, 0, 0, 0.9) 100%) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; padding: 0.35rem 0.6rem !important; border-radius: 0.4rem !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; margin: 0 !important; white-space: nowrap !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; min-height: 2.6rem !important; text-align: left !important; flex: 1 1 0 !important; min-width: 0 !important; width: 20% !important; max-width: 20% !important; box-sizing: border-box !important; } #game-hud>div::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s ease; } #game-hud>div:hover::before { left: 100%; } #timer-text, #score-text, #enemy-count-text { font-size: 0.75rem !important; } #ammo-container { order: 4; flex-direction: row !important; align-items: center !important; gap: 0.2rem !important; margin: 0 !important; padding: 0.25rem 0.5rem !important; } #ammo-label { font-size: 0.7rem !important; margin-bottom: 0 !important; margin-right: 0.15rem !important; } #ammo-display, #chamber-ammo, #reserve-ammo { font-size: 0.75rem !important; } #ammo-separator { font-size: 0.75rem !important; margin: 0 0.15rem !important; } } @media (max-width: 768px) { /* Mobile-optimized instructions overlay */ #instructions { font-size: 12px; padding: 8px; top: 10px; left: 10px; max-width: calc(100vw - 20px); box-sizing: border-box; } /* ======================================================================== * ENHANCED MOBILE HUD OPTIMIZATION FRAGMENT * ======================================================================== * * FRAGMENT PURPOSE: Modern Mobile Game Information Display * Enhanced mobile HUD with improved visual design while maintaining * compact layout for mobile constraints. * * MOBILE DESIGN STRATEGY: * - Horizontal layout with smart wrapping * - Enhanced visual effects adapted for mobile * - Compact health indicator instead of hiding it * - Optimized touch-friendly spacing * - Maintained visual hierarchy with reduced sizes * ======================================================================== */ #game-hud { position: absolute; top: 0.4rem; left: 0.4rem; right: 0.4rem; display: flex; flex-direction: row; gap: 0.3rem; align-items: start; font-size: 0.65rem; max-width: calc(100vw - 0.8rem); z-index: 150; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } #game-hud>div { background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(15, 15, 15, 0.95) 50%, rgba(0, 0, 0, 0.9) 100%) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; padding: 0.3rem 0.4rem !important; border-radius: 0.4rem !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; margin: 0 !important; white-space: nowrap !important; transition: all 0.3s ease !important; position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; min-height: 2.5rem !important; text-align: left !important; flex: 1 1 0 !important; min-width: 0 !important; width: 15% !important; max-width: 25% !important; box-sizing: border-box !important; } #game-hud>div::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s ease; } /* Compact timer container */ #timer-container { flex-shrink: 0; display: flex !important; align-items: center !important; gap: 0 !important; } #timer-label { font-size: 0.55rem !important; margin-right: 0 !important; } #timer-text { font-size: 0.65rem !important; text-shadow: 0 0 4px rgba(0, 255, 136, 0.5) !important; } /* Compact score container */ #score-container { flex-shrink: 0; display: flex !important; align-items: center !important; gap: 0 !important; } #score-label { font-size: 0.55rem !important; margin-right: 0 !important; } #score-text { font-size: 0.65rem !important; text-shadow: 0 0 4px rgba(255, 255, 0, 0.5) !important; } /* Compact enemy count container */ #enemy-count-container { flex-shrink: 0; display: flex !important; align-items: center !important; gap: 0 !important; } #enemy-count-label { font-size: 0.55rem !important; margin-right: 0 !important; } #enemy-count-text { font-size: 0.65rem !important; text-shadow: 0 0 4px rgba(255, 68, 68, 0.5) !important; } /* Compact ammo container */ #ammo-container { flex-direction: row !important; align-items: center !important; gap: 0 !important; margin: 0 !important; flex-shrink: 0; min-width: auto !important; } #ammo-label { font-size: 0.55rem !important; margin-bottom: 0 !important; margin-right: 0 !important; } #ammo-display { font-size: 0.65rem !important; gap: 0 !important; } #chamber-ammo, #reserve-ammo { font-size: 0.65rem !important; text-shadow: 0 0 4px currentColor !important; } #ammo-separator { font-size: 0.65rem !important; margin: 0 !important; } #reload-status { font-size: 0.55rem !important; margin-left: 0.3rem !important; text-shadow: 0 0 4px rgba(255, 102, 0, 0.5) !important; } /* Mobile-specific animations */ .timer-warning #timer-text, .timer-critical #timer-text { animation-duration: 1s !important; } #chamber-ammo.empty { animation-duration: 0.8s !important; } @keyframes reloadPulseMobile { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.9); } } #reload-status { animation: reloadPulseMobile 1s infinite !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.2rem; font-size: 0.5rem; max-width: calc(100vw - 0.4rem); } #game-hud>div { padding: 0.2rem 0.3rem !important; font-size: 0.48rem !important; border-radius: 0.2rem !important; min-height: 2rem !important; flex: 1 1 0 !important; min-width: 0 !important; width: 20% !important; max-width: 20% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; } /* Adjust text sizes for very small screens */ #timer-label, #score-label, #enemy-count-label, #ammo-label { font-size: 0.45rem !important; } #timer-text, #score-text, #enemy-count-text { font-size: 0.48rem !important; } /* Ultra-compact ammo container for very small screens */ #ammo-container { gap: 0.2rem !important; } /* Consistent ammo display sizing */ #ammo-display, #chamber-ammo, #reserve-ammo, #ammo-separator { font-size: 0.48rem !important; } #ammo-separator { margin: 0 0.05rem !important; } #reload-status { font-size: 0.45rem !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.15rem; font-size: 0.45rem; max-width: calc(100vw - 0.3rem); overflow-x: auto; /* Allow horizontal scrolling if needed */ } #game-hud>div { padding: 0.15rem 0.25rem !important; font-size: 0.42rem !important; border-radius: 0.15rem !important; flex-shrink: 0; min-height: 1.8rem !important; flex: 1 1 0 !important; min-width: 0 !important; width: 12% !important; max-width: 12% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; /* Prevent shrinking */ } /* Adjust text sizes for landscape */ #timer-label, #score-label, #enemy-count-label, #ammo-label { font-size: 0.4rem !important; } #timer-text, #score-text, #enemy-count-text { font-size: 0.42rem !important; } /* Ultra-compact ammo container for landscape */ #ammo-container { gap: 0.15rem !important; } /* Consistent ammo display sizing for landscape */ #ammo-display, #chamber-ammo, #reserve-ammo, #ammo-separator { font-size: 0.42rem !important; } #ammo-separator { margin: 0 0.05rem !important; } #reload-status { font-size: 0.4rem !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.1rem; font-size: 0.4rem; max-width: calc(100vw - 0.2rem); /* Single row only */ } #game-hud>div { padding: 0.1rem 0.2rem !important; font-size: 0.38rem !important; border-radius: 0.1rem !important; min-height: 1.5rem !important; flex: 1 1 0 !important; min-width: 0 !important; width: 12% !important; max-width: 12% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; } /* Minimize all text for very short landscape */ #timer-label, #score-label, #enemy-count-label, #ammo-label { font-size: 0.36rem !important; } #timer-text, #score-text, #enemy-count-text, #ammo-display, #chamber-ammo, #reserve-ammo, #ammo-separator { font-size: 0.38rem !important; } #reload-status { font-size: 0.36rem !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; } } /* ============================================================================ * ENHANCED GAME HUD SYSTEM FRAGMENT * ============================================================================ * * FRAGMENT PURPOSE: Modern Real-Time Game Information Display * Advanced heads-up display system with enhanced visuals, animations, and * dynamic feedback for immersive gameplay experience. * * FEATURES: * - Modern glass-morphism design with backdrop blur * - Animated health bar with smooth color transitions * - Dynamic visual feedback for critical states * - Pulsing effects and glow animations * - Enhanced typography with better hierarchy * - Responsive design that adapts to different screen sizes * ============================================================================ */ #game-hud { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 12px; font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif; font-size: 14px; color: white; z-index: 100; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); } #game-hud>div { display: flex; align-items: center; justify-content: flex-start; gap: 6px; background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.85) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; text-align: left; } #game-hud>div::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s ease; } #game-hud>div:hover::before { left: 100%; } /* Enhanced Timer */ #timer-container { position: relative; } #timer-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); margin-right: 4px; } #timer-text { font-weight: bold; font-size: 16px; font-family: 'Courier New', monospace; color: #00ff88; text-shadow: 0 0 8px rgba(0, 255, 136, 0.5); transition: all 0.3s ease; } /* Enhanced Score */ #score-container { position: relative; } #score-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); margin-right: 4px; } #score-text { font-weight: bold; font-size: 16px; color: #ffff00; text-shadow: 0 0 8px rgba(255, 255, 0, 0.5); font-family: 'Courier New', monospace; transition: all 0.3s ease; } /* Enhanced Enemy Count */ #enemy-count-container { position: relative; } #enemy-count-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); margin-right: 4px; } #enemy-count-text { font-weight: bold; font-size: 16px; color: #ff4444; text-shadow: 0 0 8px rgba(255, 68, 68, 0.5); font-family: 'Courier New', monospace; transition: all 0.3s ease; } /* Enhanced Ammo Display */ #ammo-container { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 120px; position: relative; } #ammo-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); } #ammo-display { display: flex; align-items: center; font-size: 16px; font-weight: bold; font-family: 'Courier New', monospace; position: relative; } #chamber-ammo { color: #00ff88; text-align: center; text-shadow: 0 0 8px rgba(0, 255, 136, 0.5); transition: all 0.3s ease; position: relative; } #chamber-ammo.empty { color: #ff0000; text-shadow: 0 0 8px rgba(255, 0, 0, 0.5); animation: ammoEmpty 1s infinite; } @keyframes ammoEmpty { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } #ammo-separator { color: rgba(255, 255, 255, 0.6); margin: 0 6px; font-size: 16px; } #reserve-ammo { color: #ffaa00; text-align: center; text-shadow: 0 0 8px rgba(255, 170, 0, 0.5); transition: all 0.3s ease; } #reserve-ammo.empty { color: #ff6666; text-shadow: 0 0 8px rgba(255, 102, 102, 0.5); } #reload-status { color: #ff6600; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-left: 8px; animation: reloadPulse 1s infinite; text-shadow: 0 0 8px rgba(255, 102, 0, 0.5); } @keyframes reloadPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.95); } } .timer-warning #timer-text { color: #ff6600 !important; text-shadow: 0 0 12px rgba(255, 102, 0, 0.7) !important; animation: timerWarning 1.5s infinite; } .timer-critical #timer-text { color: #ff0000 !important; text-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; animation: timerCritical 1s infinite; } @keyframes timerWarning { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes timerCritical { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.1); filter: brightness(1.2); } } /* Score increase animation */ @keyframes scoreIncrease { 0% { transform: scale(1); } 50% { transform: scale(1.2); color: #ffff88; } 100% { transform: scale(1); } } .score-increase { animation: scoreIncrease 0.5s ease-out; } /* ============================================================================ * 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: 20vw; /* Increased base size */ height: 20vw; /* Increased base size */ border-radius: 50%; background: linear-gradient(145deg, rgba(0, 255, 0, 0.15), rgba(0, 200, 0, 0.08)); border: 4px solid rgba(0, 255, 0, 0.4); /* Slightly thicker border */ position: relative; box-shadow: 0 0 30px rgba(0, 255, 0, 0.3), inset 0 0 30px rgba(0, 255, 0, 0.1), 0 10px 20px 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: 7vw; /* Increased knob size */ height: 7vw; /* Increased knob size */ border-radius: 50%; background: radial-gradient(circle at 30% 30%, #00ff88, #00ff00, #00cc00); border: 3px solid #00ff00; /* Slightly thicker border */ 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: 140px; /* Larger size for tablets */ height: 140px; } #joystick-knob { width: 60px; /* Larger knob for tablets */ height: 60px; } #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: 120px; /* Still larger than original for small screens */ height: 120px; } #joystick-knob { width: 50px; /* Proportionally larger knob */ height: 50px; } #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 */ } } /* ============================================================================ * ENHANCED HUD ELEMENTS AND VISUAL FEEDBACK * ============================================================================ */ /* Hit Marker - Shows when player hits an enemy */ #hit-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 300; opacity: 0; transition: opacity 0.1s ease; } #hit-marker.show { opacity: 1; animation: hitMarkerPulse 0.3s ease-out; } @keyframes hitMarkerPulse { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } #hit-marker::before, #hit-marker::after { content: ''; position: absolute; background: #ff0000; box-shadow: 0 0 10px #ff0000; } #hit-marker::before { width: 20px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #hit-marker::after { width: 2px; height: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Headshot Indicator */ #headshot-indicator { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 301; opacity: 0; color: #ffaa00; font-size: 24px; font-weight: bold; text-shadow: 0 0 15px #ffaa00; font-family: 'Courier New', monospace; } #headshot-indicator.show { opacity: 1; animation: headshotPulse 1s ease-out; } @keyframes headshotPulse { 0% { transform: translate(-50%, -50%) scale(0.5) translateY(20px); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.3) translateY(0px); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) translateY(-20px); opacity: 0; } } /* Kill Streak Display */ #kill-streak-display { position: absolute; top: 30%; right: 20px; pointer-events: none; z-index: 200; opacity: 0; color: #ff6600; font-size: 20px; font-weight: bold; text-shadow: 0 0 12px #ff6600; font-family: 'Courier New', monospace; background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(255, 102, 0, 0.1) 100%); padding: 12px 20px; border-radius: 8px; border: 2px solid rgba(255, 102, 0, 0.6); backdrop-filter: blur(8px); text-align: center; } #kill-streak-display.show { opacity: 1; animation: killStreakShow 2s ease-out; } @keyframes killStreakShow { 0% { opacity: 0; transform: translateX(100px) scale(0.5); } 20% { opacity: 1; transform: translateX(0) scale(1.2); } 100% { opacity: 1; transform: translateX(0) scale(1); } } /* Low Ammo Warning */ #low-ammo-warning { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 200; opacity: 0; color: #ff6600; font-size: 16px; font-weight: bold; text-shadow: 0 0 10px #ff6600; font-family: 'Courier New', monospace; background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(255, 102, 0, 0.1) 100%); padding: 10px 20px; border-radius: 8px; border: 1px solid rgba(255, 102, 0, 0.5); backdrop-filter: blur(5px); text-align: center; } #low-ammo-warning.show { opacity: 1; animation: lowAmmoWarning 2s infinite; } @keyframes lowAmmoWarning { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } } /* Mission Progress Bar */ #mission-progress { position: absolute; top: 20px; right: 20px; width: 200px; pointer-events: none; z-index: 150; opacity: 0; transition: opacity 0.3s ease; } #mission-progress.show { opacity: 1; } #mission-progress-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); margin-bottom: 6px; text-align: center; font-family: 'Courier New', monospace; } #mission-progress-bar { width: 100%; height: 20px; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; overflow: hidden; position: relative; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); } #mission-progress-fill { height: 100%; background: linear-gradient(135deg, #0088ff 0%, #0066cc 50%, #004499 100%); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); width: 0%; position: relative; box-shadow: 0 0 10px rgba(0, 136, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } #mission-progress-text { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); color: white; font-family: 'Courier New', monospace; } /* Weapon Status Indicator */ #weapon-status { position: absolute; bottom: 20px; right: 20px; pointer-events: none; z-index: 150; opacity: 0; transition: opacity 0.3s ease; font-family: 'Courier New', monospace; } #weapon-status.show { opacity: 1; } #weapon-name { color: #00ff88; font-size: 14px; font-weight: bold; text-shadow: 0 0 8px rgba(0, 255, 136, 0.5); margin-bottom: 4px; text-align: center; } #weapon-mode { color: #ffaa00; font-size: 12px; font-weight: 600; text-shadow: 0 0 6px rgba(255, 170, 0, 0.5); text-align: center; text-transform: uppercase; letter-spacing: 1px; } /* Enhanced crosshair with dynamic feedback */ #center-crosshair.hit-feedback { animation: crosshairHit 0.2s ease-out; } @keyframes crosshairHit { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.3); } 100% { transform: translate(-50%, -50%) scale(1); } } #center-crosshair.headshot-feedback { animation: crosshairHeadshot 0.3s ease-out; } @keyframes crosshairHeadshot { 0% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); } 50% { transform: translate(-50%, -50%) scale(1.5); filter: drop-shadow(0 0 15px rgba(255, 170, 0, 1)); } 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); } } /* Damage Direction Indicator */ #damage-indicators { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 250; } .damage-indicator { position: absolute; width: 60px; height: 60px; opacity: 0; transition: opacity 0.1s ease; } .damage-indicator.show { opacity: 1; animation: damageIndicatorPulse 0.8s ease-out; } @keyframes damageIndicatorPulse { 0% { opacity: 0; transform: scale(0.5); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1); } } .damage-indicator::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 30px solid #ff0000; transform: translate(-50%, -50%); filter: drop-shadow(0 0 8px #ff0000); } /* Scope Zoom Indicator */ #scope-zoom-indicator { position: absolute; bottom: 50%; right: 20px; pointer-events: none; z-index: 250; opacity: 0; color: #ffffff; font-size: 18px; font-weight: bold; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); font-family: 'Courier New', monospace; background: rgba(0, 0, 0, 0.7); padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); } #scope-zoom-indicator.show { opacity: 1; animation: zoomIndicatorShow 0.3s ease-out; } @keyframes zoomIndicatorShow { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } /* Mobile optimizations for new HUD elements */ @media (max-width: 768px) { #hit-marker::before, #hit-marker::after { background: #ff0000; box-shadow: 0 0 8px #ff0000; } #hit-marker::before { width: 16px; height: 2px; } #hit-marker::after { width: 2px; height: 16px; } #headshot-indicator { font-size: 20px; text-shadow: 0 0 12px #ffaa00; } #kill-streak-display { top: 25%; right: 10px; font-size: 16px; padding: 8px 12px; } #low-ammo-warning { bottom: 80px; font-size: 14px; padding: 8px 16px; } #mission-progress { top: 15px; right: 15px; width: 150px; } #mission-progress-bar { height: 16px; } #weapon-status { bottom: 15px; right: 15px; } #weapon-name { font-size: 12px; } #weapon-mode { font-size: 10px; } .damage-indicator { width: 40px; height: 40px; } .damage-indicator::before { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #ff0000; } #scope-zoom-indicator { bottom: 45%; right: 15px; font-size: 14px; padding: 6px 10px; } } @media (max-width: 480px) { #headshot-indicator { font-size: 18px; } #kill-streak-display { font-size: 14px; padding: 6px 10px; } #low-ammo-warning { bottom: 70px; font-size: 12px; padding: 6px 12px; } #mission-progress { width: 120px; } #mission-progress-bar { height: 14px; } #weapon-name { font-size: 11px; } #weapon-mode { font-size: 9px; } .damage-indicator { width: 32px; height: 32px; } .damage-indicator::before { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #ff0000; } #scope-zoom-indicator { font-size: 12px; padding: 4px 8px; } }