/* Раздел «Топ игроков»: вид — таблица предметов (item-table), строки плотнее; статус — точка и слово: в сети —
   зелёным, не в сети — приглушённым. Фон — главной (page.css). */

.top-table {
  --row-height: var(--row-height-compact);
}

/* Пояснения столбцов всплывают над шапкой — рамка с прокруткой их обрезала бы; на мониторе таблица влезает. */
.top-table .item-table__frame {
  overflow: visible;
}

.top-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  color: var(--color-text-muted);
}

.top-status__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.top-status.is-online {
  color: var(--color-online);
}

.top-status.is-online .top-status__dot {
  opacity: 1;
  box-shadow: 0 0 6px var(--color-online);
}

/* Узкое окно и телефон: таблица шире экрана — листается вбок внутри рамки, страница вбок не ездит. */
@media (max-width: 900px) {
  .top-table .item-table__frame {
    overflow-x: auto;
  }
}

.top-note {
  max-width: var(--text-width);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

/* Таблица слева, первая тройка — колонкой справа (автор, 2026-09-25). Уже 1200 — тройка над таблицей, блоки в ряд
   с переносом; на телефоне — друг под другом. */
.top-layout {
  display: grid;
  grid-template-columns: minmax(0, max-content) var(--podium-width);
  align-items: start;
  gap: var(--space-5);
}

/* Блоки начинаются вровень с рамкой таблицы (автор, 2026-09-25): над рамкой — строка «Героев: …» (item-table__count,
   0.875rem при межстрочном --text-line) и зазор блока таблицы. */
.top-layout .top-podium {
  margin-top: calc(var(--space-5) + 0.875rem * var(--text-line) + var(--space-3));
}

@media (max-width: 1200px) {
  .top-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .top-layout .top-podium {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Блоки в ряду делят ширину поровну, на телефоне каждый — во всю строку. */
  .top-layout .hero-card {
    flex: 1 1 auto;
  }
}