Upload 30 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

AdminLoginModal.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { Modal } from '../Modal'; // Assuming Modal.tsx is in components/
+
+interface AdminLoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onLoginSuccess: () => void;
+}
+
+export const AdminLoginModal: React.FC<AdminLoginModalProps> = ({ isOpen, onClose, onLoginSuccess }) => {
+  const [password, setPassword] = useState('');
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [isShaking, setIsShaking] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset state when modal is closed
+      setPassword('');
+      setLoginError(null);
+      setIsShaking(false);
+    }
+  }, [isOpen]);
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password === '143143143') {
+      onLoginSuccess();
+      onClose(); 
+    } else {
+      setLoginError('Invalid password. Please try again.');
+      setIsShaking(true);
+      // Remove shake animation after it plays
+      setTimeout(() => setIsShaking(false), 500); // Match animation duration
+    }
+    setPassword(''); 
+  };
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+    if (loginError) {
+      setLoginError(null); // Clear error when user starts typing again
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Admin Login 🔑">
+      <form onSubmit={handleLogin} className={`space-y-6 text-theme-text ${isShaking ? 'animate-shake' : ''}`}>
+        <div>
+          <label htmlFor="admin-password" className="block text-sm font-medium text-gray-300 mb-1">Password:</label>
+          <input
+            type="password"
+            id="admin-password"
+            value={password}
+            onChange={handlePasswordChange}
+            className={`mt-1 block w-full p-3 rounded-md bg-theme-dark border text-white focus:ring-2 focus:border-transparent transition-all ${loginError ? 'border-theme-danger focus:ring-theme-danger' : 'border-theme-border focus:ring-pink-500'}`}
+            required
+            aria-label="Admin password"
+            autoComplete="current-password"
+            aria-invalid={!!loginError}
+            aria-describedby={loginError ? "admin-password-error" : undefined}
+          />
+          {loginError && (
+            <p id="admin-password-error" className="mt-2 text-sm text-theme-danger" role="alert">
+              {loginError}
+            </p>
+          )}
+        </div>
+        <button
+          type="submit"
+          className="w-full py-2.5 px-5 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-theme-dark"
+        >
+          Login
+        </button>
+      </form>
+    </Modal>
+  );
+};

AdminPanelModal.tsx

@@ -0,0 +1,1182 @@
+
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Modal } from '../Modal';
+import { AdminConfig, NFT, GameCharacter, WeaponType, DecorativeFishType, BubbleSize, SavedReply } from '../../types';
+import { generateImageWithGemini, GeminiImageResponse } from '../../geminiApi'; 
+import { SoundEvent } from '../../sounds'; 
+import { COOLDOWN_RED_ARROW_DEFENSE, RED_ARROW_PROJECTILE_SPEED, RED_ARROW_PROJECTILE_DAMAGE, PLAYER_SPEED, RED_ARROW_DEFAULT_SHOT_COUNT, RED_ARROW_PROJECTILE_IMAGE_URL, DOGE_WHALE_ESCAPE_PLAYER_IMAGE_URL, DOGE_WHALE_ESCAPE_WALL_IMAGE_URL, DOGE_WHALE_ESCAPE_GOAL_IMAGE_URL, DOGE_WHALE_ESCAPE_MINE_IMAGE_URL, DOGE_WHALE_ESCAPE_BOMB_IMAGE_URL, DOGE_WHALE_ESCAPE_JELLYFISH_IMAGE_URL, DOGE_WHALE_ESCAPE_CROCODILE_IMAGE_URL, DOGE_WHALE_ESCAPE_ALGAE_IMAGE_URL, DOGE_WHALE_ESCAPE_CURRENT_N_IMAGE_URL, DOGE_WHALE_ESCAPE_CURRENT_S_IMAGE_URL, DOGE_WHALE_ESCAPE_CURRENT_E_IMAGE_URL, DOGE_WHALE_ESCAPE_CURRENT_W_IMAGE_URL, DOGE_WHALE_ESCAPE_SNAKE_IMAGE_URL, DOGE_WHALE_ESCAPE_LIFEUP_IMAGE_URL } from '../../constants';
+import { GoogleGenAI, GenerateContentResponse } from "@google/genai";
+import { generateId } from '../../utils';
+
+
+interface AdminPanelModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  adminConfig: AdminConfig;
+  runtimeNftDefinitions: Record<string, NFT>;
+  runtimeGameCharacters: Record<string, GameCharacter>;
+  onUpdateAdminConfig: (newConfig: Partial<AdminConfig>) => void;
+  onUpdateNftImage: (nftId: string, newImageUrl: string) => void;
+  onUpdateCharacterAttributes: (characterId: string, updates: Partial<GameCharacter>) => void;
+  showNotification: (message: string, type?: 'success' | 'error' | 'info' | 'warning' | 'special') => void;
+  isMaximizable?: boolean;
+  isMaximized?: boolean;
+  onToggleMaximize?: () => void;
+  onLogout: () => void; // New prop for logout
+}
+
+type AdminTab = 'aiGenerator' | 'nfts' | 'characters' | 'staking' | 'assets' | 'gameplay' | 'sounds' | 'effectsVisuals' | 'aiChat' | 'knowledgeBase' | 'dogeEscapeAssets';
+
+type SoundUrlKey = Extract<keyof AdminConfig, `sound${string}Url`>;
+type AdminConfigImageKey = Extract<keyof AdminConfig, `${string}Image${string}` | `${string}ImageUrl`>;
+
+
+const convertFileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = error => reject(error);
+  });
+};
+
+interface CharacterAttributeInputs {
+    name: string;
+    imageURL: string;
+    imageBase64?: string | null;
+    defaultWeaponType?: WeaponType;
+    autoFireHealthThreshold?: number;
+    baseHealth?: number;
+    baseSpeed?: number; 
+}
+
+const formatWeaponTypeName = (enumKey: string) => {
+    return enumKey.replace(/([A-Z])/g, ' $1').trim().replace(/_/g, ' ');
+};
+
+const formatSoundEventName = (event: SoundEvent): string => {
+  return event
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+interface AIChatMessage {
+  id: string;
+  sender: 'user' | 'ai' | 'error';
+  text: string;
+  lang?: string; // Language of the user's query
+}
+
+const languageOptions = [
+  { name: 'English', code: 'en' },
+  { name: 'Spanish', code: 'es' },
+  { name: 'French', code: 'fr' },
+  { name: 'German', code: 'de' },
+  { name: 'Japanese', code: 'ja' },
+  { name: 'Chinese', code: 'zh' },
+  { name: 'Korean', code: 'ko' },
+];
+
+const dogeEscapeAssetConfigKeys: Array<{key: AdminConfigImageKey, displayName: string, defaultUrl: string}> = [
+    { key: 'dogeEscapePlayerImageUrl', displayName: 'Doge Escape Player', defaultUrl: DOGE_WHALE_ESCAPE_PLAYER_IMAGE_URL },
+    { key: 'dogeEscapeWallImageUrl', displayName: 'Doge Escape Wall', defaultUrl: DOGE_WHALE_ESCAPE_WALL_IMAGE_URL },
+    { key: 'dogeEscapeGoalImageUrl', displayName: 'Doge Escape Goal', defaultUrl: DOGE_WHALE_ESCAPE_GOAL_IMAGE_URL },
+    { key: 'dogeEscapeMineImageUrl', displayName: 'Doge Escape Mine', defaultUrl: DOGE_WHALE_ESCAPE_MINE_IMAGE_URL },
+    { key: 'dogeEscapeBombImageUrl', displayName: 'Doge Escape Bomb', defaultUrl: DOGE_WHALE_ESCAPE_BOMB_IMAGE_URL },
+    { key: 'dogeEscapeJellyfishImageUrl', displayName: 'Doge Escape Jellyfish', defaultUrl: DOGE_WHALE_ESCAPE_JELLYFISH_IMAGE_URL },
+    { key: 'dogeEscapeCrocodileImageUrl', displayName: 'Doge Escape Crocodile', defaultUrl: DOGE_WHALE_ESCAPE_CROCODILE_IMAGE_URL },
+    { key: 'dogeEscapeAlgaeImageUrl', displayName: 'Doge Escape Toxic Algae', defaultUrl: DOGE_WHALE_ESCAPE_ALGAE_IMAGE_URL },
+    { key: 'dogeEscapeCurrentNImageUrl', displayName: 'Doge Escape Current (North)', defaultUrl: DOGE_WHALE_ESCAPE_CURRENT_N_IMAGE_URL },
+    { key: 'dogeEscapeCurrentSImageUrl', displayName: 'Doge Escape Current (South)', defaultUrl: DOGE_WHALE_ESCAPE_CURRENT_S_IMAGE_URL },
+    { key: 'dogeEscapeCurrentEImageUrl', displayName: 'Doge Escape Current (East)', defaultUrl: DOGE_WHALE_ESCAPE_CURRENT_E_IMAGE_URL },
+    { key: 'dogeEscapeCurrentWImageUrl', displayName: 'Doge Escape Current (West)', defaultUrl: DOGE_WHALE_ESCAPE_CURRENT_W_IMAGE_URL },
+    { key: 'dogeEscapeSnakeImageUrl', displayName: 'Doge Escape Snake', defaultUrl: DOGE_WHALE_ESCAPE_SNAKE_IMAGE_URL },
+    { key: 'dogeEscapeLifeUpImageUrl', displayName: 'Doge Escape Life-Up', defaultUrl: DOGE_WHALE_ESCAPE_LIFEUP_IMAGE_URL },
+];
+
+
+export const AdminPanelModal: React.FC<AdminPanelModalProps> = ({
+  isOpen,
+  onClose,
+  adminConfig,
+  runtimeNftDefinitions,
+  runtimeGameCharacters,
+  onUpdateAdminConfig,
+  onUpdateNftImage,
+  onUpdateCharacterAttributes,
+  showNotification,
+  isMaximizable,
+  isMaximized,
+  onToggleMaximize,
+  onLogout, // Destructure new prop
+}) => {
+  const [activeTab, setActiveTab] = useState<AdminTab>('aiChat');
+  const [localAdminConfig, setLocalAdminConfig] = useState<AdminConfig>(adminConfig);
+
+  const [nftImageInputs, setNftImageInputs] = useState<Record<string, string>>({}); 
+  const [pendingNftImageChanges, setPendingNftImageChanges] = useState<Record<string, string | null>>({}); 
+
+  const [characterAttributeInputs, setCharacterAttributeInputs] = useState<Record<string, CharacterAttributeInputs>>({});
+
+  const [aiPrompts, setAiPrompts] = useState<Record<string, string>>({}); 
+  const [aiGeneratedImagePreviews, setAiGeneratedImagePreviews] = useState<Record<string, string | null>>({}); 
+  const [isGenerating, setIsGenerating] = useState<Record<string, boolean>>({}); 
+  const [superAiAgentEnabled, setSuperAiAgentEnabled] = useState<boolean>(true);
+
+  const [aiSuggestionDimensions, setAiSuggestionDimensions] = useState<string>('');
+  const [aiSuggestionDirection, setAiSuggestionDirection] = useState<string>('any');
+  const [aiSuggestionStyle, setAiSuggestionStyle] = useState<string>('any');
+  const [aiSuggestionBackground, setAiSuggestionBackground] = useState<string>('any');
+
+  const [adminAssetUrlInputs, setAdminAssetUrlInputs] = useState<Record<AdminConfigImageKey, string>>({} as Record<AdminConfigImageKey, string>); 
+  const [pendingAdminAssetBase64, setPendingAdminAssetBase64] = useState<Partial<Record<AdminConfigImageKey, string | null>>>({}); 
+
+  const [pendingSoundUploads, setPendingSoundUploads] = useState<Partial<Record<SoundUrlKey, string>>>({});
+
+  // AI Chat Bot State
+  const [aiChatMessages, setAiChatMessages] = useState<AIChatMessage[]>([]);
+  const [currentAiQuery, setCurrentAiQuery] = useState('');
+  const [selectedAiLanguage, setSelectedAiLanguage] = useState(languageOptions[0].code); // Default to English code
+  const [isAiResponding, setIsAiResponding] = useState(false);
+  const aiChatLogRef = useRef<HTMLDivElement>(null);
+  const geminiAi = useMemo(() => new GoogleGenAI({ apiKey: process.env.API_KEY! }), []);
+
+  // Knowledge Base State
+  const [newReplyTopic, setNewReplyTopic] = useState<string>('');
+  const [newReplyAnswer, setNewReplyAnswer] = useState<string>('');
+
+
+  useEffect(() => {
+    if (isOpen) {
+        const newLocalAdminConfig = JSON.parse(JSON.stringify(adminConfig));
+        if (!newLocalAdminConfig.savedReplies) { // Initialize if undefined
+            newLocalAdminConfig.savedReplies = [];
+        }
+        setLocalAdminConfig(newLocalAdminConfig);
+
+        const initialNftImageInputs: Record<string, string> = {};
+        const initialPendingNftChanges: Record<string, string | null> = {};
+        Object.keys(runtimeNftDefinitions).forEach(nftId => {
+            const img = runtimeNftDefinitions[nftId].image;
+            initialNftImageInputs[nftId] = img.startsWith('data:image') ? '' : img;
+            initialPendingNftChanges[nftId] = img.startsWith('data:image') ? img : null;
+        });
+        setNftImageInputs(initialNftImageInputs);
+        setPendingNftImageChanges(initialPendingNftChanges);
+
+        const initialCharAttrInputs: Record<string, CharacterAttributeInputs> = {};
+        Object.keys(runtimeGameCharacters).forEach(charId => {
+            const char = runtimeGameCharacters[charId];
+            initialCharAttrInputs[charId] = {
+                name: char.name,
+                imageURL: char.image.startsWith('data:image') ? '' : char.image,
+                imageBase64: char.image.startsWith('data:image') ? char.image : null,
+                defaultWeaponType: char.defaultWeaponType || WeaponType.StandardBullet,
+                autoFireHealthThreshold: char.autoFireHealthThreshold || 0,
+                baseHealth: char.baseHealth || (char.type === 'player' ? 100 : (char.type === 'enemy' ? 25 : 100)),
+                baseSpeed: char.baseSpeed || (char.type === 'enemy' ? 1 : PLAYER_SPEED),
+            };
+        });
+        setCharacterAttributeInputs(initialCharAttrInputs);
+
+        const currentAdminAssetUrlInputs: Record<AdminConfigImageKey, string> = {} as Record<AdminConfigImageKey, string>;
+        const currentPendingAdminAssetBase64: Partial<Record<AdminConfigImageKey, string | null>> = {};
+
+        (Object.keys(newLocalAdminConfig) as Array<keyof AdminConfig>).forEach(key => {
+            if ((key.toLowerCase().includes('image') || key.toLowerCase().includes('imageurl')) && typeof newLocalAdminConfig[key] === 'string') {
+                const imgVal = newLocalAdminConfig[key] as string;
+                if (imgVal.startsWith('data:image')) {
+                    currentPendingAdminAssetBase64[key as AdminConfigImageKey] = imgVal;
+                    currentAdminAssetUrlInputs[key as AdminConfigImageKey] = '';
+                } else {
+                    currentAdminAssetUrlInputs[key as AdminConfigImageKey] = imgVal;
+                    currentPendingAdminAssetBase64[key as AdminConfigImageKey] = null;
+                }
+            }
+        });
+        setAdminAssetUrlInputs(currentAdminAssetUrlInputs);
+        setPendingAdminAssetBase64(currentPendingAdminAssetBase64);
+
+        setAiPrompts({});
+        setAiGeneratedImagePreviews({});
+        setIsGenerating({});
+        setPendingSoundUploads({});
+        
+        // Reset AI Chat state
+        setAiChatMessages([]);
+        setCurrentAiQuery('');
+        setIsAiResponding(false);
+
+        // Reset Knowledge Base input fields
+        setNewReplyTopic('');
+        setNewReplyAnswer('');
+    }
+  }, [isOpen, adminConfig, runtimeNftDefinitions, runtimeGameCharacters]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    const checked = (e.target as HTMLInputElement).checked;
+    setLocalAdminConfig(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : type === 'number' ? parseFloat(value) : value,
+    }));
+  };
+
+  const handleNftImageUrlChange = (nftId: string, value: string) => {
+    setNftImageInputs(prev => ({ ...prev, [nftId]: value }));
+    setPendingNftImageChanges(prev => ({...prev, [nftId]: null})); 
+  };
+  const handleNftImageFileUpload = async (nftId: string, file: File | null) => {
+    if (file) {
+      try {
+        const base64String = await convertFileToBase64(file);
+        setPendingNftImageChanges(prev => ({...prev, [nftId]: base64String}));
+        setNftImageInputs(prev => ({ ...prev, [nftId]: '' })); 
+        showNotification(`Image ready for NFT: ${runtimeNftDefinitions[nftId]?.name}. Click 'Apply Custom Image'.`, 'info');
+      } catch (error) { console.error("Error converting NFT image:", error); showNotification('Failed to load image file.', 'error');}
+    }
+  };
+  const handleApplyCustomNftImage = (nftId: string) => {
+    const pendingBase64 = pendingNftImageChanges[nftId];
+    const urlInput = nftImageInputs[nftId];
+    if (pendingBase64) {
+        onUpdateNftImage(nftId, pendingBase64);
+    } else if (urlInput && urlInput.trim() !== '') {
+        onUpdateNftImage(nftId, urlInput);
+    } else {
+        showNotification('No new image (URL or file) to apply.', 'warning');
+    }
+  };
+
+
+  const handleCharacterAttributeChange = (characterId: string, field: keyof CharacterAttributeInputs, value: string | number | WeaponType | undefined) => {
+    setCharacterAttributeInputs(prev => ({
+        ...prev,
+        [characterId]: {
+            ...(prev[characterId] || {} as CharacterAttributeInputs),
+            [field]: value,
+            ...(field === 'imageURL' && { imageBase64: null }) 
+        }
+    }));
+  };
+
+  const handleCharacterSelectChange = (characterId: string, field: keyof CharacterAttributeInputs, value: string) => {
+    const weaponTypeEnumValue = WeaponType[value as keyof typeof WeaponType];
+    handleCharacterAttributeChange(characterId, field, weaponTypeEnumValue || WeaponType.StandardBullet);
+  };
+
+  const handleCharacterImageFileUpload = async (characterId: string, file: File | null) => {
+    if (file) {
+      try {
+        const base64String = await convertFileToBase64(file);
+        setCharacterAttributeInputs(prev => ({
+            ...prev,
+            [characterId]: {
+                ...(prev[characterId] || {} as CharacterAttributeInputs),
+                imageBase64: base64String,
+                imageURL: '' 
+            }
+        }));
+        showNotification(`Image ready for Character: ${runtimeGameCharacters[characterId]?.name}. Click 'Apply Custom Image'.`, 'info');
+      } catch (error) { console.error("Error converting character image:", error); showNotification('Failed to load image file.', 'error');}
+    }
+  };
+
+  const handleApplyCustomCharacterImage = (characterId: string) => {
+    const currentInputs = characterAttributeInputs[characterId];
+    if (!currentInputs) return;
+    if (currentInputs.imageBase64) {
+        onUpdateCharacterAttributes(characterId, { image: currentInputs.imageBase64 });
+    } else if (currentInputs.imageURL && currentInputs.imageURL.trim() !== '') {
+        onUpdateCharacterAttributes(characterId, { image: currentInputs.imageURL });
+    } else {
+        showNotification('No new image (URL or file) to apply for character.', 'warning');
+    }
+  };
+
+
+  const handleApplyCharacterNonImageChanges = (characterId: string) => {
+    const currentInputs = characterAttributeInputs[characterId];
+    if (!currentInputs) return;
+    const updates: Partial<GameCharacter> = {};
+    const originalChar = runtimeGameCharacters[characterId];
+
+    if (currentInputs.name !== originalChar.name) updates.name = currentInputs.name;
+    if (currentInputs.baseHealth !== originalChar.baseHealth && typeof currentInputs.baseHealth === 'number') updates.baseHealth = currentInputs.baseHealth;
+    if (currentInputs.baseSpeed !== originalChar.baseSpeed && typeof currentInputs.baseSpeed === 'number') updates.baseSpeed = currentInputs.baseSpeed;
+
+    if (originalChar.type === 'player') {
+        if (currentInputs.defaultWeaponType !== (originalChar.defaultWeaponType || WeaponType.StandardBullet)) updates.defaultWeaponType = currentInputs.defaultWeaponType;
+        const newThreshold = Number(currentInputs.autoFireHealthThreshold);
+        if (newThreshold !== (originalChar.autoFireHealthThreshold || 0) && !isNaN(newThreshold)) updates.autoFireHealthThreshold = Math.max(0, Math.min(100, newThreshold));
+    }
+    if (Object.keys(updates).length > 0) onUpdateCharacterAttributes(characterId, updates);
+    else showNotification('No non-image attributes changed.', 'info');
+  };
+
+
+  const handleAdminConfigAssetUrlChange = (configKey: AdminConfigImageKey, value: string) => {
+    setAdminAssetUrlInputs(prev => ({ ...prev, [configKey]: value }));
+    setPendingAdminAssetBase64(prev => ({ ...prev, [configKey]: null })); 
+    setLocalAdminConfig(prev => ({ ...prev, [configKey]: value })); 
+  };
+
+  const handleAdminConfigAssetFileUpload = async (configKey: AdminConfigImageKey, file: File | null) => {
+    if (file) {
+      try {
+        const base64String = await convertFileToBase64(file);
+        setPendingAdminAssetBase64(prev => ({ ...prev, [configKey]: base64String }));
+        setAdminAssetUrlInputs(prev => ({ ...prev, [configKey]: '' })); 
+        setLocalAdminConfig(prev => ({ ...prev, [configKey]: base64String })); 
+        showNotification(`Image ready for ${configKey}. Save all admin changes to finalize.`, 'info');
+      } catch (error) { console.error(`Error converting ${configKey} image:`, error); showNotification('Failed to load image file.', 'error'); }
+    }
+  };
+  
+  const handleApplyCustomAdminConfigAssetImage = (configKey: AdminConfigImageKey) => {
+    const pendingBase64 = pendingAdminAssetBase64[configKey];
+    const urlInput = adminAssetUrlInputs[configKey];
+    let applied = false;
+    if (pendingBase64) {
+        setLocalAdminConfig(prev => ({ ...prev, [configKey]: pendingBase64 }));
+        applied = true;
+    } else if (urlInput && urlInput.trim() !== '') {
+        setLocalAdminConfig(prev => ({ ...prev, [configKey]: urlInput }));
+        applied = true;
+    }
+    if (applied) showNotification(`Preview updated for ${configKey}. Save all admin changes to finalize.`, 'info');
+    else showNotification(`No new image (URL or file) to apply for ${configKey}.`, 'warning');
+  };
+
+
+  const handleSoundFileUpload = async (eventKey: SoundEvent, file: File | null) => {
+    if (file) {
+        try {
+            const base64String = await convertFileToBase64(file);
+            const adminSoundKeyPattern = `sound${eventKey.charAt(0).toUpperCase() + eventKey.slice(1).replace(/_([a-z])/g, (g) => g[1].toUpperCase())}Url`;
+            const adminSoundKey = adminSoundKeyPattern as SoundUrlKey;
+            setPendingSoundUploads(prev => ({...prev, [adminSoundKey]: base64String}));
+            setLocalAdminConfig(prev => ({ ...prev, [adminSoundKey]: base64String })); 
+            showNotification(`${formatSoundEventName(eventKey)} sound updated. Save all admin changes to finalize.`, 'info');
+        } catch (error) { console.error(`Error converting sound file for ${eventKey}:`, error); showNotification(`Failed to load sound for ${eventKey}.`, 'error');}
+    }
+  };
+
+
+  const handleSaveAllAdminChanges = () => {
+    const finalConfig = {...localAdminConfig};
+    (Object.keys(pendingAdminAssetBase64) as Array<AdminConfigImageKey>).forEach(key => {
+        if (pendingAdminAssetBase64[key]) {
+            finalConfig[key] = pendingAdminAssetBase64[key]!;
+        } else if (adminAssetUrlInputs[key] && adminAssetUrlInputs[key].trim() !== '') {
+            finalConfig[key] = adminAssetUrlInputs[key];
+        }
+    });
+    Object.keys(pendingSoundUploads).forEach(stringKey => {
+        const key = stringKey as SoundUrlKey;
+        if (pendingSoundUploads[key]) {
+            finalConfig[key] = pendingSoundUploads[key]!;
+        }
+    });
+    onUpdateAdminConfig(finalConfig);
+  };
+
+  const handleAiPromptChange = (assetKey: string, prompt: string) => {
+    setAiPrompts(prev => ({ ...prev, [assetKey]: prompt }));
+  };
+
+  const generateCharacterPromptFromName = (
+    characterName: string,
+    characterType: 'player' | 'enemy'
+  ): string => {
+      const cleanName = characterName.replace(/\p{Emoji}/gu, '').trim();
+      let baseDescription = "";
+  
+      if (characterType === 'player') {
+          baseDescription = `A game character asset, a player Doge Whale, visually representing: ${cleanName}.`;
+      } else { 
+          baseDescription = `A game character asset, an enemy sea creature, visually representing: ${cleanName}.`;
+      }
+  
+      let prompt = `${baseDescription}`;
+  
+      if (aiSuggestionStyle && aiSuggestionStyle !== 'any') {
+          prompt += ` Style: ${aiSuggestionStyle}.`;
+      } else {
+          prompt += ` Style: 3D render.`; 
+      }
+      if (aiSuggestionDimensions) {
+          prompt += ` Dimensions: ${aiSuggestionDimensions}.`;
+      }
+      if (aiSuggestionDirection && aiSuggestionDirection !== 'any') {
+          prompt += ` Direction: ${aiSuggestionDirection}.`;
+      }
+      if (aiSuggestionBackground && aiSuggestionBackground !== 'any') {
+          prompt += ` Background: ${aiSuggestionBackground}.`;
+      } else {
+          prompt += ` Background: transparent background for versatility.`;
+      }
+      return prompt.trim();
+  };
+
+  const handleAutoGenerateForCharacter = async (characterId: string) => {
+    const character = runtimeGameCharacters[characterId];
+    if (!character) return;
+
+    const assetKey = `char_${characterId}`;
+    const generatedPrompt = generateCharacterPromptFromName(
+        character.name,
+        character.type
+    );
+    
+    setAiPrompts(prev => ({ ...prev, [assetKey]: generatedPrompt }));
+    showNotification(`Prompt suggested for ${character.name}: "${generatedPrompt.substring(0,50)}..."`, 'info');
+    
+    await handleGenerateAiImage(assetKey, 'character', characterId);
+  };
+
+
+  const handleGenerateAiImage = async (assetKey: string, itemType: string, idOrConfigKey: string) => {
+    const userPrompt = aiPrompts[assetKey]; 
+    if (!userPrompt) {
+      showNotification("Please enter or auto-generate a prompt for the AI.", "warning");
+      return;
+    }
+
+    setIsGenerating(prev => ({ ...prev, [assetKey]: true }));
+    setAiGeneratedImagePreviews(prev => ({ ...prev, [assetKey]: null }));
+
+    let fullPrompt = ""; 
+    let itemNameForNotification = idOrConfigKey;
+
+    switch (itemType) {
+        case 'nft':
+            fullPrompt = `A digital art NFT for a game, depicting a Doge Whale character. The NFT should represent: ${userPrompt}.`;
+            itemNameForNotification = runtimeNftDefinitions[idOrConfigKey]?.name || idOrConfigKey;
+            break;
+        case 'character':
+            fullPrompt = userPrompt; 
+            itemNameForNotification = runtimeGameCharacters[idOrConfigKey]?.name || idOrConfigKey;
+            break;
+        case 'adminConfigAsset': // Generic handler for AdminConfig assets based on idOrConfigKey
+            const configKeyName = idOrConfigKey as keyof AdminConfig;
+            const displayNameForKey = configKeyName
+                                        .replace('adminConfig_', '')
+                                        .replace('ImageUrl', '')
+                                        .replace('Image', '')
+                                        .replace(/([A-Z])/g, ' $1').trim();
+
+            if (configKeyName.includes('dogeEscape')) {
+                 fullPrompt = `A game asset for 'Doge Whale Escape', a 2D maze game. The asset is a ${displayNameForKey}. Appearance: ${userPrompt}. Style: Clear, slightly pixelated or cartoonish, suitable for a grid-based game.`;
+            } else if (configKeyName === 'gameBackgroundImageUrl') {
+                 fullPrompt = `A vibrant and immersive game background for an underwater space MMORPG featuring Doge Whales. The scene should be: ${userPrompt}. Scenic and detailed.`;
+            } else if (configKeyName === 'defaultEnemyImageUrl') {
+                fullPrompt = `A generic enemy creature for an underwater space game. Appearance: ${userPrompt}. Needs to be distinct and somewhat menacing.`;
+            } else if (configKeyName === 'seaTokenImageUrl') {
+                fullPrompt = `A single, distinct game currency item called a "Sea Token". It should look like: ${userPrompt}. Small, clear, iconic design.`;
+            } else if (configKeyName === 'redArrowImageUrl') {
+                 fullPrompt = `A sleek, powerful red arrow projectile for a defensive weapon system in a space game. Appearance: ${userPrompt}. Dynamic, sci-fi style, glowing red.`;
+            } else if (configKeyName === 'flameParticleImageUrl') {
+                fullPrompt = `Small, bright, fiery particles or hot embers, suitable for a flame cone weapon effect in a game. Details: ${userPrompt}. Style: VFX sprite, clear background if possible.`;
+            } else if (configKeyName === 'enemyBurningEffectImageUrl') {
+                fullPrompt = `A visual effect for a game, representing an enemy character on fire. Could be a sprite sheet for an animation or a static overlay. Details: ${userPrompt}. Style: Game visual effect, transparent background suitable for overlay.`;
+            } else if (configKeyName === 'fireballProjectileImageUrl') {
+                 fullPrompt = `A dynamic and impactful fireball projectile for a fantasy or sci-fi game weapon. Details: ${userPrompt}. Style: Magical, fiery, possibly with a trailing effect, on a transparent background.`;
+            } else if (configKeyName.startsWith('decorativeFish')) {
+                 const fishType = displayNameForKey.replace('Decorative Fish ', '');
+                 fullPrompt = `A decorative ${fishType.toLowerCase()} fish for an underwater space game. Appearance: ${userPrompt}.`;
+            } else if (configKeyName.startsWith('bubble')) {
+                 const bubbleSize = displayNameForKey.replace('Bubble ', '');
+                 fullPrompt = `A ${bubbleSize.toLowerCase()} bubble effect for an underwater game. Appearance: ${userPrompt}.`;
+            } else {
+                 fullPrompt = `A game asset: ${displayNameForKey}. Description: ${userPrompt}.`;
+            }
+            itemNameForNotification = displayNameForKey;
+            break;
+        default:
+            showNotification("Unknown item type for AI generation.", "error");
+            setIsGenerating(prev => ({ ...prev, [assetKey]: false }));
+            return;
+    }
+
+    const result: GeminiImageResponse = await generateImageWithGemini(fullPrompt);
+    setIsGenerating(prev => ({ ...prev, [assetKey]: false }));
+
+    if (result.success && result.imageUrl) {
+      setAiGeneratedImagePreviews(prev => ({ ...prev, [assetKey]: result.imageUrl! }));
+      if (superAiAgentEnabled) {
+        handleApplyAiImage(assetKey, itemType, idOrConfigKey, result.imageUrl);
+        showNotification(`AI image generated and auto-applied to ${itemNameForNotification}!`, "success");
+      } else {
+        showNotification(`Image generated for ${itemNameForNotification}! Preview below. Click 'Apply AI Image'.`, "success");
+      }
+    } else {
+        if (result.errorType === 'quota_exhausted') {
+            showNotification(result.message || 'API Quota Exceeded. Check your plan or wait for reset.', 'error');
+        } else {
+            showNotification(result.message || `Failed to generate image for ${itemNameForNotification}. Check console.`, 'error');
+        }
+    }
+  };
+
+  const handleApplyAiImage = (assetKey: string, itemType: string, idOrConfigKey: string, imageUrlToApply?: string) => {
+    const imageUrl = imageUrlToApply || aiGeneratedImagePreviews[assetKey];
+    if (!imageUrl) {
+      showNotification("No AI-generated image to apply.", "warning");
+      return;
+    }
+
+    let itemNameForNotification = idOrConfigKey;
+
+    if (itemType === 'nft') {
+      onUpdateNftImage(idOrConfigKey, imageUrl);
+      itemNameForNotification = runtimeNftDefinitions[idOrConfigKey]?.name || idOrConfigKey;
+      showNotification(`AI image applied to NFT: ${itemNameForNotification}.`, "success");
+    } else if (itemType === 'character') {
+      onUpdateCharacterAttributes(idOrConfigKey, { image: imageUrl });
+      itemNameForNotification = runtimeGameCharacters[idOrConfigKey]?.name || idOrConfigKey;
+      showNotification(`AI image applied to Character: ${itemNameForNotification}.`, "success");
+    } else if (itemType === 'adminConfigAsset') { // Updated for generic admin config assets
+        const configKey = idOrConfigKey as AdminConfigImageKey;
+        setLocalAdminConfig(prev => ({ ...prev, [configKey]: imageUrl }));
+        setPendingAdminAssetBase64(prev => ({ ...prev, [configKey]: imageUrl }));
+        setAdminAssetUrlInputs(prev => ({ ...prev, [configKey]: '' })); 
+
+        itemNameForNotification = configKey.replace('adminConfig_', '').replace('ImageUrl', '').replace('Image', '').replace(/([A-Z])/g, ' $1').trim();
+        showNotification(`AI image applied to ${itemNameForNotification}. Save all admin changes to finalize.`, "success");
+    } else {
+        showNotification("Unknown item type for applying AI image.", "error");
+        return;
+    }
+
+    if (!superAiAgentEnabled || imageUrlToApply) { 
+        setAiGeneratedImagePreviews(prev => ({ ...prev, [assetKey]: null })); 
+    }
+  };
+
+  // AI Chat Bot Logic
+  const handleSendAiQuery = async () => {
+    if (currentAiQuery.trim() === '' || isAiResponding) return;
+
+    const userMessage: AIChatMessage = {
+      id: generateId(),
+      sender: 'user',
+      text: currentAiQuery,
+      lang: languageOptions.find(l => l.code === selectedAiLanguage)?.name || selectedAiLanguage,
+    };
+    setAiChatMessages(prev => [...prev, userMessage]);
+    setIsAiResponding(true);
+    setCurrentAiQuery('');
+
+    try {
+      const languageName = languageOptions.find(l => l.code === selectedAiLanguage)?.name || 'English';
+      let knowledgeBaseText = "";
+      if (localAdminConfig.savedReplies && localAdminConfig.savedReplies.length > 0) {
+          knowledgeBaseText = "You have access to the following predefined knowledge base. Use this information when relevant to the user's query:\n";
+          knowledgeBaseText += JSON.stringify(localAdminConfig.savedReplies.map(r => ({topic: r.topic, answer: r.answer}))) + "\n---\n";
+      }
+      
+      const systemInstruction = `${knowledgeBaseText}You are a helpful AI assistant for a game administrator. Respond to the user's query in ${languageName}. Be concise and helpful.`;
+      
+      const response: GenerateContentResponse = await geminiAi.models.generateContent({
+        model: 'gemini-2.5-flash-preview-04-17',
+        contents: userMessage.text,
+        config: { systemInstruction: systemInstruction },
+      });
+
+      const aiTextResponse = response.text;
+      const aiMessage: AIChatMessage = {
+        id: generateId(),
+        sender: 'ai',
+        text: aiTextResponse,
+      };
+      setAiChatMessages(prev => [...prev, aiMessage]);
+
+    } catch (error: any) {
+      console.error("Error with AI Chat:", error);
+      const errorMessage: AIChatMessage = {
+        id: generateId(),
+        sender: 'error',
+        text: `AI Error: ${error.message || 'Could not get a response.'}`,
+      };
+      setAiChatMessages(prev => [...prev, errorMessage]);
+    } finally {
+      setIsAiResponding(false);
+    }
+  };
+
+  useEffect(() => {
+    if (aiChatLogRef.current) {
+      aiChatLogRef.current.scrollTop = aiChatLogRef.current.scrollHeight;
+    }
+  }, [aiChatMessages]);
+
+  // Knowledge Base Management
+  const handleAddReply = () => {
+    if (!newReplyTopic.trim() || !newReplyAnswer.trim()) {
+        showNotification("Topic and Answer cannot be empty.", "warning");
+        return;
+    }
+    setLocalAdminConfig(prev => ({
+        ...prev,
+        savedReplies: [
+            ...(prev.savedReplies || []),
+            { id: generateId(), topic: newReplyTopic.trim(), answer: newReplyAnswer.trim() }
+        ]
+    }));
+    setNewReplyTopic('');
+    setNewReplyAnswer('');
+    showNotification("Reply added to knowledge base. Save all admin changes to finalize.", "info");
+  };
+
+  const handleDeleteReply = (replyId: string) => {
+    setLocalAdminConfig(prev => ({
+        ...prev,
+        savedReplies: (prev.savedReplies || []).filter(reply => reply.id !== replyId)
+    }));
+    showNotification("Reply removed from knowledge base. Save all admin changes to finalize.", "info");
+  };
+
+
+  const renderAssetImageEditor = (
+    editorAssetKey: string, 
+    displayName: string,
+    itemType: 'nft' | 'character' | 'adminConfigAsset',
+    idOrConfigKey: string, 
+    currentImageUrl: string | undefined
+  ) => {
+    const assetSpecificPrompt = aiPrompts[editorAssetKey] || '';
+    const isAssetGenerating = isGenerating[editorAssetKey] || false;
+    const assetAiPreview = aiGeneratedImagePreviews[editorAssetKey] || null;
+    const character = itemType === 'character' ? runtimeGameCharacters[idOrConfigKey] : null;
+    
+    let assetUrlInputValue = '';
+    if (itemType === 'adminConfigAsset') {
+      assetUrlInputValue = adminAssetUrlInputs[idOrConfigKey as AdminConfigImageKey] || '';
+    } else if (itemType === 'nft') {
+      assetUrlInputValue = nftImageInputs[idOrConfigKey] || '';
+    } else if (itemType === 'character') {
+      assetUrlInputValue = characterAttributeInputs[idOrConfigKey]?.imageURL || '';
+    }
+
+
+    return (
+        <div className="mb-8 p-4 border rounded-lg bg-theme-dark/40 border-theme-border/40">
+            <h5 className="text-lg font-medium text-gray-100 mb-3">{displayName}</h5>
+            <img
+                src={currentImageUrl || 'https://via.placeholder.com/150?text=No+Image'}
+                alt={`${displayName} current preview`}
+                className="w-32 h-32 object-contain rounded-md bg-black/40 border border-theme-border/60 mb-3"
+                onError={(e) => (e.currentTarget.src = 'https://via.placeholder.com/150?text=Error')}
+            />
+            <div className="mb-3">
+                <label htmlFor={`ai-prompt-${editorAssetKey}`} className="block text-sm font-medium text-gray-300 mb-1">AI Prompt:</label>
+                <textarea id={`ai-prompt-${editorAssetKey}`} rows={3} value={assetSpecificPrompt} onChange={(e) => handleAiPromptChange(editorAssetKey, e.target.value)} placeholder="Describe the image or click Auto-Generate..." className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+                <div className="flex flex-wrap gap-2 mt-1.5">
+                    {itemType === 'character' && character && (
+                         <button 
+                            onClick={() => handleAutoGenerateForCharacter(idOrConfigKey)} 
+                            disabled={isAssetGenerating} 
+                            className="py-2 px-4 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold rounded-md transition-colors disabled:bg-teal-400 flex items-center"
+                            title={`Auto-generate prompt & image for ${character.name}`}
+                        >
+                            ✨ Auto-Generate Art
+                        </button>
+                    )}
+                    <button onClick={() => handleGenerateAiImage(editorAssetKey, itemType, idOrConfigKey)} disabled={isAssetGenerating} className="py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white text-sm font-semibold rounded-md transition-colors disabled:bg-pink-400 disabled:text-gray-100 flex items-center">
+                        {isAssetGenerating && <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>}Generate AI Image
+                    </button>
+                </div>
+                {assetAiPreview && (
+                    <div className="mt-2">
+                        <img src={assetAiPreview} alt="AI Preview" className="w-28 h-28 object-contain rounded-md bg-black/40 border border-theme-border/60"/>
+                        {!superAiAgentEnabled && (
+                            <button onClick={() => handleApplyAiImage(editorAssetKey, itemType, idOrConfigKey)} className="mt-1.5 py-1.5 px-3 bg-pink-600 hover:bg-pink-700 text-white text-sm font-semibold rounded-md transition-colors">Apply AI Image</button>
+                        )}
+                    </div>
+                )}
+            </div>
+            <div className="mb-3">
+                <label htmlFor={`file-${editorAssetKey}`} className="block text-sm font-medium text-gray-300 mb-1">Upload Image:</label>
+                <input type="file" id={`file-${editorAssetKey}`} accept="image/*,image/gif"
+                    onChange={(e) => {
+                        const file = e.target.files ? e.target.files[0] : null;
+                        if (itemType === 'nft') handleNftImageFileUpload(idOrConfigKey, file);
+                        else if (itemType === 'character') handleCharacterImageFileUpload(idOrConfigKey, file);
+                        else if (itemType === 'adminConfigAsset') handleAdminConfigAssetFileUpload(idOrConfigKey as AdminConfigImageKey, file);
+                    }}
+                    className="w-full text-base text-gray-300 file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-pink-600 file:text-white hover:file:bg-pink-700"/>
+            </div>
+            <div className="mb-3">
+                <label htmlFor={`url-${editorAssetKey}`} className="block text-sm font-medium text-gray-300 mb-1">Image Source URL or Local Path:</label>
+                <input type="text" id={`url-${editorAssetKey}`} value={assetUrlInputValue}
+                    onChange={(e) => {
+                        if (itemType === 'nft') handleNftImageUrlChange(idOrConfigKey, e.target.value);
+                        else if (itemType === 'character') handleCharacterAttributeChange(idOrConfigKey, 'imageURL', e.target.value);
+                        else if (itemType === 'adminConfigAsset') handleAdminConfigAssetUrlChange(idOrConfigKey as AdminConfigImageKey, e.target.value);
+                    }}
+                    className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500" placeholder="Enter image URL or local path"/>
+                 <p className="text-xs text-gray-400 mt-1">Enter URL (https://...), local path (e.g., /assets/images/image.png), or upload a file.</p>
+            </div>
+            {(itemType === 'nft' || itemType === 'character' || itemType === 'adminConfigAsset') && (
+                 <button
+                    onClick={() => {
+                        if (itemType === 'nft') handleApplyCustomNftImage(idOrConfigKey);
+                        else if (itemType === 'character') handleApplyCustomCharacterImage(idOrConfigKey);
+                        else if (itemType === 'adminConfigAsset') handleApplyCustomAdminConfigAssetImage(idOrConfigKey as AdminConfigImageKey);
+                    }}
+                    className="mt-1.5 py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white text-sm font-semibold rounded-md transition-colors"
+                >
+                    Apply Custom Image (Upload/URL)
+                </button>
+            )}
+        </div>
+    );
+  };
+
+
+  const renderNftManagement = () => (
+    <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-3">
+      <h3 className="text-xl font-semibold text-theme-accent mb-4">Manage NFT Images</h3>
+      {Object.values(runtimeNftDefinitions).map(nft => (
+         renderAssetImageEditor(`nft_${nft.id}`, nft.name, 'nft', nft.id, pendingNftImageChanges[nft.id] || nftImageInputs[nft.id] || nft.image)
+      ))}
+    </div>
+  );
+
+  const renderCharacterManagement = () => (
+    <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-3">
+      <h3 className="text-xl font-semibold text-theme-accent mb-4">Manage Game Characters</h3>
+      {Object.keys(runtimeGameCharacters).map(charId => {
+        const character = runtimeGameCharacters[charId];
+        const currentInputs = characterAttributeInputs[charId] || { name: '', imageURL: '', defaultWeaponType: WeaponType.StandardBullet, autoFireHealthThreshold: 0, baseHealth: 100, baseSpeed: 1 };
+        const charEditorKey = `char_${charId}`;
+        let currentImageDisplay = character.image;
+        if (currentInputs.imageBase64) currentImageDisplay = currentInputs.imageBase64;
+        else if (currentInputs.imageURL) currentImageDisplay = currentInputs.imageURL;
+
+        return (
+            <div key={character.id} className="p-4 bg-theme-dark/60 rounded-lg border border-theme-border/60">
+                <h4 className="text-lg font-medium text-gray-100 mb-3">{currentInputs.name || character.name} <span className="text-sm text-gray-400">({character.type})</span></h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start mb-3">
+                    <div><label htmlFor={`charName-${charId}`} className="block text-sm font-medium text-gray-300 mb-1">Name:</label><input type="text" id={`charName-${charId}`} value={currentInputs.name} onChange={(e) => handleCharacterAttributeChange(charId, 'name', e.target.value)} className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+                    <div><label htmlFor={`charBaseHealth-${charId}`} className="block text-sm font-medium text-gray-300 mb-1">Base Health:</label><input type="number" id={`charBaseHealth-${charId}`} value={currentInputs.baseHealth} onChange={(e) => handleCharacterAttributeChange(charId, 'baseHealth', parseInt(e.target.value, 10))} className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+                    {character.type === 'enemy' && (
+                        <div><label htmlFor={`charBaseSpeed-${charId}`} className="block text-sm font-medium text-gray-300 mb-1">Base Speed:</label><input type="number" step="0.1" id={`charBaseSpeed-${charId}`} value={currentInputs.baseSpeed} onChange={(e) => handleCharacterAttributeChange(charId, 'baseSpeed', parseFloat(e.target.value))} className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+                    )}
+                    {character.type === 'player' && (
+                        <>
+                            <div><label htmlFor={`charWeaponType-${charId}`} className="block text-sm font-medium text-gray-300 mb-1">Weapon:</label><select id={`charWeaponType-${charId}`} value={Object.keys(WeaponType).find(key => WeaponType[key as keyof typeof WeaponType] === currentInputs.defaultWeaponType) || 'StandardBullet'} onChange={(e) => handleCharacterSelectChange(charId, 'defaultWeaponType', e.target.value)} className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500">{Object.keys(WeaponType).map(weaponKey => (<option key={weaponKey} value={weaponKey}>{formatWeaponTypeName(weaponKey)}</option>))}</select></div>
+                            <div><label htmlFor={`charAutoFire-${charId}`} className="block text-sm font-medium text-gray-300 mb-1">Auto-Fire Threshold (%):</label><input type="number" id={`charAutoFire-${charId}`} value={currentInputs.autoFireHealthThreshold || 0} min="0" max="100" onChange={(e) => handleCharacterAttributeChange(charId, 'autoFireHealthThreshold', parseInt(e.target.value, 10))} className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+                        </>
+                    )}
+                </div>
+                 <button onClick={() => handleApplyCharacterNonImageChanges(charId)} className="mt-2 py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white text-sm font-semibold rounded-md transition-colors">Apply Attribute Changes</button>
+
+                {renderAssetImageEditor(
+                    charEditorKey,
+                    `Image for ${currentInputs.name || character.name}`,
+                    'character',
+                    charId,
+                    currentImageDisplay
+                )}
+            </div>
+        )
+      })}
+    </div>
+  );
+
+  const renderStakingRates = () => (
+    <div className="space-y-6">
+      <h3 className="text-xl font-semibold text-theme-accent mb-4">Staking Configuration</h3>
+      <div><label htmlFor="globalNftStakingRate" className="block text-base font-medium text-gray-200 mb-1.5">Global NFT Staking Reward Rate (Sea Tokens per NFT per hour):</label><input type="number" id="globalNftStakingRate" name="globalNftStakingRate" value={localAdminConfig.globalNftStakingRate} onChange={handleInputChange} step="0.01" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/><p className="text-sm text-gray-400 mt-1.5">Note: Slot staking uses its own base rate. This may apply to other/future staking.</p></div>
+      <div><label htmlFor="globalTokenStakingRate" className="block text-base font-medium text-gray-200 mb-1.5">Sea Token Staking Reward Rate (per hour, e.g., 0.05 for 5%):</label><input type="number" id="globalTokenStakingRate" name="globalTokenStakingRate" value={localAdminConfig.globalTokenStakingRate} onChange={handleInputChange} step="0.001" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+    </div>
+  );
+
+  const renderGameAssets = () => ( 
+    <div className="space-y-8 max-h-[60vh] overflow-y-auto pr-3">
+      <p className="text-base text-gray-300">Asset images are now primarily managed in the "🤖 AI Img Gen" tab. This tab shows current settings and allows specific URL overrides if needed. Ensure images exist at the specified paths if using local assets (e.g., /assets/images/your-file.png).</p>
+      
+      {(['gameBackgroundImageUrl', 'defaultEnemyImageUrl', 'seaTokenImageUrl', 'redArrowImageUrl', 'flameParticleImageUrl', 'enemyBurningEffectImageUrl', 'fireballProjectileImageUrl'] as AdminConfigImageKey[]).map(configKey => {
+        const displayName = configKey
+            .replace('Url', '')
+            .replace('Image', '')
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, str => str.toUpperCase())
+            .trim();
+        
+        return (
+            <div key={configKey} className="p-4 bg-theme-dark/60 rounded-lg border border-theme-border/60">
+                <h4 className="text-lg font-medium text-gray-100 mb-2">{displayName}</h4>
+                <img 
+                    src={pendingAdminAssetBase64[configKey] || adminAssetUrlInputs[configKey] || localAdminConfig[configKey] || 'https://via.placeholder.com/150?text=No+Image'} 
+                    alt={`${displayName} Preview`} 
+                    className="w-32 h-32 object-contain rounded-md bg-black/40 border border-theme-border/60 mb-2"
+                    onError={(e) => (e.currentTarget.src = 'https://via.placeholder.com/150?text=Error')}
+                />
+                <div>
+                    <label htmlFor={`asset-url-${configKey}`} className="block text-sm font-medium text-gray-300 mb-1">Image Source URL or Local Path:</label>
+                    <input 
+                        type="text" 
+                        id={`asset-url-${configKey}`} 
+                        value={adminAssetUrlInputs[configKey] || ''} 
+                        onChange={(e) => handleAdminConfigAssetUrlChange(configKey, e.target.value)}
+                        className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"
+                        placeholder="Enter image URL or local path"
+                    />
+                    <p className="text-xs text-gray-400 mt-1">Enter URL (https://...), local path (e.g., /assets/images/image.png), or upload via AI Gen tab.</p>
+                </div>
+            </div>
+        );
+      })}
+      
+       <div>
+        <h3 className="text-xl font-semibold text-theme-accent mb-3">Decorative Fish & Bubbles</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {(['decorativeFishGoldenImage', 'decorativeFishStarImage', 'decorativeFishBluefinImage', 'bubbleSmallImage', 'bubbleMediumImage', 'bubbleLargeImage'] as AdminConfigImageKey[]).map(key => (
+                <div key={key} className="p-4 bg-theme-dark/60 rounded-lg border border-theme-border/60">
+                    <h4 className="text-lg font-medium text-gray-100 mb-2">{key.replace(/([A-Z])/g, ' $1').replace('Image','').trim()}:</h4>
+                     <img src={pendingAdminAssetBase64[key] || adminAssetUrlInputs[key] || localAdminConfig[key] || `https://via.placeholder.com/100?text=${key.substring(0,10)}`} alt={`${key} preview`} className="w-24 h-24 object-contain rounded-lg bg-black/40 border border-theme-border/60 mb-2" onError={(e) => (e.currentTarget.src = 'https://via.placeholder.com/100?text=Error')}/>
+                    <div>
+                        <label htmlFor={`asset-url-${key}`} className="block text-sm font-medium text-gray-300 mb-1">Image Source URL or Local Path:</label>
+                        <input 
+                            type="text" 
+                            id={`asset-url-${key}`} 
+                            value={adminAssetUrlInputs[key] || ''} 
+                            onChange={(e) => handleAdminConfigAssetUrlChange(key, e.target.value)}
+                            className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"
+                            placeholder="Enter image URL or local path"
+                        />
+                        <p className="text-xs text-gray-400 mt-1">Enter URL (https://...), local path (e.g., /assets/images/image.png), or upload via AI Gen tab.</p>
+                    </div>
+                </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderDogeEscapeAssets = () => (
+    <div className="space-y-8 max-h-[60vh] overflow-y-auto pr-3">
+      <h3 className="text-xl font-semibold text-theme-accent mb-4">Doge Whale Escape Game Assets</h3>
+      <p className="text-sm text-gray-300 mb-6">Customize the images used in the Doge Whale Escape mini-game. Use the AI Generator, upload files, or provide URLs.</p>
+      {dogeEscapeAssetConfigKeys.map(({ key, displayName, defaultUrl }) => 
+        renderAssetImageEditor(
+          `adminConfig_${key}`, 
+          displayName, 
+          'adminConfigAsset', 
+          key, 
+          (pendingAdminAssetBase64[key] as string | undefined) || (adminAssetUrlInputs[key] as string | undefined) || (localAdminConfig[key] as string | undefined) || defaultUrl
+        )
+      )}
+    </div>
+  );
+
+
+  const renderGameplayMechanics = () => (
+    <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-3">
+      <h3 className="text-xl font-semibold text-theme-accent mb-4">Core Gameplay Mechanics</h3>
+      <div className="flex items-center justify-between p-4 bg-theme-dark/60 rounded-lg"><label htmlFor="playerAutoFire" className="text-base font-medium text-gray-200">Player Auto-Fire (for relevant weapons):</label><input type="checkbox" id="playerAutoFire" name="playerAutoFire" checked={localAdminConfig.playerAutoFire} onChange={handleInputChange} className="form-checkbox h-6 w-6 text-pink-600 bg-gray-700 border-gray-600 rounded focus:ring-pink-500"/></div>
+      <div className="flex items-center justify-between p-4 bg-theme-dark/60 rounded-lg"><label htmlFor="playerAutoTargets" className="text-base font-medium text-gray-200">Player Aim Assist (auto-targets nearest enemy):</label><input type="checkbox" id="playerAutoTargets" name="playerAutoTargets" checked={localAdminConfig.playerAutoTargets || false} onChange={handleInputChange} className="form-checkbox h-6 w-6 text-pink-600 bg-gray-700 border-gray-600 rounded focus:ring-pink-500"/></div>
+      <div className="flex items-center justify-between p-4 bg-theme-dark/60 rounded-lg"><label htmlFor="enemiesAutoTarget" className="text-base font-medium text-gray-200">Enemies Auto-Target Player:</label><input type="checkbox" id="enemiesAutoTarget" name="enemiesAutoTarget" checked={localAdminConfig.enemiesAutoTarget} onChange={handleInputChange} className="form-checkbox h-6 w-6 text-pink-600 bg-gray-700 border-gray-600 rounded focus:ring-pink-500"/></div>
+      <div className="p-4 bg-theme-dark/60 rounded-lg">
+        <label htmlFor="enemyFireCooldownMs" className="block text-base font-medium text-gray-200 mb-1.5">Enemy Fire Cooldown (ms):</label>
+        <input type="number" id="enemyFireCooldownMs" name="enemyFireCooldownMs" value={localAdminConfig.enemyFireCooldownMs} onChange={handleInputChange} step="100" min="100" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+        <p className="text-sm text-gray-400 mt-1.5">Default: 2200ms. Lower is faster.</p>
+      </div>
+
+      <h3 className="text-xl font-semibold text-theme-accent mt-6 mb-4">Red Arrow Defense System</h3>
+       <div className="flex items-center justify-between p-4 bg-theme-dark/60 rounded-lg"><label htmlFor="redArrowActive" className="text-base font-medium text-gray-200">Enable Red Arrow System (for Guardian Whale):</label><input type="checkbox" id="redArrowActive" name="redArrowActive" checked={localAdminConfig.redArrowActive} onChange={handleInputChange} className="form-checkbox h-6 w-6 text-pink-600 bg-gray-700 border-gray-600 rounded focus:ring-pink-500"/></div>
+      <div className="p-4 bg-theme-dark/60 rounded-lg">
+        <label htmlFor="redArrowCooldownMs" className="block text-base font-medium text-gray-200 mb-1.5">Red Arrow Cooldown (ms per shot):</label>
+        <input type="number" id="redArrowCooldownMs" name="redArrowCooldownMs" value={localAdminConfig.redArrowCooldownMs} onChange={handleInputChange} step="50" min="50" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+        <p className="text-sm text-gray-400 mt-1.5">Default: {COOLDOWN_RED_ARROW_DEFENSE}ms (2 shots per second).</p>
+      </div>
+       <div className="p-4 bg-theme-dark/60 rounded-lg">
+        <label htmlFor="redArrowShotCount" className="block text-base font-medium text-gray-200 mb-1.5">Red Arrows Fired Per Burst:</label>
+        <input type="number" id="redArrowShotCount" name="redArrowShotCount" value={localAdminConfig.redArrowShotCount || RED_ARROW_DEFAULT_SHOT_COUNT} onChange={handleInputChange} step="1" min="1" max="10" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+        <p className="text-sm text-gray-400 mt-1.5">Default: {RED_ARROW_DEFAULT_SHOT_COUNT}. Number of arrows fired at once by Guardian Whale.</p>
+      </div>
+      <div className="p-4 bg-theme-dark/60 rounded-lg">
+        <label htmlFor="redArrowProjectileSpeed" className="block text-base font-medium text-gray-200 mb-1.5">Red Arrow Projectile Speed:</label>
+        <input type="number" id="redArrowProjectileSpeed" name="redArrowProjectileSpeed" value={localAdminConfig.redArrowProjectileSpeed} onChange={handleInputChange} step="0.5" min="1" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+        <p className="text-sm text-gray-400 mt-1.5">Default: {RED_ARROW_PROJECTILE_SPEED}.</p>
+      </div>
+      <div className="p-4 bg-theme-dark/60 rounded-lg">
+        <label htmlFor="redArrowDamage" className="block text-base font-medium text-gray-200 mb-1.5">Red Arrow Damage:</label>
+        <input type="number" id="redArrowDamage" name="redArrowDamage" value={localAdminConfig.redArrowDamage} onChange={handleInputChange} step="10" min="0" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+        <p className="text-sm text-gray-400 mt-1.5">Default: {RED_ARROW_PROJECTILE_DAMAGE} (High damage for intercept/kill effect).</p>
+      </div>
+    </div>
+  );
+
+
+  const renderAiAssetGenerator = () => (
+    <div className="space-y-8 max-h-[60vh] overflow-y-auto pr-3">
+        <div className="p-5 bg-theme-dark/80 rounded-xl shadow-xl mb-6"> 
+            <h4 className="text-lg font-semibold text-theme-accent mb-4">AI Generation Global Suggestions</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div><label htmlFor="aiDimensions" className="block text-sm font-medium text-gray-300 mb-1">Dimensions/Aspect:</label><input type="text" id="aiDimensions" value={aiSuggestionDimensions} onChange={e => setAiSuggestionDimensions(e.target.value)} placeholder="e.g., 512x512, wide, portrait" className="w-full p-2.5 text-base rounded-md bg-theme-dark border-theme-border focus:ring-pink-500 focus:border-pink-500"/></div>
+                <div><label htmlFor="aiDirection" className="block text-sm font-medium text-gray-300 mb-1">Facing Direction:</label><select id="aiDirection" value={aiSuggestionDirection} onChange={e => setAiSuggestionDirection(e.target.value)} className="w-full p-2.5 text-base rounded-md bg-theme-dark border-theme-border focus:ring-pink-500 focus:border-pink-500"><option value="any">Any</option><option value="facing right">Facing Right</option><option value="facing left">Facing Left</option><option value="front view">Front View</option><option value="side view">Side View</option></select></div>
+                <div><label htmlFor="aiStyle" className="block text-sm font-medium text-gray-300 mb-1">Art Style:</label><select id="aiStyle" value={aiSuggestionStyle} onChange={e => setAiSuggestionStyle(e.target.value)} className="w-full p-2.5 text-base rounded-md bg-theme-dark border-theme-border focus:ring-pink-500 focus:border-pink-500"><option value="any">Any</option><option value="3D render">3D Render</option><option value="photorealistic">Photorealistic</option><option value="cartoon">Cartoon</option><option value="pixel art">Pixel Art</option><option value="epic fantasy">Epic Fantasy</option><option value="sci-fi">Sci-Fi</option><option value="watercolor">Watercolor</option><option value="abstract">Abstract</option></select></div>
+                <div><label htmlFor="aiBackground" className="block text-sm font-medium text-gray-300 mb-1">Background Type:</label><select id="aiBackground" value={aiSuggestionBackground} onChange={e => setAiSuggestionBackground(e.target.value)} className="w-full p-2.5 text-base rounded-md bg-theme-dark border-theme-border focus:ring-pink-500 focus:border-pink-500"><option value="any">Any</option><option value="transparent background">Transparent</option><option value="simple color background">Simple Color</option><option value="detailed environment">Detailed Environment</option><option value="nebula">Nebula</option><option value="underwater scene">Underwater Scene</option></select></div>
+            </div>
+             <div className="flex items-center justify-between mt-4 pt-4 border-t border-theme-border/60">
+                <label htmlFor="superAiAgentToggle" className="text-sm font-medium text-gray-200">Super AI Agent (Auto-apply generated images):</label>
+                <input type="checkbox" id="superAiAgentToggle" checked={superAiAgentEnabled} onChange={(e) => setSuperAiAgentEnabled(e.target.checked)} className="form-checkbox h-5 w-5 text-pink-600"/>
+            </div>
+        </div>
+
+      <h3 className="text-xl font-semibold text-theme-accent mt-6 mb-4">Generate & Manage Asset Images</h3>
+      <div className="p-4 bg-black/30 rounded-lg"><h4 className="text-lg font-semibold text-gray-200 mb-3 border-b border-theme-secondary/40 pb-2">NFT Images</h4>{Object.values(runtimeNftDefinitions).map(nft => renderAssetImageEditor(`nft_${nft.id}`, `NFT: ${nft.name}`, 'nft', nft.id, pendingNftImageChanges[nft.id] || nftImageInputs[nft.id] || nft.image ))}</div>
+      <div className="p-4 bg-black/30 rounded-lg"><h4 className="text-lg font-semibold text-gray-200 mb-3 border-b border-theme-secondary/40 pb-2">Character Images</h4>{Object.values(runtimeGameCharacters).map(char => renderAssetImageEditor(`char_${char.id}`, `Character: ${char.name} (${char.type})`, 'character', char.id, (characterAttributeInputs[char.id]?.imageBase64 || characterAttributeInputs[char.id]?.imageURL || char.image) ))}</div>
+      <div className="p-4 bg-black/30 rounded-lg"><h4 className="text-lg font-semibold text-gray-200 mb-3 border-b border-theme-secondary/40 pb-2">Core Game Visuals</h4>
+        {renderAssetImageEditor('adminConfig_gameBackgroundImageUrl', 'Game Background', 'adminConfigAsset', 'gameBackgroundImageUrl', localAdminConfig.gameBackgroundImageUrl)}
+        {renderAssetImageEditor('adminConfig_defaultEnemyImageUrl', 'Default Enemy Fallback', 'adminConfigAsset', 'defaultEnemyImageUrl', localAdminConfig.defaultEnemyImageUrl)}
+        {renderAssetImageEditor('adminConfig_seaTokenImageUrl', 'Sea Token', 'adminConfigAsset', 'seaTokenImageUrl', localAdminConfig.seaTokenImageUrl)}
+        {renderAssetImageEditor('adminConfig_redArrowImageUrl', 'Red Arrow Projectile', 'adminConfigAsset', 'redArrowImageUrl', localAdminConfig.redArrowImageUrl || RED_ARROW_PROJECTILE_IMAGE_URL)}
+      </div>
+      <div className="p-4 bg-black/30 rounded-lg">
+        <h4 className="text-lg font-semibold text-gray-200 mb-3 border-b border-theme-secondary/40 pb-2">Fire Effect Visuals 🔥</h4>
+        {renderAssetImageEditor('adminConfig_flameParticleImageUrl', 'Flame Particle Effect (for Flame Cone)', 'adminConfigAsset', 'flameParticleImageUrl', localAdminConfig.flameParticleImageUrl)}
+        {renderAssetImageEditor('adminConfig_enemyBurningEffectImageUrl', 'Enemy Burning Effect (Overlay/Sprite)', 'adminConfigAsset', 'enemyBurningEffectImageUrl', localAdminConfig.enemyBurningEffectImageUrl)}
+        {renderAssetImageEditor('adminConfig_fireballProjectileImageUrl', 'Fireball Projectile Image', 'adminConfigAsset', 'fireballProjectileImageUrl', localAdminConfig.fireballProjectileImageUrl)}
+      </div>
+      <div className="p-4 bg-black/30 rounded-lg"><h4 className="text-lg font-semibold text-gray-200 mb-3 border-b border-theme-secondary/40 pb-2">Decorative Fish Visuals</h4>
+        {renderAssetImageEditor('adminConfig_decorativeFishGoldenImage', 'Golden Fish', 'adminConfigAsset', 'decorativeFishGoldenImage', localAdminConfig.decorativeFishGoldenImage)}
+        {renderAssetImageEditor('adminConfig_decorativeFishStarImage', 'Star Fish', 'adminConfigAsset', 'decorativeFishStarImage', localAdminConfig.decorativeFishStarImage)}
+        {renderAssetImageEditor('adminConfig_decorativeFishBluefinImage', 'Bluefin Fish', 'adminConfigAsset', 'decorativeFishBluefinImage', localAdminConfig.decorativeFishBluefinImage)}
+      </div>
+       <div className="p-4 bg-black/30 rounded-lg"><h4 className="text-lg font-semibold text-gray-200 mb-3 border-b border-theme-secondary/40 pb-2">Bubble Visuals</h4>
+        {renderAssetImageEditor('adminConfig_bubbleSmallImage', 'Small Bubble', 'adminConfigAsset', 'bubbleSmallImage', localAdminConfig.bubbleSmallImage)}
+        {renderAssetImageEditor('adminConfig_bubbleMediumImage', 'Medium Bubble', 'adminConfigAsset', 'bubbleMediumImage', localAdminConfig.bubbleMediumImage)}
+        {renderAssetImageEditor('adminConfig_bubbleLargeImage', 'Large Bubble', 'adminConfigAsset', 'bubbleLargeImage', localAdminConfig.bubbleLargeImage)}
+      </div>
+    </div>
+  );
+
+  const renderSoundManagement = () => (
+    <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-3">
+      <h3 className="text-xl font-semibold text-theme-accent mb-3">Manage Sound Effects</h3>
+      <p className="text-sm text-gray-300 mb-5">Upload custom sound files (MP3, WAV, OGG recommended). Changes are applied with "Save All Global Admin Config Changes".</p>
+      {Object.values(SoundEvent).map(eventKey => {
+        const formattedName = formatSoundEventName(eventKey);
+        const adminSoundKeyPattern = `sound${eventKey.charAt(0).toUpperCase() + eventKey.slice(1).replace(/_([a-z])/g, (g) => g[1].toUpperCase())}Url`;
+        const adminSoundKey = adminSoundKeyPattern as SoundUrlKey;
+        const currentSoundSrc = localAdminConfig[adminSoundKey] as string | undefined;
+        const displaySrc = currentSoundSrc && currentSoundSrc.startsWith('data:audio') 
+          ? 'Custom Sound Loaded' 
+          : (currentSoundSrc && currentSoundSrc.trim() !== '' ? currentSoundSrc.substring(0, 40) + (currentSoundSrc.length > 40 ? "..." : "") : 'No Sound Set');
+        
+        return (
+          <div key={eventKey} className="p-4 bg-theme-dark/60 rounded-lg border border-theme-border/60">
+            <label htmlFor={`soundFile-${eventKey}`} className="block text-base font-medium text-gray-200 mb-1.5">
+              {formattedName}: <span className="text-sm text-gray-400 ml-1.5">({displaySrc})</span>
+            </label>
+            <input 
+              type="file" 
+              id={`soundFile-${eventKey}`} 
+              accept="audio/*" 
+              onChange={(e) => handleSoundFileUpload(eventKey, e.target.files ? e.target.files[0] : null)} 
+              className="w-full text-base text-gray-300 file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:font-semibold file:bg-pink-600 file:text-white hover:file:bg-pink-700"
+            />
+            {currentSoundSrc && currentSoundSrc.startsWith('data:audio') && (
+              <audio controls src={currentSoundSrc} className="mt-2.5 w-full h-12">Preview</audio>
+            )}
+          </div>);
+      })}
+    </div>
+  );
+
+  const renderEffectsAndVisuals = () => (
+    <div className="space-y-8 max-h-[60vh] overflow-y-auto pr-3">
+      <h3 className="text-2xl font-semibold text-theme-accent mb-5">Effects & Visuals Configuration</h3>
+      <div className="p-5 bg-theme-dark/60 rounded-xl border border-theme-border/60 mb-8">
+          <h4 className="text-xl font-medium text-gray-100 mb-3">Blood Particle Effects</h4>
+          <div><label htmlFor="bloodParticleLifespanSeconds" className="block text-base font-medium text-gray-200 mb-1.5">Blood Particle Lifespan (seconds):</label><input type="number" id="bloodParticleLifespanSeconds" name="bloodParticleLifespanSeconds" value={localAdminConfig.bloodParticleLifespanSeconds} onChange={handleInputChange} step="0.1" min="0.1" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/><p className="text-sm text-gray-400 mt-1.5">Default: 4 seconds.</p></div>
+      </div>
+      <div className="p-5 bg-theme-dark/60 rounded-xl border border-theme-border/60 mb-8">
+          <h4 className="text-xl font-medium text-gray-100 mb-4">Rain Effect Settings</h4>
+          <div className="flex items-center justify-between mb-4"><label htmlFor="rainEffectEnabled" className="text-base font-medium text-gray-200">Enable Rain Effect:</label><input type="checkbox" id="rainEffectEnabled" name="rainEffectEnabled" checked={localAdminConfig.rainEffectEnabled} onChange={handleInputChange} className="form-checkbox h-6 w-6 text-pink-600 bg-gray-700 border-gray-600 rounded focus:ring-pink-500"/></div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
+            <div><label htmlFor="rainDropSpeedMin" className="block text-base font-medium text-gray-200 mb-1.5">Raindrop Min Speed:</label><input type="number" id="rainDropSpeedMin" name="rainDropSpeedMin" value={localAdminConfig.rainDropSpeedMin} onChange={handleInputChange} step="0.1" min="0.1" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+            <div><label htmlFor="rainDropSpeedMax" className="block text-base font-medium text-gray-200 mb-1.5">Raindrop Max Speed:</label><input type="number" id="rainDropSpeedMax" name="rainDropSpeedMax" value={localAdminConfig.rainDropSpeedMax} onChange={handleInputChange} step="0.1" min="0.1" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+            <div><label htmlFor="rainDurationSeconds" className="block text-base font-medium text-gray-200 mb-1.5">Rain Duration (seconds):</label><input type="number" id="rainDurationSeconds" name="rainDurationSeconds" value={localAdminConfig.rainDurationSeconds} onChange={handleInputChange} step="1" min="1" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+            <div><label htmlFor="rainIntervalSeconds" className="block text-base font-medium text-gray-200 mb-1.5">Rain Interval (seconds):</label><input type="number" id="rainIntervalSeconds" name="rainIntervalSeconds" value={localAdminConfig.rainIntervalSeconds} onChange={handleInputChange} step="1" min="1" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+            <div className="md:col-span-2"><label htmlFor="rainIntensity" className="block text-base font-medium text-gray-200 mb-1.5">Rain Intensity (number of drops):</label><input type="number" id="rainIntensity" name="rainIntensity" value={localAdminConfig.rainIntensity} onChange={handleInputChange} step="10" min="10" className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/></div>
+          </div>
+          <p className="text-sm text-gray-400 mt-4">Rain cycles on and off based on duration and interval.</p>
+      </div>
+    </div>
+  );
+
+  const renderAdminAiChat = () => (
+    <div className="flex flex-col h-[70vh] max-h-[75vh]">
+        <div className="mb-4 flex items-center gap-4 p-3 bg-theme-dark/60 rounded-lg border border-theme-border/50">
+            <label htmlFor="aiLanguageSelect" className="text-sm font-medium text-gray-200">Response Language:</label>
+            <select
+                id="aiLanguageSelect"
+                value={selectedAiLanguage}
+                onChange={(e) => setSelectedAiLanguage(e.target.value)}
+                className="p-2.5 text-sm rounded-md bg-theme-dark border-theme-border text-white focus:ring-pink-500 focus:border-pink-500 flex-grow"
+                aria-label="Select AI response language"
+            >
+                {languageOptions.map(lang => <option key={lang.code} value={lang.code}>{lang.name}</option>)}
+            </select>
+        </div>
+        <div
+            ref={aiChatLogRef}
+            className="flex-grow overflow-y-auto p-4 rounded-lg border border-theme-border/30 mb-4 text-sm space-y-3 bg-black/20 shadow-inner"
+            aria-live="polite"
+            style={{minHeight: '200px'}}
+        >
+            {aiChatMessages.map((msg) => (
+              <div key={msg.id} className={`chat-message ${msg.sender === 'user' ? 'text-right' : 'text-left'}`}>
+                <span className={`relative inline-block p-3 rounded-xl max-w-[85%] shadow-md ${
+                    msg.sender === 'user' ? 'bg-pink-600 text-white' :
+                    msg.sender === 'ai' ? 'bg-blue-600 text-white' :
+                    'bg-red-600 text-white' // Error
+                }`}>
+                  <span className="block text-xs font-semibold text-gray-300/90 mb-1">
+                    {msg.sender === 'user' ? `You (${msg.lang || 'Unknown'})` : msg.sender === 'ai' ? 'Admin AI' : 'Error'}
+                  </span>
+                  {msg.text.split('\n').map((line, idx) => <p key={idx} className="m-0 leading-relaxed">{line}</p>)}
+                </span>
+              </div>
+            ))}
+            {aiChatMessages.length === 0 && <p className="text-gray-400 text-center italic p-4">Admin AI is ready. Ask about game configuration, best practices, or technical aspects.</p>}
+             {isAiResponding && (
+                 <div className="text-left">
+                    <span className="relative inline-block p-3 rounded-xl max-w-[85%] shadow-md bg-blue-500 text-white">
+                        <span className="block text-xs font-semibold text-gray-200/90 mb-1">Admin AI typing...</span>
+                        <div className="flex items-center space-x-1.5">
+                            <div className="w-2.5 h-2.5 bg-pink-300 rounded-full animate-pulse" style={{animationDelay: '0s'}}></div>
+                            <div className="w-2.5 h-2.5 bg-pink-300 rounded-full animate-pulse" style={{animationDelay: '0.2s'}}></div>
+                            <div className="w-2.5 h-2.5 bg-pink-300 rounded-full animate-pulse" style={{animationDelay: '0.4s'}}></div>
+                        </div>
+                    </span>
+                </div>
+            )}
+        </div>
+        <div className="flex gap-3 items-center mt-auto">
+            <input
+                type="text"
+                value={currentAiQuery}
+                onChange={(e) => setCurrentAiQuery(e.target.value)}
+                onKeyPress={(e) => e.key === 'Enter' && handleSendAiQuery()}
+                placeholder="Ask the Admin AI..."
+                className="flex-grow p-3 text-base rounded-lg bg-theme-dark/70 border-2 border-theme-border/60 text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all placeholder-gray-400"
+                aria-label="Admin AI chat message input"
+                disabled={isAiResponding}
+            />
+            <button
+                onClick={handleSendAiQuery}
+                className="py-3 px-6 bg-pink-600 hover:bg-pink-700 text-white font-semibold rounded-lg shadow-md transition-all duration-200 transform hover:scale-105 disabled:opacity-60 disabled:hover:scale-100"
+                disabled={isAiResponding || currentAiQuery.trim() === ''}
+            >
+                {isAiResponding ? 'Sending...' : 'Send'}
+            </button>
+        </div>
+    </div>
+  );
+
+  const renderKnowledgeBaseManagement = () => (
+    <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-3">
+        <h3 className="text-xl font-semibold text-theme-accent mb-4">Manage AI Knowledge Base</h3>
+        <p className="text-sm text-gray-300 mb-4">Provide predefined topics and answers to enhance the AI's responses in both Player Profile Chat and Admin AI Chat. This helps the AI provide consistent and accurate information.</p>
+        
+        <div className="p-4 bg-theme-dark/60 rounded-lg border border-theme-border/60">
+            <h4 className="text-lg font-medium text-gray-100 mb-3">Add New Reply</h4>
+            <div className="mb-3">
+                <label htmlFor="newReplyTopic" className="block text-sm font-medium text-gray-300 mb-1">Topic/Question:</label>
+                <input type="text" id="newReplyTopic" value={newReplyTopic} onChange={(e) => setNewReplyTopic(e.target.value)} placeholder="e.g., How to get Sea Tokens?" className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+            </div>
+            <div className="mb-3">
+                <label htmlFor="newReplyAnswer" className="block text-sm font-medium text-gray-300 mb-1">Answer/Information:</label>
+                <textarea id="newReplyAnswer" value={newReplyAnswer} onChange={(e) => setNewReplyAnswer(e.target.value)} placeholder="e.g., You can get Sea Tokens by defeating enemies..." rows={3} className="w-full p-2.5 rounded-md bg-theme-dark border border-theme-border text-white text-base focus:ring-pink-500 focus:border-pink-500"/>
+            </div>
+            <button onClick={handleAddReply} className="py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white text-sm font-semibold rounded-md transition-colors">Add Reply</button>
+        </div>
+
+        <div className="mt-6">
+            <h4 className="text-lg font-medium text-gray-100 mb-3">Existing Replies:</h4>
+            {(localAdminConfig.savedReplies && localAdminConfig.savedReplies.length > 0) ? (
+                <ul className="space-y-3">
+                    {localAdminConfig.savedReplies.map(reply => (
+                        <li key={reply.id} className="p-3 bg-theme-dark/40 rounded-md border border-theme-border/40">
+                            <p className="font-semibold text-gray-200 text-sm">Topic: <span className="font-normal text-gray-300">{reply.topic}</span></p>
+                            <p className="font-semibold text-gray-200 text-sm mt-1">Answer: <span className="font-normal text-gray-300">{reply.answer}</span></p>
+                            <button onClick={() => handleDeleteReply(reply.id)} className="mt-2 py-1 px-3 bg-red-600 hover:bg-red-700 text-white text-xs font-semibold rounded-md transition-colors">Delete</button>
+                        </li>
+                    ))}
+                </ul>
+            ) : (
+                <p className="text-gray-400">No saved replies yet.</p>
+            )}
+        </div>
+    </div>
+  );
+
+
+  const tabs: { id: AdminTab, label: string, content: () => React.ReactNode, icon?: string }[] = [
+    { id: 'aiChat', label: 'Admin AI Chat', content: renderAdminAiChat, icon: '💬' },
+    { id: 'knowledgeBase', label: 'Knowledge Base', content: renderKnowledgeBaseManagement, icon: '📚' },
+    { id: 'aiGenerator', label: 'AI Img Gen', content: renderAiAssetGenerator, icon: '🤖' },
+    { id: 'dogeEscapeAssets', label: '🐾 Doge Escape Assets', content: renderDogeEscapeAssets, icon: '🐾' },
+    { id: 'nfts', label: 'NFTs (Legacy)', content: renderNftManagement, icon: '🖼️' },
+    { id: 'characters', label: 'Characters (Legacy)', content: renderCharacterManagement, icon: '👾' },
+    { id: 'assets', label: 'Assets (Legacy)', content: renderGameAssets, icon: '🎨'},
+    { id: 'gameplay', label: 'Gameplay', content: renderGameplayMechanics, icon: '⚙️' },
+    { id: 'sounds', label: 'Sounds', content: renderSoundManagement, icon: '🔊' },
+    { id: 'effectsVisuals', label: 'Visual Effects', content: renderEffectsAndVisuals, icon: '✨' },
+    { id: 'staking', label: 'Staking Rates', content: renderStakingRates, icon: '💰' },
+  ];
+
+  return (
+    <Modal 
+        isOpen={isOpen} 
+        onClose={onClose} 
+        title="🛠️ Doge Whale - Admin Super Panel" 
+        size={isMaximized ? "xl" : "xl"} // Always use XL unless maximized which handles its own sizing
+        isMaximizable={isMaximizable}
+        isMaximized={isMaximized}
+        onToggleMaximize={onToggleMaximize}
+    >
+      <div className="flex flex-col md:flex-row gap-4 md:gap-6">
+        <div className={`md:w-1/4 space-y-2 ${isMaximized ? 'md:w-1/5' : ''}`}>
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`w-full text-left py-2.5 px-4 text-sm font-medium rounded-md transition-colors duration-200 flex items-center gap-2
+                          ${activeTab === tab.id ? 'bg-pink-700 text-white shadow-lg' : 'bg-pink-500 hover:bg-pink-600 text-white'}`}
+              aria-pressed={activeTab === tab.id}
+            >
+              {tab.icon && <span className="text-lg">{tab.icon}</span>}
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className={`md:w-3/4 ${isMaximized ? 'md:w-4/5' : ''} bg-theme-primary/20 p-4 rounded-lg shadow-inner`}>
+          {tabs.find(tab => tab.id === activeTab)?.content()}
+        </div>
+      </div>
+      <div className="mt-6 pt-4 border-t border-theme-border flex flex-col sm:flex-row justify-between items-center gap-3">
+        <button
+          onClick={handleSaveAllAdminChanges}
+          className="w-full sm:w-auto order-1 sm:order-1 py-3 px-6 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded-lg transition-colors duration-200 shadow-md transform hover:scale-102"
+        >
+          Save All Global Admin Config Changes
+        </button>
+        <button
+          onClick={onLogout}
+          className="w-full sm:w-auto order-2 sm:order-2 py-3 px-6 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg transition-colors duration-200 shadow-md transform hover:scale-102"
+        >
+          Logout Admin
+        </button>
+      </div>
+    </Modal>
+  );
+};

App.tsx

@@ -0,0 +1,854 @@
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { GameState, PlayerData, ModalType, NotificationMessage, NFT, Rarity, AdminConfig, NFTCoinEffect, GameCharacter, BreedingResult, WeaponType, SeaTokenItem } from './types.ts';
+import { INITIAL_PLAYER_DATA as ORIGINAL_INITIAL_PLAYER_DATA, NFT_DEFINITIONS as ORIGINAL_NFT_DEFINITIONS, GAME_CHARACTERS as ORIGINAL_GAME_CHARACTERS, LEVEL_XP_THRESHOLDS, NFT_BUBBLE_SPAWN_INTERVAL_MS, NFT_BUBBLE_SPAWN_CHANCE, TOKEN_VALUE_ON_COLLECT, INITIAL_ADMIN_CONFIG, BREEDING_COMBINATIONS, BREEDING_TIME_SECONDS, MAX_STAKING_SLOTS, BASE_STAKING_REWARD_PER_MINUTE, INITIAL_MINING_POWER, MINING_POWER_UPGRADE_COST_BASE, MINING_POWER_UPGRADE_COST_FACTOR, DOGE_PROJECTILE_IMAGE_URL, BONE_PROJECTILE_IMAGE_URL } from './constants.ts';
+import { NftMarketplaceModal } from './components/modals/NftMarketplaceModal.tsx';
+import { WalletModal } from './components/modals/WalletModal.tsx';
+import { PlayerProfileModal } from './components/modals/PlayerProfileModal.tsx';
+import { NftStakingModal } from './components/modals/NftStakingModal.tsx';
+import { AdminLoginModal } from './components/modals/AdminLoginModal.tsx'; // Ensure .tsx extension
+import { AdminPanelModal } from './components/modals/AdminPanelModal.tsx';
+import { WhaleCombatGuideModal } from './components/modals/WhaleCombatGuideModal.tsx';
+import { CombatWhaleGameModal } from './components/modals/combatwhalegame.tsx'; // Asset Loading Modal
+import { SpinToWinModal } from './components/modals/SpinToWinModal.tsx'; // Import the new modal
+import { DogeWhaleEscapeModal } from './components/modals/DogeWhaleEscapeModal.tsx'; // Import Doge Whale Escape Modal
+import { GameCanvas } from './components/GameCanvas.tsx';
+import { NotificationHost } from './components/NotificationToast.tsx';
+import { generateId } from './utils.ts';
+import { playSound, SoundEvent, setGlobalVolume, toggleGlobalMute, setGlobalMute, getGlobalVolume, isGlobalMuted as getGlobalMuteState } from './sounds.ts';
+
+
+const DEFAULT_PLAYER_CHAR_ID_FOR_APP = 'classic_doge_whale';
+
+const createNewInitialPlayerData = (): PlayerData => {
+    const charId = Object.keys(ORIGINAL_GAME_CHARACTERS).includes(DEFAULT_PLAYER_CHAR_ID_FOR_APP)
+      ? DEFAULT_PLAYER_CHAR_ID_FOR_APP
+      : Object.keys(ORIGINAL_GAME_CHARACTERS).find(id => ORIGINAL_GAME_CHARACTERS[id].type === 'player') || 'classic_doge_whale';
+
+    const baseChar = ORIGINAL_GAME_CHARACTERS[charId];
+    return {
+        ...ORIGINAL_INITIAL_PLAYER_DATA,
+        id: generateId(),
+        characterId: charId,
+        health: baseChar?.baseHealth || ORIGINAL_INITIAL_PLAYER_DATA.maxHealth,
+        maxHealth: baseChar?.baseHealth || ORIGINAL_INITIAL_PLAYER_DATA.maxHealth,
+        seaTokens: ORIGINAL_INITIAL_PLAYER_DATA.seaTokens,
+        stakedNftSlots: Array(MAX_STAKING_SLOTS).fill(null),
+        nftMiningPowers: {},
+    };
+};
+
+
+const App: React.FC = () => {
+  const [playerData, setPlayerData] = useState<PlayerData>(() => {
+    const savedPlayerData = localStorage.getItem('playerData');
+    if (savedPlayerData) {
+        try {
+            const parsedData = JSON.parse(savedPlayerData) as PlayerData;
+            if (parsedData &&
+                typeof parsedData.name === 'string' &&
+                typeof parsedData.characterId === 'string' &&
+                typeof parsedData.seaTokens === 'number' &&
+                Array.isArray(parsedData.nftInventory) &&
+                Array.isArray(parsedData.stakedNftSlots) &&
+                typeof parsedData.nftMiningPowers === 'object'
+            ) {
+                 // Ensure stakedNftSlots has the correct length if it was saved with a different MAX_STAKING_SLOTS
+                if (parsedData.stakedNftSlots.length !== MAX_STAKING_SLOTS) {
+                    const newSlots = Array(MAX_STAKING_SLOTS).fill(null);
+                    for (let i = 0; i < Math.min(parsedData.stakedNftSlots.length, MAX_STAKING_SLOTS); i++) {
+                        newSlots[i] = parsedData.stakedNftSlots[i];
+                    }
+                    parsedData.stakedNftSlots = newSlots;
+                }
+                // 'savedReplies' is part of AdminConfig, not PlayerData.
+                // Ensure it's handled during AdminConfig loading.
+                return parsedData;
+            } else {
+                 console.warn("Saved playerData has invalid structure, falling back to default.");
+            }
+        } catch (e) {
+            console.error("Failed to parse saved playerData from localStorage, falling back to default.", e);
+        }
+    }
+    return createNewInitialPlayerData();
+  });
+
+  const [runtimeNftDefinitions, setRuntimeNftDefinitions] = useState<Record<string, NFT>>(() => {
+    const savedNfts = localStorage.getItem('runtimeNftDefinitions');
+    if (savedNfts) {
+        try { return JSON.parse(savedNfts); }
+        catch (e) { console.error("Failed to parse saved NFTs from localStorage", e); }
+    }
+    return JSON.parse(JSON.stringify(ORIGINAL_NFT_DEFINITIONS));
+  });
+
+  const [runtimeGameCharacters, setRuntimeGameCharacters] = useState<Record<string, GameCharacter>>(() => {
+    const savedChars = localStorage.getItem('runtimeGameCharacters');
+    if (savedChars) {
+        try { return JSON.parse(savedChars); }
+        catch (e) { console.error("Failed to parse saved Game Characters from localStorage", e); }
+    }
+    return JSON.parse(JSON.stringify(ORIGINAL_GAME_CHARACTERS));
+  });
+
+  const [adminConfig, setAdminConfig] = useState<AdminConfig>(() => {
+    const savedConfig = localStorage.getItem('adminConfig');
+    if (savedConfig) {
+        try {
+            const parsedConfig = JSON.parse(savedConfig) as AdminConfig;
+            // Ensure savedReplies is an array
+            if (parsedConfig.hasOwnProperty('savedReplies') && !Array.isArray(parsedConfig.savedReplies)) {
+                parsedConfig.savedReplies = [];
+            } else if (!parsedConfig.hasOwnProperty('savedReplies')) {
+                 parsedConfig.savedReplies = [];
+            }
+            return parsedConfig;
+        }
+        catch (e) { console.error("Failed to parse saved Admin Config from localStorage", e); }
+    }
+    const defaultConfig = JSON.parse(JSON.stringify(INITIAL_ADMIN_CONFIG));
+    if (!defaultConfig.savedReplies) {
+        defaultConfig.savedReplies = [];
+    }
+    return defaultConfig;
+  });
+
+  const [masterVolume, setMasterVolumeState] = useState<number>(() => {
+      const savedVolume = localStorage.getItem('masterVolume');
+      if (savedVolume !== null) {
+        const vol = parseFloat(savedVolume);
+        if (!isNaN(vol) && vol >= 0 && vol <= 1) return vol;
+      }
+      return 0.5; // Default volume
+  });
+
+  const [isAppMuted, setIsAppMutedState] = useState<boolean>(() => {
+      const savedMuteState = localStorage.getItem('isAppMuted');
+      if (savedMuteState !== null) return JSON.parse(savedMuteState);
+      return false; // Default not muted
+  });
+
+  // Persist states to localStorage on change
+  useEffect(() => { localStorage.setItem('playerData', JSON.stringify(playerData)); }, [playerData]);
+  useEffect(() => { localStorage.setItem('runtimeNftDefinitions', JSON.stringify(runtimeNftDefinitions)); }, [runtimeNftDefinitions]);
+  useEffect(() => { localStorage.setItem('runtimeGameCharacters', JSON.stringify(runtimeGameCharacters)); }, [runtimeGameCharacters]);
+  useEffect(() => { localStorage.setItem('adminConfig', JSON.stringify(adminConfig)); }, [adminConfig]);
+  useEffect(() => { localStorage.setItem('masterVolume', masterVolume.toString()); }, [masterVolume]);
+  useEffect(() => { localStorage.setItem('isAppMuted', JSON.stringify(isAppMuted)); }, [isAppMuted]);
+
+
+  const [gameState, setGameState] = useState<GameState>(GameState.CharacterSelection);
+  const [activeModal, setActiveModal] = useState<ModalType>(null);
+  const [notifications, setNotifications] = useState<NotificationMessage[]>([]);
+  const [loadedGameAssets, setLoadedGameAssets] = useState<Record<string, HTMLImageElement | null> | null>(null);
+  const [isCanvasMaximized, setIsCanvasMaximized] = useState(false); 
+  const [maximizedModalType, setMaximizedModalType] = useState<ModalType | null>(null);
+
+  const [charNameInput, setCharNameInput] = useState(playerData.name || 'Doge Adventurer');
+  const [selectedCharIdInput, setSelectedCharIdInput] = useState<string>(playerData.characterId || DEFAULT_PLAYER_CHAR_ID_FOR_APP);
+
+  // Admin Authentication State
+  const [isAdminAuthenticated, setIsAdminAuthenticated] = useState<boolean>(false);
+
+
+  useEffect(() => {
+    setGlobalVolume(masterVolume);
+    setGlobalMute(isAppMuted);
+  }, []);
+
+  const handleVolumeChange = (newVolume: number) => {
+    setGlobalVolume(newVolume);
+    setMasterVolumeState(newVolume);
+    if (newVolume > 0 && isAppMuted) {
+        handleMuteToggle();
+    }
+  };
+
+  const handleMuteToggle = () => {
+    const newMuteState = toggleGlobalMute();
+    setIsAppMutedState(newMuteState);
+  };
+
+
+  const showNotification = useCallback((message: string, type: NotificationMessage['type'] = 'info') => {
+    const newNotification: NotificationMessage = { id: generateId(), message, type };
+    setNotifications(prev => [...prev, newNotification]);
+  }, []);
+
+  const dismissNotification = useCallback((id: string) => {
+    setNotifications(prev => prev.filter(n => n.id !== id));
+  }, []);
+
+  const getActiveNftEffects = useCallback((): NFTCoinEffect | null => {
+    if (playerData.equippedNftId) {
+      const activeNFT = runtimeNftDefinitions[playerData.equippedNftId];
+      return activeNFT?.effect || null;
+    }
+    return null;
+  }, [playerData.equippedNftId, runtimeNftDefinitions]);
+
+  const handleStartGame = () => {
+    if (!charNameInput.trim()) {
+      showNotification("Please set your whale's name in your Profile!", "warning");
+      setActiveModal('playerProfile');
+      return;
+    }
+    const selectedCharacter = runtimeGameCharacters[selectedCharIdInput];
+    if (!selectedCharacter) {
+        showNotification("Invalid character selected. Please choose one in your Profile.", "error");
+        setActiveModal('playerProfile');
+        return;
+    }
+
+    const baseHealth = selectedCharacter.baseHealth || runtimeGameCharacters[DEFAULT_PLAYER_CHAR_ID_FOR_APP]?.baseHealth || 100;
+     setPlayerData(prev => ({ // Keep persistent data, reset game-specific stats
+        ...createNewInitialPlayerData(), // Gets new ID, default level/xp/score etc.
+        name: charNameInput, // Use current input name
+        characterId: selectedCharIdInput, // Use current input character
+        whaleColor: prev.whaleColor, // Keep color
+        seaTokens: prev.seaTokens,
+        nftInventory: prev.nftInventory,
+        equippedNftId: prev.equippedNftId,
+        stakedTokens: prev.stakedTokens,
+        stakingStartTime: prev.stakingStartTime,
+        stakedNftSlots: prev.stakedNftSlots,
+        nftMiningPowers: prev.nftMiningPowers,
+        lastNftRewardClaimTime: prev.lastNftRewardClaimTime,
+        totalStakingRewards: prev.totalStakingRewards,
+        maxHealth: baseHealth, // Set based on selected character
+        health: baseHealth,    // Set based on selected character
+    }));
+
+    setActiveModal('combatLoading');
+  };
+
+  const handleGameAssetsLoaded = (loadedAssets: Record<string, HTMLImageElement | null>) => {
+    setLoadedGameAssets(loadedAssets);
+    setActiveModal(null);
+    setGameState(GameState.Playing);
+    // setIsCanvasMaximized(true); // Optionally auto-maximize game on start
+  };
+
+  const handleGameOver = useCallback((finalScore: number) => {
+    showNotification(`Game Over! Your score: ${finalScore}`, 'special');
+    playSound(SoundEvent.GameOver, adminConfig);
+    setGameState(GameState.GameOver);
+    setPlayerData(prev => ({ ...prev, score: finalScore, health: 0 }));
+    setIsCanvasMaximized(false);
+  }, [showNotification, adminConfig]);
+
+  const gainXP = useCallback((amount: number) => {
+    setPlayerData(prev => {
+      let newXP = prev.xp + amount;
+      let newLevel = prev.level;
+      let newMaxXP = prev.maxXP;
+      let newHealth = prev.health;
+      let newMaxHealth = prev.maxHealth;
+
+      while (newXP >= newMaxXP && newLevel < LEVEL_XP_THRESHOLDS.length) {
+        newXP -= newMaxXP;
+        newLevel++;
+        newMaxXP = LEVEL_XP_THRESHOLDS[newLevel - 1] || newMaxXP * 1.5;
+        newMaxHealth += 10;
+        newHealth = newMaxHealth;
+        showNotification(`Level Up! You are now Level ${newLevel}! Max HP increased!`, 'success');
+        playSound(SoundEvent.LevelUp, adminConfig);
+      }
+
+      if (newLevel >= LEVEL_XP_THRESHOLDS.length && newXP >= newMaxXP) {
+        newXP = newMaxXP;
+      }
+
+      return { ...prev, xp: newXP, level: newLevel, maxXP: newMaxXP, health: newHealth, maxHealth: newMaxHealth };
+    });
+  }, [showNotification, adminConfig]);
+
+  const handleGainSeaTokensAndXP = useCallback((tokenValue: number, xpAmount?: number) => {
+    const activeEffects = getActiveNftEffects();
+    const effectiveTokenValue = Math.round(tokenValue * (activeEffects?.coins || 1) * (activeEffects?.allStats || 1));
+    setPlayerData(prev => ({ ...prev, seaTokens: prev.seaTokens + effectiveTokenValue }));
+    if (effectiveTokenValue > 0) {
+        playSound(SoundEvent.TokenCollect, adminConfig);
+    }
+
+    const baseXPGain = xpAmount !== undefined ? xpAmount : tokenValue;
+    const effectiveXPGain = Math.round(baseXPGain * (activeEffects?.xp || 1) * (activeEffects?.allStats || 1));
+    gainXP(effectiveXPGain);
+  }, [gainXP, getActiveNftEffects, adminConfig]);
+
+
+  const handleCollectNftBubble = useCallback((rarity: Rarity) => {
+    playSound(SoundEvent.NftBubbleCollect, adminConfig);
+    const potentialNfts = Object.values(runtimeNftDefinitions).filter(nft => {
+        if (rarity === Rarity.Legendary) return nft.rarity === Rarity.Legendary;
+        if (rarity === Rarity.Rare) return nft.rarity === Rarity.Rare || nft.rarity === Rarity.Legendary;
+        return true;
+    });
+
+    if (potentialNfts.length > 0 && Math.random() < 0.3) {
+        const randomNft = potentialNfts[Math.floor(Math.random() * potentialNfts.length)];
+        if (!playerData.nftInventory.includes(randomNft.id)) {
+            setPlayerData(prev => ({
+                ...prev,
+                nftInventory: [...prev.nftInventory, randomNft.id]
+            }));
+            showNotification(`You found a ${randomNft.rarity} NFT: ${randomNft.name}!`, 'special');
+        } else {
+            const seaTokenBonus = rarity === Rarity.Legendary ? 100 : rarity === Rarity.Rare ? 50 : 10;
+            handleGainSeaTokensAndXP(seaTokenBonus, 0);
+            showNotification(`NFT Bubble: +${seaTokenBonus} Sea Tokens! (Already Owned ${randomNft.name})`, 'success');
+        }
+    } else {
+        const seaTokenBonus = rarity === Rarity.Legendary ? 50 : rarity === Rarity.Rare ? 25 : 5;
+        handleGainSeaTokensAndXP(seaTokenBonus, 0);
+        showNotification(`NFT Bubble: +${seaTokenBonus} Sea Tokens!`, 'info');
+    }
+    gainXP(rarity === Rarity.Legendary ? 100 : rarity === Rarity.Rare ? 50 : 20);
+  }, [playerData.nftInventory, runtimeNftDefinitions, showNotification, gainXP, handleGainSeaTokensAndXP, adminConfig]);
+
+  const handleRestartGame = () => {
+    const selectedCharacter = runtimeGameCharacters[playerData.characterId];
+    const baseHealth = selectedCharacter?.baseHealth || runtimeGameCharacters[DEFAULT_PLAYER_CHAR_ID_FOR_APP]?.baseHealth || 100;
+
+    setPlayerData(prev => ({ // Keep persistent data, reset game-specific stats
+        ...createNewInitialPlayerData(), // Gets new ID, default level/xp/score etc.
+        name: prev.name, // Keep existing name
+        characterId: prev.characterId, // Keep existing character ID
+        whaleColor: prev.whaleColor, // Keep color
+        seaTokens: prev.seaTokens,
+        nftInventory: prev.nftInventory,
+        equippedNftId: prev.equippedNftId,
+        stakedTokens: prev.stakedTokens,
+        stakingStartTime: prev.stakingStartTime,
+        stakedNftSlots: prev.stakedNftSlots,
+        nftMiningPowers: prev.nftMiningPowers,
+        lastNftRewardClaimTime: prev.lastNftRewardClaimTime,
+        totalStakingRewards: prev.totalStakingRewards,
+        maxHealth: baseHealth, // Set based on selected character
+        health: baseHealth,    // Set based on selected character
+    }));
+    setLoadedGameAssets(null);
+    setActiveModal('combatLoading');
+  };
+
+  const handlePurchaseNft = (nftId: string) => {
+    const nft = runtimeNftDefinitions[nftId];
+    if (!nft || nft.price <= 0) {
+      showNotification("This NFT is not for sale or is invalid.", "error");
+      return;
+    }
+    if (playerData.seaTokens >= nft.price && !playerData.nftInventory.includes(nftId)) {
+      setPlayerData(prev => ({
+        ...prev,
+        seaTokens: prev.seaTokens - nft.price,
+        nftInventory: [...prev.nftInventory, nftId]
+      }));
+      playSound(SoundEvent.TokenCollect, adminConfig);
+      showNotification(`Purchased ${nft.name}!`, 'success');
+    } else if (playerData.nftInventory.includes(nftId)) {
+      showNotification(`You already own ${nft.name}.`, 'info');
+    } else {
+      showNotification("Not enough Sea Tokens to purchase.", "error");
+    }
+  };
+
+  const handleEquipNft = (nftId: string) => {
+    if (playerData.stakedNftSlots.includes(nftId)) {
+        showNotification("Cannot equip a staked NFT. Unstake it from its slot first.", "warning");
+        return;
+    }
+    if (playerData.equippedNftId === nftId) {
+        setPlayerData(prev => ({ ...prev, equippedNftId: null }));
+        showNotification(`${runtimeNftDefinitions[nftId].name} unequipped.`, 'info');
+    } else {
+        setPlayerData(prev => ({ ...prev, equippedNftId: nftId }));
+        showNotification(`${runtimeNftDefinitions[nftId].name} equipped!`, 'success');
+    }
+  };
+
+  const handleBreedNfts = (bredNftIdFromMarketplace: string) => {
+    let bredNftDefinition: NFT | null = null;
+
+    if (ORIGINAL_NFT_DEFINITIONS[bredNftIdFromMarketplace]) {
+        bredNftDefinition = { ...ORIGINAL_NFT_DEFINITIONS[bredNftIdFromMarketplace] };
+    } else {
+        let resultFromCombination: BreedingResult | null = null;
+        for (const key in BREEDING_COMBINATIONS) {
+            const potentialResult = BREEDING_COMBINATIONS[key];
+            if (potentialResult.name.toLowerCase().replace(/\s+/g, '_') === bredNftIdFromMarketplace) {
+                resultFromCombination = potentialResult;
+                break;
+            }
+        }
+        if (resultFromCombination) {
+            bredNftDefinition = {
+                id: bredNftIdFromMarketplace,
+                name: resultFromCombination.name,
+                description: resultFromCombination.description,
+                price: 0, // Bred NFTs are not sold by default
+                rarity: resultFromCombination.rarity,
+                image: resultFromCombination.image,
+                effect: resultFromCombination.effect || {},
+            };
+        }
+    }
+
+
+    if (!bredNftDefinition) {
+        const p1Name = playerData.nftInventory.length > 0 ? runtimeNftDefinitions[playerData.nftInventory[0]]?.name.substring(0,3) || "Whale1" : "Whale1";
+        const p2Name = playerData.nftInventory.length > 1 ? runtimeNftDefinitions[playerData.nftInventory[1]]?.name.substring(0,3) || "Whale2" : "Whale2";
+        bredNftDefinition = {
+            id: bredNftIdFromMarketplace,
+            name: `Hybrid ${p1Name}-${p2Name}`,
+            description: "A uniquely bred whale!",
+            price: 0,
+            rarity: Rarity.Rare,
+            image: runtimeNftDefinitions.doge_whale?.image || `${ORIGINAL_NFT_DEFINITIONS.doge_whale.image}/bredhybrid/200/150`, // Fallback
+            effect: {},
+        };
+    }
+
+    // Add to runtime definitions if it doesn't exist, and to player inventory
+    if (!runtimeNftDefinitions[bredNftDefinition.id]) {
+        setRuntimeNftDefinitions(prev => ({...prev, [bredNftDefinition!.id]: bredNftDefinition!}));
+    }
+    setPlayerData(prev => ({
+        ...prev,
+        nftInventory: [...new Set([...prev.nftInventory, bredNftDefinition!.id])]
+    }));
+
+    showNotification(`Successfully bred: ${bredNftDefinition.name}! Added to your collection.`, 'special');
+    gainXP(50); // XP bonus for breeding
+  };
+
+
+  const handleStakeTokens = (amount: number) => {
+    if (amount > 0 && amount <= playerData.seaTokens) {
+      setPlayerData(prev => ({
+        ...prev,
+        seaTokens: prev.seaTokens - amount,
+        stakedTokens: prev.stakedTokens + amount,
+        stakingStartTime: prev.stakedTokens === 0 ? Date.now() : prev.stakingStartTime // Set start time if first stake
+      }));
+      showNotification(`${amount} Sea Tokens staked!`, 'success');
+    } else {
+      showNotification("Invalid stake amount.", "error");
+    }
+  };
+
+  const handleUnstakeTokens = (amount: number) => {
+    if (amount > 0 && amount <= playerData.stakedTokens) {
+      const hoursStaked = playerData.stakingStartTime ? (Date.now() - playerData.stakingStartTime) / (1000 * 60 * 60) : 0;
+      const rewardsForUnstakedAmount = Math.floor(amount * adminConfig.globalTokenStakingRate * hoursStaked);
+      
+      setPlayerData(prev => ({
+        ...prev,
+        seaTokens: prev.seaTokens + amount + rewardsForUnstakedAmount,
+        stakedTokens: prev.stakedTokens - amount,
+        stakingStartTime: (prev.stakedTokens - amount) === 0 ? null : prev.stakingStartTime, // Clear if no tokens left
+        totalStakingRewards: prev.totalStakingRewards + rewardsForUnstakedAmount,
+      }));
+      showNotification(`${amount} Sea Tokens unstaked. Rewards of ${rewardsForUnstakedAmount} Sea Tokens claimed!`, 'success');
+    } else {
+      showNotification("Invalid unstake amount.", 'error');
+    }
+  };
+
+  const handleClaimTokenStakingRewards = () => {
+    if (playerData.stakingStartTime && playerData.stakedTokens > 0) {
+      const hoursStaked = (Date.now() - playerData.stakingStartTime) / (1000 * 60 * 60);
+      const rewards = Math.floor(playerData.stakedTokens * adminConfig.globalTokenStakingRate * hoursStaked);
+      if (rewards > 0) {
+        setPlayerData(prev => ({
+          ...prev,
+          seaTokens: prev.seaTokens + rewards,
+          stakingStartTime: Date.now(), // Reset staking start time for future rewards
+          totalStakingRewards: prev.totalStakingRewards + rewards,
+        }));
+        showNotification(`Claimed ${rewards} Sea Tokens from staking!`, 'success');
+      } else {
+        showNotification("No Sea Token staking rewards to claim yet.", 'info');
+      }
+    } else {
+      showNotification("No Sea Tokens currently staked.", 'info');
+    }
+  };
+  
+  const handleWalletTransaction = (type: 'deposit' | 'withdraw', amount: number) => {
+    // Placeholder for actual wallet integration (e.g., with a backend or crypto wallet)
+    if (type === 'deposit') {
+      showNotification(`${amount} Sea Tokens would be deposited. (Feature Coming Soon!)`, 'info');
+      // setPlayerData(prev => ({ ...prev, seaTokens: prev.seaTokens + amount }));
+    } else {
+       showNotification(`${amount} Sea Tokens would be withdrawn. (Feature Coming Soon!)`, 'info');
+      // if (playerData.seaTokens >= amount) {
+      //   setPlayerData(prev => ({ ...prev, seaTokens: prev.seaTokens - amount }));
+      // } else {
+      //   showNotification("Insufficient Sea Tokens for withdrawal.", "error");
+      // }
+    }
+  };
+
+  const handleStakeNftInSlot = (nftId: string, slotIndex: number) => {
+    setPlayerData(prev => {
+        const newStakedNftSlots = [...prev.stakedNftSlots];
+        const wasEquipped = prev.equippedNftId === nftId;
+        
+        if (newStakedNftSlots[slotIndex] === null) {
+            newStakedNftSlots[slotIndex] = nftId;
+            showNotification(`${runtimeNftDefinitions[nftId].name} staked into Slot ${slotIndex + 1}.`, 'success');
+            const newMiningPowers = { ...prev.nftMiningPowers };
+            if (!newMiningPowers[nftId]) {
+                newMiningPowers[nftId] = INITIAL_MINING_POWER;
+            }
+            return {
+                ...prev,
+                stakedNftSlots: newStakedNftSlots,
+                equippedNftId: wasEquipped ? null : prev.equippedNftId, // Unequip if it was equipped
+                nftMiningPowers: newMiningPowers,
+                lastNftRewardClaimTime: prev.stakedNftSlots.every(s => s === null) ? Date.now() : prev.lastNftRewardClaimTime, // Set if this is the first NFT staked in any slot
+            };
+        } else {
+            showNotification(`Slot ${slotIndex + 1} is already occupied.`, 'warning');
+            return prev;
+        }
+    });
+  };
+
+  const handleUnstakeNftFromSlot = (nftId: string, slotIndex: number) => {
+    setPlayerData(prev => {
+        const newStakedNftSlots = [...prev.stakedNftSlots];
+        if (newStakedNftSlots[slotIndex] === nftId) {
+            // Claim rewards before unstaking this specific NFT
+            let rewardsForThisNft = 0;
+            if (prev.lastNftRewardClaimTime) {
+                const minutesStakedGlobal = (Date.now() - prev.lastNftRewardClaimTime) / (1000 * 60);
+                const miningPower = prev.nftMiningPowers[nftId] || INITIAL_MINING_POWER;
+                rewardsForThisNft = Math.floor(minutesStakedGlobal * BASE_STAKING_REWARD_PER_MINUTE * miningPower);
+            }
+            
+            newStakedNftSlots[slotIndex] = null;
+            showNotification(`${runtimeNftDefinitions[nftId].name} unstaked from Slot ${slotIndex + 1}. Any pending rewards for this NFT were claimed.`, 'success');
+            
+            const allSlotsNowEmpty = newStakedNftSlots.every(s => s === null);
+
+            return {
+                ...prev,
+                seaTokens: prev.seaTokens + (rewardsForThisNft > 0 ? rewardsForThisNft : 0),
+                totalStakingRewards: prev.totalStakingRewards + (rewardsForThisNft > 0 ? rewardsForThisNft : 0),
+                stakedNftSlots: newStakedNftSlots,
+                lastNftRewardClaimTime: allSlotsNowEmpty ? null : Date.now(), // Reset global claim time as rewards for this slot are now claimed
+            };
+        }
+        return prev;
+    });
+  };
+
+  const handleClaimNftSlotStakingRewards = () => {
+    setPlayerData(prev => {
+        if (!prev.lastNftRewardClaimTime || !prev.stakedNftSlots.some(id => id !== null)) {
+            showNotification("No NFTs staked in slots or no rewards to claim.", 'info');
+            return prev;
+        }
+        const now = Date.now();
+        const minutesStakedGlobal = (now - prev.lastNftRewardClaimTime) / (1000 * 60);
+        let totalRewardsFromAllSlots = 0;
+
+        prev.stakedNftSlots.forEach(nftId => {
+            if (nftId) {
+                const miningPower = prev.nftMiningPowers[nftId] || INITIAL_MINING_POWER;
+                totalRewardsFromAllSlots += Math.floor(minutesStakedGlobal * BASE_STAKING_REWARD_PER_MINUTE * miningPower);
+            }
+        });
+
+        if (totalRewardsFromAllSlots > 0) {
+            showNotification(`Claimed ${totalRewardsFromAllSlots.toFixed(0)} Sea Tokens from NFT slot staking!`, 'success');
+            playSound(SoundEvent.TokenCollect, adminConfig);
+            return {
+                ...prev,
+                seaTokens: prev.seaTokens + totalRewardsFromAllSlots,
+                totalStakingRewards: prev.totalStakingRewards + totalRewardsFromAllSlots,
+                lastNftRewardClaimTime: now, // Reset timer for next claim period
+            };
+        } else {
+            showNotification("No NFT slot staking rewards to claim at this moment.", 'info');
+            return prev;
+        }
+    });
+  };
+  
+  const handleUpgradeNftMiningPower = (nftId: string, slotIndex: number) => {
+      setPlayerData(prev => {
+          const currentPower = prev.nftMiningPowers[nftId] || INITIAL_MINING_POWER;
+          const upgradeCost = Math.floor(MINING_POWER_UPGRADE_COST_BASE * (MINING_POWER_UPGRADE_COST_FACTOR ** (currentPower - 1)));
+
+          if (prev.seaTokens < upgradeCost) {
+              showNotification("Not enough Sea Tokens to upgrade Mining Power.", "error");
+              return prev;
+          }
+          if (prev.stakedNftSlots[slotIndex] !== nftId) {
+              showNotification("NFT is not staked in the expected slot for upgrade.", "error");
+              return prev;
+          }
+
+          const newMiningPower = currentPower + 1;
+          showNotification(`${runtimeNftDefinitions[nftId].name}'s Mining Power upgraded to ${newMiningPower}x!`, "success");
+          playSound(SoundEvent.LevelUp, adminConfig); // Reuse level up sound
+
+          return {
+              ...prev,
+              seaTokens: prev.seaTokens - upgradeCost,
+              nftMiningPowers: {
+                  ...prev.nftMiningPowers,
+                  [nftId]: newMiningPower
+              }
+          };
+      });
+  };
+
+  const handleUpdateAdminConfig = (newConfigPartial: Partial<AdminConfig>) => {
+    setAdminConfig(prev => ({ ...prev, ...newConfigPartial }));
+    showNotification("Admin configuration updated. Changes will apply globally.", 'success');
+  };
+  const handleUpdateNftImage = (nftId: string, newImageUrl: string) => {
+    setRuntimeNftDefinitions(prev => {
+        if (prev[nftId]) {
+            return { ...prev, [nftId]: { ...prev[nftId], image: newImageUrl }};
+        }
+        return prev;
+    });
+    showNotification(`Image updated for NFT: ${runtimeNftDefinitions[nftId]?.name || nftId}.`, "success");
+  };
+  const handleUpdateCharacterAttributes = (charId: string, updates: Partial<GameCharacter>) => {
+     setRuntimeGameCharacters(prev => {
+        if (prev[charId]) {
+            const originalChar = prev[charId];
+            const updatedChar = { ...originalChar, ...updates };
+
+            // Specific logic for player base health sync if it changed
+            if (updates.baseHealth !== undefined && charId === playerData.characterId) {
+                 setPlayerData(pData => ({
+                    ...pData,
+                    maxHealth: updatedChar.baseHealth || pData.maxHealth,
+                    health: Math.min(pData.health, updatedChar.baseHealth || pData.maxHealth) // Keep current health if lower, else cap at new max
+                }));
+            }
+            return { ...prev, [charId]: updatedChar };
+        }
+        return prev;
+    });
+    showNotification(`Attributes updated for character: ${runtimeGameCharacters[charId]?.name || charId}.`, "success");
+  };
+
+  const handleToggleModalMaximize = (modalToToggle: ModalType) => {
+    if (maximizedModalType === modalToToggle) {
+        setMaximizedModalType(null); // Restore
+    } else {
+        setMaximizedModalType(modalToToggle); // Maximize
+    }
+  };
+  
+  const handleSpinToWinSeaTokenAdjustment = (amount: number) => {
+    setPlayerData(prev => ({...prev, seaTokens: Math.max(0, prev.seaTokens + amount)}));
+    // Notifications are handled within SpinToWinModal
+  };
+
+  // Admin Panel Access & Logout
+  const handleOpenAdminPanel = () => {
+    if (isAdminAuthenticated) {
+        setActiveModal('adminPanel');
+    } else {
+        setActiveModal('adminLogin');
+    }
+  };
+
+  const handleAdminLoginSuccess = () => {
+    setIsAdminAuthenticated(true);
+    setActiveModal('adminPanel');
+    showNotification("Admin login successful!", "success");
+  };
+
+  const handleAdminLogout = () => {
+    setIsAdminAuthenticated(false);
+    setActiveModal(null);
+    showNotification("Admin logged out.", "info");
+  };
+
+
+  const assetsToLoadForGame = useMemo(() => {
+    const assets: Record<string, string> = {};
+    if (adminConfig.gameBackgroundImageUrl) assets['background'] = adminConfig.gameBackgroundImageUrl;
+    if (adminConfig.seaTokenImageUrl) assets['seaToken'] = adminConfig.seaTokenImageUrl;
+
+    Object.values(runtimeGameCharacters).forEach(char => {
+        if (char.type === 'player' && char.image) assets[`playerChar_${char.id}`] = char.image;
+        else if (char.type === 'enemy' && char.image) assets[`enemyChar_${char.id}`] = char.image;
+    });
+    if (adminConfig.defaultEnemyImageUrl) assets['defaultEnemy'] = adminConfig.defaultEnemyImageUrl;
+    
+    if (adminConfig.redArrowImageUrl) assets['redArrowImage'] = adminConfig.redArrowImageUrl;
+    
+    // Add DogeLauncher projectile images
+    assets['dogeProjectile'] = DOGE_PROJECTILE_IMAGE_URL;
+    assets['boneProjectile'] = BONE_PROJECTILE_IMAGE_URL;
+    
+    // Fire effect assets
+    if (adminConfig.flameParticleImageUrl) assets['flameParticle'] = adminConfig.flameParticleImageUrl;
+    if (adminConfig.enemyBurningEffectImageUrl) assets['enemyBurningEffect'] = adminConfig.enemyBurningEffectImageUrl;
+    if (adminConfig.fireballProjectileImageUrl) assets['fireballProjectile'] = adminConfig.fireballProjectileImageUrl;
+
+
+    return assets;
+  }, [adminConfig, runtimeGameCharacters]);
+
+  const navButtonBaseClasses = "flex items-center w-full text-left py-2.5 px-4 rounded-md font-semibold transition-all duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-opacity-75";
+
+
+  return (
+    <div className={`min-h-screen flex flex-row font-sans transition-all duration-300 ${isCanvasMaximized ? 'bg-black' : 'bg-gradient-to-b from-blue-900 via-indigo-900 to-purple-900'}`}>
+      
+      {/* Left Navigation Panel (only if not maximized) */}
+      {!isCanvasMaximized && (
+        <aside className="w-64 bg-black/50 text-white p-4 shadow-2xl backdrop-blur-lg flex flex-col border-r-2 border-theme-border/30">
+          <h1 className="text-2xl font-bold text-theme-accent font-['Orbitron',_sans-serif] animate-pulseCustom mb-6 text-center">
+            Doge Whale Wars 🛸
+          </h1>
+          <nav className="flex flex-col gap-2.5 flex-grow">
+            <button onClick={() => setActiveModal('nftMarketplace')} className={`${navButtonBaseClasses} bg-pink-600 hover:bg-pink-700 text-white focus:ring-pink-400`}>
+              <i className="fas fa-store mr-3 w-5 text-center"></i>NFT Hub
+            </button>
+            <button onClick={() => setActiveModal('wallet')} className={`${navButtonBaseClasses} bg-pink-600 hover:bg-pink-700 text-white focus:ring-pink-400`}>
+              <i className="fas fa-wallet mr-3 w-5 text-center"></i>Wallet
+            </button>
+            <button onClick={() => setActiveModal('playerProfile')} className={`${navButtonBaseClasses} bg-pink-600 hover:bg-pink-700 text-white focus:ring-pink-400`}>
+              <i className="fas fa-user-astronaut mr-3 w-5 text-center"></i>Profile
+            </button>
+            <button onClick={() => setActiveModal('nftStaking')} className={`${navButtonBaseClasses} bg-pink-600 hover:bg-pink-700 text-white focus:ring-pink-400`}>
+              <i className="fas fa-gem mr-3 w-5 text-center"></i>NFT Vault
+            </button>
+            <button onClick={() => setActiveModal('spinToWin')} className={`${navButtonBaseClasses} bg-yellow-500 hover:bg-yellow-600 text-theme-dark focus:ring-yellow-300 animate-pulseCustom`}>
+              <i className="fas fa-dice mr-3 w-5 text-center"></i>Arcade
+            </button>
+            <button onClick={() => setActiveModal('whaleCombatGuide')} className={`${navButtonBaseClasses} bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-400`}>
+                <i className="fas fa-book-open mr-3 w-5 text-center"></i>Guide
+            </button>
+             <button onClick={() => setActiveModal('dogeWhaleEscape')} className={`${navButtonBaseClasses} bg-teal-500 hover:bg-teal-600 text-white focus:ring-teal-300`}>
+                <i className="fas fa-water mr-3 w-5 text-center"></i>Doge Escape
+            </button>
+            <div className="mt-auto"> {/* Pushes Admin button to the bottom */}
+              <button onClick={handleOpenAdminPanel} className={`${navButtonBaseClasses} bg-red-600 hover:bg-red-700 text-white focus:ring-red-400`}>
+                <i className="fas fa-tools mr-3 w-5 text-center"></i>Admin
+              </button>
+            </div>
+          </nav>
+        </aside>
+      )}
+
+      {/* Main Content Area (takes remaining space, contains game and footer) */}
+      <div className="flex-grow flex flex-col overflow-hidden">
+        {/* Game Content */}
+        <main className={`flex-grow flex items-center justify-center p-4 ${isCanvasMaximized ? 'p-0' : ''} transition-all duration-300`}>
+          {gameState === GameState.CharacterSelection && !isCanvasMaximized && (
+            <div className="text-center bg-theme-dark/70 p-6 sm:p-8 rounded-xl shadow-2xl backdrop-blur-md border-2 border-theme-border max-w-lg w-full animate-fadeIn">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-6 text-theme-accent font-['Orbitron',_sans-serif]">Prepare for Battle!</h2>
+              <div className="mb-6">
+                  <label htmlFor="playerNameInput" className="block text-md font-medium text-gray-200 mb-2">Enter Your Whale's Name:</label>
+                  <input
+                      id="playerNameInput"
+                      type="text"
+                      value={charNameInput}
+                      onChange={(e) => setCharNameInput(e.target.value)}
+                      placeholder="Cosmic Doge Commander"
+                      className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
+                  />
+              </div>
+              <div className="mb-8">
+                  <label htmlFor="playerCharacterSelect" className="block text-md font-medium text-gray-200 mb-2">Select Your Whale Class:</label>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-h-72 overflow-y-auto pr-1">
+                    {Object.values(runtimeGameCharacters).filter(char => char.type === 'player').map(char => (
+                      <button
+                        key={char.id}
+                        onClick={() => setSelectedCharIdInput(char.id)}
+                        className={`p-3 rounded-lg border-2 transition-all duration-200 flex flex-col items-center text-left ${selectedCharIdInput === char.id ? 'bg-pink-700 border-pink-400 ring-2 ring-pink-400' : 'bg-pink-500 border-pink-600 hover:bg-pink-600'}`}
+                        aria-pressed={selectedCharIdInput === char.id}
+                      >
+                        <img src={char.image} alt={char.name} className="w-20 h-20 object-contain rounded-md mb-2 border border-theme-border/50 bg-black/20" />
+                        <span className="font-semibold text-sm text-white">{char.name}</span>
+                        <span className="text-xs text-gray-300 mt-1">HP: {char.baseHealth || 100}</span>
+                        <span className="text-xs text-gray-300 capitalize">Weapon: {char.defaultWeaponType?.replace(/_/g, ' ') || 'Standard'}</span>
+                         {char.canOneHitKill && <span className="text-xs text-yellow-400">Special: One-Hit Kill!</span>}
+                      </button>
+                    ))}
+                  </div>
+              </div>
+              <div className="space-y-3">
+                  <button onClick={handleStartGame} className="w-full py-3 px-6 bg-gradient-to-r from-pink-600 to-purple-700 hover:from-pink-700 hover:to-purple-800 text-white font-bold text-lg rounded-lg transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:scale-105">
+                      <i className="fas fa-rocket mr-2"></i>Launch Expedition!
+                  </button>
+                   <button onClick={() => setActiveModal('whaleCombatGuide')} className="w-full py-2 px-5 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg transition-colors">
+                      <i className="fas fa-book-open mr-2"></i>View Combat Guide
+                  </button>
+              </div>
+            </div>
+          )}
+
+          {gameState === GameState.Playing && loadedGameAssets && (
+              <div className={`game-container-outer ${isCanvasMaximized ? 'w-screen h-screen' : 'max-w-full max-h-full'}`}>
+                  <GameCanvas
+                      playerData={playerData}
+                      onGameOver={handleGameOver}
+                      onGainSeaTokensAndXP={handleGainSeaTokensAndXP}
+                      onCollectNftBubble={handleCollectNftBubble}
+                      activeNftEffects={getActiveNftEffects()}
+                      runtimeGameCharacters={runtimeGameCharacters}
+                      adminConfig={adminConfig}
+                      loadedGameAssets={loadedGameAssets}
+                  />
+              </div>
+          )}
+
+          {gameState === GameState.GameOver && !isCanvasMaximized && (
+            <div className="text-center bg-theme-dark/80 p-6 sm:p-10 rounded-xl shadow-2xl backdrop-blur-md border-2 border-red-500 max-w-md w-full animate-fadeIn">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-red-400 font-['Orbitron',_sans-serif]">Mission Failed!</h2>
+              <p className="text-xl text-gray-200 mb-6">Your final score: <span className="font-bold text-yellow-400">{playerData.score}</span></p>
+              <img src={runtimeGameCharacters[playerData.characterId]?.image || ''} alt="Defeated Whale" className="w-32 h-32 object-contain rounded-full mx-auto mb-6 border-4 border-red-600 opacity-70" />
+              <div className="space-y-3">
+                <button onClick={handleRestartGame} className="w-full py-3 px-6 bg-gradient-to-r from-pink-600 to-purple-700 hover:from-pink-700 hover:to-purple-800 text-white font-bold text-lg rounded-lg transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:scale-105">
+                  <i className="fas fa-redo mr-2"></i>Try Again?
+                </button>
+                <button onClick={() => setGameState(GameState.CharacterSelection)} className="w-full py-2 px-5 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg transition-colors">
+                  <i className="fas fa-bars mr-2"></i>Main Menu
+                </button>
+              </div>
+            </div>
+          )}
+        </main>
+
+        {/* Footer (only if not maximized) */}
+        {!isCanvasMaximized && (
+            <footer className="bg-black/30 text-gray-400 p-2 text-center text-xs shadow-inner">
+              <p>&copy; {new Date().getFullYear()} Doge Whale Wars - MMORPG. All rights reserved. v1.0 Stellar Surge</p>
+            </footer>
+        )}
+      </div>
+
+      {/* Modals */}
+      {activeModal === 'nftMarketplace' && <NftMarketplaceModal isOpen={true} onClose={() => setActiveModal(null)} playerData={playerData} runtimeNftDefinitions={runtimeNftDefinitions} onPurchaseNft={handlePurchaseNft} onEquipNft={handleEquipNft} onBreedNfts={handleBreedNfts} onStakeNft={handleStakeNftInSlot} onUnstakeNft={handleUnstakeNftFromSlot} />}
+      {activeModal === 'wallet' && <WalletModal isOpen={true} onClose={() => setActiveModal(null)} playerData={playerData} adminConfig={adminConfig} onStakeTokens={handleStakeTokens} onUnstakeTokens={handleUnstakeTokens} onClaimRewards={handleClaimTokenStakingRewards} onTransaction={handleWalletTransaction} />}
+      {activeModal === 'playerProfile' && <PlayerProfileModal isOpen={true} onClose={() => setActiveModal(null)} playerData={playerData} runtimeNftDefinitions={runtimeNftDefinitions} adminConfig={adminConfig} onClaimNftStakingRewards={handleClaimNftSlotStakingRewards} initialPlayerName={charNameInput} initialSelectedCharacterId={selectedCharIdInput} onUpdatePlayerName={setCharNameInput} onUpdateSelectedCharacterId={setSelectedCharIdInput} runtimeGameCharacters={runtimeGameCharacters} masterVolume={masterVolume} isAppMuted={isAppMuted} onVolumeChange={handleVolumeChange} onMuteToggle={handleMuteToggle}/>}
+      {activeModal === 'nftStaking' && <NftStakingModal isOpen={true} onClose={() => setActiveModal(null)} playerData={playerData} runtimeNftDefinitions={runtimeNftDefinitions} adminConfig={adminConfig} onStakeNftInSlot={handleStakeNftInSlot} onUnstakeNftFromSlot={handleUnstakeNftFromSlot} onClaimRewards={handleClaimNftSlotStakingRewards} onUpgradeNftMiningPower={handleUpgradeNftMiningPower}/>}
+      {activeModal === 'adminLogin' && <AdminLoginModal isOpen={true} onClose={() => setActiveModal(null)} onLoginSuccess={handleAdminLoginSuccess} />}
+      {activeModal === 'adminPanel' && isAdminAuthenticated && <AdminPanelModal isOpen={true} onClose={() => setActiveModal(null)} adminConfig={adminConfig} runtimeNftDefinitions={runtimeNftDefinitions} runtimeGameCharacters={runtimeGameCharacters} onUpdateAdminConfig={handleUpdateAdminConfig} onUpdateNftImage={handleUpdateNftImage} onUpdateCharacterAttributes={handleUpdateCharacterAttributes} showNotification={showNotification} isMaximizable={true} isMaximized={maximizedModalType === 'adminPanel'} onToggleMaximize={() => handleToggleModalMaximize('adminPanel')} onLogout={handleAdminLogout} />}
+      {activeModal === 'whaleCombatGuide' && <WhaleCombatGuideModal isOpen={true} onClose={() => setActiveModal(null)} />}
+      {activeModal === 'combatLoading' && <CombatWhaleGameModal isOpen={true} onClose={() => setActiveModal(null)} assetsToLoad={assetsToLoadForGame} onLoadingComplete={handleGameAssetsLoaded} playerName={charNameInput} playerCharacterImage={runtimeGameCharacters[selectedCharIdInput]?.image || ''} />}
+      {activeModal === 'spinToWin' && <SpinToWinModal isOpen={true} onClose={() => setActiveModal(null)} playerSeaTokens={playerData.seaTokens} onAdjustSeaTokens={handleSpinToWinSeaTokenAdjustment} showNotification={showNotification} adminConfig={adminConfig} />}
+      {activeModal === 'dogeWhaleEscape' && <DogeWhaleEscapeModal isOpen={true} onClose={() => setActiveModal(null)} adminConfig={adminConfig} />}
+
+
+      {/* Notification Host */}
+      <NotificationHost notifications={notifications} onDismiss={dismissNotification} />
+    </div>
+  );
+};
+export default App;

DogeWhaleEscapeModal.tsx

@@ -0,0 +1,619 @@
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Modal } from '../Modal';
+import { DogeWhaleEscapeLevel, MazeCellType, AdminConfig } from '../../types';
+import { 
+    DOGE_WHALE_ESCAPE_LEVELS, DOGE_ESCAPE_GRID_CELL_SIZE, INITIAL_DOGE_ESCAPE_LIVES, MAX_DOGE_ESCAPE_LIVES,
+    DOGE_WHALE_ESCAPE_PLAYER_IMAGE_URL, DOGE_WHALE_ESCAPE_MINE_IMAGE_URL, DOGE_WHALE_ESCAPE_GOAL_IMAGE_URL,
+    DOGE_WHALE_ESCAPE_WALL_IMAGE_URL,
+    DOGE_WHALE_ESCAPE_BOMB_IMAGE_URL, DOGE_WHALE_ESCAPE_JELLYFISH_IMAGE_URL, DOGE_WHALE_ESCAPE_CROCODILE_IMAGE_URL,
+    DOGE_WHALE_ESCAPE_ALGAE_IMAGE_URL, DOGE_WHALE_ESCAPE_CURRENT_N_IMAGE_URL, DOGE_WHALE_ESCAPE_CURRENT_S_IMAGE_URL,
+    DOGE_WHALE_ESCAPE_CURRENT_E_IMAGE_URL, DOGE_WHALE_ESCAPE_CURRENT_W_IMAGE_URL,
+    DOGE_WHALE_ESCAPE_SNAKE_IMAGE_URL, DOGE_WHALE_ESCAPE_LIFEUP_IMAGE_URL,
+    REVEAL_SNAKE_CHANCE, REVEAL_LIFEUP_CHANCE
+} from '../../constants';
+import { playSound, SoundEvent } from '../../sounds';
+
+interface DogeWhaleEscapeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  adminConfig: AdminConfig; 
+}
+
+type PlayerDirection = 'up' | 'down' | 'left' | 'right';
+
+interface GameImageAssets {
+  whale?: HTMLImageElement;
+  wall?: HTMLImageElement;
+  mine?: HTMLImageElement;
+  goal?: HTMLImageElement;
+  bomb?: HTMLImageElement;
+  jellyfish?: HTMLImageElement;
+  crocodile?: HTMLImageElement;
+  algae?: HTMLImageElement;
+  currentN?: HTMLImageElement;
+  currentS?: HTMLImageElement;
+  currentE?: HTMLImageElement;
+  currentW?: HTMLImageElement;
+  snake?: HTMLImageElement;
+  lifeUp?: HTMLImageElement;
+}
+
+interface FireProjectile {
+    startPos: { x: number; y: number }; // center of whale cell
+    targetCell: { row: number; col: number }; // target cell indices
+    targetPos: { x: number; y: number }; // center of target cell
+    progress: number; // 0 to 1
+    color: string;
+}
+
+interface DestructionParticle {
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+    life: number;
+    color: string;
+    size: number;
+}
+
+const FIRE_PROJECTILE_DURATION_FRAMES = 8; // Animation duration in frames
+const PARTICLE_MAX_LIFE = 20; // Animation duration in frames
+const PARTICLE_COUNT = 10;
+const WHALE_BOB_MAX_OFFSET = 2; // pixels
+const WHALE_BOB_SPEED = 0.15; // pixels per frame
+
+export const DogeWhaleEscapeModal: React.FC<DogeWhaleEscapeModalProps> = ({ isOpen, onClose, adminConfig }) => {
+  const [currentLevelIndex, setCurrentLevelIndex] = useState(0);
+  const [levelData, setLevelData] = useState<DogeWhaleEscapeLevel>(DOGE_WHALE_ESCAPE_LEVELS[currentLevelIndex]);
+  const [currentLayout, setCurrentLayout] = useState<MazeCellType[][]>(levelData.layout);
+  const [whalePos, setWhalePos] = useState<{ row: number; col: number }>(levelData.startPos);
+  const [playerDirection, setPlayerDirection] = useState<PlayerDirection>('right');
+  const [lives, setLives] = useState(INITIAL_DOGE_ESCAPE_LIVES);
+  const [message, setMessage] = useState(levelData.message || 'Use arrow keys to move, Spacebar to fire! Find the Treasure!');
+  const [gameOver, setGameOver] = useState(false);
+  const [gameWon, setGameWon] = useState(false);
+  const [assetsLoaded, setAssetsLoaded] = useState(false);
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const gameAssetsRef = useRef<GameImageAssets>({});
+  const animationFrameIdRef = useRef<number>();
+
+  const [activeFireProjectile, setActiveFireProjectile] = useState<FireProjectile | null>(null);
+  const [destructionParticles, setDestructionParticles] = useState<DestructionParticle[]>([]);
+  const [whaleBobOffset, setWhaleBobOffset] = useState(0);
+  const [whaleBobDirection, setWhaleBobDirection] = useState(1); // 1 for down, -1 for up
+
+
+  const createDestructionParticles = useCallback((row: number, col: number, baseColors: string[]) => {
+    const newParticles: DestructionParticle[] = [];
+    const centerX = col * DOGE_ESCAPE_GRID_CELL_SIZE + DOGE_ESCAPE_GRID_CELL_SIZE / 2;
+    const centerY = row * DOGE_ESCAPE_GRID_CELL_SIZE + DOGE_ESCAPE_GRID_CELL_SIZE / 2;
+
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+        newParticles.push({
+            x: centerX,
+            y: centerY,
+            dx: (Math.random() - 0.5) * 3, // Random horizontal speed
+            dy: (Math.random() - 0.5) * 3, // Random vertical speed
+            life: Math.random() * PARTICLE_MAX_LIFE * 0.5 + PARTICLE_MAX_LIFE * 0.5, // Random life
+            color: baseColors[Math.floor(Math.random() * baseColors.length)],
+            size: Math.random() * 3 + 2,
+        });
+    }
+    setDestructionParticles(prev => [...prev, ...newParticles]);
+  }, []);
+
+
+  const loadAndInitializeLevel: (levelIdxParam: number) => void = useCallback(
+    (levelIdxParam: number) => {
+      const levelToUse = levelIdxParam; 
+      const newLevelData = DOGE_WHALE_ESCAPE_LEVELS[levelToUse % DOGE_WHALE_ESCAPE_LEVELS.length];
+      
+      setLevelData(newLevelData);
+      setCurrentLayout(JSON.parse(JSON.stringify(newLevelData.layout))); 
+      setWhalePos(newLevelData.startPos);
+      setPlayerDirection('right');
+      setLives(INITIAL_DOGE_ESCAPE_LIVES);
+      setMessage(newLevelData.message || `Use arrow keys to move, Spacebar to fire! Find the Treasure! (Level ${newLevelData.id})`);
+      setGameOver(false);
+      setGameWon(false);
+      setActiveFireProjectile(null);
+      setDestructionParticles([]);
+      setWhaleBobOffset(0);
+      setWhaleBobDirection(1);
+    },
+    [] 
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+        loadAndInitializeLevel(currentLevelIndex); 
+        setAssetsLoaded(false);
+
+        const imagesToLoad: { key: keyof GameImageAssets; src: string }[] = [
+            { key: 'whale', src: adminConfig.dogeEscapePlayerImageUrl || DOGE_WHALE_ESCAPE_PLAYER_IMAGE_URL },
+            { key: 'wall', src: adminConfig.dogeEscapeWallImageUrl || DOGE_WHALE_ESCAPE_WALL_IMAGE_URL },
+            { key: 'mine', src: adminConfig.dogeEscapeMineImageUrl || DOGE_WHALE_ESCAPE_MINE_IMAGE_URL },
+            { key: 'goal', src: adminConfig.dogeEscapeGoalImageUrl || DOGE_WHALE_ESCAPE_GOAL_IMAGE_URL },
+            { key: 'bomb', src: adminConfig.dogeEscapeBombImageUrl || DOGE_WHALE_ESCAPE_BOMB_IMAGE_URL },
+            { key: 'jellyfish', src: adminConfig.dogeEscapeJellyfishImageUrl || DOGE_WHALE_ESCAPE_JELLYFISH_IMAGE_URL },
+            { key: 'crocodile', src: adminConfig.dogeEscapeCrocodileImageUrl || DOGE_WHALE_ESCAPE_CROCODILE_IMAGE_URL },
+            { key: 'algae', src: adminConfig.dogeEscapeAlgaeImageUrl || DOGE_WHALE_ESCAPE_ALGAE_IMAGE_URL },
+            { key: 'currentN', src: adminConfig.dogeEscapeCurrentNImageUrl || DOGE_WHALE_ESCAPE_CURRENT_N_IMAGE_URL },
+            { key: 'currentS', src: adminConfig.dogeEscapeCurrentSImageUrl || DOGE_WHALE_ESCAPE_CURRENT_S_IMAGE_URL },
+            { key: 'currentE', src: adminConfig.dogeEscapeCurrentEImageUrl || DOGE_WHALE_ESCAPE_CURRENT_E_IMAGE_URL },
+            { key: 'currentW', src: adminConfig.dogeEscapeCurrentWImageUrl || DOGE_WHALE_ESCAPE_CURRENT_W_IMAGE_URL },
+            { key: 'snake', src: adminConfig.dogeEscapeSnakeImageUrl || DOGE_WHALE_ESCAPE_SNAKE_IMAGE_URL },
+            { key: 'lifeUp', src: adminConfig.dogeEscapeLifeUpImageUrl || DOGE_WHALE_ESCAPE_LIFEUP_IMAGE_URL },
+        ];
+
+        let loadedCount = 0;
+        const totalImages = imagesToLoad.length;
+        const tempAssets: Partial<GameImageAssets> = {};
+
+        imagesToLoad.forEach(imgData => {
+            const img = new Image();
+            img.onload = () => {
+                loadedCount++;
+                tempAssets[imgData.key] = img;
+                if (loadedCount === totalImages) {
+                    gameAssetsRef.current = tempAssets as GameImageAssets;
+                    setAssetsLoaded(true);
+                }
+            };
+            img.onerror = () => { 
+                loadedCount++;
+                console.error(`Failed to load image: ${imgData.src}`);
+                tempAssets[imgData.key] = undefined; 
+                 if (loadedCount === totalImages) {
+                    gameAssetsRef.current = tempAssets as GameImageAssets;
+                    setAssetsLoaded(true); 
+                }
+            };
+            img.src = imgData.src;
+        });
+    } else {
+        setAssetsLoaded(false);
+    }
+  }, [isOpen, currentLevelIndex, loadAndInitializeLevel, adminConfig]);
+
+
+  const drawGame = useCallback(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!ctx || !currentLayout || !assetsLoaded) return;
+
+    const rows = currentLayout.length;
+    const cols = currentLayout[0].length;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.font = `${DOGE_ESCAPE_GRID_CELL_SIZE * 0.6}px sans-serif`;
+
+    // Whale Bobbing Logic
+    let newWhaleBobOffset = whaleBobOffset + whaleBobDirection * WHALE_BOB_SPEED;
+    if (Math.abs(newWhaleBobOffset) > WHALE_BOB_MAX_OFFSET) {
+        newWhaleBobOffset = WHALE_BOB_MAX_OFFSET * whaleBobDirection;
+        setWhaleBobDirection(prev => -prev);
+    }
+    setWhaleBobOffset(newWhaleBobOffset);
+
+
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const cellType = currentLayout[r][c];
+        const x = c * DOGE_ESCAPE_GRID_CELL_SIZE;
+        const y = r * DOGE_ESCAPE_GRID_CELL_SIZE;
+        let imgToDraw: HTMLImageElement | undefined;
+
+        ctx.fillStyle = '#415A77'; 
+        ctx.fillRect(x, y, DOGE_ESCAPE_GRID_CELL_SIZE, DOGE_ESCAPE_GRID_CELL_SIZE);
+
+        switch (cellType) {
+          case MazeCellType.Wall: 
+            imgToDraw = gameAssetsRef.current.wall;
+            if (!imgToDraw) { ctx.fillStyle = '#1B263B'; ctx.fillRect(x, y, DOGE_ESCAPE_GRID_CELL_SIZE, DOGE_ESCAPE_GRID_CELL_SIZE); }
+            break;
+          case MazeCellType.Path: case MazeCellType.Start: break; 
+          case MazeCellType.Mine: imgToDraw = gameAssetsRef.current.mine; if (!imgToDraw) { ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(x + DOGE_ESCAPE_GRID_CELL_SIZE / 2, y + DOGE_ESCAPE_GRID_CELL_SIZE / 2, DOGE_ESCAPE_GRID_CELL_SIZE / 3, 0, Math.PI * 2); ctx.fill(); } break;
+          case MazeCellType.Goal: imgToDraw = gameAssetsRef.current.goal; if (!imgToDraw) { ctx.fillStyle = 'green'; ctx.fillRect(x + 5, y + 5, DOGE_ESCAPE_GRID_CELL_SIZE - 10, DOGE_ESCAPE_GRID_CELL_SIZE - 10); } break;
+          case MazeCellType.Bomb: imgToDraw = gameAssetsRef.current.bomb; if (!imgToDraw) { ctx.fillStyle = 'darkred'; ctx.beginPath(); ctx.arc(x + DOGE_ESCAPE_GRID_CELL_SIZE / 2, y + DOGE_ESCAPE_GRID_CELL_SIZE / 2, DOGE_ESCAPE_GRID_CELL_SIZE / 2.5, 0, Math.PI * 2); ctx.fill(); } break;
+          case MazeCellType.Jellyfish: imgToDraw = gameAssetsRef.current.jellyfish; if (!imgToDraw) { ctx.fillStyle = 'purple'; ctx.fillRect(x + 7, y + 7, DOGE_ESCAPE_GRID_CELL_SIZE - 14, DOGE_ESCAPE_GRID_CELL_SIZE - 14); } break;
+          case MazeCellType.Crocodile: imgToDraw = gameAssetsRef.current.crocodile; if (!imgToDraw) { ctx.fillStyle = 'darkgreen'; ctx.fillRect(x + 3, y + 10, DOGE_ESCAPE_GRID_CELL_SIZE - 6, DOGE_ESCAPE_GRID_CELL_SIZE - 20); } break;
+          case MazeCellType.ToxicAlgae: imgToDraw = gameAssetsRef.current.algae; if (!imgToDraw) { ctx.fillStyle = 'lime'; ctx.globalAlpha = 0.5; ctx.fillRect(x,y,DOGE_ESCAPE_GRID_CELL_SIZE,DOGE_ESCAPE_GRID_CELL_SIZE); ctx.globalAlpha = 1.0;} break;
+          case MazeCellType.CurrentN: imgToDraw = gameAssetsRef.current.currentN; if (!imgToDraw) { ctx.fillStyle = 'cyan'; ctx.fillText('↑', x + 10, y + 20);} break;
+          case MazeCellType.CurrentS: imgToDraw = gameAssetsRef.current.currentS; if (!imgToDraw) { ctx.fillStyle = 'cyan'; ctx.fillText('↓', x + 10, y + 20);} break;
+          case MazeCellType.CurrentE: imgToDraw = gameAssetsRef.current.currentE; if (!imgToDraw) { ctx.fillStyle = 'cyan'; ctx.fillText('→', x + 10, y + 20);} break;
+          case MazeCellType.CurrentW: imgToDraw = gameAssetsRef.current.currentW; if (!imgToDraw) { ctx.fillStyle = 'cyan'; ctx.fillText('←', x + 10, y + 20);} break;
+          case MazeCellType.Snake: imgToDraw = gameAssetsRef.current.snake; if (!imgToDraw) { ctx.fillStyle = 'darkorange'; ctx.fillText('S', x + 10, y + 20); } break;
+          case MazeCellType.LifeUp: imgToDraw = gameAssetsRef.current.lifeUp; if (!imgToDraw) { ctx.fillStyle = 'pink'; ctx.fillText('♥', x + 8, y + 22); } break;
+        }
+        if (imgToDraw) {
+            ctx.drawImage(imgToDraw, x + 2, y + 2, DOGE_ESCAPE_GRID_CELL_SIZE - 4, DOGE_ESCAPE_GRID_CELL_SIZE - 4);
+        }
+      }
+    }
+
+    // Draw Whale with bobbing
+    const whaleDrawY = whalePos.row * DOGE_ESCAPE_GRID_CELL_SIZE + 2 + whaleBobOffset;
+    if (gameAssetsRef.current.whale) {
+      ctx.drawImage(gameAssetsRef.current.whale, whalePos.col * DOGE_ESCAPE_GRID_CELL_SIZE + 2, whaleDrawY, DOGE_ESCAPE_GRID_CELL_SIZE - 4, DOGE_ESCAPE_GRID_CELL_SIZE - 4);
+    } else {
+        ctx.fillStyle = 'yellow';
+        ctx.fillRect(whalePos.col * DOGE_ESCAPE_GRID_CELL_SIZE + 5, whaleDrawY + 3, DOGE_ESCAPE_GRID_CELL_SIZE - 10, DOGE_ESCAPE_GRID_CELL_SIZE - 10);
+    }
+
+    // Draw and update fire projectile
+    if (activeFireProjectile) {
+        const fp = activeFireProjectile;
+        fp.progress += 1 / FIRE_PROJECTILE_DURATION_FRAMES;
+        
+        const currentX = fp.startPos.x + (fp.targetPos.x - fp.startPos.x) * fp.progress;
+        const currentY = fp.startPos.y + (fp.targetPos.y - fp.startPos.y) * fp.progress;
+
+        ctx.fillStyle = fp.color;
+        ctx.fillRect(currentX - 3, currentY - 3, 6, 6); // Small square projectile
+
+        if (fp.progress >= 1) {
+            // Projectile reached target, now apply effect
+            const {row, col} = fp.targetCell;
+            const targetCellType = currentLayout[row][col];
+            const newLayout = currentLayout.map(r => [...r]);
+            let particleColors = ['#808080']; // Default grey
+
+            if (targetCellType === MazeCellType.Wall) {
+                playSound(SoundEvent.EnemyKill, adminConfig); // Use enemy kill for block break
+                particleColors = ['#8B4513', '#A9A9A9', '#696969']; // Brown/Grey
+                const rand = Math.random();
+                if (rand < REVEAL_SNAKE_CHANCE) {
+                    newLayout[row][col] = MazeCellType.Snake;
+                    setMessage("A snake was hiding in the wall!");
+                } else if (rand < REVEAL_SNAKE_CHANCE + REVEAL_LIFEUP_CHANCE) {
+                    newLayout[row][col] = MazeCellType.LifeUp;
+                    setMessage("You found a Life-Up Heart in the wall!");
+                } else {
+                    newLayout[row][col] = MazeCellType.Path;
+                    setMessage("Wall destroyed!");
+                }
+                setCurrentLayout(newLayout);
+                createDestructionParticles(row, col, particleColors);
+            } else if (targetCellType === MazeCellType.Snake) {
+                playSound(SoundEvent.EnemyKill, adminConfig);
+                particleColors = ['#228B22', '#32CD32', '#006400']; // Greens
+                newLayout[row][col] = MazeCellType.Path;
+                setCurrentLayout(newLayout);
+                setMessage("Snake neutralized!");
+                createDestructionParticles(row, col, particleColors);
+            } else if (targetCellType === MazeCellType.LifeUp) {
+                playSound(SoundEvent.EnemyKill, adminConfig); // Firing at LifeUp destroys it
+                particleColors = ['#FFC0CB', '#FF69B4', '#DB7093']; // Pinks
+                newLayout[row][col] = MazeCellType.Path; 
+                setCurrentLayout(newLayout);
+                setMessage("Life-Up Heart destroyed by fire!");
+                createDestructionParticles(row, col, particleColors);
+            }
+            setActiveFireProjectile(null);
+        } else {
+            setActiveFireProjectile(fp); // Update state with new progress
+        }
+    }
+
+    // Draw and update destruction particles
+    setDestructionParticles(prevParticles => {
+        const updatedParticles = prevParticles.map(p => ({
+            ...p,
+            x: p.x + p.dx,
+            y: p.y + p.dy,
+            life: p.life - 1,
+        })).filter(p => p.life > 0);
+
+        updatedParticles.forEach(p => {
+            ctx.fillStyle = p.color;
+            ctx.globalAlpha = p.life / PARTICLE_MAX_LIFE; // Fade out
+            ctx.fillRect(p.x - p.size / 2, p.y - p.size / 2, p.size, p.size);
+        });
+        ctx.globalAlpha = 1.0; // Reset alpha
+        return updatedParticles;
+    });
+
+  }, [currentLayout, whalePos, assetsLoaded, activeFireProjectile, adminConfig, createDestructionParticles, whaleBobOffset, whaleBobDirection]);
+
+  useEffect(() => {
+    if (isOpen && assetsLoaded && !gameOver && !gameWon) {
+        const gameLoop = () => {
+            drawGame();
+            animationFrameIdRef.current = requestAnimationFrame(gameLoop);
+        };
+        animationFrameIdRef.current = requestAnimationFrame(gameLoop);
+    } else if (animationFrameIdRef.current) {
+         cancelAnimationFrame(animationFrameIdRef.current);
+    }
+    return () => {
+        if (animationFrameIdRef.current) {
+            cancelAnimationFrame(animationFrameIdRef.current);
+        }
+    };
+  }, [isOpen, drawGame, assetsLoaded, gameOver, gameWon]);
+
+  const processMove = useCallback((targetRow: number, targetCol: number) => {
+    if (activeFireProjectile) return; // Don't process move if projectile is active
+
+    const targetCell = currentLayout[targetRow][targetCol];
+    let finalRow = targetRow;
+    let finalCol = targetCol;
+    let hitHazard = false;
+    let reachedGoal = false;
+    let gainedLife = false;
+    let tempMessage = "Keep going...";
+    let particleColors: string[] = [];
+
+    switch (targetCell) {
+        case MazeCellType.Mine:
+        case MazeCellType.Bomb:
+        case MazeCellType.Jellyfish:
+        case MazeCellType.Crocodile:
+        case MazeCellType.ToxicAlgae:
+        case MazeCellType.Snake:
+            hitHazard = true;
+            playSound(SoundEvent.EnemyKill, adminConfig);
+            particleColors = ['#FF0000', '#FF4500', '#DC143C']; // Reds for hazard hit
+            createDestructionParticles(targetRow, targetCol, particleColors);
+            break;
+        case MazeCellType.Goal:
+            if (levelData.requireAllSnakesNeutralized) {
+                const snakesRemaining = currentLayout.flat().some(cell => cell === MazeCellType.Snake);
+                if (snakesRemaining) {
+                    setMessage("The exit is sealed! Neutralize all lurking snakes to open the path.");
+                    // Keep player on Goal tile but don't win yet
+                    setWhalePos({ row: targetRow, col: targetCol }); 
+                    return; // Exit early, don't process as win
+                }
+            }
+            reachedGoal = true;
+            playSound(SoundEvent.LevelUp, adminConfig);
+             particleColors = ['#FFD700', '#FFFF00', '#ADFF2F']; // Golds/Yellows for goal
+            createDestructionParticles(targetRow, targetCol, particleColors);
+            break;
+        case MazeCellType.LifeUp:
+            gainedLife = true;
+            playSound(SoundEvent.TokenCollect, adminConfig);
+            particleColors = ['#FFD700', '#FFFFE0', '#FFFACD']; // Gold/Yellow for life up collect
+            createDestructionParticles(finalRow, finalCol, particleColors); // Particles at collection point
+            break;
+        case MazeCellType.CurrentN:
+        case MazeCellType.CurrentS:
+        case MazeCellType.CurrentE:
+        case MazeCellType.CurrentW:
+            playSound(SoundEvent.TokenCollect, adminConfig); 
+            let pushedRow = targetRow;
+            let pushedCol = targetCol;
+            if (targetCell === MazeCellType.CurrentN) pushedRow--;
+            else if (targetCell === MazeCellType.CurrentS) pushedRow++;
+            else if (targetCell === MazeCellType.CurrentE) pushedCol++;
+            else if (targetCell === MazeCellType.CurrentW) pushedCol--;
+
+            if (
+                pushedRow >= 0 && pushedRow < currentLayout.length &&
+                pushedCol >= 0 && pushedCol < currentLayout[0].length &&
+                currentLayout[pushedRow][pushedCol] !== MazeCellType.Wall
+            ) {
+                finalRow = pushedRow;
+                finalCol = pushedCol;
+                tempMessage = "Woosh! Carried by a current!";
+                createDestructionParticles(targetRow, targetCol, ['#00FFFF', '#AFEEEE', '#7FFFD4']); // Cyan for current
+                
+                const cellAfterCurrent = currentLayout[finalRow][finalCol];
+                if ([MazeCellType.Mine, MazeCellType.Bomb, MazeCellType.Jellyfish, MazeCellType.Crocodile, MazeCellType.ToxicAlgae, MazeCellType.Snake].includes(cellAfterCurrent)) {
+                    hitHazard = true; 
+                    playSound(SoundEvent.EnemyKill, adminConfig);
+                    createDestructionParticles(finalRow, finalCol, ['#FF0000', '#FF4500', '#DC143C']);
+                } else if (cellAfterCurrent === MazeCellType.Goal) {
+                    if (levelData.requireAllSnakesNeutralized) {
+                        const snakesRemaining = currentLayout.flat().some(cell => cell === MazeCellType.Snake);
+                        if (snakesRemaining) {
+                            setMessage("The exit is sealed! Neutralize all lurking snakes to open the path.");
+                            setWhalePos({ row: finalRow, col: finalCol }); // Stay on goal
+                            return; 
+                        }
+                    }
+                    reachedGoal = true; 
+                    playSound(SoundEvent.LevelUp, adminConfig);
+                     createDestructionParticles(finalRow, finalCol, ['#FFD700', '#FFFF00', '#ADFF2F']);
+                } else if (cellAfterCurrent === MazeCellType.LifeUp) {
+                    gainedLife = true;
+                    playSound(SoundEvent.TokenCollect, adminConfig);
+                    createDestructionParticles(finalRow, finalCol, ['#FFD700', '#FFFFE0', '#FFFACD']);
+                }
+            } else {
+                tempMessage = "Current pushed into a wall! Safe for now.";
+            }
+            break;
+        default: 
+            // playSound for path move if desired
+            break;
+    }
+    
+    setWhalePos({ row: finalRow, col: finalCol });
+
+    if (hitHazard) {
+        const newLives = lives - 1;
+        setLives(newLives);
+        if (newLives <= 0) {
+            setMessage('Game Over! Out of lives.');
+            setGameOver(true);
+            playSound(SoundEvent.GameOver, adminConfig);
+        } else {
+            setMessage(`Ouch! Hit a hazard! ${newLives} live(s) left. Back to start!`);
+            setWhalePos(levelData.startPos);
+        }
+    } else if (reachedGoal) {
+        setMessage(`Level ${levelData.id} Complete! Well Done!`);
+        setGameWon(true);
+    } else if (gainedLife) {
+        const newLives = Math.min(lives + 1, MAX_DOGE_ESCAPE_LIVES);
+        setLives(newLives);
+        setMessage(`Life Up! You have ${newLives} lives.`);
+        const newLayout = currentLayout.map(row => [...row]);
+        newLayout[finalRow][finalCol] = MazeCellType.Path;
+        setCurrentLayout(newLayout);
+    } else {
+        setMessage(tempMessage);
+    }
+  }, [lives, adminConfig, currentLayout, levelData, activeFireProjectile, createDestructionParticles]);
+
+  const handleFire = useCallback(() => {
+    if (gameOver || gameWon || !currentLayout || !assetsLoaded || activeFireProjectile) return;
+
+    let targetRow = whalePos.row;
+    let targetCol = whalePos.col;
+
+    switch (playerDirection) {
+        case 'up': targetRow--; break;
+        case 'down': targetRow++; break;
+        case 'left': targetCol--; break;
+        case 'right': targetCol++; break;
+    }
+
+    if (
+        targetRow >= 0 && targetRow < currentLayout.length &&
+        targetCol >= 0 && targetCol < currentLayout[0].length
+    ) {
+        const targetCellType = currentLayout[targetRow][targetCol];
+        if (targetCellType === MazeCellType.Wall || targetCellType === MazeCellType.Snake || targetCellType === MazeCellType.LifeUp) {
+            playSound(SoundEvent.Fire, adminConfig);
+            setActiveFireProjectile({
+                startPos: { 
+                    x: whalePos.col * DOGE_ESCAPE_GRID_CELL_SIZE + DOGE_ESCAPE_GRID_CELL_SIZE / 2,
+                    y: whalePos.row * DOGE_ESCAPE_GRID_CELL_SIZE + DOGE_ESCAPE_GRID_CELL_SIZE / 2 + whaleBobOffset,
+                },
+                targetCell: { row: targetRow, col: targetCol },
+                targetPos: {
+                    x: targetCol * DOGE_ESCAPE_GRID_CELL_SIZE + DOGE_ESCAPE_GRID_CELL_SIZE / 2,
+                    y: targetRow * DOGE_ESCAPE_GRID_CELL_SIZE + DOGE_ESCAPE_GRID_CELL_SIZE / 2,
+                },
+                progress: 0,
+                color: '#FFA500', // Orange color for fireball
+            });
+            // Actual layout change and particle creation will happen in drawGame when projectile 'hits'
+        } else {
+            setMessage("Fire had no effect on that.");
+        }
+    } else {
+        setMessage("Cannot fire out of bounds.");
+    }
+  }, [gameOver, gameWon, currentLayout, assetsLoaded, whalePos, playerDirection, adminConfig, activeFireProjectile, whaleBobOffset]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (gameOver || gameWon || !currentLayout || !assetsLoaded || activeFireProjectile) return;
+
+    let nextRow = whalePos.row;
+    let nextCol = whalePos.col;
+    let newDirection = playerDirection;
+
+    if (e.key === ' ') {
+        e.preventDefault();
+        handleFire();
+        return;
+    }
+
+    switch (e.key) {
+      case 'ArrowUp': case 'w': nextRow--; newDirection = 'up'; break;
+      case 'ArrowDown': case 's': nextRow++; newDirection = 'down'; break;
+      case 'ArrowLeft': case 'a': nextCol--; newDirection = 'left'; break;
+      case 'ArrowRight': case 'd': nextCol++; newDirection = 'right'; break;
+      default: return;
+    }
+    e.preventDefault();
+    setPlayerDirection(newDirection);
+
+    if (
+      nextRow >= 0 && nextRow < currentLayout.length &&
+      nextCol >= 0 && nextCol < currentLayout[0].length
+    ) {
+      const targetCellType = currentLayout[nextRow][nextCol];
+      if (targetCellType === MazeCellType.Wall) {
+        setMessage('Bonk! Hit a wall.');
+        createDestructionParticles(nextRow, nextCol, ['#D3D3D3', '#808080']); // Wall bonk particles
+        return;
+      }
+      processMove(nextRow, nextCol);
+    }
+  }, [whalePos, gameOver, gameWon, currentLayout, assetsLoaded, processMove, playerDirection, handleFire, activeFireProjectile, createDestructionParticles]); 
+
+  useEffect(() => {
+    if (isOpen && assetsLoaded) { 
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, assetsLoaded, handleKeyDown]); 
+
+  const handleRestart = () => {
+    loadAndInitializeLevel(currentLevelIndex);
+  };
+
+  const handleNextLevel = () => {
+    const nextLevelIdx = (currentLevelIndex + 1); 
+    if (nextLevelIdx >= DOGE_WHALE_ESCAPE_LEVELS.length) {
+        setMessage("Congratulations! You've completed all levels!");
+        setGameWon(true); 
+        setGameOver(false); 
+        setCurrentLevelIndex(DOGE_WHALE_ESCAPE_LEVELS.length -1); 
+    } else {
+        setCurrentLevelIndex(nextLevelIdx);
+        // loadAndInitializeLevel will be called by the useEffect watching currentLevelIndex
+    }
+  };
+  
+  const canvasWidth = currentLayout ? currentLayout[0].length * DOGE_ESCAPE_GRID_CELL_SIZE : 300;
+  const canvasHeight = currentLayout ? currentLayout.length * DOGE_ESCAPE_GRID_CELL_SIZE : 200;
+
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={`Doge Whale Escape - Level ${levelData?.id}: ${levelData?.name || ''}`} size="xl">
+      <div className="flex flex-col items-center space-y-4 text-theme-text">
+        <div className="flex justify-between w-full max-w-lg text-lg">
+          <span>Lives: <span className="font-bold text-theme-warning">{lives} ❤️</span></span>
+          <span>Level: <span className="font-bold text-theme-accent">{levelData?.id || 1} / {DOGE_WHALE_ESCAPE_LEVELS.length}</span></span>
+        </div>
+
+        {!assetsLoaded && 
+            <div className="text-center text-yellow-400 py-10">
+                <div className="w-8 h-8 border-4 border-yellow-400 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
+                Loading Game Assets...
+            </div>
+        }
+        
+        <canvas 
+            ref={canvasRef} 
+            width={canvasWidth} 
+            height={canvasHeight} 
+            className={`border-2 border-theme-border rounded-lg shadow-lg ${!assetsLoaded ? 'hidden' : ''}`}
+            aria-label="Doge Whale Escape game board"
+        />
+
+        <p className="text-center min-h-[2em]">{message}</p>
+
+        {(gameOver || gameWon) && (
+          <div className="mt-4 space-x-4">
+            <button onClick={handleRestart} className="py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg">
+              Restart Level
+            </button>
+            {gameWon && currentLevelIndex < DOGE_WHALE_ESCAPE_LEVELS.length -1 && (
+              <button onClick={handleNextLevel} className="py-2 px-4 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg">
+                Next Level
+              </button>
+            )}
+            {gameWon && currentLevelIndex >= DOGE_WHALE_ESCAPE_LEVELS.length -1 && (
+                <p className="text-green-400 font-bold">ALL LEVELS CLEARED!</p>
+            )}
+          </div>
+        )}
+        <button onClick={onClose} className="mt-2 py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded-lg">
+          Close Game
+        </button>
+      </div>
+    </Modal>
+  );
+};

GameCanvas.tsx

@@ -0,0 +1,1303 @@
+
+import React, { useRef, useEffect, useCallback, useState } from 'react';
+import {
+    PlayerData, FloatingText, NftBubbleItem, AdminConfig, WeaponType, SeaTokenItem,
+    Projectile as GlobalProjectileType, FishMinion, ExplosionEffect,
+    GameCharacter, NFT, EnemyEffectState
+} from '../types.ts';
+import { generateId } from '../utils.ts';
+import {
+    PLAYER_SIZE, PLAYER_SPEED, ENEMY_SIZE, MAX_ENEMIES, TOKEN_VALUE_ON_COLLECT, FLOATING_TEXT_DURATION_MS,
+    STANDARD_PROJECTILE_SPEED, HEAVY_PROJECTILE_SPEED, ROCKET_PROJECTILE_SPEED, LASER_PROJECTILE_SPEED, MISSILE_SPEED,
+    SWORD_THROW_SPEED, SWORD_PROJECTILE_WIDTH, SWORD_PROJECTILE_HEIGHT,
+    AUTO_ROCKET_COOLDOWN_MS, AUTO_ROCKET_RANGE, AUTO_ROCKET_SPEED,
+    ENEMY_PROJECTILE_SPEED, ENEMY_PROJECTILE_SIZE, ENEMY_BASE_HEALTH,
+    COOLDOWN_STANDARD_BULLET, COOLDOWN_HEAVY_BULLET, COOLDOWN_ROCKET, COOLDOWN_LASER, COOLDOWN_SWORD_THROW, COOLDOWN_AUTO_TARGET_MISSILE,
+    BOMB_PROJECTILE_WIDTH, BOMB_PROJECTILE_HEIGHT, BOMB_PROJECTILE_INITIAL_SPEED_Y, BOMB_PROJECTILE_SPEED_X_FACTOR, BOMB_GRAVITY, BOMB_FUSE_MS, BOMB_EXPLOSION_RADIUS, BOMB_EXPLOSION_DURATION_MS, BOMB_DAMAGE,
+    FISH_MINION_SIZE, FISH_MINION_MAX_HEALTH, FISH_MINION_ATTACK_RANGE, FISH_MINION_PROJECTILE_SPEED, FISH_MINION_PROJECTILE_SIZE, FISH_MINION_FIRE_COOLDOWN_MS, FISH_MINION_BULLET_DAMAGE, MAX_FISH_MINIONS_PER_PLAYER, FISH_MINION_FOLLOW_DISTANCE, FISH_MINION_FOLLOW_LERP_FACTOR,
+    COOLDOWN_BOMB, COOLDOWN_SUMMON_FISH_MINION,
+    SEA_TOKEN_SIZE, SEA_TOKEN_COLOR, SEA_TOKEN_ATTRACT_SPEED, MAX_SEA_TOKENS_ON_SCREEN,
+    COOLDOWN_RED_ARROW_DEFENSE, RED_ARROW_PROJECTILE_SPEED, RED_ARROW_PROJECTILE_DAMAGE, RED_ARROW_PROJECTILE_WIDTH, RED_ARROW_PROJECTILE_HEIGHT, RED_ARROW_DEFAULT_SHOT_COUNT,
+    CONE_PROJECTILE_COUNT_STANDARD, CONE_PROJECTILE_COUNT_HEAVY, CONE_ANGLE_DEGREES_MULTI_SHOT,
+    FLAME_CONE_ANGLE_DEGREES, FLAME_CONE_RANGE, FLAME_CONE_DURATION_MS, FLAME_CONE_DAMAGE_INITIAL, FLAME_CONE_DOT_DAMAGE_PER_TICK, FLAME_CONE_DOT_TOTAL_TICKS, FLAME_CONE_DOT_TICK_INTERVAL_MS, COOLDOWN_FLAME_CONE,
+    EXPLOSIVE_CORE_THRESHOLD_MS, EXPLOSIVE_CORE_DAMAGE, EXPLOSIVE_CORE_RADIUS, EXPLOSIVE_CORE_SELF_DAMAGE_MULTIPLIER, EXPLOSIVE_CORE_EXPLOSION_COLOR,
+    DOGE_LAUNCHER_PROJECTILE_SPEED, DOGE_LAUNCHER_DAMAGE, COOLDOWN_DOGE_LAUNCHER, DOGE_PROJECTILE_WIDTH, DOGE_PROJECTILE_HEIGHT, BONE_PROJECTILE_WIDTH, BONE_PROJECTILE_HEIGHT
+} from '../constants.ts';
+import { playSound, SoundEvent } from '../sounds.ts';
+
+
+interface GameCanvasProps {
+  playerData: PlayerData;
+  onGameOver: (score: number) => void;
+  onGainSeaTokensAndXP: (tokenValue: number, xpAmount?: number) => void;
+  onCollectNftBubble: (rarity: 'common' | 'rare' | 'legendary') => void;
+  activeNftEffects: NFT['effect'] | null;
+  runtimeGameCharacters: Record<string, GameCharacter>;
+  adminConfig: AdminConfig;
+  loadedGameAssets: Record<string, HTMLImageElement | null> | null;
+}
+
+interface Enemy extends EnemyEffectState { // Incorporate EnemyEffectState
+  id: string;
+  x: number;
+  y: number;
+  size: number;
+  speedX: number; 
+  speedY: number; 
+  characterId: string;
+  lastFireTime: number;
+  health: number;
+  maxHealth: number;
+  isFacingRight: boolean;
+  baseSpeed: number; // From GameCharacter definition
+  // accumulatedFireExposureMs is now part of EnemyEffectState, no need to redeclare
+}
+
+type Projectile = GlobalProjectileType;
+
+interface Raindrop {
+    x: number;
+    y: number;
+    length: number;
+    speed: number;
+}
+
+interface BloodParticle {
+    id: string;
+    x: number;
+    y: number;
+    size: number;
+    speedX: number;
+    speedY: number;
+    opacity: number;
+    life: number;
+    creationTime: number;
+    color: string;
+}
+
+interface ActiveFlameCone {
+    x: number; // Origin x
+    y: number; // Origin y
+    angle: number; // Center angle of the cone in radians
+    range: number; // How far the cone reaches
+    coneAngleRad: number; // Width of the cone in radians
+    endTime: number; // When the visual effect should stop
+}
+
+// Define GameContext type for internal state, used by triggerExplosiveCore and others
+interface GameContext {
+    playerPos: { x: number; y: number };
+    enemies: Enemy[];
+    projectiles: Projectile[];
+    fishMinions: FishMinion[];
+    activeExplosions: ExplosionEffect[];
+    floatingTexts: FloatingText[];
+    seaTokensOnScreen: SeaTokenItem[];
+    bloodParticles: BloodParticle[];
+    keysPressed: Record<string, boolean>;
+    score: number;
+    playerHealth: number;
+    lastPlayerShotTime: number;
+    lastAutoRocketFireTime: number;
+    lastRedArrowShotTime: number;
+    lastHorizontalDirection: 'left' | 'right';
+    playerSpeedX: number;
+    raindrops: Raindrop[];
+    isRaining: boolean;
+    rainCycleIntervalId?: NodeJS.Timeout;
+    rainStopTimeoutId?: NodeJS.Timeout;
+    gameSpeedMultiplier: number;
+    speedChangeActiveUntil: number;
+    activeFlameCone: ActiveFlameCone | null;
+    lastFiredDogeLauncherProjectileType: 'doge' | 'bone';
+}
+
+
+const NORMAL_SPEED_MULTIPLIER = 1.0;
+const FAST_SPEED_MULTIPLIER = 1.25; 
+const KILL_SPEED_MULTIPLIER = 1.4; 
+const SLOW_SPEED_MULTIPLIER = 0.65; 
+const SPEED_CHANGE_DURATION_MS = 1200; 
+const KILL_SPEED_DURATION_MS = 1800; 
+
+const CANVAS_BORDER_THICKNESS = 3; 
+const CANVAS_BORDER_COLOR = 'rgba(0, 169, 224, 0.5)';
+
+export const GameCanvas: React.FC<GameCanvasProps> = ({
+    playerData,
+    onGameOver,
+    onGainSeaTokensAndXP,
+    onCollectNftBubble,
+    activeNftEffects,
+    runtimeGameCharacters,
+    adminConfig,
+    loadedGameAssets
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const gameContextRef = useRef<GameContext | null>(null);
+
+  const getPlayerSpeed = useCallback(() => {
+    return PLAYER_SPEED * (activeNftEffects?.speed || 1) * (activeNftEffects?.allStats || 1);
+  }, [activeNftEffects]);
+
+  const getPlayerDamageMultiplier = useCallback(() => {
+    return (activeNftEffects?.damage || 1) * (activeNftEffects?.allStats || 1);
+  }, [activeNftEffects]);
+
+  const getPlayerShootCooldown = useCallback(() => {
+    const playerChar = runtimeGameCharacters[playerData.characterId];
+    const weaponType = playerChar?.defaultWeaponType || WeaponType.StandardBullet;
+    switch (weaponType) {
+        case WeaponType.Laser: return COOLDOWN_LASER;
+        case WeaponType.HeavyBullet: return COOLDOWN_HEAVY_BULLET;
+        case WeaponType.SwordThrow: return COOLDOWN_SWORD_THROW;
+        case WeaponType.Rocket: return COOLDOWN_ROCKET;
+        case WeaponType.AutoTargetMissile: return COOLDOWN_AUTO_TARGET_MISSILE;
+        case WeaponType.Bomb: return COOLDOWN_BOMB;
+        case WeaponType.SummonFishMinion: return COOLDOWN_SUMMON_FISH_MINION;
+        case WeaponType.FlameCone: return COOLDOWN_FLAME_CONE;
+        case WeaponType.DogeLauncher: return COOLDOWN_DOGE_LAUNCHER;
+        // RedArrowDefense is passive, so its cooldown is handled separately
+        default: return COOLDOWN_STANDARD_BULLET;
+    }
+  }, [playerData.characterId, runtimeGameCharacters]);
+
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    if (!gameContextRef.current || gameContextRef.current.playerHealth <= 0) {
+        gameContextRef.current = {
+            playerPos: { x: canvas.width / 2, y: canvas.height / 2 }, 
+            enemies: [],
+            projectiles: [],
+            fishMinions: [],
+            activeExplosions: [],
+            floatingTexts: [],
+            seaTokensOnScreen: [],
+            bloodParticles: [],
+            keysPressed: {},
+            score: 0,
+            playerHealth: playerData.maxHealth,
+            lastPlayerShotTime: 0,
+            lastAutoRocketFireTime: 0,
+            lastRedArrowShotTime: 0,
+            lastHorizontalDirection: 'right', 
+            playerSpeedX: 0,
+            raindrops: [],
+            isRaining: false,
+            gameSpeedMultiplier: NORMAL_SPEED_MULTIPLIER,
+            speedChangeActiveUntil: 0,
+            activeFlameCone: null,
+            lastFiredDogeLauncherProjectileType: 'bone', // Start with bone so first shot is doge
+        };
+
+        if (adminConfig.rainEffectEnabled) {
+            const startRainCycle = () => {
+                if (!gameContextRef.current || !canvasRef.current) return;
+                const gameCtx = gameContextRef.current;
+                const currentCanvas = canvasRef.current;
+
+                if (gameCtx.rainCycleIntervalId) clearInterval(gameCtx.rainCycleIntervalId);
+                if (gameCtx.rainStopTimeoutId) clearTimeout(gameCtx.rainStopTimeoutId);
+
+                gameCtx.rainCycleIntervalId = setInterval(() => {
+                    if (!gameContextRef.current) return;
+                    gameContextRef.current.isRaining = true;
+                    const newRaindrops: Raindrop[] = [];
+                    for (let i = 0; i < adminConfig.rainIntensity; i++) {
+                        newRaindrops.push({
+                            x: Math.random() * currentCanvas.width,
+                            y: Math.random() * currentCanvas.height,
+                            length: Math.random() * 20 + 10,
+                            speed: Math.random() * (adminConfig.rainDropSpeedMax - adminConfig.rainDropSpeedMin) + adminConfig.rainDropSpeedMin
+                        });
+                    }
+                    gameContextRef.current.raindrops = newRaindrops;
+
+                    if (gameContextRef.current.rainStopTimeoutId) clearTimeout(gameContextRef.current.rainStopTimeoutId);
+                    gameContextRef.current.rainStopTimeoutId = setTimeout(() => {
+                        if (gameContextRef.current) gameContextRef.current.isRaining = false;
+                    }, adminConfig.rainDurationSeconds * 1000);
+                }, adminConfig.rainIntervalSeconds * 1000);
+            };
+            startRainCycle();
+        }
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (gameContextRef.current) gameContextRef.current.keysPressed[e.key] = true;
+    };
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (gameContextRef.current) gameContextRef.current.keysPressed[e.key] = false;
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      if (gameContextRef.current?.rainCycleIntervalId) clearInterval(gameContextRef.current.rainCycleIntervalId);
+      if (gameContextRef.current?.rainStopTimeoutId) clearTimeout(gameContextRef.current.rainStopTimeoutId);
+    };
+  }, [playerData.maxHealth, adminConfig]);
+
+
+  const addFloatingText = useCallback((text: string, x: number, y: number, color: string = 'white') => {
+    if (!gameContextRef.current) return;
+    gameContextRef.current.floatingTexts.push({ id: generateId(), text, x, y, color, timestamp: Date.now() });
+  }, []);
+
+  const spawnBlood = useCallback((centerX: number, centerY: number, count: number, color: string = 'rgba(139,0,0,') => {
+      if (!gameContextRef.current) return;
+      for (let i = 0; i < count; i++) {
+          gameContextRef.current.bloodParticles.push({
+              id: generateId(),
+              x: centerX,
+              y: centerY,
+              size: Math.random() * 3 + 2,
+              speedX: (Math.random() - 0.5) * 3,
+              speedY: Math.random() * 1.5 + 1,
+              opacity: 1,
+              life: adminConfig.bloodParticleLifespanSeconds * 1000,
+              creationTime: Date.now(),
+              color: color
+          });
+      }
+  }, [adminConfig.bloodParticleLifespanSeconds]);
+
+  const createExplosion = useCallback((
+    x: number, y: number, radius: number, duration: number, color: string,
+    damageToApply: number,
+    onHitCallback?: (enemy: Enemy) => void
+  ) => {
+    if (!gameContextRef.current) return;
+    const gameCtx = gameContextRef.current;
+    gameCtx.activeExplosions.push({
+        id: generateId(), x, y, currentRadius: 0, maxRadius: radius,
+        creationTime: Date.now(), duration, color,
+    });
+    // AoE Damage application
+    gameCtx.enemies.forEach(enemy => {
+        if (enemy.health <= 0) return; // Don't damage already dead enemies
+        const distSq = (enemy.x + enemy.size / 2 - x) ** 2 + (enemy.y + enemy.size / 2 - y) ** 2;
+        if (distSq <= radius * radius) {
+            const actualDamage = damageToApply * ( (gameCtx.playerPos && x === gameCtx.playerPos.x + PLAYER_SIZE / 2 && y === gameCtx.playerPos.y + PLAYER_SIZE / 2) ? getPlayerDamageMultiplier() : 1);
+            enemy.health -= actualDamage;
+            addFloatingText(`-${Math.round(actualDamage)}💥`, enemy.x, enemy.y, 'orange');
+            spawnBlood(enemy.x + enemy.size / 2, enemy.y + enemy.size / 2, 5, 'rgba(255,165,0,'); // Orange blood for explosion
+            
+            if (enemy.health > 0) { 
+                // Speed change for non-lethal hits, only if original bomb was player's
+                if (gameCtx.playerPos && x === gameCtx.playerPos.x + PLAYER_SIZE / 2 && y === gameCtx.playerPos.y + PLAYER_SIZE / 2) {
+                   gameCtx.gameSpeedMultiplier = FAST_SPEED_MULTIPLIER;
+                   gameCtx.speedChangeActiveUntil = Date.now() + SPEED_CHANGE_DURATION_MS;
+                }
+            }
+            if (onHitCallback) {
+                onHitCallback(enemy);
+            }
+        }
+    });
+  }, [getPlayerDamageMultiplier, addFloatingText, spawnBlood]);
+
+
+  const triggerExplosiveCore = useCallback((
+    enemyToExplode: Enemy, 
+    alreadyChained: Set<string>,
+    gameCtx: GameContext // Pass gameCtx explicitly
+    ) => {
+    if (!enemyToExplode || enemyToExplode.health <= 0 || alreadyChained.has(enemyToExplode.id)) {
+        return;
+    }
+    alreadyChained.add(enemyToExplode.id);
+
+    const selfDamage = EXPLOSIVE_CORE_DAMAGE * EXPLOSIVE_CORE_SELF_DAMAGE_MULTIPLIER;
+    enemyToExplode.health -= selfDamage;
+    addFloatingText(`-${Math.round(selfDamage)}💥!`, enemyToExplode.x + enemyToExplode.size / 2, enemyToExplode.y - 10, 'red');
+    spawnBlood(enemyToExplode.x + enemyToExplode.size / 2, enemyToExplode.y + enemyToExplode.size / 2, 15, 'rgba(255,0,0,');
+
+    // Create the visual explosion and deal AoE damage, triggering chains via callback
+    createExplosion(
+        enemyToExplode.x + enemyToExplode.size / 2,
+        enemyToExplode.y + enemyToExplode.size / 2,
+        EXPLOSIVE_CORE_RADIUS,
+        BOMB_EXPLOSION_DURATION_MS, // Use existing bomb duration or new constant
+        EXPLOSIVE_CORE_EXPLOSION_COLOR,
+        EXPLOSIVE_CORE_DAMAGE,
+        (damagedEnemy: Enemy) => { // This is the onHitCallback
+            // If the damaged enemy is not the one that just exploded, is alive, and not already chained...
+            if (damagedEnemy.id !== enemyToExplode.id && damagedEnemy.health > 0 && !alreadyChained.has(damagedEnemy.id)) {
+                 // Recursively call triggerExplosiveCore for the chained enemy
+                triggerExplosiveCore(damagedEnemy, alreadyChained, gameCtx);
+            }
+        }
+    );
+    playSound(SoundEvent.EnemyKill, adminConfig); // Use enemy kill sound or a new explosion sound
+
+    // Reset state for the enemy that just exploded
+    enemyToExplode.isBurning = false;
+    enemyToExplode.accumulatedFireExposureMs = 0;
+    enemyToExplode.burnTicksRemaining = 0;
+
+}, [createExplosion, addFloatingText, spawnBlood, adminConfig]); // Dependencies of triggerExplosiveCore
+
+  const spawnEnemy = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !gameContextRef.current || gameContextRef.current.enemies.length >= MAX_ENEMIES || !loadedGameAssets) return;
+
+    const availableEnemyTypes = Object.values(runtimeGameCharacters).filter(char =>
+        char.type === 'enemy' &&
+        (loadedGameAssets[`enemyChar_${char.id}`] || loadedGameAssets['defaultEnemy'])
+    );
+
+    if (availableEnemyTypes.length === 0) return;
+    const randomEnemyCharDef = availableEnemyTypes[Math.floor(Math.random() * availableEnemyTypes.length)];
+    
+    const enemySize = randomEnemyCharDef.baseSpeed || ENEMY_SIZE; // Use actual enemy size for positioning if available
+    const x = canvas.width; // Always spawn from the right
+    const y = Math.random() * (canvas.height - enemySize * 2) + enemySize; // Ensure full enemy is visible vertically
+    
+    const enemyBaseSpeed = randomEnemyCharDef.baseSpeed || 1 + Math.random() * 1.0;
+    const speedX = -enemyBaseSpeed; // Always move left
+    const speedY = (Math.random() - 0.5) * (enemyBaseSpeed * 0.3); // Vertical drift
+
+    gameContextRef.current.enemies.push({
+        id: generateId(), x, y, 
+        size: ENEMY_SIZE, 
+        speedX, speedY,
+        characterId: randomEnemyCharDef.id, lastFireTime: 0,
+        health: randomEnemyCharDef.baseHealth || ENEMY_BASE_HEALTH, 
+        maxHealth: randomEnemyCharDef.baseHealth || ENEMY_BASE_HEALTH,
+        isFacingRight: false, // Always facing left initially because moving left
+        baseSpeed: enemyBaseSpeed,
+        isBurning: false, 
+        burnDamagePerTick: 0,
+        burnTicksRemaining: 0,
+        burnTickCooldownRemaining: 0,
+        accumulatedFireExposureMs: 0, // Initialize for explosive core
+    });
+  }, [runtimeGameCharacters, loadedGameAssets]);
+
+  const findNearestEntity = useCallback(<T extends { id: string; x: number; y: number; width?: number; height?: number; size?: number }>(
+    originX: number,
+    originY: number,
+    entities: T[],
+    range?: number,
+    excludeIds?: string[]
+  ): T | null => {
+    if (!entities || entities.length === 0) return null;
+    let nearestEntity: T | null = null;
+    let minDistanceSq = range ? range * range : Infinity;
+
+    entities.forEach(entity => {
+        if (excludeIds && excludeIds.includes(entity.id)) return;
+
+        const entitySize = entity.size || Math.max(entity.width || 0, entity.height || 0);
+        const entityCenterX = entity.x + entitySize / 2;
+        const entityCenterY = entity.y + entitySize / 2;
+        const distanceSq = (originX - entityCenterX) ** 2 + (originY - entityCenterY) ** 2;
+        if (distanceSq < minDistanceSq) {
+            minDistanceSq = distanceSq;
+            nearestEntity = entity;
+        }
+    });
+    return nearestEntity;
+  }, []);
+
+  const findNearestEnemy = useCallback((originX: number, originY: number, range?: number, excludeIds?: string[]): Enemy | null => {
+      if (!gameContextRef.current) return null;
+      return findNearestEntity(originX, originY, gameContextRef.current.enemies, range, excludeIds);
+  }, [findNearestEntity]); // Added findNearestEntity dependency
+
+  const findNearestEnemyProjectile = useCallback((originX: number, originY: number, range?: number, excludeIds?: string[]): Projectile | null => {
+      if (!gameContextRef.current) return null;
+      const enemyProjectiles = gameContextRef.current.projectiles.filter(p => p.owner === 'enemy');
+      return findNearestEntity(originX, originY, enemyProjectiles, range, excludeIds);
+  }, [findNearestEntity]); // Added findNearestEntity dependency
+
+
+ const firePlayerProjectile = useCallback(() => {
+    if (!gameContextRef.current || !playerData || !loadedGameAssets) return;
+    const gameCtx = gameContextRef.current;
+    const now = Date.now();
+    if (now - gameCtx.lastPlayerShotTime < getPlayerShootCooldown() / gameCtx.gameSpeedMultiplier) return;
+
+    const playerChar = runtimeGameCharacters[playerData.characterId];
+    const weaponType = playerChar?.defaultWeaponType || WeaponType.StandardBullet;
+    
+    if (weaponType === WeaponType.RedArrowDefense) return; 
+
+    const { playerPos, lastHorizontalDirection, playerSpeedX, enemies, lastFiredDogeLauncherProjectileType } = gameCtx;
+    const playerCenterX = playerPos.x + PLAYER_SIZE / 2;
+    const playerCenterY = playerPos.y + PLAYER_SIZE / 2;
+    const isFacingRight = lastHorizontalDirection === 'right';
+
+    if (weaponType === WeaponType.DogeLauncher) {
+        const nextProjectileImageType = lastFiredDogeLauncherProjectileType === 'doge' ? 'bone' : 'doge';
+        const imageKey = nextProjectileImageType === 'doge' ? 'dogeProjectile' : 'boneProjectile';
+        const projectileWidth = nextProjectileImageType === 'doge' ? DOGE_PROJECTILE_WIDTH : BONE_PROJECTILE_WIDTH;
+        const projectileHeight = nextProjectileImageType === 'doge' ? DOGE_PROJECTILE_HEIGHT : BONE_PROJECTILE_HEIGHT;
+        
+        let aimAngle = isFacingRight ? 0 : Math.PI;
+        if (adminConfig.playerAutoTargets) {
+            const targetEnemy = findNearestEnemy(playerCenterX, playerCenterY);
+            if (targetEnemy) {
+                aimAngle = Math.atan2(targetEnemy.y + targetEnemy.size / 2 - playerCenterY, targetEnemy.x + targetEnemy.size / 2 - playerCenterX);
+            }
+        }
+
+        const newLauncherProjectile: Projectile = {
+            id: generateId(),
+            x: playerCenterX - projectileWidth / 2,
+            y: playerCenterY - projectileHeight / 2,
+            width: projectileWidth,
+            height: projectileHeight,
+            dx: Math.cos(aimAngle) * DOGE_LAUNCHER_PROJECTILE_SPEED,
+            dy: Math.sin(aimAngle) * DOGE_LAUNCHER_PROJECTILE_SPEED,
+            rotation: aimAngle,
+            type: WeaponType.DogeLauncher,
+            owner: 'player',
+            ownerPlayerId: playerData.id,
+            damage: DOGE_LAUNCHER_DAMAGE * getPlayerDamageMultiplier(),
+            imageKey: imageKey,
+            isHoming: false, // DogeLauncher projectiles are not homing by default
+        };
+        gameCtx.projectiles.push(newLauncherProjectile);
+        gameCtx.lastFiredDogeLauncherProjectileType = nextProjectileImageType;
+        gameCtx.lastPlayerShotTime = now;
+        playSound(SoundEvent.Fire, adminConfig);
+        return;
+    }
+
+
+    if (weaponType === WeaponType.FlameCone) {
+        const coneOriginX = playerCenterX;
+        const coneOriginY = playerCenterY;
+        const coneDirectionAngle = isFacingRight ? 0 : Math.PI; // 0 for right, PI for left
+        const coneAngleRad = FLAME_CONE_ANGLE_DEGREES * (Math.PI / 180);
+
+        gameCtx.activeFlameCone = {
+            x: coneOriginX,
+            y: coneOriginY,
+            angle: coneDirectionAngle,
+            range: FLAME_CONE_RANGE,
+            coneAngleRad: coneAngleRad,
+            endTime: now + FLAME_CONE_DURATION_MS,
+        };
+        
+        enemies.forEach(enemy => {
+            if (enemy.health <= 0) return;
+            const enemyCenterX = enemy.x + enemy.size / 2;
+            const enemyCenterY = enemy.y + enemy.size / 2;
+            const dx = enemyCenterX - coneOriginX;
+            const dy = enemyCenterY - coneOriginY;
+            const distanceToEnemy = Math.sqrt(dx * dx + dy * dy);
+
+            if (distanceToEnemy <= FLAME_CONE_RANGE + enemy.size / 2) { 
+                const angleToEnemy = Math.atan2(dy, dx);
+                let angleDifference = Math.abs(coneDirectionAngle - angleToEnemy);
+                if (angleDifference > Math.PI) angleDifference = 2 * Math.PI - angleDifference; 
+
+                if (angleDifference <= coneAngleRad / 2) { 
+                    const initialDamage = FLAME_CONE_DAMAGE_INITIAL * getPlayerDamageMultiplier();
+                    enemy.health -= initialDamage;
+                    addFloatingText(`-${Math.round(initialDamage)}`, enemy.x, enemy.y - 15, 'orange');
+                    spawnBlood(enemyCenterX, enemyCenterY, 3, 'rgba(255,100,0,');
+
+                    enemy.isBurning = true;
+                    enemy.burnDamagePerTick = FLAME_CONE_DOT_DAMAGE_PER_TICK * getPlayerDamageMultiplier();
+                    enemy.burnTicksRemaining = FLAME_CONE_DOT_TOTAL_TICKS;
+                    enemy.burnTickCooldownRemaining = FLAME_CONE_DOT_TICK_INTERVAL_MS;
+                    // accumulatedFireExposureMs is handled in the main loop based on isBurning
+
+                     if (enemy.health > 0) {
+                        gameCtx.gameSpeedMultiplier = FAST_SPEED_MULTIPLIER;
+                        gameCtx.speedChangeActiveUntil = Date.now() + SPEED_CHANGE_DURATION_MS;
+                    }
+                }
+            }
+        });
+        gameCtx.lastPlayerShotTime = now;
+        playSound(SoundEvent.Fire, adminConfig); 
+        return; 
+    }
+
+
+    // Existing projectile logic for other weapon types
+    let baseAimAngle: number;
+    let generalTargetEnemy: Enemy | null = null; 
+    let generalAngleToTarget: number | null = null; 
+
+    if (adminConfig.playerAutoTargets) {
+        generalTargetEnemy = findNearestEnemy(playerCenterX, playerCenterY);
+        if (generalTargetEnemy) {
+            const targetCenterX = generalTargetEnemy.x + generalTargetEnemy.size / 2;
+            const targetCenterY = generalTargetEnemy.y + generalTargetEnemy.size / 2;
+            generalAngleToTarget = Math.atan2(targetCenterY - playerCenterY, targetCenterX - playerCenterX);
+            baseAimAngle = generalAngleToTarget;
+        } else {
+            baseAimAngle = isFacingRight ? 0 : Math.PI;
+        }
+    } else {
+        baseAimAngle = isFacingRight ? 0 : Math.PI;
+    }
+
+    if (weaponType === WeaponType.StandardBullet || weaponType === WeaponType.HeavyBullet) {
+        const projectileCount = weaponType === WeaponType.StandardBullet ? CONE_PROJECTILE_COUNT_STANDARD : CONE_PROJECTILE_COUNT_HEAVY;
+        const coneAngleTotalRadians = CONE_ANGLE_DEGREES_MULTI_SHOT * (Math.PI / 180);
+
+        for (let i = 0; i < projectileCount; i++) {
+            let currentProjectileAngle: number;
+            if (projectileCount > 1) {
+                const offsetFraction = (i / (projectileCount - 1)) - 0.5; 
+                currentProjectileAngle = baseAimAngle + offsetFraction * coneAngleTotalRadians;
+            } else {
+                currentProjectileAngle = baseAimAngle; 
+            }
+
+            let newConeProjectile: Partial<Projectile> & { type: WeaponType } = {
+                id: generateId(), x: playerCenterX, y: playerCenterY, type: weaponType, owner: 'player', ownerPlayerId: playerData.id, isHoming: false,
+            };
+
+            if (weaponType === WeaponType.StandardBullet) {
+                newConeProjectile.width = 10; newConeProjectile.height = 5;
+                newConeProjectile.dx = Math.cos(currentProjectileAngle) * STANDARD_PROJECTILE_SPEED;
+                newConeProjectile.dy = Math.sin(currentProjectileAngle) * STANDARD_PROJECTILE_SPEED;
+                newConeProjectile.rotation = currentProjectileAngle;
+                newConeProjectile.damage = 10 * getPlayerDamageMultiplier();
+            } else { // HeavyBullet
+                newConeProjectile.width = 12; newConeProjectile.height = 7;
+                newConeProjectile.dx = Math.cos(currentProjectileAngle) * HEAVY_PROJECTILE_SPEED;
+                newConeProjectile.dy = Math.sin(currentProjectileAngle) * HEAVY_PROJECTILE_SPEED;
+                newConeProjectile.rotation = currentProjectileAngle;
+                newConeProjectile.damage = 15 * getPlayerDamageMultiplier();
+            }
+            newConeProjectile.x! -= newConeProjectile.width! / 2;
+            newConeProjectile.y! -= newConeProjectile.height! / 2;
+            gameCtx.projectiles.push(newConeProjectile as Projectile);
+        }
+        gameCtx.lastPlayerShotTime = now;
+        playSound(SoundEvent.Fire, adminConfig);
+
+    } else {
+        let newSingleProjectile: Partial<Projectile> = {
+            id: generateId(), x: playerCenterX, y: playerCenterY, type: weaponType, owner: 'player', ownerPlayerId: playerData.id, isHoming: false,
+        };
+
+        switch (weaponType) {
+            case WeaponType.Rocket:
+                newSingleProjectile.width = 16; newSingleProjectile.height = 8;
+                if (adminConfig.playerAutoTargets && generalAngleToTarget !== null) {
+                    newSingleProjectile.dx = Math.cos(generalAngleToTarget) * ROCKET_PROJECTILE_SPEED;
+                    newSingleProjectile.dy = Math.sin(generalAngleToTarget) * ROCKET_PROJECTILE_SPEED;
+                    newSingleProjectile.rotation = generalAngleToTarget;
+                } else {
+                    newSingleProjectile.dx = isFacingRight ? ROCKET_PROJECTILE_SPEED : -ROCKET_PROJECTILE_SPEED;
+                    newSingleProjectile.dy = 0;
+                    newSingleProjectile.rotation = isFacingRight ? 0 : Math.PI;
+                }
+                newSingleProjectile.damage = 25 * getPlayerDamageMultiplier();
+                break;
+            case WeaponType.Laser:
+                newSingleProjectile.width = 20; newSingleProjectile.height = 3;
+                if (adminConfig.playerAutoTargets && generalAngleToTarget !== null) {
+                    newSingleProjectile.dx = Math.cos(generalAngleToTarget) * LASER_PROJECTILE_SPEED;
+                    newSingleProjectile.dy = Math.sin(generalAngleToTarget) * LASER_PROJECTILE_SPEED;
+                    newSingleProjectile.rotation = generalAngleToTarget;
+                } else {
+                    newSingleProjectile.dx = isFacingRight ? LASER_PROJECTILE_SPEED : -LASER_PROJECTILE_SPEED;
+                    newSingleProjectile.dy = 0;
+                    newSingleProjectile.rotation = isFacingRight ? 0 : Math.PI;
+                }
+                newSingleProjectile.damage = 12 * getPlayerDamageMultiplier();
+                break;
+            case WeaponType.AutoTargetMissile:
+                const targetForManualMissile = findNearestEnemy(playerCenterX, playerCenterY); 
+                newSingleProjectile.width = 12; newSingleProjectile.height = 6;
+                newSingleProjectile.dx = isFacingRight ? MISSILE_SPEED : -MISSILE_SPEED; 
+                newSingleProjectile.dy = 0;
+                newSingleProjectile.targetEnemyId = targetForManualMissile?.id;
+                newSingleProjectile.isHoming = true;
+                newSingleProjectile.rotation = targetForManualMissile ? Math.atan2(targetForManualMissile.y + targetForManualMissile.size / 2 - playerCenterY, targetForManualMissile.x + targetForManualMissile.size / 2 - playerCenterX) : (isFacingRight ? 0 : Math.PI);
+                newSingleProjectile.damage = 18 * getPlayerDamageMultiplier();
+                break;
+            case WeaponType.SwordThrow:
+                newSingleProjectile.width = SWORD_PROJECTILE_HEIGHT; newSingleProjectile.height = SWORD_PROJECTILE_WIDTH;
+                if (adminConfig.playerAutoTargets && generalAngleToTarget !== null) {
+                    newSingleProjectile.dx = Math.cos(generalAngleToTarget) * SWORD_THROW_SPEED;
+                    newSingleProjectile.dy = Math.sin(generalAngleToTarget) * SWORD_THROW_SPEED;
+                    newSingleProjectile.rotation = generalAngleToTarget + Math.PI / 2;
+                } else {
+                    newSingleProjectile.dx = isFacingRight ? SWORD_THROW_SPEED : -SWORD_THROW_SPEED;
+                    newSingleProjectile.dy = 0;
+                    newSingleProjectile.rotation = Math.PI / 2;
+                }
+                newSingleProjectile.damage = 20 * getPlayerDamageMultiplier();
+                break;
+            case WeaponType.Bomb:
+                newSingleProjectile.width = BOMB_PROJECTILE_WIDTH; newSingleProjectile.height = BOMB_PROJECTILE_HEIGHT;
+                const baseBombSpeedX = (playerSpeedX !== 0 ? playerSpeedX * BOMB_PROJECTILE_SPEED_X_FACTOR : (isFacingRight ? 1 : -1) * (PLAYER_SPEED / 2) * BOMB_PROJECTILE_SPEED_X_FACTOR);
+                newSingleProjectile.dx = baseBombSpeedX;
+                newSingleProjectile.dy = BOMB_PROJECTILE_INITIAL_SPEED_Y;
+                newSingleProjectile.gravityEffect = true;
+                newSingleProjectile.creationTime = now;
+                newSingleProjectile.rotation = 0;
+                break;
+            case WeaponType.SummonFishMinion:
+                const currentMinions = gameCtx.fishMinions.filter(fm => fm.ownerPlayerId === playerData.id);
+                if (currentMinions.length < MAX_FISH_MINIONS_PER_PLAYER) {
+                    const angleOffset = (Math.PI * 2 / MAX_FISH_MINIONS_PER_PLAYER) * currentMinions.length;
+                    gameCtx.fishMinions.push({ id: generateId(), x: playerCenterX + Math.cos(angleOffset) * FISH_MINION_FOLLOW_DISTANCE, y: playerCenterY + Math.sin(angleOffset) * FISH_MINION_FOLLOW_DISTANCE, health: FISH_MINION_MAX_HEALTH, maxHealth: FISH_MINION_MAX_HEALTH, targetEnemyId: null, lastFireTime: 0, ownerPlayerId: playerData.id, size: FISH_MINION_SIZE, angleToPlayer: angleOffset, distanceFromPlayer: FISH_MINION_FOLLOW_DISTANCE });
+                    gameCtx.lastPlayerShotTime = now;
+                }
+                return; 
+            default: // Should technically be StandardBullet if not FlameCone or others handled
+                newSingleProjectile.type = WeaponType.StandardBullet; 
+                newSingleProjectile.width = 10; newSingleProjectile.height = 5;
+                 if (adminConfig.playerAutoTargets && generalAngleToTarget !== null) {
+                    newSingleProjectile.dx = Math.cos(generalAngleToTarget) * STANDARD_PROJECTILE_SPEED;
+                    newSingleProjectile.dy = Math.sin(generalAngleToTarget) * STANDARD_PROJECTILE_SPEED;
+                    newSingleProjectile.rotation = generalAngleToTarget;
+                } else {
+                    newSingleProjectile.dx = isFacingRight ? STANDARD_PROJECTILE_SPEED : -STANDARD_PROJECTILE_SPEED;
+                    newSingleProjectile.dy = 0;
+                    newSingleProjectile.rotation = isFacingRight ? 0 : Math.PI;
+                }
+                newSingleProjectile.damage = 10 * getPlayerDamageMultiplier();
+        }
+
+        if (newSingleProjectile.type !== WeaponType.SummonFishMinion) {
+            newSingleProjectile.x! -= newSingleProjectile.width! / 2;
+            newSingleProjectile.y! -= newSingleProjectile.height! / 2;
+            gameCtx.projectiles.push(newSingleProjectile as Projectile);
+            gameCtx.lastPlayerShotTime = now;
+            playSound(SoundEvent.Fire, adminConfig);
+        }
+    }
+  }, [playerData, runtimeGameCharacters, getPlayerShootCooldown, findNearestEnemy, getPlayerDamageMultiplier, createExplosion, adminConfig, addFloatingText, spawnBlood, loadedGameAssets]);
+
+  const fireEnemyProjectile = useCallback((enemy: Enemy) => {
+    if (!gameContextRef.current) return;
+    const { playerPos } = gameContextRef.current;
+    const playerX = playerPos.x + PLAYER_SIZE / 2; const playerY = playerPos.y + PLAYER_SIZE / 2;
+    const enemyCenterX = enemy.x + enemy.size / 2; const enemyCenterY = enemy.y + enemy.size / 2;
+    const angle = Math.atan2(playerY - enemyCenterY, playerX - enemyCenterX);
+    const dx = Math.cos(angle) * ENEMY_PROJECTILE_SPEED; const dy = Math.sin(angle) * ENEMY_PROJECTILE_SPEED;
+    gameContextRef.current.projectiles.push({ 
+        id: generateId(), 
+        x: enemyCenterX - ENEMY_PROJECTILE_SIZE / 2, 
+        y: enemyCenterY - ENEMY_PROJECTILE_SIZE / 2, 
+        dx, dy, 
+        width: ENEMY_PROJECTILE_SIZE, 
+        height: ENEMY_PROJECTILE_SIZE, 
+        type: WeaponType.EnemyBullet, 
+        owner: 'enemy', 
+        ownerEnemyId: enemy.id,
+        damage: 10, 
+        rotation: angle 
+    });
+    enemy.lastFireTime = Date.now();
+  }, []);
+
+  const fireFishMinionProjectile = useCallback((minion: FishMinion, target: Enemy) => {
+    if (!gameContextRef.current) return;
+    const targetCenterX = target.x + target.size / 2; const targetCenterY = target.y + target.size / 2;
+    const minionCenterX = minion.x + minion.size / 2; const minionCenterY = minion.y + minion.size / 2;
+    const angle = Math.atan2(targetCenterY - minionCenterY, targetCenterX - minionCenterX);
+    const dx = Math.cos(angle) * FISH_MINION_PROJECTILE_SPEED; const dy = Math.sin(angle) * FISH_MINION_PROJECTILE_SPEED;
+    gameContextRef.current.projectiles.push({ 
+        id: generateId(), 
+        x: minionCenterX - FISH_MINION_PROJECTILE_SIZE / 2, 
+        y: minionCenterY - FISH_MINION_PROJECTILE_SIZE / 2, 
+        dx, dy, 
+        width: FISH_MINION_PROJECTILE_SIZE, 
+        height: FISH_MINION_PROJECTILE_SIZE, 
+        type: WeaponType.FishMinionBullet, 
+        owner: 'player',  
+        ownerPlayerId: minion.ownerPlayerId,
+        damage: FISH_MINION_BULLET_DAMAGE * getPlayerDamageMultiplier(), 
+        rotation: angle + Math.PI / 2 
+    });
+    minion.lastFireTime = Date.now();
+  }, [getPlayerDamageMultiplier]);
+
+
+  useEffect(() => {
+    if (!loadedGameAssets) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!ctx || !gameContextRef.current) return;
+
+    let animationFrameId: number;
+    let lastEnemySpawnTime = 0;
+    const enemySpawnInterval = 2000; 
+
+    const gameLoop = (timestamp: number) => {
+      const gameCtx = gameContextRef.current;
+      if (!gameCtx || !playerData ) { animationFrameId = requestAnimationFrame(gameLoop); return; }
+
+      const now = Date.now();
+      const timeDelta = (1000 / 60) * gameCtx.gameSpeedMultiplier; // Approx frame time in ms
+
+      if (gameCtx.speedChangeActiveUntil > 0 && now > gameCtx.speedChangeActiveUntil) {
+          gameCtx.gameSpeedMultiplier = NORMAL_SPEED_MULTIPLIER;
+          gameCtx.speedChangeActiveUntil = 0;
+      }
+      const currentSpeedMultiplier = gameCtx.gameSpeedMultiplier;
+
+      const { playerPos, enemies, projectiles, fishMinions, activeExplosions, floatingTexts, seaTokensOnScreen, bloodParticles, keysPressed, score, lastAutoRocketFireTime, raindrops, isRaining, playerSpeedX, lastHorizontalDirection, lastRedArrowShotTime, activeFlameCone } = gameCtx;
+      const playerChar = runtimeGameCharacters[playerData.characterId];
+
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+      const bgImage = loadedGameAssets['background'];
+      if (bgImage) {
+        ctx.drawImage(bgImage, 0, 0, ctx.canvas.width, ctx.canvas.height);
+      }
+
+      ctx.fillStyle = CANVAS_BORDER_COLOR;
+      ctx.fillRect(0, 0, ctx.canvas.width, CANVAS_BORDER_THICKNESS); 
+      ctx.fillRect(0, ctx.canvas.height - CANVAS_BORDER_THICKNESS, ctx.canvas.width, CANVAS_BORDER_THICKNESS); 
+
+
+      if (adminConfig.rainEffectEnabled && isRaining && raindrops.length > 0) {
+        ctx.strokeStyle = 'rgba(174,194,224,0.5)';
+        ctx.lineWidth = 1;
+        ctx.lineCap = 'round';
+        raindrops.forEach(drop => {
+            ctx.beginPath();
+            ctx.moveTo(drop.x, drop.y);
+            const rainAngle = (playerSpeedX || 0) * 0.02;
+            ctx.lineTo(drop.x + rainAngle, drop.y + drop.length);
+            ctx.stroke();
+            drop.y += drop.speed * currentSpeedMultiplier;
+            if (drop.y > ctx.canvas.height) {
+                drop.y = Math.random() * -ctx.canvas.height * 0.5;
+                drop.x = Math.random() * ctx.canvas.width;
+            }
+        });
+      }
+
+      for (let i = bloodParticles.length - 1; i >= 0; i--) {
+        const p = bloodParticles[i];
+        p.x += p.speedX * currentSpeedMultiplier; p.y += p.speedY * currentSpeedMultiplier;
+        const lifetimeProgress = (now - p.creationTime) / p.life;
+        p.opacity = Math.max(0, 1 - lifetimeProgress);
+        if (p.opacity <= 0 || p.y > ctx.canvas.height + p.size || p.x < -p.size || p.x > ctx.canvas.width + p.size) {
+            bloodParticles.splice(i, 1); continue;
+        }
+        ctx.fillStyle = `${p.color}${p.opacity.toFixed(2)})`;
+        ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();
+      }
+
+      for (let i = seaTokensOnScreen.length - 1; i >= 0; i--) {
+        const token = seaTokensOnScreen[i];
+        if (token.isAttracting) {
+            const playerCenterX = playerPos.x + PLAYER_SIZE / 2; const playerCenterY = playerPos.y + PLAYER_SIZE / 2;
+            const angle = Math.atan2(playerCenterY - token.y, playerCenterX - token.x);
+            token.x += Math.cos(angle) * SEA_TOKEN_ATTRACT_SPEED * currentSpeedMultiplier;
+            token.y += Math.sin(angle) * SEA_TOKEN_ATTRACT_SPEED * currentSpeedMultiplier;
+            if (Math.abs(token.x - playerCenterX) < PLAYER_SIZE / 2 && Math.abs(token.y - playerCenterY) < PLAYER_SIZE / 2) {
+                onGainSeaTokensAndXP(token.value, TOKEN_VALUE_ON_COLLECT / 2); 
+                addFloatingText(`+${token.value} ST`, token.x, token.y, 'yellow');
+                seaTokensOnScreen.splice(i, 1); continue;
+            }
+        } else { token.y += 0.5 * currentSpeedMultiplier; }
+        const tokenImage = loadedGameAssets?.['seaToken'];
+        if (tokenImage) ctx.drawImage(tokenImage, token.x - SEA_TOKEN_SIZE, token.y - SEA_TOKEN_SIZE, SEA_TOKEN_SIZE * 2, SEA_TOKEN_SIZE * 2);
+        else { ctx.fillStyle = SEA_TOKEN_COLOR; ctx.beginPath(); ctx.arc(token.x, token.y, SEA_TOKEN_SIZE, 0, Math.PI * 2); ctx.fill(); }
+        if (token.y > ctx.canvas.height + SEA_TOKEN_SIZE * 2) seaTokensOnScreen.splice(i,1);
+      }
+
+      const currentBaseSpeed = getPlayerSpeed();
+      const actualMovementSpeed = currentBaseSpeed * currentSpeedMultiplier;
+      let actualPlayerSpeedXUnmultiplied = 0;
+      if (keysPressed['ArrowLeft'] || keysPressed['a']) { playerPos.x -= actualMovementSpeed; actualPlayerSpeedXUnmultiplied = -currentBaseSpeed; gameCtx.lastHorizontalDirection = 'left';}
+      if (keysPressed['ArrowRight'] || keysPressed['d']) { playerPos.x += actualMovementSpeed; actualPlayerSpeedXUnmultiplied = currentBaseSpeed; gameCtx.lastHorizontalDirection = 'right';}
+      if (keysPressed['ArrowUp'] || keysPressed['w']) playerPos.y -= actualMovementSpeed;
+      if (keysPressed['ArrowDown'] || keysPressed['s']) playerPos.y += actualMovementSpeed;
+      gameCtx.playerSpeedX = actualPlayerSpeedXUnmultiplied;
+      playerPos.x = Math.max(0, Math.min(ctx.canvas.width - PLAYER_SIZE, playerPos.x));
+      playerPos.y = Math.max(0, Math.min(ctx.canvas.height - PLAYER_SIZE, playerPos.y));
+      const playerImageToRender = loadedGameAssets[`playerChar_${playerData.characterId}`];
+      ctx.save(); ctx.translate(playerPos.x + PLAYER_SIZE / 2, playerPos.y + PLAYER_SIZE / 2);
+      if (gameCtx.lastHorizontalDirection === 'left' && playerImageToRender) ctx.scale(-1,1); 
+      if (playerImageToRender) ctx.drawImage(playerImageToRender, -PLAYER_SIZE / 2, -PLAYER_SIZE / 2, PLAYER_SIZE, PLAYER_SIZE);
+      else { ctx.fillStyle = playerData.whaleColor; ctx.fillRect(-PLAYER_SIZE / 2, -PLAYER_SIZE / 2, PLAYER_SIZE, PLAYER_SIZE); }
+      ctx.restore();
+
+      // Draw Active Flame Cone
+      if (activeFlameCone && now < activeFlameCone.endTime) {
+        ctx.save();
+        ctx.globalAlpha = 0.6; 
+        const gradient = ctx.createRadialGradient(activeFlameCone.x, activeFlameCone.y, 0, activeFlameCone.x, activeFlameCone.y, activeFlameCone.range * 0.8);
+        gradient.addColorStop(0, 'rgba(255, 165, 0, 0.8)'); 
+        gradient.addColorStop(0.5, 'rgba(255, 100, 0, 0.6)');
+        gradient.addColorStop(1, 'rgba(255, 69, 0, 0.2)'); 
+        ctx.fillStyle = gradient;
+
+        ctx.beginPath();
+        ctx.moveTo(activeFlameCone.x, activeFlameCone.y);
+        const angle1 = activeFlameCone.angle - activeFlameCone.coneAngleRad / 2;
+        const angle2 = activeFlameCone.angle + activeFlameCone.coneAngleRad / 2;
+        ctx.lineTo(activeFlameCone.x + activeFlameCone.range * Math.cos(angle1), activeFlameCone.y + activeFlameCone.range * Math.sin(angle1));
+        ctx.arc(activeFlameCone.x, activeFlameCone.y, activeFlameCone.range, angle1, angle2);
+        ctx.lineTo(activeFlameCone.x, activeFlameCone.y);
+        ctx.closePath();
+        ctx.fill();
+        ctx.restore();
+      } else if (activeFlameCone && now >= activeFlameCone.endTime) {
+        gameCtx.activeFlameCone = null; 
+      }
+
+
+      if (playerChar?.defaultWeaponType === WeaponType.AutoHomingRocket && now - lastAutoRocketFireTime > AUTO_ROCKET_COOLDOWN_MS / currentSpeedMultiplier) {
+        const targetEnemy = findNearestEnemy(playerPos.x + PLAYER_SIZE / 2, playerPos.y + PLAYER_SIZE / 2, AUTO_ROCKET_RANGE);
+        if (targetEnemy) {
+            projectiles.push({
+                id: generateId(), x: playerPos.x + PLAYER_SIZE / 2, y: playerPos.y + PLAYER_SIZE / 2, 
+                width: 6, height: 12, type: WeaponType.AutoHomingRocket, targetEnemyId: targetEnemy.id,
+                dx: lastHorizontalDirection === 'right' ? AUTO_ROCKET_SPEED : -AUTO_ROCKET_SPEED, dy: 0,
+                rotation: lastHorizontalDirection === 'right' ? 0 : Math.PI, owner: 'player', 
+                ownerPlayerId: playerData.id, damage: 15 * getPlayerDamageMultiplier(), isHoming: true,
+            });
+            gameCtx.lastAutoRocketFireTime = now; playSound(SoundEvent.Fire, adminConfig);
+        }
+      }
+      
+      if (adminConfig.redArrowActive && playerChar?.defaultWeaponType === WeaponType.RedArrowDefense && 
+          now - lastRedArrowShotTime > (adminConfig.redArrowCooldownMs || COOLDOWN_RED_ARROW_DEFENSE) / currentSpeedMultiplier) {
+          
+          const shotCount = adminConfig.redArrowShotCount || RED_ARROW_DEFAULT_SHOT_COUNT;
+          const alreadyTargetedIds: string[] = [];
+          let firedThisBurst = false;
+
+          for (let shotNum = 0; shotNum < shotCount; shotNum++) {
+            let targetDetails: { x: number, y: number, id?: string, isProjectileTarget?: boolean } | null = null;
+            
+            const nearestEnemyProj = findNearestEnemyProjectile(playerPos.x + PLAYER_SIZE / 2, playerPos.y + PLAYER_SIZE / 2, undefined, alreadyTargetedIds);
+            if (nearestEnemyProj) {
+                targetDetails = { 
+                    x: nearestEnemyProj.x + nearestEnemyProj.width / 2, 
+                    y: nearestEnemyProj.y + nearestEnemyProj.height / 2, 
+                    id: nearestEnemyProj.id, 
+                    isProjectileTarget: true 
+                };
+                if (nearestEnemyProj.id) alreadyTargetedIds.push(nearestEnemyProj.id);
+            } else {
+                const nearestEnemyEntity = findNearestEnemy(playerPos.x + PLAYER_SIZE / 2, playerPos.y + PLAYER_SIZE / 2, undefined, alreadyTargetedIds);
+                if (nearestEnemyEntity) {
+                    targetDetails = { 
+                        x: nearestEnemyEntity.x + nearestEnemyEntity.size / 2, 
+                        y: nearestEnemyEntity.y + nearestEnemyEntity.size / 2, 
+                        id: nearestEnemyEntity.id, 
+                        isProjectileTarget: false 
+                    };
+                    if (nearestEnemyEntity.id) alreadyTargetedIds.push(nearestEnemyEntity.id);
+                }
+            }
+
+            if (targetDetails) {
+                const projectileStartX = playerPos.x + PLAYER_SIZE / 2;
+                const projectileStartY = playerPos.y + PLAYER_SIZE / 2;
+                const angleToTarget = Math.atan2(targetDetails.y - projectileStartY, targetDetails.x - projectileStartX);
+                const speed = adminConfig.redArrowProjectileSpeed || RED_ARROW_PROJECTILE_SPEED;
+
+                projectiles.push({
+                    id: generateId(),
+                    x: projectileStartX - RED_ARROW_PROJECTILE_WIDTH / 2,
+                    y: projectileStartY - RED_ARROW_PROJECTILE_HEIGHT / 2,
+                    width: RED_ARROW_PROJECTILE_WIDTH,
+                    height: RED_ARROW_PROJECTILE_HEIGHT,
+                    dx: Math.cos(angleToTarget) * speed,
+                    dy: Math.sin(angleToTarget) * speed,
+                    rotation: angleToTarget, 
+                    type: WeaponType.RedArrowProjectile,
+                    owner: 'player',
+                    ownerPlayerId: playerData.id,
+                    damage: adminConfig.redArrowDamage || RED_ARROW_PROJECTILE_DAMAGE,
+                    isHoming: true, 
+                    targetProjectileId: targetDetails.isProjectileTarget ? targetDetails.id : undefined,
+                    targetEnemyId: !targetDetails.isProjectileTarget ? targetDetails.id : undefined,
+                });
+                firedThisBurst = true;
+            }
+          } 
+
+          if (firedThisBurst) {
+            gameCtx.lastRedArrowShotTime = now;
+            playSound(SoundEvent.Fire, adminConfig); 
+          }
+      }
+
+
+      const shouldPlayerAutoFire = () => {
+        if (!adminConfig.playerAutoFire || !playerChar || playerChar.type !== 'player') return false;
+        if (playerChar.defaultWeaponType === WeaponType.AutoHomingRocket || 
+            playerChar.defaultWeaponType === WeaponType.SummonFishMinion ||
+            playerChar.defaultWeaponType === WeaponType.RedArrowDefense) return false; 
+        if (playerChar.autoFireHealthThreshold !== undefined && playerChar.autoFireHealthThreshold > 0) { const healthPercentage = (gameCtx.playerHealth / playerData.maxHealth) * 100; return healthPercentage <= playerChar.autoFireHealthThreshold; }
+        return playerChar.autoFireHealthThreshold === 0 || playerChar.autoFireHealthThreshold === undefined;
+      };
+      if (shouldPlayerAutoFire()) firePlayerProjectile();
+      if (keysPressed[' '] && playerChar?.defaultWeaponType !== WeaponType.AutoHomingRocket && playerChar?.defaultWeaponType !== WeaponType.RedArrowDefense) firePlayerProjectile();
+
+      for (let i = projectiles.length - 1; i >= 0; i--) {
+        const p = projectiles[i];
+        if (p.gravityEffect) p.dy = (p.dy || 0) + BOMB_GRAVITY * currentSpeedMultiplier;
+
+        let projSpeedMultiplier = currentSpeedMultiplier;
+
+        if (p.owner === 'player') {
+            if (p.isHoming) {
+                let targetEntity: Enemy | Projectile | null = null;
+                if (p.type === WeaponType.RedArrowProjectile) {
+                    if (p.targetProjectileId) {
+                        targetEntity = projectiles.find(ep => ep.id === p.targetProjectileId && ep.owner === 'enemy') || null;
+                        if (!targetEntity) { 
+                           const newTargetProj = findNearestEnemyProjectile(p.x, p.y, undefined, projectiles.filter(proj => proj.targetProjectileId === p.targetProjectileId && proj.id !== p.id).map(proj => proj.targetProjectileId!)); 
+                           if (newTargetProj) { p.targetProjectileId = newTargetProj.id; targetEntity = newTargetProj; }
+                           else { p.targetProjectileId = undefined; p.targetEnemyId = findNearestEnemy(p.x, p.y, undefined, projectiles.filter(proj => proj.targetEnemyId === p.targetEnemyId && proj.id !== p.id).map(proj => proj.targetEnemyId!))?.id; } 
+                        }
+                    }
+                    if (!targetEntity && p.targetEnemyId) { 
+                        targetEntity = enemies.find(e => e.id === p.targetEnemyId) || null;
+                         if (!targetEntity) p.targetEnemyId = findNearestEnemy(p.x, p.y, undefined, projectiles.filter(proj => proj.targetEnemyId === p.targetEnemyId && proj.id !== p.id).map(proj => proj.targetEnemyId!))?.id; 
+                    }
+                } else if (p.targetEnemyId) { 
+                    targetEntity = enemies.find(e => e.id === p.targetEnemyId) || null;
+                     if (!targetEntity && (p.type === WeaponType.AutoTargetMissile || p.type === WeaponType.AutoHomingRocket)) {
+                         p.targetEnemyId = findNearestEnemy(p.x, p.y)?.id; 
+                     }
+                }
+
+                if (targetEntity) {
+                    const targetSize = (targetEntity as Enemy).size || (targetEntity as Projectile).width; 
+                    const targetCenterX = targetEntity.x + targetSize / 2; 
+                    const targetCenterY = targetEntity.y + targetSize / 2;
+                    const angle = Math.atan2(targetCenterY - (p.y + p.height/2) , targetCenterX - (p.x + p.width/2));
+                    const speed = p.type === WeaponType.RedArrowProjectile ? (adminConfig.redArrowProjectileSpeed || RED_ARROW_PROJECTILE_SPEED) : (p.type === WeaponType.AutoHomingRocket ? AUTO_ROCKET_SPEED : MISSILE_SPEED);
+                    p.dx = Math.cos(angle) * speed; p.dy = Math.sin(angle) * speed;
+                    p.rotation = angle;
+                } else {
+                    if (p.isHoming && !p.dx && !p.dy) { 
+                       const speed = p.type === WeaponType.RedArrowProjectile ? (adminConfig.redArrowProjectileSpeed || RED_ARROW_PROJECTILE_SPEED) : (p.type === WeaponType.AutoHomingRocket ? AUTO_ROCKET_SPEED : MISSILE_SPEED);
+                       p.dx = lastHorizontalDirection === 'right' ? speed : -speed; 
+                       p.dy = 0;
+                       p.rotation = lastHorizontalDirection === 'right' ? 0 : Math.PI;
+                    }
+                }
+            }
+            p.x += (p.dx || 0) * projSpeedMultiplier; p.y += (p.dy || 0) * projSpeedMultiplier;
+
+            ctx.save(); ctx.translate(p.x + p.width / 2, p.y + p.height / 2); 
+            ctx.rotate(p.rotation || 0 );
+            
+            const projectileImage = p.imageKey ? loadedGameAssets?.[p.imageKey] : null;
+            if (projectileImage && projectileImage.complete && projectileImage.naturalHeight !== 0) {
+                ctx.drawImage(projectileImage, -p.width / 2, -p.height / 2, p.width, p.height);
+            } else if (p.type === WeaponType.RedArrowProjectile) {
+                const redArrowImg = loadedGameAssets['redArrowImage'];
+                if (redArrowImg && redArrowImg.complete && redArrowImg.naturalHeight !== 0) {
+                    ctx.drawImage(redArrowImg, -p.width / 2, -p.height / 2, p.width, p.height);
+                } else { 
+                    ctx.fillStyle = "red";
+                    ctx.beginPath(); 
+                    ctx.moveTo(p.height / 2, 0); 
+                    ctx.lineTo(-p.height / 2, -p.width / 2);
+                    ctx.lineTo(-p.height / 2, p.width / 2);
+                    ctx.closePath();
+                    ctx.fill();
+                }
+            } else { 
+                let projColor = 'yellow';
+                if (p.type === WeaponType.Rocket || p.type === WeaponType.AutoTargetMissile || p.type === WeaponType.AutoHomingRocket) projColor = 'orange';
+                else if (p.type === WeaponType.Laser) projColor = 'red';
+                else if (p.type === WeaponType.HeavyBullet) projColor = '#ADD8E6';
+                else if (p.type === WeaponType.SwordThrow) projColor = 'silver';
+                else if (p.type === WeaponType.Bomb) projColor = 'darkred';
+                else if (p.type === WeaponType.FishMinionBullet) projColor = 'cyan';
+                
+                ctx.fillStyle = projColor;
+                ctx.fillRect(-p.width / 2, -p.height / 2, p.width, p.height);
+            }
+            ctx.restore();
+
+
+            if (p.type === WeaponType.RedArrowProjectile) {
+                let redArrowHit = false;
+                for (let k = projectiles.length - 1; k >= 0; k--) {
+                    if (i === k) continue; 
+                    const otherProj = projectiles[k];
+                    if (otherProj.owner === 'enemy' &&
+                        p.x < otherProj.x + otherProj.width && p.x + p.width > otherProj.x &&
+                        p.y < otherProj.y + otherProj.height && p.y + p.height > otherProj.y) {
+                        projectiles.splice(k, 1); 
+                        projectiles.splice(i, 1); 
+                        redArrowHit = true;
+                        playSound(SoundEvent.EnemyKill, adminConfig); 
+                        break; 
+                    }
+                }
+                if (redArrowHit) continue; 
+
+                for (let j = enemies.length - 1; j >= 0; j--) {
+                    const enemy = enemies[j];
+                     if (p.x < enemy.x + enemy.size && p.x + p.width > enemy.x &&
+                         p.y < enemy.y + enemy.size && p.y + p.height > enemy.y) {
+                        const damageDealt = p.damage || RED_ARROW_PROJECTILE_DAMAGE; 
+                        enemy.health -= damageDealt;
+                        addFloatingText(`-${Math.round(damageDealt)}`, enemy.x + enemy.size / 2, enemy.y, 'red');
+                        spawnBlood(enemy.x + enemy.size / 2, enemy.y + enemy.size / 2, 10);
+                        projectiles.splice(i, 1); 
+                        if (enemy.health <= 0) { /* enemy death handled below */ }
+                        redArrowHit = true;
+                        break;
+                    }
+                }
+                if (redArrowHit) continue;
+            }
+
+
+            if (p.type === WeaponType.Bomb && p.creationTime && now - p.creationTime >= BOMB_FUSE_MS) {
+                createExplosion(p.x + p.width/2, p.y + p.height/2, BOMB_EXPLOSION_RADIUS, BOMB_EXPLOSION_DURATION_MS, 'rgba(255,165,0,0.7)', BOMB_DAMAGE);
+                playSound(SoundEvent.EnemyKill, adminConfig);
+                projectiles.splice(i, 1); continue;
+            }
+
+            if (p.type !== WeaponType.RedArrowProjectile) { 
+                for (let j = enemies.length - 1; j >= 0; j--) {
+                    const enemy = enemies[j];
+                    if (p.x < enemy.x + enemy.size && p.x + p.width > enemy.x &&
+                        p.y < enemy.y + enemy.size && p.y + p.height > enemy.y) {
+                        
+                        const damageDealt = p.damage || 10;
+                        enemy.health -= damageDealt;
+                        addFloatingText(`-${Math.round(damageDealt)}`, enemy.x + enemy.size / 2, enemy.y, 'red');
+                        spawnBlood(enemy.x + enemy.size / 2, enemy.y + enemy.size / 2, 5);
+                        
+                        if (p.type !== WeaponType.Laser && p.type !== WeaponType.Bomb && p.type !== WeaponType.FishMinionBullet && p.type !== WeaponType.DogeLauncher) {
+                            projectiles.splice(i, 1);
+                        } else if (p.type === WeaponType.DogeLauncher && p.imageKey) { // DogeLauncher projectiles are consumed on hit
+                            projectiles.splice(i,1);
+                        }
+
+
+                        if (enemy.health <= 0) {
+                        } else {
+                            gameCtx.gameSpeedMultiplier = FAST_SPEED_MULTIPLIER;
+                            gameCtx.speedChangeActiveUntil = now + SPEED_CHANGE_DURATION_MS;
+                        }
+                        break; 
+                    }
+                }
+            }
+
+        } else { // Enemy projectile
+            p.x += (p.dx || 0) * projSpeedMultiplier; p.y += (p.dy || 0) * projSpeedMultiplier;
+            ctx.fillStyle = 'magenta';
+            ctx.save(); ctx.translate(p.x + p.width / 2, p.y + p.height / 2); ctx.rotate(p.rotation || 0);
+            ctx.fillRect(-p.width / 2, -p.height / 2, p.width, p.height);
+            ctx.restore();
+
+            if (p.x < playerPos.x + PLAYER_SIZE && p.x + p.width > playerPos.x &&
+                p.y < playerPos.y + PLAYER_SIZE && p.y + p.height > playerPos.y) {
+                projectiles.splice(i, 1);
+                gameCtx.playerHealth -= (p.damage || 10);
+                spawnBlood(playerPos.x + PLAYER_SIZE/2, playerPos.y + PLAYER_SIZE/2, 8, 'rgba(0,100,255,');
+                addFloatingText(`-${p.damage || 10}`, playerPos.x, playerPos.y, 'orange');
+                gameCtx.gameSpeedMultiplier = SLOW_SPEED_MULTIPLIER;
+                gameCtx.speedChangeActiveUntil = now + SPEED_CHANGE_DURATION_MS;
+                if (gameCtx.playerHealth <= 0) { onGameOver(score); return; }
+            }
+        }
+        if (p.x > ctx.canvas.width || p.x + p.width < 0 || p.y > ctx.canvas.height || p.y + p.height < 0) {
+          projectiles.splice(i, 1);
+        }
+      }
+
+      for (let i = activeExplosions.length - 1; i >= 0; i--) {
+        const explosion = activeExplosions[i]; const elapsed = now - explosion.creationTime;
+        if (elapsed >= explosion.duration) { activeExplosions.splice(i, 1); continue; }
+        const progress = elapsed / explosion.duration; explosion.currentRadius = explosion.maxRadius * progress;
+        const opacity = 1 - progress;
+        ctx.beginPath(); ctx.arc(explosion.x, explosion.y, explosion.currentRadius, 0, Math.PI * 2);
+        ctx.fillStyle = explosion.color.replace(/[^,]+(?=\))/, opacity.toFixed(2)); ctx.fill();
+      }
+
+      for (let i = fishMinions.length - 1; i >= 0; i--) {
+        const minion = fishMinions[i];
+        const targetX = playerPos.x + PLAYER_SIZE / 2 + Math.cos(minion.angleToPlayer) * minion.distanceFromPlayer;
+        const targetY = playerPos.y + PLAYER_SIZE / 2 + Math.sin(minion.angleToPlayer) * minion.distanceFromPlayer;
+        minion.x += (targetX - minion.x) * FISH_MINION_FOLLOW_LERP_FACTOR * currentSpeedMultiplier;
+        minion.y += (targetY - minion.y) * FISH_MINION_FOLLOW_LERP_FACTOR * currentSpeedMultiplier;
+        minion.angleToPlayer += 0.005 * currentSpeedMultiplier;
+        const minionImage = loadedGameAssets?.['seaToken'] || null; 
+        if (minionImage) ctx.drawImage(minionImage, minion.x, minion.y, minion.size, minion.size);
+        else { ctx.fillStyle = 'aqua'; ctx.beginPath(); ctx.arc(minion.x + minion.size / 2, minion.y + minion.size / 2, minion.size / 2, 0, Math.PI * 2); ctx.fill(); }
+        ctx.fillStyle = 'grey'; ctx.fillRect(minion.x, minion.y - 8, minion.size, 4);
+        ctx.fillStyle = 'green'; ctx.fillRect(minion.x, minion.y - 8, minion.size * (minion.health / minion.maxHealth), 4);
+        if (!minion.targetEnemyId || !enemies.find(e => e.id === minion.targetEnemyId)) minion.targetEnemyId = findNearestEnemy(minion.x, minion.y, FISH_MINION_ATTACK_RANGE)?.id || null;
+        if (minion.targetEnemyId && now - minion.lastFireTime > FISH_MINION_FIRE_COOLDOWN_MS / currentSpeedMultiplier) {
+            const target = enemies.find(e => e.id === minion.targetEnemyId);
+            if (target) fireFishMinionProjectile(minion, target); else minion.targetEnemyId = null;
+        }
+      }
+
+      if (now - lastEnemySpawnTime > enemySpawnInterval / currentSpeedMultiplier) { spawnEnemy(); lastEnemySpawnTime = now; }
+
+      for (let i = enemies.length - 1; i >= 0; i--) {
+        const enemy = enemies[i];
+        if (!enemy) continue; // Should not happen, but defensive check
+
+        enemy.x += enemy.speedX * currentSpeedMultiplier;
+        enemy.y += enemy.speedY * currentSpeedMultiplier;
+        enemy.isFacingRight = enemy.speedX > 0; 
+        
+        // Process Burn DoT & Fire Exposure
+        if (enemy.isBurning && enemy.health > 0) {
+            enemy.accumulatedFireExposureMs = (enemy.accumulatedFireExposureMs || 0) + timeDelta;
+            enemy.burnTickCooldownRemaining = (enemy.burnTickCooldownRemaining || 0) - timeDelta;
+
+            if (enemy.burnTickCooldownRemaining <= 0) {
+                if (enemy.burnTicksRemaining && enemy.burnTicksRemaining > 0) {
+                    const burnDmg = enemy.burnDamagePerTick || 0;
+                    enemy.health -= burnDmg;
+                    addFloatingText(`-${Math.round(burnDmg)}🔥`, enemy.x + enemy.size / 2, enemy.y - 5, 'red');
+                    spawnBlood(enemy.x + enemy.size / 2, enemy.y + enemy.size / 2, 1, 'rgba(255,0,0,');
+                    enemy.burnTicksRemaining--;
+                    enemy.burnTickCooldownRemaining = FLAME_CONE_DOT_TICK_INTERVAL_MS;
+                }
+                if (!enemy.burnTicksRemaining || enemy.burnTicksRemaining <= 0) {
+                    enemy.isBurning = false;
+                    // If burn ended naturally and didn't explode, reset exposure
+                    if ( (enemy.accumulatedFireExposureMs || 0) < EXPLOSIVE_CORE_THRESHOLD_MS) {
+                         enemy.accumulatedFireExposureMs = 0;
+                    }
+                }
+            }
+        } else if (enemy.health > 0) { // Not burning
+             // If not burning and didn't explode, ensure exposure is reset.
+             // This mainly catches cases where an enemy might have had exposure but burn stopped.
+            if ((enemy.accumulatedFireExposureMs || 0) > 0 && (enemy.accumulatedFireExposureMs || 0) < EXPLOSIVE_CORE_THRESHOLD_MS){
+                enemy.accumulatedFireExposureMs = 0;
+            }
+        }
+
+        // Check for Explosive Core
+        if (enemy.health > 0 && (enemy.accumulatedFireExposureMs || 0) >= EXPLOSIVE_CORE_THRESHOLD_MS) {
+            const alreadyChainedThisExplosion = new Set<string>();
+            triggerExplosiveCore(enemy, alreadyChainedThisExplosion, gameCtx); 
+            // triggerExplosiveCore will set enemy.isBurning = false and reset enemy.accumulatedFireExposureMs
+        }
+
+
+        // Drawing enemy and health bar
+        const enemyCharDetails = runtimeGameCharacters[enemy.characterId];
+        const enemyImage = enemyCharDetails && loadedGameAssets[`enemyChar_${enemyCharDetails.id}`] ? loadedGameAssets[`enemyChar_${enemyCharDetails.id}`] : loadedGameAssets['defaultEnemy'];
+        
+        ctx.save();
+        const heatAmount = (enemy.health > 0 && (enemy.accumulatedFireExposureMs || 0) > 0) ? Math.min(1, (enemy.accumulatedFireExposureMs || 0) / EXPLOSIVE_CORE_THRESHOLD_MS) : 0;
+
+        if (enemy.isBurning || heatAmount > 0) {
+            ctx.globalAlpha = 1.0; // Reset global alpha before specific drawing
+            if (enemy.isBurning) {
+                for (let k = 0; k < 3; k++) { 
+                    ctx.fillStyle = Math.random() < 0.5 ? 'rgba(255,165,0,0.7)' : 'rgba(255,0,0,0.6)';
+                    const particleX = enemy.x + Math.random() * enemy.size;
+                    const particleY = enemy.y + Math.random() * enemy.size - (now % 1000 / 100); 
+                    ctx.beginPath();
+                    ctx.arc(particleX, particleY, Math.random() * 2 + 1, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+        }
+        
+        ctx.translate(enemy.x + enemy.size / 2, enemy.y + enemy.size / 2);
+        if (!enemy.isFacingRight && enemyImage) ctx.scale(-1, 1); 
+        
+        if (enemyImage) {
+            ctx.drawImage(enemyImage, -enemy.size / 2, -enemy.size / 2, enemy.size, enemy.size);
+            if (heatAmount > 0) { // Apply orange tint for heating up
+                ctx.globalAlpha = heatAmount * 0.4; // Tint intensity
+                ctx.fillStyle = 'orange';
+                ctx.fillRect(-enemy.size / 2, -enemy.size / 2, enemy.size, enemy.size);
+            }
+        } else { 
+            ctx.font = `${enemy.size * 0.8}px Arial`; 
+            ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+            const name = enemyCharDetails?.name || "E";
+            const emojiMatch = name.match(/\p{Emoji}/u);
+            const charToDraw = emojiMatch ? emojiMatch[0] : name.charAt(0);
+            ctx.fillText(charToDraw, 0, 0);
+             if (heatAmount > 0) { // Apply orange tint for heating up (fallback)
+                ctx.globalAlpha = heatAmount * 0.4; 
+                ctx.fillStyle = 'orange';
+                // Approximate fill for text based character
+                const textMetrics = ctx.measureText(charToDraw);
+                const actualWidth = textMetrics.actualBoundingBoxRight - textMetrics.actualBoundingBoxLeft;
+                const actualHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
+                ctx.fillRect(-actualWidth / 2, -actualHeight / 2, actualWidth, actualHeight);
+            }
+        }
+        ctx.restore(); 
+        
+        if (enemy.health > 0) { // Only draw health bar for living enemies
+            ctx.fillStyle = 'grey'; ctx.fillRect(enemy.x, enemy.y - 8, enemy.size, 4);
+            ctx.fillStyle = enemy.isBurning || heatAmount > 0.5 ? 'darkorange' : 'red'; 
+            ctx.fillRect(enemy.x, enemy.y - 8, enemy.size * (enemy.health / Math.max(1, enemy.maxHealth)), 4);
+        }
+
+
+        // Death and Off-screen Removal
+        if (enemy.health <= 0) {
+            onGainSeaTokensAndXP(TOKEN_VALUE_ON_COLLECT, (runtimeGameCharacters[enemy.characterId]?.baseHealth || ENEMY_BASE_HEALTH) / 2);
+            gameCtx.score += 10;
+            addFloatingText('+10 Score', enemy.x, enemy.y - 10, 'lime');
+            enemies.splice(i, 1); 
+            playSound(SoundEvent.EnemyKill, adminConfig);
+            gameCtx.gameSpeedMultiplier = KILL_SPEED_MULTIPLIER;
+            gameCtx.speedChangeActiveUntil = now + KILL_SPEED_DURATION_MS;
+            if (gameCtx.seaTokensOnScreen.length < MAX_SEA_TOKENS_ON_SCREEN) {
+                 gameCtx.seaTokensOnScreen.push({
+                    id: generateId(), x: enemy.x + enemy.size / 2, y: enemy.y + enemy.size / 2,
+                    value: TOKEN_VALUE_ON_COLLECT, creationTime: now, isAttracting: true 
+                 });
+            }
+        } else if ((enemy.speedX < 0 && enemy.x + enemy.size < 0) || (enemy.speedX > 0 && enemy.x > ctx.canvas.width) || enemy.y + enemy.size < 0 || enemy.y > ctx.canvas.height) {
+          enemies.splice(i, 1); 
+        }
+        
+        if (enemy.health > 0 && adminConfig.enemiesAutoTarget && now - enemy.lastFireTime > adminConfig.enemyFireCooldownMs / currentSpeedMultiplier) fireEnemyProjectile(enemy);
+      };
+
+      floatingTexts.forEach((ft, index) => {
+        ft.y -= 0.5 * currentSpeedMultiplier; ctx.fillStyle = ft.color; ctx.font = 'bold 12px Orbitron, sans-serif';
+        ctx.fillText(ft.text, ft.x, ft.y);
+        if (now - ft.timestamp > FLOATING_TEXT_DURATION_MS) floatingTexts.splice(index, 1);
+      });
+
+      animationFrameId = requestAnimationFrame(gameLoop);
+    };
+    animationFrameId = requestAnimationFrame(gameLoop);
+    return () => { cancelAnimationFrame(animationFrameId); };
+  }, [
+      playerData, onGameOver, onGainSeaTokensAndXP, addFloatingText, fireEnemyProjectile,
+      firePlayerProjectile, spawnEnemy, findNearestEnemy, findNearestEnemyProjectile, getPlayerSpeed, getPlayerDamageMultiplier,
+      createExplosion, runtimeGameCharacters, adminConfig, loadedGameAssets, fireFishMinionProjectile, spawnBlood, triggerExplosiveCore 
+  ]);
+
+  return (
+    <canvas
+        ref={canvasRef}
+        width={800}
+        height={600}
+        className="border-2 border-theme-accent shadow-2xl rounded-lg bg-transparent"
+        aria-label="Doge Whale Wars Game Canvas"
+    />
+  );
+};

Modal.tsx

@@ -0,0 +1,107 @@
+
+import React from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  isMaximizable?: boolean;
+  isMaximized?: boolean;
+  onToggleMaximize?: () => void;
+}
+
+const MaximizeIcon: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4">
+    <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
+  </svg>
+);
+
+const RestoreIcon: React.FC = () => (
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4">
+    <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0-2-2h-3M3 16h3a2 2 0 0 0 2-2v-3"></path>
+  </svg>
+);
+
+
+export const Modal: React.FC<ModalProps> = ({ 
+  isOpen, 
+  onClose, 
+  title, 
+  children, 
+  size = 'md',
+  isMaximizable = false,
+  isMaximized = false,
+  onToggleMaximize 
+}) => {
+  if (!isOpen) return null;
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-xl',
+    lg: 'max-w-3xl',
+    xl: 'max-w-5xl',
+  };
+
+  const titleId = 'modal-title-id'; // Unique ID for aria-labelledby
+
+  const outerDialogClasses = [
+    "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fadeIn",
+    isMaximized ? "p-0" : "p-4",
+  ].join(' ');
+
+  const innerDialogClasses = [
+    "bg-theme-dark border-2 border-theme-border shadow-2xl relative flex flex-col",
+    isMaximized 
+      ? "w-screen h-screen max-w-full max-h-full rounded-none p-4" 
+      : `rounded-xl p-6 ${sizeClasses[size]} max-h-[90vh] w-full`,
+    "animate-slideDown", 
+  ].join(' ');
+
+
+  return (
+    <div
+      className={outerDialogClasses}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className={innerDialogClasses}>
+        <div className="flex justify-between items-center mb-4 pb-4 border-b border-theme-border">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={onClose}
+              className="w-8 h-8 flex items-center justify-center rounded-full bg-pink-600 hover:bg-pink-700 text-white text-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-500"
+              aria-label="Go back"
+            >
+              &larr; {/* Left arrow HTML entity */}
+            </button>
+            <h2 id={titleId} className="text-2xl font-bold text-theme-accent">{title}</h2>
+          </div>
+          <div className="flex items-center gap-2">
+            {isMaximizable && onToggleMaximize && (
+              <button
+                onClick={onToggleMaximize}
+                className="w-8 h-8 flex items-center justify-center rounded-full bg-pink-600 hover:bg-pink-700 text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-500"
+                aria-label={isMaximized ? "Restore modal size" : "Maximize modal"}
+              >
+                {isMaximized ? <RestoreIcon /> : <MaximizeIcon />}
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className="w-8 h-8 flex items-center justify-center rounded-full bg-pink-600 hover:bg-pink-700 text-white text-xl transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-500"
+              aria-label="Close modal"
+            >
+              &times;
+            </button>
+          </div>
+        </div>
+        <div className="overflow-y-auto pr-2 flex-grow">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

NftMarketplaceModal.tsx

@@ -0,0 +1,365 @@
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal } from '../Modal.tsx';
+import { NFT, Rarity, PlayerData, BreedingParents, BreedingResult, MarketplaceTabType, AdminConfig, NFTCoinEffect } from '../../types.ts';
+import { BREEDING_COMBINATIONS, BREEDING_TIME_SECONDS } from '../../constants.ts';
+
+interface NftMarketplaceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  playerData: PlayerData;
+  runtimeNftDefinitions: Record<string, NFT>; 
+  onPurchaseNft: (nftId: string) => void;
+  onEquipNft: (nftId: string) => void;
+  onBreedNfts: (nftId: string) => void;
+  onStakeNft: (nftId: string, slotIndex?: number) => void; // slotIndex is optional here for compatibility
+  onUnstakeNft: (nftId: string, slotIndex?: number) => void; // slotIndex is optional
+}
+
+const NFTCard: React.FC<{
+  nft: NFT;
+  isOwned: boolean;
+  isEquipped: boolean;
+  isStakedInSlot: boolean; // Updated prop
+  canAfford: boolean;
+  onPurchase?: () => void;
+  onEquip?: () => void;
+  onSelectForBreeding?: () => void;
+  isSelectedForBreeding?: boolean;
+  isBreedingMode?: boolean;
+  isMarketView?: boolean; 
+  onGoToStaking?: () => void; 
+}> = ({ nft, isOwned, isEquipped, isStakedInSlot, canAfford, onPurchase, onEquip, onSelectForBreeding, isSelectedForBreeding, isBreedingMode, isMarketView, onGoToStaking }) => {
+  
+  const rarityColor = {
+    [Rarity.Common]: 'bg-theme-success', // This is not a button, so not changing
+    [Rarity.Rare]: 'bg-theme-accent animate-pulseCustom', // This is not a button
+    [Rarity.Legendary]: 'bg-theme-warning animate-spin', // This is not a button
+  };
+
+  const cardClasses = [
+    'nft-card bg-theme-dark border border-theme-border rounded-lg p-4 flex flex-col justify-between transition-all duration-300 hover:shadow-xl hover:-translate-y-1',
+    isSelectedForBreeding ? 'ring-2 ring-pink-500' : '', // Changed ring color
+    isStakedInSlot && !isBreedingMode ? 'border-green-500 shadow-green-500/30' : '' 
+  ].join(' ');
+
+
+  return (
+    <div className={cardClasses}>
+      <div className="relative">
+        <img src={nft.image} alt={nft.name} className="w-full h-40 object-contain rounded-md mb-2 bg-black/20" />
+        <span className={`token-counter absolute top-1 right-1 px-2 py-1 text-xs font-bold text-white rounded ${rarityColor[nft.rarity]}`}>
+          {nft.rarity.toUpperCase()}
+        </span>
+        {isStakedInSlot && (
+            <span className="absolute top-1 left-1 px-2 py-1 text-xs font-bold text-theme-dark bg-green-400 rounded">STAKED IN SLOT</span>
+        )}
+      </div>
+      <h4 className="text-lg font-semibold text-theme-accent mb-1">{nft.name}</h4>
+      <p className="text-xs text-gray-400 mb-1 h-10 overflow-y-auto">{nft.description}</p>
+      {!isBreedingMode && nft.price > 0 && <p className="text-sm font-bold text-theme-warning mb-2">Price: {nft.price} Sea Tokens</p>}
+      
+      <div className="mt-auto space-y-2">
+        {isBreedingMode ? (
+            <button
+            onClick={onSelectForBreeding}
+            disabled={isStakedInSlot} 
+            className={`w-full py-2 px-4 text-sm font-bold rounded-md transition-colors duration-200 text-white ${isSelectedForBreeding ? 'bg-pink-700' : 'bg-pink-600 hover:bg-pink-700'} ${isStakedInSlot ? 'bg-pink-400 text-gray-100 cursor-not-allowed' : ''}`}
+            title={isStakedInSlot ? "Unstake NFT from Staking Vault slot to use for breeding" : ""}
+            >
+            {isStakedInSlot ? 'Staked (Unstake to Breed)' : (isSelectedForBreeding ? 'Selected' : 'Select for Breeding')}
+            </button>
+        ) : isOwned ? ( 
+          <>
+            {isEquipped ? (
+              <span className="block w-full py-2 px-4 text-sm font-bold rounded-md bg-pink-700/30 text-pink-400 text-center">Equipped</span> // Adjusted equipped span
+            ) : (
+              <button
+                onClick={onEquip}
+                disabled={isStakedInSlot} 
+                className={`w-full py-2 px-4 text-sm font-bold rounded-md text-white transition-colors duration-200 ${isStakedInSlot ? 'bg-pink-400 text-gray-100 opacity-50 cursor-not-allowed' : 'bg-pink-600 hover:bg-pink-700'}`}
+                title={isStakedInSlot ? "Unstake NFT from Staking Vault slot to equip" : "Equip this NFT"}
+              >
+                {isStakedInSlot ? 'Staked (Unstake to Equip)' : 'Equip'}
+              </button>
+            )}
+            {!isMarketView && isStakedInSlot && onGoToStaking && ( 
+                 <button
+                    onClick={onGoToStaking}
+                    className="w-full py-2 px-4 text-sm font-bold rounded-md bg-pink-600 hover:bg-pink-700 text-white transition-colors duration-200"
+                >
+                    Manage Staking
+                </button>
+            )}
+             {!isMarketView && !isStakedInSlot && onGoToStaking && ( 
+                 <button
+                    onClick={onGoToStaking}
+                    className="w-full py-2 px-4 text-sm font-bold rounded-md bg-pink-600 hover:bg-pink-700 text-white transition-colors duration-200"
+                >
+                    Go to Stake
+                </button>
+            )}
+          </>
+        ) : ( 
+            <button
+            onClick={onPurchase}
+            disabled={!canAfford}
+            className={`w-full py-2 px-4 text-sm font-bold rounded-md transition-colors duration-200 text-white ${canAfford ? 'bg-pink-600 hover:bg-pink-700' : 'bg-pink-400 text-gray-100 cursor-not-allowed'}`}
+            >
+            {canAfford ? 'Buy Now' : 'Too Expensive'}
+            </button>
+        )}
+        {isOwned && !isBreedingMode && (
+            <p className={`text-xs text-center mt-1 ${isStakedInSlot ? 'text-green-400' : 'text-gray-500'}`}>
+              {isStakedInSlot ? 'Status: Staked in Slot' : 'Status: Owned'}
+            </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+
+export const NftMarketplaceModal: React.FC<NftMarketplaceModalProps> = ({ isOpen, onClose, playerData, runtimeNftDefinitions, onPurchaseNft, onEquipNft, onBreedNfts, onStakeNft, onUnstakeNft }) => {
+  const [activeTab, setActiveTab] = useState<MarketplaceTabType>('market');
+  const [breedingParents, setBreedingParents] = useState<BreedingParents>({ parent1: null, parent2: null });
+  const [breedingResultPreview, setBreedingResultPreview] = useState<BreedingResult | null>(null);
+  const [isBreeding, setIsBreeding] = useState(false);
+  const [breedingProgress, setBreedingProgress] = useState(0);
+  const [breedingTimeLeft, setBreedingTimeLeft] = useState(BREEDING_TIME_SECONDS);
+
+  const ownedNfts = playerData.nftInventory.map(id => runtimeNftDefinitions[id]).filter(Boolean);
+
+  const handlePurchase = (nftId: string) => {
+    if (playerData.seaTokens >= runtimeNftDefinitions[nftId].price) {
+      onPurchaseNft(nftId);
+    }
+  };
+  
+  const handleSelectForBreeding = (nftId: string) => {
+    if (playerData.stakedNftSlots.includes(nftId)) return; 
+
+    setBreedingParents(prev => {
+      if (prev.parent1 === nftId) return { ...prev, parent1: null };
+      if (prev.parent2 === nftId) return { ...prev, parent2: null };
+      if (!prev.parent1) return { ...prev, parent1: nftId };
+      if (!prev.parent2) return { ...prev, parent2: nftId };
+      return prev; 
+    });
+  };
+
+  useEffect(() => {
+    if (breedingParents.parent1 && breedingParents.parent2) {
+      const sortedIds = [breedingParents.parent1, breedingParents.parent2].sort();
+      const combinationKey = `${sortedIds[0]}_${sortedIds[1]}`;
+      const result = BREEDING_COMBINATIONS[combinationKey];
+      if (result) {
+        setBreedingResultPreview(result);
+      } else {
+        const p1 = runtimeNftDefinitions[breedingParents.parent1];
+        const p2 = runtimeNftDefinitions[breedingParents.parent2];
+        setBreedingResultPreview({
+          name: `Hybrid ${p1.name.substring(0,3)}-${p2.name.substring(0,3)}`,
+          description: "A new unique whale!",
+          rarity: Math.random() > 0.5 ? p1.rarity : p2.rarity,
+          image: runtimeNftDefinitions.doge_whale.image, 
+          effect: {}, 
+        });
+      }
+    } else {
+      setBreedingResultPreview(null);
+    }
+  }, [breedingParents, runtimeNftDefinitions]);
+
+  const startBreedingProcess = useCallback(() => {
+    if (!breedingParents.parent1 || !breedingParents.parent2 || !breedingResultPreview) return;
+    if (playerData.stakedNftSlots.includes(breedingParents.parent1) || playerData.stakedNftSlots.includes(breedingParents.parent2) ) {
+        alert("Cannot breed with staked NFTs. Please unstake them first from the Staking Vault slots.");
+        return;
+    }
+    setIsBreeding(true);
+    setBreedingProgress(0);
+    setBreedingTimeLeft(BREEDING_TIME_SECONDS);
+
+    const interval = setInterval(() => {
+      setBreedingProgress(prev => {
+        const newProgress = prev + (100 / BREEDING_TIME_SECONDS);
+        if (newProgress >= 100) {
+          clearInterval(interval);
+          setIsBreeding(false);
+          const bredNftId = breedingResultPreview.name.toLowerCase().replace(/\s+/g, '_');
+          onBreedNfts(bredNftId); 
+          setBreedingParents({ parent1: null, parent2: null });
+          setBreedingResultPreview(null);
+          return 100;
+        }
+        return newProgress;
+      });
+      setBreedingTimeLeft(prev => Math.max(0, prev - 1));
+    }, 1000);
+  }, [breedingParents, breedingResultPreview, onBreedNfts, playerData.stakedNftSlots]);
+  
+  const resetModalState = () => {
+    setActiveTab('market');
+    setBreedingParents({ parent1: null, parent2: null });
+    setBreedingResultPreview(null);
+    setIsBreeding(false);
+    setBreedingProgress(0);
+  };
+
+  const handleClose = () => {
+    resetModalState();
+    onClose();
+  };
+
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="Doge Whale NFT Hub 🧬" size="xl">
+      <div className="flex mb-4 border-b border-theme-border">
+        {(['market', 'my-nfts', 'breeding'] as MarketplaceTabType[]).map(tab => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`py-2 px-4 font-semibold transition-colors duration-200 text-white ${activeTab === tab ? 'bg-pink-700 border-b-2 border-pink-400' : 'bg-pink-500 hover:bg-pink-600'}`}
+          >
+            {tab.charAt(0).toUpperCase() + tab.slice(1).replace('-',' ')}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'market' && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {Object.values(runtimeNftDefinitions).filter(nft => nft.price > 0).map(nft => (
+            <NFTCard
+              key={nft.id}
+              nft={nft}
+              isOwned={playerData.nftInventory.includes(nft.id)}
+              isEquipped={playerData.equippedNftId === nft.id}
+              isStakedInSlot={playerData.stakedNftSlots.includes(nft.id)}
+              canAfford={playerData.seaTokens >= nft.price}
+              onPurchase={() => handlePurchase(nft.id)}
+              onEquip={() => onEquipNft(nft.id)}
+              isMarketView={true}
+            />
+          ))}
+        </div>
+      )}
+
+      {activeTab === 'my-nfts' && (
+         ownedNfts.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {ownedNfts.map(nft => (
+                <NFTCard
+                key={nft.id}
+                nft={nft}
+                isOwned={true}
+                isEquipped={playerData.equippedNftId === nft.id}
+                isStakedInSlot={playerData.stakedNftSlots.includes(nft.id)}
+                canAfford={true} 
+                onEquip={() => onEquipNft(nft.id)}
+                isMarketView={false}
+                onGoToStaking={() => { /* Consider a callback here to open staking modal from App.tsx */ setActiveTab('market'); onClose(); /* Then App.tsx opens staking */ }}
+                />
+            ))}
+            </div>
+        ) : (
+            <p className="text-gray-400 text-center py-8">You don't own any NFTs yet. Visit the market!</p>
+        )
+      )}
+
+      {activeTab === 'breeding' && (
+        <div className="breeding-section p-4 bg-theme-primary/30 rounded-lg">
+          <h3 className="text-xl font-bold mb-4 text-theme-accent">Breeding Lab 🧬</h3>
+          {isBreeding ? (
+            <div className="text-center">
+              <p className="text-lg mb-2">Breeding in progress...</p>
+              <div className="w-full bg-gray-700 rounded-full h-6 mb-2">
+                <div className="bg-pink-600 h-6 rounded-full transition-all duration-1000 ease-linear" style={{ width: `${breedingProgress}%` }}> {/* Changed progress bar color */}
+                  <span className="text-xs font-medium text-white px-2">{Math.round(breedingProgress)}%</span>
+                </div>
+              </div>
+              <p className="text-theme-accent">Time Left: {breedingTimeLeft}s</p>
+              {breedingResultPreview && (
+                 <div className="mt-4 p-4 bg-theme-dark rounded-lg border border-theme-border">
+                    <h4 className="text-lg font-semibold text-theme-warning">Creating: {breedingResultPreview.name}</h4>
+                    <img src={breedingResultPreview.image} alt={breedingResultPreview.name} className="w-32 h-32 object-contain rounded-md mx-auto my-2 bg-black/30" />
+                 </div>
+              )}
+            </div>
+          ) : (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                <div>
+                  <h4 className="font-semibold mb-2">Parent 1 Slot</h4>
+                  <div className={`p-2 border-2 ${breedingParents.parent1 ? 'border-pink-500' : 'border-dashed border-theme-border'} rounded-lg min-h-[100px] flex items-center justify-center bg-theme-dark`}>
+                    {breedingParents.parent1 && runtimeNftDefinitions[breedingParents.parent1] ? (
+                      <div className="text-center">
+                        <img src={runtimeNftDefinitions[breedingParents.parent1].image} alt={runtimeNftDefinitions[breedingParents.parent1].name} className="w-20 h-20 object-contain mx-auto"/>
+                        <p className="text-sm mt-1">{runtimeNftDefinitions[breedingParents.parent1].name}</p>
+                      </div>
+                    ) : <p className="text-gray-500">Select an NFT from below</p>}
+                  </div>
+                </div>
+                <div>
+                  <h4 className="font-semibold mb-2">Parent 2 Slot</h4>
+                  <div className={`p-2 border-2 ${breedingParents.parent2 ? 'border-pink-500' : 'border-dashed border-theme-border'} rounded-lg min-h-[100px] flex items-center justify-center bg-theme-dark`}>
+                    {breedingParents.parent2 && runtimeNftDefinitions[breedingParents.parent2] ? (
+                       <div className="text-center">
+                        <img src={runtimeNftDefinitions[breedingParents.parent2].image} alt={runtimeNftDefinitions[breedingParents.parent2].name} className="w-20 h-20 object-contain mx-auto"/>
+                        <p className="text-sm mt-1">{runtimeNftDefinitions[breedingParents.parent2].name}</p>
+                      </div>
+                    ) : <p className="text-gray-500">Select an NFT from below</p>}
+                  </div>
+                </div>
+              </div>
+
+              <h4 className="font-semibold mb-2 text-lg">Select Your NFTs for Breeding:</h4>
+                {ownedNfts.filter(nft => !playerData.stakedNftSlots.includes(nft.id)).length >= 1 ? (
+                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 mb-6 max-h-60 overflow-y-auto p-2 bg-black/20 rounded">
+                        {ownedNfts.filter(nft => !playerData.stakedNftSlots.includes(nft.id)).map(nft => (
+                        <NFTCard
+                            key={nft.id}
+                            nft={nft}
+                            isOwned={true}
+                            isEquipped={false} 
+                            isStakedInSlot={false} 
+                            canAfford={true}  
+                            onSelectForBreeding={() => handleSelectForBreeding(nft.id)}
+                            isSelectedForBreeding={breedingParents.parent1 === nft.id || breedingParents.parent2 === nft.id}
+                            isBreedingMode={true}
+                        />
+                        ))}
+                    </div>
+                ) : (
+                    <p className="text-gray-400 text-center py-4">You need at least 2 unstaked NFTs to breed. Check the Staking Vault or acquire more NFTs.</p>
+                )}
+
+
+              {breedingResultPreview && (
+                <div className="my-6 p-4 bg-theme-dark rounded-lg border border-theme-border">
+                  <h4 className="text-lg font-semibold text-theme-warning">Possible Offspring:</h4>
+                  <div className="flex items-center gap-4 mt-2">
+                    <img src={breedingResultPreview.image} alt={breedingResultPreview.name} className="w-24 h-24 object-contain rounded-md bg-black/30" />
+                    <div>
+                      <p className="font-bold">{breedingResultPreview.name}</p>
+                      <p className="text-sm text-gray-300">{breedingResultPreview.description}</p>
+                      <p className="text-xs text-gray-400">Rarity: {breedingResultPreview.rarity}</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <button
+                onClick={startBreedingProcess}
+                disabled={!breedingParents.parent1 || !breedingParents.parent2 || !breedingResultPreview || isBreeding}
+                className="w-full py-3 px-6 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded-lg transition-all duration-300 disabled:bg-pink-400 disabled:text-gray-100 disabled:cursor-not-allowed"
+              >
+                Start Breeding ({BREEDING_TIME_SECONDS}s)
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </Modal>
+  );
+};

NftStakingModal.tsx

@@ -0,0 +1,199 @@
+
+import React, { useState, useEffect } from 'react';
+import { Modal } from '../Modal';
+import { PlayerData, NFT, Rarity, AdminConfig } from '../../types';
+import { MAX_STAKING_SLOTS, BASE_STAKING_REWARD_PER_MINUTE, INITIAL_MINING_POWER, MINING_POWER_UPGRADE_COST_BASE, MINING_POWER_UPGRADE_COST_FACTOR } from '../../constants';
+
+interface NftStakingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  playerData: PlayerData;
+  runtimeNftDefinitions: Record<string, NFT>; 
+  adminConfig: AdminConfig; 
+  onStakeNftInSlot: (nftId: string, slotIndex: number) => void;
+  onUnstakeNftFromSlot: (nftId: string, slotIndex: number) => void;
+  onClaimRewards: () => void;
+  onUpgradeNftMiningPower: (nftId: string, slotIndex: number) => void;
+}
+
+export const NftStakingModal: React.FC<NftStakingModalProps> = ({ 
+    isOpen, 
+    onClose, 
+    playerData, 
+    runtimeNftDefinitions, 
+    adminConfig, 
+    onStakeNftInSlot, 
+    onUnstakeNftFromSlot, 
+    onClaimRewards,
+    onUpgradeNftMiningPower 
+}) => {
+  const [claimableRewards, setClaimableRewards] = useState(0);
+  const [selectedNftToStake, setSelectedNftToStake] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+        if (playerData.lastNftRewardClaimTime) {
+            const now = Date.now();
+            const minutesStakedGlobal = (now - playerData.lastNftRewardClaimTime) / (1000 * 60);
+            let totalRewards = 0;
+            playerData.stakedNftSlots.forEach(nftId => {
+                if (nftId) {
+                    const miningPower = playerData.nftMiningPowers[nftId] || INITIAL_MINING_POWER;
+                    const nftReward = Math.floor(minutesStakedGlobal * BASE_STAKING_REWARD_PER_MINUTE * miningPower);
+                    totalRewards += nftReward;
+                }
+            });
+            setClaimableRewards(totalRewards > 0 ? totalRewards : 0);
+        } else {
+            setClaimableRewards(0);
+        }
+        setSelectedNftToStake(null); // Reset selection when modal opens
+    }
+  }, [isOpen, playerData.stakedNftSlots, playerData.nftMiningPowers, playerData.lastNftRewardClaimTime]);
+
+  const ownedUnstakedNfts = playerData.nftInventory
+    .map(id => runtimeNftDefinitions[id])
+    .filter(nft => nft && !playerData.stakedNftSlots.includes(nft.id));
+
+  const getUpgradeCost = (nftId: string): number => {
+    const currentPower = playerData.nftMiningPowers[nftId] || INITIAL_MINING_POWER;
+    return Math.floor(MINING_POWER_UPGRADE_COST_BASE * (MINING_POWER_UPGRADE_COST_FACTOR ** (currentPower -1)));
+  };
+  
+  const handleSelectNftForStaking = (nftId: string) => {
+    setSelectedNftToStake(nftId === selectedNftToStake ? null : nftId);
+  };
+
+  const handleStakeIntoSlot = (slotIndex: number) => {
+    if (selectedNftToStake) {
+      onStakeNftInSlot(selectedNftToStake, slotIndex);
+      setSelectedNftToStake(null); // Reset selection after staking
+    }
+  };
+
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="NFT Staking Vault 💎" size="xl">
+      <div className="space-y-6">
+        {/* Staking Information */}
+        <div className="p-4 bg-theme-primary/30 rounded-lg">
+          <h4 className="text-lg font-semibold mb-2 text-theme-accent">NFT Slot Staking: Power Up Your Earnings!</h4>
+          <ul className="list-disc list-inside text-sm text-gray-300 space-y-1">
+            <li>Stake your NFTs into one of the {MAX_STAKING_SLOTS} available slots to earn Sea Tokens.</li>
+            <li>Base Reward: <span className="font-bold text-theme-warning">{BASE_STAKING_REWARD_PER_MINUTE} Sea Token per minute</span> for each staked NFT.</li>
+            <li>Mining Power: Each NFT starts with <span className="font-bold text-theme-info">{INITIAL_MINING_POWER}x</span> Mining Power. Rewards are multiplied by this power.</li>
+            <li>Upgrade Power: Spend Sea Tokens to increase an NFT's Mining Power and boost its earnings. Costs increase per level.</li>
+            <li>Staked NFTs in these slots cannot be equipped or used for breeding.</li>
+            <li>Unstake NFTs at any time. Rewards must be claimed manually.</li>
+          </ul>
+        </div>
+
+        {/* Claim Rewards Section */}
+        <div className="p-4 bg-theme-primary/30 rounded-lg">
+          <h4 className="text-lg font-semibold mb-2 text-theme-accent">Claim Your NFT Staking Rewards</h4>
+          <p className="text-gray-300">
+            Claimable Rewards from Slots: <span className="font-bold text-theme-success">{claimableRewards.toFixed(0)} Sea Tokens</span>
+          </p>
+          <button
+            onClick={onClaimRewards}
+            disabled={claimableRewards <= 0}
+            className="mt-3 w-full py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded-md transition-colors duration-200 disabled:bg-pink-400 disabled:text-gray-100 disabled:cursor-not-allowed"
+          >
+            Claim All Slot Staking Rewards
+          </button>
+        </div>
+
+        {/* Staking Slots Display */}
+        <div className="p-4 bg-theme-primary/30 rounded-lg">
+          <h4 className="text-lg font-semibold mb-3 text-theme-accent">Your Staking Slots ({playerData.stakedNftSlots.filter(id => id !== null).length}/{MAX_STAKING_SLOTS} Used)</h4>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+            {playerData.stakedNftSlots.map((nftId, index) => {
+              const nft = nftId ? runtimeNftDefinitions[nftId] : null;
+              const miningPower = nftId ? (playerData.nftMiningPowers[nftId] || INITIAL_MINING_POWER) : 0;
+              const upgradeCost = nftId ? getUpgradeCost(nftId) : 0;
+
+              return (
+                <div key={`slot-${index}`} className={`p-3 border-2 rounded-lg flex flex-col items-center text-center min-h-[280px] justify-between ${nft ? 'border-pink-500 bg-theme-dark/70' : 'border-dashed border-theme-border bg-theme-dark/30'}`}>
+                  {nft && nftId ? (
+                    <>
+                      <div>
+                        <img src={nft.image} alt={nft.name} className="w-24 h-24 object-contain rounded-md mb-2 bg-black/30" />
+                        <p className="text-sm font-semibold text-theme-white truncate w-full" title={nft.name}>{nft.name}</p>
+                        <p className="text-xs text-gray-400 capitalize mb-1">{nft.rarity}</p>
+                        <p className="text-xs text-theme-info">Mining Power: {miningPower}x</p>
+                        <p className="text-xs text-yellow-400">Earning: {(BASE_STAKING_REWARD_PER_MINUTE * miningPower).toFixed(1)} ST/min</p>
+                      </div>
+                      <div className="space-y-1.5 mt-2 w-full">
+                        <button
+                            onClick={() => onUpgradeNftMiningPower(nftId, index)}
+                            disabled={playerData.seaTokens < upgradeCost}
+                            className="w-full py-1.5 px-2 text-xs font-bold rounded-md bg-pink-600 hover:bg-pink-700 text-white transition-colors duration-200 disabled:bg-pink-400 disabled:text-gray-100 disabled:cursor-not-allowed"
+                            title={`Cost: ${upgradeCost} Sea Tokens`}
+                        >
+                            Upgrade Power ({upgradeCost} ST)
+                        </button>
+                        <button
+                            onClick={() => onUnstakeNftFromSlot(nftId, index)}
+                            className="w-full py-1.5 px-2 text-xs font-bold rounded-md bg-pink-600 hover:bg-pink-700 text-white transition-colors duration-200"
+                        >
+                            Unstake
+                        </button>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="flex flex-col items-center justify-center h-full">
+                      <p className="text-gray-500 mb-2">Empty Slot {index + 1}</p>
+                      {selectedNftToStake ? (
+                        <button 
+                            onClick={() => handleStakeIntoSlot(index)}
+                            className="py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-semibold rounded-md text-sm"
+                        >
+                            Stake '{runtimeNftDefinitions[selectedNftToStake]?.name.substring(0,15)}...' Here
+                        </button>
+                      ) : (
+                        <p className="text-xs text-gray-600">(Select an NFT below to stake here)</p>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        
+        {/* Your Unstaked NFTs */}
+        <div className="p-4 bg-theme-primary/30 rounded-lg">
+          <h4 className="text-lg font-semibold mb-3 text-theme-accent">Your Unstaked NFTs (Available to Stake in Slots)</h4>
+          {ownedUnstakedNfts.length > 0 ? (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3 max-h-60 overflow-y-auto pr-2">
+              {ownedUnstakedNfts.map(nft => (
+                nft ? (
+                  <div 
+                    key={nft.id} 
+                    onClick={() => handleSelectNftForStaking(nft.id)}
+                    className={`p-2 border rounded-lg flex flex-col items-center text-center cursor-pointer transition-all
+                                ${playerData.equippedNftId === nft.id ? 'opacity-70 border-yellow-500' : 'border-theme-border hover:border-pink-500'} 
+                                ${selectedNftToStake === nft.id ? 'ring-2 ring-pink-500 bg-pink-700/20' : 'bg-theme-dark/50'}`}
+                    title={playerData.equippedNftId === nft.id ? "Unequip to stake if desired for other effects (auto-unequips on stake)" : `Select ${nft.name} to stake`}
+                    >
+                     <img src={nft.image} alt={nft.name} className="w-20 h-20 object-contain rounded-md mb-1 bg-black/30" />
+                     <p className="text-xs font-semibold text-theme-white truncate w-full" title={nft.name}>{nft.name}</p>
+                     <p className="text-xxs text-gray-400 capitalize">{nft.rarity}</p>
+                     {playerData.equippedNftId === nft.id && <p className="text-xxs text-yellow-500">(Equipped)</p>}
+                  </div>
+                ) : null
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-400 text-center py-4">You have no NFTs available to stake in slots. Either all are staked, or you need to acquire more!</p>
+          )}
+           {selectedNftToStake && (
+             <p className="text-center mt-3 text-sm text-theme-accent">
+               Selected: <span className="font-bold">{runtimeNftDefinitions[selectedNftToStake]?.name}</span>. Now click an empty slot above to stake it.
+             </p>
+           )}
+        </div>
+      </div>
+    </Modal>
+  );
+};

NotificationToast.tsx

@@ -0,0 +1,47 @@
+
+import React, { useEffect } from 'react';
+import { NotificationMessage } from '../types.ts';
+
+interface NotificationToastProps {
+  notification: NotificationMessage;
+  onDismiss: (id: string) => void;
+}
+
+export const NotificationToast: React.FC<NotificationToastProps> = ({ notification, onDismiss }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onDismiss(notification.id);
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [notification.id, onDismiss]);
+
+  const baseClasses = "fixed bottom-5 left-1/2 transform -translate-x-1/2 p-4 rounded-lg shadow-lg text-white font-semibold z-[1000] animate-fadeIn";
+  const typeClasses = {
+    success: "bg-theme-success text-theme-dark",
+    error: "bg-theme-danger text-theme-white",
+    info: "bg-theme-primary text-theme-white",
+    warning: "bg-theme-warning text-theme-dark",
+    special: "bg-theme-accent text-theme-dark animate-pulseCustom",
+  };
+
+  return (
+    <div className={`${baseClasses} ${typeClasses[notification.type]}`}>
+      {notification.message}
+    </div>
+  );
+};
+
+interface NotificationHostProps {
+  notifications: NotificationMessage[];
+  onDismiss: (id: string) => void;
+}
+
+export const NotificationHost: React.FC<NotificationHostProps> = ({ notifications, onDismiss }) => {
+  return (
+    <>
+      {notifications.map((notification) => (
+        <NotificationToast key={notification.id} notification={notification} onDismiss={onDismiss} />
+      ))}
+    </>
+  );
+};

PlayerProfileModal.tsx

@@ -0,0 +1,371 @@
+
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Modal } from '../Modal.tsx';
+import { PlayerData, NFT, AdminConfig, GameCharacter, WeaponType, SavedReply } from '../../types.ts';
+import { LEVEL_XP_THRESHOLDS, BASE_STAKING_REWARD_PER_MINUTE, INITIAL_MINING_POWER } from '../../constants.ts';
+import { SoundControlBar } from '../SoundControlBar.tsx';
+import { generateId } from '../../utils.ts';
+import { GoogleGenAI, GenerateContentResponse } from "@google/genai";
+
+interface PlayerProfileModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  playerData: PlayerData;
+  runtimeNftDefinitions: Record<string, NFT>;
+  adminConfig: AdminConfig;
+  onClaimNftStakingRewards: () => void;
+  initialPlayerName: string;
+  initialSelectedCharacterId: string;
+  onUpdatePlayerName: (name: string) => void;
+  onUpdateSelectedCharacterId: (charId: string) => void;
+  runtimeGameCharacters: Record<string, GameCharacter>;
+  masterVolume: number;
+  isAppMuted: boolean;
+  onVolumeChange: (volume: number) => void;
+  onMuteToggle: () => void;
+}
+
+interface AiChatMessage {
+  id: string;
+  sender: 'You' | 'AI Game Guide' | 'Error';
+  text: string;
+  timestamp: number;
+}
+
+const StatItem: React.FC<{ label: string; value: string | number; className?: string }> = ({ label, value, className }) => (
+  <div className={`flex justify-between py-2 border-b border-theme-primary/50 ${className}`}>
+    <span className="text-gray-400">{label}:</span>
+    <span className="font-semibold text-theme-white">{value}</span>
+  </div>
+);
+
+export const PlayerProfileModal: React.FC<PlayerProfileModalProps> = ({
+  isOpen,
+  onClose,
+  playerData,
+  runtimeNftDefinitions,
+  adminConfig,
+  onClaimNftStakingRewards,
+  initialPlayerName,
+  initialSelectedCharacterId,
+  onUpdatePlayerName,
+  onUpdateSelectedCharacterId,
+  runtimeGameCharacters,
+  masterVolume,
+  isAppMuted,
+  onVolumeChange,
+  onMuteToggle,
+}) => {
+  const equippedNft = playerData.equippedNftId ? runtimeNftDefinitions[playerData.equippedNftId] : null;
+  const ownedNfts: NFT[] = playerData.nftInventory.map(id => runtimeNftDefinitions[id]).filter(Boolean) as NFT[];
+  const [claimableNftRewards, setClaimableNftRewards] = useState(0);
+
+  const [modalPlayerName, setModalPlayerName] = useState(initialPlayerName);
+  const [modalSelectedCharacterId, setModalSelectedCharacterId] = useState(initialSelectedCharacterId);
+
+  // AI Player Chat State
+  const [aiChatMessages, setAiChatMessages] = useState<AiChatMessage[]>([]);
+  const [currentPlayerMessage, setCurrentPlayerMessage] = useState('');
+  const [isAiResponding, setIsAiResponding] = useState(false);
+  const playerChatLogRef = useRef<HTMLDivElement>(null);
+  const geminiAi = useMemo(() => new GoogleGenAI({ apiKey: process.env.API_KEY! }), []);
+
+
+  useEffect(() => {
+    if (isOpen) {
+      setModalPlayerName(initialPlayerName);
+      setModalSelectedCharacterId(initialSelectedCharacterId);
+      // Reset AI chat when modal opens
+      setAiChatMessages([]);
+      setCurrentPlayerMessage('');
+      setIsAiResponding(false);
+
+
+      if (playerData.stakedNftSlots.some(id => id !== null) && playerData.lastNftRewardClaimTime) {
+        const now = Date.now();
+        const minutesStakedGlobal = (now - playerData.lastNftRewardClaimTime) / (1000 * 60);
+        let totalRewards = 0;
+        playerData.stakedNftSlots.forEach(nftId => {
+            if (nftId) {
+                const miningPower = playerData.nftMiningPowers[nftId] || INITIAL_MINING_POWER;
+                const nftReward = Math.floor(minutesStakedGlobal * BASE_STAKING_REWARD_PER_MINUTE * miningPower);
+                totalRewards += nftReward;
+            }
+        });
+        setClaimableNftRewards(totalRewards > 0 ? totalRewards : 0);
+      } else {
+        setClaimableNftRewards(0);
+      }
+    }
+  }, [isOpen, initialPlayerName, initialSelectedCharacterId, playerData.stakedNftSlots, playerData.nftMiningPowers, playerData.lastNftRewardClaimTime, adminConfig.globalNftStakingRate]);
+
+  const handleSaveChanges = () => {
+    if (!modalPlayerName.trim()) {
+        alert("Player name cannot be empty.");
+        return;
+    }
+    onUpdatePlayerName(modalPlayerName);
+    onUpdateSelectedCharacterId(modalSelectedCharacterId);
+    onClose();
+  };
+
+  const handlePlayerSendMessage = async () => {
+    if (currentPlayerMessage.trim() === '' || isAiResponding) return;
+
+    const userMessage: AiChatMessage = {
+      id: generateId(),
+      sender: 'You',
+      text: currentPlayerMessage,
+      timestamp: Date.now(),
+    };
+    setAiChatMessages(prev => [...prev, userMessage]);
+    setIsAiResponding(true);
+    const currentQuery = currentPlayerMessage;
+    setCurrentPlayerMessage('');
+
+    try {
+      let knowledgeBaseText = "";
+      if (adminConfig.savedReplies && adminConfig.savedReplies.length > 0) {
+          knowledgeBaseText = "You have access to the following predefined knowledge base. Use this information when relevant to the user's query:\n";
+          adminConfig.savedReplies.forEach(reply => {
+              knowledgeBaseText += `- Topic/Question: ${reply.topic}\n  Answer/Information: ${reply.answer}\n`;
+          });
+          knowledgeBaseText += "---\n";
+      }
+
+      const systemInstruction = `${knowledgeBaseText}You are a friendly and helpful game guide for 'Doge Whale Wars', an underwater MMORPG. Players control Doge Whales, fight enemies, collect NFTs, and earn Sea Tokens. Answer player questions about gameplay, features, tips, or any aspect of the game. Keep your responses concise and easy to understand.`;
+      
+      const response: GenerateContentResponse = await geminiAi.models.generateContent({
+        model: 'gemini-2.5-flash-preview-04-17',
+        contents: currentQuery,
+        config: { systemInstruction: systemInstruction },
+      });
+
+      const aiTextResponse = response.text;
+      const aiMessage: AiChatMessage = {
+        id: generateId(),
+        sender: 'AI Game Guide',
+        text: aiTextResponse,
+        timestamp: Date.now(),
+      };
+      setAiChatMessages(prev => [...prev, aiMessage]);
+
+    } catch (error: any) {
+      console.error("Error with Player AI Chat:", error);
+      const errorMessage: AiChatMessage = {
+        id: generateId(),
+        sender: 'Error',
+        text: `AI Error: ${error.message || 'Could not get a response from the game guide.'}`,
+        timestamp: Date.now(),
+      };
+      setAiChatMessages(prev => [...prev, errorMessage]);
+    } finally {
+      setIsAiResponding(false);
+    }
+  };
+
+  useEffect(() => {
+    if (playerChatLogRef.current) {
+      playerChatLogRef.current.scrollTop = playerChatLogRef.current.scrollHeight;
+    }
+  }, [aiChatMessages]);
+
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Crypto Cetacean Chronicles 📊" size="lg">
+      <div className="space-y-6">
+
+        {/* Sound Control Section */}
+        <div className="p-4 bg-theme-secondary/40 rounded-lg">
+            <h4 className="text-xl font-semibold mb-3 text-theme-accent border-b border-theme-border pb-2">Sound Settings</h4>
+            <div className="flex items-center justify-center">
+                <SoundControlBar
+                    volume={masterVolume}
+                    isMuted={isAppMuted}
+                    onVolumeChange={onVolumeChange}
+                    onMuteToggle={onMuteToggle}
+                />
+            </div>
+        </div>
+
+        {/* Character Customization Section */}
+        <div className="p-4 bg-theme-secondary/40 rounded-lg">
+            <h4 className="text-xl font-semibold mb-4 text-theme-accent border-b border-theme-border pb-2">Customize Your Whale</h4>
+            <div className="mb-6">
+              <label htmlFor="modalPlayerNameInput" className="block text-md font-medium text-gray-200 mb-2">Whale's Name:</label>
+              <input
+                id="modalPlayerNameInput"
+                type="text"
+                value={modalPlayerName}
+                onChange={(e) => setModalPlayerName(e.target.value)}
+                placeholder="Enter your whale's name"
+                className="w-full p-3 rounded-md bg-theme-dark border border-theme-border text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
+                aria-label="Enter your whale's name"
+              />
+            </div>
+
+            <div className="mb-6">
+                <label className="block text-md font-medium text-gray-200 mb-3">Choose Your Character:</label>
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-h-72 overflow-y-auto pr-1">
+                    {Object.values(runtimeGameCharacters).filter(char => char.type === 'player').map(char => (
+                        <button
+                            key={char.id}
+                            onClick={() => setModalSelectedCharacterId(char.id)}
+                            className={`p-3 rounded-lg border-2 transition-all duration-200 flex flex-col items-center text-left text-white ${modalSelectedCharacterId === char.id ? 'bg-pink-700 border-pink-400 ring-2 ring-pink-400' : 'bg-pink-500 border-pink-600 hover:bg-pink-600'}`}
+                            aria-pressed={modalSelectedCharacterId === char.id}
+                            aria-label={`Select character ${char.name}`}
+                        >
+                            <img src={char.image} alt={char.name} className="w-20 h-20 object-contain rounded-md mb-2 border border-theme-border/50 bg-black/20" />
+                            <span className="font-semibold text-sm text-white">{char.name}</span>
+                            <span className="text-xs text-gray-300 mt-1">Health: {char.baseHealth || 100}</span>
+                            <span className="text-xs text-gray-300 capitalize">Weapon: {char.defaultWeaponType?.replace(/_/g, ' ') || 'Standard'}</span>
+                             {char.canOneHitKill && <span className="text-xs text-yellow-400">Special: One-Hit Kill!</span>}
+                        </button>
+                    ))}
+                </div>
+            </div>
+             <button
+                onClick={handleSaveChanges}
+                className="w-full py-2.5 px-5 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded-lg transition-colors duration-200"
+            >
+                Save Profile Settings
+            </button>
+        </div>
+
+
+        {/* Player Info Section */}
+        <div className="p-4 bg-theme-primary/30 rounded-lg">
+          <h4 className="text-lg font-semibold mb-3 text-theme-accent">Player Stats</h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6">
+            <StatItem label="Current Name" value={playerData.name} />
+            <StatItem label="Level" value={playerData.level} />
+            <StatItem label="XP" value={`${playerData.xp} / ${playerData.maxXP}`} />
+            <StatItem label="Health" value={`${playerData.health} / ${playerData.maxHealth}`} />
+            <StatItem label="Sea Token Balance" value={playerData.seaTokens.toFixed(2)} />
+            <StatItem label="Score" value={playerData.score} />
+            <div className="md:col-span-2">
+              <label className="block text-sm font-medium text-gray-400 mb-1">XP Progress</label>
+              <div className="w-full bg-gray-700 rounded-full h-4">
+                <div
+                  className="bg-theme-accent h-4 rounded-full transition-all duration-500"
+                  style={{ width: `${(playerData.xp / playerData.maxXP) * 100}%` }}
+                >
+                   <span className="text-xs text-theme-dark font-medium pl-2">{`${Math.round((playerData.xp / playerData.maxXP) * 100)}%`}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* NFT Statistics & Staking */}
+        <div className="p-4 bg-theme-primary/30 rounded-lg">
+          <h4 className="text-lg font-semibold mb-3 text-theme-accent">NFT & Staking Stats</h4>
+           <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6">
+            <StatItem label="Total NFTs Owned" value={playerData.nftInventory.length} />
+            <StatItem label="Legendary NFTs" value={playerData.nftInventory.filter(id => runtimeNftDefinitions[id]?.rarity === 'legendary').length} />
+            <StatItem label="Equipped NFT" value={equippedNft ? equippedNft.name : 'None'} />
+             {equippedNft && <StatItem label="Equipped Effect" value={equippedNft.description} className="md:col-span-2"/>}
+            <StatItem label="Sea Tokens Staked (Direct)" value={playerData.stakedTokens.toFixed(2)} />
+            <StatItem label="NFTs Staked in Slots" value={playerData.stakedNftSlots.filter(id => id !== null).length} />
+            <StatItem label="Total Sea Token Staking Rewards" value={playerData.totalStakingRewards.toFixed(2)} />
+
+            {playerData.stakedNftSlots.some(id => id !== null) && (
+              <div className="md:col-span-2 mt-3 pt-3 border-t border-theme-border/50">
+                 <p className="text-sm text-gray-300 mb-1">Claimable NFT Slot Staking Rewards: <span className="font-bold text-theme-success">{claimableNftRewards.toFixed(0)} Sea Tokens</span></p>
+                 <p className="text-xs text-gray-400"> (Base Rate: {BASE_STAKING_REWARD_PER_MINUTE} ST/min/NFT, modified by Mining Power)</p>
+                 <button
+                    onClick={onClaimNftStakingRewards}
+                    disabled={claimableNftRewards <= 0}
+                    className="w-full mt-1 py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded transition-colors duration-200 disabled:bg-pink-400 disabled:text-gray-100 disabled:cursor-not-allowed"
+                  >
+                    Claim NFT Slot Rewards
+                  </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* NFT Inventory */}
+        <div className="p-4 bg-theme-primary/30 rounded-lg">
+          <h4 className="text-lg font-semibold mb-3 text-theme-accent">My NFT Collection 🎴</h4>
+          {ownedNfts.length > 0 ? (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 max-h-60 overflow-y-auto pr-2">
+              {ownedNfts.map(nft => (
+                <div key={nft.id} className={`p-2 rounded-lg border bg-theme-dark ${playerData.equippedNftId === nft.id ? 'border-pink-500 ring-2 ring-pink-500' : playerData.stakedNftSlots.includes(nft.id) ? 'border-green-500 ring-2 ring-green-500' : 'border-theme-border'}`}>
+                  <img src={nft.image} alt={nft.name} className="w-full h-20 object-contain rounded-md mb-1 bg-black/20"/>
+                  <p className="text-xs font-semibold text-center text-theme-white truncate" title={nft.name}>{nft.name}</p>
+                  <p className={`text-xs text-center ${ playerData.equippedNftId === nft.id ? 'text-pink-400 font-bold' : playerData.stakedNftSlots.includes(nft.id) ? 'text-green-400 font-bold' : 'text-gray-400'}`}>
+                    {playerData.equippedNftId === nft.id ? 'Equipped' : playerData.stakedNftSlots.includes(nft.id) ? 'Staked in Slot' : nft.rarity}
+                  </p>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-gray-400 text-center py-4">No NFTs in your collection yet.</p>
+          )}
+        </div>
+
+        {/* Player AI Chat Section */}
+        <div className="p-6 bg-gradient-to-b from-theme-secondary/60 to-theme-primary/80 rounded-xl shadow-2xl border border-theme-border/50">
+          <h4 className="text-2xl font-bold mb-4 text-theme-accent border-b-2 border-theme-accent/50 pb-3">AI Game Guide Chat 💬</h4>
+          <div
+            ref={playerChatLogRef}
+            className="h-80 overflow-y-auto p-4 rounded-lg border border-theme-border/30 mb-4 text-sm space-y-3 bg-cover bg-center relative"
+            style={{ backgroundImage: "url('https://images.pexels.com/photos/14089636/pexels-photo-14089636.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')" }}
+            aria-live="polite"
+          >
+            {/* Optional: Semi-transparent overlay for better readability if needed, though solid bubble backgrounds should suffice
+            <div className="absolute inset-0 bg-black/20 rounded-lg"></div> 
+            */}
+            {aiChatMessages.map((msg) => (
+              <div key={msg.id} className={`chat-message ${msg.sender === 'You' ? 'text-right' : 'text-left'}`}>
+                <span className={`relative inline-block p-3 rounded-xl max-w-[85%] shadow-md ${
+                    msg.sender === 'You' ? 'bg-gradient-to-br from-pink-500 to-purple-600 text-white' :
+                    msg.sender === 'AI Game Guide' ? 'bg-gradient-to-br from-blue-500 to-teal-600 text-white' :
+                    'bg-gradient-to-br from-red-500 to-orange-600 text-white' // Error
+                }`}>
+                  <span className="block text-xs font-semibold text-gray-200/90 mb-1">
+                    {msg.sender} - {new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                  </span>
+                  {msg.text.split('\n').map((line, idx) => <p key={idx} className="m-0 leading-relaxed">{line}</p>)}
+                </span>
+              </div>
+            ))}
+            {aiChatMessages.length === 0 && <p className="text-gray-200 text-center italic p-4 bg-black/30 rounded-lg">The AI Game Guide awaits your questions about Doge Whale Wars!</p>}
+            {isAiResponding && (
+                 <div className="text-left">
+                    <span className="relative inline-block p-3 rounded-xl max-w-[85%] shadow-md bg-gradient-to-br from-blue-400 to-teal-500 text-white">
+                        <span className="block text-xs font-semibold text-gray-200/90 mb-1">AI Game Guide typing...</span>
+                        <div className="flex items-center space-x-1.5">
+                            <div className="w-2.5 h-2.5 bg-pink-300 rounded-full animate-pulse" style={{animationDelay: '0s'}}></div>
+                            <div className="w-2.5 h-2.5 bg-pink-300 rounded-full animate-pulse" style={{animationDelay: '0.2s'}}></div>
+                            <div className="w-2.5 h-2.5 bg-pink-300 rounded-full animate-pulse" style={{animationDelay: '0.4s'}}></div>
+                        </div>
+                    </span>
+                </div>
+            )}
+          </div>
+          <div className="flex gap-3 items-center">
+            <input
+              type="text"
+              value={currentPlayerMessage}
+              onChange={(e) => setCurrentPlayerMessage(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handlePlayerSendMessage()}
+              placeholder="Ask the AI Game Guide..."
+              className="flex-grow p-3 text-base rounded-lg bg-theme-dark/70 border-2 border-theme-border/60 text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all placeholder-gray-400"
+              aria-label="Chat message input"
+              disabled={isAiResponding}
+            />
+            <button
+              onClick={handlePlayerSendMessage}
+              className="py-3 px-6 bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 text-white font-semibold rounded-lg shadow-md transition-all duration-200 transform hover:scale-105 disabled:opacity-60 disabled:hover:scale-100 disabled:cursor-not-allowed"
+              disabled={isAiResponding || currentPlayerMessage.trim() === ''}
+            >
+              {isAiResponding ? 'Sending...' : 'Send'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};

README.md

@@ -1,11 +1,14 @@
----
-title: Dogewhalewar
-emoji: 🐢
-colorFrom: green
-colorTo: pink
-sdk: docker
-pinned: false
-short_description: 'combat game '
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

SoundControlBar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface SoundControlBarProps {
+  volume: number; // 0 to 1
+  isMuted: boolean;
+  onVolumeChange: (volume: number) => void;
+  onMuteToggle: () => void;
+}
+
+export const SoundControlBar: React.FC<SoundControlBarProps> = ({
+  volume,
+  isMuted,
+  onVolumeChange,
+  onMuteToggle,
+}) => {
+  return (
+    <div className="flex items-center gap-2 p-1 bg-theme-primary/30 rounded-lg shadow">
+      <button
+        onClick={onMuteToggle}
+        className="px-2 py-1 text-lg bg-pink-600 hover:bg-pink-700 text-white rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-500"
+        aria-label={isMuted ? 'Unmute game sounds' : 'Mute game sounds'}
+        aria-pressed={isMuted}
+      >
+        {isMuted ? '🔇' : '🔊'}
+      </button>
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value={isMuted ? 0 : Math.round(volume * 100)}
+        onChange={(e) => {
+            const newVolume = parseInt(e.target.value, 10) / 100;
+            if (isMuted && newVolume > 0) { // If user interacts with slider while muted, unmute
+                onMuteToggle(); // This will trigger a re-render, onVolumeChange will apply the new volume
+            }
+            onVolumeChange(newVolume);
+        }}
+        className="w-20 h-2 accent-pink-500 cursor-pointer"
+        aria-label="Game volume"
+        disabled={isMuted} // Optionally disable slider when muted, or let it unmute
+      />
+    </div>
+  );
+};

SpinToWinModal.tsx

@@ -0,0 +1,1006 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Modal } from '../Modal';
+import { NotificationMessage, AdminConfig } from '../../types'; // Added AdminConfig
+import { generateId } from '../../utils';
+import { playSound, SoundEvent } from '../../sounds'; // Added playSound and SoundEvent
+
+interface SpinToWinModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  playerSeaTokens: number;
+  onAdjustSeaTokens: (amount: number) => void;
+  showNotification: (message: string, type?: NotificationMessage['type']) => void;
+  adminConfig: AdminConfig; // Added adminConfig
+}
+
+type SpinToWinTab = 'lottery' | 'spin' | 'rewards';
+
+interface LotteryActivity {
+  id: string;
+  ticketNumber: number;
+  message: string;
+}
+
+interface SpinActivity {
+  id: string;
+  spinNumber: number;
+  message: string;
+}
+
+interface WheelPrize {
+  type: 'dwhl' | 'extra_spin' | 'lottery_ticket';
+  value?: number; // For DWHL
+  display: string; // Text on the wheel
+  id: string; // Unique ID for the prize
+  isJackpot?: boolean; // For special win announcements
+}
+
+interface SpinGameState {
+  balance: number;
+  lastSpinTime: number;
+  spinning: boolean;
+  lottery: {
+    ticketPrice: number;
+    userTicketsThisSession: number;
+    currentTicketPrizes: Array<number | string>; // string for "Try Again" or "Miss"
+    isTicketActive: boolean;
+    revealedCardIndex: number | null;
+    activityLog: LotteryActivity[];
+    ticketsOnHand: number;
+    lastDailyTicketClaimTime: number; // New
+    lotteryWins: number; // New for trophies
+  };
+  spin: {
+    activityLog: SpinActivity[];
+    userSpinsThisSession: number;
+    hasExtraSpin?: boolean;
+  };
+  rewards: {
+    lastClaimTime: number; // For daily DWHL reward
+    streak: number;
+  };
+  referral: { // New for referral system
+    playerReferralCode: string;
+    enteredReferralCode: string | null;
+    referralBonusClaimed: boolean;
+  };
+}
+
+// Constants for the Spin & Win game
+const SPIN_COST = 5;
+const SPIN_COOLDOWN = 24 * 60 * 60 * 1000; 
+const LOTTERY_TICKET_PRICE = 10;
+const POSSIBLE_LOTTERY_PRIZES = [5, 10, 20, 50, 100]; 
+const DAILY_DWHL_REWARD_COOLDOWN = 24 * 60 * 60 * 1000; 
+const DAILY_TICKET_COOLDOWN = 24 * 60 * 60 * 1000;
+const MAX_LOTTERY_LOG_ENTRIES = 5;
+const MAX_SPIN_LOG_ENTRIES = 5;
+
+const WHEEL_PRIZES: WheelPrize[] = [
+  { type: 'dwhl', value: 1, display: '1 ST', id: 'ST_1' },
+  { type: 'extra_spin', display: '🔁 Spin Again!', id: 'EXTRA_SPIN' },
+  { type: 'dwhl', value: 5, display: '5 ST', id: 'ST_5' },
+  { type: 'lottery_ticket', display: '🎫 Lottery Ticket', id: 'LOTTERY_TICKET' },
+  { type: 'dwhl', value: 10, display: '10 ST', id: 'ST_10' },
+  { type: 'dwhl', value: 20, display: '20 ST', id: 'ST_20' },
+  { type: 'dwhl', value: 50, display: '50 ST', id: 'ST_50', isJackpot: true },
+  { type: 'dwhl', value: 2, display: '2 ST', id: 'ST_2' }, // Changed one prize for variety
+];
+
+const WHEEL_COLORS = [
+  'bg-gradient-to-br from-red-500 to-red-600',
+  'bg-gradient-to-br from-blue-500 to-blue-600',
+  'bg-gradient-to-br from-green-500 to-green-600',
+  'bg-gradient-to-br from-yellow-500 to-yellow-600',
+  'bg-gradient-to-br from-purple-500 to-purple-600',
+  'bg-gradient-to-br from-pink-500 to-pink-600',
+  'bg-gradient-to-br from-indigo-500 to-indigo-600',
+  'bg-gradient-to-br from-teal-500 to-teal-600'
+];
+
+const DAILY_REWARDS_STREAK = [
+  5, 7, 10, 12, 15, 18, 30, 10, 13, 16, 19, 22, 25, 40,
+  15, 18, 21, 24, 27, 30, 50, 20, 24, 28, 32, 36, 40, 75,
+  50, 150
+];
+
+const WHALE_BACKGROUND_IMAGE_URL = 'https://www.transparentpng.com/thumb/whale/GJTwCR-whale-vector-graphics-ocean-sea-transparent-background.png';
+
+const TROPHY_THRESHOLDS = { bronze: 3, silver: 7, gold: 15 };
+
+export const SpinToWinModal: React.FC<SpinToWinModalProps> = ({
+  isOpen,
+  onClose,
+  playerSeaTokens,
+  onAdjustSeaTokens,
+  showNotification,
+  adminConfig,
+}) => {
+  const [activeTab, setActiveTab] = useState<SpinToWinTab>('lottery');
+  const [numTicketsToBuyInput, setNumTicketsToBuyInput] = useState<string>("1");
+  const [enteredReferralCodeInput, setEnteredReferralCodeInput] = useState<string>("");
+  const [rewardRevealMessage, setRewardRevealMessage] = useState<string>(""); // For "Opening reward..."
+
+  const [spinGameState, setSpinGameState] = useState<SpinGameState>(() => {
+    const savedState = localStorage.getItem('dwhlSpinGameStateV7'); // Incremented version
+    const defaultPlayerReferralCode = `USER-${generateId().substring(0, 6).toUpperCase()}`;
+    if (savedState) {
+      try {
+        const parsed = JSON.parse(savedState) as SpinGameState;
+        // Ensure all new fields exist
+        return {
+          balance: playerSeaTokens,
+          lastSpinTime: parsed.lastSpinTime || 0,
+          spinning: false,
+          lottery: {
+            ticketPrice: parsed.lottery?.ticketPrice || LOTTERY_TICKET_PRICE,
+            userTicketsThisSession: parsed.lottery?.userTicketsThisSession || 0,
+            currentTicketPrizes: parsed.lottery?.currentTicketPrizes || [],
+            isTicketActive: parsed.lottery?.isTicketActive || false,
+            revealedCardIndex: parsed.lottery?.revealedCardIndex !== undefined ? parsed.lottery.revealedCardIndex : null,
+            activityLog: parsed.lottery?.activityLog || [],
+            ticketsOnHand: parsed.lottery?.ticketsOnHand || 0,
+            lastDailyTicketClaimTime: parsed.lottery?.lastDailyTicketClaimTime || 0,
+            lotteryWins: parsed.lottery?.lotteryWins || 0,
+          },
+          spin: {
+            activityLog: parsed.spin?.activityLog || [],
+            userSpinsThisSession: parsed.spin?.userSpinsThisSession || 0,
+            hasExtraSpin: parsed.spin?.hasExtraSpin || false,
+          },
+          rewards: {
+            lastClaimTime: parsed.rewards?.lastClaimTime || 0,
+            streak: parsed.rewards?.streak || 0,
+          },
+          referral: {
+            playerReferralCode: parsed.referral?.playerReferralCode || defaultPlayerReferralCode,
+            enteredReferralCode: parsed.referral?.enteredReferralCode || null,
+            referralBonusClaimed: parsed.referral?.referralBonusClaimed || false,
+          }
+        };
+      } catch (e) {
+        console.error("Failed to parse spin game state V7 from localStorage", e);
+      }
+    }
+    return {
+      balance: playerSeaTokens,
+      lastSpinTime: 0,
+      spinning: false,
+      lottery: {
+        ticketPrice: LOTTERY_TICKET_PRICE,
+        userTicketsThisSession: 0,
+        currentTicketPrizes: [],
+        isTicketActive: false,
+        revealedCardIndex: null,
+        activityLog: [],
+        ticketsOnHand: 0,
+        lastDailyTicketClaimTime: 0,
+        lotteryWins: 0,
+      },
+      spin: {
+        activityLog: [],
+        userSpinsThisSession: 0,
+        hasExtraSpin: false,
+      },
+      rewards: {
+        lastClaimTime: 0,
+        streak: 0,
+      },
+      referral: {
+        playerReferralCode: defaultPlayerReferralCode,
+        enteredReferralCode: null,
+        referralBonusClaimed: false,
+      }
+    };
+  });
+
+  const wheelRef = useRef<HTMLDivElement>(null);
+  const confettiContainerRef = useRef<HTMLDivElement>(null);
+  const resultAmountRef = useRef<HTMLDivElement>(null);
+  const resultMessageRef = useRef<HTMLDivElement>(null);
+  const spinTimerRef = useRef<HTMLDivElement>(null);
+  const spinButtonRef = useRef<HTMLButtonElement>(null);
+  const lotteryResultMsgRef = useRef<HTMLDivElement>(null);
+
+   useEffect(() => {
+    if (isOpen) {
+        if (spinGameState.balance !== playerSeaTokens) {
+             setSpinGameState(prev => ({ ...prev, balance: playerSeaTokens }));
+        }
+    }
+  }, [isOpen, playerSeaTokens, spinGameState.balance]);
+
+
+  useEffect(() => {
+    localStorage.setItem('dwhlSpinGameStateV7', JSON.stringify(spinGameState));
+  }, [spinGameState]);
+
+  const updateInternalBalance = useCallback((amount: number) => {
+    setSpinGameState(prev => {
+      const newBalance = Math.max(0, prev.balance + amount);
+      onAdjustSeaTokens(newBalance - prev.balance); // Adjust player's global balance
+      return { ...prev, balance: newBalance };
+    });
+  }, [onAdjustSeaTokens]);
+
+  const addLotteryLogEntry = useCallback((message: string, ticketNumber: number) => {
+    setSpinGameState(prev => {
+      const newLogEntry: LotteryActivity = { id: generateId(), ticketNumber, message };
+      const updatedLog = [newLogEntry, ...prev.lottery.activityLog].slice(0, MAX_LOTTERY_LOG_ENTRIES);
+      return {
+        ...prev,
+        lottery: { ...prev.lottery, activityLog: updatedLog }
+      };
+    });
+  }, []);
+
+  const initWheel = useCallback(() => {
+    if (!wheelRef.current) return;
+    wheelRef.current.innerHTML = '';
+    WHEEL_PRIZES.forEach((prize, i) => {
+      const section = document.createElement('div');
+      section.className = `wheel-section ${WHEEL_COLORS[i % WHEEL_COLORS.length]}`;
+      section.style.transform = `rotate(${i * (360 / WHEEL_PRIZES.length)}deg)`;
+      section.style.outline = '1px solid rgba(255,255,255,0.2)';
+      
+      const span = document.createElement('span');
+      span.textContent = prize.display;
+      span.style.fontSize = '0.7rem'; // Slightly smaller for better fit
+      span.style.transform = `rotate(${(360 / WHEEL_PRIZES.length) / 2}deg) translateX(55px) translateY(-50%) rotate(-${(360 / WHEEL_PRIZES.length) / 2}deg)`;
+      span.style.position = 'absolute';
+      span.style.top = '50%';
+      span.style.left = '5%'; 
+      span.style.fontWeight = 'bold';
+      span.style.color = 'white';
+      span.style.textShadow = '1px 1px 3px rgba(0,0,0,0.8)';
+
+      section.appendChild(span);
+      section.dataset.value = prize.id;
+      wheelRef.current?.appendChild(section);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (isOpen && activeTab === 'spin') {
+      initWheel();
+    }
+  }, [isOpen, activeTab, initWheel]);
+
+  const createConfetti = useCallback(() => {
+    if (!confettiContainerRef.current) return;
+    confettiContainerRef.current.innerHTML = ''; // Clear previous confetti
+    const colors = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#ec4899', '#f97316', '#14b8a6'];
+    for (let i = 0; i < 150; i++) { // Increased confetti count
+      const confetti = document.createElement('div');
+      confetti.className = 'confetti'; // Animation applied via CSS
+      const size = Math.random() * 12 + 6; // Slightly larger confetti
+      const color = colors[Math.floor(Math.random() * colors.length)];
+      const left = Math.random() * 100;
+      const delay = Math.random() * 2.5; // Increased delay spread
+      const duration = Math.random() * 2 + 2; // Slightly longer duration
+
+      confetti.style.width = `${size}px`;
+      confetti.style.height = `${size}px`;
+      confetti.style.backgroundColor = color;
+      confetti.style.left = `${left}%`;
+      // Initial position and opacity set by CSS keyframes
+      confetti.style.animationDelay = `${delay}s`;
+      confetti.style.animationDuration = `${duration}s`;
+
+
+      if (Math.random() > 0.5) confetti.style.borderRadius = '50%';
+      else { // Add more shapes
+        const clipPaths = [
+            'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)', // Star
+            'rect(0,0,100%,100%)' // Rectangle (default if not circle)
+        ];
+        confetti.style.clipPath = clipPaths[Math.floor(Math.random()*clipPaths.length)];
+      }
+      
+      confettiContainerRef.current?.appendChild(confetti);
+      
+      // Auto-remove after animation + a small buffer
+      setTimeout(() => confetti.remove(), (duration + delay + 0.5) * 1000);
+    }
+  }, []);
+
+
+  const showSpinResultDisplay = useCallback((prize: WheelPrize) => {
+    setRewardRevealMessage("Revealing your prize...");
+    if (resultAmountRef.current) resultAmountRef.current.textContent = ""; // Clear previous
+    
+    setTimeout(() => { // Short delay for "Revealing..."
+        if (resultAmountRef.current) resultAmountRef.current.textContent = prize.display;
+        if (resultMessageRef.current) {
+        if (prize.isJackpot) {
+            resultMessageRef.current.textContent = '🎉 JACKPOT! 🎉 You hit the big one!';
+            resultAmountRef.current?.classList.add('animate-bounce');
+            playSound(SoundEvent.SpinWin, adminConfig); // Jackpot sound
+            setTimeout(() => resultAmountRef.current?.classList.remove('animate-bounce'), 3000);
+        } else {
+            resultMessageRef.current.textContent = 'Congratulations! You won:';
+            playSound(SoundEvent.SpinWin, adminConfig);
+        }
+        }
+        createConfetti();
+        setRewardRevealMessage(""); // Clear reveal message
+    }, 1000); // 1 second suspense
+  }, [createConfetti, adminConfig]);
+
+  const spinWheel = useCallback(() => {
+    if (spinGameState.spinning) return;
+
+    const isExtraSpin = spinGameState.spin.hasExtraSpin;
+
+    if (!isExtraSpin) {
+        if (spinGameState.balance < SPIN_COST) {
+            showNotification(`You need at least ${SPIN_COST} ST to spin!`, 'error');
+            return;
+        }
+        const now = Date.now();
+        const timeRemaining = spinGameState.lastSpinTime + SPIN_COOLDOWN - now;
+        if (timeRemaining > 0) {
+            showNotification(`Next spin available in: ${Math.ceil(timeRemaining / (1000 * 60))} minutes.`, 'warning');
+            return;
+        }
+        updateInternalBalance(-SPIN_COST);
+        setSpinGameState(prev => ({ ...prev, lastSpinTime: now }));
+    }
+
+    setSpinGameState(prev => ({ ...prev, spinning: true, spin: { ...prev.spin, hasExtraSpin: false } }));
+
+    if (spinButtonRef.current) spinButtonRef.current.disabled = true;
+    setRewardRevealMessage("Spinning the wheel..."); // Initial message
+    if (resultAmountRef.current) resultAmountRef.current.textContent = '';
+    if (wheelRef.current) wheelRef.current.classList.add('spinning');
+    
+    const winningIndex = Math.floor(Math.random() * WHEEL_PRIZES.length);
+    const winningPrize = WHEEL_PRIZES[winningIndex];
+    const segmentAngle = 360 / WHEEL_PRIZES.length;
+    const rotations = 5;
+    const segmentCenterOffset = (Math.random() * (segmentAngle * 0.8) - (segmentAngle * 0.4));
+    const winningAngle = -(winningIndex * segmentAngle) + segmentCenterOffset;
+    const totalRotation = rotations * 360 + winningAngle;
+
+    setTimeout(() => {
+      if (wheelRef.current) {
+        wheelRef.current.classList.remove('spinning');
+        wheelRef.current.style.transform = `rotate(${totalRotation}deg)`;
+        wheelRef.current.style.transition = 'transform 4s cubic-bezier(0.25, 0.1, 0.25, 1)'; // Slower spin result
+      }
+      setTimeout(() => {
+        showSpinResultDisplay(winningPrize);
+        let spinLogMessage = "";
+
+        switch (winningPrize.type) {
+          case 'dwhl':
+            updateInternalBalance(winningPrize.value!);
+            showNotification(`You won ${winningPrize.value} ST from the wheel!`, 'success');
+            spinLogMessage = `Won ${winningPrize.value} ST!`;
+            break;
+          case 'extra_spin':
+            setSpinGameState(prev => ({ ...prev, spin: { ...prev.spin, hasExtraSpin: true } }));
+            showNotification('You won an Extra Spin!', 'special');
+            spinLogMessage = `Won an Extra Spin!`;
+            playSound(SoundEvent.SpinWin, adminConfig); // Win sound for extra spin
+            break;
+          case 'lottery_ticket':
+            setSpinGameState(prev => ({ ...prev, lottery: { ...prev.lottery, ticketsOnHand: prev.lottery.ticketsOnHand + 1 } }));
+            showNotification('You won a Lottery Ticket!', 'success');
+            spinLogMessage = `Won a Lottery Ticket!`;
+            playSound(SoundEvent.SpinWin, adminConfig); // Win sound for ticket
+            break;
+        }
+        if (winningPrize.type !== 'dwhl' && winningPrize.type !== 'extra_spin' && winningPrize.type !== 'lottery_ticket') {
+            playSound(SoundEvent.SpinLose, adminConfig); // If it's not a direct win, play lose sound
+        }
+
+
+        setSpinGameState(prev => {
+            const newSpinNumberThisSession = prev.spin.userSpinsThisSession + 1;
+            const newLogEntry: SpinActivity = {
+                id: generateId(),
+                spinNumber: newSpinNumberThisSession,
+                message: `Spin #${newSpinNumberThisSession}: ${spinLogMessage}`
+            };
+            const updatedLog = [newLogEntry, ...prev.spin.activityLog].slice(0, MAX_SPIN_LOG_ENTRIES);
+            return {
+                ...prev,
+                spinning: false,
+                spin: {
+                    ...prev.spin,
+                    userSpinsThisSession: newSpinNumberThisSession,
+                    activityLog: updatedLog,
+                }
+            };
+        });
+        if (spinButtonRef.current) spinButtonRef.current.disabled = false;
+      }, 4500); // Adjusted for slower spin
+    }, 1000); // Initial delay before spin starts visually
+  }, [spinGameState, showNotification, updateInternalBalance, showSpinResultDisplay, adminConfig]);
+
+  useEffect(() => {
+    if (!isOpen || activeTab !== 'spin' || !spinTimerRef.current || !spinButtonRef.current) return;
+    
+    const updateSpinStatus = () => {
+        if (spinGameState.spin.hasExtraSpin) {
+            if (spinTimerRef.current) spinTimerRef.current.textContent = 'You have an Extra Spin!';
+            spinButtonRef.current!.disabled = spinGameState.spinning;
+            if (!spinButtonRef.current!.disabled) spinButtonRef.current!.classList.add('pulse-spin-button');
+            else spinButtonRef.current!.classList.remove('pulse-spin-button');
+            return;
+        }
+
+        const now = Date.now();
+        const timeRemaining = spinGameState.lastSpinTime + SPIN_COOLDOWN - now;
+        if (timeRemaining <= 0) {
+            if (spinTimerRef.current) spinTimerRef.current.textContent = 'Spin available now!';
+            spinButtonRef.current!.disabled = spinGameState.spinning || spinGameState.balance < SPIN_COST;
+            if (!spinButtonRef.current!.disabled) spinButtonRef.current!.classList.add('pulse-spin-button');
+            else spinButtonRef.current!.classList.remove('pulse-spin-button');
+        } else {
+            const hours = Math.floor(timeRemaining / (1000 * 60 * 60));
+            const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
+            if (spinTimerRef.current) spinTimerRef.current.textContent = `Next spin in: ${hours}h ${minutes}m ${seconds}s`;
+            spinButtonRef.current!.disabled = true;
+            spinButtonRef.current!.classList.remove('pulse-spin-button');
+        }
+    };
+    
+    updateSpinStatus();
+    const intervalId = setInterval(updateSpinStatus, 1000);
+    return () => clearInterval(intervalId);
+  }, [isOpen, activeTab, spinGameState]);
+
+
+  // Lottery Logic
+  const handlePlayNextTicket = useCallback(() => {
+    if (spinGameState.lottery.ticketsOnHand <= 0) {
+        showNotification("No tickets on hand. Buy some first!", 'warning');
+        return;
+    }
+    setRewardRevealMessage("Preparing your ticket...");
+
+    setTimeout(() => {
+        const winAmount = POSSIBLE_LOTTERY_PRIZES[Math.floor(Math.random() * POSSIBLE_LOTTERY_PRIZES.length)];
+        // Ensure only one actual prize, others are "misses"
+        let prizes: Array<number | string> = ["Miss", "Miss", "Miss"];
+        const winPosition = Math.floor(Math.random() * prizes.length);
+        prizes[winPosition] = Math.random() < 0.33 ? winAmount : "Miss"; // ~33% chance to win the actual prize
+
+        const newTicketNumberThisSession = spinGameState.lottery.userTicketsThisSession + 1;
+
+        setSpinGameState(prev => ({
+        ...prev,
+        lottery: {
+            ...prev.lottery,
+            currentTicketPrizes: prizes,
+            isTicketActive: true,
+            revealedCardIndex: null,
+            userTicketsThisSession: newTicketNumberThisSession,
+            ticketsOnHand: prev.lottery.ticketsOnHand - 1,
+        }
+        }));
+        if(lotteryResultMsgRef.current) lotteryResultMsgRef.current.textContent = `Ticket #${newTicketNumberThisSession}! Flip ONE card.`;
+        setRewardRevealMessage("");
+    }, 700); // Suspense delay
+  }, [spinGameState.lottery.ticketsOnHand, spinGameState.lottery.userTicketsThisSession, showNotification]);
+
+
+  const handleBuyMultipleTickets = useCallback(() => {
+    const numToBuy = parseInt(numTicketsToBuyInput, 10);
+    if (isNaN(numToBuy) || numToBuy <= 0 || numToBuy > 100) {
+        showNotification("Please enter a valid number of tickets to buy (1-100).", 'error');
+        return;
+    }
+    const totalCost = numToBuy * LOTTERY_TICKET_PRICE;
+    if (spinGameState.balance < totalCost) {
+      showNotification(`Not enough ST! ${numToBuy} tickets cost ${totalCost} ST.`, 'error');
+      return;
+    }
+
+    updateInternalBalance(-totalCost);
+    setSpinGameState(prev => ({
+      ...prev,
+      lottery: {
+        ...prev.lottery,
+        ticketsOnHand: prev.lottery.ticketsOnHand + numToBuy,
+      }
+    }));
+    showNotification(`${numToBuy} ticket${numToBuy > 1 ? 's' : ''} purchased! Ready to play.`, 'success');
+    playSound(SoundEvent.TokenCollect, adminConfig); // Sound for buying tickets
+    setNumTicketsToBuyInput("1");
+    if(lotteryResultMsgRef.current) lotteryResultMsgRef.current.textContent = `${numToBuy} tickets added. Play your next ticket!`;
+
+  }, [numTicketsToBuyInput, spinGameState.balance, updateInternalBalance, showNotification, adminConfig]);
+
+
+  const revealLotteryCard = useCallback((index: number) => {
+    if (!spinGameState.lottery.isTicketActive || spinGameState.lottery.revealedCardIndex !== null) return;
+
+    setSpinGameState(prev => ({
+        ...prev,
+        lottery: { ...prev.lottery, revealedCardIndex: index }
+    }));
+    
+    // After flip animation (CSS handles timing)
+    setTimeout(() => {
+        const prize = spinGameState.lottery.currentTicketPrizes[index];
+        let currentCardMessage = '';
+        const currentTicketNumber = spinGameState.lottery.userTicketsThisSession;
+
+        if (typeof prize === 'number' && prize > 0) {
+            updateInternalBalance(prize);
+            currentCardMessage = `🎉 Congratulations! You won ${prize} ST! 🎉`;
+            showNotification(currentCardMessage, 'success');
+            playSound(SoundEvent.LotteryWin, adminConfig);
+            setSpinGameState(prev => ({...prev, lottery: {...prev.lottery, lotteryWins: prev.lottery.lotteryWins + 1}}));
+            createConfetti();
+            addLotteryLogEntry(`Ticket #${currentTicketNumber}: Won ${prize} ST!`, currentTicketNumber);
+        } else {
+            currentCardMessage = `Better luck next time!`;
+            showNotification(currentCardMessage, 'info');
+            playSound(SoundEvent.LotteryLose, adminConfig);
+            addLotteryLogEntry(`Ticket #${currentTicketNumber}: Better luck next time.`, currentTicketNumber);
+        }
+        
+        if (lotteryResultMsgRef.current) lotteryResultMsgRef.current.textContent = currentCardMessage;
+
+        setSpinGameState(prev => ({
+            ...prev,
+            lottery: { ...prev.lottery, isTicketActive: false } // Ticket is now used
+        }));
+    }, 600); // Duration of flip animation
+
+  }, [spinGameState.lottery, updateInternalBalance, showNotification, createConfetti, addLotteryLogEntry, adminConfig]);
+  
+  
+  const [rewardTimerText, setRewardTimerText] = useState('');
+  const [dailyTicketTimerText, setDailyTicketTimerText] = useState('');
+
+
+  const claimDailyReward = useCallback(() => {
+    setRewardRevealMessage("Claiming your daily ST...");
+    setTimeout(() => {
+        const now = Date.now();
+        if (now - spinGameState.rewards.lastClaimTime < DAILY_DWHL_REWARD_COOLDOWN) {
+            showNotification("You've already claimed your daily ST reward today!", 'warning');
+            setRewardRevealMessage("");
+            return;
+        }
+        
+        let newStreak = spinGameState.rewards.streak;
+        if (now - spinGameState.rewards.lastClaimTime >= DAILY_DWHL_REWARD_COOLDOWN * 2) {
+            newStreak = 0;
+            showNotification("ST Streak reset due to missing a day.", 'info');
+        }
+        
+        const currentStreakDayIndex = newStreak % DAILY_REWARDS_STREAK.length;
+        const rewardAmount = DAILY_REWARDS_STREAK[currentStreakDayIndex];
+        const displayDay = currentStreakDayIndex + 1;
+
+        updateInternalBalance(rewardAmount);
+        setSpinGameState(prev => ({
+            ...prev,
+            rewards: { lastClaimTime: now, streak: displayDay }
+        }));
+        showNotification(`Daily ST Reward (Day ${displayDay}): +${rewardAmount} ST!`, 'special');
+        playSound(SoundEvent.DailyRewardClaim, adminConfig);
+        createConfetti();
+        setRewardRevealMessage("");
+    }, 700);
+  }, [spinGameState.rewards, updateInternalBalance, showNotification, createConfetti, adminConfig]);
+
+  const claimDailyTicket = useCallback(() => {
+    setRewardRevealMessage("Claiming your daily ticket...");
+    setTimeout(() => {
+        const now = Date.now();
+        if (now - spinGameState.lottery.lastDailyTicketClaimTime < DAILY_TICKET_COOLDOWN) {
+            showNotification("You've already claimed your free daily ticket!", 'warning');
+            setRewardRevealMessage("");
+            return;
+        }
+        setSpinGameState(prev => ({
+            ...prev,
+            lottery: {
+                ...prev.lottery,
+                ticketsOnHand: prev.lottery.ticketsOnHand + 1,
+                lastDailyTicketClaimTime: now,
+            }
+        }));
+        showNotification("You received 1 Free Daily Lottery Ticket!", 'special');
+        playSound(SoundEvent.DailyRewardClaim, adminConfig); // Can use same sound or new one
+        createConfetti();
+        setRewardRevealMessage("");
+    }, 700);
+  }, [spinGameState.lottery, showNotification, createConfetti, adminConfig]);
+
+
+  const handleClaimReferralBonus = () => {
+    if (spinGameState.referral.referralBonusClaimed) {
+        showNotification("Referral bonus already claimed.", "info");
+        return;
+    }
+    if (!enteredReferralCodeInput.trim() || enteredReferralCodeInput.trim().toUpperCase() === spinGameState.referral.playerReferralCode) {
+        showNotification("Please enter a valid referral code (cannot be your own).", "warning");
+        return;
+    }
+    // Simple simulation: any non-empty, non-own code works once.
+    setSpinGameState(prev => ({
+        ...prev,
+        lottery: {...prev.lottery, ticketsOnHand: prev.lottery.ticketsOnHand + 1},
+        referral: {...prev.referral, referralBonusClaimed: true, enteredReferralCode: enteredReferralCodeInput.trim().toUpperCase()}
+    }));
+    showNotification("Referral bonus claimed! You got 1 free lottery ticket.", "success");
+    playSound(SoundEvent.DailyRewardClaim, adminConfig);
+    setEnteredReferralCodeInput("");
+  };
+
+
+  useEffect(() => {
+    if (!isOpen || activeTab !== 'rewards') return;
+    const intervalId = setInterval(() => {
+      const now = Date.now();
+      // Daily ST Reward Timer
+      const timeRemainingReward = spinGameState.rewards.lastClaimTime + DAILY_DWHL_REWARD_COOLDOWN - now;
+      if (timeRemainingReward <= 0) {
+        setRewardTimerText('Daily ST Reward available now!');
+      } else {
+        const hours = Math.floor(timeRemainingReward / (1000 * 60 * 60));
+        const minutes = Math.floor((timeRemainingReward % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((timeRemainingReward % (1000 * 60)) / 1000);
+        setRewardTimerText(`Next ST reward in: ${hours}h ${minutes}m ${seconds}s`);
+      }
+      // Daily Ticket Timer
+      const timeRemainingTicket = spinGameState.lottery.lastDailyTicketClaimTime + DAILY_TICKET_COOLDOWN - now;
+      if (timeRemainingTicket <= 0) {
+          setDailyTicketTimerText('Free Daily Ticket available now!');
+      } else {
+          const hours = Math.floor(timeRemainingTicket / (1000 * 60 * 60));
+          const minutes = Math.floor((timeRemainingTicket % (1000 * 60 * 60)) / (1000 * 60));
+          const seconds = Math.floor((timeRemainingTicket % (1000 * 60)) / 1000);
+          setDailyTicketTimerText(`Next free ticket in: ${hours}h ${minutes}m ${seconds}s`);
+      }
+
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, [isOpen, activeTab, spinGameState.rewards.lastClaimTime, spinGameState.lottery.lastDailyTicketClaimTime]);
+
+  const canClaimDailyST = Date.now() - (spinGameState.rewards.lastClaimTime || 0) >= DAILY_DWHL_REWARD_COOLDOWN;
+  const canClaimDailyFreeTicket = Date.now() - (spinGameState.lottery.lastDailyTicketClaimTime || 0) >= DAILY_TICKET_COOLDOWN;
+
+
+  const handleFullScreen = () => {
+    const elem = document.documentElement;
+    if (!document.fullscreenElement) {
+        if (elem.requestFullscreen) {
+        elem.requestFullscreen().catch(err => {
+            showNotification(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`, "error");
+        });
+        } else if ((elem as any).mozRequestFullScreen) { /* Firefox */
+        (elem as any).mozRequestFullScreen();
+        } else if ((elem as any).webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+        (elem as any).webkitRequestFullscreen();
+        } else if ((elem as any).msRequestFullscreen) { /* IE/Edge */
+        (elem as any).msRequestFullscreen();
+        } else {
+            showNotification("Fullscreen API is not supported by your browser.", "warning");
+        }
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+    }
+  };
+  const TrophyDisplay: React.FC<{wins: number}> = ({ wins }) => {
+    let trophies = { bronze: false, silver: false, gold: false };
+    if (wins >= TROPHY_THRESHOLDS.bronze) trophies.bronze = true;
+    if (wins >= TROPHY_THRESHOLDS.silver) trophies.silver = true;
+    if (wins >= TROPHY_THRESHOLDS.gold) trophies.gold = true;
+  
+    const getProgressBarWidth = (currentWins: number, nextThreshold: number) => {
+        if (currentWins >= nextThreshold) return 100;
+        const prevThreshold = nextThreshold === TROPHY_THRESHOLDS.bronze ? 0 : 
+                             nextThreshold === TROPHY_THRESHOLDS.silver ? TROPHY_THRESHOLDS.bronze : 
+                             TROPHY_THRESHOLDS.silver;
+        const range = nextThreshold - prevThreshold;
+        const progressInRange = currentWins - prevThreshold;
+        return Math.max(0, Math.min(100, (progressInRange / range) * 100));
+    };
+
+    return (
+        <div className="mt-3 space-y-2">
+            <div className="flex items-center">
+                <span className={`mr-2 text-xl ${trophies.bronze ? 'text-yellow-600' : 'text-gray-500'}`}>🥉</span>
+                <span className="text-sm">Bronze ({TROPHY_THRESHOLDS.bronze} wins):</span>
+                <div className="progress-container ml-2 flex-1"><div className="progress-bar bg-yellow-600" style={{width: `${getProgressBarWidth(wins, TROPHY_THRESHOLDS.bronze)}%`}}></div></div>
+            </div>
+            <div className="flex items-center">
+                <span className={`mr-2 text-xl ${trophies.silver ? 'text-gray-400' : 'text-gray-500'}`}>🥈</span>
+                <span className="text-sm">Silver ({TROPHY_THRESHOLDS.silver} wins):</span>
+                <div className="progress-container ml-2 flex-1"><div className="progress-bar bg-gray-400" style={{width: `${getProgressBarWidth(wins, TROPHY_THRESHOLDS.silver)}%`}}></div></div>
+            </div>
+            <div className="flex items-center">
+                <span className={`mr-2 text-xl ${trophies.gold ? 'text-yellow-400' : 'text-gray-500'}`}>🥇</span>
+                <span className="text-sm">Gold ({TROPHY_THRESHOLDS.gold} wins):</span>
+                <div className="progress-container ml-2 flex-1"><div className="progress-bar bg-yellow-400" style={{width: `${getProgressBarWidth(wins, TROPHY_THRESHOLDS.gold)}%`}}></div></div>
+            </div>
+        </div>
+    );
+  };
+
+
+  const renderSpinContent = () => {
+      const spinButtonText = spinGameState.spin.hasExtraSpin ? "USE EXTRA SPIN" : `SPIN (${SPIN_COST} ST)`;
+      return (
+        <div className="w-full text-center text-white">
+             {rewardRevealMessage && <p className="text-lg text-yellow-300 mb-2 animate-pulseCustom">{rewardRevealMessage}</p>}
+            <div className="relative w-64 h-64 md:w-80 md:h-80 mb-8 mx-auto">
+                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 w-0 h-0 
+                                border-l-[15px] border-r-[15px] border-b-[30px] 
+                                border-l-transparent border-r-transparent border-b-yellow-300 
+                                z-20 shadow-md"
+                     style={{ filter: 'drop-shadow(0 3px 3px rgba(0,0,0,0.6))' }}
+                ></div>
+                <div ref={wheelRef} id="spin-wheel-react" className="w-full h-full rounded-full bg-gray-800 relative overflow-hidden shadow-xl border-4 border-yellow-500/50">
+                </div>
+                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-12 h-12 md:w-16 md:h-16 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 border-4 border-yellow-400 shadow-md z-10"></div>
+            </div>
+            <button ref={spinButtonRef} onClick={spinWheel} disabled={spinGameState.spinning || (!spinGameState.spin.hasExtraSpin && spinGameState.balance < SPIN_COST)}
+                className="px-8 py-3 mb-8 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 text-xl font-bold shadow-lg hover:shadow-xl transition-all duration-300 w-full max-w-xs mx-auto block disabled:opacity-50 disabled:cursor-not-allowed">
+                {spinButtonText}
+            </button>
+            <div className="w-full max-w-md bg-theme-dark bg-opacity-70 rounded-xl p-6 backdrop-blur-sm border border-theme-border shadow-lg mx-auto">
+                <div ref={resultAmountRef} className="text-3xl font-bold text-center mb-2 text-yellow-400 h-10"></div>
+                <div ref={resultMessageRef} className="text-center text-gray-200">Spin the wheel to win prizes!</div>
+                <div ref={spinTimerRef} className="text-center text-sm text-gray-400 mt-4"></div>
+                <div className="mt-6 pt-4 border-t border-gray-700">
+                    <h4 className="text-md font-semibold mb-2 text-gray-300">Recent Spin Activity:</h4>
+                    {spinGameState.spin.activityLog.length > 0 ? (
+                        <ul className="text-xs text-left space-y-1 max-h-24 overflow-y-auto bg-black/20 p-2 rounded-md">
+                            {spinGameState.spin.activityLog.map(log => (
+                                <li key={log.id} className="text-gray-400">{log.message}</li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <p className="text-xs text-gray-500">No spin activity this session yet.</p>
+                    )}
+                </div>
+            </div>
+        </div>
+      );
+  };
+
+  const renderLotteryContent = () => (
+     <div className="w-full text-white text-center">
+        {rewardRevealMessage && <p className="text-lg text-yellow-300 mb-2 animate-pulseCustom">{rewardRevealMessage}</p>}
+        <div className="bg-theme-dark bg-opacity-70 rounded-xl p-6 mb-6 border border-theme-border shadow-lg">
+            <h3 className="text-xl font-bold mb-2">Whale Lottery</h3>
+            <p className="text-sm text-gray-400 mb-1">Tickets played this session: {spinGameState.lottery.userTicketsThisSession}</p>
+            <p className="text-gray-300">Balance: <span className="font-bold text-yellow-400">{spinGameState.balance.toFixed(0)} ST</span></p>
+            {(spinGameState.lottery.ticketsOnHand > 0 || spinGameState.lottery.isTicketActive) && (
+                <p className="text-sm text-green-400 mb-2">Tickets on Hand: {spinGameState.lottery.ticketsOnHand}</p>
+            )}
+             <p className="text-theme-accent my-3 h-6" ref={lotteryResultMsgRef}>
+                {lotteryResultMsgRef.current?.textContent || 
+                 (spinGameState.lottery.isTicketActive ? `Ticket #${spinGameState.lottery.userTicketsThisSession}! Flip ONE card.` : 
+                  spinGameState.lottery.ticketsOnHand > 0 ? "Ready to play your next ticket!" : 
+                  "Buy tickets to start scratching!")}
+            </p>
+            
+            <div className="flex justify-center gap-2 sm:gap-4 mb-8 items-center min-h-[130px]">
+                {spinGameState.lottery.isTicketActive || spinGameState.lottery.revealedCardIndex !== null ? (
+                    spinGameState.lottery.currentTicketPrizes.map((prize, index) => (
+                        <div key={`card-container-${index}`} className="lottery-card-container">
+                             <div 
+                                className={`lottery-card ${spinGameState.lottery.revealedCardIndex === index ? 'flipped' : ''}`}
+                                onClick={() => revealLotteryCard(index)} 
+                                onKeyPress={(e) => e.key === 'Enter' && revealLotteryCard(index)}
+                                role="button" 
+                                tabIndex={spinGameState.lottery.isTicketActive && spinGameState.lottery.revealedCardIndex === null ? 0 : -1}
+                                aria-label={`Lottery card ${index + 1}`}
+                             >
+                                <div className="lottery-card-face lottery-card-front">
+                                    <i className="fas fa-ticket-alt"></i>
+                                    <span className="ticket-text">Flip Me!</span>
+                                </div>
+                                <div className="lottery-card-face lottery-card-back">
+                                    {typeof prize === 'number' && prize > 0 ? (
+                                        <><i className="fas fa-coins text-yellow-400"></i> {prize} ST</>
+                                    ) : (
+                                        <><i className="fas fa-times text-red-400"></i> Miss</>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    ))
+                ): null}
+            </div>
+
+
+            {!spinGameState.lottery.isTicketActive && (
+                spinGameState.lottery.ticketsOnHand > 0 ? (
+                    <button onClick={handlePlayNextTicket}
+                        className="px-6 py-3 rounded-full bg-gradient-to-br from-blue-600 to-blue-700 text-lg font-bold shadow-lg hover:shadow-xl transition-all duration-300 w-full max-w-xs mx-auto block">
+                        Play Next Ticket ({spinGameState.lottery.ticketsOnHand} left)
+                    </button>
+                ) : (
+                    <div className="mt-4">
+                        <div className="flex items-center justify-center gap-2 mb-2">
+                            <label htmlFor="numTicketsInput" className="text-sm text-gray-300">Tickets:</label>
+                            <input 
+                                type="number" 
+                                id="numTicketsInput"
+                                value={numTicketsToBuyInput}
+                                onChange={(e) => setNumTicketsToBuyInput(e.target.value)}
+                                min="1" max="100"
+                                className="w-20 p-2 rounded bg-theme-dark border border-theme-border text-white focus:ring-pink-500 focus:border-pink-500 text-center"
+                            />
+                        </div>
+                        <button onClick={handleBuyMultipleTickets} disabled={spinGameState.balance < (parseInt(numTicketsToBuyInput,10) || 1) * LOTTERY_TICKET_PRICE}
+                            className="px-6 py-3 rounded-full bg-gradient-to-br from-green-600 to-green-700 text-lg font-bold shadow-lg hover:shadow-xl transition-all duration-300 w-full max-w-xs mx-auto block disabled:opacity-50">
+                            Buy Ticket(s)
+                        </button>
+                    </div>
+                )
+            )}
+            
+            <div className="mt-6 pt-4 border-t border-gray-700">
+                <h4 className="text-md font-semibold mb-2 text-gray-300">Recent Lottery Activity:</h4>
+                {spinGameState.lottery.activityLog.length > 0 ? (
+                    <ul className="text-xs text-left space-y-1 max-h-24 overflow-y-auto bg-black/20 p-2 rounded-md">
+                        {spinGameState.lottery.activityLog.map(log => (
+                            <li key={log.id} className="text-gray-400">{log.message}</li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p className="text-xs text-gray-500">No lottery activity this session yet.</p>
+                )}
+            </div>
+        </div>
+    </div>
+  );
+
+  const renderRewardsContent = () => (
+    <div className="w-full text-white text-center">
+        {rewardRevealMessage && <p className="text-lg text-yellow-300 mb-4 animate-pulseCustom">{rewardRevealMessage}</p>}
+        {/* Daily ST Reward */}
+        <div className="bg-theme-dark bg-opacity-70 rounded-xl p-6 mb-6 border border-theme-border shadow-lg">
+            <h3 className="text-xl font-bold mb-2">Daily ST Reward</h3>
+            <p className="text-sm text-gray-400 mb-2">Claim daily ST. Streak ({spinGameState.rewards.streak} days) resets if you miss a day.</p>
+            <div className="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-7 gap-1.5 sm:gap-2 mb-4 max-h-40 overflow-y-auto p-2 bg-black/20 rounded-lg">
+                {DAILY_REWARDS_STREAK.map((reward, index) => {
+                    const dayNumber = index + 1;
+                    const isClaimedCurrentStreak = !canClaimDailyST && spinGameState.rewards.streak >= dayNumber;
+                    const currentCycleStreak = spinGameState.rewards.streak % DAILY_REWARDS_STREAK.length;
+                    const isNextToClaim = canClaimDailyST && currentCycleStreak === index;
+                    
+                    let bgColor = 'bg-indigo-900 bg-opacity-50 border-indigo-700';
+                    if (isClaimedCurrentStreak) bgColor = 'bg-green-700 border-green-500';
+                    else if (isNextToClaim) bgColor = 'bg-yellow-600 border-yellow-400 animate-pulseCustom';
+                    else if (canClaimDailyST && index < currentCycleStreak) bgColor = 'bg-gray-700 border-gray-600 opacity-60';
+                    else if (!canClaimDailyST && dayNumber > spinGameState.rewards.streak) bgColor = 'bg-indigo-900 bg-opacity-50 border-indigo-700';
+
+                    return (
+                        <div key={`day-st-${dayNumber}`} className={`rounded-lg p-1.5 sm:p-2 text-center border ${bgColor}`}>
+                            <div className="text-xxs sm:text-xs text-gray-300">Day {dayNumber}</div>
+                            <div className="font-bold text-yellow-400 text-xs sm:text-sm">{reward}</div>
+                             <div className="text-xxs text-gray-400">ST</div>
+                        </div>
+                    );
+                })}
+            </div>
+            <button onClick={claimDailyReward} disabled={!canClaimDailyST || !!rewardRevealMessage}
+                className="px-6 py-3 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 text-lg font-bold shadow-lg hover:shadow-xl transition-all duration-300 w-full max-w-xs mx-auto block disabled:opacity-50 disabled:cursor-not-allowed">
+                {canClaimDailyST ? `Claim Daily ST (Day ${(spinGameState.rewards.streak % DAILY_REWARDS_STREAK.length) + 1})` : "ST Claimed Today"}
+            </button>
+            <p className="text-center text-sm text-yellow-300 font-medium mt-2" id="next-reward-time-react">{rewardTimerText}</p>
+        </div>
+
+        {/* Daily Lottery Ticket */}
+        <div className="bg-theme-dark bg-opacity-70 rounded-xl p-6 mb-6 border border-theme-border shadow-lg">
+            <h3 className="text-xl font-bold mb-2">Daily Free Lottery Ticket</h3>
+             <p className="text-sm text-gray-400 mb-4">Claim one free lottery ticket every 24 hours!</p>
+            <button onClick={claimDailyTicket} disabled={!canClaimDailyFreeTicket || !!rewardRevealMessage}
+                className="px-6 py-3 rounded-full bg-gradient-to-br from-blue-600 to-teal-600 text-lg font-bold shadow-lg hover:shadow-xl transition-all duration-300 w-full max-w-xs mx-auto block disabled:opacity-50 disabled:cursor-not-allowed">
+                {canClaimDailyFreeTicket ? "Claim Free Daily Ticket" : "Ticket Claimed Today"}
+            </button>
+            <p className="text-center text-sm text-teal-300 font-medium mt-2">{dailyTicketTimerText}</p>
+        </div>
+        
+        {/* Lottery Trophies */}
+        <div className="bg-theme-dark bg-opacity-70 rounded-xl p-6 mb-6 border border-theme-border shadow-lg">
+            <h3 className="text-xl font-bold mb-2">Lottery Trophies</h3>
+            <p className="text-sm text-gray-400 mb-2">Win lottery prizes (ST) to earn trophies. Current Wins: {spinGameState.lottery.lotteryWins}</p>
+            <TrophyDisplay wins={spinGameState.lottery.lotteryWins} />
+        </div>
+
+        {/* Referral System (Simplified) */}
+        <div className="bg-theme-dark bg-opacity-70 rounded-xl p-6 border border-theme-border shadow-lg">
+            <h3 className="text-xl font-bold mb-2">Referral Bonus</h3>
+            <p className="text-sm text-gray-400 mb-2">Your Referral Code: <strong className="text-yellow-400 select-all">{spinGameState.referral.playerReferralCode}</strong> (Share with friends!)</p>
+            {!spinGameState.referral.referralBonusClaimed ? (
+                <>
+                    <input 
+                        type="text" 
+                        value={enteredReferralCodeInput}
+                        onChange={(e) => setEnteredReferralCodeInput(e.target.value)}
+                        placeholder="Enter Friend's Referral Code"
+                        className="w-full max-w-xs p-2 rounded bg-theme-dark border border-theme-border text-white focus:ring-pink-500 focus:border-pink-500 text-center mb-2"
+                    />
+                    <button onClick={handleClaimReferralBonus} disabled={!!rewardRevealMessage}
+                        className="px-6 py-2 rounded-full bg-gradient-to-br from-green-500 to-lime-600 text-md font-bold shadow-lg hover:shadow-xl transition-all duration-300 w-full max-w-xs mx-auto block disabled:opacity-50">
+                        Claim Referral Bonus Ticket
+                    </button>
+                </>
+            ) : (
+                <p className="text-green-400">Referral bonus (1 ticket) successfully claimed for code: {spinGameState.referral.enteredReferralCode}!</p>
+            )}
+        </div>
+    </div>
+  );
+
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="DWHL Arcade Zone 🎰" size="lg">
+      <div className="container mx-auto px-2 py-4 sm:px-4 sm:py-8 text-white font-sans relative">
+        <div
+            className="absolute inset-0 -z-10 opacity-5 pointer-events-none"
+            style={{
+                backgroundImage: `url(${WHALE_BACKGROUND_IMAGE_URL})`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center center',
+                backgroundSize: 'contain',
+            }}
+            aria-hidden="true"
+        ></div>
+
+        <div ref={confettiContainerRef} className="fixed inset-0 pointer-events-none overflow-hidden z-[1000]"></div>
+        
+        <div className="flex items-center justify-between mb-4 sm:mb-6">
+            <div className="bg-theme-dark bg-opacity-30 rounded-full px-4 py-2 flex items-center shadow-lg">
+                <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-yellow-500 flex items-center justify-center mr-2 sm:mr-3">
+                    <i className="fas fa-coins text-yellow-800 text-sm sm:text-base"></i>
+                </div>
+                <div>
+                    <div className="text-xs text-gray-300">Your Balance</div>
+                    <div className="font-bold text-lg sm:text-xl" id="wallet-balance-react">{spinGameState.balance.toFixed(0)} ST</div>
+                </div>
+            </div>
+            <button
+                onClick={handleFullScreen}
+                title={document.fullscreenElement ? "Exit fullscreen" : "Make the app fullscreen"}
+                className="px-3 py-2 rounded-full bg-gradient-to-br from-teal-500 to-cyan-600 text-white font-bold shadow-lg hover:shadow-xl transition-all duration-300 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-400"
+                aria-label={document.fullscreenElement ? "Exit fullscreen mode" : "Enter fullscreen mode"}
+            >
+                <i className={`fas ${document.fullscreenElement ? "fa-compress" : "fa-expand"} mr-1 sm:mr-2`}></i>
+                <span className="hidden sm:inline">{document.fullscreenElement ? "Window" : "Fullscreen"}</span>
+            </button>
+        </div>
+
+
+        <div className="flex border-b border-gray-700 mb-6 sm:mb-8 w-full max-w-md mx-auto">
+          {([
+            { id: 'lottery', label: 'Whale Lottery' },
+            { id: 'spin', label: 'Whale Spin' },
+            { id: 'rewards', label: 'Whale Rewards' }
+          ] as {id: SpinToWinTab, label:string}[]).map(tabInfo => (
+            <button
+              key={tabInfo.id}
+              onClick={() => setActiveTab(tabInfo.id)}
+              className={`flex-1 py-2 sm:py-3 px-2 sm:px-4 font-semibold transition-colors duration-200 border-b-2 hover:text-yellow-400
+                ${activeTab === tabInfo.id ? 'text-yellow-400 border-yellow-400' : 'text-gray-300 border-transparent'}`}
+            >
+              {tabInfo.label}
+            </button>
+          ))}
+        </div>
+
+        {activeTab === 'spin' && renderSpinContent()}
+        {activeTab === 'lottery' && renderLotteryContent()}
+        {activeTab === 'rewards' && renderRewardsContent()}
+      </div>
+    </Modal>
+  );
+};

WalletModal.tsx

@@ -0,0 +1,302 @@
+
+import React, { useState, useEffect } from 'react';
+import { Modal } from '../Modal.tsx';
+import { PlayerData, AdminConfig } from '../../types.ts';
+
+interface WalletModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  playerData: PlayerData;
+  adminConfig: AdminConfig;
+  onStakeTokens: (amount: number) => void;
+  onUnstakeTokens: (amount: number) => void;
+  onClaimRewards: () => void;
+  onTransaction: (type: 'deposit' | 'withdraw', amount: number) => void;
+}
+
+const DEPOSIT_COMING_SOON_WHALE_IMAGE_URL = 'https://www.transparentpng.com/thumb/whale/cartoon-whale-hd-image-U3wM6x.png';
+const WITHDRAW_COMING_SOON_WHALE_IMAGE_URL = 'https://www.transparentpng.com/thumb/whale/blue-whale-transparent-background-jEY0W9.png';
+
+
+export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose, playerData, adminConfig, onStakeTokens, onUnstakeTokens, onClaimRewards, onTransaction }) => {
+  const [stakeAmount, setStakeAmount] = useState('');
+  const [unstakeAmount, setUnstakeAmount] = useState('');
+  const [withdrawAmount, setWithdrawAmount] = useState('');
+  const [depositAmount, setDepositAmount] = useState('');
+  const [availableTokenRewards, setAvailableTokenRewards] = useState(0);
+  const [showDepositComingSoonNotice, setShowDepositComingSoonNotice] = useState(false);
+  const [showWithdrawComingSoonNotice, setShowWithdrawComingSoonNotice] = useState(false);
+
+  // New state for crypto prices
+  const [bitcoinPrice, setBitcoinPrice] = useState<string | null>(null);
+  const [dogecoinPrice, setDogecoinPrice] = useState<string | null>(null);
+  const [cryptoLoading, setCryptoLoading] = useState<boolean>(false);
+  const [cryptoError, setCryptoError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      if (playerData.stakingStartTime && playerData.stakedTokens > 0) {
+        const hoursStaked = (Date.now() - playerData.stakingStartTime) / (1000 * 60 * 60);
+        const rewards = Math.floor(playerData.stakedTokens * adminConfig.globalTokenStakingRate * hoursStaked);
+        setAvailableTokenRewards(rewards);
+      } else {
+        setAvailableTokenRewards(0);
+      }
+      // Reset coming soon notices when modal is re-opened
+      setShowDepositComingSoonNotice(false);
+      setShowWithdrawComingSoonNotice(false);
+
+      // Fetch crypto prices
+      const fetchCryptoPrices = async () => {
+        setCryptoLoading(true);
+        setCryptoError(null);
+        setBitcoinPrice(null);
+        setDogecoinPrice(null);
+        try {
+          const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,dogecoin&vs_currencies=usd');
+          if (!response.ok) {
+            throw new Error(`API Error: ${response.status} ${response.statusText}`);
+          }
+          const data = await response.json();
+          setBitcoinPrice(data.bitcoin?.usd?.toLocaleString('en-US', { style: 'currency', currency: 'USD' }) || 'N/A');
+          setDogecoinPrice(data.dogecoin?.usd?.toLocaleString('en-US', { style: 'currency', currency: 'USD' }) || 'N/A');
+        } catch (error: any) {
+          setCryptoError(error.message || 'Error fetching crypto prices.');
+          console.error('Error fetching crypto prices:', error);
+        } finally {
+          setCryptoLoading(false);
+        }
+      };
+
+      fetchCryptoPrices();
+    }
+  }, [isOpen, playerData.stakingStartTime, playerData.stakedTokens, adminConfig.globalTokenStakingRate]);
+
+  const displayDepositComingSoon = () => {
+    setShowWithdrawComingSoonNotice(false);
+    setShowDepositComingSoonNotice(true);
+  };
+
+  const displayWithdrawComingSoon = () => {
+    setShowDepositComingSoonNotice(false);
+    setShowWithdrawComingSoonNotice(true);
+  };
+
+  const handleStake = () => {
+    const amount = parseInt(stakeAmount);
+    if (!isNaN(amount) && amount > 0 && amount <= playerData.seaTokens) {
+      onStakeTokens(amount);
+      setStakeAmount('');
+    }
+  };
+
+  const handleUnstake = () => {
+    const amount = parseInt(unstakeAmount);
+    if (!isNaN(amount) && amount > 0 && amount <= playerData.stakedTokens) {
+      onUnstakeTokens(amount);
+      setUnstakeAmount('');
+    }
+  };
+
+  const handleDeposit = () => {
+    setDepositAmount(''); 
+    displayDepositComingSoon();
+  };
+
+  const handleWithdraw = () => {
+    setWithdrawAmount(''); 
+    displayWithdrawComingSoon(); 
+  };
+
+  const stakeAmountNum = parseInt(stakeAmount);
+  const isStakeInvalid = stakeAmount === '' || isNaN(stakeAmountNum) || stakeAmountNum <= 0 || stakeAmountNum > playerData.seaTokens;
+
+  const unstakeAmountNum = parseInt(unstakeAmount);
+  const isUnstakeInvalid = unstakeAmount === '' || isNaN(unstakeAmountNum) || unstakeAmountNum <= 0 || unstakeAmountNum > playerData.stakedTokens;
+
+  const closeModalAndNotices = () => {
+    setShowDepositComingSoonNotice(false);
+    setShowWithdrawComingSoonNotice(false);
+    onClose();
+  };
+
+  if (showDepositComingSoonNotice) {
+    return (
+        <Modal isOpen={isOpen} onClose={closeModalAndNotices} title="Whale Wallet 🐳" size="md">
+            <div className="relative text-center p-6 bg-theme-primary/60 rounded-lg shadow-inner min-h-[300px] flex flex-col items-center justify-center overflow-hidden animate-fadeIn">
+            <img
+                src={DEPOSIT_COMING_SOON_WHALE_IMAGE_URL}
+                alt="Whale"
+                className="absolute inset-0 w-full h-full object-contain opacity-15 z-0 transform scale-105"
+                aria-hidden="true"
+            />
+            <div className="relative z-10">
+                <h4 className="text-2xl font-bold text-theme-accent mb-4 animate-pulseCustom">Hold Your Fins!</h4>
+                <p className="text-theme-text mb-6 text-md">
+                This feature is swimming your way in the next phase! You'll soon be able to use your Sea Tokens to buy awesome in-game assets and power up your whale with cool upgrades in the store.
+                </p>
+                <button
+                onClick={() => setShowDepositComingSoonNotice(false)}
+                className="py-2 px-8 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded-lg transition-colors duration-200 transform hover:scale-105"
+                >
+                Got It!
+                </button>
+            </div>
+            </div>
+      </Modal>
+    );
+  }
+
+  if (showWithdrawComingSoonNotice) {
+     return (
+        <Modal isOpen={isOpen} onClose={closeModalAndNotices} title="Whale Wallet 🐳" size="md">
+            <div 
+                className="relative text-center p-8 rounded-lg shadow-2xl min-h-[350px] flex flex-col items-center justify-center overflow-hidden animate-fadeIn"
+                style={{ background: 'linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-info) 100%)' }}
+            >
+            <img
+                src={WITHDRAW_COMING_SOON_WHALE_IMAGE_URL}
+                alt="Diving Whale"
+                className="absolute bottom-0 right-0 w-2/3 h-2/3 object-contain opacity-20 z-0 transform translate-x-1/4 translate-y-1/4 scale-110"
+                aria-hidden="true"
+            />
+            <div className="relative z-10">
+                <h4 className="text-3xl font-bold text-theme-white mb-5" style={{ textShadow: '1px 1px 3px rgba(0,0,0,0.5)' }}>
+                    Withdrawal Feature - Diving In Soon! <span role="img" aria-label="whale emoji">🐋</span>
+                </h4>
+                <p className="text-theme-text mb-8 text-lg leading-relaxed">
+                Securely withdrawing your hard-earned Sea Tokens will be available in our next major update. Get ready to take your treasures to new depths! We're working on making it super smooth and safe for you.
+                </p>
+                <button
+                onClick={() => setShowWithdrawComingSoonNotice(false)}
+                className="py-3 px-10 bg-pink-600 hover:bg-pink-700 text-white font-extrabold rounded-lg transition-colors duration-200 transform hover:scale-105 shadow-xl text-lg"
+                >
+                Sounds Great!
+                </button>
+            </div>
+            </div>
+        </Modal>
+    );
+  }
+
+
+  return (
+    <Modal isOpen={isOpen} onClose={closeModalAndNotices} title="Whale Wallet 🐳" size="md">
+        <div className="space-y-6">
+          {/* Wallet Balance */}
+          <div className="p-4 bg-theme-primary/30 rounded-lg">
+            <h4 className="text-lg font-semibold mb-2 text-theme-accent">Balance 💰</h4>
+            <p className="text-3xl font-bold text-theme-warning">{playerData.seaTokens.toFixed(2)} <span className="text-xl">Sea Tokens</span></p>
+            <p className="text-xs text-gray-400 mt-1">(Balance updates live based on your in-game actions)</p>
+            <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="depositAmount" className="block text-sm font-medium text-gray-300 mb-1">Deposit Sea Tokens</label>
+                <input
+                  type="number"
+                  id="depositAmount"
+                  value={depositAmount}
+                  onChange={(e) => setDepositAmount(e.target.value)}
+                  placeholder="Amount"
+                  className="w-full p-2 rounded bg-theme-dark border border-theme-border text-white focus:ring-pink-500 focus:border-pink-500"
+                />
+                <button onClick={handleDeposit} className="mt-2 w-full py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded transition-colors duration-200">
+                  Deposit
+                </button>
+              </div>
+              <div>
+                <label htmlFor="withdrawAmount" className="block text-sm font-medium text-gray-300 mb-1">Withdraw Sea Tokens</label>
+                <input
+                  type="number"
+                  id="withdrawAmount"
+                  value={withdrawAmount}
+                  onChange={(e) => setWithdrawAmount(e.target.value)}
+                  placeholder="Amount"
+                  className="w-full p-2 rounded bg-theme-dark border border-theme-border text-white focus:ring-pink-500 focus:border-pink-500"
+                />
+                <button onClick={handleWithdraw} className="mt-2 w-full py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded transition-colors duration-200">
+                  Withdraw
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Live Crypto Prices Section */}
+          <div className="p-4 bg-theme-primary/30 rounded-lg">
+            <h4 className="text-lg font-semibold mb-2 text-theme-accent">Live Crypto Prices 📈</h4>
+            {cryptoLoading && <p className="text-sm text-gray-400 italic">Loading prices...</p>}
+            {cryptoError && <p className="text-sm text-theme-danger">{cryptoError}</p>}
+            {!cryptoLoading && !cryptoError && (
+              <div className="space-y-1 text-sm">
+                <p className="text-gray-300">Bitcoin (BTC): <span className="font-bold text-theme-white">{bitcoinPrice || 'N/A'}</span></p>
+                <p className="text-gray-300">Dogecoin (DOGE): <span className="font-bold text-theme-white">{dogecoinPrice || 'N/A'}</span></p>
+              </div>
+            )}
+            <p className="text-xs text-gray-500 mt-2">Prices via CoinGecko API. Not financial advice.</p>
+          </div>
+
+          {/* Token Staking Section */}
+          <div className="p-4 bg-theme-primary/30 rounded-lg">
+            <h4 className="text-lg font-semibold mb-2 text-theme-accent">Sea Token Staking 📈</h4>
+            <div className="flex justify-between mb-2 text-sm text-gray-300">
+              <p>Total Staked: <span className="font-bold text-theme-white">{playerData.stakedTokens} Sea Tokens</span></p>
+              <p>Reward Rate: <span className="font-bold text-theme-white">{(adminConfig.globalTokenStakingRate * 100).toFixed(1)}% / hour</span></p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+              <div>
+                <label htmlFor="stakeAmount" className="block text-sm font-medium text-gray-300 mb-1">Stake Sea Tokens</label>
+                <input
+                  type="number"
+                  id="stakeAmount"
+                  value={stakeAmount}
+                  onChange={(e) => setStakeAmount(e.target.value)}
+                  placeholder="Amount to Stake"
+                  className="w-full p-2 rounded bg-theme-dark border border-theme-border text-white focus:ring-pink-500 focus:border-pink-500"
+                  min="1"
+                  max={playerData.seaTokens}
+                />
+                <button
+                  onClick={handleStake}
+                  className="mt-2 w-full py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded transition-colors duration-200 disabled:bg-pink-400 disabled:text-gray-100"
+                  disabled={isStakeInvalid}
+                >
+                  Stake
+                </button>
+              </div>
+              <div>
+                <label htmlFor="unstakeAmount" className="block text-sm font-medium text-gray-300 mb-1">Unstake Sea Tokens</label>
+                <input
+                  type="number"
+                  id="unstakeAmount"
+                  value={unstakeAmount}
+                  onChange={(e) => setUnstakeAmount(e.target.value)}
+                  placeholder="Amount to Unstake"
+                  className="w-full p-2 rounded bg-theme-dark border border-theme-border text-white focus:ring-pink-500 focus:border-pink-500"
+                  min="1"
+                  max={playerData.stakedTokens}
+                />
+                <button
+                  onClick={handleUnstake}
+                  className="mt-2 w-full py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded transition-colors duration-200 disabled:bg-pink-400 disabled:text-gray-100"
+                  disabled={isUnstakeInvalid}
+                >
+                  Unstake
+                </button>
+              </div>
+            </div>
+
+            <div className="mt-4 pt-4 border-t border-theme-border">
+              <p className="text-sm text-gray-300">Available Sea Token Rewards: <span className="font-bold text-theme-success">{availableTokenRewards.toFixed(2)} Sea Tokens</span></p>
+              <button
+                onClick={onClaimRewards}
+                className="mt-2 w-full py-2 px-4 bg-pink-600 hover:bg-pink-700 text-white font-bold rounded transition-colors duration-200 disabled:bg-pink-400 disabled:text-gray-100"
+                disabled={availableTokenRewards <= 0}
+              >
+                Claim Sea Token Rewards
+              </button>
+            </div>
+          </div>
+        </div>
+    </Modal>
+  );
+};

WhaleCombatGuideModal.tsx

@@ -0,0 +1,203 @@
+
+import React from 'react';
+import { Modal } from '../Modal';
+import { MAX_STAKING_SLOTS } from '../../constants';
+
+interface WhaleCombatGuideModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const WhaleCombatGuideModal: React.FC<WhaleCombatGuideModalProps> = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="📜 Doge Whales - The Ultimate Combat & Feature Guide" size="xl">
+      <div className="space-y-6 text-gray-300 text-sm leading-relaxed">
+        
+        <section>
+          <h3 className="text-xl font-semibold text-theme-accent mb-2 border-b border-theme-border pb-1">🚀 Welcome, Doge Whale Commander!</h3>
+          <p>Embark on an epic journey through the crypto-ocean! This guide is your key to mastering Doge Whale Wars, understanding its rich features, and conquering the cosmic depths. Prepare for battle, collect legendary NFTs, and build your fortune in Sea Tokens!</p>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">🎯 Core Objective</h3>
+          <p>Your mission, should you choose to accept it:</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Survive & Thrive:</strong> Navigate treacherous waters and fend off hostile cosmic creatures.</li>
+            <li><strong>Amass Wealth:</strong> Defeat enemies to earn points and valuable Sea Tokens.</li>
+            <li><strong>Collectibles:</strong> Snag Sea Tokens dropped by foes or floating freely. Keep an eager eye out for rare NFT Bubbles containing treasures!</li>
+            <li><strong>Dominate:</strong> Level up your Whale, enhance your gear with NFTs, and become a legend of the deep.</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">🕹️ Mastering the Controls</h3>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Movement:</strong> Pilot your Whale using <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">W</kbd>, <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">A</kbd>, <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">S</kbd>, <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">D</kbd> keys or the Arrow Keys (<kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">↑</kbd> <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">←</kbd> <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">↓</kbd> <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">→</kbd>).</li>
+            <li><strong>Primary Attack:</strong> Unleash your Whale's weaponry by pressing the <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300 rounded-md">Spacebar</kbd>. Some Whales have auto-fire capabilities under certain conditions or by default.</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">🐳 Your Whale Avatar</h3>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Character Choice:</strong> Select from a diverse roster of Doge Whale characters, each with unique base stats, starting weapons, and potential special abilities (like one-hit kills or auto-fire thresholds). Customize your Whale's name in the Profile section!</li>
+            <li><strong>Health (HP):</strong> Your lifeline! Displayed in the HUD. If it drops to zero, your current expedition ends.</li>
+            <li><strong>NFT Power-Ups:</strong> Equipped NFTs are crucial! They can significantly boost your Whale's speed, damage, Sea Token collection rate, XP gain, or provide an all-around statistical advantage.</li>
+          </ul>
+        </section>
+        
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">💣 Weapon Arsenal Overview</h3>
+          <p>Your chosen Whale character comes with a default weapon, but various systems exist:</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Standard & Heavy Bullets:</strong> Reliable projectiles, often fired in a cone spread.</li>
+            <li><strong>Rockets:</strong> Powerful, manually aimed or auto-targeting based on configuration.</li>
+            <li><strong>Lasers:</strong> Fast-moving energy beams.</li>
+            <li><strong>Sword Throw:</strong> Unique projectile type with good damage.</li>
+            <li><strong>Missiles (Auto-Target/Homing):</strong> Some Whales can fire missiles that seek out the nearest enemy or are passively launched.</li>
+            <li><strong>Bombs:</strong> Area-of-effect (AoE) projectiles that detonate after a fuse time, affected by gravity.</li>
+            <li><strong>Summon Fish Minions:</strong> Command allied fish to fight alongside you.</li>
+            <li><strong>Flame Cone:</strong> A short-range cone of fire that can apply burning damage over time (DoT) and potentially cause enemies to explode if exposed long enough!</li>
+            <li><strong>Red Arrow Defense:</strong> A sophisticated system (primarily for the Guardian Whale) that automatically targets and destroys incoming enemy projectiles or damages enemies.</li>
+            <li><strong>Doge Launcher:</strong> A special, powerful weapon that fires iconic Doge and Bone images for devastating (often one-hit kill) effects.</li>
+          </ul>
+           <p className="mt-1 text-xs text-gray-400">Weapon specifics like cooldown, damage, and special properties are defined by the Whale character and global admin settings.</p>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">🦑 Enemies of the Crypto-Deep</h3>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Diverse Threats:</strong> From nimble Space Minnows to formidable Mecha Octopuses, the ocean is teeming with unique adversaries.</li>
+            <li><strong>Attack Patterns:</strong> Most enemies will advance towards your Whale and may fire projectiles. Direct collision is also damaging!</li>
+            <li><strong>Rewards:</strong> Vanquishing foes yields score points, XP, and precious Sea Tokens.</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">💰 Pickups & Treasures</h3>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Sea Tokens (ST):</strong> The lifeblood of the Doge Whale economy! Collect them by maneuvering your Whale over them. If many tokens are on screen, they'll be automatically drawn to you!</li>
+            <li><strong>NFT Bubbles:</strong> These rare, shimmering bubbles are a sight to behold. Pop them for a chance to acquire new NFTs directly or receive a handsome bonus of Sea Tokens. Rarity (Common, Rare, Legendary) influences the potential reward.</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">📊 Understanding Your HUD (Heads-Up Display)</h3>
+          <p>Located at the top-right, your HUD provides critical real-time game information:</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Health (HP):</strong> Current/Max health of your Whale.</li>
+            <li><strong>Experience (XP):</strong> Your progress bar towards the next level.</li>
+            <li><strong>Sea Tokens:</strong> Your accumulated ST balance for the current session.</li>
+            <li><strong>Equipped NFT:</strong> Name of your currently active NFT (if any).</li>
+            <li><strong>Level & Score:</strong> Your Whale's current level and total score for this run.</li>
+          </ul>
+        </section>
+        
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">🧬 The NFT Ecosystem</h3>
+          <p>NFTs (Non-Fungible Tokens) are unique digital assets that provide powerful in-game advantages.</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>NFT Hub (Marketplace):</strong>
+                <ul className="list-circle list-inside ml-4 space-y-0.5">
+                    <li><strong>Market Tab:</strong> Browse and purchase NFTs using your Sea Tokens. Each NFT has a price, rarity, and specific effect.</li>
+                    <li><strong>My NFTs Tab:</strong> View your collected NFTs. From here, you can equip an NFT to gain its benefits or select them for breeding if they are not staked in a Vault Slot.</li>
+                    <li><strong>Breeding Tab:</strong> Combine two compatible parent NFTs from your collection to create a new, potentially rarer or more powerful, hybrid NFT! Breeding takes time and has specific combinations for unique outcomes.</li>
+                </ul>
+            </li>
+            <li><strong>NFT Effects:</strong> These vary widely:
+                <ul className="list-circle list-inside ml-4 space-y-0.5">
+                    <li><strong className="text-yellow-400">Coins %:</strong> Increases Sea Tokens collected from enemies.</li>
+                    <li><strong className="text-blue-400">XP %:</strong> Boosts experience points gained.</li>
+                    <li><strong className="text-red-400">Damage %:</strong> Enhances your weapon damage.</li>
+                    <li><strong className="text-green-400">Speed %:</strong> Increases your Whale's movement speed.</li>
+                    <li><strong className="text-purple-400">All Stats %:</strong> Provides a general boost to all the above attributes.</li>
+                </ul>
+            </li>
+            <li><strong>Rarity:</strong> NFTs come in Common, Rare, and Legendary rarities, influencing their power and value.</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">📈 Staking & Passive Income</h3>
+          <p>Put your assets to work for you!</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Sea Token Staking (Wallet):</strong> Stake your Sea Tokens directly in the Wallet modal to earn a percentage-based return over time. You can unstake and claim rewards at any point.</li>
+            <li><strong>NFT Vault (Slot Staking):</strong>
+                <ul className="list-circle list-inside ml-4 space-y-0.5">
+                    <li>Stake your owned (and unequipped) NFTs into one of {MAX_STAKING_SLOTS} available Vault Slots.</li>
+                    <li>Each staked NFT generates Sea Tokens passively based on a base rate and its individual <strong className="text-cyan-400">Mining Power</strong>.</li>
+                    <li><strong className="text-cyan-400">Upgrade Mining Power:</strong> Spend Sea Tokens to increase an NFT's Mining Power, thereby boosting its ST generation rate in the Vault. Costs increase with each power level.</li>
+                    <li>Claim accumulated rewards from all staked NFT slots periodically.</li>
+                    <li>NFTs staked in Vault Slots cannot be equipped or used for breeding until unstaked.</li>
+                </ul>
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">👤 Player Profile & Customization</h3>
+          <p>Access the Profile modal to:</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Set Your Name:</strong> Choose a name for your Whale adventurer.</li>
+            <li><strong>Select Character:</strong> Pick your preferred Whale class before starting a game. Each has different stats and default weapons.</li>
+            <li><strong>View Stats:</strong> Check your current level, XP, health, Sea Token balance, score, and NFT collection details.</li>
+            <li><strong>Claim NFT Staking Rewards:</strong> Collect Sea Tokens earned from your NFTs staked in the Vault.</li>
+            <li><strong>Sound Settings:</strong> Adjust master volume and mute/unmute game sounds.</li>
+            <li><strong>AI Game Guide Chat:</strong> Ask the friendly AI assistant for tips, game information, or help with features.</li>
+          </ul>
+        </section>
+        
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">🎰 DWHL Arcade Zone</h3>
+          <p>Take a break from combat and try your luck at the Arcade!</p>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Whale Lottery:</strong>
+                <ul className="list-circle list-inside ml-4 space-y-0.5">
+                    <li>Buy lottery tickets using Sea Tokens.</li>
+                    <li>Play by flipping one of three cards to reveal a prize, which could be Sea Tokens or a "Miss."</li>
+                    <li>Track your lottery activity and aim for Trophies by winning ST prizes!</li>
+                </ul>
+            </li>
+            <li><strong>Whale Spin:</strong>
+                <ul className="list-circle list-inside ml-4 space-y-0.5">
+                    <li>Spend Sea Tokens for a chance to spin the wheel (cooldown applies after each paid spin).</li>
+                    <li>Prizes include Sea Tokens, an Extra Spin, or Lottery Tickets. Land on the Jackpot for a big ST reward!</li>
+                </ul>
+            </li>
+             <li><strong>Whale Rewards (Daily Claims):</strong>
+                <ul className="list-circle list-inside ml-4 space-y-0.5">
+                    <li><strong>Daily ST Reward:</strong> Claim a free amount of Sea Tokens every 24 hours. Maintain a streak for increasing rewards!</li>
+                    <li><strong>Daily Free Lottery Ticket:</strong> Get one free lottery ticket every 24 hours.</li>
+                </ul>
+            </li>
+            <li><strong>Referral System:</strong>
+                <ul className="list-circle list-inside ml-4 space-y-0.5">
+                    <li>Share your unique referral code with friends.</li>
+                    <li>Enter a friend's valid referral code (once) to claim a bonus (e.g., a free lottery ticket).</li>
+                </ul>
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">✨ Visuals & Atmosphere</h3>
+          <p>Immerse yourself in the Doge Whale Wars universe with dynamic visual effects such as blood particles from hits, explosions from bombs and special enemy KOs, and even atmospheric rain during your cosmic voyages.</p>
+        </section>
+        
+        <section>
+          <h3 className="text-lg font-semibold text-theme-accent mb-2">💡 Pro Tips for Dominance</h3>
+          <ul className="list-disc list-inside ml-4 space-y-1">
+            <li><strong>Stay Agile:</strong> Perpetual motion is your best defense. Weave through enemy fire!</li>
+            <li><strong>Threat Assessment:</strong> Prioritize dangerous or close-range enemies first.</li>
+            <li><strong>Smart Collection:</strong> Grab those Sea Tokens, but not at the cost of heavy damage. Remember the auto-collect feature for ST!</li>
+            <li><strong>NFT Synergy:</strong> Experiment! Find NFT combinations that amplify your chosen Whale's strengths or cover its weaknesses.</li>
+            <li><strong>Master Your Whale:</strong> Learn the nuances of your selected Whale character's default weapon and abilities.</li>
+            <li><strong>Visit the Arcade:</strong> Don't forget your daily rewards and spins/tickets for extra ST and fun!</li>
+          </ul>
+        </section>
+
+        <p className="text-center font-bold text-theme-warning mt-8 text-lg">Now, go forth, Commander, and make waves in the crypto-ocean! May your aim be true and your wallet ever full!</p>
+      </div>
+    </Modal>
+  );
+};

app.css

@@ -0,0 +1,172 @@
+/* app.css */
+
+/* Basic Reset */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans, 'Inter', sans-serif);
+  background-color: var(--theme-dark); /* Fallback if gradient doesn't load */
+  color: var(--theme-text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Headings styling with Orbitron */
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Orbitron', sans-serif;
+  color: var(--theme-accent);
+  margin-bottom: 0.75rem;
+  line-height: 1.3;
+}
+
+h1 { font-size: 2.25rem; } /* Corresponds to Tailwind text-4xl */
+h2 { font-size: 1.875rem; } /* Corresponds to Tailwind text-3xl */
+h3 { font-size: 1.5rem; }   /* Corresponds to Tailwind text-2xl */
+h4 { font-size: 1.25rem; }  /* Corresponds to Tailwind text-xl */
+
+p {
+  margin-bottom: 1rem;
+  color: var(--theme-text);
+}
+
+a {
+  color: var(--theme-accent);
+  text-decoration: none;
+  transition: color 0.2s ease-in-out;
+}
+
+a:hover {
+  color: var(--theme-hover);
+  text-decoration: underline;
+}
+
+/* Basic button styling (can be overridden by Tailwind or specific component styles) */
+button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+  font-family: 'Orbitron', sans-serif;
+  cursor: pointer;
+  padding: 0.65rem 1.25rem; /* Slightly more padding */
+  border-radius: 0.375rem; /* rounded-md */
+  border: 1px solid transparent;
+  font-weight: 600; /* semi-bold */
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease;
+}
+
+/* Default button theme (if no Tailwind bg-* class is applied) */
+button:not([class*="bg-"]), 
+input[type="button"]:not([class*="bg-"]),
+input[type="submit"]:not([class*="bg-"]),
+input[type="reset"]:not([class*="bg-"]) {
+  background-color: var(--theme-primary);
+  color: var(--theme-text);
+  border-color: var(--theme-border);
+}
+
+button:not([class*="bg-"]):hover,
+input[type="button"]:not([class*="bg-"]):hover,
+input[type="submit"]:not([class*="bg-"]):hover,
+input[type="reset"]:not([class*="bg-"]):hover {
+  background-color: var(--theme-secondary);
+  border-color: var(--theme-accent);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+button:active,
+input[type="button"]:active,
+input[type="submit"]:active,
+input[type="reset"]:active {
+    transform: scale(0.98);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
+}
+
+/* Input field styling */
+input[type="text"],
+input[type="number"],
+input[type="email"],
+input[type="password"],
+textarea,
+select {
+  background-color: var(--theme-dark);
+  color: var(--theme-text);
+  border: 1px solid var(--theme-border);
+  padding: 0.65rem 0.85rem;
+  border-radius: 0.375rem; /* rounded-md */
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  font-family: var(--font-sans, 'Inter', sans-serif);
+  font-size: 0.9rem;
+  width: 100%; /* Make inputs take full width by default within their container */
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--theme-accent);
+  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb, 0, 169, 224), 0.3); /* Uses --theme-accent-rgb from index.html */
+}
+
+/* Placeholder styling */
+::placeholder {
+  color: var(--theme-secondary);
+  opacity: 0.7;
+}
+
+/* Custom Scrollbar (more global) */
+::-webkit-scrollbar {
+  width: 12px; /* Slightly wider scrollbar */
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0.1); /* More subtle track */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--theme-primary);
+  border-radius: 10px;
+  border: 3px solid transparent; /* Creates padding around thumb */
+  background-clip: content-box; /* Important for border to act as padding */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--theme-secondary);
+}
+
+/* Container utility */
+.container {
+    width: 90%;
+    max-width: 1200px; /* Standard max-width */
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+/* Add any other global styles or utility classes here */
+/* Example: A class for a subtle card-like element */
+.card-base {
+  background-color: var(--theme-dark);
+  border: 1px solid var(--theme-border);
+  border-radius: 0.5rem; /* rounded-lg */
+  padding: 1rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}

combatwhalegame.tsx

@@ -0,0 +1,143 @@
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { Modal } from '../Modal'; // Assuming Modal.tsx is in ../Modal
+
+interface CombatWhaleGameModalProps {
+  isOpen: boolean;
+  onClose: () => void; // Though it might primarily close via onLoadingComplete
+  assetsToLoad: Record<string, string>; // key: assetId, value: URL
+  onLoadingComplete: (loadedAssets: Record<string, HTMLImageElement | null>) => void;
+  playerName: string;
+  playerCharacterImage: string; // URL for the player's chosen character image for display
+}
+
+// Helper to load an image and return a promise
+const loadImageAsset = (src: string): Promise<HTMLImageElement> => {
+  return new Promise((resolve, reject) => {
+    if (!src || src.trim() === '') {
+      // Resolve with a dummy image to avoid Promise.all failure on empty string
+      const dummyImg = new Image(1,1); // 1x1 transparent pixel
+      dummyImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+      resolve(dummyImg); // Still resolve so Promise.all doesn't break, map will contain this placeholder
+      return;
+    }
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = (eventOrMessage: Event | string) => {
+      let errorDetails = "Unknown error during image load.";
+      if (typeof eventOrMessage === 'string') {
+        errorDetails = eventOrMessage;
+      } else if (eventOrMessage && (eventOrMessage instanceof Event)) {
+        const targetElement = eventOrMessage.target as HTMLImageElement | null;
+        errorDetails = `Event type: ${eventOrMessage.type}. Target src: ${targetElement ? targetElement.src : 'N/A'}`;
+      }
+      console.error(`Failed to load image asset: ${src}. Details: ${errorDetails}`, eventOrMessage);
+      // Resolve with a dummy image to avoid Promise.all failure
+      const dummyImg = new Image(1,1); // 1x1 transparent pixel
+      dummyImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+      resolve(dummyImg); // Resolve with placeholder, error logged.
+    };
+    img.src = src;
+  });
+};
+
+
+export const CombatWhaleGameModal: React.FC<CombatWhaleGameModalProps> = ({
+  isOpen,
+  onClose,
+  assetsToLoad,
+  onLoadingComplete,
+  playerName,
+  playerCharacterImage,
+}) => {
+  const [loadingProgress, setLoadingProgress] = useState(0);
+  const [currentAssetMessage, setCurrentAssetMessage] = useState('Initializing...');
+  
+  // Filter out invalid asset sources upfront
+  const assetEntries = useMemo(() => 
+    Object.entries(assetsToLoad).filter(([_, src]) => src && src.trim() !== ''), 
+    [assetsToLoad]
+  );
+  const totalAssets = useMemo(() => assetEntries.length, [assetEntries]);
+
+
+  useEffect(() => {
+    if (!isOpen) return;
+    
+    setLoadingProgress(0);
+    setCurrentAssetMessage('Initializing...');
+
+    if (totalAssets === 0) {
+        setCurrentAssetMessage('No valid assets to load or all assets are empty.');
+        setLoadingProgress(100);
+        setTimeout(() => {
+             onLoadingComplete({}); // Pass empty map if no assets
+        }, 100);
+        return;
+    }
+
+    let loadedCount = 0;
+    const loadedAssetsMap: Record<string, HTMLImageElement | null> = {};
+
+    // Use the filtered assetEntries
+    assetEntries.forEach(([key, src], index) => {
+      setCurrentAssetMessage(`Loading ${key} (${index + 1}/${totalAssets})...`);
+      loadImageAsset(src)
+        .then(img => {
+          // Check if it's not the dummy image before storing, or store as null if it is
+          if (img.src !== "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") {
+            loadedAssetsMap[key] = img;
+          } else {
+            loadedAssetsMap[key] = null; // Indicates an empty or failed load
+          }
+        })
+        // loadImageAsset now always resolves, so .catch is less critical here
+        .catch(() => { // Should not be reached if loadImageAsset always resolves
+          loadedAssetsMap[key] = null;
+        })
+        .finally(() => {
+          loadedCount++;
+          setLoadingProgress((loadedCount / totalAssets) * 100);
+          if (loadedCount === totalAssets) {
+            setCurrentAssetMessage('All assets processed!');
+            setTimeout(() => {
+                onLoadingComplete(loadedAssetsMap);
+            }, 500); 
+          }
+        });
+    });
+  }, [isOpen, assetEntries, totalAssets, onLoadingComplete]); // Dependencies updated
+
+  if (!isOpen) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={`Get Ready, ${playerName}!`} size="md">
+      <div className="flex flex-col items-center justify-center p-6 space-y-6">
+        <h3 className="text-xl font-semibold text-theme-accent">Entering the Crypto-Ocean...</h3>
+        {playerCharacterImage && (
+          <img 
+            src={playerCharacterImage} 
+            alt={`${playerName}'s Whale`} 
+            className="w-32 h-32 md:w-40 md:h-40 object-contain rounded-lg border-2 border-theme-accent shadow-lg animate-pulseCustom"
+          />
+        )}
+        <div className="w-full bg-theme-primary/50 rounded-full h-6 overflow-hidden border border-theme-border">
+          <div
+            className="bg-theme-success h-full rounded-full text-xs font-medium text-theme-dark text-center p-0.5 leading-none transition-all duration-300 ease-linear"
+            style={{ width: `${loadingProgress}%` }}
+            aria-valuenow={loadingProgress}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            role="progressbar"
+          >
+           {Math.round(loadingProgress)}%
+          </div>
+        </div>
+        <p className="text-sm text-gray-300">{currentAssetMessage}</p>
+        {loadingProgress < 100 && totalAssets > 0 && (
+            <div className="w-10 h-10 border-4 border-theme-accent border-t-transparent rounded-full animate-spin mt-4" aria-label="Loading assets"></div>
+        )}
+      </div>
+    </Modal>
+  );
+};

constants.ts

@@ -0,0 +1,980 @@
+
+
+import { PlayerData, NFT, GameState, Rarity, BreedingResult, NFTCoinEffect, AdminConfig, GameCharacter, WeaponType, DogeWhaleEscapeLevel, MazeCellType } from './types.ts';
+import { generateId } from './utils.ts';
+
+// Simple constant exports moved higher
+export const NFT_PLACEHOLDER_IMAGE_URL = 'https://picsum.photos/seed';
+export const MAX_STAKING_SLOTS = 5;
+export const BASE_STAKING_REWARD_PER_MINUTE = 1; // Sea Tokens per minute per NFT
+export const INITIAL_MINING_POWER = 1;
+export const MINING_POWER_UPGRADE_COST_BASE = 50; // Sea Tokens for first upgrade (to power 2)
+export const MINING_POWER_UPGRADE_COST_FACTOR = 1.5; // Cost multiplies by this for each level
+export const LEVEL_XP_THRESHOLDS = [100, 250, 500, 1000, 2000];
+export const STAKING_REWARD_RATE_PER_HOUR = 0.05; // For Sea Tokens (token-only staking)
+export const BREEDING_TIME_SECONDS = 10;
+export const NFT_BUBBLE_SPAWN_INTERVAL_MS = 5000;
+export const NFT_BUBBLE_SPAWN_CHANCE = 0.2;
+export const PLAYER_SIZE = 30;
+export const PLAYER_SPEED = 4;
+export const ENEMY_SIZE = 25; // Default enemy size, can be overridden by character def
+export const MAX_ENEMIES = 10; // Increased max enemies for more challenge
+export const TOKEN_VALUE_ON_COLLECT = 5;
+export const FLOATING_TEXT_DURATION_MS = 1000;
+export const SEA_TOKEN_SIZE = 8;
+export const SEA_TOKEN_COLOR = 'gold';
+export const SEA_TOKEN_ATTRACT_SPEED = 2.5;
+export const MAX_SEA_TOKENS_ON_SCREEN = 50;
+export const STANDARD_PROJECTILE_SPEED = 7;
+export const HEAVY_PROJECTILE_SPEED = 5;
+export const ROCKET_PROJECTILE_SPEED = 6;
+export const LASER_PROJECTILE_SPEED = 10;
+export const MISSILE_SPEED = 4;
+export const SWORD_THROW_SPEED = 8;
+export const SWORD_PROJECTILE_WIDTH = 8;
+export const SWORD_PROJECTILE_HEIGHT = 20;
+export const BOMB_PROJECTILE_WIDTH = 12;
+export const BOMB_PROJECTILE_HEIGHT = 12;
+export const BOMB_PROJECTILE_INITIAL_SPEED_Y = -5;
+export const BOMB_PROJECTILE_SPEED_X_FACTOR = 0.8;
+export const BOMB_GRAVITY = 0.12;
+export const BOMB_FUSE_MS = 2500;
+export const BOMB_EXPLOSION_RADIUS = 70;
+export const BOMB_EXPLOSION_DURATION_MS = 400;
+export const BOMB_DAMAGE = 35;
+export const FISH_MINION_SIZE = 15;
+export const FISH_MINION_MAX_HEALTH = 25;
+export const FISH_MINION_ATTACK_RANGE = 180;
+export const FISH_MINION_PROJECTILE_SPEED = 6;
+export const FISH_MINION_PROJECTILE_SIZE = 5;
+export const FISH_MINION_FIRE_COOLDOWN_MS = 1200;
+export const FISH_MINION_BULLET_DAMAGE = 8;
+export const MAX_FISH_MINIONS_PER_PLAYER = 3;
+export const FISH_MINION_FOLLOW_DISTANCE = 50;
+export const FISH_MINION_FOLLOW_LERP_FACTOR = 0.03;
+export const AUTO_ROCKET_COOLDOWN_MS = 2500;
+export const AUTO_ROCKET_RANGE = 250;
+export const AUTO_ROCKET_SPEED = 3;
+export const ENEMY_PROJECTILE_SPEED = 3;
+export const ENEMY_PROJECTILE_SIZE = 5;
+export const ENEMY_BASE_HEALTH = 25; // Default, can be overridden
+export const COOLDOWN_STANDARD_BULLET = 250;
+export const COOLDOWN_HEAVY_BULLET = 400;
+export const COOLDOWN_ROCKET = 600;
+export const COOLDOWN_LASER = 500;
+export const COOLDOWN_SWORD_THROW = 700;
+export const COOLDOWN_AUTO_TARGET_MISSILE = 300;
+export const COOLDOWN_BOMB = 1800;
+export const COOLDOWN_SUMMON_FISH_MINION = 6000;
+
+// Cone Fire Constants for StandardBullet & HeavyBullet (multi-shot)
+export const CONE_PROJECTILE_COUNT_STANDARD = 3;
+export const CONE_PROJECTILE_COUNT_HEAVY = 3;
+export const CONE_ANGLE_DEGREES_MULTI_SHOT = 30; // Total angle of the cone spread for multi-shot
+
+// FlameCone Constants
+export const FLAME_CONE_ANGLE_DEGREES = 45; // Wider cone for flame effect
+export const FLAME_CONE_RANGE = 120; // How far the flame cone reaches
+export const FLAME_CONE_DURATION_MS = 200; // How long the visual effect of the cone lasts
+export const FLAME_CONE_DAMAGE_INITIAL = 8;
+export const FLAME_CONE_DOT_DAMAGE_PER_TICK = 3;
+export const FLAME_CONE_DOT_TOTAL_TICKS = 5; // Number of times burn damage is applied
+export const FLAME_CONE_DOT_TICK_INTERVAL_MS = 500; // Time between each burn damage tick
+export const COOLDOWN_FLAME_CONE = 450;
+
+// FlameCone Explosive Core Constants
+export const EXPLOSIVE_CORE_THRESHOLD_MS = 1500; // 1.5 seconds of fire exposure
+export const EXPLOSIVE_CORE_DAMAGE = 30; // Damage of the mini-blast
+export const EXPLOSIVE_CORE_RADIUS = 60; // Radius of the mini-blast
+export const EXPLOSIVE_CORE_SELF_DAMAGE_MULTIPLIER = 1.5; // Multiplier for damage to the exploding enemy itself
+export const EXPLOSIVE_CORE_EXPLOSION_COLOR = 'rgba(255,100,0,0.8)'; // Fiery orange-red for explosion visual
+
+
+// Red Arrow Defense System Constants
+export const COOLDOWN_RED_ARROW_DEFENSE = 500; // Fires 2 per second (500ms per projectile)
+export const RED_ARROW_PROJECTILE_SPEED = 9;
+export const RED_ARROW_PROJECTILE_DAMAGE = 1000; // High damage to "kill"
+export const RED_ARROW_PROJECTILE_WIDTH = 10; // Visual size
+export const RED_ARROW_PROJECTILE_HEIGHT = 20; // Visual size
+export const RED_ARROW_PROJECTILE_IMAGE_URL = `https://via.placeholder.com/50x100/FF0000/FFFFFF?text=Arrow`;
+export const RED_ARROW_DEFAULT_SHOT_COUNT = 5;
+
+// DogeLauncher Weapon Constants
+export const DOGE_PROJECTILE_IMAGE_URL = 'https://via.placeholder.com/50/FFFF00/000000?text=DOGE'; // Placeholder
+export const BONE_PROJECTILE_IMAGE_URL = 'https://via.placeholder.com/50x30/FFFFFF/000000?text=BONE'; // Placeholder
+export const DOGE_PROJECTILE_WIDTH = 25;
+export const DOGE_PROJECTILE_HEIGHT = 25;
+export const BONE_PROJECTILE_WIDTH = 25;
+export const BONE_PROJECTILE_HEIGHT = 15;
+export const DOGE_LAUNCHER_PROJECTILE_SPEED = 9;
+export const DOGE_LAUNCHER_DAMAGE = 9999; // One-hit kill damage
+export const COOLDOWN_DOGE_LAUNCHER = 350;
+
+
+export const NFT_DEFINITIONS: Record<string, NFT> = {
+  doge_whale: {
+    id: 'doge_whale',
+    name: 'Doge Whale NFT',
+    description: '+5% Sea Token Collection', // Updated
+    price: 100, // Price in Sea Tokens
+    rarity: Rarity.Common,
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/dogewhalenft/200/150`,
+    effect: { coins: 1.05 }
+  },
+  node_doge_whale: {
+    id: 'node_doge_whale',
+    name: 'Node Doge NFT',
+    description: '+10% XP Gain',
+    price: 200, // Price in Sea Tokens
+    rarity: Rarity.Common,
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/nodedogenft/200/150`,
+    effect: { xp: 1.10 }
+  },
+  mutant_rune_whale: {
+    id: 'mutant_rune_whale',
+    name: 'Mutant Rune NFT',
+    description: '+15% Damage',
+    price: 300, // Price in Sea Tokens
+    rarity: Rarity.Rare,
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/mutantrunenft/200/150`,
+    effect: { damage: 1.15 }
+  },
+  crystal_whale: {
+    id: 'crystal_whale',
+    name: '3D Crystal NFT',
+    description: '+20% Movement Speed',
+    price: 400, // Price in Sea Tokens
+    rarity: Rarity.Rare,
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/crystalwhalenft/200/150`,
+    effect: { speed: 1.20 }
+  },
+  quantum_whale: {
+    id: 'quantum_whale',
+    name: 'Quantum NFT',
+    description: '+10% All Stats',
+    price: 600, // Price in Sea Tokens
+    rarity: Rarity.Legendary,
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/quantumnft/200/150`,
+    effect: { allStats: 1.10 }
+  },
+  smart_whale: {
+    id: 'smart_whale',
+    name: 'Smart NFT (Bred)',
+    description: '+7% Sea Token & +5% XP', // Updated
+    price: 0, // Bred NFTs are not typically priced for market
+    rarity: Rarity.Rare,
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/smartwhalenft/200/150`,
+    effect: { coins: 1.07, xp: 1.05 }
+  },
+   hyper_whale: {
+    id: 'hyper_whale',
+    name: 'Hyper NFT (Bred)',
+    description: '+15% All Stats',
+    price: 0, // Bred NFTs are not typically priced for market
+    rarity: Rarity.Legendary,
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/hyperwhalenft/200/150`,
+    effect: { allStats: 1.15 }
+  }
+};
+
+export const GAME_CHARACTERS: Record<string, GameCharacter> = {
+  // Player Characters
+  classic_doge_whale: {
+    id: 'classic_doge_whale',
+    name: 'Doge Launcher Whale 🦴', // Renamed and weapon changed
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/nodedogeplayer/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.DogeLauncher, // Changed to DogeLauncher
+    autoFireHealthThreshold: 0,
+    baseHealth: 100,
+    canOneHitKill: false, // Weapon handles the one-hit kill
+  },
+  armored_doge_whale: {
+    id: 'armored_doge_whale',
+    name: 'Armored Doge Whale',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/armoredplayer/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.HeavyBullet,
+    autoFireHealthThreshold: 25,
+    baseHealth: 150,
+    canOneHitKill: true,
+  },
+  laser_sniper_whale: {
+    id: 'laser_sniper_whale',
+    name: 'Laser Sniper Whale',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/lasersniperplayer/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.Laser,
+    autoFireHealthThreshold: 50,
+    baseHealth: 80,
+    canOneHitKill: false,
+  },
+  demolition_doge_whale: {
+    id: 'demolition_doge_whale',
+    name: 'Demolition Doge Whale',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/demodogeplayer/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.Bomb,
+    autoFireHealthThreshold: 10,
+    baseHealth: 120,
+    canOneHitKill: false,
+  },
+  summoner_doge_whale: {
+    id: 'summoner_doge_whale',
+    name: 'Summoner Doge Whale',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/summonerdogeplayer/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.SummonFishMinion,
+    autoFireHealthThreshold: 75,
+    baseHealth: 90,
+    canOneHitKill: false,
+  },
+  three_d_crystal_whale: {
+    id: 'three_d_crystal_whale',
+    name: '3D Crystal Whale',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/3dcrystalplayer/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.Laser,
+    autoFireHealthThreshold: 60,
+    baseHealth: 90,
+    canOneHitKill: false,
+  },
+  original_doge_whale: { 
+    id: 'original_doge_whale',
+    name: 'Doge Whale (Standard)',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/dogewhaleplayer/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.StandardBullet, 
+    autoFireHealthThreshold: 0,
+    baseHealth: 100,
+    canOneHitKill: false,
+  },
+  guardian_whale: { 
+    id: 'guardian_whale',
+    name: 'Guardian Whale 🛡️',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/guardianwhale/100/100`,
+    type: 'player',
+    defaultWeaponType: WeaponType.RedArrowDefense,
+    autoFireHealthThreshold: 0, 
+    baseHealth: 120,
+    canOneHitKill: false,
+  },
+
+  // Enemy Characters (Original + New)
+  minnow_enemy: {
+    id: 'minnow_enemy',
+    name: 'Space Minnow',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/minnowenemy/80/80`,
+    type: 'enemy',
+    baseHealth: ENEMY_BASE_HEALTH,
+    baseSpeed: 1.5,
+  },
+  piranha_enemy: {
+    id: 'piranha_enemy',
+    name: 'Void Piranha',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/piranhaenemy/80/80`,
+    type: 'enemy',
+    baseHealth: ENEMY_BASE_HEALTH + 10,
+    baseSpeed: 2,
+  },
+  cosmic_jellyfish_enemy: {
+    id: 'cosmic_jellyfish_enemy',
+    name: 'Cosmic Jellyfish',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/cosmicjelly/80/80`,
+    type: 'enemy',
+    baseHealth: ENEMY_BASE_HEALTH + 5,
+    baseSpeed: 1.2,
+  },
+  starlight_angler_enemy: {
+    id: 'starlight_angler_enemy',
+    name: 'Starlight Angler',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/starlightangler/80/80`,
+    type: 'enemy',
+    baseHealth: ENEMY_BASE_HEALTH + 15,
+    baseSpeed: 1.8,
+  },
+  void_barracuda_enemy: {
+    id: 'void_barracuda_enemy',
+    name: 'Void Barracuda',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/voidbarracuda/80/80`,
+    type: 'enemy',
+    baseHealth: ENEMY_BASE_HEALTH + 20,
+    baseSpeed: 2.5,
+  },
+  asteroid_crab_enemy: {
+    id: 'asteroid_crab_enemy',
+    name: 'Asteroid Crab',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/asteroidcrab/80/80`,
+    type: 'enemy',
+    baseHealth: ENEMY_BASE_HEALTH + 30,
+    baseSpeed: 1.0,
+  },
+  // New Enemies from Snippet
+  shark_bot_enemy: {
+    id: 'shark_bot_enemy',
+    name: 'Shark Bot 🦈',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/sharkbot/80/80`, // Placeholder
+    type: 'enemy',
+    baseHealth: 10 * 5, // damage: 10
+    baseSpeed: 2.5,
+  },
+  giant_squid_enemy: {
+    id: 'giant_squid_enemy',
+    name: 'Giant Squid 🦑',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/giantsquid/80/80`,
+    type: 'enemy',
+    baseHealth: 20 * 5, // damage: 20
+    baseSpeed: 1.8,
+  },
+  electric_eel_enemy: {
+    id: 'electric_eel_enemy',
+    name: 'Electric Eel ⚡',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/electriceel/80/80`,
+    type: 'enemy',
+    baseHealth: 15 * 5, // damage: 15
+    baseSpeed: 3.0,
+  },
+  deep_sea_serpent_enemy: {
+    id: 'deep_sea_serpent_enemy',
+    name: 'Deep Sea Serpent 🐍',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/deepseaserpent/80/80`,
+    type: 'enemy',
+    baseHealth: 25 * 5, // damage: 25
+    baseSpeed: 4.0,
+  },
+  submarine_drone_enemy: {
+    id: 'submarine_drone_enemy',
+    name: 'Submarine Drone 🤖',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/submarinedrone/80/80`,
+    type: 'enemy',
+    baseHealth: 10 * 5, // damage: 10
+    baseSpeed: 2.2,
+  },
+  underwater_mine_enemy: {
+    id: 'underwater_mine_enemy',
+    name: 'Underwater Mine 💣',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/underwatermine/80/80`,
+    type: 'enemy',
+    baseHealth: 30 * 3, // damage: 30 (less health as it might be stationary or slow)
+    baseSpeed: 0.5, // Slow or stationary
+  },
+  mecha_octopus_enemy: {
+    id: 'mecha_octopus_enemy',
+    name: 'Mecha Octopus 🐙',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/mechaoctopus/100/100`, // Larger
+    type: 'enemy',
+    baseHealth: 40 * 5, // damage: 40 (Boss-like)
+    baseSpeed: 1.2,
+  },
+  alien_crab_enemy: {
+    id: 'alien_crab_enemy',
+    name: 'Alien Crab 🦀',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/aliencrab/80/80`,
+    type: 'enemy',
+    baseHealth: 20 * 5, // damage: 20
+    baseSpeed: 2.7,
+  },
+  toxic_jellyfish_enemy: {
+    id: 'toxic_jellyfish_enemy',
+    name: 'Toxic Jellyfish ☠️',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/toxicjellyfish/80/80`,
+    type: 'enemy',
+    baseHealth: 10 * 4, // damage: 10
+    baseSpeed: 1.5,
+  },
+  radioactive_piranha_enemy: {
+    id: 'radioactive_piranha_enemy',
+    name: 'Radioactive Piranha 🐟',
+    image: `${NFT_PLACEHOLDER_IMAGE_URL}/radioactivepiranha/80/80`,
+    type: 'enemy',
+    baseHealth: 5 * 5, // damage: 5 (swarm implies quantity over quality)
+    baseSpeed: 3.5,
+  },
+};
+
+export const BREEDING_COMBINATIONS: Record<string, BreedingResult> = {
+  "doge_whale_node_doge_whale": {
+    name: "Smart NFT (Bred)",
+    description: "+7% Sea Token & +5% XP", // Updated
+    image: NFT_DEFINITIONS.smart_whale.image,
+    rarity: Rarity.Rare,
+    effect: { coins: 1.07, xp: 1.05 }
+  },
+  "crystal_whale_quantum_whale": {
+    name: "Hyper NFT (Bred)",
+    description: "+15% All Stats",
+    image: NFT_DEFINITIONS.hyper_whale.image,
+    rarity: Rarity.Legendary,
+    effect: { allStats: 1.15 }
+  }
+};
+
+const DEFAULT_PLAYER_CHAR_ID = 'classic_doge_whale';
+const DEFAULT_PLAYER_CHAR_DETAILS = GAME_CHARACTERS[DEFAULT_PLAYER_CHAR_ID];
+
+export const INITIAL_PLAYER_DATA: PlayerData = {
+  id: generateId(),
+  name: '',
+  characterId: DEFAULT_PLAYER_CHAR_ID,
+  whaleColor: '#0074D9',
+  level: 1,
+  xp: 0,
+  maxXP: 100,
+  health: DEFAULT_PLAYER_CHAR_DETAILS?.baseHealth || 100,
+  maxHealth: DEFAULT_PLAYER_CHAR_DETAILS?.baseHealth || 100,
+  seaTokens: 500, // Renamed from dwhl
+  equippedNftId: 'doge_whale',
+  nftInventory: ['doge_whale'],
+  stakedTokens: 0,
+  stakingStartTime: null,
+  stakedNftSlots: Array(MAX_STAKING_SLOTS).fill(null),
+  nftMiningPowers: {},
+  lastNftRewardClaimTime: null,
+  totalStakingRewards: 0,
+  score: 0,
+};
+
+// --- Doge Whale Escape Game Constant URLs (will be used as fallbacks if not set in AdminConfig) ---
+export const DOGE_WHALE_ESCAPE_PLAYER_IMAGE_URL = 'https://via.placeholder.com/32/FFFF00/000000?text=Doge';
+export const DOGE_WHALE_ESCAPE_MINE_IMAGE_URL = 'https://via.placeholder.com/32/FF0000/FFFFFF?text=M';
+export const DOGE_WHALE_ESCAPE_GOAL_IMAGE_URL = 'https://via.placeholder.com/32/00FF00/FFFFFF?text=G';
+export const DOGE_WHALE_ESCAPE_WALL_IMAGE_URL = 'https://via.placeholder.com/32/808080/FFFFFF?text=W';
+export const DOGE_WHALE_ESCAPE_BOMB_IMAGE_URL = 'https://via.placeholder.com/32/800000/FFFFFF?text=B';
+export const DOGE_WHALE_ESCAPE_JELLYFISH_IMAGE_URL = 'https://via.placeholder.com/32/800080/FFFFFF?text=J';
+export const DOGE_WHALE_ESCAPE_CROCODILE_IMAGE_URL = 'https://via.placeholder.com/32/008000/FFFFFF?text=C';
+export const DOGE_WHALE_ESCAPE_ALGAE_IMAGE_URL = 'https://via.placeholder.com/32/32CD32/FFFFFF?text=A';
+export const DOGE_WHALE_ESCAPE_CURRENT_N_IMAGE_URL = 'https://via.placeholder.com/32/00FFFF/000000?text=N%E2%86%91';
+export const DOGE_WHALE_ESCAPE_CURRENT_S_IMAGE_URL = 'https://via.placeholder.com/32/00FFFF/000000?text=S%E2%86%93';
+export const DOGE_WHALE_ESCAPE_CURRENT_E_IMAGE_URL = 'https://via.placeholder.com/32/00FFFF/000000?text=E%E2%86%92';
+export const DOGE_WHALE_ESCAPE_CURRENT_W_IMAGE_URL = 'https://via.placeholder.com/32/00FFFF/000000?text=%E2%86%90W';
+export const DOGE_WHALE_ESCAPE_SNAKE_IMAGE_URL = 'https://via.placeholder.com/32/FFA500/000000?text=S';
+export const DOGE_WHALE_ESCAPE_LIFEUP_IMAGE_URL = 'https://via.placeholder.com/32/FFC0CB/000000?text=L%E2%99%A5';
+
+
+export const INITIAL_ADMIN_CONFIG: AdminConfig = {
+  globalNftStakingRate: 0.1, 
+  globalTokenStakingRate: STAKING_REWARD_RATE_PER_HOUR,
+  gameBackgroundImageUrl: 'https://images.pexels.com/photos/1666021/pexels-photo-1666021.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', // Default background
+  defaultEnemyImageUrl: 'https://via.placeholder.com/80/FF6347/FFFFFF?text=Enemy', // Default enemy image
+  playerAutoFire: true,
+  enemiesAutoTarget: true,
+  playerAutoTargets: true,
+  enemyFireCooldownMs: 2200, 
+  decorativeFishGoldenImage: 'https://via.placeholder.com/50/FFD700/000000?text=GoldFish',
+  decorativeFishStarImage: 'https://via.placeholder.com/50/FF4500/FFFFFF?text=StarFish',
+  decorativeFishBluefinImage: 'https://via.placeholder.com/50/1E90FF/FFFFFF?text=Bluefin',
+  bubbleSmallImage: 'https://via.placeholder.com/20/ADD8E6/000000?text=o',
+  bubbleMediumImage: 'https://via.placeholder.com/30/ADD8E6/000000?text=O',
+  bubbleLargeImage: 'https://via.placeholder.com/40/ADD8E6/000000?text=OO',
+  seaTokenImageUrl: 'https://via.placeholder.com/24/FFD700/000000?text=ST', // Default Sea Token image
+  savedReplies: [],
+
+  soundFireUrl: '',
+  soundEnemyKillUrl: '',
+  soundTokenCollectUrl: '',
+  soundNftBubbleCollectUrl: '',
+  soundLevelUpUrl: '',
+  soundGameOverUrl: '',
+  soundGameWinUrl: '',
+  soundSpinWinUrl: '',
+  soundSpinLoseUrl: '',
+  soundLotteryWinUrl: '',
+  soundLotteryLoseUrl: '',
+  soundDailyRewardClaimUrl: '',
+
+  // Visual Effect Defaults
+  bloodParticleLifespanSeconds: 4,
+  rainEffectEnabled: true,
+  rainDropSpeedMin: 1,
+  rainDropSpeedMax: 2.5,
+  rainDurationSeconds: 5,
+  rainIntervalSeconds: 7,
+  rainIntensity: 100,
+
+  // Red Arrow Defense System Config Defaults
+  redArrowActive: true,
+  redArrowCooldownMs: COOLDOWN_RED_ARROW_DEFENSE,
+  redArrowProjectileSpeed: RED_ARROW_PROJECTILE_SPEED,
+  redArrowDamage: RED_ARROW_PROJECTILE_DAMAGE,
+  redArrowImageUrl: RED_ARROW_PROJECTILE_IMAGE_URL, 
+  redArrowShotCount: RED_ARROW_DEFAULT_SHOT_COUNT, 
+
+  // Fire image assets
+  flameParticleImageUrl: 'https://via.placeholder.com/20/FFA500/000000?text=F', // Example
+  enemyBurningEffectImageUrl: 'https://via.placeholder.com/80/FF4500/FFFFFF?text=Burning', // Example
+  fireballProjectileImageUrl: 'https://via.placeholder.com/40/FF6347/FFFFFF?text=Ball', // Example
+
+  // Doge Whale Escape Game Asset URLs
+  dogeEscapePlayerImageUrl: DOGE_WHALE_ESCAPE_PLAYER_IMAGE_URL,
+  dogeEscapeWallImageUrl: DOGE_WHALE_ESCAPE_WALL_IMAGE_URL,
+  dogeEscapeGoalImageUrl: DOGE_WHALE_ESCAPE_GOAL_IMAGE_URL,
+  dogeEscapeMineImageUrl: DOGE_WHALE_ESCAPE_MINE_IMAGE_URL,
+  dogeEscapeBombImageUrl: DOGE_WHALE_ESCAPE_BOMB_IMAGE_URL,
+  dogeEscapeJellyfishImageUrl: DOGE_WHALE_ESCAPE_JELLYFISH_IMAGE_URL,
+  dogeEscapeCrocodileImageUrl: DOGE_WHALE_ESCAPE_CROCODILE_IMAGE_URL,
+  dogeEscapeAlgaeImageUrl: DOGE_WHALE_ESCAPE_ALGAE_IMAGE_URL,
+  dogeEscapeCurrentNImageUrl: DOGE_WHALE_ESCAPE_CURRENT_N_IMAGE_URL,
+  dogeEscapeCurrentSImageUrl: DOGE_WHALE_ESCAPE_CURRENT_S_IMAGE_URL,
+  dogeEscapeCurrentEImageUrl: DOGE_WHALE_ESCAPE_CURRENT_E_IMAGE_URL,
+  dogeEscapeCurrentWImageUrl: DOGE_WHALE_ESCAPE_CURRENT_W_IMAGE_URL,
+  dogeEscapeSnakeImageUrl: DOGE_WHALE_ESCAPE_SNAKE_IMAGE_URL,
+  dogeEscapeLifeUpImageUrl: DOGE_WHALE_ESCAPE_LIFEUP_IMAGE_URL,
+};
+
+// --- Doge Whale Escape Game Constants ---
+export const DOGE_ESCAPE_GRID_CELL_SIZE = 32; 
+export const INITIAL_DOGE_ESCAPE_LIVES = 3;
+export const MAX_DOGE_ESCAPE_LIVES = 5; 
+
+// Probabilities for revealing items from destroyed walls
+export const REVEAL_SNAKE_CHANCE = 0.15; // 15%
+export const REVEAL_LIFEUP_CHANCE = 0.20; // 20%
+// Nothing revealed chance is 1 - (REVEAL_SNAKE_CHANCE + REVEAL_LIFEUP_CHANCE) = 0.65 or 65%
+
+
+const P = MazeCellType.Path;
+const W = MazeCellType.Wall;
+const S = MazeCellType.Start;
+const G = MazeCellType.Goal;
+const M = MazeCellType.Mine;
+const B = MazeCellType.Bomb; 
+const J = MazeCellType.Jellyfish; 
+const C = MazeCellType.Crocodile; 
+const A = MazeCellType.ToxicAlgae; 
+const CN = MazeCellType.CurrentN; 
+const CS = MazeCellType.CurrentS; 
+const CE = MazeCellType.CurrentE; 
+const CW = MazeCellType.CurrentW; 
+const K = MazeCellType.Snake; 
+const L = MazeCellType.LifeUp; 
+
+export const DOGE_WHALE_ESCAPE_LEVELS: DogeWhaleEscapeLevel[] = [
+  // Level 1: Modified for Fire Power & Snake Neutralization
+  {
+    id: 1, name: "The Shallows", startPos: { row: 0, col: 0 }, layout: [
+      [S,P,P,W,P,P,P,W,P,K,P,P], // Added a Snake (K)
+      [W,W,P,W,P,W,P,W,P,W,W,W], 
+      [P,P,P,M,P,W,P,M,P,P,P,G], 
+      [P,W,W,W,P,W,W,W,W,W,P,W],
+      [P,P,M,P,P,P,P,P,P,P,P,P],
+      [W,W,P,W,W,W,W,P,W,W,W,W],
+      [P,M,W,P,P,M,P,P,P,P,M,P], 
+      [P,W,W,W,W,W,W,W,W,W,W,P],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,W,W,W,W,W,P,W,W,W,W,W],
+    ], message: "Use Arrow Keys to move, Spacebar to fire! Neutralize Snakes (K) to unlock the Goal (G).",
+    requireAllSnakesNeutralized: true, // New win condition
+  },
+  // Levels 2-5: Basic Mines
+  {
+    id: 2, name: "Coral Corridors", startPos: { row: 9, col: 0 }, layout: [
+      [P,W,P,P,P,W,P,P,P,P,W,G],
+      [P,W,P,W,P,W,P,W,W,W,W,P],
+      [P,M,P,W,P,P,P,P,M,P,P,P],
+      [W,W,W,W,M,W,W,W,W,W,P,W],
+      [P,P,P,P,P,P,P,W,P,P,P,P],
+      [P,W,W,W,W,W,M,W,P,W,W,W],
+      [P,M,P,P,P,W,P,P,P,P,P,P],
+      [S,W,P,W,P,P,P,W,W,W,W,W],
+      [P,W,P,M,W,P,M,W,P,P,P,P],
+      [P,P,P,P,W,P,P,P,P,W,W,W],
+    ]
+  },
+  {
+    id: 3, name: "Minefield Maze", startPos: {row: 0, col: 5}, layout: [
+      [W,W,W,W,W,S,W,W,W,W,W,W],
+      [P,M,P,M,P,P,P,M,P,M,P,P],
+      [P,W,P,W,W,W,W,W,P,W,W,P],
+      [P,M,P,P,P,M,P,P,P,M,P,P],
+      [W,W,W,P,W,W,W,P,W,W,W,P],
+      [P,P,P,P,M,P,M,P,P,P,P,W],
+      [P,W,M,W,W,P,W,W,M,W,P,P],
+      [P,P,M,P,P,P,M,P,P,M,P,G],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 4, name: "Twisty Passages", startPos: {row: 4, col: 0}, layout: [
+      [W,W,W,P,P,P,P,P,P,W,W,W],
+      [W,M,P,P,W,W,W,W,P,M,W,W],
+      [G,P,W,W,W,P,P,W,W,P,P,W],
+      [P,P,P,W,P,P,M,P,W,M,P,W],
+      [S,W,P,W,P,W,W,P,W,P,P,W],
+      [P,W,P,P,P,W,P,P,P,P,W,W],
+      [P,W,M,W,W,W,P,W,W,P,P,P],
+      [P,P,P,P,M,P,P,P,W,W,W,P],
+      [W,M,W,W,W,W,W,P,M,P,P,P],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+    ]
+  },
+  {
+    id: 5, name: "Central Chamber", startPos: {row: 0, col: 0}, layout: [
+      [S,P,P,P,W,W,W,P,P,P,P,G],
+      [W,W,W,P,P,M,P,P,W,W,W,P],
+      [P,P,P,P,W,M,W,P,P,P,P,P],
+      [P,W,W,W,W,M,W,W,W,W,W,P],
+      [P,P,P,W,M,M,M,W,P,P,P,P],
+      [W,W,P,W,M,M,M,W,P,W,W,W],
+      [P,P,P,W,W,M,W,W,P,P,P,P],
+      [P,W,W,W,P,M,P,W,W,W,W,W],
+      [P,M,P,P,P,P,P,P,M,P,P,P],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+    ]
+  },
+  // Levels 6-10: Introduce Bombs (B)
+  {
+    id: 6, name: "Bombs Away!", startPos: {row: 0, col: 0}, layout: [
+      [S,B,P,W,P,P,P,W,P,P,P,G],
+      [W,W,P,W,P,W,P,W,P,W,W,P],
+      [P,P,P,B,P,W,P,B,P,P,P,P],
+      [P,W,W,W,P,W,W,W,W,W,P,W],
+      [P,P,M,P,B,P,P,P,P,M,P,P],
+      [W,W,P,W,W,W,W,B,W,W,W,W],
+      [P,B,P,P,P,B,P,P,P,P,B,P],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [P,B,P,B,P,B,P,B,P,B,P,P],
+    ], message: "Watch out for Bombs (B) and Mines (M)!"
+  },
+  {
+    id: 7, name: "Explosive Escape", startPos: {row: 9, col: 11}, layout: [
+      [P,P,P,P,W,W,P,P,P,P,P,P],
+      [P,W,B,W,P,M,P,W,B,W,W,P],
+      [P,W,P,W,P,W,P,W,P,P,P,P],
+      [P,B,P,P,B,P,B,P,P,B,P,W],
+      [W,W,W,P,W,W,W,P,W,W,W,P],
+      [P,P,P,P,M,P,M,B,P,P,P,S],
+      [P,W,M,W,W,B,W,W,M,W,P,W],
+      [G,P,M,P,P,P,M,P,P,M,P,P],
+      [W,B,W,W,B,W,W,B,W,W,B,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 8, name: "Blast Zone", startPos: {row: 4, col: 5}, layout: [
+      [W,W,W,W,P,P,P,W,W,W,W,W],
+      [P,B,P,B,P,S,P,B,P,B,P,P],
+      [P,W,P,W,W,W,W,W,P,W,W,P],
+      [P,M,B,P,P,B,P,P,B,M,P,P],
+      [W,W,W,B,W,B,W,B,W,W,W,P],
+      [P,P,P,P,M,B,M,P,P,P,P,W],
+      [P,W,M,W,W,P,W,W,M,W,P,P],
+      [G,P,M,B,P,B,M,B,P,M,P,P],
+      [W,B,W,W,B,W,W,B,W,W,B,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 9, name: "Chain Reaction", startPos: {row: 0, col: 11}, layout: [
+      [P,P,B,M,P,W,P,M,B,P,P,S],
+      [P,W,W,W,P,W,P,W,W,W,P,W],
+      [P,B,P,P,B,P,P,P,B,P,P,P],
+      [W,M,W,P,W,B,W,P,W,M,W,P],
+      [P,P,P,B,P,P,B,P,P,P,B,P],
+      [P,W,W,W,W,B,W,W,W,W,W,W],
+      [B,M,P,P,P,M,P,P,P,M,B,P],
+      [P,W,W,B,W,W,W,B,W,W,P,G],
+      [P,P,M,P,P,P,P,P,M,P,P,P],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+    ]
+  },
+  {
+    id: 10, name: "Detonation Alley", startPos: {row: 5, col: 0}, layout: [
+      [G,P,W,B,W,B,W,B,W,B,W,P],
+      [P,P,B,P,B,P,B,P,B,P,B,P],
+      [W,P,W,M,W,M,W,M,W,M,W,P],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,B,W,B,W,B,W,B,W,B,W,B],
+      [S,P,P,P,P,P,P,P,P,P,P,P],
+      [W,M,W,M,W,M,W,M,W,M,W,M],
+      [P,P,B,P,B,P,B,P,B,P,B,P],
+      [W,P,W,B,W,B,W,B,W,B,W,P],
+      [P,P,P,P,P,P,P,P,P,P,P,G], // Second Goal for a twist? Or make one a W.
+    ]
+  },
+  // Levels 11-15: Introduce Jellyfish (J)
+  {
+    id: 11, name: "Jellyfish Jive", startPos: { row: 0, col: 0 }, layout: [
+      [S,J,P,W,P,P,P,W,J,P,P,G],
+      [W,W,P,W,P,W,P,W,P,W,W,P],
+      [P,P,P,J,P,W,P,J,P,P,P,P],
+      [P,W,W,W,P,W,W,W,W,W,P,W],
+      [P,P,M,P,J,P,P,P,P,M,P,P],
+      [W,W,J,W,W,W,W,J,W,W,W,W],
+      [P,B,P,J,P,B,P,J,P,P,B,P],
+      [W,W,W,W,W,W,W,W,W,W,W,P],
+      [P,J,P,J,P,J,P,J,P,J,P,P],
+      [P,P,P,P,P,P,P,P,P,P,P,W],
+    ], message: "Steer clear of the stinging Jellyfish (J)!"
+  },
+  {
+    id: 12, name: "Shocking Straits", startPos: {row: 9, col: 5}, layout: [
+      [P,J,P,J,P,W,P,J,P,J,P,G],
+      [W,P,W,P,W,P,W,P,W,P,W,P],
+      [P,J,P,J,P,P,P,J,P,J,P,P],
+      [P,W,M,W,B,W,J,W,M,W,B,P],
+      [P,J,P,J,W,S,W,J,P,J,P,P],
+      [P,B,W,M,W,J,W,M,W,B,W,P],
+      [P,J,P,J,P,P,P,J,P,J,P,P],
+      [W,P,W,P,W,P,W,P,W,P,W,P],
+      [P,J,P,J,P,W,P,J,P,J,P,P],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+    ]
+  },
+  {
+    id: 13, name: "Gelatinous Gauntlet", startPos: {row: 0, col: 0}, layout: [
+      [S,P,J,P,J,P,J,P,J,P,J,G],
+      [W,P,W,P,W,P,W,P,W,P,W,P],
+      [J,P,J,P,J,P,J,P,J,P,J,P],
+      [P,W,P,W,P,W,P,W,P,W,P,W],
+      [J,M,J,B,J,M,J,B,J,M,J,B],
+      [W,P,W,P,W,P,W,P,W,P,W,P],
+      [P,J,P,J,P,J,P,J,P,J,P,J],
+      [P,W,P,W,P,W,P,W,P,W,P,W],
+      [J,B,J,M,J,B,J,M,J,B,J,M],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 14, name: "Zapper Zone", startPos: {row: 4, col: 0}, layout: [
+      [W,J,W,J,W,J,W,J,W,J,W,G],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,J,W,J,M,B,M,J,W,J,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [S,J,W,J,W,J,W,J,W,J,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,J,W,J,B,M,B,J,W,J,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,J,W,J,W,J,W,J,W,J,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 15, name: "Tentacle Terror", startPos: {row: 8, col: 11}, layout: [
+      [P,J,P,W,P,P,J,P,W,P,J,P],
+      [P,W,P,W,P,W,P,W,P,W,P,W],
+      [J,P,J,P,J,P,J,P,J,P,J,P],
+      [W,P,W,M,W,B,W,J,W,M,W,G],
+      [P,J,P,W,P,P,J,P,W,P,J,P],
+      [B,W,B,W,B,W,B,W,B,W,B,W],
+      [P,J,P,W,P,P,J,P,W,P,J,P],
+      [M,P,M,P,M,P,M,P,M,P,M,S],
+      [P,J,P,W,J,P,J,P,W,J,P,P],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+    ]
+  },
+  // Levels 16-20: Introduce Crocodiles (C)
+  {
+    id: 16, name: "Croc Creek", startPos: { row: 0, col: 0 }, layout: [
+      [S,C,P,W,P,P,P,W,C,P,P,G],
+      [W,W,P,W,P,W,P,W,P,W,W,P],
+      [P,P,P,C,P,W,P,C,P,P,P,P],
+      [P,W,W,W,P,W,W,W,W,W,P,W],
+      [P,P,M,P,C,P,J,P,P,M,P,P],
+      [W,W,C,W,W,W,W,C,W,W,W,W],
+      [P,B,P,C,P,B,P,C,P,P,B,P],
+      [P,C,P,C,P,C,P,C,P,C,P,C],
+      [W,W,W,W,W,W,W,W,W,W,W,P],
+      [P,P,P,P,P,P,P,P,P,P,P,W],
+    ], message: "Mind the Crocodiles (C)! They bite!"
+  },
+  {
+    id: 17, name: "Gator Alley", startPos: {row: 5, col: 5}, layout: [
+      [C,C,C,C,C,C,C,C,C,C,C,G],
+      [C,P,P,P,P,P,P,P,P,P,P,C],
+      [C,P,W,W,W,P,W,W,W,P,W,C],
+      [C,P,W,M,B,P,B,M,W,P,W,C],
+      [C,P,W,M,P,S,P,M,W,P,W,C],
+      [C,P,W,B,P,P,P,B,W,P,W,C],
+      [C,P,W,W,W,J,W,W,W,P,W,C],
+      [C,P,P,P,P,P,P,P,P,P,P,C],
+      [C,C,C,C,C,C,C,C,C,C,C,C],
+      [P,P,P,P,P,P,P,P,P,P,P,P], // Removed second start from original error
+    ]
+  },
+  {
+    id: 18, name: "Reptilian River", startPos: {row: 9, col: 0}, layout: [
+      [P,C,P,C,P,C,P,C,P,C,P,G],
+      [P,W,P,W,P,W,P,W,P,W,P,W],
+      [C,P,C,P,C,P,C,P,C,P,C,P],
+      [W,P,W,M,W,B,W,J,W,M,W,P],
+      [P,C,P,C,P,C,P,C,P,C,P,C],
+      [B,W,B,W,B,W,B,W,B,W,B,W],
+      [C,P,C,P,C,P,C,P,C,P,C,P],
+      [M,P,M,P,M,P,M,P,M,P,M,P],
+      [P,C,P,C,P,C,P,C,P,C,P,C],
+      [S,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 19, name: "Snapping Swamp", startPos: {row: 0, col: 11}, layout: [
+      [W,C,W,C,W,C,W,C,W,C,W,S],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,C,W,M,B,J,B,M,W,C,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,C,W,C,W,C,W,C,W,C,W,G],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,C,W,J,B,M,B,J,W,C,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+      [W,C,W,C,W,C,W,C,W,C,W,W],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 20, name: "Predator's Path", startPos: {row: 4, col: 11}, layout: [
+      [P,C,P,J,P,B,P,M,P,W,P,G],
+      [P,W,P,W,P,W,P,W,P,W,P,W],
+      [C,P,J,P,B,P,M,P,W,P,C,P],
+      [W,P,W,P,W,P,W,P,W,P,W,P],
+      [P,J,P,B,P,M,P,W,P,C,P,S],
+      [B,W,B,W,B,W,B,W,B,W,B,W],
+      [P,M,P,W,P,C,P,J,P,B,P,M],
+      [M,P,M,P,M,P,M,P,M,P,M,P],
+      [P,W,P,C,P,J,P,B,P,M,P,W],
+      [W,W,W,W,W,W,W,W,W,W,W,W],
+    ]
+  },
+  // Levels 21-25: Introduce Currents (CN, CS, CE, CW)
+  {
+    id: 21, name: "Rapid Ride", startPos: { row: 0, col: 0 }, layout: [
+      [S,CE,CE,P,W,P,CN,P,W,P,P,G],
+      [W,W,W,P,W,P,W,P,W,P,W,P],
+      [P,P,CS,P,W,P,CE,P,J,P,P,P],
+      [P,W,W,P,W,P,W,W,W,M,W,P],
+      [P,CN,P,CE,CE,CE,CW,CW,P,C,P,P],
+      [W,P,W,W,W,W,W,P,W,W,W,W],
+      [P,P,P,M,B,P,CS,P,P,P,B,P],
+      [W,W,CS,W,W,P,W,P,W,W,W,P],
+      [P,P,P,P,P,P,CN,P,P,P,P,P],
+      [P,CE,CE,CE,CE,CW,CW,P,W,W,W,W],
+    ], message: "Currents (Arrows) will push you! Plan your moves."
+  },
+  {
+    id: 22, name: "Whirlpool Way", startPos: {row: 4, col: 5}, layout: [
+      [P,W,CN,P,W,CE,W,CS,P,W,P,G],
+      [P,CE,S,CW,P,P,P,P,CS,P,P,P],
+      [P,W,CS,P,W,CW,W,CN,P,W,P,P],
+      [M,P,P,P,P,P,P,P,P,P,B,P],
+      [W,W,W,W,W,P,W,W,W,W,W,W],
+      [P,CN,CE,CW,CS,P,CN,CE,CW,CS,P,P],
+      [P,P,W,J,P,P,P,W,M,P,P,W],
+      [P,CS,P,P,P,P,P,P,P,CN,C,P],
+      [W,W,W,W,W,W,W,W,W,W,W,P],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 23, name: "Crosscurrent Chaos", startPos: {row: 0, col: 0}, layout: [
+      [S,CE,P,W,CS,P,W,CN,P,CE,P,G],
+      [CS,P,W,P,P,CE,P,W,P,P,CW,P],
+      [P,W,CN,P,W,P,CW,CN,W,P,P,P],
+      [CE,P,P,CW,P,W,P,P,CE,P,W,CS],
+      [P,CN,W,P,CS,P,M,W,P,CW,P,P],
+      [CW,P,CE,P,W,B,P,CS,P,P,CN,P],
+      [P,W,P,CN,P,P,CW,P,W,J,P,CS],
+      [CS,CE,CW,P,W,P,P,CN,P,P,CE,P],
+      [P,P,P,W,CN,P,CS,P,W,C,P,CW],
+      [W,W,W,W,W,W,W,W,W,W,W,P],
+    ]
+  },
+  {
+    id: 24, name: "Streamline Speedway", startPos: {row: 9, col: 0}, layout: [
+      [P,P,W,CN,P,P,W,CS,P,P,W,G],
+      [CE,CE,CE,P,CW,CW,CW,P,CE,CE,CE,P],
+      [P,P,W,CS,P,P,W,CN,P,P,W,P],
+      [CS,CS,CS,P,CN,CN,CN,P,CS,CS,CS,P],
+      [P,P,W,M,P,B,W,J,P,C,W,P],
+      [CE,CW,CE,P,CS,CN,CS,P,CE,CW,CE,P],
+      [P,P,W,P,P,P,W,P,P,P,W,P],
+      [CW,CE,CW,P,CN,CS,CN,P,CW,CE,CW,P],
+      [P,P,W,P,P,P,W,P,P,P,W,P],
+      [S,CE,P,W,CS,P,W,CN,P,CE,P,P],
+    ]
+  },
+  {
+    id: 25, name: "Current Conundrum", startPos: {row: 0, col: 11}, layout: [
+      [W,W,W,W,W,W,W,P,CN,P,P,S],
+      [P,CE,P,M,B,J,P,CS,P,W,P,W],
+      [P,W,CN,P,W,P,CW,P,P,CS,P,P],
+      [P,CS,P,W,CE,P,W,P,W,P,W,P],
+      [P,P,CW,P,P,CN,P,M,P,CW,P,P],
+      [W,P,W,CS,P,W,CE,P,B,P,CS,P],
+      [P,CN,P,W,CW,P,W,J,P,W,P,P],
+      [P,P,CE,P,P,CS,P,C,P,CE,P,G],
+      [W,W,W,W,W,W,W,W,W,W,W,P],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  // Levels 26-30: Introduce ToxicAlgae (A) and Mix all
+  {
+    id: 26, name: "Algae Bloom", startPos: { row: 0, col: 0 }, layout: [
+      [S,A,P,W,P,P,A,W,P,P,P,G],
+      [W,W,A,W,P,A,P,W,A,W,W,P],
+      [P,P,P,A,P,W,P,A,P,P,P,P],
+      [P,W,W,W,A,W,A,W,W,W,P,W],
+      [P,P,M,A,C,P,J,A,P,M,P,P],
+      [W,W,A,W,W,A,W,A,W,W,W,W],
+      [P,B,P,A,P,B,A,P,A,P,B,P],
+      [A,C,A,C,A,C,A,C,A,C,A,A],
+      [W,W,W,W,W,W,W,W,W,W,W,P],
+      [P,A,P,A,P,A,P,A,P,A,P,W],
+    ], message: "Toxic Algae (A) is dangerous! Currents might help or hinder."
+  },
+  {
+    id: 27, name: "Hazardous Waters", startPos: {row: 5, col: 5}, layout: [
+      [A,C,J,B,M,A,M,B,J,C,A,G],
+      [A,P,P,P,P,P,P,P,P,P,P,A],
+      [A,P,W,W,W,A,W,W,W,P,W,A],
+      [A,P,W,M,B,P,B,M,W,P,W,A],
+      [A,P,W,A,P,S,P,A,W,P,W,A],
+      [A,P,W,B,P,P,P,B,W,P,W,A],
+      [A,P,W,A,W,J,W,A,W,P,W,A],
+      [A,P,A,P,A,P,A,P,A,P,A,A],
+      [A,A,A,A,A,A,A,A,A,A,A,A],
+      [P,P,P,P,P,P,P,P,P,P,P,P], // Removed second start
+    ]
+  },
+  {
+    id: 28, name: "The Gauntlet", startPos: {row: 9, col: 0}, layout: [
+      [P,A,P,C,P,J,P,B,P,M,P,G],
+      [P,W,CE,W,CS,W,CN,W,CW,W,P,W],
+      [A,P,A,P,C,P,J,P,B,P,M,P],
+      [W,CN,W,M,W,A,W,J,W,CS,W,P],
+      [P,A,P,C,P,A,P,A,P,J,P,A],
+      [B,W,CS,W,B,A,B,W,CN,W,B,W],
+      [A,P,A,P,C,A,J,P,A,P,M,P],
+      [M,CE,M,P,M,A,M,CW,M,P,CN,P],
+      [P,A,P,C,P,J,P,B,P,A,P,A],
+      [S,P,P,P,P,P,P,P,P,P,P,P],
+    ]
+  },
+  {
+    id: 29, name: "Final Challenge", startPos: {row: 0, col: 11}, layout: [
+      [W,A,W,C,W,J,W,B,W,M,W,S],
+      [P,P,P,P,CE,P,CW,P,P,P,P,P],
+      [W,C,W,A,B,J,B,A,W,C,W,W],
+      [P,P,CS,P,P,A,P,P,CN,P,P,P],
+      [W,J,W,M,W,A,W,M,W,J,W,G],
+      [P,P,CN,P,P,A,P,P,CS,P,P,P],
+      [W,B,W,J,A,M,A,J,W,B,W,W],
+      [P,P,CW,P,CE,A,CE,P,CW,P,P,P],
+      [W,M,W,C,W,A,W,C,W,M,W,W],
+      [P,P,P,P,P,A,P,P,P,P,P,A],
+    ]
+  },
+  {
+    id: 30, name: "Doge's Triumph", startPos: {row: 4, col: 5}, layout: [
+      [G,CE,CE,CE,CE,P,CW,CW,CW,CW,CW,G],
+      [CS,A,M,B,J,S,C,A,M,B,J,CS],
+      [CS,P,W,W,W,P,W,W,W,W,P,CS],
+      [CS,P,W,A,C,P,J,B,M,W,P,CS],
+      [CS,P,W,M,J,P,C,A,W,P,W,CS],
+      [CS,P,W,B,C,P,A,J,M,W,P,CS],
+      [CS,P,W,W,W,P,W,W,W,W,P,CS],
+      [CS,A,M,B,J,P,C,A,M,B,J,CS],
+      [CN,CN,CN,CN,CN,P,CE,CE,CE,CE,CE,CN],
+      [P,P,P,P,P,P,P,P,P,P,P,P],
+    ], message: "You've mastered the depths! Or have you? (Find both goals!)"
+  }
+];

geminiApi.ts

@@ -0,0 +1,72 @@
+import { GoogleGenAI } from "@google/genai";
+
+// API key must be set in the environment variables for this to work.
+// const API_KEY = process.env.API_KEY; 
+// if (!API_KEY) {
+//   console.error("API_KEY environment variable not set.");
+// }
+
+const ai = new GoogleGenAI({ apiKey: process.env.API_KEY! });
+
+export interface GeminiImageResponse {
+  success: boolean;
+  imageUrl?: string;
+  errorType?: 'quota_exhausted' | 'empty_prompt' | 'api_error' | 'generic';
+  message?: string;
+}
+
+/**
+ * Generates an image using the Gemini API based on a text prompt.
+ * @param prompt The text prompt to generate the image from.
+ * @returns A Promise that resolves to an object indicating success or failure.
+ */
+export const generateImageWithGemini = async (prompt: string): Promise<GeminiImageResponse> => {
+  if (!prompt || prompt.trim() === "") {
+    console.error("Prompt cannot be empty for image generation.");
+    return {
+      success: false,
+      errorType: 'empty_prompt',
+      message: "Prompt cannot be empty for image generation."
+    };
+  }
+
+  try {
+    console.log(`Attempting to generate image with prompt: "${prompt}"`);
+    const response = await ai.models.generateImages({
+      model: 'imagen-3.0-generate-002',
+      prompt: prompt,
+      config: { numberOfImages: 1, outputMimeType: 'image/jpeg' },
+    });
+
+    if (response.generatedImages && response.generatedImages.length > 0 && response.generatedImages[0].image?.imageBytes) {
+      const base64ImageBytes = response.generatedImages[0].image.imageBytes;
+      const imageUrl = `data:image/jpeg;base64,${base64ImageBytes}`;
+      console.log("Image generated successfully.");
+      return { success: true, imageUrl: imageUrl };
+    } else {
+      console.error("Gemini API did not return a valid image.", response);
+      return {
+        success: false,
+        errorType: 'api_error',
+        message: "Gemini API did not return a valid image. See console for details."
+      };
+    }
+  } catch (error: any) {
+    console.error("Error generating image with Gemini API:", error);
+    
+    const errorMessage = String(error?.message || error.toString()).toLowerCase();
+    if (errorMessage.includes('429') || errorMessage.includes('resource_exhausted') || errorMessage.includes('quota')) {
+      return {
+        success: false,
+        errorType: 'quota_exhausted',
+        message: 'API Quota Exceeded. You may need to check your Google AI plan or wait for your quota to reset. More info: https://ai.google.dev/gemini-api/docs/rate-limits'
+      };
+    }
+    
+    return {
+      success: false,
+      errorType: 'generic',
+      message: `Failed to generate image: ${error.message || 'Unknown error. Check console.'}`
+    };
+  }
+};

index.html

@@ -0,0 +1,436 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Doge Whale Wars</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="app.css">
+    <script src="https://accounts.google.com/gsi/client" async></script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+          'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+          sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        background: linear-gradient(to bottom, #1e90ff, #000428);
+        color: var(--theme-text); /* Keep text color from theme */
+        overflow: hidden; /* Prevent scrollbars from base layout */
+        min-height: 100vh;
+      }
+      #root {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        position: relative; /* Ensure root is part of stacking context if needed */
+        z-index: 3; /* Above background fish, below modals */
+      }
+      /* Custom scrollbar for modal content if needed */
+      .overflow-y-auto::-webkit-scrollbar {
+        width: 8px;
+      }
+      .overflow-y-auto::-webkit-scrollbar-track {
+        background: #2d3748; /* theme-primary/50 or similar */
+        border-radius: 10px;
+      }
+      .overflow-y-auto::-webkit-scrollbar-thumb {
+        background: #4a5568; /* theme-border or similar */
+        border-radius: 10px;
+      }
+      .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+        background: #718096; /* A lighter shade */
+      }
+      
+      .nav-button, .nav-button-admin {
+          /* Tailwind classes are now applied directly in App.tsx for these */
+      }
+
+      .game-container-outer {
+        /* For the outer border/glow effect when playing */
+      }
+
+      .game-container-outer.playing {
+        /* Styles when game is active, e.g., border */
+      }
+      
+      /* Tailwind custom animations if needed */
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .animate-fadeIn {
+        animation: fadeIn 0.3s ease-out forwards;
+      }
+
+      @keyframes slideDown {
+        from { transform: translateY(-20px); opacity: 0.8; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+      .animate-slideDown {
+        animation: slideDown 0.3s ease-out forwards;
+      }
+
+      @keyframes pulseCustom {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.8; transform: scale(1.02); }
+      }
+      .animate-pulseCustom {
+        animation: pulseCustom 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+      
+      canvas {
+        display: block;
+        image-rendering: -moz-crisp-edges;
+        image-rendering: -webkit-crisp-edges;
+        image-rendering: pixelated;
+        image-rendering: crisp-edges;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain; /* Ensures canvas scales within bounds maintaining aspect ratio */
+        position: relative; 
+        z-index: 2; 
+      }
+
+      .text-xxs {
+        font-size: 0.65rem; 
+        line-height: 0.85rem;
+      }
+
+      :root {
+        /* --theme-background: #0D1B2A; /* Deep Dark Blue - Body background is now gradient */
+        --theme-dark: #1B263B;       /* Dark Blue-Gray */
+        --theme-primary: #415A77;    /* Muted Blue */
+        --theme-secondary: #778DA9;  /* Light Steel Blue */
+        --theme-accent: #00A9E0;     /* Bright Cyan/Sky Blue */
+        --theme-hover: #00CFFF;      /* Lighter Cyan for hover */
+        --theme-border: #5A7D9A;     /* Mid-tone blue for borders */
+        --theme-text: #E0E1DD;       /* Off-white/Light Gray */
+        --theme-success: #3FB950;    /* Green */
+        --theme-danger: #F85149;     /* Red */
+        --theme-warning: #F3B50C;    /* Yellow/Gold */
+        --theme-info: #58A6FF;       /* Bright Blue */
+        --theme-white: #FFFFFF;
+        --font-sans: 'Inter', sans-serif;
+
+        /* Layout Variables */
+        --header-height: 3.5rem; /* Approx 56px for p-3 header with text */
+        --footer-height: 2rem;   /* Approx 32px for p-2 footer with text */
+        --theme-accent-rgb: 0, 169, 224; /* For app.css focus rings */
+      }
+      
+      /* Updated fish styles based on user's new HTML */
+      .fish { /* Follower fish */
+        position: absolute;
+        width: 60px;
+        height: auto;
+        pointer-events: none;
+        transition: transform 0.1s linear;
+        z-index: 45; /* Maintained z-index from app's original design for correct layering */
+      }
+
+      .bg-fish { /* Random background fish */
+        position: absolute;
+        width: 50px; 
+        height: auto;
+        pointer-events: none;
+        z-index: 1; /* Lowest layer, behind #root (3) */
+      }
+
+      @keyframes swimRandom { /* Updated animation from user's new HTML */
+        0% {
+          transform: translate(0, 0) rotate(0deg);
+          opacity: 0;
+        }
+        10% {
+          opacity: 1;
+        }
+        100% {
+          transform: translate(var(--x), var(--y)) rotate(var(--r));
+          opacity: 0;
+        }
+      }
+
+      /* Spin & Win Styles */
+       @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .wheel-section {
+            position: absolute;
+            width: 50%;
+            height: 50%;
+            transform-origin: bottom right;
+            clip-path: polygon(0 0, 100% 0, 0 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .wheel-section span {
+            position: absolute;
+            transform: rotate(45deg) translateX(70px) rotate(-45deg); /* Adjusted for Tailwind's transform-origin */
+            font-weight: bold;
+            color: white;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+            font-size: 0.75rem; /* Smaller font for better fit */
+        }
+        
+        .spinning {
+            animation: spin 0.5s linear infinite;
+        }
+                
+        .pulse-spin-button { /* More specific to avoid conflict if 'pulse' is used elsewhere */
+            animation: pulseCustom 1.5s infinite;
+        }
+                
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #f00; /* Will be overridden by JS */
+            opacity: 0;
+            animation: confetti-fall 3s ease-out forwards; /* Apply animation directly */
+        }
+        
+        /* Removed .confetti-animation class as animation is applied directly */
+        
+        @keyframes confetti-fall {
+            0% {
+                transform: translateY(-100px) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(100vh) rotate(720deg); /* More spin */
+                opacity: 0;
+            }
+        }
+        
+        /* Lottery Card Flip Styles */
+        .lottery-card-container {
+            perspective: 1000px;
+        }
+
+        .lottery-card {
+            position: relative;
+            width: 80px; 
+            height: 120px;
+            cursor: pointer;
+            transform-style: preserve-3d;
+            transition: transform 0.6s;
+            border-radius: 0.5rem; /* rounded-lg */
+        }
+
+        .lottery-card.flipped {
+            transform: rotateY(180deg);
+        }
+
+        .lottery-card-face {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            border-radius: 0.5rem; /* rounded-lg */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column; /* For icon and text */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
+        }
+
+        .lottery-card-front {
+            background: linear-gradient(135deg, #f59e0b, #f97316); /* Example Tailwind amber-500 to orange-500 */
+            color: white;
+            font-size: 1.875rem; /* text-3xl for icon */
+        }
+        
+        .lottery-card-front i { /* For Font Awesome icon if used */
+            font-size: 2.5rem; /* text-5xl */
+        }
+         .lottery-card-front .ticket-text {
+            font-size: 0.65rem; /* text-xxs */
+            font-weight: bold;
+            margin-top: 0.25rem; /* mt-1 */
+        }
+
+
+        .lottery-card-back {
+            background: linear-gradient(135deg, #3b82f6, #6366f1); /* Example Tailwind blue-500 to indigo-500 */
+            color: white;
+            transform: rotateY(180deg);
+            font-size: 1rem; /* text-base */
+            font-weight: bold;
+        }
+
+        .lottery-card-back i { /* For prize icon */
+             font-size: 2rem; /* text-4xl */
+             margin-bottom: 0.5rem; /* mb-2 */
+        }
+        
+        /* Progress bar for lottery (can be Tailwind, but custom gives more control) */
+        .progress-container {
+            width: 100%;
+            height: 10px;
+            background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
+            border-radius: 0.375rem; /* rounded-md */
+            margin: 1rem 0; /* my-4 */
+        }
+        
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #f59e0b, #f97316); /* Example Tailwind amber-500 to orange-500 */
+            border-radius: 0.375rem; /* rounded-md */
+            transition: width 0.3s ease;
+        }
+        /* Ensure Font Awesome icons are vertically centered in buttons */
+        .nav-button i, .nav-button-admin i {
+            vertical-align: middle;
+        }
+
+    </style>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              /* 'theme-background': 'var(--theme-background)', // Body background is now gradient */
+              'theme-dark': 'var(--theme-dark)',
+              'theme-primary': 'var(--theme-primary)',
+              'theme-secondary': 'var(--theme-secondary)',
+              'theme-accent': 'var(--theme-accent)',
+              'theme-hover': 'var(--theme-hover)',
+              'theme-border': 'var(--theme-border)',
+              'theme-text': 'var(--theme-text)',
+              'theme-success': 'var(--theme-success)',
+              'theme-danger': 'var(--theme-danger)',
+              'theme-warning': 'var(--theme-warning)',
+              'theme-info': 'var(--theme-info)',
+              'theme-white': 'var(--theme-white)',
+            },
+            fontFamily: {
+              sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+            },
+            animation: {
+               fadeIn: 'fadeIn 0.3s ease-out forwards',
+               slideDown: 'slideDown 0.3s ease-out forwards',
+               pulseCustom: 'pulseCustom 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+               spin: 'spin 1s linear infinite', /* Added for wheel, JS can override duration */
+               'confetti-fall': 'confetti-fall 3s ease-out forwards',
+               shake: 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both', // Added shake animation
+            },
+            keyframes: {
+                fadeIn: {
+                    '0%': { opacity: '0' },
+                    '100%': { opacity: '1' },
+                },
+                slideDown: {
+                    '0%': { transform: 'translateY(-20px)', opacity: '0.8' },
+                    '100%': { transform: 'translateY(0)', opacity: '1' },
+                },
+                pulseCustom: {
+                    '0%, 100%': { opacity: '1', transform: 'scale(1)' },
+                    '50%': { opacity: '0.8', transform: 'scale(1.02)' },
+                },
+                spin: { /* Added for wheel */
+                    '0%': { transform: 'rotate(0deg)' },
+                    '100%': { transform: 'rotate(360deg)' },
+                },
+                'confetti-fall': { /* Added for confetti */
+                    '0%': { transform: 'translateY(-100px) rotate(0deg)', opacity: '1'},
+                    '100%': { transform: 'translateY(100vh) rotate(720deg)', opacity: '0'},
+                },
+                shake: { // Added shake keyframes
+                  '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
+                  '20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
+                  '30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
+                  '40%, 60%': { transform: 'translate3d(4px, 0, 0)' }
+                }
+            }
+          }
+        }
+      }
+    </script>
+     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
+
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.1.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
+    "react/": "https://esm.sh/react@^19.1.0/",
+    "@google/genai": "https://esm.sh/@google/genai@^1.1.0",
+    "@/constants": "/constants.ts",
+    "@/components/modals/AdminLoginModal": "./components/modals/AdminLoginModal.tsx"
+  }
+}
+</script>
+</head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    
+    <!-- Blue fish that follow the cursor - updated src from user's HTML -->
+    <img src="https://pngimg.com/uploads/fish/fish_PNG1151.png" class="fish" id="fish1" alt=""/>
+    <img src="https://pngimg.com/uploads/fish/fish_PNG1151.png" class="fish" id="fish2" alt=""/>
+
+    <div id="root"></div>
+
+    <!-- Default Sound Effect Placeholders REMOVED 
+         Sound playback is now managed by sounds.ts and AdminConfig.
+    -->
+
+    <script type="module" src="/index.tsx"></script>
+
+    <!-- Updated fish animation script based on user's new HTML -->
+    <script>
+      const fish1Global = document.getElementById("fish1"); 
+      const fish2Global = document.getElementById("fish2"); 
+
+      document.addEventListener("mousemove", (e) => {
+        const x = e.clientX;
+        const y = e.clientY;
+
+        if (fish1Global) fish1Global.style.transform = `translate(${x}px, ${y}px)`;
+        setTimeout(() => {
+          if (fish2Global) fish2Global.style.transform = `translate(${x - 40}px, ${y + 40}px)`;
+        }, 100);
+      });
+
+      // Background random swimming fish - updated src to yellow fish
+      const fishImageGlobal = 'https://www.transparentpng.com/thumb/fish/yellow-tang-fish-transparent-background-Q9PKK1.png'; 
+
+      function createBackgroundFish() {
+        const fishElement = document.createElement('img'); 
+        fishElement.src = fishImageGlobal;
+        fishElement.classList.add('bg-fish');
+        fishElement.setAttribute('alt', ''); // Decorative image
+
+        fishElement.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
+        fishElement.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
+
+        const moveX = Math.floor(Math.random() * 1000 - 500) + 'px';
+        const moveY = Math.floor(Math.random() * 1000 - 500) + 'px';
+        const rotate = Math.floor(Math.random() * 360) + 'deg';
+
+        fishElement.style.setProperty('--x', moveX);
+        fishElement.style.setProperty('--y', moveY);
+        fishElement.style.setProperty('--r', rotate);
+        fishElement.style.animation = 'swimRandom 14s linear forwards';
+
+        document.body.appendChild(fishElement);
+
+        setTimeout(() => {
+          fishElement.remove();
+        }, 14000);
+      }
+
+      setInterval(createBackgroundFish, 1000);
+    </script>
+  </body>
+</html><link rel="stylesheet" href="index.css">
+<script src="index.tsx" type="module"></script>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "Doge Whales - The MMORPG",
+  "description": "An immersive MMORPG where players control Doge Whales, collect NFTs, stake tokens, and explore a vast underwater world. Features include an NFT marketplace, breeding system, and token-based economy.",
+  "requestFramePermissions": [],
+  "prompt": ""
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "doge-whales---the-mmorpg",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@google/genai": "^1.1.0",
+    "@/constants": "latest",
+    "@/components/modals/AdminLoginModal": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0"
+  }
+}

sounds.ts

@@ -0,0 +1,129 @@
+import { AdminConfig } from './types';
+
+export enum SoundEvent {
+  Fire = 'fire',
+  EnemyKill = 'enemy_kill',
+  TokenCollect = 'token_collect',
+  NftBubbleCollect = 'nft_bubble_collect',
+  LevelUp = 'level_up',
+  GameOver = 'game_over',
+  GameWin = 'game_win', // Placeholder
+  SpinWin = 'spin_win',
+  SpinLose = 'spin_lose', // If you want a specific sound for non-DWHL prizes or "Try Again"
+  LotteryWin = 'lottery_win',
+  LotteryLose = 'lottery_lose',
+  DailyRewardClaim = 'daily_reward_claim',
+}
+
+let dedicatedSoundPlayer: HTMLAudioElement | null = null;
+let masterVolume: number = 0.5; // Default volume (0.0 to 1.0)
+let isGloballyMuted: boolean = false;
+
+function getDedicatedSoundPlayer(): HTMLAudioElement {
+  if (!dedicatedSoundPlayer) {
+    dedicatedSoundPlayer = new Audio();
+  }
+  return dedicatedSoundPlayer;
+}
+
+/**
+ * Sets the global master volume for all game sounds.
+ * @param volume The new volume level (0.0 to 1.0).
+ */
+export const setGlobalVolume = (volume: number): void => {
+  masterVolume = Math.max(0, Math.min(1, volume)); // Clamp between 0 and 1
+  const player = getDedicatedSoundPlayer();
+  if (player) {
+    player.volume = masterVolume;
+  }
+};
+
+/**
+ * Toggles the global mute state for all game sounds.
+ * @returns The new mute state (true if muted, false otherwise).
+ */
+export const toggleGlobalMute = (): boolean => {
+  isGloballyMuted = !isGloballyMuted;
+  return isGloballyMuted;
+};
+
+/**
+ * Explicitly sets the global mute state.
+ * @param mute True to mute, false to unmute.
+ */
+export const setGlobalMute = (mute: boolean): void => {
+  isGloballyMuted = mute;
+};
+
+/**
+ * Gets the current global master volume.
+ * @returns The current volume (0.0 to 1.0).
+ */
+export const getGlobalVolume = (): number => {
+  return masterVolume;
+};
+
+/**
+ * Checks if the game sounds are globally muted.
+ * @returns True if muted, false otherwise.
+ */
+export const isGlobalMuted = (): boolean => {
+  return isGloballyMuted;
+};
+
+
+/**
+ * Plays a sound event using a dedicated Audio element.
+ * Sounds are played based on the URL or Base64 string provided in AdminConfig.
+ * If no sound is configured for an event in AdminConfig, no sound will be played.
+ * Respects global volume and mute settings.
+ * @param event The SoundEvent to play.
+ * @param adminConfig AdminConfig containing sound URLs or Base64 strings.
+ */
+export const playSound = (
+  event: SoundEvent,
+  adminConfig?: AdminConfig
+) => {
+  if (isGloballyMuted) {
+    return; // Don't play sound if globally muted
+  }
+
+  const adminSoundKey = `sound${event.charAt(0).toUpperCase() +
+    event.slice(1).replace(/_([a-z])/g, (match, char) => char.toUpperCase())}Url` as keyof AdminConfig;
+
+  const soundSrcFromAdmin = adminConfig?.[adminSoundKey] as string | undefined;
+
+  if (soundSrcFromAdmin && soundSrcFromAdmin.trim() !== '') {
+    const player = getDedicatedSoundPlayer();
+    player.volume = masterVolume; // Apply master volume
+
+    const isDataURI = soundSrcFromAdmin.startsWith('data:audio/');
+
+    if (isDataURI) {
+        const base64Prefix = "base64,";
+        const base64StartIndex = soundSrcFromAdmin.indexOf(base64Prefix);
+        if (base64StartIndex === -1) {
+            console.error(`Malformed data URI (missing 'base64,') for sound event '${event}': ${soundSrcFromAdmin}. Skipping playback.`);
+            return;
+        }
+        // Extract the actual base64 data part
+        const actualBase64Data = soundSrcFromAdmin.substring(base64StartIndex + base64Prefix.length);
+        if (actualBase64Data.trim() === '') {
+            console.error(`Malformed base64 data part for sound event '${event}': Is empty. Full URI: ${soundSrcFromAdmin}. Skipping playback.`);
+            return;
+        }
+    }
+    // No specific validation for non-data URLs, browser will attempt to load them.
+
+    if (player.src !== soundSrcFromAdmin) {
+      player.src = soundSrcFromAdmin;
+    }
+    player.currentTime = 0;
+
+    player.play().catch(error => {
+      console.error(`Error playing sound '${event}' from source '${soundSrcFromAdmin}':`, error);
+    });
+  } else {
+    // console.log(`Sound event '${event}' triggered, but no sound source configured in AdminConfig.`);
+  }
+};

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*" :  ["./*"]
+    }
+  }
+}

types.ts

@@ -0,0 +1,349 @@
+
+
+export enum GameState {
+  CharacterSelection = 'CharacterSelection',
+  Playing = 'Playing',
+  GameOver = 'GameOver',
+  Paused = 'Paused',
+}
+
+export enum Rarity {
+  Common = 'common',
+  Rare = 'rare',
+  Legendary = 'legendary',
+}
+
+export enum WeaponType {
+  StandardBullet = 'standard_bullet',
+  HeavyBullet = 'heavy_bullet',
+  Rocket = 'rocket', // Manually aimed rocket
+  Laser = 'laser',
+  SwordThrow = 'sword_throw',
+  AutoTargetMissile = 'auto_target_missile', // Fires towards nearest enemy, requires manual trigger for now
+  AutoHomingRocket = 'auto_homing_rocket', // Passively fires homing rockets
+  EnemyBullet = 'enemy_bullet',
+  Bomb = 'bomb',
+  SummonFishMinion = 'summon_fish_minion',
+  FishMinionBullet = 'fish_minion_bullet',
+  RedArrowDefense = 'red_arrow_defense', // Player's defensive weapon system
+  RedArrowProjectile = 'red_arrow_projectile', // The projectile fired by RedArrowDefense
+  FlameCone = 'flame_cone', // New cone-shaped fire weapon
+  DogeLauncher = 'doge_launcher', // New weapon that fires Doge/Bone images
+}
+
+export interface NFTCoinEffect {
+  coins?: number; // This will represent Sea Token collection multiplier
+  xp?: number;
+  damage?: number;
+  speed?: number;
+  allStats?: number;
+}
+export interface NFT {
+  id: string;
+  name: string;
+  description: string;
+  price: number; // Price in Sea Tokens
+  rarity: Rarity;
+  image: string; // Can be URL or Base64 string
+  effect?: NFTCoinEffect;
+}
+
+export interface GameCharacter {
+  id: string;
+  name: string;
+  image: string; // URL or Base64
+  type: 'player' | 'enemy';
+  defaultWeaponType?: WeaponType; // For player characters
+  autoFireHealthThreshold?: number; // For player characters, percentage (0-100)
+  baseHealth?: number; // Optional: base health for this character type
+  baseSpeed?: number; // Optional: base speed for this character type, especially enemies
+  canOneHitKill?: boolean; // Optional: for special player abilities
+  // Future: baseDamage?: number, etc.
+}
+
+export interface PlayerData {
+  id: string; // Add a unique ID for the player instance, useful for multiplayer later
+  name: string; // Player's custom name
+  characterId: string; // ID of the chosen GameCharacter (whale type)
+  whaleColor: string; // Fallback or tint color
+  level: number;
+  xp: number;
+  maxXP: number;
+  health: number;
+  maxHealth: number;
+  seaTokens: number; // Renamed from dwhl
+  equippedNftId: string | null;
+  nftInventory: string[];
+  stakedTokens: number; // Tokens staked (Sea Tokens)
+  stakingStartTime: number | null;
+  
+  // New NFT Staking Slot System
+  stakedNftSlots: Array<string | null>; // Array of 5, stores NFT ID or null for each slot
+  nftMiningPowers: Record<string, number>; // Key: NFT ID, Value: mining power level
+
+  lastNftRewardClaimTime: number | null; // For NFT staking rewards (now primarily for slot-based system)
+  totalStakingRewards: number; // Total rewards claimed (Sea Tokens, from both token and NFT staking)
+  score: number;
+}
+
+export type ModalType = 'nftMarketplace' | 'wallet' | 'playerProfile' | 'nftStaking' | 'adminPanel' | 'whaleCombatGuide' | 'combatLoading' | 'spinToWin' | 'adminLogin' | 'dogeWhaleEscape' | null;
+
+export interface NotificationMessage {
+  id: string;
+  message: string;
+  type: 'success' | 'error' | 'info' | 'warning' | 'special';
+}
+
+export type MarketplaceTabType = 'market' | 'my-nfts' | 'breeding';
+
+export interface BreedingParents {
+  parent1: string | null;
+  parent2: string | null;
+}
+
+export interface BreedingResult extends Omit<NFT, 'price' | 'id' | 'effect'> {
+   id?: string;
+   effect?: NFTCoinEffect;
+}
+
+export interface FloatingText {
+  id: string;
+  text: string;
+  x: number;
+  y: number;
+  color: string;
+  timestamp: number;
+}
+
+export interface NftBubbleItem {
+  id: string;
+  x: number;
+  y: number;
+  rarity: Rarity;
+}
+
+// This type seems unused, but keeping for context. Consider removing if truly not needed.
+export interface WalletTokenItem {
+  id: string;
+  x: number;
+  y: number;
+  value: number;
+}
+
+export interface SeaTokenItem {
+  id: string;
+  x: number;
+  y: number;
+  value: number;
+  isAttracting?: boolean; // True if moving towards player due to auto-collect
+  attractSpeedX?: number;
+  attractSpeedY?: number;
+  creationTime: number; // To potentially prioritize older tokens or for other effects
+}
+
+export interface SavedReply {
+  id: string;
+  topic: string;
+  answer: string;
+}
+
+export interface AdminConfig {
+  globalNftStakingRate: number; // This rate becomes less relevant for the 5-slot system, might be for other future staking features.
+  globalTokenStakingRate: number; // This rate applies to Sea Tokens
+  gameBackgroundImageUrl: string; // Can be URL or Base64 string
+  defaultEnemyImageUrl?: string; // Can be URL or Base64 string for default enemy
+  playerAutoFire: boolean; // Global toggle for player auto-fire
+  enemiesAutoTarget: boolean;
+  playerAutoTargets?: boolean; // Global toggle for player projectiles to auto-target nearest enemy
+  enemyFireCooldownMs: number; // Cooldown for enemy firing in milliseconds
+  decorativeFishGoldenImage?: string; // URL or Base64 for Golden Fish
+  decorativeFishStarImage?: string; // URL or Base64 for Star Fish
+  decorativeFishBluefinImage?: string; // URL or Base64 for Bluefin Fish
+  bubbleSmallImage?: string; // URL or Base64 for Small Bubble
+  bubbleMediumImage?: string; // URL or Base64 for Medium Bubble
+  bubbleLargeImage?: string; // URL or Base64 for Large Bubble
+  seaTokenImageUrl?: string; // Optional custom image for Sea Tokens
+  savedReplies?: SavedReply[]; // For Admin Panel Knowledge Base
+
+  // Sound effect URLs (can be file paths or base64 data URLs)
+  soundFireUrl?: string;
+  soundEnemyKillUrl?: string;
+  soundTokenCollectUrl?: string;
+  soundNftBubbleCollectUrl?: string;
+  soundLevelUpUrl?: string;
+  soundGameOverUrl?: string;
+  soundGameWinUrl?: string; // Placeholder for future use
+  soundSpinWinUrl?: string;
+  soundSpinLoseUrl?: string;
+  soundLotteryWinUrl?: string;
+  soundLotteryLoseUrl?: string;
+  soundDailyRewardClaimUrl?: string;
+
+
+  // New Visual Effect Settings
+  bloodParticleLifespanSeconds: number;
+  rainEffectEnabled: boolean;
+  rainDropSpeedMin: number;
+  rainDropSpeedMax: number;
+  rainDurationSeconds: number;
+  rainIntervalSeconds: number;
+  rainIntensity: number; // Number of raindrops
+
+  // Red Arrow Defense System Config
+  redArrowActive: boolean; // To globally enable/disable this system for players who have it
+  redArrowCooldownMs: number;
+  redArrowProjectileSpeed: number;
+  redArrowDamage: number;
+  redArrowImageUrl?: string; // URL or Base64 for the Red Arrow projectile image
+  redArrowShotCount?: number; // Number of red arrows to fire at once
+
+  // Fire image assets
+  flameParticleImageUrl?: string; // For flame cone weapon effect particles
+  enemyBurningEffectImageUrl?: string; // For overlay/animation on burning enemies
+  fireballProjectileImageUrl?: string; // For a fireball projectile
+
+  // Doge Whale Escape Game Asset URLs
+  dogeEscapePlayerImageUrl?: string;
+  dogeEscapeWallImageUrl?: string;
+  dogeEscapeGoalImageUrl?: string;
+  dogeEscapeMineImageUrl?: string;
+  dogeEscapeBombImageUrl?: string;
+  dogeEscapeJellyfishImageUrl?: string;
+  dogeEscapeCrocodileImageUrl?: string;
+  dogeEscapeAlgaeImageUrl?: string;
+  dogeEscapeCurrentNImageUrl?: string;
+  dogeEscapeCurrentSImageUrl?: string;
+  dogeEscapeCurrentEImageUrl?: string;
+  dogeEscapeCurrentWImageUrl?: string;
+  dogeEscapeSnakeImageUrl?: string;
+  dogeEscapeLifeUpImageUrl?: string;
+}
+
+export interface Projectile {
+  id: string;
+  x: number;
+  y: number;
+  type: WeaponType;
+  width: number;
+  height: number;
+  dx?: number;
+  dy?: number;
+  targetEnemyId?: string | null; // For homing missiles against enemies
+  targetProjectileId?: string | null; // For RedArrowProjectile targeting enemy projectiles
+  rotation?: number;
+  owner: 'player' | 'enemy';
+  ownerPlayerId?: string; // For player-owned things like minion bullets or RedArrow
+  ownerEnemyId?: string; // For enemy-owned projectiles
+  creationTime?: number; // For bomb fuse or other time-based effects
+  gravityEffect?: boolean; // True if projectile is affected by gravity (e.g., bombs)
+  damage?: number; // Optional specific damage for this projectile instance
+  isHoming?: boolean; // General flag for homing behavior
+  imageKey?: string; // Optional key to look up an image in loadedGameAssets
+}
+
+export interface FishMinion {
+  id: string;
+  x: number;
+  y: number;
+  health: number;
+  maxHealth: number;
+  targetEnemyId: string | null;
+  lastFireTime: number;
+  ownerPlayerId: string; // ID of the PlayerData instance that summoned this minion
+  size: number;
+  angleToPlayer: number; // Relative angle to player for positioning
+  distanceFromPlayer: number; // Distance to maintain from player
+}
+
+export interface ExplosionEffect {
+  id: string;
+  x: number;
+  y: number;
+  currentRadius: number;
+  maxRadius: number;
+  creationTime: number;
+  duration: number;
+  color: string;
+  // Optional: damage, if not handled separately. For chain combustion, direct damage is better.
+}
+
+export enum DecorativeFishType {
+  Golden = 'golden',
+  Star = 'star',
+  Bluefin = 'bluefin',
+}
+
+export interface DecorativeFish {
+  id: string;
+  x: number;
+  y: number;
+  size: number;
+  speedX: number;
+  speedY: number;
+  type: DecorativeFishType;
+  opacity: number;
+  rotation: number; // For star fish
+  lastDirectionChangeTime: number;
+}
+
+export enum BubbleSize {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
+export interface BackgroundBubble {
+  id: string;
+  x: number;
+  y: number;
+  sizeCategory: BubbleSize;
+  actualRadius: number;
+  speedY: number;
+  speedX: number;
+  opacity: number;
+}
+
+// Enemy specific state for effects like burning
+export interface EnemyEffectState {
+    isBurning?: boolean;
+    burnDamagePerTick?: number;
+    burnTicksRemaining?: number;
+    burnTickCooldownRemaining?: number; // Time until the next burn tick damage
+    accumulatedFireExposureMs?: number; // For FlameCone explosive core
+    // Add other effects like frozen, poisoned etc. here
+}
+
+// For Google Sign-In
+declare global {
+  interface Window {
+    google: any; // Basic type for google global object
+  }
+}
+
+// --- Doge Whale Escape Game Types ---
+export enum MazeCellType {
+  Path = 'P',
+  Wall = 'W',
+  Start = 'S',
+  Goal = 'G',
+  Mine = 'M', // Classic Mine
+  Bomb = 'B', // New Bomb hazard
+  Jellyfish = 'J', // New Jellyfish hazard
+  Crocodile = 'C', // New Crocodile hazard
+  ToxicAlgae = 'A', // New Toxic Algae hazard
+  CurrentN = 'CN', // Current pushing North
+  CurrentS = 'CS', // Current pushing South
+  CurrentE = 'CE', // Current pushing East
+  CurrentW = 'CW', // Current pushing West
+  Snake = 'K', // New Snake hazard
+  LifeUp = 'L', // New LifeUp reward
+}
+
+export interface DogeWhaleEscapeLevel {
+  id: number;
+  name: string;
+  layout: MazeCellType[][];
+  startPos: { row: number; col: number };
+  message?: string; // Optional custom message for the level
+  requireAllSnakesNeutralized?: boolean; // New property for win condition
+}

utils.ts

@@ -0,0 +1,4 @@
+
+export const generateId = (): string => Math.random().toString(36).substr(2, 9);
+
+// Add other utility functions here as needed

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});