/**
 * ==========================================================================
 * UI STYLES - MAIN ENTRY POINT
 * ==========================================================================
 * 
 * Central stylesheet that imports all UI component modules.
 * This is the only file that needs to be linked in HTML.
 * 
 * @description Main CSS orchestrator - imports all UI modules
 * @author VAsteroids Team
 * @version 2.0.0 (Modular Architecture)
 * 
 * ARCHITECTURE:
 *   This file uses native CSS @import to load modular stylesheets.
 *   Each module is self-contained and documented.
 * 
 * MODULES (in load order):
 * 
 *   1. tokens.css        - Design tokens (CSS variables, fonts)
 *   2. animations.css    - Shared @keyframes definitions
 *   3. base.css          - Foundation styles (body, overlays, utilities)
 *   4. hud.css           - In-game HUD components
 *   5. scoreboard.css    - Leaderboard display
 *   6. game-over.css     - Game over panel and score breakdown
 *   7. info-panel.css    - How-to-play overlay
 *   8. fullscreen-button.css - Top-right fullscreen toggle
 *   9. touch-controls.css- Mobile touch input controls
 * 
 * USAGE:
 *   <link rel="stylesheet" href="src/styles/ui.css">
 * 
 * BACKUP:
 *   Original monolithic file preserved at: ui.css.backup
 * 
 * ==========================================================================
 */

/* ==========================================================================
   FOUNDATION
   ========================================================================== */

/**
 * Design Tokens
 * CSS custom properties and @font-face declarations.
 * Must be loaded first - other modules depend on these variables.
 */
@import url('./tokens.css');

/**
 * Animations
 * All shared @keyframes definitions.
 * Loaded early so components can reference animations.
 */
@import url('./animations.css');

/**
 * Base Styles
 * Body, typography, overlays, panels, and utility classes.
 * Core layout foundation for all UI components.
 */
@import url('./base.css');

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/**
 * HUD (Heads-Up Display)
 * In-game interface: score, lives, meters, badges.
 * Active during gameplay.
 */
@import url('./hud.css');

/**
 * Scoreboard
 * Leaderboard display with retro TV effects.
 * Used in intro, game-over, and standalone pages.
 */
@import url('./scoreboard.css');

/**
 * Game Over
 * End-game panel: score breakdown, name entry, rankings.
 * Animated reveal sequence.
 */
@import url('./game-over.css');

/**
 * Info Panel
 * "GAME INFO" how-to-play overlay and its top-left launcher button.
 * Floats above gameplay; the frame loop freezes the sim while it is open.
 */
@import url('./info-panel.css');

/**
 * Fullscreen Button
 * Top-right fullscreen toggle, the info button's mirror image.
 * Created only where the Fullscreen API exists; hidden during a run.
 */
@import url('./fullscreen-button.css');

/**
 * Touch Controls
 * Mobile/tablet input interface.
 * Virtual joystick and fire button.
 * Auto-hidden on desktop devices.
 */
@import url('./touch-controls.css');