/* Online leaderboard: uses the existing wood panels, gold accents and pixel art. */
.leaderboard-source-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.leaderboard-source-tabs button {
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  background-color: var(--wood);
  background-image: var(--grain);
  box-shadow: inset 0 2px #c58d4c70;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}

.leaderboard-source-tabs button[aria-pressed="true"],
.leaderboard-source-tabs button[aria-selected="true"] {
  border-color: #d3a55f;
  background-color: #8a623b;
  color: #ffe6ad;
  box-shadow: inset 0 2px #d6a26277, inset 0 -2px #3a281f80;
}

.leaderboard-source-tabs button:hover:not(:disabled) {
  background-color: #ab7843;
}

.leaderboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.leaderboard-actions button {
  min-height: 42px;
  padding: 9px 14px;
  font-size: 15px;
}

.modal-body .leaderboard-status {
  min-height: 1.65em;
  margin: 8px 0;
  color: var(--gold);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.modal-body .leaderboard-rule {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.rank-my-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 10px 0 12px;
  padding: 11px 14px;
  border: 2px solid #a47a47;
  border-left: 5px solid var(--gold);
  background: #152237;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.rank-my-result strong {
  color: var(--gold);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.rank-my-result small {
  color: var(--muted);
  font-size: 13px;
}

.online-rank-list {
  margin-top: 10px;
  border: 2px solid #42536a;
  background: #152237;
}

.online-rank-row {
  display: grid;
  grid-template-columns: 30px 42px minmax(0, 1fr) 62px 72px;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 10px 12px;
  border-bottom: 1px solid #42536a;
}

.online-rank-row:last-child {
  border-bottom: 0;
}

.online-rank-row:nth-child(even) {
  background: #28364b;
}

.online-rank-row .record-place {
  width: auto;
  color: #a6bbd0;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.online-rank-row:nth-child(-n+3) .record-place {
  color: var(--gold);
}

.rank-account-avatar {
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid #a47a47;
  background: #344154;
  object-fit: cover;
}

.rank-player {
  min-width: 0;
}

.rank-nickname {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-mascot-name {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rank-mascot {
  display: block;
  width: 62px;
  height: 58px;
  min-width: 0;
  overflow: hidden;
}

.rank-mascot > [data-art],
.rank-mascot svg,
.rank-mascot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.rank-wins {
  color: #f0ca85;
  font-size: 29px;
  line-height: 1.25;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.rank-wins small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.online-rank-list .empty-state {
  padding: 24px 14px;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 900px), (max-height: 600px) {
  .leaderboard-source-tabs {
    gap: 6px;
    margin-bottom: 10px;
  }

  .leaderboard-source-tabs button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 16px;
  }

  .leaderboard-actions button {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 14px;
  }

  .modal-body .leaderboard-status {
    font-size: 14px;
  }

  .rank-my-result {
    gap: 4px 12px;
    padding: 9px 11px;
    font-size: 14px;
  }

  .online-rank-row {
    grid-template-columns: 26px 38px minmax(0, 1fr) 54px 66px;
    gap: 10px;
    min-height: 70px;
    padding: 8px 10px;
  }

  .rank-account-avatar {
    width: 38px;
    height: 38px;
  }

  .rank-mascot {
    width: 54px;
    height: 52px;
  }

  .rank-nickname {
    font-size: 16px;
  }

  .rank-mascot-name {
    font-size: 13px;
  }

  .rank-wins {
    font-size: 26px;
  }
}

@media (max-width: 619px) {
  .online-rank-row {
    grid-template-columns: 24px 32px minmax(0, 1fr) 44px 58px;
    gap: 7px;
    padding: 8px 7px;
  }

  .rank-account-avatar {
    width: 32px;
    height: 32px;
  }

  .rank-mascot {
    width: 44px;
    height: 48px;
  }

  .rank-nickname {
    font-size: 14px;
  }

  .rank-mascot-name {
    font-size: 12px;
  }

  .rank-wins {
    font-size: 23px;
  }
}

/* Keep mode selection and the first standings visible on short landscape screens. */
@media (min-width: 620px) {
  .leaderboard-controls {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin: 0 0 6px;
  }

  .leaderboard-controls .leaderboard-source-tabs {
    min-width: 0;
    gap: 6px;
    margin: 0;
  }

  .leaderboard-controls .leaderboard-source-tabs button {
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
  }

  .leaderboard-controls .records-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    gap: 6px;
    margin: 0;
  }

  .leaderboard-controls .records-tabs button {
    min-width: 0;
    min-height: 38px;
    padding: 7px 5px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
  }

  .leaderboard-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
    margin: 6px 0;
  }

  .leaderboard-summary .rank-my-result {
    min-width: 0;
    min-height: 38px;
    gap: 3px 9px;
    margin: 0;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .leaderboard-summary .rank-my-result strong {
    font-size: 17px;
  }

  .leaderboard-summary .leaderboard-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    margin: 0;
  }

  .leaderboard-summary .leaderboard-actions button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
  }
}

@media (max-width: 619px) {
  .leaderboard-controls,
  .leaderboard-summary {
    display: block;
  }
}