/* style.css - Styles for the Breakout game
This file uses CSS custom properties (variables) that are dynamically set from
GAME_CONFIG.colors and GAME_CONFIG.styles in script.js. This allows for complete
theming and styling customization without modifying CSS.

Key features:
- Responsive design with CSS variables for colors and dimensions
- Gradient backgrounds that fall back to solid colors from config
- Modal animations for rules and game over screens
- Centered layout for all game states
- Button hover effects and active states
- Canvas styling with configurable border radius and max width

To modify styling, update GAME_CONFIG in gameConfig.js rather than this file.
The actual styling values are applied via script.js using document.documentElement.style.setProperty().
*/
:root { /* CSS custom properties (variables) - overridden by JavaScript from GAME_CONFIG */
  --background-color: #7f7fd5; /* Default background color */
  --background-secondary-color: #91eae4; /* Default secondary background color */
  --canvas-color: #f0f0f0; /* Default canvas background color */
  --text-color: rgba(255, 255, 255, 0.87); /* Default text color */
  --sidebar-color: #343457; /* Default sidebar/modal color */
  --button-color: #86a8e7; /* Default button color */
  --hover-color: #7db3e3; /* Default button hover color */
}

* { /* Global reset - apply border-box to all elements */
  box-sizing: border-box;
}

body {
  font-family: var(--main-font); /* Main font from GAME_CONFIG.fonts.main */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.menu { /* Main menu screen styling */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.game-over { /* Game over screen styling - hidden by default */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1, h2 { /* Heading styles for menu and game over screens */
  font-size: 2.75rem;
  color: var(--text-color); /* Text color from GAME_CONFIG.colors.text */
  margin-bottom: 2rem;
}

canvas {
  background-color: var(--canvas-color); /* Canvas background from GAME_CONFIG.colors.canvas */
  display: none; /* Hidden initially, shown when game starts */
  border-radius: var(--border-radius); /* Rounded corners from config */
  max-width: var(--canvas-max-width); /* Responsive max width from config */
}

.countdown { /* Countdown overlay styling - centered on canvas */
  display: none; /* Hidden by default, shown during countdown */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-color); /* Text color from config */
  font-weight: bold;
  z-index: 10; /* Above canvas */
}

.btn {
  cursor: pointer;
  border: 0;
  padding: 0.625rem 1.25rem; /* Button padding */
  background-color: var(--button-color); /* Button color from GAME_CONFIG.colors.button */
  color: var(--text-color); /* Text color from GAME_CONFIG.colors.text */
  border-radius: var(--border-radius); /* Border radius from GAME_CONFIG.styles.borderRadius */
  font-family: inherit;
  font-size: 1rem;
}

.btn:focus { /* Remove default focus outline */
  outline: 0;
}

.btn:hover { /* Button hover effect */
  background-color: var(--hover-color); /* Hover color from GAME_CONFIG.colors.hover */
}

.btn:active { /* Button press effect */
  transform: scale(0.98); /* Slight scale down on click */
}

.start-btn, .restart-btn { /* Add spacing between start/restart and other buttons */
  margin-bottom: 1rem;
}

.rules { /* Rules modal - slides in from left */
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--sidebar-color); /* Background from GAME_CONFIG.colors.sidebar */
  color: var(--text-color); /* Text color from config */
  min-height: 100vh;
  width: 400px;
  padding: 3rem;
  line-height: 1.5;
  transform: translateX(-400px); /* Hidden off-screen to the left */
  transition: transform 1s ease-in-out; /* Smooth slide animation */
}

.rules.show { /* Rules modal visible state */
  transform: translateX(0); /* Slide in to show */
}