Responsive Mobile-Design: PGN/Tabelle-Reihenfolge, Board-Vergrößerung, Round-Info verschoben, kompaktere Player-Infos

style.css

@@ -133,11 +133,20 @@ header h1 {
 #board [data-square].last-move-highlight {
   box-shadow: inset 0 0 3px 3px rgba(255, 200, 0, 0.7);
 }
-#pgn-panel {
+#pgn-panel,
+#pgn-panel-mobile {
   width: 100%;
   max-width: 500px;
+}
+#pgn-panel-mobile {
+  display: none;
+}
+.pgn-panel--desktop,
+.pgn-panel--mobile {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 12px;
+}
+.pgn-panel--desktop {
   padding: 12px 16px;
 }
 .pgn-header {
@@ -149,7 +158,7 @@ header h1 {
   font-weight: bold;
   font-size: 0.9rem;
 }
-#copy-pgn-btn {
+.copy-pgn-btn {
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: #ccc;
@@ -160,10 +169,10 @@ header h1 {
   font-size: 1rem;
   transition: background 0.2s;
 }
-#copy-pgn-btn:hover {
+.copy-pgn-btn:hover {
   background: rgba(255, 255, 255, 0.2);
 }
-#pgn-text {
+.pgn-text {
   font-family: 'Courier New', monospace;
   font-size: 0.78rem;
   line-height: 1.5;
@@ -198,14 +207,16 @@ header h1 {
 }
 #moves-panel,
 #all-games-panel,
-#standings-panel {
+#standings-panel,
+#pgn-panel-mobile {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 12px;
   padding: 16px;
 }
 #moves-panel h3,
 #all-games-panel h3,
-#standings-panel h3 {
+#standings-panel h3,
+#pgn-panel-mobile h3 {
   margin-bottom: 12px;
   color: #e94560;
   font-size: 1rem;
@@ -377,17 +388,77 @@ header h1 {
   background: #e94560;
   border-radius: 3px;
 }
+.round-info-mobile {
+  display: none;
+}
 /* Responsive */
 @media (max-width: 900px) {
   #main-content {
     flex-direction: column;
     align-items: center;
+    padding: 12px;
   }
   #info-section {
     flex: none;
     width: 100%;
     max-width: 500px;
   }
+  html,
+  body {
+    overflow-x: hidden;
+  }
+  #board-section {
+    width: 100%;
+    align-items: stretch;
+  }
+  #board,
+  .player-info {
+    max-width: 100%;
+    width: 100%;
+  }
+  #board {
+    overflow: hidden;
+  }
+  #board > div {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  .round-info-mobile {
+    display: block;
+    width: 100%;
+    max-width: 500px;
+    font-size: 1.3rem;
+    color: #e94560;
+    margin: 0 auto;
+  }
+  #round-info {
+    display: none;
+  }
+  #result-info {
+    display: none;
+  }
+  .pgn-panel--desktop {
+    display: none;
+  }
+  #pgn-panel-mobile {
+    display: block;
+  }
+  .player-info {
+    padding: 8px 12px;
+  }
+  .player-avatar {
+    width: 36px;
+    height: 36px;
+    font-size: 1.4rem;
+  }
+  .player-name {
+    font-size: 0.95rem;
+  }
+  .player-clock {
+    font-size: 1.1rem;
+    min-width: 80px;
+    padding: 4px 8px;
+  }
   header h1 {
     font-size: 1.2rem;
   }