Update index.html

index.html

@@ -328,19 +328,45 @@
             </div>
         </section>
 
-<section class="px-6 py-24 relative z-10 bg-black/40 backdrop-blur-sm border-t border-[#333]">
+<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. */
+            .game-zoom-container {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            .game-zoom-frame {
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+
+            @media (max-width: 768px) {
+                .game-zoom-frame {
+                    width: 142%;        /* 100% * 1.42 */
+                    height: 142%;       /* Mantiene le proporzioni */
+                    transform: scale(0.7); /* Rimpicciolisce tutto per farlo stare */
+                    transform-origin: top left;
+                }
+            }
+        </style>
+
+        <section class="px-6 py-24 relative z-10 bg-black/40 backdrop-blur-sm border-t border-[#333]">
             <div class="max-w-5xl mx-auto reveal-on-scroll">
                 
-                <div class="text-center mb-8 md:mb-12">
+                <div class="text-center mb-8">
                     <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4">
-                        Innovation <span class="text-[#00ff41]">Run</span>
+                        System <span class="text-[#00ff41]">Override</span>
                     </h2>
                     <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
-                        // <span class="text-[#00ff41]">Mission:</span> Crea un PoC visionario omnichannel
+                        // Mobile Detected. <br>
+                        // <span class="text-[#00ff41]">Mission:</span> TAP per saltare. Evita i Silos.
                     </p>
                 </div>
 
-                <div id="game-monitor" class="relative w-full aspect-square 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)]">
+                <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 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">
@@ -354,31 +380,33 @@
                         <div class="w-16 h-16 rounded-full border-2 border-[#00ff41] flex items-center justify-center mb-4 animate-pulse shadow-[0_0_20px_#00ff41]">
                             <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">
-                            TAP TO INITIALIZE
+                        <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>
                         </p>
                     </div>
 
-                    <iframe 
-                        id="game-iframe"
-                        src="./play.html" 
-                        class="w-full h-full pt-8 bg-black" 
-                        frameborder="0" 
-                        scrolling="no"
-                        loading="lazy"
-                        style="touch-action: none;" 
-                        title="Innovation Run Game">
-                    </iframe>
+                    <div class="game-zoom-container pt-8 bg-black">
+                        <iframe 
+                            id="game-iframe"
+                            src="./play.html" 
+                            class="game-zoom-frame"
+                            scrolling="no"
+                            loading="lazy"
+                            style="touch-action: none;" 
+                            title="Innovation Run Game">
+                        </iframe>
+                    </div>
 
                     <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">
+                <div class="mt-4 flex justify-between items-center px-2 max-w-sm md:max-w-full mx-auto">
                     <p class="text-[10px] text-[#00ff41]/50 font-mono">
-                        [VERTICAL MODE OPTIMIZED]
+                        [12:16 MODE ACTIVE]
                     </p>
                     <div class="flex gap-4 text-[10px] text-[#00ff41]/50 font-mono">
-                        <span>INPUT: TAP SCREEN</span>
+                        <span>INPUT: TAP</span>
                         <span>STATUS: READY</span>
                     </div>
                 </div>
@@ -390,10 +418,11 @@
             function activateGame() {
                 const overlay = document.getElementById('game-overlay');
                 const iframe = document.getElementById('game-iframe');
+                
                 overlay.style.opacity = '0';
                 setTimeout(() => overlay.style.display = 'none', 500);
+                
                 iframe.contentWindow.focus();
-                console.log("Game Activated: Focus transferred");
             }
         </script>