.ruleta-contenedor 
{
  position: relative;
  margin: 40px auto;
  width: 350px;
  height: 350px;
}

.ruleta 
{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid #333;
  background: conic-gradient(
    green 0deg 9.73deg,
    red 9.73deg 19.46deg,
    black 19.46deg 29.19deg,
    red 29.19deg 38.92deg,
    black 38.92deg 48.65deg,
    red 48.65deg 58.38deg,
    black 58.38deg 68.11deg,
    red 68.11deg 77.84deg,
    black 77.84deg 87.57deg,
    red 87.57deg 97.3deg,
    black 97.3deg 107.03deg,
    red 107.03deg 116.76deg,
    black 116.76deg 126.49deg,
    red 126.49deg 136.22deg,
    black 136.22deg 145.95deg,
    red 145.95deg 155.68deg,
    black 155.68deg 165.41deg,
    red 165.41deg 175.14deg,
    black 175.14deg 184.87deg,
    red 184.87deg 194.6deg,
    black 194.6deg 204.33deg,
    red 204.33deg 214.06deg,
    black 214.06deg 223.79deg,
    red 223.79deg 233.52deg,
    black 233.52deg 243.25deg,
    red 243.25deg 252.98deg,
    black 252.98deg 262.71deg,
    red 262.71deg 272.44deg,
    black 272.44deg 282.17deg,
    red 282.17deg 291.9deg,
    black 291.9deg 301.63deg,
    red 301.63deg 311.36deg,
    black 311.36deg 321.09deg,
    red 321.09deg 330.82deg,
    black 330.82deg 340.55deg,
    red 340.55deg 350.28deg,
    black 350.28deg 360deg
  );
  transition: transform 3s ease-out;
}

.numeros span
{
  position: absolute;
  color: white;
  font-size: 13px;
  font-weight: bold;
  transform-origin: 50% 0; 
  transform: rotate(calc(9.73deg * var(--i) + 5deg)) translateY(-165px) rotate(calc(-9.73deg * var(--i) - 5deg));
}

.pelota 
{
  position: absolute;
  top: 5px;
  left: 50%;
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px white;
  z-index: 10;
}