feat(tictactoe): integrate leaderboard UI, provider API hook, and new styles

- Add *_BKP* ignore rule to .gitignore
- Insert Leaderboard component into TicTacToe screen
- Add getLeaderboardTop() API method to NakamaProvider and expose via context
- Add full leaderboard polling logic (interval-based) in new Leaderboard.tsx
- Style leaderboard in styles.css (rows, rank, name, score, empty state, card UI)
- Modernize TicTacToe UI styles (board, squares, buttons, layout)
- Replace matchmaking view with leaderboard integration
- Import ApiLeaderboardRecordList and ApiMatch types cleanly

src/tictactoe/providers/NakamaProvider.tsx

@@ -6,8 +6,12 @@ import {
   MatchData,
   MatchmakerMatched,
 } from "@heroiclabs/nakama-js";
+
+import {
+  ApiMatch,
+  ApiLeaderboardRecordList,
 // @ts-ignore
-import { ApiMatch } from "@heroiclabs/nakama-js/dist/api.gen"
+} from "@heroiclabs/nakama-js/dist/api.gen"
 
 import React, { createContext, useContext, useState } from "react";
 
@@ -34,6 +38,7 @@ export interface NakamaContextType {
   sendMatchData(matchId: string, op: number, data: object): void;
 
   onMatchData(cb: (msg: any) => void): void;
+  getLeaderboardTop(): Promise<ApiLeaderboardRecordList>;
   listOpenMatches(): Promise<ApiMatch[]>;
 }
 
@@ -151,6 +156,16 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
     };
   }
 
+  async function getLeaderboardTop(): Promise<ApiLeaderboardRecordList> {
+    if (!session) return [];
+
+    return await client.listLeaderboardRecords(
+      session,
+      "tictactoe",
+      [],
+      10 // top 10
+    );
+  }
   async function listOpenMatches(): Promise<ApiMatch[]> {
     if (!session) {
       console.warn("[Nakama] listOpenMatches called before login");
@@ -176,6 +191,7 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
         joinMatch,
         sendMatchData,
         onMatchData,
+        getLeaderboardTop,
         listOpenMatches,
       }}
     >