.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Cloned thead pinned under the page chrome by the sticky-header controller. It scrolls
   horizontally itself so the header answers to a swipe the same way the body does, and
   so the sticky rank/name cells inside it have a scrollport to stick to. */
.sticky-header-clone {
    position: fixed;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.sticky-header-clone::-webkit-scrollbar {
    display: none;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.data-table th {
    text-align: left;
    padding: .75rem 1rem;
    color: var(--text-muted);
    font-weight: 500;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
}

.data-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover td {
    background: var(--surface-2);
}

.tr--rank-1 td { background: rgba(255, 215, 0, .04); }
.tr--rank-2 td { background: rgba(192, 192, 192, .04); }
.tr--rank-3 td { background: rgba(205, 127, 50, .04); }

.tr--current-player td {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 16%, transparent);
}

.tr--current-player td:first-child {
    box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 16%, transparent);
}

.tr--rank-1 .rank-cell { color: var(--tier-gold-bright); }
.tr--rank-2 .rank-cell { color: var(--tier-silver-text); }
.tr--rank-3 .rank-cell { color: var(--tier-bronze); }

.tr--rank-1 .rank-cell__number::after { content: ' ★'; color: var(--tier-gold-bright); font-size: .9em; }
.tr--rank-2 .rank-cell__number::after { content: ' ★'; color: var(--tier-silver-text); font-size: .9em; }
.tr--rank-3 .rank-cell__number::after { content: ' ★'; color: var(--tier-bronze); font-size: .9em; }

.stat-cell--gold { color: var(--tier-gold-bright); }
.stat-cell--gold::after { content: ' ★'; font-size: .9em; color: var(--tier-gold-bright); }

.stat-cell--silver { color: var(--tier-silver-text); }
.stat-cell--silver::after { content: ' ★'; font-size: .9em; color: var(--tier-silver-text); }

.stat-cell--bronze { color: var(--tier-bronze); }
.stat-cell--bronze::after { content: ' ★'; font-size: .9em; color: var(--tier-bronze); }

.manual-catch-flag {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.18em;
}

.highscore-page .manual-catch-flag {
    color: var(--text-muted);
}

.profile-flag svg,
.manual-catch-flag svg {
    flex: 0 0 auto;
}

.metric-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    white-space: nowrap;
}

.metric-value__award {
    order: 3;
    font-size: .9em;
}

.metric-value__number {
    order: 1;
}

.metric-value .manual-catch-flag {
    order: 2;
}

.metric-value__award--gold { color: var(--tier-gold-bright); }
.metric-value__award--silver { color: var(--tier-silver-text); }
.metric-value__award--bronze { color: var(--tier-bronze); }

.stat-cell:has(.metric-value)::after,
.stat-cell:has(.metric-value)::before {
    content: none;
}

.flag--mobile { display: none; }

.combined-cell__value { display: none; }

.combined-cell__meta {
    display: none;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .75em;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}

.combined-cell__row { display: contents; }

.stat-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table th.stat-cell {
    text-align: right;
}

.stat-cell__review-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .12s ease;
}

.stat-cell__review-link:hover,
.stat-cell__review-link:focus-visible {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    outline: none;
}

.data-table th.col-wrap {
    white-space: normal;
}

.date {
    color: var(--text-muted);
    white-space: nowrap;
}

.date-short { display: none; }

.medal-date-cell {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}


@media (max-width: 600px) {
    .col-hide-mobile { display: none; }

    .date-full { display: none; }
    .date-short { display: inline; }

/* Delta values move below the stat value on mobile */

    /* Stats table: hide individual columns and date, show combined cell */
    .col-xp, .col-catches, .col-pokestops, .col-distance { display: none; }
    .col-date { display: none; }

    /* Stars move to the left on mobile */
    .stat-cell--gold::after, .stat-cell--silver::after, .stat-cell--bronze::after { content: none; }
    .stat-cell--gold::before { content: '★ '; font-size: .9em; color: var(--tier-gold-bright); }
    .stat-cell--silver::before { content: '★ '; font-size: .9em; color: var(--tier-silver-text); }
    .stat-cell--bronze::before { content: '★ '; font-size: .9em; color: var(--tier-bronze); }

    .highscore-page .metric-value__award {
        order: 1;
    }

    .highscore-page .metric-value .manual-catch-flag {
        order: 2;
    }

    .highscore-page .metric-value__number {
        order: 3;
    }

    /* Flags move to the left on mobile */
    .flag--desktop { display: none; }
    .flag--mobile { display: inline-flex; }

    /* Values are right-aligned, so left padding is dead space the table cannot
       afford at 360px. The first visible column also sits against the sticky
       player cell, which brings its own padding — hence the tighter default.
       Deliberately unscoped: the cloned sticky header lives on document.body,
       outside .highscore-page, and has to match these widths. */
    .data-table th.stat-cell,
    .data-table td.stat-cell {
        padding-left: .35rem;
        padding-right: .6rem;
    }

    /* Every visible cell that has a visible one before it — i.e. all but the first. */
    .data-table .stat-cell:not([hidden]) ~ .stat-cell:not([hidden]) {
        padding-left: .6rem;
    }
}