Use 100vh and the viewport-fit toggle for the installed app

Researched it instead of guessing again. Launched from the homescreen, WebKit
resolves the DYNAMIC viewport and every env() inset once against a provisional
geometry and does not revisit them until the geometry is "exercised" — a
rotation. That is the whole bug, and it also explains why listening for a signal
could never fix it: nothing fires, so there is nothing to observe.

Two known workarounds, both applied. Standalone has no toolbars, so 100vh is
correct AND stable from the first frame — dvh only exists for the browser's
disappearing toolbars, so it now applies only there. And toggling viewport-fit
off and back on at boot forces WebKit to recalculate, without the user rotating
anything.

Countdown moved up off the ad boards — the strip's own projected line is its
ceiling now, so it stays in the stands whatever the phone does to the layout,
with a 1px shadow to carry it over the crowd.

Sources: gist.github.com/fozzedout/5e77925381991a9570151550992baf14

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

index.html

@@ -46,6 +46,14 @@
            width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
            height: calc(100vh - env(safe-area-inset-top, 0px));
            height: calc(100dvh - env(safe-area-inset-top, 0px)); }
+  /* ...but NOT installed. Launched from the homescreen, WebKit does not initialise the DYNAMIC
+     viewport until the geometry is "exercised" — 100dvh stays provisional until you rotate the
+     phone, which is exactly the bug. Standalone has no toolbars, so 100vh is both correct and
+     stable from the first frame; dvh only exists for the browser's disappearing toolbars. */
+  @media (display-mode: standalone) {
+    html { height: 100vh; }
+    canvas { height: calc(100vh - env(safe-area-inset-top, 0px)); }
+  }
   /* desktop key hint — up in the empty top-right corner now that the rack owns the bottom edge */
   #hint { position: fixed; top: 6px; right: 10px; text-align: right;
           font: 400 10px Silkscreen, monospace; color: #6b7688; }
@@ -89,6 +97,6 @@
     <p id="build"></p>
   </div>
 </div>
-<script type="module" src="main.js?v=53"></script>
+<script type="module" src="main.js?v=54"></script>
 </body>
 </html>