.game-container {
    .spinandwin-wrap {
        display: flex;
        min-height: 400px;
        justify-content: center;
        align-items: center;
        .wheel-container {
            margin: 0 auto;
            width: 100vw;
            height: 100vw;
            max-width: 450px;
            max-height: 450px;

            .wheel-art {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                transform: translate(-50%, -50%);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: 50% 50%;

            }

            .wheel {
                margin: auto;
                background: #ccc;
                width: 95%;
                height: 95%;
                border-radius: 100%;
                position: relative;
            }

            .wheel-center {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 15%;
                height: 15%;
                background-size: contain;

                background: linear-gradient(100deg, #5B3EFF, #0090FE); // #1F75FF;
                border-radius: 50px;
                border: 5px solid black;
            }

            .wheel-outer {
                width: 80vw;
                height: 80vw;
                max-width: 350px;
                max-height: 350px;
                overflow: hidden;

                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;

                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #F8ED06;
                    z-index: -1;
                }
            }

            .wheel-inner {
                width: 95%;
                height: 95%;
                overflow: hidden;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;

                &:after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(150deg, #5B3EFF, #5E3DFF, #0090FE);
                    z-index: -1;
                }
            }

            .wheel-cursor {
                width: 0;
                height: 0;
                border-left: 5vw solid transparent;
                border-right: 5vw solid transparent;
                border-top: solid #5E3DFF;
                z-index: 1;
                position: absolute;
                top: 0;

                &:after {
                    content: "";
                }

                @media screen and (max-width: 699px) {
                    border-top-width: 13vw;
                }

                @media screen and (min-width: 700px) and (max-width: 832px) {
                    border-top-width: 10vw;
                }

                @media screen and (min-width: 833px) and (max-width: 1199px) {
                    border-left-width: 3vw;
                    border-right-width: 3vw;
                    border-top-width: 7vw;
                }

                @media screen and (min-width: 1200px) and (max-width: 2999px) {
                    border-left-width: 2vw;
                    border-right-width: 2vw;
                }

                @media screen and (min-width: 1200px) and (max-width: 2000px) {
                    border-top-width: 5vw;
                }

                @media screen and (min-width: 2000px) and (max-width: 2999px) {
                    border-top-width: 3vw;
                }

                @media screen and (min-width: 3000px) {
                    border-left-width: 1vw;
                    border-right-width: 1vw;
                    border-top-width: 2vw;
                }
            }

            .wheel-wrap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                border-radius: 50%;
                position: absolute;
                transform: translate(0, 2.5%);
            }

            .wheel-shadow {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                margin: auto;
                width: 100%;
                height: 100%;
                border-radius: 100%;
                box-shadow: 4px 8px 0px rgba(0, 0, 0, .2);
            }

            .slat {
                position: absolute;
                top: 0;
                left: 0;
                transform-origin: 50% 50%;
                width: 100%;
                height: 100%;

                .shape {
                    width: 100%;
                    height: 100%;
                }

                .label {
                    color: #000;
                    font-size: 20px;
                    height: 50px;
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    text-align: center;
                    background: white;
                    // transform:rotate(calc(360deg / 6)) //change according to slices
                }
            }

        }
    }
}