.tierlist-categories {
  display: flex;

  flex-direction: row;
  flex-wrap: wrap;

  background-color: rgba(0, 0, 0, .5);
  border-radius: min(12px, calc(12 * 0.1667vh));

  justify-content: flex-start;

  gap: min(24px, calc(24vh/6));

  padding: 12px;
}

.tierlist-filters {
  display: flex;
  flex-direction: row;

  flex-wrap: wrap;

  gap: min(12px, calc(12vh/6));

  background-color: rgba(40, 40, 40, 0.5);
  border-radius: min(12px, calc(12 * 0.1667vh));

  max-width: min(1680px, 95vw);

  align-items: stretch;
  justify-content: flex-start;

  padding: min(12px, calc(12vh/6)) min(24px, calc(24vh/6));

  flex: 1;
}

.tierlist-container {
  display: flex;

  flex-direction: column;

  border-radius: min(12px, calc(12 * 0.1667vh));

  flex: 1;

  gap: 12px;
}

.tierlist-page-main {
  display: flex;

  flex-direction: column;
  gap: min(16px, calc(16 * 0.1667vh));
}

.tierlist-controls {
  padding: min(12px, calc(12 * 0.1667vh));
  border-radius: min(16px, calc(16 * 0.1667vh));
  border: 1px solid var(--color-border-subtle, #1f2937);
  background-color: rgba(15, 23, 42, 0.96);
}

.tierlist-tiers {
  display: flex;

  flex-direction: column;
  gap: min(16px, calc(16 * 0.1667vh));
}

/* Tierlist page: let filters use full content width and align from the left */
body.tierlist-page .tierlist-filters {
  max-width: none;
  width: 100%;
}

#tl-unit-classes {
  display: flex;

  justify-content: flex-start;

  flex-direction: row;
}

.tl-tier-row-wrapper {
  display: flex;

  justify-content: flex-start;

  flex-direction: row;
}