:root {
    --black: #040202;
    --gold: #d7a14d;
    --gold-light: #f3d49a;
    --red: #8f1f0b;
    --text: #eee5d6;
    --muted: #baa68d;
    --green: #74df67;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: #040202;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

/* =========================
   HEADER
========================= */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    background:
        linear-gradient(
            180deg,
            rgba(2,2,2,.98),
            rgba(4,2,2,.90)
        );

    border-bottom:
        1px solid rgba(154,58,24,.35);

    backdrop-filter: blur(10px);
}

.topbar-inner {
    width: min(1460px, calc(100% - 42px));
    min-height: 72px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    gap: 28px;
}

.brand-small img {
    width: 94px;
    display: block;

    filter:
        drop-shadow(
            0 0 8px rgba(255,70,14,.22)
        );
}

.menu {
    flex: 1;

    display: flex;
    justify-content: center;
    gap: 3px;
}

.menu a {
    position: relative;

    padding: 27px 12px 23px;

    color: #cdbca6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .7px;
}

.menu a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: #e24518;

    box-shadow:
        0 0 12px #e24518;

    transition: width .2s ease;
}

.menu a:hover::after,
.menu a.active::after {
    width: 70%;
}

.account {
    display: flex;
    gap: 9px;
}

.account a {
    padding: 10px 17px;

    font-size: 11px;

    text-transform: uppercase;

    border:
        1px solid rgba(215,161,77,.28);
}

.account .register {
    background:
        linear-gradient(
            180deg,
            rgba(142,32,11,.95),
            rgba(62,8,3,.96)
        );

    border-color:
        rgba(215,67,24,.64);
}

/* =========================
   HERO
========================= */

.hero {
    position: relative;

    height: 850px;

    margin-top: 0;

    overflow: hidden;

    background: #050303;
}

.hero-bg {
    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2,1,1,.18) 0%,
            rgba(2,1,1,.04) 48%,
            rgba(2,1,1,.12) 70%,
            rgba(2,1,1,.35) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.02) 60%,
            rgba(4,2,2,.80) 90%,
            #040202 100%
        ),
        url("../images/fondo.png")
        center top / cover no-repeat;
}

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 180px;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(4,2,2,.45),
            #040202
        );
}

/* =========================
   PERSONAJE
========================= */

.hero-character {
    position: absolute;

    z-index: 4;

    right: 55px;
    bottom: 0;

    width: 910px;
    height: auto;

    max-height: 760px;

    object-fit: contain;
    object-position: right bottom;

    filter:
        drop-shadow(
            0 18px 24px rgba(0,0,0,.82)
        )
        drop-shadow(
            0 0 16px rgba(173,41,11,.12)
        );

    pointer-events: none;
}

/* =========================
   CONTENIDO IZQUIERDO
========================= */

.hero-content {
    position: relative;

    z-index: 6;

    width: 40;
    height: 100%;

    margin: 0 auto;
}

.hero-left {
    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 650px;

    padding-bottom: 20px;
}

.hero-logo {
    display: block;

    width: 430px;
    height: auto;

    margin-bottom: 15px;

    filter:
        drop-shadow(
            0 10px 12px rgba(0,0,0,.95)
        )
        drop-shadow(
            0 0 20px rgba(255,67,12,.26)
        );
}

.tagline {
    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    letter-spacing: 3px;

    text-transform: uppercase;

    text-shadow:
        0 4px 9px rgba(0,0,0,.95);
}

.description {
    max-width: 540px;

    margin: 16px 0 0;

    color: #c8b49c;

    font-size: 15px;
    line-height: 1.7;

    text-shadow:
        0 3px 6px rgba(0,0,0,.95);
}

.server-version {
    margin-top: 15px;

    color: #ba9260;

    font-size: 11px;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 27px;
}

.btn {
    min-width: 220px;

    padding: 14px 23px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    border: 1px solid;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.btn strong {
    display: block;

    font-size: 18px;

    font-weight: normal;

    text-transform: uppercase;
}

.btn small {
    display: block;

    margin-top: 4px;

    color: #bd9f78;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.btn-main {
    color: #fff2dc;

    background:
        linear-gradient(
            180deg,
            rgba(147,37,12,.96),
            rgba(64,9,4,.98)
        );

    border-color: #b6461f;

    box-shadow:
        inset 0 0 19px rgba(255,96,29,.11);
}

.btn-alt {
    background:
        linear-gradient(
            180deg,
            rgba(30,22,16,.94),
            rgba(7,5,4,.97)
        );

    border-color:
        rgba(215,161,77,.38);
}

.btn:hover {
    transform: translateY(-3px);

    border-color: #d99d4a;

    box-shadow:
        0 12px 30px rgba(0,0,0,.50),
        0 0 15px rgba(224,59,15,.18);
}

/* =========================
   SERVIDOR
========================= */

.server-box {
    position: absolute;

    right: 28px;
    bottom: 24px;

    z-index: 20;

    width: 285px;

    padding: 21px 20px 18px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(13,8,6,.94),
            rgba(3,2,2,.98)
        );

    border:
        1px solid rgba(215,161,77,.38);

    box-shadow:
        0 18px 45px rgba(0,0,0,.68),
        inset 0 0 25px rgba(146,36,11,.05);

    backdrop-filter: blur(6px);
}

.server-box::before,
.server-box::after {
    content: "";

    position: absolute;

    width: 28px;
    height: 28px;
}

.server-box::before {
    left: -1px;
    top: -1px;

    border-left:
        2px solid #9d6b30;

    border-top:
        2px solid #9d6b30;
}

.server-box::after {
    right: -1px;
    bottom: -1px;

    border-right:
        2px solid #9d6b30;

    border-bottom:
        2px solid #9d6b30;
}

.online {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    color: #d6dfcf;

    font-size: 11px;

    text-transform: uppercase;
}

.dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 10px var(--green);
}

.server-name {
    margin-top: 14px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;
}

.server-region {
    margin-top: 5px;

    color: #b48a5f;

    font-size: 10px;

    text-transform: uppercase;
}

.server-data {
    display: grid;

    gap: 8px;

    margin-top: 17px;
    padding-top: 13px;

    border-top:
        1px solid rgba(215,161,77,.12);
}

.server-data div {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    font-size: 11px;
}

.server-data span {
    color: #817263;
}

.server-data b {
    color: #d8c4a8;

    font-weight: normal;
}

.server-data .ok {
    color: #89da70;
}

/* =========================
   BRASAS
========================= */

.embers span {
    position: absolute;

    z-index: 3;

    bottom: -4px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ff6817;

    box-shadow:
        0 0 8px #ff3609;

    opacity: 0;

    animation:
        ember 8s linear infinite;
}

.embers span:nth-child(1) {
    left: 10%;
}

.embers span:nth-child(2) {
    left: 25%;
    animation-delay: 1.2s;
}

.embers span:nth-child(3) {
    left: 43%;
    animation-delay: 2.5s;
}

.embers span:nth-child(4) {
    left: 61%;
    animation-delay: 3.8s;
}

.embers span:nth-child(5) {
    left: 78%;
    animation-delay: 5.1s;
}

.embers span:nth-child(6) {
    left: 92%;
    animation-delay: 6.4s;
}

@keyframes ember {
    0% {
        transform:
            translateY(0)
            translateX(0)
            scale(.6);

        opacity: 0;
    }

    12% {
        opacity: .72;
    }

    100% {
        transform:
            translateY(-330px)
            translateX(32px)
            scale(1.3);

        opacity: 0;
    }
}

/* =========================
   TABLET
========================= */

@media (max-width: 1050px) {

    .menu {
        display: none;
    }

    .account {
        margin-left: auto;
    }

    .hero-character {
        right: -110px;

        width: 620px;

        opacity: .72;
    }

    .hero-left {
        width: 560px;
    }

    .server-box {
        right: 18px;
        bottom: 18px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

    .topbar-inner {
        width: calc(100% - 24px);
    }

    .brand-small img {
        width: 72px;
    }

    .account .login {
        display: none;
    }

    .hero {
        height: auto;

        min-height: 840px;
    }

    .hero-bg {
        background-position:
            48% top;
    }

    .hero-character {
        right: -240px;
        bottom: 0;

        width: 650px;

        opacity: .36;
    }

    .hero-content {
        width: calc(100% - 24px);

        min-height: 840px;
    }

    .hero-left {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        width: 100%;

        padding-top: 80px;
    }

    .hero-logo {
        width: min(350px, 92vw);
    }

    .tagline {
        font-size: 18px;

        letter-spacing: 1.3px;
    }

    .description {
        font-size: 14px;
    }

    .actions {
        display: grid;
    }

    .btn {
        width: 100%;
    }

    .server-box {
        right: 12px;
        bottom: 14px;

        width: calc(100% - 24px);
    }
}


/* =========================================================
   QUICK LINKS PW INFIERNO
   ========================================================= */

.quick-section {
    position: relative;
    z-index: 30;

    margin-top: -2px;

    padding:
        0
        0
        28px;

    background:
        linear-gradient(
            180deg,
            #040202,
            #070403
        );
}

.quick-container {
    width: min(
        1460px,
        calc(100% - 42px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    background: #080504;

    border:
        1px solid rgba(186,129,61,.34);

    box-shadow:
        0 16px 40px rgba(0,0,0,.55);
}

.quick-card {
    position: relative;

    min-height: 108px;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        18px
        20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(144,34,11,.18),
            transparent 43%
        ),
        linear-gradient(
            135deg,
            rgba(23,13,9,.97),
            rgba(6,4,3,.99)
        );

    border-right:
        1px solid rgba(186,129,61,.23);

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.quick-card:last-child {
    border-right: 0;
}

.quick-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    opacity: .32;

    background:
        linear-gradient(
            90deg,
            transparent,
            #bc4a1d,
            #e09b43,
            transparent
        );
}

.quick-card::after {
    content: "";

    position: absolute;

    inset: 5px;

    pointer-events: none;

    border:
        1px solid rgba(224,164,81,.055);
}

.quick-card:hover {
    z-index: 5;

    transform:
        translateY(-4px);

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(198,48,13,.28),
            transparent 47%
        ),
        linear-gradient(
            135deg,
            rgba(34,16,9,.98),
            rgba(8,4,3,.99)
        );

    box-shadow:
        0 13px 27px rgba(0,0,0,.55),
        inset 0 0 25px rgba(170,44,11,.07);
}

.quick-symbol {
    position: relative;

    z-index: 2;

    flex:
        0
        0
        50px;

    width: 50px;
    height: 58px;

    display: grid;

    place-items: center;

    color: #e69a40;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    text-shadow:
        0 0 15px rgba(239,77,19,.50);
}

.quick-text {
    position: relative;

    z-index: 2;

    display: block;
}

.quick-text strong {
    display: block;

    color: #ead4b1;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: normal;

    text-transform: uppercase;
}

.quick-text small {
    display: block;

    margin-top: 6px;

    color: #9d7c58;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: .65px;

    text-transform: uppercase;
}

/* pequeña identidad individual */

.quick-register .quick-symbol {
    color: #ec6d29;
}

.quick-download .quick-symbol {
    color: #67aede;
}

.quick-ranking .quick-symbol {
    color: #e9a741;
}

.quick-guides .quick-symbol {
    color: #8abb65;
}

.quick-donations .quick-symbol {
    color: #c28bd8;
}


/* ===== QUICK TABLET ===== */

@media (max-width: 1050px) {

    .quick-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .quick-card {
        border-bottom:
            1px solid rgba(186,129,61,.23);
    }

    .quick-card:nth-child(2n) {
        border-right: 0;
    }

    .quick-card:last-child {
        grid-column:
            1 / -1;
    }
}


/* ===== QUICK MOBILE ===== */

@media (max-width: 650px) {

    .quick-section {
        padding-bottom: 18px;
    }

    .quick-container {
        width:
            calc(100% - 24px);

        grid-template-columns:
            1fr;
    }

    .quick-card,
    .quick-card:last-child {
        grid-column: auto;

        min-height: 82px;

        padding:
            12px
            16px;

        border-right: 0;

        border-bottom:
            1px solid rgba(186,129,61,.23);
    }

    .quick-symbol {
        flex-basis: 42px;

        width: 42px;
        height: 48px;

        font-size: 28px;
    }

    .quick-text strong {
        font-size: 15px;
    }
}



/* =========================================================
   HOME PANELS PW INFIERNO
   ========================================================= */

.home-panels {
    position: relative;

    padding:
        12px
        0
        55px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(125,26,8,.08),
            transparent 42%
        ),
        #050303;
}

.home-panels-container {
    width:
        min(
            1460px,
            calc(100% - 42px)
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        .92fr
        1.35fr
        1fr;

    gap: 13px;
}


/* =========================
   PANEL GENERAL
========================= */

.pw-panel {
    position: relative;

    min-width: 0;

    background:
        linear-gradient(
            145deg,
            rgba(15,8,6,.98),
            rgba(5,3,3,.99)
        );

    border:
        1px solid rgba(183,126,59,.27);

    box-shadow:
        0 14px 34px rgba(0,0,0,.36),
        inset 0 0 30px rgba(119,30,9,.025);
}

.pw-panel::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224,151,68,.42),
            transparent
        );
}

.pw-panel-header {
    min-height: 52px;

    padding:
        0
        17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px solid rgba(183,126,59,.18);

    background:
        linear-gradient(
            180deg,
            rgba(57,20,10,.23),
            rgba(9,5,4,.10)
        );
}

.pw-panel-header h2 {
    margin: 0;

    color: #e5cda8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: normal;

    text-transform: uppercase;
}

.pw-panel-header a {
    color: #df4a1b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    text-transform: uppercase;
}


/* =========================
   RANKING
========================= */

.ranking-table {
    padding:
        9px
        14px
        14px;
}

.ranking-row {
    min-height: 34px;

    display: grid;

    grid-template-columns:
        30px
        minmax(90px, 1fr)
        75px
        42px;

    align-items: center;

    gap: 7px;

    border-bottom:
        1px solid rgba(255,255,255,.04);

    color: #a9957e;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
}

.ranking-row:last-child {
    border-bottom: 0;
}

.ranking-head {
    min-height: 28px;

    color: #765f49;

    font-size: 9px;

    text-transform: uppercase;
}

.ranking-row strong {
    color: #d4c0a3;

    font-weight: normal;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.ranking-row b {
    color: #d3984b;

    text-align: right;

    font-weight: normal;
}

.rank-pos {
    color: #9a7850;

    text-align: center;
}

.rank-pos.gold {
    color: #ffc34e;
}

.rank-pos.silver {
    color: #d7d7d7;
}

.rank-pos.bronze {
    color: #c67a43;
}


/* =========================
   EVENTOS
========================= */

.events-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 8px;

    padding: 10px;
}

.event-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid rgba(190,132,63,.25);

    background: #080403;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.event-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(223,157,72,.58);

    box-shadow:
        0 12px 25px rgba(0,0,0,.45);
}

.event-image {
    position: relative;

    height: 162px;

    background-size: cover;

    background-position: center;

    transition:
        transform .35s ease;
}

.event-card:hover .event-image {
    transform:
        scale(1.055);
}

.event-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 35%,
            rgba(5,2,1,.33) 62%,
            rgba(5,2,1,.96)
        );
}

.event-body {
    position: relative;

    z-index: 2;

    min-height: 62px;

    margin-top: -34px;

    padding:
        10px
        8px
        12px;

    text-align: center;
}

.event-body strong {
    display: block;

    color: #e6c895;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-weight: normal;

    text-transform: uppercase;
}

.event-body span {
    display: block;

    margin-top: 5px;

    color: #966f49;

    font-size: 9px;
}


/* =========================
   NOTICIAS
========================= */

.news-list {
    padding:
        8px
        13px
        13px;
}

.news-item {
    display: grid;

    grid-template-columns:
        76px
        minmax(0,1fr);

    gap: 11px;

    padding:
        9px
        0;

    border-bottom:
        1px solid rgba(255,255,255,.045);
}

.news-item:last-child {
    border-bottom: 0;
}

.news-image {
    width: 76px;
    height: 62px;

    background-size: cover;

    background-position: center;

    border:
        1px solid rgba(186,127,60,.22);
}

.news-content {
    min-width: 0;
}

.news-content strong {
    display: block;

    color: #dbc6a6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    font-weight: normal;

    line-height: 1.35;

    text-transform: uppercase;
}

.news-content p {
    margin:
        5px
        0
        0;

    color: #897967;

    font-size: 9px;

    line-height: 1.45;
}

.news-content time {
    display: block;

    margin-top: 4px;

    color: #66584a;

    font-size: 8px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1100px) {

    .home-panels-container {
        grid-template-columns:
            1fr
            1.45fr;
    }

    .news-panel {
        grid-column:
            1 / -1;
    }

    .news-list {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap: 15px;
    }

    .news-item {
        border-bottom: 0;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .home-panels {
        padding-bottom: 28px;
    }

    .home-panels-container {
        width:
            calc(100% - 24px);

        grid-template-columns:
            1fr;
    }

    .news-panel {
        grid-column: auto;
    }

    .events-grid {
        grid-template-columns:
            1fr;
    }

    .event-image {
        height: 205px;
    }

    .news-list {
        display: block;
    }

    .ranking-row {
        grid-template-columns:
            28px
            minmax(100px,1fr)
            44px;
    }

    .ranking-row > span:nth-child(3) {
        display: none;
    }
}


/* ===== BOTON CREAR CUENTA CON IMAGEN V1 ===== */

.quick-register {
    position: relative;
    overflow: hidden;

    min-height: 105px;

    background:
        linear-gradient(
            100deg,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.22) 42%,
            rgba(0,0,0,.88) 70%,
            rgba(0,0,0,.97) 100%
        ),
        url("../images/crear-cuenta.png")
        30% center / cover no-repeat !important;

    border:
        1px solid rgba(207,153,77,.45) !important;
}

.quick-register .quick-symbol {
    display: none;
}

.quick-register .quick-text {
    margin-left: auto;

    width: 58%;

    text-align: center;
}

.quick-register .quick-text strong {
    color: #f0d5a5;

    font-size: 17px;

    text-shadow:
        0 2px 5px #000;
}

.quick-register .quick-text small {
    color: #c9aa7d;

    font-size: 9px;
}

.quick-register:hover {
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.15) 42%,
            rgba(0,0,0,.78) 70%,
            rgba(0,0,0,.94) 100%
        ),
        url("../images/crear-cuenta.png")
        30% center / cover no-repeat !important;

    box-shadow:
        0 0 20px rgba(206,86,25,.24),
        inset 0 0 18px rgba(222,151,65,.08);
}


/* =========================================================
   BOTONES GRÁFICOS DEFINITIVOS
   Todos usan la misma proporción: 1983 x 793
   ========================================================= */

.quick-section {
    position: relative;
    z-index: 30;

    padding: 10px 0 18px;

    background:
        linear-gradient(
            180deg,
            #040202,
            #070403
        );
}

.quick-container.quick-image-grid {
    width: min(1460px, calc(100% - 42px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 7px;

    border: 0;
    background: transparent;
    box-shadow: none;
}

.quick-image-button {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1983 / 793;

    overflow: hidden;

    background: #050303;

    border: 1px solid rgba(190, 132, 63, .42);

    box-shadow:
        0 8px 18px rgba(0,0,0,.45);

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease;
}

.quick-image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    margin: 0;
    padding: 0;

    border: 0;
}

.quick-image-button::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.12);

    transition:
        box-shadow .20s ease;
}

.quick-image-button:hover {
    z-index: 5;

    transform: translateY(-4px);

    border-color: rgba(232, 166, 76, .82);

    box-shadow:
        0 12px 28px rgba(0,0,0,.60),
        0 0 14px rgba(211,74,20,.16);
}

.quick-image-button:hover::after {
    box-shadow:
        inset 0 0 20px rgba(255,125,30,.06);
}


/* TABLET */

@media (max-width: 1100px) {

    .quick-container.quick-image-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .quick-image-button:last-child {
        grid-column: 1 / -1;
    }
}


/* MÓVIL */

@media (max-width: 650px) {

    .quick-container.quick-image-grid {
        width: calc(100% - 24px);

        grid-template-columns: 1fr;

        gap: 8px;
    }

    .quick-image-button:last-child {
        grid-column: auto;
    }
}


/* =========================================================
   RANKING FINAL PW INFIERNO
   Fondo visible + Jugador / Clase / Nivel / PK
   ========================================================= */

.ranking-panel {
    position: relative !important;
    overflow: hidden !important;

    min-height: 382px;

    background:
        linear-gradient(
            47deg,
            rgba(4, 4, 8, .68) 0%,
            rgba(5, 5, 10, .58) 47%,
            rgba(5, 5, 10, .34) 72%,
            rgba(5, 5, 10, .18) 100%
        ),
        url("../images/ranking-bg.jpg")
        60% center / cover no-repeat !important;

    border:
        1px solid rgba(206, 151, 76, .43) !important;

    box-shadow:
        0 15px 34px rgba(0,0,0,.48),
        inset 0 0 26px rgba(27,31,66,.08) !important;
}


/* CABECERA */

.ranking-panel .pw-panel-header {
    position: relative;
    z-index: 5;

    min-height: 48px;

    background:
        rgba(10, 7, 9, .58) !important;

    backdrop-filter: blur(2px);

    border-bottom:
        1px solid rgba(213,158,82,.24) !important;
}

.ranking-panel .pw-panel-header h2 {
    color: #f0d19b !important;

    font-size: 16px;

    text-shadow:
        0 2px 7px rgba(0,0,0,.95);
}


/* TEXTO SUPERIOR */

.ranking-intro {
    position: relative;
    z-index: 5;

    padding:
        13px
        15px
        10px;

    background:
        linear-gradient(
            90deg,
            rgba(7,7,12,.56),
            rgba(7,7,12,.20),
            transparent
        );
}

.ranking-intro span {
    display: block;

    color: #e06d2d;

    font-size: 8px;

    font-weight: bold;

    letter-spacing: 1.5px;
}

.ranking-intro strong {
    display: block;

    margin-top: 4px;

    color: #f0d4a2;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: normal;

    text-shadow:
        0 2px 8px rgba(0,0,0,.95);
}


/* TABLA MÁS TRANSPARENTE */

.ranking-panel .ranking-table {
    position: relative;
    z-index: 5;

    width: calc(100% - 20px);

    margin:
        0
        10px
        12px;

    padding:
        4px
        7px
        8px;

    background:
        linear-gradient(
            90deg,
            rgba(4,6,12,.62),
            rgba(4,6,12,.43) 72%,
            rgba(4,6,12,.28)
        ) !important;

    border:
        1px solid rgba(195,144,72,.15);

    backdrop-filter: blur(1px);
}


/* 5 COLUMNAS */

.ranking-panel .ranking-row {
    display: grid !important;

    grid-template-columns:
        30px
        minmax(105px, 1.45fr)
        minmax(52px, .72fr)
        44px
        40px !important;

    gap: 6px;

    align-items: center;

    min-height: 30px !important;

    padding:
        0
        4px;

    color: #c3ad8e;

    border-bottom:
        1px solid rgba(224,179,110,.075) !important;

    background: transparent !important;
}


/* ENCABEZADO DE TABLA */

.ranking-panel .ranking-head {
    min-height: 28px !important;

    color: #ff9d00;

    font-size: 8px;

    text-transform: uppercase;
}

.ranking-panel .ranking-head span:nth-child(4),
.ranking-panel .ranking-head span:nth-child(5) {
    text-align: center;
}


/* JUGADOR */

.ranking-panel .ranking-row strong {
    color: #ead8b8 !important;

    font-weight: normal;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* CLASE */

.ranking-panel .ranking-row > span:nth-child(3) {
    color: #b8aa99;
}


/* NIVEL */

.ranking-panel .ranking-row b {
    color: #e1bb79 !important;

    text-align: center;

    font-weight: normal;
}


/* PK */

.ranking-panel .ranking-row em {
    color: #df7549;

    text-align: center;

    font-style: normal;

    font-weight: normal;
}


/* HOVER */

.ranking-panel
.ranking-row:not(.ranking-head):hover {

    background:
        linear-gradient(
            90deg,
            rgba(100,50,105,.20),
            rgba(25,45,91,.08),
            transparent
        ) !important;

    transform: translateX(2px);
}


/* POSICIONES */

.ranking-panel .rank-pos {
    display: grid;

    place-items: center;

    width: 22px;
    height: 22px;

    margin: auto;

    color: #dfc493;

    border-radius: 50%;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;
}

.ranking-panel .rank-pos.gold {
    color: #ffd75f;

    border:
        1px solid rgba(255,200,54,.48);

    background:
        rgba(102,69,5,.34);

    box-shadow:
        0 0 11px rgba(255,184,28,.22);
}

.ranking-panel .rank-pos.silver {
    color: #e6e9ed;

    border:
        1px solid rgba(210,220,230,.35);

    background:
        rgba(85,92,101,.25);

    box-shadow:
        0 0 9px rgba(210,220,235,.12);
}

.ranking-panel .rank-pos.bronze {
    color: #ee9d61;

    border:
        1px solid rgba(199,108,54,.40);

    background:
        rgba(101,45,16,.29);

    box-shadow:
        0 0 9px rgba(209,90,27,.12);
}


/* MOBILE */

@media (max-width: 700px) {

    .ranking-panel {
        background:
            linear-gradient(
                rgba(5,5,10,.60),
                rgba(5,5,10,.68)
            ),
            url("../images/ranking-bg.jpg")
            60% center / cover no-repeat !important;
    }

    .ranking-panel .ranking-row {
        grid-template-columns:
            28px
            minmax(95px,1fr)
            54px
            40px !important;
    }

    .ranking-panel
    .ranking-row > span:nth-child(3) {
        display: none;
    }
}


/*
 * HOME_RANKING_CLASS_ICONS_V2
 */

.ranking-class-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
}

.ranking-class-icon {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}

.ranking-class-fallback {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    opacity: .65;
}



/* ==================================================
   INDEX_HERO_INTRO_LAYOUT_V1

   Logo + presentación desplazados al área central
   izquierda del hero.

   No modifica personaje, fondo ni server-box.
   ================================================== */

.hero .hero-content {
    position: relative;

    display: flex;
    align-items: center;

    width: min(100% - 48px, 1580px);
    max-width: 1580px;

    min-height: 100%;

    margin: 0 auto;
    padding:
        28px
        0
        42px;

    box-sizing: border-box;
}


/*
 * Posición marcada en celeste.
 *
 * El bloque empieza más adentro que antes para dejar
 * aire en el extremo izquierdo.
 */

.hero .hero-left {
    position: relative;

    width: 610px;
    max-width: 610px;

    margin-left: 190px;
    margin-right: auto;

    padding: 0;

    z-index: 8;

    transform: none;
}


/*
 * Logo.
 */

.hero .hero-left .hero-logo {
    display: block;

    width: 330px;
    max-width: 72%;

    height: auto;

    margin:
        0
        auto
        18px;

    transform: none;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(0, 0, 0, .65)
        );
}


/*
 * Lema.
 */

.hero .hero-left .tagline {
    position: relative;

    margin:
        0
        0
        13px;

    padding-bottom: 12px;

    color: #f5d48c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        25px,
        2vw,
        34px
    );

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: .075em;

    text-transform: uppercase;

    text-shadow:
        0 3px 12px
        rgba(0, 0, 0, .85);
}


/*
 * Línea decorativa debajo del lema.
 */

.hero .hero-left .tagline::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 165px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #f4b942,
            rgba(244, 185, 66, 0)
        );
}


/*
 * Descripción principal.
 */

.hero .hero-left .hero-description-main {
    width: 100%;
    max-width: 590px;

    margin:
        0
        0
        20px;

    color: #eee5dc;

    font-size: 17px;
    line-height: 1.65;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, .88);
}


/*
 * Valores / lema secundario.
 */

.hero-values {
    position: relative;

    display: grid;
    gap: 0;

    width: 100%;
    max-width: 590px;

    margin-top: 8px;

    padding:
        12px
        0;

    border-top:
        1px solid
        rgba(244, 185, 66, .32);

    border-bottom:
        1px solid
        rgba(244, 185, 66, .23);
}


.hero-value {
    display: grid;

    grid-template-columns:
        30px
        1fr;

    align-items: start;
    gap: 10px;

    padding:
        8px
        0;
}


.hero-value-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    color: #f4b942;

    font-size: 11px;

    text-shadow:
        0 0 12px
        rgba(244, 185, 66, .42);
}


.hero-value p {
    margin: 0;

    color: #e7ddd3;

    font-size: 15px;
    line-height: 1.48;

    text-shadow:
        0 2px 7px
        rgba(0, 0, 0, .88);
}


.hero-value strong {
    color: #ffe5aa;
    font-weight: 700;
}


/*
 * Los 3 botones anteriores desaparecieron del HTML.
 * Neutralizamos cualquier espacio residual.
 */

.hero .actions,
.hero .server-version {
    display: none !important;
}


/*
 * Conservamos server-box en su lugar.
 */

.hero .server-box {
    position: relative;
    z-index: 9;

    margin-left: auto;
}


/*
 * ==================================================
 * NOTEBOOK / PANTALLAS MEDIAS
 * ==================================================
 */

@media (max-width: 1500px) {

    .hero .hero-content {
        width: min(100% - 36px, 1360px);
    }

    .hero .hero-left {
        width: 570px;
        max-width: 570px;

        margin-left: 120px;
    }

    .hero .hero-left .hero-logo {
        width: 300px;
    }

}


/*
 * ==================================================
 * TABLET
 * ==================================================
 */

@media (max-width: 1100px) {

    .hero .hero-content {
        align-items: flex-start;

        padding-top: 54px;
    }

    .hero .hero-left {
        width: min(560px, 58vw);
        max-width: none;

        margin-left: 32px;
    }

    .hero .hero-left .hero-logo {
        width: 270px;
    }

    .hero .hero-left .tagline {
        font-size: 25px;
    }

    .hero .hero-left .hero-description-main {
        font-size: 15px;
    }

    .hero-value p {
        font-size: 14px;
    }

}


/*
 * ==================================================
 * MOBILE
 * ==================================================
 */

@media (max-width: 760px) {

    .hero .hero-content {
        display: block;

        width: 100%;

        padding:
            40px
            20px
            320px;
    }

    .hero .hero-left {
        width: 100%;
        max-width: 540px;

        margin:
            0
            auto;

        text-align: center;
    }

    .hero .hero-left .hero-logo {
        width: min(290px, 78vw);
        max-width: none;

        margin:
            0
            auto
            16px;
    }

    .hero .hero-left .tagline {
        font-size: 23px;

        letter-spacing: .045em;
    }

    .hero .hero-left .tagline::after {
        left: 50%;

        transform:
            translateX(-50%);
    }

    .hero .hero-left .hero-description-main {
        margin-left: auto;
        margin-right: auto;

        font-size: 15px;
    }

    .hero-values {
        text-align: left;
    }

    .hero-value {
        grid-template-columns:
            24px
            1fr;
    }

}


/* FIN INDEX_HERO_INTRO_LAYOUT_V1 */

/* ==================================================
   INDEX_HERO_POSITION_V1_1
   Subir logo + presentación hacia la zona marcada.
   ================================================== */

@media (min-width: 1101px) {

    .hero .hero-content {
        position: relative !important;
        align-items: stretch !important;
    }

    .hero .hero-left {
        position: absolute !important;

        top: 95px !important;
        left: clamp(235px, 16.5vw, 315px) !important;

        width: 560px !important;
        max-width: 560px !important;

        margin: 0 !important;

        z-index: 12 !important;
    }

    .hero .hero-left .hero-logo {
        width: 310px !important;
        max-width: 310px !important;

        margin:
            0
            auto
            16px !important;
    }

    .hero .hero-left .tagline {
        margin-top: 0 !important;
    }

}


@media (min-width: 761px) and (max-width: 1100px) {

    .hero .hero-left {
        position: absolute !important;

        top: 75px !important;
        left: 45px !important;

        width: min(520px, 55vw) !important;
        max-width: 560px !important;

        margin: 0 !important;
    }

    .hero .hero-left .hero-logo {
        max-width: 310px !important;
    }

}


/* FIN INDEX_HERO_POSITION_V1_1 */


/* ==================================================
   INDEX_HERO_SHOWCASE_V2
   Presentación principal estilo PW Infierno
   ================================================== */


/*
 * Posición general.
 */

@media (min-width: 1101px) {

    .hero .hero-content {
        position: relative !important;
        align-items: stretch !important;
    }

    .hero .hero-left.hero-showcase {
        position: absolute !important;

        top: 72px !important;
        left: clamp(205px, 15vw, 285px) !important;

        width: 650px !important;
        max-width: 650px !important;

        margin: 0 !important;
        padding: 26px 32px 24px !important;

        box-sizing: border-box;

        z-index: 12 !important;
    }

}


/*
 * Fondo oscuro muy suave.
 *
 * No es un cuadro sólido:
 * deja ver el paisaje de fondo.
 */

.hero-showcase {
    background:
        radial-gradient(
            ellipse at 50% 40%,
            rgba(29, 10, 5, .30) 0%,
            rgba(9, 3, 2, .20) 55%,
            rgba(0, 0, 0, 0) 78%
        );

    border-radius: 20px;

    text-shadow:
        0 3px 9px
        rgba(0, 0, 0, .94);
}


/*
 * Logo principal.
 */

.hero .hero-showcase .hero-logo {
    display: block !important;

    width: 360px !important;
    max-width: 78% !important;

    height: auto !important;

    margin:
        0
        auto
        18px !important;

    transform: none !important;

    filter:
        drop-shadow(
            0 10px 16px
            rgba(0, 0, 0, .72)
        )
        drop-shadow(
            0 0 10px
            rgba(255, 82, 10, .20)
        );
}


/*
 * Título.
 */

.hero-showcase-title {
    margin:
        0
        auto
        20px;

    color: #f2cf86;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: .065em;

    text-align: center;
    text-transform: uppercase;

    text-shadow:
        0 3px 8px
        #000,
        0 0 14px
        rgba(183, 93, 20, .16);
}


/*
 * Descripción.
 */

.hero-showcase-description {
    max-width: 590px;

    margin:
        0
        auto
        21px;

    color: #f2ece6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    line-height: 1.65;

    text-align: left;

    text-shadow:
        0 3px 8px
        rgba(0, 0, 0, .96);
}


/*
 * Separadores ornamentales.
 */

.hero-ornament {
    display: grid;

    grid-template-columns:
        1fr
        48px
        1fr;

    align-items: center;

    width: 100%;

    margin:
        5px
        0
        16px;
}


.hero-ornament span {
    position: relative;

    display: block;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(213, 166, 75, 0),
            rgba(213, 166, 75, .88)
        );
}


.hero-ornament span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(213, 166, 75, .88),
            rgba(213, 166, 75, 0)
        );
}


.hero-ornament span:first-child::after {
    content: "";

    position: absolute;

    right: -2px;
    top: -2px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d8a94e;
}


.hero-ornament span:last-child::before {
    content: "";

    position: absolute;

    left: -2px;
    top: -2px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d8a94e;
}


.hero-ornament b {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin: auto;

    border:
        2px solid
        rgba(218, 166, 73, .82);

    border-radius: 50%;

    color: #e6b657;

    font-size: 16px;
    line-height: 1;

    box-shadow:
        0 0 13px
        rgba(202, 118, 21, .20);

    text-shadow:
        0 0 8px
        rgba(228, 160, 48, .34);
}


/*
 * Tres principios.
 */

.hero-principles {
    display: grid;

    gap: 4px;

    width: 100%;
}


.hero-principle {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;

    min-height: 54px;

    padding:
        4px
        0;
}


.hero-principle-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    color: #e2b865;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    line-height: 1;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0, 0, 0, .92)
        );

    text-shadow:
        0 0 8px
        rgba(203, 124, 30, .24);
}


.hero-principle-swords {
    font-size: 35px;
}


.hero-principle p {
    margin: 0;

    color: #f0e9e1;

    font-size: 16px;

    line-height: 1.52;

    text-shadow:
        0 3px 7px
        rgba(0, 0, 0, .96);
}


/*
 * Separador inferior.
 */

.hero-ornament-bottom {
    grid-template-columns:
        1fr
        36px
        1fr;

    margin:
        13px
        0
        0;
}


.hero-ornament-bottom b {
    width: auto;
    height: auto;

    border: 0;

    color: #d5a84f;

    font-size: 15px;
}


/*
 * No quedan botones antiguos dentro del hero.
 */

.hero .actions,
.hero .server-version {
    display: none !important;
}


/*
 * Cuadro del servidor siempre conserva prioridad.
 */

.hero .server-box {
    z-index: 15 !important;
}


/* ==================================================
   NOTEBOOK
   ================================================== */

@media (min-width: 1101px) and (max-width: 1450px) {

    .hero .hero-left.hero-showcase {
        top: 62px !important;
        left: 120px !important;

        width: 590px !important;
        max-width: 590px !important;

        padding:
            20px
            28px !important;
    }

    .hero .hero-showcase .hero-logo {
        width: 320px !important;
    }

    .hero-showcase-title {
        font-size: 27px;
    }

    .hero-showcase-description {
        font-size: 16px;
    }

    .hero-principle p {
        font-size: 15px;
    }

}


/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 761px) and (max-width: 1100px) {

    .hero .hero-left.hero-showcase {
        position: absolute !important;

        top: 55px !important;
        left: 34px !important;

        width: min(580px, 59vw) !important;

        margin: 0 !important;

        padding:
            18px
            20px !important;
    }

    .hero .hero-showcase .hero-logo {
        width: 270px !important;
    }

    .hero-showcase-title {
        font-size: 24px;
    }

    .hero-showcase-description {
        font-size: 15px;
    }

    .hero-principle {
        grid-template-columns:
            42px
            minmax(0, 1fr);
    }

    .hero-principle-icon {
        width: 38px;
        font-size: 25px;
    }

    .hero-principle p {
        font-size: 14px;
    }

}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 760px) {

    .hero .hero-content {
        display: block !important;

        width: 100% !important;

        padding:
            34px
            16px
            320px !important;
    }


    .hero .hero-left.hero-showcase {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 560px !important;

        margin:
            0
            auto !important;

        padding:
            18px
            12px !important;
    }


    .hero .hero-showcase .hero-logo {
        width: min(315px, 78vw) !important;
        max-width: none !important;
    }


    .hero-showcase-title {
        font-size: 23px;

        letter-spacing: .04em;
    }


    .hero-showcase-description {
        font-size: 15px;
        text-align: center;
    }


    .hero-principle {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        text-align: left;
    }


    .hero-principle p {
        font-size: 14px;
    }

}


/* FIN INDEX_HERO_SHOWCASE_V2 */

/* =========================================================
   INDEX_SERVER_STATUS_PANEL_V1
   ========================================================= */


/*
 * Panel compacto.
 */

@media (min-width: 1101px) {

    .hero .server-box.server-status-panel {
        position: absolute !important;

        top: 86px !important;
        right: 34px !important;

        left: auto !important;
        bottom: auto !important;

        display: block !important;

        width: 288px !important;
        max-width: 288px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        padding:
            17px
            20px
            19px !important;

        box-sizing: border-box !important;

        align-self: flex-start !important;

        text-align: center;

        z-index: 20 !important;

        background:
            linear-gradient(
                180deg,
                rgba(18, 8, 5, .95),
                rgba(5, 3, 2, .97)
            );

        border:
            1px solid
            rgba(215, 161, 77, .48);

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.68),

            inset 0 0 28px
            rgba(146,36,11,.055);

        backdrop-filter:
            blur(6px);
    }

}


/*
 * Mini logo.
 */

.server-mini-logo {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 92px;

    margin:
        -3px
        auto
        1px;
}


.server-mini-logo img {
    display: block;

    width: auto;
    height: 88px;

    max-width: 185px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 6px 11px
            rgba(0,0,0,.62)
        );
}


/*
 * Título.
 */

.server-status-heading {
    margin:
        1px
        0
        13px;

    color: #e0b365;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    line-height: 1.2;

    letter-spacing: .07em;

    text-transform: uppercase;

    text-shadow:
        0 2px 7px
        rgba(0,0,0,.9);
}


/*
 * Datos principales.
 */

.server-status-data {
    display: grid;

    gap: 7px;

    margin: 0;
    padding:
        12px
        0
        0;

    border-top:
        1px solid
        rgba(215,161,77,.15);
}


.server-status-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 22px;

    font-size: 11px;
}


.server-status-row > span {
    color: #938171;

    text-align: left;
}


.server-status-row > b {
    color: #e0cfb5;

    font-weight: 600;

    text-align: right;
}


/*
 * Estado ONLINE/OFFLINE.
 */

.server-online,
.server-offline {
    display: inline-flex;

    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    font-size: 11px;

    letter-spacing: .06em;
}


.server-online {
    color: #79e56d !important;
}


.server-offline {
    color: #ef6464 !important;
}


.server-status-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    flex:
        0
        0
        7px;

    border-radius: 50%;

    background:
        currentColor;

    box-shadow:
        0 0 8px
        currentColor,
        0 0 14px
        currentColor;
}


.server-player-count {
    color: #f2c870 !important;

    font-size: 14px;

    font-variant-numeric:
        tabular-nums;
}


/*
 * Separador.
 */

.server-status-divider {
    display: grid;

    grid-template-columns:
        1fr
        20px
        1fr;

    align-items: center;

    gap: 6px;

    width: 100%;

    margin:
        13px
        0
        10px;
}


.server-status-divider span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215,161,77,.55)
        );
}


.server-status-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(215,161,77,.55),
            transparent
        );
}


.server-status-divider i {
    color: #d4a353;

    font-size: 8px;

    font-style: normal;

    text-align: center;
}


/*
 * Rates.
 */

.server-rates {
    display: grid;

    gap: 6px;

    width: 100%;
}


.server-rates > div {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 21px;

    font-size: 11px;
}


.server-rates span {
    color: #938171;
}


.server-rates b {
    color: #e7b85f;

    font-size: 12px;

    font-weight: 700;
}


/*
 * Esquinas existentes.
 */

.hero .server-box.server-status-panel::before,
.hero .server-box.server-status-panel::after {
    pointer-events: none;
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (min-width: 761px) and (max-width: 1100px) {

    .hero .server-box.server-status-panel {
        position: absolute !important;

        top: 70px !important;
        right: 18px !important;

        left: auto !important;
        bottom: auto !important;

        width: 255px !important;
        max-width: 255px !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding:
            15px
            17px
            17px !important;

        align-self:
            flex-start !important;
    }


    .server-mini-logo {
        height: 78px;
    }


    .server-mini-logo img {
        height: 74px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .hero .server-box.server-status-panel {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width:
            min(
                calc(100% - 24px),
                320px
            ) !important;

        max-width: 320px !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            28px
            auto
            0 !important;

        padding:
            16px
            18px
            18px !important;

        align-self:
            auto !important;
    }


    .server-mini-logo {
        height: 78px;
    }


    .server-mini-logo img {
        height: 74px;
    }

}


/* FIN INDEX_SERVER_STATUS_PANEL_V1 */

/* ==========================================================
   INDEX_SERVER_PANEL_POSITION_V2_2
   MOVER PANEL A ZONA INFERIOR DERECHA
   ========================================================== */

@media (min-width: 1101px) {

    .hero .server-box.server-status-panel {
        position: absolute !important;

        top: 330px !important;
        right: 34px !important;

        bottom: auto !important;
        left: auto !important;

        margin: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        align-self: flex-start !important;

        z-index: 20 !important;
    }

}

/* FIN INDEX_SERVER_PANEL_POSITION_V2_2 */


/* ==========================================================
   INDEX_SERVER_PANEL_POSITION_V2_4
   Ajuste inferior derecho
   ========================================================== */

@media (min-width: 1101px) {

    .hero .server-box.server-status-panel {
        top: 455px !important;
        right: 8px !important;

        width: 250px !important;
        max-width: 250px !important;

        bottom: auto !important;
        left: auto !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        z-index: 20 !important;
    }

}

/* FIN INDEX_SERVER_PANEL_POSITION_V2_4 */


/* ==========================================================
   INDEX_SERVER_PANEL_RIGHT_V2_7
   Mover panel más a la derecha.
   ========================================================== */

@media (min-width: 1101px) {

    .hero .server-box.server-status-panel {
        position: absolute !important;

        top: 455px !important;
        right: -125px !important;

        left: auto !important;
        bottom: auto !important;

        width: 250px !important;
        max-width: 250px !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        z-index: 30 !important;
    }

}

/* FIN INDEX_SERVER_PANEL_RIGHT_V2_7 */


/* ==========================================================
   INDEX_EMBERS_SIZE_V1
   Particulas de fuego del hero 50% mas grandes.

   No modifica:
   - cantidad
   - posicion
   - velocidad
   - animacion
   - color
   ========================================================== */

.hero .embers span {
    scale: 1.5;
    transform-origin: center center;
}

/* FIN INDEX_EMBERS_SIZE_V1 */