#ranking-view {
    position: fixed;
    inset: 0;
    background: #050505 url("../image/bg/ranking.png") center / 1920px 960px no-repeat;
    color: #cdbb9b;
}

.ranking-heading {
    position: absolute;
    left: 50%;
    top: 48px;
    z-index: 4;
    box-sizing: border-box;
    width: 520px;
    min-height: 72px;
    padding: 12px 36px 14px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(10, 8, 5, .88) 17%, rgba(10, 8, 5, .88) 83%, transparent);
    text-align: center;
    pointer-events: none;
}

.ranking-heading h1 {
    margin: 2px 0 0;
    color: #e5c77e;
    font: 700 34px/1.05 var(--font-title);
    text-shadow: 0 3px 2px #000, 0 0 18px rgba(197, 160, 89, .28);
}

.ranking-panel {
    position: absolute;
    top: 92px;
    width: 516px;
    height: 768px;
    overflow: hidden;
}

.ranking-panel--players { left: 205px; }
.ranking-panel--banners { left: 1165px; }

.ranking-panel__heading {
    position: absolute;
    left: 34px;
    right: 34px;
    top: 22px;
    text-align: center;
    text-shadow: 0 2px 0 #000;
}

.ranking-panel__heading h1 {
    margin: 0;
    color: #d3b77d;
    font: 700 25px/1.15 var(--font-title);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ranking-panel__heading p {
    margin: 7px 0 0;
    color: #8f8065;
    font: 600 15px/1.2 var(--font-body);
    letter-spacing: .04em;
}

.ranking-list {
    position: absolute;
    left: 36px;
    right: 36px;
    top: 92px;
    bottom: 102px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 8px 12px 0;
    scrollbar-width: none;
}

.ranking-panel--players .ranking-list { right: 4px; }

.ranking-list::-webkit-scrollbar { width: 0; height: 0; }

.ranking-scrollbar {
    position: absolute;
    top: 94px;
    right: 36px;
    bottom: 104px;
    z-index: 2;
    width: 16px;
    border: 1px solid rgba(45, 36, 25, .72);
    background: rgba(12, 10, 8, .58);
    touch-action: none;
}

.ranking-panel--players .ranking-scrollbar { right: 0; }
.ranking-panel--banners .ranking-scrollbar { right: 32px; }
.ranking-scrollbar[hidden] { display: none; }

.ranking-scrollbar > span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 32px;
    border: 1px solid #2d2419;
    box-sizing: border-box;
    background: #80663d;
}

.ranking-row {
    display: grid;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(154, 121, 68, .16);
    background: linear-gradient(90deg, rgba(91, 63, 31, .12), transparent 78%);
}

.ranking-row:nth-child(even) { background-color: rgba(63, 43, 24, .08); }
.ranking-row:first-child { box-shadow: inset 0 0 0 1px rgba(191, 146, 73, .27); background-color: rgba(121, 81, 34, .15); }
.ranking-row > strong { color: #b99a62; font: 700 16px/1 var(--font-title); text-align: center; }
.ranking-row > span { overflow: hidden; color: #caba95; font: 600 15px/1.2 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.ranking-row > b { color: #d7bc84; font: 700 14px/1 var(--font-title); text-align: right; white-space: nowrap; }

.ranking-row--player {
    grid-template-columns: 42px minmax(0, 1fr) 152px 82px;
    min-height: 34px;
    padding: 0 12px 0 4px;
}

.ranking-row--player > small { overflow: hidden; color: #796d5a; font: 600 13px/1.15 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.ranking-row--player.is-current-player { background: linear-gradient(90deg, rgba(112, 81, 38, .34), rgba(74, 54, 31, .1)); box-shadow: inset 0 0 0 1px rgba(205, 174, 105, .4); }

.ranking-row--banner {
    grid-template-columns: 42px 46px minmax(0, 1fr) 76px;
    min-height: 62px;
    padding: 0 15px 0 4px;
}

.ranking-row--banner > i {
    width: 40px;
    height: 54px;
    background: url("../image/map/banner_player.png") var(--ranking-banner-x) 0 / 320px 88px no-repeat;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .72));
}

.ranking-cycle-button {
    position: absolute;
    bottom: 34px;
    width: 304px;
    height: 45px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #cab488;
    font: 700 16px/1 var(--font-title);
    text-shadow: 0 2px 0 #000;
    text-transform: none;
}

.ranking-panel--players .ranking-cycle-button { left: 112px; }
.ranking-panel--banners .ranking-cycle-button { left: 135px; }

.ranking-cycle-button:hover,
.ranking-cycle-button:focus-visible { color: #f0d6a0; }

.ranking-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 30px;
    color: #8f8065;
    font: 600 16px/1.5 var(--font-body);
    text-align: center;
}

.ranking-status {
    position: absolute;
    left: 760px;
    top: 84px;
    width: 400px;
    margin: 0;
    color: #baa47b;
    font: 700 15px/1.4 var(--font-title);
    text-align: center;
    text-shadow: 0 2px 0 #000;
}

.ranking-status[data-kind="error"] { color: #c88678; }
.ranking-status[hidden] { display: none; }

.ranking-back-button {
    position: absolute;
    left: 810px;
    bottom: 166px;
    z-index: 3;
    color: #cab488;
    font: 700 16px/1 var(--font-title);
    text-transform: none;
    text-shadow: 0 2px 0 #000;
}