# 修复起卦积分硬编码与硬币动画

## Goal

1. 修复手动起卦和自动起卦页面的积分硬编码问题，使用后端返回的 `runCost` 和实际积分余额
2. 添加硬币翻转动画效果
3. 优化硬币选中状态的视觉效果

## What I already know

**硬编码位置：**

1. `ManualDivinationPage.tsx` 第 77、103、129 行：
   - `'可用 120 积分 · 本次 20 积分'`
   - `'Available 120 credits · This reading 20 credits'`

2. `AutoDivinationPage.tsx` 第 40 行：
   - `'可用 120 积分 · 本次 20 积分'`

3. `StorePage.tsx` 第 91 行：
   - fallback `runCost: 20`

**API 已有字段：**
- `PointsBalance` 接口（`lib/api.ts` 第 120-126 行）：
  - `balance`: 总积分
  - `availableBalance`: 可用积分
  - `runCost`: 单次解卦消耗
  - `canRun`: 是否可运行

**Flutter 参考实现：**
- `apps/lib/features/divination/presentation/screens/manual_divination_screen.dart` 第 358、374 行
- 使用 `points.runCost` 和 `points.availableBalance`

**硬币当前样式：**
- `ManualDivinationPage.tsx` 第 44 行：
  - `ring-2 ring-violet-600 ring-offset-2 ring-offset-slate-50`
  - 选中有边框和背景

## Requirements

### R1: 积分显示使用后端数据
- 手动起卦和自动起卦页面需要调用 `getPointsBalance()` 获取实际积分
- 显示格式：`可用 {availableBalance} 积分 · 本次 {runCost} 积分`
- 英文：`Available {availableBalance} credits · This time {runCost} credits`

### R2: 硬币翻转动画
- 点击硬币时有翻转动画效果
- 使用 CSS transform: rotateY(180deg) 实现 3D 翻转

### R3: 优化硬币选中视觉效果
- 移除选中硬币的边框（ring）和背景偏移
- 只显示硬币图片本身
- 可以保留轻微阴影以区分层次

## Acceptance Criteria

- [ ] 手动起卦页面显示实际可用积分和解卦消耗
- [ ] 自动起卦页面显示实际可用积分和解卦消耗
- [ ] 点击硬币有翻转动画
- [ ] 选中的硬币无边框，只显示硬币图片

## Definition of Done

- 功能测试通过
- 与 Flutter 实现一致

## Technical Notes

**涉及文件：**
- `web/src/components/ManualDivinationPage.tsx`
- `web/src/components/AutoDivinationPage.tsx`
- `web/src/components/StorePage.tsx`（可选，fallback 值保留）

**修改方案：**

1. 在组件中添加 `useEffect` 调用 `getPointsBalance()`
2. 将硬编码文本替换为动态值
3. 添加 CSS 翻转动画类
4. 移除 `ring-2 ring-violet-600 ring-offset-2` 样式