Enh(viewer): Small visual improvements

Author: klieret

codeclash/viewer/static/css/style.css

@@ -174,6 +174,17 @@ body {
   transition: all 0.2s ease;
 }
 
+/* Remove any browser default styling that might add blue lines */
+details {
+  border: none !important;
+  outline: none !important;
+}
+
+details summary {
+  outline: none !important;
+  border: none !important;
+}
+
 .foldout:hover {
   box-shadow: var(--shadow);
 }
@@ -204,14 +215,22 @@ body {
 
 /* Special foldout types */
 .round-foldout {
-  border-left: 4px solid var(--accent-color);
+  /* Removed distracting blue border */
 }
 
 .trajectory-foldout {
-  border-left: 4px solid var(--success-color);
+  /* Removed distracting green border */
   margin-left: 1rem;
 }
 
+/* Round separator */
+.round-separator {
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
+  margin: 2rem 0;
+  border-radius: 1px;
+}
+
 /* Trajectory specific styles */
 .trajectory-info {
   background-color: var(--bg-tertiary);
@@ -503,12 +522,15 @@ body {
 
 /* Focus styles for accessibility */
 button:focus,
-select:focus,
-summary:focus {
+select:focus {
   outline: 2px solid var(--accent-color);
   outline-offset: 2px;
 }
 
+summary:focus {
+  outline: none;
+}
+
 /* Scrollbar styling for webkit browsers */
 ::-webkit-scrollbar {
   width: 8px;

codeclash/viewer/templates/index.html

@@ -243,6 +243,11 @@ <h3>🤖 Player {{ trajectory.player_id }} Round {{ round_num }}</h3>
                     {% endfor %}
                 {% endif %}
 
+                <!-- Round separator (except after the last round) -->
+                {% if not loop.last %}
+                <div class="round-separator"></div>
+                {% endif %}
+
             {% endfor %}
         </section>
     </main>