/* 若字體之前已經有引入 就不重覆引入 */
@font-face {
    font-family: 'px';
    src: url('font/px.woff2') format('woff2'),
         url('font/px.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* hpbar  */

.hpbar {
    position: fixed;
    left: 20px;
    top: 130px;
    display: flex;
    flex-direction: column;
    transition: .5s ease
}

.hpbar-title {
    margin-bottom: -3px;
    font-size: 2.4vw
}

.hpbar-heart {
    display: flex
}

.hpbar-heart img {
    width: 24px;
    height: 24px;
    margin: 0 2px
}

.hpbar-led {
    width: 30px;
    margin: 20px 10px 0;
    background: rgba(0,0,0,.3);
    box-shadow: 0 0 0 10px rgba(0,0,0,.3);
    border-radius: 10px
}

.hpbar+.hpbar {
    right: 20px;
    left: auto;
    align-items: flex-end
}

.header--fixed.scrolled-down:not(.mbpanel--open) .hpbar {
    top: 30px
}

html.hp:not(.leave-top) .hpbar {
    opacity: 0
}

@media(max-width: 1440px) {
    .hpbar-heart img {
        width:16px;
        height: 16px
    }

    .hpbar-led {
        width: 20px;
        margin: 20px 6px 0;
        box-shadow: 0 0 0 6px rgba(0,0,0,.3)
    }
}

@media(max-width: 1199px) {
    .hpbar {
        display:none
    }
}



/* tetris animation */

.tetris {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    width: 5vw;
    opacity: .72;
    transition: .5s ease
}

.tetris b {
    display: block;
    position: absolute;
    top: -30%;
    width: 100%;
    animation: tetris-fall 6s steps(30, end) infinite both,tetris-rotate 6s steps(10, start) infinite both
}

.tetris img {
    display: block;
    width: 100%
}
.tetris b:nth-child(1) { animation-delay:-2s, 0s; left: 5vw; }
.tetris b:nth-child(2) { animation-delay: 0s, 1s; left: 2vw; }
.tetris b:nth-child(3) { animation-delay: 2s, 3s; left: 7vw; }
.tetris b:nth-child(4) { animation-delay: 1s, 2s; left: 9vw; }
.tetris b:nth-child(5) { animation-delay:-1s, 5s; left: 86vw; }
.tetris b:nth-child(6) { animation-delay: 2s, -1s; left: 88vw; }
.tetris b:nth-child(7) { animation-delay: 0s, 3s; left: 92vw; }
.tetris b:nth-child(8) { animation-delay: 3s, 2s; left: 94vw; }

html.hp:not(.leave-top) .tetris {
    opacity: 0
}

@keyframes tetris-fall {
    0% {
        top: -30%
    }

    100% {
        top: 110%
    }
}

@keyframes tetris-rotate {
    0%,33% {
        transform: rotate(0deg)
    }

    35%,66% {
        transform: rotate(90deg)
    }

    69%,100% {
        transform: rotate(180deg)
    }
}

@media(max-width: 1536px) {
    .tetris {
        opacity:.3
    }
}

@media(max-width: 1199px) {
    .tetris {
        display:none
    }
}