/*
 * Ranking boards (power, Unlimited Clash, dungeon). Loaded by those pages through the
 * layout's Head section; the profile and its editor live in profile.css. The table builds on the shared .data-table,
 * .pager and .btn components of site.css. No inline styles: the CSP forbids them.
 */

/* ---- filter bar ---------------------------------------------------------------------------------------------------- */

.ranking-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 24px;
    margin: 0 0 32px;
}

.ranking-filter__field {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}

.ranking-filter__field label {
    flex: 0 0 auto;
    font-size: 15px;
    white-space: nowrap;
}

.page .ranking-filter select {
    flex: 1 1 auto;
    min-width: 158px;
    max-width: 100%;
    background-color: #e9e9e9;
    border-color: #e9e9e9;
    cursor: pointer;
}

.ranking-filter__apply {
    height: 48px;
}

.js .ranking-filter__apply {
    display: none;
}

/* ---- board ----------------------------------------------------------------------------------------------------------- */

.ranking-boss {
    margin: 0 0 20px;
    padding-left: 14px;
    border-left: 4px solid var(--c-accent);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.ranking-empty {
    padding: 48px 0;
    color: var(--c-muted);
    text-align: center;
}

.ranking-note {
    margin: 20px 0 0;
    color: var(--c-muted);
    font-size: 13px;
}

/* ---- rank-1 leader (clear-time board and first-clear page) ------------------------------------------------------------ */

.rank-leader {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 36px;
    text-align: center;
}

/* The medal (or the number 1 without an export) and the first-clear badge sit centred above the art. */
.rank-leader__medal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0 0 8px;
}

.rank-leader__medal-number {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.rank-leader__badge {
    margin: 0 0 12px;
    padding: 5px 18px;
    background: var(--c-accent);
    color: #000;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

/*
 * The full illustration is a square canvas whose left, right and bottom edges are cut hard; fade those three edges so
 * the figure stands on the page. The info plate follows the image in the flow and never overlaps it, at any width.
 */
.rank-leader__art {
    display: block;
    width: min(420px, 80vw);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to top, transparent 0, #000 32%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to top, transparent 0, #000 32%);
    mask-composite: intersect;
}

.rank-leader__plate {
    position: relative;
    max-width: 100%;
    padding: 0 12px;
}

.rank-leader__art + .rank-leader__plate {
    margin-top: 8px;
}

.rank-leader--plain .rank-leader__plate {
    padding: 12px 12px 8px;
}

.rank-leader__name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rank-leader__account {
    display: block;
    margin-top: 2px;
    color: var(--c-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

a.rank-leader__account {
    color: var(--c-link);
}

a.rank-leader__account:hover {
    text-decoration: underline;
}

.rank-leader__note {
    margin: 0;
    color: var(--c-muted);
}

/* The clear time is the hero value of the plate. */
.rank-leader__time {
    margin: 14px 0 0;
}

.rank-leader__time-label {
    display: block;
    color: var(--c-muted);
    font-size: 12px;
}

.rank-leader__time-value {
    display: inline-block;
    padding: 0 10px 2px;
    border-bottom: 4px solid var(--c-accent);
    font-size: 32px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.rank-leader__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0 0;
}

.rank-leader__facts > div {
    padding: 0 18px;
}

.rank-leader__facts > div + div {
    border-left: 1px solid var(--c-rule);
}

.rank-leader__facts dt {
    color: var(--c-muted);
    font-size: 12px;
}

.rank-leader__facts dd {
    margin: 0;
    font-weight: 700;
}

.rank-leader__at {
    margin: 12px 0 0;
    color: var(--c-muted);
    font-size: 13px;
}

/* The epic drop leader: the dropped item's icon sits under the account name, its name beside it. */
.rank-leader__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 0;
}

.rank-leader__item-icon {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.rank-leader__item-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* A dungeon name as the hero value: smaller than a number, and allowed to wrap. */
.rank-leader__time-value--text {
    font-size: 24px;
    white-space: normal;
}

/* The table scrolls inside its own box on narrow screens instead of widening the page. */
.ranking-scroll {
    overflow-x: auto;
}

.ranking-table {
    min-width: 640px;
}

.ranking-table--power {
    min-width: 780px;
}

.ranking-table th,
.ranking-table td {
    padding: 8px 12px;
}

.ranking-table th {
    font-size: 14px;
    white-space: nowrap;
}

.ranking-table td {
    vertical-align: middle;
}

.ranking-table__rank,
.ranking-table__class,
.ranking-table__level {
    text-align: center;
}

/*
 * The rank column. A plain number and a medal sit in the same fixed box (the medal's size), which is centred in the
 * cell, so 1-3 and 4+ share one centre line and one vertical centre at every width. The selector out-ranks
 * `.data-table td`, which would otherwise left-align the cell.
 */
.ranking-table th.ranking-table__rank,
.ranking-table td.ranking-table__rank {
    width: 80px;
    text-align: center;
}

.ranking-table__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 40px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.ranking-table__mark img {
    display: block;
    width: 49px;
    height: 40px;
}

.ranking-table__portrait {
    width: 72px;
    padding-right: 0;
}

/* The bust crop is transparent and sits directly on the row: no box, border or background. */
.ranking-table__thumb {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.ranking-table__name {
    max-width: 320px;
}

.ranking-table__name-plain {
    display: block;
    overflow: hidden;
    color: #000;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The account nickname (the account code without one): the link to the profile when the account has a code. */
.ranking-table__nickname {
    display: block;
    overflow: hidden;
    color: var(--c-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.ranking-table__nickname {
    color: var(--c-link);
}

a.ranking-table__nickname:hover {
    text-decoration: underline;
}

.ranking-table__power {
    color: var(--c-muted);
    white-space: nowrap;
}

.ranking-table__value {
    font-weight: 700;
    white-space: nowrap;
}

/*
 * The epic drop table has six columns, so it is a wide table like the power one (its markup carries
 * ranking-table--power for the scroll box and the phone rules) and the dungeon and item names may wrap.
 */
.epic-table {
    min-width: 860px;
}

.epic-table__item,
.epic-table__dungeon {
    min-width: 160px;
}

.epic-table__at {
    white-space: nowrap;
}

.epic-table__deleted {
    color: var(--c-muted);
    font-weight: 400;
}

.epic-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.epic-item__icon {
    display: block;
    flex: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.epic-item__name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .rank-leader__art {
        width: min(300px, 86vw);
    }

    .rank-leader__art + .rank-leader__plate {
        margin-top: 4px;
    }

    .rank-leader__name {
        font-size: 20px;
    }

    .rank-leader__time-value {
        font-size: 28px;
    }

    .rank-leader__facts > div {
        padding: 0 12px;
    }

    .ranking-filter {
        gap: 12px;
    }

    .ranking-filter__field {
        flex: 1 1 100%;
    }

    .page .ranking-filter select {
        flex: 1 1 auto;
    }

    .ranking-table th,
    .ranking-table td {
        padding: 8px;
    }

    /*
     * The boards with one value column (power, dungeon) fit a 375 px phone without scrolling: the class and level
     * columns are secondary and go, and the name column takes what is left and truncates. The clash table keeps its
     * scroll box: it carries the extra power column.
     */
    .ranking-table:not(.ranking-table--power) {
        width: 100%;
        min-width: 0;
    }

    .ranking-table:not(.ranking-table--power) .ranking-table__class,
    .ranking-table:not(.ranking-table--power) .ranking-table__level {
        display: none;
    }

    .ranking-table:not(.ranking-table--power) th.ranking-table__rank,
    .ranking-table:not(.ranking-table--power) td.ranking-table__rank {
        width: 60px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .ranking-table:not(.ranking-table--power) .ranking-table__name {
        width: 100%;
        max-width: 0;
    }

    /*
     * The latest-drops table (portrait, character, item, dungeon) fits a phone without a scroll box: the character keeps
     * a short column and the item and the dungeon take the rest and wrap.
     */
    .ranking-table.epic-table--recent .ranking-table__name {
        width: auto;
        max-width: 96px;
    }

    .epic-table--recent .epic-table__item,
    .epic-table--recent .epic-table__dungeon {
        min-width: 0;
    }

    .epic-table--recent .epic-item {
        gap: 6px;
    }

    .epic-table--recent .epic-item__icon {
        width: 32px;
        height: 32px;
    }
}