Chrome abre o alert antes de mostrar o conteúdo de document.write

<meta charset="UTF-8">

<script>

    function pulaLinha() {

        document.write("<br>");
        document.write("<br>");
}

    function mostra(frase) {

        document.write(frase);
        pulaLinha();
}

var numeroPensado = Math.round(Math.random() * 10);

var tentativas = 1;

while(tentativas <= 3) {

    var chute = parseInt(prompt("Digite seu chute!"));

    if(chute == numeroPensado) {

        mostra("Você ACERTOU, o número pensado era " + numeroPensado);
        break;

    } else {

        mostra("Você ERROU!");
    }

    tentativas++;
}

mostra("FIM");
</script>

Quando executo o código, meu navegador Chrome abre um popup para eu digitar meu chute, quando digito e erro, ele não escreve nada, ja abre outro popup para eu chutar novamente, ele só mostra o conteudo dos "mostra" quando terminam as 3 tentativas ou quando eu acerto... teria como alterar o código para que após eu responder cada popup ele mostrar se eu acertei ou errei? Fiz essa outra versão com uma ajuda para saber se está chutando um número mais baixo ou mais alto do que o sorteado:

<meta charset="UTF-8">

<script>

    function pulaLinha() {

        document.write("<br><br>");
    }

    function mostra(frase) {

        document.write(frase);
        pulaLinha();
    }

    var n = 10

    function sorteia(n) {
        return (Math.round(Math.random() * n))
    }


    var numeroPensado = sorteia (n)

    var tentativas = 1;

    while (tentativas <= 3) {

        var chute = parseInt (prompt("Chute um número de 0 a " + n + "!"));

        if (chute == numeroPensado) {

            mostra("Você acertou!");
        } 
             else {

                mostra("Você errou!");
            }

        if (chute < numeroPensado) {

            mostra("O número chutado é menor!");
        }

        if (chute > numeroPensado) {

            mostra ("O número chutado é maior!");
        }
        tentativas ++;
    }

    mostra ("FIM!");

</script>