web/src/components/AppShell.tsx

@@ -1,9 +1,24 @@
-import { useState, useEffect, type ReactNode } from 'react';
+import { useState, useEffect, createContext, useContext, type ReactNode } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Icon from './Icon';
 import { getAuth, refreshAccessToken, redirectToLogin, backendLanguageToLocale, type AuthUser } from '../lib/auth';
 import { getUserProfile, type UserProfile } from '../lib/api';
 
+// User settings context
+interface UserSettingsContextValue {
+  userProfile: UserProfile | null;
+  setUserProfile: (profile: UserProfile | null) => void;
+}
+
+const UserSettingsContext = createContext<UserSettingsContextValue>({
+  userProfile: null,
+  setUserProfile: () => {},
+});
+
+export function useUserSettings() {
+  return useContext(UserSettingsContext);
+}
+
 interface NavItem {
   id: string;
   icon: string;
@@ -114,7 +129,8 @@ export default function AppShell({ locale, brandName, navItems, userName, userEm
   const shellAvatarUrl = userProfile?.avatar_url;
 
   return (
-    <div className="flex h-screen bg-slate-50 overflow-hidden">
+    <UserSettingsContext.Provider value={{ userProfile, setUserProfile }}>
+      <div className="flex h-screen bg-slate-50 overflow-hidden">
       {sidebarOpen && (
         <div className="fixed inset-0 bg-black/40 z-40 md:hidden" onClick={() => setSidebarOpen(false)} />
       )}
@@ -213,5 +229,6 @@ export default function AppShell({ locale, brandName, navItems, userName, userEm
         </div>
       </main>
     </div>
+    </UserSettingsContext.Provider>
   );
 }

web/src/components/AutoDivinationPage.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Icon from './Icon';
+import { getPointsBalance, type PointsBalance } from '../lib/api';
 
 interface Props {
   locale: string;
@@ -14,6 +15,11 @@ export default function AutoDivinationPage({ locale, divination: d }: Props) {
   const [progress, setProgress] = useState(0);
   const [hexLines, setHexLines] = useState<boolean[]>([]);
   const [isShaking, setIsShaking] = useState(false);
+  const [points, setPoints] = useState<PointsBalance | null>(null);
+
+  useEffect(() => {
+    getPointsBalance().then(setPoints).catch(() => {});
+  }, []);
 
   const handleShake = () => {
     setIsShaking(true);
@@ -37,7 +43,9 @@ export default function AutoDivinationPage({ locale, divination: d }: Props) {
           </div>
           <div className="hidden md:flex items-center gap-2 h-10 px-3.5 rounded-full bg-white border border-slate-200 text-[#333333] text-[13px] font-semibold">
             <Icon name="paid" className="w-[18px] h-[18px] text-violet-700" />
-            {locale === 'en' ? 'Available 120 credits · This time 20 credits' : '可用 120 积分 · 本次 20 积分'}
+            {locale === 'en'
+              ? `Available ${points?.availableBalance ?? '...'} credits · This time ${points?.runCost ?? 20} credits`
+              : `可用 ${points?.availableBalance ?? '...'} 积分 · 本次 ${points?.runCost ?? 20} 积分`}
           </div>
         </div>
         <div className="flex flex-col xl:flex-row gap-[22px] min-h-0 flex-1">

web/src/components/ManualDivinationPage.tsx

@@ -1,5 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Icon from './Icon';
+import { getPointsBalance, getUserProfile, updateUserSettings, type PointsBalance } from '../lib/api';
+import { useUserSettings } from './AppShell';
 
 interface Props {
   locale: string;
@@ -36,12 +38,27 @@ function fromCoins(coins: CoinFace[]): YaoType {
   return fromHuaCount(coins.filter((coin) => coin === 'hua').length);
 }
 
-function CoinImage({ face, selected }: { face: CoinFace; selected?: boolean }) {
+// Get a default coin combination for a given YaoType
+// (multiple combinations can map to the same YaoType, we pick one)
+function coinsForYaoType(type: YaoType): [CoinFace, CoinFace, CoinFace] {
+  switch (type) {
+    case 'oldYin': // 0 hua
+      return ['zi', 'zi', 'zi'];
+    case 'youngYang': // 1 hua
+      return ['hua', 'zi', 'zi'];
+    case 'youngYin': // 2 hua
+      return ['hua', 'hua', 'zi'];
+    case 'oldYang': // 3 hua
+      return ['hua', 'hua', 'hua'];
+  }
+}
+
+function CoinImage({ face }: { face: CoinFace }) {
   return (
     <img
       src={face === 'zi' ? '/images/qigua/zi.jpg' : '/images/qigua/hua.jpg'}
       alt={face === 'zi' ? '字' : '花'}
-      className={`h-20 w-20 rounded-full object-cover shadow-sm transition-transform ${selected ? 'ring-2 ring-violet-600 ring-offset-2 ring-offset-slate-50' : ''}`}
+      className={`h-20 w-20 rounded-full object-cover shadow-md coin-flip ${face === 'hua' ? 'flipped' : ''}`}
       draggable={false}
     />
   );
@@ -83,7 +100,7 @@ const copy = {
       ['手动起卦', '准备三枚相同的钱币。每次记录一爻，按从下往上的顺序共记录六爻。'],
       ['确认时间', '先确认起卦时间。如需调整，点击右侧「修改」。'],
       ['依次录入六爻', '从初爻开始逐条选择，未完成前下一爻不可点。每条会弹出三枚钱币选择面板。'],
-      ['开始分析', '六爻都填完后，「开始解卦」按钮会高亮提示，点击即可解卦。'],
+      ['开始分析', '六爻都填完后，下方「分析卦象」按钮会闪烁提示，点击即可解卦。'],
     ],
     closeGuide: '结束教程',
     nextGuide: '下一步',
@@ -109,7 +126,7 @@ const copy = {
       ['手動起卦', '準備三枚相同的錢幣。每次記錄一爻，按從下往上的順序共記錄六爻。'],
       ['確認時間', '先確認起卦時間。如需調整，點擊右側「修改」。'],
       ['依序錄入六爻', '從初爻開始逐條選擇，未完成前下一爻不可點擊。每條會彈出三枚錢幣選擇面板。'],
-      ['開始分析', '六爻都填完後，「開始解卦」按鈕會高亮提示，點擊即可解卦。'],
+      ['開始分析', '六爻都填完後，下方「分析卦象」按鈕會閃爍提示，點擊即可解卦。'],
     ],
     closeGuide: '結束教程',
     nextGuide: '下一步',
@@ -129,21 +146,21 @@ const copy = {
     balance: 'Available 120 credits · This reading 20 credits',
     defaultQuestion: 'What should I pay attention to in my career development over the next three months?',
     modify: 'Modify',
-    guideLines: ['Record from the first yao upward.', 'Each yao is determined by the text-side and flower-side combination of three coins.', 'Start interpretation after all six yao are complete.'],
+    guideLines: ['Record from the first yao upward.', 'Each yao is determined by the inscription-side and pattern-side combination of three coins.', 'Start interpretation after all six yao are complete.'],
     openGuide: 'View Manual Casting Guide',
     guideSteps: [
       ['Manual Casting', 'Prepare three identical coins. Record one yao at a time, from bottom to top, until all six yao are complete.'],
-      ['Confirm Time', 'Check the casting time first. Use Modify on the right if you need to adjust it.'],
-      ['Fill Six Yao in Order', 'Start from the first yao and complete one row at a time. The next row stays locked until the current row is confirmed.'],
-      ['Start Interpretation', 'After all six yao are filled, Start Interpretation becomes active. Select it to continue.'],
+      ['Confirm Time', 'Check the casting time first. Tap "Modify" on the right if you need to adjust it.'],
+      ['Fill Six Yao in Order', 'Start from the first yao and select one row at a time. The next row stays locked until the current row is completed.'],
+      ['Start Analysis', 'After all six yao are filled, the "Analyze Hexagram" button will blink. Tap it to start interpretation.'],
     ],
     closeGuide: 'Finish',
     nextGuide: 'Next',
     prevGuide: 'Back',
     lineNames: ['First Yao', 'Second Yao', 'Third Yao', 'Fourth Yao', 'Fifth Yao', 'Top Yao'],
     pending: 'Pending',
-    zi: 'Text',
-    hua: 'Flower',
+    zi: 'Inscription',
+    hua: 'Pattern',
     yaoTypeNames: { youngYang: 'Young Yang', youngYin: 'Young Yin', oldYang: 'Old Yang', oldYin: 'Old Yin' },
     questionTypePrefix: 'Category',
     method: 'Method: Manual Casting',
@@ -160,11 +177,191 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
   const [coins, setCoins] = useState<[CoinFace, CoinFace, CoinFace]>(['zi', 'zi', 'zi']);
   const [yaoResults, setYaoResults] = useState<YaoType[]>([]);
   const [guideStep, setGuideStep] = useState<number | null>(null);
+  const [points, setPoints] = useState<PointsBalance | null>(null);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const { userProfile, setUserProfile } = useUserSettings();
+
+  // Refs for guide spotlight positioning
+  // Guide steps: 0=coins area, 1=time, 2=yao panel (full), 3=submit
+  const coinsAreaRef = useRef<HTMLDivElement>(null);
+  const timePanelRef = useRef<HTMLElement>(null);
+  const yaoPanelRef = useRef<HTMLElement>(null);
+  const submitBtnRef = useRef<HTMLButtonElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [spotlightRect, setSpotlightRect] = useState<{ left: number; top: number; width: number; height: number } | null>(null);
+  const [tooltipPos, setTooltipPos] = useState<{ left: number; top: number }>({ left: 0, top: 0 });
+  const [tooltipSide, setTooltipSide] = useState<'right' | 'left' | 'bottom' | 'top'>('right');
+  const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' && window.innerWidth < 1280);
+
+  // Track if first-visit auto-show has been attempted
+  const [tutorialChecked, setTutorialChecked] = useState(false);
+
+  // Auto-show tutorial on first visit
+  useEffect(() => {
+    if (tutorialChecked) return;
+    const tutorialSettings = userProfile?.settings?.divination_tutorial;
+    if (tutorialSettings && !tutorialSettings.manual_divination_shown) {
+      // Delay to let the page render first
+      const timer = setTimeout(() => {
+        setTutorialChecked(true);
+        setGuideStep(0);
+      }, 400);
+      return () => clearTimeout(timer);
+    } else if (userProfile !== null) {
+      // Profile loaded but tutorial already shown
+      setTutorialChecked(true);
+    }
+  }, [userProfile, tutorialChecked]);
+
+  // Mark tutorial as shown when guide ends
+  const closeGuide = async () => {
+    setGuideStep(null);
+    if (userProfile && !userProfile.settings.divination_tutorial.manual_divination_shown) {
+      const updatedSettings = {
+        ...userProfile.settings,
+        divination_tutorial: {
+          ...userProfile.settings.divination_tutorial,
+          manual_divination_shown: true,
+        },
+      };
+      try {
+        const updated = await updateUserSettings({ settings: updatedSettings });
+        setUserProfile(updated);
+      } catch {
+        // Silently fail - tutorial shown state is non-critical
+      }
+    }
+  };
+
+  // Track previous guide step to detect initial open
+  const prevGuideStepRef = useRef<number | null>(null);
+
+  // Update spotlight position when guide step changes
+  // Mobile: use absolute positioning relative to scroll container for stability
+  // Desktop: use fixed positioning relative to viewport
+  useLayoutEffect(() => {
+    if (guideStep === null) {
+      setSpotlightRect(null);
+      prevGuideStepRef.current = null;
+      return;
+    }
+
+    const targetRef = [coinsAreaRef, timePanelRef, yaoPanelRef, submitBtnRef][guideStep];
+    if (!targetRef?.current) return;
+
+    const tooltipWidth = 320;
+    const tooltipHeight = 180;
+    const gap = 16;
+
+    // Get scroll container - it's the main element inside AppShell
+    const scrollContainer = scrollContainerRef.current?.parentElement?.parentElement as HTMLElement | null;
+    if (!scrollContainer) return;
+
+    const isInitialOpen = prevGuideStepRef.current === null;
+
+    // ===== MOBILE: Absolute positioning relative to scroll container =====
+    if (isMobile) {
+      // Calculate element's offset relative to scroll container
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const elementRect = targetRef.current.getBoundingClientRect();
+
+      // Element position relative to scroll container (accounts for current scroll)
+      const elementLeft = elementRect.left - containerRect.left;
+      const elementTop = elementRect.top - containerRect.top + scrollContainer.scrollTop;
+      const elementWidth = elementRect.width;
+      const elementHeight = elementRect.height;
+
+      // On initial open, scroll to top first
+      if (isInitialOpen) {
+        scrollContainer.scrollTop = 0;
+      }
+
+      // Calculate where we need to scroll to make both spotlight and tooltip visible
+      // Spotlight should be at top portion, tooltip below it
+      const totalHeight = elementHeight + gap + tooltipHeight;
+      const scrollTopNeeded = Math.max(0, elementTop - 20); // 20px margin above spotlight
+
+      // Smooth scroll to position
+      scrollContainer.scrollTo({ top: scrollTopNeeded, behavior: 'smooth' });
+
+      // Use requestAnimationFrame to ensure scroll has started before calculating final position
+      requestAnimationFrame(() => {
+        // Recalculate element position after scroll setup
+        const newElementRect = targetRef.current!.getBoundingClientRect();
+        const newContainerRect = scrollContainer.getBoundingClientRect();
+
+        // Position relative to container (for absolute positioning)
+        const spotlightLeft = newElementRect.left - newContainerRect.left;
+        const spotlightTop = newElementRect.top - newContainerRect.top;
+
+        // Tooltip goes below the element
+        const tooltipLeft = Math.max(16, Math.min(
+          (newElementRect.left + newElementRect.right - tooltipWidth) / 2 - newContainerRect.left,
+          containerRect.width - tooltipWidth - 16
+        ));
+        const tooltipTop = spotlightTop + elementHeight + gap;
+
+        setSpotlightRect({
+          left: spotlightLeft,
+          top: spotlightTop,
+          width: elementWidth,
+          height: elementHeight
+        });
+        setTooltipPos({ left: tooltipLeft, top: tooltipTop });
+        setTooltipSide('bottom');
+      });
+
+      prevGuideStepRef.current = guideStep;
+      return;
+    }
+
+    // ===== DESKTOP: Fixed positioning relative to viewport =====
+    targetRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+    const rect = targetRef.current.getBoundingClientRect();
+    let tooltipLeft: number;
+    let tooltipTop: number;
+    let side: 'right' | 'left' | 'bottom' | 'top';
+
+    if (rect.right + gap + tooltipWidth <= window.innerWidth) {
+      tooltipLeft = rect.right + gap;
+      tooltipTop = rect.top;
+      side = 'right';
+    } else if (rect.left >= tooltipWidth + gap) {
+      tooltipLeft = rect.left - tooltipWidth - gap;
+      tooltipTop = rect.top;
+      side = 'left';
+    } else {
+      tooltipLeft = Math.max(16, Math.min(rect.left, window.innerWidth - tooltipWidth - 16));
+      tooltipTop = rect.bottom + gap;
+      side = 'bottom';
+    }
+
+    if (tooltipTop + tooltipHeight > window.innerHeight) {
+      tooltipTop = Math.max(16, window.innerHeight - tooltipHeight - 16);
+    }
+
+    setSpotlightRect({ left: rect.left, top: rect.top, width: rect.width, height: rect.height });
+    setTooltipPos({ left: tooltipLeft, top: tooltipTop });
+    setTooltipSide(side);
+    prevGuideStepRef.current = guideStep;
+  }, [guideStep, isMobile]);
 
   useEffect(() => {
     setCategory(cats[0]);
   }, [cats]);
 
+  useEffect(() => {
+    getPointsBalance().then(setPoints).catch(() => {});
+  }, []);
+
+  // Track mobile state on resize
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 1280);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   const progress = yaoResults.length;
   const currentYaoType = fromCoins(coins);
   const guideOpen = guideStep !== null;
@@ -179,16 +376,33 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
   };
 
   const confirmYao = () => {
-    if (progress >= TOTAL_YAO_COUNT) return;
-    setYaoResults((current) => [...current, currentYaoType]);
-    setCoins(['zi', 'zi', 'zi']);
+    if (editingIndex !== null) {
+      // Editing an existing yao
+      setYaoResults((current) => {
+        const next = [...current];
+        next[editingIndex] = currentYaoType;
+        return next;
+      });
+      setEditingIndex(null);
+    } else {
+      if (progress >= TOTAL_YAO_COUNT) return;
+      setYaoResults((current) => [...current, currentYaoType]);
+    }
+  };
+
+  const selectYaoRow = (index: number) => {
+    if (guideOpen) return; // Don't allow interaction during guide
+    if (!yaoResults[index]) return; // Not filled yet
+    setEditingIndex(index);
+    // Load the coins state for this yao
+    setCoins(coinsForYaoType(yaoResults[index]));
   };
 
   const showPreviousGuide = () => setGuideStep((step) => (step === null ? 0 : Math.max(step - 1, 0)));
   const showNextGuide = () => setGuideStep((step) => (step === null ? 0 : Math.min(step + 1, text.guideSteps.length - 1)));
 
   return (
-    <div className="relative flex min-h-full flex-col gap-[22px]">
+    <div ref={scrollContainerRef} className="relative flex min-h-full flex-col gap-[22px]">
       <div className="flex items-center justify-between gap-5">
         <div className="min-w-0">
           <h1 className="text-[28px] font-bold leading-tight text-[#333333]">{text.title}</h1>
@@ -196,12 +410,29 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
         </div>
         <div className="hidden h-10 items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 text-[13px] font-semibold text-[#333333] md:flex">
           <Icon name="paid" className="h-[18px] w-[18px] text-violet-700" />
-          {text.balance}
+          {locale === 'en'
+            ? `Available ${points?.availableBalance ?? '...'} credits · This time ${points?.runCost ?? 20} credits`
+            : `可用 ${points?.availableBalance ?? '...'} 积分 · 本次 ${points?.runCost ?? 20} 积分`}
         </div>
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col gap-[22px] xl:flex-row">
         <div className="flex w-full shrink-0 flex-col gap-4 xl:w-[360px]">
+          {/* 教程面板 - 手机端显示在最上方 */}
+          <section className="flex h-[214px] flex-col gap-3 rounded-2xl border bg-white p-5 border-slate-200">
+            <h2 className="text-base font-bold text-slate-900">{d.guideTitle}</h2>
+            {text.guideLines.map((line) => <p key={line} className="text-[13px] leading-relaxed text-[#666666]">{line}</p>)}
+            <button
+              type="button"
+              onClick={() => setGuideStep(0)}
+              className="mt-auto flex h-8 w-fit items-center gap-2 rounded-[17px] bg-[#F0E6FF] px-3 text-[13px] font-bold text-[#673AB7] hover:bg-[#E6D6FF] transition-colors"
+            >
+              <Icon name="help" className="h-[18px] w-[18px]" />
+              {text.openGuide}
+            </button>
+          </section>
+
+          {/* 问题面板 */}
           <section className="flex h-[300px] flex-col gap-4 rounded-2xl border border-slate-200 bg-white p-[22px]">
             <h2 className="text-lg font-bold text-slate-900">{d.questionTitle}</h2>
             <label className="sr-only" htmlFor="manual-category">{d.categoryLabel}</label>
@@ -221,7 +452,8 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
             />
           </section>
 
-          <section className={`flex h-[132px] flex-col gap-3 rounded-2xl border bg-white p-5 ${guideStep === 1 ? 'border-violet-500 ring-4 ring-violet-100' : 'border-slate-200'}`}>
+          {/* 时间面板 */}
+          <section ref={timePanelRef} className={`flex h-[132px] flex-col gap-3 rounded-2xl border bg-white p-5 ${guideStep === 1 ? 'border-violet-500 ring-4 ring-violet-100' : 'border-slate-200'}`}>
             <h2 className="text-base font-bold text-slate-900">{d.timeTitle}</h2>
             <div className="flex h-[42px] items-center justify-between gap-3 rounded-[10px] bg-slate-50 px-3">
               <input
@@ -230,25 +462,12 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
                 onChange={(event) => setSelectedTime(event.target.value)}
                 className="w-full bg-transparent text-sm font-semibold text-[#333333] outline-none"
               />
-              <span className="shrink-0 text-[13px] font-bold text-violet-700">{text.modify}</span>
+              <span className="shrink-0 cursor-pointer text-[13px] font-bold text-violet-700 hover:text-violet-800">{text.modify}</span>
             </div>
           </section>
-
-          <section className={`flex h-[214px] flex-col gap-3 rounded-2xl border bg-white p-5 ${guideStep === 0 ? 'border-violet-500 ring-4 ring-violet-100' : 'border-slate-200'}`}>
-            <h2 className="text-base font-bold text-slate-900">{d.guideTitle}</h2>
-            {text.guideLines.map((line) => <p key={line} className="text-[13px] leading-relaxed text-[#666666]">{line}</p>)}
-            <button
-              type="button"
-              onClick={() => setGuideStep(0)}
-              className="mt-auto flex h-8 w-fit items-center gap-2 rounded-full bg-violet-50 px-3 text-[13px] font-bold text-violet-700"
-            >
-              <Icon name="notifications" className="h-[18px] w-[18px]" />
-              {text.openGuide}
-            </button>
-          </section>
         </div>
 
-        <section className={`flex min-w-0 flex-1 flex-col gap-4 rounded-2xl border bg-white p-6 ${guideStep === 2 ? 'border-violet-500 ring-4 ring-violet-100' : 'border-slate-200'}`}>
+        <section ref={yaoPanelRef} className={`flex min-w-0 flex-1 flex-col gap-4 rounded-2xl border bg-white p-6 ${guideStep === 2 ? 'border-violet-500 ring-4 ring-violet-100' : 'border-slate-200'}`}>
           <div className="flex items-center justify-between gap-4">
             <h2 className="text-lg font-bold text-slate-900">{d.yaoTitle}</h2>
             <span className="text-[13px] font-bold text-violet-700">{progress} / {TOTAL_YAO_COUNT}</span>
@@ -257,14 +476,17 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
           <div className="flex flex-col gap-2.5">
             {[5, 4, 3, 2, 1, 0].map((index) => {
               const result = yaoResults[index];
-              const active = index === progress && progress < TOTAL_YAO_COUNT;
+              // Only show "active" highlight when not in editing mode
+              const active = editingIndex === null && index === progress && progress < TOTAL_YAO_COUNT;
               const confirmed = !!result;
+              const editing = editingIndex === index;
               return (
                 <div
                   key={index}
-                  className={`flex h-[62px] items-center gap-4 rounded-[10px] px-3.5 ${active ? 'border border-violet-600 bg-violet-50' : confirmed ? 'border border-slate-200 bg-white' : 'bg-slate-50'}`}
+                  onClick={() => selectYaoRow(index)}
+                  className={`flex h-[62px] items-center gap-4 rounded-[10px] px-3.5 ${editing ? 'border border-violet-600 bg-violet-50' : active ? 'border border-violet-600 bg-violet-50' : confirmed ? 'border border-slate-200 bg-white cursor-pointer hover:border-violet-300' : 'bg-slate-50'}`}
                 >
-                  <span className={`w-16 text-sm font-bold ${active || confirmed ? 'text-violet-700' : 'text-slate-400'}`}>{text.lineNames[index]}</span>
+                  <span className={`w-16 text-sm font-bold ${active || confirmed || editing ? 'text-violet-700' : 'text-slate-400'}`}>{text.lineNames[index]}</span>
                   <div className="min-w-0 flex-1">
                     <YaoGlyph type={result} confirmed={confirmed} />
                   </div>
@@ -276,33 +498,37 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
             })}
           </div>
 
-          {progress < TOTAL_YAO_COUNT && (
-            <>
-              <div className="flex min-h-[142px] items-center justify-center rounded-xl bg-slate-50 p-4">
-                <div className="flex items-center justify-center gap-6">
-                  {coins.map((face, index) => (
-                    <button
-                      key={index}
-                      type="button"
-                      onClick={() => flipCoin(index)}
-                      className="flex w-20 flex-col items-center gap-2 text-[13px] font-bold text-slate-600"
-                    >
-                      <CoinImage face={face} selected={face === 'hua'} />
-                      <span>{face === 'zi' ? text.zi : text.hua}</span>
-                    </button>
-                  ))}
-                </div>
-              </div>
+          {/* Coins area - always visible; shows editing state or next-yao state */}
+          <div ref={coinsAreaRef} className="flex min-h-[142px] items-center justify-center rounded-xl bg-slate-50 p-4">
+            <div className="flex items-center justify-center gap-6">
+              {coins.map((face, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  onClick={() => flipCoin(index)}
+                  className="flex w-20 flex-col items-center gap-2 text-[13px] font-bold text-slate-600"
+                >
+                  <CoinImage face={face} />
+                  <span>{face === 'zi' ? text.zi : text.hua}</span>
+                </button>
+              ))}
+            </div>
+          </div>
 
-              <button
-                type="button"
-                onClick={confirmYao}
-                className="h-10 w-full rounded-full bg-violet-700 text-[13px] font-bold text-white transition-colors hover:bg-violet-800"
-              >
-                {d.confirmBtn}
-              </button>
-            </>
-          )}
+          <button
+            type="button"
+            onClick={confirmYao}
+            disabled={progress >= TOTAL_YAO_COUNT && editingIndex === null}
+            className={`h-10 w-full rounded-full text-[13px] font-bold transition-colors ${
+              editingIndex !== null
+                ? 'bg-violet-700 text-white hover:bg-violet-800'
+                : progress >= TOTAL_YAO_COUNT
+                  ? 'cursor-not-allowed bg-slate-300 text-slate-400'
+                  : 'bg-violet-700 text-white hover:bg-violet-800'
+            }`}
+          >
+            {editingIndex !== null ? d.confirmBtn : progress >= TOTAL_YAO_COUNT ? d.confirmBtn : d.confirmBtn}
+          </button>
         </section>
 
         <aside className="flex w-full shrink-0 flex-col gap-[18px] rounded-2xl border border-slate-200 bg-white p-[22px] xl:w-[300px]">
@@ -313,9 +539,10 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
           </div>
           <p className="text-sm text-[#666666]">{text.questionTypePrefix}{locale === 'en' ? ': ' : '：'}{category}</p>
           <p className="text-sm text-[#666666]">{text.method}</p>
-          <p className="text-sm text-[#666666]">{d.checkCost}</p>
+          <p className="text-sm text-[#666666]">{locale === 'en' ? `Cost: ${points?.runCost ?? 20} credits` : `解卦消耗：${points?.runCost ?? 20} 积分`}</p>
           <div className="flex-1" />
           <button
+            ref={submitBtnRef}
             type="button"
             disabled={progress < TOTAL_YAO_COUNT}
             className={`h-[46px] w-full rounded-full text-sm font-bold transition-colors ${progress >= TOTAL_YAO_COUNT ? 'bg-violet-700 text-white hover:bg-violet-800' : 'cursor-not-allowed bg-slate-300 text-slate-400'} ${guideStep === 3 ? 'ring-4 ring-violet-100' : ''}`}
@@ -325,33 +552,91 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
         </aside>
       </div>
 
-      {guideOpen && guide && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-5">
-          <div className="w-full max-w-md rounded-2xl border border-white/10 bg-slate-950 p-6 text-white shadow-2xl">
-            <div className="mb-4 flex items-center justify-between gap-4">
-              <span className="text-sm font-bold text-violet-200">{guideStep + 1} / {text.guideSteps.length}</span>
-              <button type="button" onClick={() => setGuideStep(null)} className="rounded-full p-1 text-white/70 hover:bg-white/10 hover:text-white">
-                <Icon name="close" className="h-5 w-5" />
+      {/* Guide overlay with spotlight */}
+      {guideOpen && guide && spotlightRect && (
+        <>
+          {/* Dark overlay - fixed for desktop, covers viewport */}
+          <div
+            className="fixed inset-0 z-40 bg-black/70 md:block hidden"
+            onClick={() => closeGuide()}
+          />
+          {/* Mobile dark overlay - positioned within scroll container */}
+          <div
+            className="absolute inset-0 z-40 bg-black/70 md:hidden"
+            style={{ top: 0, height: '100vh' }}
+            onClick={() => closeGuide()}
+          />
+
+          {/* Spotlight on target element - fixed for desktop, absolute for mobile */}
+          <div
+            className={`z-50 rounded-2xl ring-4 ring-white shadow-[0_0_0_9999px_rgba(0,0,0,0.7)] transition-all duration-300 ${
+              isMobile ? 'absolute' : 'fixed'
+            }`}
+            style={{
+              left: spotlightRect.left,
+              top: spotlightRect.top,
+              width: spotlightRect.width,
+              height: spotlightRect.height
+            }}
+          />
+
+          {/* Guide tooltip - fixed for desktop, absolute for mobile */}
+          <div
+            className={`z-50 w-[320px] rounded-2xl bg-slate-950 p-5 text-white shadow-2xl transition-all duration-300 ${
+              isMobile ? 'absolute' : 'fixed'
+            }`}
+            style={{
+              left: tooltipPos.left,
+              top: tooltipPos.top
+            }}
+          >
+            {/* Arrow pointing to spotlight */}
+            <div
+              className={`absolute h-3 w-3 rotate-45 bg-slate-950 ${
+                tooltipSide === 'right' ? '-left-1.5 top-6' :
+                tooltipSide === 'left' ? '-right-1.5 top-6' :
+                tooltipSide === 'top' ? '-bottom-1.5 left-6' :
+                '-top-1.5 left-6'
+              }`}
+            />
+
+            <div className="mb-3 flex items-center justify-between gap-4">
+              <span className="text-xs font-bold text-violet-300">{guideStep + 1} / {text.guideSteps.length}</span>
+              <button type="button" onClick={() => closeGuide()} className="rounded-full p-1 text-white/50 hover:text-white">
+                <Icon name="close" className="h-4 w-4" />
               </button>
             </div>
-            <h2 className="text-xl font-bold">{guide[0]}</h2>
-            <p className="mt-3 text-sm leading-6 text-white/80">{guide[1]}</p>
-            <div className="mt-6 flex items-center justify-between gap-3">
-              <button type="button" onClick={showPreviousGuide} disabled={guideStep === 0} className="h-10 rounded-full px-4 text-sm font-bold text-white/70 disabled:opacity-40">
+            <h3 className="text-base font-bold">{guide[0]}</h3>
+            <p className="mt-2 text-sm leading-relaxed text-white/70">{guide[1]}</p>
+            <div className="mt-4 flex items-center justify-between gap-3">
+              <button
+                type="button"
+                onClick={showPreviousGuide}
+                disabled={guideStep === 0}
+                className="h-9 rounded-full px-4 text-sm font-medium text-white/50 disabled:opacity-30 hover:text-white disabled:hover:text-white/50"
+              >
                 {text.prevGuide}
               </button>
               {guideStep === text.guideSteps.length - 1 ? (
-                <button type="button" onClick={() => setGuideStep(null)} className="h-10 rounded-full bg-white px-5 text-sm font-bold text-slate-950">
+                <button
+                  type="button"
+                  onClick={() => closeGuide()}
+                  className="h-9 rounded-full bg-violet-600 px-5 text-sm font-bold text-white hover:bg-violet-500"
+                >
                   {text.closeGuide}
                 </button>
               ) : (
-                <button type="button" onClick={showNextGuide} className="h-10 rounded-full bg-white px-5 text-sm font-bold text-slate-950">
+                <button
+                  type="button"
+                  onClick={showNextGuide}
+                  className="h-9 rounded-full bg-violet-600 px-5 text-sm font-bold text-white hover:bg-violet-500"
+                >
                   {text.nextGuide}
                 </button>
               )}
             </div>
           </div>
-        </div>
+        </>
       )}
     </div>
   );

web/src/i18n/utils.ts

@@ -98,7 +98,7 @@ const translations: Record<Locale, Translations> = {
     store: { title: 'Credits Store', currentPoints: 'Current Credits', pointsLabel: 'credits', rulesTitle: 'Credits Rules', rule1: '1 divination costs a fixed number of credits', rule2: 'Credits are added instantly after purchase', rule3: 'Starter Pack is limited to one per account', popularLabel: 'Recommended', popularText: 'Popular Pack offers the best value for most users.', stepsTitle: 'Payment Steps', step1: 'Select a package', step2: 'Complete payment', step3: 'Credits added automatically', autoCredit: 'Auto-delivery after purchase', sideTitle: 'Auto-delivery after purchase', sideDesc: 'Credits are synced to your account immediately after payment.' },
     settings: { title: 'Settings', profileTitle: 'Profile', emailLabel: 'Email', nameLabel: 'Name', joinedLabel: 'Joined', pointsTitle: 'Credits Balance', pointsBalance: 'credits', accountTitle: 'Account Settings', changeName: 'Change Name', changeAvatar: 'Change Avatar', changeLanguage: 'Change Language', legalTitle: 'Legal', privacy: 'Privacy Policy', terms: 'Terms of Service', logout: 'Sign Out', logoutConfirm: 'Are you sure you want to sign out?' },
     profile: { avatarTitle: 'Avatar', avatarHint: 'Supports PNG / JPG / WEBP. Square images recommended.', uploadBtn: 'Upload Avatar', formTitle: 'Basic Info', emailLabel: 'Email', displayNameLabel: 'Display Name', displayNamePlaceholder: 'Enter display name', bioLabel: 'Bio', bioPlaceholder: 'Enter your bio', saveBtn: 'Save', cancelBtn: 'Cancel' },
-    divination: { questionTitle: 'Ask Your Question', questionPlaceholder: 'Enter your question...', categoryLabel: 'Category', categories: 'Career,Love,Wealth,Fortune,Dreams,Health,Study,Lost Items,Other', timeTitle: 'Casting Time', timeHint: 'Uses current time by default, or pick manually', guideTitle: 'Guide', guideManual: 'Manual casting requires you to toss three coins six times. Follow these steps:\n\n1. Focus on your question\n2. Click coins below to set heads/tails\n3. Toss three coins per line\n4. Repeat six times to complete', guideAuto: 'Auto casting generates a hexagram randomly. Follow these steps:\n\n1. Focus on your question\n2. Click "Shake" button\n3. System generates the hexagram', yaoTitle: 'Six Lines', coinLabel: 'Click coins to set heads/tails', confirmBtn: 'Confirm Line', summaryTitle: 'Review Before Submit', checkCategory: 'Category: Career', checkMethod: 'Method: Manual Cast', checkCost: 'Cost: 20 credits', submitBtn: 'Confirm & Submit', shakeTitle: 'Shake', shakeBtn: 'Shake', hexPreview: 'Hexagram Preview', progressLabel: 'Progress' },
+    divination: { questionTitle: 'Ask Your Question', questionPlaceholder: 'Enter your question...', categoryLabel: 'Category', categories: 'Career,Love,Wealth,Fortune,Dreams,Health,Study,Lost Items,Other', timeTitle: 'Casting Time', timeHint: 'Uses current time by default, or pick manually', guideTitle: 'Guide', guideManual: 'Manual casting requires you to toss three coins six times. Follow these steps:\n\n1. Focus on your question\n2. Click coins below to set inscription/pattern\n3. Toss three coins per line\n4. Repeat six times to complete', guideAuto: 'Auto casting generates a hexagram randomly. Follow these steps:\n\n1. Focus on your question\n2. Click "Shake" button\n3. System generates the hexagram', yaoTitle: 'Six Lines', coinLabel: 'Click coins to set inscription/pattern', confirmBtn: 'Confirm Line', summaryTitle: 'Review Before Submit', checkCategory: 'Category: Career', checkMethod: 'Method: Manual Cast', checkCost: 'Cost: 20 credits', submitBtn: 'Confirm & Submit', shakeTitle: 'Shake', shakeBtn: 'Shake', hexPreview: 'Hexagram Preview', progressLabel: 'Progress' },
     history: { title: 'Reading History', statTotal: 'Total', statFollow: 'Follow-up', statLatest: 'Latest', filters: 'Quick Filters', filterAll: 'All', filterCareer: 'Career', filterLove: 'Love', filterWealth: 'Wealth', noResults: 'No readings yet', resultTitle: 'Reading Result', conclusion: 'Conclusion', suggestion: 'Suggestion', analysis: 'Detailed Analysis', focus: 'Key Focus', warning: 'AI-generated interpretation for entertainment only. Not professional advice.', followUpTitle: 'Follow-up', followUpDesc: 'Have questions about the reading? Ask one follow-up for deeper insights.', followUpBtn: 'Start Follow-up', chatTitle: 'Follow-up Chat', chatPlaceholder: 'Enter your follow-up question...', sendBtn: 'Send', relatedActions: 'Related Actions', newDivination: 'New Reading', viewHistory: 'View History', followUpRules: 'Follow-up Rules', followUpRule1: 'One follow-up per reading', followUpRule2: 'Follow-up costs 10 credits', basicInfo: 'Basic Info', ganzhi: 'Stem-Branch Info', hexagramDetail: 'Hexagram Details' },
     general: { title: 'General Settings', languageLabel: 'Language', languageValue: 'Interface Language', privacyTitle: 'Privacy', doNotSell: 'Personalized Ads', doNotSellHint: 'When off, your personal info won\'t be used for ad recommendations', notificationTitle: 'Notifications', allowNotification: 'Allow notifications', saveSuccess: 'Saved successfully', saveFailed: 'Failed to save' },
     feedback: { title: 'Feedback', typeLabel: 'Feedback Type', typeBug: 'Bug', typeSuggestion: 'Suggestion', typeOther: 'Other', contentLabel: 'Content', contentPlaceholder: 'Please describe your issue or suggestion in detail...', imagesLabel: 'Add Screenshots (max 3)', anonymousLabel: 'Do not upload my personal information', anonymousHint: 'If checked, your user ID will not be collected. Device info will still be collected for troubleshooting.', submitBtn: 'Submit Feedback', submitting: 'Submitting...', success: 'Thank you for your feedback. We will process it soon.', error: 'Failed to submit. Please try again.', contentRequired: 'Please enter feedback content', contentTooLong: 'Feedback content cannot exceed 500 characters', tooManyImages: 'Maximum 3 images allowed', imageTooLarge: 'Image size cannot exceed 5MB' },

web/src/styles/animations.css

@@ -154,6 +154,16 @@
   background: rgba(139, 92, 246, 0.4);
 }
 
+/* Coin flip animation */
+.coin-flip {
+  transition: transform 0.3s ease-out;
+  transform-style: preserve-3d;
+}
+
+.coin-flip.flipped {
+  transform: rotateY(180deg);
+}
+
 /* Feature card hover */
 .feature-card {
   transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);