feat: integrate Sensei Spook mascot in 4 stances, speech bubbles, and style updates

components/screens/LoadingScreen.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Sparkles, Loader2, Flame } from "lucide-react";
+import { BoothConfig } from "@/types/booth";
+import { useI18n } from "@/lib/i18n";
+import { MascotGuide } from "@/components/MascotGuide";
+
+interface LoadingScreenProps {
+  config: BoothConfig;
+  currentStepMessage?: string;
+}
+
+export const LoadingScreen: React.FC<LoadingScreenProps> = ({
+  config,
+  currentStepMessage,
+}) => {
+  const { t } = useI18n();
+  const [progress, setProgress] = useState(15);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 92) return prev;
+        return prev + Math.floor(Math.random() * 8) + 3;
+      });
+    }, 700);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="relative flex-1 flex flex-col items-center justify-center p-6 text-center select-none overflow-hidden">
+      {/* Animated Center Karate Ghost & Ki-Sphere */}
+      <div className="relative mb-4 flex flex-col items-center">
+        <MascotGuide
+          pose="punch"
+          size="md"
+          speechPosition="top"
+          speechText={{
+            en: "KIAI! Gathering dojo ki and pumpkin magic...",
+            zh: "气合！正在汇聚道馆灵气与南瓜魔法...",
+          }}
+        />
+      </div>
+
+      <h2 className="text-xl sm:text-2xl font-black text-white tracking-wide mb-2 drop-shadow-[0_2px_0_#090314]">
+        {t(config.labels.processingTitle)}
+      </h2>
+
+      <p className="text-xs sm:text-sm text-purple-200 max-w-xs mb-6 font-medium leading-relaxed drop-shadow">
+        {currentStepMessage || t(config.labels.processingSubtitle)}
+      </p>
+
+      {/* Chunky Progress Bar */}
+      <div className="w-full max-w-xs h-6 rounded-full bg-black/60 border-2 border-black p-1 shadow-inner relative overflow-hidden">
+        <div
+          className="h-full rounded-full bg-gradient-to-r from-amber-400 via-orange-500 to-cyan-400 transition-all duration-300 shadow-[0_0_15px_rgba(251,191,36,0.6)]"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+
+      <span className="text-[11px] font-black text-amber-300 mt-2 tracking-wider">
+        {progress}% · {t({ en: "MARTIAL MAGIC BREWING", zh: "武道气合凝聚中" })}
+      </span>
+    </div>
+  );
+};