Make right the front.

web/src/components/ArrangePhase.tsx

@@ -8,10 +8,11 @@ interface Props {
   send: (msg: ClientMessage) => void
 }
 
-// ArrangePhase lets the player order their deck for battle. Leftmost card
+// ArrangePhase lets the player order their deck for battle. Rightmost card
-// fights first; food cards buff the next pet to their right... i.e. foods
+// fights first; food cards buff the next pet to their left... i.e. foods
-// apply "down" to the next pet later in the order. Drag cards or use the
+// apply to the next pet later in the play order. Internally `order` stays in
-// arrow buttons to reorder, then lock in.
+// play order (index 0 fights first) to match the backend; we only reverse for
+// display. Drag cards or use the arrow buttons to reorder, then lock in.
 export function ArrangePhase({ view, you, send }: Props) {
   const [order, setOrder] = useState<Card[]>(you.deck ?? [])
   const dragIndex = useRef<number | null>(null)
@@ -79,20 +80,22 @@ export function ArrangePhase({ view, you, send }: Props) {
         <span className="status-hot">Arrange your battle line</span>
       </div>
       <p className="hint">
-        The <strong>leftmost</strong> card fights first. Food cards power up the
+        The <strong>rightmost</strong> card fights first. Food cards power up the
-        next pet to their <strong>right</strong>.
+        next pet to their <strong>left</strong>.
         {trailingFoods > 0 && (
           <span className="warn-text">
             {' '}
-            ⚠️ {trailingFoods} food card{trailingFoods > 1 ? 's' : ''} at the end
+            ⚠️ {trailingFoods} food card{trailingFoods > 1 ? 's' : ''} on the far
-            will be wasted!
+            left will be wasted!
           </span>
         )}
       </p>
 
       <div className="arrange-row">
-        <div className="arrange-marker">⚔️ first</div>
+        {order
-        {order.map((c, i) => (
+          .map((c, i) => ({ c, i }))
+          .reverse()
+          .map(({ c, i }) => (
             <div
               key={c.id}
               className="arrange-card"
@@ -111,23 +114,24 @@ export function ArrangePhase({ view, you, send }: Props) {
               <div className="arrange-arrows">
                 <button
                   className="btn btn-ghost btn-sm"
-                disabled={i === 0}
+                  disabled={i === order.length - 1}
-                onClick={() => move(i, i - 1)}
+                  onClick={() => move(i, i + 1)}
-                aria-label="move earlier"
+                  aria-label="move left"
                 >
                   ◀
                 </button>
                 <button
                   className="btn btn-ghost btn-sm"
-                disabled={i === order.length - 1}
+                  disabled={i === 0}
-                onClick={() => move(i, i + 1)}
+                  onClick={() => move(i, i - 1)}
-                aria-label="move later"
+                  aria-label="move right"
                 >
                   ▶
                 </button>
               </div>
             </div>
           ))}
+        <div className="arrange-marker">⚔️ first</div>
       </div>
 
       <div className="actions">