@media (max-width: 1100px) {
    #container {
        flex-direction: column;
        gap: 20px; /* Espaço entre o globo e a lista de bolas */
    }
    
    #ballContainer {
        margin-right: 0; /* Remove a margem lateral no mobile */
    }
}

body {
  background: #555;
  height: 100vh;
  overflow: hidden;
  margin-top: 10px;
}

@keyframes marquee-infinite {
    0% { left: 100%; }
    100% { left: -50%; }
}

#winnersContainer {
    color: white;
    font-size: larger;
    font-weight: bold;
    overflow: hidden;
}

#winners {
    position: relative;
    animation: marquee-infinite 20s linear infinite;
}

#container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    transform-origin: top center;
}
#ballContainer {
    position: relative;
    width: 500px;
    height: 500px;
    border: 2px solid white;
    border-radius: 50%; /* Torna o container um círculo */
    margin-right: 50px;
    overflow: hidden;
    background: #333;
}

.sphere {
    transform-style: preserve-3d;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 14%;
    border-radius: 50%;
    background: radial-gradient(circle farthest-corner at 33% 33%, #ccb 0%, var(--color) 80%);
}

.sphereAnimation {
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    top: 0;
    left: 0;
}

.number {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    backface-visibility: hidden;

    transform: translateZ(29px);
}

.numberBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(210deg) rotateY(24deg) translate3d(-5px, 8px, 10px)
}

.numberBg::before {
    content: "";
    transform: translateZ(-46.8px) rotateZ(36deg) translateY(-7.65px) rotateX(143deg); /* Multiplicado por 1.5 */
    position: absolute;
    width: 45px; /* Alterado de 30px para 45px */
    height: 45px; /* Alterado de 30px para 45px */
    background: radial-gradient(circle at 50% 50%, rgb(0 0 0), rgb(0 0 0) 48%, red 49%, red 50%, transparent 51%);
    transform-style: preserve-3d;
    transform-origin: 50% 0;
    top: 50%;
    left: 7.5px; /* Alterado de 15px para 7.5px (15/1.5 = 10, mas ajustei para 7.5) */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#drawnBalls {
    position: relative;
    width: 655px;
    height: 470px;
    background-color: #5484ad;
    border-radius: 3%;
}