feat(game): 添加游戏桌面组件的警告提示和动画效果

- 在动物游戏中添加余额不足和选择限制的警告提示
- 为警告状态添加震动动画和视觉反馈效果
- 实现倒计时警告状态的动画和样式变化
- 添加胜利和失败状态的历史记录显示
- 为筹码和操作按钮添加禁用状态的视觉效果
- 实现用户信息和流程按钮的交互功能
- 添加自动设置弹窗的打开功能
- 优化游戏阶段切换时的选择清空逻辑
- 添加剩余时间变化的回调函数支持
- 为历史记录添加中奖状态的颜色标识

src/features/game/components/desktop/desktop-status.tsx

@@ -1,6 +1,9 @@
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import down5Animation from '@/assets/lottie/down5.json'
 import statusCenter from '@/assets/system/status-center.webp'
 import statusLine from '@/assets/system/status-line.webp'
+import { LottiePlayer } from '@/components/lottie-player.tsx'
 import { SmartBackground } from '@/components/smart-background.tsx'
 import { DesktopCountdown } from '@/features/game/components/desktop/desktop-countdown.tsx'
 import { DesktopTitle } from '@/features/game/components/desktop/desktop-title.tsx'
@@ -18,6 +21,15 @@ export function DesktopStatusLine() {
     roundId,
     streakLabel,
   } = useGameStatusVm()
+  const [remainingMs, setRemainingMs] = useState(countdownMs)
+  const showWarningCountdown = remainingMs <= 5000 && remainingMs > 0
+  const countdownClassName = useMemo(
+    () =>
+      showWarningCountdown
+        ? 'text-[#FF5A5A] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(255,90,90,0.85),0_0_calc(var(--design-unit)*22)_rgba(255,90,90,0.32)]'
+        : 'text-[#4BFFFE] [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(75,255,254,0.85),0_0_calc(var(--design-unit)*22)_rgba(75,255,254,0.32)]',
+    [showWarningCountdown],
+  )
 
   return (
     <div className={'relative w-full flex flex-col text-design-22'}>
@@ -39,18 +51,38 @@ export function DesktopStatusLine() {
             {t('gameDesktop.status.limit')}: {limitLabel}
           </div>
         </div>
-        <SmartBackground
-          src={statusCenter}
-          className="w-design-360 h-[105px] font-countdown bg-no-repeat bg-center bg-contain flex items-center justify-center"
-          size="contain"
-        >
-          <DesktopCountdown
-            initialMs={countdownMs}
-            onComplete={() => {
-              console.log('countdown finished')
+        <div className="relative flex h-[105px] w-design-360 items-center justify-center">
+          <SmartBackground
+            src={statusCenter}
+            className="pointer-events-none absolute inset-0 z-0 bg-no-repeat bg-center bg-contain transition-opacity duration-500 ease-out"
+            size="contain"
+            style={{
+              opacity: showWarningCountdown ? 0.18 : 1,
+              transform: showWarningCountdown ? 'scale(0.985)' : 'scale(1)',
             }}
           />
-        </SmartBackground>
+          <div
+            className="pointer-events-none absolute inset-0 z-0 overflow-visible transition-all duration-500 ease-out"
+            style={{
+              opacity: showWarningCountdown ? 1 : 0,
+              transform: showWarningCountdown
+                ? 'scale(1.1) translateY(calc(var(--design-unit)*1))'
+                : 'scale(1.02) translateY(0)',
+            }}
+          >
+            <LottiePlayer
+              animationData={down5Animation}
+              className="h-full w-full"
+              loop
+              autoplay
+            />
+          </div>
+          <DesktopCountdown
+            initialMs={countdownMs}
+            onRemainingMsChange={setRemainingMs}
+            className={countdownClassName}
+          />
+        </div>
         <div className={'flex-1 flex items-center justify-center gap-10'}>
           <div>
             {t('gameDesktop.status.roundId')}:{roundId}