/* Общий стиль для таблицы рейтинга */
#ratingTable {
  width: 100%;
  table-layout: fixed; /* равномерное распределение ширины */
  font-size: 1rem;
}

.dataTables_scrollHeadInner th {
  text-align: center !important;
}

/* Центрируем заголовки и содержимое */
#ratingTable th,
#ratingTable td {
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px dotted rgba(128, 128, 128, 0.747);
}

/* Первый столбец — уже остальных */
#ratingTable th:first-child,
#ratingTable td:first-child {
  width: 25%;
  white-space: nowrap; /* предотвращает перенос имени */
  text-align: left;
  padding-left: 2rem;
}

.name {
  display: flex;
  gap: 0.5rem;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: end;
}

/* Второй столбец (достижения) — пошире */
#ratingTable th:nth-child(2),
#ratingTable td:nth-child(2) {
  width: 60%;
  text-align: center;
}

/* Третий столбец (рейтинг) — фиксированной ширины */
#ratingTable th:nth-child(3),
#ratingTable td:nth-child(3) {
  width: 15%;
  text-align: center;
}

/* Указатель при наведении */
#ratingTable .dtrg-group {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Подсветка при наведении */
#ratingTable .dtrg-group:hover {
  background-color: #e8f3ff !important;
}

/* Стрелка */
#ratingTable .toggle-icon {
  font-size: 14px;
  color: #333;
  transition: transform 0.2s;
}

/* Скрытые строки не занимают место */
#ratingTable tr[style*="display: none"] {
  visibility: collapse;
}

.achivments {
    margin: auto;
  }

/* На мобильных делаем компактнее */
@media (max-width: 768px) {
  #ratingTable {
    font-size: 0.85rem;
  }

  #ratingTable th,
  #ratingTable td {
    padding: 0.2rem 0.1rem;
  }

  /* Имена не должны занимать слишком много места */
  #ratingTable th:first-child,
  #ratingTable td:first-child {
    width: 35%;
    padding-left: 0.4rem;
  }

  .name {
    gap: 0.4rem;
  }
  
  #ratingTable th:nth-child(2),
  #ratingTable td:nth-child(2) {
    width: 40%;
  }

  #ratingTable th:nth-child(3),
  #ratingTable td:nth-child(3) {
    width: 25%;
  }

  .achivments {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    display: grid;
  }
}