/** * @file main.css * @description Main stylesheet entry point for the WordClash web application. This is the file that should be bundled for production. * This file imports all other stylesheets in a structured order, following an ITCSS (Inverted Triangle CSS) inspired * architecture. * * @version 1.1.0 * @date 2025-08-09 * * @section CSS Architecture * * The CSS is organized into three main directories: * * 1. `base/` * - Contains global styles, resets, variables, and utility classes. These * are low-specificity, high-impact rules that form the foundation. * - `_reset.css`: Browser style normalization. * - `_base.css`: Base styles for ``, ``, and layout containers. * - `_variables.css`: Global CSS custom properties (colors, etc.). * - `_utilities.css`: Reusable helper classes (e.g., `.hidden`). * - `_typography.css`: Font imports and typography-related variables. * * 2. `components/` * - Contains styles for reusable UI components that appear across multiple pages. * - `_buttons.css`: Styles for all button variants. * - `_modals.css`: Styles for modal dialogs. * - `_achievements.css`: Styles for the recent achievements component. * - `_footer.css`: Styles for the site-wide footer. * * 3. `pages/` * - Contains high-specificity styles for individual pages or views. * - `_index.css`: Homepage styles. * - `_play.css`: "Create/Join Game" page styles. * - `_setup.css`: Game setup form styles. * - `_join.css`: Game lobby styles. * - `_game.css`: Main game screen styles. * - `_leaderboard.css`: Leaderboard page styles. * - `_profile.css`: User profile page styles. * - `_static_pages.css`: Styles for static content pages (How to Play, etc.). * - `_game_over.css`: Game over page styles. */ @import url('base/_variables.css'); @import url('base/_typography.css'); @import url('base/_reset.css'); @import url('base/_base.css'); @import url('base/_utilities.css'); @import url('components/_buttons.css'); @import url('components/_modals.css'); @import url('components/_achievements.css'); @import url('components/_footer.css'); @import url('pages/_index.css'); @import url('pages/_play.css'); @import url('pages/_setup.css'); @import url('pages/_join.css'); @import url('pages/_game.css'); @import url('pages/_leaderboard.css'); @import url('pages/_profile.css'); @import url('pages/_static_pages.css'); @import url('pages/_game_over.css');