Update Mascot Jump Game UI

Author: Matteo-it

examples/mascot-jump-game/assets/style.css

@@ -13,8 +13,8 @@ SPDX-License-Identifier: MPL-2.0
 }
 
 body {
-    font-family: 'Consolas', 'Courier New', monospace;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;    margin: 0;
+    background: #DAE3E3;
     min-height: 100vh;
     display: flex;
     justify-content: center;
@@ -34,7 +34,7 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 40px;
     padding: 0 10px;
 }
 
@@ -59,7 +59,6 @@ body {
     background: white;
     border-radius: 12px;
     padding: 20px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     position: relative;
 }
 
@@ -109,13 +108,15 @@ body {
     font-weight: 500;
     opacity: 0.7;
     font-size: 20px;
+    font-family: "Open Sans", monospace;
 }
 
 .score-value,
 .high-score-value {
     font-weight: 700;
     font-variant-numeric: tabular-nums;
     letter-spacing: 2px;
+    font-family: "Open Sans", monospace;
 }
 
 .high-score-label {
@@ -180,6 +181,7 @@ body {
     background: #4caf50;
     color: white;
     animation: pulse 2s ease-out;
+    display: none;
 }
 
 .connection-status.disconnected {
@@ -238,40 +240,40 @@ body {
     .container {
         padding: 10px;
     }
-    
+
     .header {
         margin-bottom: 15px;
     }
-    
+
     .arduino-text {
         font-size: 24px;
     }
-    
+
     .game-container {
         padding: 15px;
     }
-    
+
     #gameCanvas {
         max-width: 100%;
         height: auto;
     }
-    
+
     .game-info {
         flex-direction: column;
         gap: 15px;
         align-items: center;
         text-align: center;
     }
-    
+
     .score-display {
         font-size: 20px;
     }
-    
+
     .controls-info {
         flex-wrap: wrap;
         justify-content: center;
     }
-    
+
     .connection-status {
         top: 10px;
         right: 10px;
@@ -284,25 +286,25 @@ body {
     .arduino-text {
         font-size: 20px;
     }
-    
+
     .arduino-logo {
         height: 24px;
     }
-    
+
     .score-display {
         font-size: 18px;
         gap: 10px;
     }
-    
+
     .score-label,
     .high-score-label {
         font-size: 16px;
     }
-    
+
     .controls-info {
         font-size: 12px;
     }
-    
+
     .key-icon {
         padding: 2px 6px;
         font-size: 10px;
@@ -313,23 +315,23 @@ body {
     #gameCanvas {
         cursor: default;
     }
-    
+
     #gameCanvas:hover {
         transform: none;
     }
-    
+
     #gameCanvas:active {
         transform: scale(0.98);
     }
-    
+
     .key-icon {
         display: none;
     }
-    
+
     .control-item:first-child::before {
         content: "Tap to ";
     }
-    
+
     .control-divider,
     .control-item:last-child {
         display: none;
@@ -340,11 +342,11 @@ body {
     body {
         background: white;
     }
-    
+
     .connection-status {
         display: none;
     }
-    
+
     .game-container {
         box-shadow: none;
         border: 1px solid #ddd;