/* Transparent character art. Keep framing and direction separate from combat effects. */
.character-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.character-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scaleX(var(--sprite-direction, 1));
  transform-origin: center;
  filter: url(#character-edge-clean) drop-shadow(0 9px 7px rgb(14 8 5 / 30%));
  pointer-events: none;
  user-select: none;
}

.title-character.has-art,
.enemy-placeholder.has-art,
.player-avatar.has-art,
.dialogue-portrait.has-art {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.title-character.has-art,
.enemy-placeholder.has-art,
.dialogue-portrait.has-art { overflow: visible; }

.title-character.has-art .placeholder-art__label,
.enemy-placeholder.has-art .placeholder-art__label,
.dialogue-portrait.has-art > span { display: none; }

.title-character.has-art {
  display: block;
  isolation: isolate;
  width: min(68vw, 280px);
  height: clamp(215px, 32svh, 285px);
  margin: 4px auto 18px;
}
.title-character.has-art .character-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
}
.title-character.has-art::after {
  z-index: -1;
  right: 23%;
  bottom: -3px;
  left: 23%;
  height: 12px;
  background: rgb(12 7 4 / 38%);
  filter: blur(8px);
}

.enemy-stage { min-height: 230px; }
.enemy-placeholder.has-art {
  display: block;
  width: min(72%, 300px);
  height: clamp(210px, 28svh, 265px);
  min-height: 0;
  margin: 10px auto 12px;
}
.enemy-placeholder.has-art::after {
  z-index: -1;
  right: 24%;
  bottom: -5px;
  left: 24%;
  height: 15px;
  background: rgb(17 9 5 / 40%);
  filter: blur(7px);
}
.enemy-placeholder[data-art-shape="wide"] {
  width: 94%;
  height: clamp(180px, 25svh, 230px);
  margin-top: 38px;
}
.enemy-placeholder[data-art-shape="boss"] { width: 88%; height: clamp(225px, 30svh, 285px); }
.intent-panel { z-index: 3; }

.player-avatar.has-art {
  position: relative;
  overflow: hidden;
  flex-basis: 58px;
  width: 58px;
  height: 62px;
}
.player-avatar .character-sprite {
  position: absolute;
  top: -3%;
  left: -20%;
  width: 140%;
  height: auto;
  max-width: none;
  filter: url(#character-edge-clean) drop-shadow(0 3px 3px #0005);
}

.dialogue-stage { min-height: clamp(340px, 48svh, 450px); border: 0; }
.dialogue-portrait.has-art {
  display: block;
  bottom: 18px;
  width: 62%;
  height: 83%;
  transition: opacity 180ms ease, transform 180ms ease, left 180ms ease, right 180ms ease, width 180ms ease;
}
.dialogue-portrait--left { left: 19%; }
.dialogue-portrait--right { right: 19%; }
.dialogue-stage[data-cast-count="2"] .dialogue-portrait { width: 51%; }
.dialogue-stage[data-cast-count="2"] .dialogue-portrait--left { left: 0; height: 76%; }
.dialogue-stage[data-cast-count="2"] .dialogue-portrait--right { right: 0; }
.dialogue-stage[data-cast-count="2"] .dialogue-portrait[data-art-shape="gesture"] { width: 58%; }
.dialogue-portrait.has-art::after { content: none; }
.dialogue-portrait.is-inactive {
  z-index: 2;
  filter: none;
  opacity: .82;
  transform: translateY(4px) scale(.985);
  transform-origin: center bottom;
}
.dialogue-portrait:not(.is-inactive) { z-index: 3; }
.dialogue-portrait .character-sprite { filter: url(#character-edge-clean) drop-shadow(0 12px 9px rgb(15 8 5 / 30%)); }
.dialogue-portrait[data-art-shape="wide"] { width: 94%; height: 68%; right: 3%; }
.dialogue-stage[data-cast-count="2"] .dialogue-portrait[data-art-shape="wide"] { width: 60%; height: 60%; right: 0; }
.dialogue-stage[data-cast-count="2"][data-opponent-shape="wide"] .dialogue-portrait--left { width: 38%; height: 50%; }
.dialogue-portrait[data-art-kind="photo"] .character-sprite {
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 10px 12px #0005);
  mask-image: linear-gradient(#000 84%, transparent);
}
.dialogue-portrait[hidden] { display: none; }

/* Shield status is an aura around the character, rather than a rectangular frame. */
#enemy-placeholder.has-block::before {
  z-index: -1;
  inset: 5% 12% 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, transparent 42%, rgb(104 209 255 / 13%) 65%, transparent 74%);
  box-shadow: none;
}
#enemy-placeholder.has-block .character-sprite {
  filter: url(#character-edge-clean) drop-shadow(0 0 7px rgb(103 216 255 / 65%)) drop-shadow(0 8px 7px #0005);
}

@media (max-height: 760px) {
  .enemy-stage { min-height: 190px; }
  .enemy-placeholder.has-art { height: 195px; }
  .enemy-placeholder[data-art-shape="wide"] { height: 170px; }
  .enemy-placeholder[data-art-shape="boss"] { height: 215px; }
  .dialogue-stage { min-height: 310px; }
}

@media (prefers-reduced-motion: reduce) {
  .dialogue-portrait.has-art { transition: none; }
}