/* Bestiary: hunter's compendium. */

.bestiary { padding-bottom: 18px; }
.bx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 12px; }
.bx-head h2 { margin: 6px 0; font-family: var(--title); font-size: 26px; letter-spacing: 1px; color: #e7ddd1; }
.bx-head p { max-width: 640px; line-height: 1.5; }
.bx-summary { display: flex; gap: 8px; }
.bx-summary > div {
  display: grid;
  justify-items: center;
  min-width: 96px;
  padding: 8px 12px;
  border: 1px solid #4d3a38;
  border-radius: 10px;
  background: linear-gradient(160deg, #251f1f, #141111);
}
.bx-summary b { color: #e4d8ca; font-family: var(--title); font-size: 22px; font-variant-numeric: tabular-nums; }
.bx-summary b small { color: #8e7776; font-size: 13px; }
.bx-summary span { color: #a8998c; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }

.bx-tabs { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.bx-tabs button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #4d3a38;
  border-radius: 7px;
  background: #1b1414;
  color: #baab9a;
  font-size: 12px;
  font-weight: 600;
}
.bx-tabs button.active { border-color: #b3262e; color: #e1d4c5; background: linear-gradient(#4a1418, #2a1012); }
.bx-ranks { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; color: #8e7776; font-size: 11px; }
.bx-ranks b { color: #cdbfae; font-weight: 600; }

/* Grave selector */
.bx-graves { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.bestiary .bx-grave {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 8px;
  min-height: 0;
  height: auto;
  padding: 8px 9px;
  border: 1px solid #3e3130;
  border-radius: 9px;
  background: linear-gradient(160deg, #1e1717, #121010);
  color: #cfc2b0;
  text-align: left;
}
.bestiary .bx-grave:hover { border-color: #6e1a1f; }
.bestiary .bx-grave.active { border-color: #b3262e; box-shadow: 0 0 0 1px #b3262e55; background: linear-gradient(160deg, #3a1a1c, #130f0f); }
.bestiary .bx-grave.locked { opacity: .55; }
.bx-grave-num { grid-row: span 2; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 5px; border: 1px solid #6e1a1f; border-radius: 14px; font-size: 11px !important; color: #e4d8ca; font-family: var(--title); font-size: 12px; font-weight: 700; }
.bx-grave-name { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bx-grave-progress { position: relative; height: 4px; overflow: hidden; border-radius: 3px; background: #2e2424; }
.bx-grave-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7a161c, #e5dacd); }
.bx-grave small { grid-column: 2; color: #8e7776; font-size: 10px; }

/* Layout */
.bx-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 16px; align-items: start; }
.bx-region-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 108px;
  margin-bottom: 10px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid #4d3a38;
  border-radius: 12px;
  background: linear-gradient(90deg, #0c0909f2 0%, #0c0909aa 45%, #0c090922 100%), var(--region-art) center 60% / cover, #171212;
}
.bx-region-banner h3 { margin: 4px 0 2px; font-family: var(--title); font-size: 22px; color: #ebe2d7; text-shadow: 0 2px 6px #000; }
.bx-region-banner p { margin: 0; color: #cfc2b0; }

/* Creature grid */
.bx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.bestiary .bx-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #3e3130;
  border-radius: 11px;
  background: linear-gradient(170deg, #1f1919, #121010);
  color: inherit;
  text-align: left;
  transition: border-color .15s, transform .12s;
}
.bestiary .bx-card:hover { border-color: #6e1a1f; transform: translateY(-1px); }
.bestiary .bx-card.active { border-color: #b3262e; box-shadow: 0 0 0 1px #b3262e66, 0 6px 18px #0008; }
.bestiary .bx-card.founder { border-color: #544141; background: linear-gradient(170deg, #221b1b, #0e0c0c); }
.bx-art {
  display: grid;
  place-items: end center;
  height: 118px;
  padding-top: 6px;
  background: radial-gradient(ellipse at 50% 85%, #332828 0%, transparent 65%);
}
.bx-art img { width: auto; height: 108px; object-fit: contain; filter: drop-shadow(0 4px 4px #000c); }
.bx-art.unknown img, .bx-hero-art.unknown img { filter: brightness(0) drop-shadow(0 0 1px #851f2588); opacity: .75; }
.bx-card-body { display: grid; gap: 4px; padding: 8px 10px 10px; border-top: 1px solid #2a2121; }
.bx-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.bx-card-title strong { overflow: hidden; color: #ebe2d7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bx-card.is-unknown .bx-card-title strong { color: #a8998c; }
.bx-level { flex: 0 0 auto; color: #a8998c; font-size: 11px; }
.bx-card-sub { color: #8e7776; font-size: 11px; }
.bx-rank { display: flex; align-items: center; justify-content: space-between; color: #c23a3a; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.bx-rank b { color: #cfc2b0; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bx-rank.none { color: #6f5250; }
.bx-rank-bar { height: 3px; overflow: hidden; border-radius: 2px; background: #2e2424; }
.bx-rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a161c, #e5dacd); }

/* Detail panel */
.bx-detail {
  position: sticky;
  top: 0;
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
  overflow: hidden;
  border: 1px solid #4d3a38;
  border-radius: 12px;
  background: linear-gradient(180deg, #1b1414, #110d0d);
}
.bx-hero {
  display: grid;
  place-items: end center;
  height: 190px;
  margin: 0 -14px;
  background: linear-gradient(180deg, #0c090933, #110d0d 96%), var(--region-art) center 62% / cover, #171212;
}
.bx-hero-art img { height: 176px; width: auto; filter: drop-shadow(0 6px 6px #000d); }
.bx-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bx-detail-head h3 { margin: 4px 0 0; font-family: var(--title); font-size: 20px; color: #ebe2d7; }
.bx-rank.big { padding: 3px 9px; border: 1px solid #67181d; border-radius: 12px; font-size: 11px; }
.bx-rank.big.none { border-color: #362b2a; }
.bx-record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bx-record > div { display: grid; padding: 6px 8px; border: 1px solid #362b2a; border-radius: 8px; background: #171313; }
.bx-record b { color: #e7dcd0; font-size: 15px; font-variant-numeric: tabular-nums; }
.bx-record small { color: #8e7776; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.bx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; margin: 0; }
.bx-stats > div { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; border-bottom: 1px solid #2a2222; font-size: 12px; }
.bx-stats dt { color: #8e7776; }
.bx-stats dd { margin: 0; color: #dfd1c0; font-weight: 600; }
.bx-lore p { margin: 0 0 6px; color: #d4c6a8; font-size: 13px; line-height: 1.5; }
.bx-cue span, .bx-counter span { display: inline-block; margin-right: 8px; color: #a8998c; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.bx-cue { color: #e5dacd !important; }
.bx-counter { color: #b6e08f !important; }
.bx-locked-note { padding: 10px; border: 1px dashed #3e3130; border-radius: 8px; color: #a8998c !important; font-style: italic; }
.bx-phases { margin: 4px 0 8px; padding-left: 18px; color: #d4c6a8; font-size: 12.5px; line-height: 1.5; }
.bx-phases li { margin-bottom: 4px; }
.bx-detail h4 { margin: 4px 0 0; color: #b4484d; font-family: var(--title); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.bx-materials { display: flex; flex-wrap: wrap; gap: 6px; }
.bestiary .bx-material {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid #4d3a38;
  border-radius: 14px;
  background: #1c1515;
  color: #d8c7b4;
  font-size: 12px;
}
.bx-material small { color: #8e7776; }
.bx-packs { display: grid; gap: 6px; }
.bx-pack { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #cfc2b0; font-size: 12px; }
.bx-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bx-actions .primary { min-height: 38px; padding: 0 22px; }

@media (max-width: 1280px) {
  .bx-graves { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bx-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
}
@media (max-width: 960px) {
  .bx-head { flex-direction: column; align-items: stretch; }
  .bx-summary > div { flex: 1; min-width: 0; }
  .bx-graves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-layout { grid-template-columns: minmax(0, 1fr); }
  .bx-detail { position: static; }
  .bx-ranks { display: none; }
  .bx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1700px) and (min-width: 961px) {
  .bx-graves { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}