diff --git a/static/style.css b/static/style.css index abb4d27..c5926e3 100644 --- a/static/style.css +++ b/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; } } \ No newline at end of file