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

/* /App.razor.rz.scp.css */
#error-content[b-upe4eiuwz8] {
    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/Artifact/ArtifactCardModal.razor.rz.scp.css */
#artifact-card-modal-content[b-g088jwdfzn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-component);
    padding: var(--padding-element)
}

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

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

.artifact-card-modal-stat[b-g088jwdfzn] {
    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-g088jwdfzn] {
    /* 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-x8mydxd9a3] {
    padding: var(--padding-element);
}
/* /Components/Box.razor.rz.scp.css */
.box[b-tx88vcswfp] {
    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-tx88vcswfp] {
    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-tx88vcswfp] {
    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/Collapse.razor.rz.scp.css */
.collapse[b-4ahswqca8x] {
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
}

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

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

.collapse-content[b-4ahswqca8x] {
    border-top: 1px solid var(--border-color);
}
/* /Components/EasterEgg/EasterEgg.razor.rz.scp.css */
.easter-container[b-ld9tir9vwc] {
    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-ld9tir9vwc 0.1s forwards, hide-b-ld9tir9vwc 0.1s forwards;
    animation-delay: 5s, 8.5s;
}

.video[b-ld9tir9vwc] {
    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-ld9tir9vwc] {
        width: calc(20% + 100vw);
        height: auto;
        top: 50%;
        left: -10%;
        transform: translateY(-40%);
    }
}

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

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

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

    to {
        opacity: 100%;
    }
}

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

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

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

    to {
        display: none;
    }
}

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

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

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

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

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

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

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

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

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

    to {
        transform: translate(-170%, -10%);
    }
}
/* /Components/Gamble/GambleAB.razor.rz.scp.css */
#gamble-ab-header[b-u695m6suzl] {
    padding: var(--padding-element);
}
/* /Components/Gamble/GambleBonus.razor.rz.scp.css */
#gamble-bonus-title[b-ze0o5u9sxs] {
    flex: 1;
    text-align: center;
}

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

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

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

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

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

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

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

.gamble-pull-name[b-qyzp5sssla] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* /Components/Gamble/GambleStepup.razor.rz.scp.css */
#gamble-stepup-step-title[b-ylf1vkj16h] {
    flex: 1;
    text-align: center;
}

.gamble-stepup-step-row[b-ylf1vkj16h] {
    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-ylf1vkj16h] {
    width: 48px;
}

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

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

#hero-select-boxes[b-0lbfezf57y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-component);
}
/* /Components/Hero/HeroPickerModal.razor.rz.scp.css */
#hero-picker-modal-content[b-8n018i8ed1] {
    padding: var(--padding-element);
}

#hero-picker-modal-heroes[b-8n018i8ed1] {
    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-8n018i8ed1] {
    width: var(--tierlist-hero-icon-size);
}
/* /Components/Hero/HeroSlot.razor.rz.scp.css */
.hero-slot[b-2wssr82vwc] {
    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-2wssr82vwc] {
    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-2wssr82vwc] {
    display: none;
}

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

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

    .hero-slot-full-name[b-2wssr82vwc] {
        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-qgtjhclk8l] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.item-skin-level[b-qgtjhclk8l] {
    position: absolute;
    top: 2px;
    left: 2px;
    /* We need a dark border because it's hard to see the white level */
    text-shadow: -1px -1px black,
    1px -1px black,
    -1px  1px black,
    1px  1px black;
}

.item-skin-awaken-icon[b-qgtjhclk8l] {
    width: 100%;
    position: absolute;
    bottom: 0;
}
/* /Components/ItemModal.razor.rz.scp.css */
#item-modal[b-59lurft7lz] {
    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-31zcxj5v1j] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
/* /Components/Mission/AchievementModal.razor.rz.scp.css */
.achievement-modal-row[b-vavkf33x0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid var(--border-color);
}

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

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

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

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

.modal[b-g6tiidayc6] {
    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-g6tiidayc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-element);
    border-bottom: 2px solid var(--border-color);
}

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

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

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

@keyframes fadeOut-b-g6tiidayc6 {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* /Components/Passive.razor.rz.scp.css */
.passive[b-m7t4ldzb2a] {
    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-m7t4ldzb2a], .pc-passive-header[b-m7t4ldzb2a] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

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

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

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

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

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

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

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

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

.creature-icon[b-m7t4ldzb2a], .passive-condition[b-m7t4ldzb2a] {
    width: 32px;
    height: 32px;
}
/* /Components/SearchBar.razor.rz.scp.css */
.search-bar[b-fggc9m6utr] {
    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-fggc9m6utr] {
    outline: 1px solid var(--text-color);
}
/* /Components/SelectBox.razor.rz.scp.css */
.select-box[b-xh644hn193] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
    text-align: center;
    white-space: nowrap;
}

.selector[b-xh644hn193] {
    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-xh644hn193] {
    outline: 1px solid var(--text-color);
}
/* /Components/Skill.razor.rz.scp.css */
.hero-skill[b-d6ezw7ux0k] {
    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-d6ezw7ux0k] {
    display: flex;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
    box-shadow: var(--box-shadow-title);
}

.hero-skill-rank[b-d6ezw7ux0k] {
    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-d6ezw7ux0k] {
    width: 100%;
    max-width: 100px;
    max-height: 50px;
    height: auto;
    object-fit: contain;
}

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

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

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

.hero-skill-icon-top img[b-d6ezw7ux0k] {
    width: 30%;
}
/* /Components/Stage/MonsterPassive.razor.rz.scp.css */
.monster-passive[b-pjfbyr93s8] {
    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-pjfbyr93s8] {
    text-align: center;
}

.monster-passive-list[b-pjfbyr93s8] {
    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-pjfbyr93s8] {
    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-3682ez3np8] {
    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-3682ez3np8] {
    text-align: center;
}

.monster-skill-list[b-3682ez3np8] {
    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-3682ez3np8] {
    width: 96px;
    padding: var(--padding-element);
}
/* /Components/Stage/Phase.razor.rz.scp.css */
.stage-phase[b-omewmb7gkx] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    padding: var(--padding-element-2);
}

/* On mobile it's the same design for column/row */
.monster-row[b-omewmb7gkx], .monster-column[b-omewmb7gkx] {
    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-omewmb7gkx], .monster-title-stats-column[b-omewmb7gkx] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

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

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

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

@media (min-width: 1024px) {
    /* Only apply the row effect on pc */
    .monster-row[b-omewmb7gkx] {
        flex-direction: row;
    }

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

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

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

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

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

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

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

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

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

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

.stat-item[b-8a9hnikpon] {
    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-8ut00peudk] {
    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-8ut00peudk] {
    text-align: center;
    background-color: var(--background-color-3);
    padding: var(--padding-element);
    border-radius: var(--border-radius-2);
}

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

.stats-level-input[b-8ut00peudk] {
    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-8ut00peudk] {
        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-8ut00peudk] {
        display: none;
    }
}
/* /Components/Story/QuestList.razor.rz.scp.css */
.quest-list[b-v3gflvy4e6] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

.quest[b-v3gflvy4e6] {
    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-v3gflvy4e6] {
    text-align: center;
    padding: var(--padding-element);
    border-bottom: 1px solid var(--border-color);
}

@media (min-width: 1024px) {
    .quest-list[b-v3gflvy4e6] {
        width: 70%;
        margin: 0 auto;
    }
}
/* /Components/ToggleSwitch.razor.rz.scp.css */
.toggle-switch[b-tzmfjjf4di] {
    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-94avzh33o7] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: var(--padding-element);
    flex: 1;
}

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

.calc-date[b-94avzh33o7], .calc-number[b-94avzh33o7] {
    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-wktkj2xksp] {
    display: flex;
    max-width: 100%;
    justify-content: center;
    gap: var(--gap-component-3);
}

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

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

.costume-picker-icon[b-wktkj2xksp] {
    width: var(--calc-hero-costume-size);
    height: var(--calc-hero-costume-size);
}
/* /Components/Tools/Calculator/Hero/CostumeTabs.razor.rz.scp.css */
#costume-tabs[b-m3g8pdcrf8] {
    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-m3g8pdcrf8] {
    display: flex;
    gap: var(--gap-component-2);
}

.costume-tab[b-m3g8pdcrf8] {
    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-qi9k1xxwrg] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

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

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

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

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

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

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

.craft-editor-upgrade-icon.selected[b-qi9k1xxwrg] {
    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-n28cq8c06r] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component-2);
}

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

.hero-editor-awaken-button[b-n28cq8c06r] {
    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-n28cq8c06r] {
    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-n28cq8c06r] {
    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-n28cq8c06r] {
    height: 40px;
    width: 30px;
    background-color: var(--background-color-1);
}

#awakening-icon[b-n28cq8c06r] {
    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-n28cq8c06r] {
    width: 100%;
    display: flex;
    background-color: var(--background-color-3);
    border-radius: var(--border-radius-2);
}

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

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

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

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

#weapon-icon[b-77o62f56yc] {
    object-fit: contain;
}

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

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

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

#hero-weapon-editor-awaken[b-77o62f56yc] {
    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-77o62f56yc] {
    height: 40px;
    width: 30px;
    background-color: var(--background-color-1);
}

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

#hero-weapon-editor-options[b-77o62f56yc] {
    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-uv6cngjbf7] {
    padding: var(--padding-element);
}
/* /Components/Tools/Calculator/Hero/StatSlider.razor.rz.scp.css */
.stat-slider[b-rtretkbgcu] {
    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-rtretkbgcu] {
    display: flex;
    justify-content: center;
    gap: var(--gap-component-2);
    text-align: center;
}

.stat-slider-number[b-rtretkbgcu] {
    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-rtretkbgcu] {
    --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-rtretkbgcu]::-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-x2scocrbu6] {
    position: relative;
    /* Size of the weapon icon */
    width: 128px;
    height: 128px;
    --corner-element-size: 37px;
}

.weapon-rating-icon[b-x2scocrbu6] {
    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-x2scocrbu6] {
    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-x2scocrbu6] {
    transition: width 0.3s ease;  /* From clickable-2 */
    transform: translateX(-50%) scale(1.15);
    cursor: pointer;
}

.weapon-upgrade[b-x2scocrbu6] {
    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-x2scocrbu6] {
    width: var(--corner-element-size);
    height: var(--corner-element-size);
}
/* /Components/Tools/TeamBuilder/HeroTeamSlot.razor.rz.scp.css */
.hero-slot[b-ptsu99w5xt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component-3);
}

.hero-slot-sets[b-ptsu99w5xt] {
    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-ptsu99w5xt] {
    max-width: 30%;  /* We have between 1 and 3 icons so this is fine */
}

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

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

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

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

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

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

#selected-set-button[b-ta54pid5u4] {
    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-ta54pid5u4] {
    display: flex;
    flex-direction: column;
}

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

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

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

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

#selected-stones-button[b-v6skinm2nk] {
    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-v6skinm2nk] {
    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-6iw2jy8l9o] {
    width: min(500px, 95vw);
    display: flex;
    flex-direction: column;
    padding: var(--padding-element);
    background-color: var(--background-color-1);
    border-radius: var(--border-radius-element);
    gap: var(--gap-component);
}

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

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

.team-gvg-stones[b-6iw2jy8l9o] {
    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-6iw2jy8l9o] {
    max-width: 30%;  /* We have between 1 and 3 icons so this is fine */
    height: auto;
    object-fit: contain;
}

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

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

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

.tier-name[b-f2r68r73tv] {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--padding-element-2);
    overflow: hidden;
}

.tier-heroes[b-f2r68r73tv] {
    flex: 1;
    display: grid;
    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);  /* without gap the hover end doesnt work :-( */
}

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

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

.tier-settings-button[b-0wac19n79o] {
    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-0wac19n79o] {
    display: flex;
    flex-direction: column;
}

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

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

#tier-settings-input[b-0wac19n79o] {
    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-452k434rc7] {
    display: flex;
    gap: var(--gap-component);
    align-items: center;
}
/* /Layout/MainLayout.razor.rz.scp.css */
#mobile-topbar[b-y0vy2c7724] {
    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-y0vy2c7724] {
    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-y0vy2c7724] {
    padding: 10px;
    border-bottom: solid 2px var(--border-color);
}

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

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

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

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

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

#pc-topbar-more-options[b-y0vy2c7724] {
    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-y0vy2c7724] {
    display: flex;
}

.pc-topbar-more-option[b-y0vy2c7724] {
    padding: var(--padding-element);
}

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

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

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

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

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

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

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

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

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

[b-y0vy2c7724] * {
    box-sizing: border-box;
}
/* /Pages/Artifact/Artifact.razor.rz.scp.css */
#artifact-switch[b-sfw3umg1a0] {
    display: flex;
    gap: var(--gap-component-2);
    margin-bottom: var(--gap-component);
}
/* /Pages/Artifact/ArtifactCard.razor.rz.scp.css */
#artifact-card-filters[b-pjwu2r9y9y] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    margin-bottom: var(--filter-content-margin);
}

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

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

.artifact-card[b-pjwu2r9y9y] {
    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-pjwu2r9y9y] {
    width: 100%;
}

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

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

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

.artifact-card-number[b-pjwu2r9y9y] {
    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-pjwu2r9y9y] {
        flex-direction: row;
    }
    
    #artifact-card-list[b-pjwu2r9y9y] {
        width: 70%;
        margin: 0 auto;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--gap-component);
    }

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

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

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

    .artifact-card-stat-row[b-pjwu2r9y9y] {
        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-pjwu2r9y9y] {
        /* default size if 64*64 so this is 3/4 of the original size */
        width: 48px;
        height: 48px;
    }

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

    .artifact-card-full-name[b-pjwu2r9y9y] {
        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-ca8c49rfto] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
    margin-top: var(--filter-content-margin);
}

.artifact-union[b-ca8c49rfto] {
    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-ca8c49rfto] {
    width: 100%;
    display: flex;
    gap: var(--gap-component);
}

.artifact-union-title span[b-ca8c49rfto] {
    /* 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-ca8c49rfto] {
    width: 100%;
}

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

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

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

.artifact-union-stat[b-ca8c49rfto] {
    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-ca8c49rfto] {
    width: 25%;
}

.artifact-union-passive[b-ca8c49rfto] {
    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-m6khj0k57b] {
    display: grid;
    gap: var(--gap-component);
}

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

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

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

.gamble-row[b-7t8sws1q56] {
    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-7t8sws1q56] {
    max-width: 100%;
    border-radius: var(--border-radius-2);
}
/* /Pages/GuildBoss/GuildBoss.razor.rz.scp.css */
#guildboss-season[b-5fzubkhy2s], #guildboss-offseason[b-5fzubkhy2s] {
    display: grid;
    gap: var(--gap-component);
}

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

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

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

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

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

#hero-list[b-4sh8ljd6pq] {
    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-4sh8ljd6pq] {
        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-525n6y411n] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

/*#region Header */
#hero-header[b-525n6y411n] {
    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-525n6y411n] {
    flex: 1;
    text-align: center;
    padding-left: var(--padding-element);
}

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

#hero-change[b-525n6y411n] {
    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-525n6y411n] {
    flex: 1;
    text-align: center;
}

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

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

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

.hero-detail[b-525n6y411n] {
    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-525n6y411n] {
    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-525n6y411n] {
    margin: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/*#region Hero Popup */
.hero .hero-popup[b-j3wiul324g] {
    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-j3wiul324g] {
    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-j3wiul324g] {
    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-j3wiul324g] {
    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-j3wiul324g] {
    transform: translateX(40px);
}

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

/* FADE SQUARE BORDERS */
.hero .popup-background[b-j3wiul324g]::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-j3wiul324g]::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-j3wiul324g] {
    width: 100%;
    opacity: 1;
}

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

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

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

.gamble-redirect[b-j3wiul324g] {
    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-j3wiul324g] {
    display: block;
    width: 100%;
    border-radius: var(--border-radius-2);
}
/*#endregion */

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

#forum-holder[b-j3wiul324g] {
    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-j3wiul324g] {
    opacity: 0;
    pointer-events: none;
    width: 100%;
    display: block;
}

#forum-holder .diagonal-link[b-j3wiul324g] {
    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-j3wiul324g] {
    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-j3wiul324g] {
    transform: scale(1.05);
    z-index: 100;
}

#forum-holder .link-left[b-j3wiul324g] {
    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-left:hover[b-j3wiul324g] {
    filter: drop-shadow(-12px 0 22px rgba(0, 0, 0, 0.45));
}

#forum-holder .link-right[b-j3wiul324g] {
    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%);
}

#forum-holder .link-right:hover[b-j3wiul324g] {
    filter: drop-shadow(12px 0 22px rgba(0, 0, 0, 0.45));
}
/*#endregion */

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

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

    #heroes-container[b-j3wiul324g] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    #gamble-images[b-j3wiul324g] {
        display: flex;
    }
}
/* /Pages/Mission/Achievement.razor.rz.scp.css */
#achievement-filters[b-65ti033vlg] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
    margin-bottom: var(--filter-content-margin);
}

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

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

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

.achievement-row[b-65ti033vlg] {
    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-65ti033vlg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
}

.achievement-desc[b-65ti033vlg] {
    text-align: center;
}

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

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

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

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

.achievement-arrow[b-65ti033vlg] {
    width: 32px;
}

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

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

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

    .achievement-desc[b-65ti033vlg] {
        flex: 1;
    }

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

.title-row[b-hp5a4dhe5a] {
    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-hp5a4dhe5a] {
    display: flex;
    align-items: center;
    padding: var(--padding-element);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.chapter-sub-title[b-tatbgv7qmt] {
    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-tatbgv7qmt] {
        display: none;
    }

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

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

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

[b-5ys6rysh8o] .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-5ys6rysh8o] {
        font-size: 0.8rem;
    }
}

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

    #grid[b-5ys6rysh8o] {
        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-w6suwaaa02] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

#calc-hero-result[b-w6suwaaa02] {
    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-w6suwaaa02] {
    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-w6suwaaa02] {
    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-w6suwaaa02] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: var(--gap-component);
}

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

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

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

#calc-hero-pc-slot[b-w6suwaaa02] {
    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-w6suwaaa02] {
    max-width: 80%;
    max-height: 80%;
}

#calc-hero-pc-weapon[b-w6suwaaa02] {
    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-w6suwaaa02] {
    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-w6suwaaa02] {
    display: flex;
    flex-direction: row;
    height: 40px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color-3);
    padding: var(--padding-element-2);
    border-radius: var(--border-radius-2);
    cursor: pointer;
    margin: auto;
}

#max-row img[b-w6suwaaa02] {
    height: 100%;
}

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

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

.side-component[b-w6suwaaa02] {
    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-w6suwaaa02] .stats-grid {
        grid-template-columns: 1fr;
        flex: 1;
        background-color: var(--background-color-3);
    }

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

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

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

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

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

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

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

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

#ranking-buttons[b-dt00xved5z] {
    display: flex;
    gap: var(--gap-component-2);
}

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

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

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

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

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

.selected[b-dt00xved5z] {
    background-color: var(--background-color-4);
}
/* /Pages/Tools/TeamBuilder/TeamBuilder.razor.rz.scp.css */
#tb-switches[b-45o0jw3rqx] {
    display: flex;
    gap: var(--gap-component-2);
    margin-bottom: var(--gap-component);
}

#tb-share[b-45o0jw3rqx] {
    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-45o0jw3rqx] {
    margin-top: var(--filter-content-margin);
}
/* /Pages/Tools/TeamBuilder/TeamBuilderCustom.razor.rz.scp.css */
#tb-custom-settings[b-webvvv0afn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-component-2);
    margin-bottom: var(--filter-content-margin);
}

#tb-custom-teams[b-webvvv0afn] {
    display: grid;
    gap: var(--gap-component);
    justify-items: center;
    justify-content: center;
    grid-template-columns: 1fr;  /* 1 team/row on mobile */
}

@media (min-width: 1024px) {
    #tb-custom-teams[b-webvvv0afn] {
        grid-template-columns: repeat(2, auto);  /* 2 teams/row on pc */
    }
}
/* /Pages/Tools/TeamBuilder/TeamBuilderGvg.razor.rz.scp.css */
#tb-gvg[b-o34skh7ksk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-component);
    width: fit-content;
    margin: 0 auto;
}

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

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

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

@media (min-width: 1024px) {
    #tb-gvg-content[b-o34skh7ksk] {
        flex-direction: row;
    }
}
/* /Pages/Tools/TierList/MainTier.razor.rz.scp.css */
#main-tier-heroes[b-vsq9sjd7i4] {
    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-vsq9sjd7i4] {
    width: var(--tierlist-hero-icon-size);
}
/* /Pages/Tools/TierList/TierList.razor.rz.scp.css */
#tierlist[b-dw7zgu05zb] {
    display: flex;
    flex-direction: column;
    gap: var(--gap-component);
}

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

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

.tier-settings[b-dw7zgu05zb] {
    display: flex;
    align-items: center;
    background-color: var(--background-color-3);
}

#tierlist-share[b-dw7zgu05zb] {
    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-dw7zgu05zb] {
        width: 80%;
        margin: auto;
    }
}