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/TabBar.svelte

@@ -51,10 +51,25 @@
     line-height: 1;
     transition: background-color 0.12s;
   }
-  /* A tab that navigates between peer views (Settings / Comms hubs) stays highlighted
-     while selected: a filled square with an accent underline. A tap itself leaves no
-     highlight — there is no press tint, and the WebKit tap flash is disabled on .tab. */
-  :global(.tab.active .sq) {
+  /* A tab that navigates between peer views (Settings / Comms hubs) wraps its icon and label
+     in a .face so the selected highlight hugs both — a filled pill with an accent underline,
+     sized to the content with a small padding. A tap itself leaves no highlight (no press
+     tint, and the WebKit tap flash is disabled on .tab). Plain action tabs (the lobby nav,
+     the in-game controls) carry no .face and are never .active, so they are unaffected. */
+  :global(.tab .face) {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 3px 10px;
+    border-radius: 12px;
+    transition: background-color 0.12s;
+  }
+  /* Inside a face the icon square needs no padding of its own — the face provides the
+     surround (the bare .sq padding still applies to the unwrapped action tabs). */
+  :global(.tab .face .sq) {
+    padding: 0;
+  }
+  :global(.tab.active .face) {
     background: var(--surface-2);
     box-shadow: inset 0 -2px 0 var(--accent);
   }