@import 'Ironhide.UI.z33ik07o5t.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */

#blazor-error-ui[b-lyjh0p75d8] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lyjh0p75d8] {
        cursor: var(--cursor-pointer);
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.page[b-lyjh0p75d8] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-lyjh0p75d8] {
    margin-top: 55px;
}

[b-lyjh0p75d8] #menu_ih_logo_link img{
    height: auto;
}

[b-lyjh0p75d8] .menu_ih_social a {
    display: inline-block;
    border: none;
    height: 55px;
    background-image: linear-gradient(#bababa 0 0);
    background-position: center bottom;
    background-size: 100% 0px;
    background-repeat: no-repeat;
    transition: background-size 0.2s;
    -webkit-user-drag: none;
}

    [b-lyjh0p75d8] .menu_ih_social a:hover,
    [b-lyjh0p75d8] .menu_ih_social a:active {
        background-size: 100% 4px;
    }

    



footer[b-lyjh0p75d8] {
    width: 100%;
    text-align: center;
}

    footer .legal[b-lyjh0p75d8],
    footer .footer_link[b-lyjh0p75d8] {
        display: inline-block;
    }

    footer .copyright[b-lyjh0p75d8]{

    }

    [b-lyjh0p75d8] .copyright .text-copyright {
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
    }

[b-lyjh0p75d8] .legal a,
.footer_link[b-lyjh0p75d8] {
    display: inline-block;
    color: white;
    font-family: var(--site-font-family), sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    transition: .2s;
    filter: saturate(0) contrast(0%) brightness(200%);
    border-bottom: 2px solid rgba(255,255,255,0);
    margin: 10px;
}

.external[b-lyjh0p75d8] {
    background-image: url(/img/icons/link-external.svg);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
}

[b-lyjh0p75d8] .legal a:hover,
[b-lyjh0p75d8] .legal a:active,
.footer_link:hover[b-lyjh0p75d8],
.footer_link:active[b-lyjh0p75d8] {
    border-bottom: 2px solid rgba(255,255,255,1);
    text-decoration: none;
}

footer.container_bg_krg[b-lyjh0p75d8]{
    padding: 0;
}

[b-lyjh0p75d8] footer .container {
    padding-top: 40px;
    padding-bottom: 40px;
}

[b-lyjh0p75d8] footer .copyright {
    margin: 10px 10px 0;
}
/* /Components/Layout/Menu.razor.rz.scp.css */


.menu_game_logo_img[b-b7ipm3vsb8] {
    width: 92px;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

@media screen and (max-width: 600px) {
    .menu_game_logo_img[b-b7ipm3vsb8] {
        width: 90px;
        height: 88px;
    }
}

.display_none[b-b7ipm3vsb8]{
    display: none;
}

.sticky_up .menu_game_logo_img[b-b7ipm3vsb8], .sticky_down .menu_game_logo_img[b-b7ipm3vsb8] {
    width: 77px;
    height: 75px;
}



@media screen and (max-width: 959px) {
    .menu-open .offcanvas-body .links[b-b7ipm3vsb8]  a {
        border-bottom: 1px solid #1d5865;
    }

    .menu-open .offcanvas-body .social a[b-b7ipm3vsb8]  img{
        box-sizing: border-box;
    }

}

[b-b7ipm3vsb8] .hamburguer {
    cursor: var(--cursor-pointer);
    border: 2px solid red;
}

[b-b7ipm3vsb8] .menu_game.menu-open .social {
    background-color: var(--menu-game-link-bg-color-hover);
}

[b-b7ipm3vsb8] .offcanvas-body .dropdown_button {
    font-size: 1.5rem;
    color: red;
}

[b-b7ipm3vsb8] .offcanvas-body .dropdown_button nav {
    box-sizing: border-box;
}

.menu-open .offcanvas-body[b-b7ipm3vsb8]{
    padding: 0 2rem 2rem;
}
/* /Components/Pages/Creators/Creators.razor.rz.scp.css */
#creators[b-brthw62n0l]{
    /*min-height: 100vh;*/
}


.bg_mecha[b-brthw62n0l] {
    background-image: url("/img/creators/header-creators-600x458.avif");
    background-repeat: no-repeat;
    background-size: 600px;
    background-position: right bottom;
}

.header_creators[b-brthw62n0l] {
    padding-top: 130px;
}

@media screen and (min-width: 960px){
    .header_creators[b-brthw62n0l] {
        padding-top: 116px;
        padding-bottom: 50px;
    }
}

    .header_creators p[b-brthw62n0l] {
        color: white;
        font-size: 1.2em;
        line-height: 1.3;
        font-weight: bold;
    }

.page_title_wrapper[b-brthw62n0l] {
    width: 60%;
}

    .page_title_wrapper h3[b-brthw62n0l] {
        color: #54F4FF;
    }



.custom_list[b-brthw62n0l]{
    margin: 20px 0;
}

.custom_list p[b-brthw62n0l] {
    color: white;
    font-size: 1.2em;
    line-height: 1.3;
    font-weight: bold;
    margin: 0.6em 0;
    padding: 2px 2px 2px 40px;
    /*background-color: rgb(76, 255, 0, 0.2);*/
    background-image: url("/img/icons/tick-64x65.webp");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: left center;
}

/* /Components/Pages/Home.razor.rz.scp.css */
body[b-w9ihpuzw1p] {
    font-family: var(--site-font-family), sans-serif;
    background-color: black;
}

.towers_section[b-w9ihpuzw1p] {
    margin-bottom: -2px;
}

/* /Components/Pages/News/News.razor.rz.scp.css */
.news-list[b-6yyb9chx0t] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}
p[b-6yyb9chx0t] {
    color: #ccc;

}

/* /Components/Pages/News/NewsDetail.razor.rz.scp.css */
/* /Components/Pages/News/NewsDetailHeader.razor.rz.scp.css */
header[b-bxvqxifngh] {
    margin: 0 auto 1.5rem auto;
    display: flex;
    text-align: center;
    text-transform:uppercase;
}

h1[b-bxvqxifngh] {
    font-family: var(--site-font-family), sans-serif;
    font-size: 2.2rem;
    color: var(--blanco-100);
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
    position: relative;
    max-width: 900px;
}

    h1 a[b-bxvqxifngh] {
        text-decoration: none;
        color: var(--blanco-100);
    }

        h1 a:hover[b-bxvqxifngh] {
            text-decoration: underline;
        }

h2[b-bxvqxifngh] {
    font-family: var(--site-font-family-alt);
    font-weight: normal;
    text-align: center;
    color: var(--color-highlight);
}
/* /Components/Pages/News/NewsHeader.razor.rz.scp.css */
header[b-dou5qx0y3w] {
    margin: 0 auto 1.5rem auto;
    display: flex;
    text-align: center;
    text-transform:uppercase;
}

h1[b-dou5qx0y3w] {
    font-family: var(--site-font-family), sans-serif;
    font-size: 2.2rem;
    color: var(--blanco-100);
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
    position: relative;
    max-width: 900px;
}

    h1 a[b-dou5qx0y3w] {
        text-decoration: none;
        color: var(--blanco-100);
    }

        h1 a:hover[b-dou5qx0y3w] {
            text-decoration: underline;
        }

h2[b-dou5qx0y3w] {
    font-family: var(--site-font-family-alt);
    font-weight: normal;
    text-align: center;
    color: var(--color-highlight);
}

.news__grid-title h1[b-dou5qx0y3w] {
    margin: 0;
}
/* /Components/Pages/News/NewsLayout.razor.rz.scp.css */
/* ------------------------- News Page --------------------------------*/


.main[b-ql767v6ugm] {
    display: flex;
    flex-direction: row;
    gap: 25px;
}

[b-ql767v6ugm] aside {
    margin-left: auto;
    order: 1;
    flex: 0 0 300px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(3px);
    border: none;
}

.content_feed[b-ql767v6ugm] {
    flex: 0 0 calc(100% - 25px - 300px);
    order: 0;
}

@media screen and (max-width: 1280px) {
    .main[b-ql767v6ugm] {
        flex-direction: column;
    }

    [b-ql767v6ugm] aside {
        order: 0;
        flex: 0 0 100%;
        margin: 0;
    }

    .content[b-ql767v6ugm] {
        order: 1;
    }
}

[b-ql767v6ugm] .article-item {
    margin-bottom: 0;
}

    [b-ql767v6ugm] .article-item.article-item-card {
        flex: 1 1 30%;
    }

        [b-ql767v6ugm] .article-item.article-item-card:only-child {
            flex: 0 1 min(100%, 600px);
        }

@media screen and (max-width: 1024px) {
    [b-ql767v6ugm] .article-item.article-item-card:first-child {
        flex: 1 1 100%;
    }

    [b-ql767v6ugm] .article-item.article-item-card:only-child {
        flex: 0 1 min(100%, 600px);
    }
}

@media screen and (max-width: 764px) {
    [b-ql767v6ugm] .article-item.article-item-card {
        flex: 1 1 100%;
    }
}

@media screen and (max-width: 764px) {
    [b-ql767v6ugm] .article-item.article-item-list {
        flex-direction: column;
    }
}

/*----------------------------------------------------------- Thumbnail ----------------------------------------------------------*/


[b-ql767v6ugm] .article-item.article-item-card .thumbnail {
    width: 100%;
}

[b-ql767v6ugm] .article-item.article-item-list .thumbnail {
    flex: 0 1 34%;
    aspect-ratio: 16 / 9;
}



[b-ql767v6ugm] .article-item .thumbnail a img {
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: .2s;
    width: 100%;
}

/*----------------------------------------------------------- Content ----------------------------------------------------------*/

[b-ql767v6ugm] .article-item .content {
    width: 100%;
}

[b-ql767v6ugm] .article-item:hover {
    cursor: var(--cursor-pointer);
}

/*---------------------------------- Titles / Texts -----------------------------------------*/

#news[b-ql767v6ugm] {
    font-family: 'Titillium Web', sans-serif;
}

[b-ql767v6ugm] .news__grid-title h1 {
    font-family: var(--site-font-family);
    font-weight: 900;
    filter: drop-shadow(0px 4px 0px #000);
    font-size: 4rem;
    color: white;
}

[b-ql767v6ugm] .news__grid-title h2 {
    font-weight: 900;
}

[b-ql767v6ugm] .article-item .thumbnail {
    width: 100%;
}

    [b-ql767v6ugm] .article-item .thumbnail a img {
        box-sizing: border-box;
        transition: .2s;
        width: 100%;
        border-radius: 8px;
    }

[b-ql767v6ugm] .article-item .content {
    padding: 10px 2px;
    width: 100%;
}

[b-ql767v6ugm] .article-item:hover {
    cursor: var(--cursor-pointer);
}


[b-ql767v6ugm] .article-item.article-item-card,
[b-ql767v6ugm] .article-item.article-item-list {
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(3px);
    padding: 8px;
    border-radius: 8px;
    margin: 0;
}



@media screen and (min-width: 764px) {
    [b-ql767v6ugm] .article-item.article-item-list .content {
        padding-left: 8px;
        padding-top: 2px;
    }
}

[b-ql767v6ugm] h2.flavor {
    color: rgba(255,255,255,0.7);
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0 0 .2em;
}


[b-ql767v6ugm] h1 {
    text-shadow: none;
    filter: none;
    margin: 0 0 .2em;
}

[b-ql767v6ugm] .news-list .article-item .content h1 a {
    display: block;
    color: rgba(255,255,255,1);
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
    margin-bottom: .2em;
    text-shadow: none;
    text-decoration: none;
}

    [b-ql767v6ugm] .news-list .article-item .content h1 a:hover {
        text-decoration: none;
    }


[b-ql767v6ugm] p.Summary {
    /*color: rgba(68, 97, 103, 1); version gris*/
    color: rgba(255,255,255,0.5);
    font-weight: bold;
    line-height: 1.5;
    /*text-wrap: pretty;*/
    text-overflow: ellipsis;
    overflow: hidden;
    /*white-space: nowrap;*/
    width: 100%;
    margin: 0;
}


[b-ql767v6ugm] .news-list .article-item .content .Summary {
    line-height: 1.25;
}

@media screen and (max-width: 960px) {
    [b-ql767v6ugm] .news-list h2.flavor {
        font-size: 1.2rem;
        font-weight: 900;
    }

    [b-ql767v6ugm] .news-list .article-item .content h1 a {
        font-size: 1.5rem;
        line-height: 1;
        font-weight: 900;
    }

    [b-ql767v6ugm] .article-item.article-item-list .thumbnail {
        flex: 0 1 40%;
    }
}

[b-ql767v6ugm] aside h1 {
    font-weight: 900;
    color: var(--menu-game-background-color);
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 8px 8px 0 0;
}

[b-ql767v6ugm] aside ul li a {
    font-weight: bold;
}

    [b-ql767v6ugm] aside ul li a:hover,
    [b-ql767v6ugm] aside ul li a:active {
        background-color: rgba(255, 255, 255, 0.08);
    }

    [b-ql767v6ugm] aside ul li a.selected {
        background-color: rgba(255, 255, 255, 0.05);
    }


/* ------------------------- News Detail --------------------------------*/

[b-ql767v6ugm] #news .detail_link {
    opacity: 0.8;
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem;
    transition: .2s;
}

    [b-ql767v6ugm] #news .detail_link span {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: .4em solid transparent;
        border-bottom: .4em solid transparent;
        border-right: .4em solid white;
        margin-right: .4em;
    }

    [b-ql767v6ugm] #news .detail_link:hover,
    [b-ql767v6ugm] #news .detail_link:active {
        opacity: 1;
    }

[b-ql767v6ugm] #newsContent {
    background-color: rgba(255,255,255,1);
    border-radius: 8px;
    padding: 30px;
    color: #222222;
    font-size: 16px;
}

@media screen and (min-width: 680px) {
    [b-ql767v6ugm] #newsContent {
        font-size: 18px;
    }
}

@media screen and (min-width: 1024px) {
    [b-ql767v6ugm] #newsContent {
        font-size: 21px;
    }
}

[b-ql767v6ugm] #newsContent p,
[b-ql767v6ugm] #newsContent li {
    font-size: 1em;
}

[b-ql767v6ugm] #newsContent h1 {
    font-size: 2.5em;
    line-height: 1;
}

[b-ql767v6ugm] #newsContent h2 {
    font-size: 1.8em;
    line-height: 1;
}

[b-ql767v6ugm] #newsContent h3 {
    font-size: 1.4em;
    line-height: 1;
}

[b-ql767v6ugm] #newsContent h4 {
    font-size: 1.3em;
    line-height: 1;
}

[b-ql767v6ugm] #newsContent h5 {
    font-size: 1.2em;
    line-height: 1;
}

[b-ql767v6ugm] #newsContent h6 {
    font-size: 1.15em;
    line-height: 1;
}

[b-ql767v6ugm] #newsContent p,
[b-ql767v6ugm] #newsContent li,
[b-ql767v6ugm] #newsContent h1,
[b-ql767v6ugm] #newsContent h2,
[b-ql767v6ugm] #newsContent h3,
[b-ql767v6ugm] #newsContent h4,
[b-ql767v6ugm] #newsContent h5,
[b-ql767v6ugm] #newsContent h6{
    color: #222222;
}

[b-ql767v6ugm] #newsContent a {
    color: rgb(21, 130, 195);
    text-decoration: none;
}

    [b-ql767v6ugm] #newsContent a:hover,
    [b-ql767v6ugm] #newsContent a:active {
        color: rgb(21, 130, 195);
        text-decoration: underline;
    }

[b-ql767v6ugm] #newsContent .article-header {
}

[b-ql767v6ugm] #newsContent .btn.btn-category {
    background-color: rgba(29, 82, 114, 0.2);
    border-radius: 4px;
    color: rgb(4, 62, 98);
    transition: .2s;
}

    [b-ql767v6ugm] #newsContent .btn.btn-category:hover,
    [b-ql767v6ugm] #newsContent .btn.btn-category:active {
        background-color: rgba(29, 82, 114, 0.4);
    }

[b-ql767v6ugm] #newsContent .flavor {
    color: rgb(21, 130, 195);
    text-transform: uppercase;
    font-weight: 900;
}


[b-ql767v6ugm] #newsContent p[style*="text-align:center"] > a > img {
    display: inline-block;
}


[b-ql767v6ugm] #newsContent img {
    margin: 1rem 0;
    height: auto;
    display: inline-block;
}


[b-ql767v6ugm] #newsContent p img {
    height: auto;
    display: inline-block;
}




[b-ql767v6ugm] #newsContent .embed-responsive {
    display: block;
    height: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

[b-ql767v6ugm] #newsContent .embed-responsive-16by9 {
    padding-bottom: 56.25%;
    margin-top: .6rem;
    margin-bottom: .6rem;
}

[b-ql767v6ugm] #newsContent .embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

[b-ql767v6ugm] .detail_header {
    margin-bottom: 1rem;
}
/* /Components/Pages/Presskit/Presskit.razor.rz.scp.css */

#presskit[b-myz3s2zj7t] {
    color: #234048;
}

.header_presskit[b-myz3s2zj7t] {
    padding-top: 130px;
}

@media screen and (min-width: 960px) {
    .header_presskit[b-myz3s2zj7t] {
        padding-top: 116px;
        padding-bottom: 50px;
    }
}

#presskit .header_presskit p[b-myz3s2zj7t] {
    color: white;
    font-size: 1.2em;
    line-height: 1.3;
    font-weight: bold;
}

hr.hr_presskit[b-myz3s2zj7t] {
    border: 0;
    margin: -1px auto;
    max-width: 2560px;
    background-color: #c8e1e5;
    height: 4px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}


.custom_list[b-myz3s2zj7t] {
    margin: 20px 0;
}

    .custom_list p[b-myz3s2zj7t] {
        color: #234048;
        font-size: 1.2em;
        line-height: 1.3;
        font-weight: 600;
        margin: 0.6em 0;
        padding: 2px 2px 2px 40px;
        /*background-color: rgb(76, 255, 0, 0.2);*/
        background-image: url("/img/ui_icons/tick-64x65.webp");
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: left center;
    }

#presskit p[b-myz3s2zj7t] {
    color: #234048;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    text-wrap: pretty;
}

@media screen and (min-width: 700px) {
    #presskit p[b-myz3s2zj7t] {
        font-size: 1.2rem;
    }
}

#presskit strong[b-myz3s2zj7t] {
    font-weight: 900;
}

#presskit a[b-myz3s2zj7t],
#presskit[b-myz3s2zj7t]  a{
    display: inline-block;
    color: rgb(21, 130, 195);
    text-decoration: none;
}

    #presskit a:hover[b-myz3s2zj7t],
    #presskit a:active[b-myz3s2zj7t],
    #presskit[b-myz3s2zj7t]  a:hover,
    #presskit[b-myz3s2zj7t]  a:active {
        text-decoration: underline;
    }

#presskit a.kr6_btn[b-myz3s2zj7t] {
    color: white;
    text-decoration: none;
}

    #presskit a.kr6_btn:hover[b-myz3s2zj7t],
    #presskit a.kr6_btn:active[b-myz3s2zj7t] {
        color: white;
        text-decoration: none;
    }

.company-brand-content[b-myz3s2zj7t],
.game-brand-content[b-myz3s2zj7t] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
}

    .company-brand-content figure[b-myz3s2zj7t] {
        width: 200px;
    }

figure[b-myz3s2zj7t] {
    text-align: center;
}

.download-caption[b-myz3s2zj7t] {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    border-bottom: 2px solid rgba(21, 130, 195, 0);
    transition: .2s;
}

#presskit a.download-caption:hover[b-myz3s2zj7t] {
    text-decoration: none;
}

.download-caption:hover[b-myz3s2zj7t],
.download-caption:active[b-myz3s2zj7t] {
    text-decoration: none;
    border-bottom: 2px solid rgba(21, 130, 195, 1);
}

.download-caption[b-myz3s2zj7t],
.download-caption img[b-myz3s2zj7t] {
    display: inline-block;
}

    .download-caption img[b-myz3s2zj7t] {
        margin-left: 5px;
        width: 20px;
    }

.bkg_white[b-myz3s2zj7t] {
    background-color: white;
}

.bkg_black[b-myz3s2zj7t] {
    background-color: black;
}



.img_padding[b-myz3s2zj7t] {
    padding: 10%;
    width: 100%;
    border-radius: 8px;
}

.game-brand-content .img_game_logo[b-myz3s2zj7t],
.game-brand-content .img_game_icon[b-myz3s2zj7t] {
    width: 200px;
    height: auto;
}

.img_game_logo[b-myz3s2zj7t] {
    background-color: white;
    border-radius: 20px;
}

.img_game_icon[b-myz3s2zj7t] {
    border-radius: 20px;
}

.img_fluid[b-myz3s2zj7t] {
    display: block;
    width: 100%;
    height: auto;
}

.videos-content video[b-myz3s2zj7t] {
    border-radius: 8px;
}

.images .images-content[b-myz3s2zj7t] {
    margin-top: 1rem;
    --screenshot-gap: 1rem;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 0 25%;
    gap: var(--screenshot-gap);
}

    .images .images-content .screenshot[b-myz3s2zj7t] {
        max-width: 100%;
        height: auto;
        flex: 1 0 25%;
    }



        .images .images-content .screenshot .img-thumb[b-myz3s2zj7t] {
            border-radius: 8px;
            border: 2px solid rgba(167, 203, 217,1);
            transition: .2s;
        }

        .images .images-content .screenshot:hover .img-thumb[b-myz3s2zj7t] {
            border: 2px solid rgba(35, 64, 72,1);
        }

@media screen and (max-width: 726px) {
    .images .images-content .screenshot[b-myz3s2zj7t] {
        flex: 0 0 calc(50% - (var(--screenshot-gap)/2));
    }
}

/*@media screen and (max-width: 440px) {
    .images .images-content .screenshot {
        flex: 0 0 100%;
    }
}*/

#presskit a.mp_btn:hover[b-myz3s2zj7t] {
    text-decoration: none;
}
/* /Components/UI/Badges.razor.rz.scp.css */
.badges[b-s9a4i0e2og] {
    line-height: 0;
    justify-content: center;
    margin: 1.25rem auto;
    border-radius: 0.6rem;
}



.store_badge[b-s9a4i0e2og] {
    display: inline-block;
    transition: .3s;
    transform-origin: center center;

}

.badge_muted[b-s9a4i0e2og] {
    opacity: 0.5;
    pointer-events: none;
}

    .badge_muted:hover[b-s9a4i0e2og],
    .badge_mured:active[b-s9a4i0e2og] {
        pointer-events: none;
    }


.store_badge[b-s9a4i0e2og]  img {
    height: 2.9rem;
    padding: 2px 0 4px 0;
    box-sizing: content-box;
}


.badge_bigger[b-s9a4i0e2og]  img {
    height: 3.9rem;
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 600px){
    .store_badge[b-s9a4i0e2og]  img {
        height: 2.93rem;
    }

    .badge_bigger[b-s9a4i0e2og]  img {
        height: 3.9rem;
    }
}

/* ----------------------------------------------- TEXT ----------------------------------------------- */

.badges h2[b-s9a4i0e2og] {
    font-size: 1.3rem;
    margin-bottom: 0;
    margin-top: 0.005em;
    font-weight: 900;
    font-family: "Titillium Web", sans-serif;
    line-height: 1;
    color: #234048;
}

/* /Components/UI/CharacterGrid.razor.rz.scp.css */
/* ---- Wrapper: flexbox para que la última fila se centre ---- */
.character_grid_krg[b-kx5gdg5i7n] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* ---- Card: ancho calculado para 3 columnas ---- */
/* (100% - 2 gaps) / 3 = (100% - 48px) / 3 */
.character_card_krg[b-kx5gdg5i7n] {
    flex: 0 0 calc((100% - 48px) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

    

/* ---- Portrait (siempre cuadrado) ---- */
.character_portrait_krg[b-kx5gdg5i7n] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 2px solid rgba(255, 255, 255, 0.05);*/
    transition: 0.5s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


.character_img_krg[b-kx5gdg5i7n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Name ---- */
.character_name_krg[b-kx5gdg5i7n] {
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #ffffff;
    text-shadow: 0px 1px 0 rgba(0, 0, 0, 1);
    text-align: center;
}

/* ---- Mobile: sigue siendo 3 columnas, gaps más chicos ---- */
@media (max-width: 768px) {
    .character_grid_krg[b-kx5gdg5i7n] {
        gap: 12px;
        max-width: 100%;
    }

    .character_card_krg[b-kx5gdg5i7n] {
        flex: 0 0 calc((100% - 24px) / 3);
    }
}

@media (max-width: 480px) {
    .character_grid_krg[b-kx5gdg5i7n] {
        gap: 8px;
    }

    .character_card_krg[b-kx5gdg5i7n] {
        flex: 0 0 calc((100% - 16px) / 3);
    }

    .character_name_krg[b-kx5gdg5i7n] {
        font-size: 0.65rem;
    }
}
/* /Components/UI/Feed.razor.rz.scp.css */


.news-feed[b-tvkf9ww9by] {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    
}

@media screen and (min-width: 900px) {
    .news-feed[b-tvkf9ww9by] {
        gap: 25px;
    }
}


[b-tvkf9ww9by] .article-item {
    background-image: none;
}


@media screen and (max-width: 900px) {
    [b-tvkf9ww9by] .article-item.article-item-card:first-child:nth-last-child(3) {
        flex: 1 1 100%;
    }
}

[b-tvkf9ww9by] .article-item.article-item-card:only-child {
    flex: 0 1 min(100%, 600px);
}

[b-tvkf9ww9by] .article-item.article-item-card {
    flex: 1 1 30%;
}

@media screen and (max-width: 600px) {
    [b-tvkf9ww9by] .article-item.article-item-card {
        flex: 1 1 100%;
    }

        /* Ocultar solo a partir de la tercera */
        [b-tvkf9ww9by] .article-item.article-item-card:nth-child(n + 3) {
            display: none;
        }
}

[b-tvkf9ww9by] .article-item .thumbnail {
    width: 100%;
}

    [b-tvkf9ww9by] .article-item .thumbnail a img {
        box-sizing: border-box;
        transition: .2s;
        width: 100%;
        border-radius: 15px 15px 0 0;
    }

[b-tvkf9ww9by] .article-item .content {
    padding: 10px 0;
    width: 100%;
}

[b-tvkf9ww9by] .article-item:hover {
    cursor: var(--cursor-pointer);
}


[b-tvkf9ww9by] .article-item.article-item-card {
    background-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(3px);
    padding: 8px;
    border-radius: 20px;
    margin: 0;
    transition: .15s linear;
}

@media screen and (min-width: 900px) {

    [b-tvkf9ww9by] .article-item.article-item-card {
        margin: 8px 0 8px;
    }



    [b-tvkf9ww9by] .article-item.article-item-card:hover,
    [b-tvkf9ww9by] .article-item.article-item-card:active {
        margin: 0 0 16px;
        /*filter: drop-shadow(0px 4px 0px #fff);*/
    }
}

[b-tvkf9ww9by] h2.flavor {
    /*color: rgba(68, 97, 103, 1); version gris*/
    color: rgb(160, 219, 255);
    font-weight: 900;
    margin: 0 0 .2em;
}

[b-tvkf9ww9by] h1 {
    text-shadow: none;
    filter: none;
    margin: 0 0 .2em;
}

[b-tvkf9ww9by] h1 a {
    color: rgba(255,255,255,1);
    font-weight: 900;
    display: block;
    font-size: 1.9rem;
    line-height: 0.9;
    margin: 0 0 .2em;
    text-shadow: none;
    text-decoration: none;
}

    [b-tvkf9ww9by] h1 a:hover {
        text-decoration: none;
    }

[b-tvkf9ww9by] p.Summary {
    /*color: rgba(68, 97, 103, 1); version gris*/
    color: rgb(193, 223, 227);
    font-weight: bold;
    line-height: 1.5;
    /*text-wrap: pretty;*/
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin: 0;
}

p.error[b-tvkf9ww9by] {color:#fff;}

.more_news[b-tvkf9ww9by]{
    display: inline-block;
    margin-top: 2.5rem;
}

.more_news a[b-tvkf9ww9by] {
    display: inline-block;
    text-decoration: none;
}

/* /Components/UI/HomeSections/GameModes.razor.rz.scp.css */
/* Background ------------------------------------------------ */

.modes_bg[b-zjg9tcirif] {
    background-image: url("/img/game_modes/bg/game_modes_bg.jpg?=v1");
    background-color: #182744;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 3840px;
    background-position: center;
}

/*---------------- Container ----------------------------------*/

.container[b-zjg9tcirif] {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 1024px){
    .container[b-zjg9tcirif] {
        min-height: 500px;
    }
}

@media screen and (max-width: 764px) {
    .container[b-zjg9tcirif] {
        min-height: unset;
    }
}

/* ============ STAGE (cards + panel share width) ============ */
.stage-wrapper[b-zjg9tcirif] {
    display: flex;
    justify-content: center;
}

.stage[b-zjg9tcirif] {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
}

@media screen and (max_width: 764px){
    .stage[b-zjg9tcirif] {
        max-width: 100%;
    }
}

/* ============ CARDS ROW ============ */

.cards-row[b-zjg9tcirif] {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
}

.mode-card[b-zjg9tcirif] {
    position: relative; /* anchor for ::after connector */
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    background: radial-gradient(circle,rgba(156, 101, 34, 1) 0%, rgba(93, 66, 48, 1) 80%);
    border: 3px solid transparent;
    border-radius: 8px;
    cursor: var(--cursor-pointer);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s ease;
}

    .mode-card img[b-zjg9tcirif] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        border-radius: 5px; /* slightly smaller than card radius(8) - border(3) */
    }

    .mode-card:hover:not(.is-selected)[b-zjg9tcirif] {
        background: radial-gradient(circle,rgba(199, 138, 64, 1) 0%, rgba(112, 77, 54, 1) 80%);
    }

    .mode-card.is-selected[b-zjg9tcirif] {
        background: radial-gradient(circle, rgb(255 198 46) 0%, rgb(192 99 43) 80%);
        border-color: #FFD23F;
    }

        /* Tab connector — pure CSS, no JS. Lives under the selected card. */
        .mode-card.is-selected[b-zjg9tcirif]::after {
            content: "";
            position: absolute;
            bottom: -19px; /* card border(3) + gap to panel(16) */
            left: 50%;
            transform: translateX(-50%);
            width: 3px;
            height: 16px;
            background: #c59f35;
            pointer-events: none;
            z-index: 1;
        }

    .mode-card:focus-visible[b-zjg9tcirif] {
        outline: 2px solid #FFD23F;
        outline-offset: 3px;
    }


@media screen and (max-width: 764px) {
    .stage[b-zjg9tcirif] {
        display: flex;
        width: 100%;
    }

    .cards-row[b-zjg9tcirif] {
        gap: 10px;
        justify-content: center;
    }

    .mode-card[b-zjg9tcirif] {
        width: 80px;
        height: 80px;
    }
}

@media screen and (max-width: 580px) {
    
    .cards-row[b-zjg9tcirif] {
        gap: 10px;
        justify-content: center;
    }

    .mode-card[b-zjg9tcirif] {
        width: 60px;
        height: 60px;
    }
}


/* ============ INFO PANEL ============ */

.info-panel[b-zjg9tcirif] {
    background: rgba(255, 255, 255, 0.06);
    border: 3px solid rgba(255, 210, 63, 0.35);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    text-align: center;
    box-sizing: border-box;
    text-shadow: 0px 2px 16px rgba(89, 46, 17, 1);
    min-height: 200px;
}

@media screen and (max-width: 550px){
    .info-panel[b-zjg9tcirif] {
        min-height: 230px;
    }
}

@media screen and (max-width: 450px) {
    .info-panel[b-zjg9tcirif] {
        min-height: 250px;
    }
}

.mode-name[b-zjg9tcirif] {
    font-family: var(--site-font-family), sans-serif;
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    
    margin: 0 0 0.7rem;
    letter-spacing: 0.02em;
    line-height: 1;
}

.mode-description[b-zjg9tcirif] {
    color: #ffffff;
    margin: 0 auto 0.85rem;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    max-width: 460px;
}

.mode-rules[b-zjg9tcirif] {
    color: #FFD23F;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

@media screen and (max-width: 1024px){
    .mode-name[b-zjg9tcirif] {
        font-size: 21px;
    }

    .mode-description[b-zjg9tcirif] {
        font-size: 16px;
    }

    .mode-rules[b-zjg9tcirif] {
        font-size: 14px;
    }
}
/* /Components/UI/HomeSections/Heroes.razor.rz.scp.css */
.intro_block[b-9h6ym1s1ig] {
    margin-bottom: 0;
}

.heroes_bg[b-9h6ym1s1ig] {
    background-image: url("/img/heroes_section/heroes_bg_landscape_3840x1365_2.png?=v1");
    background-color: #54441c;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 2990px;
    background-position: center top;
}

@media screen and (max-width: 1480px){
    .heroes_bg[b-9h6ym1s1ig] {
        background-image: url("/img/heroes_section/heroes_bg_medium.png?=v1");
    }
}


[b-9h6ym1s1ig] .carousel {
    width: 1300px;
    margin: 0 auto;
    aspect-ratio: 3.5 / 1;
    gap: 0;
}

/* En los breakpoints sólo ajustamos width del carrusel; los márgenes
   verticales se mantienen del default arriba (1rem auto 0). */

@media screen and (max-width: 1480px) {
    .heroes_bg[b-9h6ym1s1ig] {
        background-size: 2850px;
    }

    [b-9h6ym1s1ig] .carousel {
        width: 910px;
        aspect-ratio: 1.7 / 1;
    }

    [b-9h6ym1s1ig] .carousel-slides {
        aspect-ratio: 1.7 / 1;
    }
    
}

@media screen and (max-width: 1024px) {
    .heroes_bg[b-9h6ym1s1ig] {
        background-size: 2150px;
    }

    [b-9h6ym1s1ig] .carousel {
        width: 670px;
        aspect-ratio: 1.45 / 1;
    }

    [b-9h6ym1s1ig] .carousel-slides {
        aspect-ratio: 1.45 / 1;
    }

}

@media screen and (max-width: 764px) {
    .heroes_bg[b-9h6ym1s1ig] {
        background-size: 1900px;
    }

    [b-9h6ym1s1ig] .carousel {
        width: 480px;
        aspect-ratio: 1.2 / 1;
    }

    [b-9h6ym1s1ig] .carousel-slides {
        aspect-ratio: 1.2 / 1;
    }
}

@media screen and (max-width: 580px) {
    .heroes_bg[b-9h6ym1s1ig] {
        background-size: 1750px;
    }

    [b-9h6ym1s1ig] .carousel {
        width: 390px;
    }
}

@media screen and (max-width: 480px) {
    .heroes_bg[b-9h6ym1s1ig] {
        background-size: 1600px;
    }

    [b-9h6ym1s1ig] .carousel {
        width: 320px;
    }
}

@media screen and (max-width: 440px) {
    .heroes_bg[b-9h6ym1s1ig] {
        background-size: 1700px;
    }
}


/* Mantener el ancho del carousel-control para que el botón circular no
   se aplaste. El componente base achica .carousel-control a 35px en <580px. */
[b-9h6ym1s1ig] .carousel-control {
    width: unset;
    z-index: 10;
}

@media screen and (max-width: 580px) {
    [b-9h6ym1s1ig] .carousel-control {
        width: unset;
    }
}


/* ============================================================
   SLIDE: imagen del heroe
   ============================================================ */

.hero_slide[b-9h6ym1s1ig] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Imagen del personaje, sin sombra ni borde (las imágenes ya vienen
   con su propio diseño y se apoyan sobre el fondo animado) */
[b-9h6ym1s1ig] .hero_slide img {
    width: 100%;
    border: none;
    border-radius: 0;
    filter: none;
    -webkit-user-drag: none;
    position: relative;
    z-index: 2;
}

/* Override de la animación "fuego" del slide-3 que viene del componente base */
[b-9h6ym1s1ig] .slide-3 img {
    animation: none;
    filter: none;
}


/* ============================================================
   POSICIONAMIENTO Y ESCALA DE SLIDES
 
   Todos los slides comparten transform-origin: center center.
   La posición horizontal se controla con translateX y el tamaño
   con scale, ambos en el mismo `transform`. Esto permite que el
   browser interpole AMBOS valores de forma continua cuando el
   carousel cambia las clases → el slide realmente se desliza
   desde un lado al centro mientras crece (efecto carousel real).
 
   Variables ajustables:
     --peek-scale    : tamaño de los slides laterales (slide-2, slide-4)
     --peek-offset   : qué tan separados del centro están los laterales
                       (% del ancho del propio slide = % del contenedor,
                       porque width: 100%)
     --center-scale  : tamaño del slide central
   ============================================================ */

[b-9h6ym1s1ig] .slide {
    width: 100%;
    left: 0;
    opacity: 0;
    transform-origin: center center;
    transform: scale(0.1);
    transition: 0.5s;
    will-change: transform, opacity;
    /* Valores por defecto; ajustá estos para mover/escalar los peeks */
    --peek-scale: 0.27;
    --peek-offset: 35%;
    --center-scale: 0.48;
}

[b-9h6ym1s1ig] .slide-3 {
    opacity: 1;
    transform: translateX(0) scale(var(--center-scale));
}

[b-9h6ym1s1ig] .slide-2 {
    opacity: 0.6;
    transform: translateX(calc(-1 * var(--peek-offset))) scale(var(--peek-scale));
}

[b-9h6ym1s1ig] .slide-4 {
    opacity: 0.6;
    transform: translateX(var(--peek-offset)) scale(var(--peek-scale));
}

@media screen and (max-width: 1480px) {
    [b-9h6ym1s1ig] .slide {
        --peek-scale: 0.3;
        --peek-offset: 40%;
        --center-scale: 0.64;
    }
}

@media screen and (max-width: 1024px) {
    [b-9h6ym1s1ig] .slide {
        --peek-scale: 0.3;
        --peek-offset: 40%;
        --center-scale: 0.78;
    }

    [b-9h6ym1s1ig] .slide-2,
    [b-9h6ym1s1ig] .slide-4 {
        opacity: 0.4;
    }
}

@media screen and (max-width: 764px) {
    [b-9h6ym1s1ig] .slide {
        --peek-scale: 0.6;
        --peek-offset: 25%;
        --center-scale: 0.95; 
    }

    [b-9h6ym1s1ig] .slide-2,
    [b-9h6ym1s1ig] .slide-4 {
        opacity: 0;
    }
}

/* Slides fuera de vista (los que están "más allá" de los peeks).
   Quedan invisibles y desplazados un poco más afuera, así cuando
   entran al peek tienen un translateX desde donde animar. */
[b-9h6ym1s1ig] .slide-1,
[b-9h6ym1s1ig] .slide-5 {
    opacity: 0;
}

[b-9h6ym1s1ig] .slide-1 {
    transform: translateX(calc(-1.1 * var(--peek-offset))) scale(calc(0.8 * var(--peek-scale)));
}

[b-9h6ym1s1ig] .slide-5 {
    transform: translateX(calc(1.1 * var(--peek-offset))) scale(calc(0.8 * var(--peek-scale)));
}
 
 


/* ============================================================
   BACKGROUND ANIMADO DETRÁS DEL PORTRAIT

   Sun rays radiales rotando suave, en blanco translúcido.
   El loop es una rotación entera (0 → 360°) → nunca salta.

   Cada slide define dos CSS variables:
     --hero-bg:      color sólido de la caja
     --hero-pattern: color de los rayos (opcional, default blanco translúcido)

   El bg se ve en TODAS las cards visibles (slide-2, slide-3, slide-4).
   Las laterales (peeks) se atenúan a opacity 0.7 para que la central destaque.
   ============================================================ */
[b-9h6ym1s1ig] .slide_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 87.5%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 6%;
    overflow: hidden;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    /* Fondo SÓLIDO del color del héroe — sin alfa */
    background-color: var(--hero-bg, #043e62);
    filter: drop-shadow(0px 6px 0px rgba(0,0,0,0.3));
}

[b-9h6ym1s1ig] .slide-3 .slide_bg::before {
    animation: bg_flow-b-9h6ym1s1ig 50s linear infinite;
}




/* Sun rays: conic-gradient con 24 rayos (48 sectores alternando), rotando.
   width/height al 200% para que las esquinas queden cubiertas en cualquier
   ángulo de rotación.
   La máscara radial desvanece los rayos hacia el borde, concentrando la
   "luz" detrás del portrait. */
[b-9h6ym1s1ig] .slide_bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    background: conic-gradient( from 0deg at 50% 50%, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 0deg 15deg, transparent 15deg 30deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 30deg 45deg, transparent 45deg 60deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 60deg 75deg, transparent 75deg 90deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 90deg 105deg, transparent 105deg 120deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 120deg 135deg, transparent 135deg 150deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 150deg 165deg, transparent 165deg 180deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 180deg 195deg, transparent 195deg 210deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 210deg 225deg, transparent 225deg 240deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 240deg 255deg, transparent 255deg 270deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 270deg 285deg, transparent 285deg 300deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 300deg 315deg, transparent 315deg 330deg, var(--hero-pattern, rgba(255, 255, 255, 0.18)) 330deg 345deg, transparent 345deg 360deg );
    filter: blur(8px);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 25%, transparent 70%);
    mask-image: radial-gradient(circle at center, #000 0%, #000 25%, transparent 70%);
    animation: none;
    will-change: transform;
}

/* Glow radial central, sutil, para darle "vida" al cuadro */
[b-9h6ym1s1ig] .slide_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
    filter: blur(14px);
}

@keyframes bg_flow-b-9h6ym1s1ig {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



/* ============================================================
   FLECHAS DE NAVEGACIÓN — SVG triangular con drop-shadow
   ============================================================ */
[b-9h6ym1s1ig] .flecha {
    width: 56px;
    height: 56px;
    background-image: url('/img/ui_icons/arrow_carousel_gold.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: var(--cursor-pointer);
    transition: transform 0.15s ease, filter 0.15s ease;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 6px 0px);
}

    /* La flecha izquierda es la misma SVG, espejada horizontalmente */
    [b-9h6ym1s1ig] .flecha.izq {
        transform: scaleX(-1);
    }

    [b-9h6ym1s1ig] .flecha:hover {
        filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 6px 0px) brightness(1.1);
        transform: scale(1.06);
    }

    [b-9h6ym1s1ig] .flecha.izq:hover {
        transform: scaleX(-1) scale(1.06);
    }

    [b-9h6ym1s1ig] .flecha:active {
        transform: scale(0.96);
        filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2px 0px);
    }

    [b-9h6ym1s1ig] .flecha.izq:active {
        transform: scaleX(-1) scale(0.96);
    }

/* En mobile las achicamos para dar más espacio a las imágenes */
@media screen and (max-width: 580px) {
    [b-9h6ym1s1ig] .flecha {
        width: 40px;
        height: 40px;
    }
}




/* ============================================================
   FOOTER (legends) — nombre + tipo + descripción
   ============================================================ */


[b-9h6ym1s1ig] .legends {
    margin-top: 0;
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}

.hero_info[b-9h6ym1s1ig] {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 5%;
    z-index: 10;
    transform: translateX(-50%);
    color: #fff;
    max-width: 360px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border-radius: 12px;
    filter: drop-shadow(0px 6px 0px rgba(0, 0, 0, 0.1));
}

.hero_info_header[b-9h6ym1s1ig] {
    display: flex;
    flex-direction: row;
}

.hero_name[b-9h6ym1s1ig] {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1;
    margin: 0.2rem 0.6rem 0 0;
    filter: drop-shadow(0 4px 0 #000);
    letter-spacing: 0.02em;
}

@media screen and (max-width: 1024px) {
    .hero_name[b-9h6ym1s1ig] {
        font-size: 1.15rem;
    }
}



/* ============================================================
   TAGS DE TIPO
   Cada categoría tiene su propio color plano con bisel inset.
   TODO: Completar con los tipos de heroes específicos
   ============================================================ */
.hero_type[b-9h6ym1s1ig] {
    display: inline-block;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    letter-spacing: 20%;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    /*border: 2px solid #000;*/
    line-height: 1;
    /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);*/
    /*box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.25),
        inset 0 -3px 0 rgba(0, 0, 0, 0.3),
        0 3px 0 rgba(0, 0, 0, 0.3);*/
}

/* TODO: Personalizar colores según tipos de heroes */
.hero_type_warrior[b-9h6ym1s1ig] {
    background-color: #7bb83a;
}

.hero_type_paladin[b-9h6ym1s1ig] {
    background-color: #009cff;
}

.hero_type_mage[b-9h6ym1s1ig] {
    background-color: #bd67ed;
}

.hero_type_rogue[b-9h6ym1s1ig] {
    background-color: #e67e22;
}

.hero_type_ranger[b-9h6ym1s1ig] {
    background-color: #1abc9c;
}

.hero_type_hybrid[b-9h6ym1s1ig] {
    background-color: #e91e63;
}


/* ============================================================
   DESCRIPCIÓN
   min-height fijo de 2 líneas para que el carrusel no salte de
   altura cuando un héroe tiene desc de 1 línea y otra de 2.
   ============================================================ */
.hero_desc[b-9h6ym1s1ig] {
    font-family: 'Titillium Web', sans-serif;
    font-weight: normal;
    color: #fff;
    font-size: 1rem;
    line-height: 1.2em;
    margin: 0;
    max-width: 430px;
    opacity: 0.95;
    text-wrap: pretty;
    min-height: 2.8em;
}

@media screen and (max-width: 580px) {
    .hero_desc[b-9h6ym1s1ig] {
        font-size: 0.9rem;
    }
}
/* /Components/UI/HomeSections/Intro.razor.rz.scp.css */
/*------------------------------------------------------ header ------------------------------------------------------*/


.header-bg[b-wqxisxrodj] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ================= SMALL ================= */
/*.header-bg {
    background-image: image-set( url("img/backgrounds/header/header_SM_790x925_1x.webp") type("image/webp") 1x, url("img/backgrounds/header/header_SM_1580x1850_2x.webp") type("image/webp") 2x, url("img/backgrounds/header/header_SM_790x925_1x.jpg") type("image/jpeg") 1x, url("img/backgrounds/header/header_SM_1580x1850_2x.jpg") type("image/jpeg") 2x );
    background-size: 990px;
    background-position: center -100px;
}*/

.header-bg[b-wqxisxrodj] {
    background-image: image-set( url("img/backgrounds/header/header_SM_790x925_1x.webp") type("image/webp") 1x, url("img/backgrounds/header/header_SM_1580x1850_2x.webp") type("image/webp") 2x, url("img/backgrounds/header/header_SM_790x925_1x.jpg") type("image/jpeg") 1x, url("img/backgrounds/header/header_SM_1580x1850_2x.jpg") type("image/jpeg") 2x );
    background-size: 750px;
    background-position: center top;
}

@media (min-width:600px) {
    .header-bg[b-wqxisxrodj] {
        background-image: image-set( url("img/backgrounds/header/header_MD_1800x1093_1x.webp") type("image/webp") 1x, url("img/backgrounds/header/header_MD_2800x1700_2x.webp") type("image/webp") 2x, url("img/backgrounds/header/header_MD_1800x1093_1x.jpg") type("image/jpeg") 1x, url("img/backgrounds/header/header_MD_2800x1700_2x.jpg") type("image/jpeg") 2x );
        background-size: 1500px;
        background-position: center;
    }
}

@media (min-width:790px) {
    .header-bg[b-wqxisxrodj] {
        background-image: image-set( url("img/backgrounds/header/header_MD_1800x1093_1x.webp") type("image/webp") 1x, url("img/backgrounds/header/header_MD_2800x1700_2x.webp") type("image/webp") 2x, url("img/backgrounds/header/header_MD_1800x1093_1x.jpg") type("image/jpeg") 1x, url("img/backgrounds/header/header_MD_2800x1700_2x.jpg") type("image/jpeg") 2x );
        background-size: 1800px;
        background-position: center;
    }
}

@media (min-width:1400px) {
    .header-bg[b-wqxisxrodj] {
        background-image: image-set( url("img/backgrounds/header/header_LG_2560x1300_1x.webp") type("image/webp") 1x, url("img/backgrounds/header/header_LG_5120x2600_2x.webp") type("image/webp") 2x, url("img/backgrounds/header/header_LG_2560x1300_1x.jpg") type("image/jpeg") 1x, url("img/backgrounds/header/header_LG_5120x2600_2x.jpg") type("image/jpeg") 2x );
        background-size: 2560px;
        background-position: center -100px;
    }
}




/*----------------------------------- CONTENT -------------------------------------*/

.visually_hidden[b-wqxisxrodj] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header_content[b-wqxisxrodj] {
    min-height: 700px;
    text-align: center;
    display: flex;
    gap: 0; 
    flex-direction: column;
    justify-content: center;
}

@media screen and (max-width: 1024px){
    .header_content[b-wqxisxrodj] {
        min-height: 650px;
    }
}

@media screen and (max-width: 790px) {
    .header_content[b-wqxisxrodj] {
        min-height: 550px;
    }
}


.header_logo[b-wqxisxrodj] {
    margin: 2.5rem auto 1.2rem;
    width: 340px;
    filter: drop-shadow(0 0 3rem rgba(255, 254, 183, 1));
}

@media screen and (max-width: 1400px) {
    .header_logo[b-wqxisxrodj] {
        margin: 2.7rem auto 3.2rem;
        width: 300px;
    }
}

@media screen and (max-width: 1024px){
    .header_logo[b-wqxisxrodj] {
        margin: 4rem auto 3rem;
        width: 300px;
    }
}

@media screen and (max-width: 790px) {
    .header_logo[b-wqxisxrodj] {
        margin: 4.5rem auto 3rem;
        width: 210px;
    }
}

[b-wqxisxrodj] .trailer_area {
    margin: 0 auto;
}

[b-wqxisxrodj] .badges {
    transform: scale(0.865);
    margin: 1.5rem auto;
}

@media screen and (max-width: 790px) {
    [b-wqxisxrodj] .badges {
        margin: 1rem auto;
    }
}

.header_krg[b-wqxisxrodj]  .badges h2 {
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-top: 0.005em;
    font-weight: 900;
    font-family: "Titillium Web", sans-serif;
    line-height: 1;
    color: white;
    text-shadow: 0 0.1em 0 rgba(0, 0, 0, 1);
    filter: drop-shadow(0px 1px 10px #000000);
}

@media screen and (min-width: 1024px) {
    .header_krg[b-wqxisxrodj]  .badges h2 {
        font-size: 1.4rem;
    }
}
/* /Components/UI/HomeSections/Lore.razor.rz.scp.css */
/* =================================================================
   Lore section 
   ================================================================= */


/* ============================
   Backgrounds
   ============================ */

.background_lore_image[b-ut8vljre1n] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(0deg,rgba(7, 51, 110, 1) 0%, rgba(254, 248, 153, 0) 30%), url("/img/lore/Lore-section-Gerald-landscape.jpg?v=2");
    background-repeat: no-repeat;
    background-size: 2560px;
    background-position: center center;
    z-index: -1;
}


@media (max-width: 1024px) {
    .background_lore_image[b-ut8vljre1n] {
        background-image: url("/img/lore/Lore-section-Gerald-portrait.jpg?v=2");
        background-size: 1300px;
        background-position: center -360px;
    }
}

@media (max-width: 600px) {
    .background_lore_image[b-ut8vljre1n] {
        background-size: 900px;
        background-position: center -90px;
    }
}

@media (max-width: 480px) {
    .background_lore_image[b-ut8vljre1n] {
        background-size: 930px;
        background-position: center -80px;
    }
}


/* ============================
   Desktop Layout (40/60)
   ============================ */
.lore_layout_krg[b-ut8vljre1n] {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 40px;
    align-items: center;
    height: 680px;
}

@media (max-width: 1024px) {
    .lore_layout_krg[b-ut8vljre1n] {
        height: 560px;
    }
}

@media (max-width: 600px) {
    .lore_layout_krg[b-ut8vljre1n] {
        height: 550px;
    }
}

@media (min-width: 1024px) {
    .intro_block.text_xl_left[b-ut8vljre1n] {
        margin-bottom: 0;
    }
}

/* ============================
   Image wrapper
   ============================ */
.lore_image_wrapper_krg[b-ut8vljre1n] {
    width: 100%;
}

/* ============================
   Section typography overrides
   (texto sobre fondo claro de Gerald)
   ============================ */

.intro_block[b-ut8vljre1n] {
    filter: drop-shadow(0 0 20px rgba(255, 250, 165, 1));
}

.section_h1[b-ut8vljre1n] {
    color: #3d3c44;
    text-shadow: 0 4px 0 rgba(255, 250, 165, 1);
}

.section_h2[b-ut8vljre1n] {
    color: #0d84b8;
    text-shadow: 0 4px 0 rgba(255, 250, 165, 1);
}

.section_p[b-ut8vljre1n] {
    color: #3d3c44;
    text-shadow: 0 0 20px rgba(255, 250, 165, 1);
}

/* ============================
   Responsive — Tablet (601–1024px)
   ============================ */
@media (max-width: 1024px) {
    
    .lore_layout_krg[b-ut8vljre1n] {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
}

/* ============================
   Responsive — Mobile (≤ 600px)
   ============================ */
@media (max-width: 600px) {
    
    .lore_layout_krg[b-ut8vljre1n] {
        flex-direction: column;
        gap: 24px;
    }
}
/* /Components/UI/HomeSections/NewsSection.razor.rz.scp.css */
/*-------------------------------------------------- news feed ---------------------------------------------------------*/
[b-2jpyz9g034] .news__grid-title h1 {
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0px 4px 0px #000);
}

.news_mp[b-2jpyz9g034]  header div.container {
    padding: 0;
}


[b-2jpyz9g034] .news-feed .flavor {
    font-size: 1.2rem;
}

[b-2jpyz9g034] article-item h1 {
    margin-bottom: 0.3em;
}
/* /Components/UI/HomeSections/Outro.razor.rz.scp.css */
/*--------------------------------------- OUTRO --------------------------------------------------------*/

/*lore stage bg ----------------------------------------*/
.lore_stage[b-8x8d204n5w] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.14;
    z-index: -2;
}

.lore_stage_inner[b-8x8d204n5w] {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: 3840/2107;
}

.lore_stage_bg[b-8x8d204n5w] {
    width: 100%;
    height: 100%;
    background-image: url('/img/outro_section/lore_bg_landscape.jpg');
    background-size: cover;
    background-position: center;
}

.lore_stage_fx[b-8x8d204n5w] {
    position: absolute;
    width: 6.5%;
    aspect-ratio: 230/236;
    transform: translate(-50%, -22%);
    background-image: url('/img/outro_section/mage-statue-fx.gif');
    background-size: contain;
    background-repeat: no-repeat;
}
/*Las 4 estatuas posicionadas en % */
.lore_stage_fx_1[b-8x8d204n5w] {
    left: 11.1%;
    top: 36.4%;
}

.lore_stage_fx_2[b-8x8d204n5w] {
    left: 25.5%;
    top: 23%;
}

.lore_stage_fx_3[b-8x8d204n5w] {
    left: 30.7%;
    top: 18.5%;
}

.lore_stage_fx_4[b-8x8d204n5w] {
    left: 43.9%;
    top: 6.9%;
}

/*------------------------- Titles ------------------------*/

.title_outro[b-8x8d204n5w]{
    margin: 0.6rem 0;
}

/*-------------------------- Steam Widget ---------------------*/

#steam_widget[b-8x8d204n5w] {
    margin: 0 auto;
}

.desktop_only[b-8x8d204n5w] {
    display: none;
}

@media screen and (min-width: 1024px){
    .desktop_only[b-8x8d204n5w]{
        display: block;
    }
}


/*-------------------------- Badges -------------------------*/

[b-8x8d204n5w] .badges{
    margin: 0 auto 2rem;
}

[b-8x8d204n5w] .badges h2 {
    font-size: 1.8rem;
    margin-bottom: 0;
    margin-top: 0.005em;
    font-weight: 900;
    font-family: "Titillium Web", sans-serif;
    line-height: 1;
    color: white;
    text-shadow: 0 0.1em 0 rgba(0, 0, 0, 1);
}

@media screen and (max-width: 1024px) {
    [b-8x8d204n5w] .badges {
        margin: 0 auto;
    }
}

[b-8x8d204n5w] .store_badge:nth-child(2) {
    padding: 2px 0 9px 0;
}
/* /Components/UI/HomeSections/Screenshots_section.razor.rz.scp.css */


.screens_bg[b-w0ts42ft3e] {
    background-image: url("/img/screenshots_section/screens_bg.jpg?=v4");
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* ----------------------------------------
   Sección general
   ---------------------------------------- */
.intro_block[b-w0ts42ft3e] {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 30px;
}
    .intro_block .section_h2[b-w0ts42ft3e] {
        margin-bottom: 10px;
        color: #ffd24a;
    }


[b-w0ts42ft3e] .screenshots_grid {
    max-width: 1200px;
    margin: 0 auto;
}

[b-w0ts42ft3e] .screenshot a:focus-visible{
    border: none;
    outline: none;
}

[b-w0ts42ft3e] .screenshot img {
    border: 2px solid #46febf;
    -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.59);
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.59);
}
/* /Components/UI/HomeSections/Socials.razor.rz.scp.css */
/*--------------------------------------- SOCIALS --------------------------------------------------------*/


#socials .section_h1[b-z457gm38a8] {
    margin-bottom: .7em;
}

#socials[b-z457gm38a8]  a {
    background-color: #132F40;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    line-height: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    transition: .2s;
}

    #socials[b-z457gm38a8]  a:hover {
        background-color: #225172;
        border: none;
        filter: drop-shadow(0px 4px 0px #132F40);
    }


    #socials[b-z457gm38a8]  a img {
        margin: 0;
        padding: 0;
        width: 20px;
        height: auto;
    }

@media screen and (min-width: 500px) {
    #socials[b-z457gm38a8]  a {
        width: 70px;
        height: 70px;
    }

        #socials[b-z457gm38a8]  a img {
            width: 30px;
        }
}
/* /Components/UI/HomeSections/Spells.razor.rz.scp.css */
/* =================================================================
   Spells section — CSS isolation
   Texto + grid de spells en layout 40/60 desktop, stack mobile
   ================================================================= */


/* ============================
   Backgrounds
   ============================ */
#spells[b-v9d667u5wj] {
    --content-width: min(100vw, 2560px);
}

.spells_bg[b-v9d667u5wj] {
    background-image: url("/img/spells_section/spells_bg.jpg?=v1");
    background-color: #182744;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 3840px;
    background-position-x: calc(50% + var(--content-width) * 0.2 - 80px); /*esto es para layout 40 60*/
    background-position-y: 57%;
}

@media screen and (max-width: 1024px){
    .spells_bg[b-v9d667u5wj] {
        background-size: 3000px;
        background-position-x: center;
        background-position-y: 40%;
    }
}

/* ============================
   Desktop Layout (40/60)
   ============================ */
.spells_layout_krg[b-v9d667u5wj] {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 40px;
    align-items: center;
    min-height: 650px;
}

@media screen and (max-width: 764px){
    .spells_layout_krg[b-v9d667u5wj] {
        min-height: unset;
    }
}

@media (min-width: 1025px) {
    .intro_block.text_xl_left[b-v9d667u5wj] {
        margin-bottom: 0;
    }
}

/* ============================
   Spells grid wrapper
   ============================ */
.spells_grid_wrapper_krg[b-v9d667u5wj] {
    width: 100%;
    margin: 0 auto; /* lo centra dentro de su columna del 60% */
}

/* ============================
   Responsive — Tablet (601–1024px)
   ============================ */
@media (max-width: 1024px) {
    .spells_layout_krg[b-v9d667u5wj] {
        display: flex;
        flex-direction: column;
        gap:0;
    }
}

/* ============================
   Responsive — Mobile (≤ 600px)
   ============================ */
@media (max-width: 600px) {
    .spells_layout_krg[b-v9d667u5wj] {
        flex-direction: column;
    }
}
/* /Components/UI/HomeSections/Towers.razor.rz.scp.css */


.towers_section[b-nu7lf1ajrb] {
    position: relative;
    color: #fff;
    font-family: 'Titillium Web', sans-serif;
    margin-bottom: -2px;
}

.towers_bg[b-nu7lf1ajrb] {
    background-image: url("/img/towers_section/towers-bg-ground-2.jpg?=v6");
    background-color: #07346f;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 2560px;
    background-position: center bottom;
}

@media screen and (max-width: 1480px) {
    .towers_bg[b-nu7lf1ajrb] {
        background-size: 2200px;
    }
}

@media screen and (max-width: 1024px){
    .towers_bg[b-nu7lf1ajrb] {
        background-size: 1650px;
    }
}

@media screen and (max-width: 768px) {
    .towers_bg[b-nu7lf1ajrb] {
        background-size: 1460px;
    }
}

@media screen and (max-width: 580px) {
    .towers_bg[b-nu7lf1ajrb] {
        background-size: 1420px;
    }
}


/*Intro block-------------------------*/


.intro_block[b-nu7lf1ajrb]{
    margin-bottom: 0.8rem;
}


/* =========================================================
   STRIPE de portraits (arriba)
   ========================================================= */
.stripe_krg[b-nu7lf1ajrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 1.5rem;
}

.stripe_arrow[b-nu7lf1ajrb] {
    width: 36px;
    height: 36px;
    background-image: url('/img/ui_icons/arrow_carousel_gold.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: var(--cursor-pointer);
    transition: transform 0.15s ease, filter 0.15s ease;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 6px 0px);
    flex-shrink: 0; /* que no se aplasten cuando el track se llena */
    background-color: transparent;
    border: none;
}

    .stripe_arrow:hover[b-nu7lf1ajrb] {
        filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 6px 0px) brightness(1.1);
        transform: scale(1.06);
    }

/* La flecha izquierda es la misma SVG, espejada horizontalmente */
.stripe_arrow_prev[b-nu7lf1ajrb] {
    transform: scaleX(-1);
}

    .stripe_arrow_prev:hover[b-nu7lf1ajrb] {
        transform: scaleX(-1) scale(1.06);
    }

.stripe_arrow:active[b-nu7lf1ajrb] {
    transform: scale(0.96);
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2px 0px);
}

.stripe_arrow_prev:active[b-nu7lf1ajrb] {
    transform: scaleX(-1) scale(0.96);
}

/* En mobile las achicamos para dar más espacio a las imágenes */
@media screen and (max-width: 480px) {
    .stripe_arrow[b-nu7lf1ajrb] {
        width: 40px;
        height: 40px;
    }
}

/* Viewport: tiene el ancho máximo y el scroll */
.stripe_track[b-nu7lf1ajrb] {
    display: flex;
    gap: 6px;
    align-items: center;
    max-width: 1024px; /* ajustá al ancho de tu hero/container */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth; /* anima el scroll automático del controller */
    padding: 4px 6px; /* espacio para que el thumb activo no se corte con scale/border */
    scrollbar-width: none; /* Firefox */
}

    .stripe_track[b-nu7lf1ajrb]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

.stripe_thumb[b-nu7lf1ajrb] {
    flex-shrink: 0; /* clave: sin esto flexbox los aplasta y no scrollea */
    width: 54px;
    height: 54px;
    padding: 0;
    background: #087EC8;
    border: 2px solid #009cff;
    border-radius: 4px;
    cursor: var(--cursor-pointer);
    overflow: hidden;
    filter: brightness(70%);
    transition: all 0.18s ease;
}

    .stripe_thumb img[b-nu7lf1ajrb] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .stripe_thumb:hover[b-nu7lf1ajrb] {
        filter: brightness(100%);
    }

    /* Estado activo: lo aplica Stimulus con .is_active */
    .stripe_thumb.is_active[b-nu7lf1ajrb] {
        filter: brightness(100%);
        border: 2px solid #ffd24a;
        box-shadow: 0 0 0 2px rgba(255, 210, 74, 0.25);
        transform: scale(1.1);
    }

/* =========================================================
   Carousel — overrides para mostrar 1 sola slide grande
   (clases de la librería: .carousel, .carousel-inner, etc.)
   ========================================================= */
[b-nu7lf1ajrb] .carousel {
    position: relative;
    width: 700px;
    max-width: 800px;
    margin: 0 auto;
}

[b-nu7lf1ajrb] .carousel,
[b-nu7lf1ajrb] .carousel-slides {
    aspect-ratio: 1.5 / 1;
}

@media screen and (max-width: 1480px){
    [b-nu7lf1ajrb] .carousel {
        width: 600px;
    }
}

@media screen and (max-width: 1024px) {
    [b-nu7lf1ajrb] .carousel {
        width: 580px;
    }
}

@media screen and (max-width: 768px) {
    [b-nu7lf1ajrb] .carousel {
        width: 520px;
    }
}

@media screen and (max-width: 580px) {
    [b-nu7lf1ajrb] .carousel {
        width: 240px;
    }
    [b-nu7lf1ajrb] .carousel .slide{
        width: 100%;
    }
    [b-nu7lf1ajrb] .carousel,
    [b-nu7lf1ajrb] .carousel-slides {
        aspect-ratio: 1.1 / 1;
    }
}

/*Ocultamos las flechas originales---------------*/
[b-nu7lf1ajrb] .carousel-control{
    display: none;
}

[b-nu7lf1ajrb] .carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}



    [b-nu7lf1ajrb] .carousel-slides{
        bottom: 0%;
    }

    /* Ocultamos las slides vecinas que la librería renderiza para los peeks */
    [b-nu7lf1ajrb] .slide {
        opacity: 0;
        left: 50%;
        width: 72%;
        transform: translateX(-50%) scale(90%);
        transition: 0.2s ease;
    }

        [b-nu7lf1ajrb] .slide.slide-3 {
            opacity: 1;
            transform: translateX(-50%) scale(100%);
        }

/* Anular borde/animación que aplica la librería sobre el img central */
[b-nu7lf1ajrb] .slide-3 img,
[b-nu7lf1ajrb] .slide img {
    animation: none;
    border: none;
    filter: none;
}

/* Slide grande */
.tower_slide[b-nu7lf1ajrb] {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tower_slide img[b-nu7lf1ajrb] {
        width: 100%;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 1;
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    }


/* ===== Tower info (nombre) ===== */

[b-nu7lf1ajrb] .legends{
    position: relative;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}

@media screen and (max-width: 580px){
    [b-nu7lf1ajrb] .legends {
        bottom: 0%;
    }
}

.tower_info[b-nu7lf1ajrb] {
    text-align: center;
    margin: 0;
}

.tower_name[b-nu7lf1ajrb] {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1;
    filter: drop-shadow(0 4px 0 #000);
    letter-spacing: 0.02em;
}

@media screen and (max-width: 1024px) {
    .tower_name[b-nu7lf1ajrb] {
        font-size: 1.15rem;
    }
}



/* =========================================================
   Type badges (abajo)
   ========================================================= */
.type_badges_krg[b-nu7lf1ajrb] {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 30;
}



/* Variante badge: por defecto inactiva (azul medio, opaca) */
.type_badge[b-nu7lf1ajrb] {
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    border: 2px solid #009cff;
    border-radius: 4px;
    filter: brightness(60%);
    transition: .2s;
}

.type_badge:hover[b-nu7lf1ajrb] {
    filter: brightness(100%);
}

/* Estado activo: lo aplica Stimulus con .is_active */
    .type_badge.is_active[b-nu7lf1ajrb] {
        border: 2px solid #ffd24a;
        filter: brightness(100%);
    }
/* /Components/UI/HomeSections/UpgradesTree.razor.rz.scp.css */
/* =================================================================
   Upgrades Tree section — CSS isolation
   Video + texto descriptivo en layout 60/40 desktop, stack mobile
   ================================================================= */

/* ============================
   Backgrounds
   ============================ */

#upgrades[b-kpgjyao7fn] {
    --content-width: min(100vw, 2560px);
}

.bg_upgrades[b-kpgjyao7fn] {
    background-image: url("/img/upgrades_tree_section/upgrades_bg.jpg?=v3");
    background-color: #182744;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: 3840px;
    background-position-x: calc(50% - var(--content-width) * 0.2 + 80px); /*esto es para layout 40 60*/
    background-position-y: 57%;
}


/* ============================
   Desktop Layout (60/40)
   ============================ */
.upgrades_tree_layout_krg[b-kpgjyao7fn] {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 40px;
    align-items: center;
    min-height: 650px;
}

@media screen and (max-width: 1024px) {
    .upgrades_tree_layout_krg[b-kpgjyao7fn] {
        min-height: unset;
    }
}

@media (min-width: 1025px) {
    .intro_block.text_xl_left[b-kpgjyao7fn] {
        margin-bottom: 0;
    }
}


/* ============================
   Video Frame
   ============================ */
.upgrades_video_frame_krg[b-kpgjyao7fn] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

    .upgrades_video_frame_krg video[b-kpgjyao7fn] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 8px;
        outline: 3px solid #73e3ff;
        outline-offset: -2px;
        box-shadow: 0 0 0 8px #000;
    }

/* Play/Pause button */
.upgrades_video_play_btn_krg[b-kpgjyao7fn] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: var(--cursor-pointer);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .upgrades_video_play_btn_krg:hover[b-kpgjyao7fn] {
        background: rgba(0, 0, 0, 0.8);
    }

    .upgrades_video_play_btn_krg .play-icon[b-kpgjyao7fn] {
        color: #ffd24a;
        font-size: 16px;
        font-weight: bold;
    }

/* ============================
   Text Content
   ============================ */
.upgrades_text_block_krg[b-kpgjyao7fn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .upgrades_text_block_krg h2[b-kpgjyao7fn] {
        font-size: 36px;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 0 2px 16px rgba(0, 156, 255, 0.3);
        letter-spacing: 1px;
    }

    .upgrades_text_block_krg p[b-kpgjyao7fn] {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
    }

/* ============================
   Responsive — Tablet (601–1024px)
   ============================ */
@media (max-width: 1024px) {
    .upgrades_tree_layout_krg[b-kpgjyao7fn] {
        display: flex;
        flex-direction: column-reverse;
        gap:0;
    }

}

/* ============================
   Responsive — Mobile (≤ 600px)
   ============================ */
@media (max-width: 600px) {
    .upgrades_tree_layout_krg[b-kpgjyao7fn] {
        flex-direction: column-reverse;
    }

    .upgrades_video_frame_krg[b-kpgjyao7fn] {
        aspect-ratio: 16 / 9;
    }
    
}
/* /Components/UI/ImageComparisonViewer_krg.razor.rz.scp.css */
.image-comparison-viewer_krg[b-ibu39yxut0] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.comparison-container_krg[b-ibu39yxut0] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #000;
    border: 3px solid #087EC8;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(8, 126, 200, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.8)); 
}

.after-image_krg[b-ibu39yxut0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

    .after-image_krg img[b-ibu39yxut0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        user-select: none;
    }

.before-image_krg[b-ibu39yxut0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    pointer-events: none;
}

    .before-image_krg img[b-ibu39yxut0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        user-select: none;
    }

.divider-line_krg[b-ibu39yxut0] {
    position: absolute;
    width: 6px;
    height: 150%;
    background: #fff;
    top: -25%;
    left: 0;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(0, 220, 213, 0.9);
}


.sword-handle_krg[b-ibu39yxut0] {
    position: absolute;
    min-width: 11%;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 20;
    cursor: grab;
    user-select: none;
    filter: drop-shadow(0 0 10px rgba(74, 249, 255, 0.6));
    pointer-events: auto;
}

    .sword-handle_krg[b-ibu39yxut0]::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 4px solid #00dcd5;
        animation: portal-ring-1-b-ibu39yxut0 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    }

    .sword-handle_krg[b-ibu39yxut0]::after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 4px solid #00dcd5;
        animation: portal-ring-1-b-ibu39yxut0 2.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    }

@keyframes portal-ring-1-b-ibu39yxut0 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-color: #00dcd5;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
        border-color: rgba(0, 220, 213, 0);
    }
}


.sword-handle_krg:hover[b-ibu39yxut0] {
    filter: drop-shadow(0 0 20px rgba(74, 249, 255, 0.8));
}

.sword-handle_krg:active[b-ibu39yxut0] {
    cursor: grabbing;
    filter: drop-shadow(0 4px 30px rgba(74, 249, 255, 1));
}

.sword-handle_krg img[b-ibu39yxut0] {
    display: block;
    margin: 0 auto;
    width: 70px;
    height: auto;
    pointer-events: none;
}

.badge[b-ibu39yxut0]{
    position: absolute;
    display: block;
    width: 130px;
    padding: 3px 6px;
    color: white;
    font-size: 0.8rem;
}


/* Responsive */
@media (max-width: 1024px) {
    .comparison-container_krg[b-ibu39yxut0] {
        aspect-ratio: 16/10;
    }



    .sword-handle_krg img[b-ibu39yxut0] {
        width: 60px;
    }

    .divider-line_krg[b-ibu39yxut0] {
        width: 5px;
    }
}

@media (max-width: 600px) {
    .comparison-container_krg[b-ibu39yxut0] {
        aspect-ratio: 4/3;
        border: 1px solid #087EC8;
    }

    .sword-handle_krg img[b-ibu39yxut0] {
        width: 50px;
    }

    .divider-line_krg[b-ibu39yxut0] {
        width: 4px;
    }
}
/* /Components/UI/NewsletterSubscription.razor.rz.scp.css */
[b-nm6qts1wq2] form {
    text-align: center;
}

.modal-frame[b-nm6qts1wq2] {
    background: #c8e1e5;
    color: var(--color-primary);
    position: relative;
    border-radius: 20px; 
    width: clamp(300px, 500px, 100%);
}

[b-nm6qts1wq2] input{
    min-width: unset;
}

.modal-header[b-nm6qts1wq2]{
    display:flex;
    justify-content: flex-end;
}

.modal-content[b-nm6qts1wq2] {
    padding: 20px 5% 20px;
}



/*-------------------- close btn ------------------*/

[b-nm6qts1wq2] .modal-close {
    position: absolute;
    right: 17px;
    top: 17px;
    width: 40px;
    height: 40px;
    padding: 0;
    opacity: .8;
    transition: .2s;
}

    [b-nm6qts1wq2] .modal-close .close_icon {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #a7cbd9;
        border-radius: 50%;
    }

        [b-nm6qts1wq2] .modal-close .close_icon .bar {
            position: absolute;
            width: 50%;
            height: 3px;
            background-color: #234048;
            top: 45%;
            left: 25%;
            transform-origin: center;
        }

            [b-nm6qts1wq2] .modal-close .close_icon .bar:first-child {
                transform: rotate(45deg);
            }

            [b-nm6qts1wq2] .modal-close .close_icon .bar:last-child {
                transform: rotate(-45deg);
            }

    [b-nm6qts1wq2] .modal-close:hover,
    [b-nm6qts1wq2] .modal-close:active{
        opacity: 1;
        transform: rotate(90deg);
    }



.post_subscriptin_msj[b-nm6qts1wq2] {
    display: block;
    font-family: var(--form-font-family, var(--site-font-family));
    font-weight: var(--form-font-weight, bold);
    font-style: var(--form-font-style, normal);
    text-transform: var(--form-font-transform, none);
    color: #234048;
    font-size: var(--form-font-size, 1.4rem);
    padding: 0 0 20px;
}

.emote_sad[b-nm6qts1wq2],
.emote_happy[b-nm6qts1wq2]{
    display: block;
    width: 200px;
    margin: 1rem auto;
}
/* /Components/UI/Screenshots.razor.rz.scp.css */
#links[b-fv5gguq0uz] {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.screenshots_grid[b-fv5gguq0uz] {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}



.screenshot[b-fv5gguq0uz] {
    padding: 0;
    transition: transform .15s ease, filter .15s ease;
}

    .screenshot img[b-fv5gguq0uz] {
        border-radius: 6px;
        width: 100%;
        height: auto;
        display: block;
    }

    .screenshot:hover[b-fv5gguq0uz],
    .screenshot:active[b-fv5gguq0uz] {
        filter: brightness(1.1);
        transform: scale(1.03);
    }

@media screen and (max-width: 1024px) {
    .screenshots_grid[b-fv5gguq0uz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 764px) {
    .screenshots_grid[b-fv5gguq0uz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/UI/SubscriptionForm_KR6.razor.rz.scp.css */
[b-pl8852duo2] form {
    display: block;
    padding-top: 2rem;
    font-family: var(--form-font-family, var(--site-font-family));
    font-weight: var(--form-font-weight, bold);
    font-style: var(--form-font-style, normal);
    text-transform: var(--form-font-transform, none);
    color: #234048;
    font-size: var(--form-font-size, 1.1rem);
}

[b-pl8852duo2] p{
    text-align: left;
}

.custom_select_wrapper[b-pl8852duo2] {
    position: relative;
    display: inline-block;
}

.select_arrow[b-pl8852duo2] {
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    right: 12px;
    width: 8px;
    height: 8px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid #234048;
    border-bottom: 2px solid #234048;
    pointer-events: none;
}


[b-pl8852duo2] select {
    appearance: none;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #a7cbd9;
    padding: 10px 10px;
    color: #234048;
    font-weight: bold;
    font-size: 1.1rem;
    flex: 1;
    border-radius: 4px;
}

[b-pl8852duo2] select:disabled{
    background: #a7cbd9;
    color: #234048;
}

[b-pl8852duo2] option {
    color: #234048;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

    [b-pl8852duo2] option:hover {
        background-color: #132f40;
    }

[b-pl8852duo2] .age-control-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
}

    [b-pl8852duo2]  .age-control-group .custom_select_wrapper {
        width: 100%;
    }


[b-pl8852duo2] fieldset {
    border: none;
    padding: 0;
    margin-bottom: 1.2rem;
    min-width: 0;
}

[b-pl8852duo2] input {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #234048;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 4px;
    background-color: #a7cbd9;
    padding: 8px 15px;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

    [b-pl8852duo2] input::placeholder {
        color: rgba(35, 64, 72, 0.5);
    }

[b-pl8852duo2] .validation-message {
    color: #ab0f0f;
    font-size: .75em;
    line-height: 1.2;
    padding: .4em;
    background-color: rgba(255, 74, 28, 0.3);
    margin: 5px auto;
    border-radius: 4px;
}


.kr6_btn[b-pl8852duo2] {
    margin: 20px auto 20px;
}
/* /Components/UI/Trailer.razor.rz.scp.css */
.trailer_area[b-5f5e80ln74] {
    margin-bottom: 2rem;
}


.shadow_btn[b-5f5e80ln74] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 75, 115,.9);
    border-radius: 50%;
    animation: pulse 2s ease-out infinite;
}

.icon_triangle[b-5f5e80ln74] {
    width: 20px;
    height: 20px;
    display: inline-block;
    fill: white;
    stroke: black;
    stroke-width: 6;
    transform: rotate(90deg);
    vertical-align: -0.17em;
    filter: drop-shadow(2px 0 0 #000) drop-shadow(1px 0 0 #000);
}



[b-5f5e80ln74] iframe {
    border-radius: 10px;
    border: 4px solid #21576a;
}