From 066498f8478c12ff3f963dce291ebf72dfe59fc1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:37:56 +0000
Subject: [PATCH] Add <kbd> styling and text shadow to game instructions

Adds semantic <kbd> tags around the keyboard shortcuts in the
game instructions and applies physical key styling. Also adds
a text shadow to the score and instructions to improve contrast
against the sky background.

Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com>
---
 .Jules/palette.md        |  4 ++++
 src/views/mario-game.njk | 19 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 49b0751..cfaf418 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -19,3 +19,7 @@
 ## 2024-08-06 - Screen Reader Accessible Dynamic Text
 **Learning:** Dynamic text changes, like game scores, are invisible to screen readers unless explicitly marked. Do not place static text (like instructions) inside an `aria-live` region, as it forces screen readers to unnecessarily repeat the static text every time the dynamic content updates. Extract static text into a separate sibling element.
 **Action:** Add `aria-live="polite"` to the container of the dynamic value and extract static text out of it.
+
+## 2025-08-11 - Keyboard Shortcut Hints
+**Learning:** Explicitly highlighting keyboard shortcuts using semantic <kbd> tags with physical key styling improves intuitiveness and discoverability for web games.
+**Action:** Always wrap key shortcuts in <kbd> and apply text-shadows to ensure high contrast against dynamic backgrounds.
diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk
index c84e3f2..ac86522 100644
--- a/src/views/mario-game.njk
+++ b/src/views/mario-game.njk
@@ -51,6 +51,7 @@
       color: white;
       font-size: 20px;
       font-family: Arial;
+      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
     }
 
     #instructions {
@@ -61,6 +62,22 @@
       font-size: 16px;
       font-family: Arial;
       pointer-events: none;
+      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+    }
+
+    kbd {
+      background-color: #eee;
+      border-radius: 3px;
+      border: 1px solid #b4b4b4;
+      box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 0 0 rgba(255,255,255,.7) inset;
+      color: #333;
+      display: inline-block;
+      font-size: 0.85em;
+      font-weight: 700;
+      line-height: 1;
+      padding: 2px 4px;
+      white-space: nowrap;
+      text-shadow: none;
     }
   </style>
 </head>
@@ -69,7 +86,7 @@
 
 <div id="game">
   <div id="score-container">Score: <span id="score-value" aria-live="polite">0</span></div>
-  <div id="instructions">Press Space or ↑ to jump!</div>
+  <div id="instructions">Press <kbd>Space</kbd> or <kbd>↑</kbd> to jump!</div>
   <div id="mario"></div>
   <div class="ground"></div>
 </div>