.hero-rank, .profit-rank {
    --rank-ink: #fff2d7;
    --rank-muted: #ccbbd9;
    --rank-gold: #ffda86;
    --rank-border: #ecc67c45;
    --rank-panel: #21162f;
    --rank-art: url('/static/profit-rank/leaderboard-stage.webp');
}

.hero-rank .title_line { align-items: center; margin-bottom: 9px; }
.hero-rank .title_line .title { font-weight: 800; }
.hero-rank .title_line .more_link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 0;
    height: auto;
    padding: 0 5px;
    border: 0;
    background: none;
    font-size: clamp(10px, 2.9vw, 13px);
    line-height: 1.15;
    color: var(--rank-gold);
}

.hero-rank .hero-rank__card {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rank-border);
    border-radius: 17px;
    background: #21162f;
    box-shadow: 0 10px 24px #08040e88;
}

.hero-rank .hero-rank__card::before { content: none; }
.hero-rank .hero-rank__card-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: clamp(104px, 31vw, 148px);
    padding: 12px 16px;
    box-sizing: border-box;
    margin: 0;
    background:
        linear-gradient(90deg, #24153999, #24153916 58%),
        linear-gradient(0deg, #21162f 1%, #21162f00 65%),
        var(--rank-art) right center / cover no-repeat;
}

.hero-rank .hero-rank__tab {
    width: auto;
    min-height: 0;
    padding: 0;
    text-align: left;
    background: none;
    border-radius: 0;
    font-size: clamp(16px, 5vw, 23px);
    font-weight: 850;
    color: var(--rank-ink);
    text-shadow: 0 2px 8px #170c24;
}

.hero-rank .hero-rank__guide {
    position: static;
    transform: none;
    color: var(--rank-gold);
    font-size: clamp(10px, 3vw, 14px);
    margin-top: 5px;
}

:is(.hero-rank, .profit-rank) .profit-rank-podium {
    min-height: 0;
    padding: 0;
    align-items: end;
    gap: 0;
}

:is(.hero-rank, .profit-rank) .profit-rank-podium__slot {
    --medal-tone: #d5deef;
    --medal-wash: #b5c3ef28;
    min-width: 0;
    min-height: 0;
    padding: 8px 4px 11px;
    border-radius: 0;
    background: transparent;
}

:is(.hero-rank, .profit-rank) .profit-rank-podium__slot.is-gold {
    --medal-tone: #ffdb82;
    --medal-wash: #f6be4f3d;
}

:is(.hero-rank, .profit-rank) .profit-rank-podium__slot.is-bronze {
    --medal-tone: #ffb589;
    --medal-wash: #e6986633;
}

:is(.hero-rank, .profit-rank) .profit-rank-podium__medal-wrap {
    margin: 0 0 4px;
    filter: drop-shadow(0 3px 8px var(--medal-wash));
}

:is(.hero-rank, .profit-rank) .profit-rank-podium__name {
    margin-bottom: 4px;
    color: var(--rank-ink);
}

:is(.hero-rank, .profit-rank) .profit-rank-podium__amount {
    font-size: clamp(12px, 3.55vw, 18px);
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

:is(.hero-rank, .profit-rank) .profit-rank-podium__reward {
    color: #ffbb79;
    font-size: clamp(10px, 3vw, 15px);
    overflow-wrap: anywhere;
}

.hero-rank .profit-rank-podium {
    align-items: stretch;
    border-top: 1px solid #ecca8050;
    background: linear-gradient(180deg, #392546, #21162f 80%);
}

.hero-rank .profit-rank-podium__slot + .profit-rank-podium__slot {
    border-left: 1px solid #f5d1922e;
}

.hero-rank .profit-rank-podium__slot.is-gold {
    background: radial-gradient(ellipse at 50% 0%, #b784403b, transparent 78%);
}

.hero-rank .profit-rank-podium__medal {
    width: clamp(36px, 12vw, 55px);
    height: clamp(36px, 12vw, 55px);
}

.profit-rank[data-v-209e8fe0] {
    background: radial-gradient(ellipse at 53% 7%, #432450 0%, #171022 48%);
}

.profit-rank .rank-art {
    display: flex;
    align-items: center;
    height: clamp(132px, 42vw, 202px);
    margin: 0 0 -19px;
    padding: 0 clamp(15px, 5vw, 25px) 18px;
    box-sizing: border-box;
    background:
        linear-gradient(0deg, #21142f, #21142f00 54%),
        linear-gradient(90deg, #23143425, transparent 55%),
        var(--rank-art) right center / cover no-repeat;
}

.profit-rank .rank-art__title {
    margin: 0;
    max-width: 42%;
    color: var(--rank-ink);
    font-size: clamp(21px, 6vw, 32px);
    font-weight: 850;
    line-height: 1.12;
    text-shadow: 0 2px 11px #190c29;
}

.profit-rank .tabs {
    position: relative;
    margin-inline: clamp(12px, 4vw, 20px);
    border: 1px solid var(--rank-border);
    border-radius: 10px;
    background: #251832;
    padding: 4px;
    box-shadow: 0 7px 15px #0d081975;
}
.profit-rank .tabs .tab { border-radius: 7px; color: var(--rank-muted); }
.profit-rank .tabs .tab--active {
    color: #2b1727;
    font-weight: 850;
    background: linear-gradient(105deg, #ffe9b1, #ecb156);
}

.profit-rank .content { display: flex; flex-direction: column; gap: 11px; }
.profit-rank .content > .podium-card { order: -2; }
.profit-rank .content > .table-wrap { order: -1; }
.profit-rank .podium-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rank-border);
    border-radius: 14px;
    background: var(--rank-panel);
}

.profit-rank .profit-rank-podium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 'champion champion' 'silver bronze';
    align-items: stretch;
}

.profit-rank .profit-rank-podium__slot.is-gold {
    grid-area: champion;
    display: grid;
    grid-template-columns: clamp(62px, 22vw, 108px) 1fr;
    align-items: center;
    justify-content: stretch;
    min-height: 103px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--rank-border);
    background:
        linear-gradient(90deg, #4e2938, #301c35f2 60%, #2f1b36bd),
        var(--rank-art) right center / cover no-repeat;
}
.profit-rank .profit-rank-podium__slot.is-silver { grid-area: silver; }
.profit-rank .profit-rank-podium__slot.is-bronze { grid-area: bronze; border-left: 1px solid #eaca842e; }

.profit-rank .profit-rank-podium__slot:not(.is-gold) {
    display: grid;
    grid-template-columns: clamp(32px, 11vw, 52px) 1fr;
    align-items: center;
    padding: 8px 5px;
}
.profit-rank .profit-rank-podium__slot:not(.is-gold) .profit-rank-podium__medal {
    width: clamp(31px, 10vw, 50px);
    height: clamp(31px, 10vw, 50px);
}
.profit-rank .profit-rank-podium__info { text-align: left; }
.profit-rank .profit-rank-podium__slot.is-gold .profit-rank-podium__amount {
    font-size: clamp(18px, 6.5vw, 31px);
    color: var(--rank-gold);
}

.profit-rank .table-wrap, .profit-rank .reward-panel, .profit-rank .rules-panel {
    margin-block: 0;
    border: 1px solid var(--rank-border);
    border-radius: 14px;
    background: linear-gradient(145deg, #2c1e3c, #1c1429 78%);
}
.profit-rank .table-head { background: #efc47718; color: #ffdfa0; }
.profit-rank .table-body .row {
    --row-tone: #e0d0ec;
    background: #160d221a;
    border-bottom: 1px solid #dec6f119;
    font-variant-numeric: tabular-nums;
}
.profit-rank .table-body .row:nth-child(even) { background: #f5ddff08; }
.profit-rank .table-body .row.is-gold { --row-tone: #ffdb82; }
.profit-rank .table-body .row.is-silver { --row-tone: #d5deef; }
.profit-rank .table-body .row.is-bronze { --row-tone: #ffb589; }
.profit-rank .table-body .rank-badge {
    border: 1px solid var(--row-tone);
    color: var(--row-tone);
    background: #1b1328;
}
.profit-rank .table-body .col-profit { color: var(--row-tone); }
.profit-rank :is(.tab, .retry-btn, .claim-bar button):focus-visible,
.hero-rank :is(.title, .more_link):focus-visible {
    outline: 2px solid var(--rank-gold);
    outline-offset: 2px;
}