update bracket style

frontend/src/styles.css

@@ -832,13 +832,33 @@ h3 {
 }
 
 .tournament-bracket-grid {
+  position: relative;
   display: flex;
   gap: 2.6rem;
   min-width: max-content;
 }
 
+/* Connector layer: absolutely sized to the full bracket, drawn behind the cards.
+   Paths are measured from real node positions in App.jsx, so they stay correct
+   with hidden byes and irregular loser-bracket round widths. */
+.tournament-bracket-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.tournament-bracket-lines path {
+  fill: none;
+  stroke: color-mix(in srgb, var(--color-border) 60%, var(--color-fury-violet));
+  stroke-width: 1.5px;
+}
+
 .tournament-round-column {
   position: relative;
+  z-index: 1;
   display: flex;
   width: 190px;
   min-width: 190px;
@@ -851,27 +871,6 @@ h3 {
   z-index: 1;
 }
 
-.tournament-match-node::before,
-.tournament-match-node::after {
-  position: absolute;
-  top: 50%;
-  z-index: 0;
-  display: block;
-  height: 1px;
-  width: 1.3rem;
-  background: color-mix(in srgb, var(--color-border) 78%, var(--color-fury-violet));
-  content: "";
-  pointer-events: none;
-}
-
-.tournament-match-node-left::before {
-  right: calc(100% + 0.05rem);
-}
-
-.tournament-match-node-right::after {
-  left: calc(100% + 0.05rem);
-}
-
 @keyframes scrollPulse {
   0% {
     transform: translateY(-100%);