:host {
  display: block;
}

/*
 * The card is one painted frame, so every slot is placed as a share of that
 * artwork rather than flowed: percentages keep the crest, the artwork panel,
 * the two text bands and the blue plaque on their painted counterparts at any
 * card width. Coordinates come from the 560x957 frame derivative, which is
 * cut to the frame's silhouette so no black surround shows on the panel.
 */
.encounter-card {
  position: relative;
  container-type: inline-size;
  max-inline-size: 20rem;
  margin-inline: auto;
  aspect-ratio: 560 / 957;
  background-image: url('/images/hud/runtime/enemy-card-560.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* A settled encounter is out of play, so the card recedes: the artwork loses
   its colour and the whole frame dims. */
.encounter-card--settled .encounter-card__artwork {
  filter: grayscale(0.85) brightness(0.6);
}

.encounter-card--settled {
  opacity: 0.78;
}

/* ---------- crest ---------- */

.encounter-card__crest {
  position: absolute;
  inset-block-start: 9%;
  inset-inline-start: 50%;
  inline-size: 16.8%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Scaled past the frame so the icon's own painted ring is cropped away and
   only the portrait sits inside the crest ring. */
.encounter-card__crest-icon {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  scale: 1.22;
}

/* ---------- artwork ---------- */

.encounter-card__artwork-frame {
  position: absolute;
  inset-block: 12.6% 40.4%;
  inset-inline: 15% 14.6%;
  display: grid;
  padding: 4% 6% 2%;
  place-items: end center;
}

/* Sits over the artwork panel rather than the whole card, so the name and
   the danger badge stay readable under it. */
.encounter-card__defeated-mark {
  position: absolute;
  inset: 6%;
  inline-size: 88%;
  block-size: 88%;
  object-fit: contain;
  pointer-events: none;
}

.encounter-card__artwork {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 0.35rem 0.7rem rgb(0 0 0 / 0.75));
}

/* ---------- text bands ---------- */

.encounter-card__name {
  position: absolute;
  inset-block-start: 62.8%;
  inset-inline: 15% 14.6%;
  display: grid;
  block-size: 5.4%;
  margin: 0;
  overflow: hidden;
  place-items: center;
  color: var(--ar-text);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.85rem, 5.4cqw, 1.35rem);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 0.9);
  white-space: nowrap;
}

.encounter-card__meta {
  position: absolute;
  inset-block-start: 69.2%;
  inset-inline: 12% 12%;
  display: grid;
  block-size: 8.8%;
  gap: 1.2cqw;
  place-content: center;
  justify-items: center;
}

.encounter-card__level {
  color: var(--ar-gold);
  font-size: clamp(0.6rem, 3.5cqw, 0.85rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* The badge sizes itself off the shared token, so scaling it with the card is
   a matter of redefining that token inside the card. */
.encounter-card__danger {
  --ar-font-sm: clamp(0.6rem, 3.4cqw, 0.8125rem);
}

/* ---------- attack plaque ---------- */

.encounter-card__attack {
  position: absolute;
  inset-block-start: 81.1%;
  inset-inline-start: 11.8%;
  inline-size: 77.1%;
  block-size: 10.4%;
  padding: 0;
  border: 0;
  border-radius: 0.2rem;
  color: var(--ar-text);
  background: transparent;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(0.8rem, 4.6cqw, 1.15rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0.1rem 0.35rem rgb(0 0 0 / 0.85);
}

.encounter-card__attack:enabled:hover {
  color: #f4ecda;
  box-shadow: inset 0 0 1.1rem rgb(150 200 245 / 0.5);
}

.encounter-card__attack:enabled:active {
  box-shadow: inset 0 0.15rem 0.7rem rgb(0 0 0 / 0.6);
}

.encounter-card__attack:disabled {
  color: rgb(214 206 190 / 0.45);
  cursor: default;
}

.encounter-card__attack:focus-visible {
  outline: 2px solid var(--ar-blue);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
  .encounter-card {
    transition: filter var(--ar-motion-base);
  }

  .encounter-card:not(.encounter-card--settled):hover {
    filter: drop-shadow(0 0 0.9rem rgb(214 178 107 / 0.3));
  }

  .encounter-card__attack {
    transition:
      color var(--ar-motion-fast),
      box-shadow var(--ar-motion-fast);
  }
}