/* Both decoded atlases occupy exactly the same crop during a dissolve. */
.portrait img.portrait-image {
 position: absolute;
 top: 0;
 left: calc(var(--col) * -100%);
 width: calc(100% * var(--atlas-columns, 4));
 height: auto;
 max-width: none;
 transform: translateY(calc(var(--row) * -100% / var(--atlas-rows, 2)));
 pointer-events: none;
 z-index: 1;
}
.portrait img.portrait-image-incoming { z-index: 2; }
.table-remark {
 min-height: 32px;
 display: flex;
 align-items: baseline;
 gap: 10px;
 margin: -5px 0 9px;
 padding: 0 3px;
 color: #c6b28f;
 opacity: 0;
 font: italic 14px/1.5 Georgia, serif;
 transition: opacity .3s;
}
.table-remark.is-speaking { opacity: 1; }
.table-remark b { color: #dbc69e; font: 15px var(--display); white-space: nowrap; }
@media (max-width: 580px) {
 .table-remark { min-height: 42px; font-size: 11px; gap: 7px; margin-bottom: 7px; }
 .table-remark b { font-size: 13px; }
}

/* Only PortraitDirector creates this one-shot light on a changed mood. There
   are no data-emotion animations to replay when the table replaces its DOM. */
.game-shell .portrait[data-emotion] { transform-origin: 50% 88%; }
.portrait[data-mood-transition] { isolation: isolate; --mood-light: 185 198 189; }
.portrait[data-mood-transition="positive"] { --mood-light: 242 182 88; }
.portrait[data-mood-transition="anger"] { --mood-light: 227 92 72; }
.portrait[data-mood-transition="negative"] { --mood-light: 120 158 189; }
.portrait-mood-light {
 position: absolute;
 inset: 10% 8% 5%;
 z-index: 0;
 border-radius: 46%;
 background: radial-gradient(ellipse closest-side at 50% 45%, rgb(var(--mood-light) / .88), rgb(var(--mood-light) / .4) 42%, transparent 88%);
 filter: blur(2px);
 mix-blend-mode: screen;
 opacity: 0;
 pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
 .portrait-mood-light { display: none; }
}

.story-dossier .opponent-style { font: italic 13px/1.65 Georgia, serif; color: #b9ac92; margin: 15px 0; }