モーダルウィンドウを表示したときに背景にぼかしを適用したいです。

前提・実現したいこと

初心者なのでご教授願いたいです。
モーダルウィンドウを表示したときに背景にぼかしが適用されるようにしたいです。
(「もう一回挑戦するボタン」などの背景部分をぼかしたいです。)

発生している問題・エラーメッセージ

現在の状況では下記の画像のようにモーダルウィンドウを表示しても背景にぼかしが適用することが出来ません。

該当のソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--id=edgeを駆使することで最新のモダンなブラウザと同じような動作を実現できるようになる-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Guess My Number!</title>
  </head>
  <body>
    <header>
      <h1>Guess My Number!</h1>
      <button class="btn again">もう一回挑戦する!</button>
      <div class="number">?</div>
    </header>
    <main>
      <section class="left">
        <input type="number" class="guess" />
        <button class="btn start">スタート</button>
      </section>
      <section class="right">
        <p class="message">数字を推定して遊んでみよう!</p>
        <p class="label-score">Number: <span class="score">Sercret</span></p>
        <!--modalwindowを開くための処理-->
        <button class="show-modal">ゲームの説明</button>
        <!--The modal-->
        <!-- <div id="game-explanation" class="modal hidden"></div> -->
        <!-- 上記のdivでボタンを押したらp要素の文章を出力する場合にはid要素 -->
        <div class="modal hidden">
          <!--modalwindowで表示されるコンテンツの中身-->
          <!-- <div class="modal content"></div> -->
            <button class="close-modal">&times;</button>
            <h2>・ゲームの概要</h2>
            <p>
              1. ?ボックスに1~8までの整数がランダムで隠れています。 </br>
              2. プレイヤーは入力ボックスに数字を入力することで隠されている数字を当てることができるゲームです。</br>
            </p>
            <h2>・ルール</h2>
            <p>
              1. プレイヤーは隠されている数値を入力ボックスに入力することで数値を推定します。</br>
              2. 入力された数値と隠された数値に3以上の差がある場合にはあなたの負けです。</br>
              3. 隠された数値と入力された数値の差が3以内の場合には惜しいです。</br>
              4. 隠された数値と入力された数値が等しい場合にはあなたの勝ちです!</br>
            </p>
          <!-- </div> -->
        </div>
        <div class="overlay hidden"></div>
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: Georgia, serif;
  color: rgb(238, 238, 238);
  background-color: #222;
  /* background-color: #60b347; */
}

/* LAYOUT */
header {
  position: relative;
  height: 35vh;
  border-bottom: 7px solid #eee;
}

main {
  height: 65vh;
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.left {
  width: 52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right {
  width: 52rem;
  font-size: 2rem;
}

/* ELEMENTS STYLE */
h1 {
  font-size: 4rem;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.number {
  background: #eee;
  color: #333;
  font-size: 6rem;
  width: 15rem;
  padding: 3rem 0rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.between {
  font-size: 1.4rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.again {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.guess {
  background: none;
  border: 4px solid #eee;
  font-family: inherit;
  color: inherit;
  font-size: 5rem;
  padding: 2.5rem;
  width: 25rem;
  text-align: center;
  display: block;
  margin-bottom: 3rem;
}

.btn {
  border: none;
  background-color: #eee;
  color: #222;
  font-size: 2rem;
  font-family: inherit;
  padding: 2rem 3rem;
  cursor: pointer;
}

.btn:hover {
  background-color: #ccc;
}

.message {
  margin-bottom: 8rem;
  height: 3rem;
}

.label-score {
  margin-bottom: 2rem;
}

.show-modal {
  border: none;
  background-color: #eee;
  color: #222;
  font-size: 2rem;
  font-family: inherit;
  padding: 2rem 3rem;
  cursor: pointer;
}

.show-modal:hover {
  background-color: #ccc;
}

.close-modal {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  font-size: 5rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/*ここからmodalwindowの処理を実装している*/
.hidden {
  display: none;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;

  background-color: rgb(98, 197, 78);
  padding: 6rem;
  border-radius: 5px;
  z-index: 10;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 5;
}
/*background-filterで背景にぼかしや色の変化を加える*/
/*CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

script.js

'use strict';

//推定したい数字を乱数で設定する
let randomNumber = Math.trunc(Math.random() * 7 + 1);

//<div class="modal hidden"></div>のhiddenを格納する
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const closeModal = document.querySelector('.close-modal');

//ゲームの説明というボタンをクリックしたら表れるようにする処理
document.querySelector('.show-modal').addEventListener('click', function () {
  console.log('button clicked');
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
  // gameExplanation.remove('game-explanation');
});

//表示されているゲームの説明文を×をクリックすることで削除する処理
document.querySelector('.close-modal').addEventListener('click', function () {
  console.log('button clicked');
  modal.classList.add('hidden');
  overlay.classList.remove('hidden');
});

//リファクタリング
const displayMessage = function (message) {
  document.querySelector('.message').textContent = message;
};
const backgroundColor = function (backgroundColor) {
  document.querySelector('body').style.backgroundColor = backgroundColor;
};

/*条件分岐を行う。Startボタンを入力すると、inputNumberが入力されていない場合には数値の正誤判定を実行しないで入力値を入力してくださいと表記する。数値が合っている場合には背景、文字列、randomNumberが表れるようにする。数値が合っていない場合には背景、文字列に変化を与える。*/
document.querySelector('.start').addEventListener('click', function () {
  console.log(randomNumber); //consoleで乱数が生成されるか確認する
  const inputNumber = Number(document.querySelector('.guess').value);
  console.log(inputNumber, typeof inputNumber);
  if (!inputNumber) {
    displayMessage('何か数値を入力してください!');
  } else if (inputNumber === randomNumber) {
    backgroundColor('#60b347');
    displayMessage('Conguratulations!');
    document.querySelector('.score').textContent = randomNumber;
  } else if (
    inputNumber - randomNumber >= 3 ||
    randomNumber - inputNumber >= 3
  ) {
    displayMessage('入力した数値と?ボックスの数値に3以上の差があります!');
    backgroundColor('red');
  } else {
    displayMessage('惜しいです...');
    backgroundColor('#222');
  }
});

//Again!ボタンを押したらもう一度最初からやり直せる(上記の状態を初期の状態に戻す)
document.querySelector('.again').addEventListener('click', function () {
  randomNumber = Math.trunc(Math.random() * 7 + 1);
  console.log(randomNumber);
  backgroundColor('#222');
  displayMessage('数字を推定して遊んでみよう!');
  document.querySelector('.guess').value = '';
  document.querySelector('.score').textContent = 'Sercret';
});