/* CSS Variables for consistent theming */
:root {
  --primary-color: #7928ca;
  --secondary-color: #ff0080;
  --accent-color: #00d4ff;
  --background-dark: #120e29;
  --text-light: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.7);

  /* Power-up colors */
  --slow-color: #3694ff;
  --shrink-color: #ffd600;
  --shield-color: #bd4bf2;
  --freeze-color: #00e9cc;

  /* UI elements */
  --panel-bg: rgba(30, 20, 70, 0.85);
  --button-bg: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  --button-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  --container-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  /* Game elements */
  --ball-glow: 0 0 20px rgba(255, 255, 255, 0.5);
  --player-glow: 0 0 15px rgba(255, 255, 255, 0.4);

  /* Sizes for responsive design */
  --ball-size: 44px;
  --powerup-size: 56px;
  --indicator-base-size: 30px;

  /* Safe area for mobile */
  --safe-area-bottom: 0px;
}

/* Base Reset & Font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%; /* Ensure full height for percentage calculations */
  width: 100%; /* Ensure full width */
  overflow: hidden; /* Prevent scrolling */
}

body {
  font-family: "Quicksand", sans-serif;
  overflow: hidden; /* Keep body overflow hidden */
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-45deg, #240037, #3b0064, #0f004c, #190060);
  background-size: 400% 400%;
  animation: gradientBG 20s ease infinite;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--text-light);
}

/* Enhanced background animation */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Background particles container */
#stars-container {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  opacity: 0.7;
}

/* Star particles */
.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: var(--brightness);
    transform: translateY(-2px);
  }
}

#game-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
  padding-bottom: var(--safe-area-bottom, 0px);
}

/* Enhanced Ball Styling */
#ball {
  position: absolute;
  width: var(--ball-size);
  height: var(--ball-size);
  background: radial-gradient(circle at 30% 30%, #fff, #eef);
  border-radius: 50%;
  box-shadow: var(--ball-glow), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.05s linear;
  will-change: transform, width, height;
  z-index: 3;
  transform-origin: center center;
  bottom: auto !important;
  right: auto !important;
}

/* Improved ball eyes animation */
#ball svg {
  width: 70%;
  height: 70%;
  display: block;
  transition: transform 0.2s ease;
}
#ball.moving svg {
  animation: eyeMovement 0.6s ease-in-out infinite alternate;
}

@keyframes eyeMovement {
  0% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(1px);
  }
}

/* Enhanced Player Touch Indicator */
#player-indicator {
  position: absolute;
  width: var(--indicator-base-size);
  height: var(--indicator-base-size);
  background: radial-gradient(
    circle at 40% 40%,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.4)
  );
  border-radius: 50%;
  pointer-events: none;
  display: none;
  transform: translate(-50%, -50%);
  box-shadow: var(--player-glow);
  z-index: 5;
  opacity: 0;
}

#player-indicator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  animation: pulseRing 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulseRing {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0.6;
  }
  100% {
    width: 150%;
    height: 150%;
    opacity: 0;
  }
}

#player-indicator.shielded {
  background: radial-gradient(
    circle at 40% 40%,
    rgba(189, 75, 242, 0.9),
    rgba(189, 75, 242, 0.5)
  );
  box-shadow: 0 0 15px var(--shield-color);
}

#player-indicator.shielded::before {
  border-color: rgba(189, 75, 242, 0.6);
}

#player-indicator.frozen {
  background: radial-gradient(
    circle at 40% 40%,
    rgba(180, 240, 240, 0.9),
    rgba(180, 240, 240, 0.5)
  );
  box-shadow: 0 0 15px rgba(100, 200, 255, 0.7);
}

#player-indicator.frozen::before {
  border-color: rgba(100, 200, 255, 0.6);
}

/* New camping warning effect */
@keyframes campingWarningPulse {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(255, 60, 60, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 60, 60, 0.8);
  }
}

#player-indicator.camping-warning {
  animation: campingWarningPulse 0.8s infinite;
}

/* Enhanced Power-up Styling */
.power-up {
  position: absolute;
  width: var(--powerup-size);
  height: var(--powerup-size);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.5s ease-out,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
  animation: floatEffect 3s infinite ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.power-up::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.power-up[data-type="slow"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2s10 4.48 10 10z'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.power-up[data-type="shrink"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 21'/%3E%3Cpath d='M21 13V3h-10'/%3E%3Cpath d='M3 11V21h10'/%3E%3C/svg%3E");
}

.power-up[data-type="shield"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.power-up[data-type="freeze"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 5l-5-3-5 3M17 19l-5 3-5-3M19 12H5M19.324 9.5a8.982 8.982 0 0 0-4.32-5.889M4.676 14.5a8.983 8.983 0 0 0 4.32 5.889'/%3E%3C/svg%3E");
}

.power-up[data-type="slow"] {
  background: linear-gradient(145deg, #1a82ff, #0a5ad1);
  border: 2px solid var(--slow-color);
}

.power-up[data-type="shrink"] {
  background: linear-gradient(145deg, #ffd700, #d6b100);
  border: 2px solid var(--shrink-color);
}

.power-up[data-type="shield"] {
  background: linear-gradient(145deg, #cc6eff, #a030e8);
  border: 2px solid var(--shield-color);
}

.power-up[data-type="freeze"] {
  background: linear-gradient(145deg, #20e0d0, #00c2b2);
  border: 2px solid var(--freeze-color);
}

@keyframes floatEffect {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(2deg);
  }
}

/* UI Elements Container (Top) */
#top-ui-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
  pointer-events: none;
}

/* Timer Styling (Center Top) */
#timer-container {
  flex-basis: 33%;
  display: flex;
  justify-content: center;
}

#timer {
  font-size: 2.5em;
  color: white;
  font-family: "Bungee", cursive;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease;
}

/* Timer pulse animation on score change */
#timer.pulse {
  animation: scorePulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scorePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Effect Timer Bar Styling (Below Timer) */
#effect-timer-container {
  position: absolute;
  top: calc(1rem + 3em);
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 300px;
  z-index: 10;
  pointer-events: none;
}

#effect-timer-bar {
  width: 100%;
  height: 10px;
  background-color: rgba(10, 5, 30, 0.6);
  border-radius: 10px;
  overflow: hidden;
  display: none;
  transition: opacity 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#effect-timer-progress {
  height: 100%;
  width: 100%;
  background-color: #4caf50;
  border-radius: 10px;
  transition: width 0.1s linear;
  position: relative;
  overflow: hidden;
}

#effect-timer-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Stats Container (Top Right) */
#stats-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
  flex-basis: 33%;
  padding-right: 1rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--panel-bg);
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  font-size: 0.95em;
  font-weight: 600;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.stat-item img {
  width: 1.2em;
  height: 1.2em;
  filter: invert(1) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
}

/* Enhanced Insult Text Styling */
#insult-text {
  position: absolute;
  font-family: "Bangers", cursive;
  letter-spacing: 1px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 20px;
  text-align: center;
  z-index: 6;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out,
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  will-change: transform, opacity;
  text-shadow: 2px 2px 0 #ff0080, -2px -2px 0 #7928ca, 0px 0px 8px #000;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

#insult-text.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* --- Enhanced Overlay Styles --- */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(30, 15, 60, 0.9) 0%,
    rgba(5, 0, 20, 0.95) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  z-index: 20;
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.overlay.active {
  opacity: 1;
}

.overlay h1 {
  font-family: "Bungee", cursive;
  font-size: 3.8em;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 15px var(--primary-color);
  line-height: 1;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleGlow 2s infinite alternate;
}

@keyframes titleGlow {
  0% {
    text-shadow: 0 0 10px rgba(121, 40, 202, 0.5);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 0, 128, 0.8);
  }
}

.overlay h2 {
  font-family: "Bungee", cursive;
  font-size: 2.2em;
  margin-bottom: 20px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(var(--primary-color), 0.5);
  line-height: 1;
  background: linear-gradient(
    to right,
    var(--accent-color),
    var(--secondary-color)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.overlay p {
  font-size: 1.2em;
  margin-bottom: 15px;
  max-width: 90%;
  line-height: 1.4;
}

.overlay p.instructions {
  margin: 5px 0 30px;
  font-size: 1.3em;
  color: var(--text-dim);
  max-width: 80%;
  line-height: 1.5;
}

/* Score/Orb Display Styles within Overlays */
.score-display-overlay {
  margin-top: 20px;
  font-size: 1.1em;
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.score-display-overlay span {
  background-color: rgba(30, 15, 60, 0.5);
  padding: 8px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

/* Enhanced Button Styles */
.button-group {
  margin-top: 30px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.overlay button,
.upgrade-item button {
  padding: 14px 28px;
  font-size: 1.1em;
  color: white;
  background: var(--button-bg);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--button-shadow);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.2s ease, background-position 0.3s ease;
  font-family: "Bungee", cursive;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  background-size: 200% 200%;
  background-position: 0% 0%;
}

.overlay button::after,
.upgrade-item button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.overlay button:hover,
.upgrade-item button:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  background-position: 100% 100%;
}

.overlay button:hover::after,
.upgrade-item button:hover:not(:disabled)::after {
  opacity: 1;
}

.overlay button:active,
.upgrade-item button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.upgrade-item button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: linear-gradient(135deg, #666, #444);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#start-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 1;
  padding: 20px;
}

#start-screen .start-content {
  width: 100%;
  display: block; /* Change to block instead of flex to avoid nested flex issues */
  text-align: center;
  animation: fadeIn 1s ease-out;
}

#start-screen h1 {
  font-family: "Bungee", cursive;
  font-size: 3.8em;
  margin-bottom: 30px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 15px var(--primary-color);
  line-height: 1;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleGlow 2s infinite alternate;
  text-align: center;
  width: 100%;
}

#start-screen p.instructions {
  font-size: 1.3em;
  color: var(--text-dim);
  margin: 0 auto 30px;
  text-align: center;
  width: 100%;
  max-width: 320px; /* Control the width explicitly */
  line-height: 1.5;
  padding: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#countdown-display {
  font-size: 8em;
  font-weight: bold;
  text-shadow: 0 0 20px rgba(var(--primary-color), 0.8);
  display: none;
  font-family: "Bungee", cursive;
  animation: countdownPulse 1s ease-out;
  text-align: center;
}

@keyframes countdownPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#game-over-screen {
  display: none;
}

/* --- Enhanced Upgrade Screen Styles --- */
#upgrade-screen {
  display: none;
  z-index: 25;
  height: 100vh; /* Use viewport height directly */
  flex-direction: column; /* Stack items vertically */
  justify-content: flex-start;
  align-items: center;
  padding: 3rem 1rem; /* Adjust padding */
  box-sizing: border-box; /* Include padding in height */
  pointer-events: none; /* Disable pointer events on the container */
}

#upgrade-screen.active {
  display: flex;
}

#upgrade-orb-display {
  font-size: 1.6em;
  margin-bottom: 25px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  padding: 12px 25px;
  border-radius: 15px;
  font-family: "Bungee", cursive;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--accent-color);
  text-align: center;
  width: auto;
  display: inline-block;
}

#upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 550px;
  flex-grow: 1; /* Allow list to take available space */
  overflow-y: auto; /* Enable scrolling for the list */
  -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
  min-height: 0; /* Prevent list from expanding container */
  padding-bottom: 20px; /* Add space before back button */
  pointer-events: auto; /* Explicitly enable pointer events for scrolling */
}

.upgrade-item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  padding: 20px;
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upgrade-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.upgrade-info {
  text-align: left;
  flex-grow: 1;
  flex-basis: 60%;
}

.upgrade-info h3 {
  font-family: "Bungee", cursive;
  margin-bottom: 5px;
  font-size: 1.3em;
  color: var(--accent-color);
}

.upgrade-info p {
  font-size: 0.95em;
  margin-bottom: 8px;
  color: var(--text-dim);
  line-height: 1.4;
}

.upgrade-level,
.upgrade-cost {
  font-size: 0.95em;
  font-weight: bold;
}

.upgrade-level {
  color: var(--text-light);
  background-color: rgba(0, 0, 0, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

.upgrade-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-basis: 30%;
}

.upgrade-cost {
  color: var(--shrink-color);
  margin-bottom: 8px;
  display: block;
  text-align: center;
}

.upgrade-item button {
  padding: 10px 18px;
  font-size: 1em;
  min-width: 90px;
}

#back-button {
  margin-top: 20px; /* Add space above back button */
  font-size: 1.1em;
  pointer-events: auto; /* Explicitly enable pointer events for the button */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .overlay h1 {
    font-size: 3em;
  }

  .overlay h2 {
    font-size: 1.8em;
  }

  #timer {
    font-size: 2.2em;
  }

  .upgrade-item {
    padding: 15px;
  }

  .upgrade-info h3 {
    font-size: 1.2em;
  }

  .button-group {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .overlay h1 {
    font-size: 2.5em;
  }

  .overlay h2 {
    font-size: 1.5em;
  }

  #timer {
    font-size: 2em;
  }

  #countdown-display {
    font-size: 6em;
  }

  .overlay button,
  .upgrade-item button {
    padding: 12px 20px;
    font-size: 1em;
  }

  .upgrade-orb-display {
    font-size: 1.4em;
  }

  .stat-item {
    padding: 0.4rem 0.6rem;
    font-size: 0.9em;
  }

  :root {
    --ball-size: 40px;
    --powerup-size: 50px;
  }
}

/* Additional aesthetic animations */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
}

/* Screen shake animation */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

/* Style for the new START button */
#start-game-button {
  /* Inherit base button styles */
  padding: 18px 40px; /* Larger padding */
  font-size: 1.5em; /* Larger font */
  color: white;
  background: var(--button-bg);
  border: none;
  border-radius: 15px; /* Slightly larger radius */
  cursor: pointer;
  box-shadow: var(--button-shadow);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.2s ease, background-position 0.3s ease;
  font-family: "Bungee", cursive;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  background-size: 200% 200%;
  background-position: 0% 0%;
  margin-top: 20px; /* Add some space above */
  display: inline-block; /* Center using text-align on parent */
}

#start-game-button::after {
  /* Inherit pseudo-element styles */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#start-game-button:hover {
  /* Inherit hover styles */
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  background-position: 100% 100%;
}

#start-game-button:hover::after {
  /* Inherit hover pseudo-element styles */
  opacity: 1;
}

#start-game-button:active {
  /* Inherit active styles */
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}