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

components/screens/ConfirmScreen.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import React from "react";
+import { ArrowLeft, Check, RefreshCw } from "lucide-react";
+import { BoothConfig } from "@/types/booth";
+import { useI18n } from "@/lib/i18n";
+import { MascotGuide } from "@/components/MascotGuide";
+
+interface ConfirmScreenProps {
+  config: BoothConfig;
+  photoUrl: string;
+  onConfirm: () => void;
+  onRetake: () => void;
+}
+
+export const ConfirmScreen: React.FC<ConfirmScreenProps> = ({
+  config,
+  photoUrl,
+  onConfirm,
+  onRetake,
+}) => {
+  const { t } = useI18n();
+
+  return (
+    <div className="relative flex-1 flex flex-col items-center justify-between p-3 sm:p-4 overflow-hidden select-none">
+      {/* Top Header - Back/Retake button on top left, title removed */}
+      <div className="w-full flex items-center justify-between px-1 mb-1 z-30 min-h-[40px]">
+        <button
+          onClick={onRetake}
+          className="p-2 px-3 rounded-2xl btn-cartoon-dark text-white flex items-center space-x-1 font-black text-xs cursor-pointer shadow-md"
+        >
+          <ArrowLeft size={16} className="stroke-[3]" />
+          <span>{t(config.labels.retakeButton)}</span>
+        </button>
+
+        <div className="w-16" />
+      </div>
+
+      {/* Captured Photo Preview Card */}
+      <div className="relative w-full max-w-sm aspect-[9/16] rounded-3xl overflow-hidden bg-black border-4 border-black shadow-[0_8px_0_#090314,0_0_25px_rgba(255,109,0,0.3)] flex items-center justify-center my-auto">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={photoUrl}
+          alt="Captured Pose"
+          className="w-full h-full object-cover select-none"
+        />
+
+        {/* Mascot Comic Callout in preview */}
+        <div className="absolute -bottom-2 -left-2 sm:bottom-1 sm:left-1 pointer-events-none z-20">
+          <MascotGuide
+            pose="bow"
+            size="md"
+            speechPosition="right"
+            speechText={{
+              en: "Epic martial focus! Ready to pick your style?",
+              zh: "气势十足！准备好选择你的万圣风格了吗？",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Bottom Action Bar - Single centered button matching Standby Screen style */}
+      <div className="w-full max-w-sm flex items-center justify-center py-2 z-20 min-h-[70px]">
+        <button
+          onClick={onConfirm}
+          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 active:scale-95"
+        >
+          <Check size={17} className="stroke-[3]" />
+          <span>{t(config.labels.confirmButton)}</span>
+        </button>
+      </div>
+    </div>
+  );
+};