.bgwheel {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.bgwheel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/backgroundbody.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.1;
}

.wheel {
    width: 450px;
    height: 450px;
    border-radius: 50%;
    position: relative;
    border: 25px solid #211f18;
    background: conic-gradient(
        #211f18 0deg 40deg,
        #f7d5a5 40deg 80deg,
        #f35700 80deg 120deg,
        #211f18 120deg 160deg,
        #f7d5a5 160deg 200deg,
        #f35700 200deg 240deg,
        #211f18 240deg 280deg,
        #f7d5a5 280deg 320deg,
        #f35700 320deg 360deg
    );
    transition: transform 4s ease-out;
    z-index: 1;
}

.wheel::before,
.wheel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.wheel::before {
    top: -31px;
    left: -31px;
    width: calc(100% + 62px);
    height: calc(100% + 62px);
    border-radius: 50%;
    border: 6px solid #fdbf5a;
    box-sizing: border-box;
    z-index: -1;
}
.wheel::after {
    top: 0;
    left: 0;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    border: 6px solid #b02800;
    box-shadow: 0 8px 15px rgba(0, 23, 4, 0.6);
}

.glow-dot {
    position: absolute;
    top: 48%;
    left: 49%;
    width: 12px;
    height: 12px;
    background: #fde27f;
    border: 1px solid #e54e01;
    border-radius: 50%;
    transform: rotate(calc(var(--i) * 22.5deg)) translate(212.5px) rotate(calc(var(--i) * -22.5deg));
    z-index: 2;
    animation: blink 1s infinite ease-in-out;
}

.glow-dot:nth-child(2) {
    animation-delay: 0.1s;
}

.glow-dot:nth-child(3) {
    animation-delay: 0.2s;
}

.glow-dot:nth-child(4) {
    animation-delay: 0.3s;
}

.glow-dot:nth-child(5) {
    animation-delay: 0.4s;
}

.glow-dot:nth-child(6) {
    animation-delay: 0.5s;
}

.glow-dot:nth-child(7) {
    animation-delay: 0.6s;
}

.glow-dot:nth-child(8) {
    animation-delay: 0.7s;
}

.glow-dot:nth-child(9) {
    animation-delay: 0.8s;
}

.glow-dot:nth-child(10) {
    animation-delay: 0.9s;
}

.glow-dot:nth-child(11) {
    animation-delay: 1s;
}

.glow-dot:nth-child(12) {
    animation-delay: 1.1s;
}

.glow-dot:nth-child(13) {
    animation-delay: 1.2s;
}

.glow-dot:nth-child(14) {
    animation-delay: 1.3s;
}

.glow-dot:nth-child(15) {
    animation-delay: 1.4s;
}

.glow-dot:nth-child(16) {
    animation-delay: 1.5s;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.wheel span {
    position: absolute;
    color: white;
    font-size: 15px;
    font-weight: bold;
    transform-origin: center;
}

.pointer {
    width: 80px;
    height: 80px;
    background-image: url("../images/pointer2.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

@keyframes pointerShake {
    0% {
        transform: translateX(-50%);
    }

    25% {
        transform: translateX(-50%) rotate(6deg);
    }

    50% {
        transform: translateX(-50%) rotate(10deg);
    }

    75% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.pointer.shake {
    animation: pointerShake 0.5s infinite;
}

.center-dot {
    width: 80px;
    height: 80px;
    background: #1d1e17;
    border: 4px solid #f35800;
    box-shadow: 0 8px 15px #f35800;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.modal-bg {
    background: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background: #0f0f0f;
    border: 2px solid #f95e00;
    padding: 2rem;
    border-radius: 10px;
}
@media (max-width: 475px) {
    .wheel {
        width: 300px;
        height: 300px;
    }

    .glow-dot {
        width: 9px;
        height: 9px;
        transform: rotate(calc(var(--i) * 22.5deg)) translate(138.5px) rotate(calc(var(--i) * -22.5deg));
    }
    .wheel span {
        font-size: 8px;
    }
    .pointer {
        width: 60px;
        height: 60px;
    }
}
@media (max-width: 375px) {
    .wheel {
        width: 280px;
        height: 280px;
    }

    .glow-dot {
        width: 9px;
        height: 9px;
        transform: rotate(calc(var(--i) * 22.5deg)) translate(126.5px) rotate(calc(var(--i) * -22.5deg));
    }
}