Update static/styles.css

static/styles.css

@@ -9,10 +9,11 @@ button { padding: 10px 20px; margin: 5px; cursor: pointer; }
 .pagination { text-align: center; margin: 20px 0; }
 .pagination button { padding: 10px 20px; margin: 0 5px; }
 .pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
-.puzzle { border: 1px solid #ddd; padding: 15px; margin: 15px 0; display: flex; gap: 20px; }
-.puzzle-board { width: 200px; height: 200px; }
-.puzzle-info { flex: 1; }
-.puzzle-info h3 { margin: 0 0 10px 0; }
+.puzzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
+.puzzle { border: 1px solid #ddd; padding: 12px; }
+.puzzle-board { width: 100%; aspect-ratio: 1; }
+.puzzle-info h3 { margin: 8px 0 4px; font-size: 14px; }
+.puzzle-info p { margin: 4px 0; font-size: 12px; }
 .puzzle-info a { color: #0066cc; }
-.themes { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
-.theme { background: #e0e0e0; padding: 3px 8px; border-radius: 3px; font-size: 12px; }
+.themes { display: flex; gap: 5px; flex-wrap: wrap; margin: 5px 0; }
+.theme { background: #e0e0e0; padding: 3px 8px; border-radius: 3px; font-size: 11px; }