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

components/screens/RateLimitedScreen.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import { RotateCcw } from "lucide-react";
+import { BoothConfig } from "@/types/booth";
+import { useI18n } from "@/lib/i18n";
+
+interface RateLimitedScreenProps {
+  config: BoothConfig;
+  resetMinutes: number;
+  onReset: () => void;
+}
+
+export const RateLimitedScreen: React.FC<RateLimitedScreenProps> = ({
+  config,
+  resetMinutes,
+  onReset,
+}) => {
+  const { t } = useI18n();
+
+  return (
+    <div className="relative flex-1 flex flex-col items-center justify-center p-8 text-center select-none space-y-6">
+      <div className="w-24 h-24 rounded-full bg-gradient-to-tr from-purple-900 to-orange-950 flex items-center justify-center border-2 border-orange-500/40 shadow-[0_0_30px_rgba(255,109,0,0.3)]">
+        <span className="text-4xl animate-bounce">⏳</span>
+      </div>
+
+      <div className="space-y-2 max-w-xs">
+        <h2 className="text-2xl font-black text-white tracking-wide drop-shadow-[0_2px_0_#090314]">
+          {t({ en: "Martial Energy Cooling Down! ⚡", zh: "武道气合修整中！⚡" })}
+        </h2>
+        <p className="text-amber-200/90 text-sm leading-relaxed font-bold">
+          {t({
+            en: "You have conjured the maximum number of Halloween portraits for this session.",
+            zh: "当前设备生成的万圣武道照已达上限，稍作休息吧！"
+          })}
+        </p>
+        {resetMinutes > 0 && (
+          <p className="text-slate-300 text-xs mt-2 bg-black/40 px-3 py-1.5 rounded-full border border-purple-500/30">
+            {t({
+              en: `More energy ready in approx ${resetMinutes} minutes.`,
+              zh: `预计约 ${resetMinutes} 分钟后恢复。`
+            })}
+          </p>
+        )}
+      </div>
+
+      <button
+        onClick={onReset}
+        className="px-6 py-3.5 rounded-2xl btn-cartoon-orange text-white font-black text-sm shadow-xl flex items-center space-x-2 transition active:scale-95"
+      >
+        <RotateCcw size={18} />
+        <span>{t({ en: "Return to Dojo 🥋", zh: "返回万圣道馆 🥋" })}</span>
+      </button>
+    </div>
+  );
+};