/* ChromeSimon Memory Game - Main CSS Entry Point
 * 
 * This file imports all component CSS files in the correct order
 * to maintain cascading specificity.
 */

/* Base styles and variables */
@import 'components/_base.css';

/* Game board and layout */
@import 'components/_game-board.css';

/* Game controls and buttons */
@import 'components/_game-controls.css';

/* Modal and settings styles */
@import 'components/_modals.css';

/* Animation definitions */
@import 'components/_animations.css';

/* Child lock functionality */
@import 'components/_childlock.css';

/* Responsive media queries */
@import 'components/_responsive.css';

/* Loading State Styles */
.app-loading {
  pointer-events: none;
}

.app-loading .game-container {
  opacity: 0;
  transform: translateY(20px);
}

.app-ready .game-container {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Loading indicator */
.app-loading:after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
  transform: translate(-50%, -50%);
  z-index: 999;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}