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/js/leaderboard.js

@@ -643,6 +643,9 @@ function changeLanguage() {
     // Save language preference
     localStorage.setItem('ninjacross_language', currentLanguage);
 
+    // Update flag in select
+    updateLanguageFlag();
+
     // Translate all elements with data attributes
     const elementsToTranslate = document.querySelectorAll('[data-de][data-en]');
     elementsToTranslate.forEach(element => {
@@ -655,6 +658,20 @@ function changeLanguage() {
     console.log(`🌐 Language changed to: ${currentLanguage}`);
 }
 
+// Update flag in language selector
+function updateLanguageFlag() {
+    const languageSelect = document.getElementById('languageSelect');
+    if (languageSelect) {
+        if (currentLanguage === 'de') {
+            // German flag (black-red-gold)
+            languageSelect.style.backgroundImage = `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>')`;
+        } else {
+            // USA flag
+            languageSelect.style.backgroundImage = `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="15" fill="%23B22234"/><rect width="20" height="1.15" fill="%23FFFFFF"/><rect y="2.3" width="20" height="1.15" fill="%23FFFFFF"/><rect y="4.6" width="20" height="1.15" fill="%23FFFFFF"/><rect y="6.9" width="20" height="1.15" fill="%23FFFFFF"/><rect y="9.2" width="20" height="1.15" fill="%23FFFFFF"/><rect y="11.5" width="20" height="1.15" fill="%23FFFFFF"/><rect y="13.8" width="20" height="1.15" fill="%23FFFFFF"/><rect width="7.7" height="8.05" fill="%230033A0"/></svg>')`;
+        }
+    }
+}
+
 // Update dynamic content that's not in HTML
 function updateDynamicContent() {
     // Update location select placeholder
@@ -710,6 +727,8 @@ function loadLanguagePreference() {
         const languageSelect = document.getElementById('languageSelect');
         if (languageSelect) {
             languageSelect.value = currentLanguage;
+            // Update flag when loading
+            updateLanguageFlag();
         }
     }
 }