:root {
    --dark: #070E16;
    --dark-hardly-transparent: #070E16C7;
    --dark-semi-transparent: #070E1680;
    --dark-almost-transparent: #070E1645;
    --transparent: #00000000;
    --ff-blue: #6E8A96;
    --ff-sand: #CCC598;
    --ff-dull-sand: #9D9962;
    --ff-duller-sand: #848066;
    --ff-violet: #9D80A2;
}

@font-face {
    font-family: 'comic_neue_angularbold';
    src: url('fonts/comicneue-angular-bold-webfont.woff2') format('woff2'),
         url('fonts/comicneue-angular-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'highway_gothicregular';
    src: url('fonts/hwygoth-webfont.woff2') format('woff2'),
         url('fonts/hwygoth-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

body {
    background-color: var(--dark);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    transition: background-image 1s ease-in-out;
}

body::-webkit-scrollbar {
    display: none;
}

a {
    pointer-events: auto;
}

img {
    user-select: none;
    -webkit-user-select: none;
}

.hidden {
    display: none !important;
}

.invis {
    opacity: 0 !important;
}

.allCont {
    display: flex;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: opacity 0.25s ease-out;
}

.calcCont {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1559 / 1000;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.eqCont {
    background-color: var(--dark-almost-transparent);
    height: 100%;
    border-radius: 2%;
    box-shadow: 0 0 30px var(--dark-semi-transparent);
    aspect-ratio: 83 / 96;
}

.eBox {
    background: repeating-linear-gradient(
        -35deg,
        #00000008,
        #00000008 0.5%,
        var(--ff-blue) 0,
        var(--ff-blue) 2.5%
    );
    background-color: var(--ff-blue);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    height: 64.539%;
    padding: 2.75%;
    border-radius: 2.25% / 3%;
    font-family: "comic_neue_angularbold";
    aspect-ratio: 674375 / 503375;
    container-type: inline-size;
}

#switched .eBox, .swEBox {
    background: repeating-linear-gradient(
        -35deg,
        #00000008,
        #00000008 0.5%,
        var(--ff-violet) 0,
        var(--ff-violet) 2.5%
    );
    background-color: var(--ff-violet);
}

.stBox {
    background: repeating-linear-gradient(
        -30deg,
        #00000008,
        #00000008 0.5%,
        var(--ff-dull-sand) 0,
        var(--ff-dull-sand) 2.25%
    );
    background-color: var(--ff-dull-sand);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    position: absolute;
    bottom: 0;
    height: 34.959%;
    padding: 1.5%;
    border-radius: 1.5% / 4.5%;
    font-family: "Source Sans Pro";
    pointer-events: auto;
    aspect-ratio: 674375 / 272671;
}

.slBox {
    background: repeating-linear-gradient(
        -45deg,
        #00000008,
        #00000008 0.5%,
        var(--ff-sand) 0,
        var(--ff-sand) 3.5%
    );
    background-color: var(--ff-sand);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40.987%;
    padding: 3.5%;
    border-radius: 3.75% / 2.5%;
    box-shadow: 0 0 30px var(--dark-semi-transparent);
    font-family: "highway_gothicregular";
    transition: opacity 0.3s ease;
}

.slBox#main {
    background: repeating-linear-gradient(
        -45deg,
        #00000008,
        #00000008 0.5%,
        var(--ff-blue) 0,
        var(--ff-blue) 3.5%
    );
    background-color: var(--ff-blue);
}

.slBox#switched {
    background: repeating-linear-gradient(
        -45deg,
        #00000008,
        #00000008 0.5%,
        var(--ff-violet) 0,
        var(--ff-violet) 3.5%
    );
    background-color: var(--ff-violet);
}

.slBox.weapons-active {
    padding: 2.5%;
}

.eBox > div {
    display: block;
    position: relative;
    background-color: #00000020;
    width: 15.5%;
    padding: 0.75% 0.5% 0.5% 0.75%;
    border-left: 0.5cqmin solid #00000035;
    border-top: 0.5cqmin solid #00000035;
    border-right: 0.5cqmin solid var(--transparent);
    border-bottom: 0.5cqmin solid var(--transparent);
    border-radius: 7.5%;
    aspect-ratio: 1;
    container-type: inline-size;
}

.eqLink {
    display: none;
    height: 100%;
    border-radius: 5.5%;
    aspect-ratio: 1;
    transition: background 0.3s, opacity 0.175s;
}

.eqLink.eqLink-active {
    display: flex;
}

.eqLink:hover, .eqLink:focus {
    outline: none;
    background-color: var(--dark-almost-transparent);
}

.eBox img {
    position: relative;
    height: 100%;
}

.eBox span {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 10%;
    color: #00000050;
    font-size: 50cqw;
    user-select: none;
    -webkit-user-select: none;
}

.stBox > div {
    display: flex;
    align-items: center;
    position: relative;
    height: 25%;
    width: calc(100% / 3);
    color: #dfdfdf;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    container-type: inline-size;
}

.stBox img {
    height: 90%;
    margin-right: 5%;
}

.stBox img:hover {
    cursor: pointer;
}

.stBox img:hover + .statNum {
    display: none;
}

.stBox img:hover ~ .statName {
    display: block;
}

.stBox > #armor .statNum.reducVis {
    font-size: 10.5cqw;
}

.stBox > #armor .statNum.reducVis::after {
    content: "% Reduction";
}

.stBox > div:not(#endurance, #ammoReturn) .statNum:not(.neg)::before {
    content: "+";
}

.stBox > div .statNum.reducVis::before {
    display: none;
}

.stBox > #endurance .statNum::after, .stBox > #ammoReturn .statNum::after {
    content: "%";
}

.stBox > div .statNum {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 13.25cqw;
}

.stBox > div .statName {
    display: none;
}

.slBox .ddContainer, .slBox .weaponInfoCont {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: opacity 0.3s ease;
}

.slBox.weapons-active .ddContainer {
    display: none;
}

.slBox.weapons-active .weaponInfoCont {
    display: flex;
}

.dropdown {
    position: relative;
    height: 8.5%;
    width: 100%;
}

.visDdCont {
    height: 100%;
    width: 100%;
    container-type: inline-size;
}

.hidDdCont {
    display: none;
    position: absolute;
    top: 125%;
    right: 0;
    height: 600%;
    width: 80%;
    transition: opacity 0.2s;
    z-index: 1;
    container-type: inline-size;
}

.hidDdCont.dd-open {
    display: flex;
}

.ddIcon  {
    display: block;
    position: absolute;
    height: 100%;
    width: 15%;
    background-color: #00000020;
    border-left: 0.75cqmin solid #00000035;
    border-top: 0.75cqmin solid #00000035;
    border-right: 0.75cqmin solid var(--transparent);
    border-bottom: 0.75cqmin solid var(--transparent);
    border-radius: 7.5%;
}

.ddIcon img {
    position: absolute;
    height: 100%;
    top: 3%;
    left: 3%;
    opacity: 0.5;
    filter: brightness(0);
}

.ddIcon img[src*="Ring"] {
    top: 0;
}

.select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 0;
    height: 100%;
    width: 80%;
    padding: 5%;
    background-color: #00000020;
    border-left: 0.68cqmin solid #00000035;
    border-top: 0.68cqmin solid #00000035;
    border-right: 0.68cqmin solid var(--transparent);
    border-bottom: 0.68cqmin solid var(--transparent);
    border-radius: 1.5cqmin;
    transition: background 0.3s, box-shadow 0.3s, border 0.3s;
    container-type: inline-size;
}

.select-open {
    border: 0.68cqmin #00000075 solid;
    box-shadow: 0 0 16px var(--dark-semi-transparent);
}

.select:not(.select-disabled):hover {
    background-color: #00000035;
    cursor: pointer;
}

.select:not(.select-disabled):focus {
    outline: none;
    border: 0.68cqmin #00000075 solid;
}

.select-disabled {
    background-color: #00000050;
}

.selGearName {
    color: var(--dark-semi-transparent);
    font-size: 6.5cqw;
    user-select: none;
    -webkit-user-select: none;
}

.select::after {
    content: "";
    height: 0;
    width: 0;
    margin-right: 1%;
    border-left: 2cqmin solid transparent;
    border-right: 2cqmin solid transparent;
    border-top: 2.5cqmin solid var(--dark);
    transition: 0.5s;
}

.select.select-open::after {
    transform: scaleY(-1);
}

.menu {
    background: repeating-linear-gradient(
        -45deg,
        #C6BF93,
        #C6BF93 0.75%,
        var(--ff-sand) 0,
        var(--ff-sand) 5.75%
    );
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 2%;
    border: 1cqmin #00000075 solid;
    border-radius: 1.25%;
    box-shadow: 0 0 16px var(--dark-semi-transparent);
}

.menu ul::-webkit-scrollbar, .buildMenu ul::-webkit-scrollbar, .weaponMenu ul::-webkit-scrollbar {
    width: 3cqmin;
}

.menu ul::-webkit-scrollbar-thumb, .buildMenu ul::-webkit-scrollbar-thumb, .weaponMenu ul::-webkit-scrollbar-thumb {
    background: #00000075;
    border: 0.5cqmin solid transparent;
    border-radius: 1.5cqmin;
}

.menu ul::-webkit-scrollbar-button:vertical:single-button:increment {
    display: block;
    height: 3%;
}

.sBarCont {
    display: flex;
    position: absolute;
    height: 12.5%;
    width: 95%;
    padding: 1% 2.5%;
    background-color: #00000050;
    color: #00000075;
    border: 1cqmin #00000075 solid;
    border-radius: 1cqmin;
}

.sBar {
    background-color: var(--transparent);
    outline: none;
    border: none;
    height: 100%;
    width: 100%;
    font-family: "highway_gothicregular";
    font-size: 6.5cqw;
}

.sBar::placeholder {
    color: #00000050;
}

.menu ul {
    position: absolute;
    height: 83.5%;
    width: 95%;
    bottom: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;
    overflow-anchor: none;
}

.menu ul li:first-of-type {
    display: flex !important;
}

.menu ul li {
    display: flex;
    align-items: center;
    max-height: 22.5%;
    max-width: 97.5%;
    padding: 3%;
    margin-bottom: 2.5%;
    border-radius: 1.25cqmin;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.3s;
    container-type: inline-size;
}

.option-active {
    background-color: #00000050;
}

.menu ul li:hover, .menu ul li:focus, .buildMenu ul li:hover, .buildMenu ul li:focus, .weaponMenu ul li:hover, .weaponMenu ul li:focus {
    outline: none;
    background-color: #00000035;
    cursor: pointer;
}

.listIcon {
    height: 17.5cqmin;
    margin-right: 5%;
}

.gearName {
    font-size: 7.25cqw;
}

.ddScrollSpace {
    display: none;
    position: relative;
    top: 625%;
    height: 150%;
}

.ddSSVis {
    display: block;
}

.slBox .weaponInfoCont {
    display: none;
}

.weapon {
    display: flex;
    justify-content: space-between;
    height: 17.5%;
    width: 100%;
    padding: 5%;
    background-color: var(--dark-almost-transparent);
    border-radius: 3% / 10%;
    transition: opacity 0.3s;
}

#w1 {
    z-index: 5;
}

#w2 {
    z-index: 4;
}

#w3 {
    z-index: 3;
}

#w4 {
    z-index: 2;
}

#w5 {
    z-index: 1;
}

.advanced-info {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    height: 100%;
    border-radius: 3.75% / 2.5%;
}

.advanced-info .weaponInfo {
    height: 15%;
    width: 70%;
}

.advanced-info .weaponSelect {
    border-radius: 1.5% / 10%;
}

.advanced-info .weaponIcon {
    height: 14.5%;
}

.advanced-info .showAdvWrapper {
    height: calc(100% - 13.25%);
}

.advanced-info .showAdvanced {
    bottom: 0;
}

.advanced-info .showAdvanced::before {
    content: "Show less";
}

.weaponInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    width: 75%;
    z-index: 1;
}

.weaponSelCont {
    height: 35%;
    justify-content: space-between;
    z-index: 1;
}

.weaponSelCont, .weaponStats {
    display: flex;
    container-type: inline-size;
}

.weaponStats {
    flex-direction: column;
    flex-wrap: wrap;
}

.weaponStats > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weaponSelCont > span, .weaponStats > div {
    font-size: 6.5cqw;
    user-select: none;
    -webkit-user-select: none;
}

.defaultName::after {
    content: ":";
}

.defaultName.unused::after {
    visibility: hidden;
}

.defaultName::before {
    content: "None";
}

.defaultValue::before {
    content: "0";
}

.weapon-selected .defaultName::before, .weapon-selected .defaultValue:not(.average)::before {
    display: none;
}

.advanced-info .genericInfo1 .defaultName::before {
    content: "Type";
}

.advanced-info .genericInfo2 .defaultName::before {
    content: "Special";
}

.advanced-info .genericInfo1 .defaultValue::before, .advanced-info .genericInfo2 .defaultValue::before {
    display: none;
}

.weaponSelect {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 3%;
    background-color: var(--dark-almost-transparent);
    border-top: 0.75cqmin solid var(--dark-almost-transparent);
    border-left: 0.75cqmin solid var(--dark-semi-transparent);
    border-bottom: 0.75cqmin solid var(--transparent);
    border-right: 0.75cqmin solid var(--transparent);
    border-radius: 1.5% / 20%;
    transition: background 0.3s, box-shadow 0.3s, border 0.3s;
}

.weaponSelect.weapSel-disabled {
    background-color: var(--dark-semi-transparent);
}

.allCont .weaponSelect:not(.weapSel-disabled):hover, .allCont .weaponSelect:not(.weapSel-disabled):focus {
    outline: none;
    background-color: #00000060;
    cursor: pointer;
}

.weaponSelect.weaponSel-active {
    border: 1cqmin var(--dark-semi-transparent) solid;
    box-shadow: 0 0 8px var(--dark-semi-transparent);
}

.selWeaponName {
    color: var(--dark-semi-transparent);
    font-size: 5.75cqw;
    user-select: none;
    -webkit-user-select: none;
}

.advanced-info .selWeaponName {
    font-size: 6cqw;
}

.name-selected {
    color: var(--dark);
}

.weaponSelect::after {
    content: "";
    display: block;
    position: relative;
    height: 0;
    width: 0;
    right: 1%;
    border-left: 1.5cqmin solid transparent;
    border-right: 1.5cqmin solid transparent;
    border-top: 1.875cqmin solid var(--dark);
    transition: 0.5s;
}

.weaponSelect.weaponSel-active::after {
    transform: scaleY(-1);
}

.weaponMenu {
    background: repeating-linear-gradient(
        -45deg,
        #C6BF93,
        #C6BF93 1.5%,
        var(--ff-sand) 0,
        var(--ff-sand) 10%
    );
    display: none;
    justify-content: center;
    position: absolute;
    width: 100%;
    right: 0;
    top: 150%;
    padding: 2%;
    border: 1.25cqmin #00000075 solid;
    border-radius: 1.25%;
    box-shadow: 0 0 16px var(--dark-semi-transparent);
    transition: opacity 0.2s;
    aspect-ratio: 1 / 1.15;
    container-type: inline-size;
}

.weaponMenu.wm-open {
    display: flex;
}

.weaponMenu .sBarCont {
    border-width: 1.25cqmin;
}

.weaponMenu ul {
    position: absolute;
    height: 83.5%;
    width: 95%;
    bottom: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;
    overflow-anchor: none;
}

.weaponMenu ul li:first-of-type {
    display: flex !important;
}

.weaponMenu ul li {
    display: flex;
    align-items: center;
    padding: 2.5%;
    margin-bottom: 3%;
    max-width: 97.5%;
    border-radius: 1.25cqmin;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.3s;
}

.duplicateHidden {
    display: none !important;
}

.weaponMenu ul::-webkit-scrollbar-button:vertical:single-button:increment {
    display: block;
    height: 3%;
}

.weaponListIcon {
    height: 17.5cqmin;
    margin-right: 5%;
}

.weaponName {
    font-size: 7cqw;
}

.weaponIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: 1;
    aspect-ratio: 1;
}

.weaponLink {
    display: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: 5.5%;
    aspect-ratio: 1;
    transition: background 0.3s, opacity 0.175s;
}

.weaponLink-active {
    display: flex;
}

.weaponLink:hover, .weaponLink:focus {
    outline: none;
    background-color: var(--dark-almost-transparent);
}

.weaponLink img {
    height: 90%;
}

.weapSSWrapper {
    position: absolute;
    height: 10%;
    width: 100%;
    z-index: -1;
}

.weapScrollSpace {
    position: relative;
    height: 100%;
    width: 100%;
    top: 492.5%;
}

.weaponAdvInfo {
    display: none;
    flex-direction: column;
    row-gap: 1.5%;
    height: 82.5%;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.advanced-info .weaponAdvInfo {
    display: flex;
}

.weaponAdvInfo > div > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    container-type: inline-size;
}

.weaponAdvInfo > div > div > span {
    font-size: 4.25cqw;
    line-height: 125%;
}

.weaponAdvInfo > div::before {
    max-width: 75%;
}

.weaponAdvInfo > .baseDmg::before {
    content: "Basic Attack [base]";
}

.weaponAdvInfo > .finalDmg::before {
    content: "Basic Attack [final]";
}

.weaponAdvInfo input {
    position: relative;
    width: 10%;
    padding: 0.25% 1%;
    background-color: var(--dark-almost-transparent);
    outline: none;
    border: none;
    border-radius: 15% / 30%;
    font-family: "highway_gothicregular";
    font-size: 4.25cqw;
    text-align: right;
}

.average::before {
    content: "~";
}

.showAdvWrapper {
    position: absolute;
    height: calc(100% - 89.5%);
    width: calc(100% - 21%);
}

.showAdvanced {
    position: absolute;
    left: 50%;
    bottom: -20%;
    color: var(--dark-semi-transparent);
    transform: translate(-50%, 0);
    transition: color 0.1s;
}

.showAdvanced::before {
    content: "Show more";
}

.showAdvanced:hover, .showAdvanced:focus {
    outline: none;
    color: var(--dark);
    cursor: pointer;
}

.weaponTab {
    background: repeating-linear-gradient(
        -35deg,
        #00000008,
        #00000008 2.5%,
        var(--ff-duller-sand) 0,
        var(--ff-duller-sand) 10%
    );
    background-color: var(--ff-duller-sand);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 20%;
    width: 15%;
    top: 50%;
    left: 92.5%;
    border-top-right-radius: 10% 5%;
    border-bottom-right-radius: 10% 5%;
    transform: translate(0, -50%);
    transition: all 0.15s;
    z-index: -1;
}

.weaponTab:hover, .weaponTab:focus, .weaponTab:active {
    outline: none;
    left: 100%;
    cursor: pointer;
}

.weaponTab::before {
    content: "Stat Calculator";
    text-align: center;
    transform: rotate(90deg);
    line-height: 150%;
}

.slBox.weapons-active .weaponTab::before {
    content: "Damage Calculator";
}

.featsCont {
    display: flex;
    position: fixed;
    width: 99%;
    left: 50%;
    bottom: 1cqmin;
    transform: translate(-50%, 0);
    pointer-events: none;
    container-type: inline-size;
}

.featsCont > div:not(.switchCont) {
    background: repeating-linear-gradient(
        -35deg,
        #00000008,
        #00000008 1.5%,
        var(--ff-duller-sand) 0,
        var(--ff-duller-sand) 5%
    );
    background-color: var(--ff-duller-sand);
    position: absolute;
    height: 100%;
    box-shadow: 0 0 15px var(--dark-semi-transparent);
    pointer-events: auto;
}

.saveCont {
    border-radius: 2% / 10%;
}

.saveButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    border-right: 0.5cqmin solid #46473e;
    border-top-left-radius: 2% 10%;
    border-bottom-left-radius: 2% 10%;
    transition: background 0.25s ease;
    container-type: inline-size;
}

.saveButton.save-in-progress, .saveButton.save-locked {
    background-color: #00000075;
}

.saveButton:not(.save-disabled, .save-in-progress, .save-success, .save-failure, .save-error, .save-locked):hover, .saveButton:not(.save-disabled, .save-in-progress, .save-success, .save-failure, .save-error, .save-locked):focus {
    outline: none;
    background-color: #00000050;
    cursor: pointer;
}

.saveText, .saveButton::before {
    font-family: "Montserrat";
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.25s ease;
}

.saveText {
    display: flex;
    align-items: center;
    font-size: 6cqw;
    white-space: nowrap;
}

.saveButton.save-error .saveText {
    text-align: center;
    white-space: normal;
}

.saveButton::before {
    content: "Export build to ID";
}

.saveButton.save-in-progress::before {
    content: "Exporting...";
}

.saveButton.save-success::before {
    content: "Exported build to ID:";
}

.saveButton.save-failure::before {
    content: "Existent build ID:";
}

.saveButton.save-error::before {
    display: none;
}

.saveButton.save-disabled::before {
    opacity: 0.5;
}

.copyButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    right: 0;
    border-top-right-radius: 2% 10%;
    border-bottom-right-radius: 2% 10%;
    box-shadow: -0.075cqmin 0 0 #46473e;
    aspect-ratio: 1;
    transition: background 0.25s ease;
}

.copyButton:not(.copy-disabled):hover, .copyButton:not(.copy-disabled):focus {
    outline: none;
    background-color: #00000050;
    cursor: pointer;
}

.copyButton img[src*="Copy"] {
    height: 60%;
    transition: opacity 0.25s ease;
}

.copyButton.copied img[src*="Copy"] {
    display: none;
}

.copyButton img[src*="Check"] {
    display: none;
    height: 80%;
}

.copyButton.copied img[src*="Check"] {
    display: block;
}

.copyButton.copy-disabled img {
    opacity: 0.25;
}

.switchCont {
    background: repeating-linear-gradient(
        -35deg,
        #00000008,
        #00000008 2%,
        #86859C 0,
        #86859C 10%
    );
    background-color: #86859C;
    position: absolute;
    height: 100%;
    left: 50%;
    border-radius: 3% / 12%;
    box-shadow: 0 0 15px var(--dark-semi-transparent);
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.switchButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    border-top-left-radius: 3% 9%;
    border-bottom-left-radius: 3% 9%;
    border-right: 0.5cqmin solid #474959;
    transition: background 0.25s ease;
    container-type: inline-size;
}

.switchButton::before {
    content: "Switch builds";
    font-family: "Montserrat";
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.25s ease;
}

.switchButton.switch-disabled {
    background-color: #00000075;
}

.switchButton:not(.switch-disabled):hover, .switchButton:not(.switch-disabled):focus {
    outline: none;
    background-color: #00000050;
    cursor: pointer;
}

.compareButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    right: 0;
    box-shadow: -0.175cqmin 0 0 #474959;
    border-radius: 0 10% 10% 0;
    transition: background 0.25s ease;
    aspect-ratio: 1;
}

.compareButton.compare-disabled {
    background-color: #00000075;
}

.compareButton img[src*="Compare"] {
    height: 85%;
}

.compareButton.comparing img[src*="Compare"] {
    display: none;
}

.compareButton img[src*="Arrow"] {
    display: none;
    height: 85%;
}

.compareButton.comparing img[src*="Arrow"] {
    display: block;
}

.compareButton:not(.compare-disabled):hover, .compareButton:not(.compare-disabled):focus {
    outline: none;
    background-color: #00000050;
    cursor: pointer;
}

@keyframes compare-shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

.comparisonCont {
    transition: opacity 0.5s ease;
}

.comparisonCont .eBox {
    padding: 2%;
}

.comparisonArrow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dark-almost-transparent);
    border-radius: 5%;
    margin: auto;
    transition: all 0.5s ease;
}

.comparisonArrow:hover, .arrowCont:focus .comparisonArrow {
    outline: none;
    background-color: var(--dark-hardly-transparent);
    cursor: pointer;
}

body[style*="BG5"] .comparisonArrow:hover, body[style*="BG7"] .comparisonArrow:hover, body[style*="BG10"] .comparisonArrow:hover {
    outline: none;
    background-color: #EBEBEB50;
    cursor: pointer;
}

body[style*="BG5"] .arrowCont:focus .comparisonArrow, body[style*="BG7"] .arrowCont:focus .comparisonArrow, body[style*="BG10"] .arrowCont:focus .comparisonArrow {
    outline: none;
    background-color: #EBEBEB50;
    cursor: pointer;
}

body[style*="BG5"] .comparisonArrow, body[style*="BG7"] .comparisonArrow, body[style*="BG10"] .comparisonArrow {
    background-color: #EBEBEB25;
}

@keyframes arrow-shake {
    96% { transform: rotate(0deg); }
    97% { transform: rotate(10deg); }
    98% { transform: rotate(0deg); }
    99% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

.plusStat {
    color: #318C26;
}

.minusStat {
    color: #B63232;
}

.weapon .plusStat {
    color: #38A12C;
}

.weapon .minusStat {
    color: #8A2626;
}

.weapon.advanced-info .defaultValue.plusStat, .weapon.advanced-info .defaultValue.minusStat {
    color: inherit;
}

.difference {
    position: relative;
    margin-left: 5cqmin;
    font-size: 9cqw;
}

.weapDifference {
    display: none;
}

.weapDifference.plusStat::before {
    content: "(+";
}

.weapDifference.minusStat::before {
    content: "(-";
}

.weapDifference::after {
    content: ")";
}

.comparisonCont .comparisonActive .weaponStats, .comparisonCont .comparisonActive .weaponAdvInfo > div > div:not(.neutral) {
    pointer-events: auto;
}

.comparisonCont .comparisonActive .weaponAdvInfo > div > div:first-of-type {
    pointer-events: none;
}

.comparisonCont .weapon-selected .weaponStats > div:not(.neutral):hover .defaultValue, .comparisonCont .weaponAdvInfo > div > div:hover > span:nth-child(2) {
    display: none;
}

.comparisonCont .weapon-selected .weaponStats > div:not(.neutral):hover .weapDifference, .comparisonCont .weaponAdvInfo > div > div:hover > .weapDifference {
    display: block;
}

.comparisonCont .weaponSelCont {
    pointer-events: auto;
}

.comparisonCont .weaponSelCont:hover {
    cursor: not-allowed;
}

.comparisonCont .showAdvanced {
    pointer-events: auto;
}

.stBox > div .statNum.compareReducVis {
    font-size: 10cqw;
}

.statNum.compareReducVis ~ .difference {
    font-size: 8cqw;
}

.difference.plusStat::before {
    content: "(+";
}

.difference.minusStat::before {
    content: "(-";
}

.difference::after {
    content: ")";
}

#endurance .difference::after, #ammoReturn .difference::after {
    content: "%)";
}

.stBox img:hover ~ .difference {
    display: none;
}

.statNum.compareReducVis::before {
    display: none;
}

.statNum.compareReducVis ~ .difference::after {
    content: "%)";
}

.statNum.compareReducVis::after {
    content: "% Red.";
}

.loadCont {
    right: 0;
    border-radius: 1.5% / 10%;
    container-type: inline-size;
}

.loadButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    border-top-left-radius: 7.5% 10%;
    border-bottom-left-radius: 7.5% 10%;
    box-shadow: 0.075cqmin 0 0 #46473e;
    aspect-ratio: 1;
    transition: background 0.25s ease;
}

.loadButton.load-locked {
    background-color: #00000075;
}

.loadButton img[src*="Load"] {
    height: 95%;
    transition: opacity 0.25s ease;
}

.loadButton.load-disabled img[src*="Load"] {
    opacity: 0.25;
}

.loadButton.loading img[src*="Load"], .loadButton.load-success img[src*="Load"] {
    display: none;
}

.loadButton img[src*="Loading"], .loadButton.load-success img[src*="Loading"] {
    height: 50%;
    display: none;
}

.loadButton.loading img[src*="Loading"] {
    display: block;
}

.loadButton img[src*="Check"] {
    height: 80%;
    display: none;
}

.loadButton.load-success img[src*="Check"] {
    display: block;
}

.loadButton:not(.load-disabled, .loading, .load-success, .load-locked):hover, .loadButton:not(.load-disabled, .loading, .load-success, .load-locked):focus {
    outline: none;
    background-color: #00000050;
    cursor: pointer;
}

.loadInputCont {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    left: 50%;
    border-left: 1.25cqmin solid #46473e;
    border-right: 1.25cqmin solid #46473e;
    transform: translate(-50%, 0);
    transition: background 0.25s ease;
    container-type: inline-size;
}

.loadInputCont.input-disabled {
    background-color: #00000075;
}

.loadInput {
    width: 100%;
    background-color: var(--transparent);
    color: var(--dark);
    outline: none;
    border: none;
    text-align: center;
    font-family: "Montserrat";
    font-size: 6.5cqw;
}

.loadInput::placeholder {
    color: var(--dark-semi-transparent);
}

.loadInputCont.load-failure .loadInput, .loadInputCont.load-error .loadInput, .loadInputCont.load-prebuild .loadInput {
    display: none;
}

.loadInputCont.load-failure::before {
    content: "Invalid ID";
    font-family: "Montserrat";
    font-size: 7.5cqw;
}

.loadText {
    display: flex;
    align-items: center;
    font-family: "Montserrat";
    font-size: 6.5cqw;
    font-weight: bold;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.preBuildButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    right: 0;
    border-top-right-radius: 10%;
    border-bottom-right-radius: 10%;
    box-shadow: -0.075cqmin 0 0 #46473e;
    aspect-ratio: 1;
    transition: background 0.25s ease;
}

.preBuildButton.bb-open {
    background-color: #00000050;
}

.preBuildButton:not(.prebuild-disabled):hover, .preBuildButton:not(.prebuild-disabled):focus {
    outline: none;
    background-color: #00000050;
    cursor: pointer;
}

.preBuildButton.prebuild-disabled, .preBuildButton.bb-open:hover, .preBuildButton.bb-open:focus {
    background-color: #00000075;
}

.setIcon {
    height: 70%;
    opacity: 0.6;
    filter: brightness(0);
    transition: opacity 0.3s ease;
}

.preBuildButton.load-prebuild .setIcon {
    display: none;
}

.setIcon[src*="BlueWizard"] {
    width: 55%;
}

.setIcon[src*="Illuminator"] {
    height: 70%;
}

.setIcon[src*="TombProwler"] {
    height: 75%;
    width: 60%;
}

.setIcon[src*="Ratboy"] {
    height: 80%;
}

.preBuildButton img[src*="Arrow"] {
    height: 85%;
    display: none;
}

.preBuildButton.load-prebuild img[src*="Arrow"] {
    display: block;
}

.buildMenu {
    background: repeating-linear-gradient(
        -45deg,
        #C6BF93,
        #C6BF93 0.75%,
        var(--ff-sand) 0,
        var(--ff-sand) 5.75%
    );
    display: none;
    position: absolute;
    width: 85.5%;
    right: 0;
    bottom: 125%;
    padding: 2%;
    border: 1cqmin #00000075 solid;
    border-radius: 1.25%;
    box-shadow: 0 0 16px var(--dark-semi-transparent);
    font-family: "highway_gothicregular";
    transition: opacity 0.2s;
    container-type: inline-size;
}

.buildMenu.bm-open {
    display: flex;
}

.buildMenu ul {
    position: absolute;
    height: 97.5%;
    width: 95%;
    bottom: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;
    overflow-anchor: none;
}

.buildMenu ul::-webkit-scrollbar-button:vertical:single-button:increment {
    display: block;
    height: 2.5%;
}

.buildMenu ul li {
    display: flex;
    align-items: center;
    max-height: 17.815%;
    max-width: 97.5%;
    padding: 3%;
    margin-bottom: 2.5%;
    border-radius: 1.25cqmin;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.3s;
}

.buildMenu ul li:first-of-type {
    display: flex !important;
}

.buildListIcon {
    height: 14.5cqmin;
    margin-right: 5%;
}

.buildName {
    font-size: 6.75cqw;
}

.tooltip {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    padding: 10%;
    bottom: 115%;
    background-color: var(--dark);
    opacity: 0;
    border-radius: 5% / 10%;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.tooltip#compare {
    border-radius: 3% / 15%;
}

.tooltip::before {
    color: #EBEBEB;
    font-family: "Montserrat";
    user-select: none;
    -webkit-user-select: none;
}

.tooltip#copy::before {
    content: "Copy ID";
}

.copyButton:not(.copy-disabled):hover .tooltip, .copyButton:not(.copy-disabled):focus .tooltip {
    opacity: 0.9;
}

.tooltip#load::before {
    content: "Load ID";
}

.load-prebuild .tooltip#load::before {
    content: "Load set";
}

.loadButton:not(.load-disabled, .load-locked):hover .tooltip, .loadButton:not(.load-disabled, .load-locked):focus .tooltip {
    opacity: 0.9;
}

.tooltip#compare::before {
    content: "Compare sets";
}

.weapons-active .tooltip#compare::before {
    content: "Compare weapons";
}

.comparing .tooltip#compare::before {
    content: "Back";
}

.compareButton:not(.compare-disabled):hover .tooltip, .compareButton:not(.compare-disabled):focus .tooltip {
    opacity: 0.9;
}

.info {
    display: flex;
    position: fixed;
    width: 99%;
    top: 1cqmin;
    left: 50%;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    transform: translate(-50%, 0);
    container-type: inline-size;
}

.credits, .wiki {
    background-color: var(--dark-hardly-transparent);
    font-family: "Montserrat";
    transition: background 1s ease;
    user-select: none;
    -webkit-user-select: none;
}

body[style*="BG5"] .credits, body[style*="BG5"] .wiki {
    background-color: #EBEBEB25;
}

.credits {
    border-radius: 11.25% / 15%;
    color: #5865F2;
}

.wiki {
    border-radius: 2.25% / 15%;
}

.wiki a {
    color: #27A2DB;
}

.select-disabled:hover, .weapSel-disabled, .save-locked:hover, .switch-disabled:hover, .compare-disabled:hover, .load-locked:hover, .input-disabled:hover, input:disabled, .prebuild-disabled:hover {
    cursor: not-allowed;
}