/* Página pública de ranking ELO: reglas aisladas de la vista. */
.elo-ranking-page {
  max-width: 76rem;
}

.elo-ranking-header {
  max-width: 76rem;
  margin-inline: auto;
}

.elo-filter-surface {
  max-width: 76rem;
  margin: 0 auto .7rem;
}

.elo-ranking-header h1,
.elo-section-heading h2 {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.elo-ranking-header h1 {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.elo-ranking-header p {
  margin: .25rem 0 0;
  color: #c6cbd1;
}

.elo-page-kicker,
.elo-section-kicker {
  color: var(--x3-green, #c8ff00);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.elo-filter-bar,
.elo-podium,
.elo-ranking-surface {
  background: #101417;
  border: 1px solid rgba(203, 255, 0, .18);
  border-radius: .8rem;
}

.elo-filter-bar {
  display: grid;
  grid-template-columns: minmax(8rem, 10rem) minmax(12rem, 1fr) auto;
  align-items: end;
  gap: .55rem;
  padding: .7rem;
}

.elo-secondary-filters {
  grid-column: 1 / -1;
  min-width: 0;
}

.elo-secondary-filters summary {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  cursor: pointer;
  color: #d6dbe0;
  font-size: .8rem;
  font-weight: 750;
}

.elo-secondary-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 10rem));
  gap: .55rem;
  padding-top: .35rem;
}

.elo-filter-field label {
  display: block;
  margin: 0 0 .22rem;
  color: #d6dbe0;
  font-size: .76rem;
  font-weight: 700;
}

.elo-filter-bar .form-select,
.elo-filter-bar .form-control {
  min-height: 2.35rem;
  padding: .36rem .6rem;
  background-color: #191e22;
  border-color: #3f484f;
  color: #fff;
  font-size: .9rem;
}

.elo-filter-bar .form-select:focus,
.elo-filter-bar .form-control:focus {
  border-color: var(--x3-green, #c8ff00);
  box-shadow: 0 0 0 .2rem rgba(200, 255, 0, .16);
}

.elo-filter-actions {
  display: flex;
  gap: .45rem;
  white-space: nowrap;
}

.elo-filter-actions .btn {
  min-height: 2.35rem;
  padding: .35rem .7rem;
  font-size: .88rem;
  font-weight: 700;
}

.elo-podium,
.elo-ranking-surface {
  padding: .7rem;
  margin-bottom: .7rem;
}

.elo-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}

.elo-section-heading h2 {
  font-size: 1.12rem;
}

.elo-active-filter {
  padding: .2rem .45rem;
  border: 1px solid rgba(200, 255, 0, .4);
  border-radius: 99rem;
  color: var(--x3-green, #c8ff00);
  font-size: .72rem;
  font-weight: 700;
}

.elo-podium-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.elo-podium-item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  min-height: 3.8rem;
  padding: .45rem .55rem;
  background: #171c20;
  border: 1px solid #303940;
  border-left: .22rem solid var(--x3-green, #c8ff00);
  border-radius: .55rem;
  color: #fff;
  text-decoration: none;
}

.elo-podium-item:hover {
  border-color: var(--x3-green, #c8ff00);
  color: #fff;
}

.elo-podium-item.is-1 { border-left-color: #d8ff3e; }
.elo-podium-item.is-2 { border-left-color: #c4ccd4; }
.elo-podium-item.is-3 { border-left-color: #d99a56; }

.elo-podium-position {
  color: var(--x3-green, #c8ff00);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.elo-podium-player,
.elo-weekly-item > span:first-child {
  min-width: 0;
}

.elo-podium-player strong,
.elo-podium-player small,
.elo-weekly-item strong,
.elo-weekly-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.elo-podium-player strong { font-size: .92rem; }
.elo-podium-player small,
.elo-weekly-item small { color: #bac1c7; font-size: .74rem; }

.elo-podium-score,
.elo-score {
  color: var(--x3-green, #c8ff00);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.elo-podium-score { font-size: 1rem; }
.elo-podium-score small { color: #aeb7bd; font-size: .67rem; }

.elo-ranking-page .people-elo-table-wrap {
  overflow: visible;
}

.elo-ranking-page .elo-ranking-table {
  margin: 0;
  border-color: #2f373e;
  color: #edf0f2;
  font-size: .9rem;
}

.elo-ranking-page .elo-ranking-table thead th {
  padding: .43rem .55rem;
  background: #171c20;
  border-bottom-color: #38424a;
  color: #aeb7bd;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.elo-ranking-page .elo-ranking-table tbody td {
  padding: .38rem .55rem;
  border-bottom-color: #293138;
  background: #101417;
  vertical-align: middle;
}

.elo-ranking-page .elo-ranking-table tbody tr:hover td {
  background: #171d20;
}

.elo-ranking-page .elo-ranking-table tbody td:nth-child(1),
.elo-ranking-page .elo-ranking-table tbody td:nth-child(4),
.elo-ranking-page .elo-ranking-table tbody td:nth-child(5),
.elo-ranking-page .elo-ranking-table tbody td:nth-child(6) {
  white-space: nowrap;
}

.elo-player-link {
  color: #f4f6f7;
  font-weight: 750;
  text-decoration: none;
}

.elo-player-link:hover,
.elo-player-link:focus-visible {
  color: var(--x3-green, #c8ff00);
  text-decoration: underline;
}

.elo-rank-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid #47525a;
  border-radius: 50%;
  color: #d8dee2;
  font-size: .79rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.elo-rank-number.is-top-1,
.elo-rank-number.is-top-2,
.elo-rank-number.is-top-3 {
  border-color: var(--x3-green, #c8ff00);
  color: var(--x3-green, #c8ff00);
}

.elo-category { display: block; color: #e8ecee; }
.elo-equivalence { display: block; color: #aeb7bd; font-size: .75rem; }
.elo-score { font-size: .98rem; }

.elo-division-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: .1rem .42rem;
  border: 1px solid #546069;
  border-radius: 99rem;
  color: #d8dee2;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.elo-record { display: grid; gap: .05rem; text-align: right; font-variant-numeric: tabular-nums; }
.elo-record strong { color: #eff2f4; font-size: .84rem; }
.elo-record small { color: #aeb7bd; font-size: .69rem; }

.elo-pagination-wrap { margin-top: .8rem; }
.elo-pagination .page-link { padding: .3rem .55rem; background: #171c20; border-color: #3c464d; color: #e6eaed; font-size: .82rem; }
.elo-pagination .page-item.active .page-link { background: var(--x3-green, #c8ff00); border-color: var(--x3-green, #c8ff00); color: #101417; }

.elo-empty-state { padding: 1.6rem .75rem; color: #c6cbd1; text-align: center; }
.elo-empty-state-compact { padding: .7rem 0 0; font-size: .9rem; }

.elo-weekly-disclosure {
  margin: 0;
  padding: .65rem .8rem;
  background: #101417;
  border: 1px solid #2f373e;
  border-radius: .7rem;
}

.elo-weekly-disclosure summary { color: #e9edef; font-size: .9rem; font-weight: 800; }
.elo-weekly-disclosure > p { margin: .45rem 0 .65rem; color: #bac1c7; font-size: .82rem; }
.elo-weekly-list { display: grid; gap: .35rem; }

.elo-weekly-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .6rem;
  padding: .45rem .5rem;
  background: #171c20;
  border-radius: .4rem;
  color: #f2f4f5;
  text-decoration: none;
}

.elo-weekly-item:hover { color: #fff; background: #1c2327; }
.elo-weekly-delta { color: var(--x3-green, #c8ff00); font-size: .82rem; font-weight: 850; white-space: nowrap; }

@media (max-width: 991.98px) {
  .elo-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elo-search-field { grid-column: span 1; }
}

@media (max-width: 767.98px) {
  .elo-ranking-page { padding-inline: .65rem; }
  .elo-ranking-header { gap: .7rem; margin-bottom: .7rem; }
  .elo-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .6rem; }
  .elo-search-field, .elo-filter-actions { grid-column: 1 / -1; }
  .elo-filter-actions { justify-content: stretch; }
  .elo-filter-actions .btn { flex: 1; }
  .elo-secondary-filter-grid { grid-template-columns: 1fr; }
  .elo-podium, .elo-ranking-surface { padding: .55rem; margin-bottom: .6rem; }
  .elo-podium-list { grid-template-columns: 1fr; }
  .elo-podium-item { min-height: 3.8rem; }

  .elo-ranking-page .people-elo-table-wrap,
  .elo-ranking-page .elo-ranking-table,
  .elo-ranking-page .elo-ranking-table tbody,
  .elo-ranking-page .elo-ranking-table tr,
  .elo-ranking-page .elo-ranking-table td {
    display: block;
    width: 100%;
  }

  .elo-ranking-page .elo-ranking-table thead { display: none; }
  .elo-ranking-page .elo-ranking-table tbody { display: grid; gap: .35rem; }
  .elo-ranking-page .elo-ranking-table tbody tr {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) auto;
    grid-template-areas:
      "rank player score"
      "rank category division"
      "rank record record";
    gap: .15rem .5rem;
    padding: .5rem;
    background: #151a1e;
    border: 1px solid #303a41;
    border-radius: .55rem;
  }

  .elo-ranking-page .elo-ranking-table tbody td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: normal;
  }

  .elo-ranking-page .elo-ranking-table tbody td::before {
    display: none;
    content: none;
  }

  .elo-ranking-page .elo-ranking-table tbody td:nth-child(1) { grid-area: rank; align-self: center; }
  .elo-ranking-page .elo-ranking-table tbody td:nth-child(2) { grid-area: player; }
  .elo-ranking-page .elo-ranking-table tbody td:nth-child(3) { grid-area: category; }
  .elo-ranking-page .elo-ranking-table tbody td:nth-child(4) { grid-area: score; align-self: center; text-align: right; }
  .elo-ranking-page .elo-ranking-table tbody td:nth-child(5) { grid-area: division; align-self: center; text-align: right; }
  .elo-ranking-page .elo-ranking-table tbody td:nth-child(6) { grid-area: record; }
  .elo-ranking-page .elo-ranking-table .elo-record { display: flex; justify-content: space-between; padding-top: .25rem; border-top: 1px solid #303940; text-align: left; }
  .elo-player-link { display: block; overflow-wrap: break-word; }
  .elo-weekly-item { grid-template-columns: minmax(0, 1fr) auto; }
  .elo-weekly-item > small { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .elo-filter-bar { grid-template-columns: 1fr; }
  .elo-search-field, .elo-filter-actions { grid-column: auto; }
}