/* ! assetsArea */
.assetsArea{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 107vw;
    height: 107vh;
    gap: 1vw;
    transform: translate(-3.5vw, -7.52vh) scale(2.857);
    z-index: 50;
    overflow: hidden;
}

.assetsArea-top{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1vw;
}
.assetsArea-mid{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.assetsArea-bot{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1vw;
}

.assetsArea-top .img1{
    width: 35vw;
    height: 36.36vh;
    border-radius: 1.5vw
}
.assetsArea-top .img2{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}
.assetsArea-top .img3{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}
.assetsArea-top .img4{
    width: 35vw;
    height: 36.36vh;
    border-radius: 1.5vw
}

.assetsArea-mid .img1{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}
.assetsArea-mid .img2{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}
.assetsArea-mid .img3{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}
.assetsArea-mid .img4{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}

.assetsArea-bot .img1{
    width: 35vw;
    height: 36.36vh;
    border-radius: 1.5vw
}
.assetsArea-bot .img2{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}
.assetsArea-bot .img3{
    width: 17vw;
    height: 30.93vh;
    border-radius: 1.5vw
}
.assetsArea-bot .img4{
    width: 35vw;
    height: 36.36vh;
    border-radius: 1.5vw
}

.assetsArea-top .img4 video{
    width: 35vw;
    height: 36.36vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-mid .img1 video{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-mid .img3 video{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-bot .img2 video{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-bot .img4 video{
    width: 35vw;
    height: 36.36vh;
    object-fit: cover;
    border-radius: 1.5vw
}

.assetsArea-top .img1 img{
    width: 35vw;
    height: 36.36vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-top .img2 img{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-top .img3 img{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-mid .img2 img{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-mid .img4 img{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-bot .img1 img{
    width: 35vw;
    height: 36.36vh;
    object-fit: cover;
    border-radius: 1.5vw
}
.assetsArea-bot .img3 img{
    width: 17vw;
    height: 30.93vh;
    object-fit: cover;
    border-radius: 1.5vw
}

/* ! introArea */
.introAreaC{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35vw;
    height: 30.93vh;
    overflow-x: hidden;
}
.introArea{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35vw;
    height: 41.8vh;
    border-radius: 1.5vw;
    overflow: hidden;
    z-index: 60;
}
.introArea-content{
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: column;
    z-index: 10;
}
.introArea h1{
    display: none;
    display: block;
    width: 19vw;
    font-family: disp;
    font-size: 1.75vw;
    color: #ca4dde;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    font-weight: 400;
}
.introArea-titleC{
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: disp;
    font-size: 1.75vw;
    color: #ca4dde;
    text-transform: uppercase;
}
/* .introArea-titleC .top, .introArea-titleC .bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.05vw;
} */
.introArea-subtitle{
    font-size: .4375vw;
    font-weight: 500;
    font-style: italic;
    text-align: center;
    margin-top: 1vw;
    transition: opacity .3s ease;
}

.introArea-button{
    transition: transform 0.3s ease, opacity .3s ease;
}
.introArea-button img{
    position: absolute;
    opacity: 0;
    width: .4375vw;
    height: .4375vw;
    transform: translate(5.6vw, -1.75vw) rotate(0deg);
    transition: all 0.2s ease, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.introArea-button-border{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.825vw;
    height: 1.575vw;
    border-radius: .875vw;
    background: linear-gradient(0deg, #ca4dde, #984dde);
    transition: 0.3s ease;
}
.introArea-button-border span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.65vw;
    height: 1.4vw;
    border-radius: .7vw;
    background: linear-gradient(180deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
    font-family: disp-2;
    font-size: .56vw;
    transition: 0.3s ease;
}
.introArea-button-border span .text{
    transition: 0.3s ease;
}

/* todo js assign */
.letter {
    display: inline-block;
    opacity: 0;
    transform: translateX(-50px) scale(2);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.letter.animate {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.space {
    width: 0.3em;
}
.line-break {
    display: block;
    height: 0;
}
.introArea-button.btnHover-1 .btnHover_1{
    transform: translate(5.6vw, -1.75vw) rotate(170deg);
}
/* todo js assign end */

.introArea-content .backgorund-video{
    position: absolute;
    width: 35vw;
    height: 41.8vh;
    border-radius: 20px;
    z-index: -1;
}
.introArea-content .backgorund-video video{
    width: 35vw;
    height: 41.8vh;
    object-fit: cover;
    border-radius: 20px;
}

/* ! comingSoonPopup */
.comingSoonPopup{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 150;
    pointer-events: none;
}
.comingSoonPopup-C{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    top: 60vh;
    left: 70.55vw;
    transform: translateX(30vw);
    transition: .4s ease;
}
.comingSoonPopup-C-title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11vw;
    height: 3vw;
    background: #dec84d;
    border: 5px solid #111;
    border-radius: 10px;
    z-index: 150;
    transform: scale(0) skewX(-10deg) translateY(20px);
    transition: .8s cubic-bezier(.19,1.73,.44,.75) .3s;
}
.comingSoonPopup-C-title div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vw;
    height: 2vw;
    font-family: disp-2;
    text-transform: uppercase;
    font-size: 1.1vw;
    z-index: 140;
    color: #000000;
}
.comingSoonPopup-C-title img{
    position: absolute;
    width: 12vw;
    transform: translateX(.8vw);
}
.comingSoonPopup-C-text{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: .4vw;
    width: 22vw;
    padding: 1vw;
    padding-bottom: 1.5vw;
    border: .4vw solid #1c1c0f;
    border-radius: 1vw;
    background: linear-gradient(180deg, #dec84d, #d18a48 21%, #392421 70%, #200404 94%);
}

.comingSoonPopup-C-text div:first-child{
    margin-top: .7vw;
    font-family: disp-2;
    font-size: .945vw;
    color: rgb(254, 255, 197);
    text-transform: uppercase;
}
.comingSoonPopup-C-text div:last-child{
    font-size: .833vw;
    color: #e5e5e5;
}
.comingSoonPopup-C-img{
    position: relative;
    width: 8vw;
    transform: translate(21vw, -3vw) rotateY(180deg) rotate(-20deg);
}
.comingSoonPopup-C-img img{
    width: 8vw;
}
.comingSoonPopup .comingSoonPopupTransform{
    transform: translateX(0vw);
}

/* ! signupArea */
.signupArea{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 100vw;
    height: 60vw;
    background: url("https://res.cloudinary.com/daqc3owin/image/upload/v1751619764/home-2_zbxail.jpg");
    background-size: cover;
    padding-top: 20vw;
}

.signupArea-top{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 10vw;
}

.signupArea-top-left{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    transform: translate(5vw, -14vw);
    width: 49vw;
}
.signupArea-top-left-bubble{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vw;
    margin-left: 4vw;
    z-index: 40;
}
.signupArea-top-left-bubble div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7vw;
    font-family: disp-2;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    font-size: 1.5vw;
    transform: skewY(-3deg);
    z-index: 40;
}
.signupArea-top-left-bubble img{
    position: absolute;
    width: 13vw;
    transform: translateX(.7vw);
    z-index: 30;
}
.signupArea-top-left-title{
    width: 44vw;
    font-family: disp;
    font-size: 6vw;
    text-align: start;
    text-transform: uppercase;
    transform: skewY(-6deg) scaleY(.95);
    color: #ca4dde;
}
/* .signupArea-top-left-img{} */

.signupArea-top-right{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1vw;
    width: 49vw;
    transform: translateX(5vw);
}
.signupArea-top-right-title{
    width: 35vw;
    font-family: disp-2;
    font-size: 2.5vw;
    text-transform: uppercase;
    color: #f1c5f8;
}
.signupArea-top-right-text{
    width: 35vw;
    font-size: 1.3vw;
    font-weight: 500;
    color: #cec2cf;
}
.signupArea-top-right-button{
    transition: transform 0.3s ease;
    margin-top: 1vw;
}
.signupArea-top-right-button img{
    position: absolute;
    opacity: 0;
    width: 1.25vw;
    height: 1.25vw;
    transform: translate(16vw, -5vw) rotate(0deg);
    transition: all 0.2s ease, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.signupArea-top-right-button-border{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19.5vw;
    height: 4.5vw;
    border-radius: 2.5vw;
    background: linear-gradient(0deg, #ca4dde, #984dde);
    transition: 0.3s ease;
}
.signupArea-top-right-button-border span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19vw;
    height: 4vw;
    border-radius: 2vw;
    background: linear-gradient(180deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
    font-family: disp-2;
    font-size: 1.6vw;
    transition: 0.3s ease;
}
.signupArea-top-right-button-border span .text{
    transition: 0.3s ease;
}

.signupArea-bottom{
    width: 100vw;
    margin-top: 15vw;
}
.signupArea-bottom img{
    width: 100vw;
}

/* todo signupArea js assign */
.signupArea-top-right .signupArea-top-right-button.btnHover-4 .btnHover_4{
    transform: translate(16vw, -5vw) rotate(170deg);
}
/* todo signupArea js assign end */

/* ! gamesArea */
.gamesArea{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url("https://res.cloudinary.com/daqc3owin/image/upload/v1752005677/home-3_lndi2q.jpg");
    background-size: cover;
    width: 100vw;
    padding-top: 15vw;
    padding-bottom: 5vw;
}
.gamesAreaC{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    width: 66.65vw;
    background: linear-gradient(0deg, #0009, #0009 10%, #0009 90%, transparent);
    padding-top: 4vw;
    padding-bottom: 3vw;
    padding-inline: 1.75vw;
    gap: 20px;
}

.gamesArea-game{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 21vw;
    height: calc((20vw / 16 * 9) + 1vw);
    background: linear-gradient(180deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
    border-radius: 5px;
    transition: .2s ease;
}
.gamesArea-game:hover{
    scale: 1.05;
}
.gamesArea-game-img{
    width: 20vw;
    height: calc(20vw / 16 * 9);
    transform: translate(.5vw, -.5vw);
}
.gamesArea-game-img img{
    width: 20vw;
    height: calc(20vw / 16 * 9);
    object-fit: cover;
    border-radius: 5px;
    transition: .2s ease;
}
.gamesArea-game-shadow{
    position: absolute;
    width: 20vw;
    height: calc(20vw / 16 * 9);
    background: linear-gradient(0deg, #0009, transparent, transparent);
    transform: translate(.5vw, -.5vw);
    border-radius: 5px;
    transition: .2s ease;
}
.gamesArea-game-text{
    position: absolute;
    font-family: "Inter", sans-serif;
    transform: translate(1vw, -1vw);
    font-size: 1vw;
    font-weight: 800;
    color: #fff;
    transition: .2s ease;
}
.gamesArea-header{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1vw;
}
.gamesArea-header-title{
    width: 40vw;
    font-family: disp;
    text-transform: uppercase;
    text-align: center;
    font-size: 4.5vw;
    color: #ca4dde;
}
.gamesArea-header-text{
    font-family: inter;
    font-size: 1.2vw;
    font-weight: 500;
    font-style: italic;
}

.gamesArea-moreGame{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 66.65vw;
    height: 10vw;
    gap: 1vw;
    background: linear-gradient(0deg, #111 60%, #0000);
    padding-left: 3.5vw;
    border-radius: 0 0 1vw 1vw;
    transform: translateY(-5vw);
}
.gamesArea-moreGames-text{
    font-family: inter;
    font-size: 1vw;
    font-weight: 500;
    font-style: italic;
    margin-top: 4vw;
}
.gamesArea-moreGames-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: .5vw;
    padding-inline: 1vw;
    gap: .3vw;
    border: .2vw solid #c998b8;
    border-radius: 2vw;
    background: linear-gradient(180deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
    color: #fff;
    font-family: inter;
    font-weight: 800;
    font-style: italic;
    overflow: hidden;
    font-size: .9vw;
    transition:  0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gamesArea-moreGames-button .icon {
    width: 1.2vw;
    height: 1.2vw;
    transition: all 0.3s ease-in-out;
}
.gamesArea-moreGames-button:hover {
    transform: scale(1.05);
}
.gamesArea-moreGames-button:hover .icon {
    transform: translateX(.2vw);
}
.gamesArea-moreGames-button:hover::before {
    animation: shine .75s ease-out;
}
.gamesArea-moreGames-button::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
    top: 0;
    left: -100px;
    opacity: 0.6;
}
@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

.gamePage-game-playButtonPattern{
    position: fixed;
    display: none;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #0008;
    z-index: 25;
}
.gamePage-game-playButton{
    position: fixed;
    width: 28vw;
    height: 18vw;
    scale: 0;
    top: calc((100vh - 20vw) / 2);
    left: 35vw;
    background: #0f0f1c;
    border-radius: .417vw;
    z-index: 290;
    transition: .2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 2.9vw;
    padding: 1vw;
}
.gamePage-game-playButton-img{
    width: 4.688vw;
    height: 4.688vw;
    margin-top: 2.25vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gamePage-game-playButton-img img{
    width: 4.688vw;
    height: 4.688vw;
}
.gamePage-game-playButton-loading{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.gamePage-game-playButton-loading div{
    width: 2vw;
    height: 2vw;
    border-radius: .2vw;
    margin-top: 2vw;
    animation: loadingAnimation 1s linear infinite;
}
.gamePage-game-playButton-loading div:nth-child(1){
    background: #6936E3;
    animation-delay: 0s;
}
.gamePage-game-playButton-loading div:nth-child(2){
    background: #7C35E1;
    animation-delay: .2s;
}
.gamePage-game-playButton-loading div:nth-child(3){
    background: #8938E0;
    animation-delay: .4s;
}
.gamePage-game-playButton-loading div:nth-child(4){
    background: #9F3AE0;
    animation-delay: .6s;
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
}
@keyframes loadingAnimation {
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.gamePage-game-playButton-title{
    display: none;
    font-size: .885vw;
    font-weight: 500;
    color: #fff;
    text-align: center;
}
.gamePage-game-playButton-button{
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    width: 11.533vw;
    height: 2.867vw;
    font-family: "DM Sans", sans-serif;
    font-size: .938vw;
    font-weight: 400;
    border-radius: .417vw;
    background: linear-gradient(45deg, #9F3AE0, #6936E3);
}
.gamePage-game-playButton-buttonShadow{
    content: '';
    position: absolute;
    width: 12.033vw;
    height: 3.367vw;
    background: #fff1;
    border-radius: .417vw;
    z-index: -1;
    transition: .2s;
}
.gamePage-game-playButton-button:hover .gamePage-game-playButton-buttonShadow{
    width: 12.283vw;
    height: 3.617vw;
    background: #ff84f533;
}

/* ! cardArea */
.cardArea{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 5vw;
    width: 100vw;
    padding-block: 10vw;
    background: url("https://res.cloudinary.com/daqc3owin/image/upload/v1751619763/home-4_ao7wny.jpg");
    background-size: cover;
    margin-bottom: 10vw;
}
.widecard{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 1vw;
}
.widecard-top{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 81vw;
    height: 31vw;
    border-radius: 1vw;
    background: linear-gradient(180deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
}
.widecard-top .inner{
    width: 80vw;
    height: 30vw;
    border-radius: 1vw;
}
.inner-video{
    width: 80vw;
    height: 30vw;
    border-radius: 1vw;
}
.inner-video video{
    width: 80vw;
    height: 30vw;
    border-radius: 1vw;
    object-fit: cover;
}
.inner-textarea{
    position: absolute;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    z-index: 70;
    transform: translate(2vw, -14vw);
}
.inner-textarea-bubble{
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(1vw, -1.5vw);
    z-index: 73;
}
.inner-textarea-bubble img{
    position: absolute;
    width: 15vw;
    transform: translateX(.7vw);
}
.inner-textarea-bubble span{
    font-family: disp-2;
    text-transform: uppercase;
    font-size: 1.4vw;
    color: #000000;
    z-index: 71;
}
.inner-textarea-textTop{
    position: relative;
    padding-left: 1.25vw;
    padding-right: 4vw;
    padding-top: .75vw;
    padding-bottom: .75vw;
    border-radius: 1vw;
    background: #000000;
    color: #000000;
    font-family: disp;
    font-size: 3.5vw;
    text-transform: uppercase;
    transform: skewX(-20deg) translateY(.25vw);
    z-index: 71;
}
.inner-textarea-textTop::before{
    content: '';
    position: absolute;
    width: calc(100% - 2vw);
    height: calc(100% - .5vw);
    border-radius: 1vw;
    background: #f8d9ad;
    transform: translate(-1vw, -.5vw);
    z-index: -1;
}
.inner-textarea-textTop span{
    position: relative;
    display: inline-block;
    transform: skewX(20deg);
    z-index: 72;
}
.inner-textarea-textBot{
    position: relative;
    padding-left: 1.25vw;
    padding-right: 4vw;
    padding-top: .75vw;
    padding-bottom: .75vw;
    border-radius: 1vw;
    background: #000000;
    color: #000000;
    font-family: disp;
    font-size: 3.5vw;
    text-transform: uppercase;
    transform: skewX(-20deg);
    z-index: 74;
}
.inner-textarea-textBot::before{
    content: '';
    position: absolute;
    width: calc(100% - 2vw);
    height: calc(100% - .5vw);
    border-radius: 1vw;
    background: #f8d9ad;
    transform: translate(-1vw, -.5vw);
    z-index: -1;
}
.inner-textarea-textBot span{
    position: relative;
    display: inline-block;
    transform: skewX(20deg);
    z-index: 75;
}

.widecard-bot{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 81vw;
    height: 7vw;
    gap: .5vw;
    border-radius: 1vw;
    background: linear-gradient(0deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
    transform: translateY(-.5vw);
}
.widecard-bot-left{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 59.75vw;
    height: 6vw;
    border-radius: 1vw;
    background: linear-gradient(0deg, #1f0f1c, #0f0f1c);
}
.widecard-bot-left span{
    width: 65%;
    color: #e4bedd;
    font-family: inter;
    font-weight: 500;
    font-size: 1.15vw;
    font-style: italic;
    margin-left: 2vw;
}
.widecard-bot-right{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19.75vw;
    height: 6vw;
    border-radius: 1vw;
    background: linear-gradient(0deg, #1f0f1c, #0f0f1c);
}
.widecard-bot-right-button{
    transition: transform 0.3s ease;
    scale: .9;
}
.widecard-bot-right-button img{
    position: absolute;
    opacity: 0;
    width: 1.25vw;
    height: 1.25vw;
    transform: translate(16vw, -5vw) rotate(0deg);
    transition: all 0.2s ease, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.widecard-bot-right-button-border{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19.5vw;
    height: 4.5vw;
    border-radius: 2.5vw;
    background: linear-gradient(0deg, #ca4dde, #984dde);
    transition: 0.3s ease;
}
.widecard-bot-right-button-border span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19vw;
    height: 4vw;
    border-radius: 2vw;
    background: linear-gradient(180deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
    color: #f3d9ff;
    font-family: disp-2;
    font-size: 1.6vw;
    transition: 0.3s ease;
}
.widecard-bot-right-button-border span .text{
    transition: 0.3s ease;
}
.widecard:nth-child(2) .widecard-top{
    background: linear-gradient(180deg, #dec84d, #d18a48 21%, #392421 70%, #200404 94%);
}
.widecard:nth-child(2) .widecard-bot{
    background: linear-gradient(0deg, #dec84d, #d18a48 21%, #392421 70%, #200404 94%);
}
.widecard:nth-child(2) .widecard-bot-left, .widecard:last-child .widecard-bot-right{
    background: linear-gradient(180deg, #1f0f0f, #1f1f0f);
}
.widecard:nth-child(2) .widecard-bot-left span{
    width: 58%;
    color: #ffe2d9;
}
.widecard:nth-child(2) .widecard-bot-right-button-border{
    background: linear-gradient(0deg, #de9f4d, #de6a4d);
}
.widecard:nth-child(2) .widecard-bot-right-button-border span{
    background: linear-gradient(180deg, #dec84d, #d18a48 21%, #392421 70%, #200404 94%);
    color: #ffe2d9;
}

.verticalCardArea{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6vw;
}
.verticalCard{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 23vw;
    gap: .5vw;
}
.verticalCard-imgArea{
    width: 23vw;
    height: 26vw;
    border-radius: 1vw;
}
.verticalCard-imgArea .verticalCard-img{
    width: 23vw;
    height: 26vw;
    border-radius: 1vw;
    object-fit: cover;
}
.verticalCard-imgArea .bubble{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12vw;
    transform: translate(1vw, -3vw);
}
.verticalCard-imgArea .bubble img{
    position: absolute;
    width: 12vw;
    transform: translate(.6vw, -.2vw);
    z-index: 70;
}
.verticalCard-imgArea .bubble span{
    position: relative;
    width: 8vw;
    color: #000;
    font-family: disp-2;
    font-size: 1.4vw;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(-10deg);
    z-index: 71;
}
.verticalCard-textArea{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 23vw;
    height: 13vw;
    gap: 1.5vw;
    border-radius: 1vw;
    padding-top: 2vw;
    background: linear-gradient(180deg, #ca4dde, #a653b4 21%, #392136 70%, #08193c 94%);
}
.verticalCard-textArea-text{
    width: 85%;
    font-family: inter;
    font-size: 1vw;
    font-weight: 500;
    font-style: italic;
    text-align: center;
}
.verticalCard:nth-child(2) .verticalCard-textArea{
    background: linear-gradient(180deg, #dec84d, #d18a48 21%, #392421 70%, #200404 94%);
}
.verticalCard:nth-child(2) .widecard-bot-right-button-border{
    background: linear-gradient(0deg, #de9f4d, #de6a4d);
}
.verticalCard:nth-child(2) .widecard-bot-right-button-border span{
    background: linear-gradient(180deg, #dec84d, #d18a48 21%, #392421 70%, #200404 94%);
    color: #ffe2d9;
}
.verticalCard:nth-child(3) .verticalCard-textArea{
    background: linear-gradient(180deg, #4f4dde, #4888d1 21%, #213839 70%, #04201a 94%);
}
.verticalCard:nth-child(3) .widecard-bot-right-button-border{
    background: linear-gradient(180deg, #5f9ef0, #4dded7);
}
.verticalCard:nth-child(3) .widecard-bot-right-button-border span{
    background: linear-gradient(180deg, #4f4dde, #4888d1 21%, #213839 70%, #04201a 94%);
    color: #ffe2d9;
}
.verticalCard:nth-child(1)  .verticalCard-img{
    object-position: 55% center
}
.verticalCard:nth-child(2)  .verticalCard-img{
    object-position: 65% center
}
.verticalCard:nth-child(3)  .verticalCard-img{
    object-position: 80% center
}

/* ! sssArea (faqArea) */
.sssArea{
    position: relative;
    display: block;
    background: url("https://res.cloudinary.com/daqc3owin/image/upload/v1751619764/home-1_n01jcm.jpg");
    background-size: cover;
    font-family: inter;
    padding-bottom: 5vw;
}
.main-c {
    width: 100%;
    max-width: 93.75rem;
    margin-left: auto;
    margin-right: auto;
}
.c-pad-80 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.p-pad {
    padding-left: 3rem;
    padding-right: 3rem;
}
.faq-title{
    font-size: 3.2em;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
}
.v-space-60 {
    height: 3.75rem;
}
.faq-container {
    width: 100%;
    max-width: 90rem;
    position: relative;
}
.faq-wrap {
    z-index: 1;
    width: 100%;
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.faq-list {
    grid-column-gap: .75rem;
    grid-row-gap: .75rem;
    flex-direction: column;
    display: flex;
}
.faq-item {
    background-color: #2e0b32;
    border-radius: .75rem;
    position: relative;
}
.faq-toggle {
    background-color: purple;
    border-radius: .75rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 3rem;
    padding: 0rem 3rem;
    transition: background-color .2s ease;
    display: flex;
}
.faq-toggle:hover{
    background-color: rebeccapurple;
}
.faq-heading {
    letter-spacing: -.01em;
    max-width: 90%;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
}
.faq-icon {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(180deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}
.faq-answer {
    height: 0px;
    padding-left: 3rem;
    padding-right: 3rem;
    position: relative;
    overflow-y: auto;
    transition: all .2s ease-in;
}
.faq-answer::-webkit-scrollbar{
    width: .417vw;
    background: transparent;
}
.faq-answer::-webkit-scrollbar-track {
    border-radius: .2vw;
}
.faq-answer::-webkit-scrollbar-thumb{
    background-color: rebeccapurple;
    border-radius: .2vw;
}
.w-richtext:before, .w-richtext:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}
.w-richtext:after {
    clear: both;
}
.faq-a p {
    letter-spacing: -.004em;
    font-size: 1.125rem;
    line-height: 1.333;
}
.v-space-32 {
    height: 2em;
}
.faqAnswerHeight{
    height: 8vw;
}

.introAreaC.mobile{
    display: none;
}











@media screen and (max-width: 1500px) {
    /* ! comingSoonPopup */
    .comingSoonPopup-C{
        top: 70vh; 
        left: 79vw; 
        transform: translateX(70vw);
        scale: 1.3;
    }
}

@media screen and (max-width: 1100px) {
    /* ! assetArea */
    .assetsArea{
        width: 100vw;
        height: 100vh;
        gap: 1vh;
        transform: translate(0vw, 0vw) scale(2.86);
    }
    .assetsArea-top{
        gap: 1vh;
    }
    .assetsArea-mid{
        gap: 1vh;
    }
    .assetsArea-bot{
        gap: 1vh;
    }

    .assetsArea-top .img1{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-top .img2{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img3{
        position: absolute;
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh;
        transform: translateY(16.25vh);
    }
    .assetsArea-top .img4{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-mid .img1{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translateY(-7.5vh);
    }
    .assetsArea-mid .img2{
        position: absolute;
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translate(-35vw, 7.5vh);
    }
    .assetsArea-mid .img3{
        position: absolute;
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translate(35vw, -7.5vh);
    }
    .assetsArea-mid .img4{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translateY(7.5vh);
    }

    .assetsArea-bot .img1{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img2{
        position: absolute;
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh;
        transform: translateY(-16.25vh);
    }
    .assetsArea-bot .img3{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img4{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-top .img1 img{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-top .img2 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img3 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img4 video{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-mid .img1 video{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img2 img{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img3 video{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img4 img{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img1 img{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img2 video{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img3 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img4 video{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    /* ! introArea */
    .introAreaC{
        width: 35vw;
        height: 29vh;
    }
    .introArea{
        width: 35vw;
        height: 35vh;
        border-radius: 1vh;
    }
    .introArea-content{
        transform: translateY(-2vw);
    }
    .introArea h1{
        font-size: 2.5vw; 
        transform: translateX(-2vw); 
    }
    .introArea-subtitle{
        font-size: .7vw; 
        font-weight: 500;
        margin-top: 1vw;
        width: 33vw; 
    }
    .introArea-button{
        scale: .7; 
    }
    .introArea-button img{
        width: 1.5vw; 
        height: 1.5vw; 
        transform: translate(15vw, -4.5vw) rotate(0deg); 
    }
    .introArea-button-border{
        width: 18vw; 
        height: 4vw; 
        border-radius: 5vw;
    }
    .introArea-button-border span{
        width: 17.5vw; 
        height: 3.25vw; 
        border-radius: 4vw;
        font-size: 1.5vw; 
    }
    .introArea-button.btnHover-1 .btnHover_1{
        transform: translate(15vw, -4.5vw) rotate(170deg); 
    }

    /* ! comingSoonPopup */
    .comingSoonPopup-C{
        display: none;
        top: 70vh; 
        left: 39vw; 
        transform: translateX(70vw);
    }
    .comingSoonPopup-C-title div{
        width: 23vw; 
        height: 4vw; 
        font-size: 2.5vw; 
    }
    .comingSoonPopup-C-text{
        gap: 1vw;
        width: 50vw; 
        padding: 2vw;
        padding-bottom: 1.5vw;
        border: .4vw solid #0f0f1c;
        border-radius: 1vw;
        background: linear-gradient(180deg, #819234dd, #488b3bdd 21%, #0f3824dd 70%, #083c38dd 94%);
    }
    .comingSoonPopup-C-text div:first-child{
        margin-top: 2vw; 
        font-size: 2.2vw; 
    }
    .comingSoonPopup-C-text div:last-child{
        font-size: 1.7vw; 
    }
    .comingSoonPopup-C-img{
        width: 12vw; 
        transform: translate(50vw, -3vw); 
    }

    /* ! signupArea */
    .signupArea{
        width: 100vw;
        height: auto;
        padding-top: 20vw;
    }
    .signupArea-top{
        align-items: center;
        flex-direction: column;
        margin-top: 0vw;
    }
    .signupArea-top-left{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transform: translate(0vw, -10vw);
        width: 80vw;
    }
    .signupArea-top-left-bubble{
        height: 8vw;
        margin-left: -70vw;
    }

    .signupArea-top-left-bubble div{
        width: 12vw;
        font-size: 2.5vw;
    }

    .signupArea-top-left-bubble img{
        width: 20vw;
        transform: translateX(1vw);
    }

    .signupArea-top-left-title{
        width: 80vw;
        font-size: 11vw;
        text-align: center;
        transform: skewY(-6deg) scaleY(.95) translateX(-5vw);
    }
    .signupArea-top-right{
        gap: 5vw;
        width: 80vw;
        transform: translateX(0vw);
    }
    .signupArea-top-right-title{
        width: 60vw;
        font-size: 4vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-text{
        width: 60vw;
        font-size: 2.7vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-button{
        margin-top: 1vw;
        width: 80vw;
        display: flex;
        justify-content: center;
        scale: .8; 
    }
    .signupArea-top-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .signupArea-top-right-button-border{
        width: 51vw;
        height: 13vw;
        border-radius: 7vw;
    }
    .signupArea-top-right-button-border span{
        width: 49vw;
        height: 11vw;
        border-radius: 7vw;
        font-size: 4.25vw;
    }
    .signupArea-bottom{
        margin-top: 25vw;
        scale: 1.5;
    }
    .signupArea-top-right .signupArea-top-right-button.btnHover-4 .btnHover_4{
        transform: translate(19vw, -2vw) rotate(170deg);
    }


    /* ! gamesArea */
    .gamesArea{
        padding-top: 15vw;
        padding-bottom: 5vw;
    }
    .gamesAreaC{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap; 
        flex-direction: row; 
        width: 100vw;
        gap: 5vw; 
        min-height: 40vw;
        padding-top: 4vw;
        padding-bottom: 18vw;
        padding-left: 0vw; 
    }
    .gamesArea-game{
        width: 40vw; 
        height: calc((40vw / 7 * 9) - .5vw); 
        /* background: linear-gradient(0deg, #804dde33, #c64dde77, #de4dc6dd, #de4d79); */
        clip-path: none;
    }
    .gamesArea-game:nth-child(2),
    .gamesArea-game:nth-child(5),
    .gamesArea-game:nth-child(8),
    .gamesArea-game:nth-child(11),
    .gamesArea-game:nth-child(14),
    .gamesArea-game:nth-child(17),
    .gamesArea-game:nth-child(20){
        transform: translateY(-0vw);
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-img img,
    .gamesArea-game:nth-child(5) .gamesArea-game-img img,
    .gamesArea-game:nth-child(8) .gamesArea-game-img img,
    .gamesArea-game:nth-child(11) .gamesArea-game-img img,
    .gamesArea-game:nth-child(14) .gamesArea-game-img img,
    .gamesArea-game:nth-child(17) .gamesArea-game-img img,
    .gamesArea-game:nth-child(20) .gamesArea-game-img img,
    .gamesArea-game:nth-child(2) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(5) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(8) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(11) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(14) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(17) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(20) .gamesArea-game-shadow{
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-text,
    .gamesArea-game:nth-child(5) .gamesArea-game-text,
    .gamesArea-game:nth-child(8) .gamesArea-game-text,
    .gamesArea-game:nth-child(11) .gamesArea-game-text,
    .gamesArea-game:nth-child(14) .gamesArea-game-text,
    .gamesArea-game:nth-child(17) .gamesArea-game-text,
    .gamesArea-game:nth-child(20) .gamesArea-game-text{
        transform: translate(3vw, -3vw);
    }

    .gamesArea-game:hover{ 
        scale: 1; 
    }

    .gamesArea-game-img{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        transform: translate(1vw, -1vw); 
    }
    .gamesArea-game-img img{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        clip-path: none;
    }
    .gamesArea-game-shadow{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        clip-path: none;
        transform: translate(1vw, -1vw); 
        border-radius: .5vw;
    }
    .gamesArea-game-text{
        transform: translate(3vw, -3vw); 
        font-size: 3vw; 
    }
    .gamesArea-header{
        gap: 5vw;
    }
    .gamesArea-header-title{
        width: 90vw;
        font-size: 10vw;
    }
    .gamesArea-header-text{
        font-size: 3vw; 
        text-align: center;
        width: 80vw;
        margin-bottom: 5vw;
    }
    .gamesArea-moreGame{
        width: 100vw;
        height: 30vw;
        gap: 2.5vw;
        padding-left: 3.5vw;
        border-radius: 0 0 1vw 1vw;
        transform: translateY(-15vw);
    }
    .gamesArea-moreGames-text{
        font-size: 3vw; 
        margin-top: 8vw;
    }
    .gamesArea-moreGames-button {
        padding-block: 2vw;
        padding-inline: 5vw;
        gap: 2vw;
        border: .65vw solid #c998b8;
        border-radius: 10vw;
        font-size: 3.5vw;
    }
    .gamesArea-moreGames-button .icon {
        width: 4vw;
        height: 4vw;
    }

    /* ! cardArea */
    .cardArea{
        gap: 15vw;
        width: 100vw;
        padding-top: 10vw;
        margin-bottom: 10vw;
    }
    .widecard{
        border-radius: 2vw;
    }
    .widecard-top{
        width: 83vw;
        height: 73vw;
        border-radius: 2vw;
    }
    .widecard-top .inner{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-video{
        width: 80vw;
        height: 70vw;
        border-radius: 1vw;
    }
    .inner-video video{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-textarea{
        transform: translate(2vw, -21vw);
    }
    .inner-textarea-bubble{
        transform: translate(0vw, -2.4vw);
    }
    .inner-textarea-bubble img{
        width: 25vw;
        transform: translateX(1vw);
    }
    .inner-textarea-bubble span{
        font-size: 2.4vw;
    }
    .inner-textarea-textTop{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textTop::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textTop span{
        transform: skewX(20deg);
    }
    .inner-textarea-textBot{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textBot::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textBot span{
        transform: skewX(20deg);
    }
    .widecard-bot{
        width: 83vw;
        height: 17vw;
        gap: 1vw;
        transform: translateY(-1vw);
    }
    .widecard-bot-left{
        width: 44.75vw;
        height: 15vw;
    }
    .widecard-bot-left span{
        width: 90%;
        font-size: 2.5vw;
    }
    .widecard-bot-right{
        width: 34.75vw;
        height: 15vw;
    }
    .widecard-bot-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .widecard-bot-right-button-border{
        width: 36vw;
        height: 10vw;
        border-radius: 5vw;
    }
    .widecard-bot-right-button-border span{
        width: 34vw;
        height: 8vw;
        border-radius: 6vw;
        font-size: 3.5vw;
    }
    .widecard:nth-child(2) .widecard-bot-left span{
        width: 90%;
    }


    .verticalCardArea{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15vw;
    }
    .verticalCard{
        width: 70vw;
        gap: 1vw;
    }
    .verticalCard-imgArea{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .verticalCard-img{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .bubble{
        transform: translate(-5vw, -6vw);
    }
    .verticalCard-imgArea .bubble img{
        width: 24vw;
        transform: translate(5vw, -1vw);
    }
    .verticalCard-imgArea .bubble span{
        width: 8vw;
        font-size: 3vw;
    }
    .verticalCard-textArea{
        width: 70vw;
        height: 30vw;
        gap: 1.5vw;
        border-radius: 1vw;
        padding-top: 2vw;
    }
    .verticalCard-textArea-text{
        font-size: 3.5vw;
    }
    .verticalCard:nth-child(1)  .verticalCard-img{
        object-position: 52% center
    }
    .verticalCard:nth-child(2)  .verticalCard-img{
        object-position: 53% center
    }
    .verticalCard:nth-child(3)  .verticalCard-img{
        object-position: 80% center
    }

    /* ! planetBottom */
    .planetBottom img{
        scale: 1.4;
        padding-bottom: 20vw;
    }

    /* ! playButton */
    .gamePage-game-playButton{
        width: 42vw;
        min-height: 27vw;
        left: calc((100vw - 42vw - 2vw) / 2);
        top: calc((100vh - 27vw - 2vw) / 2);
        border-radius: .417vw;
        gap: 2.9vw;
        padding-bottom: 3vw;
    }
    .gamePage-game-playButton-img{
        width: 10vw;
        height: 10vw;
        margin-top: 3vw;
    }
    .gamePage-game-playButton-img img{
        width: 10vw;
        height: 10vw;
    }
    .gamePage-game-playButton-loading{
        gap: 1.25vw;
    }
    .gamePage-game-playButton-loading div{
        width: 3vw;
        height: 3vw;
        border-radius: .5vw;
        margin-top: 2vw;
    }
    .gamePage-game-playButton-title{
        font-size: 1.5vw;
    }
    .gamePage-game-playButton-button{
        width: 16vw;
        height: 4vw;
        font-size: 1.5vw;
        border-radius: 1vw;
    }
    .gamePage-game-playButton-buttonShadow{
        width: 17vw;
        height: 5vw;
        border-radius: 1vw;
    }
    .gamePage-game-playButton-button:hover .gamePage-game-playButton-buttonShadow{
        width: 17.5vw;
        height: 5.5vw;
    }
}
 
@media screen and (max-width: 991px) {
    /* ! assetArea */
    .assetsArea{
        width: 100vw;
        height: 100vh;
        gap: 1vh;
        transform: translate(0vw, 0vw) scale(2.86);
    }
    .assetsArea-top{
        gap: 1vh;
    }
    .assetsArea-mid{
        gap: 1vh;
    }
    .assetsArea-bot{
        gap: 1vh;
    }

    .assetsArea-top .img1{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-top .img2{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img3{
        position: absolute;
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh;
        transform: translateY(16.25vh);
    }
    .assetsArea-top .img4{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-mid .img1{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translateY(-7.5vh);
    }
    .assetsArea-mid .img2{
        position: absolute;
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translate(-35vw, 7.5vh);
    }
    .assetsArea-mid .img3{
        position: absolute;
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translate(35vw, -7.5vh);
    }
    .assetsArea-mid .img4{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translateY(7.5vh);
    }

    .assetsArea-bot .img1{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img2{
        position: absolute;
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh;
        transform: translateY(-16.25vh);
    }
    .assetsArea-bot .img3{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img4{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-top .img1 img{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-top .img2 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img3 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img4 video{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-mid .img1 video{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img2 img{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img3 video{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img4 img{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img1 img{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img2 video{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img3 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img4 video{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    /* ! introArea */
    .introAreaC{
        width: 35vw;
        height: 29vh;
    }
    .introArea{
        width: 35vw;
        height: 35vh;
        border-radius: 1vh;
    }
    .introArea-content{
        transform: translateY(-2vw);
    }
    .introArea h1{
        font-size: 3vw; 
        transform: translateX(-2vw); 
    }
    .introArea-subtitle{
        font-size: 1vw; 
        font-weight: 500;
        margin-top: 1vw;
        width: 33vw; 
    }
    .introArea-button img{
        width: 1.5vw; 
        height: 1.5vw; 
        transform: translate(15vw, -4.5vw) rotate(0deg); 
    }
    .introArea-button-border{
        width: 18vw; 
        height: 4vw; 
        border-radius: 5vw;
    }
    .introArea-button-border span{
        width: 17.5vw; 
        height: 3.25vw; 
        border-radius: 4vw;
        font-size: 1.5vw; 
    }
    .introArea-button.btnHover-1 .btnHover_1{
        transform: translate(15vw, -4.5vw) rotate(170deg); 
    }


    /* ! comingSoonPopup */
    .comingSoonPopup-C{
        top: 70vh; 
        left: 39vw; 
        transform: translateX(70vw);
    }
    .comingSoonPopup-C-title div{
        width: 23vw; 
        height: 4vw; 
        font-size: 2.5vw; 
    }
    .comingSoonPopup-C-text{
        gap: 1vw;
        width: 50vw; 
        padding: 2vw;
        padding-bottom: 1.5vw;
        border: .4vw solid #0f0f1c;
        border-radius: 1vw;
        background: linear-gradient(180deg, #819234dd, #488b3bdd 21%, #0f3824dd 70%, #083c38dd 94%);
    }
    .comingSoonPopup-C-text div:first-child{
        margin-top: 2vw; 
        font-size: 2.2vw; 
    }
    .comingSoonPopup-C-text div:last-child{
        font-size: 1.7vw; 
    }
    .comingSoonPopup-C-img{
        width: 12vw; 
        transform: translate(50vw, -3vw); 
    }

    /* ! signupArea */
    .signupArea{
        width: 100vw;
        height: auto;
        padding-top: 20vw;
    }
    .signupArea-top{
        align-items: center;
        flex-direction: column;
        margin-top: 0vw;
    }
    .signupArea-top-left{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transform: translate(0vw, -10vw);
        width: 80vw;
    }
    .signupArea-top-left-bubble{
        height: 8vw;
        margin-left: -70vw;
    }

    .signupArea-top-left-bubble div{
        width: 12vw;
        font-size: 2.5vw;
    }

    .signupArea-top-left-bubble img{
        width: 20vw;
        transform: translateX(1vw);
    }

    .signupArea-top-left-title{
        width: 80vw;
        font-size: 11vw;
        text-align: center;
        transform: skewY(-6deg) scaleY(.95) translateX(-5vw);
    }
    .signupArea-top-right{
        gap: 5vw;
        width: 80vw;
        transform: translateX(0vw);
    }
    .signupArea-top-right-title{
        width: 60vw;
        font-size: 4vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-text{
        width: 60vw;
        font-size: 2.7vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-button{
        margin-top: 1vw;
        width: 80vw;
        display: flex;
        justify-content: center;
        scale: .8; 
    }
    .signupArea-top-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .signupArea-top-right-button-border{
        width: 51vw;
        height: 13vw;
        border-radius: 7vw;
    }
    .signupArea-top-right-button-border span{
        width: 49vw;
        height: 11vw;
        border-radius: 7vw;
        font-size: 4.25vw;
    }
    .signupArea-bottom{
        margin-top: 25vw;
        scale: 1.5;
    }
    .signupArea-top-right .signupArea-top-right-button.btnHover-4 .btnHover_4{
        transform: translate(19vw, -2vw) rotate(170deg);
    }


    /* ! gamesArea */
    .gamesArea{
        padding-top: 15vw;
        padding-bottom: 5vw;
    }
    .gamesAreaC{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap; 
        flex-direction: row; 
        width: 100vw;
        gap: 5vw; 
        min-height: 40vw;
        padding-top: 4vw;
        padding-bottom: 18vw;
        padding-left: 0vw; 
    }
    .gamesArea-game{
        width: 40vw; 
        height: calc((40vw / 7 * 9) - .5vw); 
        /* background: linear-gradient(0deg, #804dde33, #c64dde77, #de4dc6dd, #de4d79); */
        clip-path: none;
    }
    .gamesArea-game:nth-child(2),
    .gamesArea-game:nth-child(5),
    .gamesArea-game:nth-child(8),
    .gamesArea-game:nth-child(11),
    .gamesArea-game:nth-child(14),
    .gamesArea-game:nth-child(17),
    .gamesArea-game:nth-child(20){
        transform: translateY(-0vw);
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-img img,
    .gamesArea-game:nth-child(5) .gamesArea-game-img img,
    .gamesArea-game:nth-child(8) .gamesArea-game-img img,
    .gamesArea-game:nth-child(11) .gamesArea-game-img img,
    .gamesArea-game:nth-child(14) .gamesArea-game-img img,
    .gamesArea-game:nth-child(17) .gamesArea-game-img img,
    .gamesArea-game:nth-child(20) .gamesArea-game-img img,
    .gamesArea-game:nth-child(2) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(5) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(8) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(11) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(14) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(17) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(20) .gamesArea-game-shadow{
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-text,
    .gamesArea-game:nth-child(5) .gamesArea-game-text,
    .gamesArea-game:nth-child(8) .gamesArea-game-text,
    .gamesArea-game:nth-child(11) .gamesArea-game-text,
    .gamesArea-game:nth-child(14) .gamesArea-game-text,
    .gamesArea-game:nth-child(17) .gamesArea-game-text,
    .gamesArea-game:nth-child(20) .gamesArea-game-text{
        transform: translate(3vw, -3vw);
    }

    .gamesArea-game:hover{ 
        scale: 1; 
    }

    .gamesArea-game-img{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        transform: translate(1vw, -1vw); 
    }
    .gamesArea-game-img img{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        clip-path: none;
    }
    .gamesArea-game-shadow{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        clip-path: none;
        transform: translate(1vw, -1vw); 
        border-radius: .5vw;
    }
    .gamesArea-game-text{
        transform: translate(3vw, -3vw); 
        font-size: 3vw; 
    }
    .gamesArea-header{
        gap: 5vw;
    }
    .gamesArea-header-title{
        width: 90vw;
        font-size: 10vw;
    }
    .gamesArea-header-text{
        font-size: 3vw; 
        text-align: center;
        width: 80vw;
        margin-bottom: 5vw;
    }
    .gamesArea-moreGame{
        width: 100vw;
        height: 30vw;
        gap: 2.5vw;
        padding-left: 3.5vw;
        border-radius: 0 0 1vw 1vw;
        transform: translateY(-15vw);
    }
    .gamesArea-moreGames-text{
        font-size: 3vw; 
        margin-top: 8vw;
    }
    .gamesArea-moreGames-button {
        padding-block: 2vw;
        padding-inline: 5vw;
        gap: 2vw;
        border: .65vw solid #c998b8;
        border-radius: 10vw;
        font-size: 3.5vw;
    }
    .gamesArea-moreGames-button .icon {
        width: 4vw;
        height: 4vw;
    }

    /* ! cardArea */
    .cardArea{
        gap: 15vw;
        width: 100vw;
        padding-top: 10vw;
        margin-bottom: 10vw;
    }
    .widecard{
        border-radius: 2vw;
    }
    .widecard-top{
        width: 83vw;
        height: 73vw;
        border-radius: 2vw;
    }
    .widecard-top .inner{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-video{
        width: 80vw;
        height: 70vw;
        border-radius: 1vw;
    }
    .inner-video video{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-textarea{
        transform: translate(2vw, -21vw);
    }
    .inner-textarea-bubble{
        transform: translate(0vw, -2.4vw);
    }
    .inner-textarea-bubble img{
        width: 25vw;
        transform: translateX(1vw);
    }
    .inner-textarea-bubble span{
        font-size: 2.4vw;
    }
    .inner-textarea-textTop{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textTop::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textTop span{
        transform: skewX(20deg);
    }
    .inner-textarea-textBot{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textBot::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textBot span{
        transform: skewX(20deg);
    }
    .widecard-bot{
        width: 83vw;
        height: 17vw;
        gap: 1vw;
        transform: translateY(-1vw);
    }
    .widecard-bot-left{
        width: 44.75vw;
        height: 15vw;
    }
    .widecard-bot-left span{
        width: 90%;
        font-size: 2.5vw;
    }
    .widecard-bot-right{
        width: 34.75vw;
        height: 15vw;
    }
    .widecard-bot-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .widecard-bot-right-button-border{
        width: 36vw;
        height: 10vw;
        border-radius: 5vw;
    }
    .widecard-bot-right-button-border span{
        width: 34vw;
        height: 8vw;
        border-radius: 6vw;
        font-size: 3.5vw;
    }
    .widecard:nth-child(2) .widecard-bot-left span{
        width: 90%;
    }


    .verticalCardArea{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15vw;
    }
    .verticalCard{
        width: 70vw;
        gap: 1vw;
    }
    .verticalCard-imgArea{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .verticalCard-img{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .bubble{
        transform: translate(-5vw, -6vw);
    }
    .verticalCard-imgArea .bubble img{
        width: 24vw;
        transform: translate(5vw, -1vw);
    }
    .verticalCard-imgArea .bubble span{
        width: 8vw;
        font-size: 3vw;
    }
    .verticalCard-textArea{
        width: 70vw;
        height: 30vw;
        gap: 1.5vw;
        border-radius: 1vw;
        padding-top: 2vw;
    }
    .verticalCard-textArea-text{
        font-size: 3.5vw;
    }
    .verticalCard:nth-child(1)  .verticalCard-img{
        object-position: 52% center
    }
    .verticalCard:nth-child(2)  .verticalCard-img{
        object-position: 53% center
    }
    .verticalCard:nth-child(3)  .verticalCard-img{
        object-position: 80% center
    }

    /* ! planetBottom */
    .planetBottom img{
        scale: 1.4;
        padding-bottom: 20vw;
    }

    /* ! playButton */
    .gamePage-game-playButton{
        width: 62vw;
        height: auto;
        padding-bottom: 5vw;
        left: calc((100vw - 62vw - 2vw) / 2);
        top: calc((100vh - 32vh - 2vw) / 2);
        background: #1f1f2c;
        border: 5px solid #4f4f5c;
        border-radius: 1.5vw;
        gap: 3vw;
    }
    .gamePage-game-playButton-img{
        width: 14vw;
        height: 14vw;
        margin-top: 2vh;
    }
    .gamePage-game-playButton-img img{
        width: 14vw;
        height: 14vw;
    }
    .gamePage-game-playButton-loading{
        gap: 1.5vw;
    }
    .gamePage-game-playButton-loading div{
        width: 4.5vw;
        height: 4.5vw;
        border-radius: .75vw;
        margin-top: 3vw;
    }
    .gamePage-game-playButton-title{
        font-size: 2vw;
    }
    .gamePage-game-playButton-button{
        width: 28vw;
        height: 5vw;
        font-size: 2vw;
        border-radius: 1vw;
    }
    .gamePage-game-playButton-buttonShadow{
        width: 29vw;
        height: 6vw;
        border-radius: 1vw;
    }
    .gamePage-game-playButton-button:hover .gamePage-game-playButton-buttonShadow{
        width: 30vw;
        height: 7vw;
    }
}




@media screen and (max-width: 768px) {

    /* ! assetArea */
    .assetsArea{
        width: 100vw;
        height: 100vh;
        gap: 1vh;
        transform: translate(0vw, 0vw) scale(2.86);
    }
    .assetsArea-top{
        gap: 1vh;
    }
    .assetsArea-mid{
        gap: 1vh;
    }
    .assetsArea-bot{
        gap: 1vh;
    }

    .assetsArea-top .img1{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-top .img2{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img3{
        position: absolute;
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh;
        transform: translateY(16.25vh);
    }
    .assetsArea-top .img4{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-mid .img1{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translateY(-7.5vh);
    }
    .assetsArea-mid .img2{
        position: absolute;
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translate(-35vw, 7.5vh);
    }
    .assetsArea-mid .img3{
        position: absolute;
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translate(35vw, -7.5vh);
    }
    .assetsArea-mid .img4{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh;
        transform: translateY(7.5vh);
    }

    .assetsArea-bot .img1{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img2{
        position: absolute;
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh;
        transform: translateY(-16.25vh);
    }
    .assetsArea-bot .img3{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img4{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-top .img1 img{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-top .img2 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img3 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-top .img4 video{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    .assetsArea-mid .img1 video{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img2 img{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img3 video{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-mid .img4 img{
        width: 31.5vw;
        height: 14vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img1 img{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img2 video{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img3 img{
        width: 35vw;
        height: 15.25vh;
        border-radius: 1vh
    }
    .assetsArea-bot .img4 video{
        width: 31.5vw;
        height: 34.5vh;
        border-radius: 1vh
    }

    /* ! introArea */
    .introAreaC{
        width: 35vw;
        height: 29vh;
    }
    .introArea{
        width: 35vw;
        height: 35vh;
        border-radius: 1vh;
    }
    .introArea-content{
        transform: translateY(-2vw);
    }
    .introArea h1{
        font-size: 3vw; 
        transform: translateX(-2vw); 
    }
    .introArea-subtitle{
        font-size: 1vw; 
        font-weight: 500;
        margin-top: 1vw;
        width: 33vw; 
    }
    .introArea-button img{
        width: 1.5vw; 
        height: 1.5vw; 
        transform: translate(15vw, -4.5vw) rotate(0deg); 
    }
    .introArea-button-border{
        width: 18vw; 
        height: 4vw; 
        border-radius: 5vw;
    }
    .introArea-button-border span{
        width: 17.5vw; 
        height: 3.25vw; 
        border-radius: 4vw;
        font-size: 1.5vw; 
    }
    .introArea-button.btnHover-1 .btnHover_1{
        transform: translate(15vw, -4.5vw) rotate(170deg); 
    }
    

    /* ! comingSoonPopup */
    .comingSoonPopup-C{
        top: 70vh; 
        left: 39vw; 
        transform: translateX(70vw);
    }
    .comingSoonPopup-C-title div{
        width: 23vw; 
        height: 4vw; 
        font-size: 2.5vw; 
    }
    .comingSoonPopup-C-text{
        gap: 1vw;
        width: 50vw; 
        padding: 2vw;
        padding-bottom: 1.5vw;
        border: .4vw solid #0f0f1c;
        border-radius: 1vw;
        background: linear-gradient(180deg, #819234dd, #488b3bdd 21%, #0f3824dd 70%, #083c38dd 94%);
    }
    .comingSoonPopup-C-text div:first-child{
        margin-top: 2vw; 
        font-size: 2.2vw; 
    }
    .comingSoonPopup-C-text div:last-child{
        font-size: 1.7vw; 
    }
    .comingSoonPopup-C-img{
        width: 12vw; 
        transform: translate(50vw, -3vw); 
    }

    /* ! signupArea */
    .signupArea{
        width: 100vw;
        height: auto;
        padding-top: 20vw;
    }
    .signupArea-top{
        align-items: center;
        flex-direction: column;
        margin-top: 0vw;
    }
    .signupArea-top-left{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transform: translate(0vw, -10vw);
        width: 80vw;
    }
    .signupArea-top-left-bubble{
        height: 8vw;
        margin-left: -70vw;
    }

    .signupArea-top-left-bubble div{
        width: 12vw;
        font-size: 2.5vw;
    }

    .signupArea-top-left-bubble img{
        width: 20vw;
        transform: translateX(1vw);
    }

    .signupArea-top-left-title{
        width: 80vw;
        font-size: 11vw;
        text-align: center;
        transform: skewY(-6deg) scaleY(.95) translateX(-5vw);
    }
    .signupArea-top-right{
        gap: 5vw;
        width: 80vw;
        transform: translateX(0vw);
    }
    .signupArea-top-right-title{
        width: 60vw;
        font-size: 4vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-text{
        width: 60vw;
        font-size: 2.7vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-button{
        margin-top: 1vw;
        width: 80vw;
        display: flex;
        justify-content: center;
        scale: .8; 
    }
    .signupArea-top-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .signupArea-top-right-button-border{
        width: 51vw;
        height: 13vw;
        border-radius: 7vw;
    }
    .signupArea-top-right-button-border span{
        width: 49vw;
        height: 11vw;
        border-radius: 7vw;
        font-size: 4.25vw;
    }
    .signupArea-bottom{
        margin-top: 25vw;
        scale: 1.5;
    }
    .signupArea-top-right .signupArea-top-right-button.btnHover-4 .btnHover_4{
        transform: translate(19vw, -2vw) rotate(170deg);
    }


    /* ! gamesArea */
    .gamesArea{
        padding-top: 15vw;
        padding-bottom: 5vw;
    }
    .gamesAreaC{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap; 
        flex-direction: row; 
        width: 100vw;
        gap: 5vw; 
        min-height: 40vw;
        padding-top: 4vw;
        padding-bottom: 18vw;
        padding-left: 0vw; 
    }
    .gamesArea-game{
        width: 40vw; 
        height: calc((40vw / 7 * 9) - .5vw); 
        /* background: linear-gradient(0deg, #804dde33, #c64dde77, #de4dc6dd, #de4d79); */
        clip-path: none;
    }
    .gamesArea-game:nth-child(2),
    .gamesArea-game:nth-child(5),
    .gamesArea-game:nth-child(8),
    .gamesArea-game:nth-child(11),
    .gamesArea-game:nth-child(14),
    .gamesArea-game:nth-child(17),
    .gamesArea-game:nth-child(20){
        transform: translateY(-0vw);
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-img img,
    .gamesArea-game:nth-child(5) .gamesArea-game-img img,
    .gamesArea-game:nth-child(8) .gamesArea-game-img img,
    .gamesArea-game:nth-child(11) .gamesArea-game-img img,
    .gamesArea-game:nth-child(14) .gamesArea-game-img img,
    .gamesArea-game:nth-child(17) .gamesArea-game-img img,
    .gamesArea-game:nth-child(20) .gamesArea-game-img img,
    .gamesArea-game:nth-child(2) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(5) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(8) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(11) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(14) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(17) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(20) .gamesArea-game-shadow{
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-text,
    .gamesArea-game:nth-child(5) .gamesArea-game-text,
    .gamesArea-game:nth-child(8) .gamesArea-game-text,
    .gamesArea-game:nth-child(11) .gamesArea-game-text,
    .gamesArea-game:nth-child(14) .gamesArea-game-text,
    .gamesArea-game:nth-child(17) .gamesArea-game-text,
    .gamesArea-game:nth-child(20) .gamesArea-game-text{
        transform: translate(3vw, -3vw);
    }

    .gamesArea-game:hover{ 
        scale: 1; 
    }

    .gamesArea-game-img{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        transform: translate(1vw, -1vw); 
    }
    .gamesArea-game-img img{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        clip-path: none;
    }
    .gamesArea-game-shadow{
        width: 38vw; 
        height: calc(38vw / 7 * 9); 
        clip-path: none;
        transform: translate(1vw, -1vw); 
        border-radius: .5vw;
    }
    .gamesArea-game-text{
        transform: translate(3vw, -3vw); 
        font-size: 3vw; 
    }
    .gamesArea-header{
        gap: 5vw;
    }
    .gamesArea-header-title{
        width: 90vw;
        font-size: 10vw;
    }
    .gamesArea-header-text{
        font-size: 3vw; 
        text-align: center;
        width: 80vw;
        margin-bottom: 5vw;
    }
    .gamesArea-moreGame{
        width: 100vw;
        height: 30vw;
        gap: 2.5vw;
        padding-left: 3.5vw;
        border-radius: 0 0 1vw 1vw;
        transform: translateY(-15vw);
    }
    .gamesArea-moreGames-text{
        font-size: 3vw; 
        margin-top: 8vw;
    }
    .gamesArea-moreGames-button {
        padding-block: 2vw;
        padding-inline: 5vw;
        gap: 2vw;
        border: .65vw solid #c998b8;
        border-radius: 10vw;
        font-size: 3.5vw;
    }
    .gamesArea-moreGames-button .icon {
        width: 4vw;
        height: 4vw;
    }

    /* ! cardArea */
    .cardArea{
        gap: 15vw;
        width: 100vw;
        padding-top: 10vw;
        margin-bottom: 10vw;
    }
    .widecard{
        border-radius: 2vw;
    }
    .widecard-top{
        width: 83vw;
        height: 73vw;
        border-radius: 2vw;
    }
    .widecard-top .inner{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-video{
        width: 80vw;
        height: 70vw;
        border-radius: 1vw;
    }
    .inner-video video{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-textarea{
        transform: translate(2vw, -21vw);
    }
    .inner-textarea-bubble{
        transform: translate(0vw, -2.4vw);
    }
    .inner-textarea-bubble img{
        width: 25vw;
        transform: translateX(1vw);
    }
    .inner-textarea-bubble span{
        font-size: 2.4vw;
    }
    .inner-textarea-textTop{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textTop::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textTop span{
        transform: skewX(20deg);
    }
    .inner-textarea-textBot{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textBot::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textBot span{
        transform: skewX(20deg);
    }
    .widecard-bot{
        width: 83vw;
        height: 17vw;
        gap: 1vw;
        transform: translateY(-1vw);
    }
    .widecard-bot-left{
        width: 44.75vw;
        height: 15vw;
    }
    .widecard-bot-left span{
        width: 90%;
        font-size: 2.5vw;
    }
    .widecard-bot-right{
        width: 34.75vw;
        height: 15vw;
    }
    .widecard-bot-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .widecard-bot-right-button-border{
        width: 36vw;
        height: 10vw;
        border-radius: 5vw;
    }
    .widecard-bot-right-button-border span{
        width: 34vw;
        height: 8vw;
        border-radius: 6vw;
        font-size: 3.5vw;
    }
    .widecard:nth-child(2) .widecard-bot-left span{
        width: 90%;
    }


    .verticalCardArea{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15vw;
    }
    .verticalCard{
        width: 70vw;
        gap: 1vw;
    }
    .verticalCard-imgArea{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .verticalCard-img{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .bubble{
        transform: translate(-5vw, -6vw);
    }
    .verticalCard-imgArea .bubble img{
        width: 24vw;
        transform: translate(5vw, -1vw);
    }
    .verticalCard-imgArea .bubble span{
        width: 8vw;
        font-size: 3vw;
    }
    .verticalCard-textArea{
        width: 70vw;
        height: 30vw;
        gap: 1.5vw;
        border-radius: 1vw;
        padding-top: 2vw;
    }
    .verticalCard-textArea-text{
        font-size: 3.5vw;
    }
    .verticalCard:nth-child(1)  .verticalCard-img{
        object-position: 52% center
    }
    .verticalCard:nth-child(2)  .verticalCard-img{
        object-position: 53% center
    }
    .verticalCard:nth-child(3)  .verticalCard-img{
        object-position: 80% center
    }

    /* ! planetBottom */
    .planetBottom img{
        scale: 1.4;
        padding-bottom: 20vw;
    }

    
    /* ! playButton */
    .gamePage-game-playButton{
        width: 72vw;
        height: auto;
        padding-bottom: 5vw;
        left: calc((100vw - 72vw - 2vw) / 2);
        top: calc((100vh - 32vh - 2vw) / 2);
        background: #1f1f2c;
        border: 5px solid #4f4f5c;
        border-radius: 1.5vw;
        gap: 5vw;
    }
    .gamePage-game-playButton-img{
        width: 18vw;
        height: 18vw;
        margin-top: 3vh;
    }
    .gamePage-game-playButton-img img{
        width: 18vw;
        height: 18vw;
    }
    .gamePage-game-playButton-loading{
        gap: 2vw;
    }
    .gamePage-game-playButton-loading div{
        width: 6vw;
        height: 6vw;
        border-radius: 1vw;
        margin-top: 5vw;
    }
    .gamePage-game-playButton-title{
        font-size: 2.5vw;
    }
    .gamePage-game-playButton-button{
        width: 33vw;
        height: 7vw;
        font-size: 2.5vw;
        border-radius: 1.5vw;
    }
    .gamePage-game-playButton-buttonShadow{
        width: 34vw;
        height: 8vw;
        border-radius: 1.5vw;
    }
    .gamePage-game-playButton-button:hover .gamePage-game-playButton-buttonShadow{
        width: 35vw;
        height: 9vw;
    }
}





@media screen and (max-width: 575px) {
    /* ! assetArea */
    .assetsArea,
    .assetsArea-top,
    .assetsArea-mid,
    .assetsArea-bot{
        display: none;
    }

    /* ! introArea */
    .introAreaC.mobile{
        display: flex;
        width: 100vw;
        height: 100vh;
    }
    .introAreaC.mobile .introArea{
        width: 100vw;
        height: 100vh;
        border-radius: 1vh;
    }
    .introAreaC.mobile .introArea-content{
        transform: translateY(0vw);
        scale: 2.857;
    }
    .introAreaC.mobile .introArea h1{
        display: flex;
        font-family: disp;
        font-size: 3.5vw;
        transform: translateX(-4vw);
    }
    .introAreaC.mobile .introArea-subtitle{
        font-size: 1.25vw;
        font-weight: 500;
        margin-top: 1vw;
    }
    .introAreaC.mobile .introArea-button img{
        width: 2vw;
        height: 2vw;
        transform: translate(17vw, -6vw) rotate(0deg);
    }
    .introAreaC.mobile .introArea-button-border{
        width: 21vw;
        height: 5vw;
        border-radius: 5vw;
    }
    .introAreaC.mobile .introArea-button-border span{
        width: 20vw;
        height: 4vw;
        border-radius: 4vw;
        font-size: 1.75vw;
    }
    .introAreaC.mobile .introArea-button.btnHover-1 .btnHover_1{
        transform: translate(17vw, -6vw) rotate(170deg);
    }
    .introAreaC.mobile .introArea-content .backgorund-video{
        width: 36vw;
        border-radius: 20px;
    }
    .introAreaC.mobile .introArea-content .backgorund-video video{
        width: 36vw;
        border-radius: 20px;
    }
    
    /* ! comingSoonPopup */
    .comingSoonPopup-C{
        display: none;
        top: 75vh;
        left: 30.55vw;
        transform: translateX(70vw);
    }
    .comingSoonPopup-C-title div{
        width: 23vw;
        height: 6vw;
        font-size: 3vw;
    }
    .comingSoonPopup-C-text{
        gap: 1vw;
        width: 60vw;
        padding: 2vw;
        padding-bottom: 1.5vw;
        border: .4vw solid #0f0f1c;
        border-radius: 1vw;
        background: linear-gradient(180deg, #819234dd, #488b3bdd 21%, #0f3824dd 70%, #083c38dd 94%);
    }
    .comingSoonPopup-C-text div:first-child{
        margin-top: 2.7vw;
        font-size: 3.5vw;
    }
    .comingSoonPopup-C-text div:last-child{
        font-size: 3vw;
    }
    .comingSoonPopup-C-img{
        width: 15vw;
        transform: translate(59vw, -3vw);
    }

    /* ! signupArea */
    .signupArea{
        width: 100vw;
        height: auto;
        padding-top: 20vw;
        margin-top: 20vw;
    }
    .signupArea-top{
        align-items: center;
        flex-direction: column;
        margin-top: 0vw;
    }
    .signupArea-top-left{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transform: translate(0vw, -10vw);
        width: 80vw;
    }
    .signupArea-top-left-bubble{
        height: 8vw;
        margin-left: -70vw;
    }

    .signupArea-top-left-bubble div{
        width: 12vw;
        font-size: 2.5vw;
    }

    .signupArea-top-left-bubble img{
        width: 20vw;
        transform: translateX(1vw);
    }

    .signupArea-top-left-title{
        width: 80vw;
        font-size: 11vw;
        text-align: center;
        transform: skewY(-6deg) scaleY(.95) translateX(-5vw);
    }
    .signupArea-top-right{
        gap: 5vw;
        width: 80vw;
        transform: translateX(0vw);
    }
    .signupArea-top-right-title{
        width: 60vw;
        font-size: 4vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-text{
        width: 60vw;
        font-size: 2.7vw;
        text-align: center;
        margin-inline: 10vw;
    }
    .signupArea-top-right-button{
        margin-top: 1vw;
        width: 80vw;
        display: flex;
        justify-content: center;
    }
    .signupArea-top-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .signupArea-top-right-button-border{
        width: 51vw;
        height: 13vw;
        border-radius: 7vw;
    }
    .signupArea-top-right-button-border span{
        width: 49vw;
        height: 11vw;
        border-radius: 7vw;
        font-size: 4.25vw;
    }
    .signupArea-bottom{
        margin-top: 25vw;
        scale: 1.5;
    }
    .signupArea-top-right .signupArea-top-right-button.btnHover-4 .btnHover_4{
        transform: translate(19vw, -2vw) rotate(170deg);
    }


    /* ! gamesArea */
    .gamesArea{
        padding-top: 15vw;
        padding-bottom: 5vw;
    }
    .gamesAreaC{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
        width: 100vw;
        gap: 10vw;
        min-height: 40vw;
        padding-top: 4vw;
        padding-bottom: 18vw;
        padding-left: 3.5vw;
    }
    .gamesArea-game{
        width: 81vw;
        height: calc((81vw / 10 * 9) + 1vw);
        /* background: linear-gradient(0deg, #804dde33, #c64dde77, #de4dc6dd, #de4d79); */
        clip-path: none;
    }
    .gamesArea-game:nth-child(2),
    .gamesArea-game:nth-child(5),
    .gamesArea-game:nth-child(8),
    .gamesArea-game:nth-child(11),
    .gamesArea-game:nth-child(14),
    .gamesArea-game:nth-child(17),
    .gamesArea-game:nth-child(20){
        transform: translateY(-0vw);
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-img img,
    .gamesArea-game:nth-child(5) .gamesArea-game-img img,
    .gamesArea-game:nth-child(8) .gamesArea-game-img img,
    .gamesArea-game:nth-child(11) .gamesArea-game-img img,
    .gamesArea-game:nth-child(14) .gamesArea-game-img img,
    .gamesArea-game:nth-child(17) .gamesArea-game-img img,
    .gamesArea-game:nth-child(20) .gamesArea-game-img img,
    .gamesArea-game:nth-child(2) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(5) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(8) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(11) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(14) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(17) .gamesArea-game-shadow,
    .gamesArea-game:nth-child(20) .gamesArea-game-shadow{
        clip-path: none;
    }
    .gamesArea-game:nth-child(2) .gamesArea-game-text,
    .gamesArea-game:nth-child(5) .gamesArea-game-text,
    .gamesArea-game:nth-child(8) .gamesArea-game-text,
    .gamesArea-game:nth-child(11) .gamesArea-game-text,
    .gamesArea-game:nth-child(14) .gamesArea-game-text,
    .gamesArea-game:nth-child(17) .gamesArea-game-text,
    .gamesArea-game:nth-child(20) .gamesArea-game-text{
        transform: translate(4vw, -4vw);
    }
    .gamesArea-game-img{
        width: 77vw;
        height: calc(77vw / 10 * 9);
        transform: translate(2vw, -2vw);
    }
    .gamesArea-game-img img{
        width: 77vw;
        height: calc(77vw / 10 * 9);
        clip-path: none;
    }
    .gamesArea-game-shadow{
        width: 77vw;
        height: calc(77vw / 10 * 9);
        clip-path: none;
        transform: translate(2vw, -2vw);
        border-radius: .5vw;
    }
    .gamesArea-game-text{
        transform: translate(4vw, -4vw);
        font-size: 6vw;
    }
    .gamesArea-header{
        gap: 5vw;
    }
    .gamesArea-header-title{
        width: 90vw;
        font-size: 10vw;
    }
    .gamesArea-header-text{
        font-size: 5vw;
        text-align: center;
        width: 80vw;
        margin-bottom: 5vw;
    }
    .gamesArea-moreGame{
        width: 100vw;
        height: 30vw;
        gap: 2.5vw;
        padding-left: 3.5vw;
        border-radius: 0 0 1vw 1vw;
        transform: translateY(-15vw);
    }
    .gamesArea-moreGames-text{
        font-size: 4vw;
        margin-top: 8vw;
    }
    .gamesArea-moreGames-button {
        padding-block: 2vw;
        padding-inline: 5vw;
        gap: 2vw;
        border: .65vw solid #c998b8;
        border-radius: 10vw;
        font-size: 3.5vw;
    }
    .gamesArea-moreGames-button .icon {
        width: 4vw;
        height: 4vw;
    }

    /* ! cardArea */
    .cardArea{
        gap: 15vw;
        width: 100vw;
        padding-top: 10vw;
        margin-bottom: 10vw;
    }
    .widecard{
        border-radius: 2vw;
    }
    .widecard-top{
        width: 83vw;
        height: 73vw;
        border-radius: 2vw;
    }
    .widecard-top .inner{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-video{
        width: 80vw;
        height: 70vw;
        border-radius: 1vw;
    }
    .inner-video video{
        width: 80vw;
        height: 70vw;
        border-radius: 2vw;
    }
    .inner-textarea{
        transform: translate(2vw, -21vw);
    }
    .inner-textarea-bubble{
        transform: translate(0vw, -2.4vw);
    }
    .inner-textarea-bubble img{
        width: 25vw;
        transform: translateX(1vw);
    }
    .inner-textarea-bubble span{
        font-size: 2.4vw;
    }
    .inner-textarea-textTop{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textTop::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textTop span{
        transform: skewX(20deg);
    }
    .inner-textarea-textBot{
        padding-left: 2.25vw;
        font-size: 6vw;
    }
    .inner-textarea-textBot::before{
        width: calc(100% - 2vw);
        height: calc(100% - .5vw);
        border-radius: 1vw;
        transform: translate(-1vw, -.5vw);
    }
    .inner-textarea-textBot span{
        transform: skewX(20deg);
    }
    .widecard-bot{
        width: 83vw;
        height: 17vw;
        gap: 1vw;
        transform: translateY(-1vw);
    }
    .widecard-bot-left{
        width: 44.75vw;
        height: 15vw;
    }
    .widecard-bot-left span{
        width: 90%;
        font-size: 2.5vw;
    }
    .widecard-bot-right{
        width: 34.75vw;
        height: 15vw;
    }
    .widecard-bot-right-button img{
        width: 4vw;
        height: 4vw;
        transform: translate(19vw, -2vw) rotate(0deg);
    }
    .widecard-bot-right-button-border{
        width: 36vw;
        height: 10vw;
        border-radius: 5vw;
    }
    .widecard-bot-right-button-border span{
        width: 34vw;
        height: 8vw;
        border-radius: 6vw;
        font-size: 3.5vw;
    }
    .widecard:nth-child(2) .widecard-bot-left span{
        width: 90%;
    }
    .verticalCardArea{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 15vw;
    }
    .verticalCard{
        width: 70vw;
        gap: 1vw;
    }
    .verticalCard-imgArea{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .verticalCard-img{
        width: 70vw;
        height: 90vw;
        border-radius: 2vw;
    }
    .verticalCard-imgArea .bubble{
        transform: translate(-5vw, -6vw);
    }
    .verticalCard-imgArea .bubble img{
        width: 24vw;
        transform: translate(5vw, -1vw);
    }
    .verticalCard-imgArea .bubble span{
        width: 8vw;
        font-size: 3vw;
    }
    .verticalCard-textArea{
        width: 70vw;
        height: 30vw;
        gap: 1.5vw;
        border-radius: 1vw;
        padding-top: 2vw;
    }
    .verticalCard-textArea-text{
        font-size: 3.5vw;
    }
    .verticalCard:nth-child(1)  .verticalCard-img{
        object-position: 52% center
    }
    .verticalCard:nth-child(2)  .verticalCard-img{
        object-position: 53% center
    }
    .verticalCard:nth-child(3)  .verticalCard-img{
        object-position: 80% center
    }

    /* ! planetBottom */
    .planetBottom img{
        scale: 1.4;
        padding-bottom: 20vw;
    }

    /* ! playButton */
    .gamePage-game-playButton{
        width: 82vw;
        height: auto;
        padding-bottom: 5vw;
        left: calc((100vw - 82vw - 2vw) / 2);
        top: calc((100vh - 32vh - 2vw) / 2);
        background: #1f1f2c;
        border: 5px solid #4f4f5c;
        border-radius: 1.5vw;
        gap: 5vw;
    }
    .gamePage-game-playButton-img{
        width: 22vw;
        height: 22vw;
        margin-top: 3vh;
    }
    .gamePage-game-playButton-img img{
        width: 22vw;
        height: 22vw;
    }
    .gamePage-game-playButton-loading{
        gap: 3vw;
    }
    .gamePage-game-playButton-loading div{
        width: 8vw;
        height: 8vw;
        border-radius: 1.5vw;
        margin-top: 5vw;
    }
    .gamePage-game-playButton-title{
        font-size: 3.5vw;
    }
    .gamePage-game-playButton-button{
        width: 40vw;
        height: 9vw;
        font-size: 4vw;
        border-radius: 2vw;
    }
    .gamePage-game-playButton-buttonShadow{
        width: 41vw;
        height: 10vw;
        border-radius: 2vw;
    }
    .gamePage-game-playButton-button:hover .gamePage-game-playButton-buttonShadow{
        width: 42vw;
        height: 11vw;
    }
    
}


@media screen and (max-height: 1400px) {
    .deadLine0{
        height: 175vh;
    }
}
@media screen and (max-height: 1300px) {
    .deadLine0{
        height: 185vh;
    }
}
@media screen and (max-height: 1200px) {
    .deadLine0{
        height: 195vh;
    }
}
@media screen and (max-height: 1100px) {
    .deadLine0{
        height: 205vh;
    }
}
@media screen and (max-height: 1000px) {
    .deadLine0{
        height: 215vh;
    }
}
@media screen and (max-height: 900px) {
    .deadLine0{
        height: 225vh;
    }
}
@media screen and (max-height: 800px) {
    .deadLine0{
        height: 245vh;
    }
}
@media screen and (max-height: 700px) {
    .deadLine0{
        height: 270vh;
    }
}
@media screen and (max-height: 600px) {
    .deadLine0{
        height: 300vh;
    }
}
@media screen and (max-height: 500px) {
    .deadLine0{
        height: 315vh;
    }
}
@media screen and (max-height: 400px) {
    .deadLine0{
        height: 330vh;
    }
}
@media screen and (max-height: 300px) {
    .deadLine0{
        height: 345vh;
    }
}
@media screen and (max-height: 200px) {
    .deadLine0{
        height: 365vh;
    }
}
@media screen and (max-height: 100px) {
    .deadLine0{
        height: 390vh;
    }
}
@media screen and (max-height: 30px) {
    .deadLine0{
        height: 415vh;
    }
}
@media screen and (max-height: 3000px) and (max-width: 575px) {
    .deadLine0{
        height: 0;
    }
}