/* Mercenaries have their own original gold frame, without an army tier badge. */
.unit-portrait.portrait-mercenary,
.merc-inventory-portrait.portrait-mercenary {
  position:relative;
  display:block;
  flex-shrink:0;
  aspect-ratio:1;
  border:0;
  border-radius:1px;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 3px 3px #0006);
  overflow:visible;
}
.portrait-mercenary::after {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  content:'';
  background:url('/portraits/mercenaries/mercenary-frame.png') center / 100% 100% no-repeat;
  pointer-events:none;
}
.unit-portrait.portrait-mercenary::after { inset:0; background-image:url('/portraits/mercenaries/mercenary-frame.png'); }
.portrait-mercenary .portrait-rank { display:none; }
.merc-portrait-art,
.merc-portrait-missing {
  position:absolute;
  inset:4.5%;
  display:block;
  overflow:hidden;
  background:radial-gradient(ellipse at top,#557052,#222f28 65%);
  border-radius:1px;
}
.portrait-mercenary .merc-portrait-art > img,
.merc-inventory-table .portrait-mercenary .merc-portrait-art > img {
  position:absolute;
  display:block;
  top:var(--merc-art-top);
  left:var(--merc-art-left);
  width:var(--merc-art-width);
  height:auto;
  max-width:none;
  aspect-ratio:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  object-fit:fill;
  object-position:initial;
  background:none;
  image-rendering:auto;
}
.merc-portrait-missing { display:grid; place-items:center; color:#a9956b; font:600 17px/1 var(--serif); background:radial-gradient(ellipse at top,#414838,#252a24); }
.merc-inventory-table .merc-inventory-portrait.portrait-mercenary { width:48px; height:48px; transition:transform 180ms ease,filter 180ms ease; transform-origin:center; }
.merc-inventory-table .merc-inventory-name { gap:12px; }
.merc-inventory-table .merc-inventory-portrait .merc-portrait-missing { font-size:13px; }
#merc-dialog > .dialog-heading::before { top:0; left:0; }
#merc-dialog > .dialog-heading::after { top:0; right:0; }
.merc-inventory-table .merc-inventory-portrait:focus-visible { z-index:4; outline:2px solid #f1d38c; outline-offset:3px; transform:scale(1.3); filter:drop-shadow(0 5px 4px #0008); }
@media(hover:hover) and (pointer:fine){
 .merc-inventory-table .merc-inventory-portrait:hover { z-index:4; transform:scale(1.3); filter:drop-shadow(0 5px 4px #0008); }
}
@media(max-width:680px){
 .merc-inventory-table .merc-inventory-portrait.portrait-mercenary { width:40px; height:40px; }
 .merc-inventory-table .merc-inventory-name { gap:8px; }
}
@media(prefers-reduced-motion:reduce){
 .merc-inventory-table .merc-inventory-portrait.portrait-mercenary { transition:none; }
 .merc-inventory-table .merc-inventory-portrait:hover,.merc-inventory-table .merc-inventory-portrait:focus-visible { transform:none; }
}