ok

src/components/RouletteWheel.css

@@ -6,83 +6,89 @@ img {
 } */
 
 .roulette-wheel-container {
-    position: fixed;
-    left: 50%;
-    /* Center the container horizontally */
-    top: 30%;
-    transform: translate(-40%, 20%);
-    scale: 3;
-    max-width: 100vw;
-    /* Limit container width to viewport width */
-    max-height: 100vh;
-    /* Limit container height to viewport height */
-    overflow: hidden;
-    /* Hide overflowing content */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    -webkit-user-select: none;
-    /* Safari */
-    -ms-user-select: none;
-    /* IE 10 and IE 11 */
-    user-select: none;
-    /* Standard syntax */
+  position: fixed;
+  left: 50%;
+  /* Center the container horizontally */
+  top: 30%;
+  transform: translate(-40%, 20%);
+  scale: 3;
+  max-width: 100vw;
+  /* Limit container width to viewport width */
+  max-height: 100vh;
+  /* Limit container height to viewport height */
+  overflow: hidden;
+  /* Hide overflowing content */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  -webkit-user-select: none;
+  /* Safari */
+  -ms-user-select: none;
+  /* IE 10 and IE 11 */
+  user-select: none;
+  /* Standard syntax */
 }
 
 .roulette-wheel {
-    width: 300px;
-    height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: auto;
-    border-radius: 50%;
-    transition: transform 0.2s ease-out;
+  width: 300px;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  border-radius: 50%;
+  transition: transform 0.2s ease-out;
 }
 
 .roulette-image {
-    width: 200px;
-    height: 200px;
-    user-select: none;
-    /* Prevents the image from being selected */
-    pointer-events: none;
+  width: 200px;
+  height: 200px;
+  user-select: none;
+  /* Prevents the image from being selected */
+  pointer-events: none;
 }
 
 .roulette-input {
-    position: absolute;
-    width: 30%;
-    /* Increase size for better visibility */
-    height: auto;
-    /* Increase size for better visibility */
-    border: none;
-    /* Remove border for simplicity */
-    border-radius: 5px;
-    /* Add border radius for rounded corners */
-    color: rgb(2, 2, 2);
-    /* Text color */
-    font-size: 16px;
-    /* Font size */
-    border: 2px solid #ccc;
+  position: absolute;
+  width: 30%;
+  /* Increase size for better visibility */
+  height: auto;
+  /* Increase size for better visibility */
+  border: none;
+  /* Remove border for simplicity */
+  border-radius: 5px;
+  /* Add border radius for rounded corners */
+  color: rgb(2, 2, 2);
+  /* Text color */
+  font-size: 16px;
+  /* Font size */
+  border: 2px solid #ccc;
 }
 
 .roulette-button {
-    z-index: 100;
-    position: absolute;
-    width: 30%;
-    /* Increase size for better visibility */
-    height: auto;
-    /* Increase size for better visibility */
-    border: none;
-    /* Remove border for simplicity */
-    border-radius: 5px;
-    /* Add border radius for rounded corners */
-    color: rgb(2, 2, 2);
-    /* Text color */
-    font-size: 16px;
-    /* Font size */
-    border: 2px solid #ccc;
+  z-index: 100;
+  position: absolute;
+  width: 30%;
+  height: auto;
+  border: none;
+  border-radius: 5px;
+  color: rgb(2, 2, 2);
+  font-size: 16px;
+  border: 2px solid #ccc;
+  background-color: #fff;
 }
+
+.roulette-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.roulette-button.error {
+  background-color: red; /* Change button color on error */
+  transition: background-color 0.5s ease-in-out;
+}
+
 .hidden {
-    display: none;
-}
+  display: none;
+}