[hidden] { display: none !important; }

:root {
  --bestiary-bg: #080a0b;
  --bestiary-panel: #0f1113;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.bestiary-dialog-open { overflow: hidden; }

.bestiary-body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--k-text, #eee5d2);
  background:
    radial-gradient(circle at 50% 0, rgba(106, 73, 38, .1), transparent 35rem),
    var(--bestiary-bg);
}

.bestiary-page { width: min(1560px, calc(100% - 30px)); }

.bestiary-hero {
  background:
    linear-gradient(90deg, rgba(7,8,9,.96), rgba(9,11,12,.82) 58%, rgba(9,11,12,.52)),
    radial-gradient(circle at 82% 48%, rgba(166,128,199,.14), transparent 24rem),
    url('/assets/bestiary/banner.png') center / cover no-repeat;
  border-color: rgba(214,168,79,.34);
}

.bestiary-hero::after {
  content: '';
  position: absolute;
  right: -84px;
  bottom: -150px;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(214,168,79,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(214,168,79,.024), 0 0 0 60px rgba(166,128,199,.015);
  pointer-events: none;
}

.bestiary-hero .hero-copy { position: relative; z-index: 2; }

.bestiary-status {
  margin: 15px 2px 0;
  color: var(--k-muted, #b8ad98);
  font-size: .9rem;
}
.bestiary-status.ok { color: #98d282; }
.bestiary-status.error { color: #e58b80; }

.bestiary-content { min-width: 0; }
.bestiary-volumes { display: grid; gap: 14px; margin-top: 18px; }

.bestiary-volume {
  --volume-accent: #80ad62;
  --volume-deep: #365628;
  --volume-soft: rgba(128,173,98,.16);
  scroll-margin-top: 105px;
  border: 1px solid color-mix(in srgb, var(--volume-accent) 48%, #282a2c);
  border-top: 3px solid var(--volume-accent);
  border-radius: 10px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--volume-accent) 11%, transparent), transparent 34%),
    var(--bestiary-panel);
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

.bestiary-volume > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) auto auto;
  gap: 14px;
  align-items: center;
  min-height: 100px;
  padding: 13px 15px;
  cursor: pointer;
  user-select: none;
}
.bestiary-volume > summary::-webkit-details-marker { display: none; }
.bestiary-volume > summary:hover { background: rgba(255,255,255,.018); }
.bestiary-volume[open] > summary { border-bottom: 1px solid rgba(255,255,255,.07); }

.bestiary-volume__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--volume-accent) 52%, #292c2e);
  border-radius: 8px;
  color: var(--volume-accent);
  background: rgba(0,0,0,.3);
  font-size: 2.25rem;
  overflow: hidden;
}
.bestiary-volume__icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.58)); }
.bestiary-location-marker-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.15rem; }
.bestiary-volume__icon--boss { background: radial-gradient(circle, rgba(198,93,80,.18), rgba(0,0,0,.34)); }

.bestiary-volume__copy { min-width: 0; }
.bestiary-volume__copy .eyebrow {
  display: block;
  margin: 0 0 4px;
  color: var(--volume-accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.bestiary-volume__copy > strong { display: block; color: #f1e8d5; font-size: 1.28rem; }
.bestiary-volume__copy > small { display: block; margin-top: 5px; color: var(--k-muted, #b8ad98); line-height: 1.42; }

.bestiary-volume__stats { min-width: 150px; text-align: right; white-space: nowrap; }
.bestiary-volume__stats strong, .bestiary-volume__stats small { display: block; }
.bestiary-volume__stats strong { color: var(--volume-accent); font-size: 1.08rem; }
.bestiary-volume__stats small { margin-top: 3px; color: var(--k-muted, #b8ad98); }

.bestiary-volume__toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--volume-accent);
  font-size: 1.25rem;
  transition: transform .16s ease;
}
.bestiary-volume[open] .bestiary-volume__toggle { transform: rotate(90deg); }

.bestiary-volume__body {
  position: relative;
  padding: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.06));
}

.bestiary-location-banner,
.bestiary-boss-banner {
  width: 100%;
  height: 150px;
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--volume-accent) 36%, #292c2e);
  border-radius: 9px;
  background-color: rgba(8,9,10,.88);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 34px rgba(0,0,0,.34);
}
.bestiary-location-banner {
  background-image:
    linear-gradient(90deg, rgba(9,10,11,.94), rgba(9,10,11,.48) 62%, rgba(9,10,11,.2)),
    var(--location-image);
}
.bestiary-boss-banner {
  background-image:
    linear-gradient(90deg, rgba(14,8,8,.96), rgba(25,8,8,.5) 62%, rgba(15,5,5,.24)),
    url('/assets/bestiary/banner.png');
  background-position: center 55%;
}

.bestiary-progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--volume-accent) 34%, #242729);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.72);
}
.bestiary-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--volume-deep), var(--volume-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--volume-accent) 48%, transparent);
  transition: width .3s ease;
}

.bestiary-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 11px;
}

.bestiary-entry-card {
  position: relative;
  min-height: 285px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--volume-accent) 25%, #292c2e);
  border-radius: 9px;
  color: var(--k-text, #eee5d2);
  background: linear-gradient(145deg, rgba(28,31,33,.96), rgba(11,13,14,.98));
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.bestiary-entry-card.is-unlocked { cursor: pointer; }
.bestiary-entry-card.is-unlocked:hover {
  transform: translateY(-3px);
  border-color: var(--volume-accent);
  box-shadow: 0 14px 25px rgba(0,0,0,.25), inset 0 0 22px var(--volume-soft);
}
.bestiary-entry-card.is-unlocked:focus-visible { outline: 2px solid var(--volume-accent); outline-offset: 2px; }
.bestiary-entry-card.is-locked { opacity: .72; filter: saturate(.42); }

.bestiary-entry-card__image {
  position: relative;
  height: 180px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 50% 45%, var(--volume-soft), transparent 49%),
    linear-gradient(180deg, rgba(34,34,31,.95), rgba(9,10,10,.98));
}
.bestiary-entry-card__image > img:not(.bestiary-entry-card__boss-mark) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.48));
}
.bestiary-entry-card__image.is-locked > img { opacity: .62; transform: scale(.82); }
.bestiary-entry-card__boss-mark { position: absolute; left: 8px; top: 8px; width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.bestiary-entry-card__seal {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--volume-accent) 42%, transparent);
  border-radius: 50%;
  background: rgba(0,0,0,.65);
}

.bestiary-entry-card__copy { display: grid; gap: 6px; padding: 13px; }
.bestiary-entry-card__copy .eyebrow { margin: 0; color: var(--volume-accent); font-size: .66rem; }
.bestiary-entry-card__copy h3 { margin: 0; color: #f1e5cf; font-size: 1.08rem; line-height: 1.2; }
.bestiary-entry-card__boss-title {
  display: block;
  margin-top: -3px;
  color: var(--volume-accent);
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .035em;
}
.bestiary-entry-card__copy > small { min-height: 34px; color: var(--k-muted, #b8ad98); line-height: 1.35; }
.bestiary-entry-card__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); color: var(--volume-accent); font-size: .76rem; }
.bestiary-entry-card__foot b { color: #d8ccb6; font-weight: 400; text-align: right; }

.tier-noted { box-shadow: inset 0 -2px rgba(95,140,99,.4); }
.tier-studied { box-shadow: inset 0 -2px rgba(85,127,162,.44); }
.tier-master, .tier-complete, .tier-perfect { box-shadow: inset 0 -2px rgba(199,151,61,.52); }

.bestiary-image-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--volume-accent);
  font-size: 3rem;
}

.bestiary-empty { padding: 30px; color: var(--k-muted, #b8ad98); text-align: center; }

.bestiary-dialog {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.bestiary-dialog__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(3,4,5,.84); backdrop-filter: blur(5px); }
.bestiary-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: min(88vh, 920px);
  overflow: auto;
  padding: clamp(22px, 4vw, 36px);
  border-color: rgba(213,167,77,.42);
  background: radial-gradient(circle at 0 0, rgba(166,128,199,.12), transparent 25rem), linear-gradient(145deg, #202325, #0d0f10);
  box-shadow: 0 28px 80px rgba(0,0,0,.58);
}
.bestiary-dialog__close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(213,167,77,.28);
  border-radius: 50%;
  color: #f4e7ce;
  background: rgba(0,0,0,.38);
  font-size: 1.45rem;
  cursor: pointer;
}

.bestiary-detail__head { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 24px; align-items: center; }
.bestiary-detail__image { width: 180px; height: 180px; display: grid; place-items: center; border: 1px solid rgba(213,167,77,.2); border-radius: 12px; background: rgba(0,0,0,.3); overflow: hidden; }
.bestiary-detail__image img { width: 100%; height: 100%; object-fit: contain; padding: 12px; image-rendering: pixelated; }
.bestiary-detail__head h2 { margin: 0; color: #f5e9d3; font-size: clamp(2rem,4vw,3.3rem); line-height: 1; }
.bestiary-detail__boss-title {
  margin: 8px 0 0;
  color: #d7a35e;
  font-family: var(--k-font-display, Georgia, serif);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .045em;
}
.bestiary-detail__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.bestiary-detail__badges span { padding: 6px 9px; border: 1px solid rgba(213,167,77,.23); border-radius: 999px; color: #cfc2ab; background: rgba(0,0,0,.3); font-size: .78rem; }
.bestiary-detail__description { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(213,167,77,.18); color: #cfc5b4; line-height: 1.65; }

.bestiary-detail__stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 10px; margin-top: 18px; }
.bestiary-detail__stats > div { padding: 12px; border: 1px solid rgba(213,167,77,.18); border-radius: 9px; background: rgba(0,0,0,.25); }
.bestiary-detail__stats small, .bestiary-detail__stats strong { display: block; }
.bestiary-detail__stats small { color: var(--k-muted, #b8ad98); }
.bestiary-detail__stats strong { margin-top: 5px; color: #f0dfbd; }

.bestiary-detail__section { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(213,167,77,.18); }
.bestiary-detail__section h3 { margin: 0 0 12px; color: #f1c96d; }
.bestiary-tier-timeline { display: grid; grid-template-columns: repeat(auto-fit,minmax(92px,1fr)); gap: 8px; }
.bestiary-tier-timeline > div { display: grid; place-items: center; min-height: 92px; padding: 9px; border: 1px solid rgba(213,167,77,.14); border-radius: 9px; color: #80796d; background: rgba(0,0,0,.2); text-align: center; }
.bestiary-tier-timeline > div.is-reached { color: #f1d69b; border-color: rgba(213,167,77,.38); background: rgba(213,167,77,.08); }
.bestiary-tier-timeline span { font-size: 1.45rem; }
.bestiary-tier-timeline strong { margin-top: 4px; font-size: .82rem; }
.bestiary-tier-timeline small { color: inherit; }

.bestiary-drop-list { display: grid; gap: 8px; }
.bestiary-drop { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid rgba(213,167,77,.17); border-radius: 9px; background: rgba(0,0,0,.24); }
.bestiary-drop img, .bestiary-drop > span { width: 42px; height: 42px; display: grid; place-items: center; object-fit: contain; image-rendering: pixelated; }
.bestiary-drop strong { color: #efe2cb; }
.bestiary-drop small { color: var(--k-muted, #b8ad98); text-align: right; }
.bestiary-drop.rarity-uncommon { border-left: 3px solid #65b170; }
.bestiary-drop.rarity-rare { border-left: 3px solid #5590d8; }
.bestiary-drop.rarity-epic { border-left: 3px solid #a168d3; }
.bestiary-drop.rarity-legendary { border-left: 3px solid #dd8e3a; }
.bestiary-drop.rarity-mythic { border-left: 3px solid #d34d6b; }
.bestiary-empty-text { color: var(--k-muted, #b8ad98); }
.bestiary-detail__actions { display: flex; justify-content: flex-end; margin-top: 22px; }

@media (max-width: 980px) {
  .bestiary-volume > summary { grid-template-columns: 62px minmax(0,1fr) auto; }
  .bestiary-volume__icon { width: 62px; height: 62px; }
  .bestiary-volume__stats { grid-column: 2; text-align: left; min-width: 0; }
  .bestiary-volume__toggle { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 720px) {
  .bestiary-page { width: min(100% - 18px, 1560px); }
  .bestiary-volume > summary { grid-template-columns: 52px minmax(0,1fr) auto; gap: 11px; padding: 12px; }
  .bestiary-volume__icon { width: 52px; height: 52px; font-size: 1.65rem; }
  .bestiary-volume__copy > strong { font-size: 1.08rem; }
  .bestiary-volume__copy > small { font-size: .82rem; }
  .bestiary-volume__body { padding: 12px; }
  .bestiary-location-banner, .bestiary-boss-banner { height: 118px; }
  .bestiary-entry-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bestiary-detail__head { grid-template-columns: 1fr; }
  .bestiary-detail__image { width: 150px; height: 150px; }
  .bestiary-drop { grid-template-columns: 36px minmax(0,1fr); }
  .bestiary-drop img, .bestiary-drop > span { width: 36px; height: 36px; }
  .bestiary-drop small { grid-column: 2; text-align: left; }
}

@media (max-width: 480px) {
  .bestiary-entry-grid { grid-template-columns: 1fr; }
  .bestiary-volume > summary { grid-template-columns: 44px minmax(0,1fr) auto; }
  .bestiary-volume__icon { width: 44px; height: 44px; }
  .bestiary-volume__copy > small { display: none; }
  .bestiary-dialog { padding: 8px; }
  .bestiary-dialog__panel { padding: 22px 16px 18px; }
}