@import url(reset.css);

body {
    background: #EDFDF4;
}

.wrap {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    padding: 1.2vh 20px;
    max-width: 480px;
    background: url(../images/BG.png) no-repeat center top / cover;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    position: relative;
    flex: 0 0 calc(100vh * 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .md {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .md i {
    height: 100%;
    display: flex;
    align-items: center;
}

.header .md i:nth-child(2) {
    display: none;
}

.en .header .md i:nth-child(1) {
    display: none;
}

.en .header .md i:nth-child(2) {
    display: flex;
}

.header .md img {
    height: 60%;
}

.header .lf,
.header .rt {
    position: relative;
    height: 100%;
    z-index: 1;
}

.header .lf i,
.header .chat {
    display: block;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header .lf img,
.header .rt img {
    height: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.lf .lang-selector {
    display: none;
    position: absolute;
    height: 40%;
}

.lf .lang-selector.active {
    display: block;
}

.lf .lang-selector li {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.lf .lang-selector li+li {
    margin-top: 1vh;
}

.lf .lang-selector li img {
    display: flex;
    margin-right: .4vh;
    height: 100%;

}

.main {
    position: relative;
    flex: 0 0 calc(100vh * 0.5);
    width: calc(100% + 20px * 2);
    margin: 0 -6%;
    overflow: hidden;
}

.footer {
    flex: 0 0 calc(100vh * 0.3);
}

.footer a {
    position: relative;
    margin: 0 auto;
    width: calc(100% - 8px);
    height: 6vh;
    /* background: #008B68; */
    /* background: linear-gradient(180deg, #5BCAAE 0%, #0F6641 100%); */
    border-radius: 50px;
    color: #fff;
    font-size: 2.4vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer a:before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    background: linear-gradient(180deg, #5BCAAE 0%, #31795A 100%);
    border-radius: 50px;
    z-index: 1;
}

.footer a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid rgba(255, 255, 255, .6);
    border-left: 1px solid rgba(255, 255, 255, .6);
    background: linear-gradient(180deg, #5BCAAE 0%, #0F6641 100%);
    border-radius: 50px;
    z-index: 2;
}

.footer a+a {
    margin-top: 2.8vh;
}

.footer a>* {
    position: relative;
    z-index: 3;
}

.footer a img {
    display: block;
    padding: 0 1vh;
    height: 60%;
}

.footer .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.footer .light:before,
.footer .light:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 100%;
    aspect-ratio: 1/1;
    background: linear-gradient(90deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 10%);
    z-index: 5
}

.footer .light:after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 10%);
}

.footer a .en {
    display: none;
}

.en .footer a .en {
    display: block;
}

.en .footer a .cn {
    display: none;
}

/* Animation */

.anime-box {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-54%, -50%);
    height: 110%;
    aspect-ratio: 1/1;
}

.anime-box img {
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.anime-box i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.jump,
.jump2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1/1;
    opacity: 0;
    -webkit-animation: jump .7s ease-in-out forwards;
    animation: jump .7s ease-in-out forwards;
    -webkit-animation-delay: 2.8s;
    animation-delay: 2.8s;
}

@-webkit-keyframes jump {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes jump {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.jump i,
.jump2 i {
    opacity: 1;
}

i.coin01 {
    width: 5%;
    top: 35%;
    left: 23%;
    -webkit-animation: flying 15s ease-in-out alternate infinite;
    animation: flying 15s ease-in-out alternate infinite;
}

i.coin02 {
    width: 14%;
    top: 45%;
    left: 12%;
    -webkit-animation: flying 4s ease-in-out alternate infinite;
    animation: flying 4s ease-in-out alternate infinite;
}

i.coin03 {
    width: 7%;
    top: 34%;
    left: 36%;
    -webkit-animation: flying 20s ease-in-out alternate infinite;
    animation: flying 20s ease-in-out alternate infinite;
}

i.coin04 {
    width: 8%;
    top: 21%;
    wv left: 46%;left
    left left -webkit-animation: flying 16s ease-in-out alternate infinite;left-webkit-animation
    -webkit-animation -webkit-animation: flying 16s ease-in-out alternate infinite;-webkit-animation
    -webkit-animation animation: flying 16s ease-in-out alternate infinite;animation
}

i.coin05 {
    width: 4%;
    top: 15%;
    left: 54%;
    -webkit-animation: flying 20s ease-in-out alternate infinite;
    animation: flying 20s ease-in-out alternate infinite;
}

i.coin06 {
    width: 4%;
    top: 19%;
    left: 64%;
    -webkit-animation: flying 23s ease-in-out alternate infinite;
    animation: flying 23s ease-in-out alternate infinite;
}

i.coin07 {
    width: 8%;
    top: 25%;
    left: 77%;
    -webkit-animation: flying 12s ease-in-out alternate infinite;
    animation: flying 12s ease-in-out alternate infinite;
}

i.coin08 {
    width: 7%;
    top: 19%;
    left: 96%;
    -webkit-animation: flying 21s ease-in-out alternate infinite;
    animation: flying 21s ease-in-out alternate infinite;
}

i.coin09 {
    width: 7%;
    top: 39%;
    left: 71%;
    -webkit-animation: flying 20s ease-in-out alternate infinite;
    animation: flying 20s ease-in-out alternate infinite;
}

i.coin10 {
    width: 11%;
    top: 45%;
    left: 87%;
    -webkit-animation: flying 25s ease-in-out alternate infinite;
    animation: flying 25s ease-in-out alternate infinite;
}

i.coin11 {
    width: 17%;
    top: 60%;
    left: 82%;
    -webkit-animation: flying 8s ease-in-out alternate infinite;
    animation: flying 8s ease-in-out alternate infinite;
}

i.ingot {
    width: 14%;
    top: 46%;
    left: 31%;
    -webkit-animation: flying 37s ease-in-out alternate infinite;
    animation: flying 37s ease-in-out alternate infinite;
}

i.mahjong-back01 {
    width: 8%;
    top: 40%;
    left: 74%;
    -webkit-animation: flying 17s ease-in-out alternate infinite;
    animation: flying 24s ease-in-out alternate infinite;
}

i.mahjong-back02 {
    width: 10%;
    top: 30%;
    left: 45%;
    -webkit-animation: flying 27s ease-in-out alternate infinite;
    animation: flying 30s ease-in-out alternate infinite;
}

@-webkit-keyframes flying {
    0% {
        transform: translate(-50%, -50%);
    }

    20% {
        transform: translate(-40%, -50%);
    }

    40% {
        transform: translate(-50%, -40%);
    }

    60% {
        transform: translate(-45%, -45%);
    }

    80% {
        transform: translate(-40%, -40%);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes flying {
    0% {
        transform: translate(-50%, -50%);
    }

    20% {
        transform: translate(-40%, -50%);
    }

    40% {
        transform: translate(-50%, -40%);
    }

    60% {
        transform: translate(-45%, -45%);
    }

    80% {
        transform: translate(-40%, -40%);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

i.hu,
i.hu2 {
    width: 28%;
    top: 45%;
    left: 55%;
}

i.hu2 {
    opacity: 0;
    z-index: 99;
    -webkit-animation: hu2 4s linear infinite;
    animation: hu2 4s linear infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes hu2 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    75% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }

}

@keyframes hu2 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }

    74% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }

    75% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }

}

i.table {
    width: 49%;
    top: 68%;
    left: 56%;
    z-index: 1;
}

i.table-shadow {
    width: 49%;
    top: 82%;
    left: 56%;
    opacity: 0.5;
}

.table-jump {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 1/1;
    opacity: 0;
    -webkit-animation: table .5s ease-in-out forwards;
    animation: table .5s ease-in-out forwards;
}

.table-jump i {
    opacity: 1;
}

@-webkit-keyframes table {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    85% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}


@keyframes table {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    85% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

i.shadow-mahjong {
    width: 48%;
    top: 66%;
    left: 52%;
    opacity: 0;
    -webkit-animation: shadow-mahjong 2s ease-in-out forwards;
    animation: shadow-mahjong 2s ease-in-out forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes shadow-mahjong {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes shadow-mahjong {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.6;
    }
}

.tile-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-animation: tile-box 3s ease-in-out alternate infinite;
    animation: tile-box 3s ease-in-out alternate infinite;
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
}

@-webkit-keyframes tile-box {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(5px);
    }
}

@keyframes tile-box {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(5px);
    }
}

i.tile01 {
    width: 7.2%;
    top: 49.5%;
    left: 64%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

i.tile02 {
    width: 7.5%;
    top: 50.9%;
    left: 67.5%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

i.tile03 {
    width: 7.5%;
    top: 52.4%;
    left: 70%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

i.tile04 {
    width: 8%;
    top: 54%;
    left: 72.5%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

i.tile05 {
    width: 8%;
    top: 56%;
    left: 74%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

i.tile06 {
    width: 8%;
    top: 58%;
    left: 74%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

i.tile07 {
    width: 10.5%;
    top: 60.5%;
    left: 72%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

i.tile08 {
    width: 12%;
    top: 62%;
    left: 67%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

i.tile09 {
    width: 13%;
    top: 63%;
    left: 59%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

i.tile10 {
    width: 12%;
    top: 62%;
    left: 48%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}

i.tile11 {
    width: 14%;
    top: 59%;
    left: 37%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}

i.tile12 {
    width: 18%;
    top: 54%;
    left: 25%;
    -webkit-animation: tile .5s ease-in-out forwards;
    animation: tile .5s ease-in-out forwards;
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
}

@-webkit-keyframes tile {
    0% {
        transform: translate(-50%, 0%);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes tile {
    0% {
        transform: translate(-50%, 0%);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}