Improve physics accuracy and enhance dark UI theme

compressione.html

@@ -331,6 +331,7 @@ <h2>Avviso Schermo Piccolo</h2>
     <!-- Load shared modules -->
     <script src="src/js/ui-utils.js"></script>
     <script src="src/js/shared-materials.js"></script>
+    <script src="src/js/material-physics.js"></script>
     <script src="src/js/performance-monitor.js"></script>
     <script src="src/js/particle-system.js"></script>
     <script src="src/js/chart-modal.js"></script>

fatica-flessione.html

@@ -348,6 +348,7 @@ <h2>Avviso Schermo Piccolo</h2>
 
     <!-- Load shared modules -->
     <script src="src/js/ui-utils.js"></script>
+    <script src="src/js/material-physics.js"></script>
     <script src="src/js/performance-monitor.js"></script>
     <script src="src/js/particle-system.js"></script>
     <script src="src/js/chart-modal.js"></script>

fatica-termica.html

@@ -372,6 +372,7 @@ <h2>Avviso Schermo Piccolo</h2>
 
     <!-- Load shared modules -->
     <script src="src/js/ui-utils.js"></script>
+    <script src="src/js/material-physics.js"></script>
     <script src="src/js/performance-monitor.js"></script>
     <script src="src/js/particle-system.js"></script>
     <script src="src/js/chart-modal.js"></script>

flessione.html

@@ -373,6 +373,7 @@ <h2>Avviso Schermo Piccolo</h2>
     <!-- Load shared modules -->
     <script src="src/js/ui-utils.js"></script>
     <script src="src/js/shared-materials.js"></script>
+    <script src="src/js/material-physics.js"></script>
     <script src="src/js/performance-monitor.js"></script>
     <script src="src/js/particle-system.js"></script>
     <script src="src/js/chart-modal.js"></script>

src/css/common.css

@@ -12,49 +12,57 @@
 
 /* === CSS Variables === */
 :root {
-    /* Professional dark colors */
-    --bg-primary: #0c0d10;
-    --bg-secondary: #12141a;
-    --bg-tertiary: #181b22;
-    --bg-panel: #1c1f28;
-
-    /* Text colors */
-    --text-primary: #e8e9eb;
+    /* Enhanced dark professional colors - deeper and more muted */
+    --bg-primary: #08090b;
+    --bg-secondary: #0e1015;
+    --bg-tertiary: #13151b;
+    --bg-panel: #181a21;
+    --bg-panel-elevated: #1d1f27;
+
+    /* Text colors - improved contrast */
+    --text-primary: #e5e7eb;
     --text-secondary: #9ca3af;
     --text-muted: #6b7280;
-
-    /* Accent colors */
+    --text-dim: #4b5563;
+
+    /* Accent colors - more professional, less saturated */
     --accent-primary: #3b82f6;
-    --accent-success: #22c55e;
+    --accent-success: #10b981;
     --accent-danger: #ef4444;
     --accent-warning: #f59e0b;
-
-    /* Borders */
-    --border-color: rgba(255, 255, 255, 0.06);
-    --border-hover: rgba(255, 255, 255, 0.12);
-
-    /* Button colors */
-    --button-bg: #22262f;
-    --button-hover: #2a2f3a;
-
+
+    /* Borders - flatter, more subtle */
+    --border-color: rgba(255, 255, 255, 0.05);
+    --border-hover: rgba(255, 255, 255, 0.1);
+    --border-subtle: rgba(255, 255, 255, 0.03);
+
+    /* Button colors - flatter design */
+    --button-bg: #1a1c24;
+    --button-hover: #21242d;
+
     /* Spacing */
     --spacing-xs: 4px;
     --spacing-sm: 8px;
     --spacing-md: 12px;
     --spacing-lg: 20px;
     --spacing-xl: 32px;
-    
-    /* Border radius */
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    
+
+    /* Border radius - slightly flatter */
+    --radius-sm: 3px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+
     /* Transitions */
     --transition: 0.2s ease;
-    
+
     /* Panel dimensions */
     --panel-width: 340px;
     --panel-width-tablet: 300px;
+
+    /* Layout constants for collision prevention */
+    --info-popup-max-height: 180px;
+    --formulas-header-height: 44px;
+    --notification-top-spacing: 40px;
 }
 
 /* === Base Styles === */
@@ -380,21 +388,27 @@ button {
     font-size: 0.8rem;
     font-weight: 500;
     transition: all var(--transition);
+    /* Flat design - no gradients or shadows */
 }
 
 button:hover {
     background: var(--button-hover);
     border-color: var(--border-hover);
 }
 
+button:active {
+    transform: translateY(1px);
+}
+
 button.start {
-    background: rgba(34, 197, 94, 0.15);
-    border-color: rgba(34, 197, 94, 0.3);
+    background: rgba(16, 185, 129, 0.12);
+    border-color: rgba(16, 185, 129, 0.25);
     color: var(--accent-success);
 }
 
 button.start:hover {
-    background: rgba(34, 197, 94, 0.25);
+    background: rgba(16, 185, 129, 0.18);
+    border-color: rgba(16, 185, 129, 0.35);
 }
 
 button.reset {
@@ -702,11 +716,11 @@ button.reset:hover {
     color: var(--accent-danger);
 }
 
-/* === Notification System (Top-Left, below info-popup and formulas panel) === */
+/* === Notification System (Top-Left, dynamically positioned) === */
 #notification-container {
     position: fixed;
-    /* Position below info-popup (~200px height) + formulas-panel header (~44px collapsed) */
-    top: 240px;
+    /* Dynamic positioning using calc to prevent overlap with info-popup and formulas */
+    top: calc(var(--info-popup-max-height) + var(--formulas-header-height) + var(--notification-top-spacing) + var(--spacing-lg));
     left: var(--spacing-lg);
     z-index: 300;
     display: flex;
@@ -725,7 +739,8 @@ button.reset:hover {
     align-items: center;
     gap: var(--spacing-md);
     animation: notificationSlideIn 0.3s ease-out;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    /* Flat design - reduced shadow */
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
     pointer-events: auto;
 }
 
@@ -1034,11 +1049,11 @@ button.reset:hover {
         border-left: none;
         border-top: 1px solid var(--border-color);
     }
-    
+
     #control-panel.hidden {
         transform: translateY(100%);
     }
-    
+
     .panel-toggle {
         top: auto;
         bottom: calc(50vh - 20px);
@@ -1047,51 +1062,53 @@ button.reset:hover {
         border-radius: var(--radius-md) var(--radius-md) 0 0;
         border-bottom: none;
     }
-    
+
     .panel-toggle.hidden {
         bottom: 0;
         border-bottom: 1px solid var(--border-color);
     }
-    
+
     .back-btn {
         top: var(--spacing-md);
         right: var(--spacing-md);
     }
-    
+
     #info-popup {
         max-width: calc(100% - 100px);
         min-width: 200px;
         left: var(--spacing-md);
         font-size: 0.85rem;
     }
-    
+
     #formulas-panel {
         display: none;  /* Hide on small screens - too complex */
     }
-    
+
     #color-legend {
         display: none;
     }
-
+
+    /* Improved mobile layout - better spacing to prevent overlaps */
     #chart-panel {
         width: calc(100% - 40px);
         max-width: 350px;
-        bottom: calc(50vh + 10px);
+        bottom: calc(50vh + 20px); /* Increased spacing from panel */
         left: 50%;
         transform: translateX(-50%);
     }
-    
+
     #specimen-info {
-        bottom: calc(50vh + 10px);
+        bottom: calc(50vh + 20px); /* Match chart-panel position */
         left: var(--spacing-md);
         right: auto;
         gap: var(--spacing-md);
         padding: var(--spacing-sm) var(--spacing-md);
         font-size: 0.8rem;
+        max-width: calc(50% - 30px); /* Prevent overlap with chart-panel */
     }
-    
+
     #notification-container {
-        top: calc(var(--spacing-lg) + 40px);  /* Below back button with spacing */
+        top: calc(var(--spacing-lg) + 50px);  /* Below back button with more spacing */
         max-width: calc(100% - 40px);
     }
 }

src/css/index.css

@@ -5,37 +5,37 @@
 
 /* === CSS Variables === */
 :root {
-    /* Professional dark colors */
-    --bg-primary: #0c0d10;
-    --bg-secondary: #12141a;
-    --bg-tertiary: #181b22;
-    --bg-card: #1c1f28;
-    
-    /* Text colors - high contrast for readability */
-    --text-primary: #e8e9eb;
+    /* Enhanced dark professional colors - deeper and more muted */
+    --bg-primary: #08090b;
+    --bg-secondary: #0e1015;
+    --bg-tertiary: #13151b;
+    --bg-card: #181a21;
+
+    /* Text colors - improved contrast */
+    --text-primary: #e5e7eb;
     --text-secondary: #9ca3af;
     --text-muted: #6b7280;
-    
+
     /* Accent color - professional blue */
     --accent-primary: #3b82f6;
     --accent-hover: #60a5fa;
-    
-    /* Borders - subtle and clean */
-    --border-color: rgba(255, 255, 255, 0.06);
-    --border-hover: rgba(255, 255, 255, 0.12);
-    
+
+    /* Borders - flatter, more subtle */
+    --border-color: rgba(255, 255, 255, 0.05);
+    --border-hover: rgba(255, 255, 255, 0.1);
+
     /* Spacing */
     --spacing-xs: 4px;
     --spacing-sm: 8px;
     --spacing-md: 16px;
     --spacing-lg: 24px;
     --spacing-xl: 40px;
-    
-    /* Border radius */
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    
+
+    /* Border radius - slightly flatter */
+    --radius-sm: 3px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+
     /* Transitions */
     --transition: 0.2s ease;
 }

src/css/sim-bending.css

@@ -42,7 +42,7 @@
     height: 15px;
     border-radius: 3px;
     background: linear-gradient(to right, 
-        #22c55e,  /* Green - low stress */
+        #10b981,  /* Emerald - low stress */
         #84cc16,  /* Lime */
         #f59e0b,  /* Yellow/Amber */
         #f97316,  /* Orange */

src/css/sim-compression.css

@@ -42,7 +42,7 @@
     height: 15px;
     border-radius: 3px;
     background: linear-gradient(to right, 
-        #22c55e,  /* Green - low stress */
+        #10b981,  /* Emerald - low stress */
         #84cc16,  /* Lime */
         #f59e0b,  /* Yellow/Amber */
         #f97316,  /* Orange */

src/css/sim-shear.css

@@ -42,7 +42,7 @@
     height: 15px;
     border-radius: 3px;
     background: linear-gradient(to right, 
-        #22c55e,  /* Green - low stress */
+        #10b981,  /* Emerald - low stress */
         #84cc16,  /* Lime */
         #f59e0b,  /* Yellow/Amber */
         #f97316,  /* Orange */