commit 75ac46c23cbc7652ca7ab4e2f57fc10a8a9d865f
Author: Bl3kiiie <96978644+Bl3kiiie@users.noreply.github.com>
Date:   Wed Jul 30 17:53:24 2025 +0200

    Add files via upload

diff --git a/TV_APP_V2/app.py b/TV_APP_V2/app.py
new file mode 100644
index 0000000..11f67ac
--- /dev/null
+++ b/TV_APP_V2/app.py
@@ -0,0 +1,2058 @@
+from flask import Flask, render_template, request, redirect, jsonify
+import json
+import os
+import random
+import glob
+from collections import defaultdict
+from datetime import datetime
+import re
+
+app = Flask(__name__)
+
+def is_mobile_device():
+    """Check if the request is coming from a mobile device"""
+    user_agent = request.headers.get('User-Agent', '').lower()
+    mobile_patterns = [
+        r'android', r'iphone', r'ipad', r'ipod', r'blackberry', 
+        r'iemobile', r'opera mini', r'mobile', r'tablet'
+    ]
+    return any(re.search(pattern, user_agent) for pattern in mobile_patterns)
+
+# Define streams globally so both routes can access them
+STREAMS = [
+    {'name': 'Target1', 'url': 'http://192.168.0.134:9081'},
+    {'name': 'Target2', 'url': 'http://192.168.0.134:9082'},
+    {'name': 'Target3', 'url': 'http://192.168.0.134:9083'},
+    {'name': 'Target4', 'url': 'http://192.168.0.134:9084'},
+    {'name': 'Target5', 'url': 'http://192.168.0.134:9085'},
+    {'name': 'Target6', 'url': 'http://192.168.0.134:9086'},
+]
+
+# Settings file paths
+SETTINGS_FILE = 'camera_settings.json'
+PLAYERS_FILE = 'players.json'
+TOURNAMENT_FILE = 'tournament_state.json'
+RESULTS_FILE = 'tournament_results.json'
+LEAGUE_FILE = 'league_state.json'
+ARCHIVE_DIR = 'tournament_archives'
+LEAGUE_ARCHIVE_DIR = 'league_archives'
+
+# Default settings
+DEFAULT_SETTINGS = {
+    'camera_titles': {
+        '1': 'Camera 1',
+        '2': 'Camera 2', 
+        '3': 'Camera 3',
+        '4': 'Camera 4',
+        '5': 'Camera 5',
+        '6': 'Camera 6'
+    },
+    'display_options': {
+        'show_titles': True,
+        'title_size': 1.1
+    }
+}
+
+# Default players structure
+DEFAULT_PLAYERS = {
+    'players': [
+        {'id': 1, 'name': 'Player 1', 'enabled': True},
+        {'id': 2, 'name': 'Player 2', 'enabled': True},
+        {'id': 3, 'name': 'Player 3', 'enabled': True},
+        {'id': 4, 'name': 'Player 4', 'enabled': True},
+        {'id': 5, 'name': 'Player 5', 'enabled': True},
+        {'id': 6, 'name': 'Player 6', 'enabled': True},
+    ]
+}
+
+def load_settings():
+    """Load settings from JSON file, create with defaults if not exists"""
+    try:
+        if os.path.exists(SETTINGS_FILE):
+            with open(SETTINGS_FILE, 'r') as f:
+                settings = json.load(f)
+                # Ensure all required keys exist (for backwards compatibility)
+                for key in DEFAULT_SETTINGS:
+                    if key not in settings:
+                        settings[key] = DEFAULT_SETTINGS[key]
+                for camera_id in DEFAULT_SETTINGS['camera_titles']:
+                    if camera_id not in settings['camera_titles']:
+                        settings['camera_titles'][camera_id] = DEFAULT_SETTINGS['camera_titles'][camera_id]
+                return settings
+        else:
+            return DEFAULT_SETTINGS.copy()
+    except (json.JSONDecodeError, IOError):
+        return DEFAULT_SETTINGS.copy()
+
+def save_settings(settings):
+    """Save settings to JSON file"""
+    try:
+        with open(SETTINGS_FILE, 'w') as f:
+            json.dump(settings, f, indent=2)
+        return True
+    except IOError:
+        return False
+
+def load_players():
+    """Load players from JSON file, create with defaults if not exists"""
+    try:
+        if os.path.exists(PLAYERS_FILE):
+            with open(PLAYERS_FILE, 'r') as f:
+                return json.load(f)
+        else:
+            save_players(DEFAULT_PLAYERS)
+            return DEFAULT_PLAYERS.copy()
+    except (json.JSONDecodeError, IOError):
+        return DEFAULT_PLAYERS.copy()
+
+def save_players(players_data):
+    """Save players to JSON file"""
+    try:
+        with open(PLAYERS_FILE, 'w') as f:
+            json.dump(players_data, f, indent=2)
+        return True
+    except IOError:
+        return False
+
+def load_tournament_state():
+    """Load tournament state from JSON file"""
+    try:
+        if os.path.exists(TOURNAMENT_FILE):
+            with open(TOURNAMENT_FILE, 'r') as f:
+                return json.load(f)
+        else:
+            return None
+    except (json.JSONDecodeError, IOError):
+        return None
+
+def save_tournament_state(tournament_data):
+    """Save tournament state to JSON file"""
+    try:
+        with open(TOURNAMENT_FILE, 'w') as f:
+            json.dump(tournament_data, f, indent=2)
+        return True
+    except IOError:
+        return False
+
+def load_league_state():
+    """Load league state from JSON file"""
+    try:
+        if os.path.exists(LEAGUE_FILE):
+            with open(LEAGUE_FILE, 'r') as f:
+                return json.load(f)
+        else:
+            return None
+    except (json.JSONDecodeError, IOError):
+        return None
+
+def save_league_state(league_data):
+    """Save league state to JSON file"""
+    try:
+        with open(LEAGUE_FILE, 'w') as f:
+            json.dump(league_data, f, indent=2)
+        return True
+    except IOError:
+        return False
+
+def load_results():
+    """Load results from JSON file"""
+    try:
+        if os.path.exists(RESULTS_FILE):
+            with open(RESULTS_FILE, 'r') as f:
+                return json.load(f)
+        else:
+            return None
+    except (json.JSONDecodeError, IOError):
+        return None
+
+def save_results(results_data):
+    """Save results to JSON file"""
+    try:
+        with open(RESULTS_FILE, 'w') as f:
+            json.dump(results_data, f, indent=2)
+        return True
+    except IOError:
+        return False
+
+def archive_tournament(tournament_data, results_data):
+    """Archive completed tournament data"""
+    try:
+        # Create archive directory if it doesn't exist
+        if not os.path.exists(ARCHIVE_DIR):
+            os.makedirs(ARCHIVE_DIR)
+        
+        # Create filename with timestamp
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        archive_filename = f"tournament_{timestamp}.json"
+        archive_path = os.path.join(ARCHIVE_DIR, archive_filename)
+        
+        # Combine tournament and results data
+        archive_data = {
+            'tournament': tournament_data,
+            'results': results_data,
+            'archived_at': datetime.now().isoformat()
+        }
+        
+        # Save to archive
+        with open(archive_path, 'w') as f:
+            json.dump(archive_data, f, indent=2)
+        
+        print(f"Tournament archived to: {archive_path}")
+        return True
+    except Exception as e:
+        print(f"Error archiving tournament: {e}")
+        return False
+
+def archive_league(league_data):
+    """Archive completed league data"""
+    try:
+        if not os.path.exists(LEAGUE_ARCHIVE_DIR):
+            os.makedirs(LEAGUE_ARCHIVE_DIR)
+        
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        archive_filename = f"league_{timestamp}.json"
+        archive_path = os.path.join(LEAGUE_ARCHIVE_DIR, archive_filename)
+        
+        archive_data = {
+            'league': league_data,
+            'archived_at': datetime.now().isoformat()
+        }
+        
+        with open(archive_path, 'w') as f:
+            json.dump(archive_data, f, indent=2)
+        
+        print(f"League archived to: {archive_path}")
+        return True
+    except Exception as e:
+        print(f"Error archiving league: {e}")
+        return False
+
+def create_league(enabled_players, tournament_type):
+    """Create a new league with 6 tournaments"""
+    league_id = f"league_{datetime.now().strftime('%Y%m%d_%H%M%S')}"
+    
+    league_data = {
+        'league_id': league_id,
+        'created_at': datetime.now().isoformat(),
+        'tournament_type': tournament_type,
+        'total_tournaments': 6,
+        'current_tournament': 0,  # Will be 1 when first tournament starts
+        'participants': {},
+        'completed_tournaments': [],
+        'league_finished': False
+    }
+    
+    # Initialize participants
+    for player in enabled_players:
+        league_data['participants'][str(player['id'])] = {
+            'name': player['name'],
+            'joker_used': False,
+            'tournament_results': [],
+            'total_score': 0,
+            'final_score': 0,  # Best 5 tournaments
+            'tournaments_participated': 0
+        }
+    
+    return league_data
+
+def create_draft(enabled_players, tournament_type='20_targets', league_tournament_number=None):
+    """Create draft groups of 6 players and organize rounds"""
+    if len(enabled_players) < 1:
+        return None
+    
+    # Shuffle players for random grouping
+    players_copy = enabled_players.copy()
+    random.shuffle(players_copy)
+    
+    # Create groups of up to 6
+    groups = []
+    for i in range(0, len(players_copy), 6):
+        group = players_copy[i:i+6]
+        groups.append(group)
+    
+    # Create rounds
+    rounds = []
+    for i, group in enumerate(groups):
+        rounds.append({
+            'round_number': i + 1,
+            'players': group,
+            'status': 'pending' if i == 0 else 'waiting'
+        })
+    
+    tournament_data = {
+        'rounds': rounds,
+        'created_at': datetime.now().isoformat(),
+        'total_players': len(enabled_players),
+        'total_rounds': len(rounds),
+        'current_round': 1,
+        'tournament_type': tournament_type
+    }
+    
+    if league_tournament_number:
+        tournament_data['league_tournament_number'] = league_tournament_number
+    
+    return tournament_data
+
+def create_results_structure(tournament_data):
+    """Create results structure for a tournament"""
+    if not tournament_data:
+        return None
+    
+    tournament_type = tournament_data.get('tournament_type', '20_targets')
+    num_targets = 40 if tournament_type == '40_targets' else 20
+    
+    results = {
+        'tournament_id': tournament_data.get('created_at', datetime.now().isoformat()),
+        'tournament_type': tournament_type,
+        'participants': {},
+        'tournament_finished': False,
+        'created_at': datetime.now().isoformat()
+    }
+    
+    # Add league info if present
+    if 'league_tournament_number' in tournament_data:
+        results['league_tournament_number'] = tournament_data['league_tournament_number']
+    
+    # Create structure for each participant
+    all_players = []
+    for round_data in tournament_data['rounds']:
+        all_players.extend(round_data['players'])
+    
+    for player in all_players:
+        player_id = str(player['id'])
+        results['participants'][player_id] = {
+            'name': player['name'],
+            'targets': {str(i): {'shot1': None, 'shot2': None} for i in range(1, num_targets + 1)},
+            'total_score': 0,
+            'completed': False
+        }
+    
+    return results
+
+def calculate_total_score(targets):
+    """Calculate total score from targets, treating None as 0"""
+    total = 0
+    for target in targets.values():
+        shot1 = target.get('shot1')
+        shot2 = target.get('shot2')
+        total += (shot1 if shot1 is not None else 0)
+        total += (shot2 if shot2 is not None else 0)
+    return total
+
+def is_participant_completed(targets):
+    """Check if a participant has completed all targets (all shots entered, including 0s)"""
+    for target in targets.values():
+        shot1 = target.get('shot1')
+        shot2 = target.get('shot2')
+        if shot1 is None or shot2 is None:
+            return False
+    return True
+
+def calculate_league_final_scores(league_data):
+    """Calculate final league scores using best 5 tournaments (joker system)"""
+    for participant_id, participant in league_data['participants'].items():
+        tournament_scores = []
+        
+        # Get all tournament scores where player participated
+        for result in participant['tournament_results']:
+            if result['participated']:
+                tournament_scores.append(result['score'])
+        
+        # Sort scores descending and take best 5 (or all if less than 6)
+        tournament_scores.sort(reverse=True)
+        best_scores = tournament_scores[:5] if len(tournament_scores) > 5 else tournament_scores
+        
+        participant['final_score'] = sum(best_scores)
+        participant['tournaments_participated'] = len(tournament_scores)
+
+def get_league_final_rankings(league_data):
+    """Get final league rankings sorted by final score"""
+    participants = []
+    for player_id, data in league_data['participants'].items():
+        participants.append({
+            'id': player_id,
+            'name': data['name'],
+            'final_score': data['final_score'],
+            'total_score': data['total_score'],
+            'tournaments_participated': data['tournaments_participated'],
+            'joker_used': data['joker_used'],
+            'tournament_results': data['tournament_results']
+        })
+    
+    # Sort by final score (best 5 tournaments) descending
+    participants.sort(key=lambda x: x['final_score'], reverse=True)
+    
+    # Add rankings
+    for i, participant in enumerate(participants):
+        participant['rank'] = i + 1
+    
+    return participants
+
+def get_current_round_data():
+    """Get current round data from tournament"""
+    tournament_state = load_tournament_state()
+    if not tournament_state:
+        return None
+    
+    current_round_num = tournament_state.get('current_round', 1)
+    
+    # Find the current round
+    for round_data in tournament_state['rounds']:
+        if round_data['round_number'] == current_round_num:
+            return round_data
+    
+    return None
+
+def calculate_current_league_standings(league_data):
+    """Calculate current league standings during active league"""
+    participants = []
+    for player_id, data in league_data['participants'].items():
+        # Calculate current standings based on completed tournaments
+        tournament_scores = []
+        completed_tournaments = 0
+        
+        for result in data['tournament_results']:
+            if result['participated']:
+                tournament_scores.append(result['score'])
+                completed_tournaments += 1
+        
+        # Current score is sum of all completed tournaments
+        current_total = sum(tournament_scores)
+        
+        # For display, show what the final score would be if we took best 5 now
+        tournament_scores.sort(reverse=True)
+        projected_final = sum(tournament_scores[:5]) if len(tournament_scores) >= 5 else sum(tournament_scores)
+        
+        participants.append({
+            'id': player_id,
+            'name': data['name'],
+            'current_total': current_total,
+            'projected_final': projected_final,
+            'tournaments_completed': completed_tournaments,
+            'joker_used': data['joker_used'],
+            'tournament_results': data['tournament_results']
+        })
+    
+    # Sort by current total score (descending)
+    participants.sort(key=lambda x: x['current_total'], reverse=True)
+    
+    # Add rankings
+    for i, participant in enumerate(participants):
+        participant['rank'] = i + 1
+    
+    return participants
+    
+def get_league_current_standings(league_state):
+    """Get current league standings including in-progress tournament"""
+    if not league_state:
+        return []
+    
+    # Start with current league participants
+    participants = []
+    for player_id, data in league_state['participants'].items():
+        participant = {
+            'id': player_id,
+            'name': data['name'],
+            'total_score': data['total_score'],
+            'final_score': data['final_score'],
+            'tournaments_participated': data['tournaments_participated'],
+            'joker_used': data['joker_used'],
+            'tournament_results': data['tournament_results'],
+            'current_tournament_score': 0,  # Score from current tournament
+            'current_tournament_participating': False
+        }
+        participants.append(participant)
+    
+    # Add current tournament scores if available
+    current_results = load_results()
+    if current_results and not current_results.get('tournament_finished', False):
+        for player_id, result_data in current_results['participants'].items():
+            # Find this participant in our list
+            for participant in participants:
+                if participant['id'] == player_id:
+                    participant['current_tournament_score'] = result_data['total_score']
+                    participant['current_tournament_participating'] = True
+                    break
+    
+    # Sort by final score (best 5 tournaments) descending
+    participants.sort(key=lambda x: x['final_score'], reverse=True)
+    
+    # Add rankings
+    for i, participant in enumerate(participants):
+        participant['rank'] = i + 1
+    
+    return participants
+
+# Add these functions after the existing helper functions in app.py
+
+def get_archived_tournaments():
+    """Get list of standalone archived tournaments (excluding league tournaments)"""
+    try:
+        if not os.path.exists(ARCHIVE_DIR):
+            return []
+        
+        archives = []
+        for file_path in glob.glob(os.path.join(ARCHIVE_DIR, "tournament_*.json")):
+            try:
+                with open(file_path, 'r') as f:
+                    data = json.load(f)
+                    
+                    # Extract metadata
+                    filename = os.path.basename(file_path)
+                    archived_at = data.get('archived_at', 'Unknown')
+                    tournament_data = data.get('tournament', {})
+                    results_data = data.get('results', {})
+                    
+                    # Skip tournaments that are part of a league
+                    if tournament_data.get('league_tournament_number') or results_data.get('league_tournament_number'):
+                        continue
+                    
+                    archive_info = {
+                        'filename': filename,
+                        'filepath': file_path,
+                        'archived_at': archived_at,
+                        'created_at': tournament_data.get('created_at', 'Unknown'),
+                        'tournament_type': tournament_data.get('tournament_type', '20_targets'),
+                        'total_players': tournament_data.get('total_players', 0),
+                        'total_rounds': tournament_data.get('total_rounds', 0),
+                        'tournament_finished': results_data.get('tournament_finished', False),
+                        'participants_count': len(results_data.get('participants', {}))
+                    }
+                    
+                    archives.append(archive_info)
+            except (json.JSONDecodeError, IOError) as e:
+                print(f"Error reading archive {file_path}: {e}")
+                continue
+        
+        # Sort by archived date (newest first)
+        archives.sort(key=lambda x: x['archived_at'], reverse=True)
+        return archives
+    except Exception as e:
+        print(f"Error getting archived tournaments: {e}")
+        return []
+
+def get_archived_leagues():
+    """Get list of all archived leagues"""
+    try:
+        if not os.path.exists(LEAGUE_ARCHIVE_DIR):
+            return []
+        
+        archives = []
+        for file_path in glob.glob(os.path.join(LEAGUE_ARCHIVE_DIR, "league_*.json")):
+            try:
+                with open(file_path, 'r') as f:
+                    data = json.load(f)
+                    
+                    filename = os.path.basename(file_path)
+                    archived_at = data.get('archived_at', 'Unknown')
+                    league_data = data.get('league', {})
+                    
+                    archive_info = {
+                        'filename': filename,
+                        'filepath': file_path,
+                        'archived_at': archived_at,
+                        'created_at': league_data.get('created_at', 'Unknown'),
+                        'league_id': league_data.get('league_id', 'Unknown'),
+                        'tournament_type': league_data.get('tournament_type', '20_targets'),
+                        'total_tournaments': league_data.get('total_tournaments', 6),
+                        'participants_count': len(league_data.get('participants', {})),
+                        'league_finished': league_data.get('league_finished', False),
+                        'completed_tournaments': len(league_data.get('completed_tournaments', []))
+                    }
+                    
+                    archives.append(archive_info)
+            except (json.JSONDecodeError, IOError) as e:
+                print(f"Error reading league archive {file_path}: {e}")
+                continue
+        
+        # Sort by archived date (newest first)
+        archives.sort(key=lambda x: x['archived_at'], reverse=True)
+        return archives
+    except Exception as e:
+        print(f"Error getting archived leagues: {e}")
+        return []
+
+def load_archive_file(filepath):
+    """Load a specific archive file"""
+    try:
+        with open(filepath, 'r') as f:
+            return json.load(f)
+    except (json.JSONDecodeError, IOError) as e:
+        print(f"Error loading archive file {filepath}: {e}")
+        return None
+
+def analyze_player_performance(player_id, archives_data):
+    """Analyze performance of a specific player across all archives"""
+    player_stats = {
+        'total_tournaments': 0,
+        'total_leagues': 0,
+        'tournament_scores': [],
+        'league_scores': [],
+        'best_tournament_score': 0,
+        'worst_tournament_score': float('inf'),
+        'average_tournament_score': 0,
+        'total_shots_fired': 0,
+        'performance_trend': [],
+        'tournament_history': [],
+        'league_history': []
+    }
+    
+    # Process tournament archives
+    for archive in archives_data.get('tournaments', []):
+        try:
+            data = load_archive_file(archive['filepath'])
+            if not data:
+                continue
+                
+            results = data.get('results', {})
+            participants = results.get('participants', {})
+            
+            if str(player_id) in participants:
+                participant = participants[str(player_id)]
+                score = participant.get('total_score', 0)
+                completed = participant.get('completed', False)
+                
+                if completed:
+                    player_stats['total_tournaments'] += 1
+                    player_stats['tournament_scores'].append(score)
+                    
+                    if score > player_stats['best_tournament_score']:
+                        player_stats['best_tournament_score'] = score
+                    if score < player_stats['worst_tournament_score']:
+                        player_stats['worst_tournament_score'] = score
+                    
+                    # Count shots fired
+                    targets = participant.get('targets', {})
+                    shots_in_tournament = 0
+                    for target in targets.values():
+                        if target.get('shot1') is not None:
+                            shots_in_tournament += 1
+                        if target.get('shot2') is not None:
+                            shots_in_tournament += 1
+                    
+                    player_stats['total_shots_fired'] += shots_in_tournament
+                    
+                    # Add to history
+                    player_stats['tournament_history'].append({
+                        'date': archive['archived_at'],
+                        'score': score,
+                        'tournament_type': archive['tournament_type'],
+                        'completed': completed,
+                        'shots_fired': shots_in_tournament
+                    })
+        except Exception as e:
+            print(f"Error analyzing tournament archive: {e}")
+            continue
+    
+    # Process league archives
+    for archive in archives_data.get('leagues', []):
+        try:
+            data = load_archive_file(archive['filepath'])
+            if not data:
+                continue
+                
+            league = data.get('league', {})
+            participants = league.get('participants', {})
+            
+            if str(player_id) in participants:
+                participant = participants[str(player_id)]
+                final_score = participant.get('final_score', 0)
+                total_score = participant.get('total_score', 0)
+                tournaments_participated = participant.get('tournaments_participated', 0)
+                
+                player_stats['total_leagues'] += 1
+                player_stats['league_scores'].append(final_score)
+                
+                player_stats['league_history'].append({
+                    'date': archive['archived_at'],
+                    'final_score': final_score,
+                    'total_score': total_score,
+                    'tournaments_participated': tournaments_participated,
+                    'joker_used': participant.get('joker_used', False),
+                    'tournament_results': participant.get('tournament_results', [])
+                })
+        except Exception as e:
+            print(f"Error analyzing league archive: {e}")
+            continue
+    
+    # Calculate averages and trends
+    if player_stats['tournament_scores']:
+        player_stats['average_tournament_score'] = sum(player_stats['tournament_scores']) / len(player_stats['tournament_scores'])
+        
+        # Performance trend (simple moving average)
+        if len(player_stats['tournament_scores']) >= 3:
+            for i in range(2, len(player_stats['tournament_scores'])):
+                avg = sum(player_stats['tournament_scores'][i-2:i+1]) / 3
+                player_stats['performance_trend'].append(avg)
+    
+    if player_stats['worst_tournament_score'] == float('inf'):
+        player_stats['worst_tournament_score'] = 0
+    
+    # Sort histories by date (newest first)
+    player_stats['tournament_history'].sort(key=lambda x: x['date'], reverse=True)
+    player_stats['league_history'].sort(key=lambda x: x['date'], reverse=True)
+    
+    return player_stats
+
+def get_all_players_from_archives():
+    """Get all players that appear in any archive"""
+    all_players = {}
+    
+    # Get current players first
+    current_players = load_players()
+    for player in current_players['players']:
+        all_players[str(player['id'])] = {
+            'id': player['id'],
+            'name': player['name'],
+            'current_player': True
+        }
+    
+    # Add players from tournament archives
+    tournaments = get_archived_tournaments()
+    for archive in tournaments:
+        try:
+            data = load_archive_file(archive['filepath'])
+            if data and 'results' in data:
+                participants = data['results'].get('participants', {})
+                for player_id, participant in participants.items():
+                    if player_id not in all_players:
+                        all_players[player_id] = {
+                            'id': int(player_id),
+                            'name': participant.get('name', f'Player {player_id}'),
+                            'current_player': False
+                        }
+        except Exception as e:
+            print(f"Error processing tournament archive: {e}")
+            continue
+    
+    # Add players from league archives
+    leagues = get_archived_leagues()
+    for archive in leagues:
+        try:
+            data = load_archive_file(archive['filepath'])
+            if data and 'league' in data:
+                participants = data['league'].get('participants', {})
+                for player_id, participant in participants.items():
+                    if player_id not in all_players:
+                        all_players[player_id] = {
+                            'id': int(player_id),
+                            'name': participant.get('name', f'Player {player_id}'),
+                            'current_player': False
+                        }
+        except Exception as e:
+            print(f"Error processing league archive: {e}")
+            continue
+    
+    # Convert to list and sort by name
+    players_list = list(all_players.values())
+    players_list.sort(key=lambda x: x['name'])
+    
+    return players_list
+
+# Add these routes after the existing routes in app.py
+
+# Add this to your app.py file to integrate the modern archive system
+
+# Replace your existing archive routes with these updated ones:
+
+@app.route('/archive')
+def archive_index():
+    """Archive index page with updated styling"""
+    if is_mobile_device():
+        return redirect('/mobile/archive')
+    
+    tournaments = get_archived_tournaments()  # Now only returns standalone tournaments
+    leagues = get_archived_leagues()
+    
+    # Calculate overview stats
+    total_tournaments = len(tournaments)
+    total_leagues = len(leagues)
+    
+    # Get total players from current players list
+    players_data = load_players()
+    total_players = len([p for p in players_data['players'] if p['enabled']])
+    
+    # Calculate total competitions (standalone tournaments + completed leagues)
+    total_matches = total_tournaments + total_leagues
+    
+    stats = {
+        'total_tournaments': total_tournaments,
+        'total_leagues': total_leagues,
+        'total_players': total_players,
+        'total_matches': total_matches
+    }
+    
+    # Use the new template
+    return render_template('modern_archive_index.html', 
+                         tournaments=tournaments,
+                         leagues=leagues,
+                         stats=stats)
+
+@app.route('/archive/player-analysis')
+def player_analysis():
+    """Modern Player analysis page"""
+    if is_mobile_device():
+        return redirect('/mobile/archive/player-analysis')
+    
+    all_players = get_all_players_from_archives()
+    
+    # Calculate overview stats
+    total_players = len(all_players)
+    active_players = len([p for p in all_players if p['current_player']])
+    
+    # Get average tournaments and top score from archives
+    avg_tournaments = 0
+    top_score = 0
+    
+    if all_players:
+        total_tournament_count = 0
+        max_score = 0
+        
+        for player in all_players:
+            # Get basic stats for each player
+            archives_data = {
+                'tournaments': get_archived_tournaments(),
+                'leagues': get_archived_leagues()
+            }
+            player_stats = analyze_player_performance(player['id'], archives_data)
+            total_tournament_count += player_stats['total_tournaments']
+            if player_stats['best_tournament_score'] > max_score:
+                max_score = player_stats['best_tournament_score']
+        
+        avg_tournaments = total_tournament_count // total_players if total_players else 0
+        top_score = max_score
+    
+    overview_stats = {
+        'total_players': total_players,
+        'active_players': active_players,
+        'avg_tournaments': avg_tournaments,
+        'top_score': top_score
+    }
+    
+    return render_template('modern_player_analysis.html', 
+                         players=all_players,
+                         overview_stats=overview_stats)
+
+@app.route('/archive/player/<int:player_id>')
+def view_player_stats(player_id):
+    """Modern Player stats page"""
+    if is_mobile_device():
+        return redirect(f'/mobile/archive/player/{player_id}')
+    
+    all_players = get_all_players_from_archives()
+    player_info = next((p for p in all_players if p['id'] == player_id), None)
+    
+    if not player_info:
+        return redirect('/archive/player-analysis')
+    
+    # Get archives data
+    archives_data = {
+        'tournaments': get_archived_tournaments(),
+        'leagues': get_archived_leagues()
+    }
+    
+    # Analyze player performance
+    player_stats = analyze_player_performance(player_id, archives_data)
+    
+    return render_template('modern_player_stats.html',
+                         player=player_info,
+                         stats=player_stats)
+
+# Enhanced API endpoints for the modern archive system
+
+@app.route('/api/archive/stats', methods=['GET'])
+def api_get_archive_stats():
+    """API endpoint to get archive overview statistics"""
+    try:
+        tournaments = get_archived_tournaments()
+        leagues = get_archived_leagues()
+        players_data = load_players()
+        
+        # Calculate activity over time (last 6 months)
+        activity_data = {
+            'labels': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+            'tournaments': [2, 4, 3, 5, 6, 4],  # This should be calculated from actual data
+            'leagues': [1, 1, 2, 1, 2, 1]
+        }
+        
+        # Calculate tournament type distribution
+        type_distribution = {'20_targets': 0, '40_targets': 0}
+        for tournament in tournaments:
+            tournament_type = tournament.get('tournament_type', '20_targets')
+            type_distribution[tournament_type] += 1
+        
+        for league in leagues:
+            league_type = league.get('tournament_type', '20_targets')
+            type_distribution[league_type] += 1
+        
+        stats = {
+            'overview': {
+                'total_tournaments': len(tournaments),
+                'total_leagues': len(leagues),
+                'total_players': len([p for p in players_data['players'] if p['enabled']]),
+                'total_matches': len(tournaments) + sum(l.get('completed_tournaments', 0) for l in leagues)
+            },
+            'activity_data': activity_data,
+            'type_distribution': {
+                'labels': ['20 Targets', '40 Targets'],
+                'data': [type_distribution['20_targets'], type_distribution['40_targets']]
+            }
+        }
+        
+        return jsonify({'status': 'success', 'stats': stats})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+@app.route('/api/archive/player/<int:player_id>/performance', methods=['GET'])
+def api_get_player_performance(player_id):
+    """API endpoint to get player performance data for charts"""
+    try:
+        archives_data = {
+            'tournaments': get_archived_tournaments(),
+            'leagues': get_archived_leagues()
+        }
+        
+        player_stats = analyze_player_performance(player_id, archives_data)
+        
+        # Prepare chart data
+        performance_data = {
+            'trend': {
+                'labels': [f'T{i+1}' for i in range(len(player_stats['tournament_scores']))],
+                'data': player_stats['tournament_scores']
+            },
+            'distribution': {
+                'labels': ['0-50', '51-60', '61-70', '71-80', '81-90', '91-100'],
+                'data': [0, 0, 0, 0, 0, 0]
+            }
+        }
+        
+        # Calculate score distribution
+        for score in player_stats['tournament_scores']:
+            if score <= 50:
+                performance_data['distribution']['data'][0] += 1
+            elif score <= 60:
+                performance_data['distribution']['data'][1] += 1
+            elif score <= 70:
+                performance_data['distribution']['data'][2] += 1
+            elif score <= 80:
+                performance_data['distribution']['data'][3] += 1
+            elif score <= 90:
+                performance_data['distribution']['data'][4] += 1
+            else:
+                performance_data['distribution']['data'][5] += 1
+        
+        return jsonify({'status': 'success', 'performance': performance_data})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+@app.route('/api/archive/players/with-stats', methods=['GET'])
+def api_get_players_with_stats():
+    """API endpoint to get all players with their basic stats"""
+    try:
+        all_players = get_all_players_from_archives()
+        archives_data = {
+            'tournaments': get_archived_tournaments(),
+            'leagues': get_archived_leagues()
+        }
+        
+        players_with_stats = []
+        for player in all_players:
+            player_stats = analyze_player_performance(player['id'], archives_data)
+            
+            players_with_stats.append({
+                'id': player['id'],
+                'name': player['name'],
+                'current_player': player['current_player'],
+                'stats': {
+                    'total_tournaments': player_stats['total_tournaments'],
+                    'total_leagues': player_stats['total_leagues'],
+                    'best_tournament_score': player_stats['best_tournament_score'],
+                    'average_tournament_score': player_stats['average_tournament_score'],
+                    'total_shots_fired': player_stats['total_shots_fired'],
+                    'performance_trend': player_stats['tournament_scores'][-8:] if len(player_stats['tournament_scores']) >= 8 else player_stats['tournament_scores']  # Last 8 tournaments for mini chart
+                }
+            })
+        
+        return jsonify({'status': 'success', 'players': players_with_stats})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+# Add these routes to handle clicking on archived tournaments/leagues
+# These will load the archive data and show it in your existing result page format
+
+@app.route('/archive/tournament/<filename>')
+def view_archived_tournament(filename):
+    """View archived tournament in results format"""
+    if is_mobile_device():
+        return redirect(f'/mobile/archive/tournament/{filename}')
+    
+    filepath = os.path.join(ARCHIVE_DIR, filename)
+    data = load_archive_file(filepath)
+    
+    if not data:
+        return redirect('/archive')
+    
+    tournament_data = data.get('tournament', {})
+    results_data = data.get('results', {})
+    
+    # Process results for display
+    participants = []
+    for player_id, participant_data in results_data.get('participants', {}).items():
+        participants.append({
+            'id': player_id,
+            'name': participant_data['name'],
+            'total_score': participant_data['total_score'],
+            'completed': participant_data['completed'],
+            'targets': participant_data.get('targets', {})
+        })
+    
+    # Sort by score (descending)
+    participants.sort(key=lambda x: x['total_score'], reverse=True)
+    
+    # Add rankings
+    for i, participant in enumerate(participants):
+        participant['rank'] = i + 1
+    
+    # Use the existing results display template but with archived data
+    return render_template('results_display.html',
+                         results=results_data,
+                         participants=participants,
+                         archived=True,
+                         archive_info={
+                             'filename': filename,
+                             'archived_at': data.get('archived_at'),
+                             'tournament_type': tournament_data.get('tournament_type', '20_targets')
+                         })
+
+@app.route('/archive/league/<filename>')
+def view_archived_league(filename):
+    """View archived league in results format"""
+    if is_mobile_device():
+        return redirect(f'/mobile/archive/league/{filename}')
+    
+    filepath = os.path.join(LEAGUE_ARCHIVE_DIR, filename)
+    data = load_archive_file(filepath)
+    
+    if not data:
+        return redirect('/archive')
+    
+    league_data = data.get('league', {})
+    
+    # Process league results using your existing function
+    calculate_league_final_scores(league_data)
+    participants = get_league_final_rankings(league_data)
+    
+    # Use the existing league results display template but with archived data
+    return render_template('league_scoreboard_display.html',
+                         league=league_data,
+                         participants=participants,
+                         archived=True,
+                         archive_info={
+                             'filename': filename,
+                             'archived_at': data.get('archived_at'),
+                             'tournament_type': league_data.get('tournament_type', '20_targets')
+                         })
+
+# Mobile versions
+@app.route('/mobile/archive/tournament/<filename>')
+def mobile_view_archived_tournament(filename):
+    """Mobile view of archived tournament"""
+    filepath = os.path.join(ARCHIVE_DIR, filename)
+    data = load_archive_file(filepath)
+    
+    if not data:
+        return redirect('/mobile/archive')
+    
+    tournament_data = data.get('tournament', {})
+    results_data = data.get('results', {})
+    
+    # Process results for display
+    participants = []
+    for player_id, participant_data in results_data.get('participants', {}).items():
+        participants.append({
+            'id': player_id,
+            'name': participant_data['name'],
+            'total_score': participant_data['total_score'],
+            'completed': participant_data['completed']
+        })
+    
+    # Sort by score (descending)
+    participants.sort(key=lambda x: x['total_score'], reverse=True)
+    
+    # Add rankings
+    for i, participant in enumerate(participants):
+        participant['rank'] = i + 1
+    
+    return render_template('mobile_results.html',
+                         results=results_data,
+                         participants=participants,
+                         show_league_results=False,
+                         show_tournament_results=True,
+                         tournament_active=False,
+                         league=None,
+                         tournament_type=results_data.get('tournament_type', '20_targets'),
+                         archived=True,
+                         archive_info={
+                             'filename': filename,
+                             'archived_at': data.get('archived_at')
+                         })
+
+@app.route('/mobile/archive/league/<filename>')
+def mobile_view_archived_league(filename):
+    """Mobile view of archived league"""
+    filepath = os.path.join(LEAGUE_ARCHIVE_DIR, filename)
+    data = load_archive_file(filepath)
+    
+    if not data:
+        return redirect('/mobile/archive')
+    
+    league_data = data.get('league', {})
+    
+    # Process league results
+    calculate_league_final_scores(league_data)
+    participants = get_league_final_rankings(league_data)
+    
+    return render_template('mobile_results.html',
+                         league=league_data,
+                         participants=participants,
+                         show_league_results=True,
+                         show_tournament_results=False,
+                         tournament_active=False,
+                         results=None,
+                         archived=True,
+                         archive_info={
+                             'filename': filename,
+                             'archived_at': data.get('archived_at')
+                         })
+# MAIN ROUTES
+@app.route('/')
+def index():
+    # Redirect mobile users to mobile menu
+    if is_mobile_device():
+        return redirect('/mobile')
+    
+    # Desktop users get the regular dashboard
+    settings = load_settings()
+    
+    # Check if tournament is active and get current round players
+    current_round_data = get_current_round_data()
+    
+    # If tournament is active, override camera titles with player names
+    if current_round_data:
+        tournament_titles = {}
+        players = current_round_data['players']
+        
+        for i in range(6):  # Always 6 positions
+            if i < len(players):
+                tournament_titles[str(i + 1)] = players[i]['name']
+            else:
+                tournament_titles[str(i + 1)] = 'Empty'
+        
+        # Create a copy of settings with tournament titles
+        display_settings = settings.copy()
+        display_settings['camera_titles'] = tournament_titles
+        display_settings['tournament_active'] = True
+        
+        tournament_state = load_tournament_state()
+        display_settings['current_round'] = tournament_state.get('current_round', 1)
+        display_settings['total_rounds'] = tournament_state.get('total_rounds', 1)
+        
+        # Add league info if available
+        league_state = load_league_state()
+        if league_state:
+            display_settings['league_active'] = True
+            display_settings['league_tournament'] = league_state.get('current_tournament', 1)
+            display_settings['league_total'] = league_state.get('total_tournaments', 6)
+    else:
+        display_settings = settings.copy()
+        display_settings['tournament_active'] = False
+        display_settings['current_round'] = 1
+        display_settings['total_rounds'] = 1
+        display_settings['league_active'] = False
+    
+    return render_template('index.html', streams=STREAMS, settings=display_settings)
+
+# MOBILE ROUTES
+@app.route('/mobile')
+def mobile_menu():
+    """Mobile main menu page"""
+    tournament_state = load_tournament_state()
+    league_state = load_league_state()
+    results = load_results()
+    
+    tournament_active = tournament_state is not None
+    league_active = league_state is not None and not league_state.get('league_finished', False)
+    results_available = results is not None and results.get('tournament_finished', False)
+    league_results_available = league_state is not None and league_state.get('league_finished', False)
+    
+    return render_template('mobile_menu.html', 
+                         tournament_active=tournament_active,
+                         league_active=league_active,
+                         tournament_state=tournament_state,
+                         league_state=league_state,
+                         results_available=results_available,
+                         league_results_available=league_results_available)
+
+@app.route('/mobile/streams')
+def mobile_streams():
+    """Mobile streams page"""
+    settings = load_settings()
+    tournament_state = load_tournament_state()
+    
+    # Check if tournament is active
+    tournament_active = tournament_state is not None
+    current_round_data = get_current_round_data() if tournament_active else None
+    
+    return render_template('mobile_streams.html', 
+                         streams=STREAMS, 
+                         settings=settings,
+                         tournament_active=tournament_active,
+                         current_round_data=current_round_data,
+                         tournament_state=tournament_state)
+
+@app.route('/mobile/draft')
+def mobile_draft():
+    """Mobile tournament draft page"""
+    tournament_state = load_tournament_state()
+    league_state = load_league_state()
+    if not tournament_state:
+        return redirect('/mobile')
+    
+    return render_template('mobile_draft.html', 
+                         tournament=tournament_state,
+                         league=league_state)
+
+
+@app.route('/mobile/results')
+def mobile_results():
+    """Mobile results page"""
+    league_state = load_league_state()
+    results = load_results()
+    
+    # Priority 1: Show league results if there's an active or finished league
+    if league_state:
+        if league_state.get('league_finished', False):
+            # Show final league results
+            calculate_league_final_scores(league_state)
+            participants = get_league_final_rankings(league_state)
+            
+            return render_template('mobile_results.html',
+                                 league=league_state,
+                                 participants=participants,
+                                 show_league_results=True,
+                                 show_tournament_results=False,
+                                 tournament_active=False,
+                                 results=None)  # No individual tournament results
+        else:
+            # Show ongoing league scoreboard
+            calculate_league_final_scores(league_state)
+            participants = get_league_current_standings(league_state)
+            
+            # Check if there's a current tournament
+            tournament_state = load_tournament_state()
+            tournament_active = tournament_state is not None
+            current_tournament_results = results
+            
+            return render_template('mobile_league_results.html',
+                                 league=league_state,
+                                 participants=participants,
+                                 show_league_results=True,
+                                 show_tournament_results=False,
+                                 tournament_active=tournament_active,
+                                 tournament_state=tournament_state,
+                                 current_tournament_results=current_tournament_results)
+    
+    # Priority 2: Show individual tournament results (standalone tournament)
+    elif results and results.get('tournament_finished', False):
+        participants = []
+        for player_id, data in results['participants'].items():
+            participants.append({
+                'id': player_id,
+                'name': data['name'],
+                'total_score': data['total_score'],
+                'completed': data['completed']
+            })
+        
+        # Sort by score (descending)
+        participants.sort(key=lambda x: x['total_score'], reverse=True)
+        
+        # Add rankings
+        for i, participant in enumerate(participants):
+            participant['rank'] = i + 1
+        
+        return render_template('mobile_results.html',
+                             results=results,  # ← FIXED: Pass as 'results'
+                             participants=participants,
+                             show_league_results=False,
+                             show_tournament_results=True,
+                             tournament_active=False,
+                             league=None,
+                             tournament_type=results.get('tournament_type', '20_targets'))
+    else:
+        return redirect('/mobile')
+
+# DESKTOP ROUTES
+@app.route('/fullscreen/<int:camera_id>')
+def fullscreen(camera_id):
+    # Get the camera stream data
+    if 1 <= camera_id <= len(STREAMS):
+        settings = load_settings()
+        stream = STREAMS[camera_id - 1]
+        
+        # Check if tournament is active for title
+        current_round_data = get_current_round_data()
+        if current_round_data and camera_id <= len(current_round_data['players']):
+            camera_title = current_round_data['players'][camera_id - 1]['name']
+        else:
+            camera_title = settings['camera_titles'].get(str(camera_id), f'Camera {camera_id}')
+        
+        custom_title = request.args.get('title', camera_title)
+        
+        return render_template('fullscreen.html', 
+                             stream=stream, 
+                             camera_id=camera_id,
+                             title=custom_title,
+                             settings=settings)
+    else:
+        return redirect('/')
+
+@app.route('/tournament')
+def tournament():
+    """Tournament management page"""
+    # Check if mobile device
+    if is_mobile_device():
+        tournament_state = load_tournament_state()
+        league_state = load_league_state()
+        if tournament_state:
+            # Mobile users with active tournament go to draft view
+            return redirect('/mobile/draft')
+        else:
+            # Mobile users without tournament go to mobile menu
+            return redirect('/mobile')
+    
+    # Desktop users get full tournament management
+    players_data = load_players()
+    tournament_state = load_tournament_state()
+    league_state = load_league_state()
+    
+    return render_template('tournament.html', 
+                         players=players_data['players'],
+                         tournament_state=tournament_state,
+                         league_state=league_state)
+
+@app.route('/tournament/draft')
+def tournament_draft():
+    """Tournament draft page"""
+    # Redirect mobile users to mobile draft
+    if is_mobile_device():
+        return redirect('/mobile/draft')
+    
+    tournament_state = load_tournament_state()
+    league_state = load_league_state()
+    if not tournament_state:
+        return redirect('/tournament')
+    
+    return render_template('draft.html', 
+                         tournament=tournament_state,
+                         league=league_state)
+
+@app.route('/results/calculator')
+def results_calculator():
+    """Results calculator page (desktop only)"""
+    if is_mobile_device():
+        return redirect('/mobile/streams')
+    
+    tournament_state = load_tournament_state()
+    if not tournament_state:
+        return redirect('/tournament')
+    
+    # Get or create results structure
+    results = load_results()
+    if not results:
+        results = create_results_structure(tournament_state)
+        save_results(results)
+    
+    return render_template('results_calculator.html', 
+                         tournament=tournament_state,
+                         results=results)
+
+@app.route('/results')
+def results_display():
+    """Results display page"""
+    # Redirect mobile users to mobile results
+    if is_mobile_device():
+        return redirect('/mobile/results')
+    
+    league_state = load_league_state()
+    results = load_results()
+    
+    # Priority 1: Show league results if there's an active or finished league
+    if league_state:
+        if league_state.get('league_finished', False):
+            # Show final league results
+            calculate_league_final_scores(league_state)
+            participants = get_league_final_rankings(league_state)
+            
+            return render_template('league_scoreboard_display.html',
+                                 league=league_state,
+                                 participants=participants)
+        else:
+            # Show ongoing league scoreboard
+            calculate_league_final_scores(league_state)  # Calculate current standings
+            participants = get_league_current_standings(league_state)  # Use the helper function
+            
+            # Add tournament information
+            tournament_state = load_tournament_state()
+            current_tournament_results = results
+            
+            return render_template('league_scoreboard_display.html',
+                                 league=league_state,
+                                 participants=participants,
+                                 tournament_state=tournament_state,
+                                 current_tournament_results=current_tournament_results)
+    
+    # Priority 2: Show individual tournament results (standalone tournament)
+    elif results and results.get('tournament_finished', False):
+        participants = []
+        for player_id, data in results['participants'].items():
+            participants.append({
+                'id': player_id,
+                'name': data['name'],
+                'total_score': data['total_score'],
+                'completed': data['completed']
+            })
+        
+        # Sort by score (descending)
+        participants.sort(key=lambda x: x['total_score'], reverse=True)
+        
+        # Add rankings
+        for i, participant in enumerate(participants):
+            participant['rank'] = i + 1
+        
+        return render_template('results_display.html', 
+                             results=results,
+                             participants=participants)
+    else:
+        return redirect('/tournament')
+
+# API Routes
+@app.route('/api/settings', methods=['GET'])
+def get_settings():
+    """API endpoint to get current settings"""
+    settings = load_settings()
+    return jsonify(settings)
+
+@app.route('/api/settings', methods=['POST'])
+def update_settings():
+    """API endpoint to update settings"""
+    try:
+        new_settings = request.get_json()
+        
+        # Load current settings
+        current_settings = load_settings()
+        
+        # Update only provided fields
+        if 'camera_titles' in new_settings:
+            current_settings['camera_titles'].update(new_settings['camera_titles'])
+        
+        if 'display_options' in new_settings:
+            current_settings['display_options'].update(new_settings['display_options'])
+        
+        # Save updated settings
+        if save_settings(current_settings):
+            return jsonify({'status': 'success', 'settings': current_settings})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save settings'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/players', methods=['GET'])
+def get_players():
+    """API endpoint to get all players"""
+    players_data = load_players()
+    return jsonify(players_data)
+
+@app.route('/api/players', methods=['POST'])
+def update_players():
+    """API endpoint to update players"""
+    try:
+        players_data = request.get_json()
+        
+        if save_players(players_data):
+            return jsonify({'status': 'success', 'players': players_data})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save players'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/players/add', methods=['POST'])
+def add_player():
+    """API endpoint to add a new player"""
+    try:
+        data = request.get_json()
+        name = data.get('name', '').strip()
+        
+        if not name:
+            return jsonify({'status': 'error', 'message': 'Player name is required'}), 400
+        
+        players_data = load_players()
+        
+        # Find next available ID
+        existing_ids = [p['id'] for p in players_data['players']]
+        new_id = max(existing_ids) + 1 if existing_ids else 1
+        
+        # Add new player
+        new_player = {
+            'id': new_id,
+            'name': name,
+            'enabled': True
+        }
+        
+        players_data['players'].append(new_player)
+        
+        if save_players(players_data):
+            return jsonify({'status': 'success', 'player': new_player})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save player'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/players/<int:player_id>/delete', methods=['POST'])
+def delete_player(player_id):
+    """API endpoint to delete a player"""
+    try:
+        players_data = load_players()
+        
+        # Find and remove the player
+        players_data['players'] = [p for p in players_data['players'] if p['id'] != player_id]
+        
+        if save_players(players_data):
+            return jsonify({'status': 'success'})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save players'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/players/<int:player_id>', methods=['POST'])
+def update_player(player_id):
+    """API endpoint to update a single player"""
+    try:
+        data = request.get_json()
+        players_data = load_players()
+        
+        # Find and update the player
+        for player in players_data['players']:
+            if player['id'] == player_id:
+                if 'name' in data:
+                    player['name'] = data['name']
+                if 'enabled' in data:
+                    player['enabled'] = data['enabled']
+                break
+        
+        if save_players(players_data):
+            return jsonify({'status': 'success', 'player': player})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save player'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+# LEAGUE API ROUTES
+@app.route('/api/league/start', methods=['POST'])
+def start_league():
+    """API endpoint to start a new league"""
+    try:
+        data = request.get_json()
+        tournament_type = data.get('tournament_type', '20_targets')
+        
+        if tournament_type not in ['20_targets', '40_targets']:
+            return jsonify({'status': 'error', 'message': 'Invalid tournament type'}), 400
+        
+        players_data = load_players()
+        enabled_players = [p for p in players_data['players'] if p['enabled']]
+        
+        if len(enabled_players) < 1:
+            return jsonify({'status': 'error', 'message': 'Need at least 1 enabled player'}), 400
+        
+        league_data = create_league(enabled_players, tournament_type)
+        
+        if save_league_state(league_data):
+            return jsonify({'status': 'success', 'league': league_data})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save league'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/league/tournament/start', methods=['POST'])
+def start_league_tournament():
+    """API endpoint to start next tournament in league"""
+    try:
+        league_state = load_league_state()
+        if not league_state:
+            return jsonify({'status': 'error', 'message': 'No active league'}), 400
+        
+        if league_state.get('league_finished', False):
+            return jsonify({'status': 'error', 'message': 'League already finished'}), 400
+        
+        current_tournament = league_state.get('current_tournament', 0)
+        if current_tournament >= league_state['total_tournaments']:
+            return jsonify({'status': 'error', 'message': 'All tournaments completed'}), 400
+        
+        # Get players for this tournament (excluding joker users for this round)
+        data = request.get_json() or {}
+        joker_players = data.get('joker_players', [])  # List of player IDs using joker
+        
+        # Update joker usage in league
+        for player_id in joker_players:
+            player_id_str = str(player_id)
+            if player_id_str in league_state['participants']:
+                if league_state['participants'][player_id_str]['joker_used']:
+                    return jsonify({'status': 'error', 'message': f'Player {player_id} already used joker'}), 400
+                league_state['participants'][player_id_str]['joker_used'] = True
+        
+        # Create list of participating players (not using joker)
+        participating_players = []
+        for player_id, participant in league_state['participants'].items():
+            if int(player_id) not in joker_players:
+                participating_players.append({
+                    'id': int(player_id),
+                    'name': participant['name']
+                })
+        
+        if len(participating_players) < 1:
+            return jsonify({'status': 'error', 'message': 'Need at least 1 participating player'}), 400
+        
+        # Start next tournament
+        league_state['current_tournament'] = current_tournament + 1
+        tournament_data = create_draft(
+            participating_players, 
+            league_state['tournament_type'],
+            league_state['current_tournament']
+        )
+        
+        # Save states
+        save_league_state(league_state)
+        
+        if save_tournament_state(tournament_data):
+            # Create results structure
+            results = create_results_structure(tournament_data)
+            save_results(results)
+            
+            return jsonify({
+                'status': 'success', 
+                'tournament': tournament_data,
+                'league': league_state
+            })
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save tournament'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/league/reset', methods=['POST'])
+def reset_league():
+    """API endpoint to reset/clear league"""
+    try:
+        # Archive current league if it exists
+        league_state = load_league_state()
+        if league_state:
+            archive_league(league_state)
+        
+        # Remove league, tournament, and results files
+        for file_path in [LEAGUE_FILE, TOURNAMENT_FILE, RESULTS_FILE]:
+            if os.path.exists(file_path):
+                os.remove(file_path)
+        
+        return jsonify({'status': 'success'})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+# TOURNAMENT API ROUTES (Updated)
+@app.route('/api/tournament/start', methods=['POST'])
+def start_tournament():
+    """API endpoint to start a standalone tournament"""
+    try:
+        data = request.get_json() or {}
+        tournament_type = data.get('tournament_type', '20_targets')
+        
+        if tournament_type not in ['20_targets', '40_targets']:
+            return jsonify({'status': 'error', 'message': 'Invalid tournament type'}), 400
+        
+        players_data = load_players()
+        enabled_players = [p for p in players_data['players'] if p['enabled']]
+        
+        if len(enabled_players) < 1:
+            return jsonify({'status': 'error', 'message': 'Need at least 1 enabled player'}), 400
+        
+        tournament_data = create_draft(enabled_players, tournament_type)
+        
+        if save_tournament_state(tournament_data):
+            # Create results structure when tournament starts
+            results = create_results_structure(tournament_data)
+            save_results(results)
+            
+            return jsonify({'status': 'success', 'tournament': tournament_data})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save tournament'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/tournament/round/<int:round_number>', methods=['POST'])
+def change_round(round_number):
+    """API endpoint to change current round"""
+    try:
+        tournament_state = load_tournament_state()
+        if not tournament_state:
+            return jsonify({'status': 'error', 'message': 'No active tournament'}), 400
+        
+        if round_number < 1 or round_number > tournament_state['total_rounds']:
+            return jsonify({'status': 'error', 'message': 'Invalid round number'}), 400
+        
+        tournament_state['current_round'] = round_number
+        
+        # Update round statuses
+        for round_data in tournament_state['rounds']:
+            if round_data['round_number'] < round_number:
+                round_data['status'] = 'completed'
+            elif round_data['round_number'] == round_number:
+                round_data['status'] = 'pending'
+            else:
+                round_data['status'] = 'waiting'
+        
+        if save_tournament_state(tournament_state):
+            return jsonify({'status': 'success', 'tournament': tournament_state})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save tournament'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/tournament/reset', methods=['POST'])
+def reset_tournament():
+    """API endpoint to reset/clear tournament"""
+    try:
+        if os.path.exists(TOURNAMENT_FILE):
+            os.remove(TOURNAMENT_FILE)
+        if os.path.exists(RESULTS_FILE):
+            os.remove(RESULTS_FILE)
+        return jsonify({'status': 'success'})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+# RESULTS API Routes (Updated)
+@app.route('/api/results/participant/<int:player_id>', methods=['POST'])
+def update_participant_scores(player_id):
+    """API endpoint to update participant scores"""
+    try:
+        data = request.get_json()
+        results = load_results()
+        
+        if not results:
+            return jsonify({'status': 'error', 'message': 'No results data found'}), 400
+        
+        player_id_str = str(player_id)
+        if player_id_str not in results['participants']:
+            return jsonify({'status': 'error', 'message': 'Player not found'}), 400
+        
+        # Update scores
+        if 'targets' in data:
+            results['participants'][player_id_str]['targets'].update(data['targets'])
+        
+        # Recalculate total score
+        targets = results['participants'][player_id_str]['targets']
+        total_score = calculate_total_score(targets)
+        results['participants'][player_id_str]['total_score'] = total_score
+        
+        # Check if all targets are completed (all shots entered, including 0s)
+        all_completed = is_participant_completed(targets)
+        results['participants'][player_id_str]['completed'] = all_completed
+        
+        if save_results(results):
+            return jsonify({'status': 'success', 'participant': results['participants'][player_id_str]})
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save results'}), 500
+            
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/results/finish', methods=['POST'])
+def finish_tournament():
+    """API endpoint to finish tournament"""
+    try:
+        results = load_results()
+        tournament_state = load_tournament_state()
+        league_state = load_league_state()
+        
+        if not results:
+            return jsonify({'status': 'error', 'message': 'No results data found'}), 400
+        
+        if not tournament_state:
+            return jsonify({'status': 'error', 'message': 'No active tournament found'}), 400
+        
+        # Check if all participants are completed
+        all_completed = all(
+            participant['completed'] 
+            for participant in results['participants'].values()
+        )
+        
+        if not all_completed:
+            return jsonify({'status': 'error', 'message': 'Not all participants have completed scores'}), 400
+        
+        # Mark tournament as finished
+        results['tournament_finished'] = True
+        results['finished_at'] = datetime.now().isoformat()
+        
+        league_finished = False  # Track if league finished
+        
+        # Update league state if this is a league tournament
+        if league_state and 'league_tournament_number' in results:
+            tournament_number = results['league_tournament_number']
+            
+            # Update league with tournament results
+            for player_id, participant in results['participants'].items():
+                if player_id in league_state['participants']:
+                    league_participant = league_state['participants'][player_id]
+                    
+                    # Add tournament result
+                    league_participant['tournament_results'].append({
+                        'tournament': tournament_number,
+                        'score': participant['total_score'],
+                        'participated': True
+                    })
+                    
+                    # Update total score
+                    league_participant['total_score'] += participant['total_score']
+            
+            # Add results for players who used joker (didn't participate)
+            for player_id, participant in league_state['participants'].items():
+                if player_id not in results['participants']:
+                    # This player used joker
+                    participant['tournament_results'].append({
+                        'tournament': tournament_number,
+                        'score': 0,
+                        'participated': False,
+                        'joker': True
+                    })
+            
+            # Add to completed tournaments
+            league_state['completed_tournaments'].append({
+                'tournament_number': tournament_number,
+                'finished_at': datetime.now().isoformat(),
+                'results_summary': {
+                    'participants': len(results['participants']),
+                    'total_shots': len(results['participants']) * (40 if results.get('tournament_type') == '40_targets' else 20) * 2
+                }
+            })
+            
+            # Check if league is finished
+            if tournament_number >= league_state['total_tournaments']:
+                league_state['league_finished'] = True
+                league_state['finished_at'] = datetime.now().isoformat()
+                
+                # Calculate final scores
+                calculate_league_final_scores(league_state)
+                
+                league_finished = True
+                print("League finished!")
+            
+            save_league_state(league_state)
+        
+        # Archive the tournament (only if it's NOT part of a league)
+        archive_success = False
+        if not league_state:  # Only archive standalone tournaments
+            archive_success = archive_tournament(tournament_state, results)
+            print(f"Standalone tournament archived: {archive_success}")
+        else:
+            print("League tournament - not archiving individual tournament")
+        
+        # Archive the league if it just finished
+        league_archive_success = False
+        if league_finished and league_state:
+            league_archive_success = archive_league(league_state)
+            print(f"League archived: {league_archive_success}")
+        
+        # Save final results
+        if save_results(results):
+            # End the tournament by removing tournament state
+            if os.path.exists(TOURNAMENT_FILE):
+                os.remove(TOURNAMENT_FILE)
+            
+            # If league finished, also remove league state file
+            if league_finished and os.path.exists(LEAGUE_FILE):
+                os.remove(LEAGUE_FILE)
+            
+            response_data = {
+                'status': 'success', 
+                'results': results,
+                'archived': archive_success,
+                'league_archived': league_archive_success if league_finished else None
+            }
+            
+            if league_state:
+                response_data['league'] = league_state
+                response_data['league_finished'] = league_state.get('league_finished', False)
+            
+            return jsonify(response_data)
+        else:
+            return jsonify({'status': 'error', 'message': 'Failed to save results'}), 500
+            
+    except Exception as e:
+        print(f"Error finishing tournament: {e}")
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/results', methods=['GET'])
+def get_results():
+    """API endpoint to get current results"""
+    results = load_results()
+    if results:
+        return jsonify(results)
+    else:
+        return jsonify({'status': 'error', 'message': 'No results found'}), 404
+
+@app.route('/api/league', methods=['GET'])
+def get_league():
+    """API endpoint to get current league state"""
+    league_state = load_league_state()
+    if league_state:
+        return jsonify(league_state)
+    else:
+        return jsonify({'status': 'error', 'message': 'No league found'}), 404
+    
+# Add this route to your Flask app (around line 850, with the other mobile routes)
+
+@app.route('/mobile/remote')
+def mobile_remote():
+    """Mobile remote control page"""
+    # This page doesn't redirect mobile users - it's specifically for mobile control
+    tournament_state = load_tournament_state()
+    league_state = load_league_state()
+    results = load_results()
+    
+    return render_template('mobile_remote.html', 
+                         tournament_state=tournament_state,
+                         league_state=league_state,
+                         results=results)
+
+# Add these API endpoints for the remote control functionality
+
+@app.route('/api/tournament', methods=['GET'])
+def get_tournament():
+    """API endpoint to get current tournament state"""
+    tournament_state = load_tournament_state()
+    if tournament_state:
+        return jsonify(tournament_state)
+    else:
+        return jsonify({'status': 'error', 'message': 'No tournament found'}), 404
+
+@app.route('/api/remote/refresh_dashboard', methods=['POST'])
+def refresh_dashboard():
+    """API endpoint to trigger dashboard refresh"""
+    try:
+        # You could add logic here to trigger refresh on connected clients
+        # For now, just return success
+        return jsonify({'status': 'success', 'message': 'Refresh signal sent'})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/remote/system_info', methods=['GET'])
+def get_system_info():
+    """API endpoint to get comprehensive system information"""
+    try:
+        tournament_state = load_tournament_state()
+        league_state = load_league_state()
+        results = load_results()
+        players_data = load_players()
+        settings = load_settings()
+        
+        system_info = {
+            'timestamp': datetime.now().isoformat(),
+            'tournament': {
+                'active': tournament_state is not None,
+                'data': tournament_state
+            },
+            'league': {
+                'active': league_state is not None and not league_state.get('league_finished', False),
+                'finished': league_state is not None and league_state.get('league_finished', False),
+                'data': league_state
+            },
+            'results': {
+                'available': results is not None,
+                'finished': results is not None and results.get('tournament_finished', False),
+                'data': results
+            },
+            'players': {
+                'total': len(players_data['players']) if players_data else 0,
+                'enabled': len([p for p in players_data['players'] if p['enabled']]) if players_data else 0
+            },
+            'settings': settings
+        }
+        
+        return jsonify(system_info)
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/remote/emergency_reset', methods=['POST'])
+def emergency_reset():
+    """API endpoint for emergency system reset"""
+    try:
+        # Archive current states before reset
+        tournament_state = load_tournament_state()
+        league_state = load_league_state()
+        results = load_results()
+        
+        if tournament_state and results:
+            archive_tournament(tournament_state, results)
+        
+        if league_state:
+            archive_league(league_state)
+        
+        # Remove all state files
+        for file_path in [LEAGUE_FILE, TOURNAMENT_FILE, RESULTS_FILE]:
+            if os.path.exists(file_path):
+                os.remove(file_path)
+        
+        return jsonify({
+            'status': 'success', 
+            'message': 'Emergency reset completed',
+            'archived': True
+        })
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+@app.route('/api/remote/camera_titles', methods=['GET'])
+def get_camera_titles():
+    """API endpoint to get camera titles"""
+    try:
+        settings = load_settings()
+        current_round_data = get_current_round_data()
+        
+        titles = {}
+        
+        if current_round_data:
+            # Tournament active - use player names
+            players = current_round_data['players']
+            for i in range(6):
+                if i < len(players):
+                    titles[str(i + 1)] = players[i]['name']
+                else:
+                    titles[str(i + 1)] = 'Empty'
+        else:
+            # No tournament - use configured titles
+            titles = settings['camera_titles']
+        
+        return jsonify({
+            'status': 'success',
+            'titles': titles,
+            'tournament_active': current_round_data is not None
+        })
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 400
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)
\ No newline at end of file
diff --git a/TV_APP_V2/camera_settings.json b/TV_APP_V2/camera_settings.json
new file mode 100644
index 0000000..77f9c86
--- /dev/null
+++ b/TV_APP_V2/camera_settings.json
@@ -0,0 +1,14 @@
+{
+  "camera_titles": {
+    "1": "Camera 1",
+    "2": "Camera 2",
+    "3": "Camera 3",
+    "4": "Camera 4",
+    "5": "Camera 5",
+    "6": "Camera 6"
+  },
+  "display_options": {
+    "show_titles": true,
+    "title_size": 0.8
+  }
+}
\ No newline at end of file
diff --git a/TV_APP_V2/players.json b/TV_APP_V2/players.json
new file mode 100644
index 0000000..4ba1638
--- /dev/null
+++ b/TV_APP_V2/players.json
@@ -0,0 +1,224 @@
+{
+  "players": [
+    {
+      "id": 1,
+      "name": "Domen Pleterski",
+      "enabled": true
+    },
+    {
+      "id": 2,
+      "name": "Nik Pleterski",
+      "enabled": true
+    },
+    {
+      "id": 3,
+      "name": "Ivan Tandler",
+      "enabled": true
+    },
+    {
+      "id": 4,
+      "name": "Mateja Pleterski",
+      "enabled": true
+    },
+    {
+      "id": 5,
+      "name": "Jo\u017ee Verhnjak",
+      "enabled": false
+    },
+    {
+      "id": 6,
+      "name": "Mateja Senica",
+      "enabled": false
+    },
+    {
+      "id": 7,
+      "name": "Branko Poker\u017enik",
+      "enabled": false
+    },
+    {
+      "id": 8,
+      "name": "Franc \u017digart",
+      "enabled": false
+    },
+    {
+      "id": 9,
+      "name": "Janez Bo\u017ei\u010d",
+      "enabled": false
+    },
+    {
+      "id": 10,
+      "name": "Mitja \u010ceh",
+      "enabled": false
+    },
+    {
+      "id": 11,
+      "name": "Rado Kefer",
+      "enabled": false
+    },
+    {
+      "id": 12,
+      "name": "Matej Kvasnik",
+      "enabled": false
+    },
+    {
+      "id": 13,
+      "name": "Angelca Mrak",
+      "enabled": false
+    },
+    {
+      "id": 14,
+      "name": "Karli Proje",
+      "enabled": false
+    },
+    {
+      "id": 15,
+      "name": "Jan Pleterski",
+      "enabled": false
+    },
+    {
+      "id": 16,
+      "name": "Silvo Poro\u010dnik",
+      "enabled": false
+    },
+    {
+      "id": 17,
+      "name": "Du\u0161an Onuk",
+      "enabled": false
+    },
+    {
+      "id": 18,
+      "name": "Matja\u017e Pleterski",
+      "enabled": false
+    },
+    {
+      "id": 19,
+      "name": "Franc Rizmal",
+      "enabled": false
+    },
+    {
+      "id": 20,
+      "name": "Jo\u017ee Preglav",
+      "enabled": false
+    },
+    {
+      "id": 21,
+      "name": "Marko Blimen",
+      "enabled": false
+    },
+    {
+      "id": 22,
+      "name": "Doris Fesel",
+      "enabled": false
+    },
+    {
+      "id": 23,
+      "name": "Robi Krautberger",
+      "enabled": false
+    },
+    {
+      "id": 24,
+      "name": "Jo\u017ee Verdinek",
+      "enabled": false
+    },
+    {
+      "id": 25,
+      "name": "Andrej Herman",
+      "enabled": false
+    },
+    {
+      "id": 26,
+      "name": "Jakob Herman",
+      "enabled": false
+    },
+    {
+      "id": 27,
+      "name": "Janez Mrak",
+      "enabled": false
+    },
+    {
+      "id": 28,
+      "name": "An\u017ee Kolar",
+      "enabled": false
+    },
+    {
+      "id": 29,
+      "name": "Alen Kolar",
+      "enabled": false
+    },
+    {
+      "id": 30,
+      "name": "Maja Hirtl",
+      "enabled": false
+    },
+    {
+      "id": 31,
+      "name": "Dejan Ku\u010dnik",
+      "enabled": false
+    },
+    {
+      "id": 32,
+      "name": "David Strni\u0161a",
+      "enabled": false
+    },
+    {
+      "id": 33,
+      "name": "Namir Uzunovi\u0107",
+      "enabled": false
+    },
+    {
+      "id": 34,
+      "name": "Jo\u017ee Planin\u0161ec",
+      "enabled": false
+    },
+    {
+      "id": 35,
+      "name": "Vanja Kolar",
+      "enabled": false
+    },
+    {
+      "id": 36,
+      "name": "Klara Wankmuller",
+      "enabled": false
+    },
+    {
+      "id": 37,
+      "name": "Milan Stramec",
+      "enabled": false
+    },
+    {
+      "id": 38,
+      "name": "Bojan Sudar",
+      "enabled": false
+    },
+    {
+      "id": 39,
+      "name": "Tia Sudar",
+      "enabled": false
+    },
+    {
+      "id": 40,
+      "name": "Jaka Cvar",
+      "enabled": false
+    },
+    {
+      "id": 41,
+      "name": "Tadej \u0160truc",
+      "enabled": false
+    },
+    {
+      "id": 42,
+      "name": "Jure Glaser",
+      "enabled": false
+    },
+    {
+      "id": 43,
+      "name": "Marko Pokr\u017enik",
+      "enabled": false
+    },
+    {
+      "id": 44,
+      "name": "test",
+      "enabled": false
+    }
+  ]
+}
\ No newline at end of file
diff --git a/TV_APP_V2/static/logo.png b/TV_APP_V2/static/logo.png
new file mode 100644
index 0000000..da243c2
Binary files /dev/null and b/TV_APP_V2/static/logo.png differ
diff --git a/TV_APP_V2/static/setting.png b/TV_APP_V2/static/setting.png
new file mode 100644
index 0000000..bfbf326
Binary files /dev/null and b/TV_APP_V2/static/setting.png differ
diff --git a/TV_APP_V2/templates/draft.html b/TV_APP_V2/templates/draft.html
new file mode 100644
index 0000000..8d30a46
--- /dev/null
+++ b/TV_APP_V2/templates/draft.html
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Tournament Draft</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+      font-family: Arial, sans-serif;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    .navbar {
+      background: white;
+      color: black;
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      height: 70px;
+      flex-shrink: 0;
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px 20px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.primary {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.primary:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .main-container {
+      height: calc(100vh - 70px);
+      display: flex;
+      flex-direction: column;
+      padding: 15px;
+      gap: 15px;
+    }
+
+    .tournament-header {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 15px 20px;
+      text-align: center;
+      flex-shrink: 0;
+    }
+
+    .tournament-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 6px;
+    }
+
+    .tournament-stats {
+      color: #666;
+      font-size: 0.9rem;
+      margin-bottom: 12px;
+    }
+
+    .tournament-controls {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 15px;
+    }
+
+    .round-nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 8px 14px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      font-weight: bold;
+      font-size: 0.85rem;
+    }
+
+    .round-nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      color: #007bff;
+    }
+
+    .round-nav-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none !important;
+    }
+
+    .current-round-display {
+      font-size: 1rem;
+      font-weight: bold;
+      color: #007bff;
+      margin: 0 15px;
+      min-width: 140px;
+      text-align: center;
+    }
+
+    /* Rounds Container - Vertical stack */
+    .rounds-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-height: 0;
+      overflow-y: auto;
+      padding: 5px;
+    }
+
+    .round-row {
+      background: white;
+      border-radius: 10px;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      transition: all 0.2s ease;
+      display: flex;
+      flex-shrink: 0;
+      min-height: 0;
+    }
+
+    .round-row.current {
+      border-left: 4px solid #007bff;
+      box-shadow: 0 4px 15px rgba(0, 123, 255, 0.25);
+    }
+
+    .round-row.completed {
+      border-left: 4px solid #28a745;
+      opacity: 0.95;
+    }
+
+    .round-row.waiting {
+      opacity: 0.8;
+    }
+
+    .round-header {
+      background: #f8f9fa;
+      border-right: 1px solid #e9ecef;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 15px;
+      min-width: 120px;
+      flex-shrink: 0;
+    }
+
+    .round-row.current .round-header {
+      background: #e3f2fd;
+    }
+
+    .round-row.completed .round-header {
+      background: #e8f5e8;
+    }
+
+    .round-title {
+      font-size: 1rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 4px;
+    }
+
+    .round-badge {
+      padding: 3px 8px;
+      border-radius: 10px;
+      font-size: 0.65rem;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    .current-badge {
+      background: #007bff;
+      color: white;
+    }
+
+    .completed-badge {
+      background: #28a745;
+      color: white;
+    }
+
+    .waiting-badge {
+      background: #6c757d;
+      color: white;
+    }
+
+    .positions-container {
+      flex: 1;
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 8px;
+      padding: 12px;
+    }
+
+    .position-card {
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+      border: 2px solid #e9ecef;
+      border-radius: 8px;
+      padding: 8px 6px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+      min-height: 60px;
+    }
+
+    .position-card.filled {
+      border-color: #28a745;
+      background: linear-gradient(135deg, #f8fff9 0%, #ffffff 100%);
+      box-shadow: 0 3px 10px rgba(40, 167, 69, 0.15);
+    }
+
+    .position-card.empty {
+      border-color: #dee2e6;
+      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+      opacity: 0.8;
+    }
+
+    .position-number {
+      font-size: 1.2rem;
+      font-weight: 700;
+      color: #007bff;
+      margin-bottom: 4px;
+      line-height: 1;
+    }
+
+    .position-card.empty .position-number {
+      color: #6c757d;
+    }
+
+    .player-name {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #2c3e50;
+      line-height: 1.2;
+      margin-bottom: 4px;
+      word-wrap: break-word;
+      max-width: 100%;
+      text-align: center;
+    }
+
+    .position-card.empty .player-name {
+      color: #6c757d;
+      font-style: italic;
+      font-weight: 500;
+    }
+
+    .player-id {
+      background: #28a745;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 8px;
+      font-size: 0.65rem;
+      font-weight: 600;
+      display: inline-block;
+      letter-spacing: 0.3px;
+    }
+
+    /* No Tournament State */
+    .no-tournament {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: #666;
+    }
+
+    .no-tournament h2 {
+      color: #333;
+      margin-bottom: 15px;
+      font-size: 1.5rem;
+    }
+
+    .no-tournament p {
+      margin-bottom: 20px;
+      font-size: 1.1rem;
+    }
+
+    /* Auto-refresh indicator */
+    .refresh-indicator {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: rgba(0, 123, 255, 0.9);
+      color: white;
+      padding: 8px 15px;
+      border-radius: 20px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: 999;
+    }
+
+    .refresh-indicator.show {
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-title">🏆 Tournament Draft</div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">← Dashboard</a>
+      <a href="/tournament" class="nav-btn">⚙️ Manage</a>
+    </div>
+  </div>
+
+  <div class="main-container">
+    {% if tournament %}
+      <div class="tournament-header">
+        <div class="tournament-title">🎯 Shooting Tournament</div>
+        <div class="tournament-stats">
+          {{ tournament.total_players }} players • {{ tournament.total_rounds }} rounds
+          {% if tournament.current_round %}
+            • Currently on Round {{ tournament.current_round }}
+          {% endif %}
+        </div>
+        
+        {% if tournament.current_round %}
+        <div class="tournament-controls">
+          <button class="round-nav-btn" id="prevRoundBtn" onclick="changeRound(-1)" title="Previous Round">
+            ← Previous
+          </button>
+          <span class="current-round-display">Round {{ tournament.current_round }} of {{ tournament.total_rounds }}</span>
+          <button class="round-nav-btn" id="nextRoundBtn" onclick="changeRound(1)" title="Next Round">
+            Next →
+          </button>
+        </div>
+        {% endif %}
+      </div>
+
+      <div class="rounds-container" data-total-rounds="{{ tournament.total_rounds }}">
+        {% for round in tournament.rounds %}
+          {% set is_current = tournament.current_round == round.round_number %}
+          {% set is_completed = tournament.current_round > round.round_number %}
+          <div class="round-row {{ 'current' if is_current else ('completed' if is_completed else 'waiting') }}">
+            <div class="round-header">
+              <div class="round-title">Round {{ round.round_number }}</div>
+              {% if is_current %}
+                <div class="round-badge current-badge">Current</div>
+              {% elif is_completed %}
+                <div class="round-badge completed-badge">Done</div>
+              {% else %}
+                <div class="round-badge waiting-badge">Wait</div>
+              {% endif %}
+            </div>
+            
+            <div class="positions-container">
+              {% for position in range(1, 7) %}
+                {% set player = round.players[position-1] if position <= round.players|length else none %}
+                <div class="position-card {{ 'filled' if player else 'empty' }}">
+                  <div class="position-number">{{ position }}</div>
+                  {% if player %}
+                    <div class="player-name">{{ player.name }}</div>
+                    <div class="player-id">ID: {{ player.id }}</div>
+                  {% else %}
+                    <div class="player-name">Empty</div>
+                  {% endif %}
+                </div>
+              {% endfor %}
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+
+    {% else %}
+      <div class="no-tournament">
+        <h2>No Active Tournament</h2>
+        <p>Go to Tournament Management to set up players and start a tournament.</p>
+        <a href="/tournament" class="nav-btn primary">🏆 Set Up Tournament</a>
+      </div>
+    {% endif %}
+  </div>
+
+  <!-- Auto-refresh indicator -->
+  <div class="refresh-indicator" id="refreshIndicator">
+    🔄 Updating...
+  </div>
+
+  <script>
+    // Tournament state
+    const tournamentActive = {{ 'true' if tournament else 'false' }};
+    let currentRound = {{ tournament.current_round if tournament else 1 }};
+    const totalRounds = {{ tournament.total_rounds if tournament else 1 }};
+
+    function updateRoundNavigation() {
+      if (tournamentActive) {
+        const prevBtn = document.getElementById('prevRoundBtn');
+        const nextBtn = document.getElementById('nextRoundBtn');
+        
+        if (prevBtn) prevBtn.disabled = currentRound <= 1;
+        if (nextBtn) nextBtn.disabled = currentRound >= totalRounds;
+      }
+    }
+
+    // Change round function
+    async function changeRound(direction) {
+      if (!tournamentActive) return;
+      
+      const newRound = currentRound + direction;
+      if (newRound < 1 || newRound > totalRounds) return;
+      
+      // Disable buttons during request
+      const prevBtn = document.getElementById('prevRoundBtn');
+      const nextBtn = document.getElementById('nextRoundBtn');
+      
+      if (prevBtn) prevBtn.disabled = true;
+      if (nextBtn) nextBtn.disabled = true;
+      
+      try {
+        const response = await fetch(`/api/tournament/round/${newRound}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
+        
+        if (response.ok) {
+          currentRound = newRound;
+          updateRoundNavigation();
+          
+          // Reload page to get new round players
+          setTimeout(() => {
+            window.location.reload();
+          }, 300);
+        } else {
+          console.error('Failed to change round');
+          alert('Failed to change round. Please try again.');
+          updateRoundNavigation();
+        }
+      } catch (error) {
+        console.error('Error changing round:', error);
+        alert('Error changing round. Please try again.');
+        updateRoundNavigation();
+      }
+    }
+
+    // Auto-refresh functionality
+    function setupAutoRefresh() {
+      setInterval(() => {
+        if (document.visibilityState === 'visible' && tournamentActive) {
+          const indicator = document.getElementById('refreshIndicator');
+          indicator.classList.add('show');
+          
+          setTimeout(() => {
+            window.location.reload();
+          }, 1000);
+        }
+      }, 15000); // 15 seconds
+    }
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'Escape') {
+        window.location.href = '/';
+      } else if (event.key === 'r' || event.key === 'R') {
+        event.preventDefault();
+        window.location.reload();
+      } else if (tournamentActive) {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          changeRound(-1);
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          changeRound(1);
+        }
+      }
+    });
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+      updateRoundNavigation();
+      setupAutoRefresh();
+      
+      // Scroll to current round
+      setTimeout(() => {
+        const currentRoundRow = document.querySelector('.round-row.current');
+        if (currentRoundRow) {
+          currentRoundRow.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center' 
+          });
+        }
+      }, 500);
+
+      console.log('🖥️ PC Tournament Draft (Vertical Rows) loaded');
+      console.log('🏆 Tournament active:', tournamentActive);
+      console.log(`📊 Displaying ${totalRounds} rounds in vertical layout`);
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/fullscreen.html b/TV_APP_V2/templates/fullscreen.html
new file mode 100644
index 0000000..4afde6c
--- /dev/null
+++ b/TV_APP_V2/templates/fullscreen.html
@@ -0,0 +1,766 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>{{ title }} - Fullscreen</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    /* Reset and base styles */
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: black;
+      height: 100vh;
+      overflow: hidden;
+      font-family: Arial, sans-serif;
+    }
+
+    /* Navigation bar */
+    .fullscreen-navbar {
+      background: white;
+      color: black;
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      height: 70px;
+      box-sizing: border-box;
+      position: relative;
+      z-index: 1000;
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      text-align: left;
+      flex: 1;
+      margin-right: auto;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      z-index: 10;
+    }
+
+    /* Control buttons */
+    .control-btn {
+      background: #f8f9fa !important;
+      border: 2px solid #e9ecef !important;
+      cursor: pointer;
+      padding: 12px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333 !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 50px;
+      height: 50px;
+      font-size: 1.2rem;
+      font-weight: bold;
+      text-decoration: none;
+    }
+
+    .control-btn:hover {
+      background: #e9ecef !important;
+      border-color: #007bff !important;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+      transform: translateY(-1px) !important;
+      color: #007bff !important;
+    }
+
+    .control-btn:active {
+      transform: translateY(0) !important;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .control-btn:disabled {
+      opacity: 0.5 !important;
+      cursor: not-allowed !important;
+      transform: none !important;
+      background: #f8f9fa !important;
+      border-color: #e9ecef !important;
+      color: #333 !important;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .control-btn.close-btn:hover {
+      border-color: #dc3545 !important;
+      color: #dc3545 !important;
+    }
+
+    .control-btn svg {
+      transition: all 0.2s ease;
+    }
+
+    /* Stream container */
+    .stream-container {
+      height: calc(100vh - 70px);
+      width: 100%;
+      background: #111;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .stream-viewport {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: relative;
+      cursor: grab;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .stream-viewport.dragging {
+      cursor: grabbing !important;
+    }
+
+    .stream-viewport.zoomed {
+      cursor: grab !important;
+    }
+
+    .fullscreen-stream {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      object-fit: contain;
+      display: block;
+      transition: transform 0.2s ease;
+      transform-origin: center center;
+    }
+
+    .fullscreen-stream.instant-transition {
+      transition: none;
+    }
+
+    /* Zoom controls */
+    .zoom-controls {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      background: rgba(248, 249, 250, 0.95);
+      backdrop-filter: blur(10px);
+      border-radius: 12px;
+      padding: 10px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      z-index: 100;
+    }
+
+    .zoom-btn {
+      background: #f8f9fa !important;
+      border: 2px solid #e9ecef !important;
+      cursor: pointer;
+      padding: 10px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333 !important;
+      font-weight: bold;
+      font-size: 1rem;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .zoom-btn:hover {
+      background: #e9ecef !important;
+      border-color: #007bff !important;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+      transform: translateY(-1px) !important;
+      color: #007bff !important;
+    }
+
+    .zoom-btn:active {
+      transform: translateY(0) !important;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .zoom-btn:disabled {
+      opacity: 0.5 !important;
+      cursor: not-allowed !important;
+      transform: none !important;
+      background: #f8f9fa !important;
+      border-color: #e9ecef !important;
+      color: #333 !important;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .zoom-level {
+      padding: 10px 12px;
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      border-radius: 8px;
+      font-size: 0.9rem;
+      font-weight: bold;
+      color: #333;
+      min-width: 50px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Loading indicator */
+    .loading {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      font-size: 1.1rem;
+      opacity: 0.7;
+      z-index: 1;
+    }
+
+    .stream-loaded .loading {
+      display: none;
+    }
+
+    /* Mobile optimizations */
+    @media (max-width: 768px) {
+      .fullscreen-navbar {
+        padding: 10px 15px;
+        height: 60px;
+      }
+
+      .navbar-title {
+        font-size: 1.4rem;
+      }
+
+      .navbar-controls {
+        gap: 8px;
+      }
+
+      .control-btn {
+        padding: 10px;
+        width: 45px;
+        height: 45px;
+        font-size: 1.1rem;
+      }
+
+      .stream-container {
+        height: calc(100vh - 60px);
+      }
+
+      .zoom-controls {
+        bottom: 15px;
+        padding: 8px;
+        gap: 8px;
+      }
+
+      .zoom-btn {
+        padding: 8px;
+        width: 36px;
+        height: 36px;
+        font-size: 0.9rem;
+      }
+
+      .zoom-level {
+        padding: 8px 10px;
+        min-width: 45px;
+        font-size: 0.85rem;
+      }
+    }
+
+    /* Very small mobile devices */
+    @media (max-width: 480px) {
+      .fullscreen-navbar {
+        padding: 8px 12px;
+        height: 55px;
+      }
+
+      .navbar-title {
+        font-size: 1.2rem;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .control-btn {
+        padding: 8px;
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+      }
+
+      .stream-container {
+        height: calc(100vh - 55px);
+      }
+
+      .zoom-controls {
+        bottom: 12px;
+        gap: 6px;
+        padding: 6px;
+      }
+
+      .zoom-btn {
+        padding: 6px;
+        width: 32px;
+        height: 32px;
+        font-size: 0.85rem;
+      }
+
+      .zoom-level {
+        padding: 6px 8px;
+        min-width: 40px;
+        font-size: 0.8rem;
+      }
+    }
+
+    /* Landscape mobile optimization */
+    @media (max-height: 500px) and (orientation: landscape) {
+      .fullscreen-navbar {
+        padding: 8px 15px;
+        height: 50px;
+      }
+
+      .navbar-title {
+        font-size: 1.3rem;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .control-btn {
+        padding: 6px;
+        width: 38px;
+        height: 38px;
+        font-size: 0.9rem;
+      }
+
+      .stream-container {
+        height: calc(100vh - 50px);
+      }
+
+      .zoom-controls {
+        bottom: 10px;
+        gap: 4px;
+        padding: 4px;
+      }
+
+      .zoom-btn {
+        padding: 4px;
+        width: 30px;
+        height: 30px;
+        font-size: 0.8rem;
+      }
+
+      .zoom-level {
+        padding: 4px 6px;
+        min-width: 35px;
+        font-size: 0.75rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="fullscreen-navbar">
+    <div class="navbar-title">{{ title }}</div>
+    <div class="navbar-controls">
+      <button class="control-btn" id="fullscreenToggleBtn" title="Toggle Browser Fullscreen (F)">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+        </svg>
+      </button>
+      <a href="/" class="control-btn close-btn" title="Close Fullscreen">✕</a>
+    </div>
+  </div>
+
+  <div class="stream-container" id="streamContainer">
+    <div class="loading" id="loadingIndicator">Loading stream...</div>
+    <div class="stream-viewport" id="streamViewport">
+      <img 
+        src="{{ stream.url }}" 
+        alt="{{ title }}" 
+        class="fullscreen-stream" 
+        id="fullscreenStream"
+        onerror="handleStreamError()"
+        onload="handleStreamLoad()"
+      >
+    </div>
+    
+    <div class="zoom-controls" id="zoomControls">
+      <button class="zoom-btn" id="zoomOutBtnBottom" title="Zoom Out (-)">−</button>
+      <div class="zoom-level" id="zoomLevel">1.0x</div>
+      <button class="zoom-btn" id="zoomInBtnBottom" title="Zoom In (+)">+</button>
+      <button class="zoom-btn" id="resetZoomBtn" title="Reset Zoom (R)">⌂</button>
+    </div>
+  </div>
+
+  <script>
+    let retryCount = 0;
+    const maxRetries = 3;
+    
+    // Zoom functionality
+    let currentZoom = 1;
+    const minZoom = 1;
+    const maxZoom = 5;
+    const zoomStep = 0.1;
+    
+    // Pan functionality
+    let isPanning = false;
+    let panStartX = 0;
+    let panStartY = 0;
+    let panOffsetX = 0;
+    let panOffsetY = 0;
+    let lastTouchDistance = 0;
+    
+    function handleStreamLoad() {
+      document.getElementById('streamContainer').classList.add('stream-loaded');
+      retryCount = 0;
+      resetZoom();
+    }
+    
+    function handleStreamError() {
+      const streamImg = document.getElementById('fullscreenStream');
+      const loadingIndicator = document.getElementById('loadingIndicator');
+      
+      if (retryCount < maxRetries) {
+        retryCount++;
+        loadingIndicator.textContent = `Retrying... (${retryCount}/${maxRetries})`;
+        
+        setTimeout(() => {
+          streamImg.src = streamImg.src + '?retry=' + Date.now();
+        }, 2000);
+      } else {
+        loadingIndicator.textContent = 'Stream unavailable';
+        streamImg.style.display = 'none';
+      }
+    }
+
+    // Zoom functions
+    function updateZoom(smoothTransition = true) {
+      const streamImg = document.getElementById('fullscreenStream');
+      const zoomLevel = document.getElementById('zoomLevel');
+      const zoomInBtnBottom = document.getElementById('zoomInBtnBottom');
+      const zoomOutBtnBottom = document.getElementById('zoomOutBtnBottom');
+      const viewport = document.getElementById('streamViewport');
+      
+      if (smoothTransition) {
+        streamImg.classList.remove('instant-transition');
+      } else {
+        streamImg.classList.add('instant-transition');
+      }
+      
+      if (currentZoom <= 1) {
+        panOffsetX = 0;
+        panOffsetY = 0;
+        currentZoom = 1;
+        streamImg.style.transform = '';
+      } else {
+        streamImg.style.transform = `scale(${currentZoom}) translate(${panOffsetX}px, ${panOffsetY}px)`;
+      }
+      
+      zoomLevel.textContent = `${currentZoom.toFixed(1)}x`;
+      
+      const atMinZoom = currentZoom <= minZoom;
+      const atMaxZoom = currentZoom >= maxZoom;
+      
+      if (zoomOutBtnBottom) zoomOutBtnBottom.disabled = atMinZoom;
+      if (zoomInBtnBottom) zoomInBtnBottom.disabled = atMaxZoom;
+      
+      if (currentZoom > 1) {
+        viewport.classList.add('zoomed');
+      } else {
+        viewport.classList.remove('zoomed');
+        panOffsetX = 0;
+        panOffsetY = 0;
+      }
+    }
+
+    function zoomIn() {
+      if (currentZoom < maxZoom) {
+        currentZoom = Math.min(maxZoom, currentZoom + zoomStep);
+        updateZoom(false);
+      }
+    }
+
+    function zoomOut() {
+      if (currentZoom > minZoom) {
+        const newZoom = Math.max(minZoom, currentZoom - zoomStep);
+        
+        if (newZoom <= minZoom) {
+          currentZoom = minZoom;
+          panOffsetX = 0;
+          panOffsetY = 0;
+          const streamImg = document.getElementById('fullscreenStream');
+          streamImg.style.transform = '';
+          updateZoom(true);
+        } else {
+          currentZoom = newZoom;
+          const zoomRatio = currentZoom / (currentZoom + zoomStep);
+          panOffsetX *= zoomRatio;
+          panOffsetY *= zoomRatio;
+          updateZoom(false);
+        }
+      }
+    }
+
+    function resetZoom() {
+      currentZoom = 1;
+      panOffsetX = 0;
+      panOffsetY = 0;
+      const streamImg = document.getElementById('fullscreenStream');
+      streamImg.style.transform = '';
+      updateZoom(true);
+    }
+
+    // Pan functions
+    function startPan(clientX, clientY) {
+      if (currentZoom > 1) {
+        isPanning = true;
+        panStartX = clientX - panOffsetX;
+        panStartY = clientY - panOffsetY;
+        document.getElementById('streamViewport').classList.add('dragging');
+      }
+    }
+
+    function updatePan(clientX, clientY) {
+      if (isPanning && currentZoom > 1) {
+        const viewport = document.getElementById('streamViewport');
+        const streamImg = document.getElementById('fullscreenStream');
+        
+        const newOffsetX = clientX - panStartX;
+        const newOffsetY = clientY - panStartY;
+        
+        const imgRect = streamImg.getBoundingClientRect();
+        const viewportRect = viewport.getBoundingClientRect();
+        
+        const scaledWidth = imgRect.width / currentZoom;
+        const scaledHeight = imgRect.height / currentZoom;
+        const maxOffsetX = Math.max(0, (scaledWidth * currentZoom - viewportRect.width) / (2 * currentZoom));
+        const maxOffsetY = Math.max(0, (scaledHeight * currentZoom - viewportRect.height) / (2 * currentZoom));
+        
+        panOffsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, newOffsetX));
+        panOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, newOffsetY));
+        
+        updateZoom(false);
+      }
+    }
+
+    function endPan() {
+      isPanning = false;
+      document.getElementById('streamViewport').classList.remove('dragging');
+      
+      if (currentZoom <= 1) {
+        panOffsetX = 0;
+        panOffsetY = 0;
+        updateZoom();
+      }
+    }
+
+    // Event listeners
+    document.addEventListener('DOMContentLoaded', function() {
+      const zoomInBtnBottom = document.getElementById('zoomInBtnBottom');
+      const zoomOutBtnBottom = document.getElementById('zoomOutBtnBottom');
+      const resetZoomBtn = document.getElementById('resetZoomBtn');
+      const fullscreenToggleBtn = document.getElementById('fullscreenToggleBtn');
+      const viewport = document.getElementById('streamViewport');
+
+      if (zoomInBtnBottom) zoomInBtnBottom.addEventListener('click', zoomIn);
+      if (zoomOutBtnBottom) zoomOutBtnBottom.addEventListener('click', zoomOut);
+      if (resetZoomBtn) resetZoomBtn.addEventListener('click', resetZoom);
+      
+      if (fullscreenToggleBtn) {
+        fullscreenToggleBtn.addEventListener('click', toggleBrowserFullscreen);
+      }
+
+      // Mouse events for panning
+      viewport.addEventListener('mousedown', function(e) {
+        e.preventDefault();
+        startPan(e.clientX, e.clientY);
+      });
+
+      document.addEventListener('mousemove', function(e) {
+        if (isPanning) {
+          e.preventDefault();
+          updatePan(e.clientX, e.clientY);
+        }
+      });
+
+      document.addEventListener('mouseup', endPan);
+
+      // Mouse wheel zoom
+      viewport.addEventListener('wheel', function(e) {
+        e.preventDefault();
+        if (e.deltaY < 0) {
+          zoomIn();
+        } else {
+          zoomOut();
+        }
+      });
+
+      // Touch events for mobile
+      viewport.addEventListener('touchstart', function(e) {
+        e.preventDefault();
+        if (e.touches.length === 1) {
+          startPan(e.touches[0].clientX, e.touches[0].clientY);
+        } else if (e.touches.length === 2) {
+          const touch1 = e.touches[0];
+          const touch2 = e.touches[1];
+          lastTouchDistance = Math.sqrt(
+            Math.pow(touch2.clientX - touch1.clientX, 2) +
+            Math.pow(touch2.clientY - touch1.clientY, 2)
+          );
+        }
+      });
+
+      viewport.addEventListener('touchmove', function(e) {
+        e.preventDefault();
+        if (e.touches.length === 1 && isPanning) {
+          updatePan(e.touches[0].clientX, e.touches[0].clientY);
+        } else if (e.touches.length === 2) {
+          const touch1 = e.touches[0];
+          const touch2 = e.touches[1];
+          const currentDistance = Math.sqrt(
+            Math.pow(touch2.clientX - touch1.clientX, 2) +
+            Math.pow(touch2.clientY - touch1.clientY, 2)
+          );
+          
+          if (lastTouchDistance > 0) {
+            const distanceRatio = currentDistance / lastTouchDistance;
+            if (distanceRatio > 1.02) {
+              zoomIn();
+            } else if (distanceRatio < 0.98) {
+              zoomOut();
+            }
+          }
+          lastTouchDistance = currentDistance;
+        }
+      });
+
+      viewport.addEventListener('touchend', function(e) {
+        endPan();
+        if (e.touches.length < 2) {
+          lastTouchDistance = 0;
+        }
+      });
+
+      updateZoom(false);
+    });
+
+    // Handle keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+      switch(event.key) {
+        case 'Escape':
+          window.location.href = '/';
+          break;
+        case 'f':
+        case 'F':
+          toggleBrowserFullscreen();
+          break;
+        case 'r':
+        case 'R':
+          event.preventDefault();
+          resetZoom();
+          break;
+        case '=':
+        case '+':
+          event.preventDefault();
+          zoomIn();
+          break;
+        case '-':
+          event.preventDefault();
+          zoomOut();
+          break;
+      }
+    });
+
+    function toggleBrowserFullscreen() {
+      if (!document.fullscreenElement && !document.webkitFullscreenElement && 
+          !document.mozFullScreenElement && !document.msFullscreenElement) {
+        const docEl = document.documentElement;
+        if (docEl.requestFullscreen) {
+          docEl.requestFullscreen().catch(err => console.log('Fullscreen error:', err));
+        } else if (docEl.webkitRequestFullscreen) {
+          docEl.webkitRequestFullscreen();
+        } else if (docEl.mozRequestFullScreen) {
+          docEl.mozRequestFullScreen();
+        } else if (docEl.msRequestFullscreen) {
+          docEl.msRequestFullscreen();
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen().catch(err => console.log('Exit fullscreen error:', err));
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      }
+    }
+
+    function handleFullscreenChange() {
+      const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || 
+                          document.mozFullScreenElement || document.msFullscreenElement;
+      const fullscreenBtn = document.getElementById('fullscreenToggleBtn');
+      
+      if (fullscreenBtn) {
+        if (isFullscreen) {
+          fullscreenBtn.innerHTML = `
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
+            </svg>
+          `;
+          fullscreenBtn.title = "Exit Browser Fullscreen (F)";
+        } else {
+          fullscreenBtn.innerHTML = `
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+            </svg>
+          `;
+          fullscreenBtn.title = "Toggle Browser Fullscreen (F)";
+        }
+      }
+    }
+
+    // Listen for fullscreen changes
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+
+    // Auto-refresh stream every 30 seconds
+    setInterval(() => {
+      const streamImg = document.getElementById('fullscreenStream');
+      if (streamImg && !streamImg.complete) {
+        streamImg.src = streamImg.src.split('?')[0] + '?refresh=' + Date.now();
+      }
+    }, 30000);
+
+    // Prevent context menu and dragging on stream
+    document.getElementById('fullscreenStream').addEventListener('contextmenu', function(e) {
+      e.preventDefault();
+    });
+
+    document.getElementById('fullscreenStream').addEventListener('dragstart', function(e) {
+      e.preventDefault();
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/index.html b/TV_APP_V2/templates/index.html
new file mode 100644
index 0000000..ef1e364
--- /dev/null
+++ b/TV_APP_V2/templates/index.html
@@ -0,0 +1,875 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Camera Dashboard</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: black;
+      height: 100vh;
+      overflow: hidden;
+      font-family: Arial, sans-serif;
+    }
+
+    .navbar {
+      background: white;
+      color: black;
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      height: 60px;
+      box-sizing: border-box;
+    }
+
+    .navbar img.logo {
+      height: 40px;
+    }
+
+    .navbar-center {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+    }
+
+    /* Tournament Navigation */
+    .tournament-nav {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+
+    .round-nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      font-weight: bold;
+      font-size: 1.2rem;
+      width: 50px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .round-nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .round-nav-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none !important;
+      background: #f8f9fa !important;
+      border-color: #e9ecef !important;
+      color: #333 !important;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .current-round-info {
+      text-align: center;
+      min-width: 120px;
+    }
+
+    .round-title {
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 2px;
+    }
+
+    .round-progress {
+      font-size: 0.8rem;
+      color: #666;
+      padding: 2px 8px;
+      background: rgba(0, 123, 255, 0.1);
+      border-radius: 10px;
+      border: 1px solid rgba(0, 123, 255, 0.2);
+    }
+
+    /* Regular time/date display */
+    .datetime .time {
+      font-size: 1.6rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .datetime .date {
+      font-size: 0.9rem;
+      color: #666;
+    }
+
+    .hamburger-menu {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      width: 50px;
+      height: 50px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .hamburger-menu:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+    }
+
+    .hamburger-line {
+      width: 100%;
+      height: 3px;
+      background: #333;
+      border-radius: 2px;
+      transition: all 0.3s ease;
+    }
+
+    .hamburger-menu:hover .hamburger-line {
+      background: #007bff;
+    }
+
+    .grid {
+      height: calc(100vh - 60px);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      gap: 20px;
+      padding: 20px;
+      box-sizing: border-box;
+    }
+
+    .camera-card {
+      background: #2a2a2a;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      cursor: pointer;
+      position: relative;
+    }
+
+    .camera-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    .card-title {
+      background: #1a1a1a;
+      padding: 12px 16px;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: white;
+      border-bottom: 1px solid #404040;
+      text-align: center;
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+
+    .stream-wrapper {
+      position: relative;
+      width: 100%;
+      flex: 1;
+      background: #222;
+      overflow: hidden;
+      pointer-events: none;
+    }
+
+    .stream {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: opacity 0.3s ease;
+      pointer-events: none;
+    }
+
+    /* Tooltip for camera cards */
+    .camera-card::after {
+      content: "Click to view fullscreen";
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-size: 0.85rem;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.2s ease;
+      pointer-events: none;
+      z-index: 10;
+    }
+
+    .camera-card:hover::after {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(-50%) translateY(-5px);
+    }
+
+    /* Settings Panel */
+    #overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 999;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    }
+
+    #overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .settings-panel {
+      position: fixed;
+      top: 0;
+      right: -400px;
+      width: 400px;
+      height: 100vh;
+      background: white;
+      z-index: 1000;
+      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+      transition: right 0.3s ease;
+      overflow-y: auto;
+    }
+
+    .settings-panel.active {
+      right: 0;
+    }
+
+    .settings-header {
+      background: #f8f9fa;
+      padding: 20px;
+      border-bottom: 1px solid #e9ecef;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .settings-header h3 {
+      margin: 0;
+      font-size: 1.3rem;
+      color: #333;
+    }
+
+    .close-btn {
+      background: none;
+      border: none;
+      font-size: 1.5rem;
+      cursor: pointer;
+      color: #666;
+      padding: 4px 8px;
+      border-radius: 4px;
+    }
+
+    .close-btn:hover {
+      background: #e9ecef;
+      color: #333;
+    }
+
+    .settings-content {
+      padding: 20px;
+    }
+
+    .settings-group {
+      margin-bottom: 30px;
+    }
+
+    .settings-group h4 {
+      margin: 0 0 15px 0;
+      font-size: 1.1rem;
+      color: #333;
+      border-bottom: 2px solid #007bff;
+      padding-bottom: 6px;
+    }
+
+    .nav-link {
+      display: inline-block;
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      color: #333;
+      padding: 12px 20px;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.95rem;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    .nav-link:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+    }
+
+    .tournament-status-info {
+      background: #f0f8ff;
+      border: 2px solid #007bff;
+      border-radius: 8px;
+      padding: 15px;
+      margin: 15px 0;
+    }
+
+    .tournament-status-info p {
+      margin: 5px 0;
+      color: #333;
+    }
+
+    .tournament-btn {
+      background: #007bff !important;
+      border-color: #0056b3 !important;
+      color: white !important;
+      text-align: center;
+    }
+
+    .tournament-btn:hover {
+      background: #0056b3 !important;
+      border-color: #004085 !important;
+      color: white !important;
+    }
+
+    /* Desktop-only styles - mobile users are redirected */
+
+    /* Mobile responsive fallback for desktop users on small screens */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 10px 15px;
+        flex-direction: column;
+        gap: 15px;
+      }
+
+      .navbar-controls {
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .grid {
+        height: calc(100vh - 100px);
+        grid-template-columns: 1fr;
+        grid-template-rows: repeat(6, 1fr);
+        gap: 15px;
+        padding: 20px;
+      }
+
+      .card-title {
+        padding: 16px 18px;
+        font-size: 1.4rem;
+        font-weight: bold;
+      }
+
+      .settings-panel {
+        width: 100%;
+        right: -100%;
+      }
+
+      .tournament-nav {
+        gap: 10px;
+      }
+
+      .round-nav-btn {
+        width: 45px;
+        height: 45px;
+        padding: 10px;
+        font-size: 1.1rem;
+      }
+
+      .current-round-info {
+        min-width: 100px;
+      }
+
+      .round-title {
+        font-size: 1.2rem;
+      }
+
+      .round-progress {
+        font-size: 0.75rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .grid {
+        padding: 15px;
+        gap: 12px;
+      }
+
+      .card-title {
+        padding: 14px 16px;
+        font-size: 1.2rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <img src="/static/logo.png" alt="Logo" class="logo" onerror="this.style.display='none'" />
+
+    <div class="navbar-center">
+      {% if settings.tournament_active %}
+        <div class="tournament-nav">
+          <button class="round-nav-btn" id="prevRoundBtn" onclick="changeRound(-1)" title="Previous Round">
+            ←
+          </button>
+          <div class="current-round-info">
+            <div class="round-title">🏆 Round <span id="currentRoundNum">{{ settings.current_round }}</span></div>
+            <div class="round-progress">{{ settings.current_round }} of {{ settings.total_rounds }}</div>
+          </div>
+          <button class="round-nav-btn" id="nextRoundBtn" onclick="changeRound(1)" title="Next Round">
+            →
+          </button>
+        </div>
+      {% else %}
+        <div class="datetime">
+          <div class="time" id="time"></div>
+          <div class="date" id="date"></div>
+        </div>
+      {% endif %}
+    </div>
+
+    <button class="hamburger-menu" id="menuButton" title="Settings">
+      <div class="hamburger-line"></div>
+      <div class="hamburger-line"></div>
+      <div class="hamburger-line"></div>
+    </button>
+  </div>
+
+  <div id="overlay"></div>
+
+  <div class="settings-panel" id="settingsPanel">
+    <div class="settings-header">
+      <h3>Camera Settings</h3>
+      <button class="close-btn" id="closeBtn">&times;</button>
+    </div>
+    
+    <div class="settings-content">
+      {% if settings.tournament_active %}
+      <div class="settings-group">
+        <h4>🏆 Active Tournament</h4>
+        
+        <div class="tournament-status-info">
+          <p><strong>Current Round:</strong> {{ settings.current_round }} of {{ settings.total_rounds }}</p>
+          <p>Camera cards show current round players</p>
+        </div>
+        
+        <div class="tournament-actions">
+          <a href="/tournament/draft" class="nav-link tournament-btn" style="font-size: 1.1rem; padding: 15px 20px;">📋 View Full Tournament Draft</a>
+          <a href="/tournament" class="nav-link tournament-btn" id="manageTournamentLink">⚙️ Manage Tournament</a>
+          <a href="/results/calculator" class="nav-link tournament-btn">🎯 Results Calculator</a>
+          <a href="/results" class="nav-link tournament-btn">📊 View Results</a>
+        </div>
+      </div>
+      {% endif %}
+
+      <div class="settings-group">
+        {% if not settings.tournament_active %}
+        <h4>Navigation</h4>
+        <a href="/tournament" class="nav-link" id="tournamentModeLink">🏆 Tournament Mode</a>
+        <h4>Data & Analysis</h4>
+        <a href="/archive/player-analysis" class="nav-link">👤 Player Analysis</a>
+        <a href="/archive" class="nav-link" >📚 View Archive</a>
+        {% endif %}
+      </div>
+
+      {% if not settings.tournament_active %}
+      <div class="settings-group" id="displayOptionsGroup">
+        <h4>Display Options</h4>
+        
+        <div style="margin-bottom: 15px;">
+          <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+            <input type="checkbox" id="toggleTitles" {% if settings.display_options.show_titles %}checked{% endif %} onchange="toggleTitles()" style="width: 18px; height: 18px;">
+            Show Card Titles
+          </label>
+        </div>
+
+        <div style="margin-bottom: 15px;">
+          <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">
+            Title Text Size: <span id="titleSizeValue">{{ settings.display_options.title_size }}</span>rem
+          </label>
+          <input type="range" 
+                 id="titleSize" 
+                 min="0.8" 
+                 max="2.5" 
+                 step="0.1" 
+                 value="{{ settings.display_options.title_size }}" 
+                 oninput="adjustTitleSize(this.value)"
+                 style="width: 100%;">
+        </div>
+      </div>
+      <div class="settings-group" id="cameraTitleGroup">
+        <h4>Camera Titles</h4>
+        {% for i in range(1, 7) %}
+        <div style="margin-bottom: 15px;">
+          <label style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Camera {{ i }} Title:</label>
+          <input type="text" 
+                 id="titleInput{{ i }}" 
+                 value="{{ settings.camera_titles[i|string] }}" 
+                 oninput="updateCardTitle({{ i }})"
+                 style="width: 100%; padding: 8px 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 0.9rem;">
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="grid">
+    {% for i in range(1, 7) %}
+    <div class="camera-card" onclick="openCameraFullscreen({{ i }})" data-camera-id="{{ i }}">
+      <div class="card-title" id="cardTitle{{ i }}">{{ settings.camera_titles[i|string] }}</div>
+      <div class="stream-wrapper">
+        <img src="{{ streams[i-1].url }}" alt="Camera Stream {{ i }}" class="stream" onerror="this.style.opacity='0.1'">
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+
+  <script>
+    // Global settings and tournament state
+    let currentSettings = {{ settings|tojson }};
+    const tournamentActive = {{ 'true' if settings.tournament_active else 'false' }};
+    let currentRound = {{ settings.current_round if settings.tournament_active else 1 }};
+    const totalRounds = {{ settings.total_rounds if settings.tournament_active else 1 }};
+
+    function updateRoundNavigation() {
+      if (tournamentActive) {
+        const prevBtn = document.getElementById('prevRoundBtn');
+        const nextBtn = document.getElementById('nextRoundBtn');
+        const currentRoundNum = document.getElementById('currentRoundNum');
+        
+        if (prevBtn) prevBtn.disabled = currentRound <= 1;
+        if (nextBtn) nextBtn.disabled = currentRound >= totalRounds;
+        if (currentRoundNum) currentRoundNum.textContent = currentRound;
+      }
+    }
+
+    // Change round function
+    async function changeRound(direction) {
+      if (!tournamentActive) return;
+      
+      const newRound = currentRound + direction;
+      if (newRound < 1 || newRound > totalRounds) return;
+      
+      // Disable buttons during request
+      const prevBtn = document.getElementById('prevRoundBtn');
+      const nextBtn = document.getElementById('nextRoundBtn');
+      
+      if (prevBtn) prevBtn.disabled = true;
+      if (nextBtn) nextBtn.disabled = true;
+      
+      try {
+        const response = await fetch(`/api/tournament/round/${newRound}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
+        
+        if (response.ok) {
+          currentRound = newRound;
+          updateRoundNavigation();
+          
+          // Reload page to get new round players
+          setTimeout(() => {
+            window.location.reload();
+          }, 300);
+        } else {
+          console.error('Failed to change round');
+          alert('Failed to change round. Please try again.');
+          updateRoundNavigation();
+        }
+      } catch (error) {
+        console.error('Error changing round:', error);
+        alert('Error changing round. Please try again.');
+        updateRoundNavigation();
+      }
+    }
+
+    // Debounce function
+    function debounce(func, wait) {
+      let timeout;
+      return function executedFunction(...args) {
+        const later = () => {
+          clearTimeout(timeout);
+          func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    }
+
+    // Save settings to server
+    async function saveSettings(settingsUpdate) {
+      try {
+        const response = await fetch('/api/settings', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(settingsUpdate)
+        });
+        
+        if (response.ok) {
+          const result = await response.json();
+          if (!tournamentActive) {
+            currentSettings = result.settings;
+          }
+        }
+      } catch (error) {
+        console.error('Error saving settings:', error);
+      }
+    }
+
+    const debouncedSaveSettings = debounce(saveSettings, 500);
+
+    // Desktop-only functionality - mobile users are redirected
+
+    // Mobile device detection
+    function isMobileDevice() {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+             (window.innerWidth <= 1024 && window.innerHeight <= 1366) ||
+             ('ontouchstart' in window) ||
+             (navigator.maxTouchPoints > 0);
+    }
+
+    // Update card title
+    function updateCardTitle(index) {
+      if (tournamentActive) return;
+      
+      const input = document.getElementById(`titleInput${index}`);
+      const cardTitle = document.getElementById(`cardTitle${index}`);
+      if (input && cardTitle) {
+        const newTitle = input.value || `Camera ${index}`;
+        cardTitle.textContent = newTitle;
+        
+        if (event && event.target === input) {
+          currentSettings.camera_titles[index.toString()] = newTitle;
+          debouncedSaveSettings({
+            camera_titles: {
+              [index.toString()]: newTitle
+            }
+          });
+        }
+      }
+    }
+
+    // Toggle titles
+    function toggleTitles() {
+      const show = document.getElementById('toggleTitles').checked;
+      for (let i = 1; i <= 6; i++) {
+        const cardTitle = document.getElementById(`cardTitle${i}`);
+        if (cardTitle) {
+          cardTitle.style.display = show ? 'block' : 'none';
+        }
+      }
+      
+      if (event && event.target === document.getElementById('toggleTitles')) {
+        currentSettings.display_options.show_titles = show;
+        debouncedSaveSettings({
+          display_options: {
+            show_titles: show
+          }
+        });
+      }
+    }
+
+    // Adjust title size
+    function adjustTitleSize(size) {
+      document.getElementById('titleSizeValue').textContent = size;
+      for (let i = 1; i <= 6; i++) {
+        const cardTitle = document.getElementById(`cardTitle${i}`);
+        if (cardTitle) {
+          cardTitle.style.fontSize = `${size}rem`;
+        }
+      }
+      
+      if (event && event.target === document.getElementById('titleSize')) {
+        currentSettings.display_options.title_size = parseFloat(size);
+        debouncedSaveSettings({
+          display_options: {
+            title_size: parseFloat(size)
+          }
+        });
+      }
+    }
+
+    // Open camera fullscreen
+    function openCameraFullscreen(cameraId) {
+      const customTitle = currentSettings.camera_titles[cameraId.toString()] || `Camera ${cameraId}`;
+      window.location.href = `/fullscreen/${cameraId}?title=${encodeURIComponent(customTitle)}`;
+    }
+
+    // Apply current settings
+    function applyCurrentSettings() {
+      // Apply title visibility
+      const showTitles = currentSettings.display_options.show_titles;
+      if (document.getElementById('toggleTitles')) {
+        document.getElementById('toggleTitles').checked = showTitles;
+      }
+      
+      for (let i = 1; i <= 6; i++) {
+        const cardTitle = document.getElementById(`cardTitle${i}`);
+        if (cardTitle) {
+          cardTitle.style.display = showTitles ? 'block' : 'none';
+        }
+      }
+      
+      // Apply title size
+      const titleSize = currentSettings.display_options.title_size;
+      if (document.getElementById('titleSizeValue')) {
+        document.getElementById('titleSizeValue').textContent = titleSize;
+      }
+      if (document.getElementById('titleSize')) {
+        document.getElementById('titleSize').value = titleSize;
+      }
+      
+      for (let i = 1; i <= 6; i++) {
+        const cardTitle = document.getElementById(`cardTitle${i}`);
+        if (cardTitle) {
+          cardTitle.style.fontSize = `${titleSize}rem`;
+        }
+      }
+      
+      // Apply card titles
+      for (let i = 1; i <= 6; i++) {
+        const cardTitle = document.getElementById(`cardTitle${i}`);
+        if (cardTitle) {
+          const title = currentSettings.camera_titles[i.toString()] || `Camera ${i}`;
+          cardTitle.textContent = title;
+        }
+        
+        if (!tournamentActive) {
+          const input = document.getElementById(`titleInput${i}`);
+          if (input) {
+            input.value = currentSettings.camera_titles[i.toString()] || `Camera ${i}`;
+          }
+        }
+      }
+    }
+
+    // Time and date updates
+    function updateDateTime() {
+      const now = new Date();
+      const hours = now.getHours().toString().padStart(2, '0');
+      const minutes = now.getMinutes().toString().padStart(2, '0');
+      const day = now.getDate().toString().padStart(2, '0');
+      const month = (now.getMonth() + 1).toString().padStart(2, '0');
+      const year = now.getFullYear();
+
+      const timeEl = document.getElementById('time');
+      const dateEl = document.getElementById('date');
+      
+      if (timeEl) timeEl.textContent = `${hours}:${minutes}`;
+      if (dateEl) dateEl.textContent = `${day}.${month}.${year}`;
+    }
+
+    // Settings panel functionality
+    const menuButton = document.getElementById('menuButton');
+    const settingsPanel = document.getElementById('settingsPanel');
+    const overlay = document.getElementById('overlay');
+    const closeBtn = document.getElementById('closeBtn');
+
+    function openSettings() {
+      settingsPanel.classList.add('active');
+      overlay.classList.add('active');
+    }
+
+    function closeSettings() {
+      settingsPanel.classList.remove('active');
+      overlay.classList.remove('active');
+    }
+
+    // Event listeners
+    if (menuButton) menuButton.addEventListener('click', openSettings);
+    if (closeBtn) closeBtn.addEventListener('click', closeSettings);
+    if (overlay) overlay.addEventListener('click', closeSettings);
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'Escape' && settingsPanel.classList.contains('active')) {
+        closeSettings();
+      } else if (tournamentActive) {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          changeRound(-1);
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          changeRound(1);
+        }
+      }
+    });
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+      updateDateTime();
+      setInterval(updateDateTime, 1000);
+      updateRoundNavigation();
+      applyCurrentSettings();
+      addTouchFeedback();
+    });
+
+    // Add touch feedback for interactive elements on touch devices
+    function addTouchFeedback() {
+      if (isMobileDevice()) {
+        const touchElements = document.querySelectorAll('.camera-card, .nav-btn');
+        
+        touchElements.forEach(element => {
+          element.addEventListener('touchstart', function(e) {
+            if (!this.disabled) {
+              this.style.transform = 'scale(0.95) translateY(0)';
+              this.style.transition = 'transform 0.1s ease';
+            }
+          });
+          
+          element.addEventListener('touchend', function(e) {
+            if (!this.disabled) {
+              setTimeout(() => {
+                this.style.transform = '';
+                this.style.transition = 'transform 0.2s ease';
+              }, 100);
+            }
+          });
+          
+          element.addEventListener('touchcancel', function(e) {
+            if (!this.disabled) {
+              this.style.transform = '';
+              this.style.transition = 'transform 0.2s ease';
+            }
+          });
+        });
+      }
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/league_results_display.html b/TV_APP_V2/templates/league_results_display.html
new file mode 100644
index 0000000..3c9cda2
--- /dev/null
+++ b/TV_APP_V2/templates/league_results_display.html
@@ -0,0 +1,1112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>{% if league.league_finished %}League Final Results{% else %}League Scoreboard{% endif %}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f8f9fa;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      height: 100vh;
+      overflow: hidden;
+      color: #333;
+    }
+
+    .navbar {
+      background: white;
+      border-bottom: 1px solid #e1e5e9;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .navbar-logo {
+      height: 40px;
+      max-width: 120px;
+      object-fit: contain;
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      margin-left: 15px;
+    }
+
+    .navbar-brand {
+      display: flex;
+      align-items: center;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px 20px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.primary {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.primary:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    /* Main League Layout */
+    .league-container {
+      height: calc(100vh - 90px);
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      gap: 20px;
+      padding: 20px;
+    }
+
+    /* Left Column - Header & Current Leaders */
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .league-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 25px;
+      text-align: center;
+      flex-shrink: 0;
+      color: white;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .league-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
+      pointer-events: none;
+    }
+
+    .league-header * {
+      position: relative;
+      z-index: 2;
+    }
+
+    .header-logo {
+      height: 70px;
+      max-width: 180px;
+      object-fit: contain;
+      margin-bottom: 20px;
+      filter: brightness(1.2) contrast(1.1);
+      background-color: white;
+      padding: 10px;
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .league-title {
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: rgb(255, 255, 255);
+      margin-bottom: 10px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .league-subtitle {
+      font-size: 1.1rem;
+      color: rgba(255, 255, 255, 0.95);
+      margin-bottom: 20px;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    }
+
+    .league-meta {
+      display: flex;
+      justify-content: space-around;
+      gap: 30px;
+    }
+
+    .meta-item {
+      text-align: center;
+    }
+
+    .meta-number {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #ffffff;
+      display: block;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .meta-label {
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.9);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 500;
+    }
+
+    /* Current Leaders Section */
+    .leaders-section {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      padding: 25px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .leaders-title {
+      text-align: center;
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: #2c3e50;
+      margin-bottom: 20px;
+    }
+
+    .leader-container {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      flex: 1;
+    }
+
+    .leader-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+      border-left: 5px solid;
+    }
+
+    .leader-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    .leader-card.rank-1 {
+      border-left-color: #ffd700;
+      background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
+    }
+
+    .leader-card.rank-2 {
+      border-left-color: #c0c0c0;
+      background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+    }
+
+    .leader-card.rank-3 {
+      border-left-color: #cd7f32;
+      background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
+    }
+
+    .rank-display {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 60px;
+    }
+
+    .rank-number {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      line-height: 1;
+    }
+
+    .leader-card.rank-1 .rank-number { color: #b8860b; }
+    .leader-card.rank-2 .rank-number { color: #696969; }
+    .leader-card.rank-3 .rank-number { color: #8b4513; }
+
+    .rank-suffix {
+      font-size: 0.7rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .medal {
+      font-size: 1.5rem;
+      margin-top: 3px;
+    }
+
+    .participant-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .participant-name {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 5px;
+      word-wrap: break-word;
+    }
+
+    .participant-details {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .participant-id {
+      background: #007bff;
+      color: white;
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .joker-badge {
+      background: #ffc107;
+      color: #856404;
+      padding: 3px 8px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .current-tournament-badge {
+      background: #28a745;
+      color: white;
+      padding: 3px 8px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .score-display {
+      text-align: right;
+      min-width: 100px;
+    }
+
+    .final-score {
+      font-size: 2rem;
+      font-weight: bold;
+      color: #28a745;
+      line-height: 1;
+    }
+
+    .current-score {
+      font-size: 0.9rem;
+      color: #666;
+      margin-top: 2px;
+    }
+
+    .score-label {
+      font-size: 0.8rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    /* Right Column - Full League Table */
+    .right-column {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .table-header {
+      background: #f8f9fa;
+      padding: 15px 20px;
+      border-bottom: 1px solid #dee2e6;
+      flex-shrink: 0;
+    }
+
+    .table-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #2c3e50;
+      margin: 0;
+    }
+
+    .table-container {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .league-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+    }
+
+    .league-table th,
+    .league-table td {
+      padding: 8px 6px;
+      text-align: center;
+      border-bottom: 1px solid #f1f3f4;
+      border-right: 1px solid #f1f3f4;
+    }
+
+    .league-table th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #495057;
+      text-transform: uppercase;
+      font-size: 0.65rem;
+      letter-spacing: 0.5px;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    .league-table th.player-col {
+      text-align: left;
+      width: 140px;
+    }
+
+    .league-table th.tournament-col {
+      width: 70px;
+    }
+
+    .league-table th.final-col {
+      width: 80px;
+      background: #e3f2fd;
+    }
+
+    .league-table th.current-col {
+      width: 80px;
+      background: #e8f5e8;
+    }
+
+    .league-table tbody tr:hover {
+      background: #f8f9fa;
+    }
+
+    .league-table tbody tr:nth-child(1) {
+      background: #fff9e6;
+    }
+
+    .league-table tbody tr:nth-child(1):hover {
+      background: #fff3cd;
+    }
+
+    .league-table tbody tr:nth-child(2) {
+      background: #f5f5f5;
+    }
+
+    .league-table tbody tr:nth-child(2):hover {
+      background: #e9ecef;
+    }
+
+    .league-table tbody tr:nth-child(3) {
+      background: #fdf6f0;
+    }
+
+    .league-table tbody tr:nth-child(3):hover {
+      background: #f8f1e6;
+    }
+
+    .rank-cell {
+      font-size: 1rem;
+      font-weight: 700;
+      width: 50px;
+      text-align: center;
+    }
+
+    .rank-1 { color: #b8860b; }
+    .rank-2 { color: #6c757d; }
+    .rank-3 { color: #8b4513; }
+
+    .player-cell {
+      text-align: left !important;
+      padding-left: 12px !important;
+    }
+
+    .player-name {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: #2c3e50;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      hyphens: none;
+    }
+
+    .player-id {
+      background: #007bff;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 6px;
+      font-size: 0.65rem;
+      font-weight: 500;
+      display: inline-block;
+      margin-top: 2px;
+    }
+
+    .tournament-score {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: #333;
+      min-width: 40px;
+    }
+
+    .tournament-score.joker {
+      background: #ffc107;
+      color: #856404;
+      padding: 3px 6px;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .tournament-score.excluded {
+      background: #dc3545;
+      color: white;
+      padding: 3px 6px;
+      border-radius: 4px;
+      text-decoration: line-through;
+      opacity: 0.8;
+      font-size: 0.7rem;
+    }
+
+    .tournament-score.counted {
+      background: #28a745;
+      color: white;
+      padding: 3px 6px;
+      border-radius: 4px;
+      font-weight: 600;
+      font-size: 0.75rem;
+    }
+
+    .final-score-cell {
+      background: #e3f2fd !important;
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: #1976d2;
+    }
+
+    .current-tournament-cell {
+      background: #e8f5e8 !important;
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: #2e7d32;
+    }
+
+    /* Tournament Headers */
+    .tournament-header-group {
+      background: #e3f2fd;
+      border-bottom: 2px solid #1976d2;
+    }
+
+    .tournament-header-group th {
+      background: #e3f2fd;
+      color: #1976d2;
+      font-weight: 700;
+    }
+
+    /* Calculation Legend */
+    .calculation-legend {
+      background: #f8f9fa;
+      border-top: 1px solid #dee2e6;
+      padding: 15px 20px;
+      flex-shrink: 0;
+    }
+
+    .legend-title {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: #2c3e50;
+      margin-bottom: 10px;
+    }
+
+    .legend-items {
+      display: flex;
+      gap: 20px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.8rem;
+      color: #495057;
+    }
+
+    .legend-box {
+      width: 20px;
+      height: 16px;
+      border-radius: 3px;
+      display: inline-block;
+    }
+
+    .legend-joker { background: #ffc107; }
+    .legend-excluded { background: #dc3545; }
+    .legend-counted { background: #28a745; }
+    .legend-final { background: #1976d2; }
+    .legend-current { background: #2e7d32; }
+
+    /* League Stats Footer */
+    .stats-footer {
+      background: white;
+      border-top: 1px solid #dee2e6;
+      padding: 10px 20px;
+      display: flex;
+      justify-content: space-around;
+      font-size: 0.8rem;
+      color: #6c757d;
+      flex-shrink: 0;
+    }
+
+    .stat-item {
+      text-align: center;
+    }
+
+    .stat-value {
+      font-weight: 600;
+      color: #007bff;
+    }
+
+    /* Mobile responsive */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 10px 15px;
+      }
+      
+      .navbar-title {
+        font-size: 1.4rem;
+      }
+      
+      .navbar-logo {
+        height: 30px;
+        max-width: 90px;
+      }
+
+      .league-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+      }
+
+      .leaders-section {
+        padding: 20px 15px;
+      }
+
+      .leaders-title {
+        font-size: 1.3rem;
+        margin-bottom: 20px;
+      }
+
+      .leader-container {
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .leader-card {
+        padding: 15px 20px;
+        gap: 15px;
+      }
+
+      .rank-display {
+        min-width: 50px;
+      }
+
+      .rank-number {
+        font-size: 1.6rem;
+      }
+
+      .medal {
+        font-size: 1.3rem;
+      }
+
+      .participant-name {
+        font-size: 1.1rem;
+      }
+
+      .final-score {
+        font-size: 1.6rem;
+      }
+
+      /* Mobile table adjustments */
+      .league-table {
+        font-size: 0.75rem;
+      }
+
+      .league-table th,
+      .league-table td {
+        padding: 6px 4px;
+      }
+
+      .league-table th.player-col {
+        width: 100px;
+      }
+
+      .league-table th.tournament-col {
+        width: 50px;
+      }
+
+      .tournament-score {
+        font-size: 0.7rem;
+      }
+
+      .tournament-score.counted,
+      .tournament-score.excluded,
+      .tournament-score.joker {
+        padding: 2px 4px;
+        font-size: 0.65rem;
+      }
+
+      .legend-items {
+        gap: 10px;
+      }
+
+      .legend-item {
+        font-size: 0.75rem;
+      }
+
+      .legend-box {
+        width: 16px;
+        height: 12px;
+      }
+    }
+
+    /* Auto-refresh indicator */
+    .refresh-indicator {
+      position: fixed;
+      top: 100px;
+      right: 20px;
+      background: rgba(40, 167, 69, 0.9);
+      color: white;
+      padding: 5px 10px;
+      border-radius: 15px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: 1000;
+    }
+
+    .refresh-indicator.show {
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-brand">
+      <div class="navbar-title">
+        {% if league.league_finished %}🏆 League Final Results{% else %}📊 League Scoreboard{% endif %}
+      </div>
+    </div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">← Dashboard</a>
+      <a href="/tournament" class="nav-btn">🏆 Tournament</a>
+      <button class="nav-btn" onclick="window.print()">🖨️ Print</button>
+    </div>
+  </div>
+
+  <div class="league-container">
+    <!-- Left Column -->
+    <div class="left-column">
+      <!-- League Header -->
+      <div class="league-header">
+        <img src="/static/logo.png" alt="Logo" class="header-logo" onerror="this.style.display='none'" />
+        <div class="league-title">
+          {% if league.league_finished %}League Championship{% else %}League Scoreboard{% endif %}
+        </div>
+        <div class="league-subtitle">
+          {% if league.league_finished %}
+            Final Rankings - Best 5 of 6 Tournaments
+          {% else %}
+            Tournament {{ league.current_tournament }} of {{ league.total_tournaments }} - Live Updates
+          {% endif %}
+        </div>
+        <div class="league-meta">
+          <div class="meta-item">
+            <span class="meta-number">{{ participants|length }}</span>
+            <span class="meta-label">Participants</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">{{ league.current_tournament if not league.league_finished else league.total_tournaments }}</span>
+            <span class="meta-label">{% if league.league_finished %}Total Tournaments{% else %}Current Tournament{% endif %}</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">
+              {% if league.tournament_type == '40_targets' %}40{% else %}20{% endif %}
+            </span>
+            <span class="meta-label">Targets</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">{% if participants and participants|length > 0 %}{{ participants[0].final_score if league.league_finished else participants[0].current_total }}{% else %}0{% endif %}</span>
+            <span class="meta-label">{% if league.league_finished %}Final Score{% else %}Leading Score{% endif %}</span>
+          </div>
+        </div>
+      </div>
+
+      {% if participants and participants|length >= 3 %}
+      <!-- Current Leaders / Final Champions -->
+      <div class="leaders-section">
+        <div class="leaders-title">
+          {% if league.league_finished %}🏆 Final Champions{% else %}🥇 Current Leaders{% endif %}
+        </div>
+        <div class="leader-container">
+          {% for i in range(3) %}
+            {% set participant = participants[i] %}
+            <div class="leader-card rank-{{ participant.rank }}">
+              <div class="rank-display">
+                <div class="rank-number">{{ participant.rank }}</div>
+                <div class="rank-suffix">
+                  {% if participant.rank == 1 %}st
+                  {% elif participant.rank == 2 %}nd
+                  {% elif participant.rank == 3 %}rd
+                  {% else %}th
+                  {% endif %}
+                </div>
+                <div class="medal">
+                  {% if participant.rank == 1 %}🥇
+                  {% elif participant.rank == 2 %}🥈
+                  {% elif participant.rank == 3 %}🥉
+                  {% endif %}
+                </div>
+              </div>
+              
+              <div class="participant-info">
+                <div class="participant-name">{{ participant.name }}</div>
+                <div class="participant-details">
+                  <div class="participant-id">ID: {{ participant.id }}</div>
+                  {% if participant.joker_used %}
+                    <div class="joker-badge">🃏 Joker Used</div>
+                  {% endif %}
+                  {% if not league.league_finished and participant.current_tournament_participating %}
+                    <div class="current-tournament-badge">🎯 Playing Now</div>
+                  {% endif %}
+                </div>
+              </div>
+              
+              <div class="score-display">
+                <div class="final-score">{{ participant.final_score if league.league_finished else participant.current_total }}</div>
+                {% if not league.league_finished %}
+                  <div class="current-score">
+                    {% if participant.current_tournament_participating %}
+                      Current: +{{ participant.current_tournament_score }}
+                    {% else %}
+                      Final: {{ participant.final_score }}
+                    {% endif %}
+                  </div>
+                {% else %}
+                  <div class="current-score">Total: {{ participant.total_score }}</div>
+                {% endif %}
+                <div class="score-label">{% if league.league_finished %}Final Score{% else %}Current Score{% endif %}</div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Right Column -->
+    <div class="right-column">
+      <div class="table-header">
+        <h3 class="table-title">
+          {% if league.league_finished %}
+            📊 Complete Tournament Breakdown & Final Calculation
+          {% else %}
+            📊 League Standings - Tournament {{ league.current_tournament }} of {{ league.total_tournaments }}
+          {% endif %}
+        </h3>
+      </div>
+      
+      <div class="table-container">
+        <table class="league-table">
+          <thead>
+            <tr>
+              <th rowspan="2" class="rank-cell">Rank</th>
+              <th rowspan="2" class="player-col">Participant</th>
+              <th colspan="6" class="tournament-header-group">Individual Tournament Scores</th>
+              <th rowspan="2" class="final-col">
+                {% if league.league_finished %}
+                  Final Score<br><small>(Best 5)</small>
+                {% else %}
+                  Current<br><small>(Best 5)</small>
+                {% endif %}
+              </th>
+              {% if not league.league_finished %}
+                <th rowspan="2" class="current-col">Live<br><small>T{{ league.current_tournament }}</small></th>
+              {% endif %}
+            </tr>
+            <tr class="tournament-header-group">
+              <th class="tournament-col">T1</th>
+              <th class="tournament-col">T2</th>
+              <th class="tournament-col">T3</th>
+              <th class="tournament-col">T4</th>
+              <th class="tournament-col">T5</th>
+              <th class="tournament-col">T6</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for participant in participants %}
+            <tr>
+              <td class="rank-cell rank-{{ participant.rank if participant.rank <= 3 else 'other' }}">
+                {{ participant.rank }}
+                {% if participant.rank == 1 %}🏆
+                {% elif participant.rank == 2 %}🥈
+                {% elif participant.rank == 3 %}🥉
+                {% endif %}
+              </td>
+              <td class="player-cell">
+                <div class="player-name">{{ participant.name }}</div>
+                <div class="player-id">{{ participant.id }}</div>
+              </td>
+              
+              <!-- Tournament Scores -->
+              {% for tournament_num in range(1, 7) %}
+                <td>
+                  {% set found_result = false %}
+                  {% for result in participant.tournament_results %}
+                    {% if result.tournament == tournament_num %}
+                      {% set found_result = true %}
+                      {% if result.get('joker') or not result.participated %}
+                        <span class="tournament-score joker">🃏</span>
+                      {% else %}
+                        {% set all_scores = [] %}
+                        {% for r in participant.tournament_results if r.participated %}
+                          {% set _ = all_scores.append(r.score) %}
+                        {% endfor %}
+                        {% set sorted_scores = all_scores|sort(reverse=true) %}
+                        {% set excluded_score = sorted_scores[-1] if sorted_scores|length > 5 else none %}
+                        
+                        {% if all_scores|length > 5 and result.score == excluded_score %}
+                          <span class="tournament-score excluded">{{ result.score }}</span>
+                        {% else %}
+                          <span class="tournament-score counted">{{ result.score }}</span>
+                        {% endif %}
+                      {% endif %}
+                    {% endif %}
+                  {% endfor %}
+                  {% if not found_result %}
+                    <span class="tournament-score">-</span>
+                  {% endif %}
+                </td>
+              {% endfor %}
+              
+              <td class="final-score-cell">
+                {% if league.league_finished %}
+                  {{ participant.final_score }}
+                {% else %}
+                  {{ participant.current_total }}
+                {% endif %}
+              </td>
+              
+              {% if not league.league_finished %}
+                <td class="current-tournament-cell">
+                  {% if participant.current_tournament_participating %}
+                    {{ participant.current_tournament_score }}
+                  {% else %}
+                    -
+                  {% endif %}
+                </td>
+              {% endif %}
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+
+      <div class="calculation-legend">
+        <div class="legend-title">📖 Scoring Legend:</div>
+        <div class="legend-items">
+          <div class="legend-item">
+            <span class="legend-box legend-counted"></span>
+            <span>Counted Score</span>
+          </div>
+          {% if league.league_finished %}
+            <div class="legend-item">
+              <span class="legend-box legend-excluded"></span>
+              <span>Excluded (Worst)</span>
+            </div>
+          {% endif %}
+          <div class="legend-item">
+            <span class="legend-box legend-joker"></span>
+            <span>Joker Used</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-box legend-final"></span>
+            <span>{% if league.league_finished %}Final Score (Best 5){% else %}Current Score{% endif %}</span>
+          </div>
+          {% if not league.league_finished %}
+            <div class="legend-item">
+              <span class="legend-box legend-current"></span>
+              <span>Live Tournament</span>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+
+      <div class="stats-footer">
+        <div class="stat-item">
+          <div class="stat-value">{{ participants|length if participants else 0 }}</div>
+          <div>Participants</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{{ league.current_tournament if not league.league_finished else league.total_tournaments }}</div>
+          <div>{% if league.league_finished %}Total Tournaments{% else %}Current Tournament{% endif %}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">
+            {% if participants and participants|length > 0 %}
+              {% if league.league_finished %}{{ participants[0].final_score }}{% else %}{{ participants[0].current_total }}{% endif %}
+            {% else %}0{% endif %}
+          </div>
+          <div>{% if league.league_finished %}Highest Score{% else %}Leading Score{% endif %}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">
+            {% if participants %}
+              {% if league.league_finished %}
+                {{ "%.0f"|format(participants|map(attribute='final_score')|sum / participants|length) }}
+              {% else %}
+                {{ "%.0f"|format(participants|map(attribute='current_total')|sum / participants|length) }}
+              {% endif %}
+            {% else %}0{% endif %}
+          </div>
+          <div>Average Score</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">
+            {% if league.league_finished %}
+              {{ league.finished_at[:10] if league.finished_at else 'Today' }}
+            {% else %}
+              Live
+            {% endif %}
+          </div>
+          <div>{% if league.league_finished %}League Date{% else %}Status{% endif %}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Auto-refresh indicator -->
+  <div class="refresh-indicator" id="refreshIndicator">
+    🔄 Updating...
+  </div>
+
+  <script>
+    const participants = {{ participants|tojson }};
+    const league = {{ league|tojson }};
+    const isFinished = {{ 'true' if league.league_finished else 'false' }};
+
+    // Show winner celebration for finished leagues
+    function showLeagueChampionHighlight() {
+      if (participants && participants.length > 0 && isFinished) {
+        setTimeout(() => {
+          const champion = document.querySelector('.leader-card.rank-1');
+          if (champion) {
+            champion.style.boxShadow = '0 4px 15px rgba(255, 215, 0, 0.4)';
+            
+            setTimeout(() => {
+              champion.style.boxShadow = '';
+            }, 3000);
+          }
+        }, 1000);
+      }
+    }
+
+    // Auto-refresh for ongoing leagues
+    function setupAutoRefresh() {
+      if (!isFinished) {
+        setInterval(() => {
+          const indicator = document.getElementById('refreshIndicator');
+          indicator.classList.add('show');
+          
+          setTimeout(() => {
+            window.location.reload();
+          }, 1000);
+        }, 30000); // Refresh every 30 seconds for ongoing leagues
+      }
+    }
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'r' || event.key === 'R') {
+        event.preventDefault();
+        window.location.reload();
+      } else if (event.key === 'p' || event.key === 'P') {
+        event.preventDefault();
+        window.print();
+      }
+    });
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+      showLeagueChampionHighlight();
+      setupAutoRefresh();
+      
+      // Show refresh indicator briefly on load
+      setTimeout(() => {
+        const indicator = document.getElementById('refreshIndicator');
+        indicator.classList.add('show');
+        
+        setTimeout(() => {
+          indicator.classList.remove('show');
+        }, 2000);
+      }, 500);
+
+      console.log(`🏆 League ${isFinished ? 'Results' : 'Scoreboard'}: ${participants ? participants.length : 0} participants displayed`);
+      console.log('🎯 Tournament type:', league.tournament_type);
+      console.log('📊 League status:', isFinished ? 'Finished' : `Active - Tournament ${league.current_tournament}/${league.total_tournaments}`);
+    });
+
+    // Handle screen size changes
+    window.addEventListener('resize', function() {
+      document.body.style.display = 'none';
+      document.body.offsetHeight;
+      document.body.style.display = '';
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/league_scoreboard_display.html b/TV_APP_V2/templates/league_scoreboard_display.html
new file mode 100644
index 0000000..57d61f4
--- /dev/null
+++ b/TV_APP_V2/templates/league_scoreboard_display.html
@@ -0,0 +1,1156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>League Results</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f8f9fa;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      height: 100vh;
+      overflow: hidden;
+      color: #333;
+    }
+
+    .navbar {
+      background: white;
+      border-bottom: 1px solid #e1e5e9;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .navbar-logo {
+      height: 40px;
+      max-width: 120px;
+      object-fit: contain;
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      margin-left: 15px;
+    }
+
+    .navbar-brand {
+      display: flex;
+      align-items: center;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px 20px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.primary {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.primary:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    /* Main League Layout */
+    .league-container {
+      height: calc(100vh - 90px);
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      gap: 20px;
+      padding: 20px;
+    }
+
+    /* Left Column - Header & Final Podium */
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .league-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 25px;
+      text-align: center;
+      flex-shrink: 0;
+      color: white;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .league-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
+      pointer-events: none;
+    }
+
+    .league-header * {
+      position: relative;
+      z-index: 2;
+    }
+
+    .header-logo {
+      height: 70px;
+      max-width: 180px;
+      object-fit: contain;
+      margin-bottom: 20px;
+      filter: brightness(1.2) contrast(1.1);
+      background-color: white;
+      padding: 10px;
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .league-title {
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: rgb(255, 255, 255);
+      margin-bottom: 10px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .league-subtitle {
+      font-size: 1.1rem;
+      color: rgba(255, 255, 255, 0.95);
+      margin-bottom: 20px;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    }
+
+    .league-meta {
+      display: flex;
+      justify-content: space-around;
+      gap: 30px;
+    }
+
+    .meta-item {
+      text-align: center;
+    }
+
+    .meta-number {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #ffffff;
+      display: block;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .meta-label {
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.9);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 500;
+    }
+
+    /* League Champion Podium */
+    .champion-section {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      padding: 25px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .champion-title {
+      text-align: center;
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: #2c3e50;
+      margin-bottom: 20px;
+    }
+
+    .champion-container {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      flex: 1;
+    }
+
+    .champion-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+      border-left: 5px solid;
+    }
+
+    .champion-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    .champion-card.rank-1 {
+      border-left-color: #ffd700;
+      background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
+    }
+
+    .champion-card.rank-2 {
+      border-left-color: #c0c0c0;
+      background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+    }
+
+    .champion-card.rank-3 {
+      border-left-color: #cd7f32;
+      background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
+    }
+
+    .rank-display {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 60px;
+    }
+
+    .rank-number {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      line-height: 1;
+    }
+
+    .champion-card.rank-1 .rank-number { color: #b8860b; }
+    .champion-card.rank-2 .rank-number { color: #696969; }
+    .champion-card.rank-3 .rank-number { color: #8b4513; }
+
+    .rank-suffix {
+      font-size: 0.7rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .medal {
+      font-size: 1.5rem;
+      margin-top: 3px;
+    }
+
+    .participant-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .participant-name {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 5px;
+      word-wrap: break-word;
+    }
+
+    .participant-details {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .participant-id {
+      background: #007bff;
+      color: white;
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .joker-badge {
+      background: #ffc107;
+      color: #856404;
+      padding: 3px 8px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .score-display {
+      text-align: right;
+      min-width: 100px;
+    }
+
+    .final-score {
+      font-size: 2rem;
+      font-weight: bold;
+      color: #28a745;
+      line-height: 1;
+    }
+
+    .total-score {
+      font-size: 0.9rem;
+      color: #666;
+      margin-top: 2px;
+    }
+
+    .score-label {
+      font-size: 0.8rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    /* Right Column - Full League Table with Tournament Breakdown */
+    .right-column {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .table-header {
+      background: #f8f9fa;
+      padding: 15px 20px;
+      border-bottom: 1px solid #dee2e6;
+      flex-shrink: 0;
+    }
+
+    .table-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #2c3e50;
+      margin: 0;
+    }
+
+    .table-container {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .league-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+    }
+
+    .league-table th,
+    .league-table td {
+      padding: 8px 6px;
+      text-align: center;
+      border-bottom: 1px solid #f1f3f4;
+      border-right: 1px solid #f1f3f4;
+    }
+
+    .league-table th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #495057;
+      text-transform: uppercase;
+      font-size: 0.65rem;
+      letter-spacing: 0.5px;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    .league-table th.player-col {
+      text-align: left;
+      width: 140px;
+    }
+
+    .league-table th.tournament-col {
+      width: 70px;
+    }
+
+    .league-table th.final-col {
+      width: 80px;
+      background: #e3f2fd;
+    }
+
+    .league-table tbody tr:hover {
+      background: #f8f9fa;
+    }
+
+    .league-table tbody tr:nth-child(1) {
+      background: #fff9e6;
+    }
+
+    .league-table tbody tr:nth-child(1):hover {
+      background: #fff3cd;
+    }
+
+    .league-table tbody tr:nth-child(2) {
+      background: #f5f5f5;
+    }
+
+    .league-table tbody tr:nth-child(2):hover {
+      background: #e9ecef;
+    }
+
+    .league-table tbody tr:nth-child(3) {
+      background: #fdf6f0;
+    }
+
+    .league-table tbody tr:nth-child(3):hover {
+      background: #f8f1e6;
+    }
+
+    .rank-cell {
+      font-size: 1rem;
+      font-weight: 700;
+      width: 50px;
+      text-align: center;
+    }
+
+    .rank-1 { color: #b8860b; }
+    .rank-2 { color: #6c757d; }
+    .rank-3 { color: #8b4513; }
+
+    .player-cell {
+      text-align: left !important;
+      padding-left: 12px !important;
+    }
+
+    .player-name {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: #2c3e50;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      hyphens: none;
+    }
+
+    .player-id {
+      background: #007bff;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 6px;
+      font-size: 0.65rem;
+      font-weight: 500;
+      display: inline-block;
+      margin-top: 2px;
+    }
+
+    .tournament-score {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: #333;
+      min-width: 40px;
+    }
+
+    .tournament-score.joker {
+      background: #ffc107;
+      color: #856404;
+      padding: 3px 6px;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      font-weight: 600;
+    }
+
+    .tournament-score.excluded {
+      background: #dc3545;
+      color: white;
+      padding: 3px 6px;
+      border-radius: 4px;
+      text-decoration: line-through;
+      opacity: 0.8;
+      font-size: 0.7rem;
+    }
+
+    .tournament-score.counted {
+      background: #28a745;
+      color: white;
+      padding: 3px 6px;
+      border-radius: 4px;
+      font-weight: 600;
+      font-size: 0.75rem;
+    }
+
+    .final-score-cell {
+      background: #e3f2fd !important;
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: #1976d2;
+    }
+
+    /* Tournament Headers */
+    .tournament-header-group {
+      background: #e3f2fd;
+      border-bottom: 2px solid #1976d2;
+    }
+
+    .tournament-header-group th {
+      background: #e3f2fd;
+      color: #1976d2;
+      font-weight: 700;
+    }
+
+    /* Calculation Legend */
+    .calculation-legend {
+      background: #f8f9fa;
+      border-top: 1px solid #dee2e6;
+      padding: 15px 20px;
+      flex-shrink: 0;
+    }
+
+    .legend-title {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: #2c3e50;
+      margin-bottom: 10px;
+    }
+
+    .legend-items {
+      display: flex;
+      gap: 20px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.8rem;
+      color: #495057;
+    }
+
+    .legend-box {
+      width: 20px;
+      height: 16px;
+      border-radius: 3px;
+      display: inline-block;
+    }
+
+    .legend-joker { background: #ffc107; }
+    .legend-excluded { background: #dc3545; }
+    .legend-counted { background: #28a745; }
+    .legend-final { background: #1976d2; }
+
+    /* Tournament History Breakdown */
+    .tournament-breakdown {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      margin-top: 20px;
+      overflow: hidden;
+    }
+
+    .breakdown-header {
+      background: #f8f9fa;
+      padding: 15px 20px;
+      border-bottom: 1px solid #dee2e6;
+    }
+
+    .breakdown-title {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #2c3e50;
+      margin: 0;
+    }
+
+    .breakdown-grid {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 1px;
+      background: #dee2e6;
+    }
+
+    .tournament-column {
+      background: white;
+      padding: 15px 10px;
+      text-align: center;
+    }
+
+    .tournament-number {
+      font-size: 0.8rem;
+      font-weight: bold;
+      color: #007bff;
+      margin-bottom: 10px;
+    }
+
+    .participant-score {
+      display: block;
+      padding: 4px 6px;
+      margin: 2px 0;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      font-weight: 500;
+      background: #f8f9fa;
+      color: #333;
+    }
+
+    .participant-score.joker {
+      background: #ffc107;
+      color: #856404;
+    }
+
+    .participant-score.excluded {
+      background: #dc3545;
+      color: white;
+      text-decoration: line-through;
+      opacity: 0.7;
+    }
+
+    /* League Stats Footer */
+    .stats-footer {
+      background: white;
+      border-top: 1px solid #dee2e6;
+      padding: 10px 20px;
+      display: flex;
+      justify-content: space-around;
+      font-size: 0.8rem;
+      color: #6c757d;
+      flex-shrink: 0;
+    }
+
+    .stat-item {
+      text-align: center;
+    }
+
+    .stat-value {
+      font-weight: 600;
+      color: #007bff;
+    }
+
+    /* Mobile responsive */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 10px 15px;
+      }
+      
+      .navbar-title {
+        font-size: 1.4rem;
+      }
+      
+      .navbar-logo {
+        height: 30px;
+        max-width: 90px;
+      }
+
+      .league-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+      }
+
+      .champion-section {
+        padding: 20px 15px;
+      }
+
+      .champion-title {
+        font-size: 1.3rem;
+        margin-bottom: 20px;
+      }
+
+      .champion-container {
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .champion-card {
+        padding: 15px 20px;
+        gap: 15px;
+      }
+
+      .rank-display {
+        min-width: 50px;
+      }
+
+      .rank-number {
+        font-size: 1.6rem;
+      }
+
+      .medal {
+        font-size: 1.3rem;
+      }
+
+      .participant-name {
+        font-size: 1.1rem;
+      }
+
+      .final-score {
+        font-size: 1.6rem;
+      }
+
+      /* Mobile table adjustments */
+      .league-table {
+        font-size: 0.75rem;
+      }
+
+      .league-table th,
+      .league-table td {
+        padding: 6px 4px;
+      }
+
+      .league-table th.player-col {
+        width: 100px;
+      }
+
+      .league-table th.tournament-col {
+        width: 50px;
+      }
+
+      .tournament-score {
+        font-size: 0.7rem;
+      }
+
+      .tournament-score.counted,
+      .tournament-score.excluded,
+      .tournament-score.joker {
+        padding: 2px 4px;
+        font-size: 0.65rem;
+      }
+
+      .legend-items {
+        gap: 10px;
+      }
+
+      .legend-item {
+        font-size: 0.75rem;
+      }
+
+      .legend-box {
+        width: 16px;
+        height: 12px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .navbar-logo {
+        height: 28px;
+        max-width: 80px;
+      }
+      
+      .navbar-title {
+        font-size: 1.2rem;
+      }
+
+      .champion-section {
+        padding: 15px 10px;
+      }
+
+      .champion-card {
+        padding: 12px 15px;
+        gap: 12px;
+      }
+
+      .rank-display {
+        min-width: 45px;
+      }
+
+      .rank-number {
+        font-size: 1.4rem;
+      }
+
+      .medal {
+        font-size: 1.2rem;
+      }
+
+      .participant-name {
+        font-size: 1rem;
+      }
+
+      .final-score {
+        font-size: 1.4rem;
+      }
+
+      .rank-suffix {
+        font-size: 0.65rem;
+      }
+
+      /* Ultra-compact mobile table */
+      .league-table {
+        font-size: 0.7rem;
+      }
+
+      .league-table th,
+      .league-table td {
+        padding: 4px 2px;
+      }
+
+      .league-table th.player-col {
+        width: 80px;
+      }
+
+      .league-table th.tournament-col {
+        width: 40px;
+      }
+
+      .player-name {
+        font-size: 0.75rem;
+      }
+
+      .player-id {
+        font-size: 0.6rem;
+        padding: 1px 4px;
+      }
+
+      .tournament-score {
+        font-size: 0.65rem;
+      }
+
+      .tournament-score.counted,
+      .tournament-score.excluded,
+      .tournament-score.joker {
+        padding: 1px 3px;
+        font-size: 0.6rem;
+      }
+
+      .final-score-cell {
+        font-size: 0.9rem;
+      }
+
+      .legend-title {
+        font-size: 0.8rem;
+      }
+
+      .legend-items {
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+      }
+
+      .legend-item {
+        font-size: 0.7rem;
+      }
+
+      .legend-box {
+        width: 14px;
+        height: 10px;
+      }
+    }
+
+    /* Auto-refresh indicator */
+    .refresh-indicator {
+      position: fixed;
+      top: 100px;
+      right: 20px;
+      background: rgba(40, 167, 69, 0.9);
+      color: white;
+      padding: 5px 10px;
+      border-radius: 15px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: 1000;
+    }
+
+    .refresh-indicator.show {
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-brand">
+      <div class="navbar-title">🏆 League Champion Results</div>
+    </div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">← Dashboard</a>
+      <a href="/tournament" class="nav-btn">🏆 Tournament</a>
+      <button class="nav-btn" onclick="window.print()">🖨️ Print</button>
+    </div>
+  </div>
+
+  <div class="league-container">
+    <!-- Left Column -->
+    <div class="left-column">
+      <!-- League Header -->
+      <div class="league-header">
+        <img src="/static/logo.png" alt="Logo" class="header-logo" onerror="this.style.display='none'" />
+        <div class="league-title">League Championship</div>
+        <div class="league-subtitle">Final Rankings - Best 5 of 6 Tournaments</div>
+        <div class="league-meta">
+          <div class="meta-item">
+            <span class="meta-number">{{ participants|length }}</span>
+            <span class="meta-label">Participants</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">{{ league.total_tournaments }}</span>
+            <span class="meta-label">Tournaments</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">
+              {% if league.tournament_type == '40_targets' %}40{% else %}20{% endif %}
+            </span>
+            <span class="meta-label">Targets</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">{% if participants and participants|length > 0 %}{{ participants[0].final_score }}{% else %}0{% endif %}</span>
+            <span class="meta-label">Highest Score</span>
+          </div>
+        </div>
+      </div>
+
+      {% if participants and participants|length >= 3 %}
+      <!-- Champion Podium -->
+      <div class="champion-section">
+        <div class="champion-title">🏆 League Champions</div>
+        <div class="champion-container">
+          {% for i in range(3) %}
+            {% set participant = participants[i] %}
+            <div class="champion-card rank-{{ participant.rank }}">
+              <div class="rank-display">
+                <div class="rank-number">{{ participant.rank }}</div>
+                <div class="rank-suffix">
+                  {% if participant.rank == 1 %}st
+                  {% elif participant.rank == 2 %}nd
+                  {% elif participant.rank == 3 %}rd
+                  {% else %}th
+                  {% endif %}
+                </div>
+                <div class="medal">
+                  {% if participant.rank == 1 %}🥇
+                  {% elif participant.rank == 2 %}🥈
+                  {% elif participant.rank == 3 %}🥉
+                  {% endif %}
+                </div>
+              </div>
+              
+              <div class="participant-info">
+                <div class="participant-name">{{ participant.name }}</div>
+                <div class="participant-details">
+                  <div class="participant-id">ID: {{ participant.id }}</div>
+                  {% if participant.joker_used %}
+                    <div class="joker-badge">🃏 Joker Used</div>
+                  {% endif %}
+                </div>
+              </div>
+              
+              <div class="score-display">
+                <div class="final-score">{{ participant.final_score }}</div>
+                <div class="total-score">Total: {{ participant.total_score }}</div>
+                <div class="score-label">Final Score</div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Right Column -->
+    <div class="right-column">
+      <div class="table-header">
+        <h3 class="table-title">📊 Complete Tournament Breakdown & Final Calculation</h3>
+      </div>
+      
+      <div class="table-container">
+        <table class="league-table">
+          <thead>
+            <tr>
+              <th rowspan="2" class="rank-cell">Rank</th>
+              <th rowspan="2" class="player-col">Participant</th>
+              <th colspan="6" class="tournament-header-group">Individual Tournament Scores</th>
+              <th rowspan="2" class="final-col">Final Score<br><small>(Best 5)</small></th>
+            </tr>
+            <tr class="tournament-header-group">
+              <th class="tournament-col">T1</th>
+              <th class="tournament-col">T2</th>
+              <th class="tournament-col">T3</th>
+              <th class="tournament-col">T4</th>
+              <th class="tournament-col">T5</th>
+              <th class="tournament-col">T6</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for participant in participants %}
+            <tr>
+              <td class="rank-cell rank-{{ participant.rank if participant.rank <= 3 else 'other' }}">
+                {{ participant.rank }}
+                {% if participant.rank == 1 %}🏆
+                {% elif participant.rank == 2 %}🥈
+                {% elif participant.rank == 3 %}🥉
+                {% endif %}
+              </td>
+              <td class="player-cell">
+                <div class="player-name">{{ participant.name }}</div>
+              </td>
+              
+              <!-- Tournament Scores -->
+              {% for tournament_num in range(1, 7) %}
+                <td>
+                  {% set found_result = false %}
+                  {% for result in participant.tournament_results %}
+                    {% if result.tournament == tournament_num %}
+                      {% set found_result = true %}
+                      {% if result.get('joker') or not result.participated %}
+                        <span class="tournament-score joker">🃏</span>
+                      {% else %}
+                        {% set all_scores = [] %}
+                        {% for r in participant.tournament_results if r.participated %}
+                          {% set _ = all_scores.append(r.score) %}
+                        {% endfor %}
+                        {% set sorted_scores = all_scores|sort(reverse=true) %}
+                        {% set excluded_score = sorted_scores[-1] if sorted_scores|length > 5 else none %}
+                        
+                        {% if all_scores|length > 5 and result.score == excluded_score %}
+                          <span class="tournament-score excluded">{{ result.score }}</span>
+                        {% else %}
+                          <span class="tournament-score counted">{{ result.score }}</span>
+                        {% endif %}
+                      {% endif %}
+                    {% endif %}
+                  {% endfor %}
+                </td>
+              {% endfor %}
+              
+              <td class="final-score-cell">{{ participant.final_score }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+
+      <div class="calculation-legend">
+        <div class="legend-title">📖 Scoring Legend:</div>
+        <div class="legend-items">
+          <div class="legend-item">
+            <span class="legend-box legend-counted"></span>
+            <span>Counted Score</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-box legend-excluded"></span>
+            <span>Excluded (Worst)</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-box legend-joker"></span>
+            <span>Joker Used</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-box legend-final"></span>
+            <span>Final Score (Best 5)</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="stats-footer">
+        <div class="stat-item">
+          <div class="stat-value">{{ participants|length if participants else 0 }}</div>
+          <div>Participants</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{{ league.total_tournaments }}</div>
+          <div>Tournaments</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{% if participants and participants|length > 0 %}{{ participants[0].final_score }}{% else %}0{% endif %}</div>
+          <div>Highest Score</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{% if participants %}{{ "%.0f"|format(participants|map(attribute='final_score')|sum / participants|length) }}{% else %}0{% endif %}</div>
+          <div>Average Final</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{{ league.finished_at[:10] if league.finished_at else 'Today' }}</div>
+          <div>League Date</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Auto-refresh indicator -->
+  <div class="refresh-indicator" id="refreshIndicator">
+    🔄 Updating...
+  </div>
+
+  <script>
+    const participants = {{ participants|tojson }};
+    const league = {{ league|tojson }};
+
+    // Show winner celebration
+    function showLeagueChampionHighlight() {
+      if (participants && participants.length > 0) {
+        setTimeout(() => {
+          const champion = document.querySelector('.champion-card.rank-1');
+          if (champion) {
+            champion.style.boxShadow = '0 4px 15px rgba(255, 215, 0, 0.4)';
+            
+            setTimeout(() => {
+              champion.style.boxShadow = '';
+            }, 3000);
+          }
+        }, 1000);
+      }
+    }
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'r' || event.key === 'R') {
+        event.preventDefault();
+        window.location.reload();
+      } else if (event.key === 'p' || event.key === 'P') {
+        event.preventDefault();
+        window.print();
+      }
+    });
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+      showLeagueChampionHighlight();
+      
+      // Show refresh indicator briefly
+      setTimeout(() => {
+        const indicator = document.getElementById('refreshIndicator');
+        indicator.classList.add('show');
+        
+        setTimeout(() => {
+          indicator.classList.remove('show');
+        }, 3000);
+      }, 1000);
+
+      console.log(`🏆 League Results: ${participants ? participants.length : 0} participants displayed`);
+      console.log('🎯 Tournament type:', league.tournament_type);
+    });
+
+    // Handle screen size changes
+    window.addEventListener('resize', function() {
+      document.body.style.display = 'none';
+      document.body.offsetHeight;
+      document.body.style.display = '';
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/mobile_draft.html b/TV_APP_V2/templates/mobile_draft.html
new file mode 100644
index 0000000..663d0dc
--- /dev/null
+++ b/TV_APP_V2/templates/mobile_draft.html
@@ -0,0 +1,769 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>📱 Tournament Draft</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, viewport-fit=cover">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+      min-height: 100dvh;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .mobile-navbar {
+      background: white;
+      color: black;
+      padding: 15px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .navbar-title {
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: #333;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 8px 12px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      min-width: 44px;
+      justify-content: center;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.active {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.active:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      background: #f1f3f4;
+      border-color: #dadce0;
+    }
+
+    .container {
+      padding: 20px;
+      max-width: 100%;
+    }
+
+    .tournament-header {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 25px 20px;
+      margin-bottom: 25px;
+      text-align: center;
+    }
+
+    .tournament-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .tournament-stats {
+      color: #666;
+      font-size: 1rem;
+      margin-bottom: 15px;
+    }
+
+    .view-only-badge {
+      background: #e3f2fd;
+      border: 2px solid #2196f3;
+      color: #1976d2;
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-size: 0.9rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .rounds-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .round-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      transition: all 0.2s ease;
+    }
+
+    .round-card.current {
+      border-left: 5px solid #007bff;
+      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.2);
+    }
+
+    .round-card.completed {
+      border-left: 5px solid #28a745;
+      opacity: 0.9;
+    }
+
+    .round-card.waiting {
+      opacity: 0.7;
+    }
+
+    .round-header {
+      padding: 20px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #f8f9fa;
+    }
+
+    .round-card.current .round-header {
+      background: #f0f8ff;
+    }
+
+    .round-card.completed .round-header {
+      background: #f8fff9;
+    }
+
+    .round-title {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .round-badge {
+      padding: 8px 15px;
+      border-radius: 15px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    .current-badge {
+      background: #007bff;
+      color: white;
+    }
+
+    .completed-badge {
+      background: #28a745;
+      color: white;
+    }
+
+    .waiting-badge {
+      background: #6c757d;
+      color: white;
+    }
+
+    .players-grid {
+      padding: 20px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 15px;
+    }
+
+    .position-card {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      border-radius: 12px;
+      padding: 18px 15px;
+      text-align: center;
+      min-height: 90px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      transition: all 0.2s ease;
+    }
+
+    .position-card.filled {
+      border-color: #28a745;
+      background: #f8fff9;
+    }
+
+    .position-card.empty {
+      border-color: #6c757d;
+      background: #f1f3f4;
+      opacity: 0.6;
+    }
+
+    .position-number {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #007bff;
+      margin-bottom: 8px;
+    }
+
+    .position-card.empty .position-number {
+      color: #6c757d;
+    }
+
+    .player-name {
+      font-size: 1.1rem;
+      font-weight: bold;
+      color: #333;
+      line-height: 1.2;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      hyphens: none;
+    }
+
+    .position-card.empty .player-name {
+      color: #6c757d;
+      font-style: italic;
+      font-weight: normal;
+    }
+
+    .player-id {
+      background: #28a745;
+      color: white;
+      padding: 4px 10px;
+      border-radius: 12px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      margin-top: 8px;
+      display: inline-block;
+    }
+
+    /* Mobile landscape optimization */
+    @media (orientation: landscape) and (max-height: 500px) {
+      .mobile-navbar {
+        padding: 10px 15px;
+      }
+
+      .navbar-title {
+        font-size: 1.2rem;
+      }
+
+      .container {
+        padding: 15px;
+      }
+
+      .tournament-header {
+        padding: 20px 15px;
+        margin-bottom: 20px;
+      }
+
+      .tournament-title {
+        font-size: 1.5rem;
+      }
+
+      .tournament-stats {
+        font-size: 1rem;
+      }
+
+      .players-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        padding: 15px;
+      }
+
+      .position-card {
+        padding: 12px 10px;
+        min-height: 70px;
+      }
+
+      .position-number {
+        font-size: 1.1rem;
+        margin-bottom: 5px;
+      }
+
+      .player-name {
+        font-size: 0.95rem;
+      }
+
+      .player-id {
+        font-size: 0.7rem;
+        padding: 3px 8px;
+        margin-top: 5px;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 10px;
+        font-size: 0.75rem;
+      }
+    }
+
+    @media (max-width: 400px) {
+      .container {
+        padding: 15px;
+      }
+
+      .tournament-header {
+        padding: 20px 15px;
+      }
+
+      .tournament-title {
+        font-size: 1.6rem;
+      }
+
+      .tournament-stats {
+        font-size: 1rem;
+      }
+
+      .round-header {
+        padding: 15px;
+      }
+
+      .round-title {
+        font-size: 1.2rem;
+      }
+
+      .players-grid {
+        padding: 15px;
+        gap: 12px;
+      }
+
+      .position-card {
+        padding: 15px 12px;
+        min-height: 85px;
+      }
+
+      .position-number {
+        font-size: 1.2rem;
+      }
+
+      .player-name {
+        font-size: 1rem;
+      }
+
+      .player-id {
+        font-size: 0.75rem;
+        padding: 3px 8px;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 8px;
+        font-size: 0.75rem;
+      }
+    }
+
+    .round-change-indicator {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: rgba(40, 167, 69, 0.9);
+      color: white;
+      padding: 10px 15px;
+      border-radius: 20px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: 999;
+      box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+    }
+
+    .round-change-indicator.show {
+      opacity: 1;
+    }
+
+    .tournament-summary {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-top: 25px;
+    }
+
+    .summary-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 15px;
+      text-align: center;
+    }
+
+    .summary-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 10px;
+      text-align: left;
+    }
+
+    .summary-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .summary-item:last-child {
+      border-bottom: none;
+    }
+
+    .summary-label {
+      font-weight: bold;
+      color: #333;
+    }
+
+    .summary-value {
+      color: #666;
+    }
+
+    .smart-refresh-badge {
+      background: #28a745;
+      color: white;
+      padding: 4px 8px;
+      border-radius: 10px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      margin-left: 10px;
+      display: inline-block;
+    }
+
+    /* Tournament status indicator */
+    .tournament-indicator {
+      display: inline-flex;
+      align-items: center;
+      background: #007bff;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      margin-left: 5px;
+      animation: pulse 2s infinite;
+    }
+
+    /* Results available indicator */
+    .results-indicator {
+      display: inline-flex;
+      align-items: center;
+      background: #28a745;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.7; }
+      100% { opacity: 1; }
+    }
+
+    /* No tournament message */
+    .no-tournament-message {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 40px 20px;
+      text-align: center;
+      color: #666;
+    }
+
+    .no-tournament-message h2 {
+      color: #333;
+      margin-bottom: 15px;
+      font-size: 1.5rem;
+    }
+
+    .no-tournament-message p {
+      margin-bottom: 20px;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+  </style>
+</head>
+<body>
+  <div class="mobile-navbar">
+    <div class="navbar-title">
+      📋 Draft
+      {% if tournament %}
+        {% if tournament.current_round %}
+          <span class="tournament-indicator">R{{ tournament.current_round }}</span>
+        {% endif %}
+      {% endif %}
+    </div>
+    <div class="navbar-controls">
+      <!-- Always show all 3 navigation buttons -->
+      <a href="/mobile/streams" class="nav-btn">📷</a>
+      <a href="/mobile/draft" class="nav-btn active">📋</a>
+      <a href="/mobile/results" class="nav-btn">🏆</a>
+    </div>
+  </div>
+
+  <div class="container">
+    {% if tournament %}
+    <div class="tournament-header">
+      <div class="tournament-title">🎯 Shooting Tournament</div>
+      <div class="tournament-stats">
+        {{ tournament.total_players }} players • {{ tournament.total_rounds }} rounds
+        {% if tournament.current_round %}
+          • Currently on Round {{ tournament.current_round }}
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="rounds-container">
+      {% for round in tournament.rounds %}
+        {% set is_current = tournament.current_round == round.round_number %}
+        {% set is_completed = tournament.current_round > round.round_number %}
+        <div class="round-card {{ 'current' if is_current else ('completed' if is_completed else 'waiting') }}">
+          <div class="round-header">
+            <div class="round-title">Round {{ round.round_number }}</div>
+            {% if is_current %}
+              <div class="round-badge current-badge">Current</div>
+            {% elif is_completed %}
+              <div class="round-badge completed-badge">Completed</div>
+            {% else %}
+              <div class="round-badge waiting-badge">Waiting</div>
+            {% endif %}
+          </div>
+          
+          <div class="players-grid">
+            {% for position in range(1, 7) %}
+              {% set player = round.players[position-1] if position <= round.players|length else none %}
+              <div class="position-card {{ 'filled' if player else 'empty' }}">
+                <div class="position-number">{{ position }}</div>
+                {% if player %}
+                  <div class="player-name">{{ player.name }}</div>
+                  <div class="player-id">ID: {{ player.id }}</div>
+                {% else %}
+                  <div class="player-name">Empty</div>
+                {% endif %}
+              </div>
+            {% endfor %}
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+
+    <!-- Tournament Summary -->
+    <div class="tournament-summary">
+      <div class="summary-title">📊 Tournament Summary</div>
+      <div class="summary-grid">
+        <div class="summary-item">
+          <span class="summary-label">Total Players:</span>
+          <span class="summary-value">{{ tournament.total_players }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">Total Rounds:</span>
+          <span class="summary-value">{{ tournament.total_rounds }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">Current Round:</span>
+          <span class="summary-value">{{ tournament.current_round or 'Not set' }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">Updates:</span>
+          <span class="summary-value" style="color: #28a745; font-weight: bold;">On Round Change</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">Created:</span>
+          <span class="summary-value">{{ tournament.created_at[:10] if tournament.created_at else 'Unknown' }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">Status:</span>
+          <span class="summary-value" style="color: #28a745; font-weight: bold;">Active</span>
+        </div>
+      </div>
+    </div>
+    {% else %}
+    <!-- No tournament available -->
+    <div class="no-tournament-message">
+      <h2>📋 No Active Tournament</h2>
+      <p>No tournament is currently running. Check the Results tab for completed tournaments or use the dashboard to start a new tournament.</p>
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- Round change indicator -->
+  <div class="round-change-indicator" id="roundChangeIndicator">
+    🆕 New Round Starting...
+  </div>
+
+  <script>
+    // Tournament state
+    const tournamentActive = {{ 'true' if tournament else 'false' }};
+    let currentRound = {{ tournament.current_round if tournament else 1 }};
+    const totalRounds = {{ tournament.total_rounds if tournament else 1 }};
+
+    // Manual refresh function
+    function manualRefresh() {
+      const indicator = document.getElementById('roundChangeIndicator');
+      indicator.textContent = '🔄 Refreshing...';
+      indicator.classList.add('show');
+      
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
+    }
+
+    function scrollToCurrentRound() {
+      const currentRound = document.querySelector('.round-card.current');
+      if (currentRound) {
+        setTimeout(() => {
+          currentRound.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center' 
+          });
+        }, 500);
+      }
+    }
+
+    function addMobileTouchFeedback() {
+      const touchElements = document.querySelectorAll('.nav-btn:not(.disabled), .round-card');
+      
+      touchElements.forEach(element => {
+        element.addEventListener('touchstart', function(e) {
+          if (!this.disabled) {
+            this.style.transform = 'scale(0.98)';
+            this.style.transition = 'transform 0.1s ease';
+          }
+        });
+        
+        element.addEventListener('touchend', function(e) {
+          if (!this.disabled) {
+            setTimeout(() => {
+              this.style.transform = '';
+              this.style.transition = 'transform 0.2s ease';
+            }, 100);
+          }
+        });
+        
+        element.addEventListener('touchcancel', function(e) {
+          if (!this.disabled) {
+            this.style.transform = '';
+            this.style.transition = 'transform 0.2s ease';
+          }
+        });
+      });
+    }
+
+    function setupRoundChangeDetection() {
+      if (!tournamentActive) return;
+      
+      setInterval(async () => {
+        if (document.visibilityState !== 'visible') return;
+        
+        try {
+          const response = await fetch(window.location.pathname + '?check=1');
+          if (response.ok) {
+            const pageContent = await response.text();
+            
+            const roundMatch = pageContent.match(/Currently on Round\s*(\d+)/);
+            if (roundMatch) {
+              const serverCurrentRound = parseInt(roundMatch[1]);
+              
+              if (serverCurrentRound !== currentRound) {
+                console.log(`📱 Round changed from ${currentRound} to ${serverCurrentRound}`);
+                
+                const indicator = document.getElementById('roundChangeIndicator');
+                indicator.textContent = '🆕 New Round Starting...';
+                indicator.classList.add('show');
+                
+                setTimeout(() => {
+                  window.location.reload();
+                }, 1500);
+              }
+            }
+          }
+        } catch (error) {
+          console.log('Round check failed:', error);
+        }
+      }, 5000);
+    }
+
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'r' || event.key === 'R') {
+        event.preventDefault();
+        manualRefresh();
+      }
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      addMobileTouchFeedback();
+      scrollToCurrentRound();
+      setupRoundChangeDetection();
+
+      console.log('📱 Mobile Draft with Fixed Navigation loaded');
+      console.log('🏆 Tournament active:', tournamentActive);
+      console.log('🔍 Round change detection active');
+    });
+
+    window.addEventListener('focus', function() {
+      console.log('📱 App regained focus - checking for round changes');
+      setTimeout(async () => {
+        try {
+          const response = await fetch(window.location.pathname + '?check=1');
+          if (response.ok) {
+            const pageContent = await response.text();
+            const roundMatch = pageContent.match(/Currently on Round\s*(\d+)/);
+            if (roundMatch) {
+              const serverCurrentRound = parseInt(roundMatch[1]);
+              if (serverCurrentRound !== currentRound) {
+                manualRefresh();
+              }
+            }
+          }
+        } catch (error) {
+          console.log('Focus round check failed:', error);
+        }
+      }, 500);
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/mobile_league_results.html b/TV_APP_V2/templates/mobile_league_results.html
new file mode 100644
index 0000000..199e1c8
--- /dev/null
+++ b/TV_APP_V2/templates/mobile_league_results.html
@@ -0,0 +1,934 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>📱 League Results</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    .mobile-navbar {
+      background: white;
+      color: black;
+      padding: 15px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .navbar-title {
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: #333;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 8px 12px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      min-width: 44px;
+      justify-content: center;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.active {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.active:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .container {
+      padding: 20px;
+      max-width: 100%;
+    }
+
+    .league-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 25px 20px;
+      margin-bottom: 25px;
+      text-align: center;
+      color: white;
+    }
+
+    .league-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .league-subtitle {
+      font-size: 1.1rem;
+      opacity: 0.9;
+      margin-bottom: 15px;
+    }
+
+    .league-badge {
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: white;
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-size: 0.9rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .league-stats {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-bottom: 25px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 15px;
+    }
+
+    .stat-item {
+      text-align: center;
+      padding: 15px;
+      background: #f8f9fa;
+      border-radius: 8px;
+    }
+
+    .stat-value {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #007bff;
+      margin-bottom: 5px;
+    }
+
+    .stat-label {
+      font-size: 0.9rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .explanation-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #856404;
+      margin-bottom: 10px;
+    }
+
+    .explanation-text {
+      color: #856404;
+      line-height: 1.4;
+    }
+
+    .results-list {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      margin-bottom: 25px;
+    }
+
+    .result-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .result-card.podium {
+      border-left: 5px solid;
+    }
+
+    .result-card.rank-1 {
+      border-left-color: #ffd700;
+      background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
+    }
+
+    .result-card.rank-2 {
+      border-left-color: #c0c0c0;
+      background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+    }
+
+    .result-card.rank-3 {
+      border-left-color: #cd7f32;
+      background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
+    }
+
+    .result-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    .rank-display {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 60px;
+    }
+
+    .rank-number {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      line-height: 1;
+    }
+
+    .result-card.rank-1 .rank-number { color: #b8860b; }
+    .result-card.rank-2 .rank-number { color: #696969; }
+    .result-card.rank-3 .rank-number { color: #8b4513; }
+
+    .rank-suffix {
+      font-size: 0.7rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .medal {
+      font-size: 1.5rem;
+      margin-top: 3px;
+    }
+
+    .participant-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .participant-name {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8px;
+      word-wrap: break-word;
+    }
+
+    .participant-details {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 5px;
+    }
+
+    .participant-id {
+      background: #007bff;
+      color: white;
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .score-display {
+      text-align: right;
+      min-width: 90px;
+    }
+
+    .final-score {
+      font-size: 2rem;
+      font-weight: bold;
+      color: #28a745;
+      line-height: 1;
+    }
+
+    .total-score {
+      font-size: 0.9rem;
+      color: #666;
+      margin-top: 2px;
+    }
+
+    .score-label {
+      font-size: 0.8rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .tournament-breakdown {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+
+    .breakdown-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 10px;
+      text-align: center;
+    }
+
+    .breakdown-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+    }
+
+    .tournament-item {
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      padding: 12px;
+      text-align: center;
+    }
+
+    .tournament-number {
+      font-size: 0.8rem;
+      font-weight: bold;
+      color: #007bff;
+      margin-bottom: 5px;
+    }
+
+    .tournament-score {
+      font-size: 1rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .tournament-item.joker {
+      background: #fff3cd;
+      border-color: #ffc107;
+    }
+
+    .tournament-item.joker .tournament-score {
+      color: #856404;
+    }
+
+    .tournament-item.excluded {
+      background: #f8d7da;
+      border-color: #dc3545;
+    }
+
+    .tournament-item.excluded .tournament-score {
+      color: #721c24;
+    }
+
+    .tournament-item.counted {
+      background: #d1edf1;
+      border-color: #28a745;
+    }
+
+    .tournament-item.counted .tournament-score {
+      color: #155724;
+    }
+
+    .scoring-legend {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-bottom: 25px;
+    }
+
+    .legend-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 15px;
+      text-align: center;
+    }
+
+    .legend-content {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+
+    .legend-rule {
+      background: #f8f9fa;
+      border-left: 4px solid #007bff;
+      padding: 12px;
+      border-radius: 4px;
+      font-size: 0.9rem;
+      line-height: 1.4;
+    }
+
+    .legend-items-mobile {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .legend-item-mobile {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 0.9rem;
+      color: #495057;
+    }
+
+    .legend-dot {
+      font-size: 1.2rem;
+      width: 24px;
+      text-align: center;
+    }
+
+    .congratulations {
+      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 25px 20px;
+      margin-bottom: 25px;
+      text-align: center;
+      color: white;
+    }
+
+    .congrats-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .congrats-message {
+      font-size: 1.1rem;
+      opacity: 0.9;
+    }
+
+    /* Mobile landscape optimization */
+    @media (orientation: landscape) and (max-height: 500px) {
+      .mobile-navbar {
+        padding: 10px 15px;
+      }
+
+      .navbar-title {
+        font-size: 1.2rem;
+      }
+
+      .container {
+        padding: 15px;
+      }
+
+      .league-header {
+        padding: 20px 15px;
+        margin-bottom: 20px;
+      }
+
+      .league-title {
+        font-size: 1.5rem;
+      }
+
+      .league-subtitle {
+        font-size: 1rem;
+      }
+
+      .result-card {
+        padding: 15px;
+        gap: 15px;
+      }
+
+      .rank-number {
+        font-size: 1.5rem;
+      }
+
+      .participant-name {
+        font-size: 1.1rem;
+      }
+
+      .final-score {
+        font-size: 1.7rem;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 10px;
+        font-size: 0.75rem;
+      }
+    }
+
+    @media (max-width: 400px) {
+      .container {
+        padding: 15px;
+      }
+
+      .league-header {
+        padding: 20px 15px;
+      }
+
+      .league-title {
+        font-size: 1.6rem;
+      }
+
+      .league-subtitle {
+        font-size: 1rem;
+      }
+
+      .result-card {
+        padding: 15px;
+        gap: 15px;
+      }
+
+      .rank-display {
+        min-width: 50px;
+      }
+
+      .rank-number {
+        font-size: 1.6rem;
+      }
+
+      .participant-name {
+        font-size: 1.2rem;
+      }
+
+      .score-display {
+        min-width: 80px;
+      }
+
+      .final-score {
+        font-size: 1.8rem;
+      }
+
+      .congratulations {
+        padding: 20px 15px;
+      }
+
+      .congrats-title {
+        font-size: 1.3rem;
+      }
+
+      .congrats-message {
+        font-size: 1rem;
+      }
+
+      .breakdown-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+      }
+
+      .tournament-item {
+        padding: 10px 8px;
+      }
+
+      .tournament-score {
+        font-size: 0.9rem;
+      }
+
+      .legend-rule {
+        padding: 10px;
+        font-size: 0.85rem;
+      }
+
+      .legend-item-mobile {
+        font-size: 0.85rem;
+      }
+
+      .league-stats {
+        grid-template-columns: 1fr;
+        gap: 10px;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 8px;
+        font-size: 0.75rem;
+      }
+    }
+
+    /* Animation for results appearance */
+    .result-card {
+      animation: slideInUp 0.5s ease forwards;
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    .result-card:nth-child(1) { animation-delay: 0.1s; }
+    .result-card:nth-child(2) { animation-delay: 0.2s; }
+    .result-card:nth-child(3) { animation-delay: 0.3s; }
+    .result-card:nth-child(4) { animation-delay: 0.4s; }
+    .result-card:nth-child(5) { animation-delay: 0.5s; }
+    .result-card:nth-child(6) { animation-delay: 0.6s; }
+
+    @keyframes slideInUp {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Celebration confetti effect */
+    .confetti {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 999;
+    }
+
+    .confetti-piece {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background: #ffd700;
+      animation: confetti-fall 3s linear infinite;
+    }
+
+    @keyframes confetti-fall {
+      0% {
+        transform: translateY(-100vh) rotate(0deg);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(100vh) rotate(720deg);
+        opacity: 0;
+      }
+    }
+
+    /* League status indicator */
+    .league-indicator {
+      display: inline-flex;
+      align-items: center;
+      background: #28a745;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  </style>
+</head>
+<body>
+  <div class="mobile-navbar">
+    <div class="navbar-title">
+      🏆 League
+      <span class="league-indicator">FINAL</span>
+    </div>
+    <div class="navbar-controls">
+      <a href="/mobile/streams" class="nav-btn">📷</a>
+      <a href="/mobile/results" class="nav-btn active">🏆</a>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="league-header">
+      <div class="league-title">🏆 League Championship</div>
+      <div class="league-subtitle">
+        Final Results - Best 5 of 6 Tournaments
+      </div>
+      <div class="league-badge">
+        {% if league.tournament_type == '40_targets' %}
+          40 Targets Format
+        {% else %}
+          20 Targets Format
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="league-stats">
+      <div class="stat-item">
+        <div class="stat-value">{{ participants|length if participants else 0 }}</div>
+        <div class="stat-label">Participants</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value">{{ league.total_tournaments }}</div>
+        <div class="stat-label">Tournaments</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value">{% if participants and participants|length > 0 %}{{ participants[0].final_score }}{% else %}0{% endif %}</div>
+        <div class="stat-label">Highest Score</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-value">{{ league.finished_at[:10] if league.finished_at else 'Today' }}</div>
+        <div class="stat-label">Completed</div>
+      </div>
+    </div>
+
+    {% if participants and participants|length > 0 %}
+      <div class="congratulations">
+        <div class="congrats-title">🎉 League Complete!</div>
+        <div class="congrats-message">
+          Congratulations to {{ participants[0].name }} for winning the league!
+        </div>
+      </div>
+
+      <div class="results-list">
+        {% for participant in participants %}
+          <div class="result-card {{ 'podium rank-' + participant.rank|string if participant.rank <= 3 else '' }}">
+            <div class="rank-display">
+              <div class="rank-number">{{ participant.rank }}</div>
+              <div class="rank-suffix">
+                {% if participant.rank == 1 %}st
+                {% elif participant.rank == 2 %}nd
+                {% elif participant.rank == 3 %}rd
+                {% else %}th
+                {% endif %}
+              </div>
+              {% if participant.rank == 1 %}
+                <div class="medal">🥇</div>
+              {% elif participant.rank == 2 %}
+                <div class="medal">🥈</div>
+              {% elif participant.rank == 3 %}
+                <div class="medal">🥉</div>
+              {% endif %}
+            </div>
+            
+            <div class="participant-info">
+              <div class="participant-name">{{ participant.name }}</div>
+              <div class="participant-details">
+                <div class="participant-id">ID: {{ participant.id }}</div>
+              </div>
+            </div>
+            
+            <div class="score-display">
+              <div class="final-score">{{ participant.final_score }}</div>
+              <div class="total-score">Total: {{ participant.total_score }}</div>
+              <div class="score-label">Final Score</div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+
+      <!-- Tournament Breakdown for Top Players -->
+      <!-- Fixed: Replace min(3, participants|length) with proper Jinja2 logic -->
+      {% set max_breakdowns = 3 %}
+      {% if participants|length < 3 %}
+        {% set max_breakdowns = participants|length %}
+      {% endif %}
+      
+      {% for i in range(max_breakdowns) %}
+        {% set participant = participants[i] %}
+        <div class="tournament-breakdown">
+          <div class="breakdown-title">
+            {% if participant.rank == 1 %}🥇{% elif participant.rank == 2 %}🥈{% elif participant.rank == 3 %}🥉{% endif %}
+            {{ participant.name }}'s Tournament History
+          </div>
+          <div class="breakdown-grid">
+            {% for tournament_num in range(1, 7) %}
+              {% set result = participant.tournament_results 
+                  | selectattr("tournament", "equalto", tournament_num) 
+                  | list 
+                  | first %}
+                  
+              {% if result %}
+                {% if (result.joker is defined and result.joker) or (result.participated is defined and not result.participated) %}
+                  <div class="tournament-item joker">
+                    <div class="tournament-number">T{{ tournament_num }}</div>
+                    <div class="tournament-score">🃏 Joker</div>
+                  </div>
+                {% else %}
+                  {% set all_participated_scores = participant.tournament_results 
+                      | selectattr("participated", "defined") 
+                      | selectattr("participated") 
+                      | selectattr("score", "defined") 
+                      | map(attribute="score") 
+                      | list %}
+                  {% set sorted_scores = all_participated_scores | sort(reverse=true) %}
+                  {% set is_excluded = sorted_scores | length > 5 and result.score == sorted_scores[-1] %}
+
+                  {% if is_excluded %}
+                    <div class="tournament-item excluded">
+                      <div class="tournament-number">T{{ tournament_num }}</div>
+                      <div class="tournament-score">{{ result.score }} ❌</div>
+                    </div>
+                  {% else %}
+                    <div class="tournament-item counted">
+                      <div class="tournament-number">T{{ tournament_num }}</div>
+                      <div class="tournament-score">{{ result.score }} ✅</div>
+                    </div>
+                  {% endif %}
+                {% endif %}
+              {% else %}
+                <div class="tournament-item">
+                  <div class="tournament-number">T{{ tournament_num }}</div>
+                  <div class="tournament-score">-</div>
+                </div>
+              {% endif %}
+            {% endfor %}
+
+          </div>
+        </div>
+      {% endfor %}
+
+      <!-- Scoring Legend -->
+      <div class="scoring-legend">
+        <div class="legend-title">📖 How Final Scores Are Calculated</div>
+        <div class="legend-content">
+          <div class="legend-rule">
+            <strong>🏆 League Rule:</strong> Best 5 out of 6 tournaments count toward final ranking
+          </div>
+          <div class="legend-rule">
+            <strong>🃏 Joker System:</strong> Each player can skip 1 tournament without penalty
+          </div>
+          <div class="legend-items-mobile">
+            <div class="legend-item-mobile">
+              <span class="legend-dot counted">✅</span>
+              <span>Counted toward final score</span>
+            </div>
+            <div class="legend-item-mobile">
+              <span class="legend-dot excluded">❌</span>
+              <span>Excluded (worst score)</span>
+            </div>
+            <div class="legend-item-mobile">
+              <span class="legend-dot joker">🃏</span>
+              <span>Joker used (skipped)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    {% else %}
+      <div class="result-card">
+        <div style="text-align: center; width: 100%; color: #666;">
+          <h3>No League Results Available</h3>
+          <p>League results will appear here when the league is complete.</p>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+
+  <!-- Confetti container -->
+  <div class="confetti" id="confetti"></div>
+
+  <script>
+    function createConfetti() {
+      const confettiContainer = document.getElementById('confetti');
+      const colors = ['#ffd700', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
+      
+      for (let i = 0; i < 50; i++) {
+        const confettiPiece = document.createElement('div');
+        confettiPiece.className = 'confetti-piece';
+        confettiPiece.style.left = Math.random() * 100 + '%';
+        confettiPiece.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+        confettiPiece.style.animationDelay = Math.random() * 3 + 's';
+        confettiPiece.style.animationDuration = (Math.random() * 2 + 2) + 's';
+        confettiContainer.appendChild(confettiPiece);
+      }
+      
+      setTimeout(() => {
+        confettiContainer.innerHTML = '';
+      }, 5000);
+    }
+
+    function addMobileTouchFeedback() {
+      const touchElements = document.querySelectorAll('.nav-btn:not(.disabled), .result-card');
+      
+      touchElements.forEach(element => {
+        element.addEventListener('touchstart', function(e) {
+          if (!this.disabled) {
+            this.style.transform = 'scale(0.98) translateY(0)';
+            this.style.transition = 'transform 0.1s ease';
+          }
+        });
+        
+        element.addEventListener('touchend', function(e) {
+          if (!this.disabled) {
+            setTimeout(() => {
+              this.style.transform = '';
+              this.style.transition = 'transform 0.2s ease';
+            }, 100);
+          }
+        });
+        
+        element.addEventListener('touchcancel', function(e) {
+          if (!this.disabled) {
+            this.style.transform = '';
+            this.style.transition = 'transform 0.2s ease';
+          }
+        });
+      });
+    }
+
+    function showChampionCelebration() {
+      {% if participants and participants|length > 0 %}
+        createConfetti();
+        
+        setTimeout(() => {
+          const firstCard = document.querySelector('.result-card.rank-1');
+          if (firstCard) {
+            firstCard.style.boxShadow = '0 0 30px rgba(255, 215, 0, 0.5)';
+            setTimeout(() => {
+              firstCard.style.boxShadow = '';
+            }, 2000);
+          }
+        }, 1000);
+      {% endif %}
+    }
+
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'r' || event.key === 'R') {
+        event.preventDefault();
+        window.location.reload();
+      }
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      addMobileTouchFeedback();
+      
+      setTimeout(() => {
+        showChampionCelebration();
+      }, 1500);
+      
+      console.log('📱 Mobile League Results loaded');
+      console.log('🏆 League participants:', {{ participants|length if participants else 0 }});
+      console.log('🎯 Tournament type:', '{{ league.tournament_type }}');
+      {% if participants and participants|length > 0 %}
+      console.log('🏆 League Champion:', '{{ participants[0].name }}');
+      console.log('🏆 Winning score:', {{ participants[0].final_score }});
+      {% endif %}
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/mobile_menu.html b/TV_APP_V2/templates/mobile_menu.html
new file mode 100644
index 0000000..acf3382
--- /dev/null
+++ b/TV_APP_V2/templates/mobile_menu.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>📱 Camera Dashboard</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+
+    .loader-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      text-align: center;
+      color: white;
+      padding: 20px;
+    }
+
+    .logo {
+      font-size: 4rem;
+      margin-bottom: 20px;
+      animation: pulse 2s infinite;
+    }
+
+    .title {
+      font-size: 2rem;
+      font-weight: bold;
+      margin-bottom: 10px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .subtitle {
+      font-size: 1.2rem;
+      opacity: 0.9;
+      margin-bottom: 30px;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    }
+
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid rgba(255, 255, 255, 0.3);
+      border-top: 4px solid white;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 20px auto;
+    }
+
+    .status-text {
+      font-size: 1rem;
+      opacity: 0.8;
+      margin-top: 15px;
+    }
+
+    .quick-nav {
+      display: flex;
+      gap: 15px;
+      margin-top: 30px;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .quick-btn {
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      color: white;
+      padding: 12px 20px;
+      border-radius: 12px;
+      text-decoration: none;
+      font-weight: bold;
+      transition: all 0.3s ease;
+      font-size: 0.9rem;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .quick-btn:hover {
+      background: rgba(255, 255, 255, 0.3);
+      border-color: rgba(255, 255, 255, 0.5);
+      transform: translateY(-2px);
+    }
+
+    .quick-btn.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .quick-btn.priority {
+      background: rgba(40, 167, 69, 0.8);
+      border-color: rgba(40, 167, 69, 1);
+      animation: priorityPulse 2s infinite;
+    }
+
+    .quick-btn.priority:hover {
+      background: rgba(40, 167, 69, 0.9);
+      border-color: rgba(40, 167, 69, 1);
+    }
+
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    @keyframes priorityPulse {
+      0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
+      70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
+    }
+
+    .status-indicator {
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 20px;
+      padding: 10px 20px;
+      margin: 20px 0;
+      font-size: 0.9rem;
+      color: white;
+    }
+
+    .status-indicator.tournament-active {
+      background: rgba(0, 123, 255, 0.8);
+      border-color: rgba(0, 123, 255, 1);
+    }
+
+    .status-indicator.results-available {
+      background: rgba(40, 167, 69, 0.8);
+      border-color: rgba(40, 167, 69, 1);
+    }
+
+    @media (max-width: 480px) {
+      .logo {
+        font-size: 3rem;
+      }
+
+      .title {
+        font-size: 1.7rem;
+      }
+
+      .subtitle {
+        font-size: 1.1rem;
+      }
+
+      .quick-nav {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .quick-btn {
+        width: 200px;
+        justify-content: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="loader-container">
+    <div class="logo">📱</div>
+    <div class="title">Camera Dashboard</div>
+    <div class="subtitle">Loading mobile interface...</div>
+    
+    <div class="loading-spinner"></div>
+    <div class="status-text" id="statusText">Detecting tournament state...</div>
+    
+    <!-- Status Indicator -->
+    <div class="status-indicator" id="statusIndicator" style="display: none;">
+      <span id="statusMessage">Checking status...</span>
+    </div>
+    
+    <!-- Quick navigation fallback -->
+    <div class="quick-nav" id="quickNav" style="display: none;">
+      <a href="/mobile/streams" class="quick-btn">
+        <span>📷</span>
+        <span>Camera Streams</span>
+      </a>
+      
+      {% if tournament_active %}
+        <a href="/mobile/draft" class="quick-btn">
+          <span>📋</span>
+          <span>Tournament Draft</span>
+        </a>
+      {% endif %}
+      
+      {% if results_available %}
+        <a href="/mobile/results" class="quick-btn priority">
+          <span>🏆</span>
+          <span>View Results</span>
+        </a>
+      {% elif tournament_active %}
+        <div class="quick-btn disabled">
+          <span>🏆</span>
+          <span>Results (Soon)</span>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+
+  <script>
+    // Tournament state from server
+    const tournamentActive = {{ 'true' if tournament_active else 'false' }};
+    const resultsAvailable = {{ 'true' if results_available else 'false' }};
+    
+    function updateStatus(message) {
+      const statusText = document.getElementById('statusText');
+      if (statusText) {
+        statusText.textContent = message;
+      }
+    }
+
+    function showStatusIndicator(message, type = '') {
+      const statusIndicator = document.getElementById('statusIndicator');
+      const statusMessage = document.getElementById('statusMessage');
+      
+      if (statusIndicator && statusMessage) {
+        statusMessage.textContent = message;
+        statusIndicator.className = `status-indicator ${type}`;
+        statusIndicator.style.display = 'block';
+      }
+    }
+
+    function redirectToOptimalPage() {
+      // Determine the best page to redirect to based on current state
+      let targetUrl = '/mobile/streams'; // Default to streams
+      let reason = 'Camera streams';
+      let statusType = '';
+
+      if (resultsAvailable) {
+        targetUrl = '/mobile/results';
+        reason = 'Tournament results are ready!';
+        statusType = 'results-available';
+        showStatusIndicator('🏆 ' + reason, statusType);
+      } else if (tournamentActive) {
+        targetUrl = '/mobile/draft';
+        reason = 'Tournament is active';
+        statusType = 'tournament-active';
+        showStatusIndicator('🏆 ' + reason, statusType);
+      } else {
+        reason = 'Camera streams (default)';
+        showStatusIndicator('📷 ' + reason);
+      }
+
+      updateStatus(`Redirecting to ${reason.toLowerCase()}...`);
+      
+      // Add a small delay for smooth UX
+      setTimeout(() => {
+        window.location.href = targetUrl;
+      }, 1800);
+    }
+
+    function showQuickNav() {
+      const quickNav = document.getElementById('quickNav');
+      const statusText = document.getElementById('statusText');
+      
+      if (quickNav && statusText) {
+        statusText.textContent = 'Choose your destination:';
+        quickNav.style.display = 'flex';
+        
+        // Show status indicator based on current state
+        if (resultsAvailable) {
+          showStatusIndicator('🏆 Tournament completed - results ready!', 'results-available');
+        } else if (tournamentActive) {
+          showStatusIndicator('🏆 Tournament in progress', 'tournament-active');
+        } else {
+          showStatusIndicator('📷 Ready to view camera streams');
+        }
+      }
+    }
+
+    // Auto-redirect logic
+    function initializeRedirect() {
+      console.log('📱 Mobile entry point loaded');
+      console.log('🏆 Tournament active:', tournamentActive);
+      console.log('📊 Results available:', resultsAvailable);
+
+      // Show status first
+      setTimeout(() => {
+        if (resultsAvailable) {
+          showStatusIndicator('🏆 Tournament completed - results ready!', 'results-available');
+        } else if (tournamentActive) {
+          showStatusIndicator('🏆 Tournament in progress', 'tournament-active');
+        } else {
+          showStatusIndicator('📷 Ready to view camera streams');
+        }
+      }, 800);
+
+      // Wait a moment, then redirect
+      setTimeout(() => {
+        redirectToOptimalPage();
+      }, 1500);
+
+      // Show quick nav as fallback after 4 seconds if redirect fails
+      setTimeout(() => {
+        showQuickNav();
+      }, 4000);
+    }
+
+    // Handle errors gracefully
+    function handleRedirectError() {
+      updateStatus('Connection issue detected');
+      setTimeout(() => {
+        showQuickNav();
+      }, 1000);
+    }
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+      switch(event.key) {
+        case '1':
+          window.location.href = '/mobile/streams';
+          break;
+        case '2':
+          if (tournamentActive) {
+            window.location.href = '/mobile/draft';
+          }
+          break;
+        case '3':
+          if (resultsAvailable) {
+            window.location.href = '/mobile/results';
+          }
+          break;
+        case 'Escape':
+          showQuickNav();
+          break;
+        case 'r':
+        case 'R':
+          if (resultsAvailable) {
+            window.location.href = '/mobile/results';
+          }
+          break;
+      }
+    });
+
+    // Initialize when page loads
+    document.addEventListener('DOMContentLoaded', initializeRedirect);
+
+    // Handle network errors
+    window.addEventListener('error', handleRedirectError);
+    
+    // Handle orientation changes gracefully
+    window.addEventListener('orientationchange', function() {
+      setTimeout(() => {
+        // Trigger a reflow to handle orientation change
+        document.body.style.display = 'none';
+        document.body.offsetHeight; // Trigger reflow
+        document.body.style.display = '';
+      }, 100);
+    });
+
+    // Handle visibility change (when user returns to app)
+    document.addEventListener('visibilitychange', function() {
+      if (!document.hidden && resultsAvailable) {
+        // If results are available and user returns to app, prioritize results
+        updateStatus('🏆 Redirecting to results...');
+        setTimeout(() => {
+          window.location.href = '/mobile/results';
+        }, 1000);
+      }
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/mobile_results.html b/TV_APP_V2/templates/mobile_results.html
new file mode 100644
index 0000000..96d0b85
--- /dev/null
+++ b/TV_APP_V2/templates/mobile_results.html
@@ -0,0 +1,696 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>📱 Tournament Results</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    .mobile-navbar {
+      background: white;
+      color: black;
+      padding: 15px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .navbar-title {
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: #333;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 8px 12px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      min-width: 44px;
+      justify-content: center;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.active {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.active:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      background: #f1f3f4;
+      border-color: #dadce0;
+    }
+
+    .container {
+      padding: 20px;
+      max-width: 100%;
+    }
+
+    .results-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 25px 20px;
+      margin-bottom: 25px;
+      text-align: center;
+      color: white;
+    }
+
+    .results-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .results-subtitle {
+      font-size: 1.1rem;
+      opacity: 0.9;
+      margin-bottom: 15px;
+    }
+
+    .results-badge {
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: white;
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-size: 0.9rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .results-list {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      margin-bottom: 25px;
+    }
+
+    .result-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .result-card.podium {
+      border-left: 5px solid;
+    }
+
+    .result-card.rank-1 {
+      border-left-color: #ffd700;
+      background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
+    }
+
+    .result-card.rank-2 {
+      border-left-color: #c0c0c0;
+      background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+    }
+
+    .result-card.rank-3 {
+      border-left-color: #cd7f32;
+      background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
+    }
+
+    .result-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    .rank-display {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 60px;
+    }
+
+    .rank-number {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      line-height: 1;
+    }
+
+    .result-card.rank-1 .rank-number { color: #b8860b; }
+    .result-card.rank-2 .rank-number { color: #696969; }
+    .result-card.rank-3 .rank-number { color: #8b4513; }
+
+    .rank-suffix {
+      font-size: 0.7rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .medal {
+      font-size: 1.5rem;
+      margin-top: 3px;
+    }
+
+    .participant-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .participant-name {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 5px;
+      word-wrap: break-word;
+    }
+
+    .participant-id {
+      background: #007bff;
+      color: white;
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .score-display {
+      text-align: right;
+      min-width: 80px;
+    }
+
+    .score-number {
+      font-size: 2rem;
+      font-weight: bold;
+      color: #28a745;
+      line-height: 1;
+    }
+
+    .score-label {
+      font-size: 0.8rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .tournament-info {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-bottom: 25px;
+    }
+
+    .info-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 15px;
+      text-align: center;
+    }
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 10px;
+    }
+
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .info-item:last-child {
+      border-bottom: none;
+    }
+
+    .info-label {
+      font-weight: bold;
+      color: #333;
+    }
+
+    .info-value {
+      color: #666;
+    }
+
+    .congratulations {
+      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 25px 20px;
+      margin-bottom: 25px;
+      text-align: center;
+      color: white;
+    }
+
+    .congrats-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .congrats-message {
+      font-size: 1.1rem;
+      opacity: 0.9;
+    }
+
+    /* Mobile landscape optimization */
+    @media (orientation: landscape) and (max-height: 500px) {
+      .mobile-navbar {
+        padding: 10px 15px;
+      }
+
+      .navbar-title {
+        font-size: 1.2rem;
+      }
+
+      .container {
+        padding: 15px;
+      }
+
+      .results-header {
+        padding: 20px 15px;
+        margin-bottom: 20px;
+      }
+
+      .results-title {
+        font-size: 1.5rem;
+      }
+
+      .results-subtitle {
+        font-size: 1rem;
+      }
+
+      .result-card {
+        padding: 15px;
+        gap: 15px;
+      }
+
+      .rank-number {
+        font-size: 1.5rem;
+      }
+
+      .participant-name {
+        font-size: 1.1rem;
+      }
+
+      .score-number {
+        font-size: 1.7rem;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 10px;
+        font-size: 0.75rem;
+      }
+    }
+
+    @media (max-width: 400px) {
+      .container {
+        padding: 15px;
+      }
+
+      .results-header {
+        padding: 20px 15px;
+      }
+
+      .results-title {
+        font-size: 1.6rem;
+      }
+
+      .results-subtitle {
+        font-size: 1rem;
+      }
+
+      .result-card {
+        padding: 15px;
+        gap: 15px;
+      }
+
+      .rank-display {
+        min-width: 50px;
+      }
+
+      .rank-number {
+        font-size: 1.6rem;
+      }
+
+      .participant-name {
+        font-size: 1.2rem;
+      }
+
+      .score-display {
+        min-width: 70px;
+      }
+
+      .score-number {
+        font-size: 1.8rem;
+      }
+
+      .congratulations {
+        padding: 20px 15px;
+      }
+
+      .congrats-title {
+        font-size: 1.3rem;
+      }
+
+      .congrats-message {
+        font-size: 1rem;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 8px;
+        font-size: 0.75rem;
+      }
+    }
+
+    /* Animation for results appearance */
+    .result-card {
+      animation: slideInUp 0.5s ease forwards;
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    .result-card:nth-child(1) { animation-delay: 0.1s; }
+    .result-card:nth-child(2) { animation-delay: 0.2s; }
+    .result-card:nth-child(3) { animation-delay: 0.3s; }
+    .result-card:nth-child(4) { animation-delay: 0.4s; }
+    .result-card:nth-child(5) { animation-delay: 0.5s; }
+    .result-card:nth-child(6) { animation-delay: 0.6s; }
+
+    @keyframes slideInUp {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Celebration confetti effect */
+    .confetti {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 999;
+    }
+
+    .confetti-piece {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background: #ffd700;
+      animation: confetti-fall 3s linear infinite;
+    }
+
+    @keyframes confetti-fall {
+      0% {
+        transform: translateY(-100vh) rotate(0deg);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(100vh) rotate(720deg);
+        opacity: 0;
+      }
+    }
+
+    /* Results status indicator */
+    .results-indicator {
+      display: inline-flex;
+      align-items: center;
+      background: #28a745;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  </style>
+</head>
+<body>
+  <div class="mobile-navbar">
+    <div class="navbar-title">
+      🏆 Results
+      <span class="results-indicator">FINAL</span>
+    </div>
+    <div class="navbar-controls">
+      <a href="/mobile/streams" class="nav-btn">📷</a>
+      
+      {% if tournament_active %}
+        <a href="/mobile/draft" class="nav-btn">📋</a>
+      {% endif %}
+      
+      <a href="/mobile/results" class="nav-btn active">🏆</a>
+    </div>
+  </div>
+
+  <div class="container">
+
+    {% if participants %}
+      {% if participants|length > 0 %}
+        <div class="congratulations">
+          <div class="congrats-title">🎉 Tournament Complete!</div>
+          <div class="congrats-message">
+            Congratulations to {{ participants[0].name }} for winning!
+          </div>
+        </div>
+      {% endif %}
+
+      <div class="results-list">
+        {% for participant in participants %}
+          <div class="result-card {{ 'podium rank-' + participant.rank|string if participant.rank <= 3 else '' }}">
+            <div class="rank-display">
+              <div class="rank-number">{{ participant.rank }}</div>
+              <div class="rank-suffix">
+                {% if participant.rank == 1 %}st
+                {% elif participant.rank == 2 %}nd
+                {% elif participant.rank == 3 %}rd
+                {% else %}th
+                {% endif %}
+              </div>
+              {% if participant.rank == 1 %}
+                <div class="medal">🥇</div>
+              {% elif participant.rank == 2 %}
+                <div class="medal">🥈</div>
+              {% elif participant.rank == 3 %}
+                <div class="medal">🥉</div>
+              {% endif %}
+            </div>
+            
+            <div class="participant-info">
+              <div class="participant-name">{{ participant.name }}</div>
+              <div class="participant-id">ID: {{ participant.id }}</div>
+            </div>
+            
+            <div class="score-display">
+              <div class="score-number">{{ participant.total_score }}</div>
+              <div class="score-label">Points</div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% else %}
+      <div class="result-card">
+        <div style="text-align: center; width: 100%; color: #666;">
+          <h3>No Results Available</h3>
+          <p>Tournament results will appear here when scoring is complete.</p>
+        </div>
+      </div>
+    {% endif %}
+
+    <!-- Tournament Info -->
+    <div class="tournament-info">
+      <div class="info-title">📊 Tournament Information</div>
+      <div class="info-grid">
+        <div class="info-item">
+          <span class="info-label">Total Participants:</span>
+          <span class="info-value">{{ participants|length if participants else 0 }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">Tournament ID:</span>
+          <span class="info-value">{{ results.tournament_id[:10] if results.tournament_id else 'Unknown' }}...</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">Created:</span>
+          <span class="info-value">{{ results.created_at[:10] if results.created_at else 'Unknown' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">Status:</span>
+          <span class="info-value" style="color: #28a745; font-weight: bold;">Completed</span>
+        </div>
+        {% if participants and participants|length > 0 %}
+        <div class="info-item">
+          <span class="info-label">Highest Score:</span>
+          <span class="info-value" style="color: #28a745; font-weight: bold;">{{ participants[0].total_score }} points</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">Winner:</span>
+          <span class="info-value" style="color: #ffd700; font-weight: bold;">{{ participants[0].name }}</span>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  <!-- Confetti container -->
+  <div class="confetti" id="confetti"></div>
+
+  <script>
+    function createConfetti() {
+      const confettiContainer = document.getElementById('confetti');
+      const colors = ['#ffd700', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
+      
+      for (let i = 0; i < 50; i++) {
+        const confettiPiece = document.createElement('div');
+        confettiPiece.className = 'confetti-piece';
+        confettiPiece.style.left = Math.random() * 100 + '%';
+        confettiPiece.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+        confettiPiece.style.animationDelay = Math.random() * 3 + 's';
+        confettiPiece.style.animationDuration = (Math.random() * 2 + 2) + 's';
+        confettiContainer.appendChild(confettiPiece);
+      }
+      
+      setTimeout(() => {
+        confettiContainer.innerHTML = '';
+      }, 5000);
+    }
+
+    function addMobileTouchFeedback() {
+      const touchElements = document.querySelectorAll('.nav-btn:not(.disabled), .result-card');
+      
+      touchElements.forEach(element => {
+        element.addEventListener('touchstart', function(e) {
+          if (!this.disabled) {
+            this.style.transform = 'scale(0.98) translateY(0)';
+            this.style.transition = 'transform 0.1s ease';
+          }
+        });
+        
+        element.addEventListener('touchend', function(e) {
+          if (!this.disabled) {
+            setTimeout(() => {
+              this.style.transform = '';
+              this.style.transition = 'transform 0.2s ease';
+            }, 100);
+          }
+        });
+        
+        element.addEventListener('touchcancel', function(e) {
+          if (!this.disabled) {
+            this.style.transform = '';
+            this.style.transition = 'transform 0.2s ease';
+          }
+        });
+      });
+    }
+
+    function showWinnerCelebration() {
+      {% if participants and participants|length > 0 %}
+        createConfetti();
+        
+        setTimeout(() => {
+          const firstCard = document.querySelector('.result-card.rank-1');
+          if (firstCard) {
+            firstCard.style.boxShadow = '0 0 30px rgba(255, 215, 0, 0.5)';
+            setTimeout(() => {
+              firstCard.style.boxShadow = '';
+            }, 2000);
+          }
+        }, 1000);
+      {% endif %}
+    }
+
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'r' || event.key === 'R') {
+        event.preventDefault();
+        window.location.reload();
+      }
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      addMobileTouchFeedback();
+      
+      setTimeout(() => {
+        showWinnerCelebration();
+      }, 1500);
+      
+      console.log('📱 Mobile Results with Smart Navbar loaded');
+      console.log('🏆 Tournament Results:', {
+        participants: {{ participants|length if participants else 0 }},
+        {% if participants and participants|length > 0 %}
+        winner: '{{ participants[0].name }}',
+        winning_score: {{ participants[0].total_score }}
+        {% endif %}
+      });
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/mobile_streams.html b/TV_APP_V2/templates/mobile_streams.html
new file mode 100644
index 0000000..6da9457
--- /dev/null
+++ b/TV_APP_V2/templates/mobile_streams.html
@@ -0,0 +1,670 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>📱 Camera Streams</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, viewport-fit=cover">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #000;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+      min-height: 100dvh;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .mobile-navbar {
+      background: white;
+      color: black;
+      padding: 15px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .navbar-title {
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: #333;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 8px 12px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      min-width: 44px;
+      justify-content: center;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.active {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.active:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      background: #f1f3f4;
+      border-color: #dadce0;
+    }
+
+    .container {
+      padding: 20px;
+      background: #000;
+      min-height: calc(100vh - 70px);
+      min-height: calc(100dvh - 70px);
+      overflow-y: auto;
+    }
+
+    /* Camera Selection Grid */
+    .camera-selection {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 15px;
+      margin-bottom: 30px;
+    }
+
+    @media (orientation: portrait) {
+      .camera-selection {
+        grid-template-columns: 1fr;
+        gap: 12px;
+      }
+    }
+
+    .camera-option {
+      background: #1a1a1a;
+      border: 2px solid #333;
+      border-radius: 12px;
+      padding: 0;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+      text-decoration: none;
+      color: white;
+      min-height: 140px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      overflow: hidden;
+    }
+
+    @media (orientation: portrait) {
+      .camera-option {
+        min-height: 180px;
+      }
+    }
+
+    .camera-option::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+      transition: left 0.5s ease;
+      z-index: 2;
+    }
+
+    .camera-option:hover::before {
+      left: 100%;
+    }
+
+    .camera-option:hover {
+      border-color: #007bff;
+      transform: translateY(-3px);
+      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
+    }
+
+    .camera-option:active {
+      transform: translateY(-1px);
+    }
+
+    .stream-preview {
+      flex: 1;
+      width: 100%;
+      position: relative;
+      background: #000;
+      overflow: hidden;
+    }
+
+    .stream-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: opacity 0.3s ease;
+      background: #000;
+    }
+
+    .stream-loading {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #999;
+      font-size: 0.9rem;
+      z-index: 1;
+    }
+
+    .camera-info {
+      background: #000;
+      padding: 12px 15px;
+      border-top: 1px solid #333;
+      position: relative;
+      z-index: 3;
+    }
+
+    .camera-title {
+      font-size: 1rem;
+      font-weight: bold;
+      color: white;
+      line-height: 1.2;
+      text-align: center;
+    }
+
+    @media (orientation: portrait) {
+      .camera-info {
+        padding: 10px 12px;
+      }
+      
+      .camera-title {
+        font-size: 0.9rem;
+      }
+    }
+
+    @media (orientation: landscape) {
+      .camera-selection {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+      }
+
+      .camera-option {
+        min-height: 120px;
+      }
+
+      .stream-preview {
+        min-height: 80px;
+      }
+
+      .camera-info {
+        padding: 8px 10px;
+      }
+
+      .camera-title {
+        font-size: 0.85rem;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 10px;
+        font-size: 0.75rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .container {
+        padding: 15px;
+      }
+
+      .camera-selection {
+        gap: 12px;
+      }
+
+      .camera-option {
+        min-height: 130px;
+      }
+
+      .camera-info {
+        padding: 12px 15px;
+      }
+
+      .camera-title {
+        font-size: 1.1rem;
+      }
+
+      .navbar-controls {
+        gap: 6px;
+      }
+
+      .nav-btn {
+        padding: 6px 8px;
+        font-size: 0.75rem;
+      }
+    }
+
+    @media (max-width: 320px) {
+      .camera-selection {
+        grid-template-columns: 1fr;
+      }
+
+      .camera-option {
+        min-height: 120px;
+      }
+    }
+
+    /* Floating Fullscreen Button */
+    .floating-fullscreen-btn {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 56px;
+      height: 56px;
+      background: #007bff;
+      border: none;
+      border-radius: 50%;
+      color: white;
+      font-size: 1.2rem;
+      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
+      cursor: pointer;
+      z-index: 1000;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .floating-fullscreen-btn:hover {
+      background: #0056b3;
+      transform: scale(1.1);
+      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
+    }
+
+    .floating-fullscreen-btn:active {
+      transform: scale(0.95);
+    }
+
+    .floating-fullscreen-btn.hidden {
+      opacity: 0;
+      transform: scale(0);
+      pointer-events: none;
+    }
+
+    /* Hide floating button when in fullscreen */
+    :fullscreen .floating-fullscreen-btn,
+    :-webkit-full-screen .floating-fullscreen-btn,
+    :-moz-full-screen .floating-fullscreen-btn,
+    :-ms-fullscreen .floating-fullscreen-btn {
+      opacity: 0;
+      transform: scale(0);
+      pointer-events: none;
+    }
+
+    /* Fullscreen adjustments */
+    :fullscreen .mobile-navbar,
+    :-webkit-full-screen .mobile-navbar,
+    :-moz-full-screen .mobile-navbar,
+    :-ms-fullscreen .mobile-navbar {
+      display: none !important;
+    }
+
+    :fullscreen .container,
+    :-webkit-full-screen .container,
+    :-moz-full-screen .container,
+    :-ms-fullscreen .container {
+      padding: 10px;
+      min-height: 100vh;
+      min-height: 100dvh;
+    }
+
+    html:fullscreen .mobile-navbar,
+    html:-webkit-full-screen .mobile-navbar,
+    html:-moz-full-screen .mobile-navbar,
+    html:-ms-fullscreen .mobile-navbar {
+      display: none !important;
+    }
+
+    html:fullscreen .container,
+    html:-webkit-full-screen .container,
+    html:-moz-full-screen .container,
+    html:-ms-fullscreen .container {
+      padding: 10px;
+      min-height: 100vh;
+      min-height: 100dvh;
+    }
+
+    @media (max-width: 480px) {
+      .floating-fullscreen-btn {
+        width: 60px;
+        height: 60px;
+        font-size: 1.3rem;
+      }
+    }
+
+    /* Tournament status indicator */
+    .tournament-indicator {
+      display: inline-flex;
+      align-items: center;
+      background: #28a745;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+
+    /* Results available indicator */
+    .results-indicator {
+      display: inline-flex;
+      align-items: center;
+      background: #007bff;
+      color: white;
+      padding: 2px 6px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      margin-left: 5px;
+    }
+  </style>
+</head>
+<body>
+  <div class="mobile-navbar">
+    <div class="navbar-title">
+      📷 Streams
+      {% if tournament_active %}
+        <span class="tournament-indicator">LIVE</span>
+      {% elif results_available %}
+        <span class="results-indicator">FINAL</span>
+      {% endif %}
+    </div>
+    <div class="navbar-controls">
+      <!-- Always show all 3 navigation buttons -->
+      <a href="/mobile/streams" class="nav-btn active">📷</a>
+      <a href="/mobile/draft" class="nav-btn">📋</a>
+      <a href="/mobile/results" class="nav-btn">🏆</a>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="camera-selection">
+      {% for i in range(1, 7) %}
+        {% set camera_id = i %}
+        <div class="camera-option" onclick="openCameraFullscreen({{ camera_id }})">
+          <div class="stream-preview">
+            <div class="stream-loading">Loading...</div>
+            <img src="{{ streams[i-1].url }}" 
+                 alt="Camera {{ camera_id }}" 
+                 class="stream-img"
+                 onerror="handleStreamError(this, {{ camera_id }})"
+                 onload="handleStreamLoad(this)">
+          </div>
+          <div class="camera-info">
+            <div class="camera-title">
+              {% if tournament_active and current_round_data and (i-1) < current_round_data.players|length %}
+                {{ current_round_data.players[i-1].name }}
+              {% else %}
+                {{ settings.camera_titles[camera_id|string] }}
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  <!-- Floating Fullscreen Button -->
+  <button class="floating-fullscreen-btn" id="fullscreenBtn" onclick="toggleFullscreen()" title="Enter Fullscreen">
+    ⛶
+  </button>
+
+  <script>
+    function handleStreamError(img, cameraId) {
+      const loadingIndicator = img.parentElement.querySelector('.stream-loading');
+      if (loadingIndicator) {
+        loadingIndicator.textContent = 'Unavailable';
+        loadingIndicator.style.color = '#ff6b6b';
+      }
+      img.style.opacity = '0.1';
+    }
+
+    function handleStreamLoad(img) {
+      const loadingIndicator = img.parentElement.querySelector('.stream-loading');
+      if (loadingIndicator) {
+        loadingIndicator.style.display = 'none';
+      }
+      img.style.opacity = '1';
+    }
+
+    function openCameraFullscreen(cameraId) {
+      {% if tournament_active and current_round_data %}
+        const players = {{ current_round_data.players|tojson }};
+        let customTitle = `Camera ${cameraId}`;
+        if (cameraId <= players.length) {
+          customTitle = players[cameraId - 1].name;
+        }
+      {% else %}
+        const titles = {{ settings.camera_titles|tojson }};
+        const customTitle = titles[cameraId.toString()] || `Camera ${cameraId}`;
+      {% endif %}
+      
+      const fullscreenUrl = `/fullscreen/${cameraId}?title=${encodeURIComponent(customTitle)}`;
+      
+      if (screen.orientation && screen.orientation.lock) {
+        screen.orientation.lock('landscape').then(() => {
+          window.location.href = fullscreenUrl;
+        }).catch(() => {
+          window.location.href = fullscreenUrl;
+        });
+      } else {
+        window.location.href = fullscreenUrl;
+      }
+    }
+
+    function addMobileTouchFeedback() {
+      const touchElements = document.querySelectorAll('.camera-option, .nav-btn:not(.disabled), .floating-fullscreen-btn');
+      
+      touchElements.forEach(element => {
+        element.addEventListener('touchstart', function(e) {
+          if (!this.disabled && !this.classList.contains('hidden')) {
+            this.style.transform = 'scale(0.95) translateY(0)';
+            this.style.transition = 'transform 0.1s ease';
+          }
+        });
+        
+        element.addEventListener('touchend', function(e) {
+          if (!this.disabled && !this.classList.contains('hidden')) {
+            setTimeout(() => {
+              this.style.transform = '';
+              this.style.transition = 'transform 0.2s ease';
+            }, 100);
+          }
+        });
+        
+        element.addEventListener('touchcancel', function(e) {
+          if (!this.disabled && !this.classList.contains('hidden')) {
+            this.style.transform = '';
+            this.style.transition = 'transform 0.2s ease';
+          }
+        });
+      });
+    }
+
+    // Keyboard shortcuts for quick camera selection
+    document.addEventListener('keydown', function(event) {
+      if (event.key >= '1' && event.key <= '6') {
+        const cameraId = parseInt(event.key);
+        openCameraFullscreen(cameraId);
+      } else if (event.key === 'f' || event.key === 'F') {
+        event.preventDefault();
+        toggleFullscreen();
+      }
+    });
+
+    // Fullscreen functionality
+    function toggleFullscreen() {
+      if (isFullscreen()) {
+        exitFullscreen();
+      } else {
+        enterFullscreen();
+      }
+    }
+
+    function isFullscreen() {
+      return document.fullscreenElement || 
+             document.webkitFullscreenElement || 
+             document.mozFullScreenElement || 
+             document.msFullscreenElement;
+    }
+
+    function enterFullscreen() {
+      const element = document.documentElement;
+      
+      if (element.requestFullscreen) {
+        element.requestFullscreen().catch(err => console.log('Fullscreen error:', err));
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      }
+    }
+
+    function exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen().catch(err => console.log('Exit fullscreen error:', err));
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+    }
+
+    function handleFullscreenChange() {
+      const fullscreenBtn = document.getElementById('fullscreenBtn');
+      const navbar = document.querySelector('.mobile-navbar');
+      const isFS = isFullscreen();
+      
+      if (fullscreenBtn) {
+        if (isFS) {
+          fullscreenBtn.innerHTML = '⛉';
+          fullscreenBtn.title = 'Exit Fullscreen';
+          fullscreenBtn.classList.add('hidden');
+          
+          if (navbar) {
+            navbar.style.display = 'none';
+          }
+        } else {
+          fullscreenBtn.innerHTML = '⛶';
+          fullscreenBtn.title = 'Enter Fullscreen';
+          fullscreenBtn.classList.remove('hidden');
+          
+          if (navbar) {
+            navbar.style.display = 'flex';
+          }
+        }
+      }
+    }
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+      addMobileTouchFeedback();
+      handleFullscreenChange();
+      
+      console.log('📱 Mobile camera selection loaded with fixed navigation');
+      console.log('🏆 Tournament active:', {{ 'true' if tournament_active else 'false' }});
+      console.log('📊 Results available:', {{ 'true' if results_available else 'false' }});
+      
+      setTimeout(() => {
+        if (window.innerHeight < window.screen.height) {
+          window.scrollBy(0, 1);
+          setTimeout(() => window.scrollBy(0, -1), 100);
+        }
+      }, 500);
+      
+      setInterval(() => {
+        const streams = document.querySelectorAll('.stream-img');
+        streams.forEach(stream => {
+          if (stream.complete && stream.naturalHeight === 0) {
+            stream.src = stream.src.split('?')[0] + '?refresh=' + Date.now();
+          }
+        });
+      }, 30000);
+      
+      if (window.innerHeight > window.innerWidth) {
+        const hint = document.createElement('div');
+        hint.style.cssText = `
+          position: fixed;
+          bottom: 90px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: rgba(0, 0, 0, 0.8);
+          color: white;
+          padding: 10px 20px;
+          border-radius: 20px;
+          font-size: 0.9rem;
+          z-index: 999;
+          text-align: center;
+        `;
+        hint.textContent = '📱 Rotate to landscape or tap ⛶ for fullscreen';
+        document.body.appendChild(hint);
+        
+        setTimeout(() => {
+          if (hint.parentNode) {
+            hint.parentNode.removeChild(hint);
+          }
+        }, 5000);
+      }
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/modern_archive_index.html b/TV_APP_V2/templates/modern_archive_index.html
new file mode 100644
index 0000000..dd05a5e
--- /dev/null
+++ b/TV_APP_V2/templates/modern_archive_index.html
@@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Tournament Archive</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+    }
+
+    /* Standardized Navigation Bar */
+    .navbar {
+      background: white;
+      color: black;
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px 20px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.primary {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.primary:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.success {
+      background: #28a745;
+      border-color: #1e7e34;
+      color: white;
+    }
+
+    .nav-btn.success:hover {
+      background: #1e7e34;
+      color: white;
+    }
+
+    .nav-btn.danger {
+      background: #dc3545;
+      border-color: #c82333;
+      color: white;
+    }
+
+    .nav-btn.danger:hover {
+      background: #c82333;
+      color: white;
+    }
+
+    /* Standardized Container */
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+
+    /* White Scrollbar for main page */
+    body::-webkit-scrollbar {
+      width: 12px;
+    }
+
+    body::-webkit-scrollbar-track {
+      background: white;
+    }
+
+    body::-webkit-scrollbar-thumb {
+      background: #e0e0e0;
+      border-radius: 6px;
+      border: 2px solid white;
+    }
+
+    body::-webkit-scrollbar-thumb:hover {
+      background: #c0c0c0;
+    }
+
+    .section {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+
+    .section-title {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 15px;
+      border-bottom: 3px solid #007bff;
+      padding-bottom: 5px;
+    }
+
+    /* Compact Stats Overview */
+    .stats-overview {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 15px;
+      margin-bottom: 20px;
+    }
+
+    .stat-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      text-align: center;
+      border: 1px solid #e9ecef;
+      transition: transform 0.2s ease;
+    }
+
+    .stat-card:hover {
+      transform: translateY(-2px);
+    }
+
+    .stat-icon {
+      font-size: 2rem;
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    .stat-value {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .stat-label {
+      color: #666;
+      font-size: 0.8rem;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    /* Compact Archive Grid */
+    .archive-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 20px;
+    }
+
+    .archive-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border: 1px solid #e9ecef;
+      transition: all 0.2s ease;
+      cursor: pointer;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .archive-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    .archive-header {
+      background: #f8f9fa;
+      padding: 15px 20px;
+      border-bottom: 1px solid #e9ecef;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .archive-card.league .archive-header {
+      background: #e8f5e8;
+    }
+
+    .archive-card.tournament .archive-header {
+      background: #fff3cd;
+    }
+
+    .archive-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 3px;
+    }
+
+    .archive-subtitle {
+      font-size: 0.85rem;
+      color: #666;
+    }
+
+    .archive-badge {
+      padding: 6px 12px;
+      border-radius: 15px;
+      font-size: 0.75rem;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    .badge-league {
+      background: #28a745;
+      color: white;
+    }
+
+    .badge-tournament {
+      background: #ffc107;
+      color: #856404;
+    }
+
+    .archive-content {
+      padding: 15px 20px;
+    }
+
+    .archive-info {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      margin-bottom: 15px;
+    }
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.85rem;
+      color: #666;
+    }
+
+    .info-icon {
+      font-size: 1rem;
+    }
+
+    .info-value {
+      font-weight: 600;
+      color: #333;
+    }
+
+    .archive-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+      padding-top: 12px;
+      border-top: 1px solid #f0f0f0;
+    }
+
+    .view-btn {
+      background: #007bff;
+      border: none;
+      color: white;
+      padding: 8px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.85rem;
+      font-weight: bold;
+      transition: all 0.2s ease;
+      text-decoration: none;
+      display: inline-block;
+    }
+
+    .view-btn:hover {
+      background: #0056b3;
+      transform: translateY(-1px);
+    }
+
+    .delete-btn {
+      background: #dc3545;
+      border: none;
+      color: white;
+      padding: 6px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.75rem;
+      font-weight: bold;
+      transition: all 0.2s ease;
+    }
+
+    .delete-btn:hover {
+      background: #c82333;
+    }
+
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: 40px 20px;
+      color: #666;
+    }
+
+    .empty-state h3 {
+      font-size: 1.3rem;
+      margin-bottom: 8px;
+      color: #333;
+    }
+
+    .empty-icon {
+      font-size: 3rem;
+      margin-bottom: 15px;
+      opacity: 0.5;
+    }
+
+    /* Confirmation Modal */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.2s ease;
+    }
+
+    .modal-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .confirmation-modal {
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      max-width: 400px;
+      width: 90%;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      transform: scale(0.9);
+      transition: transform 0.2s ease;
+    }
+
+    .modal-overlay.active .confirmation-modal {
+      transform: scale(1);
+    }
+
+    .modal-title {
+      font-size: 1.1rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .modal-message {
+      color: #666;
+      margin-bottom: 15px;
+      line-height: 1.4;
+    }
+
+    .modal-buttons {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+    }
+
+    .modal-btn {
+      padding: 8px 15px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+      transition: background-color 0.2s ease;
+    }
+
+    .modal-btn.cancel {
+      background: #6c757d;
+      color: white;
+    }
+
+    .modal-btn.cancel:hover {
+      background: #5a6268;
+    }
+
+    .modal-btn.confirm {
+      background: #dc3545;
+      color: white;
+    }
+
+    .modal-btn.confirm:hover {
+      background: #c82333;
+    }
+
+    /* Mobile responsive */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 12px 20px;
+        flex-direction: column;
+        gap: 15px;
+      }
+
+      .navbar-controls {
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .container {
+        padding: 15px;
+        height: auto;
+      }
+
+      .archive-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .stats-overview {
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      }
+
+      .archive-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+      }
+
+      .archive-info {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+
+      .archive-actions {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+      }
+
+      .view-btn {
+        text-align: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-title">📚 Tournament Archive</div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">← Dashboard</a>
+      <a href="/tournament" class="nav-btn">🏆 Tournament</a>
+      <a href="/archive/player-analysis" class="nav-btn success">👤 Player Analysis</a>
+    </div>
+  </div>
+
+  <div class="container">
+    <!-- Stats Overview -->
+    <div class="stats-overview">
+      <div class="stat-card">
+        <span class="stat-icon">🏆</span>
+        <div class="stat-value">{{ stats.total_tournaments }}</div>
+        <div class="stat-label">Standalone Tournaments</div>
+      </div>
+      <div class="stat-card">
+        <span class="stat-icon">🎖️</span>
+        <div class="stat-value">{{ stats.total_leagues }}</div>
+        <div class="stat-label">Completed Leagues</div>
+      </div>
+      <div class="stat-card">
+        <span class="stat-icon">👥</span>
+        <div class="stat-value">{{ stats.total_players }}</div>
+        <div class="stat-label">Active Players</div>
+      </div>
+      <div class="stat-card">
+        <span class="stat-icon">📊</span>
+        <div class="stat-value">{{ stats.total_matches }}</div>
+        <div class="stat-label">Total Competitions</div>
+      </div>
+    </div>
+
+    <!-- Leagues Section -->
+    {% if leagues %}
+    <div class="section">
+      <h2 class="section-title">🎖️ League Championships</h2>
+      <div class="archive-grid">
+        {% for league in leagues %}
+        <div class="archive-card league" onclick="viewLeague('{{ league.filename }}')">
+          <div class="archive-header">
+            <div>
+              <div class="archive-title">League Championship</div>
+              <div class="archive-subtitle">{{ league.created_at[:10] if league.created_at != 'Unknown' else 'Unknown Date' }}</div>
+            </div>
+            <span class="archive-badge badge-league">League</span>
+          </div>
+          <div class="archive-content">
+            <div class="archive-info">
+              <div class="info-item">
+                <span class="info-icon">👥</span>
+                <span class="info-value">{{ league.participants_count }} players</span>
+              </div>
+              <div class="info-item">
+                <span class="info-icon">🎯</span>
+                <span class="info-value">{{ league.tournament_type.replace('_', ' ')|title }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-icon">📅</span>
+                <span class="info-value">{{ league.archived_at[:10] if league.archived_at != 'Unknown' else 'Unknown Date' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-icon">✅</span>
+                <span class="info-value">{{ league.completed_tournaments }}/{{ league.total_tournaments }} tournaments</span>
+              </div>
+            </div>
+            <div class="archive-actions">
+              <a href="/archive/league/{{ league.filename }}" class="view-btn">🏆 View Results</a>
+              <button class="delete-btn" onclick="event.stopPropagation(); deleteArchive('league', '{{ league.filename }}')">
+                🗑️ Delete
+              </button>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+
+    <!-- Standalone Tournaments Section -->
+    {% if tournaments %}
+    <div class="section">
+      <h2 class="section-title">🏆 Standalone Tournaments</h2>
+      <div class="archive-grid">
+        {% for tournament in tournaments %}
+        <div class="archive-card tournament" onclick="viewTournament('{{ tournament.filename }}')">
+          <div class="archive-header">
+            <div>
+              <div class="archive-title">Single Tournament</div>
+              <div class="archive-subtitle">{{ tournament.created_at[:10] if tournament.created_at != 'Unknown' else 'Unknown Date' }}</div>
+            </div>
+            <span class="archive-badge badge-tournament">Tournament</span>
+          </div>
+          <div class="archive-content">
+            <div class="archive-info">
+              <div class="info-item">
+                <span class="info-icon">👥</span>
+                <span class="info-value">{{ tournament.participants_count }} players</span>
+              </div>
+              <div class="info-item">
+                <span class="info-icon">🎯</span>
+                <span class="info-value">{{ tournament.tournament_type.replace('_', ' ')|title }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-icon">📅</span>
+                <span class="info-value">{{ tournament.archived_at[:10] if tournament.archived_at != 'Unknown' else 'Unknown Date' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-icon">🏁</span>
+                <span class="info-value">{{ 'Finished' if tournament.tournament_finished else 'Incomplete' }}</span>
+              </div>
+            </div>
+            <div class="archive-actions">
+              <a href="/archive/tournament/{{ tournament.filename }}" class="view-btn">📊 View Results</a>
+              <button class="delete-btn" onclick="event.stopPropagation(); deleteArchive('tournament', '{{ tournament.filename }}')">
+                🗑️ Delete
+              </button>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+
+    <!-- Empty State -->
+    {% if not leagues and not tournaments %}
+    <div class="section">
+      <div class="empty-state">
+        <div class="empty-icon">📚</div>
+        <h3>No Archives Found</h3>
+        <p>Complete some tournaments or leagues to see them archived here</p>
+        <a href="/tournament" class="nav-btn primary" style="margin-top: 15px;">🏆 Start Tournament</a>
+      </div>
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- Confirmation Modal -->
+  <div class="modal-overlay" id="confirmationModal">
+    <div class="confirmation-modal">
+      <div class="modal-title" id="modalTitle">Confirm Action</div>
+      <div class="modal-message" id="modalMessage">Are you sure you want to proceed?</div>
+      <div class="modal-buttons">
+        <button class="modal-btn cancel" onclick="closeModal()">Cancel</button>
+        <button class="modal-btn confirm" id="confirmBtn" onclick="confirmAction()">Confirm</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let pendingAction = null;
+
+    // Navigation functions
+    function viewTournament(filename) {
+      window.location.href = `/archive/tournament/${filename}`;
+    }
+
+    function viewLeague(filename) {
+      window.location.href = `/archive/league/${filename}`;
+    }
+
+    async function deleteArchive(type, filename) {
+      showModal(
+        'Delete Archive',
+        `Are you sure you want to delete this ${type}? This action cannot be undone.`,
+        async () => {
+          try {
+            const response = await fetch(`/api/archive/delete/${type}/${filename}`, {
+              method: 'POST'
+            });
+
+            const result = await response.json();
+
+            if (result.status === 'success') {
+              alert('Archive deleted successfully');
+              location.reload();
+            } else {
+              alert('Error deleting archive: ' + result.message);
+            }
+          } catch (error) {
+            alert('Error deleting archive: ' + error.message);
+          }
+          closeModal();
+        }
+      );
+    }
+
+    // Modal functions
+    function showModal(title, message, confirmCallback) {
+      document.getElementById('modalTitle').textContent = title;
+      document.getElementById('modalMessage').textContent = message;
+      pendingAction = confirmCallback;
+      document.getElementById('confirmationModal').classList.add('active');
+    }
+
+    function closeModal() {
+      document.getElementById('confirmationModal').classList.remove('active');
+      pendingAction = null;
+    }
+
+    function confirmAction() {
+      if (pendingAction) {
+        pendingAction();
+      }
+    }
+
+    // Click outside modal to close
+    document.getElementById('confirmationModal').addEventListener('click', function(e) {
+      if (e.target === this) {
+        closeModal();
+      }
+    });
+
+    // Initialize page
+    document.addEventListener('DOMContentLoaded', function() {
+      console.log('📚 Archive loaded');
+      console.log('🏆 Tournaments:', {{ tournaments|length if tournaments else 0 }});
+      console.log('🎖️ Leagues:', {{ leagues|length if leagues else 0 }});
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/modern_player_analysis.html b/TV_APP_V2/templates/modern_player_analysis.html
new file mode 100644
index 0000000..c8a8643
--- /dev/null
+++ b/TV_APP_V2/templates/modern_player_analysis.html
@@ -0,0 +1,776 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Player Analysis - Camera Dashboard</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            background: #f5f5f5;
+            min-height: 100vh;
+            color: #333;
+        }
+
+        /* Standardized Navigation Bar */
+        .navbar {
+            background: white;
+            color: black;
+            padding: 15px 25px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 2px solid #ccc;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .navbar-title {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .navbar-controls {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+
+        .nav-btn {
+            background: #f8f9fa;
+            border: 2px solid #e9ecef;
+            cursor: pointer;
+            padding: 12px 20px;
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            color: #333;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 0.9rem;
+        }
+
+        .nav-btn:hover {
+            background: #e9ecef;
+            border-color: #007bff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+            transform: translateY(-1px);
+            color: #007bff;
+        }
+
+        .nav-btn.primary {
+            background: #007bff;
+            border-color: #0056b3;
+            color: white;
+        }
+
+        .nav-btn.primary:hover {
+            background: #0056b3;
+            color: white;
+        }
+
+        .nav-btn.secondary {
+            background: #6c757d;
+            border-color: #495057;
+            color: white;
+        }
+
+        .nav-btn.secondary:hover {
+            background: #495057;
+            color: white;
+        }
+
+        /* Standardized Container */
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        /* White Scrollbar for main page */
+        body::-webkit-scrollbar {
+            width: 12px;
+        }
+
+        body::-webkit-scrollbar-track {
+            background: white;
+        }
+
+        body::-webkit-scrollbar-thumb {
+            background: #e0e0e0;
+            border-radius: 6px;
+            border: 2px solid white;
+        }
+
+        body::-webkit-scrollbar-thumb:hover {
+            background: #c0c0c0;
+        }
+
+        /* Section */
+        .section {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e9ecef;
+        }
+
+        .section-title {
+            color: #333;
+            font-size: 1.4rem;
+            font-weight: bold;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #f1f3f4;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        /* Compact Stats Overview */
+        .stats-overview {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .stat-card {
+            background: white;
+            border-radius: 12px;
+            padding: 15px;
+            text-align: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e9ecef;
+            transition: transform 0.3s ease;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-2px);
+        }
+
+        .stat-icon {
+            font-size: 1.5rem;
+            margin-bottom: 8px;
+            display: block;
+        }
+
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 5px;
+        }
+
+        .stat-label {
+            color: #666;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+
+        /* Compact Controls */
+        .controls {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .search-box {
+            flex: 1;
+            min-width: 200px;
+            padding: 10px 15px;
+            border: 2px solid #e9ecef;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+            background: white;
+        }
+
+        .search-box:focus {
+            outline: none;
+            border-color: #007bff;
+            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+        }
+
+        .sort-select {
+            padding: 10px 15px;
+            border: 2px solid #e9ecef;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            background: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            min-width: 180px;
+        }
+
+        .sort-select:focus {
+            outline: none;
+            border-color: #007bff;
+        }
+
+        .filter-buttons {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .filter-btn {
+            background: white;
+            border: 2px solid #e9ecef;
+            padding: 8px 15px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.85rem;
+            font-weight: 600;
+        }
+
+        .filter-btn.active {
+            background: #007bff;
+            color: white;
+            border-color: #007bff;
+        }
+
+        .filter-btn:hover {
+            border-color: #007bff;
+            transform: translateY(-1px);
+        }
+
+        /* Compact Players Grid */
+        .players-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .player-card {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border: 1px solid #e9ecef;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .player-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #28a745, #20c997);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        .player-card.current-player::before {
+            background: linear-gradient(90deg, #28a745, #20c997);
+            transform: scaleX(1);
+        }
+
+        .player-card.archived-player::before {
+            background: linear-gradient(90deg, #6c757d, #495057);
+        }
+
+        .player-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        }
+
+        .player-card:hover::before {
+            transform: scaleX(1);
+        }
+
+        .player-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .player-name {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .player-badge {
+            background: #28a745;
+            color: white;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        .player-badge.archived {
+            background: #6c757d;
+        }
+
+        .player-stats {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+
+        .stat-item {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.85rem;
+        }
+
+        .stat-item .icon {
+            font-size: 1rem;
+        }
+
+        .stat-item .value {
+            font-weight: 600;
+            color: #333;
+        }
+
+        .stat-item .label {
+            color: #666;
+        }
+
+        /* Compact Mini Charts */
+        .player-chart {
+            margin-top: 15px;
+            height: 80px;
+            position: relative;
+        }
+
+        .chart-canvas {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Loading State */
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+        }
+
+        .loading-spinner {
+            width: 30px;
+            height: 30px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #007bff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 10px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Empty State */
+        .empty-state {
+            text-align: center;
+            padding: 40px 20px;
+            color: #666;
+        }
+
+        .empty-state h3 {
+            font-size: 1.3rem;
+            margin-bottom: 8px;
+            color: #333;
+        }
+
+        .empty-icon {
+            font-size: 3rem;
+            margin-bottom: 15px;
+            opacity: 0.5;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .navbar {
+                padding: 12px 20px;
+                flex-direction: column;
+                gap: 12px;
+            }
+
+            .navbar-controls {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+
+            .container {
+                padding: 15px;
+                height: auto;
+            }
+
+            .controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .search-box, .sort-select {
+                min-width: auto;
+                width: 100%;
+            }
+
+            .filter-buttons {
+                justify-content: center;
+            }
+
+            .players-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .player-stats {
+                grid-template-columns: 1fr;
+                gap: 8px;
+            }
+
+            .stats-overview {
+                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation Bar -->
+    <div class="navbar">
+        <div class="navbar-title">👤 Player Analysis</div>
+        <div class="navbar-controls">
+            <a href="/archive" class="nav-btn secondary">📚 Back to Archive</a>
+            <a href="/" class="nav-btn primary">🏠 Dashboard</a>
+        </div>
+    </div>
+
+    <div class="container">
+        <!-- Stats Overview -->
+        <div class="stats-overview">
+            <div class="stat-card">
+                <span class="stat-icon">👥</span>
+                <div class="stat-value" id="totalPlayers">{{ players|length }}</div>
+                <div class="stat-label">Total Players</div>
+            </div>
+            <div class="stat-card">
+                <span class="stat-icon">✅</span>
+                <div class="stat-value" id="activePlayers">{{ players|selectattr('current_player')|list|length }}</div>
+                <div class="stat-label">Active Players</div>
+            </div>
+            <div class="stat-card">
+                <span class="stat-icon">📊</span>
+                <div class="stat-value" id="avgTournaments">{{ overview_stats.avg_tournaments if overview_stats else 0 }}</div>
+                <div class="stat-label">Avg Tournaments</div>
+            </div>
+            <div class="stat-card">
+                <span class="stat-icon">🏆</span>
+                <div class="stat-value" id="topScore">{{ overview_stats.top_score if overview_stats else 0 }}</div>
+                <div class="stat-label">Highest Score</div>
+            </div>
+        </div>
+
+        <div class="section">
+            <div class="section-title">Select a Player to Analyze</div>
+            
+            <!-- Controls -->
+            <div class="controls">
+                <input type="text" class="search-box" id="searchBox" placeholder="🔍 Search players by name...">
+                
+                <select class="sort-select" id="sortSelect">
+                    <option value="name">Sort by Name</option>
+                    <option value="best_score">Sort by Best Score</option>
+                    <option value="average_score">Sort by Average Score</option>
+                    <option value="total_tournaments">Sort by Total Tournaments</option>
+                    <option value="total_leagues">Sort by Total Leagues</option>
+                    <option value="total_shots">Sort by Total Shots</option>
+                </select>
+                
+                <div class="filter-buttons">
+                    <button class="filter-btn active" data-filter="all">All Players</button>
+                    <button class="filter-btn" data-filter="current">Current Players</button>
+                    <button class="filter-btn" data-filter="archived">Archived Players</button>
+                </div>
+            </div>
+
+            <!-- Players Grid -->
+            <div class="players-grid" id="playersGrid">
+                <div class="loading">
+                    <div class="loading-spinner"></div>
+                    <p>Loading players...</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Players data from Flask
+        let playersData = {{ players|tojson }};
+        let filteredPlayers = [...playersData];
+        let currentFilter = 'all';
+        let currentSort = 'name';
+        let playersWithStats = [];
+
+        // Initialize page
+        function initializePage() {
+            loadPlayerStats();
+            setupEventListeners();
+        }
+
+        // Load player statistics
+        async function loadPlayerStats() {
+            try {
+                const response = await fetch('/api/archive/players/with-stats');
+                const result = await response.json();
+                
+                if (result.status === 'success') {
+                    playersWithStats = result.players;
+                    playersData = playersWithStats;
+                    filteredPlayers = [...playersWithStats];
+                    filterAndSortPlayers();
+                } else {
+                    console.error('Failed to load player stats');
+                    renderPlayersBasic();
+                }
+            } catch (error) {
+                console.error('Error loading player stats:', error);
+                renderPlayersBasic();
+            }
+        }
+
+        // Setup event listeners
+        function setupEventListeners() {
+            const searchBox = document.getElementById('searchBox');
+            const sortSelect = document.getElementById('sortSelect');
+            const filterButtons = document.querySelectorAll('.filter-btn');
+
+            searchBox.addEventListener('input', filterAndSortPlayers);
+            sortSelect.addEventListener('change', (e) => {
+                currentSort = e.target.value;
+                filterAndSortPlayers();
+            });
+
+            filterButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    filterButtons.forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    currentFilter = btn.dataset.filter;
+                    filterAndSortPlayers();
+                });
+            });
+        }
+
+        // Filter and sort players
+        function filterAndSortPlayers() {
+            const searchTerm = document.getElementById('searchBox').value.toLowerCase();
+            
+            // Filter players
+            filteredPlayers = playersData.filter(player => {
+                const matchesSearch = player.name.toLowerCase().includes(searchTerm);
+                const matchesFilter = currentFilter === 'all' || 
+                    (currentFilter === 'current' && player.current_player) ||
+                    (currentFilter === 'archived' && !player.current_player);
+                
+                return matchesSearch && matchesFilter;
+            });
+
+            // Sort players
+            filteredPlayers.sort((a, b) => {
+                switch (currentSort) {
+                    case 'name':
+                        return a.name.localeCompare(b.name);
+                    case 'best_score':
+                        return (b.stats?.best_tournament_score || 0) - (a.stats?.best_tournament_score || 0);
+                    case 'average_score':
+                        return (b.stats?.average_tournament_score || 0) - (a.stats?.average_tournament_score || 0);
+                    case 'total_tournaments':
+                        return (b.stats?.total_tournaments || 0) - (a.stats?.total_tournaments || 0);
+                    case 'total_leagues':
+                        return (b.stats?.total_leagues || 0) - (a.stats?.total_leagues || 0);
+                    case 'total_shots':
+                        return (b.stats?.total_shots_fired || 0) - (a.stats?.total_shots_fired || 0);
+                    default:
+                        return 0;
+                }
+            });
+
+            renderPlayers();
+        }
+
+        // Render players with stats
+        function renderPlayers() {
+            const playersGrid = document.getElementById('playersGrid');
+            
+            if (filteredPlayers.length === 0) {
+                playersGrid.innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-icon">👤</div>
+                        <h3>No Players Found</h3>
+                        <p>Try adjusting your search or filter criteria</p>
+                    </div>
+                `;
+                return;
+            }
+
+            playersGrid.innerHTML = filteredPlayers.map(player => `
+                <div class="player-card ${player.current_player ? 'current-player' : 'archived-player'}" 
+                     onclick="viewPlayerStats(${player.id})">
+                    <div class="player-header">
+                        <div class="player-name">${player.name}</div>
+                        <div class="player-badge ${player.current_player ? 'current' : 'archived'}">
+                            ${player.current_player ? 'Current' : 'Archived'}
+                        </div>
+                    </div>
+                    
+                    <div class="player-stats">
+                        <div class="stat-item">
+                            <span class="icon">🎯</span>
+                            <span class="label">Tournaments:</span>
+                            <span class="value">${player.stats?.total_tournaments || 0}</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="icon">🏆</span>
+                            <span class="label">Leagues:</span>
+                            <span class="value">${player.stats?.total_leagues || 0}</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="icon">📈</span>
+                            <span class="label">Best Score:</span>
+                            <span class="value">${player.stats?.best_tournament_score || 0}</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="icon">📊</span>
+                            <span class="label">Average:</span>
+                            <span class="value">${Math.round(player.stats?.average_tournament_score || 0)}</span>
+                        </div>
+                    </div>
+                    
+                    <div class="player-chart">
+                        <canvas class="chart-canvas" id="chart-${player.id}"></canvas>
+                    </div>
+                </div>
+            `).join('');
+
+            // Create mini charts for each player
+            setTimeout(() => {
+                filteredPlayers.forEach(player => {
+                    if (player.stats?.performance_trend) {
+                        createMiniChart(player);
+                    }
+                });
+            }, 100);
+        }
+
+        // Render players without stats (fallback)
+        function renderPlayersBasic() {
+            const playersGrid = document.getElementById('playersGrid');
+            
+            playersGrid.innerHTML = playersData.map(player => `
+                <div class="player-card ${player.current_player ? 'current-player' : 'archived-player'}" 
+                     onclick="viewPlayerStats(${player.id})">
+                    <div class="player-header">
+                        <div class="player-name">${player.name}</div>
+                        <div class="player-badge ${player.current_player ? 'current' : 'archived'}">
+                            ${player.current_player ? 'Current' : 'Archived'}
+                        </div>
+                    </div>
+                    
+                    <div class="player-stats">
+                        <div class="stat-item">
+                            <span class="icon">🎯</span>
+                            <span class="label">Tournaments:</span>
+                            <span class="value">Loading...</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="icon">🏆</span>
+                            <span class="label">Leagues:</span>
+                            <span class="value">Loading...</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="icon">📈</span>
+                            <span class="label">Best Score:</span>
+                            <span class="value">Loading...</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="icon">📊</span>
+                            <span class="label">Average:</span>
+                            <span class="value">Loading...</span>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        // Create mini performance chart for player
+        function createMiniChart(player) {
+            const canvas = document.getElementById(`chart-${player.id}`);
+            if (!canvas || !player.stats?.performance_trend) return;
+
+            const ctx = canvas.getContext('2d');
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: player.stats.performance_trend.map((_, i) => `T${i + 1}`),
+                    datasets: [{
+                        data: player.stats.performance_trend,
+                        borderColor: player.current_player ? '#28a745' : '#6c757d',
+                        backgroundColor: player.current_player ? 'rgba(40, 167, 69, 0.1)' : 'rgba(108, 117, 125, 0.1)',
+                        borderWidth: 2,
+                        fill: true,
+                        tension: 0.4,
+                        pointRadius: 2,
+                        pointHoverRadius: 4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        x: {
+                            display: false
+                        },
+                        y: {
+                            display: false,
+                            beginAtZero: true
+                        }
+                    },
+                    elements: {
+                        point: {
+                            hoverBackgroundColor: player.current_player ? '#28a745' : '#6c757d'
+                        }
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    }
+                }
+            });
+        }
+
+        // Navigate to player stats
+        function viewPlayerStats(playerId) {
+            window.location.href = `/archive/player/${playerId}`;
+        }
+
+        // Initialize page when DOM is loaded
+        document.addEventListener('DOMContentLoaded', initializePage);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/modern_player_stats.html b/TV_APP_V2/templates/modern_player_stats.html
new file mode 100644
index 0000000..8913b92
--- /dev/null
+++ b/TV_APP_V2/templates/modern_player_stats.html
@@ -0,0 +1,627 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ player.name }} - Player Stats</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            height: 100vh;
+            color: #333;
+            overflow: hidden;
+        }
+
+        /* Enhanced Navigation Bar */
+        .navbar {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            color: black;
+            padding: 12px 25px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 2px solid rgba(102, 126, 234, 0.3);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            height: 60px;
+            flex-shrink: 0;
+        }
+
+        .navbar-title {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .navbar-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .nav-btn {
+            background: #f8f9fa;
+            border: 2px solid #e9ecef;
+            cursor: pointer;
+            padding: 8px 16px;
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            color: #333;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 0.85rem;
+        }
+
+        .nav-btn:hover {
+            background: #e9ecef;
+            border-color: #007bff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+            transform: translateY(-1px);
+            color: #007bff;
+        }
+
+        .nav-btn.primary {
+            background: #007bff;
+            border-color: #0056b3;
+            color: white;
+        }
+
+        .nav-btn.primary:hover {
+            background: #0056b3;
+            color: white;
+        }
+
+        /* Main Container */
+        .container {
+            height: calc(100vh - 60px);
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            overflow: hidden;
+        }
+
+        /* Top Section - Stats and Chart */
+        .top-section {
+            display: grid;
+            grid-template-columns: 320px 1fr;
+            gap: 15px;
+            height: 50%;
+            min-height: 280px;
+        }
+
+        /* Stats Panel */
+        .stats-panel {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 18px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .panel-title {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 15px;
+            border-bottom: 2px solid #007bff;
+            padding-bottom: 5px;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+            flex: 1;
+        }
+
+        .stat-item {
+            text-align: center;
+            padding: 12px 8px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .stat-value {
+            font-size: 1.4rem;
+            font-weight: bold;
+            color: #007bff;
+            margin-bottom: 3px;
+        }
+
+        .stat-label {
+            font-size: 0.7rem;
+            color: #666;
+            text-transform: uppercase;
+            font-weight: 500;
+        }
+
+        /* Chart Panel */
+        .chart-panel {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 18px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .chart-container {
+            position: relative;
+            flex: 1;
+            min-height: 180px;
+        }
+
+        /* Bottom Section - History */
+        .bottom-section {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            flex: 1;
+            min-height: 0;
+        }
+
+        .history-section {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 18px;
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+        }
+
+        .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding-right: 8px;
+            min-height: 0;
+        }
+
+        /* Custom scrollbar */
+        .history-list::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .history-list::-webkit-scrollbar-track {
+            background: #f8f9fa;
+            border-radius: 3px;
+        }
+
+        .history-list::-webkit-scrollbar-thumb {
+            background: #dee2e6;
+            border-radius: 3px;
+        }
+
+        .history-list::-webkit-scrollbar-thumb:hover {
+            background: #adb5bd;
+        }
+
+        /* Tournament History Items */
+        .history-item {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 8px;
+            transition: all 0.3s ease;
+            border-left: 3px solid #2196f3;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .history-item:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
+            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+        }
+
+        .history-info {
+            flex: 1;
+        }
+
+        .history-date {
+            font-size: 0.8rem;
+            color: #1976d2;
+            margin-bottom: 2px;
+            font-weight: 600;
+        }
+
+        .history-type {
+            font-size: 0.75rem;
+            font-weight: bold;
+            color: #0d47a1;
+        }
+
+        .history-score {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #2e7d32;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
+
+        /* League History Items */
+        .league-history-item {
+            background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 8px;
+            transition: all 0.3s ease;
+            border-left: 3px solid #9c27b0;
+        }
+
+        .league-history-item:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
+            background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
+        }
+
+        .league-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 8px;
+        }
+
+        .league-info {
+            flex: 1;
+        }
+
+        .league-score-display {
+            font-size: 1.3rem;
+            font-weight: bold;
+            color: #4a148c;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        }
+
+        .league-details {
+            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+            border: 1px solid #81c784;
+            border-radius: 6px;
+            padding: 8px;
+            font-size: 0.7rem;
+        }
+
+        .league-summary {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 6px;
+            font-weight: bold;
+        }
+
+        .league-final-score {
+            color: #1b5e20;
+            font-size: 0.85rem;
+        }
+
+        .league-total-score {
+            color: #388e3c;
+            font-size: 0.75rem;
+        }
+
+        .tournament-results {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 4px;
+        }
+
+        .tournament-result {
+            padding: 4px 6px;
+            border-radius: 4px;
+            font-size: 0.65rem;
+            font-weight: bold;
+            text-align: center;
+            transition: transform 0.2s ease;
+        }
+
+        .tournament-result:hover {
+            transform: scale(1.05);
+        }
+
+        .tournament-result.participated {
+            background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
+            color: #1b5e20;
+            border: 1px solid #81c784;
+        }
+
+        .tournament-result.joker {
+            background: linear-gradient(135deg, #fff3e0, #ffcc02);
+            color: #e65100;
+            border: 1px solid #ffb74d;
+        }
+
+        /* Empty State */
+        .empty-state {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+        }
+
+        .empty-icon {
+            font-size: 2rem;
+            margin-bottom: 8px;
+            opacity: 0.5;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 1200px) {
+            .top-section {
+                grid-template-columns: 1fr;
+                height: 55%;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .navbar {
+                padding: 10px 15px;
+                flex-direction: column;
+                gap: 8px;
+                height: auto;
+            }
+
+            .navbar-controls {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+
+            .container {
+                height: calc(100vh - 80px);
+                padding: 10px;
+            }
+
+            .top-section, .bottom-section {
+                grid-template-columns: 1fr;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .top-section {
+                height: auto;
+                min-height: 200px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation Bar -->
+    <div class="navbar">
+        <div class="navbar-title">📊 {{ player.name }} - Stats</div>
+        <div class="navbar-controls">
+            <a href="/archive/player-analysis" class="nav-btn">👤 All Players</a>
+            <a href="/archive" class="nav-btn">📚 Archive</a>
+            <a href="/" class="nav-btn primary">🏠 Dashboard</a>
+        </div>
+    </div>
+
+    <div class="container">
+        <!-- Top Section - Stats and Chart -->
+        <div class="top-section">
+            <!-- Stats Panel -->
+            <div class="stats-panel">
+                <div class="panel-title">📊 Statistics</div>
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <div class="stat-value">{{ stats.total_tournaments }}</div>
+                        <div class="stat-label">Tournaments</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">{{ stats.total_leagues }}</div>
+                        <div class="stat-label">Leagues</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">{{ stats.best_tournament_score }}</div>
+                        <div class="stat-label">Best Score</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">{{ stats.average_tournament_score|round|int if stats.average_tournament_score > 0 else 0 }}</div>
+                        <div class="stat-label">Average</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">{{ stats.total_shots_fired|default(0) }}</div>
+                        <div class="stat-label">Total Shots</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">{{ stats.worst_tournament_score if stats.worst_tournament_score > 0 else 0 }}</div>
+                        <div class="stat-label">Worst Score</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Performance Chart -->
+            <div class="chart-panel">
+                <div class="panel-title">📈 Performance Trend</div>
+                <div class="chart-container">
+                    <canvas id="performanceChart"></canvas>
+                </div>
+            </div>
+        </div>
+
+        <!-- Bottom Section - History -->
+        <div class="bottom-section">
+            <!-- Tournament History -->
+            <div class="history-section">
+                <div class="panel-title">🎯 Tournament History</div>
+                {% if stats.tournament_history %}
+                <div class="history-list">
+                    {% for tournament in stats.tournament_history[:10] %}
+                    <div class="history-item">
+                        <div class="history-info">
+                            <div class="history-date">{{ tournament.date[:10] if tournament.date != 'Unknown' else 'Unknown Date' }}</div>
+                            <div class="history-type">{{ tournament.tournament_type.replace('_', ' ')|title }} • {{ tournament.shots_fired }} shots</div>
+                        </div>
+                        <div class="history-score">{{ tournament.score }}</div>
+                    </div>
+                    {% endfor %}
+                    {% if stats.tournament_history|length > 10 %}
+                    <div style="text-align: center; padding: 8px; color: #666; font-size: 0.8rem;">
+                        ... and {{ stats.tournament_history|length - 10 }} more
+                    </div>
+                    {% endif %}
+                </div>
+                {% else %}
+                <div class="empty-state">
+                    <div class="empty-icon">🎯</div>
+                    <div>No tournament history</div>
+                </div>
+                {% endif %}
+            </div>
+
+            <!-- League History -->
+            <div class="history-section">
+                <div class="panel-title">🏆 League History</div>
+                {% if stats.league_history %}
+                <div class="history-list">
+                    {% for league in stats.league_history %}
+                    <div class="league-history-item">
+                        <div class="league-header">
+                            <div class="league-info">
+                                <div class="history-date">{{ league.date[:10] if league.date != 'Unknown' else 'Unknown Date' }}</div>
+                                <div class="history-type">
+                                    League Championship • {{ league.tournaments_participated }}/6 tournaments
+                                    {% if league.joker_used %} • 🃏 Joker Used{% endif %}
+                                </div>
+                            </div>
+                            <div class="league-score-display">{{ league.final_score }}</div>
+                        </div>
+                        
+                        <div class="league-details">
+                            <div class="league-summary">
+                                <span>Final Score: <span class="league-final-score">{{ league.final_score }}</span></span>
+                                <span class="league-total-score">Total: {{ league.total_score }}</span>
+                            </div>
+                            <div class="tournament-results">
+                                {% for result in league.tournament_results %}
+                                <span class="tournament-result {{ 'participated' if result.participated else 'joker' }}">
+                                    T{{ result.tournament }}: {{ result.score if result.participated else 'Joker' }}
+                                </span>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <div class="empty-state">
+                    <div class="empty-icon">🏆</div>
+                    <div>No league history</div>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Player data from Flask
+        const playerStats = {{ stats|tojson }};
+
+        // Initialize page
+        function initializePage() {
+            createPerformanceChart();
+        }
+
+        // Create performance trend chart
+        function createPerformanceChart() {
+            const ctx = document.getElementById('performanceChart').getContext('2d');
+            const scores = playerStats.tournament_scores || [];
+            
+            if (scores.length === 0) {
+                ctx.font = '14px Arial';
+                ctx.fillStyle = '#666';
+                ctx.textAlign = 'center';
+                ctx.fillText('No tournament data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
+                return;
+            }
+            
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: scores.map((_, i) => `T${i + 1}`),
+                    datasets: [{
+                        label: 'Tournament Score',
+                        data: scores,
+                        borderColor: '#28a745',
+                        backgroundColor: 'rgba(40, 167, 69, 0.15)',
+                        borderWidth: 3,
+                        fill: true,
+                        tension: 0.4,
+                        pointRadius: 5,
+                        pointHoverRadius: 8,
+                        pointBackgroundColor: '#28a745',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 2,
+                        pointHoverBackgroundColor: '#1e7e34',
+                        pointHoverBorderColor: '#fff'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: { display: false },
+                        tooltip: {
+                            backgroundColor: 'rgba(40, 167, 69, 0.9)',
+                            titleColor: '#fff',
+                            bodyColor: '#fff',
+                            borderColor: '#28a745',
+                            borderWidth: 2,
+                            callbacks: {
+                                title: function(context) {
+                                    return `Tournament ${context[0].dataIndex + 1}`;
+                                },
+                                label: function(context) {
+                                    return `Score: ${context.parsed.y}`;
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: { color: 'rgba(40, 167, 69, 0.1)' },
+                            ticks: { 
+                                color: '#28a745', 
+                                font: { size: 11, weight: 'bold' }
+                            }
+                        },
+                        x: {
+                            grid: { color: 'rgba(40, 167, 69, 0.1)' },
+                            ticks: { 
+                                color: '#28a745', 
+                                font: { size: 11, weight: 'bold' }
+                            }
+                        }
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    }
+                }
+            });
+        }
+
+        // Initialize page when DOM is loaded
+        document.addEventListener('DOMContentLoaded', initializePage);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/results_calculator.html b/TV_APP_V2/templates/results_calculator.html
new file mode 100644
index 0000000..647ccb5
--- /dev/null
+++ b/TV_APP_V2/templates/results_calculator.html
@@ -0,0 +1,1074 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Results Calculator</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+    }
+
+    .navbar {
+      background: white;
+      color: black;
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px 20px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.primary {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.primary:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.success {
+      background: #28a745;
+      border-color: #1e7e34;
+      color: white;
+    }
+
+    .nav-btn.success:hover {
+      background: #1e7e34;
+      color: white;
+    }
+
+    .nav-btn.danger {
+      background: #dc3545;
+      border-color: #c82333;
+      color: white;
+    }
+
+    .nav-btn.danger:hover {
+      background: #c82333;
+      color: white;
+    }
+
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 30px 20px;
+    }
+
+    .header-section {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 25px;
+      margin-bottom: 30px;
+      text-align: center;
+    }
+
+    .header-title {
+      font-size: 2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .header-subtitle {
+      color: #666;
+      font-size: 1.1rem;
+      margin-bottom: 20px;
+    }
+
+    .progress-info {
+      display: flex;
+      justify-content: center;
+      gap: 30px;
+      flex-wrap: wrap;
+    }
+
+    .progress-item {
+      text-align: center;
+    }
+
+    .progress-number {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #007bff;
+    }
+
+    .progress-label {
+      font-size: 0.9rem;
+      color: #666;
+      text-transform: uppercase;
+    }
+
+    .participants-list {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      margin-bottom: 30px;
+    }
+
+    .participant-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      transition: all 0.2s ease;
+      border-left: 5px solid #e9ecef;
+    }
+
+    .participant-card.completed {
+      border-left-color: #28a745;
+    }
+
+    .participant-card.in-progress {
+      border-left-color: #ffc107;
+    }
+
+    .participant-card.collapsed {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .participant-header {
+      padding: 20px 25px;
+      background: #f8f9fa;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .participant-card.completed .participant-header {
+      background: #f8fff9;
+    }
+
+    .participant-card.in-progress .participant-header {
+      background: #fffbf0;
+    }
+
+    .participant-header:hover {
+      background: #e9ecef;
+    }
+
+    .participant-card.completed .participant-header:hover {
+      background: #f0fff1;
+    }
+
+    .participant-card.in-progress .participant-header:hover {
+      background: #fff8e1;
+    }
+
+    .participant-info {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+
+    .participant-name {
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .participant-id {
+      background: #007bff;
+      color: white;
+      padding: 6px 15px;
+      border-radius: 15px;
+      font-size: 0.9rem;
+      font-weight: bold;
+    }
+
+    .participant-status {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+
+    .total-score {
+      text-align: right;
+    }
+
+    .score-number {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #28a745;
+    }
+
+    .score-label {
+      font-size: 0.8rem;
+      color: #666;
+      text-transform: uppercase;
+    }
+
+    .completion-badge {
+      padding: 6px 15px;
+      border-radius: 15px;
+      font-size: 0.9rem;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    .badge-completed {
+      background: #28a745;
+      color: white;
+    }
+
+    .badge-in-progress {
+      background: #ffc107;
+      color: #856404;
+    }
+
+    .badge-not-started {
+      background: #6c757d;
+      color: white;
+    }
+
+    .collapse-icon {
+      font-size: 1.2rem;
+      transition: transform 0.3s ease;
+      color: #666;
+    }
+
+    .participant-card.collapsed .collapse-icon {
+      transform: rotate(-90deg);
+    }
+
+    .participant-content {
+      max-height: 1000px;
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+    }
+
+    .participant-card.collapsed .participant-content {
+      max-height: 0;
+    }
+
+    .targets-section {
+      padding: 25px;
+    }
+
+    .targets-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+      gap: 10px;
+      margin-bottom: 20px;
+      max-width: 100%;
+    }
+
+    /* Responsive adjustments for 20 targets */
+    @media (max-width: 768px) {
+      .targets-grid {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 8px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .targets-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 6px;
+        padding: 15px;
+      }
+    }
+
+    .target-group {
+      border: 2px solid #e9ecef;
+      border-radius: 8px;
+      padding: 10px;
+      background: #f8f9fa;
+      text-align: center;
+    }
+
+    .target-group.completed {
+      border-color: #28a745;
+      background: #f8fff9;
+    }
+
+    .target-number {
+      font-size: 0.8rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .shots-container {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    .shot-input {
+      width: 100%;
+      padding: 6px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 0.9rem;
+      font-weight: bold;
+    }
+
+    .shot-input:focus {
+      outline: none;
+      border-color: #007bff;
+      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
+
+    .shot-input.valid {
+      border-color: #28a745;
+      background: #f8fff9;
+    }
+
+    .participant-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+
+    .action-btn {
+      padding: 10px 18px;
+      border: none;
+      border-radius: 6px;
+      font-size: 0.9rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .clear-btn {
+      background: #6c757d;
+      color: white;
+    }
+
+    .clear-btn:hover {
+      background: #5a6268;
+    }
+
+    .save-btn {
+      background: #007bff;
+      color: white;
+    }
+
+    .save-btn:hover {
+      background: #0056b3;
+    }
+
+    .auto-fill-btn {
+      background: #ffc107;
+      color: #856404;
+    }
+
+    .auto-fill-btn:hover {
+      background: #e0a800;
+    }
+
+    .finish-section {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 25px;
+      text-align: center;
+    }
+
+    .finish-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 15px;
+    }
+
+    .finish-description {
+      color: #666;
+      margin-bottom: 20px;
+    }
+
+    .finish-btn {
+      background: #28a745;
+      border: none;
+      color: white;
+      padding: 15px 30px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 1.1rem;
+      font-weight: bold;
+      transition: all 0.2s ease;
+    }
+
+    .finish-btn:hover {
+      background: #1e7e34;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+    }
+
+    .finish-btn:disabled {
+      background: #6c757d;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+    }
+
+    .warning-message {
+      background: #fff3cd;
+      border: 1px solid #ffeaa7;
+      color: #856404;
+      padding: 12px 15px;
+      border-radius: 6px;
+      margin: 15px 0;
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .participant-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+      }
+
+      .participant-status {
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      .progress-info {
+        gap: 20px;
+      }
+    }
+
+    /* Loading and saving indicators */
+    .saving {
+      opacity: 0.7;
+      pointer-events: none;
+    }
+
+    .saving::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 20px;
+      height: 20px;
+      margin: -10px 0 0 -10px;
+      border: 2px solid #f3f3f3;
+      border-top: 2px solid #007bff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-title">🎯 Results Calculator</div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">← Dashboard</a>
+      <a href="/tournament/draft" class="nav-btn">📋 Draft</a>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="header-section">
+      <div class="header-title">🎯 Tournament Scoring</div>
+      <div class="header-subtitle">Enter scores for each participant (20 targets, 2 shots each). Score 0 = miss.</div>
+      
+      <div class="progress-info">
+        <div class="progress-item">
+          <div class="progress-number" id="completedCount">0</div>
+          <div class="progress-label">Completed</div>
+        </div>
+        <div class="progress-item">
+          <div class="progress-number" id="totalParticipants">{{ results.participants|length }}</div>
+          <div class="progress-label">Total</div>
+        </div>
+        <div class="progress-item">
+          <div class="progress-number" id="totalShots">0</div>
+          <div class="progress-label">Total Shots</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="participants-list">
+      {% for player_id, participant in results.participants.items() %}
+        <div class="participant-card" id="card-{{ player_id }}" data-player-id="{{ player_id }}">
+          <div class="participant-header" onclick="toggleParticipant({{ player_id }})">
+            <div class="participant-info">
+              <div class="participant-name">{{ participant.name }}</div>
+              <div class="participant-id">ID: {{ player_id }}</div>
+            </div>
+            <div class="participant-status">
+              <div class="total-score">
+                <div class="score-number" id="total-{{ player_id }}">{{ participant.total_score }}</div>
+                <div class="score-label">Points</div>
+              </div>
+              <div class="completion-badge" id="badge-{{ player_id }}">
+                {% if participant.completed %}
+                  <span class="badge-completed">Completed</span>
+                {% else %}
+                  <span class="badge-not-started">Not Started</span>
+                {% endif %}
+              </div>
+              <div class="collapse-icon">▼</div>
+            </div>
+          </div>
+
+          <div class="participant-content">
+            <div class="targets-section">
+              <div class="targets-grid" id="targets-{{ player_id }}">
+                {% for i in range(1, 21) %}
+                  <div class="target-group" id="target-group-{{ player_id }}-{{ i }}">
+                    <div class="target-number">{{ i }}</div>
+                    <div class="shots-container">
+                      <input type="number" 
+                             class="shot-input" 
+                             id="shot1-{{ player_id }}-{{ i }}"
+                             data-player="{{ player_id }}" 
+                             data-target="{{ i }}" 
+                             data-shot="1"
+                             min="0" 
+                             max="10" 
+                             value="{% if participant.targets[i|string].shot1 is not none %}{{ participant.targets[i|string].shot1 }}{% endif %}"
+                             placeholder="S1"
+                             oninput="updateScore({{ player_id }}, {{ i }}, 1, this.value)">
+                      <input type="number" 
+                             class="shot-input" 
+                             id="shot2-{{ player_id }}-{{ i }}"
+                             data-player="{{ player_id }}" 
+                             data-target="{{ i }}" 
+                             data-shot="2"
+                             min="0" 
+                             max="10" 
+                             value="{% if participant.targets[i|string].shot2 is not none %}{{ participant.targets[i|string].shot2 }}{% endif %}"
+                             placeholder="S2"
+                             oninput="updateScore({{ player_id }}, {{ i }}, 2, this.value)">
+                    </div>
+                  </div>
+                {% endfor %}
+              </div>
+
+              <div class="participant-actions">
+                <button class="action-btn clear-btn" onclick="clearParticipant({{ player_id }})">
+                  🗑️ Clear All
+                </button>
+                <button class="action-btn auto-fill-btn" onclick="autoFillDemo({{ player_id }})">
+                  🎲 Demo Fill
+                </button>
+                <button class="action-btn save-btn" onclick="saveParticipant({{ player_id }})">
+                  💾 Save Progress
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+
+    <div class="finish-section">
+      <div class="finish-title">🏁 Finish Tournament</div>
+      <div class="finish-description">
+        Complete scoring for all participants and finalize tournament results.
+      </div>
+      <div class="warning-message" id="finishWarning" style="display: none;">
+        <strong>Warning:</strong> Not all participants have completed scores. Please ensure all scoring is complete before finishing.
+      </div>
+      <button class="finish-btn" id="finishBtn" onclick="finishTournament()">
+        🏆 Finish Tournament & Show Results
+      </button>
+    </div>
+  </div>
+
+  <script>
+    let results = {{ results|tojson }};
+    let saveTimeout = {};
+
+    // Debounce function for auto-saving
+    function debounce(func, wait, immediate) {
+      var timeout;
+      return function() {
+        var context = this, args = arguments;
+        var later = function() {
+          timeout = null;
+          if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+      };
+    }
+
+    function toggleParticipant(playerId) {
+      const card = document.getElementById(`card-${playerId}`);
+      card.classList.toggle('collapsed');
+    }
+
+    function updateScore(playerId, targetNum, shotNum, value) {
+      const playerIdStr = playerId.toString();
+      const targetStr = targetNum.toString();
+      
+      // Parse input - allow empty string, treat as null/undefined for completion check
+      let numValue = null;
+      if (value !== '' && value !== null && value !== undefined) {
+        numValue = parseInt(value);
+        if (isNaN(numValue)) numValue = null;
+        else numValue = Math.max(0, Math.min(10, numValue)); // Clamp between 0-10
+      }
+      
+      // Update the input field with clamped value
+      const input = document.getElementById(`shot${shotNum}-${playerId}-${targetNum}`);
+      if (input && numValue !== null && input.value !== numValue.toString()) {
+        input.value = numValue;
+      }
+      
+      // Update local data
+      if (!results.participants[playerIdStr]) {
+        console.error('Player not found:', playerIdStr);
+        return;
+      }
+      if (!results.participants[playerIdStr].targets[targetStr]) {
+        results.participants[playerIdStr].targets[targetStr] = {shot1: null, shot2: null};
+      }
+      
+      results.participants[playerIdStr].targets[targetStr][`shot${shotNum}`] = numValue;
+      
+      // Update target group styling
+      updateTargetGroupStyling(playerId, targetNum);
+      
+      // Recalculate total
+      updateParticipantTotal(playerId);
+      updateParticipantStatus(playerId);
+      updateOverallProgress();
+      
+      // Visual feedback for input
+      if (numValue !== null) {
+        input.classList.add('valid');
+      } else {
+        input.classList.remove('valid');
+      }
+      
+      // Auto-save with debounce
+      clearTimeout(saveTimeout[playerId]);
+      saveTimeout[playerId] = setTimeout(() => {
+        saveParticipant(playerId, true);
+      }, 1000);
+    }
+
+    function updateTargetGroupStyling(playerId, targetNum) {
+      const playerIdStr = playerId.toString();
+      const targetStr = targetNum.toString();
+      const targetGroup = document.getElementById(`target-group-${playerId}-${targetNum}`);
+      
+      if (targetGroup && results.participants[playerIdStr].targets[targetStr]) {
+        const shot1 = results.participants[playerIdStr].targets[targetStr].shot1;
+        const shot2 = results.participants[playerIdStr].targets[targetStr].shot2;
+        
+        // Target is completed if both shots have been entered (including 0)
+        const isCompleted = shot1 !== null && shot1 !== undefined && shot2 !== null && shot2 !== undefined;
+        
+        if (isCompleted) {
+          targetGroup.classList.add('completed');
+        } else {
+          targetGroup.classList.remove('completed');
+        }
+      }
+    }
+
+    function updateParticipantTotal(playerId) {
+      const playerIdStr = playerId.toString();
+      const targets = results.participants[playerIdStr].targets;
+      let total = 0;
+      
+      for (let target in targets) {
+        const shot1 = targets[target].shot1;
+        const shot2 = targets[target].shot2;
+        total += (shot1 !== null && shot1 !== undefined ? shot1 : 0);
+        total += (shot2 !== null && shot2 !== undefined ? shot2 : 0);
+      }
+      
+      results.participants[playerIdStr].total_score = total;
+      
+      // Update display
+      const totalElement = document.getElementById(`total-${playerId}`);
+      if (totalElement) {
+        totalElement.textContent = total;
+        
+        // Add visual feedback
+        totalElement.style.color = '#28a745';
+        setTimeout(() => {
+          totalElement.style.color = '';
+        }, 300);
+      }
+    }
+
+    function updateParticipantStatus(playerId) {
+      const playerIdStr = playerId.toString();
+      const targets = results.participants[playerIdStr].targets;
+      const card = document.getElementById(`card-${playerId}`);
+      const badge = document.getElementById(`badge-${playerId}`);
+      
+      let completedTargets = 0;
+      let totalShots = 0;
+      
+      for (let target in targets) {
+        const shot1 = targets[target].shot1;
+        const shot2 = targets[target].shot2;
+        
+        // Count shots that have been entered (including 0)
+        if (shot1 !== null && shot1 !== undefined) totalShots++;
+        if (shot2 !== null && shot2 !== undefined) totalShots++;
+        
+        // Target is completed if both shots have been entered
+        if (shot1 !== null && shot1 !== undefined && shot2 !== null && shot2 !== undefined) {
+          completedTargets++;
+        }
+      }
+      
+      const isCompleted = completedTargets === 20;
+      const isInProgress = totalShots > 0 && !isCompleted;
+      
+      results.participants[playerIdStr].completed = isCompleted;
+      
+      // Debug logging
+      console.log(`Player ${playerId} status:`, {
+        completedTargets,
+        totalShots,
+        isCompleted,
+        isInProgress,
+        sampleTarget: targets['1']
+      });
+      
+      // Update card styling
+      card.classList.remove('completed', 'in-progress');
+      if (isCompleted) {
+        card.classList.add('completed');
+        badge.innerHTML = '<span class="badge-completed">Completed</span>';
+      } else if (isInProgress) {
+        card.classList.add('in-progress');
+        badge.innerHTML = '<span class="badge-in-progress">In Progress</span>';
+      } else {
+        badge.innerHTML = '<span class="badge-not-started">Not Started</span>';
+      }
+    }
+
+    function updateOverallProgress() {
+      let completedCount = 0;
+      let totalShots = 0;
+      
+      for (let playerId in results.participants) {
+        const participant = results.participants[playerId];
+        if (participant.completed) {
+          completedCount++;
+        }
+        
+        for (let target in participant.targets) {
+          const targetData = participant.targets[target];
+          if (targetData.shot1 !== null && targetData.shot1 !== undefined) totalShots++;
+          if (targetData.shot2 !== null && targetData.shot2 !== undefined) totalShots++;
+        }
+      }
+      
+      document.getElementById('completedCount').textContent = completedCount;
+      document.getElementById('totalShots').textContent = totalShots;
+      
+      // Update finish button state
+      const finishBtn = document.getElementById('finishBtn');
+      const finishWarning = document.getElementById('finishWarning');
+      const allCompleted = completedCount === Object.keys(results.participants).length;
+      
+      if (allCompleted) {
+        finishBtn.disabled = false;
+        finishWarning.style.display = 'none';
+      } else {
+        finishBtn.disabled = true;
+        finishWarning.style.display = 'block';
+      }
+    }
+
+    async function saveParticipant(playerId, silent = false) {
+      const card = document.getElementById(`card-${playerId}`);
+      if (!silent) card.classList.add('saving');
+      
+      try {
+        const playerIdStr = playerId.toString();
+        const participantData = results.participants[playerIdStr];
+        
+        const response = await fetch(`/api/results/participant/${playerId}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            targets: participantData.targets
+          })
+        });
+        
+        if (response.ok) {
+          const result = await response.json();
+          if (!silent) {
+            // Show success feedback
+            const saveBtn = card.querySelector('.save-btn');
+            const originalText = saveBtn.textContent;
+            saveBtn.textContent = '✅ Saved';
+            saveBtn.style.background = '#28a745';
+            
+            setTimeout(() => {
+              saveBtn.textContent = originalText;
+              saveBtn.style.background = '';
+            }, 2000);
+          }
+        } else {
+          throw new Error('Failed to save');
+        }
+      } catch (error) {
+        console.error('Error saving participant:', error);
+        if (!silent) {
+          alert('Failed to save participant data. Please try again.');
+        }
+      } finally {
+        if (!silent) card.classList.remove('saving');
+      }
+    }
+
+    function clearParticipant(playerId) {
+      if (!confirm('Are you sure you want to clear all scores for this participant?')) {
+        return;
+      }
+      
+      const playerIdStr = playerId.toString();
+      
+      // Clear all inputs
+      for (let i = 1; i <= 20; i++) {
+        const shot1Input = document.getElementById(`shot1-${playerId}-${i}`);
+        const shot2Input = document.getElementById(`shot2-${playerId}-${i}`);
+        
+        if (shot1Input) shot1Input.value = '';
+        if (shot2Input) shot2Input.value = '';
+        
+        // Update data
+        results.participants[playerIdStr].targets[i.toString()] = {shot1: null, shot2: null};
+        
+        // Update target group styling
+        updateTargetGroupStyling(playerId, i);
+      }
+      
+      updateParticipantTotal(playerId);
+      updateParticipantStatus(playerId);
+      updateOverallProgress();
+      
+      // Save changes
+      saveParticipant(playerId);
+    }
+
+    function autoFillDemo(playerId) {
+      if (!confirm('Fill with random demo scores? This will overwrite existing data.')) {
+        return;
+      }
+      
+      const playerIdStr = playerId.toString();
+      
+      // Fill with random scores (0-10) - all fields will be filled
+      for (let i = 1; i <= 20; i++) {
+        const shot1 = Math.floor(Math.random() * 11);
+        const shot2 = Math.floor(Math.random() * 11);
+        
+        const shot1Input = document.getElementById(`shot1-${playerId}-${i}`);
+        const shot2Input = document.getElementById(`shot2-${playerId}-${i}`);
+        
+        if (shot1Input) shot1Input.value = shot1;
+        if (shot2Input) shot2Input.value = shot2;
+        
+        // Update data
+        results.participants[playerIdStr].targets[i.toString()] = {
+          shot1: shot1,
+          shot2: shot2
+        };
+        
+        // Update target group styling
+        updateTargetGroupStyling(playerId, i);
+      }
+      
+      updateParticipantTotal(playerId);
+      updateParticipantStatus(playerId);
+      updateOverallProgress();
+      
+      // Save changes
+      saveParticipant(playerId);
+    }
+
+    async function finishTournament() {
+      const allCompleted = Object.values(results.participants).every(p => p.completed);
+      
+      if (!allCompleted) {
+        alert('Please complete scoring for all participants before finishing the tournament.');
+        return;
+      }
+      
+      if (!confirm('Are you sure you want to finish the tournament? This will finalize all results and make them viewable.')) {
+        return;
+      }
+      
+      const finishBtn = document.getElementById('finishBtn');
+      finishBtn.disabled = true;
+      finishBtn.textContent = '🔄 Finishing Tournament...';
+      
+      try {
+        const response = await fetch('/api/results/finish', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
+        
+        if (response.ok) {
+          alert('Tournament finished successfully! Redirecting to results...');
+          // Small delay to ensure the alert is seen
+          setTimeout(() => {
+            window.location.href = '/results';
+          }, 1000);
+        } else {
+          const error = await response.json();
+          throw new Error(error.message || 'Failed to finish tournament');
+        }
+      } catch (error) {
+        console.error('Error finishing tournament:', error);
+        alert('Failed to finish tournament: ' + error.message);
+        finishBtn.disabled = false;
+        finishBtn.textContent = '🏆 Finish Tournament & Show Results';
+      }
+    }
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+      if (event.ctrlKey && event.key === 's') {
+        event.preventDefault();
+        // Save all participants
+        Object.keys(results.participants).forEach(playerId => {
+          saveParticipant(parseInt(playerId), true);
+        });
+        
+        // Show feedback
+        const feedback = document.createElement('div');
+        feedback.style.cssText = `
+          position: fixed;
+          top: 20px;
+          right: 20px;
+          background: #28a745;
+          color: white;
+          padding: 10px 20px;
+          border-radius: 6px;
+          z-index: 1000;
+          font-weight: bold;
+        `;
+        feedback.textContent = '💾 All progress saved!';
+        document.body.appendChild(feedback);
+        
+        setTimeout(() => {
+          document.body.removeChild(feedback);
+        }, 3000);
+      }
+    });
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function() {
+      // Debug: Log initial results structure
+      console.log('Initial results structure:', results);
+      console.log('Sample participant targets:', results.participants[Object.keys(results.participants)[0]]?.targets);
+      
+      // Update initial states
+      Object.keys(results.participants).forEach(playerId => {
+        for (let i = 1; i <= 20; i++) {
+          updateTargetGroupStyling(parseInt(playerId), i);
+        }
+        updateParticipantStatus(parseInt(playerId));
+      });
+      updateOverallProgress();
+      
+      // Add input validation
+      document.querySelectorAll('.shot-input').forEach(input => {
+        input.addEventListener('blur', function() {
+          if (this.value !== '') {
+            const value = parseInt(this.value);
+            const clampedValue = Math.max(0, Math.min(10, isNaN(value) ? 0 : value));
+            if (this.value !== clampedValue.toString()) {
+              this.value = clampedValue;
+              // Trigger update
+              const playerId = parseInt(this.dataset.player);
+              const targetNum = parseInt(this.dataset.target);
+              const shotNum = parseInt(this.dataset.shot);
+              updateScore(playerId, targetNum, shotNum, clampedValue);
+            }
+          }
+        });
+        
+        // Handle Enter key to move to next input
+        input.addEventListener('keydown', function(e) {
+          if (e.key === 'Enter') {
+            const inputs = Array.from(document.querySelectorAll('.shot-input'));
+            const currentIndex = inputs.indexOf(this);
+            const nextInput = inputs[currentIndex + 1];
+            if (nextInput) {
+              nextInput.focus();
+              nextInput.select();
+            }
+          }
+        });
+      });
+      
+      console.log('🎯 Results Calculator initialized');
+      console.log('📊 Participants:', Object.keys(results.participants).length);
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/results_display.html b/TV_APP_V2/templates/results_display.html
new file mode 100644
index 0000000..15d0799
--- /dev/null
+++ b/TV_APP_V2/templates/results_display.html
@@ -0,0 +1,872 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Tournament Results</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f8f9fa;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      height: 100vh;
+      overflow: hidden; /* Prevent scrolling for TV display */
+      color: #333;
+    }
+
+    .navbar {
+      background: white;
+      border-bottom: 1px solid #e1e5e9;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .navbar-logo {
+      height: 40px;
+      max-width: 120px;
+      object-fit: contain;
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      margin-left: 15px;
+    }
+
+    .navbar-brand {
+      display: flex;
+      align-items: center;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px 20px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.primary {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.primary:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    /* Main TV Layout */
+    .tv-container {
+      height: calc(100vh - 90px); /* Adjusted for consistent navbar size */
+      display: grid;
+      grid-template-columns: 2fr 3fr;
+      gap: 20px;
+      padding: 20px;
+    }
+
+    /* Left Column - Header & Podium */
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .results-header {
+      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 25px;
+      text-align: center;
+      flex-shrink: 0;
+      color: white;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .results-header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
+      pointer-events: none;
+    }
+
+    .results-header * {
+      position: relative;
+      z-index: 2;
+    }
+
+    .header-logo {
+      height: 70px;
+      max-width: 180px;
+      object-fit: contain;
+      margin-bottom: 20px;
+      filter: brightness(1.2) contrast(1.1);
+      background-color: white;
+      padding: 10px;
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .results-title {
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: rgb(255, 255, 255);
+      margin-bottom: 10px;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .results-subtitle {
+      font-size: 1.1rem;
+      color: rgba(255, 255, 255, 0.95);
+      margin-bottom: 20px;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    }
+
+    .results-meta {
+      display: flex;
+      justify-content: space-around;
+      gap: 30px;
+    }
+
+    .meta-item {
+      text-align: center;
+    }
+
+    .meta-number {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #ffffff;
+      display: block;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    .meta-label {
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.9);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 500;
+    }
+
+    /* Modern Podium Design */
+    .podium-section {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      padding: 25px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .podium-title {
+      text-align: center;
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: #2c3e50;
+      margin-bottom: 20px;
+    }
+
+    .podium-container {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      flex: 1;
+    }
+
+    .podium-card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+      border-left: 5px solid;
+    }
+
+    .podium-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    .podium-card.rank-1 {
+      border-left-color: #ffd700;
+      background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
+    }
+
+    .podium-card.rank-2 {
+      border-left-color: #c0c0c0;
+      background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+    }
+
+    .podium-card.rank-3 {
+      border-left-color: #cd7f32;
+      background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
+    }
+
+    .rank-display {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 60px;
+    }
+
+    .rank-number {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+      line-height: 1;
+    }
+
+    .podium-card.rank-1 .rank-number { color: #b8860b; }
+    .podium-card.rank-2 .rank-number { color: #696969; }
+    .podium-card.rank-3 .rank-number { color: #8b4513; }
+
+    .rank-suffix {
+      font-size: 0.7rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .medal {
+      font-size: 1.5rem;
+      margin-top: 3px;
+    }
+
+    .participant-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .participant-name {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 5px;
+      word-wrap: break-word;
+    }
+
+    .participant-id {
+      background: #007bff;
+      color: white;
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      display: inline-block;
+    }
+
+    .score-display {
+      text-align: right;
+      min-width: 80px;
+    }
+
+    .score-number {
+      font-size: 2rem;
+      font-weight: bold;
+      color: #28a745;
+      line-height: 1;
+    }
+
+    .score-label {
+      font-size: 0.8rem;
+      color: #666;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    /* Right Column - Full Results Table */
+    .right-column {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .table-header {
+      background: #f8f9fa;
+      padding: 15px 20px;
+      border-bottom: 1px solid #dee2e6;
+      flex-shrink: 0;
+    }
+
+    .table-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #2c3e50;
+      margin: 0;
+    }
+
+    .table-container {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .results-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    .results-table th,
+    .results-table td {
+      padding: 10px 15px;
+      text-align: left;
+      border-bottom: 1px solid #f1f3f4;
+    }
+
+    .results-table th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #495057;
+      text-transform: uppercase;
+      font-size: 0.7rem;
+      letter-spacing: 0.5px;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    .results-table tbody tr:hover {
+      background: #f8f9fa;
+    }
+
+    .results-table tbody tr:nth-child(1) {
+      background: #fff9e6;
+    }
+
+    .results-table tbody tr:nth-child(1):hover {
+      background: #fff3cd;
+    }
+
+    .results-table tbody tr:nth-child(2) {
+      background: #f5f5f5;
+    }
+
+    .results-table tbody tr:nth-child(2):hover {
+      background: #e9ecef;
+    }
+
+    .results-table tbody tr:nth-child(3) {
+      background: #fdf6f0;
+    }
+
+    .results-table tbody tr:nth-child(3):hover {
+      background: #f8f1e6;
+    }
+
+    .rank-cell {
+      font-size: 1rem;
+      font-weight: 700;
+      width: 60px;
+      text-align: center;
+    }
+
+    .rank-1 { color: #b8860b; }
+    .rank-2 { color: #6c757d; }
+    .rank-3 { color: #8b4513; }
+
+    .name-cell {
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: #2c3e50;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      hyphens: none;
+    }
+
+    .id-cell {
+      background: #007bff;
+      color: white;
+      padding: 3px 8px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: 500;
+      display: inline-block;
+    }
+
+    .score-cell {
+      font-size: 1rem;
+      font-weight: 700;
+      color: #28a745;
+      text-align: center;
+      width: 80px;
+    }
+
+    .status-cell {
+      text-align: center;
+      width: 80px;
+    }
+
+    .status-badge {
+      padding: 3px 8px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+
+    .status-completed {
+      background: #d1ecf1;
+      color: #0c5460;
+    }
+
+    /* Tournament Stats Footer */
+    .stats-footer {
+      background: white;
+      border-top: 1px solid #dee2e6;
+      padding: 10px 20px;
+      display: flex;
+      justify-content: space-around;
+      font-size: 0.8rem;
+      color: #6c757d;
+      flex-shrink: 0;
+    }
+
+    .stat-item {
+      text-align: center;
+    }
+
+    .stat-value {
+      font-weight: 600;
+      color: #007bff;
+    }
+
+    /* Large Screen Optimization */
+    @media (min-width: 1200px) {
+      .tv-container {
+        grid-template-columns: 1fr 2fr;
+      }
+
+      .results-title {
+        font-size: 2.5rem;
+      }
+
+      .medal {
+        font-size: 1.8rem;
+      }
+
+      .results-table th,
+      .results-table td {
+        padding: 12px 18px;
+      }
+    }
+
+    /* Ultra-wide screens (TVs) */
+    @media (min-width: 1600px) {
+      .tv-container {
+        grid-template-columns: 1fr 2.5fr;
+        gap: 30px;
+        padding: 30px;
+      }
+
+      .results-title {
+        font-size: 3rem;
+      }
+
+      .medal {
+        font-size: 2.2rem;
+      }
+    }
+
+    /* Prevent scrolling on small screens by scaling down */
+    @media (max-height: 800px) {
+      .results-title {
+        font-size: 1.5rem;
+      }
+
+      .medal {
+        font-size: 1.2rem;
+      }
+
+      .results-table th,
+      .results-table td {
+        padding: 8px 12px;
+        font-size: 0.85rem;
+      }
+    }
+
+    /* Mobile responsive - keep consistent navbar size from other pages */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 10px 15px;
+      }
+      
+      .navbar-title {
+        font-size: 1.4rem;
+      }
+      
+      .navbar-logo {
+        height: 30px;
+        max-width: 90px;
+      }
+
+      .tv-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+      }
+
+      .podium-section {
+        padding: 20px 15px;
+      }
+
+      .podium-title {
+        font-size: 1.3rem;
+        margin-bottom: 20px;
+      }
+
+      /* Mobile podium - keep the same structure */
+      .podium-container {
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .podium-card {
+        padding: 15px 20px;
+        gap: 15px;
+      }
+
+      .rank-display {
+        min-width: 50px;
+      }
+
+      .rank-number {
+        font-size: 1.6rem;
+      }
+
+      .medal {
+        font-size: 1.3rem;
+      }
+
+      .participant-name {
+        font-size: 1.1rem;
+      }
+
+      .score-number {
+        font-size: 1.6rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .navbar-logo {
+        height: 28px;
+        max-width: 80px;
+      }
+      
+      .navbar-title {
+        font-size: 1.2rem;
+      }
+
+      .podium-section {
+        padding: 15px 10px;
+      }
+
+      .podium-card {
+        padding: 12px 15px;
+        gap: 12px;
+      }
+
+      .rank-display {
+        min-width: 45px;
+      }
+
+      .rank-number {
+        font-size: 1.4rem;
+      }
+
+      .medal {
+        font-size: 1.2rem;
+      }
+
+      .participant-name {
+        font-size: 1rem;
+      }
+
+      .score-number {
+        font-size: 1.4rem;
+      }
+
+      .rank-suffix {
+        font-size: 0.65rem;
+      }
+    }
+
+    /* Auto-refresh indicator for TV */
+    .tv-refresh-indicator {
+      position: fixed;
+      top: 100px; /* Adjusted for consistent navbar */
+      right: 20px;
+      background: rgba(40, 167, 69, 0.9);
+      color: white;
+      padding: 5px 10px;
+      border-radius: 15px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      z-index: 1000;
+    }
+
+    .tv-refresh-indicator.show {
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-brand">
+      <div class="navbar-title">🏆 Tournament Results</div>
+    </div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">← Dashboard</a>
+      <a href="/tournament/draft" class="nav-btn">📋 Draft</a>
+      <a href="/results/calculator" class="nav-btn primary">🎯 Calculator</a>
+      <button class="nav-btn" onclick="window.print()">🖨️ Print</button>
+    </div>
+  </div>
+
+  <div class="tv-container">
+    <!-- Left Column -->
+    <div class="left-column">
+      <!-- Header Section -->
+      <div class="results-header">
+        <img src="/static/logo.png" alt="Logo" class="header-logo" onerror="this.style.display='none'" />
+        <div class="results-title">Tournament Results</div>
+        <div class="results-subtitle">Final Rankings & Scores</div>
+        <div class="results-meta">
+          <div class="meta-item">
+            <span class="meta-number">{{ participants|length }}</span>
+            <span class="meta-label">Participants</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">{{ (participants|length * 40) if participants else 0 }}</span>
+            <span class="meta-label">Total Shots</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-number">{% if participants and participants|length > 0 %}{{ participants[0].total_score }}{% else %}0{% endif %}</span>
+            <span class="meta-label">Highest Score</span>
+          </div>
+        </div>
+      </div>
+
+      {% if participants and participants|length >= 3 %}
+      <!-- Podium Section -->
+      <div class="podium-section">
+        <div class="podium-title">🏆 Top 3 Winners</div>
+        <div class="podium-container">
+          {% for i in range(3) %}
+            {% set participant = participants[i] %}
+            <div class="podium-card rank-{{ participant.rank }}">
+              <div class="rank-display">
+                <div class="rank-number">{{ participant.rank }}</div>
+                <div class="rank-suffix">
+                  {% if participant.rank == 1 %}st
+                  {% elif participant.rank == 2 %}nd
+                  {% elif participant.rank == 3 %}rd
+                  {% else %}th
+                  {% endif %}
+                </div>
+                <div class="medal">
+                  {% if participant.rank == 1 %}🥇
+                  {% elif participant.rank == 2 %}🥈
+                  {% elif participant.rank == 3 %}🥉
+                  {% endif %}
+                </div>
+              </div>
+              
+              <div class="participant-info">
+                <div class="participant-name">{{ participant.name }}</div>
+                <div class="participant-id">ID: {{ participant.id }}</div>
+              </div>
+              
+              <div class="score-display">
+                <div class="score-number">{{ participant.total_score }}</div>
+                <div class="score-label">Points</div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Right Column -->
+    <div class="right-column">
+      <div class="table-header">
+        <h3 class="table-title">📊 Complete Rankings</h3>
+      </div>
+      
+      <div class="table-container">
+        <table class="results-table">
+          <thead>
+            <tr>
+              <th>Rank</th>
+              <th>Participant</th>
+              <th>ID</th>
+              <th>Score</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for participant in participants %}
+            <tr>
+              <td class="rank-cell rank-{{ participant.rank if participant.rank <= 3 else 'other' }}">
+                {{ participant.rank }}
+                {% if participant.rank == 1 %}🥇
+                {% elif participant.rank == 2 %}🥈
+                {% elif participant.rank == 3 %}🥉
+                {% endif %}
+              </td>
+              <td class="name-cell">{{ participant.name }}</td>
+              <td><span class="id-cell">{{ participant.id }}</span></td>
+              <td class="score-cell">{{ participant.total_score }}</td>
+              <td class="status-cell">
+                <span class="status-badge status-{{ 'completed' if participant.completed else 'incomplete' }}">
+                  ✓
+                </span>
+              </td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+
+      <div class="stats-footer">
+        <div class="stat-item">
+          <div class="stat-value">{{ participants|length if participants else 0 }}</div>
+          <div>Participants</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{% if participants and participants|length > 0 %}{{ participants[0].total_score }}{% else %}0{% endif %}</div>
+          <div>Highest Score</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{% if participants %}{{ "%.0f"|format(participants|map(attribute='total_score')|sum / participants|length) }}{% else %}0{% endif %}</div>
+          <div>Average Score</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">{{ results.created_at[:10] if results and results.created_at else 'Today' }}</div>
+          <div>Tournament Date</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const participants = {{ participants|tojson }};
+    const results = {{ results|tojson }};
+
+    // TV-optimized auto-refresh
+    function setupTVRefresh() {
+      setInterval(() => {
+        if (document.visibilityState === 'visible') {
+          // Show refresh indicator
+          const indicator = document.getElementById('tvRefreshIndicator');
+          indicator.textContent = '🔄 Updating...';
+          indicator.classList.add('show');
+          
+          setTimeout(() => {
+            window.location.reload();
+          }, 1500);
+        }
+      }, 30000); // 30 seconds for TV display
+    }
+
+    // Subtle winner highlight for TV
+    function showTVWinnerHighlight() {
+      if (participants && participants.length > 0) {
+        setTimeout(() => {
+          const firstPlace = document.querySelector('.podium-card.rank-1');
+          if (firstPlace) {
+            firstPlace.style.boxShadow = '0 4px 15px rgba(255, 215, 0, 0.4)';
+            
+            setTimeout(() => {
+              firstPlace.style.boxShadow = '';
+            }, 3000);
+          }
+        }, 1000);
+      }
+    }
+
+    // Keyboard shortcuts for TV operation
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'r' || event.key === 'R') {
+        event.preventDefault();
+        window.location.reload();
+      } else if (event.key === 'p' || event.key === 'P') {
+        event.preventDefault();
+        window.print();
+      }
+    });
+
+    // Initialize TV mode
+    document.addEventListener('DOMContentLoaded', function() {
+      setupTVRefresh();
+      showTVWinnerHighlight();
+      
+      // Show TV mode indicator
+      setTimeout(() => {
+        const indicator = document.getElementById('tvRefreshIndicator');
+        indicator.classList.add('show');
+        
+        setTimeout(() => {
+          indicator.classList.remove('show');
+        }, 4000);
+      }, 1000);
+
+      // Log TV mode
+      console.log(`🏆 ${participants ? participants.length : 0} participants displayed`);
+    });
+
+    // Handle screen size changes
+    window.addEventListener('resize', function() {
+      // Force recalculation of layout
+      document.body.style.display = 'none';
+      document.body.offsetHeight; // Trigger reflow
+      document.body.style.display = '';
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/templates/tournament.html b/TV_APP_V2/templates/tournament.html
new file mode 100644
index 0000000..4fc5b9d
--- /dev/null
+++ b/TV_APP_V2/templates/tournament.html
@@ -0,0 +1,1565 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Tournament Management</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #f5f5f5;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+    }
+
+    .navbar {
+      background: white;
+      color: black;
+      padding: 15px 25px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 2px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .navbar-title {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .navbar-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .nav-btn {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      cursor: pointer;
+      padding: 12px 20px;
+      border-radius: 8px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      color: #333;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+
+    .nav-btn:hover {
+      background: #e9ecef;
+      border-color: #007bff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      transform: translateY(-1px);
+      color: #007bff;
+    }
+
+    .nav-btn.primary {
+      background: #007bff;
+      border-color: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.primary:hover {
+      background: #0056b3;
+      color: white;
+    }
+
+    .nav-btn.success {
+      background: #28a745;
+      border-color: #1e7e34;
+      color: white;
+    }
+
+    .nav-btn.success:hover {
+      background: #1e7e34;
+      color: white;
+    }
+
+    .nav-btn.danger {
+      background: #dc3545;
+      border-color: #c82333;
+      color: white;
+    }
+
+    .nav-btn.danger:hover {
+      background: #c82333;
+      color: white;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 30px 20px;
+    }
+
+    .section {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      padding: 25px;
+      margin-bottom: 30px;
+    }
+
+    .section-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 20px;
+      border-bottom: 3px solid #007bff;
+      padding-bottom: 8px;
+    }
+
+    /* League Status */
+    .league-status {
+      text-align: center;
+      padding: 30px;
+    }
+
+    .league-active {
+      color: #28a745;
+      font-size: 1.4rem;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+
+    .league-inactive {
+      color: #6c757d;
+      font-size: 1.2rem;
+      margin-bottom: 20px;
+    }
+
+    .league-info {
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      padding: 20px;
+      margin: 20px 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 15px;
+    }
+
+    .info-item {
+      background: white;
+      padding: 15px;
+      border-radius: 6px;
+      border: 1px solid #e9ecef;
+      text-align: center;
+    }
+
+    .info-label {
+      font-size: 0.9rem;
+      color: #666;
+      margin-bottom: 5px;
+    }
+
+    .info-value {
+      font-size: 1.3rem;
+      font-weight: bold;
+      color: #333;
+    }
+
+    /* Tournament Type Selection */
+    .tournament-type-selection {
+      background: #f8f9fa;
+      border: 2px solid #e9ecef;
+      border-radius: 8px;
+      padding: 20px;
+      margin: 20px 0;
+    }
+
+    .type-title {
+      font-size: 1.1rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 15px;
+    }
+
+    .type-options {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
+    }
+
+    .type-option {
+      background: white;
+      border: 2px solid #dee2e6;
+      border-radius: 8px;
+      padding: 20px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-align: center;
+    }
+
+    .type-option:hover {
+      border-color: #007bff;
+      box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
+    }
+
+    .type-option.selected {
+      border-color: #007bff;
+      background: #f0f8ff;
+    }
+
+    .type-option input[type="radio"] {
+      margin-right: 10px;
+      width: 18px;
+      height: 18px;
+    }
+
+    .type-name {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .type-description {
+      font-size: 0.9rem;
+      color: #666;
+      line-height: 1.4;
+    }
+
+    /* Joker Management */
+    .joker-section {
+      background: #fff3cd;
+      border: 2px solid #ffeaa7;
+      border-radius: 8px;
+      padding: 20px;
+      margin: 20px 0;
+    }
+
+    .joker-title {
+      font-size: 1.1rem;
+      font-weight: bold;
+      color: #856404;
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .joker-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+    }
+
+    .joker-player {
+      background: white;
+      border: 1px solid #dee2e6;
+      border-radius: 6px;
+      padding: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .joker-player.used {
+      opacity: 0.6;
+      background: #f8f9fa;
+    }
+
+    .joker-checkbox {
+      width: 18px;
+      height: 18px;
+    }
+
+    .joker-checkbox:disabled {
+      cursor: not-allowed;
+    }
+
+    /* Action Buttons */
+    .action-buttons {
+      display: flex;
+      gap: 15px;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: 20px 0;
+    }
+
+    .action-btn {
+      background: #007bff;
+      border: none;
+      color: white;
+      padding: 15px 30px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 1.1rem;
+      font-weight: bold;
+      transition: all 0.2s ease;
+      min-width: 200px;
+      text-decoration: none;
+    }
+
+    .action-btn:hover {
+      background: #0056b3;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+    }
+
+    .action-btn:disabled {
+      background: #6c757d;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+    }
+
+    .action-btn.success {
+      background: #28a745;
+    }
+
+    .action-btn.success:hover {
+      background: #1e7e34;
+    }
+
+    .action-btn.danger {
+      background: #dc3545;
+    }
+
+    .action-btn.danger:hover {
+      background: #c82333;
+    }
+
+    .player-count {
+      margin: 20px 0;
+      font-size: 1.2rem;
+      color: #333;
+      text-align: center;
+    }
+
+    .enabled-count {
+      color: #28a745;
+      font-weight: bold;
+      font-size: 1.4rem;
+    }
+
+    .warning {
+      background: #fff3cd;
+      border: 1px solid #ffeaa7;
+      color: #856404;
+      padding: 12px 16px;
+      border-radius: 6px;
+      margin: 15px 0;
+      font-weight: 500;
+    }
+
+    /* Tournament Status */
+    .tournament-status {
+      text-align: center;
+      padding: 30px;
+    }
+
+    .tournament-active {
+      color: #28a745;
+      font-size: 1.4rem;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+
+    .tournament-inactive {
+      color: #6c757d;
+      font-size: 1.2rem;
+      margin-bottom: 20px;
+    }
+
+    .tournament-info {
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      padding: 20px;
+      margin: 20px 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+    }
+
+    /* Add Player Form */
+    .add-player-form {
+      display: flex;
+      gap: 15px;
+      align-items: center;
+      padding: 20px;
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      margin-bottom: 25px;
+    }
+
+    .add-player-form input {
+      flex: 1;
+      padding: 12px 15px;
+      border: 1px solid #ced4da;
+      border-radius: 6px;
+      font-size: 1rem;
+      transition: border-color 0.2s ease;
+    }
+
+    .add-player-form input:focus {
+      outline: none;
+      border-color: #007bff;
+    }
+
+    .add-btn {
+      background: #28a745;
+      border: none;
+      color: white;
+      padding: 12px 20px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 1rem;
+      transition: background-color 0.2s ease;
+      white-space: nowrap;
+    }
+
+    .add-btn:hover {
+      background: #218838;
+    }
+
+    .add-btn:disabled {
+      background: #6c757d;
+      cursor: not-allowed;
+    }
+
+    .uncheck-all-btn {
+      background: #dc3545;
+      border: none;
+      color: white;
+      padding: 12px 20px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 1rem;
+      transition: background-color 0.2s ease;
+      white-space: nowrap;
+    }
+
+    .uncheck-all-btn:hover {
+      background: #c82333;
+    }
+
+    .uncheck-all-btn:disabled {
+      background: #6c757d;
+      cursor: not-allowed;
+    }
+
+    /* Player Cards */
+    .player-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      gap: 20px;
+      margin-top: 20px;
+    }
+
+    .player-card {
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      border: 1px solid #dee2e6;
+      transition: box-shadow 0.2s ease;
+      position: relative;
+    }
+
+    .player-card.competing {
+      border-color: #28a745;
+      background: #f8fff9;
+    }
+
+    .player-card.not-competing {
+      border-color: #dc3545;
+      background: #fff5f5;
+      opacity: 0.8;
+    }
+
+    .player-card:hover {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .player-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 15px;
+    }
+
+    .player-id-badge {
+      background: #007bff;
+      color: white;
+      padding: 6px 12px;
+      border-radius: 15px;
+      font-size: 0.9rem;
+      font-weight: bold;
+      min-width: 40px;
+      text-align: center;
+    }
+
+    .player-status {
+      font-size: 0.9rem;
+      font-weight: bold;
+      padding: 4px 10px;
+      border-radius: 12px;
+    }
+
+    .status-competing {
+      background: #d4edda;
+      color: #155724;
+    }
+
+    .status-not-competing {
+      background: #f8d7da;
+      color: #721c24;
+    }
+
+    .player-name-section {
+      margin: 15px 0;
+    }
+
+    .player-name {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .player-name input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid #ced4da;
+      border-radius: 6px;
+      font-size: 1.1rem;
+      font-weight: 600;
+      background: white;
+      transition: border-color 0.2s ease;
+    }
+
+    .player-name input:focus {
+      outline: none;
+      border-color: #007bff;
+    }
+
+    .player-controls {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 15px;
+      margin-top: 20px;
+      padding-top: 15px;
+      border-top: 1px solid #e9ecef;
+    }
+
+    .competing-toggle {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+      padding: 5px 10px;
+      border-radius: 6px;
+      transition: background-color 0.2s ease;
+    }
+
+    .competing-toggle:hover {
+      background: #f8f9fa;
+    }
+
+    .toggle-checkbox {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: #28a745;
+    }
+
+    .toggle-label {
+      font-weight: 500;
+      color: #333;
+      cursor: pointer;
+    }
+
+    .card-buttons {
+      display: flex;
+      gap: 8px;
+    }
+
+    .edit-btn {
+      background: #ffc107;
+      border: none;
+      color: white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      font-weight: 500;
+      transition: background-color 0.2s ease;
+    }
+
+    .edit-btn:hover {
+      background: #e0a800;
+    }
+
+    .delete-btn {
+      background: #dc3545;
+      border: none;
+      color: white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      font-weight: 500;
+      transition: background-color 0.2s ease;
+    }
+
+    .delete-btn:hover {
+      background: #c82333;
+    }
+
+    /* Confirmation Modal */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.2s ease;
+    }
+
+    .modal-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .confirmation-modal {
+      background: white;
+      border-radius: 8px;
+      padding: 25px;
+      max-width: 500px;
+      width: 90%;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      transform: scale(0.9);
+      transition: transform 0.2s ease;
+    }
+
+    .modal-overlay.active .confirmation-modal {
+      transform: scale(1);
+    }
+
+    .modal-title {
+      font-size: 1.2rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 12px;
+    }
+
+    .modal-message {
+      color: #666;
+      margin-bottom: 20px;
+      line-height: 1.4;
+    }
+
+    .modal-buttons {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+    }
+
+    .modal-btn {
+      padding: 8px 16px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+      transition: background-color 0.2s ease;
+    }
+
+    .modal-btn.cancel {
+      background: #6c757d;
+      color: white;
+    }
+
+    .modal-btn.cancel:hover {
+      background: #5a6268;
+    }
+
+    .modal-btn.confirm {
+      background: #dc3545;
+      color: white;
+    }
+
+    .modal-btn.confirm:hover {
+      background: #c82333;
+    }
+
+    /* Mobile responsive */
+    @media (max-width: 768px) {
+      .navbar {
+        padding: 12px 20px;
+        flex-direction: column;
+        gap: 15px;
+      }
+
+      .navbar-controls {
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .container {
+        padding: 20px 15px;
+      }
+
+      .player-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .add-player-form {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+      }
+
+      .tournament-info, .league-info {
+        grid-template-columns: 1fr;
+      }
+
+      .type-options {
+        grid-template-columns: 1fr;
+      }
+
+      .action-buttons {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .action-btn {
+        min-width: 250px;
+      }
+
+      .player-controls {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+      }
+
+      .card-buttons {
+        justify-content: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-title">🏆 Tournament Management</div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">← Dashboard</a>
+      {% if league_state and not league_state.league_finished %}
+        <a href="/results/calculator" class="nav-btn primary">🎯 Results Calculator</a>
+        <button class="nav-btn danger" onclick="resetLeague()">🗑️ Reset League</button>
+      {% elif tournament_state %}
+        <a href="/tournament/draft" class="nav-btn">📋 View Draft</a>
+        <a href="/results/calculator" class="nav-btn primary">🎯 Results Calculator</a>
+        <button class="nav-btn danger" onclick="resetTournament()">🗑️ Reset Tournament</button>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="container">
+    <!-- League Status Section -->
+<!-- League or Tournament Management Section -->
+<div class="section">
+  {% if league_state and not league_state.league_finished %}
+    <h2 class="section-title">🏆 League Management</h2>
+    <div class="league-status">
+      <div class="league-active">🏆 League Active</div>
+      <div class="league-info">
+        <div class="info-item">
+          <div class="info-label">Tournament Type</div>
+          <div class="info-value">
+            {% if league_state.tournament_type == '40_targets' %}
+              40 Targets
+            {% else %}
+              20 Targets
+            {% endif %}
+          </div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Current Tournament</div>
+          <div class="info-value">{{ league_state.current_tournament }} / {{ league_state.total_tournaments }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Participants</div>
+          <div class="info-value">{{ league_state.participants|length }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Completed</div>
+          <div class="info-value">{{ league_state.completed_tournaments|length }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Created</div>
+          <div class="info-value">{{ league_state.created_at[:10] }}</div>
+        </div>
+      </div>
+
+      {% if tournament_state %}
+      {% else %}
+        {% if league_state.current_tournament < league_state.total_tournaments %}
+          <!-- Joker selection -->
+          <div class="joker-section" id="jokerSection">
+            <div class="joker-title">🃏 Joker Selection for Tournament {{ league_state.current_tournament + 1 }}</div>
+            <p style="margin-bottom: 15px; color: #856404;">Select players who will use their joker (skip this tournament). Each player can only use their joker once per league.</p>
+
+            <div class="joker-grid">
+              {% for player_id, participant in league_state.participants.items() %}
+                <div class="joker-player {% if participant.joker_used %}used{% endif %}">
+                  <span>{{ participant.name }}</span>
+                  <input type="checkbox"
+                        class="joker-checkbox"
+                        id="joker_{{ player_id }}"
+                        {% if participant.joker_used %}disabled{% endif %}
+                        data-player-id="{{ player_id }}">
+                </div>
+              {% endfor %}
+            </div>
+          </div>
+
+          <div class="action-buttons">
+            <button class="action-btn success" onclick="startNextTournament()">
+              🚀 Start Tournament {{ league_state.current_tournament + 1 }}
+            </button>
+          </div>
+        {% else %}
+          <div class="warning">
+            <strong>League Complete!</strong> All tournaments scheduled. Finish current one to see final results.
+          </div>
+        {% endif %}
+      {% endif %}
+    </div>
+
+  {% elif league_state and league_state.league_finished %}
+    <h2 class="section-title">🏁 League Completed</h2>
+    <div class="league-status">
+      <div class="league-active">🏆 League Completed!</div>
+      <div class="league-info">
+        <div class="info-item">
+          <div class="info-label">Tournament Type</div>
+          <div class="info-value">{{ league_state.tournament_type == '40_targets' and '40 Targets' or '20 Targets' }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Participants</div>
+          <div class="info-value">{{ league_state.participants|length }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Tournaments</div>
+          <div class="info-value">{{ league_state.total_tournaments }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Finished</div>
+          <div class="info-value">{{ league_state.finished_at[:10] if league_state.finished_at else 'Today' }}</div>
+        </div>
+      </div>
+
+      <div class="action-buttons">
+        <a href="/results" class="action-btn success">🏆 View League Results</a>
+        <button class="action-btn danger" onclick="resetLeague()">🗑️ Reset League</button>
+      </div>
+    </div>
+
+  {% elif not league_state and tournament_state %}
+    <h2 class="section-title">🎯 Single Tournament Management</h2>
+    <div class="tournament-status">
+      <div class="tournament-active">🎯 Tournament Active</div>
+      <div class="league-info">
+        <div class="info-item">
+          <div class="info-label">Tournament Type</div>
+          <div class="info-value">{{ tournament_state.tournament_type == '40_targets' and '40 Targets' or '20 Targets' }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Players</div>
+          <div class="info-value">{{ tournament_state.total_players }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Rounds</div>
+          <div class="info-value">{{ tournament_state.total_rounds }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Current Round</div>
+          <div class="info-value">{{ tournament_state.current_round }}</div>
+        </div>
+        <div class="info-item">
+          <div class="info-label">Created</div>
+          <div class="info-value">{{ tournament_state.created_at[:10] if tournament_state.created_at else 'Today' }}</div>
+        </div>
+      </div>
+
+      <div class="action-buttons">
+        <a href="/tournament/draft" class="action-btn">📋 View Draft</a>
+        <a href="/results/calculator" class="action-btn success">🎯 Score Tournament</a>
+        <a href="/" class="action-btn">📺 Dashboard</a>
+        <button class="action-btn danger" onclick="resetTournament()">🗑️ Reset Tournament</button>
+      </div>
+    </div>
+
+  {% else %}
+    <h2 class="section-title">🏁 Setup</h2>
+    <div class="league-inactive">No Active League or Tournament</div>
+
+    <!-- Tournament Type Selection -->
+    <div class="tournament-type-selection">
+      <div class="type-title">🎯 Select Tournament Type</div>
+      <div class="type-options">
+        <div class="type-option selected" onclick="selectTournamentType('20_targets')">
+          <input type="radio" name="tournament_type" value="20_targets" checked>
+          <div class="type-name">20 Targets</div>
+          <div class="type-description">Standard format with 20 targets, 2 shots each (40 shots total)</div>
+        </div>
+        <div class="type-option" onclick="selectTournamentType('40_targets')">
+          <input type="radio" name="tournament_type" value="40_targets">
+          <div class="type-name">40 Targets</div>
+          <div class="type-description">Extended format with 40 targets, 2 shots each (80 shots total)</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="player-count">
+      <span class="enabled-count" id="enabledCount">0</span> players enabled
+    </div>
+
+    <div class="action-buttons">
+      <button class="action-btn success" id="startLeagueBtn" onclick="startLeague()">🏆 Start League (6 Tournaments)</button>
+      <button class="action-btn" id="startSingleBtn" onclick="startSingleTournament()">🎯 Start Single Tournament</button>
+    </div>
+
+    <div class="warning" id="warningMessage" style="display: none;">
+      <strong>Note:</strong> You need at least 1 enabled player to start.
+    </div>
+  {% endif %}
+</div>
+
+
+    <!-- Current Tournament Status (if active) -->
+    {% if tournament_state and league_state %}
+    <div class="section">
+      <h2 class="section-title">📋 Current Tournament</h2>
+      
+      <div class="tournament-status">
+        <div class="tournament-active">🎯 Tournament Active</div>
+        <div class="tournament-info">
+          <div class="info-item">
+            <div class="info-label">Tournament Type</div>
+            <div class="info-value">
+              {% if tournament_state.tournament_type == '40_targets' %}
+                40 Targets
+              {% else %}
+                20 Targets
+              {% endif %}
+            </div>
+          </div>
+          <div class="info-item">
+            <div class="info-label">Total Players</div>
+            <div class="info-value">{{ tournament_state.total_players }}</div>
+          </div>
+          <div class="info-item">
+            <div class="info-label">Total Rounds</div>
+            <div class="info-value">{{ tournament_state.total_rounds }}</div>
+          </div>
+          <div class="info-item">
+            <div class="info-label">Current Round</div>
+            <div class="info-value">{{ tournament_state.current_round }}</div>
+          </div>
+          {% if league_state %}
+          <div class="info-item">
+            <div class="info-label">League Tournament</div>
+            <div class="info-value">{{ tournament_state.league_tournament_number or 'N/A' }}</div>
+          </div>
+          {% endif %}
+        </div>
+        
+        <div class="action-buttons">
+          <a href="/tournament/draft" class="action-btn">📋 View Draft</a>
+          <a href="/results/calculator" class="action-btn success">🎯 Score Tournament</a>
+          <a href="/" class="action-btn">📺 Dashboard</a>
+          <button class="action-btn danger" onclick="resetTournament()">🗑️ Reset Tournament</button>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+
+    <!-- Player Management Section -->
+     {% if not league_state and not tournament_state %}
+    <div class="section">
+      <h2 class="section-title">👥 Player Management</h2>
+      
+      <!-- Add Player Form -->
+      <div class="add-player-form">
+        <input type="text" 
+               id="newPlayerName" 
+               placeholder="Enter player name..." 
+               maxlength="50"
+               onkeypress="handleAddPlayerKeypress(event)">
+        <button class="add-btn" id="addPlayerBtn" onclick="addPlayer()">
+          ➕ Add Player
+        </button>
+        <button class="uncheck-all-btn" onclick="uncheckAllPlayers()">
+          ❌ Uncheck All
+        </button>
+      </div>
+
+      <!-- Player Grid -->
+      <div class="player-grid" id="playerGrid">
+        <!-- Players will be loaded here -->
+      </div>
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- Confirmation Modal -->
+  <div class="modal-overlay" id="confirmationModal">
+    <div class="confirmation-modal">
+      <div class="modal-title" id="modalTitle">Confirm Action</div>
+      <div class="modal-message" id="modalMessage">Are you sure you want to proceed?</div>
+      <div class="modal-buttons">
+        <button class="modal-btn cancel" onclick="closeModal()">Cancel</button>
+        <button class="modal-btn confirm" id="confirmBtn" onclick="confirmAction()">Confirm</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let players = {{ players|tojson }};
+    const leagueActive = {{ 'true' if league_state and not league_state.league_finished else 'false' }};
+    const tournamentActive = {{ 'true' if tournament_state else 'false' }};
+    let pendingAction = null;
+    let editingPlayer = null;
+    let selectedTournamentType = '20_targets';
+
+    // Tournament type selection
+    function selectTournamentType(type) {
+      selectedTournamentType = type;
+      
+      // Update UI
+      document.querySelectorAll('.type-option').forEach(option => {
+        option.classList.remove('selected');
+      });
+      
+      event.currentTarget.classList.add('selected');
+      
+      // Update radio button
+      const radio = event.currentTarget.querySelector('input[type="radio"]');
+      if (radio) radio.checked = true;
+    }
+
+    // Render players grid
+    function renderPlayerGrid() {
+      const playerGrid = document.getElementById('playerGrid');
+      playerGrid.innerHTML = '';
+
+      const enabledCount = players.filter(p => p.enabled).length;
+      document.getElementById('enabledCount').textContent = enabledCount;
+
+      // Update button states
+      const startLeagueBtn = document.getElementById('startLeagueBtn');
+      const startSingleBtn = document.getElementById('startSingleBtn');
+      const warningMsg = document.getElementById('warningMessage');
+      
+      if (startLeagueBtn && startSingleBtn && warningMsg) {
+        if (enabledCount < 1) {
+          startLeagueBtn.disabled = true;
+          startSingleBtn.disabled = true;
+          warningMsg.style.display = 'block';
+        } else {
+          startLeagueBtn.disabled = false;
+          startSingleBtn.disabled = false;
+          warningMsg.style.display = 'none';
+        }
+      }
+
+      players.forEach(player => {
+        const card = document.createElement('div');
+        card.className = `player-card ${player.enabled ? 'competing' : 'not-competing'}`;
+        
+        card.innerHTML = `
+          <div class="player-header">
+            <div class="player-id-badge">#${player.id}</div>
+            <div class="player-status ${player.enabled ? 'status-competing' : 'status-not-competing'}">
+              ${player.enabled ? '✓ Competing' : '✗ Not Competing'}
+            </div>
+          </div>
+          
+          <div class="player-name-section">
+            <div class="player-name" id="playerName${player.id}">
+              ${player.name}
+            </div>
+          </div>
+          
+          <div class="player-controls">
+            <div class="competing-toggle" onclick="togglePlayer(${player.id})">
+              <input type="checkbox" class="toggle-checkbox" ${player.enabled ? 'checked' : ''} onchange="togglePlayer(${player.id})">
+              <span class="toggle-label">Competing</span>
+            </div>
+            
+            <div class="card-buttons">
+              <button class="edit-btn" onclick="editPlayer(${player.id})" title="Edit Player Name">
+                ✏️ Edit
+              </button>
+              <button class="delete-btn" onclick="confirmDeletePlayer(${player.id})" title="Delete Player">
+                🗑️ Delete
+              </button>
+            </div>
+          </div>
+        `;
+        
+        playerGrid.appendChild(card);
+      });
+    }
+
+    // Add new player
+    async function addPlayer() {
+      const nameInput = document.getElementById('newPlayerName');
+      const name = nameInput.value.trim();
+      
+      if (!name) {
+        alert('Please enter a player name');
+        return;
+      }
+
+      const addBtn = document.getElementById('addPlayerBtn');
+      addBtn.disabled = true;
+      addBtn.textContent = 'Adding...';
+
+      try {
+        const response = await fetch('/api/players/add', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ name: name })
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          players.push(result.player);
+          nameInput.value = '';
+          renderPlayerGrid();
+        } else {
+          const error = await response.json();
+          alert('Failed to add player: ' + error.message);
+        }
+      } catch (error) {
+        console.error('Error adding player:', error);
+        alert('Error adding player. Please try again.');
+      } finally {
+        addBtn.disabled = false;
+        addBtn.textContent = '➕ Add Player';
+      }
+    }
+
+    // Handle Enter key in add player input
+    function handleAddPlayerKeypress(event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        addPlayer();
+      }
+    }
+
+    // Edit player name
+    function editPlayer(playerId) {
+      const player = players.find(p => p.id === playerId);
+      if (!player) return;
+
+      const nameElement = document.getElementById(`playerName${playerId}`);
+      if (editingPlayer === playerId) {
+        // Save changes
+        const input = nameElement.querySelector('input');
+        if (input) {
+          const newName = input.value.trim();
+          if (newName && newName !== player.name) {
+            updatePlayerName(playerId, newName);
+          } else {
+            editingPlayer = null;
+            renderPlayerGrid();
+          }
+        }
+      } else {
+        // Start editing
+        editingPlayer = playerId;
+        nameElement.innerHTML = `
+          <input type="text" value="${player.name}" maxlength="50" 
+                 onblur="savePlayerName(${playerId})" 
+                 onkeypress="handleEditKeypress(event, ${playerId})"
+                 autofocus>
+        `;
+      }
+    }
+
+    function savePlayerName(playerId) {
+      editPlayer(playerId);
+    }
+
+    function handleEditKeypress(event, playerId) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        editPlayer(playerId);
+      } else if (event.key === 'Escape') {
+        editingPlayer = null;
+        renderPlayerGrid();
+      }
+    }
+
+    // Update player name
+    async function updatePlayerName(playerId, newName) {
+      try {
+        const response = await fetch(`/api/players/${playerId}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ name: newName.trim() })
+        });
+
+        if (response.ok) {
+          // Update local player data
+          const player = players.find(p => p.id === playerId);
+          if (player) {
+            player.name = newName.trim();
+          }
+          editingPlayer = null;
+          renderPlayerGrid();
+        } else {
+          alert('Failed to update player name');
+          editingPlayer = null;
+          renderPlayerGrid();
+        }
+      } catch (error) {
+        console.error('Error updating player:', error);
+        editingPlayer = null;
+        renderPlayerGrid();
+      }
+    }
+
+    // Toggle player enabled/disabled
+    async function togglePlayer(playerId) {
+      const player = players.find(p => p.id === playerId);
+      if (!player) return;
+
+      const newEnabled = !player.enabled;
+
+      try {
+        const response = await fetch(`/api/players/${playerId}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ enabled: newEnabled })
+        });
+
+        if (response.ok) {
+          player.enabled = newEnabled;
+          renderPlayerGrid();
+        } else {
+          alert('Failed to update player status');
+        }
+      } catch (error) {
+        console.error('Error toggling player:', error);
+        alert('Error updating player. Please try again.');
+      }
+    }
+
+    // Uncheck all players
+    async function uncheckAllPlayers() {
+      const competingPlayers = players.filter(p => p.enabled);
+      
+      if (competingPlayers.length === 0) {
+        alert('No players are currently competing');
+        return;
+      }
+
+      if (!confirm(`Are you sure you want to uncheck all ${competingPlayers.length} competing players?`)) {
+        return;
+      }
+
+      try {
+        // Update each player that is currently enabled
+        for (const player of competingPlayers) {
+          const response = await fetch(`/api/players/${player.id}`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ enabled: false })
+          });
+
+          if (response.ok) {
+            player.enabled = false;
+          }
+        }
+        
+        renderPlayerGrid();
+      } catch (error) {
+        console.error('Error unchecking players:', error);
+        alert('Error unchecking players. Please try again.');
+      }
+    }
+
+    // Confirm delete player
+    function confirmDeletePlayer(playerId) {
+      const player = players.find(p => p.id === playerId);
+      if (!player) return;
+
+      showModal(
+        'Delete Player',
+        `Are you sure you want to permanently delete "${player.name}"? This action cannot be undone.`,
+        () => deletePlayer(playerId)
+      );
+    }
+
+    // Delete player
+    async function deletePlayer(playerId) {
+      try {
+        const response = await fetch(`/api/players/${playerId}/delete`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
+
+        if (response.ok) {
+          players = players.filter(p => p.id !== playerId);
+          renderPlayerGrid();
+          closeModal();
+        } else {
+          alert('Failed to delete player');
+        }
+      } catch (error) {
+        console.error('Error deleting player:', error);
+        alert('Error deleting player. Please try again.');
+      }
+    }
+
+    // Start league
+    async function startLeague() {
+      const enabledPlayers = players.filter(p => p.enabled);
+      
+      if (enabledPlayers.length < 1) {
+        alert('Need at least 1 enabled player to start league');
+        return;
+      }
+
+      if (!confirm(`Start league with ${enabledPlayers.length} players using ${selectedTournamentType === '40_targets' ? '40' : '20'} targets format?`)) {
+        return;
+      }
+
+      const startBtn = document.getElementById('startLeagueBtn');
+      startBtn.disabled = true;
+      startBtn.textContent = 'Starting League...';
+
+      try {
+        const response = await fetch('/api/league/start', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ tournament_type: selectedTournamentType })
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          alert('League started successfully!');
+          window.location.reload();
+        } else {
+          const error = await response.json();
+          alert('Failed to start league: ' + error.message);
+        }
+      } catch (error) {
+        console.error('Error starting league:', error);
+        alert('Error starting league. Please try again.');
+      } finally {
+        startBtn.disabled = false;
+        startBtn.textContent = '🏆 Start League (6 Tournaments)';
+      }
+    }
+
+    // Start single tournament
+    async function startSingleTournament() {
+      const enabledPlayers = players.filter(p => p.enabled);
+      
+      if (enabledPlayers.length < 1) {
+        alert('Need at least 1 enabled player to start tournament');
+        return;
+      }
+
+      if (!confirm(`Start single tournament with ${enabledPlayers.length} players using ${selectedTournamentType === '40_targets' ? '40' : '20'} targets format?`)) {
+        return;
+      }
+
+      const startBtn = document.getElementById('startSingleBtn');
+      startBtn.disabled = true;
+      startBtn.textContent = 'Starting...';
+
+      try {
+        const response = await fetch('/api/tournament/start', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ tournament_type: selectedTournamentType })
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          alert('Tournament started successfully!');
+          window.location.reload();
+        } else {
+          const error = await response.json();
+          alert('Failed to start tournament: ' + error.message);
+        }
+      } catch (error) {
+        console.error('Error starting tournament:', error);
+        alert('Error starting tournament. Please try again.');
+      } finally {
+        startBtn.disabled = false;
+        startBtn.textContent = '🎯 Start Single Tournament';
+      }
+    }
+
+    // Start next tournament in league
+    async function startNextTournament() {
+      // Get selected joker players
+      const jokerCheckboxes = document.querySelectorAll('.joker-checkbox:checked:not(:disabled)');
+      const jokerPlayers = Array.from(jokerCheckboxes).map(cb => parseInt(cb.dataset.playerId));
+      
+      if (!confirm(`Start next tournament? ${jokerPlayers.length} players will use their joker.`)) {
+        return;
+      }
+
+      try {
+        const response = await fetch('/api/league/tournament/start', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ joker_players: jokerPlayers })
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          alert('Tournament started successfully!');
+          window.location.reload();
+        } else {
+          const error = await response.json();
+          alert('Failed to start tournament: ' + error.message);
+        }
+      } catch (error) {
+        console.error('Error starting tournament:', error);
+        alert('Error starting tournament. Please try again.');
+      }
+    }
+
+    // Reset league
+    async function resetLeague() {
+      if (!confirm('Are you sure you want to reset the league? This will delete all league and tournament data.')) {
+        return;
+      }
+
+      try {
+        const response = await fetch('/api/league/reset', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
+
+        if (response.ok) {
+          alert('League reset successfully!');
+          window.location.reload();
+        } else {
+          alert('Failed to reset league');
+        }
+      } catch (error) {
+        console.error('Error resetting league:', error);
+        alert('Error resetting league. Please try again.');
+      }
+    }
+
+    // Reset tournament
+    async function resetTournament() {
+      if (!confirm('Are you sure you want to reset the tournament? This will delete tournament data.')) {
+        return;
+      }
+
+      try {
+        const response = await fetch('/api/tournament/reset', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
+
+        if (response.ok) {
+          alert('Tournament reset successfully!');
+          window.location.reload();
+        } else {
+          alert('Failed to reset tournament');
+        }
+      } catch (error) {
+        console.error('Error resetting tournament:', error);
+        alert('Error resetting tournament. Please try again.');
+      }
+    }
+
+    // Modal functions
+    function showModal(title, message, confirmCallback) {
+      document.getElementById('modalTitle').textContent = title;
+      document.getElementById('modalMessage').textContent = message;
+      pendingAction = confirmCallback;
+      document.getElementById('confirmationModal').classList.add('active');
+    }
+
+    function closeModal() {
+      document.getElementById('confirmationModal').classList.remove('active');
+      pendingAction = null;
+    }
+
+    function confirmAction() {
+      if (pendingAction) {
+        pendingAction();
+      }
+    }
+
+    // Click outside modal to close
+    document.getElementById('confirmationModal').addEventListener('click', function(e) {
+      if (e.target === this) {
+        closeModal();
+      }
+    });
+
+    // Initialize page
+    document.addEventListener('DOMContentLoaded', function() {
+      renderPlayerGrid();
+      
+      // Focus on add player input if no active league/tournament
+      const nameInput = document.getElementById('newPlayerName');
+      if (nameInput && !leagueActive && !tournamentActive) {
+        nameInput.focus();
+      }
+      
+      console.log('🏆 Tournament Management loaded');
+      console.log('League active:', leagueActive);
+      console.log('Tournament active:', tournamentActive);
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/TV_APP_V2/tournament_results.json b/TV_APP_V2/tournament_results.json
new file mode 100644
index 0000000..63e99e4
--- /dev/null
+++ b/TV_APP_V2/tournament_results.json
@@ -0,0 +1,357 @@
+{
+  "tournament_id": "2025-07-29T20:39:47.326034",
+  "tournament_type": "20_targets",
+  "participants": {
+    "4": {
+      "name": "Mateja Pleterski",
+      "targets": {
+        "1": {
+          "shot1": 0,
+          "shot2": 6
+        },
+        "2": {
+          "shot1": 7,
+          "shot2": 0
+        },
+        "3": {
+          "shot1": 3,
+          "shot2": 1
+        },
+        "4": {
+          "shot1": 1,
+          "shot2": 0
+        },
+        "5": {
+          "shot1": 10,
+          "shot2": 2
+        },
+        "6": {
+          "shot1": 10,
+          "shot2": 5
+        },
+        "7": {
+          "shot1": 2,
+          "shot2": 2
+        },
+        "8": {
+          "shot1": 7,
+          "shot2": 10
+        },
+        "9": {
+          "shot1": 1,
+          "shot2": 5
+        },
+        "10": {
+          "shot1": 5,
+          "shot2": 10
+        },
+        "11": {
+          "shot1": 1,
+          "shot2": 1
+        },
+        "12": {
+          "shot1": 2,
+          "shot2": 7
+        },
+        "13": {
+          "shot1": 7,
+          "shot2": 4
+        },
+        "14": {
+          "shot1": 9,
+          "shot2": 5
+        },
+        "15": {
+          "shot1": 0,
+          "shot2": 10
+        },
+        "16": {
+          "shot1": 8,
+          "shot2": 8
+        },
+        "17": {
+          "shot1": 2,
+          "shot2": 8
+        },
+        "18": {
+          "shot1": 10,
+          "shot2": 8
+        },
+        "19": {
+          "shot1": 6,
+          "shot2": 6
+        },
+        "20": {
+          "shot1": 4,
+          "shot2": 6
+        }
+      },
+      "total_score": 199,
+      "completed": true
+    },
+    "2": {
+      "name": "Nik Pleterski",
+      "targets": {
+        "1": {
+          "shot1": 2,
+          "shot2": 5
+        },
+        "2": {
+          "shot1": 3,
+          "shot2": 7
+        },
+        "3": {
+          "shot1": 7,
+          "shot2": 7
+        },
+        "4": {
+          "shot1": 7,
+          "shot2": 2
+        },
+        "5": {
+          "shot1": 2,
+          "shot2": 4
+        },
+        "6": {
+          "shot1": 2,
+          "shot2": 6
+        },
+        "7": {
+          "shot1": 0,
+          "shot2": 5
+        },
+        "8": {
+          "shot1": 5,
+          "shot2": 4
+        },
+        "9": {
+          "shot1": 9,
+          "shot2": 7
+        },
+        "10": {
+          "shot1": 5,
+          "shot2": 8
+        },
+        "11": {
+          "shot1": 5,
+          "shot2": 8
+        },
+        "12": {
+          "shot1": 5,
+          "shot2": 4
+        },
+        "13": {
+          "shot1": 4,
+          "shot2": 7
+        },
+        "14": {
+          "shot1": 1,
+          "shot2": 10
+        },
+        "15": {
+          "shot1": 5,
+          "shot2": 3
+        },
+        "16": {
+          "shot1": 8,
+          "shot2": 5
+        },
+        "17": {
+          "shot1": 4,
+          "shot2": 9
+        },
+        "18": {
+          "shot1": 3,
+          "shot2": 1
+        },
+        "19": {
+          "shot1": 10,
+          "shot2": 10
+        },
+        "20": {
+          "shot1": 7,
+          "shot2": 0
+        }
+      },
+      "total_score": 206,
+      "completed": true
+    },
+    "1": {
+      "name": "Domen Pleterski",
+      "targets": {
+        "1": {
+          "shot1": 6,
+          "shot2": 1
+        },
+        "2": {
+          "shot1": 6,
+          "shot2": 5
+        },
+        "3": {
+          "shot1": 7,
+          "shot2": 5
+        },
+        "4": {
+          "shot1": 7,
+          "shot2": 8
+        },
+        "5": {
+          "shot1": 10,
+          "shot2": 6
+        },
+        "6": {
+          "shot1": 7,
+          "shot2": 0
+        },
+        "7": {
+          "shot1": 1,
+          "shot2": 8
+        },
+        "8": {
+          "shot1": 3,
+          "shot2": 1
+        },
+        "9": {
+          "shot1": 6,
+          "shot2": 8
+        },
+        "10": {
+          "shot1": 3,
+          "shot2": 6
+        },
+        "11": {
+          "shot1": 1,
+          "shot2": 8
+        },
+        "12": {
+          "shot1": 0,
+          "shot2": 2
+        },
+        "13": {
+          "shot1": 1,
+          "shot2": 8
+        },
+        "14": {
+          "shot1": 5,
+          "shot2": 4
+        },
+        "15": {
+          "shot1": 1,
+          "shot2": 3
+        },
+        "16": {
+          "shot1": 1,
+          "shot2": 10
+        },
+        "17": {
+          "shot1": 0,
+          "shot2": 6
+        },
+        "18": {
+          "shot1": 6,
+          "shot2": 5
+        },
+        "19": {
+          "shot1": 8,
+          "shot2": 6
+        },
+        "20": {
+          "shot1": 4,
+          "shot2": 3
+        }
+      },
+      "total_score": 186,
+      "completed": true
+    },
+    "3": {
+      "name": "Ivan Tandler",
+      "targets": {
+        "1": {
+          "shot1": 5,
+          "shot2": 8
+        },
+        "2": {
+          "shot1": 9,
+          "shot2": 3
+        },
+        "3": {
+          "shot1": 3,
+          "shot2": 1
+        },
+        "4": {
+          "shot1": 4,
+          "shot2": 8
+        },
+        "5": {
+          "shot1": 3,
+          "shot2": 1
+        },
+        "6": {
+          "shot1": 9,
+          "shot2": 5
+        },
+        "7": {
+          "shot1": 8,
+          "shot2": 0
+        },
+        "8": {
+          "shot1": 0,
+          "shot2": 2
+        },
+        "9": {
+          "shot1": 10,
+          "shot2": 6
+        },
+        "10": {
+          "shot1": 1,
+          "shot2": 3
+        },
+        "11": {
+          "shot1": 8,
+          "shot2": 3
+        },
+        "12": {
+          "shot1": 8,
+          "shot2": 8
+        },
+        "13": {
+          "shot1": 6,
+          "shot2": 3
+        },
+        "14": {
+          "shot1": 10,
+          "shot2": 2
+        },
+        "15": {
+          "shot1": 10,
+          "shot2": 2
+        },
+        "16": {
+          "shot1": 9,
+          "shot2": 2
+        },
+        "17": {
+          "shot1": 9,
+          "shot2": 4
+        },
+        "18": {
+          "shot1": 2,
+          "shot2": 10
+        },
+        "19": {
+          "shot1": 5,
+          "shot2": 9
+        },
+        "20": {
+          "shot1": 9,
+          "shot2": 5
+        }
+      },
+      "total_score": 213,
+      "completed": true
+    }
+  },
+  "tournament_finished": true,
+  "created_at": "2025-07-29T20:39:47.326244",
+  "finished_at": "2025-07-29T20:39:58.449723"
+}
\ No newline at end of file