Improve drag and drop.

web/src/styles.css

@@ -406,7 +406,8 @@ h3 {
     inset 0 1px 0 rgba(255, 220, 170, 0.25),
     0 4px 14px rgba(0, 0, 0, 0.4);
   flex-wrap: wrap;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 10;
 }
 
@@ -550,8 +551,10 @@ h3 {
   flex-shrink: 0;
   align-self: stretch;
   position: sticky;
-  top: 0;
-  max-height: calc(100vh - 60px);
+  /* Sit below the now-sticky topbar (~60px tall on wide screens) instead of
+     sliding behind it when the page scrolls. */
+  top: 60px;
+  max-height: calc(100vh - 68px);
   display: flex;
   flex-direction: column;
   background:
@@ -1802,17 +1805,75 @@ h3 {
   padding-bottom: 2px;
 }
 
-/* Each row: reorder arrows on the left, the card on the right. */
+/* Each row is centered in the tray so the card sits under the "first to fight"
+   marker; the reorder controls hang absolutely to its left (see below) and so
+   don't push the card off-center. `.arrange-card` is the box the FLIP animator
+   measures — it stays in its natural slot while a drag lifts its inner content. */
 .arrange-card {
+  position: relative;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-  cursor: grab;
+  justify-content: center;
 }
 
-.arrange-card:active {
+/* The lifted card floats above its neighbors while being dragged. The z-index
+   sits on the inner wrapper (which carries the follow transform) so it wins
+   over sibling rows without disturbing the measured `.arrange-card` box. */
+.arrange-card.is-dragging {
+  z-index: 5;
+}
+
+/* Inner wrapper that actually moves during a drag. Transforming this rather
+   than `.arrange-card` keeps the FLIP animator's measurements honest. */
+.arrange-drag {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* When released, glide from under the finger down into the resting slot. */
+.arrange-drag.is-dropping {
+  transition: transform 0.18s ease-out;
+}
+
+/* Reorder controls: the grip handle on top, the up/down arrows below. Hung to
+   the right of the card so the card itself stays centered under the marker. */
+.arrange-controls {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Grab this to drag-reorder. `touch-action: none` keeps the browser from
+   scrolling the page while a touch drag is in progress; the pointer handlers
+   in ArrangePhase do the reordering. */
+.arrange-handle {
+  touch-action: none;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  min-height: 40px;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: var(--gold);
+  opacity: 0.75;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.arrange-handle:active {
   cursor: grabbing;
+  opacity: 1;
 }
 
 .arrange-arrows {