:root {
    --bg: #060303;
    --panel: rgba(12, 8, 7, .93);
    --gold: #d79a45;
    --gold-light: #f1d29b;
    --orange: #ff8a18;
    --text: #eadfce;
    --muted: #9d8870;
    --line: rgba(207, 151, 76, .18);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

body {
    min-height: 100vh;

    color: var(--text);

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

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(124, 35, 11, .16),
            transparent 36%
        ),
        linear-gradient(
            160deg,
            #090403,
            #020202
        );
}

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

.ranking-topbar {
    min-height: 68px;

    padding: 0 32px;

    display: flex;
    align-items: center;
    gap: 40px;

    background:
        rgba(4, 3, 3, .96);

    border-bottom:
        1px solid rgba(209, 117, 45, .25);
}

.ranking-logo {
    color: var(--gold-light);

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

    font-size: 19px;
    font-weight: bold;
}

.ranking-topbar nav {
    margin-left: auto;

    display: flex;
    gap: 24px;
}

.ranking-topbar nav a {
    color: #b9a58c;

    font-size: 11px;
    text-transform: uppercase;
}

.ranking-topbar nav a:hover,
.ranking-topbar nav a.active {
    color: var(--orange);
}

.ranking-page {
    width: min(
        1500px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    padding:
        55px
        0
        70px;
}

.ranking-hero {
    position: relative;

    padding:
        38px
        40px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4,3,5,.87),
            rgba(4,3,5,.52),
            rgba(4,3,5,.20)
        ),
        url("/preview/images/ranking-bg.jpg")
        60% center / cover no-repeat;

    border:
        1px solid rgba(211,151,72,.34);
}

.eyebrow {
    color: var(--orange);

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 2px;
}

.ranking-hero h1 {
    margin:
        8px
        0
        0;

    color: var(--gold-light);

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

    font-size:
        clamp(32px, 5vw, 58px);

    font-weight: normal;
}

.ranking-hero p {
    margin:
        9px
        0
        0;

    color: #bca88e;
}

.ranking-summary {
    position: absolute;

    right: 35px;
    bottom: 28px;

    text-align: right;
}

.ranking-summary strong {
    display: block;

    color: var(--gold-light);

    font-size: 32px;
}

.ranking-summary span {
    color: var(--muted);

    font-size: 10px;

    text-transform: uppercase;
}

.ranking-warning {
    margin-top: 14px;

    padding: 13px 15px;

    color: #e9bb83;

    background:
        rgba(124, 48, 15, .18);

    border:
        1px solid rgba(221,120,44,.25);
}

.ranking-card {
    margin-top: 16px;

    background: var(--panel);

    border:
        1px solid rgba(206,151,76,.30);

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

.ranking-table-wrap {
    overflow-x: auto;
}

.ranking-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 1150px;
}

.ranking-table th {
    padding:
        14px
        12px;

    color: #ff941f;

    font-size: 10px;

    letter-spacing: .7px;

    text-align: left;

    text-transform: uppercase;

    background:
        rgba(89, 32, 10, .18);

    border-bottom:
        1px solid rgba(211,151,72,.24);
}

.ranking-table td {
    padding:
        10px
        12px;

    color: #baa88f;

    font-size: 12px;

    border-bottom:
        1px solid var(--line);
}

.ranking-table tbody tr {
    transition:
        background .15s ease;
}

.ranking-table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(134,45,13,.14),
            rgba(68,43,91,.05)
        );
}

.rank-number {
    width: 26px;
    height: 26px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #b79a75;

    font-family:
        Georgia,
        serif;
}

.rank-gold {
    color: #ffe16c;

    border:
        1px solid rgba(255,204,68,.45);

    box-shadow:
        0 0 12px rgba(255,166,22,.15);
}

.rank-silver {
    color: #e6e9ed;

    border:
        1px solid rgba(214,221,230,.30);
}

.rank-bronze {
    color: #eaa269;

    border:
        1px solid rgba(205,111,58,.34);
}

.player-name {
    color: #eee0c5;

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

    font-size: 14px;
}

.class-name {
    color: #cfb999;
}

.level {
    color: var(--gold-light);
}

.weapon {
    min-width: 230px;

    display: flex;
    align-items: center;

    gap: 9px;
}

.weapon img {
    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    object-fit: cover;

    background: #090605;

    border:
        1px solid rgba(213,159,79,.33);

    box-shadow:
        0 0 9px rgba(255,121,24,.08);
}

.weapon span {
    color: #d4c0a2;
}

.weapon-empty {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    border:
        1px solid rgba(213,159,79,.16);
}

.reputation {
    color: #dfa654;
}

.pk {
    display: inline-flex;

    min-width: 50px;

    justify-content: center;

    padding:
        5px
        8px;

    border-radius: 3px;

    font-size: 9px;

    text-transform: uppercase;
}

.pk.yes {
    color: #ff846a;

    background:
        rgba(170,31,15,.20);

    border:
        1px solid rgba(235,61,31,.28);
}

.pk.no {
    color: #9ddd91;

    background:
        rgba(42,114,34,.15);

    border:
        1px solid rgba(89,173,74,.20);
}

.pk.unknown {
    color: #b4a28e;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.07);
}

.empty {
    padding: 50px !important;

    text-align: center;
}

.ranking-note {
    padding:
        15px
        4px;

    color: #756653;

    font-size: 10px;
}

@media (max-width: 700px) {

    .ranking-topbar {
        padding:
            0
            14px;
    }

    .ranking-topbar nav {
        display: none;
    }

    .ranking-page {
        width:
            calc(100% - 24px);

        padding-top: 25px;
    }

    .ranking-hero {
        padding:
            27px
            20px
            75px;
    }

    .ranking-summary {
        left: 20px;
        right: auto;
        bottom: 18px;

        text-align: left;
    }
}


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

.ranking-toolbar {
    min-height: 68px;

    padding:
        12px
        15px;

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

    gap: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(44,18,8,.22),
            rgba(5,4,4,.12)
        );

    border-bottom:
        1px solid rgba(211,151,72,.18);
}

.ranking-search-box {
    width: min(430px, 100%);

    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        0
        13px;

    background:
        rgba(0,0,0,.42);

    border:
        1px solid rgba(210,151,73,.28);

    box-shadow:
        inset 0 0 14px rgba(0,0,0,.30);
}

.ranking-search-icon {
    flex: 0 0 auto;

    font-size: 15px;

    opacity: .75;
}

#ranking-search {
    width: 100%;

    padding: 10px 0;

    color: #f1dfc3;

    font: inherit;

    font-size: 13px;

    background: transparent;

    border: 0;
    outline: 0;
}

#ranking-search::placeholder {
    color: #786855;
}

.ranking-search-box:focus-within {
    border-color:
        rgba(255,142,28,.65);

    box-shadow:
        0 0 14px rgba(255,117,21,.08),
        inset 0 0 14px rgba(0,0,0,.30);
}

.ranking-search-result {
    color: #9b8469;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .7px;
}


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

@media (max-width: 850px) {

    .ranking-page {
        width:
            calc(100% - 20px);

        padding-top: 20px;
    }

    .ranking-hero {
        padding:
            28px
            20px
            82px;

        background-position:
            67% center;
    }

    .ranking-hero h1 {
        font-size:
            clamp(30px, 10vw, 46px);
    }

    .ranking-toolbar {
        align-items: stretch;

        flex-direction: column;

        gap: 9px;
    }

    .ranking-search-box {
        width: 100%;
    }

    .ranking-search-result {
        padding-left: 2px;
    }

    .ranking-table-wrap {
        overflow-x: visible;
    }

    .ranking-table {
        min-width: 0;
    }

    .ranking-table thead {
        display: none;
    }

    .ranking-table,
    .ranking-table tbody,
    .ranking-table tr,
    .ranking-table td {
        display: block;
        width: 100%;
    }

    .ranking-table tbody tr {
        position: relative;

        margin:
            0
            8px
            12px;

        width:
            calc(100% - 16px);

        padding:
            12px
            12px
            10px;

        background:
            linear-gradient(
                145deg,
                rgba(21,12,9,.92),
                rgba(5,4,4,.94)
            );

        border:
            1px solid rgba(207,151,76,.18);
    }

    .ranking-table td {
        min-height: 32px;

        padding:
            6px
            4px
            6px
            118px;

        position: relative;

        border-bottom:
            1px solid rgba(210,151,73,.08);
    }

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

    .ranking-table td::before {
        position: absolute;

        left: 4px;
        top: 50%;

        transform:
            translateY(-50%);

        width: 105px;

        color: #ff8c1a;

        font-size: 9px;

        font-weight: bold;

        text-transform: uppercase;
    }

    .ranking-table td:nth-child(1)::before {
        content: "Puesto";
    }

    .ranking-table td:nth-child(2)::before {
        content: "Jugador";
    }

    .ranking-table td:nth-child(3)::before {
        content: "Clase";
    }

    .ranking-table td:nth-child(4)::before {
        content: "Nivel";
    }

    .ranking-table td:nth-child(5)::before {
        content: "Arma";
    }

    .ranking-table td:nth-child(6)::before {
        content: "Reputación";
    }

    .ranking-table td:nth-child(7)::before {
        content: "Muertes";
    }

    .ranking-table td:nth-child(8)::before {
        content: "Kills";
    }

    .ranking-table td:nth-child(9)::before {
        content: "K/D";
    }

    .ranking-table td:nth-child(10)::before {
        content: "PK";
    }

    .ranking-table td:nth-child(11)::before {
        content: "Online";
    }

    .weapon {
        min-width: 0;
    }

    .weapon img {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .ranking-summary {
        left: 20px;
        right: auto;

        bottom: 18px;

        text-align: left;
    }
}


@media (max-width: 480px) {

    .ranking-page {
        width:
            calc(100% - 12px);
    }

    .ranking-hero {
        padding:
            23px
            15px
            78px;
    }

    .ranking-card {
        margin-top: 10px;
    }

    .ranking-toolbar {
        padding:
            10px;
    }

    .ranking-table tbody tr {
        margin:
            0
            5px
            10px;

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

    .ranking-table td {
        padding-left: 105px;
    }

    .ranking-table td::before {
        width: 92px;
    }

    .player-name {
        font-size: 15px;
    }
}


/* ===== PVP K/D ===== */

.pvp-kd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 5px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .02em;
    background: rgba(244, 185, 66, .10);
    border: 1px solid rgba(244, 185, 66, .22);
}
/* ===== CLAN RANKING FINAL ===== */

.clan-cell {
    white-space: nowrap;
}

.clan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    min-width: 68px;
    max-width: 150px;
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    background: rgba(244, 185, 66, .10);
    border: 1px solid rgba(244, 185, 66, .25);
}

.clan-none {
    opacity: .42;
    font-size: 12px;
}

@media (max-width: 760px) {

    .ranking-table td:nth-child(1)::before {
        content: "Puesto";
    }

    .ranking-table td:nth-child(2)::before {
        content: "Jugador";
    }

    .ranking-table td:nth-child(3)::before {
        content: "Clan";
    }

    .ranking-table td:nth-child(4)::before {
        content: "Clase";
    }

    .ranking-table td:nth-child(5)::before {
        content: "Nivel";
    }

    .ranking-table td:nth-child(6)::before {
        content: "Arma";
    }

    .ranking-table td:nth-child(7)::before {
        content: "Reputación";
    }

    .ranking-table td:nth-child(8)::before {
        content: "Muertes";
    }

    .ranking-table td:nth-child(9)::before {
        content: "Kills";
    }

    .ranking-table td:nth-child(10)::before {
        content: "K/D";
    }

    .ranking-table td:nth-child(11)::before {
        content: "PK";
    }

    .ranking-table td:nth-child(12)::before {
        content: "Online";
    }
}


.clan-cell {
    text-align: center;
}

.clan-badge {
    display: block;
}

.clan-rank {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.1;
    opacity: 0.72;
    font-weight: 600;
    letter-spacing: 0.03em;
}


/* ONLINE_DOTS */

.online-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}

.online-dot.online {
    background: #35d06f;
    box-shadow:
        0 0 0 3px rgba(53, 208, 111, .12),
        0 0 8px rgba(53, 208, 111, .55);
}

.online-dot.offline {
    background: #ef5b5b;
    box-shadow:
        0 0 0 3px rgba(239, 91, 91, .10);
}

.online-dot.unknown {
    background: #888;
    box-shadow:
        0 0 0 3px rgba(136, 136, 136, .10);
}

/* CLASS_ICONS */

.class-cell {
    text-align: center;
    vertical-align: middle;
}

.class-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    vertical-align: middle;
    transition:
        transform .16s ease,
        filter .16s ease;
}

.class-icon:hover {
    transform: scale(1.12);
    filter: brightness(1.12);
}

.class-unknown {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    opacity: .55;
}

/* CLASS_ICONS_FIX */

.class-cell {
    text-align: center;
    vertical-align: middle;
}

.class-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    vertical-align: middle;
    transition: transform .16s ease, filter .16s ease;
}

.class-icon:hover {
    transform: scale(1.12);
    filter: brightness(1.12);
}

.class-unknown {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    opacity: .55;
}

/* CLASS_TOOLTIP_FAST */

.class-cell {
    position: relative;
}

.class-icon {
    cursor: help;
}

.class-cell:has(.class-icon)::after {
    content: attr(data-unused);
}

.class-icon + .class-tooltip {
    display: none;
}

/* CLASS_TOOLTIP_FAST_FINAL */

.class-icon-wrap {
    position: relative;
    display: inline-block;
}

.class-icon-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(3px);

    padding: 6px 9px;
    border-radius: 6px;

    background: rgba(10, 10, 10, .96);
    color: #fff;

    font-size: 12px;
    line-height: 1;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .08s ease,
        transform .08s ease,
        visibility .08s ease;

    z-index: 50;
}

.class-icon-wrap:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* CLASS_TOOLTIP_JS */

.class-icon {
    cursor: help;
}

.class-tooltip-fast {
    position: fixed;
    z-index: 99999;

    padding: 6px 10px;
    border-radius: 6px;

    background: rgba(8, 8, 8, .96);
    border: 1px solid rgba(255, 255, 255, .14);

    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(3px);

    transition:
        opacity .06s ease,
        transform .06s ease;
}

.class-tooltip-fast.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* CLASS_CURSOR_FIX */
.class-icon {
    cursor: default;
}

/* PVP_EXTENDED_STATS */

.pvp-streak,
.pvp-best-streak {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}

.pvp-streak {
    background: rgba(255, 170, 55, .10);
}

.pvp-best-streak {
    background: rgba(255, 210, 75, .10);
}

.pvp-date {
    white-space: nowrap;
    font-size: 12px;
    opacity: .82;
}

.ranking-table th {
    white-space: nowrap;
}

/* =========================================================
   PW INFIERNO
   RANKING VISUAL BANNER V1
   2026-08-20

   Solo presentación.
   No modifica backend ni estructura de ranking.php.
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR PRINCIPAL
   --------------------------------------------------------- */

.ranking-page {
    width: min(1700px, calc(100% - 48px));
}


/* ---------------------------------------------------------
   HERO / BANNER
   --------------------------------------------------------- */

.ranking-hero {
    position: relative;

    min-height: 390px;

    padding:
        48px
        52px
        44px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4, 3, 5, .90) 0%,
            rgba(4, 3, 5, .70) 25%,
            rgba(4, 3, 5, .25) 55%,
            rgba(4, 3, 5, .10) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3, 2, 3, .88) 0%,
            rgba(3, 2, 3, .20) 45%,
            rgba(3, 2, 3, .08) 100%
        ),
        url("/images/ranking-banner.png")
        center 42% / cover no-repeat;

    border:
        1px solid rgba(211, 151, 72, .42);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .48),
        inset 0 0 80px rgba(0, 0, 0, .18);
}


/* Marco interno */

.ranking-hero::before {
    content: "";

    position: absolute;
    inset: 10px;

    pointer-events: none;

    border:
        1px solid rgba(244, 185, 66, .13);

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


/* Línea inferior de fuego */

.ranking-hero::after {
    content: "";

    position: absolute;

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

    height: 3px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(196, 67, 15, .55),
            rgba(255, 170, 46, .90),
            rgba(196, 67, 15, .55),
            transparent
        );

    box-shadow:
        0 0 18px rgba(255, 105, 18, .35);
}


/* ---------------------------------------------------------
   TEXTO DEL BANNER
   --------------------------------------------------------- */

.ranking-hero .eyebrow,
.ranking-hero h1,
.ranking-hero p {
    position: relative;
    z-index: 2;

    max-width: 760px;
}


.ranking-hero .eyebrow {
    display: inline-block;

    width: fit-content;

    padding:
        7px
        12px;

    color: #ffad42;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 2.4px;

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

    background:
        rgba(31, 11, 5, .68);

    border-left:
        3px solid #e56d1a;
}


.ranking-hero h1 {
    margin:
        12px
        0
        0;

    color: #ffe4a2;

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

    font-size:
        clamp(42px, 4.4vw, 70px);

    line-height: 1.02;

    font-weight: normal;

    text-shadow:
        0 3px 5px rgba(0, 0, 0, .95),
        0 0 24px rgba(181, 82, 20, .35);
}


.ranking-hero p {
    margin:
        13px
        0
        0;

    color: #e2cfb4;

    font-size: 17px;

    line-height: 1.55;

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


/* ---------------------------------------------------------
   CONTADOR DEL BANNER
   --------------------------------------------------------- */

.ranking-summary {
    z-index: 3;

    right: 42px;
    bottom: 38px;

    min-width: 150px;

    padding:
        12px
        16px;

    text-align: right;

    background:
        rgba(5, 3, 3, .62);

    border:
        1px solid rgba(222, 155, 69, .25);

    backdrop-filter:
        blur(3px);
}


.ranking-summary strong {
    color: #ffe19a;

    font-size: 38px;

    line-height: 1;
}


.ranking-summary span {
    margin-top: 5px;

    display: block;

    color: #c7ad88;

    font-size: 11px;

    letter-spacing: .8px;
}


/* ---------------------------------------------------------
   TARJETA DEL RANKING
   --------------------------------------------------------- */

.ranking-card {
    margin-top: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(19, 12, 9, .97),
            rgba(8, 6, 6, .98)
        );

    border:
        1px solid rgba(215, 157, 76, .34);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, .44);
}


/* ---------------------------------------------------------
   BUSCADOR
   --------------------------------------------------------- */

.ranking-toolbar {
    min-height: 76px;

    padding:
        15px
        18px;
}


.ranking-search-box {
    min-height: 46px;
}


#ranking-search {
    font-size: 15px;
}


.ranking-search-result {
    font-size: 13px;
}


/* ---------------------------------------------------------
   TABLA
   --------------------------------------------------------- */

.ranking-table {
    min-width: 1320px;
}


.ranking-table th {
    padding:
        17px
        14px;

    color: #ffa333;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .75px;
}


.ranking-table td {
    padding:
        13px
        14px;

    color: #cbb99e;

    font-size: 14px;

    line-height: 1.35;
}


/* Más aire entre filas */

.ranking-table tbody tr {
    height: 66px;
}


/* Nombre */

.player-name {
    color: #f4e5ca;

    font-size: 16px;

    font-weight: 600;
}


/* Nivel */

.level {
    font-size: 15px;
}


/* Arma */

.weapon span {
    font-size: 13px;
}


/* ---------------------------------------------------------
   POSICIONES
   --------------------------------------------------------- */

.rank-number {
    width: 32px;
    height: 32px;

    font-size: 14px;

    font-weight: bold;

    background:
        rgba(255, 255, 255, .025);
}


.rank-gold {
    color: #ffe56f;

    background:
        radial-gradient(
            circle,
            rgba(255, 195, 43, .20),
            rgba(100, 54, 7, .12)
        );

    border:
        1px solid rgba(255, 207, 70, .62);

    box-shadow:
        0 0 16px rgba(255, 166, 22, .22);
}


.rank-silver {
    color: #f0f3f6;

    background:
        rgba(210, 220, 232, .08);

    border:
        1px solid rgba(214, 221, 230, .42);
}


.rank-bronze {
    color: #f0a66e;

    background:
        rgba(196, 101, 48, .09);

    border:
        1px solid rgba(215, 122, 65, .46);
}


/* ---------------------------------------------------------
   CLAN
   --------------------------------------------------------- */

.clan-badge {
    padding:
        6px
        11px;

    font-size: 13px;
}


.clan-rank {
    margin-top: 5px;

    font-size: 12px;
}


/* ---------------------------------------------------------
   K/D
   --------------------------------------------------------- */

.pvp-kd {
    min-width: 58px;

    padding:
        6px
        10px;

    font-size: 13px;
}


/* ---------------------------------------------------------
   PK
   --------------------------------------------------------- */

.pk {
    min-width: 55px;

    padding:
        6px
        9px;

    font-size: 11px;

    font-weight: 700;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .ranking-page {
        width:
            calc(100% - 30px);
    }

    .ranking-hero {
        min-height: 340px;

        padding:
            38px
            32px
            38px;

        background-position:
            center center;
    }

    .ranking-hero h1 {
        font-size:
            clamp(38px, 6vw, 58px);
    }

}


@media (max-width: 850px) {

    .ranking-page {
        width:
            calc(100% - 20px);
    }

    .ranking-hero {
        min-height: 330px;

        padding:
            28px
            20px
            88px;

        background-position:
            center center;
    }

    .ranking-hero .eyebrow {
        font-size: 11px;
    }

    .ranking-hero h1 {
        font-size:
            clamp(34px, 9vw, 48px);
    }

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

    .ranking-summary {
        left: 20px;
        right: auto;
        bottom: 18px;

        min-width: 130px;

        text-align: left;
    }

    .ranking-summary strong {
        font-size: 30px;
    }

    /*
     * El CSS anterior convierte la tabla
     * en tarjetas en pantallas chicas.
     * Conservamos ese comportamiento.
     */

    .ranking-table {
        min-width: 0;
    }

    .ranking-table tbody tr {
        height: auto;
    }

    .ranking-table td {
        font-size: 14px;
    }

    .player-name {
        font-size: 17px;
    }

}


@media (max-width: 480px) {

    .ranking-page {
        width:
            calc(100% - 12px);
    }

    .ranking-hero {
        min-height: 300px;

        padding:
            23px
            15px
            82px;

        background-position:
            50% center;
    }

    .ranking-hero h1 {
        font-size:
            clamp(30px, 10vw, 42px);
    }

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

    .ranking-summary {
        left: 15px;
        bottom: 15px;
    }

}


/* ===== FIN RANKING VISUAL BANNER V1 ===== */



/* =========================================================
   RANKING_RULES_INFO_V1
   Reglas y funcionamiento del ranking
   ========================================================= */

.ranking-rules {
    position: relative;

    margin:
        0
        0
        22px;

    padding:
        22px
        24px;

    overflow: hidden;

    color: #d9c7ae;

    background:
        linear-gradient(
            135deg,
            rgba(25, 10, 7, .94),
            rgba(8, 6, 6, .96)
        );

    border:
        1px solid rgba(214, 153, 72, .32);

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


.ranking-rules::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(229, 76, 20, .12),
            transparent 36%
        );
}


.ranking-rules-head {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 16px;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(215, 155, 75, .16);
}


.ranking-rules-icon {
    width: 54px;
    height: 54px;

    flex:
        0 0 54px;

    display: grid;
    place-items: center;

    color: #ffd379;

    font-size: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(182, 57, 16, .42),
            rgba(74, 27, 8, .32)
        );

    border:
        1px solid rgba(242, 165, 68, .36);

    border-radius: 50%;

    box-shadow:
        0 0 22px rgba(232, 91, 22, .12);
}


.ranking-rules-head span {
    color: #ed8629;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}


.ranking-rules-head h2 {
    margin:
        3px
        0
        3px;

    color: #ffe1a0;

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

    font-size:
        25px;

    font-weight: normal;
}


.ranking-rules-head p {
    margin: 0;

    color: #a99782;

    font-size: 13px;
}


.ranking-rules-grid {
    position: relative;
    z-index: 1;

    display: grid;

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

    gap: 11px;

    margin-top: 17px;
}


.ranking-rule {
    min-height: 128px;

    padding:
        15px;

    display: flex;

    gap: 12px;

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid rgba(211, 152, 73, .13);

    transition:
        border-color .18s ease,
        background .18s ease;
}


.ranking-rule:hover {
    background:
        rgba(122, 43, 16, .08);

    border-color:
        rgba(225, 156, 68, .26);
}


.ranking-rule > i {
    flex:
        0 0 25px;

    margin-top: 2px;

    color: #e87928;

    font-size: 18px;

    text-align: center;
}


.ranking-rule strong {
    display: block;

    margin-bottom: 6px;

    color: #f1d3a0;

    font-size: 13px;
}


.ranking-rule p {
    margin: 0;

    color: #a99782;

    font-size: 12px;
    line-height: 1.55;
}


.ranking-rule-wide {
    grid-column:
        span 2;
}


.ranking-rule.warning {
    background:
        rgba(119, 22, 13, .11);

    border-color:
        rgba(215, 69, 38, .22);
}


.ranking-rule.warning > i {
    color: #ef6345;
}


.ranking-rule.warning strong {
    color: #ff9a78;
}


.ranking-rules-note {
    position: relative;
    z-index: 1;

    margin-top: 12px;

    padding:
        10px
        13px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #bba78c;

    font-size: 11px;
    line-height: 1.45;

    background:
        rgba(0, 0, 0, .22);

    border-left:
        3px solid rgba(225, 124, 37, .62);
}


.ranking-rules-note i {
    color: #e99037;
}


/*
 * Etiquetas móviles actuales.
 *
 * La tabla tiene 16 columnas, así que corregimos
 * también las denominaciones visibles en mobile.
 */

@media (max-width: 760px) {

    .ranking-rules {
        padding:
            17px
            15px;
    }

    .ranking-rules-grid {
        grid-template-columns:
            1fr;
    }

    .ranking-rule,
    .ranking-rule-wide {
        grid-column:
            span 1;

        min-height: 0;
    }

    .ranking-rules-head {
        align-items:
            flex-start;
    }

    .ranking-rules-head h2 {
        font-size:
            21px;
    }

    .ranking-table td:nth-child(8)::before {
        content:
            "Ha muerto" !important;
    }

    .ranking-table td:nth-child(9)::before {
        content:
            "Asesinatos" !important;
    }

    .ranking-table td:nth-child(10)::before {
        content:
            "K/D" !important;
    }

    .ranking-table td:nth-child(11)::before {
        content:
            "Racha" !important;
    }

    .ranking-table td:nth-child(12)::before {
        content:
            "Mejor racha" !important;
    }

    .ranking-table td:nth-child(13)::before {
        content:
            "Última víctima" !important;
    }

    .ranking-table td:nth-child(14)::before {
        content:
            "Lo asesinó" !important;
    }

    .ranking-table td:nth-child(15)::before {
        content:
            "PK" !important;
    }

    .ranking-table td:nth-child(16)::before {
        content:
            "Online" !important;
    }

}


/* ===== FIN RANKING_RULES_INFO_V1 ===== */



/* =========================================================
   RANKING_RULES_FINAL_BOTTOM_V2
   Reglas al final de la pagina
   ========================================================= */

.ranking-rules-final-v2 {
    position: relative;

    margin:
        46px
        0
        0;

    padding:
        32px;

    overflow: hidden;

    color: #d9c5a8;

    background:
        linear-gradient(
            145deg,
            rgba(27,10,7,.96),
            rgba(7,5,5,.97)
        );

    border:
        1px solid
        rgba(216,151,68,.31);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.38);
}

.ranking-rules-final-v2::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(205,60,17,.14),
            transparent 38%
        );
}

.ranking-rules-final-v2
.ranking-rules-head {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 20px;

    padding-bottom:
        23px;

    border-bottom:
        1px solid
        rgba(215,156,76,.18);
}

.ranking-rules-final-v2
.ranking-rules-icon {
    width: 68px;
    height: 68px;

    flex:
        0 0 68px;

    display: grid;
    place-items: center;

    color: #ffd27d;

    font-size: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(190,57,16,.40),
            rgba(75,23,7,.34)
        );

    border:
        1px solid
        rgba(242,165,68,.38);

    border-radius: 50%;
}

.ranking-rules-final-v2
.ranking-rules-heading > span {
    color: #ef862b;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 2.3px;
}

.ranking-rules-final-v2
.ranking-rules-heading h2 {
    margin:
        5px
        0
        6px;

    color: #ffe1a1;

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

    font-size: 32px;

    line-height: 1.15;

    font-weight: normal;
}

.ranking-rules-final-v2
.ranking-rules-heading p {
    margin: 0;

    color: #c0aa8d;

    font-size: 16px;

    line-height: 1.55;
}

.ranking-rules-final-v2
.ranking-rules-grid {
    position: relative;
    z-index: 1;

    display: grid;

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

    gap: 16px;

    margin-top: 23px;
}

.ranking-rules-final-v2
.ranking-rule {
    min-height: 215px;

    padding: 22px;

    display: flex;

    gap: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.014)
        );

    border:
        1px solid
        rgba(211,152,73,.15);
}

.ranking-rules-final-v2
.ranking-rule > i {
    width: 32px;

    flex:
        0 0 32px;

    margin-top: 2px;

    color: #ec7c29;

    font-size: 23px;

    text-align: center;
}

.ranking-rules-final-v2
.ranking-rule strong {
    display: block;

    margin-bottom: 10px;

    color: #f5d7a4;

    font-size: 18px;

    line-height: 1.3;
}

.ranking-rules-final-v2
.ranking-rule p {
    margin: 0;

    color: #ccb69a;

    font-size: 16px;

    line-height: 1.65;
}

.ranking-rules-final-v2
.ranking-rule .rule-extra {
    margin-top: 11px;

    color: #bda789;

    font-size: 15px;
}

.ranking-rules-final-v2
.ranking-rule .rule-important {
    margin-top: 11px;

    padding:
        8px
        10px;

    color: #dfc49d;

    font-size: 15px;

    line-height: 1.55;

    background:
        rgba(0,0,0,.20);

    border-left:
        2px solid
        rgba(233,128,40,.65);
}

.ranking-rules-final-v2
.ranking-rule b {
    color: #f0c87d;
}

.ranking-rules-final-v2
.kd-example {
    margin:
        14px
        0
        4px;

    padding:
        12px
        14px;

    background:
        rgba(0,0,0,.28);

    border-left:
        3px solid #e77827;
}

.ranking-rules-final-v2
.kd-example span {
    display: block;

    margin-bottom: 5px;

    color: #e38632;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.ranking-rules-final-v2
.kd-example strong {
    margin: 0;

    color: #ffe09b;

    font-size: 16px;
}

.ranking-rules-final-v2
.ranking-rule-danger {
    background:
        linear-gradient(
            145deg,
            rgba(91,24,9,.17),
            rgba(23,7,5,.13)
        );

    border-color:
        rgba(213,83,31,.28);
}

.ranking-rules-final-v2
.ranking-rule-warning {
    background:
        linear-gradient(
            145deg,
            rgba(116,20,13,.20),
            rgba(36,7,5,.17)
        );

    border-color:
        rgba(225,71,39,.32);
}

.ranking-rules-final-v2
.ranking-rule-warning > i {
    color: #f16044;
}

.ranking-rules-final-v2
.ranking-rule-warning strong {
    color: #ff9a7a;
}

.ranking-rules-final-v2
.ranking-rules-footer {
    position: relative;
    z-index: 1;

    margin-top: 16px;

    padding:
        15px
        17px;

    display: flex;
    align-items: center;

    gap: 14px;

    background:
        rgba(0,0,0,.25);

    border-left:
        3px solid
        rgba(232,124,39,.72);
}

.ranking-rules-final-v2
.ranking-rules-footer > i {
    color: #e78a36;

    font-size: 21px;
}

.ranking-rules-final-v2
.ranking-rules-footer strong {
    display: block;

    color: #ecc78a;

    font-size: 16px;
}

.ranking-rules-final-v2
.ranking-rules-footer span {
    display: block;

    margin-top: 3px;

    color: #b6a087;

    font-size: 14px;

    line-height: 1.5;
}

@media (max-width: 760px) {

    .ranking-rules-final-v2 {
        margin-top: 30px;

        padding:
            20px
            16px;
    }

    .ranking-rules-final-v2
    .ranking-rules-head {
        align-items: flex-start;
    }

    .ranking-rules-final-v2
    .ranking-rules-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 22px;
    }

    .ranking-rules-final-v2
    .ranking-rules-heading h2 {
        font-size: 26px;
    }

    .ranking-rules-final-v2
    .ranking-rules-heading p {
        font-size: 15px;
    }

    .ranking-rules-final-v2
    .ranking-rules-grid {
        grid-template-columns: 1fr;
    }

    .ranking-rules-final-v2
    .ranking-rule {
        min-height: 0;

        padding: 18px;
    }

    .ranking-rules-final-v2
    .ranking-rule strong {
        font-size: 17px;
    }

    .ranking-rules-final-v2
    .ranking-rule p {
        font-size: 15px;
    }

    .ranking-table td:nth-child(8)::before {
        content: "Ha muerto" !important;
    }

    .ranking-table td:nth-child(9)::before {
        content: "Asesinatos" !important;
    }

    .ranking-table td:nth-child(10)::before {
        content: "K/D" !important;
    }

    .ranking-table td:nth-child(11)::before {
        content: "Racha" !important;
    }

    .ranking-table td:nth-child(12)::before {
        content: "Mejor racha" !important;
    }

    .ranking-table td:nth-child(13)::before {
        content: "Última víctima" !important;
    }

    .ranking-table td:nth-child(14)::before {
        content: "Lo asesinó" !important;
    }

    .ranking-table td:nth-child(15)::before {
        content: "PK" !important;
    }

    .ranking-table td:nth-child(16)::before {
        content: "Online" !important;
    }

}

/* ===== FIN RANKING_RULES_FINAL_BOTTOM_V2 ===== */



/* =========================================================
   RANKING_CORRECTIONS_V3
   Quitar scrollbar inferior de ranking
   ========================================================= */


/*
 * En escritorio no queremos una barra horizontal
 * permanente debajo de toda la tabla.
 */

.ranking-table-wrap {
    width:
        100% !important;

    max-width:
        100% !important;

    overflow-x:
        hidden !important;
}


/*
 * La tabla debe acomodarse al ancho real disponible.
 */

.ranking-table {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    table-layout:
        auto !important;
}


/*
 * Evitar que una celda fuerce el ancho completo.
 */

.ranking-table th,
.ranking-table td {
    max-width:
        100%;

    overflow-wrap:
        anywhere;

    word-break:
        normal;
}


/*
 * Jugador y clan no necesitan romperse
 * salvo que realmente no exista espacio.
 */

.player-name,
.clan-cell {
    overflow-wrap:
        normal;
}


/*
 * En tablet mantenemos el mismo comportamiento.
 */

@media (max-width: 1100px) {

    .ranking-table-wrap {
        overflow-x:
            hidden !important;
    }

}


/*
 * En móvil la tabla ya se transforma en tarjetas,
 * por lo que tampoco necesita scroll horizontal.
 */

@media (max-width: 760px) {

    .ranking-table-wrap {
        overflow:
            visible !important;
    }

    .ranking-table {
        min-width:
            0 !important;

        table-layout:
            auto !important;
    }

}


/* ===== FIN RANKING_CORRECTIONS_V3 ===== */



/* =========================================================
   RANKING_LAYOUT_PVP_V4

   Aprovechar el ancho horizontal de pantalla.
   Evitar deformacion de datos.
   ========================================================= */


/*
 * Página.
 *
 * Antes el contenido quedaba mucho más encerrado.
 * Ahora usamos prácticamente todo el monitor.
 */

.ranking-page {
    width:
        calc(100vw - 28px) !important;

    max-width:
        1900px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/*
 * Hero y ranking ocupan exactamente
 * el mismo ancho.
 */

.ranking-hero,
.ranking-card,
.ranking-rules-final-v2 {
    width:
        100% !important;

    max-width:
        none !important;
}


/*
 * Caja de ranking.
 */

.ranking-card {
    overflow:
        hidden !important;
}


/*
 * Wrapper:
 * eliminamos scrollbar horizontal inferior.
 */

.ranking-table-wrap {
    width:
        100% !important;

    max-width:
        100% !important;

    overflow-x:
        hidden !important;

    overflow-y:
        visible !important;
}


/*
 * Tabla.
 *
 * Usamos todo el ancho disponible.
 */

.ranking-table {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    table-layout:
        auto !important;
}


/*
 * Más espacio horizontal útil.
 */

.ranking-table th {
    padding:
        16px
        10px !important;

    white-space:
        nowrap !important;
}


.ranking-table td {
    padding:
        13px
        10px !important;

    white-space:
        nowrap;

    vertical-align:
        middle !important;
}


/*
 * Columnas que pueden requerir algo más de ancho.
 */

.ranking-table th:nth-child(2),
.ranking-table td:nth-child(2) {
    min-width:
        125px;
}


.ranking-table th:nth-child(3),
.ranking-table td:nth-child(3) {
    min-width:
        115px;
}


.ranking-table th:nth-child(4),
.ranking-table td:nth-child(4) {
    min-width:
        72px;
}


.ranking-table th:nth-child(6),
.ranking-table td:nth-child(6) {
    min-width:
        140px;
}


/*
 * Última víctima / Lo asesinó.
 */

.ranking-table th:nth-child(13),
.ranking-table td:nth-child(13),
.ranking-table th:nth-child(14),
.ranking-table td:nth-child(14) {
    min-width:
        110px;
}


/*
 * Los nombres no se deforman.
 */

.player-name {
    display:
        inline-block;

    max-width:
        180px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.clan-badge {
    max-width:
        145px !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}


/*
 * Arma:
 * puede usar más espacio pero sin romper la tabla.
 */

.weapon {
    max-width:
        200px;
}


.weapon span {
    display:
        inline-block;

    max-width:
        160px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/*
 * Resoluciones comunes de escritorio.
 */

@media (min-width: 1500px) {

    .ranking-page {
        width:
            calc(100vw - 36px) !important;

        max-width:
            1900px !important;
    }

    .ranking-table td {
        font-size:
            14px !important;
    }

    .ranking-table th {
        font-size:
            12px !important;
    }

}


/*
 * Notebook / monitor intermedio.
 *
 * Quitamos mínimos de columnas secundarios
 * para poder acomodar el contenido.
 */

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

    .ranking-page {
        width:
            calc(100vw - 20px) !important;
    }

    .ranking-table th,
    .ranking-table td {
        padding-left:
            7px !important;

        padding-right:
            7px !important;
    }

    .ranking-table th {
        font-size:
            11px !important;
    }

    .ranking-table td {
        font-size:
            13px !important;
    }

    .ranking-table th:nth-child(2),
    .ranking-table td:nth-child(2),
    .ranking-table th:nth-child(3),
    .ranking-table td:nth-child(3),
    .ranking-table th:nth-child(4),
    .ranking-table td:nth-child(4),
    .ranking-table th:nth-child(6),
    .ranking-table td:nth-child(6),
    .ranking-table th:nth-child(13),
    .ranking-table td:nth-child(13),
    .ranking-table th:nth-child(14),
    .ranking-table td:nth-child(14) {
        min-width:
            0;
    }

}


/*
 * Mobile:
 * conservar las tarjetas actuales.
 */

@media (max-width: 760px) {

    .ranking-page {
        width:
            calc(100% - 12px) !important;
    }

    .ranking-table-wrap {
        overflow:
            visible !important;
    }

    .ranking-table,
    .ranking-table tbody,
    .ranking-table tr,
    .ranking-table td {
        width:
            100% !important;
    }

    .ranking-table td {
        white-space:
            normal !important;
    }

    .player-name,
    .weapon span,
    .clan-badge {
        max-width:
            none !important;

        white-space:
            normal !important;

        overflow:
            visible !important;

        text-overflow:
            clip !important;
    }

}


/* ===== FIN RANKING_LAYOUT_PVP_V4 ===== */



/* =========================================================
   RANKING_BANNER_LIGHT_V1
   Banner más luminoso
   ========================================================= */

.ranking-hero {
    background:
        linear-gradient(
            90deg,
            rgba(4, 3, 5, .48) 0%,
            rgba(4, 3, 5, .27) 28%,
            rgba(4, 3, 5, .08) 58%,
            rgba(4, 3, 5, .02) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3, 2, 3, .34) 0%,
            rgba(3, 2, 3, .10) 38%,
            rgba(3, 2, 3, .00) 72%
        ),
        url("/images/ranking-banner.png")
        center 42% / cover
        no-repeat !important;
}


/*
 * Reducir también el sombreado interno
 * que oscurecía la imagen.
 */

.ranking-hero::before {
    border:
        1px solid rgba(244,185,66,.16) !important;

    box-shadow:
        inset 0 0 24px
        rgba(0,0,0,.08) !important;
}


/*
 * Mantener el texto legible sin oscurecer
 * toda la imagen.
 */

.ranking-hero .eyebrow {
    background:
        rgba(31,11,5,.48) !important;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,.72) !important;
}


.ranking-hero h1 {
    text-shadow:
        0 3px 6px
        rgba(0,0,0,.78),
        0 0 18px
        rgba(109,45,12,.20) !important;
}


.ranking-hero p {
    color:
        #f1ddc2 !important;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,.72) !important;
}


/* ===== FIN RANKING_BANNER_LIGHT_V1 ===== */