Как реализовать движение элемента внутри круга?

Question

[HelenChydilove]

У меня есть div-game - это большой круг. Далее есть ребенок div-circle.
У меня двигается div-circle рандомно внутри родителя по наведению курсором мыши.
Есть нюанс, если div-game квадрат ,то div-circle не выходит за рамку, а если div-game круг, то выходит.
Помогите понять как сделать так,чтобы не выходил за рамку круга.

PS: Сделать нужно без дополнительного div.

мой код:
HTML

<div class="game">
        <div id="circle" class="game-circle"></div>
    </div>
<div class="coordainate"></div>

JS

var game = document.querySelector('.game');
 var coordinate = document.querySelector('.coordainate');
 var circle = document.getElementById('circle');
  
    game.addEventListener("mousemove", function(e){
         var x = e.clientX === undefined?e.layerX:e.clientX;
         var y = e.clientY === undefined?e.layerY:e.clientY;
         coordinate.innerHTML= 'x: '+ x + '; y: ' + y;
    });
    //random x,y
    circle.addEventListener('mouseover', function(){
        this.style.left = randomRun(1,290)+'px';
        this.style.top  = randomRun(1,290) + 'px';
        this.style.background ='rgb('+ randomRun(0,256)+ ','+ randomRun(0,256)+','+ randomRun(0,256)+')';
    });
    function randomRun(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }

/code>