Update index.html to use fixed positioning and flexbox for viewer element

node/server/public/index.html

@@ -13,15 +13,37 @@
   }
   </script>
   <style>
-    #viewer {
+    html, body {
-      position: absolute; top:50%; left:50%;
+      width: 100vw;
-      transform: translate(-50%,-50%);
+      height: 100vh;
-      width:1200px; height:800px;
+      margin: 0; padding: 0;
-      max-width:100%; max-height:100%;
+      overflow: hidden;
-      background:#000; border-radius:15px; overflow:hidden;
+      background: #000;
+    }
+    #viewer {
+      position: fixed; /* fills window, always on top */
+      inset: 0;
+      width: 100vw;
+      height: 100vh;
+      background: #000;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1;
+    }
+    canvas {
+      display: block;
+      width: 100vw;  /* so that Three.js resizing works right */
+      height: 100vh;
+      max-width: none;
+      max-height: none;
+      pointer-events: auto;
+    }
+    /* Optional: Overlay z-index */
+    #spirit-info {
+      z-index: 10;
     }
-    canvas { display:block; }
-    body { margin:0; overflow:hidden; background:#000; }
   </style>
 </head>
 <body>