ui/src/App.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { cubicOut } from 'svelte/easing';
   import { app, bootstrap } from './lib/app.svelte';
-  import { navigate, router } from './lib/router.svelte';
+  import { navigate, router, type RouteName } from './lib/router.svelte';
   import { t } from './lib/i18n/index.svelte';
   import { insideTelegram, telegramBackButton } from './lib/telegram';
   import Toast from './components/Toast.svelte';
@@ -38,7 +38,21 @@
   // lobby slides it in from the right (forward); returning to the lobby slides the
   // screen out to the right and reveals the lobby (back). Transitions are local, so
   // they do not play on the initial mount, and collapse to nothing under reduce-motion.
-  const dir = $derived(router.route.name === 'lobby' ? 'back' : 'forward');
+  // Slide direction by route depth: going deeper (lobby → game → chat/check) slides forward,
+  // returning to a shallower screen slides back. A plain "lobby is back" rule slid the chat/check
+  // back-to-the-game the wrong way. dir is read with the previous depth (the effect updates it
+  // only after the transition has captured its sign).
+  function routeDepth(name: RouteName): number {
+    if (name === 'gameChat' || name === 'gameCheck') return 2;
+    if (name === 'lobby' || name === 'login') return 0;
+    return 1;
+  }
+  const curDepth = $derived(routeDepth(router.route.name));
+  let prevDepth = $state(routeDepth(router.route.name));
+  const dir = $derived(curDepth < prevDepth ? 'back' : 'forward');
+  $effect(() => {
+    prevDepth = curDepth;
+  });
   const enterSign = $derived(dir === 'forward' ? 1 : -1);
   const leaveSign = $derived(dir === 'forward' ? -1 : 1);
   const routeKey = $derived(router.route.name + (router.route.params.id ?? ''));