*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.background{
    position: relative;
    width: 550px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.background img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.main-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.logo{
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text{
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prize{
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.prize img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.coin{
    position: absolute;
    top: 40%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.coin img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.coin img:nth-child(2){
    position: absolute;
    top: 68%;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.coin1{
    position: absolute;
    top: 40%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.coin1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.coin1 img:nth-child(2){
    position: absolute;
    top: 68%;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}
.coin2{
    position: absolute;
    top: 68%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.coin2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.coin2 img:nth-child(2){
    position: absolute;
    top: 68%;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}
.coin3{
    position: absolute;
    top: 68%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.coin3 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.coin3 img:nth-child(2){
    position: absolute;
    top: 68%;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* When lose popup is active, hide prize + coins */
body.lose-active .main-content .prize,
body.lose-active .main-content .coin,
body.lose-active .main-content .coin1,
body.lose-active .main-content .coin2,
body.lose-active .main-content .coin3{
    display: none !important;
}

/* When win popup is active, hide only the small coins (keep big prize visible) */
body.win-active .main-content .coin,
body.win-active .main-content .coin1,
body.win-active .main-content .coin2,
body.win-active .main-content .coin3{
    display: none !important;
}

/* Win popup overlay */
.popout-win{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.popout-win.show{
    opacity: 1;
    visibility: visible;
}

.popout-win .image-win{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.popout-win .image-win img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.popout-win .telegramButton{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 50;
}

.popout-win .telegramButton img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.popout-win .celebrate{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popout-win .celebrate img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Lose popup overlay */
.popout-lose{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.popout-lose.show{
    opacity: 1;
    visibility: visible;
}

.popout-lose .image-lose{
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popout-lose .image-lose img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.popout-lose .coin-lose{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.popout-lose .coin-lose img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.popout-lose .coin-lose img:nth-child(2){
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}