Merge pull request 'fix Mobile' (#4) from add-new-player-skin into main

Reviewed-on: #4

static/style.css

@@ -356,4 +356,74 @@ input {
 @media screen and (orientation: portrait) {
     body.game-active #rotate-overlay { display: flex; }
     body.game-active #game-container { display: none !important; }
+}
+
+/* =========================================
+   MOBILE LANDSCAPE FIX (Kritisch für Menüs!)
+   ========================================= */
+
+/* Diese Regel greift, wenn das Gerät flach ist (Handy quer) */
+@media (max-height: 500px) {
+
+    /* 1. Haupt-Container: Alles zentrieren! */
+    #startScreen {
+        flex-direction: row; /* Nebeneinander lassen, da Bildschirm breit ist */
+        align-items: center; /* Vertikal mittig */
+        justify-content: center; /* Horizontal mittig */
+        gap: 20px; /* Abstand zwischen Menü und Leaderboard */
+        padding: 10px;
+        overflow-y: auto; /* Scrollen erlauben zur Sicherheit */
+    }
+
+    /* 2. Linke Seite (Menü) zentrieren */
+    .start-left {
+        width: 45%; /* Nimmt fast die Hälfte */
+        max-width: none;
+        align-items: center; /* Inhalte zentrieren */
+        text-align: center;  /* Text zentrieren */
+        margin: 0; /* Ränder weg */
+    }
+
+    /* 3. Rechte Seite (Leaderboard) zentrieren */
+    .start-right {
+        width: 45%;
+        max-width: none;
+        height: auto;
+        margin: 0;
+    }
+
+    /* 4. Titel kleiner */
+    h1 {
+        font-size: 18px;
+        margin: 0 0 10px 0;
+        line-height: 1.2;
+    }
+
+    /* 5. Unwichtiges AUSBLENDEN */
+    .info-box { display: none; }
+    .legal-bar { margin-top: 5px; }
+
+    /* 6. Buttons & Input optimieren */
+    button {
+        padding: 8px 12px;
+        font-size: 10px;
+        margin: 5px;
+    }
+
+    /* 7. Leaderboard Box */
+    .hall-of-fame-box {
+        max-height: 180px; /* Damit es nicht den Screen sprengt */
+    }
+    .hall-of-fame-box h3 { font-size: 10px; margin-bottom: 5px; }
+    .hof-entry { padding: 2px 0; font-size: 8px; }
+
+    /* 8. Game Over Screen auch zentrieren */
+    #gameOverScreen {
+        justify-content: center;
+        align-items: center;
+        padding-top: 0;
+    }
+    #inputSection { margin: 5px 0; }
+    input { padding: 5px; font-size: 12px; width: 150px; margin-bottom: 5px; }
+    #leaderboard { max-height: 100px; padding: 5px; margin-top: 5px; }
 }