#floatingbubbles {
    width: 95%;
    height: 95%;
}
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 0px;
    margin: 0;
    background: #ffffff;
    background-image: url('bg.png');
    background-repeat: no-repeat;
    
  }

#timerSelect {
  font-size: 1.0em;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #80ff00;

}

#startButton {
  display: none;
  font-size: 1.0em;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #80ff00;

}

#showMyIncorrectAnswerData {
   display: none;
  font-size: 1.0em;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #ff5c33;

}

#printIncorrectAnswers {
  font-size: 0.8em;
  margin-top: 10px;
  border-radius: 8px;


}
#hideIncorrectAnswers {
  font-size: 0.8em;
  margin-top: 10px;
  border-radius: 8px;

}
#showIncorrectAnswers {
  font-size: 0.8em;
  margin-top: 10px;
  border-radius: 8px;

}

  #score {
    font-size: 1.2em;
    margin-top: 10px;
  }
#popsCount {
    font-size: 1.5em;
    margin-top: 10px;
  }

  #categoryPrompt {
width: 900px; margin: 0 auto; 
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #blue;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 20px;
  }
  #message {
    margin-top: 10px;
    font-size: 1.2em;
    min-height: 1.2em;
    color: #333;
  }
  #timerDisplay {
    font-size: 1.5em;
    margin-top: 15px;
    font-weight: bold;
  }
  #gameControls {
    margin-top: 20px;
  }
  #wordsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    min-height: 100px;
  }
  
.bubble {
  width: 110px;        /* Fixed width */
  height:100px;        /* Fixed height */
  background-color: #87CEFA;
  border-radius: 50px; /* Keep rounded edges */
  cursor: pointer;
  font-size: 1.2em;
  display: flex;       /* Center text */
  align-items: center;
  justify-content: center;
  padding: 0;          /* Remove padding to keep size consistent */
  box-sizing: border-box; /* Ensure borders/padding don't affect size */
  transition: transform 0.2s, background-color 0.2s, opacity 0.5s;
  text-align: center;  /* Center text if multi-line */
}      

  /* Burst animation styles */
  @keyframes burstEffect {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(3);
      opacity: 0;
    }
  }

  .burst {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff, transparent);
    width: 20px;
    height: 20px;
    pointer-events: none; /* allow clicks to pass through */
    animation: burstEffect 1.9s forwards;
    z-index: 9999;
  }

  /* Dissolve effect class for bubbles */
 @keyframes popEffect {
  0% {
    transform: scale(1);
    opacity: 1;
    background-color: #87CEFA; /* original color (sky blue) */
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
    background-color: #ADD8E6; /* light blue for dissolve effect */
  }
  100% {
    transform: scale(0);
    opacity: 0;
    background-color: #ADD8E6; /* keep light blue until fully dissolved */
  }
}

  .pop-animation {
    animation: popEffect 0.6s forwards;
  }

#categoryPerformance {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* Center the items horizontally */
  text-align: center;        /* Center text inside each block */
}
#categoryPerformance > div {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content inside each block */
  
}

#displayStrongestWeakest {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* Center the items horizontally */
  text-align: center;        /* Center text inside each block */
}
#displayStrongestWeakest > div {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content inside each block */
  
}

#closeBtn {

position: fixed; width: 150px; top: 40px; left: 40px; background-color: #007BFF; color: white; border: none; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 20px;
}

#resetBtn {

position: fixed; width: 150px; top: 90px; left: 40px; background-color: #ff9900; color: #000000; border: none; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: bold;
}

#popbubblesBtn {

position: fixed; width: 150px; top: 130px; left: 40px; background-color: #00ff00; color: #000000; border: none; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: bold;
}