.masthead-dialogue {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  width: 100%;
  max-width: 466px;
  justify-self: end;
}
.dialogue-portrait {
  align-self: flex-end;
  flex: 0 0 94px;
  width: 94px;
  height: 94px;
  object-fit: contain;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--accent-border);
  box-shadow: inset 0 0 0 2px var(--dialogue-inset);
}
.dialogue-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 15px 14px 4px;
  background: var(--dialogue-surface);
  border: 1px solid var(--accent-border);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--dialogue-inset);
}
.dialogue-speaker {
  position: absolute;
  top: -9px;
  left: 10px;
  padding-inline: 5px;
  background: var(--dialogue-surface);
  color: var(--accent);
  font: 700 11px / 18px Silkscreen, monospace;
  letter-spacing: .2px;
}
.dialogue-line {
  position: relative;
  display: grid;
  min-height: 3.2em;
  color: var(--text);
  font-family: Consolas, 'Yu Gothic', Meiryo, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
/* Reserve the complete line's wrapping while its visible text types. */
.dialogue-measure, .dialogue-reveal { grid-area: 1 / 1; }
.dialogue-measure { visibility: hidden; }
.dialogue-actions { min-height: 30px; }
.dialogue-next {
  display: block;
  margin-left: auto;
  padding: 5px 0 3px 12px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 11px / 1.6 Consolas, 'Yu Gothic', Meiryo, monospace;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dialogue-next:hover { color: var(--focus-ring); }
@media (max-width: 920px) {
  .masthead-dialogue { justify-self: start; }
}
@media (max-width: 1150px) and (min-width: 921px) {
  .dialogue-portrait { flex-basis: 80px; width: 80px; height: 80px; }
  .dialogue-bubble { padding-inline: 12px; }
}
@media (max-width: 600px) {
  .masthead-dialogue { gap: 10px; }
  .dialogue-portrait { align-self: center; flex-basis: 62px; width: 62px; height: 62px; padding: 3px; }
  .dialogue-bubble { padding: 12px 11px 0; }
  .dialogue-line { font-size: 12px; min-height: 0; line-height: 1.65; }
  .dialogue-speaker { font-size: 10px; }
  .dialogue-next { min-height: 32px; padding-block: 5px; }
  .dialogue-actions { min-height: 32px; }
}