@import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@700&family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  height: 100%;
}


body {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  min-width: 320px;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
  position: relative;
  background-color: #000000;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  outline: none;
}


.game {
    max-width: 500px;
    margin: 0 auto;
    background-image: url('../img/webp/bg.webp');
    background-position: 0 -45px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: relative;
    z-index: 2;
}

.game::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url('../img/webp/cash.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 120px;

}

.game-logo {
    max-width: 215px;
    margin: 0 auto ;
    display: block;
}

.scoreboard {
    width: 115px;
    height: 48px;
    border-radius: 15px;
    background: #D9D9D9;
    text-align: center;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #FDB900;
    font-family: "Bangers";
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.game-content {
    background-image: url('../img/webp/popup.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.game-content__title {
    color: #FDB900;
    text-align: center;
    font-family: "Bangers";
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000;
}

.game-content__title:nth-child(1) {
    -webkit-transform: rotate(-18deg) translate(-129px,32px);
        -ms-transform: rotate(-18deg) translate(-129px,32px);
            transform: rotate(-18deg) translate(-129px,32px);
}
.game-content__title:nth-child(2) {
    -webkit-transform: rotate(-18deg) translate(-25px,24px);
        -ms-transform: rotate(-18deg) translate(-25px,24px);
            transform: rotate(-18deg) translate(-25px,24px);
}

.game-content__prize {
    color: #FF427F;
    text-align: center;
    font-family: "Bangers";
    font-size: 130px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000;
    -webkit-transform: rotate(-11deg) translate(-20px,42px);
        -ms-transform: rotate(-11deg) translate(-20px,42px);
            transform: rotate(-11deg) translate(-20px,42px);
    margin-bottom: 70px;
}

.game-content__fs {
    color: #FF427F;
    text-align: center;
    font-family: "Bangers";
    font-size: 110px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000;
    -webkit-transform: rotate(-11deg) translate(-11px,7px);
        -ms-transform: rotate(-11deg) translate(-11px,7px);
            transform: rotate(-11deg) translate(-11px,7px);


}

.game-content__subtitle {
    color: #FDB900;
    text-align: center;
    font-family: 'Bangers';
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000;
    -webkit-transform: rotate(-18deg) translate(55px,24px);
        -ms-transform: rotate(-18deg) translate(55px,24px);
            transform: rotate(-18deg) translate(55px,24px);
}

.game-content__subtitle:last-child {
    -webkit-transform: rotate(-18deg) translate(142px,16px);
        -ms-transform: rotate(-18deg) translate(142px,16px);
            transform: rotate(-18deg) translate(142px,16px)
}

.btn {
    background-image: url('../img/webp/btn.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 275px;
    height: 76.389px;
    color: #FFF;

    text-align: center;
    font-family: 'Baloo Tammudu 2';
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    letter-spacing: -2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 16px;
    margin: 0 auto;
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;

}
.game-pers {
    position: absolute;
    height: 375px;
    width: 327px;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.pulsate {
    -webkit-animation: pulsate-bck .5s ease-in-out infinite both;
            animation: pulsate-bck .5s ease-in-out infinite both;
}

.timer {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.timer-item {
    width: 35px;
    height: 45px;
    background-color: #eee;
    font-family: 'Roboto';
    font-size: 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer--h:nth-child(2) {
    margin-right: 15px;
}

.timer--s:nth-child(5) {
    margin-left: 15px;
}

@-webkit-keyframes pulsate-bck {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulsate-bck {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}


@media (max-height: 875px ) and (min-width: 530px)  {
    .game-content {
        max-height: 400px;
    }
    .game-content__title {
        font-size: 52px;
    }
    .game-content__title:nth-child(1) {
        transform: rotate(-18deg) translate(-129px,18px);
    }
    .game-content__title:nth-child(2) {
        transform: rotate(-18deg) translate(-37px,14px);
    }
    .game-content__prize {
        font-size: 95px;
    }
    .game-content__fs {
        font-size: 85px;
        transform: rotate(-11deg) translate(-11px,20px);
    }
    .game-content__subtitle {
        font-size: 50px;
        transform: rotate(-18deg) translate(62px,24px);
    }
}

@media (max-height: 785px ) and (min-width: 530px)  {
    .game-content {
        max-height: 319px;
    }
    .game-content__title {
        font-size: 42px;
    }
    .game-content__title:nth-child(1) {
        transform: rotate(-18deg) translate(-121px,18px);
    }
    .game-content__title:nth-child(2) {
        transform: rotate(-18deg) translate(-45px,14px);
    } 
    .game-content__prize {
        font-size: 75px;
        transform: rotate(-11deg) translate(-28px,21px);
    }
    .game-content__fs {
        font-size: 75px;
        transform: rotate(-11deg) translate(-18px,2px);
    }
    .game-content__subtitle {
        font-size: 46px;
        transform: rotate(-18deg) translate(70px,19px);
    }
    .game-content__subtitle:last-child {
        transform: rotate(-18deg) translate(142px,11px);
    }
}

@media (max-height: 705px ) and (min-width: 530px)  {
    .game-pers {
        height: 283px;
        width: 259px;
    }
}



@media (max-width: 500px) {
    .game-content__title {
        font-size: 12vw;
    }
    .game-content__prize {
        font-size: 24vw;
    }
    .game-content__fs {
        font-size: 22vw;
    }
    .game-content__subtitle {
        font-size: 11vw;
    }
    .game {
        background-position: 0 0;
    }


    .game-content__title:nth-child(1) {
        -webkit-transform: rotate(-18deg) translate(-25vw,7vw);
            -ms-transform: rotate(-18deg) translate(-25vw,7vw);
                transform: rotate(-18deg) translate(-25vw,7vw);
    }
    .game-content__title:nth-child(2) {
        -webkit-transform: rotate(-18deg) translate(-5vw,5vw);
            -ms-transform: rotate(-18deg) translate(-5vw,5vw);
                transform: rotate(-18deg) translate(-5vw,5vw);
    }
    .game-content__prize {
        -webkit-transform: rotate(-11deg) translate(-3vw,9vw);
            -ms-transform: rotate(-11deg) translate(-3vw,9vw);
                transform: rotate(-11deg) translate(-3vw,9vw);
    }
    .game-content__fs {
        -webkit-transform: rotate(-11deg) translate(-2vw,2vw);
            -ms-transform: rotate(-11deg) translate(-2vw,2vw);
                transform: rotate(-11deg) translate(-2vw,2vw);
    }
    .game-content__subtitle {
        -webkit-transform: rotate(-18deg) translate(11vw,5vw);
            -ms-transform: rotate(-18deg) translate(11vw,5vw);
                transform: rotate(-18deg) translate(11vw,5vw);
    }
    .game-content__subtitle:last-child {
        -webkit-transform: rotate(-18deg) translate(27vw,3vw);
            -ms-transform: rotate(-18deg) translate(27vw,3vw);
                transform: rotate(-18deg) translate(27vw,3vw);
    }
}

@media (max-width: 460px) {
    .game-content__title,
    .game-content__subtitle {
        text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    }
}

@media (max-height: 790px) and (max-width: 500px) {
    .game::before {
        height: 65px;
        /* height: 70px; */
    }
    .btn {
        bottom: 46px;
    }
    .game {
        background-size: cover;
        background-position: 0 -95px;
    }



    .game-content {
        height: 282px;
    }
    .game-content__title {
        font-size: 10.5vw;
    }
    .game-content__title:nth-child(1) {
        -webkit-transform: rotate(-18deg) translate(-23vw,4vw);
            -ms-transform: rotate(-18deg) translate(-23vw,4vw);
                transform: rotate(-18deg) translate(-23vw,4vw);
    }
    .game-content__title:nth-child(2) {
        -webkit-transform: rotate(-18deg) translate(-6vw,2.3vw);
            -ms-transform: rotate(-18deg) translate(-6vw,2.3vw);
                transform: rotate(-18deg) translate(-6vw,2.3vw);
    }
    .game-content__prize {
        -webkit-transform: rotate(-11deg) translate(-2vw,8vw);
            -ms-transform: rotate(-11deg) translate(-2vw,8vw);
                transform: rotate(-11deg) translate(-2vw,8vw);
        font-size: 20vw;
    }
    .game-content__fs {
        -webkit-transform: rotate(-11deg) translate(0vw,0vw);
            -ms-transform: rotate(-11deg) translate(0vw,0vw);
                transform: rotate(-11deg) translate(0vw,0vw);
        font-size: 16vw;
    }
    .game-content__subtitle {
        -webkit-transform: rotate(-18deg) translate(14vw,2vw);
            -ms-transform: rotate(-18deg) translate(14vw,2vw);
                transform: rotate(-18deg) translate(14vw,2vw);
        font-size: 10vw;
    }
    .game-content__subtitle:last-child {
        -webkit-transform: rotate(-18deg) translate(30vw,0vw);
            -ms-transform: rotate(-18deg) translate(30vw,0vw);
                transform: rotate(-18deg) translate(30vw,0vw);
    }
    .game-pers {
        height: 312px;
        width: 291px;
        bottom: -4px;
    }
    /* .game-logo {
        margin: 0 auto 10px;
    } */
    .scoreboard {
        margin-bottom: 4px;
    }
}


@media (max-height: 668px) and (max-width: 500px) {
    .game-pers {
        height: 284px;
        width: 249px;
    }
}