Update index.html

index.html

@@ -281,12 +281,15 @@
             </div>
         </section>
 
+
+        
         <style>
+            /* --- GESTIONE IFRAME GAME --- */
             .game-zoom-container {
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
-                /* BLOCCO TOTALE DEI GESTI SUL CONTENITORE */
+                /* Blocca zoom e gesti touch sul contenitore */
                 touch-action: none; 
                 -ms-touch-action: none;
                 user-select: none;
@@ -294,19 +297,21 @@
             }
             
             .game-zoom-frame {
+                border: none;
+                /* DEFAULT (PC/Tablet orizzontale): */
+                /* Riempie semplicemente il box 11:9 che abbiamo impostato nell'HTML */
                 width: 100%;
                 height: 100%;
-                border: none;
-                /* BLOCCO GESTI SULL'IFRAME */
                 touch-action: none;
             }
 
+            /* --- SOLO MOBILE VERTICALE (Smartphone) --- */
+            /* Qui manteniamo il tuo zoom out perché gli schermi sono stretti */
             @media (max-width: 768px) {
-                /* MODIFICA ZOOM: Rimpicciolito ancora del 20% circa */
                 .game-zoom-frame {
-                    width: 182%;            /* Più è alto questo numero, più "mondo" vedi */
+                    width: 182%;       /* Allarga la vista */
                     height: 182%;
-                    transform: scale(0.55); /* Più è basso questo, più "lontano" vedi */
+                    transform: scale(0.55); /* Rimpicciolisce tutto per farlo stare nel box */
                     transform-origin: top left;
                 }
             }
@@ -324,8 +329,7 @@
                     </p>
                 </div>
 
-                <div id="game-monitor" class="relative w-full aspect-[3/4] md:aspect-[14/9] rounded-xl overflow-hidden border-2 border-[#00ff41] shadow-[0_0_40px_rgba(0,255,65,0.15)] bg-black group transition-all hover:shadow-[0_0_60px_rgba(0,255,65,0.25)] mx-auto max-w-sm md:max-w-4xl">
-                    
+                <div id="game-monitor" class="relative w-full aspect-[3/4] md:aspect-[11/9] rounded-xl overflow-hidden border-2 border-[#00ff41] shadow-[0_0_40px_rgba(0,255,65,0.15)] bg-black group transition-all hover:shadow-[0_0_60px_rgba(0,255,65,0.25)] mx-auto max-w-sm md:max-w-4xl">    
                     <div class="absolute top-0 left-0 w-full h-8 bg-[#0a0a0a] border-b border-[#00ff41]/50 flex items-center justify-between px-4 z-20 select-none pointer-events-none">
                         <div class="flex items-center gap-2">
                             <div class="w-2 h-2 rounded-full bg-[#00ff41] animate-pulse"></div>
@@ -380,6 +384,29 @@
                 
                 iframe.contentWindow.focus();
             }
+            // --- FIX DOPPIO TAP ZOOM ---
+            document.addEventListener('DOMContentLoaded', () => {
+                const gameContainer = document.querySelector('.game-zoom-container');
+                let lastTouchEnd = 0;
+
+                if (gameContainer) {
+                    // 1. Previeni doppio tap veloce (zoom)
+                    gameContainer.addEventListener('touchend', function (event) {
+                        const now = (new Date()).getTime();
+                        if (now - lastTouchEnd <= 300) {
+                            event.preventDefault();
+                        }
+                        lastTouchEnd = now;
+                    }, false);
+
+                    // 2. Previeni pinch-to-zoom manuale
+                    gameContainer.addEventListener('touchmove', function (event) {
+                        if (event.scale && event.scale !== 1) { 
+                            event.preventDefault(); 
+                        }
+                    }, { passive: false });
+                }
+            });
         </script>        
 
         <!-- UNLOCK AR LAYER -->