/* CrateMarket 1.1.30 R66: mobile Leaderboard exact-value layout.
   This source-only module is folded into the Phase 4 active addressed asset. */

@media (max-width: 520px) {
  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] :is(
    .step12-leaderboard-wrap,
    .step12-leaderboard-scroll,
    .step12-leaderboard-table,
    .step12-leaderboard-table tbody,
    .step12-leaderboard-table tbody tr,
    .step12-leaderboard-table tbody td,
    .step12-personal-rank,
    .step12-personal-rank > span
  ) {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-leaderboard-table {
    width: 100%;
    table-layout: auto;
    padding-inline: 4px;
  }

  /* Keep column names in the accessibility tree while the visual rows stack. */
  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-leaderboard-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-leaderboard-table tbody tr:not(.r31-empty-row) {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    margin: 5px 0;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-leaderboard-table tbody tr:not(.r31-empty-row) td {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-leaderboard-table tbody tr:not(.r31-empty-row) td:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: auto;
    padding-inline: 4px;
    border-radius: 11px 0 0 11px;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-leaderboard-table tbody tr:not(.r31-empty-row) td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    padding-bottom: 3px;
    border-right: 1px solid var(--r31-line);
    border-bottom: 0;
    border-radius: 0 11px 0 0;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-leaderboard-table tbody tr:not(.r31-empty-row) td:last-child {
    grid-column: 2;
    grid-row: 2;
    display: block;
    width: auto;
    padding-top: 2px;
    border-top: 0;
    border-right: 1px solid var(--r31-line);
    border-radius: 0 0 11px 0;
    overflow: visible;
    color: #f4d58d;
    font-size: clamp(.68rem, 2.7vw, .8rem);
    line-height: 1.35;
    text-align: right;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .cm129-leaderboard-player {
    align-items: flex-start;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .r31-player-name {
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-personal-rank {
    grid-template-columns: minmax(4.25rem, .55fr) minmax(0, 1.45fr);
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-personal-rank > span:last-child {
    justify-items: end;
  }

  html.cm-ui-refresh.cm-ui-page-game #modal[data-cm-modal-kind="leaderboard"] .step12-personal-rank .cm-coin-value {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    line-height: 1.35;
    text-align: right;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
  }
}
