/* Characters lead the conversation; dialogue keeps its full readable width. */
#story{background:radial-gradient(ellipse at 50% 25%,#46351b66,transparent 65%),#14130f;padding:calc(12px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom))}
#story .story-card{width:min(100%,640px);margin:0 auto!important;padding:18px;background:#211e17;border-color:#b390535c}
#story .story-character-dialogue{display:flex;flex-direction:column;align-items:center;gap:14px;min-height:90px;margin-bottom:0}
#story #storySpeakerImg,#story #storyHeroImg{height:clamp(180px,34dvh,300px)!important;width:100%!important;max-width:330px;object-fit:contain;object-position:center bottom;border-radius:0!important;filter:drop-shadow(0 8px 18px #c89d3a33)!important}
#story .story-character-dialogue>div{width:100%;padding:14px 2px 0;border-top:1px solid #bb955655}
#story #storySpeaker{color:#e6c78b!important;font-size:1rem!important;margin-bottom:10px!important}
#story #storyText{font-size:1rem!important;line-height:1.85!important;overflow-wrap:anywhere}
#story #storyNext{min-height:48px;min-width:180px!important;background:linear-gradient(110deg,#c2994d,#f0d893,#c7a255);color:#302312;border:1px solid #f4d99a}
.reference-hint-character{display:flex!important;flex-direction:column;align-items:center!important;gap:8px!important}
.reference-hint-character img{height:clamp(130px,25dvh,230px)!important;width:min(100%,270px);object-fit:contain;border-radius:0!important}
#prologue #prologueText>div:first-child img{height:clamp(130px,26dvh,230px)!important;width:auto!important;max-width:43vw;object-fit:contain}
@media(max-height:540px) and (min-width:650px){#story .story-character-dialogue{flex-direction:row;align-items:center}#story #storySpeakerImg,#story #storyHeroImg{width:35%!important;height:220px!important}#story .story-character-dialogue>div{border-top:0;padding-top:0;flex:1}.reference-hint-character{flex-direction:row!important}.reference-hint-character img{height:110px!important}}