diff --git a/src/App.js b/src/App.js
index e1ccd6b..a8b07f1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { initializeApp } from 'firebase/app';
 import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
 import { getFirestore, doc, setDoc, getDoc, getDocs, collection, onSnapshot, updateDoc, deleteDoc, query, writeBatch } from 'firebase/firestore';
-import { PlusCircle, Users, Swords, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, UserCheck, UserX, HeartCrack, HeartPulse, Zap, EyeOff, ExternalLink, AlertTriangle } from 'lucide-react'; // ImageIcon removed
+import { PlusCircle, Users, Swords, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, UserCheck, UserX, HeartCrack, HeartPulse, Zap, /* ImageIcon removed */ EyeOff, ExternalLink, AlertTriangle, Play as PlayIcon, Pause as PauseIcon, SkipForward as SkipForwardIcon, StopCircle as StopCircleIcon } from 'lucide-react'; // ImageIcon removed
 
 // --- Firebase Configuration ---
 const firebaseConfig = {
@@ -62,10 +62,8 @@ function useFirestoreDocument(docPath) {
       setError(docPath ? "Firestore not available." : "Document path not provided.");
       return;
     }
-
     setIsLoading(true);
     setError(null);
-
     const docRef = doc(db, docPath);
     const unsubscribe = onSnapshot(docRef, (docSnap) => {
       if (docSnap.exists()) {
@@ -80,10 +78,8 @@ function useFirestoreDocument(docPath) {
       setIsLoading(false);
       setData(null);
     });
-
     return () => unsubscribe();
   }, [docPath]);
-
   return { data, isLoading, error };
 }
 
@@ -91,7 +87,6 @@ function useFirestoreCollection(collectionPath, queryConstraints = []) {
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
-
   const queryString = useMemo(() => JSON.stringify(queryConstraints), [queryConstraints]);
 
   useEffect(() => {
@@ -101,12 +96,9 @@ function useFirestoreCollection(collectionPath, queryConstraints = []) {
       setError(collectionPath ? "Firestore not available." : "Collection path not provided.");
       return;
     }
-
     setIsLoading(true);
     setError(null);
-    
     const q = query(collection(db, collectionPath), ...queryConstraints); 
-    
     const unsubscribe = onSnapshot(q, (snapshot) => {
       const items = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
       setData(items);
@@ -117,11 +109,9 @@ function useFirestoreCollection(collectionPath, queryConstraints = []) {
       setIsLoading(false);
       setData([]);
     });
-
     return () => unsubscribe();
   // eslint-disable-next-line react-hooks/exhaustive-deps 
   }, [collectionPath, queryString]); 
-
   return { data, isLoading, error };
 }
 
@@ -139,14 +129,12 @@ function App() {
     if (queryParams.get('playerView') === 'true') {
       setIsPlayerViewOnlyMode(true);
     }
-
     if (!auth) { 
         setError("Firebase Auth not initialized. Check your Firebase configuration.");
         setIsLoading(false);
         setIsAuthReady(false); 
         return;
     }
-    
     const initAuth = async () => {
       try {
         const token = window.__initial_auth_token; 
@@ -160,16 +148,13 @@ function App() {
         setError("Failed to authenticate. Please try again later.");
       }
     };
-
     const unsubscribe = onAuthStateChanged(auth, (user) => {
       setUserId(user ? user.uid : null);
       setIsAuthReady(true);
       setIsLoading(false);
     });
     initAuth();
-    return () => {
-        unsubscribe();
-    };
+    return () => unsubscribe();
   }, []);
 
   if (!db || !auth) { 
@@ -184,7 +169,6 @@ function App() {
     );
   }
 
-
   if (isLoading || !isAuthReady) {
     return (
       <div className="min-h-screen bg-slate-900 text-white flex flex-col items-center justify-center p-4">
@@ -200,7 +184,6 @@ function App() {
     window.open(playerViewUrl, '_blank', 'noopener,noreferrer,width=1024,height=768'); 
   };
 
-
   if (isPlayerViewOnlyMode) {
     return (
       <div className="min-h-screen bg-slate-800 text-slate-100 font-sans">
@@ -214,13 +197,8 @@ function App() {
     <div className="min-h-screen bg-slate-800 text-slate-100 font-sans">
         <header className="bg-slate-900 p-4 shadow-lg">
           <div className="container mx-auto flex justify-between items-center">
-            <h1 
-              className="text-3xl font-bold text-sky-400"
-            >
-              TTRPG Initiative Tracker
-            </h1>
+            <h1 className="text-3xl font-bold text-sky-400">TTRPG Initiative Tracker</h1>
             <div className="flex items-center space-x-4">
-              {/* UID display removed */}
               <button
                 onClick={openPlayerWindow}
                 className={`px-4 py-2 rounded-md text-sm font-medium transition-colors bg-teal-500 hover:bg-teal-600 text-white flex items-center`}
@@ -230,22 +208,21 @@ function App() {
             </div>
           </div>
         </header>
-
       <main className={`container mx-auto p-4 md:p-8`}>
         {isAuthReady && userId && <AdminView userId={userId} />}
         {!isAuthReady && !error && <p>Authenticating...</p>} 
       </main>
        <footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8">
-        TTRPG Initiative Tracker v0.1.25
+        TTRPG Initiative Tracker v0.1.25 
       </footer>
     </div>
   );
 }
 
 // --- Confirmation Modal Component ---
+// ... (ConfirmationModal remains the same)
 function ConfirmationModal({ isOpen, onClose, onConfirm, title, message }) {
   if (!isOpen) return null;
-
   return (
     <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50 transition-opacity duration-300 ease-in-out">
       <div className="bg-slate-800 p-6 rounded-lg shadow-xl w-full max-w-md transform transition-all duration-300 ease-in-out scale-100 opacity-100">
@@ -255,30 +232,18 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, title, message }) {
         </div>
         <p className="text-slate-300 mb-6">{message || "Are you sure you want to proceed?"}</p>
         <div className="flex justify-end space-x-3">
-          <button 
-            onClick={onClose} 
-            className="px-4 py-2 text-sm font-medium text-slate-300 bg-slate-600 hover:bg-slate-500 rounded-md transition-colors"
-          >
-            Cancel
-          </button>
-          <button 
-            onClick={onConfirm} 
-            className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors"
-          >
-            Confirm
-          </button>
+          <button onClick={onClose} className="px-4 py-2 text-sm font-medium text-slate-300 bg-slate-600 hover:bg-slate-500 rounded-md transition-colors">Cancel</button>
+          <button onClick={onConfirm} className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors">Confirm</button>
         </div>
       </div>
     </div>
   );
 }
 
-
 // --- Admin View Component ---
 function AdminView({ userId }) {
   const { data: campaignsData, isLoading: isLoadingCampaigns } = useFirestoreCollection(getCampaignsCollectionPath());
   const { data: initialActiveInfoData } = useFirestoreDocument(getActiveDisplayDocPath());
-  
   const [campaigns, setCampaigns] = useState([]);
   const [selectedCampaignId, setSelectedCampaignId] = useState(null);
   const [showCreateCampaignModal, setShowCreateCampaignModal] = useState(false);
@@ -300,7 +265,6 @@ function AdminView({ userId }) {
     }
   }, [initialActiveInfoData, campaigns, selectedCampaignId]);
 
-
   const handleCreateCampaign = async (name, backgroundUrl) => { 
     if (!db || !name.trim()) return;
     const newCampaignId = generateId();
@@ -333,7 +297,6 @@ function AdminView({ userId }) {
       await batch.commit();
       await deleteDoc(doc(db, getCampaignDocPath(campaignId)));
       if (selectedCampaignId === campaignId) setSelectedCampaignId(null);
-      
       const activeDisplayRef = doc(db, getActiveDisplayDocPath());
       const activeDisplaySnap = await getDoc(activeDisplayRef);
       if (activeDisplaySnap.exists() && activeDisplaySnap.data().activeCampaignId === campaignId) {
@@ -363,33 +326,16 @@ function AdminView({ userId }) {
           {campaigns.length === 0 && <p className="text-slate-400">No campaigns yet.</p>}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {campaigns.map(campaign => {
-              const cardStyle = campaign.playerDisplayBackgroundUrl ? {
-                backgroundImage: `url(${campaign.playerDisplayBackgroundUrl})`,
-              } : {};
+              const cardStyle = campaign.playerDisplayBackgroundUrl ? { backgroundImage: `url(${campaign.playerDisplayBackgroundUrl})`} : {};
               const cardClasses = `p-4 rounded-lg shadow-md cursor-pointer transition-all relative overflow-hidden bg-cover bg-center ${selectedCampaignId === campaign.id ? 'ring-4 ring-sky-400' : ''} ${!campaign.playerDisplayBackgroundUrl ? 'bg-slate-700 hover:bg-slate-600' : 'hover:shadow-xl'}`;
-
               return (
-                <div 
-                  key={campaign.id} 
-                  onClick={() => setSelectedCampaignId(campaign.id)}
-                  className={cardClasses}
-                  style={cardStyle}
-                >
+                <div key={campaign.id} onClick={() => setSelectedCampaignId(campaign.id)} className={cardClasses} style={cardStyle}>
                   <div className={`relative z-10 ${campaign.playerDisplayBackgroundUrl ? 'bg-black bg-opacity-60 p-3 rounded-md' : ''}`}>
                     <h3 className="text-xl font-semibold text-white">{campaign.name}</h3>
-                    {/* ImageIcon removed from here */}
-                    <button 
-                      onClick={(e) => { 
-                        e.stopPropagation(); 
-                        requestDeleteCampaign(campaign.id, campaign.name); 
-                      }} 
-                      className="mt-2 text-red-300 hover:text-red-100 text-xs flex items-center bg-black bg-opacity-50 hover:bg-opacity-70 px-2 py-1 rounded"
-                    >
-                      <Trash2 size={14} className="mr-1" /> Delete
-                    </button>
+                    {/* ImageIcon display removed from here */}
+                    <button onClick={(e) => { e.stopPropagation(); requestDeleteCampaign(campaign.id, campaign.name); }} className="mt-2 text-red-300 hover:text-red-100 text-xs flex items-center bg-black bg-opacity-50 hover:bg-opacity-70 px-2 py-1 rounded"><Trash2 size={14} className="mr-1" /> Delete</button>
                   </div>
-                </div>
-              );
+                </div>);
             })}
           </div>
         </div>
@@ -399,38 +345,22 @@ function AdminView({ userId }) {
             <h2 className="text-2xl font-semibold text-amber-300 mb-4">Managing: {selectedCampaign.name}</h2>
             <CharacterManager campaignId={selectedCampaignId} campaignCharacters={selectedCampaign.players || []} />
             <hr className="my-6 border-slate-600" />
-            <EncounterManager 
-              campaignId={selectedCampaignId} 
-              initialActiveEncounterId={initialActiveInfoData && initialActiveInfoData.activeCampaignId === selectedCampaignId ? initialActiveInfoData.activeEncounterId : null}
-              campaignCharacters={selectedCampaign.players || []} 
-            />
+            <EncounterManager campaignId={selectedCampaignId} initialActiveEncounterId={initialActiveInfoData && initialActiveInfoData.activeCampaignId === selectedCampaignId ? initialActiveInfoData.activeEncounterId : null} campaignCharacters={selectedCampaign.players || []} />
           </div>
         )}
       </div>
-      <ConfirmationModal
-        isOpen={showDeleteCampaignConfirm}
-        onClose={() => setShowDeleteCampaignConfirm(false)}
-        onConfirm={confirmDeleteCampaign}
-        title="Delete Campaign?"
-        message={`Are you sure you want to delete the campaign "${itemToDelete?.name}" and all its encounters? This action cannot be undone.`}
-      />
+      <ConfirmationModal isOpen={showDeleteCampaignConfirm} onClose={() => setShowDeleteCampaignConfirm(false)} onConfirm={confirmDeleteCampaign} title="Delete Campaign?" message={`Are you sure you want to delete the campaign "${itemToDelete?.name}" and all its encounters? This action cannot be undone.`}/>
     </>
   );
 }
 
-// --- CreateCampaignForm, CharacterManager, EncounterManager, CreateEncounterForm, ParticipantManager, EditParticipantModal, InitiativeControls, DisplayView, Modal, Icons ---
-// The rest of the components are identical to the previous version (v0.1.23) and are included below for completeness.
-// The changes for ESLint warnings were primarily in the imports at the top of App.js and in the useFirestoreCollection hook.
+// ... (CreateCampaignForm, CharacterManager, EncounterManager, CreateEncounterForm, ParticipantManager, EditParticipantModal, InitiativeControls, DisplayView, Modal, Icons)
+// These components are identical to the previous version (v0.1.24) and are included below for completeness.
 
 function CreateCampaignForm({ onCreate, onCancel }) {
   const [name, setName] = useState('');
   const [backgroundUrl, setBackgroundUrl] = useState(''); 
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onCreate(name, backgroundUrl); 
-  };
-
+  const handleSubmit = (e) => { e.preventDefault(); onCreate(name, backgroundUrl); };
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       <div>
@@ -449,48 +379,29 @@ function CreateCampaignForm({ onCreate, onCancel }) {
   );
 }
 
-
 function CharacterManager({ campaignId, campaignCharacters }) {
   const [characterName, setCharacterName] = useState('');
   const [editingCharacter, setEditingCharacter] = useState(null); 
   const [showDeleteCharConfirm, setShowDeleteCharConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null); 
-
-
   const handleAddCharacter = async () => {
     if (!db ||!characterName.trim() || !campaignId) return;
     const newCharacter = { id: generateId(), name: characterName.trim() };
-    try {
-      await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: [...campaignCharacters, newCharacter] });
-      setCharacterName('');
-    } catch (err) { console.error("Error adding character:", err); }
+    try { await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: [...campaignCharacters, newCharacter] }); setCharacterName(''); } catch (err) { console.error("Error adding character:", err); }
   };
-
   const handleUpdateCharacter = async (characterId, newName) => {
     if (!db ||!newName.trim() || !campaignId) return;
     const updatedCharacters = campaignCharacters.map(c => c.id === characterId ? { ...c, name: newName.trim() } : c);
-    try {
-      await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters });
-      setEditingCharacter(null); 
-    } catch (err) { console.error("Error updating character:", err); }
+    try { await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters }); setEditingCharacter(null); } catch (err) { console.error("Error updating character:", err); }
   };
-
-  const requestDeleteCharacter = (characterId, charName) => {
-    setItemToDelete({ id: characterId, name: charName, type: 'character' });
-    setShowDeleteCharConfirm(true);
-  };
-
+  const requestDeleteCharacter = (characterId, charName) => { setItemToDelete({ id: characterId, name: charName, type: 'character' }); setShowDeleteCharConfirm(true); };
   const confirmDeleteCharacter = async () => {
     if (!db || !itemToDelete || itemToDelete.type !== 'character') return;
     const characterId = itemToDelete.id;
     const updatedCharacters = campaignCharacters.filter(c => c.id !== characterId);
-    try {
-      await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters });
-    } catch (err) { console.error("Error deleting character:", err); }
-    setShowDeleteCharConfirm(false);
-    setItemToDelete(null);
+    try { await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters }); } catch (err) { console.error("Error deleting character:", err); }
+    setShowDeleteCharConfirm(false); setItemToDelete(null);
   };
-
   return (
     <>
     <div className="p-4 bg-slate-800 rounded-lg shadow">
@@ -514,119 +425,55 @@ function CharacterManager({ campaignId, campaignCharacters }) {
         ))}
       </ul>
     </div>
-    <ConfirmationModal
-        isOpen={showDeleteCharConfirm}
-        onClose={() => setShowDeleteCharConfirm(false)}
-        onConfirm={confirmDeleteCharacter}
-        title="Delete Character?"
-        message={`Are you sure you want to remove the character "${itemToDelete?.name}" from this campaign?`}
-      />
+    <ConfirmationModal isOpen={showDeleteCharConfirm} onClose={() => setShowDeleteCharConfirm(false)} onConfirm={confirmDeleteCharacter} title="Delete Character?" message={`Are you sure you want to remove the character "${itemToDelete?.name}" from this campaign?`}/>
     </>
   );
 }
 
 function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharacters }) { 
   const {data: encountersData, isLoading: isLoadingEncounters } = useFirestoreCollection(campaignId ? getEncountersCollectionPath(campaignId) : null);
-  const {data: activeDisplayInfo } = useFirestoreDocument(getActiveDisplayDocPath());
-
+  const {data: activeDisplayInfoFromHook } = useFirestoreDocument(getActiveDisplayDocPath()); 
   const [encounters, setEncounters] = useState([]);
   const [selectedEncounterId, setSelectedEncounterId] = useState(null);
   const [showCreateEncounterModal, setShowCreateEncounterModal] = useState(false);
   const [showDeleteEncounterConfirm, setShowDeleteEncounterConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null); 
-  
   const selectedEncounterIdRef = useRef(selectedEncounterId); 
-
+  useEffect(() => { if(encountersData) setEncounters(encountersData); }, [encountersData]);
+  useEffect(() => { selectedEncounterIdRef.current = selectedEncounterId; }, [selectedEncounterId]);
   useEffect(() => {
-    if(encountersData) setEncounters(encountersData);
-  }, [encountersData]);
-
-  useEffect(() => {
-    selectedEncounterIdRef.current = selectedEncounterId;
-  }, [selectedEncounterId]);
-
-  useEffect(() => {
-    if (!campaignId) { 
-        setSelectedEncounterId(null);
-        return;
-    }
+    if (!campaignId) { setSelectedEncounterId(null); return; }
     if (encounters && encounters.length > 0) {
         const currentSelection = selectedEncounterIdRef.current;
         if (currentSelection === null || !encounters.some(e => e.id === currentSelection)) {
-            if (initialActiveEncounterId && encounters.some(e => e.id === initialActiveEncounterId)) {
-                setSelectedEncounterId(initialActiveEncounterId);
-            } else if (activeDisplayInfo && activeDisplayInfo.activeCampaignId === campaignId && 
-                       encounters.some(e => e.id === activeDisplayInfo.activeEncounterId)) {
-                setSelectedEncounterId(activeDisplayInfo.activeEncounterId);
-            }
+            if (initialActiveEncounterId && encounters.some(e => e.id === initialActiveEncounterId)) { setSelectedEncounterId(initialActiveEncounterId); } 
+            else if (activeDisplayInfoFromHook && activeDisplayInfoFromHook.activeCampaignId === campaignId && encounters.some(e => e.id === activeDisplayInfoFromHook.activeEncounterId)) { setSelectedEncounterId(activeDisplayInfoFromHook.activeEncounterId); }
         }
-    } else if (encounters && encounters.length === 0) { 
-        setSelectedEncounterId(null);
-    }
-  }, [campaignId, initialActiveEncounterId, activeDisplayInfo, encounters]);
-
-
+    } else if (encounters && encounters.length === 0) { setSelectedEncounterId(null); }
+  }, [campaignId, initialActiveEncounterId, activeDisplayInfoFromHook, encounters]); 
   const handleCreateEncounter = async (name) => {
     if (!db ||!name.trim() || !campaignId) return;
     const newEncounterId = generateId();
-    try {
-      await setDoc(doc(db, getEncountersCollectionPath(campaignId), newEncounterId), {
-        name: name.trim(), createdAt: new Date().toISOString(), participants: [], round: 0, currentTurnParticipantId: null, isStarted: false,
-      });
-      setShowCreateEncounterModal(false);
-      setSelectedEncounterId(newEncounterId);
-    } catch (err) { console.error("Error creating encounter:", err); }
+    try { await setDoc(doc(db, getEncountersCollectionPath(campaignId), newEncounterId), { name: name.trim(), createdAt: new Date().toISOString(), participants: [], round: 0, currentTurnParticipantId: null, isStarted: false, isPaused: false }); setShowCreateEncounterModal(false); setSelectedEncounterId(newEncounterId); } catch (err) { console.error("Error creating encounter:", err); }
   };
-
-  const requestDeleteEncounter = (encounterId, encounterName) => {
-    setItemToDelete({ id: encounterId, name: encounterName, type: 'encounter' });
-    setShowDeleteEncounterConfirm(true);
-  };
-
+  const requestDeleteEncounter = (encounterId, encounterName) => { setItemToDelete({ id: encounterId, name: encounterName, type: 'encounter' }); setShowDeleteEncounterConfirm(true); };
   const confirmDeleteEncounter = async () => {
     if (!db || !itemToDelete || itemToDelete.type !== 'encounter') return;
     const encounterId = itemToDelete.id;
-    try {
-      await deleteDoc(doc(db, getEncounterDocPath(campaignId, encounterId)));
-      if (selectedEncounterId === encounterId) setSelectedEncounterId(null);
-      if (activeDisplayInfo && activeDisplayInfo.activeEncounterId === encounterId) {
-        await updateDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: null, activeEncounterId: null });
-      }
-    } catch (err) { console.error("Error deleting encounter:", err); }
-    setShowDeleteEncounterConfirm(false);
-    setItemToDelete(null);
+    try { await deleteDoc(doc(db, getEncounterDocPath(campaignId, encounterId))); if (selectedEncounterId === encounterId) setSelectedEncounterId(null); if (activeDisplayInfoFromHook && activeDisplayInfoFromHook.activeEncounterId === encounterId) { await updateDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: null, activeEncounterId: null }); } } catch (err) { console.error("Error deleting encounter:", err); }
+    setShowDeleteEncounterConfirm(false); setItemToDelete(null);
   };
-  
   const handleTogglePlayerDisplayForEncounter = async (encounterId) => {
     if (!db) return;
     try {
-      const currentActiveCampaign = activeDisplayInfo?.activeCampaignId;
-      const currentActiveEncounter = activeDisplayInfo?.activeEncounterId;
-
-      if (currentActiveCampaign === campaignId && currentActiveEncounter === encounterId) {
-        await setDoc(doc(db, getActiveDisplayDocPath()), {
-          activeCampaignId: null, 
-          activeEncounterId: null,
-        }, { merge: true }); 
-        console.log("Player Display for this encounter turned OFF.");
-      } else {
-        await setDoc(doc(db, getActiveDisplayDocPath()), {
-          activeCampaignId: campaignId,
-          activeEncounterId: encounterId,
-        }, { merge: true });
-        console.log("Encounter set as active for Player Display!");
-      }
-    } catch (err) {
-      console.error("Error toggling Player Display for encounter:", err);
-    }
+      const currentActiveCampaign = activeDisplayInfoFromHook?.activeCampaignId;
+      const currentActiveEncounter = activeDisplayInfoFromHook?.activeEncounterId;
+      if (currentActiveCampaign === campaignId && currentActiveEncounter === encounterId) { await setDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: null, activeEncounterId: null, }, { merge: true }); console.log("Player Display for this encounter turned OFF."); } 
+      else { await setDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: campaignId, activeEncounterId: encounterId, }, { merge: true }); console.log("Encounter set as active for Player Display!"); }
+    } catch (err) { console.error("Error toggling Player Display for encounter:", err); }
   };
-
   const selectedEncounter = encounters?.find(e => e.id === selectedEncounterId);
-
-  if (isLoadingEncounters && campaignId) {
-      return <p className="text-center text-slate-300 mt-4">Loading encounters...</p>;
-  }
-
+  if (isLoadingEncounters && campaignId) { return <p className="text-center text-slate-300 mt-4">Loading encounters...</p>; }
   return (
     <>
     <div className="mt-6 p-4 bg-slate-800 rounded-lg shadow">
@@ -637,7 +484,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
       {(!encounters || encounters.length === 0) && <p className="text-sm text-slate-400">No encounters yet.</p>}
       <div className="space-y-3">
         {encounters?.map(encounter => {
-          const isLiveOnPlayerDisplay = activeDisplayInfo && activeDisplayInfo.activeCampaignId === campaignId && activeDisplayInfo.activeEncounterId === encounter.id;
+          const isLiveOnPlayerDisplay = activeDisplayInfoFromHook && activeDisplayInfoFromHook.activeCampaignId === campaignId && activeDisplayInfoFromHook.activeEncounterId === encounter.id;
           return (
             <div key={encounter.id} className={`p-3 rounded-md shadow transition-all ${selectedEncounterId === encounter.id ? 'bg-sky-600 ring-2 ring-sky-400' : 'bg-slate-700 hover:bg-slate-650'} ${isLiveOnPlayerDisplay ? 'ring-2 ring-green-500 shadow-md shadow-green-500/30' : ''}`}>
               <div className="flex justify-between items-center">
@@ -647,18 +494,11 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
                   {isLiveOnPlayerDisplay && <span className="text-xs text-green-400 font-semibold block mt-1">LIVE ON PLAYER DISPLAY</span>}
                 </div>
                 <div className="flex items-center space-x-2">
-                  <button 
-                    onClick={() => handleTogglePlayerDisplayForEncounter(encounter.id)} 
-                    className={`p-1 rounded transition-colors ${isLiveOnPlayerDisplay ? 'bg-red-500 hover:bg-red-600 text-white' : 'text-teal-400 hover:text-teal-300 bg-slate-600 hover:bg-slate-500'}`} 
-                    title={isLiveOnPlayerDisplay ? "Deactivate for Player Display" : "Activate for Player Display"}
-                  >
-                    {isLiveOnPlayerDisplay ? <EyeOff size={18} /> : <Eye size={18} />}
-                  </button>
+                  <button onClick={() => handleTogglePlayerDisplayForEncounter(encounter.id)} className={`p-1 rounded transition-colors ${isLiveOnPlayerDisplay ? 'bg-red-500 hover:bg-red-600 text-white' : 'text-teal-400 hover:text-teal-300 bg-slate-600 hover:bg-slate-500'}`} title={isLiveOnPlayerDisplay ? "Deactivate for Player Display" : "Activate for Player Display"}>{isLiveOnPlayerDisplay ? <EyeOff size={18} /> : <Eye size={18} />}</button>
                   <button onClick={(e) => { e.stopPropagation(); requestDeleteEncounter(encounter.id, encounter.name); }} className="p-1 rounded transition-colors text-red-400 hover:text-red-300 bg-slate-600 hover:bg-slate-500" title="Delete Encounter"><Trash2 size={18} /></button>
                 </div>
               </div>
-            </div>
-          );
+            </div>);
         })}
       </div>
       {showCreateEncounterModal && <Modal onClose={() => setShowCreateEncounterModal(false)} title="Create New Encounter"><CreateEncounterForm onCreate={handleCreateEncounter} onCancel={() => setShowCreateEncounterModal(false)} /></Modal>}
@@ -670,13 +510,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
         </div>
       )}
     </div>
-    <ConfirmationModal
-        isOpen={showDeleteEncounterConfirm}
-        onClose={() => setShowDeleteEncounterConfirm(false)}
-        onConfirm={confirmDeleteEncounter}
-        title="Delete Encounter?"
-        message={`Are you sure you want to delete the encounter "${itemToDelete?.name}"? This action cannot be undone.`}
-      />
+    <ConfirmationModal isOpen={showDeleteEncounterConfirm} onClose={() => setShowDeleteEncounterConfirm(false)} onConfirm={confirmDeleteEncounter} title="Delete Encounter?" message={`Are you sure you want to delete the encounter "${itemToDelete?.name}"? This action cannot be undone.`}/>
     </>
   );
 }
@@ -708,70 +542,41 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
   const [draggedItemId, setDraggedItemId] = useState(null);
   const [showDeleteParticipantConfirm, setShowDeleteParticipantConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null); 
-
-
   const participants = encounter.participants || [];
-
   const handleAddParticipant = async () => {
     if (!db || (participantType === 'monster' && !participantName.trim()) || (participantType === 'character' && !selectedCharacterId)) return;
     let nameToAdd = participantName.trim();
     if (participantType === 'character') {
       const character = campaignCharacters.find(c => c.id === selectedCharacterId);
       if (!character) { console.error("Selected character not found"); return; }
-      if (participants.some(p => p.type === 'character' && p.originalCharacterId === selectedCharacterId)) {
-        alert(`${character.name} is already in this encounter.`); return;
-      }
+      if (participants.some(p => p.type === 'character' && p.originalCharacterId === selectedCharacterId)) { alert(`${character.name} is already in this encounter.`); return; }
       nameToAdd = character.name;
     }
-    const newParticipant = {
-      id: generateId(), name: nameToAdd, type: participantType, 
-      originalCharacterId: participantType === 'character' ? selectedCharacterId : null, 
-      initiative: parseInt(initiative, 10) || 0, maxHp: parseInt(maxHp, 10) || 1, currentHp: parseInt(maxHp, 10) || 1, 
-      conditions: [], isActive: true, 
-    };
-    try {
-      await updateDoc(doc(db, encounterPath), { participants: [...participants, newParticipant] });
-      setParticipantName(''); setInitiative(10); setMaxHp(10); setSelectedCharacterId(''); 
-    } catch (err) { console.error("Error adding participant:", err); }
+    const newParticipant = { id: generateId(), name: nameToAdd, type: participantType, originalCharacterId: participantType === 'character' ? selectedCharacterId : null, initiative: parseInt(initiative, 10) || 0, maxHp: parseInt(maxHp, 10) || 1, currentHp: parseInt(maxHp, 10) || 1, conditions: [], isActive: true, };
+    try { await updateDoc(doc(db, encounterPath), { participants: [...participants, newParticipant] }); setParticipantName(''); setInitiative(10); setMaxHp(10); setSelectedCharacterId(''); } catch (err) { console.error("Error adding participant:", err); }
   };
-
   const handleUpdateParticipant = async (updatedData) => {
     if (!db || !editingParticipant) return;
     const { flavorText, ...restOfData } = updatedData; 
     const updatedParticipants = participants.map(p => p.id === editingParticipant.id ? { ...p, ...restOfData } : p );
-    try {
-      await updateDoc(doc(db, encounterPath), { participants: updatedParticipants });
-      setEditingParticipant(null);
-    } catch (err) { console.error("Error updating participant:", err); }
+    try { await updateDoc(doc(db, encounterPath), { participants: updatedParticipants }); setEditingParticipant(null); } catch (err) { console.error("Error updating participant:", err); }
   };
-
-  const requestDeleteParticipant = (participantId, participantName) => {
-    setItemToDelete({ id: participantId, name: participantName, type: 'participant' });
-    setShowDeleteParticipantConfirm(true);
-  };
-
+  const requestDeleteParticipant = (participantId, participantName) => { setItemToDelete({ id: participantId, name: participantName, type: 'participant' }); setShowDeleteParticipantConfirm(true); };
   const confirmDeleteParticipant = async () => {
     if (!db || !itemToDelete || itemToDelete.type !== 'participant') return;
     const participantId = itemToDelete.id;
     const updatedParticipants = participants.filter(p => p.id !== participantId);
-    try {
-      await updateDoc(doc(db, encounterPath), { participants: updatedParticipants });
-    } catch (err) { console.error("Error deleting participant:", err); }
-    setShowDeleteParticipantConfirm(false);
-    setItemToDelete(null);
+    try { await updateDoc(doc(db, encounterPath), { participants: updatedParticipants }); } catch (err) { console.error("Error deleting participant:", err); }
+    setShowDeleteParticipantConfirm(false); setItemToDelete(null);
   };
-  
   const toggleParticipantActive = async (participantId) => {
     if (!db) return;
     const pToToggle = participants.find(p => p.id === participantId);
     if (!pToToggle) return;
     const updatedPs = participants.map(p => p.id === participantId ? { ...p, isActive: !p.isActive } : p);
-    try { await updateDoc(doc(db, encounterPath), { participants: updatedPs }); } 
-    catch (err) { console.error("Error toggling active state:", err); }
+    try { await updateDoc(doc(db, encounterPath), { participants: updatedPs }); } catch (err) { console.error("Error toggling active state:", err); }
   };
-
   const handleHpInputChange = (participantId, value) => setHpChangeValues(prev => ({ ...prev, [participantId]: value }));
-
   const applyHpChange = async (participantId, changeType) => {
     if (!db) return;
     const amountStr = hpChangeValues[participantId];
@@ -784,80 +589,32 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
     if (changeType === 'damage') newHp = Math.max(0, pToChange.currentHp - amount);
     else if (changeType === 'heal') newHp = Math.min(pToChange.maxHp, pToChange.currentHp + amount);
     const updatedPs = participants.map(p => p.id === participantId ? { ...p, currentHp: newHp } : p);
-    try {
-      await updateDoc(doc(db, encounterPath), { participants: updatedPs });
-      setHpChangeValues(prev => ({ ...prev, [participantId]: '' })); 
-    } catch (err) { console.error("Error applying HP change:", err); }
+    try { await updateDoc(doc(db, encounterPath), { participants: updatedPs }); setHpChangeValues(prev => ({ ...prev, [participantId]: '' })); } catch (err) { console.error("Error applying HP change:", err); }
   };
-
-  const handleDragStart = (e, id) => {
-    setDraggedItemId(id);
-    e.dataTransfer.effectAllowed = 'move'; 
-  };
-
-  const handleDragOver = (e) => {
-    e.preventDefault(); 
-    e.dataTransfer.dropEffect = 'move'; 
-  };
-
+  const handleDragStart = (e, id) => { setDraggedItemId(id); e.dataTransfer.effectAllowed = 'move'; };
+  const handleDragOver = (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; };
   const handleDrop = async (e, targetId) => {
     e.preventDefault(); 
-    if (!db || draggedItemId === null || draggedItemId === targetId) {
-      setDraggedItemId(null); 
-      return;
-    }
-    
+    if (!db || draggedItemId === null || draggedItemId === targetId) { setDraggedItemId(null); return; }
     const currentParticipants = [...participants]; 
     const draggedItemIndex = currentParticipants.findIndex(p => p.id === draggedItemId);
     const targetItemIndex = currentParticipants.findIndex(p => p.id === targetId);
-
-    if (draggedItemIndex === -1 || targetItemIndex === -1) {
-      console.error("Dragged or target item not found in participants list.");
-      setDraggedItemId(null);
-      return;
-    }
-
+    if (draggedItemIndex === -1 || targetItemIndex === -1) { console.error("Dragged or target item not found."); setDraggedItemId(null); return; }
     const draggedItem = currentParticipants[draggedItemIndex];
     const targetItem = currentParticipants[targetItemIndex];
-
-    if (draggedItem.initiative !== targetItem.initiative) {
-      console.log("Drag-and-drop for tie-breaking only allowed between participants with the same initiative score.");
-      setDraggedItemId(null);
-      return;
-    }
-
+    if (draggedItem.initiative !== targetItem.initiative) { console.log("Drag-drop only for same initiative."); setDraggedItemId(null); return; }
     const [removedItem] = currentParticipants.splice(draggedItemIndex, 1); 
     currentParticipants.splice(targetItemIndex, 0, removedItem); 
-
-    try {
-      await updateDoc(doc(db, encounterPath), { participants: currentParticipants });
-      console.log("Participants reordered in Firestore for tie-breaking.");
-    } catch (err) {
-      console.error("Error updating participants after drag-drop:", err);
-    }
+    try { await updateDoc(doc(db, encounterPath), { participants: currentParticipants }); console.log("Participants reordered."); } catch (err) { console.error("Error D&D update:", err); }
     setDraggedItemId(null); 
   };
-  
-  const handleDragEnd = () => {
-    setDraggedItemId(null); 
-  };
-
+  const handleDragEnd = () => { setDraggedItemId(null); };
   const sortedAdminParticipants = [...participants].sort((a, b) => {
-    if (a.initiative === b.initiative) {
-      const indexA = participants.findIndex(p => p.id === a.id);
-      const indexB = participants.findIndex(p => p.id === b.id);
-      return indexA - indexB; 
-    }
+    if (a.initiative === b.initiative) { const indexA = participants.findIndex(p => p.id === a.id); const indexB = participants.findIndex(p => p.id === b.id); return indexA - indexB; }
     return b.initiative - a.initiative; 
   });
-  
-  const initiativeGroups = participants.reduce((acc, p) => {
-    acc[p.initiative] = (acc[p.initiative] || 0) + 1;
-    return acc;
-  }, {});
+  const initiativeGroups = participants.reduce((acc, p) => { acc[p.initiative] = (acc[p.initiative] || 0) + 1; return acc; }, {});
   const tiedInitiatives = Object.keys(initiativeGroups).filter(init => initiativeGroups[init] > 1).map(Number);
-
-
   return (
     <>
     <div className="p-3 bg-slate-800 rounded-md mt-4">
@@ -870,49 +627,25 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
             <option value="character">Character</option>
           </select>
         </div>
-
-        {participantType === 'monster' && (
-          <div className="md:col-span-2"> 
-            <label className="block text-sm font-medium text-slate-300">Monster Name</label>
-            <input type="text" value={participantName} onChange={(e) => setParticipantName(e.target.value)} placeholder="e.g., Dire Wolf" className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" />
-          </div>
-        )}
+        {participantType === 'monster' && (<div className="md:col-span-2"> <label className="block text-sm font-medium text-slate-300">Monster Name</label><input type="text" value={participantName} onChange={(e) => setParticipantName(e.target.value)} placeholder="e.g., Dire Wolf" className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>)}
         {participantType === 'character' && (<div><label className="block text-sm font-medium text-slate-300">Select Character</label><select value={selectedCharacterId} onChange={(e) => setSelectedCharacterId(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-600 border-slate-500 rounded text-white"><option value="">-- Select from Campaign --</option>{campaignCharacters.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}</select></div>)}
-        
         <div><label className="block text-sm font-medium text-slate-300">Initiative</label><input type="number" value={initiative} onChange={(e) => setInitiative(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
         <div><label className="block text-sm font-medium text-slate-300">Max HP</label><input type="number" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
-        
-        <div className="md:col-span-2 flex justify-end">
-            <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-green-500 hover:bg-green-600 rounded-md transition-colors flex items-center">
-                <PlusCircle size={18} className="mr-1" /> Add to Encounter
-            </button>
-        </div>
+        <div className="md:col-span-2 flex justify-end"><button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-green-500 hover:bg-green-600 rounded-md transition-colors flex items-center"><PlusCircle size={18} className="mr-1" /> Add to Encounter</button></div>
       </form>
       {participants.length === 0 && <p className="text-sm text-slate-400">No participants.</p>}
       <ul className="space-y-2">
-        {sortedAdminParticipants.map((p, index) => {
+        {sortedAdminParticipants.map((p) => {
           const isCurrentTurn = encounter.isStarted && p.id === encounter.currentTurnParticipantId;
-          const isDraggable = !encounter.isStarted && tiedInitiatives.includes(Number(p.initiative)); 
+          const isDraggable = (!encounter.isStarted || encounter.isPaused) && tiedInitiatives.includes(Number(p.initiative)); 
           return (
-            <li 
-              key={p.id} 
-              draggable={isDraggable}
-              onDragStart={isDraggable ? (e) => handleDragStart(e, p.id) : undefined}
-              onDragOver={isDraggable ? handleDragOver : undefined}
-              onDrop={isDraggable ? (e) => handleDrop(e, p.id) : undefined}
-              onDragEnd={isDraggable ? handleDragEnd : undefined}
-              className={`p-3 rounded-md flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 transition-all 
-                         ${isCurrentTurn ? 'bg-green-600 ring-2 ring-green-300 shadow-lg' : (p.type === 'character' ? 'bg-sky-800' : 'bg-red-800')} 
-                         ${!p.isActive ? 'opacity-50' : ''}
-                         ${isDraggable ? 'cursor-grab' : ''}
-                         ${draggedItemId === p.id ? 'opacity-50 ring-2 ring-yellow-400' : ''}
-                        `}
-            >
+            <li key={p.id} draggable={isDraggable} onDragStart={isDraggable ? (e) => handleDragStart(e, p.id) : undefined} onDragOver={isDraggable ? handleDragOver : undefined} onDrop={isDraggable ? (e) => handleDrop(e, p.id) : undefined} onDragEnd={isDraggable ? handleDragEnd : undefined}
+              className={`p-3 rounded-md flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 transition-all ${isCurrentTurn && !encounter.isPaused ? 'bg-green-600 ring-2 ring-green-300 shadow-lg' : (p.type === 'character' ? 'bg-sky-800' : 'bg-red-800')} ${!p.isActive ? 'opacity-50' : ''} ${isDraggable ? 'cursor-grab' : ''} ${draggedItemId === p.id ? 'opacity-50 ring-2 ring-yellow-400' : ''}`}>
               <div className="flex-1 flex items-center">
                 {isDraggable && <ChevronsUpDown size={18} className="mr-2 text-slate-400 flex-shrink-0" title="Drag to reorder in tie"/>}
                 <div>
-                  <p className={`font-semibold text-lg ${isCurrentTurn ? 'text-white' : 'text-white'}`}>{p.name} <span className="text-xs">({p.type})</span>{isCurrentTurn && <span className="ml-2 px-2 py-0.5 bg-yellow-400 text-black text-xs font-bold rounded-full inline-flex items-center"><Zap size={12} className="mr-1"/> CURRENT</span>}</p>
-                  <p className={`text-sm ${isCurrentTurn ? 'text-green-100' : 'text-slate-200'}`}>Init: {p.initiative} | HP: {p.currentHp}/{p.maxHp}</p>
+                  <p className={`font-semibold text-lg ${isCurrentTurn && !encounter.isPaused ? 'text-white' : 'text-white'}`}>{p.name} <span className="text-xs">({p.type})</span>{isCurrentTurn && !encounter.isPaused && <span className="ml-2 px-2 py-0.5 bg-yellow-400 text-black text-xs font-bold rounded-full inline-flex items-center"><Zap size={12} className="mr-1"/> CURRENT</span>}</p>
+                  <p className={`text-sm ${isCurrentTurn && !encounter.isPaused ? 'text-green-100' : 'text-slate-200'}`}>Init: {p.initiative} | HP: {p.currentHp}/{p.maxHp}</p>
                 </div>
               </div>
               <div className="flex flex-wrap items-center space-x-2 mt-2 sm:mt-0">
@@ -921,19 +654,12 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
                 <button onClick={() => setEditingParticipant(p)} className="p-1 rounded transition-colors text-yellow-400 hover:text-yellow-300 bg-slate-600 hover:bg-slate-500" title="Edit"><Edit3 size={18} /></button>
                 <button onClick={() => requestDeleteParticipant(p.id, p.name)} className="p-1 rounded transition-colors text-red-400 hover:text-red-300 bg-slate-600 hover:bg-slate-500" title="Remove"><Trash2 size={18} /></button>
               </div>
-            </li>
-          );
+            </li>);
         })}
       </ul>
       {editingParticipant && <EditParticipantModal participant={editingParticipant} onClose={() => setEditingParticipant(null)} onSave={handleUpdateParticipant} />}
     </div>
-     <ConfirmationModal
-        isOpen={showDeleteParticipantConfirm}
-        onClose={() => setShowDeleteParticipantConfirm(false)}
-        onConfirm={confirmDeleteParticipant}
-        title="Delete Participant?"
-        message={`Are you sure you want to remove "${itemToDelete?.name}" from this encounter?`}
-      />
+     <ConfirmationModal isOpen={showDeleteParticipantConfirm} onClose={() => setShowDeleteParticipantConfirm(false)} onConfirm={confirmDeleteParticipant} title="Delete Participant?" message={`Are you sure you want to remove "${itemToDelete?.name}" from this encounter?`}/>
     </>
   );
 }
@@ -943,14 +669,7 @@ function EditParticipantModal({ participant, onClose, onSave }) {
   const [initiative, setInitiative] = useState(participant.initiative);
   const [currentHp, setCurrentHp] = useState(participant.currentHp);
   const [maxHp, setMaxHp] = useState(participant.maxHp);
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSave({
-      name: name.trim(), initiative: parseInt(initiative, 10),
-      currentHp: parseInt(currentHp, 10), maxHp: parseInt(maxHp, 10),
-    });
-  };
+  const handleSubmit = (e) => { e.preventDefault(); onSave({ name: name.trim(), initiative: parseInt(initiative, 10), currentHp: parseInt(currentHp, 10), maxHp: parseInt(maxHp, 10), }); };
   return (
     <Modal onClose={onClose} title={`Edit ${participant.name}`}>
       <form onSubmit={handleSubmit} className="space-y-4">
@@ -976,57 +695,60 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
     if (!db ||!encounter.participants || encounter.participants.length === 0) { alert("Add participants first."); return; }
     const activePs = encounter.participants.filter(p => p.isActive);
     if (activePs.length === 0) { alert("No active participants."); return; }
-    
     const sortedPs = [...activePs].sort((a, b) => {
-        if (a.initiative === b.initiative) {
-            const indexA = encounter.participants.findIndex(p => p.id === a.id);
-            const indexB = encounter.participants.findIndex(p => p.id === b.id);
-            return indexA - indexB;
-        }
+        if (a.initiative === b.initiative) { const indexA = encounter.participants.findIndex(p => p.id === a.id); const indexB = encounter.participants.findIndex(p => p.id === b.id); return indexA - indexB; }
         return b.initiative - a.initiative; 
     });
-
     try {
-      await updateDoc(doc(db, encounterPath), {
-        isStarted: true, round: 1, currentTurnParticipantId: sortedPs[0].id, turnOrderIds: sortedPs.map(p => p.id) 
-      });
-      await setDoc(doc(db, getActiveDisplayDocPath()), { 
-        activeCampaignId: campaignId, 
-        activeEncounterId: encounter.id 
-      }, { merge: true });
+      await updateDoc(doc(db, encounterPath), { isStarted: true, isPaused: false, round: 1, currentTurnParticipantId: sortedPs[0].id, turnOrderIds: sortedPs.map(p => p.id) });
+      await setDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: campaignId, activeEncounterId: encounter.id }, { merge: true });
       console.log("Encounter started and set as active display.");
-
     } catch (err) { console.error("Error starting encounter:", err); }
   };
 
-  const handleNextTurn = async () => {
-    if (!db ||!encounter.isStarted || !encounter.currentTurnParticipantId || !encounter.turnOrderIds || encounter.turnOrderIds.length === 0) return;
-    const activePsInOrder = encounter.turnOrderIds.map(id => encounter.participants.find(p => p.id === id && p.isActive)).filter(Boolean); 
-    if (activePsInOrder.length === 0) {
-      alert("No active participants left.");
-      await updateDoc(doc(db, encounterPath), { isStarted: false, currentTurnParticipantId: null, round: encounter.round }); return;
+  const handleTogglePause = async () => {
+    if (!db || !encounter || !encounter.isStarted) return;
+    const newPausedState = !encounter.isPaused;
+    let newTurnOrderIds = encounter.turnOrderIds;
+
+    if (!newPausedState && encounter.isPaused) { 
+        const activeParticipants = encounter.participants.filter(p => p.isActive);
+        const sortedActiveParticipants = [...activeParticipants].sort((a, b) => {
+            if (a.initiative === b.initiative) {
+                const indexA = encounter.participants.findIndex(p => p.id === a.id);
+                const indexB = encounter.participants.findIndex(p => p.id === b.id);
+                return indexA - indexB;
+            }
+            return b.initiative - a.initiative;
+        });
+        newTurnOrderIds = sortedActiveParticipants.map(p => p.id);
     }
+    try {
+      await updateDoc(doc(db, encounterPath), { 
+          isPaused: newPausedState,
+          turnOrderIds: newTurnOrderIds 
+      });
+      console.log(`Encounter ${newPausedState ? 'paused' : 'resumed'}.`);
+    } catch (err) { console.error("Error toggling pause state:", err); }
+  };
+
+  const handleNextTurn = async () => {
+    if (!db ||!encounter.isStarted || encounter.isPaused || !encounter.currentTurnParticipantId || !encounter.turnOrderIds || encounter.turnOrderIds.length === 0) return;
+    const activePsInOrder = encounter.turnOrderIds.map(id => encounter.participants.find(p => p.id === id && p.isActive)).filter(Boolean); 
+    if (activePsInOrder.length === 0) { alert("No active participants left."); await updateDoc(doc(db, encounterPath), { isStarted: false, isPaused: false, currentTurnParticipantId: null, round: encounter.round }); return; }
     const currentIndex = activePsInOrder.findIndex(p => p.id === encounter.currentTurnParticipantId);
     let nextIndex = (currentIndex + 1) % activePsInOrder.length;
     let nextRound = encounter.round;
     if (nextIndex === 0 && currentIndex !== -1) nextRound += 1;
-    try {
-      await updateDoc(doc(db, encounterPath), { currentTurnParticipantId: activePsInOrder[nextIndex].id, round: nextRound });
-    } catch (err) { console.error("Error advancing turn:", err); }
+    try { await updateDoc(doc(db, encounterPath), { currentTurnParticipantId: activePsInOrder[nextIndex].id, round: nextRound }); } catch (err) { console.error("Error advancing turn:", err); }
   };
   
-  const requestEndEncounter = () => {
-    setShowEndEncounterConfirm(true);
-  };
-
+  const requestEndEncounter = () => { setShowEndEncounterConfirm(true); };
   const confirmEndEncounter = async () => {
     if (!db) return;
     try {
-      await updateDoc(doc(db, encounterPath), { isStarted: false, currentTurnParticipantId: null, round: 0, turnOrderIds: [] });
-      await setDoc(doc(db, getActiveDisplayDocPath()), { 
-        activeCampaignId: null, 
-        activeEncounterId: null 
-      }, { merge: true });
+      await updateDoc(doc(db, encounterPath), { isStarted: false, isPaused: false, currentTurnParticipantId: null, round: 0, turnOrderIds: [] });
+      await setDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: null, activeEncounterId: null }, { merge: true });
       console.log("Encounter ended and deactivated from Player Display.");
     } catch (err) { console.error("Error ending encounter:", err); }
     setShowEndEncounterConfirm(false);
@@ -1042,27 +764,25 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
           <button onClick={handleStartEncounter} className="px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors flex items-center" disabled={!encounter.participants || encounter.participants.filter(p=>p.isActive).length === 0}><PlayIcon size={18} className="mr-2" /> Start</button>
         ) : (
           <>
-            <button onClick={handleNextTurn} className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors flex items-center" disabled={!encounter.currentTurnParticipantId}><SkipForwardIcon size={18} className="mr-2" /> Next Turn</button>
+            <button onClick={handleTogglePause} className={`px-4 py-2 text-sm font-medium text-white rounded-md transition-colors flex items-center ${encounter.isPaused ? 'bg-green-500 hover:bg-green-600' : 'bg-yellow-500 hover:bg-yellow-600'}`}>
+              {encounter.isPaused ? <PlayIcon size={18} className="mr-2" /> : <PauseIcon size={18} className="mr-2" />}
+              {encounter.isPaused ? 'Resume' : 'Pause'}
+            </button>
+            <button onClick={handleNextTurn} className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors flex items-center" disabled={!encounter.currentTurnParticipantId || encounter.isPaused}><SkipForwardIcon size={18} className="mr-2" /> Next Turn</button>
             <button onClick={requestEndEncounter} className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors flex items-center"><StopCircleIcon size={18} className="mr-2" /> End</button>
             <p className="text-slate-300 self-center">Round: {encounter.round}</p>
+            {encounter.isPaused && <p className="text-yellow-400 font-semibold self-center">(Paused)</p>}
           </>
         )}
       </div>
     </div>
-    <ConfirmationModal
-        isOpen={showEndEncounterConfirm}
-        onClose={() => setShowEndEncounterConfirm(false)}
-        onConfirm={confirmEndEncounter}
-        title="End Encounter?"
-        message={`Are you sure you want to end this encounter? Initiative order will be reset and it will be removed from the Player Display.`}
-      />
+    <ConfirmationModal isOpen={showEndEncounterConfirm} onClose={() => setShowEndEncounterConfirm(false)} onConfirm={confirmEndEncounter} title="End Encounter?" message={`Are you sure you want to end this encounter? Initiative order will be reset and it will be removed from the Player Display.`}/>
     </>
   );
 }
 
 function DisplayView() { 
   const { data: activeDisplayData, isLoading: isLoadingActiveDisplay, error: activeDisplayError } = useFirestoreDocument(getActiveDisplayDocPath());
-  
   const [activeEncounterData, setActiveEncounterData] = useState(null);
   const [isLoadingEncounter, setIsLoadingEncounter] = useState(true); 
   const [encounterError, setEncounterError] = useState(null);
@@ -1070,72 +790,28 @@ function DisplayView() {
   const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false); 
 
   useEffect(() => {
-    if (!db) {
-        setEncounterError("Firestore not available."); 
-        setIsLoadingEncounter(false); 
-        setIsPlayerDisplayActive(false);
-        return;
-    }
-
+    if (!db) { setEncounterError("Firestore not available."); setIsLoadingEncounter(false); setIsPlayerDisplayActive(false); return; }
     let unsubscribeEncounter;
     let unsubscribeCampaign;
-
     if (activeDisplayData) {
         const { activeCampaignId, activeEncounterId } = activeDisplayData;
         if (activeCampaignId && activeEncounterId) {
-            setIsPlayerDisplayActive(true);
-            setIsLoadingEncounter(true);
-            setEncounterError(null);
-
+            setIsPlayerDisplayActive(true); setIsLoadingEncounter(true); setEncounterError(null);
             const campaignDocRef = doc(db, getCampaignDocPath(activeCampaignId));
-            unsubscribeCampaign = onSnapshot(campaignDocRef, (campSnap) => {
-                if (campSnap.exists()) {
-                    setCampaignBackgroundUrl(campSnap.data().playerDisplayBackgroundUrl || '');
-                } else {
-                    setCampaignBackgroundUrl(''); 
-                }
-            }, (err) => console.error("Error fetching campaign background for display:", err));
-
+            unsubscribeCampaign = onSnapshot(campaignDocRef, (campSnap) => { if (campSnap.exists()) { setCampaignBackgroundUrl(campSnap.data().playerDisplayBackgroundUrl || ''); } else { setCampaignBackgroundUrl(''); } }, (err) => console.error("Error fetching campaign background:", err));
             const encounterPath = getEncounterDocPath(activeCampaignId, activeEncounterId);
             unsubscribeEncounter = onSnapshot(doc(db, encounterPath), (encDocSnap) => {
-                if (encDocSnap.exists()) {
-                    setActiveEncounterData({ id: encDocSnap.id, ...encDocSnap.data() });
-                } else { 
-                    setActiveEncounterData(null); 
-                    setEncounterError("Active encounter data not found.");
-                }
+                if (encDocSnap.exists()) { setActiveEncounterData({ id: encDocSnap.id, ...encDocSnap.data() }); } 
+                else { setActiveEncounterData(null); setEncounterError("Active encounter data not found."); }
                 setIsLoadingEncounter(false);
-            }, (err) => { 
-                console.error("Error fetching active encounter details for display:", err); 
-                setEncounterError("Error loading active encounter data."); 
-                setIsLoadingEncounter(false);
-            });
-        } else {
-            setActiveEncounterData(null); 
-            setCampaignBackgroundUrl('');
-            setIsPlayerDisplayActive(false); 
-            setIsLoadingEncounter(false);
-        }
-    } else if (!isLoadingActiveDisplay) { 
-        setActiveEncounterData(null); 
-        setCampaignBackgroundUrl('');
-        setIsPlayerDisplayActive(false);
-        setIsLoadingEncounter(false);
-    }
-    
-    return () => { 
-      if (unsubscribeEncounter) unsubscribeEncounter();
-      if (unsubscribeCampaign) unsubscribeCampaign();
-    };
+            }, (err) => { console.error("Error fetching active encounter details:", err); setEncounterError("Error loading active encounter data."); setIsLoadingEncounter(false);});
+        } else { setActiveEncounterData(null); setCampaignBackgroundUrl(''); setIsPlayerDisplayActive(false); setIsLoadingEncounter(false); }
+    } else if (!isLoadingActiveDisplay) { setActiveEncounterData(null); setCampaignBackgroundUrl(''); setIsPlayerDisplayActive(false); setIsLoadingEncounter(false); }
+    return () => { if (unsubscribeEncounter) unsubscribeEncounter(); if (unsubscribeCampaign) unsubscribeCampaign(); };
   }, [activeDisplayData, isLoadingActiveDisplay]); 
 
-
-  if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
-      return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
-  }
-  if (activeDisplayError || (isPlayerDisplayActive && encounterError)) {
-      return <div className="text-center py-10 text-2xl text-red-400">{activeDisplayError || encounterError}</div>;
-  }
+  if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) { return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>; }
+  if (activeDisplayError || (isPlayerDisplayActive && encounterError)) { return <div className="text-center py-10 text-2xl text-red-400">{activeDisplayError || encounterError}</div>; }
   
   if (!isPlayerDisplayActive || !activeEncounterData) {
     return (
@@ -1143,100 +819,51 @@ function DisplayView() {
         <EyeOff size={64} className="mb-4 text-slate-500" />
         <h2 className="text-3xl font-semibold">Game Session Paused</h2>
         <p className="text-xl mt-2">The Dungeon Master has not activated an encounter for display.</p>
-      </div>
-    );
+      </div>);
   }
 
-
-  const { name, participants, round, currentTurnParticipantId, isStarted } = activeEncounterData;
-  
+  const { name, participants, round, currentTurnParticipantId, isStarted, isPaused } = activeEncounterData; 
   let participantsToRender = []; 
   if (participants) { 
     if (isStarted && activeEncounterData.turnOrderIds?.length > 0 ) {
-        const inTurnOrderAndActive = activeEncounterData.turnOrderIds
-            .map(id => participants.find(p => p.id === id))
-            .filter(p => p && p.isActive);
-        
-        const notInTurnOrderButActive = participants.filter(p => 
-            p.isActive && 
-            !activeEncounterData.turnOrderIds.includes(p.id)
-        ).sort((a,b) => { 
-            if(a.initiative === b.initiative) {
-                const indexA = participants.findIndex(originalP => originalP.id === a.id);
-                const indexB = participants.findIndex(originalP => originalP.id === b.id);
-                return indexA - indexB;
-            }
-            return b.initiative - a.initiative;
-        });
-
+        const inTurnOrderAndActive = activeEncounterData.turnOrderIds.map(id => participants.find(p => p.id === id)).filter(p => p && p.isActive);
+        const notInTurnOrderButActive = participants.filter(p => p.isActive && !activeEncounterData.turnOrderIds.includes(p.id)).sort((a,b) => { if(a.initiative === b.initiative) { const indexA = participants.findIndex(op => op.id === a.id); const indexB = participants.findIndex(op => op.id === b.id); return indexA - indexB; } return b.initiative - a.initiative; });
         participantsToRender = [...inTurnOrderAndActive, ...notInTurnOrderButActive];
-
     } else { 
-      participantsToRender = [...participants].filter(p => p.isActive)
-          .sort((a, b) => {
-              if (a.initiative === b.initiative) {
-                  const indexA = participants.findIndex(p => p.id === a.id);
-                  const indexB = participants.findIndex(p => p.id === b.id);
-                  return indexA - indexB;
-              }
-              return b.initiative - a.initiative; 
-          });
+      participantsToRender = [...participants].filter(p => p.isActive).sort((a, b) => { if (a.initiative === b.initiative) { const indexA = participants.findIndex(p => p.id === a.id); const indexB = participants.findIndex(p => p.id === b.id); return indexA - indexB; } return b.initiative - a.initiative; });
     }
   }
-
-
-  const displayStyles = campaignBackgroundUrl ? {
-    backgroundImage: `url(${campaignBackgroundUrl})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center center',
-    backgroundRepeat: 'no-repeat',
-    minHeight: '100vh' 
-  } : { minHeight: '100vh' };
-
-
+  const displayStyles = campaignBackgroundUrl ? { backgroundImage: `url(${campaignBackgroundUrl})`, backgroundSize: 'cover', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat', minHeight: '100vh' } : { minHeight: '100vh' };
   return (
-    <div 
-        className={`p-4 md:p-8 rounded-xl shadow-2xl ${!campaignBackgroundUrl ? 'bg-slate-900' : ''}`}
-        style={displayStyles}
-    >
+    <div className={`p-4 md:p-8 rounded-xl shadow-2xl ${!campaignBackgroundUrl ? 'bg-slate-900' : ''}`} style={displayStyles}>
       <div className={campaignBackgroundUrl ? 'bg-slate-900 bg-opacity-75 p-4 md:p-6 rounded-lg' : ''}> 
         <h2 className="text-4xl md:text-5xl font-bold text-center text-amber-400 mb-2">{name}</h2>
-        {isStarted && <p className="text-2xl text-center text-sky-300 mb-6">Round: {round}</p>}
+        {isStarted && <p className="text-2xl text-center text-sky-300 mb-1">Round: {round}</p>}
+        {isStarted && isPaused && <p className="text-xl text-center text-yellow-400 mb-4 font-semibold">(Combat Paused)</p>}
         {!isStarted && participants?.length > 0 && <p className="text-2xl text-center text-slate-400 mb-6">Awaiting Start</p>}
         {!isStarted && (!participants || participants.length === 0) && <p className="text-2xl text-slate-500 mb-6">No participants.</p>}
         {participantsToRender.length === 0 && isStarted && <p className="text-xl text-slate-400">No active participants.</p>}
-        
         <div className="space-y-4 max-w-3xl mx-auto"> 
           {participantsToRender.map(p => (
-            <div 
-              key={p.id} 
-              className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${p.id === currentTurnParticipantId && isStarted ? 'bg-green-700 ring-4 ring-green-400 scale-105' : (p.type === 'character' ? 'bg-sky-700' : 'bg-red-700')} ${!p.isActive ? 'opacity-40 grayscale' : ''}`}
-            >
+            <div key={p.id} className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${p.id === currentTurnParticipantId && isStarted && !isPaused ? 'bg-green-700 ring-4 ring-green-400 scale-105' : (p.type === 'character' ? 'bg-sky-700' : 'bg-red-700')} ${!p.isActive ? 'opacity-40 grayscale' : ''} ${isPaused && p.id === currentTurnParticipantId ? 'ring-2 ring-yellow-400' : ''}`}>
               <div className="flex justify-between items-center mb-2">
-                <h3 className={`text-2xl md:text-3xl font-bold ${p.id === currentTurnParticipantId && isStarted ? 'text-white' : (p.type === 'character' ? 'text-sky-100' : 'text-red-100')}`}>{p.name}{p.id === currentTurnParticipantId && isStarted && <span className="text-yellow-300 animate-pulse ml-2">(Current)</span>}</h3>
-                <span className={`text-xl md:text-2xl font-semibold ${p.id === currentTurnParticipantId && isStarted ? 'text-green-200' : 'text-slate-200'}`}>Init: {p.initiative}</span>
+                <h3 className={`text-2xl md:text-3xl font-bold ${p.id === currentTurnParticipantId && isStarted && !isPaused ? 'text-white' : (p.type === 'character' ? 'text-sky-100' : 'text-red-100')}`}>{p.name}{p.id === currentTurnParticipantId && isStarted && !isPaused && <span className="text-yellow-300 animate-pulse ml-2">(Current)</span>}</h3>
+                <span className={`text-xl md:text-2xl font-semibold ${p.id === currentTurnParticipantId && isStarted && !isPaused ? 'text-green-200' : 'text-slate-200'}`}>Init: {p.initiative}</span>
               </div>
               <div className="flex justify-between items-center">
                 <div className="w-full bg-slate-600 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-slate-500">
                   <div className={`h-full rounded-full transition-all ${p.currentHp <= p.maxHp / 4 ? 'bg-red-500' : (p.currentHp <= p.maxHp / 2 ? 'bg-yellow-500' : 'bg-green-500')}`} style={{ width: `${Math.max(0, (p.currentHp / p.maxHp) * 100)}%` }}></div>
-                  {p.type !== 'monster' && ( 
-                      <span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white px-2">
-                      HP: {p.currentHp} / {p.maxHp}
-                      </span>
-                  )}
+                  {p.type !== 'monster' && ( <span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white px-2">HP: {p.currentHp} / {p.maxHp}</span>)}
                 </div>
               </div>
               {p.conditions?.length > 0 && <p className="text-sm text-yellow-300 mt-2">Conditions: {p.conditions.join(', ')}</p>}
               {!p.isActive && <p className="text-center text-lg font-semibold text-slate-300 mt-2">(Inactive)</p>}
-            </div>
-          ))}
+            </div>))}
         </div>
       </div>
-    </div>
-  );
+    </div>);
 }
 
-// --- Modal Component --- (Standard modal for forms, etc.)
 function Modal({ onClose, title, children }) {
   useEffect(() => {
     const handleEsc = (event) => { if (event.key === 'Escape') onClose(); };
@@ -1257,8 +884,6 @@ function Modal({ onClose, title, children }) {
 }
 
 // --- Icons ---
-const PlayIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>;
-const SkipForwardIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>;
-const StopCircleIcon = ({size=24, className=''}) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>;
+// PlayIcon, SkipForwardIcon, StopCircleIcon are now imported from lucide-react at the top
 
 export default App;