:root{

    --sw: 1;
    --swi: 1;

}

/*@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-display: swap;
    src: url('fonts/Nunito-wght.ttf') format('truetype');
}*/

@keyframes btnAnimation {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(1.25);

    }

}

@keyframes btnAnimationArt {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(1.25) translateX(60%) translateY(-15%) rotateZ(15deg);

    }

}

@keyframes btnAnimationArtM {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(1.25) translateX(2.5%) translateY(-30%) rotateZ(-10deg);

    }

}

@keyframes btnAnimationArt2 {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(2) translateX(20%) translateY(-15%);

    }

}

@keyframes btnAnimationShadow {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(1.25);

    }

}

*{

    margin: 0;
    border: 0;
    padding: 0;
    font-family: "Nunito", sans-serif;
    box-sizing: border-box;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 

}

a{

    text-decoration: none;

}

a,button{

    cursor:pointer;

}

body{

    
    width: 100%;;
    min-height: 100dvh;
    overflow: hidden;

}

body:not(.loaded) *{

    transition: none !important;
    display: none;

}

.app{

    width: 100%;
    height: 100dvh;
    background-image: url('background.webp');
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;

}

.app .box-btn{

    width: calc(330px * var(--sw));
    height: calc(92px * var(--sw));
    position: absolute;
    top: calc(810px * var(--sw));
    left:calc(50% - 165px * var(--sw));
    z-index: 0;

}

.sw-i2 .app .box-btn{

    top: inherit;
    bottom: calc(210px / var(--swi));

}

.app .box-btn::after{

    width: calc(80px * var(--sw));
    height: calc(80px * var(--sw));
    background: #57D7FF;
    content: '';
    position: absolute;
    top:calc(50% - 40px * var(--sw));
    left:calc(50% - 40px * var(--sw));
    border-radius: 100%;
    box-shadow: 0px 0px calc(200px * var(--sw)) #57D7FF;
    z-index: -1;

}

.app .btn-art{

    width: calc(76px * var(--sw));
    height: calc(64px * var(--sw));
    background-image: url('btn/btn-blue-art.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    right: calc(-45px * var(--sw));
    top: calc(-64px * var(--sw));
    position: absolute;
    filter: drop-shadow(0px 0px calc(200px * var(--sw)) #57D7FF);

}

.app .btn{

    width: calc(330px * var(--sw));
    height: calc(92px * var(--sw));
    background: none;
    background-image: url('btn/btn-blue.webp');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;

    font-size: calc(24px * var(--sw));
    line-height: calc(32px * var(--sw));
    color: #fff;
    font-weight: 900;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    filter: drop-shadow(0px 0px calc(200px * var(--sw)) #57D7FF);
    text-transform: uppercase;
    
}

.app .btn img{

    width: calc(34px * var(--sw));
    height: calc(34px * var(--sw));
    margin-right: calc(15px * var(--sw));

}

.app .box-btn.play{

    width: calc(270px * var(--sw));
    height: calc(81px * var(--sw));
    position: absolute;
    top:calc(730px * var(--sw));
    left:calc(50% - 135px * var(--sw));
    z-index: 0;

}

.sw-i2 .box-btn.play{

    top: inherit;
    bottom: calc(280px / var(--swi));

}

.app .box-btn.play::after{

    background: #00FF94;
    box-shadow: 0px 0px calc(200px * var(--sw)) #00FF94;

}

.app .play .btn{

    width: calc(270px * var(--sw));
    height: calc(90px * var(--sw));
    padding-bottom: calc(9px * var(--sw));
    background-image: url('btn/btn-green.webp');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: calc(24px * var(--sw));
    line-height: calc(32px * var(--sw));
    filter: drop-shadow(0px 0px calc(200px * var(--sw)) #00FF94);
    
}

.app .play .btn-art{

    width: calc(65px * var(--sw));
    height: calc(63px * var(--sw));
    background-image: url('btn/btn-star.svg');
    right: calc(-20px * var(--sw));
    top: calc(-20px * var(--sw));
    filter: none;
    z-index: 1;

}

.app .copyright{

    width: calc(400px * var(--sw));
    height: calc(52px * var(--sw));
    position: absolute;
    top:calc(850px * var(--sw));
    left:calc(50% - 200px * var(--sw));

    background-image: url('btn/copyright.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 100%;

}

.sw-i2 .app .copyright{

    top: inherit;
    bottom: calc(128px / var(--swi));

}

.popup-disclaimer{

    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 100;
    top:0px;
    left:0px;
    backdrop-filter: blur(calc(30px * var(--sw)));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: all 0.4s;

}

.popup-disclaimer.hide{

    top:100%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    touch-action: none;

}

.popup-disclaimer .box{

    width: calc(960px * var(--sw));
    max-width: calc(100% - 40px * var(--sw));
    padding: calc(80px * var(--sw)) calc(100px * var(--sw));
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;
    border-radius: calc(40px * var(--sw));
    box-shadow: 0px calc(40px * var(--sw)) calc(80px * var(--sw)) rgba(30, 30, 30, 0.15);

}

.popup-disclaimer .box .title{

    width:100%;
    height: calc(65px * var(--sw));
    background-image:url('btn/text-disclamer.d.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    color: #000000;
    text-align: center;

}

.popup-disclaimer .box .actions{

    width: 100%;
    margin-top: calc(40px * var(--sw));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:0px calc(80px * var(--sw));

}

.popup-disclaimer .box .actions .btn{

    width: calc(160px * var(--sw));
    height: calc(80px * var(--sw));
    border-radius: calc(20px * var(--sw));
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: all 0.4s;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: none;
    background-image:url('btn/btn-no.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;

}

.popup-disclaimer .box .actions .btn.btn-accept{

    background-image:url('btn/btn-yes.svg');

}

.popup-disclaimer .box .actions .btn:hover{

    transform: scale(1.1);
    box-shadow: 0px 0px calc(200px * var(--sw)) #EA234D;
    transition: all 0.4s;

}

/*

    Animation

*/
.body:not(.resized) .app .box-btn::after{

    animation: btnAnimationShadow 1.2s infinite alternate;

}

.app:not(.resized) .btn-art{

    animation: btnAnimationArt 1.2s infinite alternate;

}

.app:not(.resized) .btn{

    animation: btnAnimation 1.2s infinite alternate;
    
}

.app:not(.resized) .btn-art{

    animation: btnAnimationArt 1.2s infinite alternate;

}

.app:not(.resized) .play .btn{

    animation: btnAnimation 1.2s infinite alternate;
    
}

.app:not(.resized) .play .btn-art{

    animation: btnAnimationArt2 1.2s infinite alternate;

}

@media (orientation: portrait) {

    .app:not(.resized) .btn-art{

        animation: btnAnimationArtM 1.2s infinite alternate;

    }

}

@media (orientation: portrait) {

    
    .app{

        background-image: url('background-m.webp');
        background-position: 0% 50%;

    }

    body.sw-im2 .app{

        background-position: 0% 100%;

    }


    .app .box-btn{

        width: calc(240px * var(--sw));
        height: calc(67px * var(--sw));
        bottom: calc(30px * var(--sw));
        top: inherit;
        left:calc(50% - 120px * var(--sw));

    }

    .app .box-btn::after{

        width: calc(50px * var(--sw));
        height: calc(50px * var(--sw));
        top:calc(50% - 25px * var(--sw));
        left:calc(50% - 25px * var(--sw));
        box-shadow: 0px 0px 0px #57D7FF;

    }

    .app .btn{

        width: calc(240px * var(--sw));
        height: calc(67px * var(--sw));
        font-size: calc(16px * var(--sw));
        line-height: calc(24px * var(--sw));
        filter: drop-shadow(0px 0px 0px #57D7FF);

    }

    .app .btn-art{

        width: calc(55px * var(--sw));
        height: calc(45px * var(--sw));
        right: calc(-26px * var(--sw));
        top: calc(-45px * var(--sw));
        filter: drop-shadow(0px 0px 0px #57D7FF);

    }

    .app .btn img{

        width: calc(24px * var(--sw));
        height: calc(24px * var(--sw));
        margin-right: calc(10px * var(--sw));

    }

    .app .box-btn.play{

        width: calc(240px * var(--sw));
        height: calc(80px * var(--sw));
        bottom: calc(25px * var(--sw));
        top: inherit;
        left:calc(50% - 120px * var(--sw));
    
    }
    
    .app .box-btn.play::after{
    
        box-shadow: 0px 0px 0px #00FF94;
    
    }
    
    .app .play .btn{
    
        width: calc(240px * var(--sw));
        height: calc(80px * var(--sw));
        padding-bottom: calc(8px * var(--sw));
        
        font-size: calc(24px * var(--sw));
        line-height: calc(32px * var(--sw));
        filter: drop-shadow(0px 0px 0px #00FF94);
        
    }
    
    .app .copyright{
    
        width: 100%;
        height: calc(34px * var(--sw));
        top: calc(30px * var(--sw));
        bottom: inherit;
        left:0px;

        background-size: contain;
    
    }

    .popup-disclaimer .box{

        padding: calc(30px * var(--sw)) calc(40px * var(--sw));

    }

    .popup-disclaimer .box .title{

        height: calc(68px * var(--sw));
        font-size: calc(24px * var(--sw));
        line-height: calc(34px * var(--sw));
        background-image:url('btn/text-disclamer.m.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;

    }

    .popup-disclaimer .box .actions{

        margin-top: calc(20px * var(--sw));
        gap:0px calc(20px * var(--sw));

    }

    .popup-disclaimer .box .actions .btn{

        width: calc(80px * var(--sw));
        height: calc(40px * var(--sw));
        border-radius: calc(10px * var(--sw));
        padding: 0px calc(24px * var(--sw));
        font-size: calc(16px * var(--sw));
        line-height: calc(20px * var(--sw));

    }

}