.wb {width: 100%; height: 100%; background: var(--background); background-size: cover; background-position: center center;}
.wb-row {padding-top: 50px; background: linear-gradient(180deg, rgba(13,27,32,0) 0%, rgba(13,27,32,.2) 30%, rgba(13,27,32,1) 100%);}
.wb-boss-row {background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); width: 100%; position: fixed; top: 0; padding-top: 50px; left: 50%; transform: translateX(-50%);}
.wb-bossname {text-align: center; color: #fff; font-family: 'Bender', sans-serif; font-size: 14pt; margin-bottom: 10px;}
.wb-bosshp-row {width: 500px; max-width: 90%; background: rgba(255,255,255,.2); margin: 0 auto; color: #fff; border-radius: 10px; overflow: hidden;}
.wb-bosshp {background: rgba(255,0,0,.4); height: 20px; width: var(--width);}
.wb-center {margin: 30vh 0; text-align: center; font-family: 'Bender', sans-serif; font-size: 24pt; text-shadow: 1px 1px black; color: #fff;}
.wb-ops-row {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 10px;}
.wb-ops-item {background: rgba(255,255,255,.1); border-radius: 5px; border: 1px solid rgba(255,255,255,.2); padding: 10px;}
.wb-ops-hp-row {background: rgba(255,255,255,.1); margin-top: 5px; border-radius: 3px; overflow: hidden;}
.wb-ops-hp {background: white; width: var(--width); height: 7px;}

.bossfight-row {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; background: url(/templates/Default/images/headers/bg-header-bossfight.png); background-size: cover; background-position: center center;}
.bossfight-row:before {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(13,27,32,.75);}
.bossfight {position: relative; width: 100%; height: 100%;}
.bossfight-boss-row {position: absolute; top: 75px; left: 50%; transform: translate(-50%, 0); width: 600px; max-width: calc(100% - 40px); text-align: center; font-weight: bold; color: #ffffff; text-shadow: 1px 1px 1px black;}
.bossfight-boss-hp-row {margin-top: 10px; position: relative; width: 100%; background: rgba(255,0,0,.1); border: 2px solid rgba(255,255,255,1); border-radius: 15px; overflow: hidden;}
.bossfight-boss-hp {width: var(--width); height: 25px; background: rgba(255,0,0,.7);}
.bossfight-boss-hp-count {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; color: #ffffff; text-shadow: 1px 1px 1px black; font-size: 10pt;}

.bossfight-op-row {position: absolute; bottom: 215px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; left: 50%; transform: translate(-50%, 0); width: 600px; max-width: calc(100% - 40px);}
.bossfight-op-hp-row {grid-column: span 2; position: relative; width: 100%; background: rgba(255,0,0,.1); border: 2px solid rgba(255,255,255,1); border-radius: 15px; overflow: hidden;}
.bossfight-op-hp {width: var(--width); height: 25px; background: rgba(255,0,0,.7);}
.bossfight-op-hp-count {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; color: #ffffff; text-shadow: 1px 1px 1px black; font-size: 10pt;}
.bossfight-op-points-row {position: relative; width: 100%; background: rgba(254,243,61,.1); border: 2px solid rgba(255,255,255,1); border-radius: 15px; overflow: hidden;}
.bossfight-op-points {width: var(--width); height: 25px; background: rgba(254,243,61,.7);}
.bossfight-op-points-count {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; color: #ffffff; text-shadow: 1px 1px 1px black; font-size: 10pt;}
.bossfight-op-armor-row {position: relative; width: 100%; background: rgba(75,105,255,.1); border: 2px solid rgba(255,255,255,1); border-radius: 15px; overflow: hidden;}
.bossfight-op-armor {width: var(--width); height: 25px; background: rgba(75,105,255,.7);}
.bossfight-op-armor-count {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; color: #ffffff; text-shadow: 1px 1px 1px black; font-size: 10pt;}

.bossfight-bar-icon {position: absolute; left: 3px; top: 1px; width: 1.5em; z-index: 2;}

.bossfight-action-row {position: absolute; bottom: 75px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 10px; left: 50%; transform: translate(-50%, 0); width: 300px; max-width: calc(100% - 40px);}
.bossfight-action, .pvp-action {aspect-ratio: 1/1; position: relative; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: 0.3s all;}
.bossfight-action:hover, .pvp-action:hover {background: rgba(255,255,255,.2); transition: 0.3s all;}
.bossfight-action-in {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; color: #ffffff; text-shadow: 1px 1px 1px black; font-size: 10pt; text-align: center;}
.bossfight-action-in span {font-size: 10pt; font-weight: normal; color: rgba(255,255,255,.7);}
.bossfight-action img, .pvp-action img {width: 100%;}
.bossfight-action-empty, .pvp-action-empty {aspect-ratio: 1/1; position: relative; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: 0.3s all;}

.bossfight-center-row {animation: op 4s forwards; opacity: 0; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 200px; text-align: center; background: radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 50%);}
.bossfight-center-result-row {animation: result 4s forwards; opacity: 0; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 200px; text-align: center;}
.bossfight-center-boss-row {animation: boss 8s forwards; opacity: 0; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 200px; text-align: center; background: radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 50%);}
.bossfight-center-icon {width: 100px;}
.bossfight-center-title {font-family: 'Bender', sans-serif; font-weight: 900; font-size: 18pt; color: #fff;}
.bossfight-center-desc {margin-top: 10px;}

.bossfight-rating-result-row {animation: result 4s forwards; opacity: 0; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 400px; max-width: calc(100% - 20px); text-align: center;}
.bossfight-rating-row {background: rgba(255,255,255,.1); margin-top: 20px; border-radius: 15px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items:center}
.bossfight-rating-item img {width: 100%;}
.bossfight-rating-count {font-family: 'Bender', sans-serif; font-weight: 900; font-size: 18pt; color: #fff;}

.pvp-center-row {animation: pvp 4s forwards; opacity: 0; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 200px; text-align: center; background: radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 50%);}
.pvp-info-row {animation: pvp_after 6s forwards; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; text-align: center;}

.bossfight-info-row {animation: op_after 10s forwards; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; text-align: center;}
.bossfight-info-icon {width: 100px;}
.bossfight-info-title {font-family: 'Bender', sans-serif; font-weight: 900; font-size: 18pt; color: rgba(255,255,255,.7);}
.bossfight-info-desc {margin-top: 10px;}

.bossfight-plus-skill-points {grid-column: span 4; text-align: center; padding-bottom: 0; font-size: 10pt; animation: skills 3s forwards; opacity: 0;}
.bossfight-plus-skill-points span {background: rgba(254,243,61,.3); color: #fff; padding: 5px 7px;}

.bossfight-center-critical {color: rgba(254,243,61,1); margin-top: 10px; text-transform: uppercase; letter-spacing: 2px;}

@keyframes skills {
    0% {
        opacity: 0; /* Начало: полностью прозрачный */
        padding-bottom: 0;
    }
    15% {
        opacity: 1; /* Появление: полностью видимый */
        padding-bottom: 10px;
    }
    85% {
        opacity: 1; /* Появление: полностью видимый */
        padding-bottom: 10px;
    }
    100% {
        opacity: 0; /* Появление: полностью видимый */
        padding-bottom: 20px;
    }
}

@keyframes result {
    0% {
        opacity: 0; /* Начало: полностью прозрачный */
    }
    10% {
        opacity: 1; /* Появление: полностью видимый */
    }
    50% {
        opacity: 1; /* Полная видимость на 5 секунде */
    }
    60% {
        opacity: 1; /* Начало исчезновения */
    }
    100% {
        opacity: 1; /* Конец: полностью прозрачный */
    }
}

@keyframes op {
    0% {
        opacity: 0; /* Начало: полностью прозрачный */
    }
    10% {
        opacity: 1; /* Появление: полностью видимый */
    }
    50% {
        opacity: 1; /* Полная видимость на 5 секунде */
    }
    60% {
        opacity: 0; /* Начало исчезновения */
    }
    100% {
        opacity: 0; /* Конец: полностью прозрачный */
    }
}

@keyframes boss {
    30% {
        opacity: 0; /* Начало: полностью прозрачный */
    }
    50% {
        opacity: 1; /* Появление: полностью видимый */
    }
    60% {
        opacity: 1; /* Полная видимость на 5 секунде */
    }
    70% {
        opacity: 0; /* Начало исчезновения */
    }
    100% {
        opacity: 0; /* Конец: полностью прозрачный */
    }
}

@keyframes op_after {
    0% {
        opacity: 0; /* Начало: полностью прозрачный */
    }
    10% {
        opacity: 0; /* Появление: полностью видимый */
    }
    50% {
        opacity: 0; /* Полная видимость на 5 секунде */
    }
    60% {
        opacity: 0; /* Начало исчезновения */
    }
    100% {
        opacity: 1; /* Конец: полностью прозрачный */
    }
}

@keyframes pvp {
    0% {
        opacity: 0; /* Начало: полностью прозрачный */
    }
    10% {
        opacity: 1; /* Появление: полностью видимый */
    }
    50% {
        opacity: 1; /* Полная видимость на 5 секунде */
    }
    60% {
        opacity: 0; /* Начало исчезновения */
    }
    100% {
        opacity: 0; /* Конец: полностью прозрачный */
    }
}

@keyframes pvp_after {
    0% {
        opacity: 0; /* Начало: полностью прозрачный */
    }
    10% {
        opacity: 0; /* Появление: полностью видимый */
    }
    50% {
        opacity: 0; /* Полная видимость на 5 секунде */
    }
    60% {
        opacity: 0; /* Начало исчезновения */
    }
    100% {
        opacity: 1; /* Конец: полностью прозрачный */
    }
}

@media screen and (max-width: 760px) {
    .wb-ops-row {grid-template-columns: 1fr 1fr;}
    
    .bossfight-boss-row {top: 25px;}
    .bossfight-op-row {grid-template-columns: 1fr;}
    .bossfight-op-hp-row {grid-column: span 1;}
    .bossfight-plus-skill-points {grid-column: span 1;}
    .bossfight-op-row {bottom: 260px;}
    .bossfight-action-row {bottom: 115px;}
    .bossfight-center-row, .bossfight-center-result-row, .bossfight-center-boss-row, .bossfight-info-row, .pvp-info-row, .pvp-info-row, .pvp-center-row, .bossfight-rating-result-row {top: 30%;}
}