Update index.html

index.html

@@ -328,26 +328,32 @@
             </div>
         </section>
 
-<style>
-            /* Su mobile, forziamo l'iframe a essere il 140% più grande
-               e poi lo scaliamo giù al 71%. 
-               Risultato: Vedi più area di gioco (zoom out) e le scritte non si tagliano. */
+        <style>
             .game-zoom-container {
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
+                /* BLOCCO TOTALE DEI GESTI SUL CONTENITORE */
+                touch-action: none; 
+                -ms-touch-action: none;
+                user-select: none;
+                -webkit-user-select: none;
             }
+            
             .game-zoom-frame {
                 width: 100%;
                 height: 100%;
                 border: none;
+                /* BLOCCO GESTI SULL'IFRAME */
+                touch-action: none;
             }
 
             @media (max-width: 768px) {
+                /* MODIFICA ZOOM: Rimpicciolito ancora del 20% circa */
                 .game-zoom-frame {
-                    width: 142%;        /* 100% * 1.42 */
-                    height: 142%;       /* Mantiene le proporzioni */
-                    transform: scale(0.7); /* Rimpicciolisce tutto per farlo stare */
+                    width: 182%;            /* Più è alto questo numero, più "mondo" vedi */
+                    height: 182%;
+                    transform: scale(0.55); /* Più è basso questo, più "lontano" vedi */
                     transform-origin: top left;
                 }
             }
@@ -362,11 +368,11 @@
                     </h2>
                     <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
                         // Mobile Detected. <br>
-                        // <span class="text-[#00ff41]">Mission:</span> TAP per saltare. Evita i Silos.
+                        // <span class="text-[#00ff41]">Mission:</span> TAP per saltare. Doppio Tap disabilitato.
                     </p>
                 </div>
 
-                <div id="game-monitor" class="relative w-full aspect-[3/4] md:aspect-[21/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-full">
+                <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 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">
@@ -381,8 +387,8 @@
                             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#00ff41" stroke="none"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
                         </div>
                         <p class="text-[#00ff41] font-mono text-xs md:text-sm tracking-widest uppercase font-bold text-center px-4">
-                            TAP TO START<br>
-                            <span class="text-[10px] opacity-70 font-normal normal-case mt-2 block">Audio consigliato on</span>
+                            TAP TO INITIALIZE<br>
+                            <span class="text-[10px] opacity-70 font-normal normal-case mt-2 block">Interfaccia Bloccata per Gaming</span>
                         </p>
                     </div>
 
@@ -393,7 +399,6 @@
                             class="game-zoom-frame"
                             scrolling="no"
                             loading="lazy"
-                            style="touch-action: none;" 
                             title="Innovation Run Game">
                         </iframe>
                     </div>
@@ -401,13 +406,13 @@
                     <div class="absolute inset-0 pointer-events-none z-10 bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.1)_50%),linear-gradient(90deg,rgba(255,0,0,0.03),rgba(0,255,0,0.01),rgba(0,0,255,0.03))] bg-[length:100%_2px,3px_100%] opacity-50"></div>
                 </div>
                 
-                <div class="mt-4 flex justify-between items-center px-2 max-w-sm md:max-w-full mx-auto">
+                <div class="mt-4 flex justify-between items-center px-2 max-w-sm md:max-w-4xl mx-auto">
                     <p class="text-[10px] text-[#00ff41]/50 font-mono">
-                        [12:16 MODE ACTIVE]
+                        [WIDE VIEW ACTIVE]
                     </p>
                     <div class="flex gap-4 text-[10px] text-[#00ff41]/50 font-mono">
                         <span>INPUT: TAP</span>
-                        <span>STATUS: READY</span>
+                        <span>ZOOM: 55%</span>
                     </div>
                 </div>