/* Braian interativo (Neurodle, Palavras cruzadas): botão que conta
   curiosidades, pulinho de reação e balão de fala. O tamanho do Braian
   fica no CSS de cada jogo. */
.braian-lugar{ position:relative; flex:0 0 auto; align-self:flex-end; }
.braian-botao{
  display:block; padding:0; margin:0 0 -4px; border:0; background:none; cursor:pointer;
  border-radius:var(--radius-sm);
}
.braian-botao:hover .braian{ transform:rotate(-4deg); }
.braian-botao .braian{ transition:transform .2s var(--ease-out); transform-origin:50% 90%; }
.braian--pula{ animation:braian-pula .45s var(--ease-out); }
@keyframes braian-pula{ 30%{ transform:translateY(-10px) rotate(-3deg); } 60%{ transform:translateY(0) rotate(2deg); } }

/* Balão de fala do Braian: aparece à esquerda dele, por cima do título
   por alguns segundos. É também o aviso lido pelo leitor de tela. */
.braian-balao{
  position:absolute; right:calc(100% + 6px); bottom:34px; z-index:6;
  width:max-content; max-width:min(230px, 62vw); margin:0;
  padding:9px 13px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--white); box-shadow:var(--shadow-card-hover);
  font-size:.86rem; font-weight:600; line-height:1.4; color:var(--navy-900); text-align:left;
  animation:braian-balao .25s var(--ease-out);
}
.braian-balao::after{
  content:""; position:absolute; right:-7px; bottom:14px; width:12px; height:12px;
  background:var(--white); border:1.5px solid var(--line); border-left:0; border-bottom:0;
  transform:rotate(45deg);
}
@keyframes braian-balao{ from{ opacity:0; transform:translateY(4px) scale(.96); } }