diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8ee612f..4977d85 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -12,3 +12,6 @@
 ## 2025-03-23 - Game Key Scrolling
 **Learning:** Browsers natively scroll the page when users press Space or Arrow keys. When building a web-based game, this creates a frustrating UX where the game viewport jumps around while playing.
 **Action:** Always call `e.preventDefault()` on keydown events for typical game controls ("Space", "ArrowUp", etc.) when the focus is on a game container or the body.
+## 2024-07-18 - [Accessible Instructional Overlays]
+**Learning:** Adding static instructional text next to dynamic `aria-live` content provides immediate clarity for keyboard users without causing screen readers to re-read the static text. Overlay text must use `pointer-events: none` to ensure it doesn't intercept or block mouse clicks/touches on the game canvas below.
+**Action:** Extract dynamic values into dedicated `<span>`s with ARIA live attributes. Ensure instructional overlays are visually distinct and explicitly ignore pointer events.
diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk
index 67b6bd7..00b7e32 100644
--- a/src/views/mario-game.njk
+++ b/src/views/mario-game.njk
@@ -44,7 +44,7 @@
       background: #2ecc71;
     }
 
-    #score {
+    #score-container {
       position: absolute;
       top: 10px;
       left: 10px;
@@ -52,13 +52,26 @@
       font-size: 20px;
       font-family: Arial;
     }
+
+    #instructions {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      color: white;
+      font-size: 20px;
+      font-family: Arial;
+      pointer-events: none;
+    }
   </style>
 </head>
 
 <body>
 
 <div id="game">
-  <div id="score">Score: 0</div>
+  <div id="score-container">
+    <span id="score-label">Score: </span><span id="score-value" aria-live="polite" aria-atomic="true">0</span>
+  </div>
+  <div id="instructions">Press Space or Up Arrow to jump</div>
   <div id="mario"></div>
   <div class="ground"></div>
 </div>
@@ -66,7 +79,7 @@
 <script>
   const mario = document.getElementById("mario");
   const game = document.getElementById("game");
-  const scoreText = document.getElementById("score");
+  const scoreValue = document.getElementById("score-value");
 
   let jumping = false;
   let score = 0;
@@ -118,7 +131,7 @@
         clearInterval(move);
         goomba.remove();
         score++;
-        scoreText.innerText = "Score: " + score;
+        scoreValue.innerText = score;
       } else {
         position -= 6;
         goomba.style.left = position + "px";
