/* V304 — authored NPC portraits with a restrained card-break silhouette. */
.npcDialogBox{
  grid-template-columns:142px minmax(0,1fr);
  gap:18px;
}

.npcDialogPortrait{
  position:relative;
  isolation:isolate;
  height:128px;
  overflow:visible;
  clip-path:inset(-58px 0 0 0);
  background:
    radial-gradient(circle at 50% 28%,rgba(191,137,55,.2),transparent 55%),
    linear-gradient(180deg,#11151a,#040608);
  border:2px solid #586574;
  box-shadow:inset 0 0 0 2px #10171d,0 8px 18px #000b;
}

.npcDialogPortrait::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  border:1px solid rgba(178,133,62,.42);
  pointer-events:none;
}

.npcDialogPortrait img{
  position:absolute;
  left:50%;
  bottom:-30px;
  z-index:1;
  width:204px;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
  image-rendering:auto;
  transform:translateX(-50%);
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.92));
  pointer-events:none;
  user-select:none;
}

#npcDialogOverlay[data-npc="trainer"] .npcDialogPortrait img{
  width:212px;
  bottom:-37px;
}

#npcDialogOverlay[data-npc="innkeeper"] .npcDialogPortrait img{
  width:198px;
  bottom:-31px;
}

#npcDialogOverlay[data-npc="alchemist"] .npcDialogPortrait img{
  width:207px;
  bottom:-34px;
}

#npcDialogOverlay[data-npc="fire"] .npcDialogPortrait{
  overflow:visible;
  clip-path:inset(-92px 0 0 0);
  border-color:#92501f;
  background:
    radial-gradient(circle at 50% 58%,rgba(255,102,16,.32),transparent 62%),
    linear-gradient(180deg,#140c08,#050506 72%);
  box-shadow:inset 0 0 0 2px #211008,inset 0 -24px 38px #a62d0d30,0 8px 20px #000;
}
#npcDialogOverlay[data-npc="fire"] .npcDialogPortrait img{
  display:block;
  width:244px;
  bottom:-54px;
  image-rendering:auto;
  filter:drop-shadow(0 7px 6px #000) drop-shadow(0 0 10px rgba(255,75,12,.45));
}
#npcDialogOverlay[data-npc="fire"] .npcDialogPortrait::before{
  inset:7px;
  width:auto;
  height:auto;
  border:1px solid rgba(224,112,36,.52);
  border-radius:0;
  background:none;
  box-shadow:none;
  transform:none;
  animation:none;
}
#npcDialogOverlay[data-npc="fire"] .npcDialogPortrait::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  z-index:0;
  width:116px;
  height:48px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,91,15,.48),transparent 70%);
  filter:blur(5px);
  transform:translateX(-50%);
}

/* V344 — the complete monument remains visible while its crown breaks the card. */
#npcDialogOverlay[data-npc="wellspring"] .npcDialogPortrait{
  clip-path:inset(-126px 0 0 0);
  border-color:#6d8792;
  background:radial-gradient(circle at 50% 34%,rgba(104,190,214,.22),transparent 62%),linear-gradient(180deg,#10191d,#050809 74%);
}
#npcDialogOverlay[data-npc="wellspring"] .npcDialogPortrait img{
  width:160px;
  bottom:-34px;
  image-rendering:auto;
  filter:drop-shadow(0 7px 6px #000) drop-shadow(0 0 9px rgba(111,207,227,.3));
}

@media (max-width:700px){
  #npcDialogOverlay{padding-inline:10px}
  .npcDialogBox{
    grid-template-columns:108px minmax(0,1fr);
    gap:11px;
    padding:12px;
  }
  .npcDialogPortrait{
    height:116px;
    clip-path:inset(-44px 0 0 0);
  }
  .npcDialogPortrait img{width:168px;bottom:-24px}
  #npcDialogOverlay[data-npc="trainer"] .npcDialogPortrait img{width:174px;bottom:-29px}
  #npcDialogOverlay[data-npc="innkeeper"] .npcDialogPortrait img{width:163px;bottom:-25px}
  #npcDialogOverlay[data-npc="alchemist"] .npcDialogPortrait img{width:170px;bottom:-27px}
  #npcDialogOverlay[data-npc="fire"] .npcDialogPortrait{clip-path:inset(-70px 0 0 0)}
  #npcDialogOverlay[data-npc="fire"] .npcDialogPortrait img{width:196px;bottom:-42px}
  #npcDialogOverlay[data-npc="wellspring"] .npcDialogPortrait{clip-path:inset(-98px 0 0 0)}
  #npcDialogOverlay[data-npc="wellspring"] .npcDialogPortrait img{width:138px;bottom:-28px}
}