/* ============================================================
   Overrides locais — carregado DEPOIS do CSS do build.
   Separado dos arquivos com hash para nao misturar com o bundle
   original e ser facil de auditar/remover.
   ============================================================ */

/* --- Modais: NUNCA cortar conteudo ---
   O .modal-overlay original usa align-items/justify-content:center.
   Quando o modal e' mais alto que a tela (intro do tutorial, resultado
   de vitoria/derrota em telas baixas), o centramento empurra o topo e o
   rodape para fora e nada rola — badge/botoes ficam inacessiveis.

   Solucao robusta em flexbox: overlay rola no eixo Y, ancora no topo,
   e o .modal usa margin:auto (centraliza quando cabe, rola ate' o topo
   quando nao cabe). Vale para TODOS os modais (.modal-overlay). */
.modal-overlay {
  overflow-y: auto;
  align-items: flex-start;
}
.modal-overlay > .modal {
  margin: auto;
  max-height: none;
}

/* --- Imagem de topo dos modais (vitoria e intro do tutorial) ---
   O build assume um .modal com padding:28px e faz a imagem "sangrar"
   com margin negativa. Mas o .modal efetivo tem padding:0, entao a
   imagem vaza e desalinha, cortando o conteudo. Aqui alinhamos a imagem
   a' largura do modal. O !important e' necessario porque a largura/margem
   da imagem de vitoria vem em estilo inline no bundle. */
.result-modal > img {
  width: 100% !important;
  margin: 0 0 12px !important;
  border-radius: 18px 18px 0 0 !important;
}

/* Banner do modal de introducao do tutorial: respiro lateral no conteudo
   e banner sangrando ate' as bordas certas (casando o padding novo). */
.tutorial-intro-modal {
  padding: 0 18px 18px;
}
.tutorial-intro-banner {
  width: calc(100% + 36px);
  margin: 0 -18px 16px;
  border-radius: 18px 18px 0 0;
}