@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');

:root {
    --white: 255, 255, 255;
    --black: 0, 0, 0;


    --wd-red: 230, 23, 68;
    --fd-red: 146, 44, 44;

    --red: var(--wd-red);
    --orange: 239, 154, 45;
    --green: 68, 215, 45;

    --expbar-color: var(--orange);
    --link-color: var(--red);

    --wd-light-yellow: 237, 233, 223;
    --wd-light-grey: 196, 192, 182;
    --wd-dark-brown: 72, 69, 60;

    --wd-night-light-yellow: 18, 22, 32;
    --wd-night-light-grey: 0, 4, 15;
    --wd-night-dark-brown: 183, 186, 195;

    --fd-light-yellow: 224, 218, 167;
    --fd-yellow: 212, 207, 120;
    --fd-light-grey: 213, 207, 159;
    --fd-grey: 183, 178, 140;
    --fd-dark-brown: 58, 58, 58;

    --fd-night-light-yellow: 44, 44, 44;
    --fd-night-yellow: 35, 36, 29;
    --fd-night-light-grey: 76, 76, 76;
    --fd-night-grey: 91, 91, 91;
    --fd-night-dark-brown: 230, 230, 230;

    --light-yellow: var(--wd-light-yellow);
    --light-grey: var(--wd-light-grey);
    --dark-brown: var(--wd-dark-brown);

    --font: Noto Sans SC, Arimo, Verdana, Geneva, sans-serif;

    --expbar-startpoint: 0%;
}

#Loading {
    z-index: 1919810;
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e1e1e;
    color: #727272;
    font-weight: bold;
    font-size: 5rem;
    user-select: none;
    transition: all .5s;
    opacity: 1;
    flex-direction: column;
}

#Loading.hide {
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
}

body {
    display: flex;
    justify-content: space-between;
    background-color: rgb(var(--light-yellow));
    margin: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    font-family: var(--font);
    color: rgb(var(--black));
    opacity: 0;
    filter: blur(5px);
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
        from {
            opacity: 0;
            filter: blur(5px);
        }
        to {
            opacity: 1;
            filter: blur(0);
        }
    }

a {color: rgb(var(--link-color));}
a#CloseLeftBar {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(var(--light-grey),.2);
    backdrop-filter: blur(.1rem);
}

button {font-family: var(--font);}
button:hover, a:hover {cursor: pointer;}

body::before {
    content: "";
    mask-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22windows-1252%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22106.667%22%20height%3D%22154.667%22%3E%3Cpath%20d%3D%22M72.547%201158.57H5.074V-6.465h67.473V1158.57M119.027%20710.25v-58.977l126.95%20154.438L363.43%20654.77v61.476L246.477%20865.688%20119.027%20710.25%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M119.027%20951.652V790.715l125.45%20153.441L363.43%20792.715v166.933L247.477%201108.09l-128.45-156.438M763.27%201158.57h-63.473l63.473-80.97ZM472.387%201158.57h-67.473V-6.465h67.473V1158.57M518.867%20995.133v-58.977L645.816%201090.6%20763.27%20939.656v61.474l-116.954%20149.44-127.449-155.437M763.27%20657.27%20647.316%20805.711%20518.867%20649.273V488.336l125.449%20153.441L763.27%20490.336V657.27M518.867%201158.57v-82.97l67.973%2082.97z%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M763.27%20413.867%20646.316%20563.309%20518.867%20407.867v-58.972l126.949%20154.437L763.27%20352.391v61.476M363.43%20128.98%20246.477%20278.422l-127.45-155.438V64.008l126.95%20154.437L363.43%2067.504v61.476%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M363.43%20205.449v166.934L247.477%20520.824l-128.45-156.437V203.449l125.45%20153.442L363.43%20205.449M518.867%2071.504V-6.465h67.973l57.476%2070.473%2055.481-70.473h63.473V79.5L647.316%20227.941%20518.867%2071.504%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3C%2Fsvg%3E);
    mask-size: 3rem;
    mask-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( to bottom, rgba(var(--dark-brown), .05) 0,rgba(var(--dark-brown), 0) 33%);
    z-index: -1;
}

hr {
    border: 0;
    height: 2px;
    width: 100%;
    background-color: rgb(var(--light-yellow));
}

#BaseValue {
    display: flex;
    flex-direction: column;
}

#LeftBar {
    z-index: 3;
    width: 10rem;
    max-height: 100%;
    background-image: linear-gradient(rgb(var(--light-grey)) 0,
                                rgb(var(--light-grey)) 69px,
                                rgba(0, 0, 0, 0) 69px,
                                rgba(0, 0, 0, 0) 100%);
    transition: all .5s;
    user-select: none;
}
#LeftBar .info {
    color: rgb(var(--dark-brown));
    font-size: .9rem;
    text-align: center;
    user-select: none;
    font-weight: bold;
    margin: .5rem 0 1rem;
}

#LeftBar .info a {color: inherit;}
#LeftBar .info a:hover span {filter: brightness(2);}
#LeftBar .info a span{
    font-weight: normal;
    transition: filter .25s;
}

#LeftBar .to-website div {
    height: 100px;
    width: 100%;
    mask-position: center .5rem;
    mask-size: 9rem;
    mask-repeat: no-repeat;
    background-color: rgb(var(--dark-brown));
}

#LeftBar .to-website.fd {display: none;}
#LeftBar .to-website.wd div {
    mask-image: url(https://github.backroomswiki.cn/New_BHL/image/logo.svg);
    mask-position: center 37%;
}
#LeftBar .to-website.fd div {
    mask-image: url(https://gaplouelpew.com/images/fandom.png);
    mask-position: center;
    mask-size: 8rem;
}
#LeftBar .to-website div {transition: filter .5s;}
#LeftBar .to-website:hover div {filter: drop-shadow(0 0 5px rgba(var(--dark-brown),.5)) brightness(2);}
#LeftBar .info p {margin: 0;}
#LeftBar .to-other-website {display: flex;}
#LeftBar .to-other-website a.steam div {mask-image: url(https://gaplouelpew.com/images/steam.png);}
#LeftBar .to-other-website a.bilibili div {mask-image: url(https://gaplouelpew.com/images/bilibili.png);}
#LeftBar .to-website:hover img, #LeftBar .to-other-website a:hover div {filter: brightness(2) drop-shadow(0 0 5px rgba(var(--dark-brown),.5));}
#LeftBar .to-other-website a {
    height: 3rem;
    width: 50%;
}
#LeftBar .to-other-website a div {
    height: 100%;
    width: 100%;
    background-color: rgb(var(--dark-brown));
    mask-position: center;
    mask-size: 6rem;
    mask-repeat: no-repeat;
    transition: filter .5s;
}

#LeftBar>img:first-child {
    width: 90%;
    margin: .5rem auto 1rem;
    filter: contrast(0.5);
}

#RightPart {flex: 1;}
#LeftBar, #RightPart {
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0px 1px 2px rgba(var(--dark-brown),0.5));
}

#RightPart .tips {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -1;
    color: rgba(var(--dark-brown),.5);
    font-size: .75rem;
    font-weight: bold;
}

#TopBar {
    color: rgb(var(--light-yellow));
    background-color: rgb(var(--dark-brown));
    min-height: 70px;
    max-height: 70px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-weight: bold;
    font-size: 1.1rem;
    justify-content: space-between;
    user-select: none;
}

#TopBar #BaseValue {flex: 2;}
#TopBar .column {
    flex: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#TopBar .sidebar {display: none;}
#TopBar .sidebar a {
    text-decoration: none;
    color: rgb(var(--light-yellow));
    font-size: 2.5em;
    margin-right: 1rem;
}

#MainContent {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 1rem;
    user-select: none;
}

#ExpLevel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#ExpLevel .ExpBar {
    width: 20vw;
    height: .5rem;
    background-image: linear-gradient(to right,rgb(var(--expbar-color)) var(--expbar-startpoint),rgb(var(--light-yellow)) var(--expbar-startpoint),rgb(var(--light-yellow))) ;
    border-radius: 5px;
    margin: 2px 1rem 0;
}

#LeftBar>.side-buttons {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: auto;
}

#LeftBar>.side-buttons>button {
    border: none;
    background-color: rgba(var(--light-grey),0.2);
    padding: .5rem;
    color: rgb(var(--light-yellow));
    font-size: 1rem;
    font-weight: bold;
    font-family: var(--font);
    transition: background-color .1s;
}

#LeftBar>.side-buttons>button:hover, #LeftBar>.side-buttons>button.select {background: rgba(var(--light-grey),1);}
#LeftBar>.side-buttons>button.select {cursor: default;}
#LeftBar>.side-buttons>button.initialization {
    background-color: rgba(var(--red));
    transition: filter .5s;
}
#LeftBar>.side-buttons>button.initialization:hover {filter: brightness(1.5);}

#MainContent .buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#MainContent .buttons>button {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .5rem 1rem;
    padding: .65rem 1rem 1rem;
    background-color: rgb(var(--dark-brown));
    border: 0;
    border-top: 5px solid rgb(var(--light-grey));
    color: rgb(var(--light-yellow));
    font-weight: bold;
    width: 12rem;
    z-index: 2;
}

#MainContent div>button {
    position: relative;
    transition: all .5s;
    border-radius: 5px;
    top: 0;
}

#MainContent div>button:hover {
    filter: brightness(1.3) drop-shadow(0 0 15px rgb(var(--light-grey)));
    top: -.2rem;
}

#MainContent div>button.opacity {opacity: .5;}
#MainContent div>button.opacity:hover {
    filter: brightness(1.3);
    top: 0;
    cursor: no-drop;
}

#MainContent div>button.leftCtrlPressed::after {content: "x5";}
#MainContent div>button.leftShiftPressed::after {content: "x50";}
#MainContent div>button::after {
    content: "";
    position: absolute;
    left: .5rem;
    top: 0;
    font-size: 1.75rem;
    opacity: .5;
}

#MainContent .buttons>button>.action {font-size: 1rem;}
#MainContent .buttons>button>.name {font-size: 1.35rem;}
#MainContent .buttons>button>.name>.to {font-size: 1rem; margin: 0 .25rem}
#MainContent .buttons>button:hover>.bar:not(.entity) {background-color: rgb(var(--red));}
#MainContent .buttons>button>.bar {
    height: 1rem;
    width: 8rem;
    background-color: rgb(var(--light-yellow));
    border-radius: .7rem;
    filter: drop-shadow(0 0 2px rgba(0,0,0,.2));
    transition:background-color .25s;
}

#MainContent .longbar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#MainContent .longbar>button {
    background-color: rgb(var(--dark-brown));
    width: 80%;
    margin: .5rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    border: 0;
    border-top: 5px solid rgb(var(--light-grey));
    font-size: 1rem;
    color: rgb(var(--light-yellow));
    padding: .25rem 0;
}
#MainContent .longbar>button>.upgrade {font-size:1.25rem;}

.fadingText {
    position: fixed;
    top: 10rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(var(--orange));
    opacity: 1;
    animation: fadeOut 3s ease forwards;
    filter: drop-shadow(0 0 2px rgb(var(--dark-brown)));
    z-index: 10;
    user-select: none;
    pointer-events: none;
    width: 100%;
    text-align: center;
}

#Notice {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 9;
    background: rgba(var(--light-yellow), .5);
    backdrop-filter: blur(5px);
    transition: opacity 2s;
    opacity: 1;
}

#Notice.close {
    opacity: 0;
    pointer-events: none;
}

#Notice .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(var(--dark-brown));
    color: rgb(var(
    --light-yellow));
    border-top: 5px solid rgb(var(--light-grey));
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 5px rgb(var(--dark-brown));
    font-size: .7rem;
    min-width: 18rem;
}

#Notice .content ul {
    font-size: .85rem;
    max-height: 15rem;
    padding-right: .25rem;
    overflow: auto;
}
#Notice .content h1 {
    margin: 0;
    font-size: 1.3rem;
}
#Notice .content ul, #Notice .content h1 {user-select: none;}
#Notice>.content>a, #HideChat {
    position: absolute;
    top: -.75rem;
    right: 1rem;
    color: rgb(var(--light-yellow));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgb(var(--red));
    font-weight: bold;
    border-radius: 8px;
    box-shadow: 0 0 5px rgb(var(--dark-brown));
    transition: all .25s;
    user-select: none;
}

#Notice>.content>a:hover, #HideChat:hover {
    background-color: rgb(var(--dark-brown));
    box-shadow: 0 0 10px rgb(var(--light-yellow));
}

#Notice>.content>span>a {color: rgb(var(--light-yellow)); transition: color .25s;}
#Notice>.content>span>a:hover {color: rgb(var(--light-grey));}

#ChatBlock {
    right: 1rem;
    bottom: 1rem;
    position: fixed;
    z-index: 5;
    border-radius: 5px;
    background-color: rgb(var(--dark-brown));
    filter: drop-shadow(0px 1px 2px rgba(var(--dark-brown),0.5));
    border-top: 1rem solid rgb(var(--dark-brown));
    min-height: 1rem;
    min-width: 12.5rem;
    display: block!important;
}

#ChatBlock::before {
    content: "在线聊天窗口";
    position: absolute;
    top: -2rem;
    left: .5rem;
    font-size: 1.25rem;
    font-weight: bold;
    color: rgb(var(--light-yellow));
    background: rgb(var(--dark-brown));
    padding: 0 .5rem;
    border-radius: 5px;
}

#HideChat {
    top: -1.5rem;
    padding-bottom: 5px;
    height: 1.2rem;
}

#CBag > .stat {
    display: flex;
    justify-content: space-evenly;
    min-width: 20rem;
    width: fit-content;
    margin: 0 auto;
    background-color: rgb(var(--dark-brown));
    color: rgb(var(--light-yellow));
    border-radius: 5px;
    padding: .5rem 1rem;
    align-items: center;
    gap: 2rem;
}

#CBag > .stat > .attack, #CBag > .stat > .buff > .title {
    font-size: 1.25rem;
    font-weight: bold;
}

#CBag > .stat > .buff {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#CBag > .stat > .buff > #PlayerBuff {
    display: flex;
    flex-direction: column;
}

#CBag > .stat > .buff > #PlayerBuff > span {font-size: 80%;}

#CBag > .inventory {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 2rem 0;
}

#CBag > .inventory > #Body {
    position: relative;
    width: 17rem;
    height: 30rem;
}

#CBag > .inventory > #Body::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(var(--light-grey));
    mask-image: url(https://gaplouelpew.com/images/body.png);
    mask-position: center;
    mask-size: 30rem;
    mask-repeat: no-repeat;
    z-index: -1;
}

#CBag > .inventory > #Body > div, #Bag > .line > div {
    width: 3rem;
    height: 3rem;
    background-color: rgb(var(--dark-brown));
    border-radius: 5px;
    filter: drop-shadow(0 0 5px rgba(var(--dark-brown),.5));
    position: absolute;
    opacity: .5;
    transition: filter .25s;
}

#CBag > .inventory > #Body > div:hover, #Bag > .line > div:hover {filter: drop-shadow(0 0 5px rgba(var(--dark-brown),.5)) brightness(1.5);}
#Bag > .line > div {position: unset;}
#Bag, #Bag > .line {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}
#Bag > .line {flex-direction: row;}
#Bag > .title {
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: rgb(var(--dark-brown));
}
#Bag > #DeleteItem:hover {filter: brightness(1.5);}
#Bag > #DeleteItem > .hover {display: none;}
#Bag > #DeleteItem:hover > .content {display: none;}
#Bag > #DeleteItem:hover > .hover {display: unset;}
#Bag > #DeleteItem {
    height: 3rem;
    width: 15rem;
    border-radius: 5px;
    background-color: rgb(var(--red));
    transition: filter .25s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--light-yellow));
    font-size: 1.25rem;
    font-weight: bold;
}

#Body-Head {top: .5rem; left: calc(50% + 2rem);}
#Body-Chest {top: 6rem; left: 50%; transform: translate(-50%, 0);}
#Body-Leg {top: 15rem; left: calc(50% + 1rem);}
#Body-LHand {top: 15rem; left: 0;}
#Body-RHand {top: 15rem; right: 0;}
#Body-LFeet {bottom: 0; left: 4rem;}
#Body-RFeet {bottom: 0; right: 4rem;}

::selection {
    background-color: rgb(var(--light-grey));
    color: rgb(var(--dark-brown));
}

::-webkit-scrollbar {
    width: 5px;
    border-radius: 5px;
    background-color: rgb(var(--dark-brown));
}
   
::-webkit-scrollbar-thumb {
    background-color: rgb(var(--light-yellow));
    border-radius: 5px;
}
   
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--light-grey));
}

@keyframes fadeOut {
        0% {
            opacity: 1;
            top: 10rem;
        }
        100% {
            opacity: 0;
            top: 8rem;
        }
    }


@media (max-width: 700px) {
    #TopBar {font-size: .8rem;}
    #TopBar .sidebar {display: block;}
    #TopBar .column {flex: 3.5;}
    #TopBar #BaseValue {font-size: .7rem;}
    #ExpLevel .ExpBar {display: none;}
    #ExpLevel {flex-direction: column; align-items: flex-end;}
    #PlExp {margin-left: .5rem;}
    #PlExp::before {content:"(";}
    #PlMaxExp::after {content:")";}
    #LeftBar>button {background-color: rgba(var(--dark-brown),0.25);}
    #LeftBar .to-other-website a div {background-color: rgb(var(--light-yellow));}
    #LeftBar .info {
        color: rgb(var(--light-yellow));
        background-image: linear-gradient(to right,rgba(var(--dark-brown),.15) 0%,
                            rgba(var(--dark-brown),.3) 50%,
                            rgba(var(--dark-brown),.15) 100%);
    }
    #LeftBar {
        left: -10rem;
        position: fixed;
        background-color: rgba(var(--dark-brown),.15);
        height: 100%;
        backdrop-filter: blur(3rem);
        color: rgb(var(--light-yellow));
        background-image: linear-gradient(rgb(var(--light-grey)) 0,
                                rgb(var(--light-grey)) 70px,
                                rgba(0, 0, 0, 0) 70px,
                                rgba(0, 0, 0, 0) 100%);
    }

    #BaseValue>span {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 701px) {
    #LeftBar {left: 0!important;}
    #CloseLeftBar {display: none!important}
}

/* 傻逼火狐 */
@-moz-document url-prefix() {
    * {
        scrollbar-color: rgb(var(--light-yellow)) rgb(var(--dark-brown));
        scrollbar-width: thin;
      }

    #LeftBar br, button br {margin: .75rem;}
}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.2s;
}

[data-title]:after {
    content: attr(data-title);
    background-color: rgba(var(--dark-brown), .75);
    color: rgb(var(--light-yellow));
    font-size: 1rem;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -2em;
    left: 20%;
    white-space: nowrap;
    border-radius: 5px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0px 1px 2px rgba(var(--light-grey),0.5));
}

[data-title] {
    position: relative;
}
  
#RightClickMenu {
    position: fixed;
    z-index: 114514;
    width: 12rem;
    height: auto;
    background: rgba(var(--light-grey),.5);
    border-radius: 5px;
    filter: drop-shadow(0px 1px 2px rgba(var(--dark-brown),.5));
    backdrop-filter: blur(5px);
    overflow: hidden;
    padding-bottom: .25rem;
}

#RightClickMenu hr {
    margin: 0;
    margin-top: .25rem;
}

#RightClickMenu button:hover {background-color: rgba(var(--dark-brown),1);}
#RightClickMenu button {
    border: 0;
    width: calc(100% - .5rem);
    background: rgba(0,0,0,0);
    padding: .25rem;
    font-size: 1rem;
    font-weight: bold;
    color: rgb(var(--light-yellow));
    transition: background-color .2s;
    margin: .25rem .25rem 0;
    border-radius: 5px;
}

#StudioLogo:hover {filter: drop-shadow(0 0 5px rgba(var(--dark-brown),.5)) brightness(2);}
#StudioLogo {
    mask-image: url(https://gaplouelpew.com/images/aplogo.png);
    mask-size: 10rem;
    mask-position: center;
    mask-repeat: no-repeat;
    position: fixed;
    width: 10rem;
    height: 5rem;
    background-color: rgba(var(--dark-brown),.5);
    right: 1rem;
    bottom: 1rem;
    transition: filter .5s;
}