meow

frontend/src/styles.css

@@ -834,20 +834,43 @@ h3 {
 /* The bracket reads as a campaign map you drag around. The viewport breaks the
    page's max-width so there's room to manoeuvre; the surface carries a faint
    tactical grid that pans with the bracket (it lives on the scrolling content). */
+/* The whole side (heading + canvas) breaks out to 85vw and centres on the
+   viewport, so the WINNER/LOSER heading aligns with the canvas's left edge. */
+.bracket-side {
+  width: 85vw;
+  margin-left: calc(50% - 42.5vw);
+}
+
+.bracket-caret {
+  display: inline-block;
+  font-size: 0.7em;
+  transition: transform 0.18s ease;
+}
+
+.bracket-caret.is-collapsed {
+  transform: rotate(-90deg);
+}
+
 .bracket-viewport {
   position: relative;
-  width: 100vw;
-  margin-left: calc(50% - 50vw);
+  width: 100%;
   max-height: 78vh;
   overflow: auto;
   overscroll-behavior: contain;
   cursor: grab;
-  border-block: 1px solid var(--color-border);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
   background-color: color-mix(in srgb, var(--color-bg) 86%, #000);
 }
 
 .bracket-viewport.is-grabbing {
   cursor: grabbing;
+  user-select: none;
+}
+
+/* While panning, don't let the drag turn into a text selection. */
+.bracket-viewport.is-grabbing * {
+  user-select: none;
 }
 
 .tournament-bracket-grid {