html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

/* Gradient background with vertical line overlay */
.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Two background layers:
     - The first layer is the vertical lines overlay (SVG).
     - The second layer is the animated gradient.
  */
  background-image: 
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cline%20x1='10'%20y1='10'%20x2='10'%20y2='15'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='20'%20y1='5'%20x2='20'%20y2='10'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='30'%20y1='40'%20x2='30'%20y2='45'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='40'%20y1='25'%20x2='40'%20y2='30'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='50'%20y1='60'%20x2='50'%20y2='65'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='60'%20y1='20'%20x2='60'%20y2='27'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='70'%20y1='50'%20x2='70'%20y2='55'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='80'%20y1='15'%20x2='80'%20y2='20'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='90'%20y1='70'%20x2='90'%20y2='75'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='5'%20y1='80'%20x2='5'%20y2='85'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='15'%20y1='30'%20x2='15'%20y2='35'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='25'%20y1='60'%20x2='25'%20y2='65'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='35'%20y1='10'%20x2='35'%20y2='15'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='45'%20y1='50'%20x2='45'%20y2='55'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='55'%20y1='20'%20x2='55'%20y2='25'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='65'%20y1='80'%20x2='65'%20y2='85'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='75'%20y1='40'%20x2='75'%20y2='45'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='85'%20y1='5'%20x2='85'%20y2='10'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='95'%20y1='35'%20x2='95'%20y2='40'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3Cline%20x1='50'%20y1='5'%20x2='50'%20y2='10'%20stroke='rgba(0,0,0,0.2)'%20stroke-width='0.2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #0D47A1 0%, #1565C0 25%, #1E88E5 50%, #42A5F5 75%, #8BC34A 100%);
  background-size: cover, 200% 200%;
  background-position: center, 0 0;
  animation: gradientAnimation 10s linear infinite;
}

@keyframes gradientAnimation {
  0% { background-position: center, 0% 50%; }
  50% { background-position: center, 100% 50%; }
  100% { background-position: center, 0% 50%; }
}

.canvasContainer {
  margin: 0 auto;
  text-align: center;
  position: relative;
  font-size: 10px;
  background: transparent;
}

.canvasContainer canvas {
  border: 0.5px solid #DDD;
  background: transparent !important;
}

/* Score element fixed and visible */
.score {
  position: fixed !important;
  top: 5px !important;
  right: 5px !important;
  transform: none !important;
  z-index: 9999 !important;
  font-weight: bold !important;
  font-size: 20px !important;
  color: #000 !important;
  padding: 5px !important;
}


.gameEnd,
.gameStart {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 0;
  width: 100%;
  font-size: 1.5rem;
  text-shadow: -1px -1px #FFF;
}

.canvasContainer button {
  background-color: #ff4081;
  border: none;
  color: #fff;
  padding: 10px 15px;
  margin-top: 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.canvasContainer button:hover {
  background-color: #e73370;
}

.none {
  display: none;
}