/* wgf-creature-enrich - the /creature/ enrichment block (creature lane, 2026-09-11).
   Rendered by creature_enrich_render.py, linked from inside the block with its own ?v=
   (a new file, so no ASSET_VERSION bump is involved). Palette tokens only
   (docs/ui-ux/17-blizzard-palette.md): gold for this creature, the dim gold step for
   other targets, --fc-* for the two faction flight points. No green, no gradients, no
   glows, no rounded pills. The map frame and base pin come from wgf-worldmap.css. */

.wgf-crx-lead {
  margin: 0 0 0.9rem;
  line-height: 1.6;
  max-width: 78ch;
  color: var(--wgf-text, #f4ecd8);
}

.wgf-crx-headrow {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.wgf-crx-headrow .wgf-crx-lead {
  flex: 1 1 auto;
  min-width: 0;
}

.wgf-crx-famicon,
.wgf-crx-achicon {
  flex: 0 0 auto;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-well, #08090c);
}

/* --- the map --------------------------------------------------------------------------- */
.wgf-crx-figure {
  margin: 0 0 0.6rem;
  max-width: 1002px;
}

.wgf-crx-map {
  max-width: 100%;
}

/* Pin overrides carry the .wgf-worldmap ancestor: wgf-worldmap.css is linked AFTER this
   sheet (inside the section), so equal specificity would let its gold base win. */
/* This creature: the base gold diamond, one step larger. */
.wgf-worldmap .wgf-crx-pin--self::before {
  left: 1px;
  top: 1px;
  width: 14px;
  height: 14px;
}

/* Other world-quest targets: smaller, dim gold, and a link. */
.wgf-worldmap .wgf-crx-pin--other {
  width: 12px;
  height: 12px;
}

.wgf-worldmap .wgf-crx-pin--other::before {
  left: 2px;
  top: 2px;
  width: 7px;
  height: 7px;
  background: var(--wgf-gold-dim, #8a7440);
}

.wgf-worldmap .wgf-crx-pin--other:hover::before,
.wgf-worldmap .wgf-crx-pin--other:focus::before {
  background: var(--wgf-gold-bright, #ffe375);
}

/* Flight points: a square (not a diamond) in the faction colour. */
.wgf-worldmap .wgf-crx-pin--fp::before {
  transform: none;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  background: var(--wgf-gold-muted, #b5a06a);
}

.wgf-worldmap .wgf-crx-pin--alliance::before { background: var(--fc-alliance, #3a6fd8); }
.wgf-worldmap .wgf-crx-pin--horde::before { background: var(--fc-horde, #c8403a); }

.wgf-crx-legend {
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
  color: var(--wgf-muted, #b3a88f);
}

.wgf-crx-key {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 0.15rem 0 0.5rem;
  vertical-align: middle;
  border: 1px solid var(--wgf-gold-shadow, #2a2210);
}

.wgf-crx-key:first-child { margin-left: 0; }
.wgf-crx-key--self { background: var(--wgf-gold-primary, #ffd100); transform: rotate(45deg); }
.wgf-crx-key--other { background: var(--wgf-gold-dim, #8a7440); transform: rotate(45deg); }
.wgf-crx-key--alliance { background: var(--fc-alliance, #3a6fd8); }
.wgf-crx-key--horde { background: var(--fc-horde, #c8403a); }
.wgf-crx-key--both { background: var(--wgf-gold-muted, #b5a06a); }

.wgf-crx-way {
  margin: 0.4rem 0 0.6rem;
  font-size: 0.88rem;
}

/* --- other targets on the map ---------------------------------------------------------- */
.wgf-crx-sub {
  margin: 1rem 0 0.4rem;
  font-size: 1rem;
  color: var(--wgf-gold-primary, #ffd100);
}

.wgf-crx-targets {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2 320px;
  column-gap: 1.6rem;
}

.wgf-crx-targets li {
  break-inside: avoid;
  margin: 0 0 0.3rem;
  line-height: 1.45;
}

.wgf-crx-meta {
  display: block;
  font-size: 0.82rem;
  color: var(--wgf-muted, #b3a88f);
}

/* --- pet abilities --------------------------------------------------------------------- */
.wgf-crx-abilities {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.45rem;
}

.wgf-crx-ability {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-border-neutral-soft, #202229);
}

.wgf-crx-ability__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--wgf-metal, #6e5a2a);
}

.wgf-crx-ability__body { min-width: 0; }

.wgf-crx-ability__name {
  display: block;
  color: var(--wgf-gold-link, #ffe375);
  font-size: 0.92rem;
}

.wgf-crx-ability__text {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--wgf-text, #f4ecd8);
}

/* --- achievement roster ---------------------------------------------------------------- */
.wgf-crx-chips {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.wgf-crx-chips li a {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.86rem;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-border-neutral-soft, #202229);
  color: var(--wgf-gold-link, #ffe375);
  text-decoration: none;
}

.wgf-crx-chips li a:hover,
.wgf-crx-chips li a:focus-visible {
  border-color: var(--wgf-border-strong, rgba(255, 209, 0, 0.38));
  text-decoration: underline;
}

@media (max-width: 480px) {
  .wgf-crx-headrow { flex-direction: column; }
  .wgf-crx-targets { columns: 1; }
}