diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8ee612f..a85e597 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -12,3 +12,7 @@
 ## 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-05-24 - Explicit Instructional Text for Custom Key Bindings
+**Learning:** When building interactive HTML5 widgets or games with custom keyboard event bindings, users do not natively know the required inputs, leading to poor UX if instructions are missing.
+**Action:** Always provide explicit, visible instructional text for custom keyboard interactions and use CSS `pointer-events: none` on overlays to ensure they do not block user interactions.
diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk
index 67b6bd7..eefff9a 100644
--- a/src/views/mario-game.njk
+++ b/src/views/mario-game.njk
@@ -52,6 +52,25 @@
       font-size: 20px;
       font-family: Arial;
     }
+
+    #instructions {
+      position: absolute;
+      bottom: 60px;
+      width: 100%;
+      text-align: center;
+      color: white;
+      font-size: 24px;
+      font-family: Arial, sans-serif;
+      pointer-events: none;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0% { opacity: 0.8; }
+      50% { opacity: 1; }
+      100% { opacity: 0.8; }
+    }
   </style>
 </head>
 
@@ -59,6 +78,7 @@
 
 <div id="game">
   <div id="score">Score: 0</div>
+  <div id="instructions">Press Space or Up Arrow to jump</div>
   <div id="mario"></div>
   <div class="ground"></div>
 </div>