@sailingrotevista/rotevista-dash 2.0.16 → 2.0.18

package/app.js

@@ -1,11 +1,16 @@
 // ==========================================================================
-// 1. CONFIGURAZIONE E DEFAULT
+// 1. CONFIGURAZIONE E DEFAULT (Sincronizzato con il Plugin SignalK)
 // ==========================================================================
 let CONFIG = {
     alarms: { depthDanger: 2.5, depthWarning: 5.0 },
     averages: { smoothWindow: 2000, longWindow: 60000, stabilityTolerance: 2000, stabilityThreshold: 0.90, minSpeed: 0.5 },
     graphs: { reef1: 15.0, reef2: 20.0, historyMinutes: 5, samples: 60 },
-    scales: { stw: { stdMax: 12, hercSpan: 4, step: 2 }, sog: { stdMax: 12, hercSpan: 4, step: 2 }, tws: { stdMax: 25, hercSpan: 10, step: 5 }, depth: { stdMax: 20, hercSpan: 10, step: 10 } },
+    scales: {
+        stw: { stdMax: 12, hercSpan: 4, step: 2 },
+        sog: { stdMax: 12, hercSpan: 4, step: 2 },
+        tws: { stdMax: 25, hercSpan: 10, step: 5 },
+        depth: { stdMax: 20, hercSpan: 10, step: 10 }
+    },
     server: { fallbackIp: "192.168.111.240:3000" }
 };
 
@@ -17,18 +22,18 @@ const SIM_SAMPLE_INTERVAL = 1000;
 // 2. STATO GLOBALE E RIFERIMENTI UI
 // ==========================================================================
 let simulationMode = false;
+let displayModeSog = 'SOG'; // 'SOG' o 'VMG'
 let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
+let curBoatCompassRot = 0, curWindCompassRot = 0;
 
-// Variabili di stato per filtri e logica tattica
-let smoothedLeeway = 0;
-let rotationTrend = 0;
-let lastShortAvgVal = null;
-let lastInstantTwa = null;
-let isNavigating = false;
+let smoothedLeeway = 0, rotationTrend = 0;
+let lastShortAvgVal = null, lastInstantTwa = null;
+let lastTrendTime = Date.now(), lastGybeAlarmTime = 0, lastTWCompute = 0;
+let twDirty = false, isNavigating = false, reconnectDelay = 1000;
 
-let pressTimer, isFocusActive = false, blockNextClick = false;
+let pressTimer, isFocusActive = false;
 
 const graphModes = {
     stw: localStorage.getItem('mode_stw') || 'standard',
@@ -41,8 +46,8 @@ const store = {
     raw: {}, timestamps: {},
     smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     longBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
-    histories: { stw: [], sog: [], depth: [], tws: [] },
-    lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0 }
+    histories: { stw: [], sog: [], depth: [], tws: [], vmg: [] },
+    lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0, vmg: 0 }
 };
 
 const ui = {
@@ -61,7 +66,7 @@ const ui = {
 };
 
 // ==========================================================================
-// 3. MATEMATICA E UTILS
+// 3. UTILITIES DI SISTEMA (MATEMATICA E BUFFER)
 // ==========================================================================
 function radToDeg(rad) { return rad * (180 / Math.PI); }
 function degToRad(deg) { return deg * (Math.PI / 180); }
@@ -69,93 +74,128 @@ 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; }
 
+/**
+ * Gestione sicura dei buffer per prevenire memory leak (O(1) complexity).
+ */
+function safePush(buffer, val, time, maxLen = 200) {
+    buffer.push({ val: val, time: time });
+    if (buffer.length > maxLen) { buffer.shift(); }
+}
+
+/**
+ * Calcola medie circolari restituendo Radianti.
+ */
 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 isStable = (validData.length > 2) && (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 };
+    let avgRad = Math.atan2(sSin, sCos);
+    return { val: signed ? avgRad : (avgRad + 2 * Math.PI) % (2 * Math.PI), stable: isStable };
 }
 
 // ==========================================================================
-// 4. LOGICA FISICA (VENTO E SICUREZZA)
+// 4. LOGICA FISICA E CALCOLI
 // ==========================================================================
 
-function playBingBing() {
-    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    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);
-}
-
-function playGybeAlarm() {
-    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    const n = Date.now(); if (n - lastAlarmTime < 2000) return; lastAlarmTime = n;
-    function note(f, s, d) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.type = 'square'; o.frequency.value = f; g.gain.setValueAtTime(0.05, s); g.gain.exponentialRampToValueAtTime(0.001, s + d); o.start(s); o.stop(s + d); }
-    for (let i = 0; i < 4; i++) { note(1800, audioCtx.currentTime + (i * 0.15), 0.1); note(1200, audioCtx.currentTime + (i * 0.15) + 0.07, 0.1); }
-}
-
-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');
-}
-
+/**
+ * Calcola il Vento Reale partendo dagli Apparenti.
+ * Logica Acqua (Vele) vs Terra (Meteo).
+ */
 function computeTrueWind() {
     const aws = store.raw["environment.wind.speedApparent"];
-    const awa = store.raw["environment.wind.angleApparent"];
-    const stw = store.raw["navigation.speedThroughWater"] || 0;
-    const sog = store.raw["navigation.speedOverGround"] || 0;
-    const hdg = store.raw["navigation.headingTrue"] || 0;
-    const cog = store.raw["navigation.courseOverGroundTrue"] || 0;
+    let awa = store.raw["environment.wind.angleApparent"];
+    const stw = store.raw["navigation.speedThroughWater"] || 0, sog = store.raw["navigation.speedOverGround"] || 0;
+    const hdg = store.raw["navigation.headingTrue"] || 0, cog = store.raw["navigation.courseOverGroundTrue"] || 0;
+    
     if (aws === undefined || awa === undefined) return;
-    const tw_water_x = aws * Math.cos(awa) - stw;
-    const tw_water_y = aws * Math.sin(awa);
-    const tws_water = Math.sqrt(tw_water_x * tw_water_x + tw_water_y * tw_water_y);
-    const twa_water = Math.atan2(tw_water_y, tw_water_x);
-    const drift_angle = cog - hdg;
-    const sog_vec_x = sog * Math.cos(drift_angle);
-    const sog_vec_y = sog * Math.sin(drift_angle);
-    const tw_ground_x = aws * Math.cos(awa) - sog_vec_x;
-    const tw_ground_y = aws * Math.sin(awa) - sog_vec_y;
-    const twd_ground = (hdg + Math.atan2(tw_ground_y, tw_ground_x) + 2 * Math.PI) % (2 * Math.PI);
+    if (awa > Math.PI) awa -= 2 * Math.PI;
+
+    // Vento Reale su ACQUA (TWA/TWS)
+    const tw_water_x = aws * Math.cos(awa) - stw, tw_water_y = aws * Math.sin(awa);
+    const tws_water = Math.sqrt(tw_water_x * tw_water_x + tw_water_y * tw_water_y), twa_water = Math.atan2(tw_water_y, tw_water_x);
+
+    // Vento Reale su TERRA (TWD)
+    const drift_angle = (cog - hdg + Math.PI * 3) % (2 * Math.PI) - Math.PI;
+    const sog_vec_x = sog * Math.cos(drift_angle), sog_vec_y = sog * Math.sin(drift_angle);
+    const tw_ground_x = aws * Math.cos(awa) - sog_vec_x, tw_ground_y = aws * Math.sin(awa) - sog_vec_y;
+    let twd_ground = (hdg + Math.atan2(tw_ground_y, tw_ground_x) + 2 * Math.PI) % (2 * Math.PI);
+    
     const now = Date.now();
-    store.raw["environment.wind.speedTrue"] = tws_water;
-    store.raw["environment.wind.angleTrueWater"] = twa_water;
-    store.raw["environment.wind.directionTrue"] = twd_ground;
-    store.smoothBuf.twa.push({ val: twa_water, time: now });
-    store.longBuf.twa.push({ val: twa_water, time: now });
-    store.smoothBuf.twd.push({ val: twd_ground, time: now });
-    store.longBuf.twd.push({ val: twd_ground, time: now });
+    store.raw["environment.wind.speedTrue"] = tws_water; store.raw["environment.wind.angleTrueWater"] = twa_water; store.raw["environment.wind.directionTrue"] = twd_ground;
+    
+    safePush(store.smoothBuf.twa, twa_water, now); safePush(store.longBuf.twa, twa_water, now);
+    safePush(store.smoothBuf.twd, twd_ground, now); safePush(store.longBuf.twd, twd_ground, now);
 }
 
+function processIncomingData(path, val) {
+    const now = Date.now(); store.timestamps[path] = now; store.raw[path] = val;
+    if (path === "navigation.position") store.raw["navigation.position"] = val;
+    if (path === "environment.wind.angleApparent") { safePush(store.smoothBuf.awa, val, now); safePush(store.longBuf.awa, val, now); }
+
+    // Dirty flag + Debounce 100ms
+    const twPaths = ["environment.wind.speedApparent", "environment.wind.angleApparent", "navigation.speedThroughWater", "navigation.speedOverGround", "navigation.headingTrue", "navigation.courseOverGroundTrue"];
+    if (twPaths.includes(path)) twDirty = true;
+    if (twDirty && (now - lastTWCompute > 100)) { computeTrueWind(); lastTWCompute = now; twDirty = false; }
+
+    if (path === "navigation.headingTrue") { safePush(store.smoothBuf.hdg, val, now); safePush(store.longBuf.hdg, val, now); }
+    if (path === "navigation.courseOverGroundTrue") { safePush(store.smoothBuf.cog, val, now); safePush(store.longBuf.cog, val, now); }
+}
+
+// ==========================================================================
+// 5. AUDIO E ALLARMI
+// ==========================================================================
+function playBingBing() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 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); }
+function playGybeAlarm() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const n = Date.now(); if (n - lastAlarmTime < 2000) return; lastAlarmTime = n; function note(f, s, d) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.type = 'square'; o.frequency.value = f; g.gain.setValueAtTime(0.05, s); g.gain.exponentialRampToValueAtTime(0.001, s + d); o.start(s); o.stop(s + d); } for (let i = 0; i < 4; i++) { note(1800, audioCtx.currentTime + (i * 0.15), 0.1); note(1200, audioCtx.currentTime + (i * 0.15) + 0.07, 0.1); } }
+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'); }
+
+// ==========================================================================
+// 6. TREND VENTO E TATTICA
+// ==========================================================================
 function updateWindTrend() {
+    const now = Date.now();
     const twaAvgObj = getCircularAverageFromBuffer(store.longBuf.twa, 60000, true);
     const shortAvg = getCircularAverageFromBuffer(store.longBuf.twd, 5000, false);
     const instantTwaRad = store.raw["environment.wind.angleTrueWater"];
+
     if (!shortAvg || !twaAvgObj || instantTwaRad === undefined) return;
-    const instantTwaDeg = radToDeg(instantTwaRad);
-    if (lastShortAvgVal === null) { lastShortAvgVal = shortAvg.val; lastInstantTwa = instantTwaDeg; return; }
-    const gybeDetected = (Math.abs(instantTwaDeg) > 150 && Math.abs(lastInstantTwa) > 150 && Math.sign(instantTwaDeg) !== Math.sign(lastInstantTwa));
+    const instantTwaDeg = radToDeg(instantTwaRad), shortAvgDeg = radToDeg(shortAvg.val), twaAvgDeg = radToDeg(twaAvgObj.val);
+
+    if (lastShortAvgVal === null) { lastShortAvgVal = shortAvgDeg; lastInstantTwa = instantTwaDeg; return; }
+    const dt = (now - lastTrendTime) / 1000; lastTrendTime = now;
+
+    // Gybe Safety
+    const gybeDetected = (Math.abs(instantTwaDeg) > 155 && Math.sign(instantTwaDeg) !== Math.sign(lastInstantTwa));
     lastInstantTwa = instantTwaDeg;
+    if (gybeDetected && isNavigating && (now - lastGybeAlarmTime > 5000)) { lastGybeAlarmTime = now; playGybeAlarm(); }
+    
     const compassDots = { cw: document.getElementById('trend-dot-cw'), ccw: document.getElementById('trend-dot-ccw') };
     const gaugeDots = { cw: document.getElementById('trend-gauge-cw'), ccw: document.getElementById('trend-gauge-ccw') };
-    if (gybeDetected && isNavigating) {
-        playGybeAlarm();
+
+    if (now - lastGybeAlarmTime < 4000 && isNavigating) {
         [compassDots.cw, compassDots.ccw, gaugeDots.cw, gaugeDots.ccw].forEach(el => { if (el) { el.classList.add('is-gybing'); el.classList.remove('is-trending'); el.setAttribute('fill', '#ff0000'); }});
         return;
     }
-    let diff = (shortAvg.val - lastShortAvgVal + 540) % 360 - 180;
-    lastShortAvgVal = shortAvg.val;
-    rotationTrend = (rotationTrend * 0.95) + (diff * 0.05);
+
+    // Trend calculation con Clamping e Alpha adattivo
+    let diff = (shortAvgDeg - lastShortAvgVal + 540) % 360 - 180; lastShortAvgVal = shortAvgDeg;
+    if (dt > 0) {
+        let rate = Math.max(-10, Math.min(10, diff / dt));
+        const alpha = Math.min(1, dt / 5);
+        rotationTrend = rotationTrend * (1 - alpha) + rate * alpha;
+    }
+
     if (Math.abs(rotationTrend) > 1.0) {
-        const pos = store.raw["navigation.position"];
-        const isSouthernHemisphere = pos && pos.latitude < 0;
-        let meteoColor = (!isSouthernHemisphere) ? (rotationTrend < 0 ? "#00ff00" : "#ff0000") : (rotationTrend > 0 ? "#00ff00" : "#ff0000");
-        let isLift = (twaAvgObj.val > 0) ? (rotationTrend > 0) : (rotationTrend < 0);
+        const pos = store.raw["navigation.position"], isSouth = pos && pos.latitude < 0;
+        let meteoColor = (!isSouth) ? (rotationTrend < 0 ? "#00ff00" : "#ff0000") : (rotationTrend > 0 ? "#00ff00" : "#ff0000");
+        let isLift = (twaAvgDeg > 0) ? (rotationTrend > 0) : (rotationTrend < 0);
+        const absTwa = Math.abs(twaAvgDeg);
+        if (absTwa >= 90 && absTwa < 160) isLift = !isLift; else if (absTwa >= 160) isLift = false;
         const tacticColor = isLift ? "#00ff00" : "#ff0000";
+
         if (rotationTrend > 0) {
             if (compassDots.cw) { compassDots.cw.classList.add('is-trending'); compassDots.cw.setAttribute('fill', meteoColor); }
             if (gaugeDots.cw) { gaugeDots.cw.classList.add('is-trending'); gaugeDots.cw.setAttribute('fill', tacticColor); }
@@ -171,60 +211,64 @@ function updateWindTrend() {
 }
 
 // ==========================================================================
-// 5. DATA ROUTING
-// ==========================================================================
-function processIncomingData(path, val) {
-    const now = Date.now(); store.timestamps[path] = now; store.raw[path] = val;
-    if (path === "navigation.position") store.raw["navigation.position"] = 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.speedApparent" || path === "environment.wind.angleApparent" || path === "navigation.speedThroughWater") computeTrueWind();
-    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 }); }
-}
-
-// ==========================================================================
-// 6. MOTORE RENDERING UI
+// 7. RENDERING ENGINE (TIERED RENDERING)
 // ==========================================================================
 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 refreshGraph(t) {
+    const type = (t === 'vmg') ? 'sog' : t;
+    const data = store.histories[t]; if (!data || data.length < 2) return;
+    const mode = graphModes[type], cfg = calculateScale(type, data, mode);
+    const graphEl = document.getElementById(type + '-graph');
+    if (graphEl) { const box = graphEl.closest('.data-box'); if (box) box.classList.toggle('box-hercules', mode === 'hercules'); }
+    updateScaleLabels(type, cfg.min, cfg.max); drawGraph(data, type + '-graph', cfg.min, cfg.max, t === 'tws', mode === 'hercules');
+}
+
 function startDisplayLoop() {
+    let tick = 0;
     renderInterval = setInterval(() => {
-        const now = Date.now();
+        const now = Date.now(); tick++;
+
+        // --- LIVE TIER (1s) ---
         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)) { if (pathsToWatch[p] === ui.awsSvg) ui.awsSvg.textContent = "---"; else pathsToWatch[p].innerText = "---"; delete store.raw[p]; } }
 
-        const stwKts = msToKts(store.raw["navigation.speedThroughWater"] || 0);
-        const sogKts = msToKts(store.raw["navigation.speedOverGround"] || 0);
+        const stwKts = msToKts(store.raw["navigation.speedThroughWater"] || 0), sogKts = msToKts(store.raw["navigation.speedOverGround"] || 0);
         isNavigating = stwKts > CONFIG.averages.minSpeed || sogKts > CONFIG.averages.minSpeed;
 
         if (store.raw["navigation.speedThroughWater"] !== undefined) { ui.stw.innerText = stwKts.toFixed(1); manageHistory('stw', stwKts); }
         if (store.raw["navigation.speedOverGround"] !== undefined) {
-            ui.sog.innerText = sogKts.toFixed(1);
-            let sogColor = "#fff"; const currentEffect = sogKts - stwKts;
-            if (currentEffect > 0.3) sogColor = "#2ecc71"; else if (currentEffect < -0.3) sogColor = "#e74c3c";
-            ui.sog.style.color = sogColor; manageHistory('sog', sogKts);
+            const twaRad = store.raw["environment.wind.angleTrueWater"], vmgKts = (twaRad !== undefined) ? Math.abs(stwKts * Math.cos(twaRad)) : 0;
+            manageHistory('vmg', vmgKts); manageHistory('sog', sogKts);
+            if (displayModeSog === 'VMG') { ui.sog.innerText = vmgKts.toFixed(1); ui.sog.style.color = "#64ffda"; document.getElementById('sog-vmg-label').textContent = 'VMG'; }
+            else { ui.sog.innerText = sogKts.toFixed(1); ui.sog.style.color = (sogKts-stwKts > 0.3) ? "#2ecc71" : (sogKts-stwKts < -0.3 ? "#e74c3c" : "#fff"); document.getElementById('sog-vmg-label').textContent = 'SOG'; }
         }
         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 twsKts = msToKts(store.raw["environment.wind.speedTrue"]); ui.tws.innerText = twsKts.toFixed(1);
-            ui.tws.style.color = (twsKts >= CONFIG.graphs.reef2) ? "#e74c3c" : (twsKts >= CONFIG.graphs.reef1 ? "#e67e22" : "#fff");
-            manageHistory('tws', twsKts);
-        }
+        if (store.raw["environment.wind.speedTrue"] !== undefined) { const twsKts = msToKts(store.raw["environment.wind.speedTrue"]); ui.tws.innerText = twsKts.toFixed(1); ui.tws.style.color = (twsKts >= CONFIG.graphs.reef2) ? "#e74c3c" : (twsKts >= CONFIG.graphs.reef1 ? "#e67e22" : "#fff"); manageHistory('tws', twsKts); }
         if (store.raw["environment.wind.speedApparent"] !== undefined) ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
 
         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)`); }
+        if (smAwa) { curAwaRot = getShortestRotation(curAwaRot, radToDeg(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)`); }
+        if (smTwa) { curTwaRot = getShortestRotation(curTwaRot, radToDeg(smTwa.val)); ui.twa.setAttribute('transform', `rotate(${curTwaRot}, 200, 200)`); }
 
         if (store.raw["navigation.courseOverGroundTrue"] !== undefined && store.raw["navigation.headingTrue"] !== undefined) {
-            let drift = (radToDeg(store.raw["navigation.courseOverGroundTrue"]) - radToDeg(store.raw["navigation.headingTrue"]) + 540) % 360 - 180;
-            if (sogKts < CONFIG.averages.minSpeed) smoothedLeeway = 0; else smoothedLeeway = (smoothedLeeway * 0.9) + (drift * 0.1);
+            let driftDeg = radToDeg((store.raw["navigation.courseOverGroundTrue"] - store.raw["navigation.headingTrue"] + Math.PI * 3) % (Math.PI * 2) - Math.PI);
+            if (sogKts < CONFIG.averages.minSpeed) smoothedLeeway = 0; else smoothedLeeway = (smoothedLeeway * 0.9) + (driftDeg * 0.1);
             curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway); ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
+            const isContaminated = Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7; ui.leewayVal.style.color = isContaminated ? "#f39c12" : "#fff";
             updateLeewayDisplay(Math.max(-20, Math.min(20, smoothedLeeway)));
-        } else updateLeewayDisplay(0);
+        }
+        
+        updateWindTrend(); // Fast update
+
+        // --- HEAVY TIER (2s) ---
+        if (tick % 2 === 0) {
+            refreshGraph('stw'); refreshGraph(displayModeSog === 'VMG' ? 'vmg' : 'sog'); refreshGraph('depth'); refreshGraph('tws');
+        }
 
-        if (now - lastAvgUIUpdate > 3000) {
+        // --- SLOW TIER (3s) ---
+        if (tick % 3 === 0) {
             let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, CONFIG.averages.longWindow, false),
                 cObj = getCircularAverageFromBuffer(store.longBuf.cog, CONFIG.averages.longWindow, false),
                 awObj = getCircularAverageFromBuffer(store.longBuf.awa, CONFIG.averages.longWindow, true),
@@ -234,26 +278,31 @@ function startDisplayLoop() {
             const upUI = (el, obj, isCompass = false) => {
                 if (!obj || obj.val === null) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); }
                 else {
-                    let val = Math.round(obj.val); el.innerHTML = (isCompass ? ((val + 360) % 360).toString().padStart(3, '0') : val) + "&deg;";
+                    let valDeg = Math.round(radToDeg(obj.val)); el.innerHTML = (isCompass ? ((valDeg + 360) % 360).toString().padStart(3, '0') : valDeg) + "&deg;";
                     if (obj.stable || !isNavigating) el.classList.remove('unstable-data'); else el.classList.add('unstable-data');
                 }
             };
             upUI(ui.hdg, hObj, true); upUI(ui.cog, cObj, true); upUI(ui.awaAvg, awObj, false); upUI(ui.twaAvg, twObj, false); upUI(ui.twdAvg, twdObj, true);
             if (hObj && twObj && hObj.val !== null) {
-                const 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;`;
+                const tackHdgDeg = radToDeg((hObj.val - (twObj.val * 2) + Math.PI * 2) % (Math.PI * 2));
+                ui.tackHdg.innerHTML = `${Math.round((tackHdgDeg + 360) % 360).toString().padStart(3, '0')}&deg;`;
+                if (cObj) {
+                    const tackCogDeg = radToDeg((cObj.val - (twObj.val * 2) + Math.PI * 2) % (Math.PI * 2));
+                    ui.tackCog.innerHTML = `${Math.round((tackCogDeg + 360) % 360).toString().padStart(3, '0')}&deg;`;
+                }
+            }
+            const smHdg = getCircularAverageFromBuffer(store.smoothBuf.hdg, 2000, false), smTwd = getCircularAverageFromBuffer(store.smoothBuf.twd, 2000, false);
+            if (smHdg && smTwd) {
+                curWindCompassRot = getShortestRotation(curWindCompassRot, radToDeg(smTwd.val)); ui.twdArrow.setAttribute('transform', `rotate(${curWindCompassRot}, 20, 20)`);
+                curBoatCompassRot = getShortestRotation(curBoatCompassRot, radToDeg(smHdg.val)); ui.twdBoat.setAttribute('transform', `rotate(${curBoatCompassRot}, 20, 20)`);
             }
-            if (twdObj && hObj) { updateWindTrend(); curTwdRoseRot = getShortestRotation(curTwdRoseRot, twdObj.val); ui.twdArrow.setAttribute('transform', `rotate(${curTwdRoseRot}, 20, 20)`); ui.twdBoat.setAttribute('transform', `rotate(${hObj.val}, 20, 20)`); }
-            lastAvgUIUpdate = now;
         }
-        for (let b in store.smoothBuf) { while (store.smoothBuf[b].length > 0 && (now - store.smoothBuf[b][0].time) > CONFIG.averages.smoothWindow) store.smoothBuf[b].shift(); }
-        for (let b in store.longBuf) { while (store.longBuf[b].length > 0 && (now - store.longBuf[b][0].time) > CONFIG.averages.longWindow) store.longBuf[b].shift(); }
+        if (tick % 60 === 0) tick = 0;
     }, RENDER_INTERVAL_MS);
 }
 
 // ==========================================================================
-// 7. CONFIG E GRAFICI
+// 8. INTERAZIONI E RETE
 // ==========================================================================
 async function fetchServerConfig() {
     if (!window.location.protocol.includes("http")) return;
@@ -281,8 +330,6 @@ async function fetchServerConfig() {
 function manageHistory(t, v) {
     const n = Date.now(); 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);
-    updateScaleLabels(t, cfg.min, cfg.max); drawGraph(store.histories[t], t + '-graph', cfg.min, cfg.max, t === 'tws', mode === 'hercules');
 }
 
 function calculateScale(type, data, mode) {
@@ -308,14 +355,10 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
         }
     });
     const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#ffffff' };
-    svg.innerHTML = isTws ? `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="rgba(255,255,255,0.08)" stroke="none" />${cS}` : `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="${clrs[id]}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${clrs[id]}" />`;
+    const colorKey = id === 'sog-graph' && displayModeSog === 'VMG' ? '#64ffda' : clrs[id];
+    svg.innerHTML = isTws ? `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="rgba(255,255,255,0.08)" stroke="none" />${cS}` : `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="${colorKey}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${colorKey}" />`;
 }
 
-// ==========================================================================
-// 8. INTERAZIONI
-// ==========================================================================
-window.addEventListener('contextmenu', e => e.preventDefault(), true);
-
 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;
@@ -324,14 +367,16 @@ function toggleFocusMode(type, element) {
 }
 
 ['stw', 'sog', 'tws', 'depth'].forEach(type => {
-    const el = document.getElementById(type + '-graph').closest('.data-box'); let lastTapTime = 0, tapTimeout;
-    el.addEventListener('pointerdown', (e) => {
-        if (e.cancelable) e.preventDefault(); const currentTime = new Date().getTime(); const tapDelay = currentTime - lastTapTime;
-        pressTimer = setTimeout(() => { if (!isFocusActive) { toggleFocusMode(type, el); lastTapTime = 0; } }, 1000);
+    const el = document.getElementById(type + '-graph').closest('.data-box');
+    let lastTapTime = 0, tapTimeout, isLongPressActive = false;
+    el.addEventListener('pointerdown', (e) => { isLongPressActive = false; pressTimer = setTimeout(() => { if (!isFocusActive) { isLongPressActive = true; toggleFocusMode(type, el); lastTapTime = 0; } }, 1000); });
+    el.addEventListener('pointerup', (e) => {
+        clearTimeout(pressTimer); if (isLongPressActive) return;
+        const currentTime = new Date().getTime(), tapDelay = currentTime - lastTapTime;
         if (tapDelay < 300 && tapDelay > 0) { clearTimeout(tapTimeout); if (!isFocusActive) { graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard'; localStorage.setItem('mode_' + type, graphModes[type]); } lastTapTime = 0; }
-        else { lastTapTime = currentTime; tapTimeout = setTimeout(() => { if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); }, 350); }
+        else { lastTapTime = currentTime; tapTimeout = setTimeout(() => { if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); else if (!isFocusActive && type === 'sog') { displayModeSog = (displayModeSog === 'SOG') ? 'VMG' : 'SOG'; el.style.backgroundColor = "rgba(100, 255, 218, 0.1)"; setTimeout(() => el.style.backgroundColor = "", 150); } }, 250); }
     });
-    el.addEventListener('pointerup', () => clearTimeout(pressTimer)); el.addEventListener('pointerleave', () => clearTimeout(pressTimer));
+    el.addEventListener('pointerleave', () => clearTimeout(pressTimer));
 });
 
 if (ui.hotspot) {
@@ -340,25 +385,23 @@ if (ui.hotspot) {
     ui.hotspot.addEventListener('pointerleave', () => { if (pressTimer) { clearTimeout(pressTimer); pressTimer = null; } });
 }
 
-// ==========================================================================
-// 9. CONNESSIONE E SIMULATORE
-// ==========================================================================
 function connect() {
     if (simulationMode) return;
     let addr = (window.location.protocol.includes("http")) ? window.location.host : CONFIG.server.fallbackIp;
+    const protocol = (window.location.protocol === 'https:') ? 'wss' : 'ws';
     try {
-        socket = new WebSocket(`ws://${addr}/signalk/v1/stream?subscribe=self`);
-        socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; };
+        socket = new WebSocket(`${protocol}://${addr}/signalk/v1/stream?subscribe=self`);
+        socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; reconnectDelay = 1000; };
         socket.onmessage = (e) => { if (simulationMode) return; 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); }
+        socket.onclose = () => { if (!simulationMode) { ui.status.className = "offline"; ui.status.innerText = "RECONNECTING..."; setTimeout(connect, reconnectDelay); reconnectDelay = Math.min(reconnectDelay * 1.5, 10000); } };
+    } catch (e) { setTimeout(connect, reconnectDelay); reconnectDelay = Math.min(reconnectDelay * 1.5, 10000); }
 }
 
 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(); startDynamicSimulation(); } else location.reload(); dC = 0; } }; })());
 
 function startDynamicSimulation() {
     ui.status.innerText = "SIM ATTIVO";
-    let sim = { hdg: 45, tws: 12, twd: 45, depth: 12, stw: 5, leeway: 0, startTime: Date.now() };
+    let sim = { hdg: 45, tws: 12, twd: 45, depth: 12, stw: 5, leeway: 0, currentSpeed: 1.5, currentDir: 90, startTime: Date.now() };
     simInterval = setInterval(() => {
         const elapsed = (Date.now() - sim.startTime) / 1000;
         if (elapsed > 120 && elapsed < 121) sim.twd = Math.random() * 360;
@@ -368,19 +411,22 @@ function startDynamicSimulation() {
         let twaRel = (sim.twd - sim.hdg + 360) % 360; if (twaRel > 180) twaRel -= 360;
         let targetStw = 3 + (4 * Math.sin((Math.abs(twaRel) - 45) * Math.PI / 125)); sim.stw += (Math.max(3, Math.min(8, targetStw)) - sim.stw) * 0.05;
         const rawLeeway = Math.sin(degToRad(twaRel)) * 4; sim.leeway += (rawLeeway - sim.leeway) * 0.05;
-        const cog = (sim.hdg - sim.leeway + 360) % 360; const twaRad = degToRad(twaRel);
-        const aws = Math.sqrt(Math.pow(sim.stw, 2) + Math.pow(sim.tws, 2) + 2 * sim.stw * sim.tws * Math.cos(twaRad));
+        const bX = sim.stw * Math.sin(degToRad(sim.hdg + sim.leeway)), bY = sim.stw * Math.cos(degToRad(sim.hdg + sim.leeway));
+        const cX = sim.currentSpeed * Math.sin(degToRad(sim.currentDir)), cY = sim.currentSpeed * Math.cos(degToRad(sim.currentDir));
+        const sog = Math.sqrt(Math.pow(bX + cX, 2) + Math.pow(bY + cY, 2)), cog = (radToDeg(Math.atan2(bX + cX, bY + cY)) + 360) % 360;
+        const twaRad = degToRad(twaRel), aws = Math.sqrt(Math.pow(sim.stw, 2) + Math.pow(sim.tws, 2) + 2 * sim.stw * sim.tws * Math.cos(twaRad));
         const awa = Math.atan2(sim.tws * Math.sin(twaRad), sim.stw + sim.tws * Math.cos(twaRad));
         processIncomingData("environment.wind.speedApparent", ktsToMs(aws)); processIncomingData("environment.wind.angleApparent", awa);
         processIncomingData("environment.depth.belowTransducer", sim.depth); processIncomingData("navigation.headingTrue", degToRad(sim.hdg));
-        processIncomingData("navigation.speedThroughWater", ktsToMs(sim.stw)); processIncomingData("navigation.speedOverGround", ktsToMs(sim.stw));
+        processIncomingData("navigation.speedThroughWater", ktsToMs(sim.stw)); processIncomingData("navigation.speedOverGround", ktsToMs(sog));
         processIncomingData("navigation.courseOverGroundTrue", degToRad(cog)); processIncomingData("navigation.position", { latitude: 45.0, longitude: 12.0 });
     }, 1000);
 }
 
 // ==========================================================================
-// 10. INIT
+// 11. INIT
 // ==========================================================================
+window.addEventListener('contextmenu', e => e.preventDefault(), true);
 (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);

package/index.html

@@ -11,9 +11,6 @@
 </head>
 <body>
     
-    <!-- Etichetta stato connessione SignalK -->
-    <div id="status" class="offline">OFFLINE</div>
-    
     <div class="main-container">
         
         <!-- ======================================================= -->
@@ -34,10 +31,10 @@
                 </div>
             </div>
 
-            <!-- SOG: Velocità sul fondo (GPS) -->
+            <!-- SOG / VMG: Velocità sul fondo o verso il vento -->
             <div class="data-box">
                 <div class="label-row">
-                    <span class="label">SOG</span>
+                    <span class="label" id="sog-vmg-label">SOG</span>
                     <span class="unit">kts</span>
                 </div>
                 <span class="value" id="sog">0.0</span>
@@ -83,15 +80,15 @@
         </div>
 
         <!-- ======================================================= -->
-        <!-- CENTRO: Strumento Vento SVG (Ingrandito e Ottimizzato)  -->
+        <!-- CENTRO: Strumento Vento SVG (Pannello di Controllo)     -->
         <!-- ======================================================= -->
         <div class="center-panel">
-            <!-- ViewBox ottimizzato per ingrandire il diametro (Zoom in) -->
+            <!-- Stato Connessione integrato nell'angolo del pannello centrale -->
+            <div id="status" class="offline">OFFLINE</div>
+
             <svg id="wind-gauge" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet">
                 <defs>
-                    <!-- Maschera per tagliare la barca esattamente sul bordo del cerchio r=50 -->
                     <clipPath id="boat-clip"><circle cx="200" cy="200" r="50" /></clipPath>
-                    <!-- Gradienti e Maschere per i settori del vento -->
                     <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" />
@@ -103,74 +100,52 @@
                         <stop offset="75%" style="stop-color:#ff8800;stop-opacity:1" />
                         <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" />
                     </linearGradient>
-                    <!-- Gradiente Leeway per la Night Mode (Rosso cupo al centro, Rosso vivo ai lati) -->
                     <linearGradient id="leeway-night-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-                        <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" /> <!-- Estremo SX: Rosso vivo -->
-                        <stop offset="50%" style="stop-color:#330000;stop-opacity:1" /> <!-- Centro: Rosso cupo -->
-                        <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" /> <!-- Estremo DX: Rosso vivo -->
+                        <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
+                        <stop offset="50%" style="stop-color:#330000;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 (Hotspot) 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>
                 </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/Sinitra, Verde/Dritta, Arancio/Poppa) -->
                 <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 Gradate (Generate dinamicamente da Javascript) -->
                 <g id="ticks"></g>
                 
-                <!-- Etichette fisse dei Gradi -->
                 <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>
-                    
-                    <!-- Dettagli 30-150 Gradi -->
-                    <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 / COG (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>
                 
-                <!-- Grande area sensibile al tocco (Hotspot) con Glow per Fullscreen -->
                 <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 Centrale (Spinta Y+5 per centratura visiva perfetta) -->
                 <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)"
                       clip-path="url(#boat-clip)"
                       style="pointer-events: none;" />
                 
-                <!-- Display Centrale Numerico: Vento Apparente -->
                 <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 Dinamiche: AWA (Apparente) e TWA (Reale) -->
                 <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>
@@ -183,24 +158,25 @@
                     <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#ffffff" opacity="0.3" />
                 </g>
                 
-                <!-- Barra LEEWAY / SCARROCCIO Inferiore -->
                 <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" />
                     
-                    <!-- Scala gradi Leeway -->
+                    <!-- RIPRISTINO SCALA: Tacche ogni 5 gradi (31.25px per intervallo) -->
                     <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" />
+                        <line x1="0" y1="-2" x2="0" y2="14" />          <!-- -20° -->
+                        <line x1="31.25" y1="2" x2="31.25" y2="10" />  <!-- -15° -->
+                        <line x1="62.5" y1="2" x2="62.5" y2="10" />    <!-- -10° -->
+                        <line x1="93.75" y1="3" x2="93.75" y2="9" />   <!-- -5° -->
+                        <line x1="125" y1="-2" x2="125" y2="14" />     <!-- 0° centrale -->
+                        <line x1="156.25" y1="3" x2="156.25" y2="9" />  <!-- +5° -->
+                        <line x1="187.5" y1="2" x2="187.5" y2="10" />  <!-- +10° -->
+                        <line x1="218.75" y1="2" x2="218.75" y2="10" /> <!-- +15° -->
+                        <line x1="250" y1="-2" x2="250" y2="14" />     <!-- +20° -->
                     </g>
+
+                    <!-- Etichette numeriche riallineate -->
                     <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>
@@ -217,7 +193,6 @@
         <!-- ======================================================= -->
         <div class="side-panel right-panel">
             
-            <!-- DEPTH: Profondità sotto il trasduttore -->
             <div class="data-box">
                 <div class="label-row">
                     <span class="unit">m</span>
@@ -230,7 +205,6 @@
                 </div>
             </div>
 
-            <!-- TWS: Velocità del vento reale -->
             <div class="data-box">
                 <div class="label-row">
                     <span class="unit">kts</span>
@@ -243,7 +217,6 @@
                 </div>
             </div>
 
-            <!-- TWA: Angolo del vento reale -->
             <div class="data-box">
                 <div class="label-row">
                     <span class="label">TWA (MEAN)</span>
@@ -251,7 +224,6 @@
                 <span class="value value-large" id="twa-avg">---&deg;</span>
             </div>
 
-            <!-- AWA: Angolo del vento apparente -->
             <div class="data-box">
                 <div class="label-row">
                     <span class="label">AWA (MEAN)</span>
@@ -259,48 +231,30 @@
                 <span class="value value-large" id="awa-avg">---&deg;</span>
             </div>
 
-            <!-- TWD: Direzione geografica reale del vento (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">
-                                            <!-- Cerchio esterno fisso -->
-                                            <circle cx="20" cy="20" r="18.5" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.2"/>
-                                            
-                                            <!-- Punti Cardinali Nord/Sud -->
-                                            <text x="20" y="8" fill="#e74c3c" font-size="5.5" text-anchor="middle" font-weight="900">N</text>
-                                            <text x="20" y="36" fill="rgba(255,255,255,0.3)" font-size="5.5" text-anchor="middle" font-weight="900">S</text>
-
-                                            <!-- Tacche Orizzontali (Est / Ovest) -->
-                                            <g stroke="rgba(255,255,255,0.2)" stroke-width="1">
-                                                <line x1="2" y1="20" x2="5" y2="20" /> <!-- Ovest -->
-                                                <line x1="35" y1="20" x2="38" y2="20" /> <!-- Est -->
-                                            </g>
-
-                                            <!-- 1. SAGOMA BARCA: Ruota con l'Heading (id: twd-boat-wrap) -->
-                                            <g id="twd-boat-wrap" transform="rotate(0, 20, 20)">
-                                                <path d="M 20,17 L 17,26 L 20,24.5 L 23,26 Z" fill="white" opacity="0.2" />
-                                            </g>
-
-                                            <g id="twd-arrow" transform="rotate(0, 20, 20)">
-                                                <path id="twd-wind-chevron" d="M 17,5 L 20,7.5 L 23,5"
-                                                      fill="none"
-                                                      stroke="#ffff00"
-                                                      stroke-width="2.2"
-                                                      stroke-linecap="round"
-                                                      stroke-linejoin="round" />
-                                                <circle id="trend-dot-cw" cx="24" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
-                                                <circle id="trend-dot-ccw" cx="16" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
-                                            </g>
-                                        </svg>
+                        <circle cx="20" cy="20" r="18.5" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.2"/>
+                        <text x="20" y="8" fill="#e74c3c" font-size="5.5" text-anchor="middle" font-weight="900">N</text>
+                        <text x="20" y="36" fill="rgba(255,255,255,0.3)" font-size="5.5" text-anchor="middle" font-weight="900">S</text>
+                        <g id="twd-boat-wrap" transform="rotate(0, 20, 20)">
+                            <path d="M 20,17 L 17,26 L 20,24.5 L 23,26 Z" fill="white" opacity="0.2" />
+                        </g>
+                        <g id="twd-arrow" transform="rotate(0, 20, 20)">
+                            <path id="twd-wind-chevron" d="M 17,5 L 20,7.5 L 23,5" fill="none" stroke="#ffff00" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+                            <circle id="trend-dot-cw" cx="24" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
+                            <circle id="trend-dot-ccw" cx="16" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
+                        </g>
+                    </svg>
                     <span class="value value-large" id="twd-avg">---&deg;</span>
                 </div>
             </div>
             
-        </div> <!-- /Destra -->
-    </div> <!-- /Main Container -->
+        </div>
+    </div>
     
     <script src="app.js"></script>
 </body>

package/package.json

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

package/style.css

@@ -25,27 +25,17 @@ body {
     box-sizing: border-box;
     gap: 8px; /* Spazio costante tra tutti i blocchi della dashboard */
     
-    /*
-       LAYOUT LIQUIDO:
+    /* LAYOUT LIQUIDO:
        I lati hanno un minimo vitale (180px) per proteggere i testi.
-       Il centro (auto) si adatta millimetricamente al diametro dell'SVG.
-    */
+       Il centro (auto) si adatta millimetricamente al diametro dell'SVG. */
     grid-template-columns: minmax(180px, 1fr) minmax(auto, 1.5fr) minmax(180px, 1fr);
     grid-template-rows: 100%;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     justify-content: stretch;
 }
 
-/* Espansione colonne per schermi molto larghi (es. 16:10 / 16:9)
-@media (min-aspect-ratio: 1.5) {
-    .main-container {
-        grid-template-columns: minmax(200px, 1fr) minmax(auto, 3fr) minmax(200px, 1fr);
-        gap: 15px;
-    }
-}*/
-
 /* ==========================================================================
-   2. PANNELLI E DATA-BOX
+   2. PANNELLI E DATA-BOX (DISTRIBUZIONE FR)
    ========================================================================== */
 .side-panel {
     display: flex;
@@ -54,12 +44,14 @@ body {
     border-radius: 12px;
     height: 100%;
     overflow: hidden;
+    gap: 2px;
 }
 
 .left-panel { grid-column: 1; }
 
 .center-panel {
     grid-column: 2;
+    position: relative; /* Indispensabile per posizionare #status al suo interno */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -77,13 +69,14 @@ body {
 .data-box {
     position: relative;
     border-bottom: 1px solid #222;
-    padding: 4px 8px;
+    padding: 2px 4px; /* Padding ottimizzato per il recupero spazio verticale */
     display: flex;
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
-    container-type: size; /* Rende il box misurabile per l'unità cqh */
-    flex: 1;
+    container-type: size; /* Per unità cqh */
+    flex: 1 1 0px; /* Divide lo spazio equamente in 5 parti */
+    min-height: 0;
     overflow: hidden;
 }
 
@@ -91,35 +84,24 @@ body {
 .left-panel .data-box { align-items: flex-start; text-align: left; }
 .right-panel .data-box { align-items: flex-end; text-align: right; }
 
-.side-panel {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    gap: 2px;
-}
-
-.data-box {
-    flex: 1 1 0px; /* Ogni box si divide lo spazio equamente, ma può ridursi se serve */
-    min-height: 0; /* Fondamentale per permettere al grafico di non eccedere */
-    padding: 2px 4px; /* Ancora più compatto */
-}
-
 /* ==========================================================================
-   3. TACTICAL FOCUS MODE (AUTO-EXPANDING SPLIT)
+   3. TACTICAL FOCUS MODE (AUTO-EXPANDING SPLIT / DUAL SCREEN)
    ========================================================================== */
 
 /* Nasconde le colonne non focalizzate */
 .focus-active .side-panel:not(.has-focus) { display: none !important; }
 
-/* Protezione larghezza minima per il grafico focalizzato */
-.focus-active .side-panel.has-focus { min-width: 400px !important; }
-
-/* Logica di espansione: il box scelto prende tutto il resto dello spazio (1fr) */
-.focus-active.focus-side-left { grid-template-columns: 1fr auto !important; }
+/* In Focus Mode Left: [Pannello Sinistro Largo | Centro Stretto] */
+.focus-active.focus-side-left {
+    grid-template-columns: 2fr auto !important;
+}
 .focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
 .focus-active.focus-side-left .center-panel { grid-column: 2 !important; justify-content: flex-start; }
 
-.focus-active.focus-side-right { grid-template-columns: auto 1fr !important; }
+/* In Focus Mode Right: [Centro Stretto | Pannello Destro Largo] */
+.focus-active.focus-side-right {
+    grid-template-columns: auto 2fr !important;
+}
 .focus-active.focus-side-right .center-panel { grid-column: 1 !important; justify-content: flex-start; }
 .focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
 
@@ -138,15 +120,6 @@ body {
 .focus-active .is-focused .label-row .label { font-size: 2rem !important; }
 .focus-active .is-focused .label-row .unit { font-size: 2rem !important; }
 
-/* Ingrandimento etichette Hercules in Focus */
-.focus-active .is-focused.box-hercules .unit::before,
-.focus-active .is-focused.box-hercules .unit::after,
-.focus-active .is-focused.box-hercules .label::before,
-.focus-active .is-focused.box-hercules .label::after {
-    font-size: 1.5rem !important;
-    letter-spacing: 2px !important;
-}
-
 .focus-active .is-focused .sparkline path { stroke-width: 1px !important; }
 
 /* ==========================================================================
@@ -154,17 +127,10 @@ body {
    ========================================================================== */
 .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
 
-/* Simmetria Titoli/Unità: SX [Label...Unit], DX [Unit...Label] */
-.left-panel .label-row { justify-content: space-between; flex-direction: row; }
-.right-panel .label-row { justify-content: space-between; flex-direction: row; }
-
-/* Forza i titoli MEAN (senza unità) a destra nella colonna DX */
-.right-panel .label-row .label:only-child { margin-left: auto; }
-
 .label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
 .unit { color: #888; font-size: 0.6rem; font-weight: bold; }
 
-/* Numero standard (22% altezza box per non coprire il grafico) */
+/* Numero standard (22% altezza box) */
 .value {
     color: #fff;
     font-size: clamp(1.2rem, 22cqh, 3rem);
@@ -174,12 +140,7 @@ body {
     padding-bottom: 5px;
 }
 
-/* Centratura verticale automatica per i box senza grafico */
-.value-large, .dual-value-container, .value-with-compass {
-    margin-top: auto;
-    margin-bottom: auto;
-}
-
+.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; }
 
 /* TACK Layout (Mure opposte) */
@@ -189,12 +150,11 @@ body {
 .value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
 
 /* ==========================================================================
-   5. BUSSOLA TWD DINAMICA
+   5. BUSSOLA TWD DINAMICA (WIDGET)
    ========================================================================== */
 .value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 5px; }
 
 .mini-compass {
-    /* Forma circolare protetta: 80% dell'altezza o 42% della larghezza */
     width: min(80cqh, 42cqw);
     height: min(80cqh, 42cqw);
     aspect-ratio: 1 / 1;
@@ -206,13 +166,8 @@ body {
     transition: all 0.4s ease;
 }
 
-.value-with-compass .value-large {
-    margin: 0; flex: 1; text-align: right;
-    font-size: clamp(1rem, 38cqh, 4rem); white-space: nowrap;
-}
-
 /* ==========================================================================
-   6. GRAFICI E SCALE (SIMMETRIA INTERNA)
+   6. GRAFICI E SCALE (OTTIMIZZAZIONE ORIZZONTALE)
    ========================================================================== */
 .graph-wrapper {
     position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
@@ -220,7 +175,7 @@ body {
     border-radius: 4px; gap: 0px !important;
 }
 
-/* Spostamento verso il centro per eliminare spazi neri morti */
+/* Allargamento verso il centro */
 .left-panel .graph-wrapper { margin-right: -6px; }
 .right-panel .graph-wrapper { margin-left: -6px; }
 
@@ -229,17 +184,17 @@ body {
 
 .scale-labels {
     display: flex; flex-direction: column; justify-content: space-between;
-    font-size: 10px; color: #777; font-weight: bold; min-width: 12px;
-    height: 100%; line-height: 1; padding: 0 px 0; border: none !important;
+    font-size: 8px; color: #777; font-weight: bold; min-width: 12px;
+    height: 100%; line-height: 1; padding: 0; border: none !important;
 }
 
-/* Simmetria: le scale numeriche "guardano" sempre il quadrante centrale */
-.left-panel .scale-labels { order: 2; text-align: left; padding-left: 4px; border-left: 1px solid rgba(255,255,255,0.08); }
+/* Simmetria scale */
+.left-panel .scale-labels { order: 2; text-align: left; padding-left: 4px; }
 .left-panel .sparkline { order: 1; }
-.right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px; border-right: 1px solid rgba(255,255,255,0.08); }
+.right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px; }
 .right-panel .sparkline { order: 2; }
 
-/* Colori semantici per i grafici */
+/* Colori grafici */
 #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); }
@@ -252,9 +207,7 @@ body {
 .box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
 .box-hercules .scale-labels { color: #ff8888; }
 
-/* Etichetta Hercules dinamica accanto alle unità */
-.box-hercules .unit::before, .box-hercules .unit::after,
-.box-hercules .label::before {
+.box-hercules .unit::before, .box-hercules .unit::after, .box-hercules .label::before {
     font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
 }
 .left-panel .box-hercules .unit::before { content: "HERCULES "; }
@@ -262,226 +215,100 @@ body {
 .right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
 
 /* ==========================================================================
-   8. STATI E ANIMAZIONI
+   8. STATI, STATUS E ANIMAZIONI
    ========================================================================== */
-#status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
+#status {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 0.6rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    z-index: 1000;
+    letter-spacing: 1px;
+    background: rgba(0,0,0,0.4);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
 .online { color: #2ecc71; opacity: 0.5; }
 .offline { color: #e74c3c; font-weight: bold; }
 
-/* Animazioni fluide per gli elementi rotanti (0.8s) */
 #awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap {
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-#leeway-mask-rect { transition: none; }
+.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
 .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; }
+@keyframes blink-unstable { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
 
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================
-   9. RESPONSIVE (PORTRAIT MODE - IPHONE/TABLET)
+   9. RESPONSIVE (PORTRAIT MODE)
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
-    .main-container {
-        grid-template-columns: 1fr 1fr !important;
-        grid-template-rows: 45vh calc(55vh - 8px) !important;
-    }
-    
+    .main-container { grid-template-columns: 1fr 1fr !important; grid-template-rows: 45vh calc(55vh - 8px) !important; }
     .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; padding: 5px 0; }
     .left-panel { grid-row: 2 !important; grid-column: 1 !important; }
     .right-panel { grid-row: 2 !important; grid-column: 2 !important; }
-
-    /* Focus Mode Verticale: Impilamento Flex sopra/sotto */
     .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 calc(55vh - 8px) !important; width: 100% !important; display: flex !important; }
-
-    /* Altezze box Portrait dinamiche (per evitare overflow) */
+    .focus-active .center-panel { flex: 0 0 45vh !important; }
+    .focus-active .side-panel.has-focus { flex: 0 0 calc(55vh - 8px) !important; display: flex !important; }
     .data-box { height: auto !important; flex: 1 !important; }
-    .data-box:nth-child(1), .data-box:nth-child(2) { flex: 1.5 !important; }
-
-    .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
-    .value.dual-val { font-size: clamp(0.9rem, 30cqh, 1.4rem); }
-    
-    /* Protezione bussola per box bassi (Portrait) */
-    .mini-compass {
-        width: min(70cqh, 40cqw) !important;
-        height: min(70cqh, 40cqw) !important;
-    }
-    
-    .right-panel .label-row .label:only-child { margin-left: auto !important; }
-    .box-hercules .unit::before, .box-hercules .unit::after { font-size: 6px !important; }
 }
 
 /* ==========================================================================
    10. NIGHT MODE (RED ON BLACK - TACTICAL)
    ========================================================================== */
-body.night-mode {
-    background-color: #000 !important;
-    color: #ff0000 !important;
-}
-
-/* --- Pannelli e Box --- */
-.night-mode .side-panel {
-    background: rgba(20, 0, 0, 0.4);
-    border: 1px solid #330000;
-}
-.night-mode .data-box {
-    border-bottom-color: #260000;
-}
-
-/* --- Tipografia Secondaria (Titoli, Unità, TACK Labels) --- */
-.night-mode .label,
-.night-mode .unit,
-.night-mode .dual-label {
-    color: #800000 !important; /* Rosso cupo per non affaticare la vista */
-}
-
-/* --- Valori Numerici --- */
-.night-mode .value,
-.night-mode .value-large {
-    color: #ff3333 !important;
-    text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); /* Bagliore per profondità */
-}
-
-/* --- Grafici Sparkline (Solo Linea, No Riempimento) --- */
-.night-mode .graph-wrapper {
-    background: rgba(30, 0, 0, 0.3) !important;
-}
-
-/* Nasconde l'area di riempimento sotto la linea */
-.night-mode .sparkline path:first-of-type {
-    display: none !important;
-}
-
-/* Rende la linea del tracciato molto più visibile */
-.night-mode .sparkline path {
-    fill: none !important;
-    stroke: #ff3333 !important;
-    stroke-width: 1.8px !important;
-    opacity: 1 !important;
-    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4));
-}
-
-/* Griglie interne (Orizzontali e Verticali) uniformi */
-.night-mode .sparkline line {
-    stroke: #4d0000 !important;
-    stroke-width: 0.7px !important;
-    opacity: 1 !important;
-}
-
-/* Forza i segmenti colorati del TWS alla stessa luminosità della linea */
-.night-mode #tws-graph line:not([stroke*="rgba"]) {
-    stroke: #ff3333 !important;
-    stroke-width: 1.8px !important;
-}
-
-/* Numeri delle scale a lato dei grafici */
-.night-mode .scale-labels {
-    color: #660000 !important;
-}
-
-/* --- Hercules Mode in Night Mode --- */
-.night-mode .box-hercules {
-    background: rgba(60, 0, 0, 0.2) !important;
-}
-.night-mode .line-hercules {
-    filter: drop-shadow(0 0 6px #ff0000) !important;
-}
+body.night-mode { background-color: #000 !important; color: #ff0000 !important; }
+.night-mode .side-panel { background: rgba(20, 0, 0, 0.4); border: 1px solid #330000; }
+.night-mode .data-box { border-bottom-color: #260000; }
+.night-mode .label, .night-mode .unit, .night-mode .dual-label { color: #800000 !important; }
+.night-mode .value, .night-mode .value-large { color: #ff3333 !important; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); }
+
+.night-mode .graph-wrapper { background: rgba(30, 0, 0, 0.3) !important; }
+.night-mode .sparkline path:first-of-type { display: none !important; }
+.night-mode .sparkline path { fill: none !important; stroke: #ff3333 !important; stroke-width: 1.8px !important; opacity: 1 !important; filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4)); }
+.night-mode .sparkline line { stroke: #4d0000 !important; stroke-width: 0.7px !important; }
+.night-mode #tws-graph line:not([stroke*="rgba"]) { stroke: #ff3333 !important; stroke-width: 1.8px !important; }
+.night-mode .scale-labels { color: #660000 !important; }
+
+.night-mode .box-hercules { background: rgba(60, 0, 0, 0.2) !important; }
+.night-mode .line-hercules { filter: drop-shadow(0 0 6px #ff0000) !important; }
 
-/* Scritta Hercules in alto (Colore personalizzato #f60000) */
-.night-mode .box-hercules .unit::before,
-.night-mode .box-hercules .unit::after,
-.night-mode .box-hercules .label::before,
-.night-mode .box-hercules .label::after {
-    color: #f60000 !important;
-    font-weight: 700;
-    opacity: 0.9;
-    letter-spacing: 1px;
-}
-
-/* --- Strumento Centrale (Wind Gauge) --- */
 .night-mode #wind-gauge circle { stroke: #330000; }
 .night-mode #ticks line { stroke: #4d0000 !important; }
 .night-mode #tick-labels { fill: #800000 !important; }
 .night-mode #boat-icon { fill: #330000 !important; opacity: 0.6; }
 .night-mode #aws-val-svg { fill: #ff3333 !important; }
-
-/* Settori Vento (Distinguibili per stile, non per colore) */
-.night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #660000 !important; opacity: 0.8; } /* Sx Solid */
-.night-mode #wind-gauge path[stroke="#00ff00"] {
-    stroke: #660000 !important;
-    stroke-dasharray: 4, 3; /* Dx Dashed */
-    opacity: 0.8;
-}
-.night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; stroke-width: 8; } /* Poppa Dark */
-
-/* Lancette Wind Gauge */
 .night-mode #awa-pointer path { fill: #ff0000; stroke: #000; }
 .night-mode #twa-pointer path { fill: #800000; stroke: #000; }
 .night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
+.night-mode #aws-display-group text { fill: #ff3333 !important; }
+.night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
 
-/* --- Blocco Leeway (Scarroccio) --- */
-.night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
-.night-mode #leeway-val { fill: #ff3333 !important; }
-.night-mode g[stroke="#555"] line { stroke: #4d0000 !important; }
-.night-mode g[fill="#555"] text { fill: #660000 !important; }
-.night-mode rect[fill="#222"] { fill: #0a0000 !important; stroke: #200000; }
-
-/* --- Bussola TWD --- */
+/* Bussola TWD Night */
 .night-mode .mini-compass { border-color: #330000; background: #000; }
 .night-mode .mini-compass text { fill: #800000 !important; }
-.night-mode #twd-arrow path { fill: #ff0000 !important; stroke: #000 !important; }
-.night-mode #twd-boat-wrap path { fill: #ff0000 !important; opacity: 0.15; }
+.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; stroke-width: 3px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ff0000); transform-origin: center; }
+.night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; }
 
-.night-mode #center-glow feDropShadow {
-    flood-color: #ff0000 !important;
-    flood-opacity: 0.6 !important;
-}
-
-.night-mode #aws-display-group text {
-    fill: #ff3333 !important;
-}
-
-/* --- Modifica: Miglioramento visibilità TWD in Night Mode --- */
-.night-mode #twd-arrow #twd-wind-chevron {
-    stroke: #ff3333 !important;        /* Rosso più brillante */
-    stroke-width: 3px !important;      /* Più spesso */
-    opacity: 1 !important;             /* Piena opacità */
-    filter: drop-shadow(0 0 4px #ff0000); /* Effetto neon per staccarsi dallo sfondo */
-    transform-origin: center;          /* Forza il centro corretto */
-}
-
-/* Assicuriamoci che anche la punta della barca sia visibile */
-.night-mode #twd-boat-wrap path {
-    fill: #ff3333 !important;
-    opacity: 0.4 !important;
-}
-
-/* Definiamo il lampeggio */
-@keyframes blink-trend {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0; }
-}
+/* ==========================================================================
+   11. TREND VENTO E ALLARME STRAMBATA (GYBE)
+   ========================================================================== */
+@keyframes blink-trend { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
 
-/* Stile base dei pallini */
 #trend-dot-cw, #trend-dot-ccw, #trend-gauge-cw, #trend-gauge-ccw {
     opacity: 0.3;
     transition: opacity 0.3s ease;
 }
 
-/* Quando attivi la classe, forziamo l'animazione */
-.is-trending {
-    animation: blink-trend 1s infinite !important;
-}
+.is-trending { animation: blink-trend 1s infinite !important; }
 
 /* Allarme Strambata: Rosso fisso con bagliore neon */
 .is-gybing {
     opacity: 1 !important;
-    animation: none !important; /* Rimuove il lampeggio */
+    animation: none !important;
     filter: drop-shadow(0 0 8px #ff0000) !important;
 }