/* Page-specific layout; typography, title, controls, and table use ladder.css. */
.d4-ladder { --d4-class-icon-color: #b41a1a; }
.d4-content { min-width: 0; }
.d4-ad-rail { min-width: 160px; text-align: center; }
#d4leaderboard-banner-middle-mobile { display: block; width: 320px; max-width: 100%; margin: auto; }
#d4leaderboard-video { display: block; width: 360px; max-width: 100%; height: 207px; margin: auto; }
.d4-ladder [hidden] { display: none !important; }
.d4-ladder .ld-search-row .icon-input { margin-right: 0; box-sizing: border-box; min-width: 150px; }
.d4-ladder .ld-dd { margin: 0; }
.d4-ladder #d4-platform-dropdown, .d4-ladder #d4-class-dropdown { min-width: 170px; }
.d4-ladder #d4-season-dropdown { min-width: 150px; }
.d4-ladder #d4-gametype-dropdown { min-width: 250px; }
.d4-ladder .ld-dd-toggle { min-width: 0; }
.d4-ladder .ld-dd-menu { left: 0; right: 0; width: 100%; min-width: 0; box-sizing: border-box; }
.d4-ladder :focus-visible { outline: 2px solid #C7B377; outline-offset: 2px; }
.d4-ladder button:disabled, .d4-ladder select:disabled { cursor: default; opacity: .55; }
.d4-muted { color: gray; }
#d4-updated { font-size: .875rem; margin: 0; }
#d4-updated:empty { display: none; }
.d4-filter-label { display: flex; align-items: center; min-width: 0; }
.d4-filter-label .d4-filter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d4-ladder .d4-platform-icon { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; flex-shrink: 0; }
.d4-ladder .d4-gametype { white-space: nowrap; }
.d4-ladder .d4-class-icon, .d4-ladder .ld-dd-menu .d4-class-icon {
    display: inline-block;
    width: 40.625px;
    height: 40.625px;
    margin-right: 8px;
    padding: 0;
    border: 0;
    background-color: var(--d4-class-icon-color);
    /* Retain the artwork's dark lines and shading beneath the CSS tint. */
    background-image: var(--d4-class-icon);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-blend-mode: darken;
    -webkit-mask: var(--d4-class-icon) center / contain no-repeat;
    mask: var(--d4-class-icon) center / contain no-repeat;
    vertical-align: middle;
    flex-shrink: 0;
}
.d4-ladder #d4-class-dropdown .d4-class-icon { width: 24px; height: 24px; }
.d4-ladder #d4-class-menu [role="option"] { padding-left: 6px; padding-right: 6px; }
.d4-ladder #d4-class-menu .d4-class-icon { width: 20px; height: 20px; margin-right: 4px; }
.d4-error { margin: 10px; line-height: 1.4; }
.d4-error { color: #800000; }
.d4-table-scroll { overflow-x: auto; }
.d4-ladder .d4-battletag { overflow-wrap: anywhere; }
.d4-ladder .d4-party-member { display: flex; align-items: center; white-space: normal; }
.d4-ladder .d4-party-member > span:last-child { min-width: 0; }
.d4-ladder .d4-number { font-variant-numeric: tabular-nums; }
.d4-ladder .d4-flag { display: block; font-size: .8em; color: gray; }
.d4-ladder .d4-empty { text-align: center; white-space: normal; padding: 30px 10px; }
.d4-ladder .d4-submitted { font-size: 1.25rem; background: #800000; padding: .375rem; }
#d4-results[aria-busy="true"] tbody tr { background: transparent; }
.d4-ladder .pagination-container { padding: 0 5px; min-height: 36px; flex-wrap: wrap; }
#d4-pagination { flex-wrap: wrap; }
#d4-pagination [aria-current="page"] { text-decoration: underline; }
.d4-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 899px) {
    .d4-ladder .d4-ad-rail { display: none; }
    .d4-ladder .ld-search-row .icon-input { min-width: 0; }
    .d4-ladder .pagination-container { flex-wrap: wrap; gap: 8px; padding: 0 10px; }
    .d4-ladder .page-size { white-space: nowrap; }
    .d4-ladder thead { display: none; }
    .d4-ladder tbody tr { display: grid; grid-template-columns: auto 1fr; padding: 10px; }
    .d4-ladder td { display: block; padding: 5px 0; white-space: normal; overflow-wrap: anywhere; grid-column: 1 / -1; }
    .d4-ladder td:first-child { grid-column: 1; padding-right: 10px; }
    .d4-ladder .d4-battletag { grid-column: 2; }
    .d4-ladder td[data-label]::before { content: attr(data-label) ': '; color: gray; font-size: .8em; }
}