feat(profile): "set your city" gamification box → one-time 500-coin reward

- New searchable city picker (src/lib/iran-cities.ts, ~60 Iranian cities,
  fa/en search) shown as a gold reward card at the top of the profile Basic tab.
- First time a non-empty city is set, the player earns 500 coins (CITY_REWARD),
  granted server-authoritatively. Collapses to a compact summary afterwards with
  a "change city" option (no re-reward).
- Frontend: UserProfile.city + cityRewardClaimed; mock-service grants on first
  set; session/service updateProfile accept `city`; celebratory toast + sfx.
- Backend (.NET): ProfileDto.City/CityRewardClaimed (JSON blob → no migration);
  ProfileService.Update grants +500 once and writes a "city" ledger entry.
- i18n: city.* keys (fa + en).

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

src/components/screens/ProfileScreen.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Check, ChevronLeft, Crown, Eye, EyeOff, Lock, LogOut, Pencil, Star, Upload, Users, Volume2 } from "lucide-react";
+import { Check, ChevronLeft, Crown, Eye, EyeOff, Gift, Lock, LogOut, MapPin, Pencil, Search, Star, Upload, Users, Volume2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { RankBadge } from "@/components/online/RankBadge";
@@ -16,12 +16,16 @@ import {
   ACHIEVEMENTS,
   CARD_BACKS,
   CARD_FRONTS,
+  CITY_REWARD,
   TITLES,
   achievementProgress,
   ownedAvatarIds,
   ownedCardBackIds,
   ownedCardFrontIds,
 } from "@/lib/online/gamification";
+import { IRAN_CITIES, cityById, searchCities, type City } from "@/lib/iran-cities";
+import { pushNotification } from "@/lib/notification-store";
+import { sound } from "@/lib/sound";
 
 /** Level required before a player can upload a custom profile photo. */
 const PHOTO_UPLOAD_MIN_LEVEL = 25;
@@ -95,6 +99,11 @@ export function ProfileScreen() {
       {/* ===== Basic: player card + stats/achievements ===== */}
       {tab === "basic" && (
         <div className="grid gap-4 items-start landscape:grid-cols-[minmax(0,340px)_minmax(0,1fr)]">
+          {/* one-time "set your city" reward */}
+          <div className="landscape:col-span-2">
+            <CityRewardCard />
+          </div>
+
           {/* player card */}
           <motion.div
             initial={{ opacity: 0, y: 16 }}
@@ -507,6 +516,155 @@ function SocialSettings() {
   );
 }
 
+/**
+ * One-time gamification box: pick your city from a searchable list and earn a
+ * 500-coin reward (granted server-side the first time a city is set). Once
+ * claimed it collapses to a compact summary with an option to change city.
+ */
+function CityRewardCard() {
+  const { t, locale } = useI18n();
+  const profile = useSessionStore((s) => s.profile);
+  const updateProfile = useSessionStore((s) => s.updateProfile);
+
+  const claimed = !!profile?.cityRewardClaimed;
+  const currentCity = cityById(profile?.city);
+  const [editing, setEditing] = useState(!claimed);
+  const [query, setQuery] = useState("");
+  const [pickedId, setPickedId] = useState<string | null>(profile?.city ?? null);
+  const [saving, setSaving] = useState(false);
+
+  const results = query.trim() ? searchCities(query, 40) : IRAN_CITIES.slice(0, 40);
+  const picked = cityById(pickedId ?? undefined);
+  const cityName = (c?: City) => (c ? (locale === "fa" ? c.fa : c.en) : "");
+
+  const choose = (c: City) => {
+    setPickedId(c.id);
+    setQuery(cityName(c));
+  };
+
+  const save = async () => {
+    if (!pickedId || saving) return;
+    const firstClaim = !claimed;
+    setSaving(true);
+    try {
+      await updateProfile({ city: pickedId });
+    } finally {
+      setSaving(false);
+    }
+    setEditing(false);
+    if (firstClaim) {
+      sound.play("award");
+      pushNotification({
+        kind: "system",
+        titleFa: `+${CITY_REWARD.toLocaleString("fa")} سکه دریافت شد! 🎉`,
+        titleEn: `+${CITY_REWARD} coins earned! 🎉`,
+        bodyFa: "شهر شما ثبت شد.",
+        bodyEn: "Your city has been saved.",
+        icon: "📍",
+      });
+    }
+  };
+
+  // ---- Claimed + collapsed: compact summary ----
+  if (claimed && !editing) {
+    return (
+      <div className="panel rounded-2xl p-3.5 flex items-center gap-3">
+        <span className="grid size-10 place-items-center rounded-xl bg-teal-500/15 text-teal-300 shrink-0">
+          <MapPin className="size-5" />
+        </span>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-bold text-cream truncate">{cityName(currentCity) || t("city.unknown")}</div>
+          <div className="text-[11px] text-teal-300">{t("city.claimed")}</div>
+        </div>
+        <button
+          onClick={() => {
+            setEditing(true);
+            setQuery(cityName(currentCity));
+          }}
+          className="text-xs font-bold text-gold-300 hover:text-gold-200 px-2 py-1 rounded-lg"
+        >
+          {t("city.change")}
+        </button>
+      </div>
+    );
+  }
+
+  // ---- Editing / unclaimed: reward prompt + searchable picker ----
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="rounded-3xl p-4 relative overflow-hidden border border-gold-500/30 bg-gradient-to-br from-gold-500/10 to-navy-900/40"
+    >
+      {!claimed && (
+        <div className="flex items-center gap-3 mb-3">
+          <motion.span
+            initial={{ scale: 0, rotate: -15 }}
+            animate={{ scale: 1, rotate: 0 }}
+            transition={{ type: "spring", stiffness: 240, delay: 0.05 }}
+            className="grid size-11 place-items-center rounded-2xl btn-gold shrink-0"
+          >
+            <Gift className="size-5" />
+          </motion.span>
+          <div className="min-w-0">
+            <div className="text-sm font-black text-cream">{t("city.rewardTitle")}</div>
+            <div className="text-[11px] text-gold-300 font-bold">
+              {t("city.rewardSub").replace("{n}", CITY_REWARD.toLocaleString(locale === "fa" ? "fa" : "en"))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* searchable city combobox */}
+      <div className="relative">
+        <Search className="absolute top-1/2 -translate-y-1/2 ltr:left-3 rtl:right-3 size-4 text-cream/40 pointer-events-none" />
+        <input
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setPickedId(null);
+          }}
+          placeholder={t("city.search")}
+          className="w-full rounded-xl bg-navy-900/70 gold-border ltr:pl-9 rtl:pr-9 px-3 py-2.5 text-sm text-cream placeholder:text-cream/30 outline-none focus:ring-2 focus:ring-gold-500/40"
+        />
+      </div>
+
+      {/* results — only while there's no committed pick yet */}
+      {!picked && (
+        <div className="mt-2 max-h-44 overflow-y-auto rounded-xl bg-navy-900/50 divide-y divide-navy-800/60">
+          {results.length === 0 && (
+            <div className="px-3 py-3 text-xs text-cream/40 text-center">{t("city.none")}</div>
+          )}
+          {results.map((c) => (
+            <button
+              key={c.id}
+              onClick={() => choose(c)}
+              className="w-full text-start px-3 py-2 text-sm text-cream/85 hover:bg-navy-800/70 flex items-center gap-2"
+            >
+              <MapPin className="size-3.5 text-cream/40 shrink-0" />
+              {cityName(c)}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* confirm / claim */}
+      {picked && (
+        <button
+          onClick={save}
+          disabled={saving}
+          className="press-3d btn-gold w-full rounded-xl py-3 mt-3 font-black text-sm flex items-center justify-center gap-2 disabled:opacity-60"
+        >
+          <MapPin className="size-4" />
+          {claimed
+            ? t("city.saveCity").replace("{city}", cityName(picked))
+            : t("city.claim").replace("{n}", CITY_REWARD.toLocaleString(locale === "fa" ? "fa" : "en"))}
+        </button>
+      )}
+    </motion.div>
+  );
+}
+
 function SoundSettings() {
   const { t } = useI18n();
   const { sfx, toggleSfx } = useSoundStore();