@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';

/* /Components/Artifact/ArtifactCardModal.razor.rz.scp.css */
#artifact-card-modal-content[b-dzx4nbpukj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-component);
    padding: var(--padding-element)
}

#artifact-card-modal-image[b-dzx4nbpukj] {
    width: 80%;
}

#artifact-card-modal-stats-container[b-dzx4nbpukj] {
    width: 100%;
    display: flex;
    gap: var(--gap-component);
}

.artifact-card-modal-stat[b-dzx4nbpukj] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2)
}

.artifact-card-modal-stat img[b-dzx4nbpukj] {
    /* original images are 64x64 so this is 1/2 of the original size */
    width: 32px;
    height: 32px;
}
/* /Components/Artifact/ArtifactUnionPickerModal.razor.rz.scp.css */
#artifact-union-picker-modal[b-psw6dvminx] {
    padding: var(--padding-element);
}
/* /Components/Box.razor.rz.scp.css */
.box[b-lz9fubpt1e] {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: var(--border-radius-2);
    box-shadow: var(--box-shadow-title);
    padding: var(--padding-element-2);
    background-color: var(--background-color-2);
}

.box-title[b-lz9fubpt1e] {
    background-color: var(--background-color-3);
    padding: var(--padding-element-2);
    border-top-right-radius: var(--border-radius-2);
    border-top-left-radius: var(--border-radius-2);
}

.box-content[b-lz9fubpt1e] {
    height: 100%;
    align-items: center;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    box-shadow: var(--box-shadow-content);
    border-bottom-left-radius: var(--border-radius-2);
    border-bottom-right-radius: var(--border-radius-2);
}
/* /Components/BoxModal.razor.rz.scp.css */
#box-modal[b-jr6igjaox2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-component);
    padding: var(--padding-element)
}
/* /Components/Collapse.razor.rz.scp.css */
.collapse[b-i3av3dsawm] {
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
}

.collapse-banner[b-i3av3dsawm] {
    display: flex;
    padding: var(--padding-element-2);
    align-items: center;
}

.collapse-arrow[b-i3av3dsawm] {
    width: 36px;
}

.collapse-content[b-i3av3dsawm] {
    border-top: 1px solid var(--border-color);
}
/* /Components/EasterEgg/EasterEgg.razor.rz.scp.css */
.easter-container[b-5a7a3lxyd8] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    overflow: hidden;
    animation: hideAll-b-5a7a3lxyd8 0.1s forwards, hide-b-5a7a3lxyd8 0.1s forwards;
    animation-delay: 5s, 8.5s;
}

.video[b-5a7a3lxyd8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1002;
    will-change: transform, opacity;
}

@media (max-width: 768px) {
    .video[b-5a7a3lxyd8] {
        width: calc(20% + 100vw);
        height: auto;
        top: 50%;
        left: -10%;
        transform: translateY(-40%);
    }
}

.glow[b-5a7a3lxyd8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0%;
    z-index: 1001;
}

    .glow.show[b-5a7a3lxyd8] {
        animation: showGlow-b-5a7a3lxyd8 0.2s forwards, hide-b-5a7a3lxyd8 0.1s forwards;
        animation-delay: 4.017s, 7.3s;
    }

@keyframes showGlow-b-5a7a3lxyd8 {
    from {
        opacity: 0%;
    }

    to {
        opacity: 100%;
    }
}

@keyframes hideAll-b-5a7a3lxyd8 {
    from {
        background-color: rgba(0, 0, 0, 0.9);
    }

    to {
        background-color: rgba(0, 0, 0, 0.0);
    }
}

@keyframes hide-b-5a7a3lxyd8 {
    from {
        display: block;
    }

    to {
        display: none;
    }
}

.slot[b-5a7a3lxyd8] {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 100%;
}

    .slot.show[b-5a7a3lxyd8] {
        animation: slideUp-b-5a7a3lxyd8 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards, hide-b-5a7a3lxyd8 0.1s forwards;
        animation-delay: 0s, 7.5s;
    }

        .slot.show.left[b-5a7a3lxyd8] {
            animation: slideUp-b-5a7a3lxyd8 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards, dupeLeft-b-5a7a3lxyd8 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, hide-b-5a7a3lxyd8 0.1s forwards;
            animation-delay: 0s, 2.983s, 5.5s;
        }

        .slot.show.right[b-5a7a3lxyd8] {
            animation: slideUp-b-5a7a3lxyd8 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards, dupeRight-b-5a7a3lxyd8 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards, hide-b-5a7a3lxyd8 0.1s forwards;
            animation-delay: 0s, 2.983s, 5.5s;
        }

@keyframes slideUp-b-5a7a3lxyd8 {
    from {
        transform: translate(-50%, 100vh);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes dupeLeft-b-5a7a3lxyd8 {
    from {
        transform: translate(-50%, 0);
    }

    to {
        transform: translate(70%, -10%);
    }
}

@keyframes dupeRight-b-5a7a3lxyd8 {
    from {
        transform: translate(-50%, 0);
    }

    to {
        transform: translate(-170%, -10%);
    }
}
/* /Components/Error.razor.rz.scp.css */
#error-content[b-zuc00w70uk] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: absolute;
    gap: var(--gap-component);
    /* Center in the middle of the screen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* /Components/Gamble/GambleAB.razor.rz.scp.css */
#gamble-ab-header[b-80be1uynfd] {
    padding: var(--padding-element);
}
/* /Components/Gamble/GambleBonus.razor.rz.scp.css */
#gamble-bonus-title[b-mh5uj510tk] {
    flex: 1;
    text-align: center;
}

.gamble-bonus-row[b-mh5uj510tk] {
    display: flex;
    flex-direction: column;
    padding: var(--padding-element);
    border-bottom: 1px solid var(--border-color);
}

.gamble-bonus-title[b-mh5uj510tk] {
    display: flex;
    padding: var(--padding-element);
}

.gamble-bonus-desc[b-mh5uj510tk] {
    flex: 1;
    text-align: center;
}
/* /Components/Gamble/GamblePity.razor.rz.scp.css */
/* /Components/Gamble/GamblePull.razor.rz.scp.css */
#gamble-pull-header[b-s05rqnld9m] {
    display: flex;
    align-items: center;
    padding: var(--padding-element);
    border-bottom: 1px solid var(--border-color);
}

#header-starting-rates[b-s05rqnld9m] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#header-starting-rates img[b-s05rqnld9m] {
    height: 30px;
}

.gamble-pull-row[b-s05rqnld9m] {
    display: flex;
    align-items: center;
    padding: var(--padding-element);
    border-top: 1px solid var(--border-color);
}

.gamble-pull-row span[b-s05rqnld9m] {
    text-align: center;
    white-space: nowrap;
}

.gamble-pull-name[b-s05rqnld9m] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gamble-pickup-skin[b-s05rqnld9m] {
    color: #6BA55E;
}
/* /Components/Gamble/GambleStepup.razor.rz.scp.css */
#gamble-stepup-step-title[b-5dwqul7ad5] {
    flex: 1;
    text-align: center;
}

.gamble-stepup-step-row[b-5dwqul7ad5] {
    display: flex;
    align-items: center;
    gap: var(--gap-component);
    padding: var(--padding-element);
    border-bottom: 1px solid var(--border-color);
}

.gamble-stepup-step-image[b-5dwqul7ad5] {
    width: 48px;
}

.gamble-stepup-step-data[b-5dwqul7ad5] {
    flex: 1;
    text-align: center;
}
/* /Components/Hero/CostumeModal.razor.rz.scp.css */
#costume-modal-content[b-084ge6cs8b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-component);
    padding: var(--padding-element)
}

#costume-modal-content img[b-084ge6cs8b] {
    width: 40%;
}
/* /Components/Hero/HeroFilters.razor.rz.scp.css */
#hero-filters[b-qtu301jny9] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

#hero-select-boxes[b-qtu301jny9] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

@media (min-width: 1024px) {
    #hero-select-boxes[b-qtu301jny9] {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
/* /Components/Hero/HeroPickerModal.razor.rz.scp.css */
#hero-picker-modal-content[b-ou3exd0kjk] {
    padding: var(--padding-element);
}

#hero-picker-modal-heroes[b-ou3exd0kjk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--tierlist-hero-icon-size));
    justify-content: space-between;
    gap: var(--gap-component-2);
    margin-top: var(--filter-content-margin);
}

.hero-picker-modal-image[b-ou3exd0kjk] {
    width: var(--tierlist-hero-icon-size);
}
/* /Components/Hero/HeroSlot.razor.rz.scp.css */
.hero-slot[b-zq3lyz5w13] {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    filter: var(--drop-shadow);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
    gap: var(--gap-component-2);
}

.hero-slot-group-name[b-zq3lyz5w13] {
    display: flex;
    justify-content: space-around;
    border-radius: var(--border-radius-2);
    padding: var(--padding-element);
    overflow-x: auto;
    white-space: nowrap;
}

.hero-slot-full-name[b-zq3lyz5w13] {
    display: none;
}

@media (min-width: 1024px) {
    .hero-slot img[b-zq3lyz5w13] {
        margin: auto;
    }

    .hero-slot-group-name[b-zq3lyz5w13] {
        display: none;
    }

    .hero-slot-full-name[b-zq3lyz5w13] {
        display: flex;
        justify-content: space-around;
        text-align: center;
        border-radius: var(--border-radius-2);
        padding: var(--padding-element);
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* /Components/Item.razor.rz.scp.css */
.item-container[b-wp9tu3sfju] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item-skin-icon-container[b-wp9tu3sfju] {
    display: flex;
    position: relative;
}

.item-skin-level[b-wp9tu3sfju] {
    position: absolute;
    top: 2px;
    left: 2px;
    white-space: nowrap;
}

.item-skin-level-text[b-wp9tu3sfju] {
    position: absolute;
    z-index: 1;
}

.item-skin-level-outline[b-wp9tu3sfju] {
    position: absolute;
    z-index: 0;
    -webkit-text-stroke: 2px black;
}

.item-skin-awaken-icon[b-wp9tu3sfju] {
    width: 100%;
    position: absolute;
    bottom: 0;
}
/* /Components/ItemModal.razor.rz.scp.css */
#item-modal[b-3l7m55bsjs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-component);
    padding: var(--padding-element)
}
/* /Components/Loading.razor.rz.scp.css */
.loading-hawk[b-z4lb16hwib] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
/* /Components/Mission/AchievementModal.razor.rz.scp.css */
.achievement-modal-row[b-j0krj6t6xz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid var(--border-color);
}

.achievement-modal-reward[b-j0krj6t6xz] {
    min-width: 120px;
    display: flex;
    align-items: center;
    background-color: var(--bg-color-page);
    padding: var(--padding-element);
}

.achievement-modal-reward span[b-j0krj6t6xz] {
    flex: 1;
    text-align: center;
}
/* /Components/Mission/TitleModal.razor.rz.scp.css */
#title-modal-missions[b-ohyc61yhc4] {
    display: flex;
    flex-direction: column;
}

.title-modal-mission[b-ohyc61yhc4] {
    padding: var(--padding-element);
    border-top: 1px solid var(--border-color);
}
/* /Components/ModalBase.razor.rz.scp.css */
.modal-overlay[b-2kqg9ail5c] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    animation: fadeIn-b-2kqg9ail5c 0.3s ease-out forwards;
    background-color: rgba(0, 0, 0, 0.5);  /* Shadow background */
    z-index: 1050;
}

.modal-overlay.closing[b-2kqg9ail5c] {
    animation: fadeOut-b-2kqg9ail5c 0.3s ease-out forwards;
}

.modal[b-2kqg9ail5c] {
    width: 500px;
    max-width: 95vw;
    max-height: 90vh;  /* Without this, if the modal is too tall it will show whats in the middle and get stuck */
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-element);
    background-color: var(--background-color-1);
}

.modal-header[b-2kqg9ail5c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-element);
    border-bottom: 2px solid var(--border-color);
}

.modal-header-button[b-2kqg9ail5c] {
    background-color: var(--background-color-3);
    color: var(--text-color);
    border: none;
    border-radius: var(--border-radius-2);
    padding: var(--padding-element);
    white-space: nowrap;
}

.modal-content[b-2kqg9ail5c] {
    overflow-y: auto;  /* Scroll */
}

@keyframes fadeIn-b-2kqg9ail5c {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-2kqg9ail5c {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* /Components/Passive.razor.rz.scp.css */
.passive[b-j6jsglsv2q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
    gap: var(--padding-element);
}

.passive-header[b-j6jsglsv2q], .pc-passive-header[b-j6jsglsv2q] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pc-passive-header[b-j6jsglsv2q] {
    position: relative;
}

.mobile-passive-select[b-j6jsglsv2q], .pc-passive-select[b-j6jsglsv2q] {
    display: flex;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
    box-shadow: var(--box-shadow-title);
}

.pc-passive-select[b-j6jsglsv2q] {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
}

.mobile-passive-select img[b-j6jsglsv2q] {
    height: 90%;
    aspect-ratio: auto;
}

.passive-rank[b-j6jsglsv2q] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}

.passive-icons[b-j6jsglsv2q] {
    display: flex;
    gap: var(--gap-component-3);
    position: relative;
    align-items: center;
}

.passive-conditions[b-j6jsglsv2q], .pc-passive-conditions[b-j6jsglsv2q] {
    display: flex;
    flex-direction: column;
}

.pc-passive-conditions[b-j6jsglsv2q] {
    position: absolute;
    top: 50%;
    left: 120%;
    transform: translate(-50%, -50%);
    justify-content: center;
}

.creature-icon[b-j6jsglsv2q], .passive-condition[b-j6jsglsv2q] {
    width: 32px;
    height: 32px;
}
/* /Components/SearchBar.razor.rz.scp.css */
.search-bar[b-refu8vu1t4] {
    width: 100%;
    color: var(--text-color);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.search-bar:focus[b-refu8vu1t4] {
    outline: 1px solid var(--text-color);
}
/* /Components/SelectBox.razor.rz.scp.css */
.select-box[b-lorxjilkrz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
    text-align: center;
    white-space: nowrap;
}

.selector[b-lorxjilkrz] {
    color: var(--text-color);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.selector:focus[b-lorxjilkrz] {
    outline: 1px solid var(--text-color);
}
/* /Components/Skill.razor.rz.scp.css */
.hero-skill[b-nf5nqhcosk] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    gap: var(--padding-element);
    border-radius: var(--border-radius-element);
}

.hero-skill-select[b-nf5nqhcosk] {
    display: flex;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
    box-shadow: var(--box-shadow-title);
}

.hero-skill-rank[b-nf5nqhcosk] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}

.hero-skill-rank-icon[b-nf5nqhcosk] {
    width: 100%;
    max-width: 100px;
    max-height: 50px;
    height: auto;
    object-fit: contain;
}

.hero-skill-content[b-nf5nqhcosk] {
    height: 100%;
    display: flex;
    gap: var(--padding-element);
}

.hero-skill-icon[b-nf5nqhcosk] {
    display: flex;
    flex-direction: column;
    width: 95px;
    justify-content: center;
}

.hero-skill-icon-top[b-nf5nqhcosk] {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 2px;
}

.hero-skill-icon-top img[b-nf5nqhcosk] {
    width: 30%;
}
/* /Components/Stage/MonsterPassive.razor.rz.scp.css */
.monster-passive[b-bemuc80euk] {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    gap: var(--padding-element);
    border-radius: var(--border-radius-element);
}

.monster-passive-title[b-bemuc80euk] {
    text-align: center;
}

.monster-passive-list[b-bemuc80euk] {
    display: flex;
    overflow-x: auto;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
    gap: var(--gap-component-2);
}

.monster-passive-icon[b-bemuc80euk] {
    width: 96px;
    /* Passive icons already have left and right margin, so using padding on the 4 sides will create to much space between the images */
    padding: var(--padding-element) 0 var(--padding-element);
}
/* /Components/Stage/MonsterSkill.razor.rz.scp.css */
.monster-skill[b-883c0oejt5] {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    gap: var(--padding-element);
    border-radius: var(--border-radius-element);
}

.monster-skill-title[b-883c0oejt5] {
    text-align: center;
}

.monster-skill-list[b-883c0oejt5] {
    display: flex;
    overflow-x: auto;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
    gap: var(--gap-component-2);
}

.monster-skill-icon[b-883c0oejt5] {
    width: 96px;
    padding: var(--padding-element);
}
/* /Components/Stage/Phase.razor.rz.scp.css */
.stage-phase[b-ol2614cuxb] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    padding: var(--padding-element-2);
}

.monster[b-ol2614cuxb] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
    background-color: var(--background-color-2);
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
}

.monster-title-stats-row[b-ol2614cuxb], .monster-title-stats-column[b-ol2614cuxb] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

.monster-title[b-ol2614cuxb] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.monster-text[b-ol2614cuxb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.monster-passive-skill[b-ol2614cuxb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

@media (min-width: 1024px) {
    .monster[b-ol2614cuxb] {
        flex-direction: row;
    }

    .monster-title-stats-row[b-ol2614cuxb] {
        flex-direction: row;
    }

    .monster-title[b-ol2614cuxb] {
        flex-direction: column;
    }
}
/* /Components/Stage/Phases.razor.rz.scp.css */
.phase-banner-icon[b-wv6cluhnz9] {
    width: 64px;
    padding: var(--padding-element);  /* Makes them tiny enough */
}

.phase-banner-title[b-wv6cluhnz9] {
    flex: 1;
    text-align: center;
}
/* /Components/Stage/Stage.razor.rz.scp.css */
#stage[b-bm1ee6m0gs] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

#stage-title[b-bm1ee6m0gs] {
    text-align: center;
}

@media (min-width: 1024px) {
    #stage[b-bm1ee6m0gs] {
        width: 70%;
        margin: auto;
    }
}
/* /Components/Stage/StagePicker.razor.rz.scp.css */
.stage-picker-banner[b-p25wqsmwts] {
    flex: 1;
    display: flex;
    align-items: center;
}

.stage-picker-banner-icon[b-p25wqsmwts] {
    width: 86px;
}

.stage-picker-banner-title[b-p25wqsmwts] {
    flex: 1;
    text-align: center;
}

.stage-picker-stage[b-p25wqsmwts] {
    display: flex;
    padding: var(--padding-element);
    border-top: 1px solid var(--border-color);
}

.stage-picker-stage-title[b-p25wqsmwts] {
    flex: 1;
    text-align: center;
}

.stage-picker-stage-arrow[b-p25wqsmwts] {
    width: 24px;
}
/* /Components/Stats.razor.rz.scp.css */
.stats-grid[b-k0t5itxqi3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
}

.stat-item[b-k0t5itxqi3] {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: var(--padding-element);
    border: 1px solid var(--border-color);
}
/* /Components/StatsLevel.razor.rz.scp.css */
.stats-level[b-h2ik09hntf] {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    gap: var(--padding-element);
    padding: var(--padding-element);
}

.stats-level-header[b-h2ik09hntf] {
    text-align: center;
    background-color: var(--background-color-3);
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}

.stats-level-header svg[b-h2ik09hntf] {
    width: 36px;
}

.stats-level-input[b-h2ik09hntf] {
    text-align: center;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-2);
    color: var(--text-color);
}

@media (min-width: 1024px) {
    .stats-level-grid[b-h2ik09hntf] {
        display: grid !important;  /* without the !important, if you collapse in mobile mode then change to pc mode, the grid will be stuck collapsed */
    }
    
    .stats-level-expand[b-h2ik09hntf] {
        display: none;
    }
}
/* /Components/Story/QuestList.razor.rz.scp.css */
.quest-list[b-hk9svhd5mf] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

.quest[b-hk9svhd5mf] {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
    gap: var(--gap-component);
}

.quest-title[b-hk9svhd5mf] {
    text-align: center;
    padding: var(--padding-element);
    border-bottom: 1px solid var(--border-color);
}

@media (min-width: 1024px) {
    .quest-list[b-hk9svhd5mf] {
        width: 70%;
        margin: 0 auto;
    }
}
/* /Components/ToggleSwitch.razor.rz.scp.css */
.toggle-switch[b-suqnmvlk0e] {
    flex: 1;
    display: flex;
    gap: var(--gap-component);
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    border: none;
    color: var(--text-color);
    border-radius: var(--border-radius-element);
}
/* /Components/Tools/Calculator/Diamond/CalcBox.razor.rz.scp.css */
.calc-row[b-8m45yt8zy0] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: var(--padding-element);
    flex: 1;
}

.calc-input[b-8m45yt8zy0] {
    max-width: 40%;
    flex: 1;
}

.calc-date[b-8m45yt8zy0], .calc-number[b-8m45yt8zy0] {
    width: 100%;
    background-color: var(--background-color-3);
    border: none;
    color: white;
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}
/* /Components/Tools/Calculator/Hero/CostumePicker.razor.rz.scp.css */
.costume-picker-selected[b-9pu0avdbpp] {
    display: flex;
    max-width: 100%;
    justify-content: center;
    gap: var(--gap-component-3);
}

.costume-picker-selected-icon[b-9pu0avdbpp] {
    min-width: 0;
    max-width: 64px;
}

.costume-picker-list[b-9pu0avdbpp] {
    display: flex;
    gap: var(--gap-component-2);
    padding: var(--padding-element);
    overflow-x: scroll;
}

.costume-picker-icon[b-9pu0avdbpp] {
    width: var(--calc-hero-costume-size);
    height: var(--calc-hero-costume-size);
}
/* /Components/Tools/Calculator/Hero/CostumeTabs.razor.rz.scp.css */
#costume-tabs[b-xi6l0k2hab] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
}

#costume-tabs-toggles[b-xi6l0k2hab] {
    display: flex;
    gap: var(--gap-component-2);
}

.costume-tab[b-xi6l0k2hab] {
    background-color: var(--background-color-3);
    padding: var(--padding-element-2);
    border-radius: var(--border-radius-2);
}
/* /Components/Tools/Calculator/Hero/CraftEditor.razor.rz.scp.css */
#craft-editor[b-hv1fdldxq5] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#craft-editor-icon[b-hv1fdldxq5] {
    width: var(--calc-hero-costume-size);
    height: var(--calc-hero-costume-size);
}

#craft-editor-level[b-hv1fdldxq5] {
    display: grid;
    gap: var(--gap-component-2);
}

#craft-editor-level-changer[b-hv1fdldxq5] {
    display: flex;
    gap: var(--gap-component-3);
}

.craft-editor-unavailable-upgrade-icon[b-hv1fdldxq5], .craft-editor-upgrade-icon[b-hv1fdldxq5] {
    width: 40px;
    height: 40px;
}

.craft-editor-unavailable-upgrade-icon[b-hv1fdldxq5] {
    filter: grayscale(1);
}

.craft-editor-upgrade-icon[b-hv1fdldxq5] {
    filter: brightness(0.5);
}

.craft-editor-upgrade-icon.selected[b-hv1fdldxq5] {
    background-color: var(--background-color-hover);
    border-radius: var(--border-radius-2);
    filter: brightness(1);
}
/* /Components/Tools/Calculator/Hero/HeroEditor.razor.rz.scp.css */
#hero-editor[b-imz7xo1uvd] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

#hero-editor-awaken-buttons[b-imz7xo1uvd] {
    display: flex;
    gap: var(--gap-component-3);
    flex-wrap: wrap;
}

.hero-editor-awaken-button[b-imz7xo1uvd] {
    flex: 1;
    background-color: var(--background-color-3);
    color: var(--text-color);
    border: none;
    border-radius: var(--border-radius-2);
    padding: var(--padding-element);
}

.hero-editor-awaken-button-image[b-imz7xo1uvd] {
    height: 22px; /* 22px is the height of the yellow and red icon so lets use that */
}

/* Literally the same thing than in HeroWeaponModal */
#hero-editor-awaken[b-imz7xo1uvd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-component-2);
    background-color: var(--background-color-3);
    padding: var(--padding-element-3);
}

.awakening-arrow[b-imz7xo1uvd] {
    user-select: none;
    height: 40px;
    width: 30px;
    background-color: var(--background-color-1);
}

#awakening-icon[b-imz7xo1uvd] {
    object-fit: contain; /* So that the empty star has the same size than the other stars */
    /* 98x22 is the size of the yellow stars */
    width: 98px;
    height: 22px;
}

#hero-editor-special[b-imz7xo1uvd] {
    width: 100%;
    display: flex;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
}

.special-icon[b-imz7xo1uvd] {
    flex: 1;
    min-width: 0;
}
/* /Components/Tools/Calculator/Hero/HeroWeaponEditor.razor.rz.scp.css */
#hero-weapon-editor[b-6akve6hxa4] {
    flex: 1;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

#hero-weapon-editor-sets[b-6akve6hxa4], #hero-weapon-editor-ratings[b-6akve6hxa4] {
    display: flex;
    justify-content: space-evenly;
}

.set-icon[b-6akve6hxa4], .rating-icon[b-6akve6hxa4] {
    max-width: 40px;
    min-width: 0;
    object-fit: contain;
    border-radius: var(--border-radius-2);
}

#hero-weapon-editor-main[b-6akve6hxa4] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-component);
}

#weapon-icon[b-6akve6hxa4] {
    object-fit: contain;
}

#hero-weapon-editor-main-value[b-6akve6hxa4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
    text-align: center;
}

#hero-weapon-editor-upgrade[b-6akve6hxa4] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.upgrade-box[b-6akve6hxa4] {
    border-radius: var(--border-radius-2);
    padding: var(--padding-element-2);
    background-color: var(--background-color-3);
}

#hero-weapon-editor-awaken[b-6akve6hxa4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-component-2);
    background-color: var(--background-color-3);
    padding: var(--padding-element-3);
}

.awakening-arrow[b-6akve6hxa4] {
    user-select: none;
    height: 40px;
    width: 30px;
    background-color: var(--background-color-1);
}

#awakening-icon[b-6akve6hxa4] {
    object-fit: contain;
    width: 98px;
    height: 22px;
}

#hero-weapon-editor-options[b-6akve6hxa4] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-component-2);
}
/* /Components/Tools/Calculator/Hero/HeroWeaponModal.razor.rz.scp.css */
#hero-weapon-modal[b-dmf8ulyh6e] {
    padding: var(--padding-element);
}
/* /Components/Tools/Calculator/Hero/StatSlider.razor.rz.scp.css */
.stat-slider[b-7cig5ha80i] {
    width: 100%;
    background-color: var(--background-color-3);
    padding: var(--padding-element-2);
    box-sizing: border-box;
    border-radius: var(--border-radius-2);
}

.stat-slider-top[b-7cig5ha80i] {
    display: flex;
    justify-content: center;
    gap: var(--gap-component-2);
    text-align: center;
}

.stat-slider-number[b-7cig5ha80i] {
    box-sizing: border-box;
    background-color: var(--background-color-1);
    border: 1px solid var(--background-color-4);
    border-radius: var(--border-radius-2);
    color: var(--text-color);
    text-align: center;
}

.stat-slider-range[b-7cig5ha80i] {
    --fill: 100%;
    font-size: clamp(12px, 2vw, 18px);
    appearance: none;
    width: 100%;
    height: 1em;
    border-radius: 2px;
    cursor: pointer;
    outline: none;

    /* Creates a white line before the cursor, and a black line after */
    /* The variable --fill is added in modal-hero-weapon-range-input style in the C# code */
    background: linear-gradient(to right, white 0%, white var(--fill), var(--bg-color-page) var(--fill), var(--bg-color-page) 100%);
}

.stat-slider-range[b-7cig5ha80i]::-webkit-slider-thumb {  /* Cursor style */
    appearance: none;
    width: 1em;
    height: 1.5em;
    background: var(--background-color-2);
    border: 2px solid var(--background-color-4);
    border-radius: 2px;
    cursor: pointer;
}
/* /Components/Tools/Calculator/Hero/WeaponSlot.razor.rz.scp.css */
.weapon-image[b-4kcrh1k9kg] {
    position: relative;
    /* Size of the weapon icon */
    width: 128px;
    height: 128px;
    --corner-element-size: 37px;
}

.weapon-pc .weapon-rating-icon[b-4kcrh1k9kg],
.weapon-pc .weapon-awaken-icon[b-4kcrh1k9kg],
.weapon-pc .weapon-upgrade[b-4kcrh1k9kg] {
    pointer-events: none;
}

.weapon-rating-icon[b-4kcrh1k9kg] {
    width: var(--corner-element-size);
    height: var(--corner-element-size);
    /* Put the icon in the top left corner */
    position: absolute;
    top: 3px;
    left: 3px;
}

.weapon-awaken-icon[b-4kcrh1k9kg] {
    height: 22px;
    position: absolute;
    /* Put the icon in the bottom center */
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);  /* idk */
}

/* Copy of clickable-2 + translateX(-50%) because transformation dont stack */
.weapon-awaken-icon._clickable:hover[b-4kcrh1k9kg] {
    transition: width 0.3s ease;  /* From clickable-2 */
    transform: translateX(-50%) scale(1.15);
    cursor: pointer;
}

.weapon-upgrade[b-4kcrh1k9kg] {
    width: var(--corner-element-size);
    height: var(--corner-element-size);
    /* Put the icon in the top right cornet */
    position: absolute;
    display: flex;
    top: 3px;
    right: 3px;
    background-color: var(--background-color-3);
    padding: var(--padding-element-2);
    border-radius: var(--border-radius-2);
    /* text-align: center; */
    align-items: center;
    justify-content: center;
}

.carve-icon[b-4kcrh1k9kg] {
    width: var(--corner-element-size);
    height: var(--corner-element-size);
}
/* /Components/Tools/TeamBuilder/HeroReplacementSlot.razor.rz.scp.css */
.replacement-slot[b-0u4pq6d7dy] {
    display: flex;
    flex-direction: row;
    height: 70px;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--background-color-2);
    padding: var(--padding-element-2);
    border-radius: var(--border-radius-2);
}

svg[b-0u4pq6d7dy] {
    width: 15%;
}

.hero-slot-icon[b-0u4pq6d7dy] {
    max-width: 40%;
    max-height: 100%;
}
/* /Components/Tools/TeamBuilder/HeroTeamSlot.razor.rz.scp.css */
.hero-slot[b-py8zdharr7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component-3);
}

.hero-slot-sets[b-py8zdharr7] {
    display: flex;
    justify-content: center;
    border-radius: var(--border-radius-2);
    /* Don't ask me */
    width: 0;
    min-width: 100%;
}

.hero-slot-set-icon[b-py8zdharr7] {
    max-width: 30%;  /* We have between 1 and 3 icons so this is fine */
}

.hero-slot-icon[b-py8zdharr7] {
    max-width: 100%;
}

.hero-sub-icon[b-py8zdharr7] {
    width: 50%;
}
/* /Components/Tools/TeamBuilder/HeroTeamSlotSetModal.razor.rz.scp.css */
#hero-slot-set-modal[b-d6ipk4w3wf] {
    padding: var(--padding-element);
}

#selected-sets[b-d6ipk4w3wf] {
    display: flex;
    flex-direction: column;
}

.set-title[b-d6ipk4w3wf] {
    text-align: center;
}

#selected-sets-icons[b-d6ipk4w3wf] {
    display: flex;
    justify-content: space-around;
}

.set-icon[b-d6ipk4w3wf] {
    width: 64px;
    height: 64px;
}

#selected-set-button[b-d6ipk4w3wf] {
    flex: 1;
    color: var(--text-color);
    background: var(--background-color-3);
    border-radius: var(--border-radius-2);
    border: none;
    padding: var(--padding-element);
    margin-bottom: var(--filter-content-margin);
}

#selectable-sets[b-d6ipk4w3wf] {
    display: flex;
    flex-direction: column;
}

#selectable-sets-icons[b-d6ipk4w3wf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
}
/* /Components/Tools/TeamBuilder/HeroTeamStoneModal.razor.rz.scp.css */
#team-stone-modal[b-jm4yaldgxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-element);
}

#selected-stones[b-jm4yaldgxm] {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--filter-content-margin);
}

#selected-stones-icons[b-jm4yaldgxm] {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.stone-icon[b-jm4yaldgxm] {
    width: 96px;
}

#selected-stones-button[b-jm4yaldgxm] {
    flex: 1;
    color: var(--text-color);
    background: var(--background-color-3);
    border-radius: var(--border-radius-2);
    border: none;
    padding: var(--padding-element);
}

#select-stones[b-jm4yaldgxm] {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: repeat(3, 1fr);  /* Because there are 3 stones for each attribute, 3/row is the best */
    gap: var(--gap-component-2);
}
/* /Components/Tools/TeamBuilder/Team.razor.rz.scp.css */
.team[b-ng3h685kro] {
    width: min(500px, 95vw);
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-3);
    padding: var(--padding-element);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
}

.team-data[b-ng3h685kro] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

.team-replacements[b-ng3h685kro] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    gap: var(--gap-component-3);
    align-items: center;
    justify-content: space-evenly;
    border-radius: var(--border-radius-2);
}

.team-heroes[b-ng3h685kro] {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-component-2);
}

.team-add-data[b-ng3h685kro] {
    height: 80px;
    display: flex;
    gap: var(--gap-component-2);
}

.team-gvg-stones[b-ng3h685kro] {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    background-color: var(--background-color-2);
    border-radius: var(--border-radius-2);
}

.team-gvg-stone-icon[b-ng3h685kro] {
    max-width: 30%;  /* We have between 1 and 3 icons so this is fine */
    height: auto;
    object-fit: contain;
}

.team-union[b-ng3h685kro] {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: var(--background-color-2);
    border-radius: var(--border-radius-2);
}

.team-union-icon[b-ng3h685kro] {
    width: 64px;
}

.team-union-name[b-ng3h685kro] {
    flex: 1;
    text-align: center;
}
/* /Components/Tools/TierList/TierRow.razor.rz.scp.css */
.tier-row[b-df0f0kuxsm] {
    width: 100%;
    display: flex;
    border: 2px solid var(--background-color-3);
}

.tier-name[b-df0f0kuxsm] {
    width: 10%;
    display: flex;
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--padding-element-2);
    overflow: hidden;
    max-width: var(--tierlist-hero-icon-size);
}

.tier-heroes[b-df0f0kuxsm] {
    flex: 1;
    display: grid;
    box-sizing: content-box;
    grid-template-columns: repeat(auto-fill, var(--tierlist-hero-icon-size));
    justify-content: space-around;
    gap: var(--gap-component-2);
    background-color: var(--background-color-1);
    padding: var(--padding-element-2);
    min-height: var(--tierlist-hero-icon-size);
}

.tier-hero-image[b-df0f0kuxsm] {
    width: var(--tierlist-hero-icon-size);
}
/* /Components/Tools/TierList/TierRowSettingsModal.razor.rz.scp.css */
#tier-settings[b-rf4zro2fv3] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    padding: var(--padding-element);
}

#tier-settings-buttons[b-rf4zro2fv3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-component-2);
}

.tier-settings-button[b-rf4zro2fv3] {
    flex: 1;
    color: var(--text-color);
    background: var(--background-color-3);
    border-radius: var(--border-radius-2);
    border: none;
    padding: var(--padding-element);
}

#tier-settings-color[b-rf4zro2fv3] {
    display: flex;
    flex-direction: column;
}

#tier-settings-color-input[b-rf4zro2fv3] {
    width: 100%;
    background: var(--background-color-3);
    border: none;
    border-radius: var(--border-radius-2);
}

#tier-settings-name[b-rf4zro2fv3] {
    display: flex;
    gap: var(--gap-component-2);
}

#tier-settings-input[b-rf4zro2fv3] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    color: var(--text-color);
    background-color: var(--background-color-3);
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}
/* /Layout/LanguageSelector.razor.rz.scp.css */
#localization[b-o38wa025qn] {
    display: flex;
    gap: var(--gap-component);
    align-items: center;
}
/* /Layout/MainLayout.razor.rz.scp.css */
#mobile-topbar[b-9gxil13j8w] {
    display: flex;
    position: relative;
    height: 50px;
    justify-content: space-between;
    gap: var(--gap-component);
    padding: 5px;
    background-color: var(--bg-color-topbar);
}

#mobile-topbar-links[b-9gxil13j8w] {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    z-index: 100;
    top: 100%;
    left: 0;
}

.mobile-topbar-link[b-9gxil13j8w] {
    padding: 10px;
    border-bottom: solid 2px var(--border-color);
}

#pc-topbar[b-9gxil13j8w] {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background-color: var(--bg-color-topbar);
}

#pc-topbar-logo[b-9gxil13j8w] {
    height: 100%;
}

#pc-topbar-links[b-9gxil13j8w] {
    flex: 1;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

.pc-topbar-link[b-9gxil13j8w] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--padding-element);
    border-radius: var(--border-radius-element);
}

#pc-topbar-more[b-9gxil13j8w] {
    position: relative;
}

#pc-topbar-more-options[b-9gxil13j8w] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color-topbar);
    flex-direction: column;
    z-index: 100;
}

#pc-topbar-more:hover #pc-topbar-more-options[b-9gxil13j8w] {
    display: flex;
}

.pc-topbar-more-option[b-9gxil13j8w] {
    padding: var(--padding-element);
    white-space: nowrap;
}

.logo[b-9gxil13j8w] {
    align-self: center;
    height: 100%;
}

.logo img[b-9gxil13j8w] {
    height: 100%;
}

#main-content[b-9gxil13j8w] {
    padding: 10px;
    flex: 1;
}

#main-container[b-9gxil13j8w] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#footer[b-9gxil13j8w] {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color-topbar);
    text-align: center;
    padding: var(--padding-element);
}

#footer a:hover[b-9gxil13j8w] {
    filter:brightness(1.8);
}

#redirect-donation[b-9gxil13j8w] {
    color: #FF8534;
}

#redirect-privacy[b-9gxil13j8w] {
    color: #2AC558;
}

#redirect-about[b-9gxil13j8w] {
    color: #A855F7;
}

#redirect-discord[b-9gxil13j8w] {
    color: #28B5FF;
}

[b-9gxil13j8w] * {
    box-sizing: border-box;
}
/* /Pages/About.razor.rz.scp.css */
#about-main[b-tuptgk0c3q] {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--gap-component);
    min-height: 65vh;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.about-text[b-tuptgk0c3q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-text p[b-tuptgk0c3q] {
    margin: 0;
}

#discord-link[b-tuptgk0c3q] {
    color: #5865F2;
    text-decoration: none;
}

#discord-link:hover[b-tuptgk0c3q] {
    text-decoration: underline;
}

#developers[b-tuptgk0c3q] {
    display: flex;
    width: 100%;
    justify-content: space-around;
    gap: 20px;
}

.developer[b-tuptgk0c3q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.developer-pfp[b-tuptgk0c3q] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

#patreon-section[b-tuptgk0c3q] {
    text-align: center;
    margin-top: 2rem;
}

@media (min-width: 1024px) {
    #about-main[b-tuptgk0c3q] {
        flex-direction: row;
        text-align: left;
        margin: 0 auto;
    }

    .about-text[b-tuptgk0c3q] {
        flex: 1;
        padding-right: 4rem;
    }

    #developers[b-tuptgk0c3q] {
        flex: 1;
        justify-content: space-evenly;
    }
}
/* /Pages/Artifact/Artifact.razor.rz.scp.css */
#artifact-switch[b-4sfxhbai7s] {
    display: flex;
    gap: var(--gap-component-2);
    margin-bottom: var(--gap-component);
}
/* /Pages/Artifact/ArtifactCard.razor.rz.scp.css */
#artifact-card-filters[b-swswy4df2f] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    margin-bottom: var(--filter-content-margin);
}

#artifact-card-select-boxes[b-swswy4df2f] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

#artifact-card-list[b-swswy4df2f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--gap-component-2);
    justify-content: center;
}

.artifact-card[b-swswy4df2f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--background-color-1);
    filter: var(--drop-shadow);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
}

.artifact-card-top[b-swswy4df2f] {
    width: 100%;
}

.artifact-card-image[b-swswy4df2f] {
    width: 100%;
}

.artifact-card-stats[b-swswy4df2f], .artifact-card-full-name[b-swswy4df2f] {
    display: none;
}

.artifact-card-info-container[b-swswy4df2f] {
    width: 100%;
}

.artifact-card-number[b-swswy4df2f] {
    display: block;
    background-color: var(--background-color-3);
    text-align: center;
    border-radius: var(--border-radius-2);
    padding: var(--padding-element);
}

@media (min-width: 1024px) {
    #artifact-card-select-boxes[b-swswy4df2f] {
        flex-direction: row;
    }
    
    #artifact-card-list[b-swswy4df2f] {
        width: 70%;
        margin: 0 auto;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--gap-component);
    }

    .artifact-card[b-swswy4df2f] {
        height: 100%;
        padding: var(--padding-element);
        justify-content: space-between;
    }
    
    .artifact-card-top[b-swswy4df2f] {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: var(--gap-component);
        margin-bottom: var(--gap-component);
    }

    .artifact-card-image[b-swswy4df2f] {
        flex: 1;
        width: auto;
        max-width: 50%;
        height: auto;
        object-fit: contain;
        filter: var(--drop-shadow);
    }

    .artifact-card-stats[b-swswy4df2f] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--gap-component);
        height: auto;
    }

    .artifact-card-stat-row[b-swswy4df2f] {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        background-color: var(--background-color-3);
        padding: var(--padding-element-2);
        border-radius: var(--border-radius-2);
    }

    .artifact-card-stat-row img[b-swswy4df2f] {
        /* default size if 64*64 so this is 3/4 of the original size */
        width: 48px;
        height: 48px;
    }

    .artifact-card-number[b-swswy4df2f] {
        display: none;
    }

    .artifact-card-full-name[b-swswy4df2f] {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: var(--background-color-3);
        padding: var(--padding-element);
        border-radius: var(--border-radius-2);
        text-align: center;
    }
}
/* /Pages/Artifact/ArtifactUnion.razor.rz.scp.css */
#artifact-union-list[b-n8m3ox8igd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
    margin-top: var(--filter-content-margin);
}

.artifact-union[b-n8m3ox8igd] {
    width: min(800px, 100%);
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    gap: var(--gap-component);
    border-radius: var(--border-radius-element);
    box-sizing: border-box;
}

.artifact-union-title[b-n8m3ox8igd] {
    width: 100%;
    display: flex;
    gap: var(--gap-component);
}

.artifact-union-title span[b-n8m3ox8igd] {
    /* make the text appear in the center, vertically and horizontally */
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--background-color-3);
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}

.artifact-union-name[b-n8m3ox8igd] {
    width: 100%;
}

.artifact-union-images[b-n8m3ox8igd] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-component-2);
}

.artifact-union-image-slot[b-n8m3ox8igd] {
    width: 100%;
    border-radius: 8px;
}

.artifact-union-stats-container[b-n8m3ox8igd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-component-2);
}

.artifact-union-stat[b-n8m3ox8igd] {
    width: 100%;  /* the 3 stats will split the whole width evenly */

    /* make the icon and number appear next to each other, in the center, vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
}

.artifact-union-stat img[b-n8m3ox8igd] {
    width: 25%;
}

.artifact-union-passive[b-n8m3ox8igd] {
    height: fit-content;
    text-align: center;
    background-color: var(--background-color-3);
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}
/* /Pages/CreatureNest/CreatureNest.razor.rz.scp.css */
#creaturenest[b-ztfj0iv75w] {
    display: grid;
    gap: var(--gap-component);
}

@media (min-width: 1024px) {
    #creaturenest[b-ztfj0iv75w] {
        width: 70%;
        margin: auto;
    }
}
/* /Pages/CreatureNest/CreatureNestStage.razor.rz.scp.css */
#creaturenest-stage-title-mobile[b-g4pua602np] {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: var(--filter-content-margin);
}

#creaturenest-stage-content[b-g4pua602np] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

@media (min-width: 1024px) {
    #creaturenest-stage-content[b-g4pua602np] {
        width: 70%;
        margin: auto;
    }
}
/* /Pages/Gamble/Gamble.razor.rz.scp.css */
#gamble-list[b-yh4pbm24kg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
}

.gamble-row[b-yh4pbm24kg] {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
    gap: var(--gap-component-2);
}

.gamble-row-image[b-yh4pbm24kg] {
    max-width: 100%;
    border-radius: var(--border-radius-2);
}
/* /Pages/GuildBoss/GuildBoss.razor.rz.scp.css */
#guildboss-season[b-r4fo9jruby], #guildboss-offseason[b-r4fo9jruby] {
    display: grid;
    gap: var(--gap-component);
}

#guildboss-season[b-r4fo9jruby] {
    margin-bottom: var(--filter-content-margin);
}

#guildboss-season-title[b-r4fo9jruby], #guildboss-offseason-title[b-r4fo9jruby] {
    text-align: center;
}

#guildboss-score-title[b-r4fo9jruby] {
    flex: 1;
    text-align: center;
}

#guildboss-score-rewards[b-r4fo9jruby] {
    display: grid;
    gap: var(--gap-component);
    padding: var(--padding-element);
}

@media (min-width: 1024px) {
    #guildboss[b-r4fo9jruby] {
        width: 70%;
        margin: auto;
    }
}
/* /Pages/Hero/Hero.razor.rz.scp.css */
#hero-filters[b-unjjp2pdb2] {
    margin-bottom: var(--filter-content-margin);
}

#hero-list[b-unjjp2pdb2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--gap-component-2);
    justify-content: center;
}

@media (min-width: 1024px) {
    #hero-list[b-unjjp2pdb2] {
        display: grid;
        width: 70%;
        margin: 0 auto;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--gap-component);
        justify-content: center;
    }
}
/* /Pages/Hero/HeroInfo.razor.rz.scp.css */
#hero-info[b-pzj8ovfni7] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

/*#region Header */
#hero-header[b-pzj8ovfni7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
    background-color: var(--background-color-1);
    position: relative;
}

#hero-header-text[b-pzj8ovfni7] {
    flex: 1;
    text-align: center;
    padding-left: var(--padding-element);
}

#hero-header-calc-icon[b-pzj8ovfni7] {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 8px;
    right: 8px;
    object-fit: contain;
}
/*#endregion*/

#hero-change[b-pzj8ovfni7] {
    display: flex;
    align-items: center;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
}

#hero-change-text[b-pzj8ovfni7] {
    flex: 1;
    text-align: center;
}

#hero-detail-rating-selector[b-pzj8ovfni7] {
    display: flex;
    gap: var(--gap-component-3);
    justify-content: space-around;
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
}

.hero-detail-rating[b-pzj8ovfni7] {
    padding: var(--padding-element-2);
    border-radius: var(--border-radius-2);
}

.hero-detail-rating-icon[b-pzj8ovfni7] {
    width: 48px;
    object-fit: contain;
    border-radius: var(--border-radius-2);
}

/*#region Details*/
#hero-detail-list[b-pzj8ovfni7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

.hero-detail-row[b-pzj8ovfni7] {
    height: 100%;
    display: flex;
    gap: var(--gap-component-2);
}

#hero-detail-stats[b-pzj8ovfni7] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

.hero-detail[b-pzj8ovfni7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--padding-element);
    gap: var(--padding-element);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
}

.hero-detail-title[b-pzj8ovfni7] {
    width: 100%;
    text-align: center;
    padding: var(--padding-element-2);
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
}

.hero-detail-data[b-pzj8ovfni7] {
    margin: auto;
}

img.hero-detail-data[b-pzj8ovfni7] {
    width: 48px;
    height: 48px;
    padding: var(--padding-element-2);
}
/*#endregion*/

#hero-extra-passives[b-pzj8ovfni7] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

.hero-extra-passive[b-pzj8ovfni7] {
    width: 100%;
}

#hero-skills[b-pzj8ovfni7] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

@media (min-width: 1024px) {
    #hero-info[b-pzj8ovfni7] {
        max-width: 1100px;
        margin: 0 auto;
    }

    #hero-detail-stats[b-pzj8ovfni7] {
        flex-direction: row;
    }

    #hero-stats[b-pzj8ovfni7] {
        flex: 1;
    }
    
    #hero-extra-passives[b-pzj8ovfni7] {
        flex-direction: row;
    }
    
    .hero-extra-passive[b-pzj8ovfni7] {
        display: flex;
    }

    #hero-skills[b-pzj8ovfni7] {
        flex-direction: row;
    }

    .hero-skill[b-pzj8ovfni7] {
        flex: 1;
    }
}
/* /Pages/Home.razor.rz.scp.css */
#home[b-fwa73w8wy7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    gap: var(--gap-component);
}

#announcement-banner[b-fwa73w8wy7] {
    width: 100%;
    background-color: #ffcc00;
    color: black;
    text-align: center;
    padding: var(--padding-element);
}

#home-logo[b-fwa73w8wy7] {
    width: 60%;
}

#heroes[b-fwa73w8wy7] {
    text-align: center;
}

#heroes-container[b-fwa73w8wy7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* On mobile, 2 hero/row */
    gap: var(--gap-component-2);
}

.hero[b-fwa73w8wy7] {
    position: relative;
}

/*#region Hero Popup */
.hero .hero-popup[b-fwa73w8wy7] {
    position: absolute;
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, width 300ms ease, height 300ms ease;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 20px rgba(0, 0, 0, 1));
    z-index: 9999;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 90%, transparent 100% ), linear-gradient(to bottom, transparent 0%, black 10%, black 85%, transparent 100% );
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 90%, transparent 100% ), linear-gradient(to bottom, transparent 0%, black 10%, black 85%, transparent 100% );
    mask-composite: intersect;
}

/* BG CONTAINER */
.hero .popup-background[b-fwa73w8wy7] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, width 300ms ease, height 300ms ease;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9998;
    overflow: hidden;
    border-radius: 12px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100% ), linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100% );
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100% ), linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100% );
    mask-composite: intersect;
}

/* REPEAT GROUP NAME PATTERN */
.hero .text-pattern[b-fwa73w8wy7] {
    display: flex;
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    flex-direction: column;
    gap: 20px;
    transform: rotate(-45deg);
    opacity: 0.4;
}

.hero .text-pattern .text-line[b-fwa73w8wy7] {
    white-space: nowrap;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 5px;
}

/* ODD LINES FORWARD */
.hero .text-pattern .text-line:nth-child(odd)[b-fwa73w8wy7] {
    transform: translateX(40px);
}

/* EVEN LINES AT STOCK PALCE */
.hero .text-pattern .text-line:nth-child(even)[b-fwa73w8wy7] {
    transform: translateX(0);
}

/* FADE SQUARE BORDERS */
.hero .popup-background[b-fwa73w8wy7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* FADE SQUARE BORDERS */
.hero .popup-background[b-fwa73w8wy7]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8));
    z-index: -1;
    border-radius: 12px;
}

.hero:has(.hero-slot-image:hover) .hero-popup[b-fwa73w8wy7] {
    width: 100%;
    opacity: 1;
}

.hero:has(.hero-slot-image:hover) .popup-background[b-fwa73w8wy7] {
    width: 120%;
    height: auto;
    aspect-ratio: 1 / 1;
    opacity: 1;
}
/*#endregion */

/*#region Banners */
#gambles[b-fwa73w8wy7] {
    display: flex;
    flex-direction: column;
    text-align: center;
}

#gamble-images[b-fwa73w8wy7] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
    max-width: 500px;
}

.gamble-redirect[b-fwa73w8wy7] {
    flex: 1;
    padding: var(--padding-element);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    filter: var(--drop-shadow);
}

.gamble-image[b-fwa73w8wy7] {
    display: block;
    width: 100%;
    border-radius: var(--border-radius-2);
}
/*#endregion */

/*#region Forums */
#forum[b-fwa73w8wy7] {
    display: flex;
    flex-direction: column;
    text-align: center;
}

#forum-holder[b-fwa73w8wy7] {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    width: 100%;
    filter: var(--drop-shadow);
}

#forum-holder #forum-ref[b-fwa73w8wy7] {
    opacity: 0;
    pointer-events: none;
    width: 100%;
    display: block;
}

#forum-holder .diagonal-link[b-fwa73w8wy7] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: var(--padding-element);
    left: var(--padding-element);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease;}

#forum-holder .diagonal-link img[b-fwa73w8wy7] {
    width: calc(100% - (var(--padding-element)*2));
    height: calc(100% - (var(--padding-element)*2));
    object-fit: cover;
    display: block;
}

#forum-holder .diagonal-link:hover[b-fwa73w8wy7] {
    transform: scale(1.05);
    z-index: 100;
}

#forum-holder .link-left[b-fwa73w8wy7] {
    border-radius: var(--border-radius-element) 0 0 var(--border-radius-element);
    clip-path: polygon(0 0, 46.6% 0, 51.4% 100%, 0 100%)
}

#forum-holder .link-right[b-fwa73w8wy7] {
    border-radius: 0 var(--border-radius-element) var(--border-radius-element) 0;
    clip-path: polygon(46.3% 0, 100% 0, 100% 100%, 51.3% 100%);
}
/*#endregion */

@media (min-width: 1024px) {
    #home[b-fwa73w8wy7] {
        width: 80vw;
    }

    #home-logo[b-fwa73w8wy7] {
        width: 15%;
    }

    #heroes-container[b-fwa73w8wy7] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #gamble-images[b-fwa73w8wy7] {
        flex-direction: row;
        max-width: none;
    }
}
/* /Pages/Mission/Achievement.razor.rz.scp.css */
#achievement-filters[b-9lg1465d3r] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    margin-bottom: var(--filter-content-margin);
}

#achievement-switches[b-9lg1465d3r] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

.achievement-switch-row[b-9lg1465d3r] {
    flex: 1;
    display: flex;
    gap: var(--gap-component-2);
}

#achievement-list[b-9lg1465d3r] {
    display: grid;
    gap: var(--gap-component)
}

.achievement-row[b-9lg1465d3r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
}

.achievement-left-side[b-9lg1465d3r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
}

.achievement-desc[b-9lg1465d3r] {
    text-align: center;
}

.achievement-details[b-9lg1465d3r] {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.achievement-img-count[b-9lg1465d3r] {
    min-width: 120px;
    display: flex;
    align-items: center;
    background-color: var(--bg-color-page);
    padding: var(--padding-element);
}

.achievement-img-count img[b-9lg1465d3r] {
    width: 32px;
    height: 32px;
}

.achievement-img-count span[b-9lg1465d3r] {
    flex: 1;
    text-align: center;
}

.achievement-arrow[b-9lg1465d3r] {
    width: 32px;
}

@media (min-width: 1024px) {
    #achievement-switches[b-9lg1465d3r] {
        flex-direction: row;
        width: 100%;
    }

    #achievement-list[b-9lg1465d3r] {
        width: 70%;
        margin: 0 auto;
    }

    .achievement-left-side[b-9lg1465d3r] {
        flex-direction: row;
        border: none;
    }

    .achievement-desc[b-9lg1465d3r] {
        flex: 1;
    }

    .achievement-details[b-9lg1465d3r] {
        flex: 1;
    }
}
/* /Pages/Mission/Mission.razor.rz.scp.css */
#mission-switch[b-5p9akzwby1] {
    display: flex;
    gap: var(--gap-component-2);
    margin-bottom: var(--gap-component);
}
/* /Pages/Mission/Title.razor.rz.scp.css */
#title-list[b-fhpk5mudlw] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    margin-top: var(--filter-content-margin);
}

.title-row[b-fhpk5mudlw] {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
    gap: var(--padding-element);
}

.title-header[b-fhpk5mudlw] {
    display: flex;
    align-items: center;
    padding: var(--padding-element);
}

.title-rating[b-fhpk5mudlw], .title-arrow[b-fhpk5mudlw] {
    width: 35px;
}

.title-name[b-fhpk5mudlw] {
    flex: 1;
    text-align: center;
}

.title-effect[b-fhpk5mudlw] {
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
    padding: var(--padding-element-2);
}

@media (min-width: 1024px) {
    #title-list[b-fhpk5mudlw] {
        width: 70%;
        margin: var(--filter-content-margin) auto;
    }
    
    .title-effect[b-fhpk5mudlw] {
        text-align: center;
    }
}
/* /Pages/PrivacyPolicy.razor.rz.scp.css */
#contact[b-wg25lli1ez] {
    color: #A855F7;
}
/* /Pages/Story/Story.razor.rz.scp.css */
#story-list[b-2keouvwrg8] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

.story-banner[b-2keouvwrg8] {
    flex: 1;
    display: flex;
    align-items: center;
}

.story-icon[b-2keouvwrg8] {
    width: 86px;
}

.story-title[b-2keouvwrg8] {
    flex: 1;
    text-align: center;
}

.chapter-row[b-2keouvwrg8] {
    display: flex;
    align-items: center;
    padding: var(--padding-element-2);
    border-top: 1px solid var(--border-color);
}

.chapter-row img[b-2keouvwrg8] {
    width: 86px;
}

.chapter-title[b-2keouvwrg8] {
    flex: 1;
    text-align: center;
}

.chapter-row svg[b-2keouvwrg8] {
    width: 24px;
}

@media (min-width: 1024px) {
    #story-list[b-2keouvwrg8] {
        width: 70%;
        margin: 0 auto;
    }
}
/* /Pages/Story/StoryChapter.razor.rz.scp.css */
#chapter-title[b-xmiymd19yr] {
    display: flex;
    align-items: center;
    padding: var(--padding-element)
}

.chapter-change[b-xmiymd19yr] {
    display: flex;
    justify-content: center;
}

.chapter-change-arrow[b-xmiymd19yr] {
    width: 50px;
}

#chapter-name-mobile[b-xmiymd19yr] {
    flex: 1;
    text-align: center;
}

#chapter-name-pc[b-xmiymd19yr] {
    display: none;
}

.chapter-sub-title[b-xmiymd19yr] {
    text-align: center;
    margin-top: var(--filter-content-margin);
    border-top: 1px solid var(--border-color);
    padding: var(--padding-element);
}

@media (min-width: 1024px) {
    #chapter-name-mobile[b-xmiymd19yr] {
        display: none;
    }

    #chapter-name-pc[b-xmiymd19yr] {
        flex: 1;
        display: block;
        text-align: center;
    }
}
/* /Pages/Tools/Calculator/Calculator.razor.rz.scp.css */
#calculator-switches[b-afgdecz9pw] {
    display: flex;
    gap: var(--gap-component-2);
    margin-bottom: var(--gap-component);
}
/* /Pages/Tools/Calculator/Diamond/CalculatorDiamond.razor.rz.scp.css */
#calc-dia[b-sm3eljufpr] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

#grid[b-sm3eljufpr] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

#calc-dia-button[b-sm3eljufpr] {
    background-color: var(--background-color-3);
    color: var(--text-color);
    border: none;
    border-radius: var(--border-radius-element);
    padding: 20px;
    width: 100%;
}

[b-sm3eljufpr] .calc-row:not(:last-child) {
    border-bottom: 2px dashed var(--bg-color-page);
}

/* adjust font size for mobile up to 1366x768 */
@media (max-width: 1366px) {
    #calc-dia[b-sm3eljufpr] {
        font-size: 0.8rem;
    }
}

@media (min-width: 1024px) {
    #calc-dia[b-sm3eljufpr] {
        width: 90%;
        margin: 0 auto;
    }

    #grid[b-sm3eljufpr] {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: var(--gap-component-2);
    }
}
/* /Pages/Tools/Calculator/Hero/CalculatorHero.razor.rz.scp.css */
#calc-hero[b-fti6hqq7ux] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

#calc-hero-result[b-fti6hqq7ux] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
}

#calc-hero-result-power[b-fti6hqq7ux] {
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: darkgoldenrod;
    border-radius: var(--border-radius-2);
    padding: var(--padding-element);
    align-items: center;
}

.calc-hero-slot[b-fti6hqq7ux] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    padding: var(--padding-element);
}

#calc-hero-weapons[b-fti6hqq7ux] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: var(--gap-component);
}

/* PC CSS */
#calc-hero-pc[b-fti6hqq7ux] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

.calc-hero-pc-row[b-fti6hqq7ux] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--gap-component-2);
}

#calc-hero-pc-result[b-fti6hqq7ux] {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-component);
}

#calc-hero-pc-slot[b-fti6hqq7ux] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: calc(100% - 40px);
}

#calc-hero-pc-slot-illust[b-fti6hqq7ux] {
    max-width: 80%;
    max-height: 80%;
}

#calc-hero-pc-weapon[b-fti6hqq7ux] {
    flex: 3;
    min-width: 0;
    display: flex;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
}

#calc-hero-pc-weapons[b-fti6hqq7ux] {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: var(--background-color-1);
    padding: 0 var(--padding-element);
    border-radius: var(--border-radius-element);
}

#max-row[b-fti6hqq7ux] {
    display: flex;
    flex-direction: row;
    gap: var(--gap-component-2);
    justify-content: space-around;
}

.max-button[b-fti6hqq7ux] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-2);
    background-color: var(--background-color-3);
    z-index: 1;
}

.max-button-icon[b-fti6hqq7ux] {
    width: 32px;
    height: 32px;
}

.set-icons img[b-fti6hqq7ux] {
    height: 40px;
}

/* HOLDER COMPONENTS */
.center-component[b-fti6hqq7ux] {
    flex: 2;
    min-width: 0;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
}

.side-component[b-fti6hqq7ux] {
    display: flex;
    width: 22%;
    max-width: 22%;
    background-color: var(--background-color-1);
    padding: var(--padding-element);
    border-radius: var(--border-radius-element);
}

/* PC INNER COMPONENTS EDIT */
@media (min-width: 1024px) {
    [b-fti6hqq7ux] .stats-grid {
        grid-template-columns: 1fr;
        flex: 1;
        background-color: var(--background-color-3);
    }

    [b-fti6hqq7ux] .stat-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-color: var(--background-color-1);
    }

    [b-fti6hqq7ux] .box {
        display: flex;
        height: 100%;
        width: 100%;
    }

    [b-fti6hqq7ux] #craft-editor {
        flex-direction: column;
        height: 100%;
        gap: var(--gap-component);
    }

    [b-fti6hqq7ux] #costume-tabs {
        height: 100%;
        justify-content: space-evenly;
    }
}

/* MOBILE UNTIL 1366x768px */
@media (max-width: 1366px) {
    .side-component[b-fti6hqq7ux] {
        width: 28%;
        max-width: 28%;
    }
    
    [b-fti6hqq7ux] #hero-weapon-editor-main {
        flex-wrap: nowrap;
    }

    [b-fti6hqq7ux] #weapon-icon {
        width: 120px;
    }
}

/* BIGGER THAN 1920x1080px */
@media (min-width: 1921px) {
    #calc-hero-pc[b-fti6hqq7ux]{
        width: 80%;
        margin: auto;
    }
}
/* /Pages/Tools/Ranking/Ranking.razor.rz.scp.css */
#ranking-page[b-4aaet10l3u] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    max-width: 800px;
    margin: 0 auto;
}

#ranking-toggles[b-4aaet10l3u] {
    display: flex;
    flex-direction: row;
    gap: var(--gap-component-2);
}

#ranking-buttons[b-4aaet10l3u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-component-2);
}

.ranking-grid-row-mobile[b-4aaet10l3u] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;  /* Make the hero column bigger than the others */
}

.ranking-grid-row-pc[b-4aaet10l3u] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr;  /* Make the hero column bigger than the others */
}

.ranking-grid-header-cell[b-4aaet10l3u], .ranking-grid-cell[b-4aaet10l3u] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 2px;
    background-color: var(--background-color-1);
}

.ranking-grid-header-cell[b-4aaet10l3u] {
    height: 60px;
    background-color: var(--background-color-3);
    overflow-wrap: anywhere;
}

.grid-hero[b-4aaet10l3u] {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.grid-hero img[b-4aaet10l3u] {
    width: 64px;
}

.selected[b-4aaet10l3u] {
    background-color: var(--background-color-4);
}
/* /Pages/Tools/TeamBuilder/TeamBuilder.razor.rz.scp.css */
#tb-switches[b-k1f0a0qzga] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-component-2);
    margin-bottom: var(--gap-component);
}

#tb-share[b-k1f0a0qzga] {
    flex: 1;
    background-color: var(--background-color-3);
    color: var(--text-color);
    border: none;
    border-radius: var(--border-radius-element);
    padding: 20px;
}

[b-k1f0a0qzga] .tb-settings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-component-2);
    margin-bottom: var(--filter-content-margin);
}

.btn[b-k1f0a0qzga] {
    flex: 1;
    background-color: var(--background-color-3);
    color: var(--text-color);
    border: none;
    border-radius: var(--border-radius-element);
    padding: 20px;
}

#team-builder-page[b-k1f0a0qzga] {
    margin-top: var(--filter-content-margin);
}

@media (min-width: 1024px) {
    #tb-switches[b-k1f0a0qzga] {
        display: flex;
    }
}
/* /Pages/Tools/TeamBuilder/TeamBuilderCustom.razor.rz.scp.css */
#tb-custom-teams[b-3xmq3geh67] {
    display: grid;
    width: fit-content;
    gap: var(--gap-component);
    justify-self: center;
    justify-items: center;
    justify-content: center;
    grid-template-columns: 1fr;  /* 1 team/row on mobile */
}

#btn-screenshot[b-3xmq3geh67] {
    display: flex;
    width: min(500px, 95vw);
    justify-content: space-around;
    justify-self: center;
    margin-top: var(--gap-component);
    padding: 20px;
    border: none;
    color: var(--text-color);
    border-radius: var(--border-radius-element);
    background-color: var(--background-color-1);
}

@media (min-width: 1024px) {
    #tb-custom-teams[b-3xmq3geh67] {
        grid-template-columns: repeat(2, auto);  /* 2 teams/row on pc */
    }

    #btn-screenshot[b-3xmq3geh67] {
        width: min(calc(1000px + var(--gap-component)), 95vw);
    }
}
/* /Pages/Tools/TeamBuilder/TeamBuilderGvg.razor.rz.scp.css */
#tb-gvg[b-ctxyqm6n9x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
    width: fit-content;
    margin: 0 auto;
}

#tb-gvg-content[b-ctxyqm6n9x] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-component);
}

.tb-gvg-mode[b-ctxyqm6n9x] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

.tb-gvg-title[b-ctxyqm6n9x] {
    text-align: center;
    padding: var(--padding-element-2);
    border-radius: var(--border-radius-element);
}

#btn-screenshot[b-ctxyqm6n9x] {
    display: flex;
    width: min(500px, 95vw);
    justify-content: space-around;
    justify-self: center;
    margin-top: var(--gap-component);
    padding: 20px;
    border: none;
    color: var(--text-color);
    border-radius: var(--border-radius-element);
    background-color: var(--background-color-1);
}

@media (min-width: 1024px) {
    #tb-gvg-content[b-ctxyqm6n9x] {
        flex-direction: row;
    }

    #btn-screenshot[b-ctxyqm6n9x] {
        width: min(calc(1000px + var(--gap-component)), 95vw);
    }
}
/* /Pages/Tools/TierList/MainTier.razor.rz.scp.css */
#main-tier-heroes[b-61zpgbdcnz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--tierlist-hero-icon-size));
    justify-content: space-between;
    padding: var(--padding-element);
    gap: var(--gap-component-2);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
}

.main-tier-hero-image[b-61zpgbdcnz] {
    width: var(--tierlist-hero-icon-size);
}
/* /Pages/Tools/TierList/TierList.razor.rz.scp.css */
#tierlist[b-lehiuged48] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

#tierlist-tiers[b-lehiuged48] {
    display: flex;
    flex-direction: column;
}

.tierlist-tier-row[b-lehiuged48] {
    display: flex;
    min-height: var(--tierlist-hero-icon-size);
    background-color: var(--background-color-3);
}

.tier-settings[b-lehiuged48] {
    width: 30px;
    display: flex;
    align-items: center;
    background-color: var(--background-color-4);
    margin: 2px 0 2px 0;
}

.tier-settings-icon[b-lehiuged48] {
    width: 100%;
}

#tierlist-share[b-lehiuged48] {
    flex: 1;
    background-color: var(--background-color-3);
    color: var(--text-color);
    border: none;
    border-radius: var(--border-radius-element);
    padding: 20px;
}

@media (min-width: 1024px) {
    #tierlist[b-lehiuged48] {
        width: 80%;
        margin: auto;
    }
}