Upload 5 files

app.py

@@ -10,19 +10,230 @@ st.set_page_config(page_title="Connect Four AI Pro", layout="wide", initial_side
 
 st.markdown('''
 <style>
-    .board-display { font-family: 'Courier New', monospace; white-space: pre; line-height: 1.4; font-size: 16px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); margin: 0 auto; display: inline-block; }
-    .board-container { text-align: center; }
-    .stats-card { background: white; padding: 15px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin: 10px 0; border-left: 4px solid #667eea; }
-    .stat-number { font-size: 24px; font-weight: bold; color: #667eea; }
-    .stat-label { font-size: 12px; color: #666; text-transform: uppercase; }
-    .move-card { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px; border-radius: 12px; margin: 10px 0; box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
-    .player-section { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 15px 0; }
-    .player1-section { border-left: 5px solid #ef4444; }
-    .player2-section { border-left: 5px solid #f59e0b; }
-    .mode-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-right: 8px; background: #10b981; color: white; }
-    .two-player { background: #f59e0b; }
-    .human-section { background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%); border-left: 5px solid #8b5cf6; }
-    .ai-section { background: linear-gradient(135deg, #fef3c7 0%, #fecaca 100%); border-left: 5px solid #f97316; }
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+    
+    * {
+        font-family: 'Poppins', sans-serif;
+    }
+    
+    .stApp {
+        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
+    }
+    
+    .board-display { 
+        font-family: 'Courier New', monospace; 
+        white-space: pre; 
+        line-height: 1.4; 
+        font-size: 18px; 
+        padding: 30px; 
+        background: linear-gradient(145deg, #2d3748, #1a202c);
+        color: white; 
+        border-radius: 20px; 
+        box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
+        margin: 0 auto; 
+        display: inline-block;
+        border: 3px solid rgba(255,255,255,0.1);
+    }
+    
+    .board-container { 
+        text-align: center; 
+        padding: 20px;
+        background: rgba(255,255,255,0.05);
+        border-radius: 25px;
+        backdrop-filter: blur(10px);
+    }
+    
+    .game-header {
+        background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+        padding: 25px;
+        border-radius: 20px;
+        margin-bottom: 20px;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.2);
+        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    }
+    
+    .stats-card { 
+        background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,240,255,0.95));
+        padding: 20px; 
+        border-radius: 15px; 
+        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+        margin: 10px 0; 
+        border: none;
+        transition: transform 0.3s ease;
+    }
+    
+    .stats-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 12px 30px rgba(0,0,0,0.3);
+    }
+    
+    .stat-number { 
+        font-size: 32px; 
+        font-weight: 700; 
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+    
+    .stat-label { 
+        font-size: 11px; 
+        color: #666; 
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-weight: 600;
+    }
+    
+    .move-card { 
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        color: white; 
+        padding: 25px; 
+        border-radius: 18px; 
+        margin: 15px 0; 
+        box-shadow: 0 10px 30px rgba(245,87,108,0.4);
+        border: 2px solid rgba(255,255,255,0.3);
+    }
+    
+    .player-section { 
+        background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(250,250,255,0.95));
+        padding: 25px; 
+        border-radius: 18px; 
+        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+        margin: 20px 0;
+        border: 2px solid rgba(255,255,255,0.5);
+    }
+    
+    .human-section { 
+        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
+        border-left: 6px solid #6366f1;
+        box-shadow: 0 10px 30px rgba(99,102,241,0.3);
+    }
+    
+    .ai-section { 
+        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border-left: 6px solid #f59e0b;
+        box-shadow: 0 10px 30px rgba(245,158,11,0.3);
+    }
+    
+    .player1-section { 
+        border-left: 6px solid #ef4444;
+        box-shadow: 0 8px 25px rgba(239,68,68,0.3);
+    }
+    
+    .player2-section { 
+        border-left: 6px solid #f59e0b;
+        box-shadow: 0 8px 25px rgba(245,158,11,0.3);
+    }
+    
+    .mode-badge { 
+        display: inline-block; 
+        padding: 8px 20px; 
+        border-radius: 25px; 
+        font-size: 13px; 
+        font-weight: 700; 
+        margin-right: 8px; 
+        background: linear-gradient(135deg, #10b981, #059669);
+        color: white;
+        box-shadow: 0 4px 15px rgba(16,185,129,0.4);
+        letter-spacing: 0.5px;
+    }
+    
+    .two-player { 
+        background: linear-gradient(135deg, #f59e0b, #d97706);
+        box-shadow: 0 4px 15px rgba(245,158,11,0.4);
+    }
+    
+    .section-title {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 15px;
+        color: #1f2937;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    
+    .metric-row {
+        display: flex;
+        gap: 10px;
+        margin: 15px 0;
+    }
+    
+    div[data-testid="stSidebar"] {
+        background: linear-gradient(180deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.95) 100%);
+        backdrop-filter: blur(10px);
+    }
+    
+    div[data-testid="stSidebar"] * {
+        color: white !important;
+    }
+    
+    .winner-banner {
+        background: linear-gradient(135deg, #10b981, #059669);
+        color: white;
+        padding: 30px;
+        border-radius: 20px;
+        text-align: center;
+        font-size: 28px;
+        font-weight: 700;
+        box-shadow: 0 15px 40px rgba(16,185,129,0.5);
+        margin: 20px 0;
+        animation: slideDown 0.5s ease;
+    }
+    
+    @keyframes slideDown {
+        from {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    h1 {
+        color: white !important;
+        font-weight: 700 !important;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    }
+    
+    h2, h3 {
+        color: white !important;
+        font-weight: 600 !important;
+    }
+    
+    .stButton > button {
+        border-radius: 12px;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        border: none;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    }
+    
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+    }
+    
+    .stSelectbox > div > div {
+        border-radius: 12px;
+        border: 2px solid rgba(255,255,255,0.3);
+        background: rgba(255,255,255,0.95);
+    }
+    
+    .analysis-badge {
+        display: inline-block;
+        padding: 5px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        margin: 5px 5px 5px 0;
+        background: rgba(99,102,241,0.1);
+        color: #4f46e5;
+        border: 1px solid rgba(99,102,241,0.3);
+    }
 </style>
 ''', unsafe_allow_html=True)
 
@@ -47,16 +258,20 @@ if 'game' not in st.session_state:
     st.session_state.last_human_move_analysis = None
     st.session_state.last_ai_move_analysis = None
 
+# Header
+st.markdown('<div class="game-header">', unsafe_allow_html=True)
 col_title1, col_title2 = st.columns([3, 1])
 with col_title1:
     st.title("🎮 Connect Four AI Pro")
 with col_title2:
     if st.session_state.game_mode == "vs AI":
-        st.markdown(f'<span class="mode-badge">Ultra AI</span>', unsafe_allow_html=True)
+        st.markdown(f'<span class="mode-badge">🤖 VS AI</span>', unsafe_allow_html=True)
     else:
-        st.markdown('<span class="mode-badge two-player">Two Player</span>', unsafe_allow_html=True)
+        st.markdown('<span class="mode-badge two-player">👥 Two Player</span>', unsafe_allow_html=True)
+st.markdown('</div>', unsafe_allow_html=True)
 
-st.sidebar.header("⚙️ Game Settings")
+# Sidebar
+st.sidebar.markdown("### ⚙️ Game Settings")
 
 game_mode = st.sidebar.radio("🎮 Game Mode", ["vs AI", "Two Player"], 
                              index=0 if st.session_state.game_mode == "vs AI" else 1)
@@ -75,8 +290,8 @@ if game_mode != st.session_state.game_mode:
 
 if st.session_state.game_mode == "vs AI":
     st.sidebar.markdown("---")
-    st.sidebar.subheader("🎚️ Search Depth")
-    depth = st.sidebar.slider("AI Depth (3-8)", 3, 8, 5)
+    st.sidebar.markdown("### 🎚️ AI Difficulty")
+    depth = st.sidebar.slider("Search Depth", 3, 8, 5)
     st.session_state.ai.depth = depth
     st.session_state.current_depth = depth
 
@@ -118,34 +333,39 @@ with col2:
         st.rerun()
 
 st.sidebar.markdown("---")
-st.sidebar.subheader("📊 Game Stats")
-st.sidebar.write(f"**Moves:** {st.session_state.move_count}")
+st.sidebar.markdown("### 📊 Game Stats")
+st.sidebar.metric("Total Moves", st.session_state.move_count)
 if st.session_state.game_mode == "Two Player":
-    st.sidebar.write(f"**P1:** {len(st.session_state.player1_analyses)}")
-    st.sidebar.write(f"**P2:** {len(st.session_state.player2_analyses)}")
+    col1, col2 = st.sidebar.columns(2)
+    with col1:
+        st.metric("🔴 P1", len(st.session_state.player1_analyses))
+    with col2:
+        st.metric("🟡 P2", len(st.session_state.player2_analyses))
 
 if st.session_state.move_history:
     with st.sidebar.expander("📜 Move History"):
         for i, col in enumerate(st.session_state.move_history, 1):
             player = "🔴" if i % 2 == 1 else "🟡"
-            st.write(f"Move {i}: {player} → Col {col}")
+            st.write(f"**Move {i}:** {player} → Col {col}")
 
 # Main layout
 if st.session_state.game_mode == "vs AI":
     col1, col2 = st.columns([2, 3])
     
     with col1:
-        st.subheader("🎯 Game Board")
+        st.markdown('<div class="board-container">', unsafe_allow_html=True)
+        st.markdown("### 🎯 Game Board")
         board_str = st.session_state.game.board_to_string()
-        st.markdown(f'<div class="board-container"><div class="board-display">{board_str}</div></div>', unsafe_allow_html=True)
+        st.markdown(f'<div class="board-display">{board_str}</div>', unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
         
         if not st.session_state.game_over:
-            st.markdown("### Your Move 🔴")
+            st.markdown("### 🔴 Your Turn")
             valid_cols = st.session_state.game.get_valid_moves()
             if valid_cols:
                 human_move = st.selectbox("Choose column:", valid_cols, key="move_select")
                 
-                if st.button("📍 Play Move", use_container_width=True, type="primary"):
+                if st.button("🎯 Play Move", use_container_width=True, type="primary"):
                     current_player = 1
                     st.session_state.game.make_move(human_move, player=current_player)
                     st.session_state.move_history.append(human_move)
@@ -171,7 +391,7 @@ if st.session_state.game_mode == "vs AI":
                         st.session_state.winner = "Draw"
                         st.session_state.show_winner_popup = True
                     else:
-                        with st.spinner("🤖 AI thinking..."):
+                        with st.spinner("🤖 AI is thinking..."):
                             ai_result = st.session_state.ai.get_best_move()
                         
                         st.session_state.game.make_move(ai_result['move'], player=2)
@@ -213,26 +433,28 @@ if st.session_state.game_mode == "vs AI":
                     st.rerun()
     
     with col2:
-        st.subheader("📊 Analysis Performance")
+        st.markdown("### 📊 Move Analysis")
         
         # Human Move Analysis
         if st.session_state.last_human_move_analysis:
             human_analysis = st.session_state.last_human_move_analysis
             st.markdown('<div class="player-section human-section">', unsafe_allow_html=True)
-            st.markdown("### 🔴 Your Move Analysis")
+            st.markdown('<div class="section-title">🔴 Your Last Move</div>', unsafe_allow_html=True)
             
-            st.write(f"**Your Last Move:** Column {st.session_state.move_history[-2] if len(st.session_state.move_history) >= 2 else '?'}")
-            st.write(f"**Score Evaluation:** {human_analysis['score']} points")
+            st.markdown(f"**Column Played:** {st.session_state.move_history[-2] if len(st.session_state.move_history) >= 2 else '?'}")
+            st.markdown(f"**Position Score:** {human_analysis['score']} points")
             
             if human_analysis['threats']:
-                st.markdown(f"⚔️ **Strategic Threats:** {', '.join(human_analysis['threats'])}")
+                st.markdown("**Strategic Threats:**")
+                for threat in human_analysis['threats']:
+                    st.markdown(f'<span class="analysis-badge">{threat}</span>', unsafe_allow_html=True)
             
-            st.markdown("**Algorithm Metrics:**")
+            st.markdown("**Performance Metrics:**")
             perf_col1, perf_col2, perf_col3 = st.columns(3)
             with perf_col1:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{human_analysis["nodes_explored"]:,}</div><div class="stat-label">Explored</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{human_analysis["nodes_explored"]:,}</div><div class="stat-label">Nodes Explored</div></div>', unsafe_allow_html=True)
             with perf_col2:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{human_analysis["nodes_pruned"]:,}</div><div class="stat-label">Pruned</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{human_analysis["nodes_pruned"]:,}</div><div class="stat-label">Nodes Pruned</div></div>', unsafe_allow_html=True)
             with perf_col3:
                 st.markdown(f'<div class="stats-card"><div class="stat-number">{human_analysis["pruning_efficiency"]:.1f}%</div><div class="stat-label">Efficiency</div></div>', unsafe_allow_html=True)
             
@@ -249,52 +471,52 @@ if st.session_state.game_mode == "vs AI":
             })
             
             st.markdown('<div class="player-section ai-section">', unsafe_allow_html=True)
-            st.markdown("### 🟡 AI Move Analysis")
+            st.markdown('<div class="section-title">🟡 AI Move Analysis</div>', unsafe_allow_html=True)
+            
+            st.markdown(f'''<div class="move-card"><div style="font-size: 20px; font-weight: 700; margin-bottom: 10px;">Column {ai_move['move']}</div><div style="font-size: 16px;">Score: {ai_move['score']} points</div></div>''', unsafe_allow_html=True)
             
-            st.markdown(f'''<div class="move-card"><h3>AI Played: Column {ai_move['move']}</h3><p><strong>Score:</strong> {ai_move['score']} points</p></div>''', unsafe_allow_html=True)
-            st.success(f"💡 **Why This Move:**\n{explanation['explanation']}")
+            st.success(f"💡 **Strategy:** {explanation['explanation']}")
             
             if explanation.get('threat_analysis'):
-                st.warning(f"⚔️ **Threat Analysis:**\n{explanation['threat_analysis']}")
+                st.warning(f"⚔️ **Threats:** {explanation['threat_analysis']}")
             
             if explanation.get('key_insight'):
-                st.info(f"🔑 **Strategic Insight:**\n{explanation['key_insight']}")
+                st.info(f"🔑 **Insight:** {explanation['key_insight']}")
             
-            st.markdown("**Algorithm Metrics:**")
+            st.markdown("**Performance Metrics:**")
             perf_col1, perf_col2, perf_col3 = st.columns(3)
             with perf_col1:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["nodes_explored"]:,}</div><div class="stat-label">Explored</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["nodes_explored"]:,}</div><div class="stat-label">Nodes Explored</div></div>', unsafe_allow_html=True)
             with perf_col2:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["nodes_pruned"]:,}</div><div class="stat-label">Pruned</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["nodes_pruned"]:,}</div><div class="stat-label">Nodes Pruned</div></div>', unsafe_allow_html=True)
             with perf_col3:
                 st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["pruning_efficiency"]:.1f}%</div><div class="stat-label">Efficiency</div></div>', unsafe_allow_html=True)
             
             stat_col4, stat_col5 = st.columns(2)
             with stat_col4:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["depth"]}</div><div class="stat-label">Depth</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["depth"]}</div><div class="stat-label">Search Depth</div></div>', unsafe_allow_html=True)
             with stat_col5:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["time_ms"]:.0f}ms</div><div class="stat-label">Time</div></div>', unsafe_allow_html=True)
-            
-            if not explanation.get('success', False):
-                st.info("ℹ️ Using smart rule-based explanations")
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{ai_move["time_ms"]:.0f}ms</div><div class="stat-label">Response Time</div></div>', unsafe_allow_html=True)
             
             st.markdown('</div>', unsafe_allow_html=True)
 
 else:  # Two Player Mode
-    st.subheader("🎯 Game Board")
+    st.markdown('<div class="board-container">', unsafe_allow_html=True)
+    st.markdown("### 🎯 Game Board")
     board_str = st.session_state.game.board_to_string()
-    st.markdown(f'<div class="board-container"><div class="board-display">{board_str}</div></div>', unsafe_allow_html=True)
+    st.markdown(f'<div class="board-display">{board_str}</div>', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
     
     if not st.session_state.game_over:
         player_name = f"Player {st.session_state.current_player}"
         player_emoji = "🔴" if st.session_state.current_player == 1 else "🟡"
-        st.markdown(f"### {player_name} Move {player_emoji}")
+        st.markdown(f"### {player_emoji} {player_name}'s Turn")
         
         valid_cols = st.session_state.game.get_valid_moves()
         if valid_cols:
             human_move = st.selectbox("Choose column:", valid_cols, key="move_select")
             
-            if st.button("📍 Play Move", use_container_width=True, type="primary"):
+            if st.button("🎯 Play Move", use_container_width=True, type="primary"):
                 current_player = st.session_state.current_player
                 st.session_state.game.make_move(human_move, player=current_player)
                 st.session_state.move_history.append(human_move)
@@ -334,86 +556,83 @@ else:  # Two Player Mode
                 
                 st.rerun()
     
-    # PLAYER ANALYSIS BELOW BOARD
+    # Player Analysis
     st.markdown("---")
-    st.subheader("📊 Move Analysis")
+    st.markdown("### 📊 Player Analysis")
     
     col1, col2 = st.columns(2)
     
     with col1:
         if st.session_state.player1_analyses:
-            st.markdown("### 🔴 Player 1")
-            latest_p1 = st.session_state.player1_analyses[-1]
             st.markdown('<div class="player-section player1-section">', unsafe_allow_html=True)
-            st.write(f"**Last Move:** Column {latest_p1['column']}")
+            st.markdown('<div class="section-title">🔴 Player 1</div>', unsafe_allow_html=True)
+            latest_p1 = st.session_state.player1_analyses[-1]
+            
+            st.markdown(f"**Last Move:** Column {latest_p1['column']}")
             if latest_p1['recommendation']['is_optimal']:
-                st.success("✅ Excellent Move!")
+                st.success("✅ Optimal Move!")
             else:
-                st.warning(f"🤔 AI suggests Column {latest_p1['recommendation']['suggested_column']}")
+                st.warning(f"💡 AI suggests Column {latest_p1['recommendation']['suggested_column']}")
             
             if latest_p1['analysis']['threats']:
-                st.markdown(f"⚔️ **Threats:** {', '.join(latest_p1['analysis']['threats'])}")
-            
-            st.markdown(f"**Score:** {latest_p1['analysis']['score']} points")
+                st.markdown("**Strategic Threats:**")
+                for threat in latest_p1['analysis']['threats']:
+                    st.markdown(f'<span class="analysis-badge">{threat}</span>', unsafe_allow_html=True)
             
-            st.markdown("**AI Insights:**")
-            st.write(f"💭 This move evaluates to {latest_p1['analysis']['score']} points. " + 
-                    ("AI recommends this column for the best position." if latest_p1['recommendation']['is_optimal'] else 
-                     f"AI would prefer Column {latest_p1['recommendation']['suggested_column']} for better positioning."))
+            st.markdown(f"**Position Score:** {latest_p1['analysis']['score']} points")
             
             perf_col1, perf_col2 = st.columns(2)
             with perf_col1:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p1["analysis"]["nodes_explored"]:,}</div><div class="stat-label">Explored</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p1["analysis"]["nodes_explored"]:,}</div><div class="stat-label">Nodes Explored</div></div>', unsafe_allow_html=True)
             with perf_col2:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p1["analysis"]["nodes_pruned"]:,}</div><div class="stat-label">Pruned</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p1["analysis"]["pruning_efficiency"]:.1f}%</div><div class="stat-label">Efficiency</div></div>', unsafe_allow_html=True)
             st.markdown('</div>', unsafe_allow_html=True)
     
     with col2:
         if st.session_state.player2_analyses:
-            st.markdown("### 🟡 Player 2")
-            latest_p2 = st.session_state.player2_analyses[-1]
             st.markdown('<div class="player-section player2-section">', unsafe_allow_html=True)
-            st.write(f"**Last Move:** Column {latest_p2['column']}")
+            st.markdown('<div class="section-title">🟡 Player 2</div>', unsafe_allow_html=True)
+            latest_p2 = st.session_state.player2_analyses[-1]
+            
+            st.markdown(f"**Last Move:** Column {latest_p2['column']}")
             if latest_p2['recommendation']['is_optimal']:
-                st.success("✅ Excellent Move!")
+                st.success("✅ Optimal Move!")
             else:
-                st.warning(f"🤔 AI suggests Column {latest_p2['recommendation']['suggested_column']}")
+                st.warning(f"💡 AI suggests Column {latest_p2['recommendation']['suggested_column']}")
             
             if latest_p2['analysis']['threats']:
-                st.markdown(f"⚔️ **Threats:** {', '.join(latest_p2['analysis']['threats'])}")
+                st.markdown("**Strategic Threats:**")
+                for threat in latest_p2['analysis']['threats']:
+                    st.markdown(f'<span class="analysis-badge">{threat}</span>', unsafe_allow_html=True)
             
-            st.markdown(f"**Score:** {latest_p2['analysis']['score']} points")
-            
-            st.markdown("**AI Insights:**")
-            st.write(f"💭 This move evaluates to {latest_p2['analysis']['score']} points. " + 
-                    ("AI recommends this column for the best position." if latest_p2['recommendation']['is_optimal'] else 
-                     f"AI would prefer Column {latest_p2['recommendation']['suggested_column']} for better positioning."))
+            st.markdown(f"**Position Score:** {latest_p2['analysis']['score']} points")
             
             perf_col1, perf_col2 = st.columns(2)
             with perf_col1:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p2["analysis"]["nodes_explored"]:,}</div><div class="stat-label">Explored</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p2["analysis"]["nodes_explored"]:,}</div><div class="stat-label">Nodes Explored</div></div>', unsafe_allow_html=True)
             with perf_col2:
-                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p2["analysis"]["nodes_pruned"]:,}</div><div class="stat-label">Pruned</div></div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="stats-card"><div class="stat-number">{latest_p2["analysis"]["pruning_efficiency"]:.1f}%</div><div class="stat-label">Efficiency</div></div>', unsafe_allow_html=True)
             st.markdown('</div>', unsafe_allow_html=True)
 
+# Winner Display
 if st.session_state.show_winner_popup and st.session_state.game_over:
     if st.session_state.winner == "Human":
         st.balloons()
-        st.success("# 🎉 YOU WON! 🎉")
+        st.markdown('<div class="winner-banner">🎉 YOU WON! 🎉</div>', unsafe_allow_html=True)
     elif st.session_state.winner == "AI":
-        st.info("# 🤖 AI WON!")
+        st.markdown('<div class="winner-banner" style="background: linear-gradient(135deg, #f59e0b, #d97706);">🤖 AI WINS!</div>', unsafe_allow_html=True)
     elif "Player" in st.session_state.winner:
         st.balloons()
-        st.success(f"# 🎉 {st.session_state.winner.upper()} WON! 🎉")
+        st.markdown(f'<div class="winner-banner">🎉 {st.session_state.winner.upper()} WINS! 🎉</div>', unsafe_allow_html=True)
     else:
-        st.info("# 🤝 IT'S A DRAW!")
+        st.markdown('<div class="winner-banner" style="background: linear-gradient(135deg, #6366f1, #4f46e5);">🤝 IT\'S A DRAW!</div>', unsafe_allow_html=True)
     
     st.session_state.show_winner_popup = False
 
+# Download Report
 if st.session_state.game_over:
     st.markdown("---")
-    st.markdown("### 📄 Download Match Report")
-    st.info("📥 Complete analysis with all algorithm metrics")
+    st.markdown("### 📄 Match Report")
     
     report = generate_match_report(
         st.session_state.game_mode,
@@ -428,10 +647,10 @@ if st.session_state.game_over:
     filename = f"connect_four_report_{timestamp}.txt"
     
     st.download_button(
-        label="📥 Download Match Report",
+        label="📥 Download Full Match Report",
         data=report,
         file_name=filename,
         mime="text/plain",
         use_container_width=True,
         type="primary"
-    )
+    )