Minha solução ingresso online

// Quantidade inicial de ingressos
let ingressos = {
    pista: 100,
    superior: 200,
    inferior: 400
};

// Elemento de mensagem
const mensagemEl = document.getElementById('mensagem');
const qtdInput = document.getElementById('qtd');
const tipoSelect = document.getElementById('tipo-ingresso');

// Função de compra
function comprar() {
    const tipo = tipoSelect.value;
    const qtd = parseInt(qtdInput.value);

    if (!qtd || qtd < 1) {
        mostrarMensagem("Informe uma quantidade válida!", "erro");
        return;
    }

    if (ingressos[tipo] >= qtd) {
        ingressos[tipo] -= qtd;
        document.getElementById(`qtd-${tipo}`).textContent = ingressos[tipo];
        mostrarMensagem(`Compra realizada! Você comprou ${qtd} ingresso(s) de ${nomeTipo(tipo)}.`, "sucesso");

        if (ingressos[tipo] === 0) {
            mostrarMensagem(`${nomeTipo(tipo)} esgotada!`, "erro");
        }
    } else {
        mostrarMensagem(`${nomeTipo(tipo)} não disponível ou quantidade insuficiente!`, "erro");
    }
}

// Função para exibir mensagem
function mostrarMensagem(texto, tipo) {
    mensagemEl.textContent = texto;
    if (tipo === "sucesso") {
        mensagemEl.classList.add("sucesso");
        mensagemEl.classList.remove("erro");
    } else {
        mensagemEl.classList.add("erro");
        mensagemEl.classList.remove("sucesso");
    }
}

// Função para transformar o valor do select em nome amigável
function nomeTipo(tipo) {
    switch (tipo) {
        case "pista": return "Pista";
        case "superior": return "Cadeira Superior";
        case "inferior": return "Cadeira Inferior";
    }
}

// Zerar quantidade quando mudar tipo de ingresso
tipoSelect.addEventListener('change', () => {
    qtdInput.value = '';
    mensagemEl.textContent = '';
});


Mudei um pouco o html pra mostar msn de compra feita com sucesso, quantidade insuficiente e etc na propria pagina e não como alert assim como adaptei o css também
 <div id="mensagem" class="mensagem"></div>  
.mensagem {
    margin-top: 1rem;
    font-size: 1.3rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #FF4C4C; /* vermelho para alertas */
}
.mensagem.sucesso {
    color: #00F4BF; /* verde para sucesso */
}