pauseSpan

app.js

@@ -990,6 +990,7 @@ let game = {
         document.onkeydown = onkeydown
         document.onkeyup = onkeyup
 
+        pauseSpan.className = ""
         stats.clock.start()
         stats.clock.elapsedTime = stats.elapsedTime
         music.play()
@@ -1056,10 +1057,10 @@ let game = {
     
         music.pause()
         document.onkeydown = null
-        renderer.domElement.tabIndex = 1
-        renderer.domElement.onfocus = game.resume
-
-        messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>PAUSE</h1>` })
+        
+        pauseSpan.tabIndex = 1
+        pauseSpan.onfocus = game.resume
+        pauseSpan.className = "pause"
     },
 
     over: function() {

index.html

@@ -30,6 +30,7 @@
         </div>
       </div>
       <span id="messagesSpan"></span>
+      <span id="pauseSpan">PAUSE</span>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
       <script type="module" src="app.js"></script>
     </body>

style.css

@@ -1,6 +1,10 @@
 body {
     margin: 0;
+    padding: 0;
     background-color: #222;
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+        "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 span {
@@ -39,9 +43,6 @@ canvas {
     transform: translate(-50%, 0);
     color: rgba(255, 255, 255, 0.8);
     text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
-        "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
-        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     font-weight: 400;
     line-height: 1.5;
     font-size: 3vmin;
@@ -156,3 +157,24 @@ h1 {
     animation-timing-function: (0.4, 0, 0.6, 1);
     animation-duration: 2s;
 }
+
+#pauseSpan {
+    display: none;
+}
+
+#pauseSpan.pause {
+    display: flex;
+    position:absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    backdrop-filter: blur(10px);
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    color: rgba(255, 255, 255, 20%);
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    font-size: 10vh;
+}