/* 全局变量 */
:root {
    /* 全局 */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);

    /* 颜色 */
    --background-color: #000;
    --background-color-opt: #0008;
    --primary-color: #f84B;
    --secondary-color: #16ac;
    --primary-back-color: rgba(0, 0, 0, .6);
    --secondary-back-color: rgba(255, 255, 255, .8);

    /* 字体 */
    --secondary-font-color: #000;
    --primary-font-color: #fff;
    --primary-font-size: 1em;
    --second-font-color: #888;
    --second-font-size: .8em;

    /* 菜单 */
    /* --menu-height: 3em; */
    --menu-height: 1em;

    /* 其它 */
    --backblur: 10px;
    --topZ: 1000;
    --secZ: 900;
    --navZ: 800;
    --popZ: 600;
    --transition: all 360ms ease;
}

* {
    margin: 0;
    padding: 0;
    opacity: 1;
    transition: var(--transition);
}

/* 全局全屏 */
html,
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--background-color-opt);
}

/* 通用居中分布 */
div,
span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--primary-font-color);
    font-size: var(--primary-font-size);
}

/* 通用磨砂 */
.backDrop {
    backdrop-filter: blur(var(--backblur));
}

/* 通用阴影 */
.shadow {
    box-shadow: 0 0 6px 0 var(--primary-color);
}

/* 图片载入中 */
@keyframes rotateCounterClockwise {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(-180deg) scale(1.2);
    }

    100% {
        transform: rotate(-360deg) scale(1);
    }
}

.loading {
    position: relative;
    background-color: var(--background-color-opt);
    overflow: hidden;
    /* 确保旋转的背景不会超出容器 */
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../res/icon/loading.svg');
    animation: rotateCounterClockwise 1s linear infinite;
    opacity: .5;
    background-size: 2.5em;
    /* background-size: contain; */
    background-position: center;
    background-repeat: no-repeat;
}

.fscreen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}