/* ══════════════════════════════════════════════════════════════════════════
   Poker Super League — Global Rankings (full) page.

   Reuses the shared table (`.table`, `.table-scroll`, `.tag`, rank/trend/flag
   styles), nav, CTA and footer from `styles.css`. Adds the four-way filter bar,
   the Find Player search field, and pagination.
   ══════════════════════════════════════════════════════════════════════════ */

.rk-header { padding: clamp(40px, 7vw, 72px) 0 8px; }
.rk-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--psl-blue); text-decoration: none;
}
.rk-back:hover { color: #5cc0ef; }
.rk-h1 { font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 6px; color: #fff; }
.rk-sub { font-size: 16px; margin: 0; }

/* Filter bar: four controls that wrap on narrow screens. */
.rk-filters {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin: 26px 0 4px;
}
.rk-filters .field { min-width: 0; }
.rk-search-wrap { position: relative; }
.rk-search-wrap .rk-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: rgba(200, 210, 225, .5); pointer-events: none;
}
.rk-search { padding-left: 34px; }

@media (max-width: 820px) { .rk-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rk-filters { grid-template-columns: 1fr; } }

/* Table wrapper spacing */
.rk-table-wrap { margin-top: 22px; }

/* Pagination */
.rk-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 24px; flex-wrap: wrap;
}
.rk-page-btn {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 9px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rk-page-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--psl-blue) 60%, transparent); }
.rk-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.rk-page-btn[aria-current="page"] {
  background: var(--psl-red); border-color: var(--psl-red); color: #fff; cursor: default;
}
.rk-page-ellipsis { padding: 0 4px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.rk-page-info { text-align: center; margin-top: 12px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }