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/shared/hexagram-input.tsx

@@ -191,9 +191,14 @@ export default function HexagramInput({
         <div className="flex flex-col items-center gap-3 sm:flex-row">
           <Hexagram list={hexagramList} />
           {complete && (
-            <Button size="sm" variant="outline" onClick={handleReset}>
-              重新起卦
-            </Button>
+            <>
+              <p className="text-sm text-muted-foreground sm:max-w-[10rem]">
+                六爻已齐，请在下方点击「AI 解读」
+              </p>
+              <Button size="sm" variant="outline" onClick={handleReset}>
+                重新起卦
+              </Button>
+            </>
           )}
         </div>
       )}

components/shared/region-select.tsx

@@ -1,6 +1,10 @@
 "use client";
 
-import { getProvinces, getCities, getRegionLocation } from "@/lib/data/regions";
+import {
+  getProvinces,
+  getCities,
+  getRegionLocation,
+} from "@/lib/data/regions";
 
 interface RegionSelectProps {
   provinceCode: string;
@@ -8,6 +12,7 @@ interface RegionSelectProps {
   onProvinceChange: (code: string) => void;
   onCityChange: (code: string) => void;
   label?: string;
+  cityOptional?: boolean;
 }
 
 export default function RegionSelect({
@@ -16,9 +21,23 @@ export default function RegionSelect({
   onProvinceChange,
   onCityChange,
   label = "出生地域",
+  cityOptional = true,
 }: RegionSelectProps) {
   const provinces = getProvinces();
   const cities = provinceCode ? getCities(provinceCode) : [];
+  const location = provinceCode
+    ? getRegionLocation(provinceCode, cityCode)
+    : null;
+
+  function handleProvinceChange(code: string) {
+    onProvinceChange(code);
+    if (!code) {
+      onCityChange("");
+      return;
+    }
+    const list = getCities(code);
+    onCityChange(list[0]?.code ?? "");
+  }
 
   return (
     <div className="space-y-2">
@@ -27,10 +46,7 @@ export default function RegionSelect({
         <select
           className="rounded-md border bg-background px-3 py-2 text-sm"
           value={provinceCode}
-          onChange={(e) => {
-            onProvinceChange(e.target.value);
-            onCityChange("");
-          }}
+          onChange={(e) => handleProvinceChange(e.target.value)}
         >
           <option value="">选择省份</option>
           {provinces.map((p) => (
@@ -40,12 +56,14 @@ export default function RegionSelect({
           ))}
         </select>
         <select
-          className="rounded-md border bg-background px-3 py-2 text-sm"
+          className="rounded-md border bg-background px-3 py-2 text-sm disabled:opacity-50"
           value={cityCode}
           onChange={(e) => onCityChange(e.target.value)}
-          disabled={!provinceCode}
+          disabled={!provinceCode || cities.length === 0}
         >
-          <option value="">选择城市/区县</option>
+          <option value="">
+            {cities.length === 0 ? "该省暂无下级城市" : "选择城市"}
+          </option>
           {cities.map((c) => (
             <option key={c.code} value={c.code}>
               {c.name}
@@ -53,6 +71,12 @@ export default function RegionSelect({
           ))}
         </select>
       </div>
+      {cityOptional && provinceCode && (
+        <p className="text-xs text-muted-foreground">
+          城市可不选，默认使用省份经度；已选：
+          {location ? `${location.name}（${location.longitude}°）` : "—"}
+        </p>
+      )}
     </div>
   );
 }