.speech-text{position:relative;overflow-wrap:anywhere;min-height:2.9em}
.speech-reserve{display:block;visibility:hidden;pointer-events:none}
.speech-visible{position:absolute;inset:0;pointer-events:none}
.speech-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.speech-options{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.speech-options button{font-size:12px;min-height:32px;padding:4px 8px}
.speech-speaker{color:#287666;font-size:15px;grid-column:1/-1}
.dialogue-settings{display:grid;gap:8px;border-top:1px solid #718090;margin-top:20px}
.dialogue-settings label{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dialogue-settings select{font:inherit;max-width:65%;padding:8px;border-radius:6px;background:#172132;color:#fff}
.dialogue-settings input{max-width:65%}
.general-volume-setting{display:flex;align-items:center;justify-content:space-between;gap:12px}.general-volume-setting input{max-width:65%}
/* Speech stays within the game canvas. The upper wall leaves the route visible. */
body[data-room=library] #workspace>.play>.room-stage:has(.bubble:not([hidden])){aspect-ratio:16/9;overflow:hidden;flex:0 1 auto;width:min(1200px,100%);max-height:100%}
body[data-room=library] .bubble,.bubble{position:absolute;top:12px;bottom:auto;left:3%!important;right:3%!important;transform:none;width:94%;max-height:calc(100% - 24px);margin:0;overflow:auto;padding:12px 14px 10px 76px}
body[data-room=library] .bubble:after,.bubble:after,.bubble[data-speaker=Dot]:before{display:none}
.bubble .speech-options{grid-column:1/-1}
.bubble>canvas{top:14px;bottom:auto}
.bubble .speech-text{font-size:18px;line-height:1.45;margin:5px 0 8px}
.cutscene-stage{min-height:450px}
.cutscene-bubble,.in-room-conversation .cutscene-bubble{position:absolute;top:auto;bottom:12px;left:3%;right:3%;margin:0;min-height:0;padding:14px 16px 12px 88px;border:2px solid #9e8764;border-radius:12px}
.cutscene-bubble:before{display:none}
.in-room-conversation .cutscene-bubble{top:12px;bottom:auto}
.speech-portrait{position:absolute;left:10px;top:16px;width:62px;height:70px;image-rendering:pixelated;background:#e6e3ce;border-radius:7px}
.cutscene-line{font-size:19px;line-height:1.45}
.cutscene-controls{margin-top:10px;flex-wrap:wrap}
.cutscene-controls button{min-height:38px;min-width:0}
.cutscene-controls .primary{min-width:140px}
.cutscene-actors{padding-top:14px}
.conversation-demo{position:absolute;inset:0 0 auto;width:100%;height:54%;border:0;pointer-events:none}
.conversation-demo-code{position:absolute;top:48%;left:5%;font-size:15px;color:#172132;background:#fff5df;border-radius:5px;padding:4px 8px;max-width:90%;overflow-wrap:anywhere}
.with-conversation-demo .cutscene-actors{display:none}
.with-conversation-demo .cutscene-stage{min-height:560px}
body[data-dialogue-size=large] .speech-text{font-size:22px}
body[data-dialogue-size=largest] .speech-text{font-size:26px}
@media(max-height:650px){.cutscene-stage{min-height:350px}.cutscene-actors canvas{width:92px;height:105px}.story-cutscene{max-height:96dvh}.cutscene-line{font-size:18px}}
@media(max-height:650px){.with-conversation-demo .cutscene-stage{min-height:calc(96dvh - 120px)}}
@media(max-width:520px){.cutscene-bubble,.in-room-conversation .cutscene-bubble{padding:12px 12px 10px 64px}.speech-portrait{width:42px;height:48px;left:8px;top:12px}.cutscene-stage{min-height:500px}.cutscene-actors canvas{width:74px;height:84px}.cutscene-line{font-size:17px}.cutscene-controls{gap:6px}.cutscene-controls .primary{min-width:110px}.bubble,body[data-room=library] .bubble{padding-left:58px}.bubble .speech-text{font-size:17px}}
@media(prefers-reduced-motion:reduce){.story-conversation .cutscene-stage{animation:none!important}}