Compact welcome screen for landscape phones and clear heatmap on logo click

Welcome screen: reduce padding, font sizes, and margins in the landscape
phone breakpoint so content fits without clipping on short viewports
(e.g. phone with browser chrome eating vertical space).

Logo click: clear heatmap and answered-question dots when returning to
welcome screen so the particle canvas isn't obscured by stale visuals.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jeremymanning

index.html

@@ -903,6 +903,13 @@
         /* ── Landscape phone: short viewport, wide screen ── */
         @media (max-height: 500px) and (orientation: landscape) {
             :root { --header-height: 44px; }
+
+            /* Compact welcome screen for short landscape viewports */
+            #landing { padding: 0.5rem 1rem; overflow-y: auto; }
+            .landing-content h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
+            .landing-content h2 { font-size: 0.8rem; margin-bottom: 0.5rem; }
+            .landing-content p { font-size: 0.75rem; line-height: 1.3; margin-bottom: 0.4rem; }
+            .landing-start-btn { margin-top: 0.5rem; padding: 0.5rem 1.5rem; font-size: 0.9rem; }
             #minimap-container {
                 width: 160px; height: 120px;
                 bottom: 12px; left: 12px;

src/app.js

@@ -250,6 +250,9 @@ async function boot() {
         if (toggleBtn) toggleBtn.setAttribute('hidden', '');
         const videoToggleBtn = document.getElementById('video-toggle');
         if (videoToggleBtn) videoToggleBtn.setAttribute('hidden', '');
+        // Clear visual layers so the welcome screen particle canvas isn't obscured
+        renderer.setHeatmap([], GLOBAL_REGION);
+        renderer.setAnsweredQuestions([]);
         const landing = document.getElementById('landing');
         if (landing) landing.classList.remove('hidden');
         if (appEl) appEl.dataset.screen = 'welcome';