/* Portrait-led dialogue sits in the lower HUD band, away from the fight. */
.speech-frame{--speech-accent:#9287b9;position:absolute;z-index:7;left:32%;bottom:2.4%;width:63%;min-height:104px;display:grid;grid-template-columns:88px minmax(0,1fr) 20px;align-items:center;gap:18px;padding:5px 18px 5px 6px;border:1px solid var(--speech-accent);border-radius:12px 4px;background:linear-gradient(105deg,#102330f5,#07121df5 80%);box-shadow:inset 0 0 0 3px #0b1724,inset 0 0 0 4px #9287b94d,0 3px 14px #0005;color:#edeef7;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .14s,transform .14s;white-space:normal;letter-spacing:.5px}
.speech-frame::before,.speech-frame::after{content:'';position:absolute;width:8px;height:8px;border:1px solid var(--speech-accent);background:#0d1b27;border-radius:50%;pointer-events:none}
.speech-frame::before{top:-2px;left:-2px}.speech-frame::after{right:-2px;bottom:-2px}
.speech-frame.show{opacity:1;transform:none}.speech-frame.suspended{visibility:hidden}
.speech-frame .speech-portrait{position:relative;align-self:stretch;min-height:96px;overflow:hidden;border-right:1px solid #82799b66;background:linear-gradient(135deg,#21404a66,#08131d22)}
.speech-frame .speech-portrait img{position:absolute;top:0;left:50%;transform:translateX(-50%);width:118%;height:auto;max-width:none;image-rendering:pixelated}
/* The gold jewel at (129, 335) in the 258 x 1002 sprite is the portrait anchor. */
.speech-frame[data-speaker='patron'] .speech-portrait img{width:100%;top:50%;transform:translate(-50%,-33.43%)}
.speech-frame[data-speaker='milian']{--speech-accent:#b68eac}.speech-frame[data-speaker='milian'] .speech-portrait img{width:120%;top:0}
.speech-frame .speech-copy{min-width:0;padding:7px 0}.speech-frame strong{display:block;margin:0 0 5px;color:#cab3e8;font:16px/1.25 var(--serif);letter-spacing:2px}.speech-frame[data-speaker='milian'] strong{color:#f1bac9}
.speech-frame p{margin:0;color:#eef1f8;font:16px/1.55 var(--serif);white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:.5px}
.speech-frame .speech-next{color:#badcf8;font:25px/1 var(--serif);align-self:end;margin-bottom:9px}
.speech-frame[data-kind='ultimate6']{--speech-accent:#e9b47a;box-shadow:inset 0 0 0 3px #0b1724,inset 0 0 0 4px #e9b47a55,0 0 20px #e0a15d24}.speech-frame[data-kind='ultimate6'] strong{color:#f3d19d}
.is-bossfight .speech-frame{bottom:calc(2.4% + 56px)}
#game-shell:has(.speech-frame.show) .journey{visibility:hidden}
#game-shell:has(.speech-frame.show) .camp-open{bottom:calc(3% + 120px)}
#portrait-patron{display:none;height:72%;max-width:15%;object-fit:contain;object-position:center;image-rendering:pixelated;mask-image:none}.encounter-dialogue[data-patron='true'] #portrait-patron{display:block}.encounter-dialogue[data-patron='true'] .portrait-stage{gap:1%;padding:0 3%}.encounter-dialogue[data-patron='true'] #portrait-melitas,.encounter-dialogue[data-patron='true'] #portrait-mystica{max-width:40%}
@media(max-width:850px),(max-height:650px){.speech-frame{grid-template-columns:65px minmax(0,1fr) 13px;gap:12px;padding:4px 12px 4px 5px;min-height:67px}.speech-frame .speech-portrait{min-height:59px}.speech-frame p{font-size:12px;line-height:1.45}.speech-frame strong{font-size:12px;margin-bottom:4px}.speech-frame .speech-copy{padding:4px 0}.speech-frame .speech-next{font-size:20px;margin-bottom:6px}.is-bossfight .speech-frame{bottom:calc(2.4% + 43px)}}
@media(max-width:560px){.speech-frame{left:4%;width:92%;bottom:2%;grid-template-columns:56px minmax(0,1fr) 12px;min-height:64px;gap:10px}.speech-frame .speech-portrait{min-height:56px}.speech-frame p{font-size:11px}.speech-frame strong{font-size:11px}.is-bossfight .speech-frame{bottom:calc(2% + 44px)}#game-shell:has(.speech-frame.show) .ability-hud{visibility:hidden}#game-shell:has(.speech-frame.show) .camp-open{bottom:calc(3% + 75px)}}
@media(max-height:450px) and (orientation:landscape){.speech-frame{left:25%;width:50%;bottom:2%;grid-template-columns:46px minmax(0,1fr) 10px;gap:8px;min-height:52px;padding:3px 10px 3px 4px}.speech-frame .speech-portrait{min-height:44px}.speech-frame p{font-size:10px;line-height:1.3}.speech-frame strong{font-size:10px;margin-bottom:3px}.speech-frame .speech-next{font-size:17px}.is-bossfight .speech-frame{bottom:calc(2% + 40px)}#game-shell:has(.speech-frame.show) .ability-hud{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.speech-frame{transition:none}}

/* The palette follows the person speaking, including formal encounters. */
.speech-frame[data-speaker='melitas'],.encounter-dialogue[data-speaker='melitas']{--speech-accent:#e5e9ed;--speech-name:#f4f6f8;--speech-edge:#e5e9ed55;--speech-wash:#dce5ef15}
.speech-frame[data-speaker='mulie'],.encounter-dialogue[data-speaker='mulie']{--speech-accent:#79c893;--speech-name:#9fdfaf;--speech-edge:#79c89355;--speech-wash:#28734a27}
.speech-frame[data-speaker='flarin'],.encounter-dialogue[data-speaker='flarin']{--speech-accent:#e6bd62;--speech-name:#ffe1a0;--speech-edge:#e6bd6255;--speech-wash:#97712327}
.speech-frame[data-speaker='emily'],.encounter-dialogue[data-speaker='emily']{--speech-accent:#df7985;--speech-name:#ffabb3;--speech-edge:#df798555;--speech-wash:#942d4027}
.speech-frame[data-speaker='milian'],.encounter-dialogue[data-speaker='milian']{--speech-accent:#c48eaf;--speech-name:#f1bac9;--speech-edge:#c48eaf55;--speech-wash:#96566e24}
.speech-frame[data-speaker='patron'],.encounter-dialogue[data-speaker='patron']{--speech-accent:#9287b9;--speech-name:#cab3e8;--speech-edge:#9287b94d;--speech-wash:#755e9220}
.speech-frame{background:linear-gradient(105deg,var(--speech-wash,#755e9220),transparent 72%),#07121df5;box-shadow:inset 0 0 0 3px #0b1724,inset 0 0 0 4px var(--speech-edge,#9287b94d),0 3px 14px #0005}
.speech-frame strong,.speech-frame[data-speaker='milian'] strong{color:var(--speech-name,#cab3e8)}
.speech-frame .speech-portrait{border-right-color:var(--speech-edge,#82799b66);background:var(--speech-wash,#21404a66)}
.encounter-dialogue[data-speaker] .dialogue-box{border-color:var(--speech-accent,#b698d1);background:linear-gradient(105deg,var(--speech-wash,#755e9220),transparent 75%),#101722f5;box-shadow:inset 0 0 0 3px #101722,inset 0 0 0 4px var(--speech-edge,#9287b94d),0 12px 40px #0007}
.encounter-dialogue[data-speaker] #encounter-speaker{color:var(--speech-name,#cab3e8)}
.speech-frame[data-kind='ultimate6']{--speech-accent:#e9b47a;--speech-name:#f3d19d;--speech-edge:#e9b47a55}

/* These files are upper-body crops of the actual right-facing gameplay frames. */
.speech-frame:not([data-speaker='patron']) .speech-portrait img{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none}
#portrait-patron{align-self:center;height:66%}

/* Formal half portraits use hairline-to-chin height, excluding ears and headpieces.
   Each head occupies 30% of the stage. Milian keeps headroom for the rabbit ears;
   Emily's eye line matches the other portraits at 40%. */
[data-character='milian'] .encounter-dialogue[data-encounter='mystica'] .portrait-stage,
[data-character='emily'] .encounter-dialogue[data-encounter='mystica'] .portrait-stage{justify-content:flex-end}
[data-character='milian'] .encounter-dialogue[data-encounter='mystica'] #portrait-melitas,
[data-character='emily'] .encounter-dialogue[data-encounter='mystica'] #portrait-melitas{position:absolute;left:4%;width:auto;max-width:none;object-fit:contain;object-position:top;transform:translateY(12px)}
[data-character='milian'] .encounter-dialogue[data-encounter='mystica'] #portrait-melitas{height:130.46%;top:0}
[data-character='emily'] .encounter-dialogue[data-encounter='mystica'] #portrait-melitas{height:115.91%;top:12.73%}
[data-character='milian'] .encounter-dialogue[data-encounter='mystica'] #portrait-melitas.speaking,
[data-character='emily'] .encounter-dialogue[data-encounter='mystica'] #portrait-melitas.speaking{transform:none}
.encounter-dialogue[data-patron='true'] #portrait-patron{position:absolute;left:48%;top:7%;height:62%}