Failing to get condition to work with div?

I want to have the ball sized to the prompt of the user upon entering it and something doesn't work, can't tell what I'm doing wrong.

<style>
    body {
        background-color: black;
        text-align: center;
    }
    h1 {
        color: white;
    }
    div {
        width: 100px;
        height: 100px;
        margin: auto;
        margin-bottom: 10px;
        border-radius: 50%;
        transition: 0.3s;
        line-height: 50px;

    .ball4 {
        background-color: brown;
    }
</style>

<div class="ball4" onclick="onBall4Click()">
    PROMPT
</div>

<script>

    
    function onBall4Click() {
        var ball4 = document.querySelector('.ball4');
        var ball4Size = prompt("Size of ball? ");

        if (ball4Size > 1000) {
            alert("Too big!")
        } else {
            var ball4Size = size;
        }
    }
</script>

Thanks in advance to the helpers.