@sailingrotevista/rotevista-dash 1.0.23 → 1.0.25

package/app.js

@@ -1,5 +1,5 @@
 // ==========================================================================
-// 1. CONFIGURAZIONE E DEFAULT
+// 1. CONFIGURAZIONE E STATO
 // ==========================================================================
 let CONFIG = {
     alarms: { depthDanger: 2.5, depthWarning: 5.0 },
@@ -18,13 +18,11 @@ const RENDER_INTERVAL_MS = 1000;
 const TIMEOUT_MS = 5000;
 const SIM_SAMPLE_INTERVAL = 1000;
 
-// ==========================================================================
-// 2. STATO GLOBALE E UI
-// ==========================================================================
 let simulationMode = false;
 let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
+let pressTimer, isFocusActive = false, blockNextClick = false;
 
 const graphModes = {
     stw: localStorage.getItem('mode_stw') || 'standard',
@@ -49,13 +47,13 @@ const ui = {
 };
 
 // ==========================================================================
-// 3. CARICAMENTO CONFIGURAZIONE
+// 3. LOGICA DI COMUNICAZIONE E CALCOLO
 // ==========================================================================
+
 async function fetchServerConfig() {
     if (!window.location.protocol.includes("http")) return;
     const pluginID = 'rotevista-dash';
     const possibleUrls = [`/skServer/plugins/${pluginID}/config`, `/plugins/${pluginID}/config` ];
-
     for (let url of possibleUrls) {
         try {
             const response = await fetch(url);
@@ -63,28 +61,19 @@ async function fetchServerConfig() {
                 const data = await response.json();
                 const actual = data.configuration || data;
                 if (actual && typeof actual === 'object') {
-                    const parseNumbers = (obj) => {
-                        for (let k in obj) {
-                            if (typeof obj[k] === 'object') parseNumbers(obj[k]);
-                            else if (!isNaN(obj[k]) && obj[k] !== "") obj[k] = parseFloat(obj[k]);
-                        }
-                    };
+                    const parseNumbers = (obj) => { for (let k in obj) { if (typeof obj[k] === 'object') parseNumbers(obj[k]); else if (!isNaN(obj[k]) && obj[k] !== "") obj[k] = parseFloat(obj[k]); } };
                     parseNumbers(actual);
                     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 }; // Mapping averaging -> averages
+                    if (actual.averaging) CONFIG.averages = { ...CONFIG.averages, ...actual.averaging };
                     if (actual.scales) { for (let key in actual.scales) { CONFIG.scales[key] = { ...CONFIG.scales[key], ...actual.scales[key] }; } }
-                    console.log("SUCCESS: Config loaded from Server:", CONFIG);
-                    return;
+                    console.log("Dashboard: Configurazione caricata."); return;
                 }
             }
         } catch (e) { }
     }
 }
 
-// ==========================================================================
-// 4. MATEMATICA VETTORIALE
-// ==========================================================================
 function radToDeg(rad) { return rad * (180 / Math.PI); }
 function degToRad(deg) { return deg * (Math.PI / 180); }
 function msToKts(ms) { return ms * 1.94384; }
@@ -92,43 +81,33 @@ 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; }
 
 function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
-    const now = Date.now();
-    const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
+    const now = Date.now(); const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
     if (validData.length === 0) return null;
-    let sSin = 0, sCos = 0;
-    validData.forEach(item => { sSin += Math.sin(item.val); sCos += Math.cos(item.val); });
+    let sSin = 0, sCos = 0; validData.forEach(item => { sSin += Math.sin(item.val); sCos += Math.cos(item.val); });
     let R = Math.sqrt(sSin * sSin + sCos * sCos) / validData.length;
-    let timeSpan = validData[validData.length - 1].time - validData[0].time;
-    let isStable = (timeSpan >= windowMs - CONFIG.averages.stabilityTolerance) && (R > CONFIG.averages.stabilityThreshold);
+    let isStable = (validData[validData.length - 1].time - validData[0].time >= windowMs - CONFIG.averages.stabilityTolerance) && (R > CONFIG.averages.stabilityThreshold);
     let avgDeg = Math.round(radToDeg(Math.atan2(sSin, sCos)));
     return { val: signed ? avgDeg : (avgDeg + 360) % 360, stable: isStable };
 }
 
-// ==========================================================================
-// 5. GESTIONE DATI IN INGRESSO
-// ==========================================================================
 function processIncomingData(path, val) {
     const now = Date.now(); store.timestamps[path] = now; store.raw[path] = val;
     if (path === "navigation.headingTrue") { store.smoothBuf.hdg.push({ val: val, time: now }); store.longBuf.hdg.push({ val: val, time: now }); }
     if (path === "navigation.courseOverGroundTrue") { store.smoothBuf.cog.push({ val: val, time: now }); store.longBuf.cog.push({ val: val, time: now }); }
     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 }); }
-    
     if (path === "navigation.headingTrue" || path === "environment.wind.angleTrueWater" || path === "environment.wind.directionTrue") {
-        let twdRad = 0;
-        if (path === "environment.wind.directionTrue") twdRad = val;
-        else if (store.raw["navigation.headingTrue"] !== undefined && store.raw["environment.wind.angleTrueWater"] !== undefined) {
-            twdRad = (store.raw["navigation.headingTrue"] + store.raw["environment.wind.angleTrueWater"]) % (2 * Math.PI);
-            if (twdRad < 0) twdRad += (2 * Math.PI);
-        } else return;
-        store.smoothBuf.twd.push({ val: twdRad, time: now });
-        store.longBuf.twd.push({ val: twdRad, time: now });
+        let twdRad = 0; if (path === "environment.wind.directionTrue") twdRad = val;
+        else if (store.raw["navigation.headingTrue"] !== undefined && store.raw["environment.wind.angleTrueWater"] !== undefined) { twdRad = (store.raw["navigation.headingTrue"] + store.raw["environment.wind.angleTrueWater"]) % (2 * Math.PI); if (twdRad < 0) twdRad += (2 * Math.PI); }
+        else return;
+        store.smoothBuf.twd.push({ val: twdRad, time: now }); store.longBuf.twd.push({ val: twdRad, time: now });
     }
 }
 
 // ==========================================================================
-// 6. RENDER LOOP
+// 4. RENDERING LOOP E GRAFICA
 // ==========================================================================
+
 function startDisplayLoop() {
     renderInterval = setInterval(() => {
         const now = Date.now();
@@ -159,23 +138,12 @@ function startDisplayLoop() {
                 awObj = getCircularAverageFromBuffer(store.longBuf.awa, CONFIG.averages.longWindow, true),
                 twObj = getCircularAverageFromBuffer(store.longBuf.twa, CONFIG.averages.longWindow, true),
                 twdObj = getCircularAverageFromBuffer(store.longBuf.twd, CONFIG.averages.longWindow, false);
-
-            const upUI = (el, obj) => {
-                if (!obj) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); }
-                else {
-                    el.innerHTML = `${obj.val.toString().padStart(3, '0')}&deg;`;
-                    if (obj.stable || curSog < CONFIG.averages.minSpeed) el.classList.remove('unstable-data'); else el.classList.add('unstable-data');
-                }
-            };
+            const upUI = (el, obj) => { if (!obj) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); } else { el.innerHTML = `${obj.val.toString().padStart(3, '0')}&deg;`; if (obj.stable || curSog < CONFIG.averages.minSpeed) el.classList.remove('unstable-data'); else el.classList.add('unstable-data'); } };
             upUI(ui.hdg, hObj); upUI(ui.cog, cObj); upUI(ui.awaAvg, awObj); upUI(ui.twaAvg, twObj); upUI(ui.twdAvg, twdObj);
-            
             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'); }
-                else { ui.tackHdg.classList.add('unstable-data'); ui.tackCog.classList.add('unstable-data'); }
+                if (hObj.stable && twObj.stable || curSog < CONFIG.averages.minSpeed) { ui.tackHdg.classList.remove('unstable-data'); ui.tackCog.classList.remove('unstable-data'); } else { ui.tackHdg.classList.add('unstable-data'); ui.tackCog.classList.add('unstable-data'); }
             }
             if (twdObj) { curTwdRoseRot = getShortestRotation(curTwdRoseRot, twdObj.val); ui.twdArrow.setAttribute('transform', `rotate(${curTwdRoseRot}, 20, 20)`); }
             lastAvgUIUpdate = now;
@@ -185,37 +153,13 @@ function startDisplayLoop() {
     }, RENDER_INTERVAL_MS);
 }
 
-// ==========================================================================
-// 7. CONNESSIONE SIGNALK (subscribe=self)
-// ==========================================================================
-function connect() {
-    if (simulationMode) return;
-    let addr = (window.location.protocol.includes("http")) ? window.location.host : CONFIG.server.fallbackIp;
-    try {
-        socket = new WebSocket(`ws://${addr}/signalk/v1/stream?subscribe=self`);
-        socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; };
-        socket.onmessage = (e) => { const d = JSON.parse(e.data); if (d.updates) d.updates.forEach(u => u.values && u.values.forEach(v => processIncomingData(v.path, v.value))); };
-        socket.onclose = () => !simulationMode && setTimeout(connect, 5000);
-    } catch (e) { setTimeout(connect, 5000); }
-}
-
-// ==========================================================================
-// 8. FUNZIONI GRAFICHE (Hercules Mode)
-// ==========================================================================
 function updateLeewayDisplay(deg) { const c = 125, px = 125/20; let w = Math.min(Math.abs(deg)*px, 125); ui.leewayMask.setAttribute('x', deg >= 0 ? c : c - w); ui.leewayMask.setAttribute('width', w); ui.leewayVal.textContent = `LEEWAY: ${deg.toFixed(1)}°`; }
 
 function manageHistory(t, v) {
     const n = Date.now();
-    const dynamicInterval = (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
-    const interval = simulationMode ? SIM_SAMPLE_INTERVAL : dynamicInterval;
-    
-    if (n - store.lastUpdates[t] > interval || store.histories[t].length === 0) {
-        store.histories[t].push(v);
-        if (store.histories[t].length > CONFIG.graphs.samples) store.histories[t].shift();
-        store.lastUpdates[t] = n;
-    }
-    const mode = graphModes[t];
-    const cfg = calculateScale(t, store.histories[t], mode);
+    const interval = simulationMode ? SIM_SAMPLE_INTERVAL : (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
+    if (n - store.lastUpdates[t] > interval || store.histories[t].length === 0) { store.histories[t].push(v); if (store.histories[t].length > CONFIG.graphs.samples) store.histories[t].shift(); store.lastUpdates[t] = n; }
+    const mode = graphModes[t], cfg = calculateScale(t, store.histories[t], mode);
     const box = document.getElementById(t + '-graph').closest('.data-box');
     if (mode === 'hercules') box.classList.add('box-hercules'); else box.classList.remove('box-hercules');
     updateScaleLabels(t, cfg.min, cfg.max);
@@ -226,14 +170,9 @@ 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 };
-    } else {
-        return { min: 0, max: Math.max(s.stdMax, Math.ceil(aMax / s.step) * s.step) };
-    }
+        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) };
 }
 
 function updateScaleLabels(t, min, max) {
@@ -242,64 +181,85 @@ function updateScaleLabels(t, min, max) {
 }
 
 function drawGraph(d, id, min, max, isTws, isHercules) {
-    const svg = document.getElementById(id); if (!svg || d.length < 2) return;
+    const svg = document.getElementById(id);
+    if (!svg || d.length < 2) return;
+    
     const w = 200, h = 40, range = max - min || 1;
+    const lClass = isHercules ? 'line-hercules' : '';
+
+    // 1. Griglie
     let grids = "";
     [0.25, 0.5, 0.75].forEach(p => { grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />`; });
-    
-    const minutes = CONFIG.graphs.historyMinutes;
-    for (let m = 1; m < minutes; m++) {
-        const x = w - (m / minutes) * w;
+    for (let m = 1; m < CONFIG.graphs.historyMinutes; m++) {
+        const x = w - (m / CONFIG.graphs.historyMinutes) * w;
         grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(255,255,255,0.05)" stroke-width="0.5" />`;
     }
-    
+
+    // 2. Calcolo Percorsi
     let pD = "", cS = "";
     d.forEach((v, i) => {
-        const x = (i/(CONFIG.graphs.samples-1))*w, y = h-(Math.max(0,Math.min(1,(v-min)/range))*h); pD += `${i===0?'M':'L'} ${x} ${y} `;
+        const x = (i/(CONFIG.graphs.samples-1))*w, y = h-(Math.max(0,Math.min(1,(v-min)/range))*h);
+        pD += `${i===0?'M':'L'} ${x} ${y} `;
+        
+        // Logica segmenti colorati per TWS
         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':''}" />`;
+            let c = "#f1c40f";
+            if (v >= CONFIG.graphs.reef2) c = "#e74c3c";
+            else if (v >= CONFIG.graphs.reef1) c = "#e67e22";
+            // Lo spessore ora è rimosso da qui e gestito dal CSS tramite la classe
+            cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" class="${lClass}" />`;
         }
     });
 
-    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#f1c40f' };
+    // 3. Rendering finale
     const aP = pD + ` L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z`;
-    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" />`;
+    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#f1c40f' };
+
+    if (isTws) {
+        svg.innerHTML = `${grids}<path d="${aP}" fill="rgba(241,196,15,0.12)" stroke="none" />${cS}`;
+    } else {
+        svg.innerHTML = `${grids}<path d="${aP}" fill="${clrs[id]}22" stroke="none" /><path d="${pD}" class="${lClass}" fill="none" stroke="${clrs[id]}" />`;
+    }
 }
 
 // ==========================================================================
-// 9. EVENTI E INIZIALIZZAZIONE
+// 5. EVENTI E INTERAZIONI
 // ==========================================================================
+
+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; }
+    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');
-    el.addEventListener('dblclick', (e) => {
-        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);
-    });
+    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); });
+    const startPress = (e) => { if (!isFocusActive) pressTimer = setTimeout(() => { toggleFocusMode(type, el); if (e.cancelable) e.preventDefault(); }, 1000); };
+    const cancelPress = () => { clearTimeout(pressTimer); };
+    el.addEventListener('mousedown', startPress); el.addEventListener('touchstart', startPress, {passive: false});
+    ['mouseup', 'mouseleave', 'touchend'].forEach(evt => el.addEventListener(evt, cancelPress));
+    el.addEventListener('click', (e) => { if (blockNextClick) { blockNextClick = false; return; } if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); });
+    el.addEventListener('contextmenu', (e) => { if (isFocusActive) e.preventDefault(); });
 });
 
-if (ui.hotspot) {
-    ui.hotspot.addEventListener('click', (e) => {
-        e.preventDefault(); 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(); }
-    });
-}
-
-(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); } } })();
+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(); } }); }
 
+// ==========================================================================
+// 6. INIZIALIZZAZIONE
+// ==========================================================================
+(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); } } })();
+function connect() { if (simulationMode) return; let addr = (window.location.protocol.includes("http")) ? window.location.host : CONFIG.server.fallbackIp; try { socket = new WebSocket(`ws://${addr}/signalk/v1/stream?subscribe=self`); socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; }; socket.onmessage = (e) => { const d = JSON.parse(e.data); if (d.updates) d.updates.forEach(u => u.values && u.values.forEach(v => processIncomingData(v.path, v.value))); }; socket.onclose = () => !simulationMode && setTimeout(connect, 5000); } catch (e) { setTimeout(connect, 5000); } }
 async function init() { await fetchServerConfig(); startDisplayLoop(); connect(); }
 window.addEventListener('load', init);
-
 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; }
-    };
+    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,135 +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">
-                        <circle cx="20" cy="20" r="18" fill="none" stroke="#333" stroke-width="2"/>
-                        <g stroke="#555" stroke-width="1"><line x1="20" y1="2" x2="20" y2="6"/><line x1="38" y1="20" x2="34" y2="20"/><line x1="20" y1="38" x2="20" y2="34"/><line x1="2" y1="20" x2="6" y2="20"/></g>
-                        <g id="twd-arrow" transform="rotate(0, 20, 20)"><path d="M20,5 L17,12 L23,12 Z" fill="#ffff00" /><line x1="20" y1="5" x2="20" y2="20" stroke="#ffff00" stroke-width="1" /></g>
+                        <circle cx="20" cy="20" r="19" fill="#151515" stroke="#444" stroke-width="1.5"/>
+                        <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"/><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>
+                        <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>
+                        <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>
----Fine Codice ---

package/package.json

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

package/style.css

@@ -1,7 +1,19 @@
 /* ==========================================================================
-   1. BASE E STRUTTURA (GRID LAYOUT)
+   1. BASE E STRUTTURA GENERALE (GRID LAYOUT)
    ========================================================================== */
-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; overflow: hidden; }
+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;
+    overflow: hidden;
+    /* Impedisce selezioni accidentali su tutto il corpo dell'app */
+    -webkit-user-select: none;
+    user-select: none;
+}
 
 .main-container {
     display: grid;
@@ -9,68 +21,39 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     height: 100%;
     padding: 5px;
     box-sizing: border-box;
-    /* Default Desktop (es. 4:3 o schermi medi) */
-    grid-template-columns: 1fr 3.5fr 1fr;
-    grid-template-rows: 100%;
     gap: 8px;
-    transition: grid-template-columns 0.4s ease;
+    /* Desktop Default: 3 colonne */
+    grid-template-columns: 1.5fr 3fr 1.5fr;
+    grid-template-rows: 100%;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* OTTIMIZZAZIONE PER SCHERMI LARGHI (16:10, 16:9, ecc.) */
-@media (min-aspect-ratio: 1.6) {
+/* Ottimizzazione per schermi molto larghi (16:10, 16:9) */
+@media (min-aspect-ratio: 1.5) {
     .main-container {
-        /* Allarghiamo le colonne laterali per sfruttare lo spazio orizzontale */
-        grid-template-columns: 1.4fr 3fr 1.4fr;
-        gap: 15px; /* Aumentiamo anche il distacco per eleganza */
+        grid-template-columns: 2fr 3fr 2fr;
+        gap: 15px;
     }
 }
 
 /* ==========================================================================
-   2. PANNELLI LATERALI E RIQUADRI DATI
+   2. PANNELLI E DATA-BOX
    ========================================================================== */
 .side-panel {
     display: flex;
     flex-direction: column;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
     z-index: 10;
     height: 100%;
+    overflow: hidden;
 }
 
-.right-panel {
-    align-items: flex-end;
-    text-align: right;
-}
-
-/* Riquadro singolo: agisce da contenitore per i font dinamici (cqh) */
-.data-box {
-    position: relative;
-    border-bottom: 1px solid #222;
-    padding: 8px 10px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    box-sizing: border-box;
-    flex: 1;
-    container-type: size;
-}
-
-/* Definizione altezze proporzionali (25% grafici, 16.6% dati semplici) */
-.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;
-}
+.left-panel { grid-column: 1; }
+.right-panel { grid-column: 3; align-items: flex-end; text-align: right; }
 
-/* ==========================================================================
-   3. STRUMENTO CENTRALE (WIND GAUGE)
-   ========================================================================== */
 .center-panel {
+    grid-column: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -79,278 +62,150 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     overflow: hidden;
 }
 
-#wind-gauge {
+.data-box {
+    position: relative;
+    border-bottom: 1px solid #222;
+    padding: 8px 12px;
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    height: 100%;
-    max-height: 100%;
-    object-fit: contain;
+    box-sizing: border-box;
+    container-type: size;
+    flex: 1;
+    overflow: hidden; /* Evita sconfinamenti su iPhone */
 }
 
+/* Altezze Proporzionali 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; }
+
 /* ==========================================================================
-   4. TIPOGRAFIA DINAMICA (Basata su altezza riquadro - cqh)
+   3. TACTICAL FOCUS MODE (50/50 SPLIT)
    ========================================================================== */
-.label-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 2px;
-    width: 100%;
-}
+.focus-active { grid-template-columns: 1fr 1fr !important; }
+.focus-active .side-panel:not(.has-focus) { display: none !important; }
 
-.label {
-    color: #666;
-    font-size: 0.6rem;
-    font-weight: bold;
-    text-transform: uppercase;
-}
+/* Simmetria: se il focus è a sx, il vento va a dx e viceversa */
+.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; }
 
-.unit {
-    color: #888;
-    font-size: 0.55rem;
-    font-weight: bold;
+/* Box Focalizzato a tutto schermo */
+.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.05);
 }
 
-/* Valore standard con grafico (STW, SOG, Depth, TWS) */
-.value {
-    color: #fff;
-    /* 22% dell'altezza del box, minimo 1.2rem */
-    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;
-}
+.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: 40px !important; }
 
-/* Valore grande senza grafico (Heading, COG, Mean) centrato verticalmente */
-.value-large {
-    margin-top: auto;
-    margin-bottom: auto;
-    /* 35% dell'altezza del box, minimo 1.5rem */
-    font-size: clamp(1.5rem, 35cqh, 4rem);
-    line-height: 0.85;
-}
+/* Grafica Linee Sottili in Focus */
+.focus-active .is-focused .sparkline path { stroke-width: 0.8px !important; }
 
 /* ==========================================================================
-   5. LAYOUT SPECIALI (TACK E BUSSOLINA TWD)
+   4. TIPOGRAFIA DINAMICA (ELASTICA CQH)
    ========================================================================== */
-/* Box TACK (Doppio valore HDG/COG) */
-.dual-value-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    width: 100%;
-    margin-top: auto;
-    margin-bottom: auto; /* Centratura verticale */
-    padding-bottom: 5px;
-}
+.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
+.label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
+.unit { color: #888; font-size: 0.6rem; font-weight: bold; }
 
-.dual-value-col {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 48%;
-    height: 100%;
-}
-
-.dual-value-col.right-col {
-    align-items: flex-end;
-    text-align: right;
-}
+.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; }
 
-.dual-label {
-    color: #666;
-    font-size: 0.55rem;
-    font-weight: bold;
-    text-transform: uppercase;
+/* Allineamento centrato per box senza grafico */
+.value-large, .dual-value-container, .value-with-compass {
+    margin-top: auto;
     margin-bottom: auto;
 }
 
-.value.dual-val {
-    font-size: clamp(1rem, 20cqh, 1.8rem);
-    padding-bottom: 0;
-}
+.value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
 
-/* Box TWD con Mini-Compass */
-.value-with-compass {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin-top: auto;
-    margin-bottom: auto; /* Centratura verticale */
-}
+/* TACK E TWD BUSSOLA */
+.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 { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
 .mini-compass {
-    width: 38px;
-    height: 38px;
-    background: rgba(0,0,0,0.2);
-    border-radius: 50%;
-    flex-shrink: 0;
-}
-
-.value-with-compass .value-large {
-    margin-top: 0;
-    margin-bottom: 0;
+    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); transition: all 0.4s ease;
 }
+.value-with-compass .value-large { margin: 0; flex-grow: 1; text-align: right; font-size: clamp(1.2rem, 35cqh, 4rem); }
 
 /* ==========================================================================
-   6. GRAFICI STORICI (SPARKLINES)
+   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; /* Ridotto: spazio minimo tra numeri e grafico */
-}
-
-.sparkline {
-    flex-grow: 1;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 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; }
 
-.scale-labels {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    font-size: 10px; /* Aumentato di ~1.5pt */
-    color: #888; /* Leggermente più chiaro per leggibilità */
-    font-weight: bold;
-    min-width: 16px; /* Allargato per il nuovo font */
-    height: 100%;
-    line-height: 1;
+/* Uniforma lo spessore di TUTTI i tipi di linea nei grafici (Standard) */
+.sparkline path,
+.sparkline line {
+    stroke-width: 1px !important;
+    transition: stroke-width 0.3s ease;
 }
 
-/* SIMMETRIA INTERNA:
-   Pannello SX -> Scala a DESTRA (vicino al vento)
-   Pannello DX -> Scala a SINISTRA (vicino al vento)
-*/
-.left-panel .scale-labels {
-    order: 2;
-    text-align: left;
-}
-.left-panel .sparkline {
-    order: 1;
-}
+.scale-labels { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #777; font-weight: bold; min-width: 16px; height: 100%; line-height: 1; transition: all 0.3s ease; }
 
-.right-panel .scale-labels {
-    order: 1;
-    text-align: right;
-}
-.right-panel .sparkline {
-    order: 2;
-}
+/* Simmetria interna */
+.left-panel .scale-labels { order: 2; text-align: left; }
+.left-panel .sparkline { order: 1; }
+.right-panel .scale-labels { order: 1; text-align: right; }
+.right-panel .sparkline { order: 2; }
 
-/* Colori linee grafici */
-#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.15); }
-#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.15); }
-#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.15); }
-#tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.15); }
+#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.12); }
+#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.12); }
+#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
+#tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.12); }
 
-/* Effetto bagliore ROSSO per la linea Hercules */
+/* HERCULES MODE */
 .line-hercules {
-    filter: drop-shadow(0 0 5px #ff0000); /* Glow Rosso */
-    stroke-width: 2.2px !important;
-}
-
-/* Sfondo speciale ROSSO SCURO per il box in modalità Hercules */
-.box-hercules {
-    background: rgba(255, 0, 0, 0.08) !important; /* Una punta di rosso nel fondo */
-    border-radius: 10px;
-    transition: all 0.3s ease;
-}
-
-.box-hercules .sparkline {
-    background: rgba(255, 0, 0, 0.05); /* Sfondo grafico leggermente rosso */
-}
-
-/* Indicatore "H" più evidente */
-.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;
+    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; opacity: 0.8; }
 
 /* ==========================================================================
-   7. STATI, ALLARMI E ANIMAZIONI
+   6. STATI E ANIMAZIONI
    ========================================================================== */
-#status {
-    position: absolute;
-    top: 5px;
-    right: 15px;
-    font-size: 0.5rem;
-    text-transform: uppercase;
-    z-index: 1000;
-}
-
+#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; }
-
-/* Fluidità lancette SVG */
-#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow {
-    transition: all 0.6s cubic-bezier(0.1, 0.7, 0.1, 1);
-}
-
+#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; }
-
-/* Allarmi Profondità */
 .alarm-warning { color: #f1c40f !important; }
-.alarm-danger {
-    color: #e74c3c !important;
-    font-weight: 900;
-    animation: blink-unstable 1s infinite;
-}
-
-/* Lampeggio dati instabili (MEAN) */
-@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;
-}
+.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; }
 
 /* ==========================================================================
-   8. RESPONSIVE LAYOUT (max-aspect-ratio: 40/50)
+   7. RESPONSIVE (PORTRAIT)
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
     .main-container {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 1fr 1fr !important;
+        grid-template-rows: 45vh 55vh !important; /* Calibrato per iPhone */
     }
 
-    /* Vento sopra a tutta larghezza */
-    .center-panel {
-        grid-column: 1 / span 2;
-        grid-row: 1;
-        height: 50vh;
-    }
+    .center-panel { grid-row: 1; grid-column: 1 / span 2; padding: 5px 0; }
+    .left-panel { grid-row: 2; grid-column: 1; }
+    .right-panel { grid-row: 2; grid-column: 2; }
 
-    /* Colonne dati sotto affiancate */
-    .side-panel.left-panel { grid-column: 1; grid-row: 2; height: 50vh; }
-    .side-panel.right-panel { grid-column: 2; grid-row: 2; height: 50vh; }
+    /* Focus Mode Verticale */
+    .main-container.focus-active { grid-template-columns: 100% !important; }
+    .focus-active .center-panel { grid-row: 1; height: 45vh !important; }
+    .focus-active .side-panel.has-focus { grid-row: 2; height: 55vh !important; }
 
-    #wind-gauge { max-height: 100%; width: auto; }
+    /* Altezze box iPhone */
+    .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; }
 
-    /* Altezze box dimezzate in modalità responsive */
-    .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; }
-    
-    /* Font più protettivi per schermi piccoli */
-    .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); }
+    .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
+    .value.dual-val { font-size: clamp(0.9rem, 30cqh, 1.4rem); }
 }