Add real country flags to language selector

- Replace emoji flags with SVG-based country flags
- German flag: Black-Red-Gold (official colors)
- USA flag: Red-White-Blue with stars
- Dynamic flag switching on language change
- Applied to both dashboard and leaderboard
- Database achievements now support English translations
- Extended achievements table with name_en and description_en columns
- Updated API routes to return English translations
- Simplified frontend translation system to use database translations

public/css/leaderboard.css

@@ -11,7 +11,7 @@ body {
     background: #0a0a0f;
     color: #ffffff;
     min-height: 100vh;
-    background-image: 
+    background-image:
         radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
@@ -43,6 +43,11 @@ body {
     cursor: pointer;
     transition: all 0.2s ease;
     backdrop-filter: blur(10px);
+    padding-left: 2.5rem;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 20 15"><rect width="20" height="5" fill="%23000000"/><rect y="5" width="20" height="5" fill="%23DD0000"/><rect y="10" width="20" height="5" fill="%23FFCE00"/></svg>');
+    background-repeat: no-repeat;
+    background-position: 0.5rem center;
+    background-size: 20px 15px;
 }
 
 .language-selector select:hover {
@@ -177,13 +182,18 @@ body {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     animation: loading-sweep 1.5s infinite;
 }
 
 @keyframes loading-sweep {
-    0% { left: -100%; }
-    100% { left: 100%; }
+    0% {
+        left: -100%;
+    }
+
+    100% {
+        left: 100%;
+    }
 }
 
 /* Horizontal Time Tabs */
@@ -524,9 +534,17 @@ body {
 }
 
 @keyframes pulse {
-    0% { opacity: 1; }
-    50% { opacity: 0.7; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.7;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }
 
 /* Notification Bubble Styles */
@@ -587,12 +605,19 @@ body {
 }
 
 @keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
+
+    0%,
+    20%,
+    50%,
+    80%,
+    100% {
         transform: translateY(0);
     }
+
     40% {
         transform: translateY(-10px);
     }
+
     60% {
         transform: translateY(-5px);
     }
@@ -603,6 +628,7 @@ body {
         opacity: 0;
         transform: translateX(-50%) translateY(-20px);
     }
+
     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
@@ -614,6 +640,7 @@ body {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
     }
+
     to {
         opacity: 0;
         transform: translateX(-50%) translateY(-20px);
@@ -649,7 +676,8 @@ body {
 
     .header-section {
         margin-bottom: 2rem;
-        margin-top: 5rem; /* Account for fixed buttons */
+        margin-top: 5rem;
+        /* Account for fixed buttons */
     }
 
     .dashboard-grid {
@@ -789,7 +817,9 @@ body {
         display: none;
     }
 
-    .admin-login-btn, .dashboard-btn, .logout-btn {
+    .admin-login-btn,
+    .dashboard-btn,
+    .logout-btn {
         position: fixed;
         top: 1rem;
         right: 1rem;
@@ -1088,10 +1118,10 @@ body {
         text-align: center;
         gap: 1.5rem;
     }
-    
+
     .footer-links {
         flex-wrap: wrap;
         justify-content: center;
         gap: 1.5rem;
     }
-}
+}