@sailingrotevista/rotevista-dash 1.0.24 → 1.0.26

package/app.js

@@ -42,7 +42,7 @@ let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
 
-// Gestione Focus e Interazioni
+// Gestione Interazioni (Long Press, Focus, Ghost Clicks)
 let pressTimer, isFocusActive = false, blockNextClick = false;
 
 // Modalità Scale (Standard/Hercules) salvate nel browser
@@ -54,8 +54,7 @@ const graphModes = {
 };
 
 const store = {
-    raw: {},
-    timestamps: {},
+    raw: {}, timestamps: {},
     smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     longBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     histories: { stw: [], sog: [], depth: [], tws: [] },
@@ -76,7 +75,7 @@ const ui = {
 };
 
 // ==========================================================================
-// 3. CARICAMENTO CONFIGURAZIONE DAL SERVER
+// 3. COMUNICAZIONE CON IL SERVER (FETCH CONFIG)
 // ==========================================================================
 async function fetchServerConfig() {
     if (!window.location.protocol.includes("http")) return;
@@ -90,6 +89,7 @@ async function fetchServerConfig() {
                 const data = await response.json();
                 const actual = data.configuration || data;
                 if (actual && typeof actual === 'object') {
+                    // Normalizzazione dati (conversione stringhe -> numeri)
                     const parseNumbers = (obj) => {
                         for (let k in obj) {
                             if (typeof obj[k] === 'object') parseNumbers(obj[k]);
@@ -97,6 +97,7 @@ async function fetchServerConfig() {
                         }
                     };
                     parseNumbers(actual);
+                    // Merge nel sistema locale
                     if (actual.alarms) CONFIG.alarms = { ...CONFIG.alarms, ...actual.alarms };
                     if (actual.graphs) CONFIG.graphs = { ...CONFIG.graphs, ...actual.graphs };
                     if (actual.averaging) CONFIG.averages = { ...CONFIG.averages, ...actual.averaging };
@@ -120,7 +121,7 @@ function msToKts(ms) { return ms * 1.94384; }
 function ktsToMs(kts) { return kts / 1.94384; }
 function getShortestRotation(curr, target) { let diff = (target - curr) % 360; if (diff > 180) diff -= 360; else if (diff < -180) diff += 360; return curr + diff; }
 
-// Calcolo media circolare vettoriale con rilevamento stabilità
+// Calcolo media circolare vettoriale
 function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
     const now = Date.now();
     const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
@@ -141,7 +142,7 @@ function processIncomingData(path, val) {
     if (path === "environment.wind.angleApparent") { store.smoothBuf.awa.push({ val: val, time: now }); store.longBuf.awa.push({ val: val, time: now }); }
     if (path === "environment.wind.angleTrueWater") { store.smoothBuf.twa.push({ val: val, time: now }); store.longBuf.twa.push({ val: val, time: now }); }
     
-    // Calcolo TWD (True Wind Direction)
+    // Calcolo TWD (Vento Reale Direzione Geografica)
     if (path === "navigation.headingTrue" || path === "environment.wind.angleTrueWater" || path === "environment.wind.directionTrue") {
         let twdRad = 0;
         if (path === "environment.wind.directionTrue") twdRad = val;
@@ -160,21 +161,25 @@ function processIncomingData(path, val) {
 function startDisplayLoop() {
     renderInterval = setInterval(() => {
         const now = Date.now();
+
+        // 5.1 Watchdog
         const pathsToWatch = { "navigation.speedThroughWater": ui.stw, "navigation.speedOverGround": ui.sog, "navigation.headingTrue": ui.hdg, "navigation.courseOverGroundTrue": ui.cog, "environment.wind.speedApparent": ui.awsSvg, "environment.depth.belowTransducer": ui.depth, "environment.wind.speedTrue": ui.tws };
         for (let p in pathsToWatch) { if (!store.timestamps[p] || (now - store.timestamps[p] > TIMEOUT_MS)) { pathsToWatch[p][pathsToWatch[p] === ui.awsSvg ? 'textContent' : 'innerText'] = "---"; delete store.raw[p]; } }
 
+        // 5.2 Renders Istantanei
         if (store.raw["navigation.speedThroughWater"] !== undefined) { const v = msToKts(store.raw["navigation.speedThroughWater"]); ui.stw.innerText = v.toFixed(1); manageHistory('stw', v); }
         let curSog = 0; if (store.raw["navigation.speedOverGround"] !== undefined) { curSog = msToKts(store.raw["navigation.speedOverGround"]); ui.sog.innerText = curSog.toFixed(1); manageHistory('sog', curSog); }
         if (store.raw["environment.depth.belowTransducer"] !== undefined) { const d = store.raw["environment.depth.belowTransducer"]; ui.depth.innerText = d.toFixed(1); checkDepthAlarm(d); manageHistory('depth', d); }
         if (store.raw["environment.wind.speedTrue"] !== undefined) { const w = msToKts(store.raw["environment.wind.speedTrue"]); ui.tws.innerText = w.toFixed(1); manageHistory('tws', w); }
         if (store.raw["environment.wind.speedApparent"] !== undefined) ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
 
+        // 5.3 Render Quadrante (2s smoothing)
         const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, CONFIG.averages.smoothWindow, true);
         if (smAwa) { curAwaRot = getShortestRotation(curAwaRot, smAwa.val); ui.awa.setAttribute('transform', `rotate(${curAwaRot}, 200, 200)`); }
         const smTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, CONFIG.averages.smoothWindow, true);
         if (smTwa) { curTwaRot = getShortestRotation(curTwaRot, smTwa.val); ui.twa.setAttribute('transform', `rotate(${curTwaRot}, 200, 200)`); }
 
-        // Calcolo Drift Reale (COG-HDG)
+        // Drift Reale (COG-HDG)
         if (store.raw["navigation.courseOverGroundTrue"] && store.raw["navigation.headingTrue"]) {
             let drift = (radToDeg(store.raw["navigation.courseOverGroundTrue"]) - radToDeg(store.raw["navigation.headingTrue"]) + 360) % 360;
             if (curSog < CONFIG.averages.minSpeed) drift = 0;
@@ -182,6 +187,7 @@ function startDisplayLoop() {
             let ds = drift > 180 ? drift - 360 : drift; updateLeewayDisplay(Math.max(-20, Math.min(20, ds)));
         } else updateLeewayDisplay(0);
 
+        // 5.4 Render Medie Lunghe (Ogni 3s)
         if (now - lastAvgUIUpdate > 3000) {
             let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, CONFIG.averages.longWindow, false),
                 cObj = getCircularAverageFromBuffer(store.longBuf.cog, CONFIG.averages.longWindow, false),
@@ -198,9 +204,9 @@ function startDisplayLoop() {
             };
             upUI(ui.hdg, hObj); upUI(ui.cog, cObj); upUI(ui.awaAvg, awObj); upUI(ui.twaAvg, twObj); upUI(ui.twdAvg, twdObj);
             
+            // TACK
             if (hObj && twObj && hObj.val !== null) {
-                let tA = twObj.val * 2;
-                ui.tackHdg.innerHTML = `${Math.round((hObj.val - tA + 360) % 360).toString().padStart(3, '0')}&deg;`;
+                let tA = twObj.val * 2; ui.tackHdg.innerHTML = `${Math.round((hObj.val - tA + 360) % 360).toString().padStart(3, '0')}&deg;`;
                 if (cObj) ui.tackCog.innerHTML = `${Math.round((cObj.val - tA + 360) % 360).toString().padStart(3, '0')}&deg;`;
                 let tStable = (hObj.stable && twObj.stable) || (curSog < CONFIG.averages.minSpeed);
                 if (tStable) { ui.tackHdg.classList.remove('unstable-data'); ui.tackCog.classList.remove('unstable-data'); }
@@ -215,7 +221,7 @@ function startDisplayLoop() {
 }
 
 // ==========================================================================
-// 6. CONNESSIONE SIGNALK
+// 6. CONNESSIONE SIGNALK (subscribe=self)
 // ==========================================================================
 function connect() {
     if (simulationMode) return;
@@ -248,11 +254,8 @@ function calculateScale(type, data, mode) {
     const s = CONFIG.scales[type] || { stdMax: 12, hercSpan: 4, step: 2 };
     let aMin = Math.min(...data), aMax = Math.max(...data);
     if (mode === 'hercules') {
-        let avg = (aMin + aMax) / 2;
-        let span = Math.max(s.hercSpan, Math.ceil(aMax - aMin));
-        if (span % 2 !== 0) span += 1;
-        let min = Math.max(0, Math.floor(avg - (span / 2)));
-        return { min, max: min + span };
+        let avg = (aMin + aMax) / 2; let span = Math.max(s.hercSpan, Math.ceil(aMax - aMin)); if (span % 2 !== 0) span += 1;
+        let min = Math.max(0, Math.floor(avg - (span / 2))); return { min, max: min + span };
     } else return { min: 0, max: Math.max(s.stdMax, Math.ceil(aMax / s.step) * s.step) };
 }
 
@@ -272,77 +275,60 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
         if (isTws && i > 0) {
             const px = ((i-1)/(CONFIG.graphs.samples-1))*w, py = h-(Math.max(0,Math.min(1,(d[i-1]-min)/range))*h);
             let c = "#f1c40f"; if (v >= CONFIG.graphs.reef2) c = "#e74c3c"; else if (v >= CONFIG.graphs.reef1) c = "#e67e22";
-            cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" stroke-width="${isHercules?3:2}" class="${isHercules?'line-hercules':''}" />`;
+            cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" class="${isHercules?'line-hercules':''}" />`;
         }
     });
     const aP = pD + ` L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z`, clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#f1c40f' };
-    svg.innerHTML = isTws ? `${grids}<path d="${aP}" fill="rgba(241,196,15,0.12)" stroke="none" />${cS}` : `${grids}<path d="${aP}" fill="${clrs[id]}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${clrs[id]}" stroke-width="1.5" />`;
+    svg.innerHTML = isTws ? `${grids}<path d="${aP}" fill="rgba(241,196,15,0.12)" stroke="none" />${cS}` : `${grids}<path d="${aP}" fill="${clrs[id]}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${clrs[id]}" />`;
 }
 
 // ==========================================================================
-// 8. EVENTI, INTERAZIONI E FOCUS MODE
+// 8. EVENTI E INTERAZIONI (Touch, Focus e Fullscreen)
 // ==========================================================================
 
+// Blocco globale del menu contestuale per Android/iOS
+window.addEventListener('contextmenu', e => e.preventDefault());
+
 function toggleFocusMode(type, element) {
     const container = document.querySelector('.main-container');
     const parentPanel = element.closest('.side-panel');
     const isLeft = parentPanel.classList.contains('left-panel');
-
     isFocusActive = !isFocusActive;
-
-    if (isFocusActive) {
-        container.classList.add('focus-active');
-        container.classList.add(isLeft ? 'focus-side-left' : 'focus-side-right');
-        parentPanel.classList.add('has-focus');
-        element.classList.add('is-focused');
-        blockNextClick = true; // Impedisce al click di rilascio del tocco lungo di chiudere subito
-    } else {
-        container.classList.remove('focus-active', 'focus-side-left', 'focus-side-right');
-        document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('has-focus'));
-        document.querySelectorAll('.data-box').forEach(b => b.classList.remove('is-focused'));
-    }
+    if (isFocusActive) { container.classList.add('focus-active'); container.classList.add(isLeft ? 'focus-side-left' : 'focus-side-right'); parentPanel.classList.add('has-focus'); element.classList.add('is-focused'); blockNextClick = true; }
+    else { container.classList.remove('focus-active', 'focus-side-left', 'focus-side-right'); document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('has-focus')); document.querySelectorAll('.data-box').forEach(b => b.classList.remove('is-focused')); }
 }
 
 ['stw', 'sog', 'tws', 'depth'].forEach(type => {
     const el = document.getElementById(type + '-graph').closest('.data-box');
     
-    // Doppio Click -> Toggle Hercules Zoom
-    el.addEventListener('dblclick', (e) => {
-        if (isFocusActive) return;
-        e.preventDefault();
-        graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard';
-        localStorage.setItem('mode_' + type, graphModes[type]);
-        el.style.backgroundColor = "rgba(255,255,255,0.15)"; setTimeout(() => el.style.backgroundColor = "", 200);
-    });
+    // Doppio Click -> Hercules Zoom
+    el.addEventListener('dblclick', (e) => { if (isFocusActive) return; e.preventDefault(); graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard'; localStorage.setItem('mode_' + type, graphModes[type]); el.style.backgroundColor = "rgba(255,255,255,0.15)"; setTimeout(() => el.style.backgroundColor = "", 200); });
     
-    // Gestione Pressione Prolungata (1s) -> Tactical Focus
+    // Long Press -> Tactical Focus
     const startPress = () => { if (!isFocusActive) pressTimer = setTimeout(() => toggleFocusMode(type, el), 1000); };
     const cancelPress = () => { clearTimeout(pressTimer); };
     el.addEventListener('mousedown', startPress); el.addEventListener('touchstart', startPress, {passive: true});
-    ['mouseup', 'mouseleave', 'touchend'].forEach(evt => el.addEventListener(evt, cancelPress));
+    ['mouseup', 'mouseleave', 'touchend', 'touchcancel'].forEach(evt => el.addEventListener(evt, cancelPress));
     
-    // Click per uscire o per catturare il rilascio del tocco lungo
-    el.addEventListener('click', (e) => {
-        if (blockNextClick) { blockNextClick = false; return; }
-        if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el);
-    });
+    // Click -> Exit Focus o Ghost click filtering
+    el.addEventListener('click', (e) => { if (blockNextClick) { blockNextClick = false; return; } if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); });
 });
 
-// Fullscreen (Hotspot)
+// Fullscreen via Hotspot
 if (ui.hotspot) { ui.hotspot.addEventListener('click', () => { const doc = document.documentElement, isF = document.fullscreenElement || document.webkitFullscreenElement; if (!isF) { if (doc.requestFullscreen) doc.requestFullscreen(); else if (doc.webkitRequestFullscreen) doc.webkitRequestFullscreen(); } else { if (document.exitFullscreen) document.exitFullscreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); } }); }
 
-// Allarmi Audio e Depth
-function checkDepthAlarm(m) { ui.depth.classList.remove('alarm-warning', 'alarm-danger'); if (m < CONFIG.alarms.depthDanger) { ui.depth.classList.add('alarm-danger'); playBingBing(); } else if (m < CONFIG.alarms.depthWarning) ui.depth.classList.add('alarm-warning'); }
-function playBingBing() { if (!audioCtx) return; const n = Date.now(); if (n - lastAlarmTime < 3000) return; lastAlarmTime = n; function b(f, s) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.frequency.value = f; g.gain.setValueAtTime(0.1, s); g.gain.exponentialRampToValueAtTime(0.01, s + 0.4); o.start(s); o.stop(s + 0.5); } b(880, audioCtx.currentTime); b(880, audioCtx.currentTime + 0.6); }
-
 // ==========================================================================
 // 9. INIZIALIZZAZIONE
 // ==========================================================================
-(function generateTicks() { const c = document.getElementById('ticks'); if (c) { for (let i = 0; i < 360; i += 10) { const l = document.createElementNS("http://www.w3.org/2000/svg", "line"); const m = i % 30 === 0; l.setAttribute("x1", "200"); l.setAttribute("y1", "40"); l.setAttribute("x2", "200"); l.setAttribute("y2", (m ? 60 : 50)); l.setAttribute("stroke", m ? "#fff" : "#666"); l.setAttribute("stroke-width", m ? "2" : "1"); l.setAttribute("transform", `rotate(${i}, 200, 200)`); c.appendChild(l); } } })();
+(function genTicks() { const c = document.getElementById('ticks'); if (c) { for (let i = 0; i < 360; i += 10) { const l = document.createElementNS("http://www.w3.org/2000/svg", "line"); const m = i % 30 === 0; l.setAttribute("x1", "200"); l.setAttribute("y1", "40"); l.setAttribute("x2", "200"); l.setAttribute("y2", (m ? 60 : 50)); l.setAttribute("stroke", m ? "#fff" : "#666"); l.setAttribute("stroke-width", m ? "2" : "1"); l.setAttribute("transform", `rotate(${i}, 200, 200)`); c.appendChild(l); } } })();
 
 async function init() { await fetchServerConfig(); startDisplayLoop(); connect(); }
 window.addEventListener('load', init);
 
+// Allarmi e Audio
+function checkDepthAlarm(m) { ui.depth.classList.remove('alarm-warning', 'alarm-danger'); if (m < CONFIG.alarms.depthDanger) { ui.depth.classList.add('alarm-danger'); playBingBing(); } else if (m < CONFIG.alarms.depthWarning) ui.depth.classList.add('alarm-warning'); }
+function playBingBing() { if (!audioCtx) return; const n = Date.now(); if (n - lastAlarmTime < 3000) return; lastAlarmTime = n; function b(f, s) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.frequency.value = f; g.gain.setValueAtTime(0.1, s); g.gain.exponentialRampToValueAtTime(0.01, s + 0.4); o.start(s); o.stop(s + 0.5); } b(880, audioCtx.currentTime); b(880, audioCtx.currentTime + 0.6); }
+
 // Simulatore (Triple click su Depth)
 ui.depth.closest('.data-box').addEventListener('click', (function() {
     let dC = 0, lC = 0; return function() { const n = Date.now(); if (n - lC < 500) dC++; else dC = 1; lC = n; if (dC === 3) { simulationMode = !simulationMode; if (simulationMode) { if (socket) socket.close(); ui.status.innerText = "SIM ATTIVO"; simInterval = setInterval(() => { processIncomingData("navigation.headingTrue", degToRad(Math.random()*360)); processIncomingData("navigation.speedOverGround", ktsToMs(8)); }, 200); } else location.reload(); dC = 0; } };

package/index.html

@@ -16,44 +16,41 @@
     
     <div class="main-container">
         
-        <!-- ======================================================= -->
-        <!-- COLONNA SINISTRA: Dati Rotta e Velocità                 -->
-        <!-- ======================================================= -->
+        <!-- COLONNA SINISTRA: Dati Rotta e Velocità -->
         <div class="side-panel left-panel">
-            
-            <!-- STW: Velocità attraverso l'acqua -->
+            <!-- STW con Sparkline -->
             <div class="data-box">
                 <div class="label-row"><span class="label">STW</span><span class="unit">kts</span></div>
                 <span class="value" id="stw">0.0</span>
                 <div class="graph-wrapper">
                     <svg class="sparkline" id="stw-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
-                    <div class="scale-labels right" id="stw-scale"></div>
+                    <div class="scale-labels" id="stw-scale"></div>
                 </div>
             </div>
 
-            <!-- SOG: Velocità sul fondo (GPS) -->
+            <!-- SOG con Sparkline -->
             <div class="data-box">
                 <div class="label-row"><span class="label">SOG</span><span class="unit">kts</span></div>
                 <span class="value" id="sog">0.0</span>
                 <div class="graph-wrapper">
                     <svg class="sparkline" id="sog-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
-                    <div class="scale-labels right" id="sog-scale"></div>
+                    <div class="scale-labels" id="sog-scale"></div>
                 </div>
             </div>
 
-            <!-- HEADING: Prua Bussola (Media 60s) -->
+            <!-- HEADING MEAN -->
             <div class="data-box">
                 <div class="label-row"><span class="label">HEADING MEAN</span></div>
                 <span class="value value-large" id="hdg">000&deg;</span>
             </div>
 
-            <!-- COG: Rotta sul fondo (Media 60s) -->
+            <!-- COG MEAN -->
             <div class="data-box">
                 <div class="label-row"><span class="label">COG MEAN</span></div>
                 <span class="value value-large" id="cog">000&deg;</span>
             </div>
 
-            <!-- TACK: Calcolo mure opposte (HDG e COG previsti) -->
+            <!-- TACK: Previsione mure opposte -->
             <div class="data-box">
                 <div class="label-row"><span class="label">TACK</span></div>
                 <div class="dual-value-container">
@@ -69,152 +66,107 @@
             </div>
         </div>
 
-        <!-- ======================================================= -->
-        <!-- CENTRO: Strumento Vento SVG (Ingrandito e Ottimizzato)  -->
-        <!-- ======================================================= -->
+        <!-- CENTRO: Strumento Vento SVG -->
         <div class="center-panel">
-            <!-- ViewBox ottimizzato (35 38 330 375) per ingrandire il diametro del quadrante -->
             <svg id="wind-gauge" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet">
                 <defs>
-                    <!-- Gradienti e Maschere -->
                     <linearGradient id="axiom-grad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" /><stop offset="100%" style="stop-color:#888888;stop-opacity:1" /></linearGradient>
                     <linearGradient id="leeway-grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" /><stop offset="25%" style="stop-color:#ff8800;stop-opacity:1" /><stop offset="50%" style="stop-color:#00ff00;stop-opacity:1" /><stop offset="75%" style="stop-color:#ff8800;stop-opacity:1" /><stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" /></linearGradient>
                     <clipPath id="leeway-clip"><rect id="leeway-mask-rect" x="125" y="0" width="0" height="12" rx="2" /></clipPath>
-                    
-                    <!-- Filtro Glow per l'area di interazione centrale -->
-                    <filter id="center-glow" x="-20%" y="-20%" width="140%" height="140%">
-                        <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" />
-                    </filter>
+                    <filter id="center-glow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" /></filter>
                 </defs>
                 
-                <!-- Sfondo circolare del quadrante -->
-                <circle cx="200" cy="200" r="160" fill="#050505" />
-                <circle cx="200" cy="200" r="125" fill="#121212" />
-                
-                <!-- Settori Vento (Rosso/Verde/Arancio) -->
+                <circle cx="200" cy="200" r="160" fill="#050505" /><circle cx="200" cy="200" r="125" fill="#121212" />
                 <path d="M 82.0 101.0 A 154 154 0 0 1 142.3 57.2" fill="none" stroke="#ff0000" stroke-width="12" opacity="1"/>
                 <path d="M 257.7 57.2 A 154 154 0 0 1 318.0 101.0" fill="none" stroke="#00ff00" stroke-width="12" opacity="1"/>
                 <path d="M 265.1 339.6 A 154 154 0 0 1 134.9 339.6" fill="none" stroke="#ff8800" stroke-width="12" opacity="1"/>
                 
-                <!-- Tacche (Generate da Javascript) e Etichette Gradi -->
                 <g id="ticks"></g>
                 <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="hanging" font-family="Arial" font-weight="bold">
-                    <text font-size="16" transform="translate(200, 65)">0</text>
-                    <text font-size="16" transform="translate(335, 200) rotate(90)">90</text>
-                    <text font-size="16" transform="translate(65, 200) rotate(-90)">90</text>
-                    <text font-size="16" transform="translate(200, 335) rotate(180)">180</text>
+                    <text font-size="16" transform="translate(200, 65)">0</text><text font-size="16" transform="translate(335, 200) rotate(90)">90</text><text font-size="16" transform="translate(65, 200) rotate(-90)">90</text><text font-size="16" transform="translate(200, 335) rotate(180)">180</text>
                     <text font-size="11" transform="translate(267.5, 83) rotate(30)">30</text><text font-size="11" transform="translate(317, 132.5) rotate(60)">60</text>
                     <text font-size="11" transform="translate(317, 267.5) rotate(120)">120</text><text font-size="11" transform="translate(267.5, 317) rotate(150)">150</text>
                     <text font-size="11" transform="translate(132.5, 83) rotate(-30)">30</text><text font-size="11" transform="translate(83, 132.5) rotate(-60)">60</text>
                     <text font-size="11" transform="translate(83, 267.5) rotate(-120)">120</text><text font-size="11" transform="translate(132.5, 317) rotate(-150)">150</text>
                 </g>
                 
-                <!-- Puntatore Track (Blu) -->
                 <g id="track-pointer" transform="rotate(0, 200, 200)"><path d="M200,42 L194,58 L206,58 Z" fill="#007aff" stroke="#fff" stroke-width="0.5" /></g>
-                
-                <!-- Pulsante Fullscreen Hotspot (Disco cliccabile al centro) -->
                 <circle id="fullscreen-hotspot" cx="200" cy="200" r="55" fill="#181818" stroke="#333" stroke-width="1" filter="url(#center-glow)" cursor="pointer" />
-                
-                <!-- Icona Barca (Centrata visivamente con traslazione Y+5) -->
                 <path id="boat-icon" d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z" fill="url(#axiom-grad)" transform="translate(0, 5)" style="pointer-events: none;" />
                 
-                <!-- Display Velocità Vento Apparente (Al centro sotto la barca) -->
                 <g id="aws-display-group" transform="translate(200, 265)">
                     <text x="0" y="0" fill="#777" font-size="10" font-weight="bold" text-anchor="middle" text-transform="uppercase">Apparent Wind kts</text>
                     <text id="aws-val-svg" x="0" y="42" fill="#fff" font-size="52" font-weight="bold" text-anchor="middle">0.0</text>
                 </g>
-
-                <!-- Lancette AWA (A) e TWA (T) -->
                 <g id="awa-pointer" transform="rotate(0, 200, 200)" opacity="0.85"><path d="M200,80 L211,95 L200,145 L189,95 Z" fill="#ff8c00" stroke="#000" stroke-width="1" /><text x="200" y="102" fill="#000" font-size="11" font-weight="900" text-anchor="middle" font-family="Arial Black">A</text></g>
                 <g id="twa-pointer" transform="rotate(0, 200, 200)" opacity="0.85"><path d="M200,90 L206,98 L200,125 L194,98 Z" fill="#ffff00" stroke="#000" stroke-width="0.8" /><text x="200" y="104" fill="#000" font-size="8" font-weight="900" text-anchor="middle" font-family="Arial Black">T</text></g>
                 
-                <!-- Barra LEEWAY / DRIFT (Posizionata più in alto a Y=372) -->
                 <g transform="translate(75, 395)">
                     <text x="125" y="-12" id="leeway-val" fill="#aaa" font-size="11" text-anchor="middle" font-weight="bold">LEEWAY: 0.0&deg;</text>
-                    <rect x="0" y="0" width="250" height="12" fill="#222" rx="3" />
-                    <rect x="0" y="0" width="250" height="12" fill="url(#leeway-grad)" clip-path="url(#leeway-clip)" rx="3" />
+                    <rect x="0" y="0" width="250" height="12" fill="#222" rx="3" /><rect x="0" y="0" width="250" height="12" fill="url(#leeway-grad)" clip-path="url(#leeway-clip)" rx="3" />
                     <g stroke="#555" stroke-width="1">
-                        <line x1="0" y1="-2" x2="0" y2="14" /><line x1="31.25" y1="2" x2="31.25" y2="10" /><line x1="62.5" y1="2" x2="62.5" y2="10" />
-                        <line x1="93.75" y1="3" x2="93.75" y2="9" /><line x1="125" y1="-2" x2="125" y2="14" /><line x1="156.25" y1="3" x2="156.25" y2="9" />
-                        <line x1="187.5" y1="2" x2="187.5" y2="10" /><line x1="218.75" y1="2" x2="218.75" y2="10" /><line x1="250" y1="-2" x2="250" y2="14" />
-                    </g>
-                    <g fill="#555" font-size="8" text-anchor="middle" font-weight="bold">
-                        <text x="0" y="24">-20&deg;</text><text x="62.5" y="24">-10</text><text x="125" y="24">0&deg;</text><text x="187.5" y="24">10</text><text x="250" y="24">20&deg;</text>
+                        <line x1="0" y1="-2" x2="0" y2="14" /><line x1="31.25" y1="2" x2="31.25" y2="10" /><line x1="62.5" y1="2" x2="62.5" y2="10" /><line x1="93.75" y1="3" x2="93.75" y2="9" /><line x1="125" y1="-2" x2="125" y2="14" /><line x1="156.25" y1="3" x2="156.25" y2="9" /><line x1="187.5" y1="2" x2="187.5" y2="10" /><line x1="218.75" y1="2" x2="218.75" y2="10" /><line x1="250" y1="-2" x2="250" y2="14" />
                     </g>
+                    <g fill="#555" font-size="8" text-anchor="middle" font-weight="bold"><text x="0" y="24">-20&deg;</text><text x="62.5" y="24">-10</text><text x="125" y="24">0&deg;</text><text x="187.5" y="24">10</text><text x="250" y="24">20&deg;</text></g>
                 </g>
             </svg>
         </div>
 
-        <!-- ======================================================= -->
-        <!-- COLONNA DESTRA: Profondità e Vento Reale                -->
-        <!-- ======================================================= -->
+        <!-- COLONNA DESTRA: Dati Vento e Profondità -->
         <div class="side-panel right-panel">
-            
-            <!-- DEPTH: Profondità sotto il trasduttore -->
+            <!-- DEPTH -->
             <div class="data-box">
                 <div class="label-row"><span class="unit">m</span><span class="label">DEPTH</span></div>
                 <span class="value" id="depth">--.-</span>
                 <div class="graph-wrapper">
-                    <div class="scale-labels left" id="depth-scale"></div>
+                    <div class="scale-labels" id="depth-scale"></div>
                     <svg class="sparkline" id="depth-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
                 </div>
             </div>
 
-            <!-- TWS: Velocità del vento reale -->
+            <!-- TWS -->
             <div class="data-box">
                 <div class="label-row"><span class="unit">kts</span><span class="label">TWS</span></div>
                 <span class="value" id="tws">0.0</span>
                 <div class="graph-wrapper">
-                    <div class="scale-labels left" id="tws-scale"></div>
+                    <div class="scale-labels" id="tws-scale"></div>
                     <svg class="sparkline" id="tws-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
                 </div>
             </div>
 
-            <!-- TWA: Angolo del vento reale (Media 60s) -->
+            <!-- TWA MEAN -->
             <div class="data-box">
                 <div class="label-row"><span class="label">TWA MEAN</span></div>
                 <span class="value value-large" id="twa-avg">---&deg;</span>
             </div>
 
-            <!-- AWA: Angolo del vento apparente (Media 60s) -->
+            <!-- AWA MEAN -->
             <div class="data-box">
                 <div class="label-row"><span class="label">AWA MEAN</span></div>
                 <span class="value value-large" id="awa-avg">---&deg;</span>
             </div>
 
-            <!-- TWD: Direzione reale del vento (Media 60s + Bussola) -->
+            <!-- TWD MEAN con Bussola -->
             <div class="data-box">
                 <div class="label-row"><span class="label">TWD MEAN</span></div>
                 <div class="value-with-compass">
                     <svg class="mini-compass" viewBox="0 0 40 40">
-                        <!-- Sfondo e bordo bussola -->
                         <circle cx="20" cy="20" r="19" fill="#151515" stroke="#444" stroke-width="1.5"/>
-                        
-                        <!-- Etichetta Nord (N) -->
-                        <text x="20" y="8" fill="#e74c3c" font-size="6" text-anchor="middle" font-weight="900" font-family="Arial">N</text>
-                        
-                        <!-- Tacche cardinali (E, S, W) -->
+                        <text x="20" y="8" fill="#e74c3c" font-size="6" text-anchor="middle" font-weight="900">N</text>
                         <g stroke="#555" stroke-width="0.8">
-                            <line x1="20" y1="11" x2="20" y2="13"/> <!-- Nord marker -->
-                            <line x1="30" y1="20" x2="27" y2="20"/> <!-- Est -->
-                            <line x1="20" y1="30" x2="20" y2="27"/> <!-- Sud -->
-                            <line x1="10" y1="20" x2="13" y2="20"/> <!-- Ovest -->
+                            <line x1="20" y1="11" x2="20" y2="13"/><line x1="30" y1="20" x2="27" y2="20"/><line x1="20" y1="30" x2="20" y2="27"/><line x1="10" y1="20" x2="13" y2="20"/>
                         </g>
-                        
-                        <!-- Freccia TWD (Gialla, forma a punta di freccia aeronautica) -->
                         <g id="twd-arrow" transform="rotate(0, 20, 20)">
                             <path d="M20,10 L16,26 L20,23 L24,26 Z" fill="#ffff00" stroke="#000" stroke-width="0.5"/>
                         </g>
-                        
-                        <!-- Perno centrale -->
                         <circle cx="20" cy="20" r="1.5" fill="#555" />
                     </svg>
                     <span class="value value-large" id="twd-avg">---&deg;</span>
                 </div>
             </div>
         </div>
+
     </div>
-    
     <script src="app.js"></script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailingrotevista/rotevista-dash",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Public Wind Dashboard with navigation and course aids",
   "main": "index.js",
   "publishConfig": {

package/style.css

@@ -1,221 +1,102 @@
 /* ==========================================================================
-   1. BASE E STRUTTURA GENERALE (GRID LAYOUT)
+   1. BASE E STRUTTURA GENERALE
    ========================================================================== */
 body {
     background-color: #000;
     color: #fff;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    height: 100vh;
-    width: 100vw;
+    margin: 0; padding: 0;
+    height: 100vh; width: 100vw;
     overflow: hidden;
+    /* BLOCCO TOTALE GESTI DI SISTEMA (Android/iOS) */
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: none;
 }
 
 .main-container {
     display: grid;
-    width: 100%;
-    height: 100%;
-    padding: 5px;
-    box-sizing: border-box;
+    width: 100%; height: 100%;
+    padding: 5px; box-sizing: border-box;
     gap: 8px;
-    /* Proporzioni Desktop Standard */
-    grid-template-columns: 1fr 3.5fr 1fr;
+    grid-template-columns: 1.5fr 3.5fr 1.5fr;
     grid-template-rows: 100%;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Ottimizzazione per schermi molto larghi (es. 16:10, 21:9) */
-@media (min-aspect-ratio: 1.6) {
-    .main-container {
-        grid-template-columns: 1.4fr 3fr 1.4fr;
-        gap: 15px;
-    }
+    transition: all 0.4s ease;
 }
 
 /* ==========================================================================
    2. PANNELLI E DATA-BOX
    ========================================================================== */
-.side-panel {
-    display: flex;
-    flex-direction: column;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 10px;
-    z-index: 10;
-    height: 100%;
-}
-
+.side-panel { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border-radius: 12px; height: 100%; overflow: hidden; }
 .left-panel { grid-column: 1; }
+.center-panel { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden; }
 .right-panel { grid-column: 3; align-items: flex-end; text-align: right; }
 
-.center-panel {
-    grid-column: 2;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    overflow: hidden;
-}
-
 .data-box {
     position: relative;
     border-bottom: 1px solid #222;
-    padding: 8px 10px;
+    padding: 8px 12px;
     display: flex;
     flex-direction: column;
-    width: 100%;
-    box-sizing: border-box;
-    container-type: size; /* Cruciale per il calcolo cqh */
+    width: 100%; box-sizing: border-box;
+    container-type: size;
     flex: 1;
+    overflow: hidden;
 }
 
-/* Definizione altezze percentuali basate sul Viewport */
+/* Altezze Desktop */
 .data-box:nth-child(1), .data-box:nth-child(2) { height: 25vh; }
 .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 16.666vh; }
 
 /* ==========================================================================
-   3. TACTICAL FOCUS MODE (50/50 SPLIT)
+   3. TACTICAL FOCUS MODE (ORIZZONTALE)
    ========================================================================== */
 .focus-active { grid-template-columns: 1fr 1fr !important; }
 .focus-active .side-panel:not(.has-focus) { display: none !important; }
 
-.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1; }
-.focus-active.focus-side-left .center-panel { grid-column: 2; }
-.focus-active.focus-side-right .center-panel { grid-column: 1; }
-.focus-active.focus-side-right .side-panel.has-focus { grid-column: 2; }
+/* Simmetria Orizzontale */
+.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
+.focus-active.focus-side-left .center-panel { grid-column: 2 !important; }
+.focus-active.focus-side-right .center-panel { grid-column: 1 !important; }
+.focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
 
 .focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
-.focus-active .has-focus .data-box.is-focused { height: 100vh !important; border: none; background: rgba(255, 255, 255, 0.04); }
+.focus-active .has-focus .data-box.is-focused { height: 100vh !important; border: none; background: rgba(255, 255, 255, 0.05); }
 
+/* Tipografia e Grafica in Focus */
 .focus-active .is-focused .value { font-size: clamp(3rem, 18cqh, 8rem) !important; margin-top: 10px; }
-.focus-active .is-focused .scale-labels { font-size: 22px !important; min-width: 35px !important; }
-
-/* Bussola Esplosa in Focus Mode */
-.focus-active .is-focused .mini-compass {
-    width: 45vh !important;
-    height: 45vh !important;
-}
-
+.focus-active .is-focused .scale-labels { font-size: 22px !important; min-width: 40px !important; }
 .focus-active .is-focused .sparkline path { stroke-width: 0.8px !important; }
-.focus-active .is-focused .line-hercules { stroke-width: 1.2px !important; filter: drop-shadow(0 0 3px #ff0000); }
 
 /* ==========================================================================
-   4. TIPOGRAFIA DINAMICA (ELASTICA CQH)
+   4. TIPOGRAFIA DINAMICA (CQH)
    ========================================================================== */
 .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
-.label { color: #666; font-size: 0.6rem; font-weight: bold; text-transform: uppercase; }
-.unit { color: #888; font-size: 0.55rem; font-weight: bold; }
-
-.value {
-    color: #fff;
-    font-size: clamp(1.2rem, 22cqh, 3rem);
-    font-weight: 600;
-    line-height: 0.9;
-    letter-spacing: -1px;
-    transition: color 0.3s ease;
-    padding-bottom: 5px;
-}
-
-.value-large {
-    margin-top: auto;
-    margin-bottom: auto;
-    font-size: clamp(1.5rem, 35cqh, 4rem);
-    line-height: 0.85;
-}
-
-/* TACK Layout - Centratura verticale e compattezza */
-.dual-value-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    /* La "molla" auto sopra e sotto lo tiene al centro esatto del box */
-    margin-top: auto;
-    margin-bottom: auto;
-    padding-bottom: 5px;
-}
-
-.dual-value-col {
-    display: flex;
-    flex-direction: column;
-    width: 48%;
-    /* Rimosso height 100% per non farlo allungare fino al titolo */
-}
-
-.dual-label {
-    color: #666;
-    font-size: 0.55rem;
-    font-weight: bold;
-    text-transform: uppercase;
-    margin-bottom: 2px; /* Distanza fissa e piccola dal numero sottostante */
-}
-
-.value.dual-val {
-    font-size: clamp(1rem, 22cqh, 1.8rem);
-    padding-bottom: 0;
-    line-height: 0.9;
-}
+.label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
+.unit { color: #888; font-size: 0.6rem; font-weight: bold; }
+.value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; padding-bottom: 5px; }
 
-/* BUSSOLA TWD: Centrata e proporzionata */
-.value-with-compass {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin-top: auto;
-    margin-bottom: auto;
-    gap: 8px;
-}
+.value-large, .dual-value-container, .value-with-compass { margin-top: auto; margin-bottom: auto; }
+.value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
 
-.mini-compass {
-    /* Impostata a 60% dell'altezza come da tua prova */
-    width: clamp(45px, 60cqh, 120px);
-    height: clamp(45px, 60cqh, 120px);
-    background: #000;
-    border-radius: 50%;
-    flex-shrink: 0;
-    border: 1.5px solid #333;
-    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
-    transition: all 0.4s ease;
-}
+.dual-value-container { display: flex; justify-content: space-between; width: 100%; }
+.dual-value-col { display: flex; flex-direction: column; width: 48%; }
+.dual-label { color: #666; font-size: 0.55rem; font-weight: bold; text-transform: uppercase; margin-bottom: 2px; }
+.value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
 
-.value-with-compass .value-large {
-    margin: 0;
-    flex-grow: 1;
-    text-align: right;
-    font-size: clamp(1.2rem, 35cqh, 4rem);
-}
+.value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
+.mini-compass { width: clamp(40px, 60cqh, 120px); height: clamp(40px, 60cqh, 120px); background: #000; border-radius: 50%; flex-shrink: 0; border: 1.5px solid #333; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
+.value-with-compass .value-large { margin: 0; flex-grow: 1; text-align: right; font-size: clamp(1.2rem, 35cqh, 4rem); }
 
 /* ==========================================================================
    5. GRAFICI E SCALE
    ========================================================================== */
-.graph-wrapper {
-    position: relative;
-    width: 100%;
-    flex-grow: 1;
-    min-height: 20px;
-    margin-top: 4px;
-    display: flex;
-    align-items: stretch;
-    gap: 4px;
-}
+.graph-wrapper { position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px; display: flex; align-items: stretch; gap: 6px; }
 .sparkline { flex-grow: 1; height: 100%; background: rgba(255, 255, 255, 0.03); border-radius: 4px; }
-.sparkline path { stroke-width: 1px !important; }
-
-.scale-labels {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    font-size: 10px;
-    color: #666;
-    font-weight: bold;
-    min-width: 16px;
-    height: 100%;
-    line-height: 1;
-    transition: all 0.3s ease;
-}
+.sparkline path, .sparkline line { stroke-width: 1px !important; transition: all 0.3s ease; }
 
+.scale-labels { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #777; font-weight: bold; min-width: 20px; height: 100%; line-height: 1; }
 .left-panel .scale-labels { order: 2; text-align: left; }
 .left-panel .sparkline { order: 1; }
 .right-panel .scale-labels { order: 1; text-align: right; }
@@ -226,35 +107,56 @@ body {
 #depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
 #tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.12); }
 
-/* ==========================================================================
-   6. HERCULES E ANIMAZIONI
-   ========================================================================== */
 .line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
-.box-hercules { background: rgba(255, 0, 0, 0.08) !important; transition: all 0.3s ease; }
-.box-hercules::after { content: "HERCULES"; position: absolute; bottom: 4px; right: 35px; font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; opacity: 0.8; }
+.box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
+.box-hercules::after { content: "HERCULES"; position: absolute; bottom: 4px; right: 35px; font-size: 7px; color: #ff4444; font-weight: 900; opacity: 0.8; }
 
+/* ==========================================================================
+   6. STATI E ANIMAZIONI
+   ========================================================================== */
 #status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
 .online { color: #2ecc71; opacity: 0.5; }
 .offline { color: #e74c3c; font-weight: bold; }
-
 #awa-pointer, #twa-pointer, #track-pointer, #twd-arrow { transition: all 0.6s cubic-bezier(0.1, 0.7, 0.1, 1); }
 #leeway-mask-rect { transition: none; }
 .alarm-warning { color: #f1c40f !important; }
 .alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
 @keyframes blink-unstable { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
 .unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
-
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================
-   7. RESPONSIVE (PORTRAIT)
+   7. RESPONSIVE (PORTRAIT) - FIX DEFINITIVO 2x2 E FOCUS
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
-    .main-container { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
-    .center-panel { grid-column: 1 / span 2; grid-row: 1; height: 50vh; }
-    .left-panel { grid-column: 1; grid-row: 2; height: 50vh; }
-    .right-panel { grid-column: 2; grid-row: 2; height: 50vh; }
-    .data-box:nth-child(1), .data-box:nth-child(2) { height: 12.5vh; }
-    .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 8.333vh; }
+    .main-container {
+        grid-template-columns: 1fr 1fr !important;
+        grid-template-rows: 45vh 55vh !important;
+    }
+
+    /* Ordine Standard Portrait: Vento (1), SX (2), DX (3) */
+    .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; }
+    .left-panel { grid-row: 2 !important; grid-column: 1 !important; }
+    .right-panel { grid-row: 2 !important; grid-column: 2 !important; }
+
+    /* FOCUS MODE IN VERTICALE: Abbandoniamo la Grid, usiamo Flex per sicurezza */
+    .main-container.focus-active {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+    .focus-active .center-panel {
+        flex: 0 0 45vh !important;
+        width: 100% !important;
+    }
+    .focus-active .side-panel.has-focus {
+        flex: 0 0 55vh !important;
+        width: 100% !important;
+        display: flex !important;
+    }
+
+    /* Calibrazione altezze box per Portrait */
+    .data-box:nth-child(1), .data-box:nth-child(2) { height: 13.5vh; }
+    .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 9.3vh; }
+
     .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); }
 }