/* Creature library pages: build on the landing theme tokens defined in home.css, and the listing
   and statistics styles shared with the guild and house directories in directory.css */

/* The sort buttons share the filter bar with the name box, sitting beside it and wrapping below on a
   narrow screen. They mirror the board tabs' look from directory.css */
.sort-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sort-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sort-button {
  padding: 6px 12px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: #17140f;
  background-image: var(--surface-control);
}

.sort-button:hover {
  color: white;
  border-color: var(--accent);
}

/* The button of the order currently shown */
.sort-button.active {
  color: var(--accent);
  border-color: var(--accent);
}

/* The listing is a grid of cards, one per creature, sized to fit as many across as the screen allows */
.creature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  padding: 16px;
}

/* One creature card: its look above its name and headline statistics, linked to its page */
.creature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #17140f;
  background-image: var(--surface-control);
}

.creature-card:hover {
  border-color: var(--accent);
}

/* A card the filter hides: the explicit display above outranks the hidden attribute's own, so the
   filtered-out cards need this to actually leave the grid */
.creature-card[hidden] {
  display: none;
}

/* A fixed look square so the cards align whether the sprite is small, large, or never drawn. The
   inset stands in for a look the visitor's cached files cannot draw */
.creature-card-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  image-rendering: pixelated;
}

.creature-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

.creature-card-name {
  font-size: 13px;
}

.creature-card-stat {
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
}

/* The library blurb drawn from the creature's archived page, leading the detail panel above the
   statistics. It reads as body copy, so it drops the bold weight the rest of the page carries */
.creature-description {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--muted);
  font-weight: normal;
  line-height: 1.6;
}

.creature-description p {
  margin: 0 0 12px;
}

.creature-description p:last-child {
  margin-bottom: 0;
}

/* The identity row places the creature look beside its statistics and immunities, wrapping below
   them on a narrow screen */
.creature-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  padding: 16px;
}

/* The statistics and immunities columns that sit next to the look */
.identity-column {
  flex: 1 1 240px;
  min-width: 0;
}

.column-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The look square, shown only when the visitor's cached client files can render the sprite */
.outfit-frame {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #17140f;
  background-image: var(--surface-control);
  image-rendering: pixelated;
}

/* The composed 64x64 look sprite, drawn crisp inside its frame */
.outfit-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

/* The immunities column stacks its damage and condition rows */
.immunity-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.immunity-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* The immunities themselves, each a small badge, wrapping onto the next line as they fill the column */
.immunity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.immunity-badge {
  padding: 3px 9px;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background-color: #17140f;
  background-image: var(--surface-control);
}

/* A creature immune to nothing says as much rather than showing an empty column */
.immunity-none {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}