UX batch 2: room landscape-fit, rank vs league naming

- Room: teams side-by-side in landscape so all 4 seats fit (still scrolls).
- Achievements: rename the 5 rating tiers from «لیگ» (league) to «رتبه» (rank)
  + category «رتبه» — so "league" only means the 3 playable match leagues.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/screens/RoomScreen.tsx

@@ -89,36 +89,41 @@ export function RoomScreen() {
         }
       />
 
-      {/* your team */}
-      <h3 className="text-xs text-teal-300 font-bold mb-2">{t("team.us")}</h3>
-      <div className="grid grid-cols-2 gap-3">
-        <SeatCard seat={seat(0)} role="you" onInvite={() => {}} onBot={() => {}} onClear={() => {}} />
-        <SeatCard
-          seat={seat(2)}
-          role="partner"
-          onInvite={() => setPicker({ seat: 2 })}
-          onBot={() => addBot(2)}
-          onClear={() => clearSeat(2)}
-        />
-      </div>
+      {/* teams: stacked on phones, side-by-side in landscape so all 4 seats fit */}
+      <div className="grid gap-x-4 landscape:grid-cols-2">
+        <div>
+          <h3 className="text-xs text-teal-300 font-bold mb-2">{t("team.us")}</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <SeatCard seat={seat(0)} role="you" onInvite={() => {}} onBot={() => {}} onClear={() => {}} />
+            <SeatCard
+              seat={seat(2)}
+              role="partner"
+              onInvite={() => setPicker({ seat: 2 })}
+              onBot={() => addBot(2)}
+              onClear={() => clearSeat(2)}
+            />
+          </div>
+        </div>
 
-      {/* opponents */}
-      <h3 className="text-xs text-rose-300 font-bold mt-5 mb-2">{t("room.opponents")}</h3>
-      <div className="grid grid-cols-2 gap-3">
-        <SeatCard
-          seat={seat(1)}
-          role="opp"
-          onInvite={() => setPicker({ seat: 1 })}
-          onBot={() => addBot(1)}
-          onClear={() => clearSeat(1)}
-        />
-        <SeatCard
-          seat={seat(3)}
-          role="opp"
-          onInvite={() => setPicker({ seat: 3 })}
-          onBot={() => addBot(3)}
-          onClear={() => clearSeat(3)}
-        />
+        <div className="mt-5 landscape:mt-0">
+          <h3 className="text-xs text-rose-300 font-bold mb-2">{t("room.opponents")}</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <SeatCard
+              seat={seat(1)}
+              role="opp"
+              onInvite={() => setPicker({ seat: 1 })}
+              onBot={() => addBot(1)}
+              onClear={() => clearSeat(1)}
+            />
+            <SeatCard
+              seat={seat(3)}
+              role="opp"
+              onInvite={() => setPicker({ seat: 3 })}
+              onBot={() => addBot(3)}
+              onClear={() => clearSeat(3)}
+            />
+          </div>
+        </div>
       </div>
 
       <div className="flex gap-3 mt-7">