#voiceSubtitle { position: fixed; z-index: 70; bottom: calc(min(75vh, 960px) * .22 + 24px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(760px, 86vw); padding: 12px 20px; color: #f2e6c8; background: rgba(10,8,6,.76); backdrop-filter: blur(6px); border-radius: 12px; text-align: center; font: 16px/1.45 Georgia,serif; pointer-events: none; text-wrap: pretty; }
#voiceBubble { position: fixed; z-index: 69; transform: translate(-50%,-100%); width: max-content; max-width: min(300px, 70vw); padding: 10px 16px; color: #f2e6c8; background: rgba(10,8,6,.76); backdrop-filter: blur(6px); border-radius: 12px; font: 15px/1.45 Georgia,serif; pointer-events: none; text-align: left; text-wrap: pretty; }
/* A line shown over its speaker keeps the subtitle for screen readers only. */
#voiceSubtitle.voice-sr { position: fixed !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; backdrop-filter: none !important; background: none !important; }
#voiceSubtitle[hidden], #voiceBubble[hidden] { display: none; }
/* Phones (heat, art/production/reports/heat.md): no backdrop blur behind the lines (it re-blurred the moving world under
   them every frame); a denser backing keeps them as readable. */
body.mobile #voiceSubtitle, body.mobile #voiceBubble { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,8,6,.86); }