*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    overflow: hidden;
}
.background{
    position: relative;
    width: 550px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.background img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.main-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 550px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.text{
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text img{
    width: 100%;
    height: 100%;
    max-width: 400px;
    object-fit: contain;
}
.frameball{
    position: absolute;
    top: 17.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.frameball img{
    width: 100%;
    max-width: 100px;
    object-fit: contain;
}
.ball{
    position: absolute;
    top: 22.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
    transition:
        left 1.05s cubic-bezier(0.33, 0.86, 0.42, 1),
        top 1.05s cubic-bezier(0.33, 0.86, 0.42, 1);
}
.ball.ball--flying{
    z-index: 40;
    will-change: left, top;
}
.ball img{
    width: 100%;
    max-width: 60px;
    object-fit: contain;
}
.model1{
    position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.model1 img{
    width: 100%;
    height: 100%;
    max-width: 120px;
    object-fit: contain;
}
.model2{
    position: absolute;
    top: 37%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.model2 img{
    width: 100%;
    height: 100%;
    max-width: 180px;
    object-fit: contain;
}
.model3{
    position: absolute;
    top: 44%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.model3 img{
    width: 100%;
    height: 100%;
    max-width: 170px;
    object-fit: contain;
}
.model4{
    position: absolute;
    top: 51%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.model4 img{
    width: 100%;
    height: 100%;
    max-width: 170px;
    object-fit: contain;
}
.model5{
    position: absolute;
    top: 58%;
    left: 32%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.model5 img{
    width: 100%;
    height: 100%;
    max-width: 170px;
    object-fit: contain;
}
.prize{
    position: absolute;
    top: 81%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prize-grid{
    position: relative;
    width: 100%;
    max-width: 550px;
    isolation: isolate;
}
.prize-grid .prize-img{
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    max-width: 550px;
    height: auto;
    object-fit: contain;
}
.prize-grid-overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 72%;
    max-width: 396px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    /* border: 2px solid #d4af37; */
    border-radius: 8px;
    /* background-image:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(25% - 1px),
            #d4af37 calc(25% - 1px),
            #d4af37 25%
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(25% - 1px),
            #d4af37 calc(25% - 1px),
            #d4af37 25%
        ); */
}
.buttonPlay{
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.buttonPlay img{
    width: 100%;
    max-width: 250px;
    object-fit: contain;
    cursor: pointer;
}
.buttonPlay.is-used{
    pointer-events: none;
}
.buttonPlay.is-used img{
    cursor: default;
    opacity: 0.85;
}
.pointer{
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 40px;
}
.pointer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popout-lose{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
}
.popout-lose.show{
    display: flex;
}
.popout-lose .image-lose{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.popout-lose .image-lose img{
    width: 100%;
    max-width: 280px;
    object-fit: contain;
}
.popout-lose .buttonTryagain{
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.popout-lose .buttonTryagain img{
    width: 100%;
    max-width: 220px;
    object-fit: contain;
}

.popout-win{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1001;
}
.popout-win.show{
    display: flex;
}
.popout-win .image-win{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.popout-win .image-win img{
    width: 100%;
    max-width: 320px;
    object-fit: contain;
}
.popout-win .button-win{
    position: absolute;
    top: 69%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.popout-win .button-win img{
    width: 100%;
    max-width: 240px;
    object-fit: contain;
}

@media (max-width: 440px){
    .text img{
        max-width: 300px;
    }
    .frameball img{
        max-width: 80px;
    }
    .ball img{
        max-width: 50px;
    }
    .model1 img{
        max-width: 100px;
    }
    .model2 img{
        max-width: 150px;
    }
    .model3 img{
        max-width: 140px;
    }
    .model4 img{
        max-width: 130px;
    }
    .model5 img{
        max-width: 140px;
    }
    .prize-img{
        max-width: 300px;
    }
    .buttonPlay img{
        max-width: 200px;
    }
    .pointer img{
        max-width: 30px;
    }
}

@media (max-width: 430px){
    .text img{
        max-width: 300px;
    }
    .frameball img{
        max-width: 60px;
    }
    .ball{
        top: 21%;
    }
    .ball img{
        max-width: 40px;
    }
    .model1 img{
        max-width: 80px;
    }
    .model2 img{
        max-width: 110px;
    }
    .model3 img{
        max-width: 120px;
    }
    .model4 img{
        max-width: 110px;
    }
    .model5 img{
        max-width: 120px;
    }
    .prize-img{
        max-width: 300px;
    }
    .buttonPlay img{
        max-width: 200px;
    }
    .pointer img{
        max-width: 30px;
    }
}

@media (max-width: 390px){
    .pointer{
        top: 74%;
    }

}

@media (max-width: 360px){
    .model1 img{
        max-width: 70px;
    }
    .model2 img{
        max-width: 100px;
    }
    .model3 img{
        max-width: 90px;
    }
    .model4 img{
        max-width: 90px;
    }
    .model5 img{
        max-width: 100px;
    }
}