/* BESTIARIO
   pages/wiki/monstros.html: criaturas agrupadas por mapa, em cartao maior
   que a tira da ficha do mapa. Carregado depois de 18-mapas.css. */

.bestiario-mapa {
  scroll-margin-top:112px
}
.bestiario-mapa + .bestiario-mapa {
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid var(--line)
}
.bestiario-mapa header {
  display:flex;
  align-items:baseline;
  gap:13px;
  flex-wrap:wrap;
  margin-bottom:6px
}
.bestiario-mapa h2 {
  margin:0 !important;
  font-size:24px
}
.conta-bichos {
  font:9px var(--sans);
  font-weight:600;
  letter-spacing:.2em;
  color:#7d7478;
  text-transform:uppercase
}
.falta-nome {
  padding:3px 9px;
  border:1px dashed #8a5f5273;
  font:8px var(--sans);
  font-weight:600;
  letter-spacing:.16em;
  color:#bb8878;
  text-transform:uppercase
}
.bestiario-link {
  margin:0 0 20px !important;
  font-size:12px;
  color:#7d7478
}
.bestiario-link a {
  color:var(--gold);
  border-bottom:1px solid #c5a77347
}
.bestiario-link a:hover {
  color:var(--gold-light)
}

.bestiario-grade {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:12px;
  list-style:none;
  margin:0;
  padding:0
}
.bestiario-grade li {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  margin:0;
  padding:14px 10px 12px;
  border:1px solid var(--line);
  background:linear-gradient(170deg,#151318,#0f0e12);
  transition:border-color .22s ease,transform .22s ease
}
.bestiario-grade li:hover {
  border-color:#c5a77347;
  transform:translateY(-2px)
}
/* caixa de altura fixa: as artes tem proporcoes bem diferentes */
.bicho-arte {
  height:104px;
  width:100%;
  display:grid;
  place-items:center
}
.bicho-arte img {
  max-width:100%;
  max-height:104px;
  width:auto;
  height:auto
}
.bestiario-grade b {
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  color:var(--text)
}
.bestiario-grade b.sem-nome {
  color:#6f676b;
  font-style:italic;
  font-weight:500
}

/* boss ganha moldura e etiqueta */
.bestiario-grade li.e-boss {
  border-color:#d9364559;
  background:linear-gradient(170deg,#1c1418,#110e12)
}
.marca-boss {
  position:absolute;
  top:9px;
  right:9px;
  padding:2px 7px;
  border:1px solid #d9364573;
  background:#d936451f;
  font:7px var(--sans);
  font-weight:700;
  letter-spacing:.2em;
  color:#e2727d
}

@media(max-width:600px) {
  .bestiario-grade {
    grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
    gap:9px
  }
  .bicho-arte {
    height:80px
  }
  .bicho-arte img {
    max-height:80px
  }
}