/* Таблицы рейтингов, статусы сервера, списки онлайна и постраничная навигация. */

/* ---------- Таблицы (MONO: чистые строки, без ховера) ---------- */
.table-scroll { overflow-x: auto; }
.table-scroll .rank-table { min-width: 880px; }
/* Первая колонка липкая: на узком экране таблица шириной 880px уезжает вбок, и
   имя персонажа — то, ради чего строку и смотрят, — уходило за край. Фон задаём
   явно, иначе сквозь ячейку видно соседние строки. */
.rank-table th:first-child, .rank-table td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel-bg);
}
/* На главной таблица лежит в той же панели, фон совпадает; на странице рейтингов
   панель своя — та же переменная, поэтому правило одно на обе. */
.rank-table thead th:first-child { z-index: 2; }
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th, .rank-table td { padding: .6rem .7rem; text-align: left; }
.rank-table th {
  color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}
.rank-table tr { border-bottom: 1px solid var(--border); }
.rank-table tr:last-child { border-bottom: none; }
.rank-table td { font-variant-numeric: tabular-nums; }
.rank { color: var(--muted); }
.clan { color: var(--muted); font-size: .88rem; }
.class { color: var(--muted); font-size: .88rem; }
/* Победитель выделен целиком — и номером, и именем. Второе и третье места
   раньше различались только золотым именем, хотя классы top-2/top-3 в шаблонах
   проставлялись (index.html:35, ratings.html:26) и правил для них не было: на
   верхушке таблицы три строки выглядели одинаково. Серебро и бронза — своим
   приглушённым тоном, порядок остаётся золотым. */
.top-1 td:first-child, .top-1 td:nth-child(2) { color: var(--medal-1); font-weight: 700; }
.top-2 td:first-child, .top-2 td:nth-child(2) { color: var(--medal-2); font-weight: 700; }
.top-3 td:first-child, .top-3 td:nth-child(2) { color: var(--medal-3); font-weight: 700; }

/* Сортировка по клику по заголовку: стрелка только у активной колонки. */
.th-sort a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.th-sort a:hover { color: var(--accent-strong); }
.th-sort .arrow { font-size: .55rem; }
.th-sort:not(.is-active) .arrow { visibility: hidden; }
.th-sort.is-active { color: var(--accent-strong); }
.rank-table td.col-active { color: var(--accent-strong); font-weight: 600; }

.pager { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: 1.2rem; font-size: .85rem; }

/* Палец вместо мыши: .btn-sm с padding .35rem был около 34px высотой — мимо
   рекомендованных 44. На десктопе компактность нужна (там кнопки стоят в строку
   с текстом), на ощупь — нет, поэтому правило только для coarse-указателя. */
@media (pointer: coarse) {
  .btn-sm { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
}

.dot-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  margin-left: .4rem; vertical-align: middle; }
.st-up, .st-down { background: none; }
.status-list { list-style: none; display: grid; gap: .6rem; }
.status-list li { display: flex; align-items: center; font-size: .92rem; }
.status-list .dot-online { margin: 0; flex: 0 0 auto; }
.status-list b { font-weight: 600; color: var(--text); }
.status-uptime .srv-status b { color: var(--accent-strong); }
/* Мёртвый сервер: время работы окрашено так же, как индикатор st-down. */
.status-uptime .srv-status b.st-offline { color: var(--red); }
.status-uptime .srv-status.st-offline .st-icon { color: var(--red); }
.srv-status { display: flex; align-items: center; gap: .55rem; color: var(--text); flex: 1; }
.srv-status b { margin: 0; }
.srv-status small { color: var(--muted); font-size: .82rem; }
.srv-status .ekg { margin-left: auto; }
.st-icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent); opacity: .9; }
.ekg { width: 36px; height: 16px; flex: 0 0 auto; color: var(--green); display: block; }
.ekg.st-down { color: var(--red); }

/* ---------- Списки ---------- */
.online-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.online-list li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .55rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .88rem;
}
.online-list em { color: var(--muted); font-style: normal; font-size: .78rem; }

.info-list { list-style: none; }
.info-list li { padding: .4rem 0; border-bottom: 1px solid var(--border); }
.info-list li:last-child { border-bottom: none; }
.info-list b { color: var(--text); }