/* ============================================================
   HAPPY RAN - RANKING V2
   Reference-matched rankings page.
   Loaded after classic-theme.css.
   ============================================================ */

body.classic-public-body:has(.rv2-page) {
    background: #04090d !important;
}

.rv2-page {
    --rv-bg: #050b10;
    --rv-panel: rgba(7, 17, 25, .97);
    --rv-panel2: rgba(9, 20, 29, .97);
    --rv-line: #263c4e;
    --rv-red: #d12631;
    --rv-red2: #ff424b;
    --rv-gold: #d9a43e;
    --rv-gold2: #ffd36d;
    --rv-blue: #51a9ff;
    --rv-green: #3add8c;
    --rv-muted: #7e93a6;
    min-height: 100vh;
    padding-bottom: 55px;
    color: #edf3f7;
    background:
        linear-gradient(
            180deg,
            #04090e 0,
            #06101a 34%,
            #050b10 100%
        );
}

.rv2-page .container {
    width: min(1320px, calc(100% - 42px)) !important;
    max-width: 1320px !important;
}


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

.rv2-hero {
    min-height: 360px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(55, 120, 180, .34);
    background:
        url('/images/ranking-v2/ranking-hero.png')
        center 41% / cover no-repeat;
}

.rv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 12, .18),
            rgba(3, 8, 12, .34) 50%,
            rgba(3, 8, 12, .18)
        );
}

.rv2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    background:
        linear-gradient(
            180deg,
            transparent,
            #050b10
        );
}

.rv2-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at center,
            rgba(1, 5, 8, .02),
            rgba(1, 5, 8, .44) 75%
        );
}

.rv2-hero-content {
    position: relative;
    z-index: 3;
    margin-top: 8px;
    text-align: center;
}

.rv2-hero-kicker {
    display: block;
    margin-bottom: 6px;
    color: #ff515b;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 5px;
}

.rv2-hero h1 {
    margin: 0 !important;
    color: #f3efe6 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(48px, 6vw, 72px) !important;
    line-height: 1 !important;
    text-shadow:
        0 3px 0 rgba(0,0,0,.48),
        0 0 22px rgba(245,233,211,.08);
}

.rv2-hero p {
    margin: 8px 0 0 !important;
    color: #dcc9a3 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2.2px !important;
}

.rv2-live-status {
    width: fit-content;
    margin: 22px auto 0;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(87, 118, 143, .44);
    border-radius: 4px;
    background: rgba(5, 15, 23, .83);
    box-shadow: 0 9px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(6px);
}

.rv2-live-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rv-green);
    box-shadow: 0 0 11px rgba(58, 221, 140, .58);
}

.rv2-live-status strong {
    color: var(--rv-green) !important;
    font-size: 7px !important;
    font-weight: 900 !important;
}

.rv2-live-status span,
.rv2-live-status time {
    color: #8297a8;
    font-size: 7px;
}

.rv2-spender-period {
    width: min(680px, 100%);
    margin: 10px auto 0;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    border: 1px solid rgba(214, 173, 56, .48);
    border-radius: 4px;
    background: rgba(20, 16, 7, .88);
    text-align: left;
    box-sizing: border-box;
}

.rv2-spender-period > div:last-child {
    text-align: right;
}

.rv2-spender-period span {
    display: block;
    margin-bottom: 4px;
    color: #8e7b50;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
}

.rv2-spender-period strong {
    color: #ffd45c;
    font-size: 9px;
}


/* ============================================================
   MAIN
   ============================================================ */

.rv2-container {
    position: relative;
    z-index: 6;
    margin-top: -28px !important;
}

.rv2-panel {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(161, 115, 36, .56);
    border-radius: 8px;
    background:
        radial-gradient(
            circle at top right,
            rgba(91, 52, 15, .08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(7, 18, 27, .98),
            rgba(5, 13, 20, .985)
        );
    box-shadow:
        0 16px 38px rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.014);
}

.rv2-panel-head {
    min-height: 74px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid rgba(126, 97, 42, .28);
}

.rv2-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.rv2-title-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 5px;
    font-size: 18px;
}

.rv2-title-icon.gold {
    border-color: #7d5c1d;
    background: #1d1709;
    color: var(--rv-gold2);
}

.rv2-title-icon.red {
    border-color: #743038;
    background: #211015;
    color: #ff626b;
}

.rv2-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #e93540;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rv2-title h2 {
    margin: 0 !important;
    color: #f1eee8 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 20px !important;
}

.rv2-title small {
    display: block;
    margin-top: 3px;
    color: #73899b;
    font-size: 7px;
}


/* ============================================================
   SPENDER
   ============================================================ */

.rv2-spender-filter {
    display: flex;
    gap: 6px;
}

.rv2-spender-filter a {
    min-height: 37px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #304252;
    border-radius: 3px;
    background: #08131c;
    color: #8ea0b0;
    font-size: 7px;
    font-weight: 900;
    text-decoration: none;
}

.rv2-spender-filter a:hover,
.rv2-spender-filter a.active {
    border-color: #e33640;
    background:
        linear-gradient(
            180deg,
            #b3222b,
            #74141a
        );
    color: #fff;
    box-shadow: 0 5px 15px rgba(173, 26, 35, .20);
}

.rv2-spender-grid {
    padding: 13px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.75fr)
        minmax(180px, .7fr)
        minmax(180px, .7fr);
    gap: 11px;
}

.rv2-spender-first {
    min-height: 275px;
    position: relative;
    overflow: hidden;
    border: 1px solid #9a702a;
    border-radius: 6px;
    background: #0a1117;
    box-shadow:
        inset 0 0 30px rgba(205, 150, 43, .08),
        0 0 24px rgba(171, 119, 32, .08);
}

.rv2-spender-first img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.rv2-first-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 12, .08),
            rgba(4, 8, 12, .20) 48%,
            rgba(4, 8, 12, .94) 74%,
            #050b10 100%
        );
}

.rv2-first-medal {
    width: 68px;
    height: 68px;
    position: absolute;
    left: 22px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #d8a13a;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            #5a3a0d,
            #241703
        );
    color: #ffdc79;
    font-family: Georgia, serif;
    font-size: 31px;
    box-shadow:
        0 0 22px rgba(211, 147, 36, .36);
}

.rv2-first-content {
    width: 42%;
    position: absolute;
    right: 20px;
    bottom: 31px;
    z-index: 3;
}

.rv2-first-content > span,
.rv2-first-content small {
    display: block;
}

.rv2-first-content > span {
    color: #d1a447;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.rv2-first-content h3 {
    margin: 6px 0 8px !important;
    overflow: hidden;
    color: #fff5df !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 24px !important;
    letter-spacing: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv2-first-content small {
    color: #8495a3;
    font-size: 7px;
}

.rv2-first-content strong {
    display: block;
    margin-top: 4px;
    color: #ffb934 !important;
    font-family: Georgia, serif;
    font-size: 24px !important;
}

.rv2-spender-card {
    min-height: 275px;
    position: relative;
    padding: 95px 18px 18px;
    border: 1px solid;
    border-radius: 6px;
    background:
        radial-gradient(
            circle at top center,
            rgba(83, 111, 134, .12),
            transparent 35%
        ),
        #08131c;
}

.rv2-spender-card.silver {
    border-color: #435b6d;
}

.rv2-spender-card.bronze {
    border-color: #76503a;
}

.rv2-spender-medal {
    width: 58px;
    height: 58px;
    position: absolute;
    left: 18px;
    top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: 25px;
}

.rv2-spender-card.silver .rv2-spender-medal {
    border-color: #7a8994;
    background: #1a232a;
    color: #dce4e9;
}

.rv2-spender-card.bronze .rv2-spender-medal {
    border-color: #986343;
    background: #24170f;
    color: #e49d6e;
}

.rv2-spender-card small,
.rv2-spender-card > span:not(.rv2-spender-medal) {
    display: block;
    color: #6c8193;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
}

.rv2-spender-card h3 {
    margin: 9px 0 18px !important;
    overflow: hidden;
    color: #edf2f6 !important;
    font-family: Georgia, serif !important;
    font-size: 18px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv2-spender-card strong {
    display: block;
    margin-top: 5px;
    color: #ffb83b !important;
    font-family: Georgia, serif;
    font-size: 18px !important;
}

.rv2-spender-bottom {
    padding: 0 13px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rv2-spender-more {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.rv2-spender-more > div {
    min-width: 0;
    min-height: 48px;
    padding: 6px 8px;
    border: 1px solid #273a49;
    border-radius: 3px;
    background: #08121a;
}

.rv2-spender-more span,
.rv2-spender-more strong,
.rv2-spender-more b {
    display: block;
}

.rv2-spender-more span {
    color: #a1afbb;
    font-size: 6px;
    font-weight: 900;
}

.rv2-spender-more strong {
    margin-top: 2px;
    overflow: hidden;
    color: #e8edf1 !important;
    font-size: 7px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv2-spender-more b {
    margin-top: 2px;
    color: #dca63d;
    font-size: 7px;
}

.rv2-archive-button {
    min-height: 48px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #8a6726;
    border-radius: 3px;
    background: #17150f;
    color: #e4bd61;
    font-size: 7px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.rv2-archive-button:hover {
    border-color: #d7a33e;
    color: #ffe098;
}


/* ============================================================
   FILTER
   ============================================================ */

.rv2-panel-head.game {
    align-items: flex-end;
}

.rv2-filter {
    flex: 1;
    display: grid;
    grid-template-columns:
        135px
        145px
        minmax(180px, 1fr)
        auto
        auto;
    gap: 7px;
    align-items: end;
}

.rv2-filter label > span {
    display: block;
    margin-bottom: 5px;
    color: #758ca0;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .8px;
}

.rv2-filter select,
.rv2-filter input {
    width: 100%;
    height: 37px;
    padding: 0 9px;
    border: 1px solid #2b4051 !important;
    border-radius: 3px !important;
    background: #07121b !important;
    color: #dce5ec !important;
    font-size: 7px;
}

.rv2-filter button,
.rv2-reset {
    min-height: 37px;
    height: 37px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c82933 !important;
    border-radius: 3px !important;
    background:
        linear-gradient(
            180deg,
            #bd242e,
            #78151b
        ) !important;
    color: #fff !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.rv2-reset {
    border-color: #314656 !important;
    background: transparent !important;
    color: #91a2b1 !important;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.rv2-summary-grid {
    padding: 13px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.rv2-summary-card {
    overflow: hidden;
    border: 1px solid;
    border-radius: 5px;
    background: #08131c;
}

.rv2-summary-card.level {
    border-color: #294f71;
}

.rv2-summary-card.kda {
    border-color: #663039;
}

.rv2-summary-card.rich {
    border-color: #655126;
}

.rv2-summary-card header {
    min-height: 48px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(81, 103, 120, .22);
}

.rv2-summary-card header > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rv2-summary-card header span {
    font-size: 15px;
}

.rv2-summary-card.level header span,
.rv2-summary-card.level h3 {
    color: #55aaff !important;
}

.rv2-summary-card.kda header span,
.rv2-summary-card.kda h3 {
    color: #ff625e !important;
}

.rv2-summary-card.rich header span,
.rv2-summary-card.rich h3 {
    color: #ffc43e !important;
}

.rv2-summary-card h3 {
    margin: 0 !important;
    font-family: Georgia, serif !important;
    font-size: 14px !important;
}

.rv2-summary-card header > b {
    color: #6f8598;
    font-size: 6px;
    letter-spacing: 1px;
}

.rv2-summary-list {
    padding: 8px;
}

.rv2-summary-row {
    min-height: 44px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    border-bottom: 1px solid rgba(79, 100, 117, .16);
}

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

.rv2-rank-number {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #45596a;
    color: #a9b6c1;
    font-size: 7px;
    font-weight: 900;
}

.rv2-summary-row:first-child .rv2-rank-number {
    border-color: #b0842b;
    background: #271e09;
    color: #ffd460;
}

.rv2-summary-row strong {
    display: block;
    overflow: hidden;
    color: #e7edf2 !important;
    font-size: 8px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv2-summary-row small {
    display: block;
    margin-top: 2px;
    color: #627d92;
    font-size: 6px;
}

.rv2-summary-row > b {
    color: #a8b8c5;
    font-size: 7px;
    white-space: nowrap;
}

.rv2-summary-card.kda .rv2-summary-row > b {
    color: #ff7365;
}

.rv2-summary-card.rich .rv2-summary-row > b {
    color: #e7b344;
}


/* ============================================================
   DETAIL TABLE
   ============================================================ */

.rv2-detail {
    margin: 0 13px 13px;
    overflow: hidden;
    border: 1px solid #2b4050;
    border-radius: 5px;
    background: #07121a;
}

.rv2-detail-head {
    min-height: 56px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #263947;
}

.rv2-detail-head span {
    color: #657f94;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
}

.rv2-detail-head h3 {
    margin: 4px 0 0 !important;
    color: #e8edf1 !important;
    font-family: Georgia, serif !important;
    font-size: 14px !important;
}

.rv2-result-meta {
    display: flex;
    gap: 14px;
}

.rv2-result-meta b {
    margin-left: 4px;
    color: #fff;
}

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

.rv2-table {
    width: 100%;
    min-width: 900px;
    margin: 0 !important;
    border-collapse: collapse;
    background: transparent !important;
}

.rv2-table th {
    height: 39px;
    padding: 0 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #263846 !important;
    background: #08141d !important;
    color: #7f94a5 !important;
    font-size: 6px !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
}

.rv2-table td {
    height: 47px;
    padding: 0 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(66, 88, 105, .16) !important;
    color: #aebbc5 !important;
    font-size: 7px !important;
}

.rv2-table tbody tr:hover {
    background: rgba(42, 79, 108, .08);
}

.rv2-table-rank {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #495c6b;
    color: #b3c0ca;
    font-weight: 900;
}

.rv2-table tbody tr:first-child .rv2-table-rank {
    border-color: #b18428;
    color: #ffd365;
}

.rv2-table-player {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rv2-table-avatar {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #364d5e;
    background: #0d1a24;
    color: #b9c7d1;
    font-family: Georgia, serif;
    font-size: 10px;
}

.rv2-table-player strong {
    color: #e6edf3 !important;
    font-size: 8px !important;
}

.rv2-blue {
    color: #65b5ff !important;
}

.rv2-red {
    color: #ff6e67 !important;
}

.rv2-gold {
    color: #e8b13e !important;
}

.rv2-pagination-wrap {
    min-height: 55px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rv2-pagination-wrap > span {
    color: #71879a;
    font-size: 7px;
}

.rv2-pagination-wrap > span strong {
    color: #fff;
}

.rv2-pagination {
    display: flex;
    gap: 5px;
}

.rv2-pagination a {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #314555;
    border-radius: 3px;
    background: #08131c;
    color: #8b9dac;
    font-size: 7px;
    font-weight: 900;
    text-decoration: none;
}

.rv2-pagination a:hover,
.rv2-pagination a.active {
    border-color: #db2d37;
    background:
        linear-gradient(
            180deg,
            #bb222c,
            #77141a
        );
    color: #fff;
}

.rv2-empty {
    padding: 24px;
    color: #607689 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    text-align: center;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .rv2-panel-head.game {
        align-items: stretch;
        flex-direction: column;
    }

    .rv2-filter {
        width: 100%;
    }

    .rv2-spender-grid {
        grid-template-columns:
            minmax(0, 1.4fr)
            1fr
            1fr;
    }

}


@media (max-width: 850px) {

    .rv2-spender-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rv2-spender-first {
        grid-column: 1 / -1;
    }

    .rv2-summary-grid {
        grid-template-columns: 1fr;
    }

    .rv2-filter {
        grid-template-columns: 1fr 1fr;
    }

    .rv2-filter .search {
        grid-column: 1 / -1;
    }

    .rv2-spender-more {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .rv2-page .container {
        width: min(100% - 24px, 1320px) !important;
    }

    .rv2-hero {
        min-height: 310px;
        background-position: 42% center;
    }

    .rv2-hero h1 {
        font-size: 48px !important;
    }

    .rv2-live-status {
        flex-wrap: wrap;
        justify-content: center;
    }

    .rv2-spender-period {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .rv2-spender-period > div:last-child {
        text-align: left;
    }

    .rv2-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .rv2-spender-filter {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .rv2-spender-filter a {
        padding: 0 5px;
    }

    .rv2-spender-grid {
        grid-template-columns: 1fr;
    }

    .rv2-spender-first {
        grid-column: auto;
        min-height: 300px;
    }

    .rv2-first-content {
        width: 58%;
    }

    .rv2-spender-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .rv2-archive-button {
        width: 100%;
    }

    .rv2-filter {
        grid-template-columns: 1fr;
    }

    .rv2-filter .search {
        grid-column: auto;
    }

    .rv2-pagination-wrap {
        align-items: flex-start;
        flex-direction: column;
    }

}