@media (max-width: 48rem) {
  .pagina-vamos-contar {
    width: 100%;
    padding: 1rem;
  }

  .acolhimento {
    min-height: calc(100vh - 2rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    text-align: center;
  }

  .acolhimento-conteudo {
    display: grid;
    justify-items: center;
  }

  .acolhimento-personagens {
    max-height: 14rem;
  }

  .fase {
    min-height: calc(100vh - 2rem);
  }

  .quadro-fase {
    min-height: 30rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }

  .numeral-grande {
    font-size: clamp(4.5rem, 21vw, 7rem);
  }

  .grade-opcoes-objetos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .origem-e-destino {
    grid-template-columns: minmax(0, 1fr);
  }

  .grade-origem,
  .destino-colecao {
    min-height: 15rem;
  }

  .grupo-alternativo {
    min-height: 11rem;
  }

  .botao-seta {
    min-width: 46%;
    min-height: 5rem;
    grid-template-columns: 3rem minmax(0, 1fr);
    padding-inline: 0.75rem;
  }

  .botao-seta svg {
    width: 3rem;
    height: 3rem;
  }

  .botao-confirmar {
    min-width: min(24rem, 92%);
    min-height: 5.25rem;
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .botao-confirmar svg {
    width: 3.25rem;
    height: 3.25rem;
  }
}

@media (max-width: 31rem) {
  .fase {
    padding: 0.75rem;
  }

  .item-observacao,
  .item-interativo {
    width: clamp(4.1rem, 24vw, 6rem);
  }

  .controles-duplos {
    gap: 0.6rem;
  }

  .botao-seta {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    font-size: 0.92rem;
  }

  .grade-opcoes-objetos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opcao-objeto {
    min-height: 9rem;
  }

  .botao-trocar-objeto span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .botao-trocar-objeto {
    grid-template-columns: 2.5rem 1.6rem;
  }

  .grade-grupos-alternativos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .item-interativo,
  .item-novo,
  .numeral-atualizado {
    transition: none;
    animation: none;
  }

  .destino-confirmado {
    animation: none;
  }

  .grupo-alternativo {
    transition: none;
  }
}