Update play.html

play.html

@@ -14,18 +14,18 @@
         .scanlines { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)); background-size: 100% 4px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }
         .ui-panel { backdrop-filter: blur(5px); background: rgba(20, 20, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s; }
         
-        .btn { background: var(--neon-green); color: #000; padding: 15px 40px; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); transition: 0.2s; border: none; }
+        /* BTN PIÙ GRANDE */
+        .btn { background: var(--neon-green); color: #000; padding: 20px 50px; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); transition: 0.2s; border: none; }
         .btn:hover { transform: scale(1.05); background: #fff; box-shadow: 0 0 40px rgba(0, 255, 65, 0.6); }
         
         .flow-container { width: 200px; height: 12px; background: #333; border-radius: 6px; overflow: hidden; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 20; border: 2px solid #555; }
         .flow-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ffb700, #00ff41); transition: width 0.1s linear; }
         .flow-text { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: #fff; text-transform: uppercase; font-weight: bold; text-shadow: 0 2px 4px #000; width: 100%; text-align: center; }
         
-        /* MODIFICATO: Animazione più lenta e posizione iniziale spostata */
         .floating-message { 
             position: absolute; 
             font-weight: 800; 
-            font-size: 1.2rem; /* Leggermente più grande */
+            font-size: 1.2rem; 
             text-align: left; 
             pointer-events: none; 
             text-shadow: 2px 2px 0px #000; 
@@ -75,42 +75,46 @@
     <div class="flow-container"><div id="flow-bar" class="flow-bar"></div></div>
 
     <div id="start-screen" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 30; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); padding: 1rem;">
-        <h1 id="title-main" style="font-size: 3.5rem; font-weight: bold; color: white; margin-bottom: 0.5rem; text-align: center; text-shadow: 0 0 20px #00ff41; line-height: 1.1;"></h1>
-        <h2 id="subtitle-main" style="color: #00ff41; font-size: 1rem; margin-bottom: 2rem; font-weight: bold; text-align: center; max-width: 600px;"></h2>
         
-        <div style="background: #111; border: 1px solid #444; padding: 1.5rem; border-radius: 0.5rem; max-width: 30rem; width: 100%; margin-bottom: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
-            <div style="display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem;">
+        <h1 id="title-main" style="font-size: 5rem; font-weight: bold; color: white; margin-bottom: 0.5rem; text-align: center; text-shadow: 0 0 20px #00ff41; line-height: 1.1;"></h1>
+        
+        <h2 id="subtitle-main" style="color: #00ff41; font-size: 1.5rem; margin-bottom: 2rem; font-weight: bold; text-align: center; max-width: 800px;"></h2>
+        
+        <div style="background: #111; border: 1px solid #444; padding: 2rem; border-radius: 0.5rem; max-width: 40rem; width: 100%; margin-bottom: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
+            <div style="display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.1rem;">
                 <div style="display: flex; align-items: center;">
-                    <span id="icon-legacy" style="font-size: 2rem; margin-right: 0.75rem;"></span>
-                    <div><span id="title-legacy" style="color: #ffb700; font-weight: bold;"></span><p id="desc-legacy" style="color: #999; font-size: 0.75rem; margin: 0;"></p></div>
+                    <span id="icon-legacy" style="font-size: 2.8rem; margin-right: 1rem;"></span>
+                    <div><span id="title-legacy" style="color: #ffb700; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-legacy" style="color: #999; font-size: 1rem; margin: 0;"></p></div>
                 </div>
                 <div style="display: flex; align-items: center;">
-                    <span id="icon-ai" style="font-size: 2rem; margin-right: 0.75rem;"></span>
-                    <div><span id="title-ai" style="color: #00ff41; font-weight: bold;"></span><p id="desc-ai" style="color: #999; font-size: 0.75rem; margin: 0;"></p></div>
+                    <span id="icon-ai" style="font-size: 2.8rem; margin-right: 1rem;"></span>
+                    <div><span id="title-ai" style="color: #00ff41; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-ai" style="color: #999; font-size: 1rem; margin: 0;"></p></div>
                 </div>
                 <div style="display: flex; align-items: center;">
-                    <span id="icon-obs" style="font-size: 2rem; margin-right: 0.75rem;"></span>
-                    <div><span id="title-obs" style="color: #ff0055; font-weight: bold;"></span><p id="desc-obs" style="color: #999; font-size: 0.75rem; margin: 0;"></p></div>
+                    <span id="icon-obs" style="font-size: 2.8rem; margin-right: 1rem;"></span>
+                    <div><span id="title-obs" style="color: #ff0055; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-obs" style="color: #999; font-size: 1rem; margin: 0;"></p></div>
                 </div>
                 <div style="display: flex; align-items: center;">
-                    <span style="font-size: 2rem; margin-right: 0.75rem;">⚡</span>
-                    <div><span id="title-bar" style="color: white; font-weight: bold;"></span><p id="desc-bar" style="color: #999; font-size: 0.75rem; margin: 0;"></p></div>
+                    <span style="font-size: 2.8rem; margin-right: 1rem;">⚡</span>
+                    <div><span id="title-bar" style="color: white; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-bar" style="color: #999; font-size: 1rem; margin: 0;"></p></div>
                 </div>
             </div>
         </div>
 
         <button id="btn-start" class="btn" onclick="initGame()"></button>
-        <p id="controls-hint" style="margin-top: 1rem; font-size: 0.75rem; color: #ccc; animation: pulse 2s infinite;"></p>
+        <p id="controls-hint" style="margin-top: 1.5rem; font-size: 1rem; color: #ccc; animation: pulse 2s infinite; font-weight: bold;"></p>
     </div>
 
     <div id="game-over" class="hidden" style="position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; z-index: 40; background: rgba(0,0,0,0.95);">
-        <h2 id="go-title" style="font-size: 2.5rem; font-weight: bold; color: white; margin-bottom: 1rem; text-align: center;"></h2>
-        <div style="text-align: center; font-size: 0.875rem; color: #ccc; margin-bottom: 2rem; background: #1a1a1a; padding: 1.5rem; border: 1px solid #444; border-radius: 0.5rem; max-width: 24rem; width: 100%;">
-            <p id="go-reason" style="color: #ff0055; font-weight: bold; margin-bottom: 1rem;"></p>
-            <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;"><span>MVP Score:</span><span id="final-score" style="color: #00ff41; font-weight: bold;">0</span></div>
-            <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;"><span>Modernizzazione:</span><span id="final-legacy" style="color: #ffb700; font-weight: bold;">0%</span></div>
-            <hr style="border-color: #444; margin: 1rem 0;">
-            <p id="death-quote" style="font-style: italic; color: #999; font-size: 0.75rem;"></p>
+        
+        <h2 id="go-title" style="font-size: 4.5rem; font-weight: bold; color: white; margin-bottom: 1.5rem; text-align: center;"></h2>
+        
+        <div style="text-align: center; font-size: 1.2rem; color: #ccc; margin-bottom: 2.5rem; background: #1a1a1a; padding: 2.5rem; border: 1px solid #444; border-radius: 0.5rem; max-width: 35rem; width: 100%;">
+            <p id="go-reason" style="color: #ff0055; font-weight: bold; margin-bottom: 1.5rem; font-size: 1.4rem;"></p>
+            <div style="display: flex; justify-content: space-between; margin-bottom: 0.8rem;"><span>MVP Score:</span><span id="final-score" style="color: #00ff41; font-weight: bold;">0</span></div>
+            <div style="display: flex; justify-content: space-between; margin-bottom: 1.5rem;"><span>Modernizzazione:</span><span id="final-legacy" style="color: #ffb700; font-weight: bold;">0%</span></div>
+            <hr style="border-color: #444; margin: 1.5rem 0;">
+            <p id="death-quote" style="font-style: italic; color: #999; font-size: 1rem;"></p>
         </div>
         <button id="btn-restart" class="btn" onclick="initGame()"></button>
     </div>
@@ -280,8 +284,8 @@ const dom = {
 };
 
 function setupUI() {
-    //document.getElementById('title-main').innerText = GAME_CONFIG.TEXTS.TITLE;
-    //document.getElementById('subtitle-main').innerText = GAME_CONFIG.TEXTS.SUBTITLE;
+    document.getElementById('title-main').innerText = GAME_CONFIG.TEXTS.TITLE;
+    document.getElementById('subtitle-main').innerText = GAME_CONFIG.TEXTS.SUBTITLE;
     document.getElementById('lbl-phase').innerText = GAME_CONFIG.TEXTS.LBL_PHASE;
     document.getElementById('lbl-metrics').innerText = GAME_CONFIG.TEXTS.LBL_METRICS;
     document.getElementById('lbl-score').innerText = GAME_CONFIG.TEXTS.LBL_SCORE;