keimgarten: mobile viewport polish + manual phone QA (HITL — manual test required)

[DanielBonaker]

Parent

#13 Keimgarten (Game 002) — implementation PRD

What to build

Manual mobile viewport QA for Keimgarten. A human (Daniel) opens Keimgarten on actual or browser-emulated mobile devices and verifies the integer-zoom rendering, hit-target compliance, persistence, and the cross-game economy flow end-to-end. This is the final gate before Keimgarten is considered shippable per the night-shift label graduation criteria.

This slice is HITL — it cannot be cleared by the autonomous night-shift pipeline. It requires human eyes on a real or emulated device and a sign-off comment.

Devices to verify:

• iPhone SE class (375 × 667 CSS px) — the project's mobile minimum, integer zoom should land at 7×.
• Standard mobile (414 × 896 CSS px, iPhone 11) — expected integer zoom is 8×.
• Desktop (any width ≥ 1024) — expected integer zoom in the 12×–13× range.

Verification checklist:

• Native 48 × 80 grid letterboxes cleanly with no fractional-pixel artifacts on each device class.
• All HUD buttons (Shop / Fusion / Bestiary) have effective hit-targets ≥ 44 × 44 CSS px even at the lowest supported integer zoom (7×).
• Tap-on-creature dispatches reliably on touch (not just mouse); the happy-hop and nameplate appear correctly.
• Top HUD currency balance is readable at all integer zooms.
• Bestiary overlay scrolls smoothly with no scroll-conflict against system gestures.
• Closing and reopening the page preserves: owned creatures, tap counts, achievements, and reads the live cross-game currency balance from the economy service.
• Audio starts muted; tap to enable works (per CLAUDE.md mobile rule).
• No layout breakage in landscape orientation (game letterboxes; play surface stays portrait-ish).

End-to-end smoke flow on each device:

1. Open Keimgarten — verify Keim is wandering.
2. Tap Keim — happy-hop + nameplate.
3. Open Shop — verify all 5 size buttons render and the disabled state is visible (force balance to 0 via dev tools or play other games to drain it).
4. Buy a size-2 with seeded currency — verify a new creature appears and balance decrements.
5. Save and reload — state survives.
6. Trigger a fusion (with a size-1 + size-5 owned, target 6) — verify the Titan appears and inputs are consumed.
7. Open Bestiary overlay — verify owned/locked counts; scroll through all 9 tiers.

Acceptance criteria

• All checklist items above pass on iPhone SE class (375×667), standard mobile (414×896), and a desktop viewport.
• The end-to-end smoke flow completes successfully on each device class.
• Daniel posts a sign-off comment on this issue once mobile QA passes.
• If any item fails, file a follow-up issue (do NOT close this one until everything passes).

Blocked by

• chore: franchise tier metadata extension #32 (chore: franchise tier metadata extension)
• keimgarten: minimal vertical — starter Keim wanders end-to-end #33 (keimgarten: minimal vertical — starter Keim wanders end-to-end)
• keimgarten: tap-to-greet (hop + nameplate + tap counter) #34 (keimgarten: tap-to-greet)
• keimgarten: bestiary overlay (167-slot vertical-scrollable view) #35 (keimgarten: bestiary overlay)
• keimgarten: currency yield (formula + economy integration) #36 (keimgarten: currency yield)
• keimgarten: shop end-to-end (5 sizes, RNG draw, currency deduction) #37 (keimgarten: shop end-to-end)
• keimgarten: fusion to size 6 (free, establishes architecture) #38 (keimgarten: fusion to size 6)
• keimgarten: fusion costs for sizes 7-9 (escalating gates) #39 (keimgarten: fusion costs for sizes 7-9)
• keimgarten: achievements wiring (first-fusion / first-archon / vollkommen) #40 (keimgarten: achievements wiring)