/* Restore leaderboard column labels on phone layouts and align standard board values beneath them. */
@media(max-width:780px){
  #leaderboard-content .leaderboard-table thead{
    display:block!important;
    margin:0 0 8px!important;
    width:100%!important;
  }

  #leaderboard-content .leaderboard-table thead tr{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) 82px 40px!important;
    grid-template-rows:auto!important;
    align-items:end!important;
    column-gap:8px!important;
    row-gap:0!important;
    width:100%!important;
    padding:0 12px 7px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }

  #leaderboard-content .leaderboard-table thead th{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    color:var(--dim)!important;
    font-size:6.5px!important;
    font-weight:700!important;
    letter-spacing:.8px!important;
    line-height:1.2!important;
    text-align:left!important;
    white-space:normal!important;
  }

  #leaderboard-content .leaderboard-table thead th:nth-child(3),
  #leaderboard-content .leaderboard-table thead th:nth-child(4){
    text-align:right!important;
  }

  /* All-Time and Daily use four true columns on phones so BEST and RUNS line up
     directly beneath their labels instead of being stacked in one right column. */
  #leaderboard-content .leaderboard-table:not(.achievement-leaderboard-table):not(.level-leaderboard-table) tbody tr{
    grid-template-columns:46px minmax(0,1fr) 82px 40px!important;
    grid-template-rows:auto!important;
    column-gap:8px!important;
  }

  #leaderboard-content .leaderboard-table:not(.achievement-leaderboard-table):not(.level-leaderboard-table) tbody td:nth-child(1){
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
  }

  #leaderboard-content .leaderboard-table:not(.achievement-leaderboard-table):not(.level-leaderboard-table) tbody td:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
  }

  #leaderboard-content .leaderboard-table:not(.achievement-leaderboard-table):not(.level-leaderboard-table) tbody td:nth-child(3){
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    text-align:right!important;
  }

  #leaderboard-content .leaderboard-table:not(.achievement-leaderboard-table):not(.level-leaderboard-table) tbody td:nth-child(4){
    grid-column:4!important;
    grid-row:1!important;
    align-self:center!important;
    text-align:right!important;
    color:var(--dim)!important;
    font-size:9px!important;
  }

  /* Achievement rows use the same fixed rank/trainer tracks as every other board.
     The achievement value keeps its own right-hand column. */
  #leaderboard-content .achievement-leaderboard-table thead tr,
  #leaderboard-content .achievement-leaderboard-table tbody tr,
  #leaderboard-content .level-leaderboard-table thead tr,
  #leaderboard-content .level-leaderboard-table tbody tr{
    grid-template-columns:46px minmax(0,1fr) 112px!important;
    grid-template-rows:auto!important;
    column-gap:8px!important;
  }

  #leaderboard-content .achievement-leaderboard-table tbody td:nth-child(1),
  #leaderboard-content .level-leaderboard-table tbody td:nth-child(1){
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
  }

  #leaderboard-content .achievement-leaderboard-table tbody td:nth-child(2),
  #leaderboard-content .level-leaderboard-table tbody td:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
  }

  #leaderboard-content .achievement-leaderboard-table thead th:nth-child(3),
  #leaderboard-content .achievement-leaderboard-table tbody td:nth-child(3),
  #leaderboard-content .level-leaderboard-table thead th:nth-child(3),
  #leaderboard-content .level-leaderboard-table tbody td:nth-child(3){
    display:block!important;
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    text-align:right!important;
  }
}