fix(home): remove background wrap-around seam when nav is hidden (#4607)

## Problem

The home-screen background layer was lowered with `background-position:
center calc(50% + 2cm)` on a `bg-cover` layer sized exactly to the
viewport. The shift exposes a 2cm strip at the top with no image
content, and since `background-repeat` defaults to `repeat`, CSS fills
it by wrapping the image's bottom edge around to the top — a visible
seam.

The nav bar normally covers that strip, but when a game starts loading,
the `in-game` body class hides the nav while the background layer stays
visible, exposing the seam.

## Fix

A pure translate can't be gap-free (there is no image content above the
image's top edge), so the downward shift now comes from oversizing
instead:

- Layer stays pinned to the viewport top (`top-0`) and extends 4cm below
it (`-bottom-[4cm]`)
- Image is anchored `center top`

The artwork sits ~2cm lower at mid-screen (matching the previous look
there) and the image's top edge stays pinned to the viewport top, so no
edge is exposed at any viewport size or UI state.

## Verification

Drove the real app headless (Playwright):

- Home page renders normally with the artwork sitting lower
- Reproduced the loading state (`in-game` on body, nav hidden):
background renders clean to the top edge, no seam
- Control: re-applied the old styles in-browser, which reproduced the
exact wrap-around band at the top

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

index.html

@@ -161,10 +161,10 @@
     <div id="hex-grid" class="fixed inset-0 -z-50 pointer-events-none">
       <div
         id="background-layer"
-        class="absolute inset-0 bg-cover bg-center opacity-30 [filter:brightness(1.0)] dark:[filter:sepia(0.2)_saturate(1.2)_hue-rotate(180deg)_brightness(0.9)]"
+        class="absolute inset-x-0 top-0 -bottom-[4cm] bg-cover opacity-30 [filter:brightness(1.0)] dark:[filter:sepia(0.2)_saturate(1.2)_hue-rotate(180deg)_brightness(0.9)]"
         style="
           background-image: var(--background-image-url);
-          background-position: center calc(50% + 2cm);
+          background-position: center top;
         "
       ></div>
       <div