/* Rankings (module=ranking: character, guild, zeny, death, alchemist, blacksmith)
   One shared layout: toolbar (summary + filter) > podium > ranking table. */

/* top-3 row tint painted once per row (the shared rule tints every cell separately) */
.lk-table tr.lk-top-1 td, .lk-table tr.lk-top-2 td, .lk-table tr.lk-top-3 td { background: transparent; }
.lk-table tr.lk-top-1 { background: linear-gradient(90deg, rgba(246, 196, 83, .12), transparent 70%); }
.lk-table tr.lk-top-2 { background: linear-gradient(90deg, rgba(207, 214, 230, .08), transparent 70%); }
.lk-table tr.lk-top-3 { background: linear-gradient(90deg, rgba(227, 161, 115, .09), transparent 70%); }

/* toolbar */
.ranking-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; padding: 14px 16px 14px 20px; border-radius: var(--lk-radius-lg); background: var(--lk-grad-surface); border: 1px solid var(--lk-line); }
.ranking-summary { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--lk-text-2); }
.ranking-summary > i { color: var(--lk-purple-400); font-size: 18px; }
.ranking-summary .lk-badge { vertical-align: 1px; }
.ranking-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.ranking-filter .lk-label { color: var(--lk-text-2); }
.ranking-filter select { width: auto; min-width: 220px; }

/* podium extras */
.ranking-podium .lk-podium__value { overflow-wrap: anywhere; }
.ranking-podium__stat { margin-top: 8px; font-size: var(--lk-fs-sm); color: var(--lk-text-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ranking-podium__stat strong { color: #fff; font-size: 1.05rem; }
.lk-podium__card--1 .ranking-podium__stat strong { color: var(--lk-gold-300); }
.ranking-podium__emblem { width: 36px; height: 36px; margin: 8px auto 0; display: block; }

/* table */
.ranking-table td { white-space: nowrap; }
.ranking-table .lk-player > span { min-width: 0; }
.ranking-key { font-weight: 700; color: #fff; }
.ranking-gold { color: var(--lk-gold-300); }
.ranking-guild { font-weight: 500; color: var(--lk-text); }
.ranking-emblem-ph { display: inline-block; border: 1px dashed var(--lk-line-2); }
.ranking-none { color: var(--lk-text-3); font-style: italic; font-size: .92em; }

/* collapse long boards behind "Show all" (pure CSS, works without JS) */
.ranking-more-toggle:not(:checked) ~ .lk-table-wrap .ranking-extra { display: none; }
.ranking-more-btn { display: flex; width: fit-content; margin: 16px auto 0; cursor: pointer; }
.ranking-more-toggle:checked ~ .ranking-more-btn .ranking-more-show,
.ranking-more-toggle:not(:checked) ~ .ranking-more-btn .ranking-more-hide { display: none; }
.ranking-more-btn span { display: inline-flex; align-items: center; gap: 9px; }
.ranking-more-toggle:focus-visible ~ .ranking-more-btn { box-shadow: var(--lk-ring); }

@media (max-width: 640px) {
  .ranking-toolbar { padding: 14px; }
  .ranking-filter { width: 100%; }
  .ranking-filter .lk-label { width: 100%; }
  .ranking-filter select { flex: 1 1 100%; min-width: 0; }
  .ranking-filter .lk-btn { flex: 1 1 0; }

  .lk-podium { gap: 10px; }
  .lk-podium__card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; text-align: left; padding: 14px 16px; }
  .lk-podium__card--1 { padding-top: 14px; }
  .lk-podium__card > .lk-rank { grid-row: span 4; }
  .lk-podium__name { margin: 0; font-size: 1.1rem; }
  .ranking-podium__stat { margin-top: 2px; }
  .ranking-podium__emblem { display: none; }

  .lk-table--compact th, .lk-table--compact td { padding: 9px 8px; }
  .lk-table--compact th { letter-spacing: .05em; }
  .lk-table--compact th:first-child, .lk-table--compact td:first-child { padding-left: 12px; }
  .lk-table--compact th:last-child, .lk-table--compact td:last-child { padding-right: 12px; }
  .ranking-more-btn { width: 100%; }
}
.ranking-castles { gap: 6px; }

/* keep name cells centred with the numbers */
.lk-table .lk-player { vertical-align: middle; }

/* buttons inside an empty state keep their normal icon size */
.lk-empty .lk-btn i { display: inline-block; margin: 0; font-size: .95em; color: inherit; opacity: 1; }