排行榜烟火

你要解决的具体问题

排行榜、积分榜或 PK 结果页揭晓前三名时，常见的反馈只有「抖动一下」或者统一撒一次礼花。结果是冠军、亚军、季军看起来没有差别，读不出名次；更糟的是，庆祝层挡住了按钮，用户还得等动画结束才能继续操作。

排行榜烟火针对的就是这个场景：把「第 1 / 第 2 / 第 3」做成三种肉眼可区分的粒子效果，同时不干扰列表本身。

技能如何工作

核心能力是按名次分支的粒子配置，推荐用 canvas-confetti 或等价实现封装 firePodiumRank() / firePodiumTop3()。

关键步骤：

• 第一名走金色系（如 #FFD700、#FFF4C1、#FFA500）：顶部中心大爆发，再从左右两侧斜喷；particleCount 建议 160～220，可二次延迟补一次「加冕」小爆。
• 第二名走银白冷色（如 #E8EEF5、#C0C8D4、#9AA8B8）：用 origin x=0.2 与 origin x=0.8 做左右双炮对称喷，强度中等，约 90～130 粒子。
• 第三名走铜色/琥珀（如 #CD7F32、#E8A05A、#F0C090）：底部中央单次上喷或小 spread，粒子更少，约 60～90，短促收尾。

触发时机必须收敛：只在展示名次 / 揭晓成功时播放；失败或空榜不放。榜单 UI 先高亮名次卡片，再调用对应 API，让「名次」和「粒子」在同一个动作里成立。

适用边界与注意点

• 礼花层必须设置 pointer-events: none，动画期间列表仍可滚动、按钮仍可点击。
• 遵守 prefers-reduced-motion: reduce：跳过粒子，可改用简短 Toast，例如「恭喜获得第 N 名」。
• 动画控制在 约 1.5～3.5 秒内自然结束，不要循环播放。
• 不要把三种名次写成同一段配置只改数量；颜色、喷发形状、强度都要拉开差异。
• 四五名及以后不做同等烟火；若加音效必须默认关闭或极轻，并保留可关入口。