.rankings-page { font-size: 14px; }
.ranking-filters { grid-template-columns: 100px 120px minmax(220px, 2fr) minmax(170px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr); }
.rankings-page label { font-size: 14px; }
.rankings-page select, .rankings-page input, .rankings-page button { font-size: 14px; }
.ranking-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.ranking-toolbar label { display: grid; gap: 6px; color: var(--muted); }
.sort-toggle { display: flex; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.sort-toggle button { padding: 9px 16px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; cursor: pointer; }
.sort-toggle button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
.search-filter { margin-left: auto; min-width: 230px; }
.search-filter input { height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px; color: var(--ink); background: var(--surface); width: 100%; }
#rankingStatus { color: var(--muted); min-height: 25px; margin-bottom: 12px; }
#rankingStatus button { margin-left: 12px; }
.rankings-panel { transition: opacity .1s; }
.rankings-panel[aria-busy=true] { opacity: .35; pointer-events: none; }
#rankings { min-width: 1030px; width: 100%; }
#rankings th { font-size: 12px; text-transform: none; }
#rankings td { font-size: 14px; padding: 13px 12px; }
#rankings td:nth-child(1), #rankings td:nth-child(4), #rankings td:nth-child(6) { font-family: var(--mono); }
#rankings td:first-child { color: var(--accent); }
#rankings td:nth-child(2) { min-width: 180px; font-weight: 500; }
#rankings small { display: block; font: 400 12px/1.5 var(--sans); color: var(--muted); max-width: 280px; white-space: normal; }
#rankings .mark-warning { color: var(--gold); }
#rankings .mobile-meta { display: none; }
#rankings .spark { display: inline-block; width: 56px; height: 18px; margin-left: 10px; vertical-align: -3px; }
#rankings .spark svg { display: block; overflow: visible; }
#rankings .spark.is-loading { border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
#rankings .spark polyline { stroke: #5b6567; }
#rankings .spark circle { fill: #8a9692; }
#rankings .spark[data-trend="up"] polyline { stroke: var(--accent); }
#rankings .spark[data-trend="up"] circle { fill: var(--accent); }
#rankings .spark[data-trend="down"] polyline { stroke: #edaaa1; }
#rankings .spark[data-trend="down"] circle { fill: #edaaa1; }
.trend-key { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.trend-key i { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.trend-key .up { background: var(--accent); }
.trend-key .down { margin-left: 8px; background: #edaaa1; }
.rankings-page[data-sort=mark] #rankings td:nth-child(4), .rankings-page[data-sort=elo] #rankings td:nth-child(6) { color: var(--accent); font-weight: 600; }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-top: 16px; }
.methodology p { max-width: 105ch; }
@media (max-width:1000px) { .ranking-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } .event-filter { grid-column: 1/-1; } .search-filter { margin-left: 0; flex: 1; } }
@media (max-width:700px) { .sort-toggle { flex: 1 0 100%; } .sort-toggle button { flex: 1; } .search-filter { flex: 1 0 100%; min-width: 0; } .ranking-toolbar { gap: 12px; } .pagination { justify-content: space-between; } }
@media (max-width:700px) {
  #rankings { min-width: 0; table-layout: fixed; }
  #rankings th, #rankings td { padding: 12px 7px; }
  #rankings th { white-space: normal; line-height: 1.35; }
  #rankings th:first-child { width: 38px; }
  #rankings th:nth-child(4) { width: 80px; }
  #rankings th:nth-child(6) { width: 76px; }
  #rankings td:nth-child(2) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #rankings :is(th,td):is(:nth-child(3),:nth-child(5),:nth-child(7),:nth-child(8)) { display: none; }
  #rankings .mobile-meta { display: block; }
  #rankings td:nth-child(6) small { display: none; }
  #rankings .spark { display: block; width: 48px; height: 14px; margin: 5px 0 0; }
  .trend-key { display: none; }
}