/* Estilos só do jogo Palavrinhas mágicas (o comum fica em /comum/base.css e /comum/jogo.css) */

.logo-palavrinhas { font-size: clamp(44px, 10vw, 84px); }

/* A cena com a Gabi (tocar nela repete a fala) */
.cena {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: min(90vw, 46vh, 460px);
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.cena img { display: block; width: 100%; height: 100%; }

/* Botões das palavrinhas: símbolo grande e a frase escrita em inglês */
.opcoes { align-items: center; }
.opcao.palavrinha {
  width: clamp(120px, 22vw, 190px);
  aspect-ratio: auto;
  min-height: clamp(110px, 18vw, 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
}
.palavrinha .simbolo { font-family: initial; font-size: clamp(46px, 8vw, 70px); line-height: 1; }
.palavrinha .frase { font-size: clamp(18px, 3vw, 26px); line-height: 1.1; color: var(--tinta); }
.opcao.certo .frase { color: #fff; }

/* No modo aprender não há placar */
body[data-modo='aprender'] #estrelas { visibility: hidden; }
.seta-aprender { font-size: 26px; color: var(--titulo); }

@media (max-width: 520px) {
  .opcoes { gap: 14px; }
  .opcao.palavrinha { width: calc(50% - 10px); min-height: 104px; }
  body[data-modo='aprender'] .opcao.palavrinha { width: auto; flex: 1; }
}

#pergunta { margin: 10px 0 18px; }