# 翻牌特效架构设计 (DESIGN)

## 整体架构
项目采用单页应用架构，通过 React 状态驱动 UI 更新和动效触发。

```mermaid
graph TD
    App[App Component] --> GameState[Game State: revealedCards, selectedId]
    App --> StarLayer[StarryBackground Component]
    App --> Grid[CardGrid Component]
    Grid --> Card[FlipCard Component]
    Card --> CardUI[Front: Avatar/Info | Back: ProductImg]
    App --> Modal[ProductModal Component]
```

## 核心组件设计

### 1. FlipCard (翻牌组件)
- **Props**: `id`, `user`, `product`, `isRevealed`, `onFlip`.
- **CSS**:
  - `.card-inner`: `transition: transform 0.6s; transform-style: preserve-3d;`
  - `.card-front`, `.card-back`: `backface-visibility: hidden;`

### 2. StarryBackground (星空背景)
- 实现多层叠加背景：
  - 底层：深蓝色渐变 `#0a0b1e` -> `#161b33`。
  - 中层：静态微小星星（CSS 粒状纹理）。
  - 高层：关键帧动画模拟的闪烁星星（不同大小、延时）。

### 3. ProductModal (展示遮罩)
- 当 `selectedId` 存在时显示。
- **Style**: `fixed inset-0`, `backdrop-filter: blur(8px)`, `bg-black/40`。
- **Animation**: 放大缩放并带有一圈光晕特效。

## 实现细节：粒子特效
当翻牌触发时，在卡片位置生成一组临时的粒子元素：
- 随机方向发射。
- 逐渐变小并透明。
- 使用 React `useState` 管理粒子生命周期。

## 目录结构 (douyin_game)
```text
src/
  components/
    CardGrid.tsx
    FlipCard.tsx
    StarryBackground.tsx
    ProductModal.tsx
  assets/
    images/
  App.tsx
  index.css
```