/* Rankings (/stats) and guild pages (/guild/<name>) */
.rk-page-main {
    --accent: #f2c14e;
    --rk-font: 'Manrope', var(--font-body);
    --rk-gold: #f2c14e;
    --rk-gold-soft: #d9a63a;
    --rk-silver: #d6dbe4;
    --rk-bronze: #e08a4a;
    --rk-ml: #5aa9ff;
    --rk-line: rgba(214,160,60,0.30);
    --rk-line-soft: rgba(214,160,60,0.12);
    --rk-panel: linear-gradient(180deg, rgba(40,24,12,0.92) 0%, rgba(20,12,7,0.95) 100%);
    --rk-row: rgba(14,8,4,0.55);
    --rk-row-hover: rgba(48,30,12,0.75);
    --rk-text: #e9dcc6;
    --rk-muted: #a8957a;
    padding: 1.5rem 1.5rem 3rem;
    align-items: flex-start;
    font-family: var(--rk-font);
}

.rk-wrapper {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* The site-wide button look (red sweep, spaced capitals) is for call-to-action buttons. */
.rk-page-main button {
    width: auto;
    margin: 0;
    padding: 0;
    font-family: var(--rk-font);
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
}

.rk-page-main button::before { display: none; }
.rk-page-main button:hover { box-shadow: none; }

/* ═══════════════════════════════
   VIEW CARDS (Characters / Guilds)
═══════════════════════════════ */
.rk-views {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.rk-view {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-height: 64px;
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--rk-line-soft);
    background:
        radial-gradient(ellipse 60% 140% at 100% 0%, rgba(187,24,24,0.20) 0%, transparent 70%),
        linear-gradient(180deg, rgba(30,18,10,0.92) 0%, rgba(14,9,6,0.95) 100%);
    color: var(--rk-muted);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s, color 0.2s;
}

.rk-view::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 2.4rem;
    opacity: 0.10;
    color: #fff;
}

.rk-view-characters::after { content: '\f007'; }
.rk-view-guilds::after { content: '\f0c0'; }

.rk-view strong {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f4e8d2;
}

.rk-view small { font-size: 0.75rem; }

.rk-view:hover { border-color: var(--rk-line); transform: translateY(-1px); }

.rk-view.is-active {
    border-color: var(--rk-gold);
    background:
        radial-gradient(ellipse 60% 140% at 100% 0%, rgba(242,193,78,0.22) 0%, transparent 70%),
        linear-gradient(180deg, rgba(64,38,14,0.95) 0%, rgba(30,18,9,0.96) 100%);
    box-shadow: 0 0 0 1px rgba(242,193,78,0.25), 0 10px 30px rgba(0,0,0,0.45);
}

.rk-view.is-active strong { color: var(--rk-gold); }
.rk-view.is-active small { color: #d8c7a8; }

/* ═══════════════════════════════
   TOOLBAR
═══════════════════════════════ */
.rk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.rk-subtabs { display: flex; gap: 1.25rem; }

.rk-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0 0.55rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--rk-muted);
    border-bottom: 2px solid transparent;
}

.rk-subtab.is-active { color: #fff3dc; border-bottom-color: var(--rk-gold); }
.rk-subtab i { color: var(--rk-gold); font-size: 0.85rem; }

.rk-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.rk-toolbar[data-view="guilds"] .rk-classes { display: none; }

.rk-page-main .rk-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--rk-line);
    background: rgba(242,193,78,0.10);
    color: var(--rk-gold);
    cursor: pointer;
    transition: background 0.2s;
}

.rk-page-main .rk-icon-btn:hover { background: rgba(242,193,78,0.22); }

/* ── Class filter ── */
.rk-classes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 12px;
    border: 1px solid var(--rk-line-soft);
    background: rgba(10,6,3,0.55);
}

.rk-page-main .rk-class {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid transparent;
    background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--accent) 45%, #1d1108) 0%, #100905 80%);
    color: #fff1d6;
    font-size: 0.72rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}

.rk-page-main .rk-class:hover { opacity: 1; transform: translateY(-1px); }

.rk-page-main .rk-class.is-active {
    opacity: 1;
    border-color: var(--rk-gold);
    box-shadow: 0 0 10px rgba(242,193,78,0.35);
}

.rk-page-main .rk-class-all {
    width: auto;
    padding: 0 0.75rem;
    border-radius: 9px;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
}

.rk-page-main .rk-class-all.is-active { background: rgba(242,193,78,0.14); color: var(--rk-gold); box-shadow: none; }

/* ── Range (1–100, 101–200...) ── */
.rk-range { position: relative; }
.rk-range[hidden] { display: none; }

.rk-page-main .rk-range-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--rk-line);
    background: rgba(10,6,3,0.55);
    color: #fff3dc;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
}

.rk-range-btn > i:first-child { color: var(--tier-color, var(--rk-gold)); }
.rk-chevron { font-size: 0.65rem; color: var(--rk-muted); }

.rk-range[data-tier="0"], .rk-range-item[data-tier="0"] { --tier-color: #b49cff; }
.rk-range[data-tier="1"], .rk-range-item[data-tier="1"] { --tier-color: #f2c14e; }
.rk-range[data-tier="2"], .rk-range-item[data-tier="2"] { --tier-color: #d6dbe4; }
.rk-range[data-tier="3"], .rk-range-item[data-tier="3"] { --tier-color: #e08a4a; }

.rk-range-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 210px;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid var(--rk-line);
    background: #1a0f07;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

.rk-page-main .rk-range-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rk-text);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
}

.rk-range-item i { color: var(--tier-color, var(--rk-muted)); font-size: 0.75rem; }
.rk-range-item span { flex: 1; font-weight: 700; }
.rk-range-item b { color: var(--rk-muted); font-weight: 700; }
.rk-page-main .rk-range-item:hover { background: rgba(242,193,78,0.08); }
.rk-page-main .rk-range-item.is-active { background: rgba(242,193,78,0.14); }
.rk-range-item.is-active b { color: #fff3dc; }

/* ── Search: takes the place of the filters while open ── */
.rk-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0 0 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--rk-gold);
    background: rgba(10,6,3,0.65);
}

.rk-search[hidden] { display: none; }

.rk-search > i { color: var(--rk-muted); font-size: 0.85rem; }

.rk-search input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--rk-text);
    font-family: var(--rk-font);
    font-size: 0.9rem;
}

.rk-search input:focus { outline: none; }
.rk-search .rk-icon-btn { border: none; border-left: 1px solid var(--rk-line); border-radius: 0 10px 10px 0; }

.rk-toolbar.is-searching .rk-subtabs,
.rk-toolbar.is-searching .rk-filters { display: none; }

/* ═══════════════════════════════
   TABLE
═══════════════════════════════ */
.rk-panel {
    padding: 0.4rem 0.6rem 0.6rem;
    border-radius: 16px;
    border: 1px solid var(--rk-line);
    background: var(--rk-panel);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,220,150,0.06);
}

.rk-page-main .rk-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 6px;
    background: none;
    border: none;
    box-shadow: none;
    font-family: var(--rk-font);
}

.rk-page-main .rk-table th {
    padding: 0.55rem 0.8rem 0.2rem;
    background: none;
    border: none;
    font-family: var(--rk-font);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rk-muted);
    text-align: left;
}

.rk-page-main .rk-table th.rk-metric-head { color: var(--rk-gold); }

.rk-page-main .rk-table td {
    padding: 0.5rem 0.8rem;
    border: none;
    background: var(--rk-row);
    color: var(--rk-text);
    vertical-align: middle;
    transition: background 0.15s;
}

.rk-page-main .rk-table tbody tr:hover td { background: var(--rk-row-hover); }

.rk-page-main .rk-table td:first-child { border-radius: 10px 0 0 10px; }
.rk-page-main .rk-table td:last-child { border-radius: 0 10px 10px 0; }

.rk-page-main .rk-table td.rk-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rk-muted);
    border-radius: 10px;
    background: transparent;
}

.rk-page-main .rk-table td.rk-state.is-error { color: #ff8a7a; }

.rk-col-place { width: 64px; text-align: center !important; }
.rk-col-num { text-align: right !important; white-space: nowrap; }
.rk-col-level { width: 110px; }
.rk-col-guild { width: 220px; }
.rk-col-master { width: 220px; }
.rk-col-members { width: 130px; }

/* ── Top three: a coloured edge and laurels ── */
.rk-top { --medal: var(--rk-gold); }
.rk-top-2 { --medal: var(--rk-silver); }
.rk-top-3 { --medal: var(--rk-bronze); }

.rk-page-main .rk-table tr.rk-top td:first-child {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--medal) 22%, transparent) 0%, transparent 100%),
        var(--rk-row);
}

.rk-page-main .rk-table tr.rk-top td {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--medal) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--medal) 35%, transparent);
}

.rk-page-main .rk-table tr.rk-top td:first-child { box-shadow: inset 2px 0 0 var(--medal), inset 0 1px 0 color-mix(in srgb, var(--medal) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--medal) 35%, transparent); }
.rk-page-main .rk-table tr.rk-top td:last-child { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--medal) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--medal) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--medal) 35%, transparent); }

.rk-place {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 0.35rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    font-weight: 800;
    font-size: 0.82rem;
    color: #f4e8d2;
}

.rk-medal-1 { --medal: var(--rk-gold); }
.rk-medal-2 { --medal: var(--rk-silver); }
.rk-medal-3 { --medal: var(--rk-bronze); }

.rk-medal {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    color: var(--medal);
}

.rk-medal svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--medal) 50%, transparent)); }
.rk-medal b { position: relative; font-size: 0.95rem; color: var(--medal); text-shadow: 0 0 10px color-mix(in srgb, var(--medal) 60%, transparent); }

/* ── Who: avatar or mark, name, class and location ── */
.rk-who {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.rk-who-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.rk-who strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff7e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-who:hover strong { color: var(--rk-gold); }

.rk-who small {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    font-size: 0.74rem;
    color: var(--rk-muted);
}

.rk-loc { display: inline-flex; align-items: center; gap: 0.3rem; }
.rk-loc i { font-size: 0.65rem; opacity: 0.8; }
.rk-loc.is-hidden { font-style: italic; }

.rk-class-name + .rk-loc::before {
    content: '·';
    margin-right: 0.3rem;
    opacity: 0.6;
}

.rk-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 55%, #6b4a1c);
    background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--accent) 55%, #2a1608) 0%, #120a05 80%);
    color: #fff4d6;
    font-size: 1rem;
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent);
}

.rk-top-1 .rk-avatar { border-color: var(--rk-gold); box-shadow: 0 0 14px rgba(242,193,78,0.45); }

.rk-online-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #33d16b;
    border: 2px solid #1d1209;
    box-shadow: 0 0 6px rgba(51,209,107,0.8);
}

/* The accent of each class, shared by the filter and the avatars. */
.rk-page-main [data-class="dw"]  { --accent: #7e9bff; }
.rk-page-main [data-class="dk"]  { --accent: #ff6a4d; }
.rk-page-main [data-class="elf"] { --accent: #8ff0a4; }
.rk-page-main [data-class="mg"]  { --accent: #c38bff; }
.rk-page-main [data-class="dl"]  { --accent: #ffd36b; }
.rk-page-main [data-class="sum"] { --accent: #ff7fd8; }
.rk-page-main [data-class="rf"]  { --accent: #ffad5c; }

/* ── Numbers ── */
.rk-metric { font-size: 1.15rem; font-weight: 800; color: var(--rk-gold); }
.rk-metric-lg { font-size: 1.25rem; }

.rk-col-level { line-height: 1.15; }
.rk-level { display: block; font-weight: 700; color: #fff3dc; font-size: 0.9rem; }
.rk-ml { display: block; font-size: 0.68rem; font-weight: 800; color: var(--rk-ml); }

/* ── Guild marks ── */
.rk-logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    image-rendering: pixelated;
    border-radius: 3px;
    background: rgba(0,0,0,0.35);
}

.rk-logo-lg { width: 38px; height: 38px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }

.rk-guild {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    color: #f4d58a;
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
}

.rk-guild span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-guild:hover span { color: #fff3dc; }

.rk-castle { margin-left: 0.3rem; font-size: 0.8rem; color: var(--rk-gold); filter: drop-shadow(0 0 6px rgba(242,193,78,0.6)); }

.rk-master { color: #e5d3b3; font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.rk-master:hover { color: var(--rk-gold); }

.rk-members { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: #fff3dc; }
.rk-members i { color: var(--rk-muted); font-size: 0.8rem; }
.rk-members-online { display: block; font-size: 0.68rem; font-weight: 700; color: #52e08a; }

.rk-none { color: var(--rk-muted); }
.rk-only-mobile { display: none !important; }

.rk-footnote {
    margin-top: 0.9rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--rk-muted);
}

/* ═══════════════════════════════
   NARROW SCREENS
═══════════════════════════════ */
@media (max-width: 860px) {
    .rk-col-guild, .rk-col-master { display: none; }
    .rk-only-mobile { display: flex !important; }

    /* The cell that ends the row once the columns after it are hidden. */
    .rk-page-main .rk-table td.rk-end-narrow { border-radius: 0 10px 10px 0; }
    .rk-page-main .rk-table tr.rk-top td.rk-end-narrow { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--medal) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--medal) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--medal) 35%, transparent); }
    .rk-class-name + .rk-loc::before { display: none; }
}

@media (max-width: 600px) {
    .rk-page-main { padding: 1rem 0.75rem 2.5rem; }
    .rk-view { min-height: 56px; padding: 0.6rem 0.8rem; }
    .rk-view strong { font-size: 0.85rem; }
    .rk-view small { font-size: 0.68rem; }
    .rk-view::after { font-size: 1.8rem; }
    .rk-filters { width: 100%; }
    .rk-classes { order: 3; width: 100%; justify-content: space-between; }
    .rk-range { margin-left: auto; }
    .rk-panel { padding: 0.25rem 0.35rem 0.4rem; }
    .rk-page-main .rk-table td { padding: 0.45rem 0.45rem; }
    .rk-page-main .rk-table th { padding: 0.5rem 0.45rem 0.2rem; white-space: normal; font-size: 0.6rem; letter-spacing: 0.5px; }
    .rk-col-place { width: 40px; }
    .rk-col-level { width: auto; }
    .rk-col-members { width: auto; }
    .rk-avatar { width: 34px; height: 34px; font-size: 0.85rem; }
    .rk-logo-lg { width: 32px; height: 32px; }
    .rk-who { gap: 0.5rem; }
    .rk-who strong { font-size: 0.85rem; max-width: 120px; }
    .rk-metric { font-size: 1rem; }
    .rk-metric-lg { font-size: 1.05rem; }
}