feat: add unified mailbox across accounts and sidebar icons toggle

components/settings/appearance-settings.tsx

@@ -10,6 +10,7 @@ import { useTour } from '@/components/tour/tour-provider';
 import { Button } from '@/components/ui/button';
 import { PlayCircle } from 'lucide-react';
 import { usePolicyStore } from '@/stores/policy-store';
+import { useAccountStore } from '@/stores/account-store';
 
 const DENSITY_PREVIEW: Record<Density, { py: string; gap: string; showAvatar: boolean; showPreview: boolean }> = {
   'extra-compact': { py: 'py-0.5', gap: 'gap-1.5', showAvatar: false, showPreview: false },
@@ -67,9 +68,10 @@ export function AppearanceSettings() {
   const t = useTranslations('settings.appearance');
   const tTour = useTranslations('tour');
   const { theme, setTheme } = useThemeStore();
-  const { fontSize, density, animationsEnabled, toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, updateSetting } = useSettingsStore();
+  const { fontSize, density, animationsEnabled, toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, colorfulSidebarIcons, updateSetting } = useSettingsStore();
   const { startTour, resetTourCompletion } = useTour();
   const { isSettingLocked, isSettingHidden } = usePolicyStore();
+  const accounts = useAccountStore(s => s.accounts);
 
   return (
     <SettingsSection title={t('title')} description={t('description')}>
@@ -161,6 +163,27 @@ export function AppearanceSettings() {
         />
       </SettingItem>
 
+      {/* Colorful Sidebar Icons */}
+      <SettingItem label={t('colorful_sidebar_icons.label')} description={t('colorful_sidebar_icons.description')}>
+        <ToggleSwitch
+          checked={colorfulSidebarIcons}
+          onChange={(checked) => updateSetting('colorfulSidebarIcons', checked)}
+        />
+      </SettingItem>
+
+      {/* Unified Mailbox */}
+      {accounts.length > 1 && (
+        <SettingItem
+          label={t('unified_mailbox.label')}
+          description={t('unified_mailbox.description')}
+        >
+          <ToggleSwitch
+            checked={enableUnifiedMailbox}
+            onChange={(v) => updateSetting('enableUnifiedMailbox', v)}
+          />
+        </SettingItem>
+      )}
+
       {/* Animations */}
       {!isSettingHidden('animationsEnabled') && (
       <SettingItem label={t('animations.label')} description={t('animations.description')} locked={isSettingLocked('animationsEnabled')}>

components/settings/spam-siege-game.tsx

@@ -1,17 +1,19 @@
 "use client";
 
 import { useState, useEffect, useCallback, useRef } from "react";
-import { Shield, Mail, X, AlertTriangle, Trophy, RotateCcw, Inbox, MailCheck } from "lucide-react";
+import { Shield, Mail, X, AlertTriangle, MailCheck, RotateCcw } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 const GAME_WIDTH = 400;
 const GAME_HEIGHT = 520;
-const FORTRESS_Y = GAME_HEIGHT - 48;
-const SPAWN_INTERVAL_START = 850;
-const SPAWN_INTERVAL_MIN = 320;
+const INBOX_Y = GAME_HEIGHT - 40;
+const SPAWN_INTERVAL_START = 900;
+const SPAWN_INTERVAL_MIN = 340;
 const GAME_DURATION = 30;
 const ENEMY_SPEED_START = 1.2;
 const ENEMY_SPEED_INCREASE = 0.04;
+const MAX_MISSES = 3;
 
 interface Enemy {
   id: number;
@@ -21,81 +23,85 @@ interface Enemy {
   type: "spam" | "phishing" | "legit";
 }
 
-type GameState = "idle" | "playing" | "won" | "lost";
+type GameState = "idle" | "playing" | "over";
 
 export function SpamSiegeGame({ onClose }: { onClose: () => void }) {
   const [gameState, setGameState] = useState<GameState>("idle");
   const [enemies, setEnemies] = useState<Enemy[]>([]);
   const [score, setScore] = useState(0);
   const [timeLeft, setTimeLeft] = useState(GAME_DURATION);
-  const [shieldHealth, setShieldHealth] = useState(3);
-  const [hitEffects, setHitEffects] = useState<{ id: number; x: number; y: number; color: string }[]>([]);
-  const [destroyEffects, setDestroyEffects] = useState<{ id: number; x: number; y: number }[]>([]);
-  const [deliverEffects, setDeliverEffects] = useState<{ id: number; x: number; y: number }[]>([]);
+  const [misses, setMisses] = useState(0);
+  const [survived, setSurvived] = useState(false);
   const nextId = useRef(0);
   const animFrameRef = useRef<number>(0);
   const lastTimeRef = useRef<number>(0);
   const spawnTimerRef = useRef<number>(0);
   const gameStateRef = useRef<GameState>("idle");
   const elapsedRef = useRef(0);
-  const destroyedRef = useRef(new Set<number>());
+  const clickedRef = useRef(new Set<number>());
+  const enemiesRef = useRef<Enemy[]>([]);
+  const missesRef = useRef(0);
+  const scoreRef = useRef(0);
 
   useEffect(() => {
     gameStateRef.current = gameState;
   }, [gameState]);
 
+  const endGame = useCallback((didSurvive: boolean) => {
+    setSurvived(didSurvive);
+    setGameState("over");
+  }, []);
+
   const startGame = useCallback(() => {
     setGameState("playing");
     setEnemies([]);
     setScore(0);
     setTimeLeft(GAME_DURATION);
-    setShieldHealth(3);
-    setHitEffects([]);
-    setDestroyEffects([]);
-    setDeliverEffects([]);
+    setMisses(0);
+    setSurvived(false);
     nextId.current = 0;
     spawnTimerRef.current = 0;
     elapsedRef.current = 0;
-    destroyedRef.current = new Set();
+    clickedRef.current = new Set();
+    enemiesRef.current = [];
+    missesRef.current = 0;
+    scoreRef.current = 0;
     lastTimeRef.current = performance.now();
   }, []);
 
   const spawnEnemy = useCallback(() => {
     const id = nextId.current++;
     const rand = Math.random();
-    const type = rand > 0.7 ? "legit" : rand > 0.45 ? "phishing" : "spam";
+    const type = rand > 0.75 ? "legit" : rand > 0.45 ? "phishing" : "spam";
     const x = 20 + Math.random() * (GAME_WIDTH - 60);
-    const elapsed = elapsedRef.current;
-    const speed = ENEMY_SPEED_START + (elapsed / 1000) * ENEMY_SPEED_INCREASE;
-    setEnemies((prev) => [...prev, { id, x, y: -30, speed, type }]);
+    const speed = ENEMY_SPEED_START + (elapsedRef.current / 1000) * ENEMY_SPEED_INCREASE;
+    enemiesRef.current = [...enemiesRef.current, { id, x, y: -32, speed, type }];
+    setEnemies(enemiesRef.current);
   }, []);
 
-  const handleHover = useCallback((enemy: Enemy) => {
-    if (destroyedRef.current.has(enemy.id)) return;
-    destroyedRef.current.add(enemy.id);
+  const handleClick = useCallback(
+    (ev: React.MouseEvent, enemy: Enemy) => {
+      ev.stopPropagation();
+      if (clickedRef.current.has(enemy.id)) return;
+      clickedRef.current.add(enemy.id);
 
-    if (enemy.type === "legit") {
-      // Penalty for blocking legit mail
-      setShieldHealth((prev) => {
-        const nh = prev - 1;
-        if (nh <= 0) setGameState("lost");
-        return Math.max(0, nh);
-      });
-      setScore((prev) => Math.max(0, prev - 15));
-      const effectId = nextId.current++;
-      setHitEffects((p) => [...p, { id: effectId, x: enemy.x, y: enemy.y, color: "rgba(34, 197, 94, 0.5)" }]);
-      setTimeout(() => setHitEffects((p) => p.filter((h) => h.id !== effectId)), 500);
-    } else {
-      setScore((prev) => prev + 10);
-      const effectId = nextId.current++;
-      setDestroyEffects((prev) => [...prev, { id: effectId, x: enemy.x, y: enemy.y }]);
-      setTimeout(() => setDestroyEffects((prev) => prev.filter((e) => e.id !== effectId)), 400);
-    }
+      enemiesRef.current = enemiesRef.current.filter((e) => e.id !== enemy.id);
+      setEnemies(enemiesRef.current);
 
-    setEnemies((prev) => prev.filter((e) => e.id !== enemy.id));
-  }, []);
+      if (enemy.type === "legit") {
+        missesRef.current += 1;
+        setMisses(missesRef.current);
+        scoreRef.current = Math.max(0, scoreRef.current - 15);
+        setScore(scoreRef.current);
+        if (missesRef.current >= MAX_MISSES) endGame(false);
+      } else {
+        scoreRef.current += enemy.type === "phishing" ? 15 : 10;
+        setScore(scoreRef.current);
+      }
+    },
+    [endGame]
+  );
 
-  // Game loop
   useEffect(() => {
     if (gameState !== "playing") return;
 
@@ -106,15 +112,13 @@ export function SpamSiegeGame({ onClose }: { onClose: () => void }) {
       lastTimeRef.current = now;
       elapsedRef.current += dt;
 
-      // Timer
       const newTimeLeft = GAME_DURATION - Math.floor(elapsedRef.current / 1000);
       setTimeLeft(Math.max(0, newTimeLeft));
       if (newTimeLeft <= 0) {
-        setGameState("won");
+        endGame(true);
         return;
       }
 
-      // Spawn
       spawnTimerRef.current += dt;
       const spawnInterval = Math.max(
         SPAWN_INTERVAL_MIN,
@@ -125,261 +129,187 @@ export function SpamSiegeGame({ onClose }: { onClose: () => void }) {
         spawnEnemy();
       }
 
-      // Move enemies
-      setEnemies((prev) => {
-        const next: Enemy[] = [];
-        let spamBreached = false;
-        for (const e of prev) {
-          const ny = e.y + e.speed * (dt / 16);
-          if (ny >= FORTRESS_Y) {
-            if (e.type === "legit") {
-              // Legit mail delivered — bonus
-              setScore((s) => s + 5);
-              const effectId = nextId.current++;
-              setDeliverEffects((p) => [...p, { id: effectId, x: e.x, y: FORTRESS_Y }]);
-              setTimeout(() => setDeliverEffects((p) => p.filter((d) => d.id !== effectId)), 500);
-            } else {
-              spamBreached = true;
-              const effectId = nextId.current++;
-              setHitEffects((p) => [...p, { id: effectId, x: e.x, y: FORTRESS_Y, color: "rgba(219, 45, 84, 0.3)" }]);
-              setTimeout(() => setHitEffects((p) => p.filter((h) => h.id !== effectId)), 500);
-            }
-          } else {
-            next.push({ ...e, y: ny });
-          }
+      const nextEnemies: Enemy[] = [];
+      let missed = 0;
+      let scoreDelta = 0;
+      for (const e of enemiesRef.current) {
+        const ny = e.y + e.speed * (dt / 16);
+        if (ny >= INBOX_Y) {
+          if (e.type === "legit") scoreDelta += 5;
+          else missed++;
+        } else {
+          nextEnemies.push({ ...e, y: ny });
         }
-        if (spamBreached) {
-          setShieldHealth((prev) => {
-            const nh = prev - 1;
-            if (nh <= 0) setGameState("lost");
-            return Math.max(0, nh);
-          });
+      }
+      enemiesRef.current = nextEnemies;
+      setEnemies(nextEnemies);
+
+      if (scoreDelta > 0) {
+        scoreRef.current += scoreDelta;
+        setScore(scoreRef.current);
+      }
+      if (missed > 0) {
+        missesRef.current += missed;
+        setMisses(missesRef.current);
+        if (missesRef.current >= MAX_MISSES) {
+          endGame(false);
+          return;
         }
-        return next;
-      });
+      }
 
       animFrameRef.current = requestAnimationFrame(tick);
     };
 
     animFrameRef.current = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(animFrameRef.current);
-  }, [gameState, spawnEnemy]);
-
-  const getEnemyStyle = (type: Enemy["type"]) => {
-    switch (type) {
-      case "phishing":
-        return { bg: "rgba(234, 179, 8, 0.15)", border: "rgba(234, 179, 8, 0.4)", color: "rgb(234, 179, 8)" };
-      case "legit":
-        return { bg: "rgba(34, 197, 94, 0.12)", border: "rgba(34, 197, 94, 0.4)", color: "rgb(34, 197, 94)" };
-      default:
-        return { bg: "rgba(219, 45, 84, 0.1)", border: "rgba(219, 45, 84, 0.3)", color: "rgb(219, 45, 84)" };
-    }
-  };
+  }, [gameState, spawnEnemy, endGame]);
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <div className="relative rounded-xl border border-border bg-card shadow-2xl overflow-hidden select-none"
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative rounded-lg border border-border bg-card shadow-xl overflow-hidden select-none"
         style={{ width: GAME_WIDTH, maxWidth: "95vw" }}
+        onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-card">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
           <div className="flex items-center gap-2">
-            <Shield className="w-4 h-4" style={{ color: "rgb(219, 45, 84)" }} />
-            <span className="text-sm font-semibold text-foreground">Spam Siege</span>
+            <Shield className="w-4 h-4 text-primary" />
+            <span className="text-sm font-medium text-foreground">Spam Siege</span>
           </div>
-          <button onClick={onClose} className="p-1 rounded hover:bg-muted transition-colors">
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-muted transition-colors"
+            aria-label="Close"
+          >
             <X className="w-4 h-4 text-muted-foreground" />
           </button>
         </div>
 
-        {/* HUD */}
-        <div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border text-xs">
-          <div className="flex items-center gap-3">
-            <span className="text-muted-foreground">Score: <span className="font-semibold text-foreground">{score}</span></span>
-            <span className="text-muted-foreground">Time: <span className="font-semibold text-foreground">{timeLeft}s</span></span>
-          </div>
-          <div className="flex items-center gap-1">
-            {[...Array(3)].map((_, i) => (
-              <Shield
-                key={i}
-                className="w-3.5 h-3.5 transition-colors"
-                style={{ color: i < shieldHealth ? "rgb(219, 45, 84)" : "rgb(100, 100, 100)" }}
-                fill={i < shieldHealth ? "rgb(219, 45, 84)" : "none"}
-                strokeWidth={i < shieldHealth ? 0 : 1.5}
-              />
-            ))}
+        <div className="flex items-center justify-between px-4 py-2 bg-muted/40 border-b border-border text-xs text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <span>
+              Score <span className="font-medium text-foreground tabular-nums">{score}</span>
+            </span>
+            <span>
+              Time <span className="font-medium text-foreground tabular-nums">{timeLeft}s</span>
+            </span>
           </div>
+          <span>
+            Misses{" "}
+            <span
+              className={cn(
+                "font-medium tabular-nums",
+                misses >= MAX_MISSES - 1 ? "text-destructive" : "text-foreground"
+              )}
+            >
+              {misses}/{MAX_MISSES}
+            </span>
+          </span>
         </div>
 
-        {/* Game area */}
         <div
           className="relative bg-background overflow-hidden"
           style={{ height: GAME_HEIGHT }}
         >
-          {/* Grid lines for depth */}
-          <div className="absolute inset-0 opacity-[0.03]" style={{
-            backgroundImage: "linear-gradient(to bottom, currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px)",
-            backgroundSize: "40px 40px",
-          }} />
-
-          {/* Fortress wall */}
-          <div className="absolute left-0 right-0 bottom-0 flex flex-col items-center" style={{ height: GAME_HEIGHT - FORTRESS_Y }}>
-            <div className="relative w-full">
-              {/* Shield centered above the line */}
-              <div className="absolute -top-5 left-1/2 -translate-x-1/2 z-10">
-                <Shield
-                  className="w-7 h-7 drop-shadow-sm"
-                  style={{ color: shieldHealth > 0 ? "rgb(219, 45, 84)" : "rgb(100, 100, 100)" }}
-                  fill={shieldHealth > 0 ? "rgba(219, 45, 84, 0.2)" : "none"}
-                />
-              </div>
-              {/* Solid line */}
-              <div
-                className="h-[2px] w-full"
-                style={{ backgroundColor: shieldHealth > 0 ? "rgba(219, 45, 84, 0.35)" : "rgba(100, 100, 100, 0.3)" }}
-              />
-            </div>
-            {/* Subtle gradient fill below */}
-            <div
-              className="flex-1 w-full"
-              style={{
-                background: shieldHealth > 0
-                  ? "linear-gradient(to bottom, rgba(219, 45, 84, 0.06), transparent)"
-                  : "linear-gradient(to bottom, rgba(100, 100, 100, 0.04), transparent)",
-              }}
-            />
+          <div
+            className="absolute left-0 right-0 flex items-center gap-2 px-4"
+            style={{ top: INBOX_Y }}
+          >
+            <div className="h-px flex-1 bg-border" />
+            <span className="text-[10px] uppercase tracking-wider text-muted-foreground">
+              Inbox
+            </span>
+            <div className="h-px flex-1 bg-border" />
           </div>
 
-          {/* Enemies */}
           {enemies.map((e) => {
-            const style = getEnemyStyle(e.type);
+            const variant =
+              e.type === "phishing"
+                ? "text-warning border-warning/40 bg-warning/10 hover:bg-warning/20"
+                : e.type === "legit"
+                  ? "text-success border-success/40 bg-success/10 hover:bg-success/20"
+                  : "text-destructive border-destructive/40 bg-destructive/10 hover:bg-destructive/20";
+            const Icon =
+              e.type === "phishing" ? AlertTriangle : e.type === "legit" ? MailCheck : Mail;
             return (
-              <div
+              <button
                 key={e.id}
-                className="absolute flex items-center justify-center w-8 h-8 rounded-md transition-transform"
-                style={{
-                  left: e.x,
-                  top: e.y,
-                  backgroundColor: style.bg,
-                  border: `1px solid ${style.border}`,
-                }}
-                onMouseEnter={() => handleHover(e)}
-              >
-                {e.type === "phishing" ? (
-                  <AlertTriangle className="w-4 h-4" style={{ color: style.color }} />
-                ) : e.type === "legit" ? (
-                  <MailCheck className="w-4 h-4" style={{ color: style.color }} />
-                ) : (
-                  <Mail className="w-4 h-4" style={{ color: style.color }} />
+                type="button"
+                className={cn(
+                  "absolute flex items-center justify-center w-8 h-8 rounded-md border cursor-pointer",
+                  "active:scale-95 transition-transform",
+                  variant
                 )}
-              </div>
+                style={{ left: e.x, top: e.y }}
+                onMouseEnter={(ev) => handleClick(ev, e)}
+                onClick={(ev) => handleClick(ev, e)}
+              >
+                <Icon className="w-4 h-4" />
+              </button>
             );
           })}
 
-          {/* Destroy effects */}
-          {destroyEffects.map((e) => (
-            <div
-              key={e.id}
-              className="absolute pointer-events-none animate-ping"
-              style={{ left: e.x + 4, top: e.y + 4 }}
-            >
-              <X className="w-5 h-5 text-muted-foreground/50" />
-            </div>
-          ))}
-
-          {/* Deliver effects (legit mail arrived) */}
-          {deliverEffects.map((e) => (
-            <div
-              key={e.id}
-              className="absolute pointer-events-none animate-ping"
-              style={{ left: e.x + 4, top: e.y - 8 }}
-            >
-              <Inbox className="w-5 h-5" style={{ color: "rgb(34, 197, 94)" }} />
-            </div>
-          ))}
-
-          {/* Hit effects on fortress */}
-          {hitEffects.map((e) => (
-            <div
-              key={e.id}
-              className="absolute pointer-events-none"
-              style={{ left: e.x, top: e.y - 10 }}
-            >
-              <div className="w-6 h-6 rounded-full animate-ping" style={{ backgroundColor: e.color }} />
-            </div>
-          ))}
-
-          {/* Idle overlay */}
           {gameState === "idle" && (
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/80">
-              <Shield className="w-14 h-14" style={{ color: "rgb(219, 45, 84)" }} fill="rgba(219, 45, 84, 0.1)" />
-              <div className="text-center">
-                <p className="text-base font-semibold text-foreground">Spam Siege</p>
-                <p className="text-xs text-muted-foreground mt-1.5 max-w-[280px] leading-relaxed">
-                  Hover over threats to block them. Let legitimate mail through. Survive {GAME_DURATION} seconds.
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/95 px-8 text-center">
+              <Shield className="w-10 h-10 text-primary" />
+              <div className="space-y-1.5">
+                <p className="text-base font-medium text-foreground">Spam Siege</p>
+                <p className="text-xs text-muted-foreground leading-relaxed">
+                  Click spam and phishing before they hit your inbox. Don&apos;t block legitimate
+                  mail. Three misses and it&apos;s over.
                 </p>
-                <div className="flex items-center justify-center gap-4 mt-3 text-[11px] text-muted-foreground">
-                  <span className="inline-flex items-center gap-1">
-                    <Mail className="w-3 h-3" style={{ color: "rgb(219, 45, 84)" }} /> Spam
-                  </span>
-                  <span className="inline-flex items-center gap-1">
-                    <AlertTriangle className="w-3 h-3" style={{ color: "rgb(234, 179, 8)" }} /> Phishing
-                  </span>
-                  <span className="inline-flex items-center gap-1">
-                    <MailCheck className="w-3 h-3" style={{ color: "rgb(34, 197, 94)" }} /> Legit
-                  </span>
-                </div>
               </div>
-              <Button size="sm" onClick={startGame} className="mt-1 text-white" style={{ backgroundColor: "rgb(219, 45, 84)" }}>
-                <Shield className="w-3.5 h-3.5 mr-1.5" />
-                Defend
+              <div className="flex items-center gap-4 text-[11px] text-muted-foreground">
+                <span className="inline-flex items-center gap-1.5">
+                  <Mail className="w-3 h-3 text-destructive" />
+                  Spam
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <AlertTriangle className="w-3 h-3 text-warning" />
+                  Phishing
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <MailCheck className="w-3 h-3 text-success" />
+                  Legit
+                </span>
+              </div>
+              <Button size="sm" onClick={startGame}>
+                Start
               </Button>
             </div>
           )}
 
-          {/* Won overlay */}
-          {gameState === "won" && (
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/80">
-              <Trophy className="w-14 h-14" style={{ color: "rgb(219, 45, 84)" }} />
-              <div className="text-center">
-                <p className="text-base font-semibold text-foreground">Fortress Secured</p>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Score: <span className="font-semibold text-foreground">{score}</span>
+          {gameState === "over" && (
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/95 px-8 text-center">
+              <Shield
+                className={cn(
+                  "w-10 h-10",
+                  survived ? "text-success" : "text-muted-foreground/40"
+                )}
+              />
+              <div className="space-y-1">
+                <p className="text-base font-medium text-foreground">
+                  {survived ? "Inbox held" : "Inbox overrun"}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Final score{" "}
+                  <span className="font-medium text-foreground tabular-nums">{score}</span>
                 </p>
               </div>
-              <div className="flex gap-2 mt-1">
+              <div className="flex gap-2">
                 <Button size="sm" variant="outline" onClick={onClose}>
                   Close
                 </Button>
-                <Button size="sm" onClick={startGame} className="text-white" style={{ backgroundColor: "rgb(219, 45, 84)" }}>
+                <Button size="sm" onClick={startGame}>
                   <RotateCcw className="w-3.5 h-3.5 mr-1.5" />
                   Again
                 </Button>
               </div>
             </div>
           )}
-
-          {/* Lost overlay */}
-          {gameState === "lost" && (
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/80">
-              <Shield className="w-14 h-14 text-muted-foreground/40" />
-              <div className="text-center">
-                <p className="text-base font-semibold text-foreground">Fortress Breached</p>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Score: <span className="font-semibold text-foreground">{score}</span>
-                </p>
-              </div>
-              <div className="flex gap-2 mt-1">
-                <Button size="sm" variant="outline" onClick={onClose}>
-                  Close
-                </Button>
-                <Button size="sm" onClick={startGame} className="text-white" style={{ backgroundColor: "rgb(219, 45, 84)" }}>
-                  <RotateCcw className="w-3.5 h-3.5 mr-1.5" />
-                  Retry
-                </Button>
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>