@sailingrotevista/rotevista-dash 2.0.12 → 2.0.14

package/app.js

@@ -41,7 +41,7 @@ let simulationMode = false;
 let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
-
+let smoothedLeeway = 0;
 let pressTimer, isFocusActive = false, blockNextClick = false;
 
 const graphModes = {
@@ -167,12 +167,30 @@ function startDisplayLoop() {
         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 (store.raw["navigation.courseOverGroundTrue"] && store.raw["navigation.headingTrue"]) {
-            let drift = (radToDeg(store.raw["navigation.courseOverGroundTrue"]) - radToDeg(store.raw["navigation.headingTrue"]) + 360) % 360;
-            if (curSog < CONFIG.averages.minSpeed) drift = 0;
-            curTrackRot = getShortestRotation(curTrackRot, drift); ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
-            let ds = drift > 180 ? drift - 360 : drift; updateLeewayDisplay(Math.max(-20, Math.min(20, ds)));
-        } else updateLeewayDisplay(0);
+        if (store.raw["navigation.courseOverGroundTrue"] !== undefined && store.raw["navigation.headingTrue"] !== undefined) {
+            // 1. Calcolo grezzo
+            let rawDrift = (radToDeg(store.raw["navigation.courseOverGroundTrue"]) - radToDeg(store.raw["navigation.headingTrue"]) + 360) % 360;
+            if (rawDrift > 180) rawDrift -= 360;
+
+            // 2. Filtro di stabilità (Low Pass Filter)
+            // Se la barca è ferma, azzera brutalmente. Altrimenti filtra il valore.
+            if (curSog < CONFIG.averages.minSpeed) {
+                smoothedLeeway = 0;
+            } else {
+                // Smoothing: 90% valore precedente, 10% nuovo valore
+                smoothedLeeway = (smoothedLeeway * 0.9) + (rawDrift * 0.1);
+            }
+
+            // 3. Renderizziamo il valore filtrato
+            curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway);
+            ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
+            
+            // Limita il valore grafico e aggiorna il testo
+            let ds = Math.max(-20, Math.min(20, smoothedLeeway));
+            updateLeewayDisplay(ds);
+        } else {
+            updateLeewayDisplay(0);
+        }
 
         // --- 2. RENDERING MEDIE E BUSSOLA TATTICA ---
         if (now - lastAvgUIUpdate > 3000) {
@@ -182,14 +200,35 @@ function startDisplayLoop() {
                 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, isCompass = false) => {
+                if (!obj || obj.val === null) {
+                    el.innerHTML = "---&deg;";
+                    el.classList.remove('unstable-data');
+                } else {
+                    let val = Math.round(obj.val);
+                    let displayVal;
+
+                    if (isCompass) {
+                        // Formattazione per HEADING, COG, TWD (0-360°)
+                        displayVal = ((val + 360) % 360).toString().padStart(3, '0');
+                    } else {
+                        // Formattazione per AWA, TWA (-180 a 180°)
+                        // Se è negativo, il segno viene mantenuto correttamente
+                        displayVal = val.toString();
+                    }
+
+                    el.innerHTML = `${displayVal}&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);
+            
+            upUI(ui.hdg,    hObj,   true);  // Bussola
+            upUI(ui.cog,    cObj,   true);  // Bussola
+            upUI(ui.awaAvg, awObj,  false); // Angolo
+            upUI(ui.twaAvg, twObj,  false); // Angolo
+            upUI(ui.twdAvg, twdObj, true);  // Bussola (La direzione del vento è sempre 0-360)
             
             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;`;
@@ -201,6 +240,7 @@ function startDisplayLoop() {
 
             // Rotazione Bussola Tattica e Colore Sincronizzato
             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)`);
@@ -333,7 +373,48 @@ function toggleFocusMode(type, element) {
     el.addEventListener('pointerleave', () => clearTimeout(pressTimer));
 });
 
-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(); } }); }
+// ==========================================================================
+// GESTIONE HOTSPOT: Click (Fullscreen) e Long Press (Night Mode)
+// ==========================================================================
+if (ui.hotspot) {
+    let pressTimer;
+    const HOLD_DURATION = 1000; // 1 secondo di pressione per attivare Night Mode
+
+    ui.hotspot.addEventListener('pointerdown', (e) => {
+        // Avvia il timer al tocco
+        pressTimer = setTimeout(() => {
+            document.body.classList.toggle('night-mode');
+            // Feedback visivo immediato al cambio modalità
+            ui.hotspot.style.opacity = "0.5";
+            setTimeout(() => ui.hotspot.style.opacity = "1", 200);
+            pressTimer = null; // Reset per evitare che il click scatti dopo
+        }, HOLD_DURATION);
+    });
+
+    ui.hotspot.addEventListener('pointerup', (e) => {
+        if (pressTimer) {
+            clearTimeout(pressTimer);
+            pressTimer = null;
+            // Se arriviamo qui, è stato un click rapido -> Fullscreen
+            const doc = document.documentElement;
+            const 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();
+            }
+        }
+    });
+
+    ui.hotspot.addEventListener('pointerleave', () => {
+        if (pressTimer) {
+            clearTimeout(pressTimer);
+            pressTimer = null;
+        }
+    });
+}
 (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(); }
@@ -341,7 +422,88 @@ 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
+// Simulatore su Depth (3 click rapidi)
 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();
+                startDynamicSimulation(); // Chiama la nuova funzione
+            } else {
+                location.reload();
+            }
+            dC = 0;
+        }
+    };
 })());
+
+// ==========================================================================
+// 9. MOTORE SIMULAZIONE DINAMICA (VERSIONE STOCASTICA)
+// ==========================================================================
+function startDynamicSimulation() {
+    ui.status.innerText = "SIM ATTIVO";
+
+    // 1. STATO INIZIALE (Aggiunto leeway a 0)
+    let sim = {
+        hdg: Math.random() * 360,
+        tws: 12,
+        twd: Math.random() * 360,
+        depth: 12,
+        stw: 5,
+        leeway: 0, // Inerzia per il Leeway
+        startTime: Date.now()
+    };
+
+    simInterval = setInterval(() => {
+        const elapsed = (Date.now() - sim.startTime) / 1000;
+
+        // 2. SALTO DI VENTO (dopo 120 secondi)
+        if (elapsed > 120 && elapsed < 121) {
+            sim.twd = Math.random() * 360;
+        }
+
+        // 3. RAFFICA (ogni 40s per 5s) con smoothing 0.05
+        const inGust = (elapsed % 40) < 5;
+        const targetTws = (inGust ? 18 : 10) + Math.sin(elapsed / 10) * 2;
+        sim.tws += (targetTws - sim.tws) * 0.05; // Smoothing lento
+
+        // 4. POLARE SEMPLIFICATA (STW in base al TWA)
+        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; // Smoothing STW
+
+        // 5. CALCOLO LEEWAY CON FILTRO (Inerzia)
+        const rawLeeway = Math.sin(degToRad(twaRel)) * 4;
+        sim.leeway += (rawLeeway - sim.leeway) * 0.05; // Smoothing 0.05 per evitare i balli di +/- 3.1
+
+        // 6. CALCOLO VETTORIALE COG
+        const cog = (sim.hdg - sim.leeway + 360) % 360;
+
+        // 7. CALCOLO VENTO APPARENTE (AWS/AWA)
+        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 awa = radToDeg(Math.atan2(sim.tws * Math.sin(twaRad), sim.stw + sim.tws * Math.cos(twaRad)));
+
+        // 8. INVIO DATI PULITI
+        processIncomingData("environment.wind.speedTrue", ktsToMs(sim.tws));
+        processIncomingData("environment.wind.directionTrue", degToRad(sim.twd));
+        processIncomingData("environment.wind.angleTrueWater", degToRad(twaRel));
+        processIncomingData("environment.wind.speedApparent", ktsToMs(aws));
+        processIncomingData("environment.wind.angleApparent", degToRad(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.courseOverGroundTrue", degToRad(cog));
+
+        // Aggiorna display grafico
+        updateLeewayDisplay(sim.leeway);
+    }, 1000);
+}

package/index.html

@@ -9,7 +9,7 @@
     <title>Sailing Dashboard Pro</title>
     <link rel="stylesheet" href="style.css">
 </head>
-<body >
+<body>
     
     <!-- Etichetta stato connessione SignalK -->
     <div id="status" class="offline">OFFLINE</div>
@@ -89,6 +89,8 @@
             <!-- ViewBox ottimizzato per ingrandire il diametro (Zoom in) -->
             <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" />
@@ -101,6 +103,12 @@
                         <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 -->
+                    </linearGradient>
                     <clipPath id="leeway-clip">
                         <rect id="leeway-mask-rect" x="125" y="0" width="0" height="12" rx="2" />
                     </clipPath>
@@ -150,7 +158,11 @@
                 <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)" style="pointer-events: none;" />
+                <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)">
@@ -167,6 +179,8 @@
                 <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>
+                    <circle id="trend-gauge-cw"  cx="215" cy="110" r="4" fill="#ff0000" opacity="0" />
+                    <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#00ff00" opacity="0" />
                 </g>
                 
                 <!-- Barra LEEWAY / SCARROCCIO Inferiore -->
@@ -270,7 +284,6 @@
                                                 <path d="M 20,17 L 17,26 L 20,24.5 L 23,26 Z" fill="white" opacity="0.2" />
                                             </g>
 
-                                            <!-- 2. INDICATORE VENTO: Ruota con il TWD (id: twd-arrow) -->
                                             <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"
@@ -278,6 +291,8 @@
                                                       stroke-width="2.2"
                                                       stroke-linecap="round"
                                                       stroke-linejoin="round" />
+                                                <circle id="trend-dot-cw" cx="24" cy="7.5" r="1.5" fill="#ff0000" />
+                                                <circle id="trend-dot-ccw" cx="16" cy="7.5" r="1.5" fill="#00ff00" />
                                             </g>
                                         </svg>
                     <span class="value value-large" id="twd-avg">---&deg;</span>

package/package.json

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

package/style.css

@@ -77,7 +77,7 @@ body {
 .data-box {
     position: relative;
     border-bottom: 1px solid #222;
-    padding: 8px 12px;
+    padding: 4px 8px;
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -91,9 +91,18 @@ body {
 .left-panel .data-box { align-items: flex-start; text-align: left; }
 .right-panel .data-box { align-items: flex-end; text-align: right; }
 
-/* Altezze Proporzionali: 25% dell'altezza per i grafici, 16.6% per i MEAN/TACK */
-.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; }
+.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)
@@ -208,20 +217,20 @@ body {
 .graph-wrapper {
     position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
     display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.03);
-    border-radius: 4px; gap: 2px;
+    border-radius: 4px; gap: 0px !important;
 }
 
 /* Spostamento verso il centro per eliminare spazi neri morti */
 .left-panel .graph-wrapper { margin-right: -6px; }
 .right-panel .graph-wrapper { margin-left: -6px; }
 
-.sparkline { flex-grow: 1; height: 100%; background: transparent !important; display: block; }
+.sparkline { flex-grow: 1; height: 100%; width: 100% !important; background: transparent !important; display: block; }
 .sparkline path, .sparkline line { stroke-width: 1px !important; transition: all 0.3s ease; }
 
 .scale-labels {
     display: flex; flex-direction: column; justify-content: space-between;
-    font-size: 10px; color: #777; font-weight: bold; min-width: 18px;
-    height: 100%; line-height: 1; padding: 2px 0;
+    font-size: 10px; color: #777; font-weight: bold; min-width: 12px;
+    height: 100%; line-height: 1; padding: 0 px 0; border: none !important;
 }
 
 /* Simmetria: le scale numeriche "guardano" sempre il quadrante centrale */
@@ -309,49 +318,163 @@ body {
 }
 
 /* ==========================================================================
-   10. NIGHT MODE (RED ON BLACK)
+   10. NIGHT MODE (RED ON BLACK - TACTICAL)
    ========================================================================== */
 body.night-mode {
     background-color: #000 !important;
-    color: #ff0000 !important; /* Rosso puro per tutto il testo */
+    color: #ff0000 !important;
 }
 
-/* Pannelli e Box */
-.night-mode .side-panel { background: rgba(255, 0, 0, 0.02); border: 1px solid #200000; }
-.night-mode .data-box { border-bottom-color: #330000; }
+/* --- 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;
+}
 
-/* Etichette e Unità */
-.night-mode .label, .night-mode .unit, .night-mode .dual-label {
-    color: #660000 !important; /* Rosso molto scuro per le scritte secondarie */
+/* --- 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 {
+/* --- Valori Numerici --- */
+.night-mode .value,
+.night-mode .value-large {
     color: #ff3333 !important;
-    text-shadow: 0 0 5px rgba(255, 0, 0, 0.3); /* Leggero bagliore per la leggibilità */
+    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;
 }
 
-/* Grafici Sparkline */
-.night-mode .sparkline { background: rgba(50, 0, 0, 0.2); }
-.night-mode svg path { stroke: #aa0000 !important; fill: rgba(100, 0, 0, 0.1) !important; }
-.night-mode .scale-labels { color: #440000 !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;
+}
 
-/* Eccezione Grafico TWS (Mantiene i segmenti ma tutti su tonalità di rosso) */
-.night-mode #tws-graph line { stroke: #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 (Vento) */
+/* --- Strumento Centrale (Wind Gauge) --- */
 .night-mode #wind-gauge circle { stroke: #330000; }
-.night-mode #ticks line { stroke: #440000 !important; }
-.night-mode #tick-labels { fill: #660000 !important; }
-.night-mode #boat-icon { fill: #220000 !important; opacity: 0.8; }
+.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; }
 
-/* Lancette: Tutte rosse con diverse intensità */
+/* 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: #aa0000; stroke: #000; }
+.night-mode #twa-pointer path { fill: #800000; stroke: #000; }
 .night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
 
-/* Bussola TWD */
-.night-mode .mini-compass { border-color: #330000; }
-.night-mode .mini-compass text { fill: #660000 !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 --- */
+.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 #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; }
+}
+
+/* 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;
+}