Optimize the layout for phones in portrait.

Lock the app to the viewport on screens <=600px wide so the page itself
never scrolls: the topbar becomes a slim rail and the play area fills the
rest. Cards, trays, and type shrink so a shop round or a battle fits on
one screen; the shop and deck rows scroll sideways when a full six-pet
deck outgrows the width, keeping each tray's height fixed. Arrange is the
one screen allowed to scroll past the viewport, since a battle line can
run long.

web/src/components/BattlePhase.tsx

@@ -592,24 +592,17 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
           >
             Skip ⏭
           </button>
-          <div className="battle-speed" role="group" aria-label="Playback speed">
-            <span className="battle-speed-label" aria-hidden>
-              ⏱
-            </span>
-            {SPEED_OPTIONS.map((s) => (
-              <button
-                key={s}
-                className={`btn btn-ghost btn-sm battle-speed-btn ${
-                  speed === s ? 'is-active' : ''
-                }`}
-                onClick={() => setSpeed(s)}
-                aria-pressed={speed === s}
-                title={`Play at ${s}× speed`}
-              >
-                {s}×
-              </button>
-            ))}
-          </div>
+          <button
+            className="btn btn-ghost btn-sm battle-speed-toggle"
+            onClick={() => {
+              const i = SPEED_OPTIONS.indexOf(speed as (typeof SPEED_OPTIONS)[number])
+              setSpeed(SPEED_OPTIONS[(i + 1) % SPEED_OPTIONS.length])
+            }}
+            title="Playback speed — tap to cycle"
+            aria-label={`Playback speed ${speed}×, tap to change`}
+          >
+            ⏱ {speed}×
+          </button>
         </div>
       </div>