#app {

}
body {
    background-color: #1a1a1a;
}
iframe {
    width: 100%;height: 100vh;height: 100dvh!important;border: 0;position: fixed;top: 0;left: 0
}
*{
    margin: 0;
    padding: 0;
}
.game-loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 1);
    z-index: 11;
    position: fixed;
    top: 0;
    flex-direction: column;
    left: 0;
}
.game-hidden-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    z-index: 11;
    position: fixed;
    top: 0;
    flex-direction: column;
    left: 0;
}
.loading {
    width: 50px;
    height: 50px;
    display: grid;
    /*grid布局*/
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3px;
    /*grid 每个item之间的间距*/
    transform: rotate(45deg);
    /*旋转45°*/
}
.loading_text_game{color: white;margin-top: 30px;font-size: 15px;}
/**
* --name  是css中定义变量的方式
* 可以直接用  var(--name) 使用
*/
.loading span {
    background-color: var(--color);
    /*背景颜色*/
    animation: blinking 2s var(--delay) ease-in-out infinite;
    animation-fill-mode: backwards;
}

.loading span:nth-child(2n+2) {
    /*n=0: 2*/
    /*n=1: 4*/
    /*n=2: 6*/
    /*n=3: 8*/
    /*n=4: 10(不存在)*/
    --color: #f13f84;
}

.loading span:nth-child(4n+3) {
    /*n=0: 3*/
    /*n=1: 7*/
    /*n=2: 11(不存在)*/
    --color: #46b0ff;
}

.loading span:nth-child(4n+1) {
    /*n=0: 1*/
    /*n=1: 5*/
    /*n=2: 9*/
    /*n=3: 13(不存在)*/
    --color: #44bb44;
}

.loading span:nth-child(7) {
    --delay: 0s;
}

.loading span:nth-child(4n+4) {
    --delay: 0.2s;
}

.loading span:nth-child(4n+1) {
    --delay: 0.4s;
}

.loading span:nth-child(4n+2) {
    --delay: 0.6s;
}

.loading span:nth-child(3) {
    --delay: 0.8s;
}

@keyframes blinking {

    0%,
    20% {
        transform: rotate(0deg) scale(0);
    }

    40%,
    80% {
        /*
    * 旋转一圈rotate(1turn)[转、圈（Turns）。一个圆共1圈]
    * 缩放 scale 如果大于1就代表放大；如果小于1就代表缩小
    */
        transform: rotate(1turn) scale(1);
    }

    100% {
        transform: rotate(2turn) scale(0);
    }
}