Reset /games/index.html to the new shared theme system and lock the updated shared-header rules.

Add Toolbox Aid as the first external menu item.
Keep the shared header full width regardless of content.
Require the header image to retain aspect ratio as viewport width changes.

PR: BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS

Author: DavidQ

docs/dev/reports/header_lock_carry_forward_notes.txt

@@ -5,7 +5,8 @@ Locked for implementation:
 - external link standard = class is-external + target _blank + rel noopener noreferrer
 - header stretches full width regardless of content
 - no centered container may constrain the header
-- header image preserves aspect ratio
+- header image retains aspect ratio as width changes
+- fixed-height header image behavior must be removed
 
 Execution slice:
 - reset /games/index.html only

docs/operations/dev/codex_commands.md

@@ -21,7 +21,11 @@ Required work:
      <a href="https://toolboxaid.com" class="is-external" target="_blank" rel="noopener noreferrer">Toolbox Aid</a>
    </li>
 4. Ensure header styling keeps the header full width regardless of content.
-5. Ensure the header image area preserves aspect ratio and is not constrained by a centered content wrapper.
+5. Ensure the header image scales proportionally with viewport width:
+   - retain aspect ratio
+   - no fixed-height lock
+   - no distortion
+   - no cropping used to fake responsiveness
 6. Add or keep shared external-link styling under theme CSS if useful.
 7. Keep `/games/index.html` structurally close to `/index.html` and `/samples/index.html`.
 8. Package to:

docs/operations/dev/commit_comment.txt

@@ -2,6 +2,6 @@ Reset /games/index.html to the new shared theme system and lock the updated shar
 
 Add Toolbox Aid as the first external menu item.
 Keep the shared header full width regardless of content.
-Preserve shared header sourcing under src/engine/theme.
+Require the header image to retain aspect ratio as viewport width changes.
 
 PR: BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS

docs/pr/BUILD_PR_STYLE_04_GAMES_INDEX_RESET_AND_HEADER_LOCKS.md

@@ -18,12 +18,18 @@ Reset `/games/index.html` onto the new Toolbox Aid-derived theme while carrying
 2. Header must stretch the full width of the screen regardless of content.
    - no centered max-width wrapper may constrain the header
    - header image area must remain full-width
-   - image behavior must preserve aspect ratio
 
-3. Shared header source remains under:
+3. Header image must retain aspect ratio as page width changes.
+   - image width may scale up/down with viewport
+   - image height must scale proportionally
+   - do not hold image container to a fixed height
+   - do not crop, squash, or distort the image
+   - remove any fixed-height rule that prevents proportional scaling
+
+4. Shared header source remains under:
    - `src/engine/theme/toolboxaid-header.html`
 
-4. Shared header styling remains under:
+5. Shared header styling remains under:
    - `src/engine/theme/header.css`
    - plus shared base support in `src/engine/theme/main.css` as needed
 
@@ -49,5 +55,7 @@ Optional shared visual cue:
 - header renders from shared source
 - Toolbox Aid link is first in menu and opens in new tab safely
 - header remains full width regardless of content
+- header image scales proportionally with viewport width
+- no fixed-height header image behavior remains
 - no embedded styling remains on `/games/index.html`
 - page is testable and narrow in scope

src/engine/theme/header.css

@@ -1,6 +1,5 @@
 .header-image {
   background-color: #3600af;
-  background-image: url('/src/engine/theme/toolboxaid-header.png');
   border-bottom: 8px solid #3600af;
 }
 
@@ -39,24 +38,18 @@
 
 .toolboxaid-theme-header #image {
   grid-area: image;
-  min-height: 126px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 18px 20px;
+  display: block;
+  padding: 0;
   border-radius: 0;
-  background-size: cover;
-  background-position: center;
   box-shadow: var(--theme-shadow);
-  overflow: hidden;
-  position: relative;
+  overflow: visible;
+  position: static;
 }
 
-.toolboxaid-theme-header #image::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, rgba(9, 19, 33, 0.18), rgba(9, 19, 33, 0.38));
+.toolboxaid-theme-header #image img {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
 .toolboxaid-theme-header #tagline {

src/engine/theme/toolboxaid-header.html

@@ -1,6 +1,7 @@
 <header class="toolboxaid-theme-header">
   <div class="flex header-content">
     <div id="image" class="header-image bg-image-fill site-tagline">
+      <img src="/src/engine/theme/toolboxaid-header.png" alt="Toolbox Aid Header Banner" />
     </div>
 
     <div id="tagline" class="site-tagline site-tagline-alt align-center">