/* <!-- check-allow: ranked --> */
/* The ladder uses the site's own type and colours, with a denser data layout. */
.ranked-leaderboard { max-width: 72rem; }
.ranked-leaderboard .board-hero { margin: 0 0 1.75rem; padding: 1.5rem 0 1rem; border-bottom: 1px solid rgba(244,182,63,.25); }
.board-eyebrow { margin: 0 0 .55rem; color: #F4B63F; font: 700 .75rem/1.3 var(--font-ui); letter-spacing: .16em; }
.ranked-leaderboard h1 { margin: 0; font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.16; letter-spacing: .04em; }
.ranked-leaderboard .board-hero .lead { margin: .65rem 0 0; color: var(--text-2); font-size: 1.0625rem; line-height: 1.45; }
.ranked-leaderboard > .ranked-nav { gap: .25rem 1.5rem; margin-bottom: 1.5rem; font-size: .9375rem; }
.ranked-leaderboard > .ranked-filters { align-items: end; justify-content: center; gap: .75rem; margin: 0; padding: .25rem 0; }
.ranked-leaderboard .ranked-field { flex: 1 1 12rem; gap: .4rem; font-size: .875rem; font-weight: 600; }
.ranked-leaderboard .ranked-field select { width: 100%; background: #1e1013; }
.board-search { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; flex: 1 1 100%; max-width: 48rem; }
.board-search-label { display: grid; gap: .4rem; flex: 1; min-width: 0; color: var(--text-2); font-size: .875rem; font-weight: 600; }
.board-search input { width: 100%; min-width: 0; min-height: 48px; padding: .6rem .8rem; color: var(--text-1); background: #24161d; border: 1px solid #74515a; border-radius: 9px; font: 1rem var(--font-ui); }
.board-search .btn-primary { min-height: 48px; padding: .6rem 1rem; border-radius: 9px; font-size: 1rem; }
.board-search-results { flex: 1 1 100%; padding: .4rem .75rem; border: 1px solid rgba(233,238,237,.16); background: #241014; }
.board-search-results[hidden] { display: none; }
.board-search-status { margin: .3rem 0; color: var(--text-2); font-size: .875rem; }
.board-search-list { list-style: none; margin: 0; padding: 0; }
.board-search-list li { margin: 0; border-top: 1px solid rgba(233,238,237,.12); }
.board-search-list .ranked-player { display: flex; min-height: 44px; justify-content: center; padding: .35rem 0; }
.board-regions { display: flex; flex: 1 1 100%; justify-content: center; flex-wrap: wrap; gap: .4rem; margin: .65rem 0 1.1rem; }
.board-regions button { min-height: 44px; padding: .4rem .9rem; border: 1px solid #61414a; border-radius: 999px; background: #2a1a21; color: var(--text-1); font: 600 .875rem var(--font-ui); cursor: pointer; }
.board-regions button:hover { border-color: #F4B63F; }
.board-regions button[aria-pressed='true'] { background: #7d2838; border-color: #E75A72; color: #fff; }
.board-roster { flex: 1 1 100%; }
.board-roster-header { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: .65rem; margin: 0 0 .8rem; }
.board-roster-header h2 { margin: 0; color: var(--text-2); font: 700 .8125rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.board-roster-selection { color: #F4B63F; font-size: .8125rem; }
.board-roster-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.board-roster-grid button { display: grid; place-items: center; position: relative; flex: 0 0 68px; width: 68px; height: 68px; padding: 2px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--text-1); font: 700 .75rem/1.1 var(--font-ui); cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.board-roster-grid button:hover, .board-roster-grid button:focus-visible { background: #48232e; border-color: #c49245; }
.board-roster-grid button[aria-pressed='true'] { background: #48232e; border-color: #F4B63F; box-shadow: 0 0 0 1px #F4B63F; }
.board-roster-grid .no-image { background: #301a22; border-color: #60434b; }
.board-roster-grid .no-image:hover, .board-roster-grid .no-image:focus-visible, .board-roster-grid .no-image[aria-pressed='true'] { border-color: #F4B63F; }
.board-roster-portrait { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.board-roster-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board-roster-grid .no-image .board-roster-name { position: static; width: auto; height: auto; max-width: 90%; overflow: visible; clip-path: none; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 700px) { .ranked-leaderboard .board-character-select, .ranked-leaderboard .board-region-select { display: none; } }
.ranked-leaderboard > .ranked-status { margin: .75rem 0; font-size: .875rem; }
.board-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 2rem 0 1rem; }
.board-heading h2, .board-table-title { margin: 0; color: var(--text-1); font: 700 1.375rem/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; }
.board-count { margin: 0; color: var(--text-2); font-size: .875rem; text-align: right; }
.board-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: .75rem; list-style: none; padding: 0; margin: 0 0 2.25rem; }
.board-podium:has(> :only-child) { grid-template-columns: minmax(0, 26rem); justify-content: center; }
.board-podium:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 26rem)); justify-content: center; }
.board-podium-card { position: relative; min-width: 0; margin: 0 !important; padding: .85rem 1rem 1rem; border: 1px solid #60434b; border-radius: 14px; background: #281920; text-align: center; overflow-wrap: anywhere; }
.board-podium-card[data-place='1'] { order: 2; border-color: #bd8a2d; background: #381c24; box-shadow: inset 0 3px #F4B63F; }
.board-podium-card[data-place='2'] { order: 1; }
.board-podium-card[data-place='3'] { order: 3; }
.board-place { display: inline-block; padding: .2rem .7rem; border: 1px solid #9a7b45; border-radius: 999px; color: #F4B63F; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; }
.board-portrait { display: block; object-fit: cover; border-radius: 10px; background: #3a2930; }
.board-panda-portrait { position: relative; overflow: hidden; background: #28232a; }
.board-panda-portrait::after { position: absolute; inset: 0; content: ''; pointer-events: none; border: 5px solid transparent; border-image: url('/assets/portraits/kuma.png?v=cd4737ba4b') 15 / 5px stretch; }
.board-panda-image { position: absolute; top: -8%; left: -95%; width: 200%; height: 200%; max-width: none; object-fit: contain; }
.board-podium-portrait { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; }
.board-rank { display: inline-flex; position: relative; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--text-1); font-size: .875rem; font-weight: 600; line-height: 1.2; }
.board-rank-image { display: block; width: 116px; height: auto; max-height: 42px; object-fit: contain; }
.board-rank-image[hidden] { display: none; }
.board-rank.has-image .board-rank-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board-card-rank { display: flex; align-items: center; min-height: 76px; margin: .35rem 0; color: #F4B63F; font-size: 1.05rem; }
.board-card-rank .board-rank-image { width: 176px; max-height: 76px; }
.board-podium-identity { display: flex; justify-content: center; align-items: center; gap: .5rem; min-width: 0; }
.board-podium .ranked-player { align-items: flex-start; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.board-podium .character-badge { display: none; }
.board-card-character, .board-card-record { margin: .4rem 0; color: var(--text-2); font-size: .875rem; }
.board-card-mmr { margin: .8rem 0 .25rem; color: var(--text-1); font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.board-card-mmr small { color: var(--text-2); font-size: .75rem; }
.board-table-title { margin-bottom: .75rem; }
.ranked-leaderboard .ranked-board { margin: 0; background: #211319; border-color: #56363d; border-radius: 14px; }
.ranked-leaderboard .ranked-board caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ranked-leaderboard .ranked-board .data { width: 100%; table-layout: fixed; font-size: .9375rem; }
.ranked-leaderboard .ranked-board :is(th,td) { padding: .65rem .7rem; vertical-align: middle; }
.ranked-leaderboard .ranked-board :is(th,td):nth-child(1) { width: 5%; }
.ranked-leaderboard .ranked-board :is(th,td):nth-child(2) { width: 32%; }
.ranked-leaderboard .ranked-board :is(th,td):nth-child(3) { width: 20%; }
.ranked-leaderboard .ranked-board :is(th,td):nth-child(4) { width: 12%; }
.ranked-leaderboard .ranked-board :is(th,td):nth-child(5) { width: 9%; }
.ranked-leaderboard .ranked-board :is(th,td):nth-child(6) { width: 10%; }
.ranked-leaderboard .ranked-board :is(th,td):nth-child(7) { width: 12%; }
.ranked-leaderboard .ranked-board thead th { color: var(--text-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.ranked-leaderboard .ranked-board tbody tr:hover { background: rgba(244,182,63,.06); }
.ranked-leaderboard .ranked-board tbody td:nth-child(4) { color: #F4B63F; font-weight: 700; }
.ranked-leaderboard .ranked-board .ranked-player { color: var(--text-1); font-weight: 700; text-decoration: none; }
.ranked-leaderboard .ranked-board a.ranked-player:hover, .ranked-leaderboard .ranked-board a.ranked-player:focus-visible { color: #F4B63F; text-decoration: underline; }
.ranked-leaderboard .ranked-board .ranked-sub { font-size: .8125rem; }
.ranked-leaderboard .ranked-board .character-badge { display: block; padding: 0; border: 0; background: transparent; font-size: .8125rem; }
.ranked-leaderboard .ranked-board td > .board-rank .board-rank-image { width: 84px; height: 42px; object-position: left center; }
.board-player-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.board-player-text { display: grid; justify-items: start; gap: .1rem; min-width: 0; }
.board-row-portrait { flex: 0 0 48px; width: 48px; height: 48px; }
.board-mobile-rank { display: none; }
.ranked-leaderboard .ranked-content > .ranked-note { font-size: .875rem; text-align: right; }
.board-insights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-top: 2rem; }
.board-insight { min-width: 0; padding: 1rem; border: 1px solid #56363d; border-radius: 14px; background: #24161d; }
.board-insight-ranks { grid-column: 1 / -1; }
.board-insight-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.board-insight-head h3 { margin: 0; font: 700 1.05rem/1.3 var(--font-ui); }
.board-insight-head a { font-size: .875rem; white-space: nowrap; }
.board-insight-body { margin-top: 1rem; color: var(--text-2); font-size: .875rem; }
.board-insight-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.board-insight-list li { margin: 0; }
.board-insight-line { display: flex; justify-content: space-between; gap: .5rem; color: var(--text-1); }
.board-insight-line strong { color: #F4B63F; font-variant-numeric: tabular-nums; }
.board-insight-track { height: 5px; margin-top: .3rem; border-radius: 999px; background: #51363e; overflow: hidden; }
.board-insight-track span { display: block; height: 100%; border-radius: inherit; background: #E75A72; }
.board-insight-note { margin: .9rem 0 0; color: var(--text-2); font-size: .8125rem; }
.board-character-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.board-character-list li { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: .65rem; min-height: 48px; margin: 0; }
.board-insight-portrait { width: 42px; height: 42px; }
.board-character-info { min-width: 0; }
.board-character-name { font-weight: 600; overflow-wrap: anywhere; }
.board-character-value { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.board-character-value strong { color: #F4B63F; font-size: 1rem; }
.board-character-value small { color: var(--text-2); font-size: .75rem; }
@media (max-width: 699.98px) {
  .ranked-leaderboard > .ranked-nav { flex-wrap: wrap; overflow: visible; gap: .1rem 1rem; }
  .board-regions, .board-roster { display: none; }
  .ranked-leaderboard > .ranked-filters { padding: 1rem; border: 1px solid #56363d; border-radius: 14px; background: #211319; }
  .board-heading { align-items: start; flex-direction: column; gap: .4rem; }
  .board-count { text-align: left; }
  .board-podium { grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .board-podium:has(> :only-child), .board-podium:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0,1fr); }
  .board-podium-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .2rem .55rem; padding: .8rem; text-align: left; }
  .board-podium-card[data-place] { order: initial; }
  .board-place { grid-column: 1; grid-row: 1; justify-self: start; }
  .board-card-rank { grid-column: 1; grid-row: 2; min-height: 38px; align-items: start; }
  .board-card-rank .board-rank-image { width: 98px; max-height: 38px; }
  .board-podium-identity { grid-column: 1; grid-row: 3; justify-content: start; }
  .board-podium-portrait { flex-basis: 32px; width: 32px; height: 32px; }
  .board-podium .ranked-player { align-items: start; font-size: 1rem; }
  .board-card-character { grid-column: 1; grid-row: 4; }
  .board-card-record { grid-column: 1 / -1; grid-row: 5; }
  .board-card-rank, .board-card-character, .board-card-record { margin: 0; font-size: .8125rem; }
  .board-card-mmr { grid-column: 2; grid-row: 2 / span 2; margin: 0; font-size: 1.25rem; text-align: right; }
  .board-card-mmr small { display: block; margin-top: .2rem; }
  .board-insights { grid-template-columns: minmax(0,1fr); }
  .board-insight-ranks { grid-column: auto; }
}
@media (max-width: 359.98px) { .board-search { flex-wrap: wrap; } .board-search-label { flex-basis: 100%; } }
@media (max-width: 599.98px) { .board-mobile-rank { display: flex; margin-top: .2rem; } .board-mobile-rank .board-rank-image { width: 86px; max-height: 28px; } }
@media (max-width: 599.98px) {
  .ranked-leaderboard .ranked-board :is(th,td):nth-child(1) { width: 12%; }
  .ranked-leaderboard .ranked-board :is(th,td):nth-child(2) { width: 58%; }
  .ranked-leaderboard .ranked-board :is(th,td):nth-child(4) { width: 30%; }
}
@media (forced-colors: active) { .board-podium-card { border: 1px solid CanvasText; } }