/* Painted identity belongs in reading and selection surfaces. Combat actors,
   campfire blocking and Fate Link demonstrations retain their native SVGs. */
.roster-identity {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c2a77573;
  border-radius: 9px;
  background: #173039;
  box-shadow: inset 0 0 0 1px #f0d59b0d;
}
.roster-identity > .character-avatar {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  filter: none;
}
.roster-identity > .identity-art {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 42%;
  filter: none;
}
.roster-identity > .identity-art[hidden] { display: none; }
.roster-identity :is(.avatar-figure, .avatar-cloak, .avatar-magic) { animation: none; }
.roster-identity-full > .identity-art { object-fit: contain; object-position: center; }

/* Every frame has an explicit size so a lazy image never moves a name, level,
   missing requirement or action while it decodes. */
.pg-mini-portrait { width: 44px; height: 49px; }
.pg-camp-portrait { width: 54px; height: 62px; }
.pg-roster-portrait { width: 91px; height: 108px; border: 0; }
.pg-impact-member > header > span { width: 36px; height: 40px; }
.pg-plan-party > button > span { width: min(100%, 65px); height: 72px; margin-bottom: 7px; }
.pg-plan-party .roster-identity { border-radius: 8px; }

.st-character-portrait { width: 43px; height: 50px; filter: none; }
.st-hero-portrait { width: 130px; height: 260px; margin: 0 5px 0 0; }
.st-hero-portrait > .roster-identity { border-radius: 14px; border-color: #c2a775a3; background: #10262d; box-shadow: 0 8px 24px #06181b38; }
.st-hero-portrait > .st-portrait-orbit { inset: -5px; border-radius: 18px; background: none; box-shadow: none; }
.st-hero-portrait > .st-portrait-orbit::before,
.st-hero-portrait > .st-portrait-orbit::after { display: none; }

.ad-companion-portrait { width: 65px; height: 75px; }
.ad-speaker-portrait { width: 61px; height: 70px; border: 0; background: #142e31; }
.ad-link-provider-art { width: 52px; height: 61px; }
.ad-companion[aria-pressed="true"] .roster-identity,
.st-character[aria-selected="true"] .roster-identity { border-color: #e9c687; box-shadow: 0 0 0 2px #d8bc7d2e; }

@media (max-width: 760px) {
  .st-hero-portrait { width: 104px; height: 208px; margin: 0; }
  .st-character-hero { align-items: center; }
  .ad-companion-portrait { width: 61px; height: 70px; }
  .ad-speaker-portrait { width: 46px; height: 54px; }
  .pg-plan-party > button > span { height: 76px; }
}
@media (max-width: 660px) {
  .pg-mini-portrait { width: 39px; height: 45px; }
  .pg-roster-portrait { width: 70px; height: 83px; }
}
@media (max-width: 430px) {
  .pg-roster-portrait { width: 84px; height: 100px; }
  .st-hero-portrait { width: 86px; height: 172px; }
  .ad-speaker-portrait { width: 43px; height: 51px; }
}
@media (forced-colors: active) {
  .roster-identity { border-color: CanvasText; }
  .ad-companion[aria-pressed="true"] .roster-identity,
  .st-character[aria-selected="true"] .roster-identity { outline: 2px solid Highlight; }
}