/* A stable message card: the full copy reserves the final wrapped height. */
.scene-hud #feedback.narrative-message{display:grid;grid-template-columns:minmax(0,1fr)}
.narrative-layout,.narrative-visible{grid-area:1/1;min-width:0;overflow-wrap:anywhere;align-self:start}
.narrative-layout{visibility:hidden;user-select:none}
.narrative-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.scene-hud #feedback.narrative-cue{animation:narrative-attention 1200ms ease-out both}
@keyframes narrative-attention{
  from{background-color:color-mix(in srgb,var(--paper) 85%,var(--accent) 15%);color:var(--leaf)}
  to{background-color:var(--paper);color:var(--ink)}
}

/* Narrative reading sizes apply to desktop only; touch layouts retain their scale. */
body:not(.mobile-portrait):not(.mobile-landscape) .scene-hud #feedback{font-size:1rem;line-height:1.4}
body:not(.mobile-portrait):not(.mobile-landscape) .scene-hud .objective{font-size:.875rem;line-height:1.35}
body:not(.mobile-portrait):not(.mobile-landscape) #intro,
body:not(.mobile-portrait):not(.mobile-landscape) #intro p,
body:not(.mobile-portrait):not(.mobile-landscape) #detail-body,
body:not(.mobile-portrait):not(.mobile-landscape) #detail-body p{font-size:1rem;line-height:1.5}
@media(max-height:500px){
  body:not(.mobile-portrait):not(.mobile-landscape) .scene-hud #feedback,
  body:not(.mobile-portrait):not(.mobile-landscape) #intro,
  body:not(.mobile-portrait):not(.mobile-landscape) #intro p,
  body:not(.mobile-portrait):not(.mobile-landscape) #detail-body,
  body:not(.mobile-portrait):not(.mobile-landscape) #detail-body p{font-size:.9375rem}
  body:not(.mobile-portrait):not(.mobile-landscape) .scene-hud .objective{font-size:.8125rem}
}
@media(prefers-reduced-motion:reduce){.scene-hud #feedback.narrative-cue{animation:none}}
.reduced .scene-hud #feedback.narrative-cue{animation:none}