/* Portraits: a separate, reversible presentation layer; no story or combat changes. */
.soa-portrait-frame{width:66px;height:66px;flex:0 0 66px;display:grid;place-items:center;overflow:hidden;border:3px ridge #a98850;border-radius:10px;background:linear-gradient(145deg,#765b3e,#241d18);box-shadow:inset 0 0 0 1px #e6c38555,0 3px 12px #0004}
.soa-portrait-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.soa-portrait-empty span{font:700 30px Georgia,serif;color:#f0dba8;text-shadow:0 2px 3px #0008}
.soa-character-avatar{margin-right:4px}
.soa-character-item{flex-wrap:wrap}
.soa-character-item>div:not(.soa-portrait-frame){min-width:0;flex:1}
.soa-active-portrait{display:flex;align-items:center;gap:14px;margin:12px 0 17px;padding:12px;border:1px solid #a088583d;border-radius:10px;background:#2d292423}
.soa-active-portrait-frame{width:104px;height:104px;flex-basis:104px}
.soa-active-portrait-frame.soa-portrait-empty span{font-size:46px}
.soa-portrait-controls{display:flex;align-items:center;flex:1;gap:7px;flex-wrap:wrap;min-width:0}
.soa-portrait-controls button{width:auto;margin:0;padding:9px 12px;min-height:41px;font:600 12px system-ui}
.soa-portrait-controls button.soa-portrait-remove{opacity:.85}
.soa-portrait-controls button:disabled{opacity:.42}
.soa-portrait-status{flex-basis:100%;margin:0;font:12px/1.5 system-ui;min-height:1em}
.soa-portrait-file{display:none}
body.theme-alternative .soa-active-portrait{background:#efdbab77;border-color:#987c4e}
body.theme-alternative .soa-portrait-controls button{background:linear-gradient(#6b5134,#392a21);color:#f5e9cd}
@media(max-width:430px){.soa-active-portrait{gap:10px}.soa-portrait-controls button{padding:8px}.soa-character-item{flex-direction:row;align-items:center}.soa-character-item button{flex-basis:100%}}
@media(max-width:360px){.soa-active-portrait-frame{width:80px;height:80px;flex-basis:80px}.soa-portrait-controls{gap:5px}}