Improve Lighthouse LCP and accessibility scores (#23)

Preload the LCP image (install.webp) from the HTML and add
fetchpriority="high" so the browser discovers it before JS executes.
Use a <main> landmark for the primary content container to satisfy
the "document has a main landmark" accessibility audit.

Author: foxtacles

index.html

@@ -27,6 +27,7 @@
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/png" href="favicon.png">
     <link rel="canonical" href="https://isle.pizza">
+    <link rel="preload" as="image" href="/images/install.webp" fetchpriority="high">
     <style>
         body { margin: 0; background-color: #000000; }
         #app:empty { visibility: hidden; }

src/App.svelte

@@ -126,7 +126,7 @@
 <UpdatePopup />
 <ConfigToast />
 
-<div id="main-container">
+<main id="main-container">
     <div class="page-wrapper" class:active={$currentPage === 'main'}>
         <TopContent />
         <Controls />
@@ -156,7 +156,7 @@
             <p><strong>DEVELOPMENT MODE</strong></p>
         {/if}
     </div>
-</div>
+</main>
 
 <CanvasWrapper />
 

src/lib/TopContent.svelte

@@ -68,7 +68,7 @@
 
 <div id="top-content">
     <div class="video-container">
-        <img id="install-video" width="260" height="260" src="images/install.webp" alt="Install Game">
+        <img id="install-video" width="300" height="300" fetchpriority="high" src="images/install.webp" alt="Install Game">
         <span
             id="sound-toggle-emoji"
             title={$soundEnabled ? 'Pause Audio' : 'Play Audio'}