/* v0.8.0 (pedido 22): balão de fala em HTML nas telas de troca de fase e de fim de jogo (docs/v080/FALAS.md §3.2).
   No mapa o balão é desenhado no canvas (js/jogo/falas.js); aqui o mapa está parado embaixo do véu escuro.
   Mesmo estilo dos painéis: quadrado, de pixel, sem canto redondo. --cor-dono vem do JS (a cor de quem fala). */
.fala-balao {
  position: absolute; top: 3vh; left: 50%; z-index: 6;
  transform: translateX(-50%);
  max-width: min(72vw, 36em); padding: 0.45em 0.8em;
  font-family: var(--fonte); font-size: clamp(16px, 2.4vh, 28px); line-height: 1.25; text-align: center;
  color: var(--escuro); background: var(--texto);
  border: 3px solid #0d0a10; border-radius: 0;
  box-shadow: 0 4px 0 var(--cor-dono, var(--roxo));
  pointer-events: none;
  animation: fala-pop 0.12s steps(3, end) both;
}
.fala-balao-nome { font-size: 0.75em; opacity: 0.75; }
/* rabinho: 3 degraus de pixel apontando pra baixo (pro título da tela), abaixo da sombra */
.fala-balao::after {
  content: ''; position: absolute; left: calc(50% - 9px); top: calc(100% + 4px);
  width: 18px; height: 9px; background: #0d0a10;
  clip-path: polygon(0 0, 100% 0, 100% 33.4%, 83.3% 33.4%, 83.3% 66.7%, 66.7% 66.7%, 66.7% 100%,
                     33.3% 100%, 33.3% 66.7%, 16.7% 66.7%, 16.7% 33.4%, 0 33.4%);
}
.fala-balao.saindo { opacity: 0; transition: opacity 0.25s steps(4, end); }
@keyframes fala-pop {
  from { opacity: 0.35; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1;    transform: translateX(-50%) translateY(0); }
}