style.css

@import url('src/styles/mobile.css');
/*
  Main Stylesheet Entry Point for HexLife Explorer
  This file uses @import to load modularized CSS files in the correct order.
  Order is critical: globals first, then layout, then specific components.
*/

/* 1. Global Styles */
@import url('src/styles/global.css');

/* 2. Main Layout */
@import url('src/styles/layout.css');
@import url('src/styles/loader.css');

/* 3. Core UI Element Areas */
@import url('src/ui/TopInfoBar.css');
@import url('src/ui/Toolbar.css');
@import url('src/ui/Onboarding.css');

/* 4. Reusable UI Components */
@import url('src/ui/components/SliderComponent.css');
@import url('src/ui/components/SwitchComponent.css');
@import url('src/ui/components/ControlsComponent.css');
@import url('src/ui/components/DraggablePanel.css');
@import url('src/ui/components/PopoutPanel.css');
@import url('src/ui/components/BottomSheet.css');
@import url('src/ui/components/LearningComponent.css');
@import url('src/ui/components/RulesetActionsComponent.css');
@import url('src/ui/components/ChromaLabComponent.css');
@import url('src/ui/components/SaveRulesetModal.css');
@import url('src/ui/components/InitialStateConfigModal.css');
@import url('src/ui/components/ActionsPopover.css');
@import url('src/styles/Toast.css');

/* 5. Feature-Specific Panel Components */
@import url('src/ui/components/RulesetEditor.css');
@import url('src/ui/components/WorldSetupComponent.css');
@import url('src/ui/components/AnalysisComponent.css');
@import url('src/ui/components/RuleRankPanel.css');
@import url('src/ui/components/Settings.css');
@import url('src/ui/RulesetVisualizer.css');
@import url('src/ui/components/ToolsBottomSheet.css');
@import url('src/ui/components/KeyboardShortcutsComponent.css');

/* 6. Mobile-Specific Full-Screen Views */
@import url('src/ui/views/MobileViews.css'); /* A general style for all mobile views */

@import url('src/ui/views/MoreView.css');