@layer avatars {
  :root {
    --avatar-background: #1c2a3a;
    --avatar-border: rgba(157, 174, 207, 0.3);
  }
  .avatar-frame { align-items: end; background: radial-gradient(circle at 50% 28%, #334b58, var(--avatar-background) 72%); border: 1px solid var(--avatar-border); border-radius: 9px; display: inline-flex; flex: none; justify-content: center; overflow: hidden; position: relative; vertical-align: middle; }
  .avatar-frame svg { display: block; height: 100%; width: 100%; }
  .avatar-xs { height: 56px; width: 40px; }
  .avatar-sm { height: 80px; width: 56px; }
  .avatar-md { height: 120px; width: 88px; }
  .avatar-hero { aspect-ratio: 2 / 3; border-radius: 15px; width: min(100%, 260px); }
  .avatar-dead svg { filter: grayscale(0.75); opacity: 0.72; }
  .avatar-emblem { align-items: center; color: var(--faint); font-size: 24px; }
  .character-hero { align-items: center; background: rgba(5, 9, 20, 0.25); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: clamp(18px, 4vw, 42px); grid-template-columns: 260px minmax(0, 1fr); margin-top: 16px; min-width: 0; padding: clamp(15px, 3vw, 26px); }
  .character-hero-art { display: flex; justify-content: center; min-width: 0; }
  .character-hero-info { min-width: 0; }
  .character-hero-info h3 { color: var(--text); font-family: Georgia, serif; font-size: clamp(26px, 3.5vw, 40px); font-weight: 500; line-height: 1.2; margin: 9px 0 7px; overflow-wrap: anywhere; }
  .character-hero-info p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
  .character-vitals { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; max-width: 460px; }
  .character-vitals span { background: rgba(157, 174, 207, 0.06); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; padding: 13px; }
  .character-vitals small { color: var(--muted); font-size: 11px; }
  .character-vitals strong { color: var(--text); font-size: 19px; }
  .character-hero-info .attribute-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 15px; }
  .character-hero-info .condition-list { margin-top: 16px; }
  .character-hero-loadout { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 20px; padding-top: 13px; }
  .npc-card { align-items: flex-start; flex-direction: row; gap: 12px; }
  .npc-card-main { flex: 1; min-width: 0; }
  .npc-details .avatar-md { float: left; margin: 5px 12px 8px 0; }
  .party-card-identity { align-items: center; display: flex; gap: 10px; min-width: 0; }
  .party-card-identity > div { flex: 1; min-width: 0; }
  .codex-card-summary > .avatar-frame { margin-right: 2px; }
  .codex-card-summary > span:nth-child(2) { flex: 1; min-width: 0; }
  .recent-entity-row > .avatar-frame { flex: none; }
  @media (max-width: 720px) {
    .character-hero { gap: 16px; grid-template-columns: minmax(0, 1fr); text-align: center; }
    .avatar-hero { width: min(100%, 205px); }
    .character-vitals { margin-left: auto; margin-right: auto; margin-top: 16px; }
    .character-hero-info .attribute-grid { text-align: center; }
    .character-hero-loadout { margin-top: 14px; }
    .npc-card { flex-direction: row; }
  }
  @media (max-width: 420px) {
    .character-hero { padding: 13px; }
    .character-hero-info .attribute-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .avatar-hero { width: min(100%, 184px); }
    .npc-card > .avatar-sm, .party-card-identity > .avatar-sm { height: 72px; width: 50px; }
    .npc-card-actions { flex-wrap: wrap; }
    .recent-entity-row { flex-wrap: wrap; }
  }
}