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

components/screens/StandbyScreen.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import { BoothConfig } from "@/types/booth";
+import { useI18n } from "@/lib/i18n";
+import { MascotGuide } from "@/components/MascotGuide";
+
+interface StandbyScreenProps {
+  config: BoothConfig;
+  onStart: () => void;
+}
+
+export const StandbyScreen: React.FC<StandbyScreenProps> = ({
+  config,
+  onStart,
+}) => {
+  const { labels } = config;
+  const { t, language } = useI18n();
+
+  return (
+    <div
+      onClick={onStart}
+      className="relative flex-1 flex flex-col items-center justify-between px-3 py-2 sm:px-6 sm:py-4 cursor-pointer select-none overflow-hidden"
+    >
+      {/* Center Hero Character - Clean 3D Mascot */}
+      <div className="my-auto flex flex-col items-center text-center z-10 space-y-2 sm:space-y-3 px-2 max-w-sm">
+        {/* Title & Subtitle with Stylized Typography */}
+        <div className="space-y-0.5">
+          <h2 className={`text-2xl sm:text-3xl md:text-4xl font-black text-amber-100 tracking-wider drop-shadow-[0_4px_12px_rgba(0,0,0,0.95)] ${language === 'en' ? 'font-cinzel' : 'font-dojo'}`}>
+            {t(labels.welcomeTitle)}
+          </h2>
+          <p className="text-amber-400/95 font-semibold text-[11px] sm:text-xs tracking-widest uppercase drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)]">
+            {t(labels.welcomeSubtitle)}
+          </p>
+        </div>
+
+        {/* Floating 3D Karate Ghost Mascot with Comic Speech Bubble */}
+        <MascotGuide
+          pose="bow"
+          size="lg"
+          speechPosition="top"
+          className="my-1"
+          speechText={{
+            en: "Osu! Welcome to our dojo! Strike your fiercest martial arts pose & become an epic Shanghai legend!",
+            zh: "押忍！欢迎来到道馆！摆出你最帅气的武道姿势，成为魔都万圣传奇！",
+          }}
+        />
+      </div>
+
+      {/* Halloween Game Action Button */}
+      <div className="z-10 w-full flex flex-col items-center pb-1">
+        <button
+          onClick={onStart}
+          className="w-full max-w-[210px] sm:max-w-[240px] py-2 sm:py-2.5 px-4 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center justify-center space-x-2 text-center select-none uppercase font-cinzel shadow-lg"
+        >
+          <span>{t(labels.welcomeCta)}</span>
+        </button>
+      </div>
+    </div>
+  );
+};