@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

*{
    font-family: 'Kanit', sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    color: #ffff;
}

:root{
    --bg: #111111f1;
}

body {
    display: none;
}

.core{
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.card{
    border-radius: .3vw;
    /* background: #191919; */
    /* box-shadow: 0px 0px 5px 0px rgba(100, 100, 100, 0.66) inset; */
    /* padding: .1vw; */
}

.core main{
    /* opacity: .3; */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: -1vw;
    margin-bottom: 1%;
    transform: scale(.85);
}

.core main article{
    position: relative;
    width: 17vw;
}
.core main article:nth-child(1) .bg_cover_all{
    position: absolute;
    width: 100%;
}
.core main article:nth-child(1) .icon_bg{
    position: absolute;
    width: 3vw;
    top: -0.2vw;
    z-index: 10;
}
.core main article:nth-child(1) .hp_icon{
    position: absolute;
    width: 2vw;
    top: 0.01vw;
    left: .5vw;
    z-index: 15;
}
/* .core main article:nth-child(1):before{
    content: '';
    position: absolute;
    width: 15vw;
    height: 2vw;
    left: 0;
    background: url(/Interface/img/Hud/hud_bg_hype.svg) center center no-repeat;
    background-size: cover;
} */

/* .core main article:nth-child(2){
    outline: 1px solid red;
} */

.core main article .box_tag{
    background: #0A0A0A;
    border-radius: .2vw;
    transform: skew(11deg);
    top: .9vw;
    left: 3.5vw;
    width: 2vw;
    text-align: center;
    z-index: 15;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core main article .box_tag .card{
    align-items: center;
    font-size: .7vw;
}

.core main article .status{
    padding: .2vw;
    width: 13.7vw;
    transform: skew(11deg) translateX(2.7vw);
    /* border-radius: 0 .5vw .5vw .5vw; */
}

.core main article .status .prog_box{
    /* border-radius: .1vw; */
    /* background: #343434; */
    /* box-shadow: 0px 0px 10px 0px #000 inset; */
    /* background: #303030f1; */
    position: relative;
    height: 1.3vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.core main article .icon,
.core main article .status .prog_box .percent{
    position: absolute;
    font-size: .8vw;
    z-index: 5;
}

.core main article .icon{
    left: 0%;
    top: 0;
    visibility: hidden;
    border-radius: .3vw;
    /* outline: 1px solid #000000; */
    /* background: #252525; */
    background: url(/Interface/img/Hud/hud_bgheart_hype.svg) center center no-repeat;
    background-size: cover;
    width: 2vw;
    height: 1.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core main article .icon i{
    font-size: 1.2vw;
}

.core main article .status .prog_box .percent{
    right: 4%;
}

.core main article .status .prog_box #heal{
    left: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border-radius: 0 .2vw .2vw 0;
    overflow: hidden;
    background: linear-gradient(90deg, #138ed4  0.11%, #38B1F8 100.28%);
    /* background: linear-gradient(90deg, #29C47E 0.11%, #069852 100.28%); */
}

.core main article .status .prog_box #heal .dot{
    /* outline: 1px solid red; */
    position: absolute;
    background: url(/Interface/img/Hud/hud_plus_hype.svg) center center no-repeat;
    background-size: cover;
    width: .9vw;
    height: .9vw;
    visibility: hidden;
    transform: skew(-11deg);
}


.core main article .status .prog_box .cover_dot{
    /* border: 1px solid red; */
    display: flex;
    z-index: 8;
    width: 75%;
    height: 50%;
    margin-right: 8%;
    opacity: .5;
}

.core main article .status .prog_box .cover_dot .dot{
    border-left: .1vw solid #fff;
    margin: 0 auto;
}

.core main article .card.box_stamina{
    position: absolute;
    left: 0.5vw;
    width: 93%;
    transform: skew(12deg) translateY(.1vw);
    /* border-radius: 0 0 .2vw .2vw; */
    /* padding: 0 .2vw .2vw .2vw; */
    /* background: #343434; */
    z-index: 2;
}

.core main article .box_stamina #stamina{
    height: .3vw;
    transition: .4s ease-in-out;
    /* border-radius: 0 0 .5vw .5vw; */
    border-radius: .3vw;
    background: #fff;
    background: linear-gradient(90deg, #ffffff1a  0.11%, #fff 100.28%);
}

.core main article:nth-child(2){
    display: flex;
}

.core main article:nth-child(2) .card{
    margin-left: 2%;
    margin-bottom: 2%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core main article:nth-child(2) .card .percent{
    position: absolute;
    bottom: 3%;
    right: 10%;
    font-size: .7vw;
}

.core main article:nth-child(2) .food,
.core main article:nth-child(2) .swiming,
.core main article:nth-child(2) .armor{
    width: 2.5vw;
    height: 2.5vw;
    /* box-shadow: inset 0 0 .4vw #161616; */
    /* border-radius: .3vw .5vw .3vw .8vw; */
    /* animation: shake-top 5s .3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; */
}

.core main article:nth-child(2) .card .icon_photo{
    transform: translateY(-30%) translateX(-15%) skew(-4deg);
    filter: drop-shadow(2px 2px .1px #ffffff);
    width: 2vw;
    height: 2vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core main article:nth-child(2) .card .icon_photo img{
    position: absolute;
    width: 100%;
    height: 100%;
}

.core main article:nth-child(2) .food{
    background: linear-gradient(111deg, #FFC700 6.4%, #2E2E2E 95.99%);
}

.core main article:nth-child(2) .swiming{
    background: linear-gradient(113deg, #1F93FF 6.46%, #2E2E2E 96.87%);
}

.core main article:nth-child(2) .armor{
    background: linear-gradient(113deg, #999D9F 6.46%, #2E2E2E 96.87%);
}

@keyframes shake-top {
  0%,
  100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
        -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
  }
  80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
  }
  90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
  }
  100%{
  }
}

.core main article .status .prog_box #heal .dot:nth-child(1){
    visibility: inherit;
    width: .6vw;
    height: .6vw;
    opacity: .5;
    top: -0.3vw;
    left: .8vw;
    /* animation: animations1 2s linear infinite; */
    animation: animations1 2s linear infinite, randomDelay 3s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(2){
    visibility: inherit;
    width: .9vw;
    height: .9vw;
    opacity: .7;
    bottom: -0.1vw;
    left: 2vw;
    animation: animations1 1.5s linear infinite, randomDelay 4s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(3){
    visibility: inherit;
    width: .9vw;
    height: .9vw;
    opacity: .4;
    top: -0.2vw;
    left: 4vw;
    animation: animations1 2.3s linear infinite, randomDelay 2.7s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(4){
    visibility: inherit;
    width: .7vw;
    height: .7vw;
    opacity: .3;
    top: .4vw;
    left: 6vw;
    animation: animations1 1.8s linear infinite, randomDelay 3.5s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(5){
    visibility: inherit;
    width: .5vw;
    height: .5vw;
    opacity: .4;
    top: .3vw;
    left: 7.5vw;
        animation: animations1 2s linear infinite, randomDelay 3s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(6){
    visibility: inherit;
    width: .7vw;
    height: .7vw;
    opacity: .5;
    bottom: -0.4vw;
    left: 9vw;
        animation: animations1 1.5s linear infinite, randomDelay 4s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(7){
    visibility: inherit;
    width: .9vw;
    height: .9vw;
    opacity: .5;
    top: -0.5vw;
    left: 10vw;
        animation: animations1 2.3s linear infinite, randomDelay 2.7s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(8){
    visibility: inherit;
    width: .9vw;
    height: .9vw;
    opacity: .5;
    bottom: -0.05vw;
    left: 11vw;
        animation: animations1 1.8s linear infinite, randomDelay 3.5s linear infinite;
}

.core main article .status .prog_box #heal .dot:nth-child(9){
    visibility: inherit;
    width: .7vw;
    height: .7vw;
    opacity: .5;
    top: .3vw;
    left: 12.5vw;
    animation: animations1 2s linear infinite, randomDelay 3s linear infinite;

}

@keyframes animations1 {
    100%{
        opacity: .5;
    }
    100%{
        opacity: 0;
        transform: translate(0%, -1vw) skew(11deg);
    }
}

@keyframes randomDelay {
    0% {
        animation-delay: 0s;
    }
    100% {
        animation-delay: calc(0.5s * random());
    }
}

.core main article:nth-child(2) {
    transform: translateY(.7vw);
}

.core main article:nth-child(2) .card {
    display: table;
}

.core main article:nth-child(2) .card .box{
    background: conic-gradient(#1F93FF var(--progress), #0A0A0A 0deg);
    width: 1.5vw; 
    height: 1.3vw;
    border-radius: .3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skew(11deg);
}

.core main article:nth-child(2) .card .box .in{
    width: 85%;
    border-radius: .2vw;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0A0A0A;
}

.core main article:nth-child(2) .card .box .in i{
    font-size: .8vw;
    margin-top: 5%;
}

.core main article:nth-child(2) .card p{
    border-radius: .2vw;
    margin-top: 5%;
    font-size: .5vw;
    text-align: center;
    background: #0A0A0A;
    transform: skew(-11deg);
}

.core main .microphone{
    position: absolute;
    padding: .2vw;
    top: -1.5vw;
    left: 0;
    border-radius: .2vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: skew(11deg) ;
    background: #0A0A0A;
}

.core main .microphone .icon_voice{
    font-size: 0.7vw;
    padding: .3vw;
    width: 0.5vw;
    height: 0.5vw;
    padding: .1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core main .microphone .status_voice{
    width: 2vw;
    height: 0.5vw;
    background: #0A0A0A;
    border-radius: .1vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 1vw;
} 

.core main .microphone .status_voice .level_voice{
    width: 0.5vw;
    height: 0.5vw;
    background: #fff;
    border-radius: .1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core main .microphone .status_voice .level_voice.activate{
    background: #0B7FC3;
}