From d79c3d0cb602f48c4701e46722d7c1855230b556 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 21:50:34 +0000
Subject: [PATCH 1/3] Initial plan


From 17e3c34f1834e853351b94fc81850078b287c4d8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 21:57:14 +0000
Subject: [PATCH 2/3] Add game mode selection and update timer system to
 2-minute cumulative

Co-authored-by: CodeKunalTomar <111980003+CodeKunalTomar@users.noreply.github.com>
---
 Connect-4.css | 108 +++++++++++++++++----
 Connect-4.js  |  18 ++++
 index.html    |  29 +++++-
 index.js      | 262 ++++++++++++++++++++++++++++++++++++++------------
 4 files changed, 328 insertions(+), 89 deletions(-)

diff --git a/Connect-4.css b/Connect-4.css
index 8a160f2..03d20de 100644
--- a/Connect-4.css
+++ b/Connect-4.css
@@ -55,51 +55,117 @@ h2 {
     border-radius: 8px;
 }
 
+/* Setup Panel - Mode Selection */
+.setup-panel h2 {
+    margin-bottom: 12px;
+    text-align: center;
+}
+
+.mode-select {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 0;
+}
+
+.mode-btn {
+    flex: 1;
+    padding: 15px 10px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 2px solid #666;
+    border-radius: 8px;
+    color: #ccc;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+    font-family: "Doppio One", sans-serif;
+    font-size: 14px;
+}
+
+.mode-btn:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: #999;
+}
+
+.mode-btn.selected {
+    background-color: #593f6b;
+    border-color: #fff;
+    color: #fff;
+}
+
+.mode-btn .icon {
+    font-size: 24px;
+    display: block;
+    margin-bottom: 5px;
+}
+
+.mode-btn:focus {
+    outline: none;
+}
+
 /* Timer Panel */
 .timer-panel {
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    padding: 15px;
+    gap: 8px;
+    padding: 12px;
 }
 
 .timer {
-    padding: 15px;
+    padding: 12px;
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 8px;
-    font-family: "Doppio One", monospace;
-    text-align: center;
     border: 2px solid transparent;
     transition: all 0.3s ease;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.timer-label {
+    font-size: 14px;
+    color: #aaa;
+    font-family: "Doppio One", sans-serif;
+}
+
+.timer-value {
+    font-size: 24px;
+    font-family: "Courier New", monospace;
+    color: #fff;
+    font-weight: bold;
 }
 
 .timer.active {
     border-color: #4CAF50;
-    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
-    background-color: rgba(76, 175, 80, 0.2);
+    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
+    background-color: rgba(76, 175, 80, 0.15);
+}
+
+.timer.active .timer-label {
+    color: #4CAF50;
 }
 
 .timer.warning {
-    border-color: #f44336;
-    background-color: rgba(244, 67, 54, 0.2);
-    animation: pulse 1s infinite;
+    border-color: #ff9800;
+    background-color: rgba(255, 152, 0, 0.15);
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.6; }
+.timer.warning .timer-value {
+    color: #ff9800;
 }
 
-.timer-label {
-    font-size: 14px;
-    color: #aaa;
-    margin-bottom: 5px;
+.timer.critical {
+    border-color: #f44336;
+    background-color: rgba(244, 67, 54, 0.15);
+    animation: pulse-critical 0.5s infinite;
 }
 
-.timer-value {
-    font-size: 32px;
-    color: #fff;
-    font-weight: bold;
+.timer.critical .timer-value {
+    color: #f44336;
+}
+
+@keyframes pulse-critical {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
 }
 
 /* Start Panel */
diff --git a/Connect-4.js b/Connect-4.js
index 78ab459..d03b83d 100644
--- a/Connect-4.js
+++ b/Connect-4.js
@@ -308,6 +308,9 @@ self.addEventListener('message', function(e) {
         case 'human-move':
             makeHumanMove(e.data.col);
             break;
+        case 'player2-move':
+            makePlayer2Move(e.data.col);
+            break;
         case 'computer-move':
             makeComputerMove(e.data.maxDepth);
             break;
@@ -340,6 +343,21 @@ function makeHumanMove(col) {
     });
 }
 
+function makePlayer2Move(col) {
+    // coords is undefined if the move is invalid (column is full)
+    const coords = currentGameState.makeMove(2, col);
+    const isWin = currentGameState.isWin();
+    const winningChips = currentGameState.winningChips;
+    const isBoardFull = currentGameState.isBoardFull();
+    self.postMessage({
+        messageType: 'player2-move-done',
+        coords: coords,
+        isWin: isWin,
+        winningChips: winningChips,
+        isBoardFull: isBoardFull
+    });
+}
+
 function makeComputerMove(maxDepth) {
     let col;
     let isWinImminent = false;
diff --git a/index.html b/index.html
index f33cf02..9a5ca68 100644
--- a/index.html
+++ b/index.html
@@ -11,19 +11,38 @@
         <div class = "content">
             <div class = "sidebar">
                 <h1>Connect-4</h1>
-                <div class = "panel timer-panel">
-                    <div class = "timer" id = "player-timer">
+                
+                <!-- Timer Panel (shown during game) -->
+                <div class = "panel timer-panel" style="display: none;">
+                    <div class = "timer timer-p1" id = "player-timer">
                         <div class = "timer-label">YOU</div>
-                        <div class = "timer-value">5:00</div>
+                        <div class = "timer-value">2:00</div>
                     </div>
-                    <div class = "timer" id = "ai-timer">
+                    <div class = "timer timer-p2" id = "ai-timer">
                         <div class = "timer-label">AI</div>
-                        <div class = "timer-value">5:00</div>
+                        <div class = "timer-value">2:00</div>
                     </div>
                 </div>
+                
+                <!-- Game Setup Panel (shown before game) -->
+                <div class = "panel setup-panel">
+                    <h2>Game Mode</h2>
+                    <div class = "mode-select">
+                        <button class = "mode-btn selected" data-mode="ai">
+                            <span class = "icon">🤖</span>
+                            <span>VS AI</span>
+                        </button>
+                        <button class = "mode-btn" data-mode="2player">
+                            <span class = "icon">👥</span>
+                            <span>2 Player</span>
+                        </button>
+                    </div>
+                </div>
+                
                 <div class = "panel start-panel">
                     <button class = "start-button"> Start Game </button>
                 </div>
+                
                 <div class = "panel info">
                     <h2></h2>
                     <div class = "blurb"></div>
diff --git a/index.js b/index.js
index f2c2319..e2ffb67 100644
--- a/index.js
+++ b/index.js
@@ -1,37 +1,57 @@
 // constants
 const WEB_WORKER_URL = 'Connect-4.js';
 const BLURBS = {
-    'start': {
+    'start-ai': {
         header: 'Elite AI Challenge',
-        blurb: 'Challenge the AI. Can you be among the 20% who win?'
+        blurb: 'Challenge the Elite AI. Can you be among the 20% who win?'
+    },
+    'start-2player': {
+        header: 'Two Player Mode',
+        blurb: 'Two minds, one board. May the best strategist win!'
     },
     'p1-turn': {
         header: 'Your Turn',
-        blurb: 'Your move. The clock is ticking...'
+        blurb: 'Your move. Clock is ticking...'
+    },
+    'p1-turn-2player': {
+        header: 'Player 1\'s Turn',
+        blurb: 'Your move. Clock is ticking...'
     },
     'p2-turn': {
         header: 'AI\'s Turn',
-        blurb: 'AI is calculating the optimal counter...'
+        blurb: 'AI is calculating...'
+    },
+    'p2-turn-2player': {
+        header: 'Player 2\'s Turn',
+        blurb: 'Your move. Clock is ticking...'
     },
     'p1-win': {
         header: 'You Win!',
-        blurb: 'Incredible! You\'ve defeated the AI! 🏆'
+        blurb: '🏆 Incredible! You defeated the AI!'
+    },
+    'p1-win-2player': {
+        header: 'Player 1 Wins!',
+        blurb: '🏆 Player 1 wins!'
     },
     'p2-win': {
         header: 'AI Wins',
-        blurb: 'The AI wins this round. Analyze and try again!'
+        blurb: 'The AI wins. Analyze and try again!'
+    },
+    'p2-win-2player': {
+        header: 'Player 2 Wins!',
+        blurb: '🏆 Player 2 wins!'
     },
     'tie': {
         header: 'Draw',
-        blurb: 'A draw! You held your ground against the AI.'
+        blurb: 'It\'s a draw!'
     },
-    'timeout-player': {
+    'timeout-p1': {
         header: 'Time\'s Up!',
-        blurb: 'Time\'s up! The AI wins by timeout.'
+        blurb: '⏱️ Time\'s up! Player 1 ran out of time.'
     },
-    'timeout-ai': {
-        header: 'You Win!',
-        blurb: 'AI ran out of time! You win! 🏆'
+    'timeout-p2': {
+        header: 'Time\'s Up!',
+        blurb: '⏱️ Time\'s up! Player 2 ran out of time.'
     }
 };
 const OUTLOOKS = {
@@ -40,23 +60,31 @@ const OUTLOOKS = {
 };
 
 // Timer constants
-const INITIAL_TIME = 300; // 5 minutes in seconds
-const TIME_INCREMENT = 5; // 5 seconds increment
-const WARNING_THRESHOLD = 30; // Show warning below 30 seconds
+const TOTAL_TIME = 120; // 2 minutes in seconds
+const WARNING_TIME = 30; // Yellow/orange warning
+const CRITICAL_TIME = 10; // Red critical warning
 
 // global variables
 const worker = new Worker(WEB_WORKER_URL);
-let playerTime = INITIAL_TIME;
-let aiTime = INITIAL_TIME;
+let player1Time = TOTAL_TIME;
+let player2Time = TOTAL_TIME;
 let timerInterval = null;
-let activeTimer = null; // 'player' or 'ai'
+let activeTimer = null; // 1, 2, or null
 let gameInProgress = false;
+let gameMode = 'ai'; // 'ai' or '2player'
 
 // document ready
 $(function() {
+    // Mode selection handlers
+    $('.mode-btn').on('click', function() {
+        $('.mode-btn').removeClass('selected');
+        $(this).addClass('selected');
+        gameMode = $(this).data('mode');
+        updateStartBlurb();
+    });
+    
     $('.start-button').on('click', startGame);
-    setBlurb('start');
-    setOutlook();
+    updateStartBlurb();
     updateTimerDisplay();
 
     worker.addEventListener('message', function(e) {
@@ -67,6 +95,9 @@ $(function() {
             case 'human-move-done':
                 endHumanTurn(e.data.coords, e.data.isWin, e.data.winningChips, e.data.isBoardFull);
                 break;
+            case 'player2-move-done':
+                endPlayer2Turn(e.data.coords, e.data.isWin, e.data.winningChips, e.data.isBoardFull);
+                break;
             case 'progress':
                 updateComputerTurn(e.data.col);
                 break;
@@ -78,6 +109,14 @@ $(function() {
     }, false);
 });
 
+function updateStartBlurb() {
+    if (gameMode === 'ai') {
+        setBlurb('start-ai');
+    } else {
+        setBlurb('start-2player');
+    }
+}
+
 // Timer functions
 function formatTime(seconds) {
     const mins = Math.floor(seconds / 60);
@@ -86,41 +125,64 @@ function formatTime(seconds) {
 }
 
 function updateTimerDisplay() {
-    const $playerTimer = $('#player-timer');
-    const $aiTimer = $('#ai-timer');
+    const $player1Timer = $('.timer-p1');
+    const $player2Timer = $('.timer-p2');
+    
+    // Update labels based on game mode
+    if (gameMode === 'ai') {
+        $player1Timer.find('.timer-label').text('YOU');
+        $player2Timer.find('.timer-label').text('AI');
+    } else {
+        $player1Timer.find('.timer-label').text('PLAYER 1');
+        $player2Timer.find('.timer-label').text('PLAYER 2');
+    }
     
     // Update timer values
-    $playerTimer.find('.timer-value').text(formatTime(playerTime));
-    $aiTimer.find('.timer-value').text(formatTime(aiTime));
+    $player1Timer.find('.timer-value').text(formatTime(player1Time));
+    $player2Timer.find('.timer-value').text(formatTime(player2Time));
     
     // Update active state
-    $playerTimer.toggleClass('active', activeTimer === 'player');
-    $aiTimer.toggleClass('active', activeTimer === 'ai');
+    $player1Timer.toggleClass('active', activeTimer === 1);
+    $player2Timer.toggleClass('active', activeTimer === 2);
     
-    // Update warning state
-    $playerTimer.toggleClass('warning', playerTime > 0 && playerTime < WARNING_THRESHOLD);
-    $aiTimer.toggleClass('warning', aiTime > 0 && aiTime < WARNING_THRESHOLD);
+    // Update warning and critical states for Player 1
+    $player1Timer.removeClass('warning critical');
+    if (player1Time > 0 && player1Time <= CRITICAL_TIME) {
+        $player1Timer.addClass('critical');
+    } else if (player1Time > 0 && player1Time <= WARNING_TIME) {
+        $player1Timer.addClass('warning');
+    }
+    
+    // Update warning and critical states for Player 2
+    $player2Timer.removeClass('warning critical');
+    if (player2Time > 0 && player2Time <= CRITICAL_TIME) {
+        $player2Timer.addClass('critical');
+    } else if (player2Time > 0 && player2Time <= WARNING_TIME) {
+        $player2Timer.addClass('warning');
+    }
 }
 
-function startTimer(who) {
+function startTimer(player) {
     stopTimer();
-    activeTimer = who;
+    activeTimer = player;
     updateTimerDisplay();
     
     timerInterval = setInterval(() => {
-        if (activeTimer === 'player') {
-            playerTime--;
-            if (playerTime <= 0) {
-                playerTime = 0;
+        if (activeTimer === 1) {
+            player1Time--;
+            if (player1Time <= 0) {
+                player1Time = 0;
                 stopTimer();
-                endGame('timeout-player');
+                endGame('timeout-p1');
+                return;
             }
-        } else if (activeTimer === 'ai') {
-            aiTime--;
-            if (aiTime <= 0) {
-                aiTime = 0;
+        } else if (activeTimer === 2) {
+            player2Time--;
+            if (player2Time <= 0) {
+                player2Time = 0;
                 stopTimer();
-                endGame('timeout-ai');
+                endGame('timeout-p2');
+                return;
             }
         }
         updateTimerDisplay();
@@ -136,12 +198,11 @@ function stopTimer() {
     updateTimerDisplay();
 }
 
-function addIncrement(who) {
-    if (who === 'player') {
-        playerTime += TIME_INCREMENT;
-    } else if (who === 'ai') {
-        aiTime += TIME_INCREMENT;
-    }
+function resetTimers() {
+    stopTimer();
+    player1Time = TOTAL_TIME;
+    player2Time = TOTAL_TIME;
+    activeTimer = null;
     updateTimerDisplay();
 }
 function setBlurb(key) {
@@ -162,10 +223,11 @@ function setOutlook(key) {
 
 function startGame() {
     // Reset timers
-    playerTime = INITIAL_TIME;
-    aiTime = INITIAL_TIME;
-    stopTimer();
-    updateTimerDisplay();
+    resetTimers();
+    
+    // Show timer panel, hide setup panel
+    $('.timer-panel').show();
+    $('.setup-panel').hide();
     
     $('.start-panel').addClass('freeze');
     $('.lit-cells, .chips').empty();
@@ -177,11 +239,15 @@ function startGame() {
 }
 
 function startHumanTurn() {
-    setBlurb('p1-turn');
+    if (gameMode === 'ai') {
+        setBlurb('p1-turn');
+    } else {
+        setBlurb('p1-turn-2player');
+    }
     $('.click-columns div').addClass('hover');
     
-    // Start player timer
-    startTimer('player');
+    // Start player 1 timer
+    startTimer(1);
 
     // if mouse is already over a column, show cursor chip there
     const col = $('.click-columns div:hover').index();
@@ -220,18 +286,25 @@ function endHumanTurn(coords, isWin, winningChips, isBoardFull) {
         // column was full, human goes again
         startHumanTurn();
     } else {
-        // Stop player timer and add increment
+        // Stop player 1 timer (no increment in cumulative timer mode)
         stopTimer();
-        addIncrement('player');
         
         dropCursorChip(coords.row, function() {
             if(isWin) {
-                endGame('p1-win', winningChips);
+                if (gameMode === 'ai') {
+                    endGame('p1-win', winningChips);
+                } else {
+                    endGame('p1-win-2player', winningChips);
+                }
             } else if(isBoardFull) {
                 endGame('tie');
             } else {
-                // pass turn to computer
-                startComputerTurn();
+                // pass turn to player 2 or computer
+                if (gameMode === 'ai') {
+                    startComputerTurn();
+                } else {
+                    startPlayer2Turn();
+                }
             }
         });
     }
@@ -244,9 +317,9 @@ function startComputerTurn() {
     createCursorChip(2, 0);
     
     // Start AI timer
-    startTimer('ai');
+    startTimer(2);
 
-    const maxDepth = 9; // Fixed high depth for elite AI (was user-selectable)
+    const maxDepth = 9; // Fixed high depth for elite AI
     worker.postMessage({
         messageType: 'computer-move',
         maxDepth: maxDepth
@@ -258,9 +331,8 @@ function updateComputerTurn(col) {
 }
 
 function endComputerTurn(coords, isWin, winningChips, isBoardFull, isWinImminent, isLossImminent) {
-    // Stop AI timer and add increment
+    // Stop AI timer (no increment in cumulative timer mode)
     stopTimer();
-    addIncrement('ai');
     
     moveCursorChip(coords.col, function() {
         dropCursorChip(coords.row, function() {
@@ -284,10 +356,74 @@ function endComputerTurn(coords, isWin, winningChips, isBoardFull, isWinImminent
     });
 }
 
+function startPlayer2Turn() {
+    setBlurb('p2-turn-2player');
+    $('.click-columns div').addClass('hover');
+    
+    // Start player 2 timer
+    startTimer(2);
+
+    // if mouse is already over a column, show cursor chip there
+    const col = $('.click-columns div:hover').index();
+    if(col !== -1) {
+        createCursorChip(2, col);
+    }
+
+    $('.click-columns')
+        .on('mouseenter', function() {
+            const col = $('.click-columns div:hover').index();
+            createCursorChip(2, col);
+        })
+        .on('mouseleave', function() {
+            destroyCursorChip();
+        });
+
+    $('.click-columns div')
+        .on('mouseenter', function() {
+            const col = $(this).index();
+            moveCursorChip(col);
+        })
+        .on('click', function() {
+            $('.click-columns, .click-columns div').off();
+
+            const col = $(this).index();
+            worker.postMessage({
+                messageType: 'player2-move',
+                col: col
+            });
+        });
+}
+
+function endPlayer2Turn(coords, isWin, winningChips, isBoardFull) {
+    $('.click-columns div').removeClass('hover');
+    if(!coords) {
+        // column was full, player 2 goes again
+        startPlayer2Turn();
+    } else {
+        // Stop player 2 timer (no increment in cumulative timer mode)
+        stopTimer();
+        
+        dropCursorChip(coords.row, function() {
+            if(isWin) {
+                endGame('p2-win-2player', winningChips);
+            } else if(isBoardFull) {
+                endGame('tie');
+            } else {
+                // pass turn back to player 1
+                startHumanTurn();
+            }
+        });
+    }
+}
+
 function endGame(blurbKey, winningChips) {
     stopTimer();
     gameInProgress = false;
     
+    // Show setup panel again, hide timer panel
+    $('.timer-panel').hide();
+    $('.setup-panel').show();
+    
     $('.start-panel').removeClass('freeze');
     setBlurb(blurbKey);
     setOutlook();

From 31186723afd001ab43619dbac13dda88958c37c8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 22:03:24 +0000
Subject: [PATCH 3/3] Add mode-specific messages and update README
 documentation

Co-authored-by: CodeKunalTomar <111980003+CodeKunalTomar@users.noreply.github.com>
---
 README.md | 79 +++++++++++++++++++++++++++++++------------------------
 index.js  | 22 ++++++++++++----
 2 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index af5e239..dc372c9 100644
--- a/README.md
+++ b/README.md
@@ -18,15 +18,16 @@
 ---
 ## I. Abstract
 
-OptiConnect is a challenging, browser-based Connect-4 experience featuring a **single elite AI opponent** and **chess-style countdown timers**. This game combines sophisticated AI algorithms with time pressure to create an engaging, competitive experience that tests both strategic thinking and decision-making under time constraints.
+OptiConnect is a challenging, browser-based Connect-4 experience featuring **two game modes** (VS AI and Two-Player) with **chess-style cumulative timers**. This game combines sophisticated AI algorithms with time pressure to create an engaging, competitive experience that tests both strategic thinking and decision-making under time constraints.
 
 The game features:
+- **Two Game Modes**: Challenge the Elite AI or play against a friend locally with Two-Player mode
 - **Elite AI Opponent**: A powerful AI using depth-9 minimax search with alpha-beta pruning, transposition tables, and positional heuristics - designed to win approximately 80% of games against human players
-- **Chess-Style Timers**: Each player starts with 5 minutes and gains a 5-second increment after each move, creating urgency and excitement
+- **Chess-Style Cumulative Timers**: Each player starts with 2 minutes total time that counts down during their turns, creating intense time pressure
 - **Non-Blocking Architecture**: All AI computation runs in a Web Worker thread, ensuring smooth 60fps UI performance
 - **Advanced Optimizations**: Bitboard representation, Zobrist hashing, center-column move ordering, and opening book
 
-The AI is calibrated to be challenging yet beatable, encouraging players to improve their analytical skills through repeated play. Can you be among the 20% who defeat the elite AI?
+In VS AI mode, the AI is calibrated to be challenging yet beatable, encouraging players to improve their analytical skills through repeated play. Can you be among the 20% who defeat the elite AI?
 
 ---
 ## II. Local Deployment Protocol
@@ -83,18 +84,19 @@ The key architectural upgrade is the role of `index.js` as an intermediary that
 
 | Component          | Role                                                                                                                                                                                                                                                             |
 | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`index.html`** | Provides the Document Object Model (DOM) structure, timer displays, Start Game button, and the primary game interface. It serves as the static entry point for the application.                                          |
-| **`Connect-4.css`** | Governs the responsive layout using modern CSS properties, manages all chip and board animations via keyframes and transitions, styles the timer displays with active/warning states, and defines an accessible, high-contrast color scheme.                                            |
-| **`Connect-4.js`** | **(Web Worker Context)** Contains the pure, stateful logic of the game engine. This includes the board data structures, the elite AI implementation with depth-9 minimax search, win/tie detection algorithms, position evaluation, move ordering, and opening book. It runs entirely off the main thread. |
-| **`index.js`** | **(Main Thread Controller)** Acts as the application's central nervous system. It handles all user input events, manages timer state and countdown logic, controls game state transitions, spawns and communicates with the AI Worker via the `postMessage`/`onmessage` API, and updates the UI. |
+| **`index.html`** | Provides the Document Object Model (DOM) structure, game mode selection (VS AI / Two-Player), timer displays, Start Game button, and the primary game interface. It serves as the static entry point for the application.                                          |
+| **`Connect-4.css`** | Governs the responsive layout using modern CSS properties, manages all chip and board animations via keyframes and transitions, styles the game mode selection and timer displays with active/warning/critical states, and defines an accessible, high-contrast color scheme.                                            |
+| **`Connect-4.js`** | **(Web Worker Context)** Contains the pure, stateful logic of the game engine. This includes the board data structures, the elite AI implementation with depth-9 minimax search, win/tie detection algorithms, position evaluation, move ordering, and opening book. It runs entirely off the main thread and handles both human and AI moves. |
+| **`index.js`** | **(Main Thread Controller)** Acts as the application's central nervous system. It handles game mode selection, all user input events, manages timer state and countdown logic, controls game state transitions, spawns and communicates with the AI Worker via the `postMessage`/`onmessage` API, and updates the UI. |
 
 ### Key Features:
+-   **Two Game Modes**: VS AI (Human vs Elite AI) and Two-Player (local multiplayer on same device)
 -   **Elite AI**: Fixed depth-9 minimax search with alpha-beta pruning, transposition tables, center-column move ordering, opening book, and positional heuristics for an ~80% win rate
--   **Chess-Style Timers**: 5-minute initial time with 5-second increment per move, creating time pressure and urgency
--   **Timer States**: Active highlighting (green glow), warning state (red with pulse animation when <30 seconds), and timeout detection
+-   **Chess-Style Cumulative Timers**: 2-minute total time per player that counts down only during their turns (no increment)
+-   **Timer States**: Active highlighting (green glow), warning state (orange at ≤30 seconds), critical state (red with fast pulse at ≤10 seconds), and timeout detection
 -   **Concurrency Management:** Spawns and manages a dedicated Web Worker, isolating all computationally intensive AI logic to a separate thread
 -   **Non-Blocking UI:** Decouples UI event handling from AI calculation, guaranteeing 60fps experience even during deep search
--   **State Machine Implementation:** Cleanly manages UI and timer state transitions for all playable events
+-   **State Machine Implementation:** Cleanly manages UI and timer state transitions for all playable events including mode selection
 -   **Animation Orchestration:** Handles triggering of CSS animations and board updates while properly pausing timers during animations
 
 ---
@@ -113,38 +115,44 @@ The AI is designed to be highly challenging, winning approximately 80% of games
 - **Iterative Deepening**: Searches progressively deeper, using best moves from shallower searches to improve move ordering
 
 ### Timer System:
-- **Initial Time**: 5 minutes (300 seconds) per player
-- **Increment**: +5 seconds added after each move (Fischer-style)
-- **Warning Threshold**: Timer turns red and pulses when below 30 seconds
+- **Initial Time**: 2 minutes (120 seconds) per player
+- **Cumulative Timer**: Time counts down only during your turn, stops when opponent's turn begins (no increment)
+- **Warning Threshold**: Timer turns orange when below 30 seconds
+- **Critical Threshold**: Timer turns red and pulses rapidly when below 10 seconds
 - **Timeout Detection**: Game ends immediately if either player's time reaches zero
 - **Pause on Animation**: Timers automatically pause during chip drop animations and game-over state
 
+### Game Modes:
+- **VS AI Mode**: Human (Player 1 - Red) plays against the Elite AI (Player 2 - Yellow). Human always moves first. AI uses depth-9 search for challenging gameplay.
+- **Two-Player Mode**: Local multiplayer where two players share the same device. Player 1 (Red) vs Player 2 (Yellow). Player 1 always moves first.
+
 ### Protocol Example (`index.js` orchestrates):
 ```javascript
-// 1. Game starts - reset timers to 5:00 each
-startGame() → playerTime = 300, aiTime = 300
+// 1. Player selects mode (VS AI or Two-Player) and clicks Start Game
+// Game starts - reset timers to 2:00 each
+startGame() → player1Time = 120, player2Time = 120
 
-// 2. Player's turn begins - start player timer
-startHumanTurn() → startTimer('player')
+// 2. Player 1's turn begins - start player 1 timer
+startHumanTurn() → startTimer(1)
 
-// 3. Player makes move - stop timer, add 5s increment, drop chip
+// 3. Player 1 makes move - stop timer, drop chip
 worker.postMessage({ messageType: 'human-move', col: columnIndex });
-→ stopTimer() → addIncrement('player') → playerTime += 5
+→ stopTimer() // Timer preserves remaining time
 
-// 4. AI's turn begins - start AI timer with elite search depth
-startComputerTurn() → startTimer('ai')
+// 4a. In VS AI Mode - AI's turn begins
+startComputerTurn() → startTimer(2)
 → worker.postMessage({ messageType: 'computer-move', maxDepth: 9 });
 
-// 5. AI completes move - stop timer, add 5s increment
-worker.addEventListener('message', function(e) {
-    if (e.data.messageType === 'computer-move-done') {
-        stopTimer() → addIncrement('ai') → aiTime += 5
-    }
-});
+// 4b. In Two-Player Mode - Player 2's turn begins
+startPlayer2Turn() → startTimer(2)
+→ worker.postMessage({ messageType: 'player2-move', col: columnIndex });
+
+// 5. Move completes - stop timer
+stopTimer() // Timer preserves remaining time
 
 // 6. Timer hits zero - game ends immediately
-if (playerTime <= 0) → endGame('timeout-player')
-if (aiTime <= 0) → endGame('timeout-ai')
+if (player1Time <= 0) → endGame('timeout-p1')
+if (player2Time <= 0) → endGame('timeout-p2')
 ```
 
 ---
@@ -152,12 +160,13 @@ if (aiTime <= 0) → endGame('timeout-ai')
 
 | Feature               | Implementation Detail                                      | Technical Implication                                                                                                                                                                         |
 | --------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Game Modes** | VS AI (Human vs Elite AI) and Two-Player (local multiplayer)    | Flexible gameplay that accommodates solo challenge against AI or local competitive play between two humans. Both modes use the same timer system and game rules. |
 | **Game Board** | 7x7 grid (a deliberate deviation from the standard 6x7)    | Enlarges the state space and branching factor, presenting a unique and more complex challenge for the AI and altering the lines of play established in solved-game theory for the 6x7 board. |
 | **Victory Condition** | Formation of a contiguous line of four tokens (horizontal, vertical, or diagonal) | Evaluated via efficient bitboard operations that check win conditions in O(1) time per move using bitwise AND operations.             |
-| **Elite AI Opponent** | Fixed depth-9 minimax with advanced optimizations                       | Provides a highly challenging opponent with ~80% win rate, encouraging repeated play and skill development. Uses alpha-beta pruning, transposition tables, and positional heuristics.                                     |
-| **Chess-Style Timers** | 5:00 initial + 5s increment per move         | Creates time pressure and urgency. Timers highlight active player (green glow), show warning when low (red pulse), and end game on timeout. Pauses during animations.                                                              |
+| **Elite AI Opponent** | Fixed depth-9 minimax with advanced optimizations                       | Provides a highly challenging opponent with ~80% win rate in VS AI mode, encouraging repeated play and skill development. Uses alpha-beta pruning, transposition tables, and positional heuristics.                                     |
+| **Chess-Style Cumulative Timers** | 2:00 total time per player (counts down during turn)         | Creates intense time pressure with no time back. Timers show active player (green glow), warning at ≤30s (orange), critical at ≤10s (red pulse), and end game on timeout. Pauses during animations.                                                              |
 | **Move Validation** | Gravity-based column check and overflow prevention         | Guarantees strict rule compliance and ensures the integrity of the game state by rejecting invalid moves before they are processed.                                                              |
-| **Visual Feedback** | CSS/JS-driven hover, drop, winning-line highlights, and timer states | Delivers real-time, responsive user interactions with clear visual cues about game state, time pressure, and potential moves.                                                   |
+| **Visual Feedback** | CSS/JS-driven mode selection, hover, drop, winning-line highlights, and timer states | Delivers real-time, responsive user interactions with clear visual cues about game mode, game state, time pressure, and potential moves.                                                   |
 
 ---
 ## VII. Performance & Benchmarking
@@ -191,9 +200,9 @@ This implementation now includes three major algorithmic optimizations that sign
 ---
 ## VIII. Historical & Educational Context
 -   **Academic Tradition:** This project continues the legacy of **Allis, Allen, and Tromp**, who established Connect-4 as a canonical problem for studying adversarial search, perfect play, and computational benchmarking.
--   **Modern Twist:** While maintaining academic rigor, OptiConnect adds a competitive gaming layer with a challenging elite AI and chess-style time pressure, making it both educational and engaging.
+-   **Modern Twist:** While maintaining academic rigor, OptiConnect adds a competitive gaming layer with two game modes (VS AI and Two-Player) and chess-style cumulative time pressure, making it both educational and engaging.
 -   **Pedagogical Platform:** Demonstrates classical adversarial search (Minimax with Alpha-Beta pruning), modern web architecture, advanced optimization techniques (bitboards, transposition tables, Zobrist hashing), and real-time timer management. Provides a clear example of **concurrency, Web Workers, asynchronous event handling, bit manipulation, position caching, and separation of concerns** in application design.
--   **Game Design Philosophy:** The fixed elite AI (no difficulty selection) and timer system create a pure competitive experience that encourages skill development, similar to chess training against a strong engine with time controls.
+-   **Game Design Philosophy:** The two game modes with cumulative timers create both competitive and casual play experiences. VS AI mode offers a pure competitive challenge against a strong engine, while Two-Player mode enables local multiplayer fun with the same time pressure mechanics.
 
 ---
 ## IX. Roadmap
@@ -202,7 +211,7 @@ This implementation now includes three major algorithmic optimizations that sign
 | ----------------------------- | ---------------------------------------- | ----------- |
 | **Foundation** | True Web Worker concurrency, modular `index.js` controller                        | ✅ **Complete** |
 | **Algorithmic Optimization** | Alpha-beta pruning, bitboard representation, transposition table with Zobrist hashing | ✅ **Complete** |
-| **Elite AI & Timers** | Fixed depth-9 elite AI, chess-style timers (5:00 + 5s increment), remove difficulty selection | ✅ **Complete** |
+| **Game Modes & Timers** | Two game modes (VS AI, Two-Player), fixed depth-9 elite AI, chess-style cumulative timers (2:00 per player) | ✅ **Complete** |
 | **AI Extension** | Integrate endgame tablebases, develop NN/MCTS hybrid agents                       | 📝 **Planned** |
 | **Feature Expansion** | Implement networked multiplayer, develop an adaptive benchmarking suite           | 📝 **Planned** |
 | **Research Platform** | Design a plug-and-play AI module interface, add an analytics dashboard            | 📝 **Planned** |
diff --git a/index.js b/index.js
index e2ffb67..3a395d0 100644
--- a/index.js
+++ b/index.js
@@ -45,11 +45,19 @@ const BLURBS = {
         header: 'Draw',
         blurb: 'It\'s a draw!'
     },
-    'timeout-p1': {
+    'timeout-p1-ai': {
+        header: 'Time\'s Up!',
+        blurb: '⏱️ Time\'s up! You ran out of time.'
+    },
+    'timeout-p2-ai': {
+        header: 'Time\'s Up!',
+        blurb: '⏱️ Time\'s up! AI ran out of time. You win!'
+    },
+    'timeout-p1-2player': {
         header: 'Time\'s Up!',
         blurb: '⏱️ Time\'s up! Player 1 ran out of time.'
     },
-    'timeout-p2': {
+    'timeout-p2-2player': {
         header: 'Time\'s Up!',
         blurb: '⏱️ Time\'s up! Player 2 ran out of time.'
     }
@@ -173,7 +181,8 @@ function startTimer(player) {
             if (player1Time <= 0) {
                 player1Time = 0;
                 stopTimer();
-                endGame('timeout-p1');
+                const timeoutKey = gameMode === 'ai' ? 'timeout-p1-ai' : 'timeout-p1-2player';
+                endGame(timeoutKey);
                 return;
             }
         } else if (activeTimer === 2) {
@@ -181,7 +190,8 @@ function startTimer(player) {
             if (player2Time <= 0) {
                 player2Time = 0;
                 stopTimer();
-                endGame('timeout-p2');
+                const timeoutKey = gameMode === 'ai' ? 'timeout-p2-ai' : 'timeout-p2-2player';
+                endGame(timeoutKey);
                 return;
             }
         }
@@ -337,7 +347,9 @@ function endComputerTurn(coords, isWin, winningChips, isBoardFull, isWinImminent
     moveCursorChip(coords.col, function() {
         dropCursorChip(coords.row, function() {
             if (isWin) {
-                endGame('p2-win', winningChips);
+                // In Two-Player mode, use two-player win message; in AI mode, use AI win message
+                const winKey = gameMode === '2player' ? 'p2-win-2player' : 'p2-win';
+                endGame(winKey, winningChips);
             } else if (isBoardFull) {
                 endGame('tie');
             } else {