Fix mobile replay and stabilize phone controls

Author: Swon404

src/components/Board.tsx

@@ -61,7 +61,8 @@ export function Board({ flipped = false }: Props) {
   };
 
   const lastMove = state.history[state.history.length - 1];
-  const moveIndex = state.history.length;
+  // Include replay nonce so "Replay" re-mounts animated pieces and restarts keyframes.
+  const moveAnimIndex = state.history.length + lastMoveReplayNonce;
   const checkedKing = result.kind === "ongoing" && inCheck(state, state.turn)
     ? findKing(state, state.turn)
     : null;
@@ -125,7 +126,7 @@ export function Board({ flipped = false }: Props) {
                   ["--slide-dx" as string]: `${sign * df * 100}%`,
                   ["--slide-dy" as string]: `${sign * dr * 100}%`
                 };
-                slideKey = `slide-${moveIndex}-${lastMoveReplayNonce}`;
+                slideKey = `slide-${moveAnimIndex}`;
               }
               const isRematerializeHere =
                 isTeleportMove &&
@@ -154,7 +155,7 @@ export function Board({ flipped = false }: Props) {
                   )}
                   {piece && (
                     <span
-                      key={isRematerializeHere ? `remat-${moveIndex}-${lastMoveReplayNonce}` : slideKey}
+                      key={isRematerializeHere ? `remat-${moveAnimIndex}` : slideKey}
                       className={
                         isRematerializeHere
                           ? "piece-wrap piece-rematerialize"
@@ -174,7 +175,7 @@ export function Board({ flipped = false }: Props) {
                   )}
                   {isDematerializeHere && lastMove && (
                     <span
-                      key={`demat-${moveIndex}-${lastMoveReplayNonce}`}
+                      key={`demat-${moveAnimIndex}`}
                       className="piece-wrap piece-dematerialize"
                       aria-hidden="true"
                     >
@@ -187,7 +188,7 @@ export function Board({ flipped = false }: Props) {
                     </span>
                   )}
                   {isLastTo && lastMove?.captured && store.settings.explodeOnCapture && (
-                    <span key={`boom-${moveIndex}-${lastMoveReplayNonce}`} className="boom" aria-hidden="true">
+                    <span key={`boom-${moveAnimIndex}`} className="boom" aria-hidden="true">
                       <span className="boom-core">💥</span>
                       <span className="boom-bit b1">✨</span>
                       <span className="boom-bit b2">⭐</span>

src/styles.css

@@ -486,6 +486,7 @@ section label { display: block; margin: 6px 0; }
 .timer-control:hover { filter: brightness(1.2); }
 .clock-side {
   flex: 1;
+  min-width: 0;
   background: var(--panel);
   padding: 8px 12px;
   border-radius: 10px;
@@ -494,6 +495,12 @@ section label { display: block; margin: 6px 0; }
   align-items: center;
   border: 1px solid transparent;
 }
+.clock-side > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .clock-side.active { border-color: var(--accent); }
 .clock-side strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
 .clock-side strong.low { color: #ef4444; animation: check-pulse 900ms ease-in-out infinite; }
@@ -536,9 +543,40 @@ section label { display: block; margin: 6px 0; }
   margin: 12px 0;
   gap: 8px;
 }
-.controls .status { font-weight: 600; }
+.controls .status {
+  font-weight: 600;
+  line-height: 1.25;
+}
 .controls .buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
 
+@media (max-width: 640px) {
+  .controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .controls .status {
+    min-height: 2.5em;
+  }
+
+  .controls .buttons {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    justify-content: stretch;
+    width: 100%;
+  }
+
+  .controls .buttons button {
+    width: 100%;
+    min-width: 0;
+    padding: 8px 6px;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .movelist ol {
   list-style: none;
   padding: 0;