feat(ui): batch of UI polish tweaks

- admin dashboard "Users" count excludes robots (CountUsers, humans only)
- lobby finished-game delete reveal: background matches header/tab-bar (--bg-elev)
- mobile: swipe up on the zoom-out board (no staged tiles) shuffles the rack
- lobby: status icons -25%, game-row top/bottom padding halved
- toast: info tier drifts up ~a tab-bar height while fading over 2s and dismisses
  on tap; error tier unchanged
- game: confirm-move button stays pinned at the right edge; rack tiles shrink to
  fit so a full rack never overflows onto it
- telegram: a successful invite-link redeem shows a welcome window pointing at the bot
- settings: remove the grid-lines toggle; the board is always a gapless checkerboard
- settings/comms hubs: the selected tab highlight wraps icon + label as a pill

Docs: UI_DESIGN (toast, board surface, selected tab), PLAN; e2e updated for the
removed grid-lines toggle.

ui/src/components/Toast.svelte

@@ -1,20 +1,28 @@
 <script lang="ts">
   import { fade, fly } from 'svelte/transition';
-  import { app } from '../lib/app.svelte';
+  import { app, dismissToast } from '../lib/app.svelte';
 
   const dur = $derived(app.reduceMotion ? 0 : 260);
+  // An info bubble owns its whole 2s life through a CSS rise-and-fade animation, so it takes
+  // no Svelte enter/leave transition; an error keeps the fly-in / fade-out dwell behaviour.
+  const isInfo = $derived(app.toast?.kind !== 'error');
 </script>
 
 {#if app.toast}
-  <!-- Re-key on the toast's seq so a fresh message tears the old node down (out:fade) and replays
-       the entrance (in:fly): the newest toast cancels the previous one and starts its own cycle. -->
+  <!-- Re-key on the toast's seq so a fresh message tears the old node down and replays the
+       appear cycle: the newest toast cancels the previous one and starts its own. -->
   {#key app.toast.seq}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
       class="toast {app.toast.kind}"
+      class:rise={isInfo && !app.reduceMotion}
+      class:rise-reduced={isInfo && app.reduceMotion}
       role="status"
       aria-live="polite"
-      in:fly={{ y: 32, duration: dur }}
-      out:fade={{ duration: dur }}
+      onclick={dismissToast}
+      in:fly={{ y: isInfo ? 0 : 32, duration: isInfo ? 0 : dur }}
+      out:fade={{ duration: isInfo ? 0 : dur }}
     >
       {app.toast.text}
     </div>
@@ -36,9 +44,45 @@
     box-shadow: var(--shadow);
     z-index: 50;
     text-align: center;
+    cursor: pointer;
   }
   .error {
     border-color: var(--danger);
     color: var(--danger);
   }
+  /* An info bubble fades in, then drifts up by roughly the tab-bar height while fading out,
+     all within 2s; the X centring is preserved across the rise. */
+  .toast.rise {
+    animation: toast-rise 2s ease-out forwards;
+  }
+  @keyframes toast-rise {
+    0% {
+      opacity: 0;
+      transform: translateX(-50%) translateY(8px);
+    }
+    12% {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-50%) translateY(-56px);
+    }
+  }
+  /* Reduced motion: the same 2s life, fade only — no upward travel. */
+  .toast.rise-reduced {
+    animation: toast-rise-reduced 2s ease-out forwards;
+  }
+  @keyframes toast-rise-reduced {
+    0% {
+      opacity: 0;
+    }
+    12%,
+    70% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
 </style>