slop

frontend/src/App.jsx

@@ -5357,6 +5357,7 @@ function TournamentListColumn({ column, navigate }) {
         type="button"
       >
         {column.label}
+        <span aria-hidden="true" className={`tournament-list-round-caret${collapsed ? ' is-collapsed' : ''}`}>▾</span>
       </button>
       {collapsed ? null : (
         <div className="grid grid-cols-2 gap-3">

frontend/src/styles.css

@@ -959,6 +959,26 @@ h3 {
   border-color: var(--color-text-muted);
 }
 
+/* Caret resets to horizontal so it renders upright inside the vertical label. */
+.tournament-list-round-caret {
+  writing-mode: horizontal-tb;
+  display: inline-block;
+  font-size: 1rem;
+  line-height: 1;
+  transition: transform 0.18s ease;
+  margin-top: 0.4rem;
+}
+
+.tournament-list-round-caret.is-collapsed {
+  transform: rotate(-90deg);
+}
+
+/* Divider between round columns. */
+.tournament-list-column:not(:last-child) {
+  border-right: 1px solid var(--color-border);
+  padding-right: 1rem;
+}
+
 .bracket-caret {
   display: inline-block;
   font-size: 1.35rem;