Remove force landscape orientation and improve responsive layout

index.html

@@ -25,9 +25,7 @@
             font-family: Arial, sans-serif;
             background-color: #1a1a1a;
             color: white;
-            height: 100vh;
+            min-height: 100vh;
-            overflow: hidden;
-            padding: 0;
             overscroll-behavior: none;
         }
 
@@ -35,18 +33,16 @@
         .screen-container {
             position: relative;
             width: 100%;
-            height: 100%;
+            min-height: 100vh;
-            overflow: hidden;
-            padding: 0;
         }
 
         /* Individual screens */
         .screen {
-            position: fixed;
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
-            height: 100%;
+            min-height: 100vh;
             display: none;
             opacity: 0;
             transition: opacity 0.3s ease;
@@ -58,6 +54,7 @@
             display: block;
             opacity: 1;
             transform: translateX(0);
+            position: relative;
         }
 
         .screen.slide-out {
@@ -72,8 +69,10 @@
         .screen-content {
             display: flex;
             flex-direction: column;
-            height: 100%;
+            min-height: 100vh;
             padding: 20px;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
         }
 
         .screen-title {
@@ -512,52 +511,104 @@
             cursor: not-allowed;
         }
 
-        /* Force landscape */
+        /* Loading overlay */
-        @media screen and (orientation: portrait) {
-            body:after {
-                content: "Bitte Gerät drehen";
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: #1a1a1a;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 36px;
-                z-index: 1000;
-            }
-        }
-
-        .loading-indicator {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 50px;
-            height: 50px;
-            border: 5px solid #f3f3f3;
-            border-top: 5px solid #1e4620;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            display: none;
-            touch-action: none;
-        }
-
-        @keyframes spin {
-            0% { transform: translate(-50%, -50%) rotate(0deg); }
-            100% { transform: translate(-50%, -50%) rotate(360deg); }
-        }
-
         .loading-overlay {
+            display: none;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.5);
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .loading-indicator {
+            width: 50px;
+            height: 50px;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #3498db;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Modal styles */
+        .modal {
             display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-content {
+            background-color: #2a2a2a;
+            padding: 20px;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            position: relative;
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .close-button {
+            font-size: 24px;
+            cursor: pointer;
+            color: #888;
+        }
+
+        .close-button:hover {
+            color: white;
+        }
+
+        .modal-body {
+            margin-bottom: 20px;
+        }
+
+        .modal-footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+
+        .modal-button {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        .modal-button.cancel {
+            background-color: #444;
+            color: white;
+        }
+
+        .modal-button.confirm {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .modal-button:hover {
+            opacity: 0.9;
         }
 
         /* Touch feedback animations */
@@ -598,6 +649,120 @@
             padding: 12px;
             font-size: 1.2rem;
         }
+
+        /* Responsive styles */
+        @media screen and (max-width: 480px) {
+            .game-detail {
+                padding: 15px;
+            }
+
+            .scores-container {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .player-score {
+                padding: 15px;
+            }
+
+            .player-name {
+                font-size: 20px;
+            }
+
+            .score {
+                font-size: 36px;
+            }
+
+            .score-buttons {
+                flex-wrap: wrap;
+            }
+
+            .score-button {
+                padding: 8px 16px;
+                font-size: 16px;
+            }
+
+            .game-actions {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .action-button {
+                padding: 8px;
+                font-size: 16px;
+            }
+
+            .new-game-form {
+                padding: 15px;
+            }
+
+            .form-group input,
+            .form-group select {
+                padding: 8px;
+                font-size: 14px;
+            }
+
+            .form-button {
+                padding: 8px 16px;
+                font-size: 14px;
+            }
+
+            .filter-buttons {
+                flex-wrap: wrap;
+            }
+
+            .filter-button {
+                padding: 6px 12px;
+                font-size: 14px;
+            }
+        }
+
+        @media screen and (min-width: 481px) and (max-width: 768px) {
+            .game-detail {
+                padding: 20px;
+            }
+
+            .scores-container {
+                gap: 15px;
+            }
+
+            .player-score {
+                padding: 15px;
+            }
+
+            .player-name {
+                font-size: 22px;
+            }
+
+            .score {
+                font-size: 42px;
+            }
+
+            .score-button {
+                padding: 8px 16px;
+                font-size: 16px;
+            }
+
+            .new-game-form {
+                padding: 20px;
+            }
+
+            .form-group input,
+            .form-group select {
+                padding: 8px;
+                font-size: 16px;
+            }
+
+            .form-button {
+                padding: 8px 16px;
+                font-size: 16px;
+            }
+
+            .filter-button {
+                padding: 6px 12px;
+                font-size: 14px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -710,8 +875,25 @@
         </div>
     </div>
 
-    <div class="loading-overlay"></div>
+    <div class="loading-overlay">
         <div class="loading-indicator"></div>
+    </div>
+
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <span class="close-button" onclick="closeModal()">&times;</span>
+                <h2 id="modal-title">Spiel löschen</h2>
+            </div>
+            <div class="modal-body">
+                <p id="modal-message">Möchten Sie das Spiel zwischen Spieler 1 und Spieler 2 wirklich löschen?</p>
+            </div>
+            <div class="modal-footer">
+                <button class="modal-button cancel" onclick="closeModal()">Abbrechen</button>
+                <button class="modal-button confirm" onclick="confirmDeleteGame(currentGameId)">Löschen</button>
+            </div>
+        </div>
+    </div>
 
     <script>
         // Screen management