@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&display=swap");

/* Clone of https://legacy.runesofmystery.com/rankings?tab=general */
.page-ranking,
.page-ranking.mystic-forest,
.page-ranking.page-inner,
body.mystic-forest.page-inner.page-ranking {
    --rom-gold: #c8a96e;
    --rom-gold-light: #d4b87a;
    --rom-text: #e0d5c1;
    --rom-muted: #a09880;
    --rom-bg: #0a0a0f;
    --rom-bg2: #12121a;
    --font-heading: Cinzel, Georgia, serif;
    --font-body: Lora, Georgia, serif;
    background:
        radial-gradient(circle at 50% 9%, #ba914b11, transparent 28rem),
        linear-gradient(180deg, var(--rom-bg) 0%, var(--rom-bg2) 100%) !important;
    color: #fff;
    font-family: var(--font-body);
}
.page-ranking .mw-cosmos,
.page-ranking .rkx-sky,
.page-ranking .rh-aura,
.page-ranking .rh-dust,
.page-ranking .rh-medal { display: none !important; }
body.page-ranking::before,
.page-ranking::before { display: none !important; background: none !important; }
.page-ranking .mw-nav,
.page-ranking .mw-nav.is-scrolled {
    background: #0a0a0ff2;
    border-bottom: 1px solid #c8a96e26;
}

.page-ranking .rkx.rh.rom-rank {
    width: min(1240px, calc(100% - 2.4rem));
    margin: 1.2rem auto 4rem;
    color: #fff;
    direction: ltr;
}

.page-ranking .rom-rank__title {
    text-align: center;
    font-family: var(--font-heading);
    color: #f7f3eb;
    letter-spacing: 0.12em;
    text-transform: none;
    text-shadow: 0 10px 36px #00000094;
    margin: 8px 0 38px;
    font-size: clamp(2.35rem, 4vw, 3.15rem);
    font-weight: 600;
}
.page-ranking .rom-rank__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 15px auto 0;
    background: linear-gradient(90deg, #0000, #c9a760, #0000);
    box-shadow: 0 0 18px #c9a76073;
}

.page-ranking .rkx-navcard {
    margin: 0 0 22px;
    padding: 12px;
    border: 1px solid #fff1;
    border-radius: 2px;
    background: linear-gradient(135deg, #ffffff09, #0000 46%), #0a0a0fc7;
    box-shadow: 0 22px 60px #00000042, inset 0 1px #ffffff06;
    position: relative;
    overflow: hidden;
}
.page-ranking .rkx-navcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, #0000, #d3b0699e, #0000);
}
.page-ranking .rkx-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}
.page-ranking .rkx-tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    min-height: 68px;
    padding: 10px 12px;
    color: #928c82;
    font-family: var(--font-body);
    font-size: 0.81rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    text-transform: none;
    text-decoration: none;
    background: #ffffff05;
    border: 1px solid #ffffff0b;
    border-radius: 2px;
    border-bottom: 1px solid #ffffff0b;
    margin: 0;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.page-ranking .rkx-tab img,
.page-ranking .rkx-tab svg {
    flex: none;
    width: 38px;
    height: 38px;
    padding: 9px;
    color: #9a8a6b;
    fill: currentColor;
    background: #ffffff06;
    border: 1px solid #ffffff0f;
    border-radius: 2px;
    object-fit: contain;
    opacity: 1;
}
.page-ranking .rh-stage .rk-doll canvas {
    width: 100% !important;
    height: 100% !important;
}
.page-ranking .rh-row .rom-class span { display: none; }
.page-ranking .rkx-tab:hover {
    color: #d5c5a8;
    background: #c8a96e0b;
    border-color: #c8a96e26;
    transform: translateY(-2px);
}
.page-ranking .rkx-tab.is-on {
    color: #ead7b3;
    background: radial-gradient(circle at 18% 25%, #deb96d2e, #0000 45%), linear-gradient(145deg, #c8a96e1f, #c8a96e0b);
    border-color: #c8a96e52;
    box-shadow: 0 10px 28px #0000003d, inset 0 1px #ffffff0e;
}
.page-ranking .rkx-tab.is-on img,
.page-ranking .rkx-tab.is-on svg {
    color: #17130c;
    background: linear-gradient(145deg, #e2c381, #a77d38);
    border-color: #e2c281bf;
}
.page-ranking .rkx-tab.is-on::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--rom-gold);
    box-shadow: 0 0 10px #c8a96eb3;
}

.page-ranking .rkx-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 2px 0;
    padding: 14px 2px 2px;
    border: none;
    border-top: 1px solid #ffffff0b;
    background: none;
}
.page-ranking .rkx-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 7px 10px;
    color: #8b867e;
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    background: #ffffff04;
    border: 1px solid #ffffff0a;
    border-radius: 2px;
}
.page-ranking .rkx-filter img {
    width: 27px;
    height: 27px;
    padding: 5px;
    object-fit: contain;
    background: #ffffff05;
    border: 1px solid #ffffff0d;
    border-radius: 1px;
}
.page-ranking .rkx-filter:hover {
    color: #d4cab9;
    background: #c8a96e09;
    border-color: #c8a96e21;
    transform: translateY(-1px);
}
.page-ranking .rkx-filter.is-on {
    color: #e6c98d;
    background: linear-gradient(90deg, #d2ae6729, #d2ae670b);
    border-color: #d2ae674d;
    box-shadow: inset 3px 0 #d2ae67, 0 8px 20px #00000029;
}

.page-ranking .rh-find {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
    align-items: center;
    gap: 36px;
    margin: 0 0 24px;
    padding: 24px 26px;
    border: 1px solid #ffffff13;
    border-radius: 2px;
    background: radial-gradient(circle at 5% 12%, #c9a66021, #0000 36%), linear-gradient(135deg, #ffffff09, #0000 52%), #0b0b10db;
    box-shadow: 0 24px 60px #0000003d, inset 0 1px #ffffff06;
    position: relative;
}
.page-ranking .rh-find::before {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 41%;
    width: 1px;
    background: linear-gradient(#0000, #c8a96e29, #0000);
    pointer-events: none;
}
.page-ranking .rh-find__kicker {
    color: var(--rom-gold);
    font-family: var(--font-body);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 700;
}
.page-ranking .rh-find h2 {
    color: #f2eee7;
    font-family: var(--font-body);
    letter-spacing: -0.015em;
    margin: 7px 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
}
.page-ranking .rh-find p {
    color: #78746e;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}
.page-ranking .rh .rk-search input {
    height: 56px;
    border-radius: 1px;
    background: #050509e0;
    border: 1px solid #ffffff12;
    color: #f5f1e8;
    font: 0.88rem var(--font-body);
}
.page-ranking .rh .rk-search input:focus {
    border-color: #c8a96e85;
    box-shadow: 0 0 0 4px #c8a96e11, 0 12px 32px #00000047;
}
.page-ranking .rk-suggest {
    border-radius: 2px;
    border-color: #c8a96e42;
    background: #09090dfa;
}

.page-ranking .rh-crown,
.page-ranking .rh-crown.rkx-arena {
    margin: 0 0 24px;
    padding: 20px 24px 12px;
    min-height: 0;
    border: 1px solid #c8a96e2e;
    border-radius: 2px;
    background: radial-gradient(circle at 50% 45%, #c79e5224, #0000 29%), radial-gradient(circle at 18% 62%, #72849d0e, #0000 24%), radial-gradient(circle at 82% 62%, #72849d0e, #0000 24%), #08080de6;
    box-shadow: 0 24px 60px #00000042, inset 0 1px #ffffff06;
    overflow: hidden;
    position: relative;
}
.page-ranking .rh-crown::before {
    content: "";
    z-index: 1;
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0000 33%, #d5b16909 50%, #0000 67%), linear-gradient(#0000 58%, #0404089e 100%);
}
.page-ranking .rh-crown::after {
    content: "";
    z-index: 1;
    pointer-events: none;
    position: absolute;
    bottom: 18px;
    right: 6%;
    width: 88%;
    height: 1px;
    background: linear-gradient(90deg, #0000, #d2ae6742, #0000);
    box-shadow: 0 0 28px #d2ae672e;
}
.page-ranking .rh-crown__engine {
    z-index: 8;
    top: 12px;
    inset-inline-end: 12px;
    color: #e0d5c1cc;
    min-height: 30px;
    font-family: var(--font-heading);
    letter-spacing: 0.11em;
    background: linear-gradient(135deg, #0c0c12e0, #191613c2);
    border: 1px solid #c8a96e40;
    border-radius: 7px;
    padding: 5px 9px 5px 7px;
    font-size: 0.62rem;
    font-weight: 600;
    box-shadow: 0 5px 18px #00000057, inset 0 1px #ffffff06;
}

.page-ranking .rh-podium {
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-areas: "p2 p1 p3";
    align-items: end;
    gap: 4px;
    height: 500px;
    position: relative;
}
.page-ranking .rh-col {
    --podium-rgb: 176, 190, 210;
    isolation: isolate;
    filter: saturate(0.86) brightness(0.82);
    height: 100%;
    position: relative;
}
.page-ranking .rh-col--1 {
    --podium-rgb: 218, 177, 91;
    z-index: 5;
    filter: none;
}
.page-ranking .rh-col--3 { --podium-rgb: 184, 112, 58; }
.page-ranking .rh-col::before,
.page-ranking .rh-col::after {
    content: "";
    z-index: 0;
    pointer-events: none;
    position: absolute;
    left: 50%;
    border-radius: 50%;
    background: currentColor;
    color: rgba(var(--podium-rgb), 0.88);
    filter: drop-shadow(0 0 5px rgba(var(--podium-rgb), 0.82));
    opacity: 0;
}
.page-ranking .rh-col::before {
    width: 3px;
    height: 3px;
    top: 62%;
    animation: 5.6s ease-out infinite rankingsPodiumParticles;
    box-shadow: -124px 24px, -98px -38px, -68px 42px, -36px -58px, 34px -36px, 62px 44px, 96px -50px, 126px 18px;
}
.page-ranking .rh-col::after {
    width: 2px;
    height: 2px;
    top: 69%;
    animation: 7.2s ease-out infinite rankingsPodiumParticles;
    box-shadow: -112px -18px, -78px 35px, -48px -48px, -14px 20px, 24px -60px, 52px 26px, 82px -28px, 116px 38px;
}
@keyframes rankingsPodiumParticles {
    0% { opacity: 0; transform: translate(-50%, 34px) scale(0.65); }
    18% { opacity: 0.76; }
    68% { opacity: 0.38; }
    100% { opacity: 0; transform: translate(-50%, -72px) scale(1.16); }
}

.page-ranking .rh-stage,
.page-ranking .rh-col--1 .rh-stage {
    position: absolute;
    top: 0;
    bottom: 88px;
    left: 50%;
    width: 145%;
    height: auto;
    transform: translateX(-50%);
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}
.page-ranking .rh-stage::after {
    content: "";
    position: absolute;
    inset: 12% 19% 19%;
    z-index: 0;
    pointer-events: none;
    border-radius: 48%;
    background: radial-gradient(circle at 50% 54%, rgba(var(--podium-rgb), 0.3), transparent 34%), radial-gradient(ellipse at 50% 68%, rgba(var(--podium-rgb), 0.2), transparent 62%);
    filter: blur(18px);
    mix-blend-mode: screen;
    opacity: 0.3;
}
.page-ranking .rh-stage .rk-doll {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
}
.page-ranking .rh-plate {
    z-index: 8;
    position: absolute;
    bottom: 6%;
    left: 0;
    right: 0;
    height: 88px;
    padding: 6px 12px 0;
    display: grid;
    grid-template-rows: 18px 38px;
    align-content: center;
    place-items: center;
    text-align: center;
    border: none !important;
    background: transparent !important;
}
.page-ranking .rh-plate__tier {
    color: #ab9a79;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.64rem;
    font-weight: 700;
}
.page-ranking .rh-col--1 .rh-plate__tier { color: #ddb96f; }
.page-ranking .rh-plate .rom-class {
    justify-content: center;
    margin: 0;
    gap: 8px;
}
.page-ranking .rh-plate .rom-class span { display: none; }
.page-ranking .rh-plate .rom-class img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.page-ranking .rh-plate__who {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.page-ranking .rh-plate__name,
.page-ranking .rh-plate__name a {
    color: #eee9df;
    max-width: 210px;
    font: 700 clamp(1rem, 1.7vw, 1.35rem) var(--font-heading);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    text-decoration: none;
}
.page-ranking .rh-col--1 .rh-plate__name,
.page-ranking .rh-col--1 .rh-plate__name a {
    color: #fff8eb;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.page-ranking .rh-board {
    isolation: isolate;
    margin: 0 0 40px;
    padding: 20px;
    border: 1px solid #cda96333;
    border-radius: 2px;
    background: radial-gradient(circle at 50% -10%, #ddb56816, #0000 27rem), linear-gradient(145deg, #ffffff06, #0000 42%), #09090ff0;
    box-shadow: 0 26px 64px #00000057, 0 0 38px #af80320a, inset 0 1px #ffffff08;
    position: relative;
    overflow: hidden;
}
.page-ranking .rh-board::before {
    content: "";
    z-index: 5;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, #0000, #ecc884e0, #0000);
    box-shadow: 0 0 16px #d8ae5b61;
}
.page-ranking .rkx-cols,
.page-ranking .rkx-cols--player,
.page-ranking .rkx-cols--guild {
    display: grid;
    grid-template-columns: 90px 140px minmax(0, 1fr) 150px;
    gap: 0;
    padding: 12px 15px;
    color: #a99368;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(#c8a96e0b, #02030729);
    border-top: 1px solid #c8a96e14;
    border-bottom: 1px solid #c8a96e24;
}
.page-ranking .rkx-cols--guild { grid-template-columns: 90px minmax(0, 1fr) 130px; }
.page-ranking .rh-list { gap: 7px; }
.page-ranking .rh-row {
    grid-template-columns: 90px 140px minmax(0, 1fr) 150px;
    gap: 0;
    min-height: 62px;
    padding: 10px 15px;
    color: #bdb9b1;
    background: #ffffff05 !important;
    border: 1px solid #ffffff0b !important;
    border-radius: 2px;
    box-shadow: none !important;
    opacity: 1;
    transform: none;
}
.page-ranking .rh-row::before { display: none; }
.page-ranking .rh-row.is-in { opacity: 1; transform: none; }
.page-ranking .rh-row:hover {
    color: #ebe6dc;
    background: #d8b66e0e !important;
    border-color: #d8b66e24 !important;
    transform: none !important;
}
.page-ranking .rh-row__rank {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--rom-gold);
    font-family: var(--font-heading);
    font-weight: 700;
    box-shadow: none;
}
.page-ranking .rh-row--top1 .rh-row__rank,
.page-ranking .rh-row--top2 .rh-row__rank,
.page-ranking .rh-row--top3 .rh-row__rank {
    color: var(--rom-gold);
    background: none;
    box-shadow: none;
}
.page-ranking .rh-row__tier {
    justify-self: center;
    width: 112px;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 2px;
    font-family: var(--font-heading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.page-ranking .rh-row__tier--legend {
    color: gold;
    background: #ffd7000d;
    border: 1px solid #ffd7004d;
}
.page-ranking .rh-row__tier--hero {
    color: #e5e4e2;
    background: #e5e4e20d;
    border: 1px solid #e5e4e24d;
}
.page-ranking .rh-row__tier--champion {
    color: #cd7f32;
    background: #cd7f320d;
    border: 1px solid #cd7f324d;
}
.page-ranking .rom-class {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.page-ranking .rom-class img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.page-ranking .rh-row__who {
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.page-ranking .rh-row__name {
    color: #5ab4e5;
    font-size: 0.9rem;
    text-decoration: none;
}
.page-ranking .rh-row__name:hover { color: #7cc8f0; }
.page-ranking .rh-row__val { text-align: center; }
.page-ranking .rh-row__num {
    color: #d57972;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.page-ranking .rh-row__track { display: none !important; }

.page-ranking .rh-guilds { gap: 7px; }
.page-ranking .rh-guild {
    background: #ffffff05;
    border: 1px solid #ffffff0b;
    border-radius: 2px;
    box-shadow: none;
}
.page-ranking .rh-guild.is-in { opacity: 1; transform: none; }
.page-ranking .rh-guild:hover {
    background: #d8b66e0e;
    transform: none;
}
.page-ranking .rh-guild__name a { color: #5ab4e5; text-decoration: none; }
.page-ranking .rh-guild__lv { color: #d57972; }

@media (max-width: 1050px) {
    .page-ranking .rkx-tabs { display: flex; overflow-x: auto; }
    .page-ranking .rkx-tab { flex: 0 0 190px; }
    .page-ranking .rkx-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .page-ranking .rh-find {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .page-ranking .rh-find::before { display: none; }
    .page-ranking .rkx-filters {
        display: flex;
        overflow-x: auto;
    }
    .page-ranking .rkx-filter { flex: 0 0 158px; }
    .page-ranking .rh-podium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "p1 p1" "p2 p3";
        height: auto;
        min-height: 720px;
    }
    .page-ranking .rh-col { min-height: 340px; }
    .page-ranking .rkx-cols,
    .page-ranking .rkx-cols--player,
    .page-ranking .rh-row {
        grid-template-columns: 48px minmax(0, 1fr) 90px;
    }
    .page-ranking .rkx-cols--player span:nth-child(2),
    .page-ranking .rh-row__tier { display: none; }
}