.named-character-heading--portrait {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
}

.named-character-heading--portrait > div {
  align-self: center;
}

.named-character-portrait {
  --character-race-color: #facc15;
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border: 2px solid var(--character-race-color);
  border-radius: 17px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), transparent 58%),
    rgba(2, 6, 23, 0.9);
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.9),
    0 7px 20px rgba(2, 6, 23, 0.42),
    0 0 18px color-mix(in srgb, var(--character-race-color) 34%, transparent);
}

.named-character-portrait__image {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.named-character-portrait__image.is-generated {
  width: 64px;
  height: 64px;
  border-radius: 13px;
  image-rendering: auto;
  background-size: cover;
  background-position: center;
}

.named-character-portrait__badge {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #0f172a;
  border-radius: 999px;
  background: var(--character-race-color);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 3px 9px rgba(2, 6, 23, 0.5);
}

.named-character-card[data-character-portrait="true"] .named-character-status {
  align-self: center;
}

.named-character-card[data-character-portrait="true"].is-collapsed .named-character-portrait {
  width: 62px;
  height: 62px;
}

.named-character-card[data-character-portrait="true"].is-collapsed .named-character-portrait__image.is-generated {
  width: 54px;
  height: 54px;
  border-radius: 11px;
}

@media (max-width: 720px) {
  .named-character-heading--portrait {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 8px 10px;
  }

  .named-character-portrait,
  .named-character-card[data-character-portrait="true"].is-collapsed .named-character-portrait {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .named-character-portrait__image {
    width: 48px;
    height: 48px;
    border-radius: 7px;
  }

  .named-character-portrait__image.is-generated,
  .named-character-card[data-character-portrait="true"].is-collapsed .named-character-portrait__image.is-generated {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  .named-character-portrait__badge {
    right: -5px;
    bottom: -5px;
    width: 21px;
    height: 21px;
    font-size: 10px;
  }

  .named-character-heading--portrait .named-character-status {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .named-character-heading--portrait .named-character-toggle {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}