big refactor

static/style.css

@@ -35,17 +35,18 @@ body, html {
     box-shadow: 0 0 50px rgba(0,0,0,0.8);
     border: 4px solid #444;
     background: #000;
-    max-width: 100%;
-    max-height: 100%;
+    /* Größe wird von JS gesetzt, hier nur Layout-Verhalten */
+    display: flex;
+    overflow: hidden;
 }
 
 canvas {
     display: block;
+    width: 100%;
+    height: 100%;
     background-color: #f0f0f0;
     image-rendering: pixelated;
     image-rendering: crisp-edges;
-    width: 100%;
-    height: auto;
 }
 
 /* =========================================
@@ -64,7 +65,7 @@ canvas {
 }
 
 /* =========================================
-   3. OVERLAYS (Start, Game Over)
+   3. OVERLAYS (Basis-Einstellungen)
    ========================================= */
 #startScreen, #gameOverScreen {
     position: absolute;
@@ -89,21 +90,21 @@ h1 {
     text-transform: uppercase;
 }
 
-/* --- FIX: INPUT SECTION ZENTRIEREN --- */
+/* Fix für Input Section (Name eingeben) */
 #inputSection {
     display: flex;
-    flex-direction: column; /* Untereinander */
-    align-items: center;    /* Horizontal mittig */
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
     width: 100%;
     margin: 15px 0;
 }
 
 /* =========================================
-   4. START SCREEN LAYOUT
+   4. START SCREEN (Links/Rechts Layout)
    ========================================= */
 #startScreen {
-    flex-direction: row;
+    flex-direction: row; /* Nebeneinander */
     gap: 40px;
 }
 
@@ -125,6 +126,32 @@ h1 {
     max-width: 35%;
 }
 
+/* =========================================
+   5. GAME OVER SCREEN (WICHTIG: Untereinander)
+   ========================================= */
+#gameOverScreen {
+    /* HIER IST DER FIX: */
+    flex-direction: column !important;
+    gap: 15px;
+}
+
+/* Das Leaderboard im Game Over Screen */
+#leaderboard {
+    margin-top: 10px;
+    font-size: 12px;
+    width: 90%;
+    max-width: 450px;
+    background: rgba(0,0,0,0.5);
+    padding: 15px;
+    border: 2px solid #666;
+    /* Begrenzte Höhe mit Scrollen, falls Liste lang ist */
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+/* =========================================
+   6. HALL OF FAME BOX (Startseite)
+   ========================================= */
 .hall-of-fame-box {
     background: rgba(0, 0, 0, 0.6);
     border: 4px solid #ffcc00;
@@ -159,7 +186,7 @@ h1 {
 .hof-score { color: white; font-weight: bold; }
 
 /* =========================================
-   5. BUTTONS & INPUTS
+   7. BUTTONS & INPUTS
    ========================================= */
 button {
     font-family: 'Press Start 2P', cursive;
@@ -190,7 +217,7 @@ input {
 }
 
 /* =========================================
-   6. INFO BOXEN
+   8. INFO BOXEN
    ========================================= */
 .info-box {
     background: rgba(255, 255, 255, 0.1);
@@ -217,20 +244,8 @@ input {
     text-decoration: underline;
 }
 
-/* Game Over Screen Anpassung */
-#gameOverScreen { flex-direction: column; }
-#leaderboard {
-    margin-top: 20px;
-    font-size: 12px;
-    width: 90%;
-    max-width: 450px;
-    background: rgba(0,0,0,0.5);
-    padding: 15px;
-    border: 2px solid #666;
-}
-
 /* =========================================
-   7. RECHTLICHES
+   9. RECHTLICHES
    ========================================= */
 .legal-bar {
     margin-top: 20px;
@@ -241,8 +256,14 @@ input {
     font-size: 10px;
     padding: 8px 12px;
     margin: 0;
+    background: transparent;
+    border: 1px solid #666;
+    color: #888;
+    box-shadow: none;
 }
+.legal-btn:hover { background: #333; color: white; border-color: white; }
 
+/* Modals */
 .modal-overlay {
     display: none;
     position: fixed;
@@ -275,10 +296,12 @@ input {
     width: 35px; height: 35px;
     font-size: 16px;
     line-height: 30px;
+    margin: 0; padding: 0;
+    box-shadow: none;
 }
 
 /* =========================================
-   8. PC / DESKTOP SPEZIAL
+   10. PC / DESKTOP SPEZIAL
    ========================================= */
 @media (min-width: 1024px) {
     h1 { font-size: 48px; margin-bottom: 40px; }
@@ -295,7 +318,7 @@ input {
 }
 
 /* =========================================
-   9. MOBILE ANPASSUNG
+   11. MOBILE ANPASSUNG
    ========================================= */
 @media (max-width: 700px) {
     #startScreen {
@@ -313,7 +336,7 @@ input {
 }
 
 /* =========================================
-   10. ROTATE OVERLAY
+   12. ROTATE OVERLAY
    ========================================= */
 #rotate-overlay {
     display: none;
@@ -329,7 +352,8 @@ input {
 }
 .icon { font-size: 60px; margin-bottom: 20px; }
 
+/* Nur anzeigen, wenn Spiel läuft UND Portrait */
 @media screen and (orientation: portrait) {
-    #rotate-overlay { display: flex; }
-    #game-container { display: none !important; }
+    body.game-active #rotate-overlay { display: flex; }
+    body.game-active #game-container { display: none !important; }
 }