@sailingrotevista/rotevista-dash 2.0.11 → 2.0.13

package/app.js

@@ -333,7 +333,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 +382,66 @@ 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
+// ==========================================================================
+function startDynamicSimulation() {
+    ui.status.innerText = "SIM ATTIVO";
+    
+    // Parametri base iniziali
+    let baseTws = 60, baseDepth = 12, baseHdg = 45;
+    
+    simInterval = setInterval(() => {
+        // T rappresenta il progresso nel ciclo di 10 minuti (da 0 a 1)
+        const t = (Date.now() % 600000) / 600000;
+        const radT = t * 2 * Math.PI;
+
+        // Oscillazioni fluide (Sinusoidali)
+        const tws = baseTws + Math.sin(radT) * 5;      // Oscilla +- 5 kts
+        const depth = baseDepth + Math.sin(radT) * 3;  // Oscilla +- 3 m
+        const twa = 40 + Math.sin(radT * 2) * 10;      // Oscilla angolo +- 10°
+
+        // Calcoli Vettoriali (Nautica)
+        const stw = Math.min(tws * 0.7, 8); // Velocità barca legata al vento
+        const twaRad = degToRad(twa);
+        
+        // AWS = radq(stw² + tws² + 2*stw*tws*cos(twa))
+        const aws = Math.sqrt(Math.pow(stw, 2) + Math.pow(tws, 2) + 2 * stw * tws * Math.cos(twaRad));
+        // AWA = atan2(tws*sin(twa), stw + tws*cos(twa))
+        const awa = radToDeg(Math.atan2(tws * Math.sin(twaRad), stw + tws * Math.cos(twaRad)));
+        
+        // Calcolo Leeway (Scarroccio): più forte il vento, più scarroccia
+        const leeway = (tws > 5) ? Math.sin(twaRad) * (tws * 0.2) : 0;
+
+        // Invio dati al sistema
+        processIncomingData("environment.wind.speedTrue", ktsToMs(tws));
+        processIncomingData("environment.wind.angleTrueWater", degToRad(twa));
+        processIncomingData("environment.wind.speedApparent", ktsToMs(aws));
+        processIncomingData("environment.wind.angleApparent", degToRad(awa));
+        processIncomingData("environment.depth.belowTransducer", depth);
+        processIncomingData("navigation.headingTrue", degToRad(baseHdg));
+        processIncomingData("navigation.speedThroughWater", ktsToMs(stw));
+        processIncomingData("navigation.courseOverGroundTrue", degToRad(baseHdg + leeway));
+    }, 1000);
+}
+

package/index.html

@@ -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)">

package/package.json

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

package/style.css

@@ -5,9 +5,12 @@ body {
     background-color: #000;
     color: #fff;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
-    margin: 0; padding: 0;
-    height: 100vh; width: 100vw;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
     overflow: hidden;
+    /* BLOCCO TOTALE GESTI DI SISTEMA: Fondamentale per il Long Press su mobile */
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
@@ -16,30 +19,60 @@ body {
 
 .main-container {
     display: grid;
-    width: 100%; height: 100%;
-    padding: 5px; box-sizing: border-box;
-    gap: 8px;
-    grid-template-columns: minmax(200px, 1fr) minmax(auto, 3fr) minmax(230px, 1fr);
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    gap: 8px; /* Spazio costante tra tutti i blocchi della dashboard */
+    
+    /*
+       LAYOUT LIQUIDO:
+       I lati hanno un minimo vitale (180px) per proteggere i testi.
+       Il centro (auto) si adatta millimetricamente al diametro dell'SVG.
+    */
+    grid-template-columns: minmax(180px, 1fr) minmax(auto, 3fr) 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 larghi (16:10) */
+/* Espansione colonne per schermi molto larghi (es. 16:10 / 16:9) */
 @media (min-aspect-ratio: 1.5) {
     .main-container {
-        /* Aumentiamo il gap e il minimo vitale per schermi enormi */
         grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
         gap: 15px;
     }
 }
+
 /* ==========================================================================
    2. PANNELLI E DATA-BOX
    ========================================================================== */
-.side-panel { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border-radius: 12px; height: 100%; overflow: hidden; }
+.side-panel {
+    display: flex;
+    flex-direction: column;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    height: 100%;
+    overflow: hidden;
+}
+
 .left-panel { grid-column: 1; }
-.center-panel { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden; }
-.right-panel { grid-column: 3; align-items: flex-end; text-align: right; }
+
+.center-panel {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    overflow: hidden;
+}
+
+.right-panel {
+    grid-column: 3;
+    align-items: flex-end;
+    text-align: right;
+}
 
 .data-box {
     position: relative;
@@ -47,54 +80,41 @@ body {
     padding: 8px 12px;
     display: flex;
     flex-direction: column;
-    width: 100%; box-sizing: border-box;
-    container-type: size;
+    width: 100%;
+    box-sizing: border-box;
+    container-type: size; /* Rende il box misurabile per l'unità cqh */
     flex: 1;
     overflow: hidden;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    user-select: none;
-    touch-action: none;
 }
 
-/* Altezze Desktop (Validate) */
-.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; }
-
-/* Allineamento Speculare Box */
+/* Allineamento Speculare: SX a sinistra, DX a destra del box */
 .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; }
+
 /* ==========================================================================
    3. TACTICAL FOCUS MODE (AUTO-EXPANDING SPLIT)
    ========================================================================== */
 
-/* Nascondi i pannelli laterali non interessati */
+/* Nasconde le colonne non focalizzate */
 .focus-active .side-panel:not(.has-focus) { display: none !important; }
-.focus-active .side-panel.has-focus {
-    min-width: 400px !important;
-}
 
+/* Protezione larghezza minima per il grafico focalizzato */
+.focus-active .side-panel.has-focus { min-width: 400px !important; }
 
-
-/*
-   LOGICA POSIZIONE E LARGHEZZA:
-   Il Vento prende solo la larghezza del suo cerchio (auto).
-   Il Box focalizzato si prende TUTTO il resto dello schermo (1fr).
-*/
-.focus-active.focus-side-left {
-    grid-template-columns: 1fr auto !important; /* Dati SX giganti, Vento DX compatto */
-}
+/* Logica di espansione: il box scelto prende tutto il resto dello spazio (1fr) */
+.focus-active.focus-side-left { grid-template-columns: 1fr 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; /* Vento SX compatto, Dati DX giganti */
-}
+.focus-active.focus-side-right { grid-template-columns: auto 1fr !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; }
 
-/* Gestione Box Focalizzato a tutto schermo */
+/* Styling del box in Focus Mode */
 .focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
 .focus-active .has-focus .data-box.is-focused {
     height: 100vh !important;
@@ -103,13 +123,13 @@ body {
     padding: 20px;
 }
 
-/* Tipografia Extreme per Focus Mode */
+/* Tipografia massiccia in Focus Mode */
 .focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 4rem) !important; margin-top: 15px; }
 .focus-active .is-focused .scale-labels { font-size: 32px !important; min-width: 40px !important; line-height: 1.2; }
 .focus-active .is-focused .label-row .label { font-size: 2rem !important; }
 .focus-active .is-focused .label-row .unit { font-size: 2rem !important; }
 
-/* Ingrandimento scritta Hercules in Focus */
+/* 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,
@@ -121,46 +141,51 @@ body {
 .focus-active .is-focused .sparkline path { stroke-width: 1px !important; }
 
 /* ==========================================================================
-   4. TIPOGRAFIA E LABEL-ROW (SIMMETRIA)
+   4. TIPOGRAFIA DINAMICA (ELASTICA CQH)
    ========================================================================== */
 .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
 
-/* SX: [Titolo] ... [Unità] */
+/* Simmetria Titoli/Unità: SX [Label...Unit], DX [Unit...Label] */
 .left-panel .label-row { justify-content: space-between; flex-direction: row; }
-
-/* DX: [Unità] ... [Titolo] */
 .right-panel .label-row { justify-content: space-between; flex-direction: row; }
 
-/* FIX: Spinge i titoli MEAN a destra nella colonna DX */
+/* 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; }
-.value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; padding-bottom: 5px; }
 
-.value-large, .dual-value-container, .value-with-compass { margin-top: auto; margin-bottom: auto; }
+/* Numero standard (22% altezza box per non coprire il grafico) */
+.value {
+    color: #fff;
+    font-size: clamp(1.2rem, 22cqh, 3rem);
+    font-weight: 600;
+    line-height: 0.9;
+    letter-spacing: -1px;
+    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 { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
 
-/* TACK Layout */
+/* TACK Layout (Mure opposte) */
 .dual-value-container { display: flex; justify-content: space-between; width: 100%; }
 .dual-value-col { display: flex; flex-direction: column; width: 48%; }
 .dual-label { color: #666; font-size: 0.55rem; font-weight: bold; text-transform: uppercase; margin-bottom: 2px; }
 .value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
 
 /* ==========================================================================
-   BUSSOLA TWD (CALIBRATA: Forma e Spazio)
+   5. BUSSOLA TWD DINAMICA
    ========================================================================== */
-.value-with-compass {
-    display: flex;
-    flex: 1;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    gap: 5px;
-}
+.value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 5px; }
 
 .mini-compass {
-    /* Bilanciamento: Grande ma con protezione larghezza per il testo */
+    /* Forma circolare protetta: 80% dell'altezza o 42% della larghezza */
     width: min(80cqh, 42cqw);
     height: min(80cqh, 42cqw);
     aspect-ratio: 1 / 1;
@@ -173,15 +198,12 @@ body {
 }
 
 .value-with-compass .value-large {
-    margin: 0;
-    flex: 1;
-    text-align: right;
-    font-size: clamp(1rem, 38cqh, 4rem);
-    white-space: nowrap;
+    margin: 0; flex: 1; text-align: right;
+    font-size: clamp(1rem, 38cqh, 4rem); white-space: nowrap;
 }
 
 /* ==========================================================================
-   5. GRAFICI E SCALE
+   6. GRAFICI E SCALE (SIMMETRIA INTERNA)
    ========================================================================== */
 .graph-wrapper {
     position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
@@ -189,84 +211,244 @@ body {
     border-radius: 4px; gap: 2px;
 }
 
-/* Spostamento verso il centro */
+/* 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 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: 10px; height: 100%; line-height: 1; padding: 2px 0; }
+.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;
+}
 
-/* Simmetria Scale */
+/* 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); }
 .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 .sparkline { order: 2; }
 
+/* Colori semantici per i 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); }
 #tws-graph { stroke: #ffffff; fill: rgba(255, 255, 255, 0.08); }
 
 /* ==========================================================================
-   6. HERCULES MODE (LABEL TOP E SIMMETRIA)
+   7. HERCULES MODE (ZOOM E VISUALS)
    ========================================================================== */
 .line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
 .box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
+.box-hercules .scale-labels { color: #ff8888; }
 
-/* Ingrandimento Hercules in Focus Mode */
-.focus-active .is-focused.box-hercules .unit::before,
-.focus-active .is-focused.box-hercules .unit::after,
-.focus-active .is-focused.box-hercules .label::before {
-    font-size: 16px !important; /* Raddoppiato in Focus */
-    letter-spacing: 2px;
-}
-
-/* Stile base Hercules */
+/* Etichetta Hercules dinamica accanto alle unità */
 .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;
 }
-
-/* Simmetria Hercules SX: "STW [HERCULES kts]" */
 .left-panel .box-hercules .unit::before { content: "HERCULES "; }
-
-/* Simmetria Hercules DX: "[m HERCULES] DEPTH" */
 .right-panel .box-hercules .unit::after { content: " HERCULES"; }
-
-/* Eccezione: Box MEAN colonna DX (Senza unità) -> "[HERCULES TWA]" */
-.right-panel .box-hercules .label:only-child::before { content: "HERCULES "; }
+.right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
 
 /* ==========================================================================
-   7. STATI E ANIMAZIONI
+   8. STATI E ANIMAZIONI
    ========================================================================== */
 #status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
 .online { color: #2ecc71; opacity: 0.5; }
 .offline { color: #e74c3c; font-weight: bold; }
-#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* 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; }
 .alarm-warning { color: #f1c40f !important; }
 .alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
+
 @keyframes blink-unstable { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
 .unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
+
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================
-   8. RESPONSIVE (PORTRAIT)
+   9. RESPONSIVE (PORTRAIT MODE - IPHONE/TABLET)
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
-    .main-container { grid-template-columns: 1fr 1fr !important; grid-template-rows: 45vh 55vh !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 55vh !important; width: 100% !important; display: flex !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) */
+    .data-box { height: auto !important; flex: 1 !important; }
+    .data-box:nth-child(1), .data-box:nth-child(2) { flex: 1.5 !important; }
 
-    .data-box:nth-child(1), .data-box:nth-child(2) { height: 13.5vh; }
-    .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 9.3vh; }
     .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); 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;
+}
+
+/* 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; }
+
+/* --- 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;
 }