Smoother tab switch (no dark flash), full welcome sentence, chapter banner sticky and chip centered, floating math glyphs in headers, quiz reaction emojis

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/screens/HomeScreen.tsx

@@ -39,7 +39,7 @@ export function HomeScreen() {
     : !home.units.length
       ? 'هنوز درسی برای این پایه ثبت نشده.'
       : cont
-        ? <>سلام {name}! 👋 نوبتِ جزیره‌ی <b>«<MathText text={cont.node.title} />»</b>ـه. دکمه‌ی <b>شروع</b> رو بزن.</>
+        ? <>سلام {name}! 👋 وقتشه جزیره‌ی <b>«<MathText text={cont.node.title} />»</b> رو شروع کنی؛ دکمه‌ی <b>شروع</b> رو بزن.</>
         : <>آفرین {name}! همه‌ی جزیره‌های این پایه رو تموم کردی 🎉</>;
 
   const stats = [
@@ -105,13 +105,13 @@ export function HomeScreen() {
                   <button
                     type="button"
                     onClick={() => nav.push({ name: 'unit', unitId: unit.id })}
-                    className="flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-right text-white active:translate-y-0.5"
+                    className="sticky top-2 z-10 flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-right text-white active:translate-y-0.5"
                     style={{ backgroundColor: onWhite(color), boxShadow: `0 4px 0 ${shade(onWhite(color), -0.25)}` }}
                   >
                     <div className="min-w-0 flex-1">
                       <div className="text-[11px] font-bold text-white/80">
                         فصلِ {toFa(i + 1)}<Sep />{toFa(p.done)} از {toFa(p.total)} جزیره
-                        {isCurrentUnit && <span className="mr-1.5 rounded-full bg-white/25 px-2 py-0.5">الان اینجایی</span>}
+                        {isCurrentUnit && <span className="mr-1.5 inline-flex h-5 items-center rounded-full bg-white/25 px-2 align-middle leading-none">الان اینجایی</span>}
                       </div>
                       <div className="mt-0.5 truncate text-[15px] font-black">{unit.title.replace(/^فصل\s*\S+\s*[:：]\s*/, '')}</div>
                     </div>

src/screens/QuizScreen.tsx

@@ -241,7 +241,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
   const bubble = !answer
     ? 'جوابِ درست رو انتخاب کن!'
     : answer.correct
-      ? 'آفرین! درست بود ⚡'
+      ? 'آفرین! درست بود'
       : outOfHearts
         ? 'قلب‌هات تموم شد؛ یه کم استراحت کنیم.'
         : 'اشکالی نداره، جوابِ درست رو ببین.';
@@ -282,6 +282,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
             !answer ? 'border-line bg-white text-indigo' : answer.correct ? 'border-green-200 bg-green-50 text-green-700' : 'border-purple-200 bg-purple-50 text-[#5B3FA0]'
           }`}>
             {bubble}
+            {answer && <Reaction key={question.id} correct={answer.correct} seed={index} />}
             {answer?.correct && answer.xpEarned > 0 && (
               <motion.span
                 key={question.id}
@@ -518,3 +519,21 @@ function ReportSheet({ open, questionId, onClose }: { open: boolean; questionId:
     </Sheet>
   );
 }
+
+/** شکلکِ کوچکِ بعد از جواب؛ هر سوال یکی از مجموعه، با یک تکانِ کوتاه. فقط ایموجی و transform. */
+const WIN = ['🧠', '💪', '🎯', '⚡', '🤩'];
+const MISS = ['🤔', '💡', '📐'];
+function Reaction({ correct, seed }: { correct: boolean; seed: number }) {
+  const set = correct ? WIN : MISS;
+  return (
+    <motion.span
+      aria-hidden
+      className="mr-1.5 inline-block"
+      initial={{ scale: 0.4, rotate: 0 }}
+      animate={{ scale: 1, rotate: [0, -14, 14, -8, 8, 0] }}
+      transition={{ duration: 0.6, ease: 'easeOut' }}
+    >
+      {set[seed % set.length]}
+    </motion.span>
+  );
+}