*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: "pixel";
    src: url("./fzPixel12.woff");
}
body{
    /* 100%窗口高度 */
    /*height: 100vh;*/
    /*width: 100vw;*/
    min-height: 100vh;
    /* 弹性布局 居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1b1b1b;
    overflow: hidden;
}
.container{
    width: 100%;
    /*height: 100%;*/
    /* 相对定位 */
    position: fixed;
    /*margin-top: 0;*/
    /* 溢出隐藏 */
    /*overflow: hidden;*/
    transform: rotate(-20deg);
    z-index: -2;
}

ul{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
}
li{
    list-style: none;
    height: 100%;
    padding-right: 20px;
}
li img{
    width: 450px;
    height: 450px;
    /* 保持原有尺寸比例，裁切长边 */
    object-fit: cover;
    /* 图片定位正中间 */
    object-position: center;
}
.cover{
    position: fixed;
    /*top: 0;*/
    /*left: 0;*/
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    opacity: 0.7;
    padding: 1px;
    border-radius: 7px;
    z-index: -1;
}
.text-container{
    position: fixed;
    width: 90%;
    height: 90%;
    color: black;
    /*background-color: #ff0000;*/
    /*max-font-size: 30px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 70;
}
.upperHearts{
    position: fixed;
    width: 30px;
    top: 15px;
    left: 15px;
}
.netherHearts{
    position: fixed;
    width: 30px;
    bottom: 15px;
    right: 15px;
}

.hoverPanel{
    font-size: 17px;
    position: absolute;
    background: #39C5BB;
    z-index: 99;
    border-radius: 7px;
    opacity: 1;
    padding: 10px;
    display: none;
    flex-direction:column;
    justify-content : flex-start;
    animation: none;
}
.playerList{
    font-family: 'pixel';
    font-weight: bold;
    white-space: pre-wrap;
}

h3{
    font-size: 17px;
    font-family: "pixel";
}

.exp{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}
#expFull{
    z-index: 95;
    clip-path: inset(0 100% 0 0);
    /*mask-image: linear-gradient(to right, transparent, black 50%);*/
    /*mask-type: alpha;*/
}
#expEmpty{
    z-index: 90;
}
#levelTxt{
    font-size: 3vw;
    position: absolute;
    font-family: pixel;
    bottom: 1.2vw;
    color: #7efc20;
    text-shadow:
            -2px -2px 0 #000,  /* 上左描边 */
            2px -2px 0 #000,   /* 上右描边 */
            -2px 2px 0 #000,   /* 下左描边 */
            2px 2px 0 #000;    /* 下右描边 */
}

/*#expEmpty::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background-image: linear-gradient(to right, transparent 50%, black 50%);*/
/*    !* 使用线性渐变让左半部分透明，右半部分不透明 *!*/
/*    background-image: url('../img/others/exp_full.png'); !* 设置你的图像作为背景 *!*/
/*    background-size: cover; !* 根据需要调整背景大小 *!*/
/*    z-index: 96;*/
/*}*/


span {
    position: absolute;
    /*background: url('../img/others/heart.png');*/
    /*background: url('../img/others/mc_half_heart.webp');*/
    /*background: url('../img/others/shaking_heart.gif');*/
    background-size: cover;
    z-index: 89;
    pointer-events: none;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    animation: animate 2s linear infinite;
}


@keyframes animate {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
        /*filter: hue-rotate(0deg);*/
    }

    100% {
        transform: translate(-50%, -1000%);
        opacity: 0;
        /*filter: hue-rotate(360deg);*/
    }
}
@keyframes panelFadeOut {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 0;
    }
    100%{
        opacity: 0;
        display: none;
    }
}