Fix liuyao UX: CSS coins, region auto-select, and clearer AI flow.

Replace missing coin images with CSS 3D coins, auto-select city on province change, expand Shandong cities, and improve AI interpretation prompts after six casts.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/modes/liuyao-form.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { readStreamableValue } from "ai/rsc";
-import { Compass, ListRestart } from "lucide-react";
+import { BrainCircuit, ListRestart } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import Result from "@/components/result";
@@ -35,18 +35,26 @@ export default function LiuyaoForm() {
   const [isLoading, setIsLoading] = useState(false);
   const [showAi, setShowAi] = useState(false);
 
+  const actionRef = useRef<HTMLDivElement>(null);
+
   const location = useRegionLocation(provinceCode, cityCode);
   const formReady = question.trim() !== "" && location !== null;
 
+  useEffect(() => {
+    if (guaData && actionRef.current) {
+      actionRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [guaData]);
+
   function validate(): string | null {
     if (!question.trim()) {
       return "请输入问事";
     }
     if (!location) {
-      return "请选择起卦地域";
+      return "请选择起卦省份";
     }
     if (!guaData) {
-      return "请先完成起卦（线上摇卦或线下录入）";
+      return "请先完成 6 次起卦（线上摇卦或线下录入）";
     }
     return null;
   }
@@ -115,6 +123,7 @@ export default function LiuyaoForm() {
     setGuaData(data);
     setShowAi(false);
     setCompletion("");
+    setError("");
   }
 
   return (
@@ -197,16 +206,25 @@ export default function LiuyaoForm() {
         />
 
         {guaData && (
-          <div className="rounded-lg border bg-card p-4">
+          <div className="space-y-3 rounded-lg border border-primary/30 bg-primary/5 p-4">
+            <p className="text-sm font-medium text-primary">
+              起卦完成 · 请点击下方「AI 解读」
+            </p>
             <Result {...guaData.result} />
           </div>
         )}
 
-        {error && !showAi && (
+        {!guaData && formReady && castMode === "online" && (
+          <p className="text-center text-xs text-muted-foreground">
+            线上模式将自动摇卦 6 次，完成后出现 AI 解读按钮
+          </p>
+        )}
+
+        {error && (
           <p className="text-sm text-destructive">{error}</p>
         )}
 
-        <div className="flex gap-2">
+        <div ref={actionRef} className="flex gap-2">
           <Button variant="outline" onClick={handleReset} className="flex-1">
             <ListRestart size={16} className="mr-1" />
             重来
@@ -216,8 +234,8 @@ export default function LiuyaoForm() {
             disabled={!guaData || isLoading}
             className="flex-1"
           >
-            <Compass size={16} className="mr-1" />
-            测算
+            <BrainCircuit size={16} className="mr-1" />
+            AI 解读
           </Button>
         </div>
       </div>