/* Layout only — per-card colors are injected inline via Mantine CSS vars. */

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* flex-start keeps the first row reachable when the wrapped cards overflow and
     the container scrolls. With align-content: center, an overflowing top row is
     pushed out of the scrollable area and becomes unreachable. The parent Mantine
     Center still vertically centers the whole block when it fits. */
  align-content: flex-start;
  gap: 10px;
  /* Cap the height so a large number of roles scrolls instead of blowing out
     the empty chat area. */
  max-height: 100%;
  overflow-y: auto;
  padding: 8px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Grow to fill the row so cards use the available window width instead of
     leaving large side gaps; the flex-basis sets how many fit per row before
     wrapping (≈2 columns at the default window width, more as it widens). */
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 360px;
  min-height: 90px;
  padding: 12px 10px;
  border-radius: var(--mantine-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mantine-shadow-sm);
}

.emoji {
  font-size: 22px;
  line-height: 1;
}

/* The description: small and slightly muted, inheriting the card's color. We
   reduce opacity instead of using Mantine's `c="dimmed"` so it doesn't clash
   with the card's inline color. */
.description {
  opacity: 0.8;
  line-height: 1.3;
  /* Break long unbreakable tokens (URLs, long foreign words) in the
     admin-configured description so they wrap instead of overflowing the card
     width now that the line clamp no longer caps the text. */
  overflow-wrap: anywhere;
}