.roulette-wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
  background-image: url("../images/SpinWheel/spinerwheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes animateWheelIn {
  from {
    transform: translateX(100vw); /* Start offscreen to the right */
  }
  80% {
    transform: translateX(-10px); /* Slightly overshoot the final position */
  }
  to {
    transform: translateX(0); /* Final position */
  }
}

@keyframes animateWheelOut {
  from {
    transform: translateX(0); /* Start at the final position */
  }
  to {
    transform: translateX(100vw); /* Move offscreen to the right */
  }
}

.wheelIn {
  animation: animateWheelIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.wheelOut {
  animation: animateWheelOut 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.wheelNumOut {
  animation: animateWheelOut 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.wheel {
  background-color: #333;
  border-radius: 50%;
  width: 280px;
  height: 280px;
  background-image: url("../images/SpinWheel/test.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(0deg);
  will-change: transform;
  position: relative;
}

.wheel_background_overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;

  background-color: rgba(0, 0, 0, 0.6);

  /* Size */
  width: 100%;
  height: 100%;

  backdrop-filter: blur(3px);
  z-index: 5;

  overflow: hidden;
}

.ball {
  background-color: rgb(255, 255, 255);
  height: 12px;
  width: 12px;
  border-radius: 50%;
  position: absolute;
  transform: rotate(0deg);
  will-change: transform;
}

.ball-button {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  bottom: 20px;
  background-color: #cba913; /* gold background */
  border: none; /* No borders */
  color: white; /* White text */
  padding: 15px 32px; /* Padding for button */
  text-align: center; /* Center the text */
  text-decoration: none; /* No underline */
  display: inline-block; /* Ensure it doesn't break line */
  font-size: 16px; /* Set font size */
  margin: 4px 2px; /* Margin for a bit of space around the button */
  cursor: pointer; /* Pointer cursor on hover */
  border-radius: 8px; /* Rounded corners for a smooth look */
  box-shadow: 0 4px #999; /* Shadow effect for depth */
  transition: all 0.3s; /* Transition for smooth color change */
}

.ball-button:hover {
  background-color: #d6ba3a; /* Slightly lighter gold background on hover */
}

.ball-button:active {
  background-color: #e5cf6c; /* Even lighter green when active */
  box-shadow: 0 4px #666; /* Smaller shadow for a pressed effect */
  transform: translateY(4px); /* Slight move down to simulate pressing */
}

.landedSym {
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;
  height:150px;
  width: 150px;
}