Improve arrangement phase UI.

web/src/styles.css

@@ -1093,22 +1093,40 @@ h3 {
 }
 
 .arrange-row {
+  position: relative;
   display: flex;
-  gap: 14px;
+  /* Battle line reads right-to-left, wrapping downward: card 0 (fights first)
+     sits top-right and later pets flow left, then onto rows below. The wide
+     row-gap leaves a band for the wrap-around connector arrows. */
+  direction: rtl;
+  column-gap: 14px;
+  row-gap: 56px;
   align-items: center;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
   background:
     radial-gradient(ellipse 80% 120% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 70%),
     rgba(0, 0, 0, 0.24);
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 18px;
-  padding: 20px 18px;
+  /* Extra right padding reserves the strip the "first" marker sits in, so its
+     width doesn't shove the top row left of the wrapped rows below it. */
+  padding: 20px 52px 20px 18px;
   min-height: 224px;
   box-shadow: var(--tray-inset);
 }
 
+/* Pinned out of flow to the reserved strip beside the first (rightmost) card,
+   vertically centred on the top row, so it never affects card alignment. */
 .arrange-marker {
+  position: absolute;
+  top: 20px;
+  right: 16px;
+  height: 148px;
+  display: flex;
+  align-items: center;
+  z-index: 2;
+  direction: ltr;
   font-family: var(--font-display);
   color: var(--gold);
   writing-mode: vertical-rl;
@@ -1118,7 +1136,31 @@ h3 {
   opacity: 0.85;
 }
 
+/* SVG overlay for the wrap-around connector arrows. Absolute so it sits out of
+   the flex flow; pointer-events off so it never blocks dragging. overflow is
+   visible because the curve control points can bow just past the tray edge. */
+.arrange-connectors {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.arrange-connector {
+  fill: none;
+  stroke: rgba(190, 194, 200, 0.55);
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.arrange-arrowhead-shape {
+  fill: rgba(190, 194, 200, 0.55);
+}
+
 .arrange-card {
+  direction: ltr;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1836,6 +1878,9 @@ h3 {
     width: 92px;
     height: 128px;
   }
+  .arrange-marker {
+    height: 128px;
+  }
   .card-lg {
     width: 104px;
     height: 146px;