/* A small face beside the line; navigation keeps the full caption width. */
.speaker-dialogue{display:flex;align-items:flex-start;gap:16px;min-width:0}
.speaker-copy{flex:1;min-width:0}
.speaker-portrait{position:relative;display:block;flex:0 0 76px;width:76px;height:76px;box-sizing:border-box;overflow:hidden;border:1px solid #c49a63;border-radius:10px;background:#e4d2ad;box-shadow:inset 0 0 0 3px #6b49232b,0 3px 12px #0004;pointer-events:none}
.speaker-portrait[hidden]{display:none}
.speaker-portrait img{position:absolute;display:block;max-width:none;height:auto;margin:0;opacity:0}
.speaker-portrait[data-ready="true"] img{opacity:1}
/* Infection follows the authored scene state; both masks cover the original
   amber eye openings and scale with the same portrait crop on every screen. */
.speaker-portrait[data-character="baker-infected"][data-ready="true"]::before,
.speaker-portrait[data-character="baker-infected"][data-ready="true"]::after{content:"";position:absolute;z-index:1;width:7.8%;height:13.5%;left:59%;top:55.5%;border-radius:50%;transform:rotate(-13deg);background:radial-gradient(ellipse,#f5d4ff 5%,#c568ff 32%,#7520af 62%,#321342 100%);box-shadow:0 0 4px 1px #b34cff9c}
.speaker-portrait[data-character="baker-infected"][data-ready="true"]::after{left:76.5%;top:49.1%;width:6.8%;height:12.5%}
@media(max-width:700px){
 .speaker-dialogue{gap:12px}
 .speaker-portrait{flex-basis:60px;width:60px;height:60px;border-radius:8px}
}
@media(max-height:560px) and (orientation:landscape){
 .speaker-dialogue{gap:10px}
 .speaker-portrait{flex-basis:48px;width:48px;height:48px;border-radius:7px}
 .scene-insert .speaker-dialogue{display:flow-root}
 .scene-insert .speaker-portrait{float:left;width:44px;height:44px;margin:0 10px 5px 0}
 .scene-insert .speaker-copy{display:contents}
}