/* =========================================================
   ASHUNT PUBLIC RANKING V2
   File: public/css/public-rankings.css
========================================================= */

:root {
    --rank-bg: #090c11;
    --rank-panel: rgba(13, 17, 24, .96);
    --rank-panel-soft: rgba(17, 22, 30, .92);
    --rank-line: rgba(255, 255, 255, .075);
    --rank-line-gold: rgba(225, 177, 65, .28);
    --rank-gold: #e1b141;
    --rank-gold-soft: #f1cb70;
    --rank-text: #f4f6f9;
    --rank-muted: #8793a7;
    --rank-success: #4bd796;
    --rank-danger: #ff7480;
}

.public-rank-shell {
    position: relative;
    width: 100%;
    margin: 0;
    color: var(--rank-text);
}

.public-rank-shell::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgba(226, 177, 65, .09), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(117, 68, 25, .08), transparent 32%);
}

/* HERO */

.public-rank-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 185px;
    padding: 30px 34px;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(9, 12, 17, .98), rgba(14, 18, 25, .95)),
        radial-gradient(circle at 80% 50%, rgba(226, 177, 65, .08), transparent 42%);
    border: 1px solid var(--rank-line-gold);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 18px 50px rgba(0, 0, 0, .28);
}

.public-rank-hero::after {
    content: "";
    position: absolute;
    right: -55px;
    top: -110px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(226, 177, 65, .075);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(226, 177, 65, .025),
        0 0 0 70px rgba(226, 177, 65, .015);
}

.public-rank-hero__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.public-rank-hero__eyebrow {
    display: block;
    margin-bottom: 9px;
    color: var(--rank-gold);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.public-rank-hero h1 {
    margin: 0 0 9px;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 4.25rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .98;
}

.public-rank-hero p {
    max-width: 640px;
    margin: 0;
    color: #929eb0;
    font-size: .86rem;
    line-height: 1.6;
}

.public-rank-hero__meta {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(135px, 1fr));
    gap: 9px;
    min-width: 450px;
}

.public-rank-hero__meta > span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .028);
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 11px;
}

.public-rank-hero__meta i {
    color: var(--rank-gold);
    font-size: 1rem;
}

.public-rank-hero__meta small,
.public-rank-hero__meta strong {
    display: block;
}

.public-rank-hero__meta small {
    margin-bottom: 2px;
    color: #68758a;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.public-rank-hero__meta strong {
    color: #e9edf4;
    font-size: .72rem;
}

/* TABS */

.public-rank-tabs {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}

.public-rank-tab {
    position: relative;
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #778397;
    background: rgba(12, 16, 22, .94);
    border: 1px solid var(--rank-line);
    border-radius: 12px;
    text-decoration: none !important;
    transition:
        transform .18s ease,
        border-color .18s ease,
        color .18s ease,
        background .18s ease;
}

.public-rank-tab:hover {
    color: #e7be5a;
    border-color: rgba(226, 177, 65, .24);
    transform: translateY(-2px);
}

.public-rank-tab.is-active {
    color: var(--rank-gold-soft);
    background:
        linear-gradient(180deg, rgba(226, 177, 65, .075), rgba(12, 16, 22, .96));
    border-color: rgba(226, 177, 65, .42);
    box-shadow:
        inset 0 -2px 0 rgba(226, 177, 65, .72),
        0 10px 25px rgba(0, 0, 0, .15);
}

.public-rank-tab.is-development {
    cursor: not-allowed;
    opacity: .42;
}

.public-rank-tab__icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 9px;
}

.public-rank-tab.is-active .public-rank-tab__icon {
    background: rgba(226, 177, 65, .09);
    border-color: rgba(226, 177, 65, .2);
}

.public-rank-tab__label {
    font-size: .67rem;
    font-weight: 800;
    white-space: nowrap;
}

.public-rank-tab small {
    position: absolute;
    top: 6px;
    right: 7px;
    color: #9ea6b2;
    font-size: .48rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* PANEL */

.public-rank-panel {
    overflow: hidden;
    background: var(--rank-panel);
    border: 1px solid var(--rank-line);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .02),
        0 18px 45px rgba(0, 0, 0, .18);
}

/* TOOLBAR */

.public-rank-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, .012);
    border-bottom: 1px solid var(--rank-line);
}

.public-rank-search {
    position: relative;
}

.public-rank-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #647185;
    transform: translateY(-50%);
}

.public-rank-search input,
.public-rank-per-page select {
    height: 44px;
    color: #dbe2eb;
    background: #090c11;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    outline: none;
}

.public-rank-search input {
    width: 100%;
    padding: 0 14px 0 41px;
}

.public-rank-search input:focus,
.public-rank-per-page select:focus {
    border-color: rgba(226, 177, 65, .4);
    box-shadow: 0 0 0 3px rgba(226, 177, 65, .065);
}

.public-rank-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #718096;
    font-size: .68rem;
    font-weight: 800;
}

.public-rank-per-page select {
    min-width: 82px;
    padding: 0 12px;
}

.public-rank-toolbar__submit,
.public-rank-toolbar__clear {
    display: inline-flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 900;
    text-decoration: none !important;
}

.public-rank-toolbar__submit {
    color: #171108;
    background: linear-gradient(180deg, #efc962, #c4932d);
    border: 1px solid rgba(255, 229, 153, .25);
    box-shadow: 0 8px 22px rgba(190, 137, 30, .18);
}

.public-rank-toolbar__clear {
    color: #929daf;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .085);
}

/* TABLE */

.public-rank-table-wrap {
    overflow-x: auto;
}

.public-rank-table {
    width: 100%;
    border-collapse: collapse;
}

.public-rank-table th,
.public-rank-table td {
    padding: 15px 19px;
    border-bottom: 1px solid rgba(255, 255, 255, .052);
    vertical-align: middle;
}

.public-rank-table th {
    color: #657186;
    background: rgba(255, 255, 255, .014);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .085em;
    text-align: left;
    text-transform: uppercase;
}

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

.public-rank-table tbody tr:hover {
    background: rgba(226, 177, 65, .025);
}

.public-rank-position {
    display: inline-flex;
    min-width: 52px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: #8995a7;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 900;
}

.public-rank-position--1 {
    color: #231704;
    background: linear-gradient(180deg, #f2cc65, #be8d28);
    border-color: rgba(255, 223, 134, .4);
}

.public-rank-position--2 {
    color: #181b20;
    background: linear-gradient(180deg, #d5d9df, #929aa6);
    border-color: rgba(255, 255, 255, .25);
}

.public-rank-position--3 {
    color: #241207;
    background: linear-gradient(180deg, #c88b57, #8b562e);
    border-color: rgba(222, 154, 95, .35);
}

.public-rank-subject {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #e7ebf1 !important;
    text-decoration: none !important;
}

.public-rank-subject__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: var(--rank-gold);
    background: rgba(226, 177, 65, .07);
    border: 1px solid rgba(226, 177, 65, .16);
    border-radius: 10px;
}

.public-rank-subject strong,
.public-rank-subject small {
    display: block;
}

.public-rank-subject strong {
    color: #e9edf4;
    font-size: .76rem;
}

.public-rank-subject small {
    margin-top: 2px;
    color: #718096;
    font-size: .58rem;
}

.public-rank-score {
    color: #f1c75e;
    font-size: .78rem;
    font-weight: 900;
}

.public-rank-change {
    display: inline-flex;
    min-width: 36px;
    align-items: center;
    gap: 5px;
    font-size: .67rem;
    font-weight: 900;
}

.public-rank-change--up {
    color: var(--rank-success);
}

.public-rank-change--down {
    color: var(--rank-danger);
}

.public-rank-change--same {
    color: #59667a;
}

/* EMPTY */

.public-rank-empty {
    display: flex;
    min-height: 310px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 55px 20px;
    text-align: center;
}

.public-rank-empty__icon {
    display: inline-flex;
    width: 66px;
    height: 66px;
    align-items: center;
    justify-content: center;
    color: var(--rank-gold);
    background: rgba(226, 177, 65, .065);
    border: 1px solid rgba(226, 177, 65, .17);
    border-radius: 18px;
}

.public-rank-empty h3 {
    margin: 17px 0 7px;
    color: #edf0f5;
    font-size: 1rem;
}

.public-rank-empty p {
    max-width: 560px;
    margin: 0;
    color: #768397;
    font-size: .72rem;
    line-height: 1.6;
}

/* PAGINATION */

.public-rank-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    color: #718096;
    border-top: 1px solid rgba(255, 255, 255, .055);
    font-size: .67rem;
}

.public-rank-pagination .pagination {
    margin: 0;
}

.public-rank-pagination .page-link {
    color: #8f9aac;
    background: #0a0d12;
    border-color: rgba(255, 255, 255, .075);
}

.public-rank-pagination .page-item.active .page-link {
    color: #1b1306;
    background: var(--rank-gold);
    border-color: var(--rank-gold);
}

/* THEME OVERRIDE */

body .card:has(.public-rank-shell) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body .card:has(.public-rank-shell) > .card-header {
    display: none !important;
}

body .card:has(.public-rank-shell) > .card-body {
    padding: 0 !important;
}

/* RESPONSIVE */

@media (max-width: 1250px) {
    .public-rank-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-rank-hero__meta {
        width: 100%;
        min-width: 0;
    }

    .public-rank-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .public-rank-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .public-rank-toolbar {
        grid-template-columns: 1fr 120px;
    }

    .public-rank-toolbar__submit,
    .public-rank-toolbar__clear {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .public-rank-hero {
        padding: 23px 20px;
    }

    .public-rank-hero__meta {
        grid-template-columns: 1fr;
    }

    .public-rank-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-rank-toolbar {
        grid-template-columns: 1fr;
    }

    .public-rank-per-page {
        justify-content: space-between;
    }

    .public-rank-table th,
    .public-rank-table td {
        padding: 12px;
    }

    .public-rank-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

.public-rank-level {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    color: #d4dbe5;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 800;
}

.public-rank-score-label {
    display: block;
    margin-top: 3px;
    color: #68758a;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.public-rank-change--new {
    color: #e1b141;
    font-size: .58rem;
    letter-spacing: .07em;
}

.public-rank-position--1 {
    gap: 5px;
}

.public-rank-subject__avatar{

    width:56px;
    height:56px;

    border-radius:12px;

    overflow:hidden;

    border:1px solid rgba(224,173,59,.35);

    background:#0d1119;

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

    flex-shrink:0;

}

.public-rank-subject__avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.public-rank-subject{

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

}

.public-rank-subject strong{

    display:block;

    font-size:.95rem;

}

/* =========================================================
   ACTIVITY RANK — CHARACTER AVATAR
========================================================= */

.public-rank-subject__avatar {
    position: relative;
    display: inline-flex;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgba(226, 177, 65, .08), transparent 65%),
        #090c11;
    border: 1px solid rgba(226, 177, 65, .30);
    border-radius: 12px;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, .38),
        0 7px 16px rgba(0, 0, 0, .16);
}

.public-rank-subject__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.public-rank-subject__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.public-rank-subject__identity strong {
    overflow: hidden;
    color: #edf1f6;
    font-size: .78rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-rank-subject__identity small {
    margin-top: 3px;
    color: #718096;
    font-size: .58rem;
}

.public-rank-table--activity .public-rank-subject {
    gap: 14px;
}

.public-rank-table--activity .public-rank-score {
    display: inline-block;
    color: #efc34f;
    font-size: .82rem;
}

.public-rank-change--new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 25px;
    padding: 0 8px;
    color: #e7b842;
    background: rgba(226, 177, 65, .07);
    border: 1px solid rgba(226, 177, 65, .17);
    border-radius: 6px;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.public-rank-level {
    display: inline-flex;
    min-width: 51px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: #d4dbe5;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 800;
}

.public-rank-position--1 {
    gap: 5px;
}

@media (max-width: 620px) {
    .public-rank-subject__avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 10px;
    }
}

/* =====================================================
   LEVEL RANK
===================================================== */

.public-rank-table--level th:nth-child(1) {
    width: 10%;
}

.public-rank-table--level th:nth-child(2) {
    width: 23%;
}

.public-rank-table--level th:nth-child(3) {
    width: 18%;
}

.public-rank-table--level th:nth-child(4) {
    width: 12%;
}

.public-rank-table--level th:nth-child(5) {
    width: 27%;
}

.public-rank-table--level th:nth-child(6) {
    width: 10%;
}

/* Son Level 80 kahramanı */

.public-rank-row--level-hero {
    position: relative;

    background:
        radial-gradient(
            circle at 12% 50%,
            rgba(235, 177, 44, .16),
            transparent 32%
        ),
        linear-gradient(
            90deg,
            rgba(124, 81, 13, .16),
            rgba(14, 18, 25, .62) 48%,
            rgba(120, 75, 8, .1)
        );
}

.public-rank-row--level-hero td {
    border-top:
        1px solid rgba(237, 183, 54, .44);

    border-bottom:
        1px solid rgba(237, 183, 54, .38);
}

.public-rank-row--level-hero td:first-child {
    box-shadow:
        inset 3px 0 0 rgba(238, 181, 49, .9);
}

.public-rank-row--level-hero td:last-child {
    box-shadow:
        inset -3px 0 0 rgba(238, 181, 49, .9);
}

.public-rank-position--level-hero {
    min-width: 78px;

    color: #151006;

    background:
        linear-gradient(
            180deg,
            #ffe374 0%,
            #d7991d 100%
        );

    border:
        1px solid rgba(255, 231, 142, .92);

    box-shadow:
        0 0 24px rgba(226, 160, 26, .26),
        inset 0 1px 0 rgba(255, 255, 255, .38);
}

.public-rank-level--hero {
    color: #ffd75e;

    border-color:
        rgba(237, 180, 44, .48);

    background:
        rgba(201, 137, 15, .1);

    box-shadow:
        inset 0 0 16px rgba(215, 144, 12, .08),
        0 0 18px rgba(215, 144, 12, .06);
}

.public-rank-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 4px;

    color: #c7962e;
}

.public-rank-hero-label i {
    font-size: 9px;
}

/* Level 80 başarı metni */

.public-rank-level-achievement {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #e6b744;
}

.public-rank-level-achievement > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border:
        1px solid rgba(225, 168, 37, .34);

    border-radius: 10px;

    background:
        rgba(197, 129, 13, .09);

    box-shadow:
        inset 0 0 14px rgba(227, 165, 31, .06);
}

.public-rank-level-achievement span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.public-rank-level-achievement strong {
    color: #f0c54c;
    font-size: 13px;
    line-height: 1.2;
}

.public-rank-level-achievement small {
    color: #7d899e;
    font-size: 9px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* =====================================================
   ANIMATED EXP BAR
===================================================== */

.public-rank-exp-cell {
    min-width: 260px;
}

.public-rank-exp {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    max-width: 390px;
}

.public-rank-exp__track {
    position: relative;

    width: 100%;
    height: 12px;

    overflow: hidden;

    border:
        1px solid rgba(89, 117, 151, .34);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 8, 15, .94),
            rgba(13, 21, 31, .88)
        );

    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, .72),
        0 0 0 1px rgba(255, 255, 255, .018);
}

.public-rank-exp__track::before {
    content: "";

    position: absolute;
    inset: 2px;

    z-index: 0;

    border-radius: inherit;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 0,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px,
            transparent 18px
        );
}

.public-rank-exp__fill {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;

    z-index: 1;

    width:
        min(
            calc(var(--exp-progress, 0%) - 2px),
            calc(100% - 2px)
        );

    min-width: 0;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #0759a6 0%,
            #078ee2 42%,
            #18c6ff 74%,
            #7ce9ff 100%
        );

    box-shadow:
        0 0 8px rgba(21, 169, 244, .56),
        0 0 17px rgba(12, 142, 225, .25),
        inset 0 1px 0 rgba(255, 255, 255, .34);

    transition:
        width .8s cubic-bezier(.22, .8, .26, 1);
}

/*
 * Barın içinde sürekli soldan sağa ilerleyen ışık.
 */
.public-rank-exp__shine {
    position: absolute;
    top: -8px;
    bottom: -8px;

    width: 54px;

    transform: skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, .04) 18%,
            rgba(255, 255, 255, .88) 50%,
            rgba(151, 234, 255, .28) 72%,
            transparent 100%
        );

    filter:
        blur(.2px);

    animation:
        ashunt-exp-light 2.25s
        cubic-bezier(.4, 0, .2, 1)
        infinite;
}

/*
 * Bar ucundaki hareketli enerji parlaması.
 */
.public-rank-exp__fill::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -1px;

    width: 9px;
    height: 9px;

    transform:
        translateY(-50%)
        rotate(45deg);

    border-radius: 2px;

    background: #d7f8ff;

    box-shadow:
        0 0 5px #ffffff,
        0 0 10px #54d8ff,
        0 0 18px rgba(28, 175, 255, .92);

    animation:
        ashunt-exp-pulse 1.35s ease-in-out infinite;
}

.public-rank-exp__value {
    flex: 0 0 56px;

    color: #23aaff;

    font-size: 13px;
    line-height: 1;
    text-align: right;

    text-shadow:
        0 0 10px rgba(21, 158, 244, .24);
}

@keyframes ashunt-exp-light {
    0% {
        left: -70px;
        opacity: 0;
    }

    15% {
        opacity: .82;
    }

    75% {
        opacity: .72;
    }

    100% {
        left: calc(100% + 30px);
        opacity: 0;
    }
}

@keyframes ashunt-exp-pulse {
    0%,
    100% {
        opacity: .76;

        transform:
            translateY(-50%)
            rotate(45deg)
            scale(.82);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-50%)
            rotate(45deg)
            scale(1.12);
    }
}

/* Hareket azaltma tercihi */

@media (prefers-reduced-motion: reduce) {
    .public-rank-exp__shine,
    .public-rank-exp__fill::after {
        animation: none;
    }
}

/* Responsive */

@media (max-width: 991.98px) {
    .public-rank-table--level {
        min-width: 980px;
    }

    .public-rank-exp {
        min-width: 240px;
    }
}

/* =====================================================
   GUILD RANK
===================================================== */

.public-rank-table--guild th:nth-child(1) {
    width: 10%;
}

.public-rank-table--guild th:nth-child(2) {
    width: 30%;
}

.public-rank-table--guild th:nth-child(3) {
    width: 16%;
}

.public-rank-table--guild th:nth-child(4) {
    width: 14%;
}

.public-rank-table--guild th:nth-child(5) {
    width: 20%;
}

.public-rank-table--guild th:nth-child(6) {
    width: 10%;
}

.public-rank-subject--guild {
    min-width: 230px;
}

.public-rank-subject__avatar--guild-master {
    position: relative;

    border-color:
        rgba(222, 171, 61, .42);

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(235, 183, 58, .18),
            rgba(12, 16, 23, .94) 72%
        );

    box-shadow:
        inset 0 0 14px rgba(236, 181, 50, .07),
        0 0 16px rgba(214, 151, 25, .08);
}

.public-rank-subject__avatar--guild-master::after {
    content: "\f521";

    position: absolute;
    right: -5px;
    bottom: -4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    color: #151006;

    font-family: "Font Awesome 6 Free";
    font-size: 8px;
    font-weight: 900;

    border:
        1px solid rgba(255, 232, 143, .85);

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #ffe07a,
            #c88a18
        );

    box-shadow:
        0 0 10px rgba(226, 163, 29, .28);
}

.public-rank-guild-master {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 4px;

    color: #8c97aa;
}

.public-rank-guild-master i {
    color: #c8952c;
    font-size: 8px;
}

.public-rank-guild-level,
.public-rank-members {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-width: 82px;

    color: #b8c2d2;
    font-size: 12px;
    font-weight: 700;
}

.public-rank-guild-level i {
    color: #d0a23a;
}

.public-rank-members i {
    color: #6b91bc;
}

.public-rank-score--guild {
    color: #e7b84a;

    text-shadow:
        0 0 12px rgba(221, 164, 42, .13);
}

@media (max-width: 991.98px) {
    .public-rank-table--guild {
        min-width: 920px;
    }
}

/* =====================================================
   JOB RANK
===================================================== */

.public-rank-table--job th:nth-child(1) {
    width: 10%;
}

.public-rank-table--job th:nth-child(2) {
    width: 28%;
}

.public-rank-table--job th:nth-child(3) {
    width: 18%;
}

.public-rank-table--job th:nth-child(4) {
    width: 14%;
}

.public-rank-table--job th:nth-child(5) {
    width: 20%;
}

.public-rank-table--job th:nth-child(6) {
    width: 10%;
}

.public-rank-player-job,
.public-rank-job,
.public-rank-job-level {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.public-rank-player-job {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.public-rank-job {
    min-width: 108px;
    padding: 7px 11px;

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .025),
            rgba(255, 255, 255, .01)
        );
}

.public-rank-job i {
    width: 18px;
    text-align: center;
}

.public-rank-job strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.public-rank-job-level {
    min-width: 74px;
    justify-content: center;

    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;

    font-size: 11px;
    font-weight: 800;
}

.public-rank-job-exp {
    font-size: 13px;
    font-weight: 800;
}

/* Trader */

.public-rank-player-job--trader,
.public-rank-job--trader,
.public-rank-job-level--trader,
.public-rank-job-exp--trader {
    color: #d8ad52;
}

.public-rank-job--trader,
.public-rank-job-level--trader {
    border-color: rgba(216, 173, 82, .24);

    background:
        linear-gradient(
            180deg,
            rgba(216, 173, 82, .09),
            rgba(65, 47, 14, .08)
        );

    box-shadow:
        inset 0 0 14px rgba(216, 173, 82, .04);
}

/* Hunter */

.public-rank-player-job--hunter,
.public-rank-job--hunter,
.public-rank-job-level--hunter,
.public-rank-job-exp--hunter {
    color: #55bfff;
}

.public-rank-job--hunter,
.public-rank-job-level--hunter {
    border-color: rgba(58, 164, 231, .26);

    background:
        linear-gradient(
            180deg,
            rgba(28, 140, 210, .1),
            rgba(9, 41, 66, .08)
        );

    box-shadow:
        inset 0 0 14px rgba(36, 160, 236, .04);
}

/* Thief */

.public-rank-player-job--thief,
.public-rank-job--thief,
.public-rank-job-level--thief,
.public-rank-job-exp--thief {
    color: #d46b72;
}

.public-rank-job--thief,
.public-rank-job-level--thief {
    border-color: rgba(212, 107, 114, .26);

    background:
        linear-gradient(
            180deg,
            rgba(181, 54, 67, .1),
            rgba(64, 14, 21, .08)
        );

    box-shadow:
        inset 0 0 14px rgba(202, 68, 80, .04);
}

/* General */

.public-rank-player-job--general,
.public-rank-job--general,
.public-rank-job-level--general,
.public-rank-job-exp--general {
    color: #9aa7ba;
}

.public-rank-job--general,
.public-rank-job-level--general {
    border-color: rgba(154, 167, 186, .18);

    background:
        linear-gradient(
            180deg,
            rgba(154, 167, 186, .06),
            rgba(32, 39, 50, .08)
        );
}

@media (max-width: 991.98px) {
    .public-rank-table--job {
        min-width: 940px;
    }
}

/* =====================================================
   SHARED SUB RANK TABS
   JOB: GENERAL / TRADER / HUNTER / THIEF
   UNIQUE: GENERAL / STR / INT
===================================================== */

.public-subrank-tabs {
    display: grid;
    gap: 10px;
    padding: 14px 16px 0;
}

.public-subrank-tabs--job {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-subrank-tabs--unique {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-subrank-tab {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 10px 16px;
    overflow: hidden;
    color: #7f8a9d;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 11px;
    background:
        linear-gradient(
            180deg,
            rgba(20, 25, 33, .94) 0%,
            rgba(12, 16, 23, .96) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .018),
        0 8px 18px rgba(0, 0, 0, .12);
    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.public-subrank-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(230, 174, 55, .16),
            transparent 62%
        );
    transition: opacity .22s ease;
}

.public-subrank-tab:hover {
    color: #d4a83f;
    border-color: rgba(219, 168, 55, .3);
    transform: translateY(-1px);
}

.public-subrank-tab:hover::before,
.public-subrank-tab.active::before {
    opacity: 1;
}

.public-subrank-tab.active {
    color: #efc34e;
    border-color: rgba(235, 185, 67, .82);
    background:
        linear-gradient(
            180deg,
            rgba(91, 64, 18, .38) 0%,
            rgba(27, 23, 17, .96) 100%
        );
    box-shadow:
        inset 0 0 22px rgba(225, 171, 50, .085),
        0 0 18px rgba(218, 160, 37, .08),
        0 9px 20px rgba(0, 0, 0, .14);
}

.public-subrank-tab__icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 8px;
    background: rgba(255, 255, 255, .022);
    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.public-subrank-tab.active .public-subrank-tab__icon {
    border-color: rgba(226, 172, 50, .29);
    background: rgba(205, 143, 20, .09);
    box-shadow:
        inset 0 0 12px rgba(231, 175, 50, .045);
}

.public-subrank-tab__icon i {
    font-size: 12px;
}

.public-subrank-tab__label {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .055em;
}

/* Job tab accents */

.public-subrank-tab--trader:hover,
.public-subrank-tab--trader.active {
    color: #ddb34f;
}

.public-subrank-tab--hunter:hover,
.public-subrank-tab--hunter.active {
    color: #67b9ed;
}

.public-subrank-tab--hunter.active {
    border-color: rgba(71, 159, 218, .52);
    background:
        linear-gradient(
            180deg,
            rgba(23, 75, 109, .3) 0%,
            rgba(14, 22, 30, .96) 100%
        );
    box-shadow:
        inset 0 0 22px rgba(58, 160, 225, .06),
        0 0 17px rgba(44, 143, 207, .055);
}

.public-subrank-tab--thief:hover,
.public-subrank-tab--thief.active {
    color: #d87379;
}

.public-subrank-tab--thief.active {
    border-color: rgba(190, 73, 82, .49);
    background:
        linear-gradient(
            180deg,
            rgba(91, 25, 32, .3) 0%,
            rgba(27, 16, 20, .96) 100%
        );
    box-shadow:
        inset 0 0 22px rgba(197, 69, 79, .055),
        0 0 17px rgba(180, 53, 64, .05);
}

/* Unique tab accents */

.public-subrank-tab--str:hover,
.public-subrank-tab--str.active {
    color: #efb45a;
}

.public-subrank-tab--str.active {
    border-color: rgba(229, 148, 51, .55);
    background:
        linear-gradient(
            180deg,
            rgba(101, 54, 17, .34) 0%,
            rgba(29, 20, 14, .96) 100%
        );
    box-shadow:
        inset 0 0 22px rgba(229, 148, 51, .06),
        0 0 17px rgba(211, 123, 30, .055);
}

.public-subrank-tab--int:hover,
.public-subrank-tab--int.active {
    color: #8e9fff;
}

.public-subrank-tab--int.active {
    border-color: rgba(103, 119, 229, .55);
    background:
        linear-gradient(
            180deg,
            rgba(35, 42, 105, .34) 0%,
            rgba(16, 18, 35, .96) 100%
        );
    box-shadow:
        inset 0 0 22px rgba(93, 110, 235, .06),
        0 0 17px rgba(82, 100, 218, .055);
}

/* Keep toolbar layout intact */

.public-subrank-tabs + .public-rank-toolbar {
    border-top: 0;
}

/* Responsive */

@media (max-width: 991.98px) {
    .public-subrank-tabs--job,
    .public-subrank-tabs--unique {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .public-subrank-tabs--job,
    .public-subrank-tabs--unique {
        grid-template-columns: 1fr;
    }

    .public-subrank-tab {
        min-height: 52px;
    }
}

/* =====================================================
   HONOR RANK
===================================================== */

.public-rank-table--honor th:nth-child(1) {
    width: 10%;
}

.public-rank-table--honor th:nth-child(2) {
    width: 31%;
}

.public-rank-table--honor th:nth-child(3) {
    width: 22%;
}

.public-rank-table--honor th:nth-child(4) {
    width: 15%;
}

.public-rank-table--honor th:nth-child(5) {
    width: 12%;
}

.public-rank-table--honor th:nth-child(6) {
    width: 10%;
}

.public-rank-player-honor {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: #b99548 !important;
    font-weight: 800;
    letter-spacing: .035em;
}

.public-rank-player-honor i {
    color: #dfb54d;
    font-size: 9px;
}

.public-rank-honor-rank {
    display: inline-flex;
    min-width: 72px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 11px;
    color: #e3bd5e;
    background:
        linear-gradient(
            180deg,
            rgba(225, 177, 65, .10),
            rgba(84, 58, 13, .08)
        );
    border: 1px solid rgba(225, 177, 65, .24);
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 900;
    box-shadow:
        inset 0 0 14px rgba(225, 177, 65, .035);
}

.public-rank-honor-rank i {
    color: #d7a83d;
    font-size: 11px;
}

.public-rank-honor-points {
    color: #f0c75f;
    font-size: .82rem;
    font-weight: 900;
    text-shadow:
        0 0 12px rgba(225, 177, 65, .13);
}

.public-rank-row--honor:hover {
    background:
        linear-gradient(
            90deg,
            rgba(225, 177, 65, .035),
            rgba(225, 177, 65, .012)
        );
}

@media (max-width: 991.98px) {
    .public-rank-table--honor {
        min-width: 940px;
    }
}

/* =====================================================
   RUNE RANK
===================================================== */

.public-rank-table--rune {
    min-width: 1180px;
}

.public-rank-table--rune th:nth-child(1) { width: 8%; }
.public-rank-table--rune th:nth-child(2) { width: 22%; }
.public-rank-table--rune th:nth-child(3) { width: 14%; }
.public-rank-table--rune th:nth-child(4) { width: 11%; }
.public-rank-table--rune th:nth-child(5) { width: 11%; }
.public-rank-table--rune th:nth-child(6) { width: 11%; }
.public-rank-table--rune th:nth-child(7) { width: 15%; }
.public-rank-table--rune th:nth-child(8) { width: 8%; }

.public-rank-rune {
    display: inline-flex;
    min-width: 68px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 900;
}

.public-rank-rune--human {
    color: #ff7474;
    background: rgba(255, 70, 70, .08);
    border: 1px solid rgba(255, 70, 70, .20);
}

.public-rank-rune--dwarf {
    color: #f0c75f;
    background: rgba(240, 199, 95, .08);
    border: 1px solid rgba(240, 199, 95, .20);
}

.public-rank-rune--elf {
    color: #65d48a;
    background: rgba(101, 212, 138, .08);
    border: 1px solid rgba(101, 212, 138, .20);
}

.public-rank-rune--power {
    color: #c997ff;
    background: rgba(151, 82, 224, .12);
    border: 1px solid rgba(190, 123, 255, .38);
    box-shadow:
        inset 0 0 12px rgba(151, 82, 224, .08),
        0 0 10px rgba(151, 82, 224, .10);
}

.public-rank-rune-progress {
    min-width: 170px;
}

.public-rank-rune-progress__bar {
    height: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 999px;
    background: #11161f;
}

.public-rank-rune-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, #d79f28, #ffd96a);
}

.public-rank-rune-progress strong {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: #efc75d;
    font-size: .68rem;
}

.public-rank-rune-progress i {
    color: #ffd86a;
}


/* =====================================================
   VIP RANK
===================================================== */

.public-rank-table--vip {
    min-width: 980px;
}

.public-rank-table--vip th:nth-child(1) { width: 9%; }
.public-rank-table--vip th:nth-child(2) { width: 28%; }
.public-rank-table--vip th:nth-child(3) { width: 18%; }
.public-rank-table--vip th:nth-child(4) { width: 13%; }
.public-rank-table--vip th:nth-child(5) { width: 14%; }
.public-rank-table--vip th:nth-child(6) { width: 10%; }
.public-rank-table--vip th:nth-child(7) { width: 8%; }

.public-rank-player-vip {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: #d3a9ff !important;
    font-weight: 800;
    letter-spacing: .04em;
}

.public-rank-player-vip i {
    color: #c78aff;
    font-size: 9px;
}

.public-rank-vip-level {
    display: inline-flex;
    min-width: 82px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 11px;
    color: #d7b4ff;
    background:
        linear-gradient(
            180deg,
            rgba(144, 82, 205, .14),
            rgba(53, 28, 78, .10)
        );
    border: 1px solid rgba(174, 112, 232, .28);
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 900;
    box-shadow:
        inset 0 0 14px rgba(172, 105, 235, .04);
}

.public-rank-vip-level i {
    color: #c78aff;
    font-size: 10px;
}

.public-rank-vip-points {
    color: #d8b5ff;
    font-size: .82rem;
    font-weight: 900;
    text-shadow:
        0 0 12px rgba(172, 105, 235, .16);
}

.public-rank-vip-progress-cell {
    min-width: 210px;
}

.public-rank-vip-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 300px;
}

.public-rank-vip-progress__track {
    position: relative;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 1px solid rgba(150, 108, 190, .28);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 7, 14, .95),
            rgba(20, 15, 29, .92)
        );
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, .68);
}

.public-rank-vip-progress__fill {
    position: absolute;
    inset: 1px auto 1px 1px;
    overflow: hidden;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #6d37a5 0%,
            #a35ee5 55%,
            #d3a0ff 100%
        );
    box-shadow:
        0 0 10px rgba(164, 91, 226, .35),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.public-rank-vip-progress__shine {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 46px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .78),
            transparent
        );
    transform: skewX(-20deg);
    animation: ashunt-vip-progress-light 2.35s linear infinite;
}

.public-rank-vip-progress strong {
    flex: 0 0 52px;
    color: #c998f5;
    font-size: .72rem;
    text-align: right;
}

.public-rank-row--vip:hover {
    background:
        linear-gradient(
            90deg,
            rgba(142, 75, 204, .035),
            rgba(142, 75, 204, .012)
        );
}

@keyframes ashunt-vip-progress-light {
    from {
        left: -55px;
        opacity: 0;
    }

    18% {
        opacity: .8;
    }

    82% {
        opacity: .7;
    }

    to {
        left: calc(100% + 20px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-rank-vip-progress__shine {
        animation: none;
    }
}

/* ASHUNT PVP K/D RANK */

.public-rank-kd-stat,
.public-rank-kd-ratio,
.public-rank-kd-points {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.public-rank-kd-stat {
    font-weight: 700;
}

.public-rank-kd-ratio {
    font-weight: 800;
}

.public-rank-kd-points {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 900;
    letter-spacing: .02em;
}

.public-rank-kd-points--positive {
    color: #22c55e;
    background: rgba(34, 197, 94, .10);
    border: 1px solid rgba(34, 197, 94, .22);
}

.public-rank-kd-points--negative {
    color: #ef4444;
    background: rgba(239, 68, 68, .10);
    border: 1px solid rgba(239, 68, 68, .22);
}

.public-rank-kd-points--neutral {
    color: #94a3b8;
    background: rgba(148, 163, 184, .08);
    border: 1px solid rgba(148, 163, 184, .18);
}