/*
 * Shared layout for every top50.php mode, independent of WordPress login state.
 * Twenty Twenty uses different direct-child widths for default and Full Width
 * templates. Its table rules may also be delivered after component CSS by an
 * optimizer. Scoped !important declarations protect this component's geometry
 * and typography in either stylesheet order; they do not change other tables.
 * Bump top50.php's layoutRevision whenever this stylesheet changes.
 */
div.t50-leaderboard-wrap {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: calc(100% - 32px) !important;
    min-width: 0 !important;
    max-width: 960px !important;
    margin: 0 auto 26px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Only this inner region scrolls. A wide table starts at the left edge on
 * phones, so its first and last columns both remain reachable by scrolling. */
div.t50-leaderboard-scroll {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Intrinsic sizing keeps short usernames compact and gives XP/CR their actual
 * required space. Auto margins center five- and seven-column tables alike. */
table.t50-leaderboard {
    display: table !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    table-layout: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

table.t50-leaderboard tbody {
    display: table-row-group !important;
}

table.t50-leaderboard tr {
    display: table-row !important;
}

table.t50-leaderboard tr > th,
table.t50-leaderboard tr > td {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px !important;
    box-sizing: content-box !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    overflow: visible !important;
    vertical-align: middle !important;
    font: inherit !important;
}

table.t50-leaderboard tr > th {
    font-weight: bold !important;
    text-align: right !important;
}

table.t50-leaderboard tr > th:first-child {
    text-align: left !important;
}

table.t50-leaderboard td:first-child {
    min-width: 2ch !important;
}

/* Geometry matches Unity's frame inset and RankItem ACC badge. */
table.t50-leaderboard .t50-avatar {
    display: inline-block !important;
    position: relative !important;
    width: 50px !important;
    height: 50px !important;
    margin: 9px 9px 2px 2px !important;
    vertical-align: middle !important;
}

table.t50-leaderboard .t50-avatar img {
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

table.t50-leaderboard .t50-avatar-image,
table.t50-leaderboard .t50-avatar-frame {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

table.t50-leaderboard .t50-avatar-framed .t50-avatar-image {
    top: 8.333333% !important;
    left: 8.333333% !important;
    width: 83.333333% !important;
    height: 83.333333% !important;
}

table.t50-leaderboard .t50-avatar .t50-avatar-acc {
    top: -16.666667% !important;
    right: -16.666667% !important;
    width: 33.333333% !important;
    height: 33.333333% !important;
    border-radius: 50% !important;
    background: white;
}