/* General Body Styling */
body {
  margin: 0;
  overflow: hidden;
  background: black; /* Black background */
  color: white;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Full screen height */
}

/* Game Container */
#gameContainer {
  position: absolute; 
  top: 0; left: 0;
  width: 100vw; 
  height: 100vh;
}

/* Main Menu - Centered */
#startMenu {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
}

/* Paddle */
#paddle {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 20px;
  background: cyan;
  border-radius: 10px;
}

/* Ball */
.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
}

/* Controls */
#leftButton, #rightButton {
  position: fixed;
  bottom: 20px;
  padding: 10px 20px;
  font-size: 18px;
}

/* Left and Right Button Position */
#leftButton {
  left: 20px;
}
#rightButton {
  right: 20px;
}

/* Score, Combo, High Score (No Overlap) */
#score, #combo, #highScore {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 24px;
  line-height: 1.5; /* Prevents overlap */
}

/* Ensure proper spacing */
#combo {
  top: 60px; /* Moves combo below score */
}

#highScore {
  top: 100px; /* Moves high score below combo */
}
/* Paddle Glow Colors */
.glow-default {
  box-shadow: 0 0 15px cyan;
}

.glow-green {
  box-shadow: 0 0 20px lime;
}

.glow-yellow {
  box-shadow: 0 0 20px yellow;
}

.glow-purple {
  box-shadow: 0 0 20px purple;
}

.glow-red {
  box-shadow: 0 0 25px red;
}