remove fullscreen feature and nicely cleanup all CSS

app.py

@@ -1,5 +1,5 @@
 """
-TV_APP V1.0.1 - Tournament and League Management System
+TV_APP V1.0.2 - Tournament and League Management System
 Flask web application for managing tournaments with multi-camera streaming
 """
 
@@ -87,8 +87,8 @@ def archive_league(league_data):
 def create_league(enabled_players, tournament_type):
     return Tournament.create_league(enabled_players, tournament_type)
 
-def create_draft(enabled_players, tournament_type='20_targets', league_tournament_number=None):
+def create_draft(enabled_players, tournament_type='20_targets', league_tournament_number=None, active_slots=None):
-    return Tournament.create_draft(enabled_players, tournament_type, league_tournament_number)
+    return Tournament.create_draft(enabled_players, tournament_type, league_tournament_number, active_slots)
 
 def create_results_structure(tournament_data):
     return Tournament.create_results_structure(tournament_data)
@@ -826,14 +826,18 @@ def index():
     if current_round_data:
         tournament_titles = {}
         players = current_round_data['players']
-        
+        disabled_cameras = settings.get('disabled_cameras', [])
-        for i in range(6):  # Always 6 positions
+        current_language = get_current_language()
-            if i < len(players):
+        player_idx = 0
-                tournament_titles[str(i + 1)] = players[i]['name']
+        for i in range(6):
+            cam_id = str(i + 1)
+            if i + 1 in disabled_cameras:
+                tournament_titles[cam_id] = 'Prazno' if current_language == 'sl' else 'Empty'
+            elif player_idx < len(players):
+                tournament_titles[cam_id] = players[player_idx]['name']
+                player_idx += 1
             else:
-                # Use "Prazno" for Slovenian, "Empty" for English
+                tournament_titles[cam_id] = 'Prazno' if current_language == 'sl' else 'Empty'
-                current_language = get_current_language()
-                tournament_titles[str(i + 1)] = 'Prazno' if current_language == 'sl' else 'Empty'
         
         # Create a copy of settings with tournament titles
         display_settings = settings.copy()
@@ -1071,9 +1075,11 @@ def tournament_draft():
     if not tournament_state:
         return redirect('/tournament')
     
+    settings = load_settings()
     return render_template('draft.html',
                          tournament=tournament_state,
-                         league=league_state)
+                         league=league_state,
+                         disabled_cameras=settings.get('disabled_cameras', []))
 
 @app.route('/results/calculator')
 def results_calculator():
@@ -1097,6 +1103,13 @@ def results_calculator():
                          translations=get_translations(),
                          current_language=get_current_language())
 
+@app.route('/calculator')
+def standalone_calculator():
+    """Standalone calculator — no tournament required"""
+    return render_template('calculator.html',
+                         translations=get_translations(),
+                         current_language=get_current_language())
+
 @app.route('/results')
 def results_display():
     """Results display page"""
@@ -1244,6 +1257,9 @@ def update_settings():
         if 'display_options' in new_settings:
             current_settings['display_options'].update(new_settings['display_options'])
 
+        if 'disabled_cameras' in new_settings:
+            current_settings['disabled_cameras'] = new_settings['disabled_cameras']
+
         # Save updated settings
         if save_settings(current_settings):
             return jsonify({'status': 'success', 'settings': current_settings})
@@ -1414,10 +1430,14 @@ def start_league_tournament():
         
         # Start next tournament
         league_state['current_tournament'] = current_tournament + 1
+        settings = load_settings()
+        disabled = settings.get('disabled_cameras', [])
+        active_slots = [i for i in range(1, 7) if i not in disabled]
         tournament_data = create_draft(
             participating_players,
             league_state['tournament_type'],
-            league_state['current_tournament']
+            league_state['current_tournament'],
+            active_slots
         )
         
         # Save states
@@ -1474,7 +1494,10 @@ def start_tournament():
         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)
+        settings = load_settings()
+        disabled = settings.get('disabled_cameras', [])
+        active_slots = [i for i in range(1, 7) if i not in disabled]
+        tournament_data = create_draft(enabled_players, tournament_type, active_slots=active_slots)
 
         if save_tournament_state(tournament_data):
             # Create results structure when tournament starts
@@ -1996,13 +2019,19 @@ def get_camera_titles():
         titles = {}
         
         if current_round_data:
-            # Tournament active - use player names
+            # Tournament active - use player names, skip disabled cameras
             players = current_round_data['players']
+            disabled_cameras = settings.get('disabled_cameras', [])
+            player_idx = 0
             for i in range(6):
-                if i < len(players):
+                cam_id = str(i + 1)
-                    titles[str(i + 1)] = players[i]['name']
+                if i + 1 in disabled_cameras:
+                    titles[cam_id] = 'Empty'
+                elif player_idx < len(players):
+                    titles[cam_id] = players[player_idx]['name']
+                    player_idx += 1
                 else:
-                    titles[str(i + 1)] = 'Empty'
+                    titles[cam_id] = 'Empty'
         else:
             # No tournament - use configured titles
             titles = settings['camera_titles']
@@ -2540,5 +2569,50 @@ def set_language(language):
             'message': f'Unsupported language: {language}'
         }), 400
 
+# ── Calculator leaderboard & display settings ────────────────────────────────
+
+CALC_LEADERBOARD_FILE = os.path.join('data', 'calculator_leaderboard.json')
+
+@app.route('/api/calculator/leaderboard', methods=['GET'])
+def get_calculator_leaderboard():
+    try:
+        if os.path.exists(CALC_LEADERBOARD_FILE):
+            with open(CALC_LEADERBOARD_FILE, 'r', encoding='utf-8') as f:
+                return jsonify(json.load(f))
+        return jsonify([])
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+@app.route('/api/calculator/leaderboard', methods=['POST'])
+def save_calculator_leaderboard():
+    try:
+        data = request.get_json()
+        os.makedirs('data', exist_ok=True)
+        with open(CALC_LEADERBOARD_FILE, 'w', encoding='utf-8') as f:
+            json.dump(data, f, indent=2, ensure_ascii=False)
+        return jsonify({'status': 'success'})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+@app.route('/api/calculator/display', methods=['GET'])
+def get_calculator_display():
+    try:
+        settings = load_settings()
+        return jsonify(settings.get('calc_display', {'enabled': False, 'camera': 1}))
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+@app.route('/api/calculator/display', methods=['POST'])
+def save_calculator_display():
+    try:
+        data = request.get_json()
+        settings = load_settings()
+        settings['calc_display'] = {'enabled': bool(data.get('enabled')), 'camera': int(data.get('camera', 1))}
+        save_settings(settings)
+        return jsonify({'status': 'success'})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': str(e)}), 500
+
+
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=4000, debug=True)
+    app.run(host='0.0.0.0', port=5000, debug=True)

app/models.py

@@ -42,19 +42,22 @@ class Tournament:
         return league_data
 
     @staticmethod
-    def create_draft(enabled_players, tournament_type='20_targets', league_tournament_number=None):
+    def create_draft(enabled_players, tournament_type='20_targets', league_tournament_number=None, active_slots=None):
-        """Create draft groups of 6 players and organize rounds"""
+        """Create draft groups organized by shooting positions and organize rounds"""
         if len(enabled_players) < 1:
             return None
 
+        slots = sorted(active_slots) if active_slots else list(range(1, NUM_CAMERAS + 1))
+        positions = len(slots)
+
         # Shuffle players for random grouping
         players_copy = enabled_players.copy()
         random.shuffle(players_copy)
 
-        # Create groups of up to 6
+        # Create groups of up to positions
         groups = []
-        for i in range(0, len(players_copy), NUM_CAMERAS):
+        for i in range(0, len(players_copy), positions):
-            group = players_copy[i:i + NUM_CAMERAS]
+            group = players_copy[i:i + positions]
             groups.append(group)
 
         # Create rounds
@@ -72,7 +75,8 @@ class Tournament:
             'total_players': len(enabled_players),
             'total_rounds': len(rounds),
             'current_round': 1,
-            'tournament_type': tournament_type
+            'tournament_type': tournament_type,
+            'active_slots': slots
         }
 
         if league_tournament_number:

app/storage.py

@@ -34,6 +34,11 @@ DEFAULT_SETTINGS = {
     'display_options': {
         'show_titles': True,
         'title_size': 1.1
+    },
+    'disabled_cameras': [],
+    'calc_display': {
+        'enabled': False,
+        'camera': 1
     }
 }
 

data/calculator_leaderboard.json

@@ -0,0 +1 @@
+[]

data/camera_settings.json

@@ -12,5 +12,10 @@
     "title_size": 1.4,
     "target_number_size": 1.7
   },
-  "tv_view": "cameras"
+  "tv_view": "cameras",
+  "disabled_cameras": [],
+  "calc_display": {
+    "enabled": false,
+    "camera": 4
+  }
 }

data/players.json

@@ -3,32 +3,32 @@
     {
       "id": 1,
       "name": "Domen Pleterski",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 2,
       "name": "Nik Pleterski",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 3,
       "name": "Ivan Tandler",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 4,
       "name": "Mateja Pleterski",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 5,
       "name": "Jože Verhnjak",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 6,
       "name": "Mateja Senica",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 7,
@@ -38,27 +38,27 @@
     {
       "id": 8,
       "name": "Franc Žigart",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 9,
       "name": "Janez Božič",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 10,
       "name": "Mitja Čeh",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 11,
       "name": "Rado Kefer",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 12,
       "name": "Matej Kvasnik",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 13,
@@ -68,57 +68,57 @@
     {
       "id": 14,
       "name": "Karli Proje",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 15,
       "name": "Jan Pleterski",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 16,
       "name": "Silvo Poročnik",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 17,
       "name": "Dušan Onuk",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 18,
       "name": "Matjaž Pleterski",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 19,
       "name": "Franc Rizmal",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 20,
       "name": "Jože Preglav",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 21,
       "name": "Marko Blimen",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 22,
       "name": "Doris Fesel",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 23,
       "name": "Robi Krautberger",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 24,
       "name": "Jože Verdinek",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 25,
@@ -128,12 +128,12 @@
     {
       "id": 26,
       "name": "Jakob Herman",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 27,
       "name": "Janez Mrak",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 28,
@@ -148,12 +148,12 @@
     {
       "id": 30,
       "name": "Maja Hirtl",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 31,
       "name": "Dejan Kučnik",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 32,
@@ -163,27 +163,27 @@
     {
       "id": 33,
       "name": "Namir Uzunović",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 34,
       "name": "Jože Planinšec",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 35,
       "name": "Vanja Kolar",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 36,
       "name": "Klara Wankmuller",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 37,
       "name": "Milan Stramec",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 38,
@@ -193,27 +193,27 @@
     {
       "id": 39,
       "name": "Tia Sudar",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 40,
       "name": "Jaka Cvar",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 41,
       "name": "Tadej Štruc",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 42,
       "name": "Jure Glaser",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 43,
       "name": "Marko Pokržnik",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 44,
@@ -223,37 +223,37 @@
     {
       "id": 45,
       "name": "Lidija Blimen",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 46,
       "name": "Tijana Štumpfl",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 47,
       "name": "Ljuba Mršak",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 48,
       "name": "Janja Salcman",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 49,
       "name": "Jolanda Verhnjak",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 50,
       "name": "Vid Ravnjak",
-      "enabled": false
+      "enabled": true
     },
     {
       "id": 51,
       "name": "Robi Ovčar",
-      "enabled": false
+      "enabled": true
     }
   ]
 }

data/tournament_archives/tournament_20260419_145131.json

@@ -0,0 +1,777 @@
+{
+  "tournament": {
+    "rounds": [
+      {
+        "round_number": 1,
+        "players": [
+          {
+            "id": 29,
+            "name": "Alen Kolar",
+            "enabled": true
+          },
+          {
+            "id": 32,
+            "name": "David Strniša",
+            "enabled": true
+          },
+          {
+            "id": 44,
+            "name": "Anka Kačnik",
+            "enabled": true
+          },
+          {
+            "id": 38,
+            "name": "Bojan Sudar",
+            "enabled": true
+          },
+          {
+            "id": 25,
+            "name": "Andrej Herman",
+            "enabled": true
+          },
+          {
+            "id": 28,
+            "name": "Anže Kolar",
+            "enabled": true
+          }
+        ],
+        "status": "pending"
+      },
+      {
+        "round_number": 2,
+        "players": [
+          {
+            "id": 13,
+            "name": "Angelca Mrak",
+            "enabled": true
+          },
+          {
+            "id": 7,
+            "name": "Branko Pokeržnik",
+            "enabled": true
+          }
+        ],
+        "status": "waiting"
+      }
+    ],
+    "created_at": "2026-04-19T14:50:47.646818",
+    "total_players": 8,
+    "total_rounds": 2,
+    "current_round": 1,
+    "tournament_type": "20_targets"
+  },
+  "results": {
+    "tournament_id": "2026-04-19T14:50:47.646818",
+    "tournament_type": "20_targets",
+    "participants": {
+      "29": {
+        "name": "Alen Kolar",
+        "targets": {
+          "1": {
+            "shot1": 5,
+            "shot2": 3
+          },
+          "2": {
+            "shot1": 6,
+            "shot2": 3
+          },
+          "3": {
+            "shot1": 9,
+            "shot2": 2
+          },
+          "4": {
+            "shot1": 10,
+            "shot2": 10
+          },
+          "5": {
+            "shot1": 10,
+            "shot2": 0
+          },
+          "6": {
+            "shot1": 8,
+            "shot2": 4
+          },
+          "7": {
+            "shot1": 4,
+            "shot2": 9
+          },
+          "8": {
+            "shot1": 2,
+            "shot2": 10
+          },
+          "9": {
+            "shot1": 4,
+            "shot2": 4
+          },
+          "10": {
+            "shot1": 9,
+            "shot2": 3
+          },
+          "11": {
+            "shot1": 7,
+            "shot2": 6
+          },
+          "12": {
+            "shot1": 3,
+            "shot2": 4
+          },
+          "13": {
+            "shot1": 5,
+            "shot2": 2
+          },
+          "14": {
+            "shot1": 10,
+            "shot2": 2
+          },
+          "15": {
+            "shot1": 10,
+            "shot2": 1
+          },
+          "16": {
+            "shot1": 8,
+            "shot2": 2
+          },
+          "17": {
+            "shot1": 3,
+            "shot2": 2
+          },
+          "18": {
+            "shot1": 0,
+            "shot2": 2
+          },
+          "19": {
+            "shot1": 10,
+            "shot2": 3
+          },
+          "20": {
+            "shot1": 9,
+            "shot2": 0
+          }
+        },
+        "total_score": 204,
+        "completed": true,
+        "joker_selected": false
+      },
+      "32": {
+        "name": "David Strniša",
+        "targets": {
+          "1": {
+            "shot1": 1,
+            "shot2": 3
+          },
+          "2": {
+            "shot1": 4,
+            "shot2": 6
+          },
+          "3": {
+            "shot1": 7,
+            "shot2": 8
+          },
+          "4": {
+            "shot1": 10,
+            "shot2": 5
+          },
+          "5": {
+            "shot1": 2,
+            "shot2": 1
+          },
+          "6": {
+            "shot1": 9,
+            "shot2": 6
+          },
+          "7": {
+            "shot1": 9,
+            "shot2": 2
+          },
+          "8": {
+            "shot1": 2,
+            "shot2": 10
+          },
+          "9": {
+            "shot1": 1,
+            "shot2": 7
+          },
+          "10": {
+            "shot1": 6,
+            "shot2": 1
+          },
+          "11": {
+            "shot1": 4,
+            "shot2": 10
+          },
+          "12": {
+            "shot1": 1,
+            "shot2": 7
+          },
+          "13": {
+            "shot1": 4,
+            "shot2": 0
+          },
+          "14": {
+            "shot1": 10,
+            "shot2": 3
+          },
+          "15": {
+            "shot1": 0,
+            "shot2": 7
+          },
+          "16": {
+            "shot1": 2,
+            "shot2": 10
+          },
+          "17": {
+            "shot1": 5,
+            "shot2": 10
+          },
+          "18": {
+            "shot1": 2,
+            "shot2": 7
+          },
+          "19": {
+            "shot1": 4,
+            "shot2": 0
+          },
+          "20": {
+            "shot1": 10,
+            "shot2": 0
+          }
+        },
+        "total_score": 196,
+        "completed": true,
+        "joker_selected": false
+      },
+      "44": {
+        "name": "Anka Kačnik",
+        "targets": {
+          "1": {
+            "shot1": 8,
+            "shot2": 3
+          },
+          "2": {
+            "shot1": 2,
+            "shot2": 10
+          },
+          "3": {
+            "shot1": 10,
+            "shot2": 9
+          },
+          "4": {
+            "shot1": 9,
+            "shot2": 8
+          },
+          "5": {
+            "shot1": 1,
+            "shot2": 5
+          },
+          "6": {
+            "shot1": 3,
+            "shot2": 1
+          },
+          "7": {
+            "shot1": 5,
+            "shot2": 9
+          },
+          "8": {
+            "shot1": 7,
+            "shot2": 1
+          },
+          "9": {
+            "shot1": 9,
+            "shot2": 7
+          },
+          "10": {
+            "shot1": 4,
+            "shot2": 0
+          },
+          "11": {
+            "shot1": 6,
+            "shot2": 5
+          },
+          "12": {
+            "shot1": 5,
+            "shot2": 6
+          },
+          "13": {
+            "shot1": 1,
+            "shot2": 8
+          },
+          "14": {
+            "shot1": 2,
+            "shot2": 1
+          },
+          "15": {
+            "shot1": 5,
+            "shot2": 8
+          },
+          "16": {
+            "shot1": 10,
+            "shot2": 5
+          },
+          "17": {
+            "shot1": 3,
+            "shot2": 1
+          },
+          "18": {
+            "shot1": 1,
+            "shot2": 8
+          },
+          "19": {
+            "shot1": 5,
+            "shot2": 8
+          },
+          "20": {
+            "shot1": 6,
+            "shot2": 8
+          }
+        },
+        "total_score": 213,
+        "completed": true,
+        "joker_selected": false
+      },
+      "38": {
+        "name": "Bojan Sudar",
+        "targets": {
+          "1": {
+            "shot1": 10,
+            "shot2": 4
+          },
+          "2": {
+            "shot1": 6,
+            "shot2": 5
+          },
+          "3": {
+            "shot1": 10,
+            "shot2": 9
+          },
+          "4": {
+            "shot1": 9,
+            "shot2": 7
+          },
+          "5": {
+            "shot1": 0,
+            "shot2": 8
+          },
+          "6": {
+            "shot1": 2,
+            "shot2": 6
+          },
+          "7": {
+            "shot1": 0,
+            "shot2": 2
+          },
+          "8": {
+            "shot1": 1,
+            "shot2": 2
+          },
+          "9": {
+            "shot1": 0,
+            "shot2": 7
+          },
+          "10": {
+            "shot1": 7,
+            "shot2": 9
+          },
+          "11": {
+            "shot1": 3,
+            "shot2": 9
+          },
+          "12": {
+            "shot1": 7,
+            "shot2": 8
+          },
+          "13": {
+            "shot1": 8,
+            "shot2": 10
+          },
+          "14": {
+            "shot1": 9,
+            "shot2": 1
+          },
+          "15": {
+            "shot1": 5,
+            "shot2": 5
+          },
+          "16": {
+            "shot1": 1,
+            "shot2": 5
+          },
+          "17": {
+            "shot1": 5,
+            "shot2": 4
+          },
+          "18": {
+            "shot1": 8,
+            "shot2": 9
+          },
+          "19": {
+            "shot1": 0,
+            "shot2": 4
+          },
+          "20": {
+            "shot1": 1,
+            "shot2": 6
+          }
+        },
+        "total_score": 212,
+        "completed": true,
+        "joker_selected": false
+      },
+      "25": {
+        "name": "Andrej Herman",
+        "targets": {
+          "1": {
+            "shot1": 8,
+            "shot2": 3
+          },
+          "2": {
+            "shot1": 9,
+            "shot2": 6
+          },
+          "3": {
+            "shot1": 7,
+            "shot2": 9
+          },
+          "4": {
+            "shot1": 2,
+            "shot2": 2
+          },
+          "5": {
+            "shot1": 10,
+            "shot2": 0
+          },
+          "6": {
+            "shot1": 8,
+            "shot2": 7
+          },
+          "7": {
+            "shot1": 10,
+            "shot2": 4
+          },
+          "8": {
+            "shot1": 9,
+            "shot2": 6
+          },
+          "9": {
+            "shot1": 4,
+            "shot2": 2
+          },
+          "10": {
+            "shot1": 2,
+            "shot2": 10
+          },
+          "11": {
+            "shot1": 7,
+            "shot2": 7
+          },
+          "12": {
+            "shot1": 0,
+            "shot2": 5
+          },
+          "13": {
+            "shot1": 4,
+            "shot2": 9
+          },
+          "14": {
+            "shot1": 6,
+            "shot2": 7
+          },
+          "15": {
+            "shot1": 1,
+            "shot2": 6
+          },
+          "16": {
+            "shot1": 5,
+            "shot2": 1
+          },
+          "17": {
+            "shot1": 4,
+            "shot2": 9
+          },
+          "18": {
+            "shot1": 2,
+            "shot2": 7
+          },
+          "19": {
+            "shot1": 6,
+            "shot2": 6
+          },
+          "20": {
+            "shot1": 1,
+            "shot2": 1
+          }
+        },
+        "total_score": 212,
+        "completed": true,
+        "joker_selected": false
+      },
+      "28": {
+        "name": "Anže Kolar",
+        "targets": {
+          "1": {
+            "shot1": 4,
+            "shot2": 10
+          },
+          "2": {
+            "shot1": 4,
+            "shot2": 0
+          },
+          "3": {
+            "shot1": 2,
+            "shot2": 0
+          },
+          "4": {
+            "shot1": 10,
+            "shot2": 8
+          },
+          "5": {
+            "shot1": 5,
+            "shot2": 0
+          },
+          "6": {
+            "shot1": 1,
+            "shot2": 0
+          },
+          "7": {
+            "shot1": 6,
+            "shot2": 1
+          },
+          "8": {
+            "shot1": 8,
+            "shot2": 3
+          },
+          "9": {
+            "shot1": 7,
+            "shot2": 9
+          },
+          "10": {
+            "shot1": 4,
+            "shot2": 2
+          },
+          "11": {
+            "shot1": 8,
+            "shot2": 7
+          },
+          "12": {
+            "shot1": 10,
+            "shot2": 1
+          },
+          "13": {
+            "shot1": 1,
+            "shot2": 10
+          },
+          "14": {
+            "shot1": 2,
+            "shot2": 3
+          },
+          "15": {
+            "shot1": 10,
+            "shot2": 6
+          },
+          "16": {
+            "shot1": 0,
+            "shot2": 7
+          },
+          "17": {
+            "shot1": 6,
+            "shot2": 1
+          },
+          "18": {
+            "shot1": 8,
+            "shot2": 10
+          },
+          "19": {
+            "shot1": 2,
+            "shot2": 0
+          },
+          "20": {
+            "shot1": 2,
+            "shot2": 8
+          }
+        },
+        "total_score": 186,
+        "completed": true,
+        "joker_selected": false
+      },
+      "13": {
+        "name": "Angelca Mrak",
+        "targets": {
+          "1": {
+            "shot1": 9,
+            "shot2": 5
+          },
+          "2": {
+            "shot1": 2,
+            "shot2": 3
+          },
+          "3": {
+            "shot1": 3,
+            "shot2": 0
+          },
+          "4": {
+            "shot1": 2,
+            "shot2": 1
+          },
+          "5": {
+            "shot1": 4,
+            "shot2": 1
+          },
+          "6": {
+            "shot1": 6,
+            "shot2": 8
+          },
+          "7": {
+            "shot1": 8,
+            "shot2": 9
+          },
+          "8": {
+            "shot1": 3,
+            "shot2": 4
+          },
+          "9": {
+            "shot1": 3,
+            "shot2": 1
+          },
+          "10": {
+            "shot1": 10,
+            "shot2": 9
+          },
+          "11": {
+            "shot1": 6,
+            "shot2": 10
+          },
+          "12": {
+            "shot1": 3,
+            "shot2": 10
+          },
+          "13": {
+            "shot1": 2,
+            "shot2": 5
+          },
+          "14": {
+            "shot1": 10,
+            "shot2": 5
+          },
+          "15": {
+            "shot1": 7,
+            "shot2": 2
+          },
+          "16": {
+            "shot1": 6,
+            "shot2": 7
+          },
+          "17": {
+            "shot1": 0,
+            "shot2": 6
+          },
+          "18": {
+            "shot1": 6,
+            "shot2": 0
+          },
+          "19": {
+            "shot1": 8,
+            "shot2": 6
+          },
+          "20": {
+            "shot1": 5,
+            "shot2": 2
+          }
+        },
+        "total_score": 197,
+        "completed": true,
+        "joker_selected": false
+      },
+      "7": {
+        "name": "Branko Pokeržnik",
+        "targets": {
+          "1": {
+            "shot1": 5,
+            "shot2": 0
+          },
+          "2": {
+            "shot1": 7,
+            "shot2": 0
+          },
+          "3": {
+            "shot1": 1,
+            "shot2": 9
+          },
+          "4": {
+            "shot1": 0,
+            "shot2": 4
+          },
+          "5": {
+            "shot1": 9,
+            "shot2": 2
+          },
+          "6": {
+            "shot1": 0,
+            "shot2": 8
+          },
+          "7": {
+            "shot1": 9,
+            "shot2": 8
+          },
+          "8": {
+            "shot1": 8,
+            "shot2": 10
+          },
+          "9": {
+            "shot1": 1,
+            "shot2": 4
+          },
+          "10": {
+            "shot1": 5,
+            "shot2": 1
+          },
+          "11": {
+            "shot1": 10,
+            "shot2": 9
+          },
+          "12": {
+            "shot1": 1,
+            "shot2": 7
+          },
+          "13": {
+            "shot1": 8,
+            "shot2": 10
+          },
+          "14": {
+            "shot1": 3,
+            "shot2": 1
+          },
+          "15": {
+            "shot1": 4,
+            "shot2": 4
+          },
+          "16": {
+            "shot1": 5,
+            "shot2": 3
+          },
+          "17": {
+            "shot1": 6,
+            "shot2": 3
+          },
+          "18": {
+            "shot1": 4,
+            "shot2": 4
+          },
+          "19": {
+            "shot1": 4,
+            "shot2": 9
+          },
+          "20": {
+            "shot1": 0,
+            "shot2": 9
+          }
+        },
+        "total_score": 195,
+        "completed": true,
+        "joker_selected": false
+      }
+    },
+    "tournament_finished": true,
+    "created_at": "2026-04-19T14:50:47.646988",
+    "finished_at": "2026-04-19T14:51:31.954362"
+  },
+  "archived_at": "2026-04-19T14:51:31.954403"
+}

data/tournament_archives/tournament_20260419_145241.json

@@ -0,0 +1,777 @@
+{
+  "tournament": {
+    "rounds": [
+      {
+        "round_number": 1,
+        "players": [
+          {
+            "id": 28,
+            "name": "Anže Kolar",
+            "enabled": true
+          },
+          {
+            "id": 32,
+            "name": "David Strniša",
+            "enabled": true
+          },
+          {
+            "id": 7,
+            "name": "Branko Pokeržnik",
+            "enabled": true
+          },
+          {
+            "id": 38,
+            "name": "Bojan Sudar",
+            "enabled": true
+          },
+          {
+            "id": 25,
+            "name": "Andrej Herman",
+            "enabled": true
+          },
+          {
+            "id": 13,
+            "name": "Angelca Mrak",
+            "enabled": true
+          }
+        ],
+        "status": "pending"
+      },
+      {
+        "round_number": 2,
+        "players": [
+          {
+            "id": 29,
+            "name": "Alen Kolar",
+            "enabled": true
+          },
+          {
+            "id": 44,
+            "name": "Anka Kačnik",
+            "enabled": true
+          }
+        ],
+        "status": "waiting"
+      }
+    ],
+    "created_at": "2026-04-19T14:52:03.834406",
+    "total_players": 8,
+    "total_rounds": 2,
+    "current_round": 1,
+    "tournament_type": "20_targets"
+  },
+  "results": {
+    "tournament_id": "2026-04-19T14:52:03.834406",
+    "tournament_type": "20_targets",
+    "participants": {
+      "28": {
+        "name": "Anže Kolar",
+        "targets": {
+          "1": {
+            "shot1": 4,
+            "shot2": 2
+          },
+          "2": {
+            "shot1": 9,
+            "shot2": 0
+          },
+          "3": {
+            "shot1": 0,
+            "shot2": 8
+          },
+          "4": {
+            "shot1": 10,
+            "shot2": 2
+          },
+          "5": {
+            "shot1": 4,
+            "shot2": 10
+          },
+          "6": {
+            "shot1": 10,
+            "shot2": 3
+          },
+          "7": {
+            "shot1": 9,
+            "shot2": 8
+          },
+          "8": {
+            "shot1": 6,
+            "shot2": 9
+          },
+          "9": {
+            "shot1": 2,
+            "shot2": 6
+          },
+          "10": {
+            "shot1": 2,
+            "shot2": 8
+          },
+          "11": {
+            "shot1": 3,
+            "shot2": 6
+          },
+          "12": {
+            "shot1": 7,
+            "shot2": 5
+          },
+          "13": {
+            "shot1": 6,
+            "shot2": 8
+          },
+          "14": {
+            "shot1": 5,
+            "shot2": 7
+          },
+          "15": {
+            "shot1": 4,
+            "shot2": 3
+          },
+          "16": {
+            "shot1": 10,
+            "shot2": 7
+          },
+          "17": {
+            "shot1": 1,
+            "shot2": 7
+          },
+          "18": {
+            "shot1": 5,
+            "shot2": 9
+          },
+          "19": {
+            "shot1": 7,
+            "shot2": 1
+          },
+          "20": {
+            "shot1": 2,
+            "shot2": 8
+          }
+        },
+        "total_score": 223,
+        "completed": true,
+        "joker_selected": false
+      },
+      "32": {
+        "name": "David Strniša",
+        "targets": {
+          "1": {
+            "shot1": 8,
+            "shot2": 1
+          },
+          "2": {
+            "shot1": 6,
+            "shot2": 10
+          },
+          "3": {
+            "shot1": 1,
+            "shot2": 5
+          },
+          "4": {
+            "shot1": 9,
+            "shot2": 7
+          },
+          "5": {
+            "shot1": 0,
+            "shot2": 8
+          },
+          "6": {
+            "shot1": 5,
+            "shot2": 8
+          },
+          "7": {
+            "shot1": 2,
+            "shot2": 3
+          },
+          "8": {
+            "shot1": 5,
+            "shot2": 10
+          },
+          "9": {
+            "shot1": 10,
+            "shot2": 9
+          },
+          "10": {
+            "shot1": 9,
+            "shot2": 7
+          },
+          "11": {
+            "shot1": 3,
+            "shot2": 2
+          },
+          "12": {
+            "shot1": 5,
+            "shot2": 6
+          },
+          "13": {
+            "shot1": 0,
+            "shot2": 2
+          },
+          "14": {
+            "shot1": 2,
+            "shot2": 1
+          },
+          "15": {
+            "shot1": 8,
+            "shot2": 8
+          },
+          "16": {
+            "shot1": 0,
+            "shot2": 2
+          },
+          "17": {
+            "shot1": 8,
+            "shot2": 6
+          },
+          "18": {
+            "shot1": 4,
+            "shot2": 0
+          },
+          "19": {
+            "shot1": 9,
+            "shot2": 1
+          },
+          "20": {
+            "shot1": 9,
+            "shot2": 2
+          }
+        },
+        "total_score": 201,
+        "completed": true,
+        "joker_selected": false
+      },
+      "7": {
+        "name": "Branko Pokeržnik",
+        "targets": {
+          "1": {
+            "shot1": 2,
+            "shot2": 2
+          },
+          "2": {
+            "shot1": 5,
+            "shot2": 4
+          },
+          "3": {
+            "shot1": 1,
+            "shot2": 9
+          },
+          "4": {
+            "shot1": 1,
+            "shot2": 1
+          },
+          "5": {
+            "shot1": 2,
+            "shot2": 4
+          },
+          "6": {
+            "shot1": 3,
+            "shot2": 8
+          },
+          "7": {
+            "shot1": 10,
+            "shot2": 6
+          },
+          "8": {
+            "shot1": 3,
+            "shot2": 9
+          },
+          "9": {
+            "shot1": 0,
+            "shot2": 7
+          },
+          "10": {
+            "shot1": 6,
+            "shot2": 6
+          },
+          "11": {
+            "shot1": 9,
+            "shot2": 0
+          },
+          "12": {
+            "shot1": 4,
+            "shot2": 7
+          },
+          "13": {
+            "shot1": 1,
+            "shot2": 5
+          },
+          "14": {
+            "shot1": 3,
+            "shot2": 6
+          },
+          "15": {
+            "shot1": 2,
+            "shot2": 3
+          },
+          "16": {
+            "shot1": 2,
+            "shot2": 8
+          },
+          "17": {
+            "shot1": 0,
+            "shot2": 3
+          },
+          "18": {
+            "shot1": 7,
+            "shot2": 5
+          },
+          "19": {
+            "shot1": 7,
+            "shot2": 1
+          },
+          "20": {
+            "shot1": 8,
+            "shot2": 8
+          }
+        },
+        "total_score": 178,
+        "completed": true,
+        "joker_selected": false
+      },
+      "38": {
+        "name": "Bojan Sudar",
+        "targets": {
+          "1": {
+            "shot1": 3,
+            "shot2": 1
+          },
+          "2": {
+            "shot1": 8,
+            "shot2": 5
+          },
+          "3": {
+            "shot1": 3,
+            "shot2": 0
+          },
+          "4": {
+            "shot1": 6,
+            "shot2": 5
+          },
+          "5": {
+            "shot1": 8,
+            "shot2": 10
+          },
+          "6": {
+            "shot1": 5,
+            "shot2": 5
+          },
+          "7": {
+            "shot1": 3,
+            "shot2": 2
+          },
+          "8": {
+            "shot1": 5,
+            "shot2": 1
+          },
+          "9": {
+            "shot1": 0,
+            "shot2": 0
+          },
+          "10": {
+            "shot1": 10,
+            "shot2": 5
+          },
+          "11": {
+            "shot1": 1,
+            "shot2": 10
+          },
+          "12": {
+            "shot1": 8,
+            "shot2": 0
+          },
+          "13": {
+            "shot1": 4,
+            "shot2": 0
+          },
+          "14": {
+            "shot1": 7,
+            "shot2": 10
+          },
+          "15": {
+            "shot1": 7,
+            "shot2": 5
+          },
+          "16": {
+            "shot1": 3,
+            "shot2": 5
+          },
+          "17": {
+            "shot1": 3,
+            "shot2": 4
+          },
+          "18": {
+            "shot1": 1,
+            "shot2": 10
+          },
+          "19": {
+            "shot1": 4,
+            "shot2": 9
+          },
+          "20": {
+            "shot1": 0,
+            "shot2": 10
+          }
+        },
+        "total_score": 186,
+        "completed": true,
+        "joker_selected": false
+      },
+      "25": {
+        "name": "Andrej Herman",
+        "targets": {
+          "1": {
+            "shot1": 2,
+            "shot2": 0
+          },
+          "2": {
+            "shot1": 1,
+            "shot2": 8
+          },
+          "3": {
+            "shot1": 2,
+            "shot2": 1
+          },
+          "4": {
+            "shot1": 9,
+            "shot2": 7
+          },
+          "5": {
+            "shot1": 4,
+            "shot2": 3
+          },
+          "6": {
+            "shot1": 7,
+            "shot2": 0
+          },
+          "7": {
+            "shot1": 2,
+            "shot2": 5
+          },
+          "8": {
+            "shot1": 1,
+            "shot2": 7
+          },
+          "9": {
+            "shot1": 8,
+            "shot2": 0
+          },
+          "10": {
+            "shot1": 8,
+            "shot2": 4
+          },
+          "11": {
+            "shot1": 10,
+            "shot2": 10
+          },
+          "12": {
+            "shot1": 2,
+            "shot2": 5
+          },
+          "13": {
+            "shot1": 5,
+            "shot2": 0
+          },
+          "14": {
+            "shot1": 10,
+            "shot2": 10
+          },
+          "15": {
+            "shot1": 0,
+            "shot2": 5
+          },
+          "16": {
+            "shot1": 10,
+            "shot2": 3
+          },
+          "17": {
+            "shot1": 4,
+            "shot2": 6
+          },
+          "18": {
+            "shot1": 2,
+            "shot2": 5
+          },
+          "19": {
+            "shot1": 2,
+            "shot2": 9
+          },
+          "20": {
+            "shot1": 6,
+            "shot2": 5
+          }
+        },
+        "total_score": 188,
+        "completed": true,
+        "joker_selected": false
+      },
+      "13": {
+        "name": "Angelca Mrak",
+        "targets": {
+          "1": {
+            "shot1": 4,
+            "shot2": 0
+          },
+          "2": {
+            "shot1": 4,
+            "shot2": 3
+          },
+          "3": {
+            "shot1": 10,
+            "shot2": 0
+          },
+          "4": {
+            "shot1": 8,
+            "shot2": 0
+          },
+          "5": {
+            "shot1": 2,
+            "shot2": 4
+          },
+          "6": {
+            "shot1": 5,
+            "shot2": 8
+          },
+          "7": {
+            "shot1": 9,
+            "shot2": 1
+          },
+          "8": {
+            "shot1": 7,
+            "shot2": 9
+          },
+          "9": {
+            "shot1": 7,
+            "shot2": 8
+          },
+          "10": {
+            "shot1": 5,
+            "shot2": 5
+          },
+          "11": {
+            "shot1": 0,
+            "shot2": 3
+          },
+          "12": {
+            "shot1": 1,
+            "shot2": 0
+          },
+          "13": {
+            "shot1": 7,
+            "shot2": 10
+          },
+          "14": {
+            "shot1": 8,
+            "shot2": 7
+          },
+          "15": {
+            "shot1": 8,
+            "shot2": 1
+          },
+          "16": {
+            "shot1": 7,
+            "shot2": 8
+          },
+          "17": {
+            "shot1": 10,
+            "shot2": 7
+          },
+          "18": {
+            "shot1": 8,
+            "shot2": 7
+          },
+          "19": {
+            "shot1": 1,
+            "shot2": 6
+          },
+          "20": {
+            "shot1": 7,
+            "shot2": 5
+          }
+        },
+        "total_score": 210,
+        "completed": true,
+        "joker_selected": false
+      },
+      "29": {
+        "name": "Alen Kolar",
+        "targets": {
+          "1": {
+            "shot1": 3,
+            "shot2": 0
+          },
+          "2": {
+            "shot1": 3,
+            "shot2": 5
+          },
+          "3": {
+            "shot1": 3,
+            "shot2": 5
+          },
+          "4": {
+            "shot1": 2,
+            "shot2": 6
+          },
+          "5": {
+            "shot1": 3,
+            "shot2": 0
+          },
+          "6": {
+            "shot1": 2,
+            "shot2": 9
+          },
+          "7": {
+            "shot1": 8,
+            "shot2": 8
+          },
+          "8": {
+            "shot1": 5,
+            "shot2": 0
+          },
+          "9": {
+            "shot1": 9,
+            "shot2": 8
+          },
+          "10": {
+            "shot1": 9,
+            "shot2": 7
+          },
+          "11": {
+            "shot1": 8,
+            "shot2": 5
+          },
+          "12": {
+            "shot1": 4,
+            "shot2": 2
+          },
+          "13": {
+            "shot1": 1,
+            "shot2": 5
+          },
+          "14": {
+            "shot1": 9,
+            "shot2": 0
+          },
+          "15": {
+            "shot1": 3,
+            "shot2": 7
+          },
+          "16": {
+            "shot1": 5,
+            "shot2": 10
+          },
+          "17": {
+            "shot1": 0,
+            "shot2": 2
+          },
+          "18": {
+            "shot1": 8,
+            "shot2": 5
+          },
+          "19": {
+            "shot1": 0,
+            "shot2": 9
+          },
+          "20": {
+            "shot1": 0,
+            "shot2": 10
+          }
+        },
+        "total_score": 188,
+        "completed": true,
+        "joker_selected": false
+      },
+      "44": {
+        "name": "Anka Kačnik",
+        "targets": {
+          "1": {
+            "shot1": 5,
+            "shot2": 3
+          },
+          "2": {
+            "shot1": 5,
+            "shot2": 1
+          },
+          "3": {
+            "shot1": 0,
+            "shot2": 3
+          },
+          "4": {
+            "shot1": 4,
+            "shot2": 8
+          },
+          "5": {
+            "shot1": 5,
+            "shot2": 8
+          },
+          "6": {
+            "shot1": 10,
+            "shot2": 10
+          },
+          "7": {
+            "shot1": 0,
+            "shot2": 5
+          },
+          "8": {
+            "shot1": 8,
+            "shot2": 10
+          },
+          "9": {
+            "shot1": 5,
+            "shot2": 1
+          },
+          "10": {
+            "shot1": 5,
+            "shot2": 2
+          },
+          "11": {
+            "shot1": 8,
+            "shot2": 6
+          },
+          "12": {
+            "shot1": 8,
+            "shot2": 9
+          },
+          "13": {
+            "shot1": 6,
+            "shot2": 5
+          },
+          "14": {
+            "shot1": 0,
+            "shot2": 4
+          },
+          "15": {
+            "shot1": 5,
+            "shot2": 7
+          },
+          "16": {
+            "shot1": 6,
+            "shot2": 5
+          },
+          "17": {
+            "shot1": 1,
+            "shot2": 10
+          },
+          "18": {
+            "shot1": 5,
+            "shot2": 6
+          },
+          "19": {
+            "shot1": 1,
+            "shot2": 8
+          },
+          "20": {
+            "shot1": 3,
+            "shot2": 7
+          }
+        },
+        "total_score": 208,
+        "completed": true,
+        "joker_selected": false
+      }
+    },
+    "tournament_finished": true,
+    "created_at": "2026-04-19T14:52:03.834609",
+    "finished_at": "2026-04-19T14:52:41.243912"
+  },
+  "archived_at": "2026-04-19T14:52:41.243969"
+}

static/css/navbar.css

@@ -14,7 +14,6 @@
   height: auto;
   min-height: 50px;
   box-sizing: border-box;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: var(--z-sticky);
@@ -74,7 +73,6 @@
   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;
@@ -90,7 +88,6 @@
 .nav-btn:hover {
   background: #e9ecef;
   border-color: #28a745;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   transform: translateY(-1px);
   color: #28a745;
   text-decoration: none;
@@ -170,14 +167,12 @@
   height: 42px;
   border-radius: 8px;
   transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   display: flex;
 }
 
 .hamburger-menu:hover {
   background: #e9ecef;
   border-color: #28a745;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   transform: translateY(-1px);
 }
 

static/css/pages/calculator.css

@@ -0,0 +1,618 @@
+/* ============================================================
+   Calculator page styles
+   ============================================================ */
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+.page {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  padding: 16px;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.main-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+  width: 100%;
+  max-width: 1400px;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+/* ── LEFT PANEL ── */
+.left-panel {
+  width: 240px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e9ecef;
+  background: #f8f9fa;
+}
+
+.left-header {
+  height: 65px;
+  padding: 0 16px;
+  border-bottom: 1px solid #e9ecef;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.left-header h3 {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #2c3e50;
+  line-height: 1;
+}
+
+.left-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex: 1;
+}
+
+.setup-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.setup-field label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.setup-input {
+  padding: 11px 12px;
+  border: 2px solid #dee2e6;
+  border-radius: 8px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #2c3e50;
+  text-align: center;
+  background: white;
+  transition: border-color 0.2s;
+  outline: none;
+  width: 100%;
+}
+
+.setup-input:focus {
+  border-color: #28a745;
+  box-shadow: 0 0 0 3px rgba(40,167,69,0.12);
+}
+
+.setup-hint {
+  font-size: 0.72rem;
+  color: #adb5bd;
+}
+
+.gen-btn {
+  background: #28a745;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 13px;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+  width: 100%;
+}
+
+.gen-btn:hover:not(:disabled) { background: #1e7e34; }
+.gen-btn:disabled { background: #ced4da; cursor: not-allowed; }
+
+.left-utils {
+  padding: 0 20px 18px;
+  display: none;
+  flex-direction: column;
+  gap: 7px;
+  flex-shrink: 0;
+}
+
+.left-utils.visible { display: flex; }
+
+.util-btn {
+  padding: 9px 12px;
+  border-radius: 8px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+  width: 100%;
+  text-align: center;
+}
+
+.btn-zeros { background: #6c757d; border: 2px solid #6c757d; color: white; }
+.btn-zeros:hover { background: #545b62; border-color: #545b62; }
+.btn-reset { background: #dc3545; border: 2px solid #dc3545; color: white; }
+.btn-reset:hover { background: #b02a37; border-color: #b02a37; }
+.btn-print {
+  background: #6f42c1;
+  border: 2px solid #6f42c1;
+  color: white;
+  padding: 9px 12px;
+  border-radius: 8px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+  width: 100%;
+  text-align: center;
+}
+.btn-print:hover { background: #59359a; border-color: #59359a; }
+
+/* Display settings */
+.display-section {
+  padding: 14px 20px 18px;
+  border-top: 1px solid #e9ecef;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.display-section-title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.display-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.display-toggle-label {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.toggle-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  background: #ced4da;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.toggle-track::after {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: white;
+  top: 3px;
+  left: 3px;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+.toggle-switch input:checked + .toggle-track { background: #28a745; }
+.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }
+
+.display-camera-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.display-camera-row label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.camera-select {
+  padding: 9px 12px;
+  border: 2px solid #dee2e6;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #2c3e50;
+  background: white;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  width: 100%;
+}
+
+.camera-select:focus { border-color: #28a745; }
+.camera-select:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* ── MIDDLE PANEL ── */
+.middle-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border-right: 1px solid #e9ecef;
+}
+
+.name-bar {
+  height: 65px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  border-bottom: 1px solid #e9ecef;
+  background: #f8f9fa;
+  flex-shrink: 0;
+}
+
+.name-bar-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+}
+
+.name-input {
+  flex: 1;
+  padding: 9px 12px;
+  border: 2px solid #dee2e6;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #2c3e50;
+  background: white;
+  transition: border-color 0.2s;
+  outline: none;
+  min-width: 0;
+}
+
+.name-input::placeholder { color: #adb5bd; font-weight: 400; }
+.name-input:focus { border-color: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,0.12); }
+
+.middle-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #adb5bd;
+  gap: 10px;
+  font-size: 1rem;
+}
+
+.middle-empty .empty-icon { font-size: 3rem; }
+
+.targets-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 14px 16px;
+  min-height: 0;
+  display: none;
+}
+
+.targets-wrapper.visible { display: block; }
+.targets-wrapper::-webkit-scrollbar { width: 6px; }
+.targets-wrapper::-webkit-scrollbar-track { background: transparent; }
+.targets-wrapper::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 4px; }
+
+.targets-grid { display: grid; gap: 8px; }
+
+.target-group {
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  background: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.target-group.completed { border-color: #28a745; background: #f0f8f5; }
+
+.target-num {
+  background: #e9ecef;
+  border-bottom: 1px solid #dee2e6;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #495057;
+  text-align: center;
+  padding: 4px;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+.target-group.completed .target-num {
+  background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
+  border-bottom-color: #28a745;
+  color: #28a745;
+}
+
+.shots-col { display: flex; flex-direction: column; gap: 4px; padding: 5px; }
+
+.shot-input {
+  width: 100%;
+  padding: 5px 2px;
+  border: 1.5px solid #dee2e6;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #333;
+  background: white;
+  min-height: 30px;
+  transition: border-color 0.15s, color 0.15s;
+  outline: none;
+}
+
+.shot-input:focus { border-color: #28a745; box-shadow: 0 0 0 2px rgba(40,167,69,0.2); }
+.shot-input.valid { border-color: #28a745; }
+.shot-input.ten { border-color: #ffc107; color: #e6a800; }
+
+/* Add bar */
+.add-bar {
+  display: none;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 2px solid #e9ecef;
+  background: #f8f9fa;
+  flex-shrink: 0;
+}
+
+.add-bar.visible { display: flex; }
+.add-bar-score { display: flex; flex-direction: column; align-items: center; line-height: 1.1; flex-shrink: 0; }
+.add-bar-pts { font-size: 1.8rem; font-weight: 800; color: #28a745; line-height: 1; }
+.add-bar-tens { font-size: 0.7rem; font-weight: 700; color: #ffc107; }
+.add-bar-meta { flex: 1; min-width: 0; }
+.add-bar-meta-text { font-size: 0.8rem; color: #6c757d; }
+.add-bar-progress { height: 4px; background: #e9ecef; border-radius: 2px; overflow: hidden; margin-top: 4px; }
+.add-bar-progress-fill { height: 100%; background: #28a745; border-radius: 2px; transition: width 0.25s ease; }
+
+.btn-add {
+  background: #007bff;
+  border: 2px solid #007bff;
+  color: white;
+  padding: 11px 20px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.btn-add:hover:not(:disabled) { background: #0056b3; border-color: #0056b3; }
+.btn-add:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── RIGHT PANEL: scoreboard ── */
+.score-panel {
+  width: 290px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: #f8f9fa;
+  overflow: hidden;
+}
+
+.score-header {
+  height: 65px;
+  padding: 0 16px;
+  border-bottom: 1px solid #e9ecef;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.score-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #2c3e50; }
+
+.score-count {
+  background: #28a745;
+  color: white;
+  font-size: 0.72rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 12px;
+}
+
+.score-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #adb5bd;
+  gap: 8px;
+  font-size: 0.88rem;
+  padding: 20px;
+  text-align: center;
+}
+
+.score-empty .empty-icon { font-size: 2.4rem; }
+
+.score-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.score-list::-webkit-scrollbar { width: 5px; }
+.score-list::-webkit-scrollbar-track { background: transparent; }
+.score-list::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 4px; }
+
+.score-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  background: white;
+  border: 2px solid #e9ecef;
+  border-radius: 10px;
+  animation: slideIn 0.2s ease;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(10px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.score-row.rank-1 { border-color: #ffc107; background: #fffdf0; }
+.score-row.rank-2 { border-color: #adb5bd; background: #f9f9f9; }
+.score-row.rank-3 { border-color: #cd7f32; background: #fdf7f2; }
+
+.rank-badge {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.72rem;
+  font-weight: 800;
+  flex-shrink: 0;
+  background: #e9ecef;
+  color: #495057;
+}
+
+.score-row.rank-1 .rank-badge { background: #ffc107; color: #7a5800; }
+.score-row.rank-2 .rank-badge { background: #adb5bd; color: #343a40; }
+.score-row.rank-3 .rank-badge { background: #cd7f32; color: white; }
+
+.score-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #2c3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.score-name:hover { color: #f97316; }
+.score-tens { font-size: 0.7rem; font-weight: 700; color: #ffc107; flex-shrink: 0; white-space: nowrap; }
+.score-pts { font-size: 1.05rem; font-weight: 800; color: #28a745; flex-shrink: 0; }
+
+.score-del {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #ced4da;
+  font-size: 0.95rem;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.score-del:hover { color: #dc3545; background: #fff0f0; }
+
+.score-footer { padding: 10px 10px 0; border-top: 1px solid #e9ecef; flex-shrink: 0; }
+.score-print-footer { padding: 8px 10px 10px; flex-shrink: 0; }
+
+.btn-clear-board {
+  width: 100%;
+  padding: 9px;
+  border-radius: 8px;
+  border: 2px solid #dc3545;
+  background: #dc3545;
+  color: white;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-clear-board:hover { background: #b02a37; border-color: #b02a37; }
+
+/* ── PRINT ── */
+@media print {
+  .navbar, .left-panel, .middle-panel, .score-panel,
+  .page, .main-card, body > *:not(#printLayout) { display: none !important; }
+
+  body {
+    background: white !important;
+    overflow: visible !important;
+    height: auto !important;
+    margin: 0;
+    padding: 0;
+  }
+
+  #printLayout {
+    display: block !important;
+    padding: 24px 32px;
+    color: #333;
+  }
+
+  .pl-header {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    padding-bottom: 14px;
+    border-bottom: 2px solid #dee2e6;
+    margin-bottom: 18px;
+  }
+
+  .pl-logo { height: 52px; width: auto; object-fit: contain; }
+  .pl-titles { display: flex; flex-direction: column; gap: 2px; }
+  .pl-title { font-size: 20pt; font-weight: 800; color: #2c3e50; line-height: 1.1; }
+  .pl-subtitle { font-size: 10pt; color: #6c757d; }
+  .pl-meta { margin-left: auto; text-align: right; font-size: 9pt; color: #6c757d; line-height: 1.6; }
+
+  .pl-table { width: 100%; border-collapse: collapse; font-size: 11pt; }
+  .pl-table thead tr { background: #f8f9fa; border-bottom: 2px solid #dee2e6; }
+  .pl-table th {
+    padding: 8px 12px;
+    text-align: left;
+    font-size: 8pt;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: #495057;
+  }
+  .pl-table th.right { text-align: right; }
+  .pl-table td { padding: 9px 12px; border-bottom: 1px solid #f1f3f4; color: #333; }
+  .pl-table td.right { text-align: right; }
+  .pl-table tbody tr:nth-child(1) td { background: #fffdf0; }
+  .pl-table tbody tr:nth-child(2) td { background: #f9f9f9; }
+  .pl-table tbody tr:nth-child(3) td { background: #fdf7f2; }
+
+  .pl-rank { font-weight: 700; font-size: 12pt; }
+  .pl-rank.r1 { color: #b8860b; }
+  .pl-rank.r2 { color: #6c757d; }
+  .pl-rank.r3 { color: #8b4513; }
+  .pl-name { font-weight: 600; }
+  .pl-score { font-weight: 800; font-size: 13pt; color: #28a745; }
+  .pl-tens { font-weight: 700; color: #856404; }
+}

static/css/pages/draft.css

@@ -0,0 +1,384 @@
+/* ============================================================
+   Draft page styles
+   ============================================================ */
+
+html, body {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-container {
+  height: calc(100vh - 70px);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  gap: 0;
+}
+
+.tournament-header {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  padding: 10px 16px;
+  flex-shrink: 0;
+  margin: 8px 15px 0 15px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.tournament-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #333;
+  white-space: nowrap;
+}
+
+.tournament-stats {
+  color: #888;
+  font-size: 0.82rem;
+}
+
+.tournament-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+}
+
+.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: #28a745; color: #28a745; }
+.round-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
+
+.current-round-display {
+  font-size: 1rem;
+  font-weight: bold;
+  color: #333;
+  margin: 0 15px;
+  min-width: 140px;
+  text-align: center;
+}
+
+/* Rounds container */
+.rounds-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  margin: 8px 15px;
+}
+
+.rounds-container::-webkit-scrollbar { width: 12px; }
+.rounds-container::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 10px; }
+.rounds-container::-webkit-scrollbar-thumb { background: #5a8fd1; border-radius: 10px; border: 2px solid #f5f5f5; }
+.rounds-container::-webkit-scrollbar-thumb:hover { background: #4a7db8; }
+
+.round-row {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  min-height: 0;
+  border: 2px solid #e9ecef;
+  border-left: 5px solid #9ca3af;
+}
+
+.round-row.current { border-left: 5px solid #5a8fd1; border-color: #5a8fd1; box-shadow: 0 6px 24px rgba(90,143,209,0.25); }
+.round-row.completed { border-left: 5px solid #28a745; border-color: #28a745; opacity: 0.98; box-shadow: 0 4px 16px rgba(40,167,69,0.15); }
+.round-row.waiting { opacity: 0.8; border-color: #d1d5db; }
+
+.round-header {
+  background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%);
+  border-right: 3px solid #e9ecef;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 14px 16px;
+  flex-shrink: 0;
+  text-align: center;
+  min-width: 130px;
+}
+
+.round-row.current .round-header { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-right-color: #5a8fd1; }
+.round-row.completed .round-header { background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); border-right-color: #28a745; }
+
+.round-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #333;
+  margin-bottom: 6px;
+  letter-spacing: 0.3px;
+}
+
+.round-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
+}
+
+.current-badge { background: #5a8fd1; color: white; box-shadow: 0 2px 8px rgba(90,143,209,0.3); }
+.completed-badge { background: #28a745; color: white; box-shadow: 0 2px 8px rgba(40,167,69,0.3); }
+.waiting-badge { background: #9ca3af; color: white; box-shadow: 0 2px 6px rgba(156,163,175,0.2); }
+
+.positions-container {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 8px;
+  padding: 12px;
+  overflow: hidden;
+}
+
+.position-card {
+  background: white;
+  border: 2px solid #9ca3af;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(156,163,175,0.18);
+  min-height: 80px;
+  flex-shrink: 0;
+}
+
+.position-card:hover { transform: translateY(-2px); box-shadow: 0 3px 12px rgba(156,163,175,0.28); }
+
+.round-row.current .position-card { border-color: #5a8fd1; box-shadow: 0 2px 8px rgba(90,143,209,0.25); }
+.round-row.current .position-card:hover { box-shadow: 0 3px 12px rgba(90,143,209,0.35); }
+.round-row.current .position-card .position-header { background: linear-gradient(135deg, #5a8fd1 0%, #4a7db8 100%); }
+
+.round-row.completed .position-card { border-color: #28a745; box-shadow: 0 2px 8px rgba(40,167,69,0.25); }
+.round-row.completed .position-card:hover { box-shadow: 0 3px 12px rgba(40,167,69,0.35); }
+.round-row.completed .position-card .position-header { background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); }
+
+.round-row.waiting .position-card { border-color: #9ca3af; box-shadow: 0 2px 8px rgba(156,163,175,0.2); }
+.round-row.waiting .position-card:hover { box-shadow: 0 3px 10px rgba(156,163,175,0.3); }
+.round-row.waiting .position-card .position-header { background: linear-gradient(135deg, #9ca3af 0%, #8b929f 100%); }
+
+.position-header {
+  background: #9ca3af;
+  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 50px;
+  width: 50px;
+  min-height: 80px;
+}
+
+.position-card.empty .position-header { background: #9ca3af; }
+
+.position-number {
+  font-size: 2rem;
+  font-weight: 700;
+  color: white;
+  line-height: 1;
+}
+
+.position-body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  background: white;
+  border-radius: 0 8px 8px 0;
+  overflow: visible;
+}
+
+.position-card.empty .position-body { background: #f8f9fa; }
+
+.player-name {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: #2c3e50;
+  line-height: 1.4;
+  word-wrap: break-word;
+  max-width: 100%;
+  text-align: center;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.position-card.empty .player-name { color: #6c757d; font-style: italic; font-weight: 500; }
+
+.player-id { display: none; }
+
+.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; }
+
+/* Print-only elements — hidden on screen */
+@media screen {
+  .round-print-info,
+  .print-logo,
+  .print-meta,
+  .print-done-check {
+    display: none !important;
+  }
+}
+
+@media print {
+  .navbar, .tournament-controls { display: none !important; }
+
+  .print-logo {
+    display: block !important;
+    height: 80px !important;
+    max-width: 300px !important;
+    object-fit: contain !important;
+    margin: 0 auto 16px auto !important;
+  }
+
+  html, body {
+    height: auto !important;
+    overflow: visible !important;
+    background: white !important;
+    margin: 0;
+    padding: 20px;
+  }
+
+  .main-container { height: auto !important; padding: 0 !important; }
+
+  .tournament-header {
+    background: white !important;
+    color: #333 !important;
+    box-shadow: none !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    border: none !important;
+    border-bottom: 1px solid #ddd !important;
+    padding: 0 0 16px 0 !important;
+    margin-bottom: 16px !important;
+  }
+
+  .tournament-title, .tournament-stats { display: none !important; }
+
+  .print-meta {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-end !important;
+    font-size: 11pt !important;
+    color: #555 !important;
+    gap: 4px;
+  }
+
+  .current-round-info, .round-badge, .round-print-info, .player-id, .no-tournament { display: none !important; }
+
+  .rounds-container {
+    display: block !important;
+    overflow: visible !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    margin: 0 !important;
+  }
+
+  .round-row,
+  .round-row.current,
+  .round-row.completed,
+  .round-row.waiting {
+    box-shadow: none !important;
+    page-break-inside: avoid !important;
+    opacity: 1 !important;
+    margin-bottom: 6px !important;
+    min-height: 0 !important;
+    border: 1px solid #dee2e6 !important;
+    border-color: #dee2e6 !important;
+  }
+
+  .round-row.current .round-header,
+  .round-row.completed .round-header,
+  .round-row.waiting .round-header {
+    background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%) !important;
+  }
+
+  .round-row.current .position-card,
+  .round-row.completed .position-card,
+  .round-row.waiting .position-card { border-color: #5a8fd1 !important; }
+
+  .round-row.current .position-card .position-header,
+  .round-row.completed .position-card .position-header,
+  .round-row.waiting .position-card .position-header { background: #5a8fd1 !important; }
+
+  .round-header { padding: 8px 12px !important; min-width: 90px !important; }
+  .round-title { font-size: 9pt !important; }
+  .positions-container { gap: 5px !important; padding: 8px !important; }
+
+  .position-card {
+    box-shadow: none !important;
+    transform: none !important;
+    transition: none !important;
+    page-break-inside: avoid !important;
+    min-height: 48px !important;
+    overflow: hidden !important;
+    border-radius: 10px !important;
+  }
+
+  .position-header { min-width: 36px !important; width: 36px !important; }
+  .position-number { font-size: 1.2rem !important; }
+  .player-name { font-size: 10pt !important; }
+
+  .print-done-check {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 0 14px !important;
+    flex-shrink: 0 !important;
+    border-left: 1px solid rgba(0,0,0,0.1) !important;
+  }
+
+  .print-done-box {
+    width: 20px !important;
+    height: 20px !important;
+    border: 1.5px solid #555 !important;
+    border-radius: 4px !important;
+    display: block !important;
+  }
+
+  .print-done-label { display: none !important; }
+}

static/css/pages/index.css

@@ -0,0 +1,510 @@
+/* ============================================================
+   Main dashboard (index) page styles
+   ============================================================ */
+
+html, body {
+  background: black;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Tournament navigation */
+.tournament-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.round-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;
+  font-weight: bold;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  height: 44px;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.round-nav-btn:hover { background: #e9ecef; border-color: #28a745; box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-1px); color: #28a745; }
+.round-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; background: #f8f9fa !important; border-color: #e9ecef !important; color: #333 !important; }
+
+.current-round-info { text-align: center; min-width: 100px; margin: 0; padding: 0; }
+.round-title { font-size: 1.2rem; font-weight: bold; color: #333; margin: 0; padding: 0; line-height: 1.2; }
+
+.round-progress {
+  font-size: 0.9rem;
+  color: #666;
+  padding: 2px 8px;
+  background: rgba(0,123,255,0.1);
+  border-radius: 6px;
+  border: 1px solid rgba(0,123,255,0.2);
+  margin: 2px 0 0 0;
+}
+
+.datetime {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.datetime .time { font-size: 1.6rem; font-weight: bold; color: #333; padding: 0; margin: 0; line-height: 1.2; }
+.datetime .date { font-size: 0.9rem; color: #666; padding: 0; margin: 0; line-height: 1.2; }
+
+.grid {
+  height: calc(100vh - 50px);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 20px;
+  box-sizing: border-box;
+  align-content: stretch;
+}
+
+/* Leaderboard display mode */
+.main-wrapper { display: flex; height: calc(100vh - 50px); }
+.main-wrapper .grid { flex: 1; height: 100%; grid-template-columns: 1fr; grid-template-rows: 1fr; min-width: 0; }
+
+.lb-sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: #141414;
+  border-left: 2px solid #222;
+  overflow: hidden;
+}
+
+.lb-header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid #222;
+  flex-shrink: 0;
+}
+
+.lb-title { font-size: 1.1rem; font-weight: 800; color: #fff; }
+.lb-count { background: #28a745; color: white; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 12px; }
+
+.lb-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #444;
+  gap: 10px;
+  font-size: 0.9rem;
+}
+
+.lb-empty .icon { font-size: 2.5rem; }
+
+.lb-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
+.lb-list::-webkit-scrollbar { width: 4px; }
+.lb-list::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
+
+.lb-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 12px;
+  border-radius: 10px;
+  background: #1e1e1e;
+  border: 2px solid #2a2a2a;
+}
+
+.lb-row.r1 { border-color: #ffc107; background: #1c1900; }
+.lb-row.r2 { border-color: #888;    background: #181818; }
+.lb-row.r3 { border-color: #a0522d; background: #1a1210; }
+
+.lb-badge {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.78rem;
+  font-weight: 800;
+  flex-shrink: 0;
+  background: #2a2a2a;
+  color: #aaa;
+}
+
+.lb-row.r1 .lb-badge { background: #ffc107; color: #7a5800; font-size: 1rem; }
+.lb-row.r2 .lb-badge { background: #888;    color: #fff;    font-size: 1rem; }
+.lb-row.r3 .lb-badge { background: #a0522d; color: #fff;    font-size: 1rem; }
+
+.lb-name { flex: 1; min-width: 0; font-size: 0.95rem; font-weight: 700; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lb-tens { font-size: 0.7rem; font-weight: 700; color: #ffc107; flex-shrink: 0; }
+.lb-pts  { font-size: 1.2rem; font-weight: 900; color: #28a745; flex-shrink: 0; min-width: 36px; text-align: right; }
+
+/* Camera cards */
+.camera-card {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: white;
+  text-align: left;
+  pointer-events: none;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stream-wrapper {
+  position: relative;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  overflow: hidden;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  width: fit-content;
+  height: fit-content;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.image-container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0 0 12px 12px;
+  background: #1a1a1a;
+  flex: 1;
+}
+
+.stream-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 5; }
+.stream-placeholder svg { width: 100%; height: 100%; display: block; }
+
+.stream {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  object-position: center;
+  display: block;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 10;
+  opacity: 1;
+}
+
+.card-header {
+  background: linear-gradient(90deg, #28a745 0%, #28a745 60px, #1a1a1a 60px);
+  border-bottom: 2px solid #333;
+  padding: 12px 15px 12px 0;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  transition: all 0.2s ease;
+  border-radius: 12px 12px 0 0;
+  flex-shrink: 0;
+  margin: 0;
+  line-height: 1;
+}
+
+.target-number {
+  background: transparent;
+  color: white;
+  width: 60px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  font-weight: bold;
+  flex-shrink: 0;
+  margin-right: 15px;
+  transition: color 0.2s ease;
+}
+
+.camera-card.no-player .card-header {
+  background: linear-gradient(90deg, #999 0%, #999 60px, #1a1a1a 60px);
+}
+
+/* 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: -500px;
+  width: 500px;
+  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: 25px 30px; }
+
+.settings-group {
+  margin-bottom: 25px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 12px;
+  border: 1px solid #e9ecef;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.settings-group h4 {
+  margin: -5px 0 20px 0;
+  font-size: 1.2rem;
+  color: #2c3e50;
+  border-bottom: 3px solid #28a745;
+  padding-bottom: 8px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.settings-group h5 {
+  margin: 20px 0 15px 0;
+  font-size: 1.05rem;
+  color: #495057;
+  border-bottom: 1px solid #dee2e6;
+  padding-bottom: 5px;
+  font-weight: 500;
+}
+
+.settings-group:has(h4[data-i18n="league.system"]) { background: linear-gradient(135deg, #e8f4f8 0%, #f0f8ff 100%); border-left: 4px solid #17a2b8; }
+.settings-group:has(h4[data-i18n="league.system"]) h4 { color: #17a2b8; border-bottom-color: #17a2b8; }
+.settings-group:has(h4[data-i18n="league.camera"]) { background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 100%); border-left: 4px solid #28a745; }
+.settings-group:has(h4[data-i18n="league.camera"]) h4 { color: #28a745; border-bottom-color: #28a745; }
+.settings-group:has(h4[data-i18n="league.tournaments"]) { background: linear-gradient(135deg, #fff8e1 0%, #fffef7 100%); border-left: 4px solid #ffc107; }
+.settings-group:has(h4[data-i18n="league.tournaments"]) h4 { color: #e67e22; border-bottom-color: #ffc107; }
+
+.nav-link {
+  display: block;
+  background: white;
+  border: 2px solid #dee2e6;
+  color: #495057;
+  padding: 14px 18px;
+  border-radius: 10px;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+  margin-bottom: 12px;
+}
+
+.nav-link:hover {
+  background: #f8f9fa;
+  border-color: #28a745;
+  color: #28a745;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 12px rgba(0,123,255,0.15);
+  text-decoration: none !important;
+}
+
+.settings-group:has(h4[data-i18n="league.tournaments"]) .nav-link { border: 2px solid #dee2e6; background: white; color: #333; font-weight: 500; }
+.settings-group:has(h4[data-i18n="league.tournaments"]) .nav-link:hover { background: #fffbf0; border-color: #ffc107; color: #ff9800; box-shadow: 0 5px 12px rgba(255,152,0,0.2); }
+
+.camera-input {
+  width: 100%;
+  padding: 14px 18px;
+  border: 2px solid #dee2e6;
+  border-radius: 10px;
+  background: white;
+  color: #495057;
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+  box-sizing: border-box;
+}
+
+.camera-input:focus { border-color: #28a745; box-shadow: 0 5px 12px rgba(0,123,255,0.15); transform: translateY(-1px); outline: none; }
+.camera-input:hover:not(:focus) { border-color: #28a745; box-shadow: 0 5px 12px rgba(0,123,255,0.15); transform: translateY(-1px); }
+
+.cam-setting-toggle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 0;
+  font-size: 0.9rem;
+  color: #495057;
+  cursor: pointer;
+  border-bottom: 1px solid #e9ecef;
+  margin-bottom: 14px;
+}
+
+.cam-setting-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #28a745; }
+
+.cam-slider-row { margin-bottom: 14px; }
+.cam-slider-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: #495057; margin-bottom: 6px; }
+.cam-slider-value { font-weight: 600; color: #28a745; }
+.cam-slider { width: 100%; accent-color: #28a745; }
+
+.cam-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
+
+.cam-row { border: 1.5px solid #dee2e6; border-radius: 10px; overflow: hidden; background: white; transition: opacity 0.2s ease; }
+.cam-row--disabled { opacity: 0.55; }
+
+.cam-row-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.cam-row-label { font-size: 0.85rem; font-weight: 600; color: #495057; }
+
+.cam-row .camera-input { border: none; border-radius: 0; box-shadow: none; padding: 10px 12px; font-size: 0.9rem; }
+.cam-row .camera-input:focus { border: none; box-shadow: inset 0 0 0 2px #28a745; transform: none; }
+.cam-row .camera-input:hover:not(:focus) { border: none; box-shadow: inset 0 0 0 2px #28a74580; transform: none; }
+
+.cam-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; }
+.cam-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
+
+.cam-toggle-track {
+  width: 36px;
+  height: 20px;
+  background: #dc3545;
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+}
+
+.cam-toggle input:checked ~ .cam-toggle-track { background: #28a745; }
+
+.cam-toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.cam-toggle input:checked ~ .cam-toggle-track .cam-toggle-thumb { transform: translateX(16px); }
+
+.cam-toggle-text { font-size: 0.78rem; font-weight: 600; color: #28a745; min-width: 22px; }
+.cam-toggle-text--off { color: #dc3545; }
+
+.tournament-status-info {
+  background: #f0f8ff;
+  border: 2px solid #28a745;
+  border-radius: 8px;
+  padding: 15px;
+  margin: 15px 0;
+}
+
+.tournament-status-info p { margin: 5px 0; color: #333; }
+
+.tournament-btn {
+  background: #28a745 !important;
+  border-color: #1e7e34 !important;
+  color: white !important;
+  text-align: center;
+  font-size: 0.95rem !important;
+  padding: 14px 18px !important;
+  font-weight: 500 !important;
+}
+
+.tournament-btn:hover { background: #1e7e34 !important; border-color: #004085 !important; color: white !important; text-decoration: none !important; }
+
+@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; gap: 15px; padding: 20px; }
+  .card-header { background: linear-gradient(90deg, #28a745 0%, #28a745 50px, #1a1a1a 50px); padding: 10px 12px 10px 0; }
+  .target-number { width: 50px; font-size: 1.1rem; margin-right: 12px; }
+  .card-title { font-size: 1.2rem; }
+  .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-header { background: linear-gradient(90deg, #28a745 0%, #28a745 45px, #1a1a1a 45px); padding: 8px 10px 8px 0; }
+  .target-number { width: 45px; font-size: 1rem; margin-right: 10px; }
+  .card-title { font-size: 1rem; }
+}

static/css/pages/league_combine.css

@@ -0,0 +1,118 @@
+/* ============================================================
+   League combine page styles
+   ============================================================ */
+
+html, body {
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.upload-section {
+  background: white;
+  padding: 30px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.upload-area {
+  border: 3px dashed #28a745;
+  border-radius: 10px;
+  padding: 40px;
+  text-align: center;
+  background: #f8f9fa;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.upload-area:hover { background: #e9f7ed; border-color: #1e7e34; }
+.upload-area.drag-over { background: #d4edda; border-color: #28a745; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2); }
+
+.file-input { display: none; }
+.upload-icon { font-size: 48px; margin-bottom: 10px; }
+.uploaded-files { margin-top: 20px; }
+
+.file-item {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-left: 4px solid #28a745;
+}
+
+.file-item.error { border-left-color: #dc3545; background: #f8d7da; }
+.file-info { display: flex; flex-direction: column; gap: 5px; }
+.file-name { font-weight: bold; color: #2c3e50; }
+.file-details { font-size: 0.9em; color: #6c757d; }
+
+.remove-btn {
+  background: #dc3545;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.remove-btn:hover { background: #c82333; }
+
+.action-buttons { display: flex; gap: 10px; margin-top: 20px; }
+
+.preview-section {
+  background: white;
+  padding: 30px;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  display: none;
+}
+
+.preview-section.active { display: block; }
+
+.info-box {
+  background: #d4edda;
+  border-left: 4px solid #28a745;
+  padding: 15px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+}
+
+.info-box h3 { margin: 0 0 10px 0; color: #155724; }
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  border-left: 4px solid #28a745;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stat-value { font-size: 32px; font-weight: bold; color: #28a745; }
+.stat-label { font-size: 14px; color: #6c757d; margin-top: 5px; }
+
+.mode-btn {
+  flex: 1;
+  padding: 12px 20px;
+  border: 2px solid #28a745;
+  background: white;
+  color: #28a745;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.mode-btn:hover { background: #e9f7ed; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
+.mode-btn.active { background: #28a745; color: white; border-color: #1e7e34; }

static/css/pages/league_scoreboard_display.css

@@ -0,0 +1,264 @@
+/* ============================================================
+   League scoreboard display page styles
+   ============================================================ */
+
+html, body {
+  background: #f5f5f5;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.navbar-logo { height: 40px; max-width: 120px; object-fit: contain; }
+
+.nav-btn.primary { background: #28a745; border-color: #1e7e34; color: white; }
+.nav-btn.primary:hover { background: #1e7e34; color: white; }
+
+/* Main League Layout */
+.league-container {
+  height: calc(100vh - 90px);
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 20px;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.left-column { display: flex; flex-direction: column; gap: 0; min-height: 0; overflow: hidden; }
+
+.league-header {
+  border-radius: 12px 12px 0 0;
+  padding: 20px;
+  text-align: center;
+  flex-shrink: 0;
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.league-header.tournament-4_targets  { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
+.league-header.tournament-20_targets { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); }
+.league-header.tournament-40_targets { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+
+.league-header::before {
+  content: '';
+  position: absolute;
+  inset: 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: 50px;
+  max-width: 150px;
+  object-fit: contain;
+  margin-bottom: 10px;
+  filter: brightness(1.2) contrast(1.1);
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.2);
+}
+
+.league-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 8px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.league-subtitle {
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.95);
+  margin-bottom: 12px;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+
+.league-meta { display: flex; justify-content: space-around; gap: 10px; }
+.meta-item { text-align: center; }
+.meta-number { font-size: 1.2rem; font-weight: 700; color: white; display: block; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+.meta-label { font-size: 0.65rem; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; }
+
+/* Champion Section */
+.champion-section {
+  background: white;
+  border-radius: 0 0 12px 12px;
+  padding: 12px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  border: 1px solid #e9ecef;
+}
+
+.champion-title { text-align: center; font-size: 0.9rem; font-weight: 700; color: #2c3e50; margin-bottom: 8px; flex-shrink: 0; }
+
+.champion-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 0.75fr 0.75fr 1.5fr;
+  gap: 10px;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.champion-card {
+  background: white;
+  border-radius: 12px;
+  padding: 12px 12px 18px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #e9ecef;
+  border-top-width: 6px;
+  justify-content: flex-end;
+}
+
+.champion-card::before { display: none; }
+.champion-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
+
+.champion-card.rank-1 { border-top-color: #ffd700; border-color: #ffd700; background: linear-gradient(135deg, #fffbf0 0%, #fff9e6 100%); grid-column: 2; grid-row: 1 / 4; }
+.champion-card.rank-2 { border-top-color: #c0c0c0; border-color: #c0c0c0; background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%); grid-column: 1; grid-row: 2 / 4; }
+.champion-card.rank-3 { border-top-color: #cd7f32; border-color: #cd7f32; background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%); grid-column: 3; grid-row: 3; }
+
+.rank-display { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; z-index: 2; }
+.medal { font-size: 4.5rem; line-height: 1; }
+.rank-number { font-size: 1.9rem; font-weight: 900; 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; }
+
+.participant-info {
+  flex: 1; min-width: 0; text-align: center; position: relative; z-index: 2;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+}
+
+.participant-name {
+  font-size: 1rem; font-weight: 700; color: #2c3e50; margin: 0;
+  word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2;
+}
+
+.participant-details { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+
+.participant-id {
+  background: #28a745; color: white; padding: 6px 12px; border-radius: 12px;
+  font-size: 0.75rem; font-weight: 700; display: inline-block; text-transform: uppercase;
+  letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
+}
+
+.joker-badge {
+  background: #ffc107; color: #856404; padding: 6px 12px; border-radius: 12px;
+  font-size: 0.75rem; font-weight: 700; display: inline-block; text-transform: uppercase;
+  letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
+}
+
+.score-display { text-align: center; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; }
+.score-number { font-size: 1.8rem; font-weight: 900; color: #28a745; line-height: 1; }
+.tens-count { font-size: 0.8rem; color: #ffc107; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
+.total-score { font-size: 0.8rem; color: #ffc107; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
+.score-label { font-size: 0.6rem; color: #999; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
+
+/* Right Column - League Table */
+.right-column { background: white; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e9ecef; }
+.table-header { background: #f8f9fa; padding: 12px 15px; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
+.table-title { font-size: 0.95rem; font-weight: 600; color: #2c3e50; margin: 0; }
+.table-container { flex: 1; overflow-y: auto; }
+
+.league-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
+.league-table th, .league-table td { padding: 6px 4px; 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.6rem; letter-spacing: 0.5px; position: sticky; top: 0; z-index: 10; }
+.league-table th.player-col { text-align: left; width: 100px; }
+.league-table th.tournament-col { width: 60px; }
+.league-table th.final-col { width: 70px; background: #e3f2fd; }
+.league-table th.tens-col { width: 60px; background: #fff3cd; }
+
+.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: 0.9rem; font-weight: 700; width: 45px; text-align: center; }
+.rank-1 { color: #b8860b; }
+.rank-2 { color: #6c757d; }
+.rank-3 { color: #8b4513; }
+
+.player-cell { text-align: left !important; padding-left: 10px !important; }
+.player-name { font-size: 0.85rem; font-weight: 600; color: #2c3e50; word-break: keep-all; overflow-wrap: break-word; hyphens: none; }
+.player-id { background: #28a745; color: white; padding: 2px 5px; border-radius: 5px; font-size: 0.6rem; font-weight: 500; display: inline-block; margin-top: 2px; }
+
+.tournament-score { font-size: 0.8rem; font-weight: 600; color: #333; min-width: 35px; }
+.tournament-score.joker { background: #ffc107; color: #856404; padding: 2px 5px; border-radius: 3px; font-size: 0.65rem; font-weight: 600; }
+.tournament-score.excluded { background: #dc3545; color: white; padding: 2px 5px; border-radius: 3px; text-decoration: line-through; opacity: 0.8; font-size: 0.65rem; }
+.tournament-score.counted { background: #28a745; color: white; padding: 2px 5px; border-radius: 3px; font-weight: 600; font-size: 0.7rem; }
+
+.final-score-cell { background: #e3f2fd !important; font-size: 1rem; font-weight: 700; color: #1976d2; }
+.tens-count-cell { background: #fff3cd !important; font-size: 0.9rem; font-weight: 700; color: #856404; }
+
+.tournament-header-group { background: #e3f2fd; border-bottom: 2px solid #1976d2; }
+.tournament-header-group th { background: #e3f2fd; color: #1976d2; font-weight: 700; }
+.tens-header-group { background: #fff3cd; border-bottom: 2px solid #856404; }
+.tens-header-group th { background: #fff3cd; color: #856404; font-weight: 700; }
+
+.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: 15px; flex-wrap: wrap; align-items: center; }
+.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #495057; }
+.legend-box { width: 18px; height: 14px; border-radius: 3px; display: inline-block; }
+.legend-joker { background: #ffc107; }
+.legend-excluded { background: #dc3545; }
+.legend-counted { background: #28a745; }
+.legend-final { background: #1976d2; }
+.legend-tens { background: #856404; }
+
+.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: #28a745; }
+
+@media (max-width: 768px) {
+  .league-container { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
+  .league-meta { gap: 10px; }
+  .meta-number { font-size: 1.4rem; }
+  .champion-section { padding: 20px 15px; }
+  .league-table { font-size: 0.7rem; }
+  .league-table th, .league-table td { padding: 5px 3px; }
+}
+
+@media print {
+  .navbar { display: none !important; }
+  html, body { height: auto !important; overflow: visible !important; background: white !important; margin: 0; padding: 20px; }
+  .league-container { display: block !important; height: auto !important; padding: 0 !important; gap: 0 !important; margin: 0 !important; }
+  .left-column { display: block !important; margin-bottom: 0; }
+
+  .league-header {
+    background: white !important; color: #333 !important; box-shadow: none !important;
+    border: 2px solid #ddd !important; padding: 20px; margin-bottom: 20px;
+  }
+
+  .league-header::before { display: none !important; }
+  .header-logo { height: 60px !important; max-width: 160px !important; background-color: transparent !important; padding: 0 !important; border: none !important; filter: none !important; margin-bottom: 15px; }
+  .league-title { font-size: 24pt !important; font-weight: bold !important; color: #333 !important; text-shadow: none !important; margin-bottom: 10px; }
+  .league-subtitle { font-size: 14pt !important; color: #666 !important; text-shadow: none !important; margin-bottom: 15px; }
+  .league-meta { color: #333 !important; }
+  .meta-number { color: #333 !important; text-shadow: none !important; font-size: 16pt !important; }
+  .meta-label { color: #666 !important; font-size: 10pt !important; }
+  .champion-section { display: none !important; }
+  .right-column { background: white !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; display: block !important; margin: 0 !important; padding: 0 !important; }
+  .table-header { display: none !important; }
+  .league-table { margin-top: 0 !important; }
+  .print-title { display: none !important; }
+  .table-title { display: none !important; }
+}

static/css/pages/mobile_streams.css

@@ -0,0 +1,145 @@
+/* ============================================================
+   Mobile streams page styles
+   ============================================================ */
+
+html, body {
+  background: #000;
+  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;
+}
+
+.mobile-navbar .navbar-title { font-size: 1.4rem; font-weight: bold; color: #333; display: flex; align-items: center; gap: 8px; }
+
+.nav-btn.active { background: #28a745; border-color: #1e7e34; color: white; }
+.nav-btn.active:hover { background: #1e7e34; 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; }
+
+.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;
+}
+
+.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: #28a745; 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; }
+.camera-option .stream-preview.unavailable ~ .camera-info .camera-title { color: #999; }
+
+/* Floating fullscreen button */
+.floating-fullscreen-btn {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 60px;
+  height: 60px;
+  background: rgba(0, 123, 255, 0.9);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.floating-fullscreen-btn:hover { background: rgba(0, 123, 255, 1); transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4); }
+.floating-fullscreen-btn:active { transform: scale(0.95); }
+.floating-fullscreen-btn.hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }
+
+.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-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; }
+
+@media (orientation: portrait) {
+  .camera-selection { grid-template-columns: 1fr; gap: 12px; }
+  .camera-option { min-height: 180px; }
+  .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; }
+}

static/css/pages/modern_archive_index.css

@@ -0,0 +1,156 @@
+/* ============================================================
+   Modern archive index page styles
+   ============================================================ */
+
+html, body {
+  height: 100vh;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+.archive-layout {
+  display: flex;
+  height: calc(100vh - 50px);
+  gap: 8px;
+  padding: 8px 20px 30px 20px;
+}
+
+/* Left tree panel */
+.left-panel {
+  width: 270px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 12px;
+  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
+  border-radius: 12px 12px 0 0;
+  flex-shrink: 0;
+}
+
+.panel-header-title { font-size: 0.8rem; font-weight: 700; color: white; letter-spacing: 0.3px; white-space: nowrap; }
+.panel-header-count { font-size: 0.7rem; font-weight: 600; background: rgba(255,255,255,0.25); color: white; padding: 2px 7px; border-radius: 10px; }
+
+.tree-sort-bar { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border-bottom: 1px solid #e9ecef; flex-shrink: 0; background: #f8f9fa; }
+.tree-sort-bar input { width: 100%; border: 1px solid #dee2e6; border-radius: 6px; padding: 5px 9px; font-size: 0.78rem; outline: none; background: white; box-sizing: border-box; }
+.tree-sort-bar input:focus { border-color: #28a745; }
+.filter-tabs { display: flex; gap: 4px; }
+.filter-tab { flex: 1; padding: 2px 4px; border: 2px solid #dee2e6; background: white; cursor: pointer; font-size: 0.6rem; font-weight: 600; color: #666; border-radius: 6px; transition: all 0.15s; white-space: nowrap; text-align: center; }
+.filter-tab.active { background: #28a745; border-color: #1e7e34; color: white; }
+.filter-tab:hover:not(.active) { border-color: #28a745; color: #28a745; }
+
+.tree-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
+.tree-list::-webkit-scrollbar { width: 5px; }
+.tree-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+
+.tree-group-header {
+  display: flex; align-items: center; gap: 5px;
+  padding: 7px 10px 3px;
+  font-size: 0.67rem; font-weight: 700; color: #999;
+  text-transform: uppercase; letter-spacing: 0.5px;
+  cursor: pointer; user-select: none;
+}
+.tree-group-header:hover { color: #666; }
+.tree-toggle { font-size: 0.6rem; transition: transform 0.15s; }
+.tree-group.collapsed .tree-toggle { transform: rotate(-90deg); }
+.tree-group.collapsed .tree-group-items { display: none; }
+
+.tree-item {
+  display: flex; align-items: center;
+  padding: 7px 10px 7px 14px;
+  cursor: pointer; border-left: 4px solid transparent;
+  gap: 7px; font-size: 0.8rem; color: #333; transition: all 0.15s;
+}
+.tree-item:hover { background: #f0faf3; border-left-color: #7dcf95; color: #1a6b30; }
+.tree-item.active { background: #28a745; border-left-color: #28a745; font-weight: 700; color: white; }
+.tree-item.active .tree-item-date { color: white; }
+.tree-item.active .tree-item-meta { color: rgba(255,255,255,0.75); }
+.tree-item.active .tbadge { background: rgba(255,255,255,0.2); color: white; }
+
+.tree-item-info { flex: 1; min-width: 0; }
+.tree-item-date { display: block; font-size: 0.8rem; font-weight: 600; }
+.tree-item-meta { display: block; font-size: 0.66rem; color: #999; }
+
+.tbadge { padding: 2px 5px; border-radius: 6px; font-size: 0.6rem; font-weight: 700; flex-shrink: 0; }
+.tbadge-40     { background: #e9d8fd; color: #6b21a8; }
+.tbadge-20     { background: #fef9c3; color: #b45309; }
+.tbadge-4      { background: #dcfce7; color: #166534; }
+.tbadge-league { background: #dbeafe; color: #1d4ed8; }
+
+.tree-empty { padding: 24px; text-align: center; color: #bbb; font-size: 0.82rem; }
+
+.tree-view-btn {
+  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; border-radius: 6px;
+  background: rgba(0,0,0,0.06); color: #666;
+  font-size: 0.9rem; text-decoration: none; transition: all 0.15s;
+  border: 1px solid rgba(0,0,0,0.08);
+}
+.tree-view-btn:hover { background: #28a745; color: white; border-color: #1e7e34; }
+.tree-item.active .tree-view-btn { background: rgba(255,255,255,0.2); color: white; border-color: rgba(255,255,255,0.3); }
+.tree-item.active .tree-view-btn:hover { background: white; color: #28a745; }
+
+/* Right panel */
+.right-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
+
+.result-placeholder {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  color: #ccc; gap: 10px;
+  background: white; border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.result-placeholder-icon { font-size: 2.5rem; }
+.result-placeholder-text { font-size: 0.95rem; }
+
+.loading-overlay {
+  flex: 1; display: flex; align-items: center; justify-content: center;
+  color: #bbb; font-size: 0.9rem;
+  background: white; border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.tv-container { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+
+.right-column { background: white; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e9ecef; }
+.table-header { background: #f8f9fa; padding: 8px 12px; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
+.table-title { font-size: 0.95rem; font-weight: 600; color: #2c3e50; margin: 0; }
+.table-container { flex: 1; overflow: auto; min-height: 0; }
+
+.results-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
+.results-table th, .results-table td { padding: 4px 6px; text-align: center; border-bottom: 1px solid #f1f3f4; border-right: 1px solid #f1f3f4; }
+.results-table th { background: #f8f9fa; font-weight: 600; color: #495057; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.3px; position: sticky; top: 0; z-index: 10; }
+.results-table th.score-col { background: #e3f2fd; }
+.results-table th.tens-col  { background: #fff3cd; }
+
+.results-table tbody tr:hover td { background: #f8f9fa; }
+.results-table tbody tr:nth-child(1) td { background: #fff9e6; }
+.results-table tbody tr:nth-child(1):hover td { background: #fff3cd; }
+.results-table tbody tr:nth-child(2) td { background: #f5f5f5; }
+.results-table tbody tr:nth-child(2):hover td { background: #e9ecef; }
+.results-table tbody tr:nth-child(3) td { background: #fdf6f0; }
+.results-table tbody tr:nth-child(3):hover td { background: #f8f1e6; }
+
+.rank-cell { font-size: 1rem; font-weight: 700; text-align: center; }
+.rank-1 { color: #b8860b; }
+.rank-2 { color: #6c757d; }
+.rank-3 { color: #8b4513; }
+.player-cell { text-align: left !important; }
+.player-name { font-size: 0.75rem; font-weight: 600; color: #2c3e50; }
+.score-cell  { background: #e3f2fd !important; font-size: 0.75rem; font-weight: 700; color: #1976d2; }
+.tens-cell   { background: #fff3cd !important; font-size: 0.75rem; font-weight: 700; color: #856404; }
+.final-cell  { background: #dbeafe !important; font-size: 0.75rem; font-weight: 700; color: #1d4ed8; }
+.part-cell   { font-size: 0.72rem; color: #888; }
+
+.stats-footer { background: white; border-top: 1px solid #dee2e6; padding: 6px 15px; display: flex; justify-content: space-around; font-size: 0.7rem; color: #6c757d; flex-shrink: 0; }
+.stat-item { text-align: center; }
+.stat-value { font-weight: 600; color: #28a745; }

static/css/pages/modern_player_analysis.css

@@ -0,0 +1,218 @@
+/* ============================================================
+   Modern player analysis page styles
+   ============================================================ */
+
+body {
+  background: #f5f5f5;
+  height: 100vh;
+  overflow: hidden;
+}
+
+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-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;
+}
+
+.tab-navigation { display: flex; gap: 15px; margin-bottom: 25px; }
+
+.tab-btn {
+  flex: 1; background: #f8f9fa; border: 2px solid #e9ecef; padding: 14px 24px;
+  cursor: pointer; font-size: 1.05rem; font-weight: 600; color: #666;
+  border-radius: 8px; transition: all 0.3s ease; min-height: 50px;
+}
+.tab-btn.active { background: #28a745; border-color: #1e7e34; color: white; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); }
+.tab-btn:hover { background: #28a745; border-color: #1e7e34; color: white; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); transform: translateY(-2px); }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+/* Tournament Leaders */
+.tournament-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 30px; }
+
+.tournament-card {
+  border-radius: 20px;
+  padding: 35px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.1);
+  position: relative;
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+}
+.tournament-card:hover { box-shadow: 0 15px 45px rgba(0,0,0,0.15), 0 8px 25px rgba(0,0,0,0.1); }
+.tournament-card[data-type="20_targets"] { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); }
+.tournament-card[data-type="40_targets"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+.tournament-card[data-type="4_targets"]  { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
+
+.tournament-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; position: relative; z-index: 3; }
+
+.tournament-name {
+  font-size: 1.6rem; font-weight: 800; color: white;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
+  position: relative; display: flex; align-items: center; gap: 12px;
+}
+.tournament-card[data-type="20_targets"] .tournament-name::before { content: '⚡'; font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
+.tournament-card[data-type="40_targets"] .tournament-name::before { content: '💪'; font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
+.tournament-card[data-type="4_targets"]  .tournament-name::before { content: '🎯'; font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
+
+.tournament-date {
+  background: rgba(255,255,255,0.25); backdrop-filter: blur(10px); color: white;
+  padding: 8px 16px; border-radius: 25px; font-size: 0.75rem; font-weight: 700;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
+  text-transform: uppercase; letter-spacing: 0.8px; border: 1px solid rgba(255,255,255,0.2);
+}
+
+.leaders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; position: relative; z-index: 3; }
+
+.leader-category {
+  background: white; border-radius: 16px; padding: 28px; text-align: center;
+  border: 2px solid #e9ecef; transition: box-shadow 0.3s ease;
+  position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+}
+.leader-category:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
+
+.leader-category::before {
+  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
+  border-radius: 16px 16px 0 0;
+}
+.tournament-card[data-type="20_targets"] .leader-category::before { background: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%); }
+.tournament-card[data-type="40_targets"] .leader-category::before { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); }
+.tournament-card[data-type="4_targets"]  .leader-category::before { background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%); }
+.leader-category:nth-child(2)::before { background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%) !important; }
+
+.category-title { font-size: 0.8rem; font-weight: 700; color: #6c757d; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px; }
+.leader-info { display: flex; flex-direction: column; gap: 10px; }
+.leader-name { font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 8px; line-height: 1.3; }
+
+.leader-score {
+  font-size: 1.8rem; font-weight: 800; padding: 12px 20px;
+  border-radius: 12px; border: 2px solid; position: relative;
+}
+.tournament-card[data-type="20_targets"] .leader-score { border-color: #ff6b6b; background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); color: #e53e3e; }
+.tournament-card[data-type="40_targets"] .leader-score { border-color: #667eea; background: linear-gradient(135deg, #f8f9ff 0%, #e8ebff 100%); color: #667eea; }
+.tournament-card[data-type="4_targets"]  .leader-score { border-color: #11998e; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); color: #059669; }
+.leader-category:nth-child(2) .leader-score { border-color: #fbbf24 !important; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; color: #d97706 !important; }
+
+/* Stats badges */
+.stats-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 20px; }
+.stat-badge { 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-badge:hover { transform: translateY(-2px); }
+.stat-icon { font-size: 1.5rem; margin-bottom: 8px; display: block; }
+.stat-number { font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 5px; }
+.stat-label { color: #666; font-size: 0.75rem; font-weight: 500; }
+
+/* Players split layout */
+.players-layout { display: flex; gap: 8px; height: calc(100vh - 50px); padding: 8px 20px 20px 20px; }
+
+.players-left-panel {
+  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
+  background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  overflow: hidden; border: 1px solid #e9ecef;
+}
+
+.players-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); border-radius: 12px 12px 0 0; flex-shrink: 0; }
+.players-panel-header-title { font-size: 0.8rem; font-weight: 700; color: white; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.players-panel-count { font-size: 0.7rem; font-weight: 600; background: rgba(255,255,255,0.25); color: white; padding: 2px 7px; border-radius: 10px; }
+
+.players-sort-bar { padding: 6px 8px; border-bottom: 1px solid #e9ecef; flex-shrink: 0; background: #f8f9fa; display: flex; flex-direction: column; gap: 5px; }
+.players-search { width: 100%; border: 1px solid #dee2e6; border-radius: 6px; padding: 5px 9px; font-size: 0.78rem; outline: none; background: white; }
+.players-search:focus { border-color: #28a745; }
+
+.players-sort-btns { display: flex; gap: 4px; }
+.psort-btn { flex: 1; padding: 2px 7px; border: 2px solid #dee2e6; background: white; border-radius: 6px; cursor: pointer; font-size: 0.6rem; font-weight: 600; color: #666; transition: all 0.15s; white-space: nowrap; text-align: center; }
+.psort-btn.active { background: #28a745; border-color: #1e7e34; color: white; }
+.psort-btn:hover:not(.active) { border-color: #28a745; color: #28a745; }
+
+.player-tree-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
+.player-tree-list::-webkit-scrollbar { width: 5px; }
+.player-tree-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+
+.player-tree-item { display: flex; align-items: center; padding: 8px 10px 8px 14px; cursor: pointer; border-left: 4px solid transparent; gap: 8px; transition: all 0.15s; }
+.player-tree-item:hover { background: #f0faf3; border-left-color: #7dcf95; }
+.player-tree-item.active { background: #28a745; border-left-color: #28a745; font-weight: 700; color: white; }
+.player-tree-avatar { width: 28px; height: 28px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #666; flex-shrink: 0; }
+.player-tree-item.active .player-tree-avatar { background: rgba(255,255,255,0.25); color: white; }
+.player-tree-info { flex: 1; min-width: 0; }
+.player-tree-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.player-tree-meta { font-size: 0.65rem; color: #999; }
+.player-tree-item.active .player-tree-meta { color: rgba(255,255,255,0.75); }
+.player-tree-score { font-size: 0.75rem; font-weight: 700; color: #28a745; flex-shrink: 0; }
+.player-tree-item.active .player-tree-score { color: rgba(255,255,255,0.9); }
+.player-tree-rank-num { width: 24px; height: 24px; border-radius: 50%; background: #cfe2ff; color: #084298; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; flex-shrink: 0; }
+.player-tree-item.active .player-tree-rank-num { background: rgba(255,255,255,0.3); color: white; }
+
+.players-right-panel { flex: 1; overflow: hidden; min-width: 0; display: flex; flex-direction: column; }
+#playerDetailEmbed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+#playerDetailEmbed iframe { flex: 1; min-height: 0; height: 100%; width: 100%; border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+
+.player-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ccc; gap: 10px; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid #e9ecef; }
+.player-placeholder-icon { font-size: 2.5rem; }
+.player-placeholder-text { font-size: 0.95rem; }
+
+/* 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: #28a745; 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: #28a745; }
+.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: #28a745; color: white; border-color: #28a745; }
+.filter-btn:hover { border-color: #28a745; transform: translateY(-1px); }
+
+/* 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; }
+
+.player-chart { margin-top: 15px; height: 80px; position: relative; }
+.chart-canvas { width: 100%; height: 100%; }
+
+.loading { text-align: center; padding: 20px; color: #666; }
+.loading-spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid #28a745; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; }
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+.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; }
+
+@media (max-width: 768px) {
+  body { height: auto; overflow: visible; }
+  .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-badges { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
+  .tournament-leaders { grid-template-columns: 1fr; gap: 20px; }
+  .tournament-card { padding: 25px; }
+  .tournament-name { font-size: 1.3rem; gap: 8px; }
+  .tournament-header { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
+  .leaders-grid { grid-template-columns: 1fr; gap: 20px; }
+  .leader-category { padding: 24px; }
+  .leader-score { font-size: 1.6rem; padding: 10px 16px; }
+  .tab-navigation { flex-direction: column; gap: 10px; }
+  .tab-btn { padding: 12px 20px; font-size: 0.95rem; min-height: 45px; }
+}

static/css/pages/modern_player_stats.css

@@ -0,0 +1,260 @@
+/* ============================================================
+   Modern player stats page styles
+   ============================================================ */
+
+body {
+  background: #f5f5f5;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+body.in-iframe .navbar { display: none; }
+body.in-iframe { background: transparent; }
+
+/* Stats Overview */
+.stats-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 20px; }
+.stat-badge { 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-badge:hover { transform: translateY(-2px); }
+.stat-icon { font-size: 1.5rem; margin-bottom: 8px; display: block; }
+.stat-number { font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 5px; }
+.stat-label { color: #666; font-size: 0.75rem; font-weight: 500; }
+
+.stat-badge.tournament-badge { display: flex; flex-direction: column; justify-content: center; }
+.tournament-scores { display: flex; gap: 10px; margin-bottom: 8px; justify-content: center; }
+.tournament-score-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.tournament-type { font-size: 0.65rem; color: #999; font-weight: 600; text-transform: uppercase; }
+.tournament-emoji { font-size: 1rem; margin-bottom: 2px; }
+.tournament-best { font-size: 1.3rem; font-weight: bold; color: #28a745; }
+
+/* Charts Section */
+.charts-section { min-height: 450px; flex-shrink: 0; margin-top: 30px; }
+.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 #28a745; 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: #28a745; margin-bottom: 3px; }
+
+.charts-panel { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 18px; display: flex; flex-direction: column; width: 100%; }
+
+/* Tournament type buttons */
+.tournament-type-buttons { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
+.type-btn { background: #f8f9fa; border: 2px solid #e9ecef; padding: 12px 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; font-weight: 600; color: #333; display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; }
+.type-btn:hover { border-color: #28a745; transform: translateY(-1px); }
+.type-btn.active { color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
+.type-btn.active.targets-40 { background: #9C27B0; border-color: #9C27B0; }
+.type-btn.active.targets-20 { background: #FF9800; border-color: #FF9800; }
+.type-btn.active.targets-4  { background: #4CAF50; border-color: #4CAF50; }
+.type-btn.targets-40:hover { border-color: #9C27B0; }
+.type-btn.targets-20:hover { border-color: #FF9800; }
+.type-btn.targets-4:hover  { border-color: #4CAF50; }
+
+.chart-info { margin-bottom: 15px; }
+.chart-info h3 { margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-weight: 600; }
+.chart-stats { display: flex; justify-content: space-around; align-items: center; gap: 20px; font-size: 0.85rem; padding: 12px; }
+.chart-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
+.chart-stat-value { font-size: 1.1rem; font-weight: bold; color: #333; }
+.chart-stat-label { color: #666; font-size: 0.75rem; text-transform: uppercase; }
+
+/* Accuracy stats */
+.accuracy-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; justify-content: center; }
+.accuracy-stat { display: flex; flex-direction: column; align-items: center; padding: 4px 8px; background: white; border-radius: 6px; border: 1px solid #e9ecef; min-width: 35px; transition: transform 0.2s ease; }
+.accuracy-stat:hover { transform: scale(1.05); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
+.accuracy-value { font-weight: bold; color: #333; font-size: 0.9rem; }
+.accuracy-label { color: #666; font-size: 0.65rem; font-weight: 500; }
+
+.accuracy-charts-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
+.accuracy-chart-container { position: relative; min-height: 400px; max-height: 500px; padding: 20px 0; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
+.accuracy-chart-container canvas { max-width: 100% !important; max-height: 100% !important; width: 100% !important; height: auto !important; }
+.accuracy-charts-container > div:nth-child(2) .accuracy-chart-container { min-height: 350px; max-height: 420px; }
+
+.chart-container { position: relative; flex: 1; min-height: 400px; max-height: 500px; padding: 15px 0; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
+.chart-container canvas { max-width: calc(100% - 10px) !important; max-height: calc(100% - 10px) !important; width: 100% !important; height: auto !important; }
+
+.no-data { display: flex; align-items: center; justify-content: center; height: 200px; color: #999; font-size: 0.9rem; font-style: italic; background: #f8f9fa; border-radius: 6px; border: 1px dashed #dee2e6; }
+
+.accuracy-section { background: transparent; border-radius: 0; padding: 0; margin-bottom: 0; border: none; width: 100%; }
+.accuracy-section h3 { margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-weight: 600; }
+.performance-section { background: #f8f9fa; border-radius: 12px; padding: 20px; border: 1px solid #e9ecef; }
+.performance-section h3 { margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-weight: 600; }
+
+/* History section */
+.bottom-section { min-height: auto; flex-shrink: 0; margin-top: 30px; }
+.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: 400px; border: 1px solid #e9ecef; margin-top: 30px; }
+
+.history-tabs { display: flex; gap: 10px; margin: 20px 0; }
+.history-tab { background: #f8f9fa; border: 2px solid #e9ecef; padding: 10px 16px; cursor: pointer; font-size: 0.95rem; font-weight: 600; color: #666; border-radius: 8px; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; }
+.history-tab:hover { background: #e9ecef; color: #333; border-color: #dee2e6; }
+.history-tab.active { background: #28a745; border-color: #28a745; color: white; }
+
+.history-tab-content { display: none; flex: 1; overflow-y: auto; }
+.history-tab-content.active { display: flex; flex-direction: column; }
+.table-wrapper { flex: 1; overflow-y: auto; border-radius: 8px; border: 1px solid #e9ecef; }
+
+.history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+.history-table thead { background: #f8f9fa; position: sticky; top: 0; }
+.history-table th { padding: 12px 16px; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #dee2e6; }
+.history-table tbody tr { border-bottom: 1px solid #e9ecef; transition: background 0.2s ease; }
+.history-table td { padding: 12px 16px; color: #555; }
+.history-table-row { cursor: pointer; }
+.history-table-row:hover { background: #f8f9fa; }
+
+.tournament-type-badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; background: #e3f2fd; color: #1976d2; }
+.date-cell { color: #666; font-size: 0.9rem; white-space: nowrap; }
+.score-cell { color: #333; font-weight: 600; }
+.view-link { color: #28a745; font-weight: 600; transition: color 0.2s ease; }
+.history-table-row:hover .view-link { color: #1e7e34; }
+
+/* Placer stats */
+.placer-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; margin-top: 20px; }
+.placer-stat-card { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid #e9ecef; border-radius: 10px; padding: 16px; text-align: center; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.placer-stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%); }
+.placer-stat-value { font-size: 1.8rem; font-weight: 700; color: #28a745; margin-bottom: 4px; }
+.placer-stat-label { font-size: 0.75rem; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
+.placer-stat-count { font-size: 1.4rem; font-weight: 700; color: #333; }
+
+/* Overall accuracy */
+.overall-accuracy-card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 24px; margin-bottom: 30px; border: 1px solid #e9ecef; }
+.overall-content-wrapper { display: flex; gap: 20px; margin-top: 20px; align-items: center; }
+.overall-chart-left { flex: 0 0 70%; min-height: 300px; display: flex; align-items: center; justify-content: center; }
+.overall-radar-right { flex: 0 0 30%; min-height: 280px; display: flex; align-items: center; justify-content: center; }
+.overall-radar-right canvas { max-width: 100%; max-height: 100%; }
+
+/* Shot count cards */
+.shot-count-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 12px; margin-top: 25px; padding-top: 20px; border-top: 1px solid #e9ecef; }
+.shot-count-card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid #e9ecef; border-radius: 10px; padding: 12px; text-align: center; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px; }
+.shot-count-card:hover { box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15); transform: translateY(-2px); border-color: #28a745; }
+.shot-score { font-size: 1.3rem; font-weight: bold; color: #28a745; margin-bottom: 8px; }
+.shot-count { font-size: 1.8rem; font-weight: bold; color: #333; }
+
+.history-list { flex: 1; overflow-y: auto; padding-right: 8px; min-height: 200px; max-height: 320px; }
+.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; }
+
+/* History items */
+.history-item {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e8f4fd 100%);
+  border-radius: 12px; padding: 16px; margin-bottom: 12px; transition: all 0.3s ease;
+  border: 1px solid rgba(33, 150, 243, 0.1); position: relative; overflow: hidden;
+  display: flex; justify-content: space-between; align-items: center;
+}
+.history-item::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%); opacity: 0; transition: opacity 0.3s ease; }
+.history-item:hover::before { opacity: 1; }
+.history-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(33, 150, 243, 0.15); background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-color: rgba(33, 150, 243, 0.2); }
+
+.history-item-link { display: block; cursor: pointer; transition: all 0.3s ease; color: inherit; }
+.history-item-link:hover .history-item { transform: translateY(-4px); box-shadow: 0 12px 35px rgba(33, 150, 243, 0.35); background: linear-gradient(135deg, #c5dff8 0%, #a5d6fd 100%); border-color: rgba(33, 150, 243, 0.4); }
+
+.league-history-item-link { display: block; cursor: pointer; transition: all 0.3s ease; color: inherit; }
+.league-history-item-link:hover .league-history-item { transform: translateY(-4px); box-shadow: 0 12px 35px rgba(156, 39, 176, 0.35); background: linear-gradient(135deg, #d1a4e0 0%, #c878d8 100%); border-color: rgba(156, 39, 176, 0.3); }
+
+.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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.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%, #f0e6ff 100%); border-radius: 12px; padding: 16px; margin-bottom: 12px; transition: all 0.3s ease; border: 1px solid rgba(156, 39, 176, 0.1); position: relative; overflow: hidden; }
+.league-history-item::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%); opacity: 0; transition: opacity 0.3s ease; }
+.league-history-item:hover::before { opacity: 1; }
+.league-history-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(156, 39, 176, 0.15); background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%); border-color: rgba(156, 39, 176, 0.2); }
+
+.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-score-cell { padding: 8px 12px; font-weight: 600; font-size: 1rem; }
+
+.joker-tournament { background-color: #fff3e0 !important; border: 2px solid #ff9800 !important; }
+.excluded-tournament { background-color: #ffebee !important; border: 2px dashed #f44336 !important; }
+.removed-score { color: #d32f2f; text-decoration: line-through; font-weight: bold; }
+
+.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 { 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; }
+
+/* Single card ps-layout */
+.ps-layout { display: flex; gap: 8px; height: calc(100vh - 50px); padding: 8px 12px 10px; }
+body.in-iframe .ps-layout { height: 100vh; }
+
+.ps-card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid #e9ecef; overflow: hidden; display: flex; flex-direction: column; }
+.ps-left { flex: 1; min-width: 0; }
+
+.ps-topbar { display: flex; align-items: center; padding: 6px 12px; flex-shrink: 0; gap: 8px; background: #f8f9fa; border-bottom: 2px solid #e9ecef; border-radius: 10px 10px 0 0; }
+.ps-type-btns { display: flex; gap: 4px; flex-shrink: 0; }
+.ps-type-btns .type-btn { padding: 7px 10px; font-size: 0.7rem; border-radius: 6px; border: 2px solid #dee2e6; background: white; color: #666; cursor: pointer; font-weight: 600; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; width: auto; }
+.ps-type-btns .type-btn.active.targets-40 { background: #8b00ff; border-color: #6a00cc; color: white; }
+.ps-type-btns .type-btn.active.targets-20 { background: #fd7e14; border-color: #e06c0a; color: white; }
+.ps-type-btns .type-btn.active.targets-4  { background: #28a745; border-color: #1e7e34; color: white; }
+.ps-type-btns .type-btn:hover:not(.active) { border-color: #28a745; color: #28a745; }
+.ps-mini-stats { display: flex; gap: 20px; margin-left: auto; }
+.ps-mini-stats .chart-stat { text-align: center; }
+.ps-mini-stats .chart-stat-value { font-size: 0.85rem; font-weight: 700; color: #28a745; line-height: 1.1; }
+.ps-mini-stats .chart-stat-label { font-size: 0.6rem; color: #aaa; }
+
+.ps-sections { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
+.ps-section { display: flex; flex-direction: column; flex: 1; min-height: 0; border-bottom: 1px solid #e9ecef; padding: 6px 14px 4px; }
+.ps-section:last-child { border-bottom: none; }
+.ps-section-header { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; margin-bottom: 2px; }
+.ps-section-title { font-size: 0.7rem; font-weight: 700; color: #444; white-space: nowrap; }
+.ps-section-desc { font-size: 0.6rem; color: #aaa; }
+.ps-section-body { display: flex; gap: 8px; flex: 1; min-height: 0; }
+.ps-chart-wrap { flex: 1; min-width: 0; min-height: 0; position: relative; }
+.ps-chart-wrap canvas { width: 100% !important; height: 100% !important; }
+.ps-radar-wrap { flex: 0 0 30%; }
+
+.ps-shot-counts { flex: 0 0 72px; border-left: 1px solid #e9ecef; display: flex; flex-direction: column; justify-content: space-around; padding: 4px 8px; gap: 2px; }
+.ps-sc-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 0.62rem; }
+.ps-sc-badge { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.6rem; color: white; flex-shrink: 0; }
+.ps-sc-count { font-size: 0.68rem; font-weight: 600; color: #555; text-align: right; }
+
+.ps-right { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; }
+.ps-hist-header { display: flex; flex-direction: column; gap: 5px; padding: 7px 10px; flex-shrink: 0; background: #f8f9fa; border-bottom: 2px solid #e9ecef; border-radius: 10px 10px 0 0; }
+.ps-hist-title { font-size: 0.78rem; font-weight: 700; color: #444; }
+.ps-hist-tabs { display: flex; gap: 4px; }
+.ps-hist-tabs .history-tab { flex: 1; padding: 3px 6px; font-size: 0.65rem; border-radius: 6px; border: 2px solid #dee2e6; background: white; color: #555; cursor: pointer; font-weight: 600; transition: all 0.15s; white-space: nowrap; }
+.ps-hist-tabs .history-tab.active { background: #28a745; border-color: #1e7e34; color: white; }
+.ps-hist-tabs .history-tab:hover:not(.active) { border-color: #28a745; color: #28a745; }
+
+.ps-history-body { flex: 1; overflow-y: auto; min-height: 0; }
+.ps-history-body::-webkit-scrollbar { width: 4px; }
+.ps-history-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
+
+.ps-hist-item { display: flex; align-items: center; gap: 6px; padding: 7px 10px 7px 12px; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; border-bottom: 1px solid #f5f5f5; font-size: 0.78rem; }
+.ps-hist-item:hover { background: #f0faf3; border-left-color: #28a745; }
+.ps-hist-item.active { background: #28a745; border-left-color: #1e7e34; color: white; }
+.ps-hist-date { color: #888; font-size: 0.68rem; flex-shrink: 0; }
+.ps-hist-item.active .ps-hist-date { color: rgba(255,255,255,0.8); }
+.ps-hist-info { flex: 1; min-width: 0; }
+.ps-hist-score { font-weight: 700; color: #28a745; flex-shrink: 0; font-size: 0.88rem; }
+.ps-hist-item.active .ps-hist-score { color: white; }
+.ps-hist-arrow { color: #ddd; flex-shrink: 0; font-size: 0.72rem; }
+
+.ps-league-scores { display: flex; gap: 3px; flex-wrap: wrap; }
+.ps-ls { font-size: 0.68rem; padding: 1px 4px; border-radius: 4px; background: #f0f0f0; }
+.ps-ls-joker { opacity: 0.5; }
+.ps-ls-excl { text-decoration: line-through; color: #999; background: #fee; }
+
+@media (max-width: 1200px) { .top-section { grid-template-columns: 1fr; min-height: 320px; } }
+
+@media (max-width: 768px) {
+  .container { min-height: calc(100vh - 100px); padding: 10px; }
+  .stats-grid { grid-template-columns: 1fr; }
+  .history-section { min-height: 220px; }
+  .history-list { min-height: 150px; max-height: 200px; }
+  .chart-container { max-height: 350px; min-height: 300px; padding: 10px; }
+  .shot-count-cards { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px; margin-top: 20px; padding-top: 15px; }
+  .shot-count-card { min-height: 80px; padding: 10px; }
+  .shot-score { font-size: 1.1rem; margin-bottom: 5px; }
+  .shot-count { font-size: 1.5rem; }
+}

static/css/pages/results_calculator.css

@@ -0,0 +1,274 @@
+/* ============================================================
+   Results calculator page styles
+   ============================================================ */
+
+html, body { height: 100%; overflow: hidden; }
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.navbar { flex-shrink: 0; z-index: 100; }
+
+.content-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; position: relative; }
+
+.container {
+  flex: 1; overflow: hidden; width: 100%;
+  display: flex; flex-direction: row; align-items: stretch;
+  padding: 8px; box-sizing: border-box; gap: 8px; min-height: 0;
+}
+
+.calc-card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
+
+.col-middle { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
+.col-middle .calc-card.scoring-card { flex: 1; min-height: 0; }
+
+.header-section { display: none; }
+.header-section.tournament-4_targets  { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
+.header-section.tournament-20_targets { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); }
+.header-section.tournament-40_targets { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+.header-section.tournament-default    { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); }
+
+.header-section::before {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
+  pointer-events: none;
+}
+.header-section * { position: relative; z-index: 2; }
+
+.header-logo { height: 50px; max-width: 140px; object-fit: contain; margin-bottom: 15px; filter: brightness(1.2) contrast(1.1); background-color: white; padding: 8px; border-radius: 6px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }
+.header-title { font-size: 1.6rem; font-weight: 700; color: white; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+.header-subtitle { font-size: 1rem; color: rgba(255,255,255,0.95); margin-bottom: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
+
+.progress-info { display: none; }
+.progress-item { text-align: center; }
+.progress-number { font-size: 1.4rem; font-weight: 700; color: white; display: block; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+.progress-label { font-size: 0.75rem; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
+.global-actions { display: none; }
+
+.global-btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; }
+
+.fill-all-btn { background: #ff6b35; color: white; padding: 12px 28px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: all 0.2s ease; }
+.fill-all-btn:hover { background: #e55a2b; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); }
+.save-all-btn { background: #17a2b8; color: white; }
+.save-all-btn:hover { background: #138496; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3); }
+
+/* Search bar */
+.players-search-bar { padding: 8px 10px; border-bottom: 1px solid #e9ecef; flex-shrink: 0; }
+.players-search-wrap { display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; background: white; overflow: hidden; transition: border-color 0.15s; transform: none !important; }
+.players-search-wrap:hover { transform: none !important; box-shadow: none; }
+.players-search-wrap:focus-within { border-color: #28a745; }
+.players-search-input { flex: 1; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 5px 8px; font-size: 0.8rem; background: transparent; outline: none !important; min-width: 0; transform: none !important; }
+.players-search-clear { width: 26px; height: 26px; border: none; background: transparent; cursor: pointer; font-size: 0.7rem; color: #adb5bd; display: none; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.15s; padding: 0; transform: none !important; }
+.players-search-clear.visible { display: flex; }
+.players-search-clear:hover { color: #dc3545; transform: none !important; }
+
+/* Participants list */
+.participants-list {
+  display: flex; flex-direction: column; gap: 8px;
+  width: 240px; flex-shrink: 0; box-sizing: border-box;
+  padding: 12px; overflow-y: auto; overflow-x: hidden;
+  flex: 1; min-height: 0;
+}
+.participants-list::-webkit-scrollbar { width: 8px; }
+.participants-list::-webkit-scrollbar-track { background: transparent; }
+.participants-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
+.participants-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
+
+.participant-list-item {
+  padding: 10px 12px; background: white; border: 2px solid #9ca3af; border-radius: 4px;
+  cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: row;
+  gap: 8px; align-items: center; justify-content: space-between;
+}
+.participant-list-item:hover { background: #f9f9f9; }
+.participant-list-item.active { background: #f0f0f0; }
+.participant-list-item.in-progress { border-color: #ffc107; }
+.participant-list-item.active.in-progress { background: #fff5e6; }
+.participant-list-item.completed { border-color: #28a745; }
+.participant-list-item.active.completed { background: #e8f5e8; }
+.participant-list-item-content { display: flex; flex-direction: row; gap: 6px; align-items: center; width: 100%; min-width: 0; }
+.participant-list-item-name { font-size: 0.85rem; font-weight: 700; color: #000 !important; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.participant-list-item-score { font-size: 0.7rem; font-weight: 700; color: #28a745 !important; min-width: fit-content; }
+.participant-list-item-tens { font-size: 0.7rem; font-weight: 700; color: #ffc107 !important; min-width: fit-content; }
+
+/* Main card panel */
+.main-card-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: transparent; min-height: 0; gap: 0; }
+.main-card-panel-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: #999; font-size: 1.1rem; }
+
+.participant-card {
+  background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  padding: 0; width: 100%; border: 2px solid #9ca3af; transition: all 0.3s ease;
+  box-sizing: border-box; display: none; flex-direction: column;
+  overflow: hidden; flex: 1; min-height: 0;
+}
+.participants-list .participant-card { display: none; }
+.main-card-panel .participant-card.active { display: flex; }
+.participant-card.completed { border-color: #28a745; box-shadow: 0 4px 16px rgba(40, 167, 69, 0.15); }
+.participant-card.in-progress { border-color: #ffc107; box-shadow: 0 6px 24px rgba(255, 193, 7, 0.25); }
+.main-card-panel .participant-card.active { background: #f5f7fa; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+
+.card-header-top {
+  background: white; border-bottom: 1px solid #e9ecef;
+  display: flex; flex-direction: row; justify-content: space-between;
+  align-items: center; padding: 14px 16px; flex-shrink: 0;
+  width: 100%; gap: 12px; transition: all 0.2s ease;
+}
+
+.collapse-icon { display: none; }
+
+.header-info { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; width: 100%; gap: 20px; flex: 1; min-width: 0; position: relative; }
+.header-info .player-name { flex: 0 1 auto; min-width: 0; }
+.header-info .player-stats { position: absolute; left: 50%; transform: translateX(-50%); flex: 0; }
+.header-actions { display: flex; gap: 8px; width: auto; justify-content: flex-end; flex-shrink: 0; }
+
+.header-btn { width: 40px; height: 40px; padding: 0; border: none; border-radius: 6px; font-size: 1.1rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.header-btn.clear-btn { background: #dc3545; color: white; }
+.header-btn.clear-btn:hover { background: #c82333; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(220, 53, 69, 0.25); }
+.header-btn.zero-fill-btn { background: #6c757d; color: white; }
+.header-btn.zero-fill-btn:hover { background: #5a6268; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(108, 117, 125, 0.25); }
+
+.participant-card.completed .card-header-top { background: #f0f8f5; border-bottom-color: #28a745; }
+.participant-card.completed .card-header-top:hover { background: #e8f5e8; }
+.participant-card.in-progress .card-header-top { background: #fffbf0; border-bottom-color: #ffc107; }
+.participant-card.in-progress .card-header-top:hover { background: #fff8e6; }
+
+.participant-header { background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%); border-bottom: 3px solid #e9ecef; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 14px; flex-shrink: 0; text-align: center; width: 100%; }
+.participant-card.completed .participant-header { background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); border-right-color: #28a745; }
+.participant-card.in-progress .participant-header { background: linear-gradient(135deg, #fffbf0 0%, #fff8e6 100%); border-right-color: #ffc107; }
+
+.participant-targets-wrapper { display: flex; flex-direction: column; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 10px 12px; padding-right: 4px; gap: 8px; transition: all 0.3s ease; max-height: 100%; }
+.participant-card.collapsed .participant-targets-wrapper { max-height: 0; overflow: hidden; padding: 0; }
+.participant-targets-wrapper::-webkit-scrollbar { width: 12px; }
+.participant-targets-wrapper::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
+.participant-targets-wrapper::-webkit-scrollbar-thumb { border-radius: 6px; border: 2px solid white; background-clip: padding-box; }
+.participant-card:not(.completed):not(.in-progress) .participant-targets-wrapper::-webkit-scrollbar-thumb { background: #9ca3af; }
+.participant-card:not(.completed):not(.in-progress) .participant-targets-wrapper::-webkit-scrollbar-thumb:hover { background: #6b7280; background-clip: padding-box; }
+.participant-card.completed .participant-targets-wrapper::-webkit-scrollbar-thumb { background: #28a745; }
+.participant-card.completed .participant-targets-wrapper::-webkit-scrollbar-thumb:hover { background: #1f7e34; background-clip: padding-box; }
+.participant-card.in-progress .participant-targets-wrapper::-webkit-scrollbar-thumb { background: #ffc107; }
+.participant-card.in-progress .participant-targets-wrapper::-webkit-scrollbar-thumb:hover { background: #e0a800; background-clip: padding-box; }
+
+.player-info { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
+.player-name { font-size: 1.05rem; font-weight: 700; color: #2c3e50; margin: 0; letter-spacing: 0.3px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.player-stats { display: flex; align-items: center; gap: 24px; font-size: 0.85rem; justify-content: center; flex: 0 0 auto; }
+.total-score { font-size: 1.2rem; font-weight: 700; color: #28a745 !important; text-align: center; }
+.score-label { color: #999; font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
+.tens-count { font-size: 1.2rem; font-weight: 700; color: #ffc107 !important; text-align: center; }
+.tens-label { color: #999; font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
+
+.completion-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
+.badge-done       { background: #28a745; color: white; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3); }
+.badge-pending    { background: #ffc107; color: #856404; box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3); }
+.badge-in-progress { background: #5a8fd1; color: white; box-shadow: 0 2px 8px rgba(90, 143, 209, 0.3); }
+.badge-not-started { background: #9ca3af; color: white; box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2); }
+.badge-completed  { background: #28a745; color: white; }
+
+.participant-info { display: flex; align-items: center; gap: 15px; }
+.participant-name { font-size: 1.4rem; font-weight: bold; color: #333; }
+.participant-id { background: #28a745; color: white; padding: 6px 15px; border-radius: 15px; font-size: 0.9rem; font-weight: bold; }
+
+.joker-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 12px; background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; transition: all 0.2s ease; }
+.joker-label:hover { background: #ffc107; border-color: #ff9800; }
+.joker-checkbox-calc { cursor: pointer; width: 18px; height: 18px; }
+.joker-checkbox-calc:disabled { cursor: not-allowed; opacity: 0.6; }
+.joker-text { font-size: 0.9rem; font-weight: 600; color: #856404; }
+
+/* Target grid */
+.targets-row { display: grid; gap: 6px; width: 100%; padding: 6px 0; }
+.targets-row.targets-4  { grid-template-columns: repeat(2, 1fr); }
+.targets-row.targets-20 { grid-template-columns: repeat(5, 1fr); }
+.targets-row.targets-40 { grid-template-columns: repeat(8, 1fr); }
+.targets-row .target-group { display: flex; flex-direction: column; width: 100%; }
+
+.target-group { border: 1px solid #e9ecef; border-radius: 4px; background: #f8f9fa; display: flex; flex-direction: column; gap: 4px; padding: 0; overflow: hidden; transition: all 0.2s ease; }
+.target-group.completed { border-color: #28a745; background: #f0f8f5; box-shadow: 0 2px 6px rgba(40, 167, 69, 0.1); }
+
+.target-number { background: linear-gradient(135deg, #f0f1f3 0%, #e8eaed 100%); border-bottom: 1px solid #e9ecef; font-size: 0.65rem; font-weight: 600; color: #495057; letter-spacing: 0; padding: 3px 4px; text-align: center; flex-shrink: 0; transition: all 0.2s ease; }
+.target-group.completed .target-number { background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); border-bottom-color: #28a745; color: #28a745; }
+
+.shots-container { display: flex; flex-direction: column; gap: 4px; padding: 4px; flex: 1; }
+.shots-container.shots-5 { gap: 3px; }
+
+.shot-input {
+  width: 100%; padding: 4px 2px; border: 1px solid #ddd; border-radius: 3px;
+  text-align: center; font-size: 0.75rem; font-weight: 700; color: #333;
+  background-color: white; min-height: 24px; transition: all 0.2s ease;
+}
+.shots-container.shots-5 .shot-input { min-height: 22px; font-size: 0.7rem; }
+.shot-input:focus { outline: none; border-color: #28a745; box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.3); }
+.shot-input.valid { border-color: #28a745; background: white; }
+.shot-input.ten { border-color: #ffc107; background: white; font-weight: 700; color: #ffc107; }
+
+/* Participant actions */
+.participant-actions {
+  display: flex; gap: 6px; padding: 8px; flex-shrink: 0;
+  align-items: center; justify-content: center; flex-direction: row;
+  border-top: 3px solid #e9ecef;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  width: 100%;
+}
+
+.action-btn { width: 38px; height: 38px; padding: 0; border: none; border-radius: 6px; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.clear-btn { background: #f8f9fa; border: 2px solid #dc3545; color: #dc3545; }
+.clear-btn:hover { background: #dc3545; color: white; transform: translateY(-1px); }
+.zero-fill-btn { background: #f8f9fa; border: 2px solid #6c757d; color: #6c757d; }
+.zero-fill-btn:hover { background: #6c757d; color: white; transform: translateY(-1px); }
+.auto-fill-btn { background: #ffc107; color: #856404; }
+.auto-fill-btn:hover { background: #e0a800; }
+
+/* Finish bar */
+.finish-section { background: #f8f9fa; padding: 10px 20px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 15px; flex-shrink: 0; width: 100%; box-sizing: border-box; }
+.finish-title { display: none; }
+.finish-description { display: none; }
+
+.finish-btn { background: #28a745; border: none; color: white; padding: 12px 28px; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: all 0.2s ease; white-space: nowrap; }
+.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; }
+.finish-section .warning-message { margin: 0; padding: 8px 12px; font-size: 0.9rem; }
+
+.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 #28a745; border-radius: 50%; animation: spin 1s linear infinite; }
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+/* Draft panel */
+.draft-panel { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }
+.draft-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; border-radius: 12px 12px 0 0; flex-shrink: 0; gap: 4px; }
+.draft-round-nav { background: #f0f1f3; border: 2px solid #dee2e6; border-radius: 6px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; color: #333; flex-shrink: 0; transition: all 0.15s ease; }
+.draft-round-nav:hover:not(:disabled) { background: #e9ecef; border-color: #28a745; color: #28a745; }
+.draft-round-nav:disabled { opacity: 0.35; cursor: not-allowed; }
+.draft-round-label { font-size: 0.78rem; font-weight: 700; color: #333; text-align: center; flex: 1; white-space: nowrap; }
+
+.draft-positions { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
+.draft-positions::-webkit-scrollbar { width: 6px; }
+.draft-positions::-webkit-scrollbar-track { background: transparent; }
+.draft-positions::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+
+.draft-position-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: white; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; }
+.draft-position-row:hover { border-color: #5a8fd1; background: #f0f5fc; }
+.draft-position-num { width: 26px; height: 26px; border-radius: 6px; background: #5a8fd1; color: white; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.draft-position-row.empty .draft-position-num { background: #9ca3af; }
+.draft-position-name { font-size: 0.8rem; font-weight: 600; color: #2c3e50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
+.draft-position-row.empty .draft-position-name { color: #adb5bd; font-style: italic; font-weight: 400; }
+
+.draft-panel-footer { margin-top: auto; padding: 12px; border-top: 1px solid #e9ecef; display: flex; justify-content: center; align-items: center; }
+
+@media (max-width: 1200px) {
+  .targets-row { padding: 8px; gap: 5px; }
+  .target-group { min-width: 50px; padding: 2px; }
+  .shot-input { width: 24px; padding: 1px; font-size: 0.55rem; min-height: 16px; }
+  .participant-header { gap: 15px; }
+  .player-name { font-size: 1rem; }
+}
+
+@media (max-width: 768px) {
+  .participant-header { flex-wrap: wrap; gap: 12px; padding: 12px; }
+  .targets-row { width: 100%; order: 3; padding: 6px; margin-top: 8px; border-top: 1px solid #e9ecef; }
+  .player-name { font-size: 0.9rem; }
+  .target-group { min-width: 45px; padding: 2px; }
+  .shot-input { width: 22px; padding: 1px; font-size: 0.5rem; min-height: 14px; }
+  .target-number { font-size: 0.5rem; }
+}

static/css/pages/results_display.css

@@ -0,0 +1,169 @@
+/* ============================================================
+   Results display page styles
+   ============================================================ */
+
+html, body {
+  background: #f5f5f5;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.navbar-logo { height: 40px; max-width: 120px; object-fit: contain; }
+.nav-btn.primary { background: #28a745; border-color: #1e7e34; color: white; }
+.nav-btn.primary:hover { background: #1e7e34; color: white; }
+
+/* Main TV Layout */
+.tv-container {
+  height: calc(100vh - 90px);
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 20px;
+  padding: 20px;
+}
+
+.left-column { display: flex; flex-direction: column; gap: 0; overflow: hidden; flex: 1; min-height: 0; }
+
+.results-header {
+  border-radius: 12px 12px 0 0;
+  padding: 15px;
+  text-align: center;
+  flex-shrink: 0;
+  color: white;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.results-header.tournament-4_targets  { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
+.results-header.tournament-20_targets { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); }
+.results-header.tournament-40_targets { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+
+.results-header::before {
+  content: ''; position: absolute; inset: 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: 60px; max-width: 160px; object-fit: contain; margin-bottom: 12px;
+  filter: brightness(1.2) contrast(1.1); background-color: white; padding: 8px;
+  border-radius: 8px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);
+}
+
+.results-title { font-size: 2rem; font-weight: 700; color: white; margin-bottom: 6px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+.results-subtitle { font-size: 1rem; color: rgba(255,255,255,0.95); margin-bottom: 12px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
+.results-meta { display: flex; justify-content: space-around; gap: 12px; }
+.meta-item { text-align: center; }
+.meta-number { font-size: 1.2rem; font-weight: 700; color: white; display: block; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+.meta-label { font-size: 0.65rem; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; }
+
+/* Podium */
+.podium-section {
+  background: white; border-radius: 0 0 12px 12px; padding: 12px;
+  flex: 1; display: flex; flex-direction: column; overflow: visible;
+  min-height: 0; border: 1px solid #e9ecef;
+}
+.podium-title { text-align: center; font-size: 0.9rem; font-weight: 700; color: #2c3e50; margin-bottom: 8px; }
+.podium-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 0.75fr 0.75fr 1.5fr; gap: 10px; overflow: hidden; flex: 1; min-height: 0; }
+
+.podium-card {
+  background: white; border-radius: 12px; padding: 12px 12px 18px 12px;
+  display: flex; flex-direction: column; align-items: center; gap: 8px;
+  transition: all 0.3s ease; position: relative; overflow: hidden;
+  border: 1px solid #e9ecef; border-top-width: 6px; justify-content: flex-end;
+}
+
+.podium-card::before {
+  content: ''; position: absolute; top: 6px; left: 1px; right: 1px; bottom: 1px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
+  pointer-events: none; z-index: 1; border-radius: 0 0 11px 11px;
+}
+.podium-card:hover { box-shadow: none; }
+
+.podium-card.rank-1 { border-top-color: #ffd700; border-color: #ffd700; background: linear-gradient(135deg, #fffbf0 0%, #fff9e6 100%); grid-column: 2; grid-row: 1 / 4; }
+.podium-card.rank-2 { border-top-color: #c0c0c0; border-color: #c0c0c0; background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%); grid-column: 1; grid-row: 2 / 4; }
+.podium-card.rank-3 { border-top-color: #cd7f32; border-color: #cd7f32; background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%); grid-column: 3; grid-row: 3; }
+
+.rank-display { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; z-index: 2; }
+.medal { font-size: 4.5rem; line-height: 1; }
+.rank-number { font-size: 1.9rem; font-weight: 900; 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; }
+
+.participant-info { flex: 1; min-width: 0; text-align: center; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.participant-name { font-size: 1rem; font-weight: 700; color: #2c3e50; margin: 0; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
+.participant-id { display: none; }
+
+.score-display { text-align: center; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; }
+.score-number { font-size: 1.8rem; font-weight: 900; color: #28a745; line-height: 1; }
+.tens-count { font-size: 1.2rem; color: #ffc107; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
+.score-label { font-size: 0.6rem; color: #999; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
+
+/* Right Column - Results Table */
+.right-column { background: white; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e9ecef; }
+.table-header { background: #f8f9fa; padding: 8px 12px; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
+.table-title { font-size: 0.95rem; font-weight: 600; color: #2c3e50; margin: 0; }
+.table-container { flex: 1; overflow: auto; min-height: 0; }
+
+.results-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
+.results-table th, .results-table td { padding: 4px 6px; text-align: center; border-bottom: 1px solid #f1f3f4; border-right: 1px solid #f1f3f4; }
+.results-table th { background: #f8f9fa; font-weight: 600; color: #495057; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.3px; position: sticky; top: 0; z-index: 10; }
+.results-table th.player-col { text-align: left; }
+.results-table th.score-col { background: #e3f2fd; }
+.results-table th.tens-col  { background: #fff3cd; }
+.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; text-align: center; }
+.rank-1 { color: #b8860b; }
+.rank-2 { color: #6c757d; }
+.rank-3 { color: #8b4513; }
+.player-cell { text-align: left !important; }
+.player-name { font-size: 0.75rem; font-weight: 600; color: #2c3e50; }
+.score-cell { background: #e3f2fd !important; font-size: 0.75rem; font-weight: 700; color: #1976d2; }
+.tens-cell  { background: #fff3cd !important; font-size: 0.75rem; font-weight: 700; color: #856404; }
+
+.stats-footer { background: white; border-top: 1px solid #dee2e6; padding: 6px 15px; display: flex; justify-content: space-around; font-size: 0.7rem; color: #6c757d; flex-shrink: 0; }
+.stat-item { text-align: center; }
+.stat-value { font-weight: 600; color: #28a745; }
+
+@media (max-width: 768px) {
+  .tv-container { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
+  .results-meta { gap: 15px; }
+  .meta-number { font-size: 1.5rem; }
+  .podium-section { padding: 20px 15px; }
+  .results-table { font-size: 0.8rem; }
+  .results-table th, .results-table td { padding: 8px 6px; }
+  .tens-cell, .score-cell { width: 60px; }
+}
+
+@media print {
+  .navbar, .debug-info { display: none !important; }
+  html, body { height: auto !important; overflow: visible !important; background: white !important; margin: 0; padding: 20px; }
+  .tv-container { display: block !important; height: auto !important; padding: 0 !important; gap: 0 !important; margin: 0 !important; }
+  .left-column { display: block !important; margin-bottom: 0; }
+  .results-header { background: white !important; color: #333 !important; box-shadow: none !important; border: 2px solid #ddd !important; border-radius: 8px !important; padding: 16px 20px !important; margin-bottom: 16px; overflow: visible !important; position: static !important; }
+  .results-header::before { display: none !important; }
+  .results-header * { position: static !important; z-index: auto !important; }
+  .header-logo { display: block !important; height: 50px !important; max-width: 140px !important; background-color: transparent !important; padding: 0 !important; border: none !important; filter: none !important; backdrop-filter: none !important; margin-bottom: 10px; }
+  .results-title { font-size: 20pt !important; font-weight: bold !important; color: #111 !important; text-shadow: none !important; margin-bottom: 4px; }
+  .results-subtitle { font-size: 11pt !important; color: #555 !important; text-shadow: none !important; margin-bottom: 10px; }
+  .results-meta { color: #333 !important; }
+  .meta-number { font-size: 14pt !important; color: #111 !important; text-shadow: none !important; }
+  .meta-label { font-size: 9pt !important; color: #666 !important; }
+  .podium-section { display: none !important; }
+  .right-column { background: white !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; display: block !important; margin: 0 !important; padding: 0 !important; }
+  .table-header { display: none !important; }
+  .results-table { margin-top: 0 !important; }
+}

static/css/pages/tournament.css

@@ -0,0 +1,322 @@
+/* ============================================================
+   Tournament management page styles
+   ============================================================ */
+
+html, body { height: 100%; overflow: hidden; }
+
+body { display: flex; flex-direction: column; }
+
+.container { flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: 8px !important; }
+
+.section { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 18px 20px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
+.section:has(.default-layout) { overflow: hidden; }
+.section-title { font-size: 1.2rem; font-weight: bold; color: #333; margin-bottom: 12px; border-bottom: 3px solid #28a745; padding-bottom: 6px; }
+
+/* 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: 0.9rem; margin-bottom: 8px; }
+.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; }
+
+/* League & Tournament container */
+.league-tournament-container { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 20px 0; flex: 1; min-height: 0; }
+.league-tournament-container.single-card { grid-template-columns: 1fr; }
+.league-tournament-container.no-stretch { flex: 0 0 auto; }
+.league-tournament-card { background: white; border: 2px solid #dee2e6; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
+.league-tournament-card h3 { font-size: 1.1rem; font-weight: bold; color: #333; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 3px solid #28a745; }
+.league-tournament-card.joker { background: #fff3cd; border-color: #ffeaa7; display: flex; flex-direction: column; }
+
+.compact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.compact-info-item { background: #f8f9fa; padding: 12px; border-radius: 6px; border: 1px solid #e9ecef; }
+.compact-info-label { font-size: 0.85rem; color: #666; margin-bottom: 4px; }
+.compact-info-value { font-size: 1.2rem; font-weight: bold; color: #333; }
+
+.unified-status { margin-bottom: 15px; padding: 10px; border-radius: 6px; text-align: center; font-weight: bold; font-size: 0.95rem; }
+.unified-status.league { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
+.unified-status.tournament { background: #cfe2ff; color: #084298; border: 1px solid #b6d4fe; }
+
+/* League Progress Bar */
+.league-progress-bar { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 2px solid #dee2e6; border-radius: 12px; padding: 20px; margin-bottom: 25px; width: 100%; box-sizing: border-box; }
+.progress-title { font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
+
+.tournaments-progress-horizontal { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; }
+
+.tournament-progress-dot {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  width: 80px; height: 80px; border-radius: 12px; border: 2.5px solid #dee2e6;
+  background: white; cursor: pointer; transition: all 0.3s ease; position: relative;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.tournament-progress-dot:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
+.tournament-progress-dot::after { content: '→'; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: #dee2e6; font-weight: bold; }
+.tournament-progress-dot:last-child::after { display: none; }
+
+.dot-number { font-size: 1.6rem; font-weight: bold; color: #495057; margin-bottom: 2px; }
+.dot-status { font-size: 1.3rem; line-height: 1; }
+
+.tournament-progress-dot.pending { background: #f8f9fa; border-color: #dee2e6; }
+.tournament-progress-dot.pending .dot-number { color: #adb5bd; }
+
+.tournament-progress-dot.active { background: linear-gradient(135deg, #cfe2ff 0%, #e7f1ff 100%); border-color: #1e7e34; border-width: 3px; box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3); }
+.tournament-progress-dot.active .dot-number { color: #1e7e34; animation: pulse-dot 1.5s infinite; }
+.tournament-progress-dot.active::after { color: #28a745; animation: pulse-arrow 1.5s infinite; }
+
+@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
+@keyframes pulse-arrow { 0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.6; } 50% { transform: translateY(-50%) translateX(4px); opacity: 1; } }
+
+.tournament-progress-dot.completed { background: linear-gradient(135deg, #d4edda 0%, #e8f5e8 100%); border-color: #1e7e34; }
+.tournament-progress-dot.completed .dot-number { color: #1e7e34; }
+.tournament-progress-dot.completed::after { color: #28a745; }
+
+/* Round progress */
+.rounds-progress-bar { margin-top: 20px; padding-top: 20px; border-top: 2px solid #dee2e6; display: flex; flex-direction: column; justify-content: center; }
+.rounds-progress-title { font-size: 0.95rem; font-weight: 600; color: #495057; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
+.rounds-progress-horizontal { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
+
+.round-progress-dot { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 10px; border: 2px solid #dee2e6; background: white; cursor: pointer; transition: all 0.3s ease; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-size: 0.85rem; font-weight: bold; }
+.round-progress-dot:hover { cursor: default; }
+.round-progress-dot::after { content: '→'; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: #dee2e6; font-weight: bold; }
+.round-progress-dot:last-child::after { display: none; }
+.round-progress-dot.pending { background: #f8f9fa; border-color: #dee2e6; color: #adb5bd; }
+.round-progress-dot.active { background: linear-gradient(135deg, #cfe2ff 0%, #e7f1ff 100%); border-color: #1e7e34; border-width: 2px; color: #1e7e34; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); }
+.round-progress-dot.active::after { color: #28a745; }
+.round-progress-dot.completed { background: linear-gradient(135deg, #d4edda 0%, #e8f5e8 100%); border-color: #1e7e34; color: #1e7e34; }
+.round-progress-dot.completed::after { color: #28a745; }
+
+/* Tournament cards */
+.tournaments-progress-container { margin-top: 30px; }
+.tournaments-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 20px; max-width: 600px; }
+
+.tournament-card { background: white; border: 2px solid #dee2e6; border-radius: 12px; padding: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; }
+.tournament-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #dee2e6; transition: all 0.3s ease; }
+.tournament-card.pending { opacity: 0.7; background: #f8f9fa; }
+.tournament-card.pending::before { background: linear-gradient(90deg, #6c757d 0%, #95a3b3 100%); }
+.tournament-card.active { border-color: #28a745; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); }
+.tournament-card.active::before { background: linear-gradient(90deg, #28a745 0%, #1e7e34 100%); }
+.tournament-card.completed { opacity: 0.8; }
+.tournament-card.completed::before { background: linear-gradient(90deg, #28a745 0%, #20c997 100%); }
+
+.tournament-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
+.tournament-card-number { font-size: 1.4rem; font-weight: bold; color: #28a745; background: #e7f1ff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+.tournament-card.pending .tournament-card-number { background: #e9ecef; color: #6c757d; }
+.tournament-card.completed .tournament-card-number { background: #d4edda; color: #28a745; }
+
+.tournament-card-status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; text-align: center; }
+.tournament-card.pending .tournament-card-status { background: #e9ecef; color: #6c757d; }
+.tournament-card.active .tournament-card-status { background: #cfe2ff; color: #084298; animation: pulse 2s infinite; }
+.tournament-card.completed .tournament-card-status { background: #d4edda; color: #155724; }
+
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+
+.tournament-card-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
+.tournament-card-info-item { background: #f8f9fa; padding: 10px; border-radius: 6px; text-align: center; }
+.tournament-card-info-label { font-size: 0.8rem; color: #666; margin-bottom: 4px; }
+.tournament-card-info-value { font-size: 1.1rem; font-weight: bold; color: #333; }
+.tournament-card-actions { display: flex; gap: 10px; flex-direction: column; }
+
+.tournament-card-btn { padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.9rem; transition: all 0.2s ease; text-decoration: none; text-align: center; }
+.tournament-card-btn.start { background: #28a745; color: white; }
+.tournament-card-btn.start:hover { background: #218838; transform: translateY(-2px); }
+.tournament-card-btn.disabled { background: #e9ecef; color: #6c757d; cursor: not-allowed; }
+.tournament-card-btn.disabled:hover { transform: none; }
+.tournament-card-check { font-size: 2rem; color: #28a745; text-align: center; margin: 10px 0; }
+
+.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; }
+
+/* Default two-column layout */
+.default-layout { display: grid; grid-template-columns: 340px 1fr; gap: 0; flex: 1; overflow: hidden; min-height: 0; }
+.default-left { border-right: 2px solid #e9ecef; padding-right: 20px; overflow-y: auto; display: flex; flex-direction: column; }
+.default-right { padding-left: 20px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
+
+@media (max-width: 900px) {
+  .default-layout { grid-template-columns: 1fr; overflow-y: auto; }
+  .default-left { border-right: none; border-bottom: 2px solid #e9ecef; padding-right: 0; padding-bottom: 16px; margin-bottom: 16px; overflow: visible; }
+  .default-right { padding-left: 0; }
+}
+
+.type-options-vertical { grid-template-columns: 1fr !important; }
+
+/* Tournament type selection */
+.tournament-type-selection { background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 8px; padding: 12px; margin: 10px 0; }
+.type-title { font-size: 0.95rem; font-weight: bold; color: #333; margin-bottom: 10px; }
+.type-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
+
+.type-option { background: white; border: 2px solid #dee2e6; border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: all 0.3s ease; text-align: left; position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; }
+.type-option::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; background: #dee2e6; transition: all 0.3s ease; }
+
+.type-option[data-type="4_targets"] { border-color: #11998e; }
+.type-option[data-type="4_targets"]:hover { border-color: #0f766e; box-shadow: 0 4px 15px rgba(17, 153, 142, 0.25); transform: translateY(-2px); }
+.type-option[data-type="4_targets"].selected { border-color: #0f766e; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
+.type-option[data-type="4_targets"]::before { background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%); }
+
+.type-option[data-type="20_targets"] { border-color: #ff6b6b; }
+.type-option[data-type="20_targets"]:hover { border-color: #e53e3e; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.25); transform: translateY(-2px); }
+.type-option[data-type="20_targets"].selected { border-color: #e53e3e; background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); }
+.type-option[data-type="20_targets"]::before { background: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%); }
+
+.type-option[data-type="40_targets"] { border-color: #667eea; }
+.type-option[data-type="40_targets"]:hover { border-color: #5a67d8; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25); transform: translateY(-2px); }
+.type-option[data-type="40_targets"].selected { border-color: #5a67d8; background: linear-gradient(135deg, #f8f9ff 0%, #e8ebff 100%); }
+.type-option[data-type="40_targets"]::before { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); }
+
+.type-option[data-type="nabijanje"] { border-color: #f97316; }
+.type-option[data-type="nabijanje"]:hover { border-color: #ea580c; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.25); transform: translateY(-2px); }
+.type-option[data-type="nabijanje"].selected { border-color: #ea580c; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
+.type-option[data-type="nabijanje"]::before { background: linear-gradient(90deg, #f97316 0%, #fbbf24 100%); }
+
+.type-option input[type="radio"] { margin-right: 10px; width: 18px; height: 18px; }
+.type-option-text { flex: 1; min-width: 0; }
+.type-name { font-size: 1rem; font-weight: bold; color: #333; margin-bottom: 2px; }
+.type-description { font-size: 0.78rem; color: #666; line-height: 1.3; }
+
+/* Joker management */
+.joker-section { background: #fff3cd; border: 2px solid #ffeaa7; border-radius: 8px; padding: 20px; margin: 20px 0; display: flex; flex-direction: column; }
+.joker-players-card { background: white; border: 1px solid #ffd54f; border-radius: 8px; padding: 8px; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
+.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-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 510px; flex: 1; }
+.joker-player { background: white; border: 1px solid #dee2e6; border-radius: 6px; padding: 10px 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: 10px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
+.action-btn { background: #28a745; border: none; color: white; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: bold; transition: all 0.2s ease; min-width: 0; text-decoration: none !important; font-family: Arial, sans-serif; display: inline-block; }
+.action-btn:hover { background: #1e7e34; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); text-decoration: none !important; }
+.action-btn:focus, .action-btn:active, .action-btn:visited { text-decoration: none !important; }
+.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; }
+.action-btn.info { background: #007bff; border-color: #0056b3; }
+.action-btn.info:hover { background: #0056b3; box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4); }
+
+.player-count { margin: 10px 0; font-size: 0.95rem; color: #333; text-align: center; }
+.enabled-count { color: #28a745; font-weight: bold; font-size: 1.1rem; }
+.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; }
+
+/* Player management toolbar */
+.player-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
+.search-container { flex: 1; min-width: 140px; position: relative; }
+.search-input { width: 100%; padding: 7px 32px 7px 10px; border: 1.5px solid #e9ecef; border-radius: 6px; font-size: 0.88rem; transition: border-color 0.2s ease; box-sizing: border-box; }
+.search-input:focus { outline: none; border-color: #28a745; }
+.search-icon { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #6c757d; font-size: 0.9rem; }
+
+.filter-btn { padding: 6px 10px; border: 1.5px solid #e9ecef; background: white; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; }
+.filter-btn:hover { border-color: #28a745; background: #f8f9fa; }
+.filter-btn.active { background: #28a745; color: white; border-color: #28a745; }
+
+.add-player-row { display: flex; gap: 6px; margin-bottom: 8px; }
+.add-player-row input { flex: 1; padding: 7px 10px; border: 1.5px solid #ced4da; border-radius: 6px; font-size: 0.88rem; }
+.add-player-row input:focus { outline: none; border-color: #28a745; }
+.add-btn { background: #28a745; border: none; color: white; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.85rem; white-space: nowrap; }
+.add-btn:hover { background: #218838; }
+.add-btn:disabled { background: #6c757d; cursor: not-allowed; }
+
+.stats-bar { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; font-size: 0.82rem; color: #555; }
+.stats-bar strong { font-size: 0.95rem; }
+.stat-enabled { color: #28a745; }
+.stat-disabled { color: #dc3545; }
+.stat-total { color: #28a745; }
+
+/* Player list */
+.player-list { flex: 1; overflow-y: auto; min-height: 0; }
+.player-row { display: flex; align-items: center; gap: 0; padding: 0 4px; border-bottom: 1px solid #f0f0f0; min-height: 36px; transition: background 0.1s; cursor: pointer; user-select: none; }
+.player-row:last-child { border-bottom: none; }
+.player-row:hover { background: #f8f9fa; }
+.player-row.selected { background: #eaf4ff; }
+.player-row.disabled-player { opacity: 0.5; }
+
+.pr-dot { width: 8px; height: 8px; border-radius: 50%; background: #dee2e6; flex-shrink: 0; margin-right: 10px; margin-left: 4px; transition: background 0.15s; cursor: pointer; }
+.player-row:not(.disabled-player) .pr-dot { background: #28a745; }
+.pr-check { flex-shrink: 0; margin-right: 8px; cursor: pointer; }
+.pr-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pr-name input { width: 100%; padding: 2px 6px; border: 1.5px solid #28a745; border-radius: 4px; font-size: 0.88rem; font-weight: 500; }
+.pr-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0.35; transition: opacity 0.15s; }
+.player-row:hover .pr-actions { opacity: 1; }
+.pr-btn { padding: 3px 6px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.72rem; background: transparent; color: #555; transition: background 0.12s; }
+.pr-btn:hover { background: #e9ecef; }
+.pr-btn.del:hover { background: #f8d7da; color: #721c24; }
+
+/* Bulk action strip */
+.bulk-strip { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
+.bulk-btn { padding: 4px 10px; border: 1.5px solid #e9ecef; background: white; border-radius: 5px; cursor: pointer; font-size: 0.78rem; font-weight: 500; transition: all 0.15s; white-space: nowrap; }
+.bulk-btn:hover { border-color: #28a745; background: #f8fff9; }
+.bulk-btn.danger:hover { border-color: #dc3545; background: #fff5f5; }
+
+.stat-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
+.stat-number { font-weight: bold; font-size: 1.1rem; }
+.no-results { text-align: center; padding: 40px 20px; color: #6c757d; font-style: italic; }
+
+/* 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; }
+
+/* Config modal */
+.config-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1100; opacity: 0; visibility: hidden; transition: all 0.2s ease; }
+.config-modal-overlay.active { opacity: 1; visibility: visible; }
+.config-modal { background: white; border-radius: 12px; padding: 28px; width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); transform: scale(0.9); transition: transform 0.2s ease; }
+.config-modal-overlay.active .config-modal { transform: scale(1); }
+.config-modal h3 { margin: 0 0 18px 0; font-size: 1.1rem; color: #333; border-bottom: 3px solid #fd7e14; padding-bottom: 8px; }
+.config-row { margin-bottom: 16px; }
+.config-row label { display: block; font-size: 0.88rem; font-weight: 600; color: #555; margin-bottom: 6px; }
+.config-row input[type="number"] { width: 100%; padding: 9px 12px; border: 1.5px solid #dee2e6; border-radius: 6px; font-size: 1rem; box-sizing: border-box; }
+.config-row input[type="number"]:focus { outline: none; border-color: #fd7e14; }
+.config-preview { background: #fff8f3; border: 1.5px solid #ffd5b0; border-radius: 6px; padding: 10px 14px; font-size: 0.85rem; color: #7a3a00; margin-bottom: 18px; }
+.config-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
+
+@media (max-width: 1024px) { .league-tournament-container { grid-template-columns: 1fr; gap: 20px; } }
+
+@media (max-width: 1200px) {
+  .tournament-progress-dot { width: 70px; height: 70px; }
+  .dot-number { font-size: 1.3rem; }
+  .dot-status { font-size: 1.1rem; }
+  .tournament-progress-dot::after { font-size: 1.3rem; right: -20px; }
+  .tournaments-progress-horizontal { gap: 14px; }
+}
+
+@media (max-width: 768px) {
+  .league-progress-bar { padding: 16px; margin-bottom: 20px; }
+  .progress-title { font-size: 1rem; margin-bottom: 12px; }
+  .tournament-progress-dot { width: 65px; height: 65px; }
+  .dot-number { font-size: 1.2rem; }
+  .dot-status { font-size: 1rem; }
+  .tournament-progress-dot::after { font-size: 1.2rem; right: -18px; }
+  .tournaments-progress-horizontal { gap: 12px; }
+  .container { padding: 20px 15px; }
+  .player-toolbar { flex-wrap: wrap; }
+  .add-player-row { flex-wrap: wrap; }
+  .tournament-info, .league-info { grid-template-columns: 1fr; }
+  .type-options { grid-template-columns: 1fr; }
+  .action-buttons { flex-direction: column; align-items: center; }
+}
+
+@media (max-width: 600px) {
+  .league-progress-bar { padding: 12px; margin-bottom: 16px; }
+  .progress-title { font-size: 0.95rem; margin-bottom: 10px; }
+  .tournament-progress-dot { width: 60px; height: 60px; }
+  .dot-number { font-size: 1.1rem; margin-bottom: 1px; }
+  .dot-status { font-size: 0.9rem; }
+  .tournament-progress-dot::after { font-size: 1rem; right: -16px; }
+  .tournaments-progress-horizontal { gap: 10px; }
+}

templates/calculator.html

@@ -0,0 +1,443 @@
+<!DOCTYPE html>
+<html lang="sl">
+<head>
+  <meta charset="UTF-8" />
+  <title>Nabijanje</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/static/css/base.css">
+  <link rel="stylesheet" href="/static/css/navbar.css">
+  <link rel="stylesheet" href="/static/css/buttons.css">
+  <link rel="stylesheet" href="/static/css/pages/calculator.css">
+  <script src="/static/js/i18n.js"></script>
+</head>
+<body>
+  <div class="navbar">
+    <div class="navbar-title">💥 Nabijanje</div>
+    <div class="navbar-controls">
+      <a href="/" class="nav-btn">✕</a>
+    </div>
+  </div>
+
+  <div class="page">
+    <div class="main-card">
+
+      <!-- ── LEFT: config + stats + utils ── -->
+      <div class="left-panel">
+        <div class="left-header">
+          <h3>⚙️ Nastavitve</h3>
+        </div>
+        <div class="left-body">
+          <div class="setup-field">
+            <label>Število tarč</label>
+            <input type="number" id="inputTargets" class="setup-input" min="1" max="100" value="20" oninput="validateSetup()">
+          </div>
+          <div class="setup-field">
+            <label>Strelov na tarčo</label>
+            <input type="number" id="inputShots" class="setup-input" min="1" max="10" value="2" oninput="validateSetup()">
+            <span class="setup-hint">Maks. vrednost strela: 10</span>
+          </div>
+          <button class="gen-btn" id="startBtn" onclick="startCalculator()">Generiraj</button>
+        </div>
+
+        <div class="left-utils" id="leftUtils">
+          <button class="util-btn btn-zeros" onclick="fillZeros()">Zapolni 0</button>
+          <button class="util-btn btn-reset" onclick="resetScores()">Pobriši vse</button>
+        </div>
+
+        <div class="display-section">
+          <span class="display-section-title">📺 Prikaz na zaslonu</span>
+          <div class="display-toggle-row">
+            <span class="display-toggle-label">Omogoči prikaz</span>
+            <label class="toggle-switch">
+              <input type="checkbox" id="displayEnabled" onchange="saveDisplaySettings()">
+              <span class="toggle-track"></span>
+            </label>
+          </div>
+          <div class="display-camera-row">
+            <label for="displayCamera">Kamera</label>
+            <select id="displayCamera" class="camera-select" onchange="saveDisplaySettings()" disabled>
+              <option value="1">Kamera 1</option>
+              <option value="2">Kamera 2</option>
+              <option value="3">Kamera 3</option>
+              <option value="4">Kamera 4</option>
+              <option value="5">Kamera 5</option>
+              <option value="6">Kamera 6</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── MIDDLE: name bar → targets → add bar ── -->
+      <div class="middle-panel">
+
+        <div class="name-bar">
+          <span class="name-bar-label">👤</span>
+          <input type="text" id="inputName" class="name-input" placeholder="Ime in priimek" autocomplete="off">
+        </div>
+
+        <div class="middle-empty" id="middleEmpty">
+          <span class="empty-icon">🎯</span>
+          <span>Nastavi konfiguracijo in klikni Generiraj</span>
+        </div>
+        <div class="targets-wrapper" id="targetsWrapper">
+          <div class="targets-grid" id="targetsGrid"></div>
+        </div>
+
+        <div class="add-bar" id="addBar">
+          <div class="add-bar-score">
+            <span class="add-bar-pts" id="addBarPts">0</span>
+            <span class="add-bar-tens" id="addBarTens">0 × 10</span>
+          </div>
+          <div class="add-bar-meta">
+            <div class="add-bar-meta-text" id="addBarMeta"></div>
+            <div class="add-bar-progress">
+              <div class="add-bar-progress-fill" id="addBarProgress" style="width:0%"></div>
+            </div>
+          </div>
+          <button class="btn-add" id="addBtn" onclick="addToScoreboard()" disabled>+ Dodaj na lestvico</button>
+        </div>
+
+      </div>
+
+      <!-- ── RIGHT: scoreboard ── -->
+      <div class="score-panel">
+        <div class="score-header">
+          <h3>🏆 Lestvica</h3>
+          <span class="score-count" id="scoreCount">0</span>
+        </div>
+
+        <div class="score-empty" id="scoreEmpty">
+          <span class="empty-icon">🏅</span>
+          <span>Dodaj tekmovalce z gumbom<br><em>Dodaj na lestvico</em></span>
+        </div>
+
+        <div class="score-list" id="scoreList" style="display:none;"></div>
+
+        <div class="score-footer" id="scoreFooter" style="display:none;">
+          <button class="btn-clear-board" onclick="clearScoreboard()">Počisti lestvico</button>
+        </div>
+        <div class="score-print-footer" >
+          <button class="btn-print" onclick="printLeaderboard()">🖨️ Natisni lestvico</button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Print-only layout — hidden on screen, shown on print -->
+  <div id="printLayout" style="display:none;">
+    <div class="pl-header">
+      <img src="/static/logo.png" class="pl-logo" alt="Logo" onerror="this.style.display='none'">
+      <div class="pl-titles">
+        <div class="pl-title">🏆 Lestvica</div>
+        <div class="pl-subtitle">Rezultati nabijanja</div>
+      </div>
+      <div class="pl-meta" id="plMeta"></div>
+    </div>
+    <table class="pl-table">
+      <thead>
+        <tr>
+          <th style="width:50px;">Mesto</th>
+          <th>Tekmovalec</th>
+          <th class="right" style="width:80px;">Točke</th>
+          <th class="right" style="width:70px;">10-ke</th>
+        </tr>
+      </thead>
+      <tbody id="plBody"></tbody>
+    </table>
+  </div>
+
+  <script>
+    const STORAGE_KEY = 'kalkulator_lestvica';
+
+    let numTargets = 20;
+    let shotsPerTarget = 2;
+    let scores = {};
+    let scoreboard = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+
+    function saveScoreboard() {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(scoreboard));
+      fetch('/api/calculator/leaderboard', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(scoreboard)
+      }).catch(() => {});
+    }
+
+    // ── Display settings ───────────────────────────────────────────────────
+
+    function saveDisplaySettings() {
+      const enabled = document.getElementById('displayEnabled').checked;
+      const camera  = parseInt(document.getElementById('displayCamera').value);
+
+      document.getElementById('displayCamera').disabled = !enabled;
+
+      fetch('/api/calculator/display', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled, camera })
+      }).catch(() => {});
+    }
+
+    function loadDisplaySettings() {
+      fetch('/api/calculator/display')
+        .then(r => r.json())
+        .then(data => {
+          const enabled = !!data.enabled;
+          document.getElementById('displayEnabled').checked = enabled;
+          document.getElementById('displayCamera').value    = data.camera || 1;
+          document.getElementById('displayCamera').disabled = !enabled;
+        }).catch(() => {});
+    }
+
+    function validateSetup() {
+      const t = parseInt(document.getElementById('inputTargets').value);
+      const s = parseInt(document.getElementById('inputShots').value);
+      document.getElementById('startBtn').disabled = !(t >= 1 && t <= 100 && s >= 1 && s <= 10);
+    }
+
+    function startCalculator() {
+      numTargets     = parseInt(document.getElementById('inputTargets').value);
+      shotsPerTarget = parseInt(document.getElementById('inputShots').value);
+
+      scores = {};
+      for (let t = 1; t <= numTargets; t++) {
+        scores[t] = {};
+        for (let s = 1; s <= shotsPerTarget; s++) scores[t][s] = null;
+      }
+
+      document.getElementById('addBarMeta').textContent =
+        `${numTargets} tarč × ${shotsPerTarget} strel`;
+
+      buildGrid();
+
+      document.getElementById('middleEmpty').style.display = 'none';
+      document.getElementById('targetsWrapper').classList.add('visible');
+      document.getElementById('leftUtils').classList.add('visible');
+      document.getElementById('addBar').classList.add('visible');
+
+      updateStats();
+
+      const first = document.querySelector('.shot-input');
+      if (first) { first.focus(); first.select(); }
+    }
+
+    function buildGrid() {
+      const grid = document.getElementById('targetsGrid');
+      let cols;
+      if      (numTargets <= 4)  cols = numTargets;
+      else if (numTargets <= 10) cols = 5;
+      else if (numTargets <= 20) cols = 5;
+      else if (numTargets <= 40) cols = 8;
+      else                       cols = 10;
+      grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+
+      let html = '';
+      for (let t = 1; t <= numTargets; t++) {
+        html += `<div class="target-group" id="tg-${t}">
+          <div class="target-num">${t}</div>
+          <div class="shots-col">`;
+        for (let s = 1; s <= shotsPerTarget; s++) {
+          html += `<input type="number" class="shot-input" id="si-${t}-${s}"
+                     min="0" max="10" data-t="${t}" data-s="${s}"
+                     oninput="onShot(${t},${s},this.value)"
+                     onkeydown="onShotKey(event,${t},${s})">`;
+        }
+        html += `</div></div>`;
+      }
+      grid.innerHTML = html;
+    }
+
+    function onShot(t, s, raw) {
+      const input = document.getElementById(`si-${t}-${s}`);
+      let val = null;
+      if (raw !== '' && raw !== null) {
+        val = Math.max(0, Math.min(10, parseInt(raw) || 0));
+        if (input.value !== val.toString()) input.value = val;
+      }
+      scores[t][s] = val;
+      input.classList.remove('valid', 'ten');
+      if (val !== null) input.classList.add(val === 10 ? 'ten' : 'valid');
+      updateTargetGroup(t);
+      updateStats();
+    }
+
+    function onShotKey(e, t, s) {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        const inputs = Array.from(document.querySelectorAll('.shot-input'));
+        const idx = inputs.indexOf(document.getElementById(`si-${t}-${s}`));
+        const next = inputs[idx + 1];
+        if (next) { next.focus(); next.select(); }
+      }
+    }
+
+    function updateTargetGroup(t) {
+      const allFilled = Object.values(scores[t]).every(v => v !== null);
+      document.getElementById(`tg-${t}`).classList.toggle('completed', allFilled);
+    }
+
+    function updateStats() {
+      let total = 0, tens = 0, filled = 0;
+      const totalSlots = numTargets * shotsPerTarget;
+      for (let t = 1; t <= numTargets; t++)
+        for (let s = 1; s <= shotsPerTarget; s++) {
+          const v = scores[t][s];
+          if (v !== null) { total += v; filled++; if (v === 10) tens++; }
+        }
+
+      const pct = totalSlots ? (filled / totalSlots) * 100 : 0;
+
+      document.getElementById('addBarPts').textContent      = total;
+      document.getElementById('addBarTens').textContent     = `${tens} × 10`;
+      document.getElementById('addBarProgress').style.width = `${pct}%`;
+
+      document.getElementById('addBtn').disabled = (filled < totalSlots);
+    }
+
+    function addToScoreboard() {
+      const name = document.getElementById('inputName').value.trim() || 'Neznan';
+
+      let total = 0, tens = 0;
+      for (let t = 1; t <= numTargets; t++)
+        for (let s = 1; s <= shotsPerTarget; s++) {
+          const v = scores[t][s];
+          if (v !== null) { total += v; if (v === 10) tens++; }
+        }
+
+      const existing = scoreboard.find(e => e.name.toLowerCase() === name.toLowerCase());
+      if (existing) {
+        if (total > existing.score || (total === existing.score && tens > existing.tens)) {
+          existing.score = total;
+          existing.tens  = tens;
+        }
+      } else {
+        scoreboard.push({ name, score: total, tens, id: Date.now() });
+      }
+      scoreboard.sort((a, b) => b.score - a.score || b.tens - a.tens);
+
+      saveScoreboard();
+      renderScoreboard();
+
+      document.getElementById('inputName').value = '';
+      resetScoresQuiet();
+      document.getElementById('inputName').focus();
+    }
+
+    function removeFromScoreboard(id) {
+      scoreboard = scoreboard.filter(e => e.id !== id);
+      saveScoreboard();
+      renderScoreboard();
+    }
+
+    function clearScoreboard() {
+      if (!confirm('Počistiti celotno lestvico?')) return;
+      scoreboard = [];
+      saveScoreboard();
+      renderScoreboard();
+    }
+
+    function renderScoreboard() {
+      const list    = document.getElementById('scoreList');
+      const empty   = document.getElementById('scoreEmpty');
+      const footer  = document.getElementById('scoreFooter');
+      const counter = document.getElementById('scoreCount');
+
+      counter.textContent = scoreboard.length;
+
+      if (scoreboard.length === 0) {
+        empty.style.display  = '';
+        list.style.display   = 'none';
+        footer.style.display = 'none';
+        return;
+      }
+
+      empty.style.display  = 'none';
+      list.style.display   = '';
+      footer.style.display = '';
+
+      list.innerHTML = scoreboard.map((entry, idx) => {
+        const rank = computeRank(idx);
+        const rankClass = rank <= 3 ? `rank-${rank}` : '';
+        const medal = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank;
+        return `
+          <div class="score-row ${rankClass}">
+            <div class="rank-badge">${medal}</div>
+            <div class="score-name" title="Klikni za izbiro" onclick="document.getElementById('inputName').value='${entry.name.replace(/'/g, "\\'")}'">${entry.name}</div>
+            <div class="score-tens">${entry.tens}×10</div>
+            <div class="score-pts">${entry.score}</div>
+            <button class="score-del" onclick="removeFromScoreboard(${entry.id})" title="Odstrani">✕</button>
+          </div>`;
+      }).join('');
+    }
+
+    function fillZeros() {
+      for (let t = 1; t <= numTargets; t++) {
+        for (let s = 1; s <= shotsPerTarget; s++) {
+          if (scores[t][s] === null) {
+            scores[t][s] = 0;
+            const inp = document.getElementById(`si-${t}-${s}`);
+            inp.value = 0;
+            inp.classList.remove('ten');
+            inp.classList.add('valid');
+          }
+        }
+        updateTargetGroup(t);
+      }
+      updateStats();
+    }
+
+    function resetScoresQuiet() {
+      for (let t = 1; t <= numTargets; t++) {
+        for (let s = 1; s <= shotsPerTarget; s++) {
+          scores[t][s] = null;
+          const inp = document.getElementById(`si-${t}-${s}`);
+          if (inp) { inp.value = ''; inp.classList.remove('valid', 'ten'); }
+        }
+        const tg = document.getElementById(`tg-${t}`);
+        if (tg) tg.classList.remove('completed');
+      }
+      updateStats();
+    }
+
+    function resetScores() {
+      if (!confirm('Pobrisati vse vnose?')) return;
+      resetScoresQuiet();
+    }
+
+    function computeRank(idx) {
+      const e = scoreboard[idx];
+      return scoreboard.filter(o =>
+        o.score > e.score || (o.score === e.score && o.tens > e.tens)
+      ).length + 1;
+    }
+
+    function printLeaderboard() {
+      const medals = ['🥇','🥈','🥉'];
+      const rows = scoreboard.map((e, idx) => {
+        const rank = computeRank(idx);
+        const rc   = rank <= 3 ? `r${rank}` : '';
+        const med  = rank <= 3 ? medals[rank - 1] : rank;
+        return `<tr>
+          <td><span class="pl-rank ${rc}">${med}</span></td>
+          <td class="pl-name">${e.name}</td>
+          <td class="right pl-score">${e.score}</td>
+          <td class="right pl-tens">${e.tens}</td>
+        </tr>`;
+      }).join('');
+
+      document.getElementById('plBody').innerHTML = rows || '<tr><td colspan="4" style="text-align:center;color:#aaa;padding:20px;">Ni rezultatov</td></tr>';
+
+      const now = new Date();
+      document.getElementById('plMeta').innerHTML =
+        `${now.toLocaleDateString('sl-SI')}<br>${now.toLocaleTimeString('sl-SI', {hour:'2-digit',minute:'2-digit'})}<br>${scoreboard.length} tekmovalcev`;
+
+      window.print();
+    }
+
+    validateSetup();
+    renderScoreboard();
+    loadDisplaySettings();
+  </script>
+</body>
+</html>

templates/draft.html

@@ -9,576 +9,7 @@
   <link rel="stylesheet" href="/static/css/buttons.css">
   <link rel="stylesheet" href="/static/css/components.css">
   <link rel="stylesheet" href="/static/css/responsive.css">
-  <style>
+  <link rel="stylesheet" href="/static/css/pages/draft.css">
-    /* Draft-specific styles */
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: #f5f5f5;
-      font-family: Arial, sans-serif;
-      height: 100vh;
-      overflow: hidden;
-    }
-
-    .main-container {
-      height: calc(100vh - 70px);
-      display: flex;
-      flex-direction: column;
-      padding: 0px;
-      gap: 0px;
-    }
-
-    .tournament-header {
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-      padding: 10px 16px;
-      flex-shrink: 0;
-      margin: 8px 15px 0px 15px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-
-    .tournament-title {
-      font-size: 1rem;
-      font-weight: 700;
-      color: #333;
-      white-space: nowrap;
-    }
-
-    .tournament-stats {
-      color: #888;
-      font-size: 0.82rem;
-    }
-
-    .tournament-controls {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-left: auto;
-    }
-
-    .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: #28a745;
-      color: #28a745;
-    }
-
-    .round-nav-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      transform: none !important;
-    }
-
-    .current-round-display {
-      font-size: 1rem;
-      font-weight: bold;
-      color: #333;
-      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;
-      overflow-x: hidden;
-      padding: 10px;
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      margin: 8px 15px 8px 15px;
-    }
-
-    /* Custom scrollbar styling */
-    .rounds-container::-webkit-scrollbar {
-      width: 12px;
-    }
-
-    .rounds-container::-webkit-scrollbar-track {
-      background: #f5f5f5;
-      border-radius: 10px;
-    }
-
-    .rounds-container::-webkit-scrollbar-thumb {
-      background: #5a8fd1;
-      border-radius: 10px;
-      border: 2px solid #f5f5f5;
-    }
-
-    .rounds-container::-webkit-scrollbar-thumb:hover {
-      background: #4a7db8;
-    }
-
-    .round-row {
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-      overflow: hidden;
-      transition: all 0.3s ease;
-      display: flex;
-      flex-direction: row;
-      flex-shrink: 0;
-      min-height: 0;
-      border: 2px solid #e9ecef;
-      border-left: 5px solid #9ca3af;
-    }
-
-    .round-row.current {
-      border-left: 5px solid #5a8fd1;
-      border-color: #5a8fd1;
-      box-shadow: 0 6px 24px rgba(90, 143, 209, 0.25);
-    }
-
-    .round-row.completed {
-      border-left: 5px solid #28a745;
-      border-color: #28a745;
-      opacity: 0.98;
-      box-shadow: 0 4px 16px rgba(40, 167, 69, 0.15);
-    }
-
-    .round-row.waiting {
-      opacity: 0.8;
-      border-color: #d1d5db;
-    }
-
-    .round-header {
-      background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%);
-      border-right: 3px solid #e9ecef;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      padding: 14px 16px;
-      flex-shrink: 0;
-      text-align: center;
-      min-width: 130px;
-    }
-
-    .round-row.current .round-header {
-      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-      border-right-color: #5a8fd1;
-    }
-
-    .round-row.completed .round-header {
-      background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
-      border-right-color: #28a745;
-    }
-
-    .round-title {
-      font-size: 1.05rem;
-      font-weight: 700;
-      color: #333;
-      margin-bottom: 6px;
-      letter-spacing: 0.3px;
-    }
-
-    .round-badge {
-      padding: 4px 10px;
-      border-radius: 12px;
-      font-size: 0.7rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-    }
-
-    .current-badge {
-      background: #5a8fd1;
-      color: white;
-      box-shadow: 0 2px 8px rgba(90, 143, 209, 0.3);
-    }
-
-    .completed-badge {
-      background: #28a745;
-      color: white;
-      box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
-    }
-
-    .waiting-badge {
-      background: #9ca3af;
-      color: white;
-      box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2);
-    }
-
-    .positions-container {
-      flex: 1;
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      gap: 8px;
-      padding: 12px;
-      overflow: hidden;
-    }
-
-    .position-card {
-      background: white;
-      border: 2px solid #9ca3af;
-      border-radius: 10px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: row;
-      transition: all 0.3s ease;
-      box-shadow: 0 2px 8px rgba(156, 163, 175, 0.18);
-      min-height: 80px;
-      flex-shrink: 0;
-    }
-
-    .position-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 3px 12px rgba(156, 163, 175, 0.28);
-    }
-
-    /* Current round - blue cards */
-    .round-row.current .position-card {
-      border-color: #5a8fd1;
-      box-shadow: 0 2px 8px rgba(90, 143, 209, 0.25);
-    }
-
-    .round-row.current .position-card:hover {
-      box-shadow: 0 3px 12px rgba(90, 143, 209, 0.35);
-    }
-
-    .round-row.current .position-card .position-header {
-      background: linear-gradient(135deg, #5a8fd1 0%, #4a7db8 100%);
-    }
-
-    /* Completed round - green cards */
-    .round-row.completed .position-card {
-      border-color: #28a745;
-      box-shadow: 0 2px 8px rgba(40, 167, 69, 0.25);
-    }
-
-    .round-row.completed .position-card:hover {
-      box-shadow: 0 3px 12px rgba(40, 167, 69, 0.35);
-    }
-
-    .round-row.completed .position-card .position-header {
-      background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
-    }
-
-    /* Waiting round - gray cards */
-    .round-row.waiting .position-card {
-      border-color: #9ca3af;
-      box-shadow: 0 2px 8px rgba(156, 163, 175, 0.2);
-    }
-
-    .round-row.waiting .position-card:hover {
-      box-shadow: 0 3px 10px rgba(156, 163, 175, 0.3);
-    }
-
-    .round-row.waiting .position-card .position-header {
-      background: linear-gradient(135deg, #9ca3af 0%, #8b929f 100%);
-    }
-
-    .position-header {
-      background: #9ca3af;
-      padding: 12px 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      min-width: 50px;
-      width: 50px;
-      min-height: 80px;
-    }
-
-    .position-card.empty .position-header {
-      background: #9ca3af;
-    }
-
-    .position-number {
-      font-size: 2rem;
-      font-weight: 700;
-      color: white;
-      line-height: 1;
-    }
-
-    .position-body {
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex: 1;
-      background: white;
-      border-radius: 0 8px 8px 0;
-      overflow: visible;
-    }
-
-    .position-card.empty .position-body {
-      background: #f8f9fa;
-    }
-
-    .player-name {
-      font-size: 1.15rem;
-      font-weight: 600;
-      color: #2c3e50;
-      line-height: 1.4;
-      word-wrap: break-word;
-      max-width: 100%;
-      text-align: center;
-      white-space: normal;
-      overflow: visible;
-      text-overflow: clip;
-    }
-
-    .position-card.empty .player-name {
-      color: #6c757d;
-      font-style: italic;
-      font-weight: 500;
-    }
-
-    .player-id {
-      display: none;
-    }
-
-    /* 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;
-    }
-
-    /* PRINT STYLES */
-    @media print {
-      .navbar,
-      .tournament-controls {
-        display: none !important;
-      }
-
-      .print-logo {
-        display: block !important;
-        height: 80px !important;
-        max-width: 300px !important;
-        object-fit: contain !important;
-        margin: 0 auto 16px auto !important;
-      }
-
-      html, body {
-        height: auto !important;
-        overflow: visible !important;
-        background: white !important;
-        margin: 0;
-        padding: 20px;
-      }
-
-      .main-container {
-        height: auto !important;
-        padding: 0 !important;
-      }
-
-      .tournament-header {
-        background: white !important;
-        color: #333 !important;
-        box-shadow: none !important;
-        border: 2px solid #ddd !important;
-        padding: 20px;
-        margin-bottom: 20px;
-        page-break-inside: avoid;
-      }
-
-      .tournament-title,
-      .tournament-stats {
-        display: none !important;
-      }
-
-      .tournament-header {
-        display: flex !important;
-        flex-direction: row !important;
-        align-items: center !important;
-        justify-content: space-between !important;
-        background: transparent !important;
-        border: none !important;
-        box-shadow: none !important;
-        border-radius: 0 !important;
-        padding: 0 0 16px 0 !important;
-        margin-bottom: 16px !important;
-        border-bottom: 1px solid #ddd !important;
-      }
-
-      .print-logo {
-        display: block !important;
-        height: 80px !important;
-        max-width: 300px !important;
-        object-fit: contain !important;
-        margin: 0 !important;
-      }
-
-      .print-meta {
-        display: flex !important;
-        flex-direction: column !important;
-        align-items: flex-end !important;
-        font-size: 11pt !important;
-        color: #555 !important;
-        gap: 4px;
-      }
-
-      .current-round-info,
-      .round-badge,
-      .round-print-info,
-      .player-id,
-      .no-tournament {
-        display: none !important;
-      }
-
-      .rounds-container {
-        display: block !important;
-        overflow: visible !important;
-        padding: 0 !important;
-        background: transparent !important;
-        border-radius: 0 !important;
-        box-shadow: none !important;
-        margin: 0 !important;
-      }
-
-      .round-row,
-      .round-row.current,
-      .round-row.completed,
-      .round-row.waiting {
-        box-shadow: none !important;
-        page-break-inside: avoid !important;
-        opacity: 1 !important;
-        margin-bottom: 6px !important;
-        min-height: 0 !important;
-        border-top: 1px solid #dee2e6 !important;
-        border-right: 1px solid #dee2e6 !important;
-        border-bottom: 1px solid #dee2e6 !important;
-        border-left: 1px solid #dee2e6 !important;
-        border-color: #dee2e6 !important;
-      }
-
-      .round-row.current .round-header,
-      .round-row.completed .round-header,
-      .round-row.waiting .round-header {
-        background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%) !important;
-      }
-
-      .round-row.current .position-card,
-      .round-row.completed .position-card,
-      .round-row.waiting .position-card {
-        border-color: #5a8fd1 !important;
-      }
-
-      .round-row.current .position-card .position-header,
-      .round-row.completed .position-card .position-header,
-      .round-row.waiting .position-card .position-header {
-        background: #5a8fd1 !important;
-      }
-
-      .round-header {
-        padding: 8px 12px !important;
-        min-width: 90px !important;
-      }
-
-      .round-title {
-        font-size: 9pt !important;
-      }
-
-      .round-badge {
-        display: none !important;
-      }
-
-      .positions-container {
-        gap: 5px !important;
-        padding: 8px !important;
-      }
-
-      .position-card {
-        box-shadow: none !important;
-        transform: none !important;
-        transition: none !important;
-        page-break-inside: avoid !important;
-        min-height: 48px !important;
-        overflow: hidden !important;
-        border-radius: 10px !important;
-      }
-
-      .position-header {
-        min-width: 36px !important;
-        width: 36px !important;
-      }
-
-      .position-number {
-        font-size: 1.2rem !important;
-      }
-
-      .player-name {
-        font-size: 10pt !important;
-      }
-
-      /* Done checkbox */
-      .print-done-check {
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        padding: 0 14px !important;
-        flex-shrink: 0 !important;
-        border-left: 1px solid rgba(0,0,0,0.1) !important;
-      }
-
-      .print-done-box {
-        width: 20px !important;
-        height: 20px !important;
-        border: 1.5px solid #555 !important;
-        border-radius: 4px !important;
-        display: block !important;
-      }
-
-      .print-done-label {
-        display: none !important;
-      }
-
-      .no-tournament {
-        display: none !important;
-      }
-
-    }
-
-    /* Print-only elements - hidden on screen */
-    @media screen {
-      .round-print-info,
-      .print-logo,
-      .print-meta,
-      .print-done-check {
-        display: none !important;
-      }
-    }
-  </style>
   <script src="/static/js/i18n.js"></script>
 </head>
 <body>
@@ -645,11 +76,13 @@
             </div>
             
             <div class="positions-container">
-              {% for position in range(1, 7) %}
+              {% set slots = tournament.active_slots if tournament.active_slots else range(1, 7) %}
-                {% set player = round.players[position-1] if position <= round.players|length else none %}
+              {% for idx in range(slots|length) %}
+                {% set slot_num = slots[idx] %}
+                {% set player = round.players[idx] if idx < round.players|length else none %}
                 <div class="position-card {{ 'filled' if player else 'empty' }}">
                   <div class="position-header">
-                    <div class="position-number">{{ position }}</div>
+                    <div class="position-number">{{ slot_num }}</div>
                   </div>
                   <div class="position-body">
                     {% if player %}

templates/fullscreen.html

@@ -1,783 +0,0 @@
-<!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">
-  <link rel="stylesheet" href="/static/css/base.css">
-  <link rel="stylesheet" href="/static/css/navbar.css">
-  <link rel="stylesheet" href="/static/css/buttons.css">
-  <link rel="stylesheet" href="/static/css/components.css">
-  <link rel="stylesheet" href="/static/css/responsive.css">
-  <style>
-    /* Fullscreen-specific 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: #28a745 !important;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
-      transform: translateY(-1px) !important;
-      color: #28a745 !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: #28a745 !important;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
-      transform: translateY(-1px) !important;
-      color: #28a745 !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: 2;
-      pointer-events: none;
-    }
-
-    .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="#" onclick="goBack()" 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':
-          goBack();
-          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();
-    });
-
-    function goBack() {
-      // Check if user came specifically from a mobile page by looking at referrer
-      const referrer = document.referrer;
-
-      if (referrer.includes('/mobile/')) {
-        window.location.href = '/mobile/streams';
-      } else {
-        window.location.href = '/';
-      }
-    }
-  </script>
-</body>
-</html>

templates/index.html

@@ -9,623 +9,7 @@
   <link rel="stylesheet" href="/static/css/buttons.css">
   <link rel="stylesheet" href="/static/css/components.css">
   <link rel="stylesheet" href="/static/css/responsive.css">
-  <style>
+  <link rel="stylesheet" href="/static/css/pages/index.css">
-    /* Dashboard-specific styles override and extensions */
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: black;
-      height: 100vh;
-      overflow: hidden;
-      font-family: Arial, sans-serif;
-    }
-
-    /* Tournament Navigation */
-    .tournament-nav {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .round-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;
-      font-weight: bold;
-      font-size: 0.9rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 1;
-      height: 44px;
-      margin: 0;
-      flex-shrink: 0;
-    }
-
-    .round-nav-btn:hover {
-      background: #e9ecef;
-      border-color: #28a745;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-      color: #28a745;
-    }
-
-    .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: 100px;
-      margin: 0;
-      padding: 0;
-    }
-
-    .round-title {
-      font-size: 1.2rem;
-      font-weight: bold;
-      color: #333;
-      margin: 0;
-      padding: 0;
-      line-height: 1.2;
-    }
-
-    .round-progress {
-      font-size: 0.9rem;
-      color: #666;
-      padding: 2px 8px;
-      background: rgba(0, 123, 255, 0.1);
-      border-radius: 6px;
-      border: 1px solid rgba(0, 123, 255, 0.2);
-      margin: 2px 0 0 0;
-    }
-
-    /* Regular time/date display */
-    .datetime {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      padding: 0;
-      margin: 0;
-      line-height: 1.2;
-    }
-
-    .datetime .time {
-      font-size: 1.6rem;
-      font-weight: bold;
-      color: #333;
-      padding: 0;
-      margin: 0;
-      line-height: 1.2;
-    }
-
-    .datetime .date {
-      font-size: 0.9rem;
-      color: #666;
-      padding: 0;
-      margin: 0;
-      line-height: 1.2;
-    }
-
-    .grid {
-      height: calc(100vh - 50px);
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: repeat(2, 1fr);
-      gap: 20px;
-      padding: 20px;
-      box-sizing: border-box;
-    }
-
-    .camera-card {
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-      cursor: pointer;
-      position: relative;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .camera-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-    }
-
-    .card-title {
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: white;
-      text-align: left;
-      pointer-events: none;
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .stream-wrapper {
-      position: relative;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      overflow: hidden;
-      pointer-events: none;
-      display: flex;
-      flex-direction: column;
-      max-width: 100%;
-      max-height: 100%;
-      width: fit-content;
-      height: fit-content;
-      gap: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    .image-container {
-      position: relative;
-      width: 100%;
-      aspect-ratio: 4 / 3;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      border-radius: 0 0 12px 12px;
-      background: #1a1a1a;
-      flex: 1;
-    }
-
-    /* Calculate optimal size to fit within grid cell */
-    @supports (width: min(100%, calc((100vh - 50px - 20px) / 2 - 60px) * 4 / 3)) {
-      .stream-wrapper {
-        width: min(100%, calc(((100vh - 50px - 20px) / 2 - 60px) * 4 / 3));
-      }
-    }
-
-    .stream-placeholder {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: block;
-      z-index: 5;
-    }
-
-    .stream-placeholder svg {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-
-    .stream {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      object-fit: fill;
-      object-position: center;
-      display: block;
-      transition: opacity 0.3s ease;
-      pointer-events: none;
-      z-index: 10;
-      opacity: 1;
-    }
-
-
-    /* Camera Number Indicator */
-    .card-header {
-      background: linear-gradient(90deg, #28a745 0%, #28a745 60px, #1a1a1a 60px);
-      border-bottom: 2px solid #333;
-      padding: 12px 15px 12px 0;
-      display: flex;
-      align-items: center;
-      gap: 0;
-      transition: all 0.2s ease;
-      border-radius: 12px 12px 0 0;
-      flex-shrink: 0;
-      margin: 0;
-      line-height: 1;
-    }
-
-    .target-number {
-      background: transparent;
-      color: white;
-      width: 60px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.2rem;
-      font-weight: bold;
-      flex-shrink: 0;
-      margin-right: 15px;
-      transition: color 0.2s ease;
-    }
-
-    /* Style when no player is assigned */
-    .camera-card.no-player .card-header {
-      background: linear-gradient(90deg, #999 0%, #999 60px, #1a1a1a 60px);
-    }
-
-    .camera-card:hover .card-header {
-      background: linear-gradient(90deg, #1e7e34 0%, #1e7e34 60px, #2d2d2d 60px);
-      border-bottom-color: #28a745;
-    }
-
-    /* Tooltip for camera cards */
-    .camera-card::after {
-      content: attr(data-tooltip);
-      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: -500px;
-      width: 500px;
-      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: 25px 30px;
-    }
-
-    .settings-group {
-      margin-bottom: 25px;
-      padding: 20px;
-      background: #f8f9fa;
-      border-radius: 12px;
-      border: 1px solid #e9ecef;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    }
-
-    .settings-group h4 {
-      margin: -5px 0 20px 0;
-      font-size: 1.2rem;
-      color: #2c3e50;
-      border-bottom: 3px solid #28a745;
-      padding-bottom: 8px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .settings-group h5 {
-      margin: 20px 0 15px 0;
-      font-size: 1.05rem;
-      color: #495057;
-      border-bottom: 1px solid #dee2e6;
-      padding-bottom: 5px;
-      font-weight: 500;
-    }
-
-    /* System Section Styling */
-    .settings-group:has(h4[data-i18n="league.system"]) {
-      background: linear-gradient(135deg, #e8f4f8 0%, #f0f8ff 100%);
-      border-left: 4px solid #17a2b8;
-    }
-
-    .settings-group:has(h4[data-i18n="league.system"]) h4 {
-      color: #17a2b8;
-      border-bottom-color: #17a2b8;
-    }
-
-    /* Camera Section Styling */
-    .settings-group:has(h4[data-i18n="league.camera"]) {
-      background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 100%);
-      border-left: 4px solid #28a745;
-    }
-
-    .settings-group:has(h4[data-i18n="league.camera"]) h4 {
-      color: #28a745;
-      border-bottom-color: #28a745;
-    }
-
-    /* Tournaments Section Styling */
-    .settings-group:has(h4[data-i18n="league.tournaments"]) {
-      background: linear-gradient(135deg, #fff8e1 0%, #fffef7 100%);
-      border-left: 4px solid #ffc107;
-    }
-
-    .settings-group:has(h4[data-i18n="league.tournaments"]) h4 {
-      color: #e67e22;
-      border-bottom-color: #ffc107;
-    }
-
-    .nav-link {
-      display: block;
-      background: white;
-      border: 2px solid #dee2e6;
-      color: #495057;
-      padding: 14px 18px;
-      border-radius: 10px;
-      text-decoration: none;
-      font-weight: 500;
-      font-size: 0.95rem;
-      transition: all 0.3s ease;
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-      margin-bottom: 12px;
-    }
-
-    .nav-link:hover {
-      background: #f8f9fa;
-      border-color: #28a745;
-      color: #28a745;
-      transform: translateY(-2px);
-      box-shadow: 0 5px 12px rgba(0, 123, 255, 0.15);
-      text-decoration: none !important;
-    }
-
-    /* Yellow hollow style for first 3 tournament nav links */
-    .settings-group:has(h4[data-i18n="league.tournaments"]) .nav-link {
-      border: 2px solid #dee2e6;
-      background: white;
-      color: #333;
-      font-weight: 500;
-    }
-
-    .settings-group:has(h4[data-i18n="league.tournaments"]) .nav-link:hover {
-      background: #fffbf0;
-      border-color: #ffc107;
-      color: #ff9800;
-      box-shadow: 0 5px 12px rgba(255, 152, 0, 0.2);
-    }
-
-    .camera-input {
-      width: 100%;
-      padding: 14px 18px;
-      border: 2px solid #dee2e6;
-      border-radius: 10px;
-      background: white;
-      color: #495057;
-      font-size: 0.95rem;
-      font-weight: 500;
-      transition: all 0.3s ease;
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-      box-sizing: border-box;
-    }
-
-    .camera-input:focus {
-      border-color: #28a745;
-      box-shadow: 0 5px 12px rgba(0, 123, 255, 0.15);
-      transform: translateY(-1px);
-      outline: none;
-    }
-
-    .camera-input:hover:not(:focus) {
-      border-color: #28a745;
-      box-shadow: 0 5px 12px rgba(0, 123, 255, 0.15);
-      transform: translateY(-1px);
-    }
-
-    .tournament-status-info {
-      background: #f0f8ff;
-      border: 2px solid #28a745;
-      border-radius: 8px;
-      padding: 15px;
-      margin: 15px 0;
-    }
-
-    .tournament-status-info p {
-      margin: 5px 0;
-      color: #333;
-    }
-
-    .tournament-btn {
-      background: #28a745 !important;
-      border-color: #1e7e34 !important;
-      color: white !important;
-      text-align: center;
-      font-size: 0.95rem !important;
-      padding: 14px 18px !important;
-      font-weight: 500 !important;
-    }
-
-    .tournament-btn:hover {
-      background: #1e7e34 !important;
-      border-color: #004085 !important;
-      color: white !important;
-      text-decoration: none !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-header {
-        background: linear-gradient(90deg, #28a745 0%, #28a745 50px, #1a1a1a 50px);
-        padding: 10px 12px 10px 0;
-      }
-
-      .camera-card:hover .card-header {
-        background: linear-gradient(90deg, #1e7e34 0%, #1e7e34 50px, #2d2d2d 50px);
-      }
-
-      .target-number {
-        width: 50px;
-        font-size: 1.1rem;
-        margin-right: 12px;
-      }
-
-      .card-title {
-        font-size: 1.2rem;
-      }
-
-      .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;
-      }
-
-      .camera-number {
-        width: 35px;
-        height: 35px;
-        font-size: 1rem;
-        top: 10px;
-        right: 10px;
-      }
-    }
-
-    @media (max-width: 480px) {
-      .grid {
-        padding: 15px;
-        gap: 12px;
-      }
-
-      .card-header {
-        background: linear-gradient(90deg, #28a745 0%, #28a745 45px, #1a1a1a 45px);
-        padding: 8px 10px 8px 0;
-      }
-
-      .camera-card:hover .card-header {
-        background: linear-gradient(90deg, #1e7e34 0%, #1e7e34 45px, #2d2d2d 45px);
-      }
-
-      .target-number {
-        width: 45px;
-        font-size: 1rem;
-        margin-right: 10px;
-      }
-
-      .card-title {
-        font-size: 1rem;
-      }
-    }
-  </style>
   <script src="/static/js/i18n.js"></script>
 </head>
 <body>
@@ -699,6 +83,7 @@
       <div class="settings-group">
         <h4 data-i18n="league.tournaments">Turnirji</h4>
         <a href="/tournament" class="nav-link" id="tournamentModeLink">🏆 <span data-i18n="tournament.tournament_mode">Način Turnirja</span></a>
+
         <a href="/archive/player-analysis" class="nav-link">👤 <span data-i18n="players.player_analysis">Analiza Igralcev</span></a>
         <a href="/archive" class="nav-link">📚 <span data-i18n="navigation.archive">Arhiv</span></a>
       </div>
@@ -719,46 +104,48 @@
       <div class="settings-group" id="displayOptionsGroup">
         <h4 data-i18n="league.camera">Kamera</h4>
 
-        <div style="margin-bottom: 15px;">
+        <!-- Display toggles -->
-          <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
+        <label class="cam-setting-toggle">
-            <input type="checkbox" id="toggleTitles" {% if settings.display_options.show_titles %}checked{% endif %} onchange="toggleTitles()" style="width: 18px; height: 18px;">
+          <input type="checkbox" id="toggleTitles" {% if settings.display_options.show_titles %}checked{% endif %} onchange="toggleTitles()">
-            <span data-i18n="camera.show_card_titles">Prikaiž Naslove Kartic</span>
+          <span data-i18n="camera.show_card_titles">Prikaži Naslove Kartic</span>
-          </label>
+        </label>
+
+        <!-- Sliders -->
+        <div class="cam-slider-row">
+          <div class="cam-slider-label">
+            <span data-i18n="camera.title_text_size">Naslov</span>
+            <span class="cam-slider-value"><span id="titleSizeValue">{{ settings.display_options.title_size }}</span>rem</span>
+          </div>
+          <input type="range" id="titleSize" class="cam-slider" min="0.8" max="2.5" step="0.1"
+                 value="{{ settings.display_options.title_size }}" oninput="adjustTitleSize(this.value)">
         </div>
 
-        <div style="margin-bottom: 15px;">
+        <div class="cam-slider-row">
-          <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">
+          <div class="cam-slider-label">
-            <span data-i18n="camera.title_text_size">Velikost Besedila Naslova</span>: <span id="titleSizeValue">{{ settings.display_options.title_size }}</span>rem
+            <span data-i18n="camera.target_number_size">Številka</span>
-          </label>
+            <span class="cam-slider-value"><span id="targetNumberSizeValue">{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}</span>rem</span>
-          <input type="range"
+          </div>
-                 id="titleSize"
+          <input type="range" id="targetNumberSize" class="cam-slider" min="0.8" max="2.5" step="0.1"
-                 min="0.8"
+                 value="{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}" oninput="adjustTargetNumberSize(this.value)">
-                 max="2.5"
-                 step="0.1"
-                 value="{{ settings.display_options.title_size }}"
-                 oninput="adjustTitleSize(this.value)"
-                 style="width: 100%;">
         </div>
 
-        <div style="margin-bottom: 15px;">
+        <!-- Camera rows -->
-          <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">
+        <div class="cam-list">
-            <span data-i18n="camera.target_number_size">Velikost Števila Tarče</span>: <span id="targetNumberSizeValue">{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}</span>rem
-          </label>
-          <input type="range"
-                 id="targetNumberSize"
-                 min="0.8"
-                 max="2.5"
-                 step="0.1"
-                 value="{{ settings.display_options.get('target_number_size', settings.display_options.title_size) }}"
-                 oninput="adjustTargetNumberSize(this.value)"
-                 style="width: 100%;">
-        </div>
-
-        <div style="margin-top: 20px;">
-          <h5 data-i18n="camera.titles">Naslovi Kamer</h5>
           {% for i in range(1, 7) %}
-          <div style="margin-bottom: 15px;">
+          {% set is_disabled = i in settings.get('disabled_cameras', []) %}
-            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #495057; font-size: 0.9rem;"><span data-i18n="camera.camera">Kamera</span> {{ i }}:</label>
+          <div class="cam-row {% if is_disabled %}cam-row--disabled{% endif %}" id="cameraSettingsRow{{ i }}">
+            <div class="cam-row-header">
+              <span class="cam-row-label"><span data-i18n="camera.camera">Kamera</span> {{ i }}</span>
+              <label class="cam-toggle" id="cameraToggleLabel{{ i }}">
+                <input type="checkbox" id="cameraEnabled{{ i }}"
+                       {% if not is_disabled %}checked{% endif %}
+                       onchange="toggleCamera({{ i }}, this.checked)">
+                <span class="cam-toggle-track">
+                  <span class="cam-toggle-thumb"></span>
+                </span>
+                <span class="cam-toggle-text {% if is_disabled %}cam-toggle-text--off{% endif %}" id="cameraStatusText{{ i }}">{% if is_disabled %}Off{% else %}On{% endif %}</span>
+              </label>
+            </div>
             <input type="text"
                    id="titleInput{{ i }}"
                    value="{{ settings.camera_titles[i|string] }}"
@@ -777,9 +164,11 @@
     </div>
   </div>
 
-  <div class="grid">
+  <div class="main-wrapper" id="mainWrapper">
+  <div class="grid" id="cameraGrid">
     {% for i in range(1, 7) %}
-    <div class="camera-card" onclick="openCameraFullscreen({{ i }})" data-camera-id="{{ i }}" data-tooltip="" data-i18n-tooltip="camera.click_to_view_fullscreen">
+    <div class="camera-card" data-camera-id="{{ i }}"
+         {% if i in settings.get('disabled_cameras', []) %}style="display:none;"{% endif %}>
       <div class="stream-wrapper">
         <div class="card-header">
           <div class="target-number">{{ i }}</div>
@@ -808,6 +197,17 @@
     {% endfor %}
   </div>
 
+  <!-- Leaderboard sidebar — injected by JS when calc display is enabled -->
+  <div class="lb-sidebar" id="lbSidebar" style="display:none;">
+    <div class="lb-header">
+      <span class="lb-title">🏆 Lestvica</span>
+      <span class="lb-count" id="lbCount">0</span>
+    </div>
+    <div class="lb-empty" id="lbEmpty"><span class="icon">🏅</span><span>Čakamo na rezultate…</span></div>
+    <div class="lb-list" id="lbList" style="display:none;"></div>
+  </div>
+  </div>
+
   <script>
     // Global settings and tournament state
     let currentSettings = {{ settings|tojson }};
@@ -890,13 +290,6 @@
                     "></div>
                     📱 Remote Controlled
                 </div>
-                <style>
-                    @keyframes pulse {
-                        0% { opacity: 1; }
-                        50% { opacity: 0.5; }
-                        100% { opacity: 1; }
-                    }
-                </style>
             `;
             document.body.appendChild(indicator);
         }
@@ -1174,6 +567,58 @@
         }
     }
 
+    // Toggle camera enabled/disabled
+    function reshapeGrid() {
+        const grid = document.querySelector('.grid');
+        if (!grid) return;
+        const activeCount = document.querySelectorAll('.camera-card:not([style*="display: none"]):not([style*="display:none"])').length;
+        let cols;
+        if (activeCount <= 1) cols = 1;
+        else if (activeCount === 2) cols = 2;
+        else if (activeCount === 3) cols = 3;
+        else if (activeCount === 4) cols = 2;
+        else cols = 3;
+        const rows = Math.ceil(activeCount / cols);
+        grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+
+        // Recompute stream-wrapper max-width so cards fill available height at 4:3
+        // gap=20px, padding=20px each side, header~40px, toolbar=50px
+        const gap = 20;
+        const padding = 40;
+        const toolbar = 50;
+        const headerH = 40;
+        const availH = (window.innerHeight - toolbar - padding - gap * (rows - 1)) / rows - headerH;
+        const maxW = availH * (4 / 3);
+        document.querySelectorAll('.stream-wrapper').forEach(w => {
+            w.style.width = `min(100%, ${maxW}px)`;
+        });
+    }
+
+    function toggleCamera(index, enabled) {
+        const card = document.querySelector(`.camera-card[data-camera-id="${index}"]`);
+        const titleInput = document.getElementById(`titleInput${index}`);
+        const label = document.getElementById(`cameraToggleLabel${index}`);
+        const statusText = document.getElementById(`cameraStatusText${index}`);
+
+        const row = document.getElementById(`cameraSettingsRow${index}`);
+
+        if (enabled) {
+            if (card) card.style.display = '';
+            if (row) row.classList.remove('cam-row--disabled');
+            if (statusText) { statusText.textContent = 'On'; statusText.classList.remove('cam-toggle-text--off'); }
+            currentSettings.disabled_cameras = (currentSettings.disabled_cameras || []).filter(c => c !== index);
+        } else {
+            if (card) card.style.display = 'none';
+            if (row) row.classList.add('cam-row--disabled');
+            if (statusText) { statusText.textContent = 'Off'; statusText.classList.add('cam-toggle-text--off'); }
+            if (!currentSettings.disabled_cameras) currentSettings.disabled_cameras = [];
+            if (!currentSettings.disabled_cameras.includes(index)) currentSettings.disabled_cameras.push(index);
+        }
+
+        reshapeGrid();
+        saveSettings({ disabled_cameras: currentSettings.disabled_cameras });
+    }
+
     // Toggle titles
     function toggleTitles() {
         const show = document.getElementById('toggleTitles').checked;
@@ -1236,12 +681,6 @@
         }
     }
 
-    // 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
@@ -1460,8 +899,13 @@
         setInterval(updateDateTime, 1000);
         updateRoundNavigation();
         applyCurrentSettings();
+        reshapeGrid();
+        window.addEventListener('resize', reshapeGrid);
         addTouchFeedback();
 
+        // Apply leaderboard display mode if enabled
+        initLeaderboardDisplay();
+
         // Initialize language selector after i18n is ready
         window.addEventListener('i18nReady', function() {
             createLanguageSelector('languageSelectorContainer');
@@ -1542,6 +986,109 @@
             clearInterval(dashboardPollingInterval);
         }
     });
+
+    // ── Calculator leaderboard display mode ────────────────────────────────
+
+    let lbPollingInterval = null;
+    let lbDisplayEnabled = false;
+
+    function initLeaderboardDisplay() {
+        fetch('/api/calculator/display')
+            .then(r => r.json())
+            .then(d => applyLeaderboardMode(d.enabled, d.camera || 1))
+            .catch(() => {});
+    }
+
+    function applyLeaderboardMode(enabled, camera) {
+        lbDisplayEnabled = enabled;
+        const sidebar = document.getElementById('lbSidebar');
+        const grid    = document.getElementById('cameraGrid');
+
+        if (!enabled) {
+            sidebar.style.display = 'none';
+            // restore camera visibility to match settings
+            for (let i = 1; i <= 6; i++) {
+                const card = document.querySelector(`.camera-card[data-camera-id="${i}"]`);
+                if (!card) continue;
+                const isDisabled = currentSettings.disabled_cameras && currentSettings.disabled_cameras.includes(i);
+                card.style.display = isDisabled ? 'none' : '';
+            }
+            grid.style.gridTemplateColumns = '';
+            if (lbPollingInterval) { clearInterval(lbPollingInterval); lbPollingInterval = null; }
+            reshapeGrid();
+            return;
+        }
+
+        // Show only selected camera
+        for (let i = 1; i <= 6; i++) {
+            const card = document.querySelector(`.camera-card[data-camera-id="${i}"]`);
+            if (!card) continue;
+            card.style.display = (i === camera) ? '' : 'none';
+        }
+        grid.style.gridTemplateColumns = '1fr';
+        grid.style.gridTemplateRows    = '1fr';
+
+        sidebar.style.display = '';
+        reshapeGrid();
+
+        // Poll leaderboard
+        pollLeaderboard();
+        if (!lbPollingInterval) {
+            lbPollingInterval = setInterval(pollLeaderboard, 5000);
+        }
+    }
+
+    function pollLeaderboard() {
+        fetch('/api/calculator/leaderboard')
+            .then(r => r.json())
+            .then(data => { if (Array.isArray(data)) renderLbSidebar(data); })
+            .catch(() => {});
+    }
+
+    function renderLbSidebar(data) {
+        const list  = document.getElementById('lbList');
+        const empty = document.getElementById('lbEmpty');
+        const count = document.getElementById('lbCount');
+
+        count.textContent = data.length;
+
+        if (data.length === 0) {
+            empty.style.display = '';
+            list.style.display  = 'none';
+            return;
+        }
+        empty.style.display = 'none';
+        list.style.display  = '';
+
+        list.innerHTML = data.map((e, idx) => {
+            const rank = data.filter(o =>
+              o.score > e.score || (o.score === e.score && o.tens > e.tens)
+            ).length + 1;
+            const rc   = rank <= 3 ? `r${rank}` : '';
+            const med  = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank;
+            return `<div class="lb-row ${rc}">
+              <div class="lb-badge">${med}</div>
+              <div class="lb-name" title="${e.name}">${e.name}</div>
+              <div class="lb-tens">${e.tens}×10</div>
+              <div class="lb-pts">${e.score}</div>
+            </div>`;
+        }).join('');
+    }
+
+    // Poll display setting every 5s so enabling/disabling from calculator
+    // takes effect on the main screen automatically
+    setInterval(() => {
+        fetch('/api/calculator/display')
+            .then(r => r.json())
+            .then(d => {
+                const enabled = !!d.enabled;
+                const camera  = d.camera || 1;
+                if (enabled !== lbDisplayEnabled) {
+                    applyLeaderboardMode(enabled, camera);
+                }
+            })
+            .catch(() => {});
+    }, 5000);
 </script>
 </body>
 </html>

templates/league_combine.html

@@ -8,287 +8,7 @@
   <link rel="stylesheet" href="{{ url_for('static', filename='css/navbar.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/buttons.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}">
-  <style>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/pages/league_combine.css') }}">
-    * {
-      box-sizing: border-box;
-    }
-
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: #f5f5f5;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      min-height: 100vh;
-      color: #333;
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-
-    .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;
-      margin-bottom: 0;
-    }
-
-    .navbar-title {
-      font-size: 1.8rem;
-      font-weight: bold;
-      color: #333;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .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: #28a745;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-      color: #28a745;
-    }
-
-    .upload-section {
-      background: white;
-      padding: 30px;
-      border-radius: 10px;
-      margin-bottom: 20px;
-      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    }
-
-    .upload-area {
-      border: 3px dashed #28a745;
-      border-radius: 10px;
-      padding: 40px;
-      text-align: center;
-      background: #f8f9fa;
-      cursor: pointer;
-      transition: all 0.3s;
-    }
-
-    .upload-area:hover {
-      background: #e9f7ed;
-      border-color: #1e7e34;
-    }
-
-    .upload-area.drag-over {
-      background: #d4edda;
-      border-color: #28a745;
-      box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
-    }
-
-    .file-input {
-      display: none;
-    }
-
-    .upload-icon {
-      font-size: 48px;
-      margin-bottom: 10px;
-    }
-
-    .uploaded-files {
-      margin-top: 20px;
-    }
-
-    .file-item {
-      background: #f8f9fa;
-      padding: 15px;
-      border-radius: 5px;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-left: 4px solid #28a745;
-    }
-
-    .file-item.error {
-      border-left-color: #dc3545;
-      background: #f8d7da;
-    }
-
-    .file-info {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
-
-    .file-name {
-      font-weight: bold;
-      color: #2c3e50;
-    }
-
-    .file-details {
-      font-size: 0.9em;
-      color: #6c757d;
-    }
-
-    .remove-btn {
-      background: #dc3545;
-      color: white;
-      border: none;
-      padding: 8px 15px;
-      border-radius: 5px;
-      cursor: pointer;
-      transition: background 0.3s;
-    }
-
-    .remove-btn:hover {
-      background: #c82333;
-    }
-
-    .action-buttons {
-      display: flex;
-      gap: 10px;
-      margin-top: 20px;
-    }
-
-    .btn {
-      padding: 12px 24px;
-      border: 2px solid;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: bold;
-      transition: all 0.2s ease;
-      flex: 1;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .btn-primary {
-      background: #28a745;
-      color: white;
-      border-color: #1e7e34;
-    }
-
-    .btn-primary:hover {
-      background: #1e7e34;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-    }
-
-    .btn-primary:disabled {
-      background: #6c757d;
-      border-color: #5a6268;
-      cursor: not-allowed;
-      opacity: 0.6;
-      transform: none;
-    }
-
-    .btn-secondary {
-      background: #f8f9fa;
-      color: #333;
-      border-color: #e9ecef;
-    }
-
-    .btn-secondary:hover {
-      background: #e9ecef;
-      border-color: #dc3545;
-      color: #dc3545;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-    }
-
-    .preview-section {
-      background: white;
-      padding: 30px;
-      border-radius: 10px;
-      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-      display: none;
-    }
-
-    .preview-section.active {
-      display: block;
-    }
-
-    .info-box {
-      background: #d4edda;
-      border-left: 4px solid #28a745;
-      padding: 15px;
-      margin-bottom: 20px;
-      border-radius: 8px;
-    }
-
-    .info-box h3 {
-      margin: 0 0 10px 0;
-      color: #155724;
-    }
-
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 15px;
-      margin-bottom: 20px;
-    }
-
-    .stat-card {
-      background: #f8f9fa;
-      padding: 15px;
-      border-radius: 8px;
-      text-align: center;
-      border-left: 4px solid #28a745;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .stat-value {
-      font-size: 32px;
-      font-weight: bold;
-      color: #28a745;
-    }
-
-    .stat-label {
-      font-size: 14px;
-      color: #6c757d;
-      margin-top: 5px;
-    }
-
-    .mode-btn {
-      flex: 1;
-      padding: 12px 20px;
-      border: 2px solid #28a745;
-      background: white;
-      color: #28a745;
-      border-radius: 8px;
-      cursor: pointer;
-      font-weight: bold;
-      transition: all 0.2s ease;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .mode-btn:hover {
-      background: #e9f7ed;
-      transform: translateY(-1px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    }
-
-    .mode-btn.active {
-      background: #28a745;
-      color: white;
-      border-color: #1e7e34;
-    }
-  </style>
 </head>
 <body>
   <div class="navbar">

templates/league_scoreboard_display.html

@@ -9,831 +9,7 @@
   <link rel="stylesheet" href="/static/css/buttons.css">
   <link rel="stylesheet" href="/static/css/components.css">
   <link rel="stylesheet" href="/static/css/responsive.css">
-  <style>
+  <link rel="stylesheet" href="/static/css/pages/league_scoreboard_display.css">
-    /* League scoreboard specific styles */
-    * {
-      box-sizing: border-box;
-    }
-    
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: #f5f5f5;
-      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: #28a745;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-      color: #28a745;
-    }
-
-    .nav-btn.primary {
-      background: #28a745;
-      border-color: #1e7e34;
-      color: white;
-    }
-
-    .nav-btn.primary:hover {
-      background: #1e7e34;
-      color: white;
-    }
-
-    /* Main League Layout */
-    .league-container {
-      height: calc(100vh - 90px);
-      display: grid;
-      grid-template-columns: 1fr 2fr;
-      gap: 20px;
-      padding: 20px;
-      overflow: hidden;
-    }
-
-    /* Left Column - Header & Champions */
-    .left-column {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      min-height: 0;
-      overflow: hidden;
-    }
-
-    .league-header {
-      border-radius: 12px 12px 0 0;
-      box-shadow: none;
-      padding: 20px;
-      text-align: center;
-      flex-shrink: 0;
-      color: white;
-      position: relative;
-      overflow: hidden;
-    }
-
-    /* Dynamic header colors based on tournament type */
-    .league-header.tournament-4_targets {
-      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-    }
-
-    .league-header.tournament-20_targets {
-      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
-    }
-
-    .league-header.tournament-40_targets {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    }
-
-    .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: 50px;
-      max-width: 150px;
-      object-fit: contain;
-      margin-bottom: 10px;
-      filter: brightness(1.2) contrast(1.1);
-      background-color: white;
-      padding: 6px;
-      border-radius: 6px;
-      backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .league-title {
-      font-size: 1.8rem;
-      font-weight: 700;
-      color: rgb(255, 255, 255);
-      margin-bottom: 8px;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    }
-
-    .league-subtitle {
-      font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.95);
-      margin-bottom: 12px;
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-    }
-
-    .league-meta {
-      display: flex;
-      justify-content: space-around;
-      gap: 10px;
-    }
-
-    .meta-item {
-      text-align: center;
-    }
-
-    .meta-number {
-      font-size: 1.2rem;
-      font-weight: 700;
-      color: #ffffff;
-      display: block;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    }
-
-    .meta-label {
-      font-size: 0.65rem;
-      color: rgba(255, 255, 255, 0.9);
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-      font-weight: 500;
-    }
-
-    /* League Champion Section */
-    .champion-section {
-      background: white;
-      border-radius: 0 0 12px 12px;
-      box-shadow: none;
-      padding: 12px;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      min-height: 0;
-      border: 1px solid #e9ecef;
-    }
-
-    .champion-title {
-      text-align: center;
-      font-size: 0.9rem;
-      font-weight: 700;
-      color: #2c3e50;
-      margin-bottom: 8px;
-      flex-shrink: 0;
-    }
-
-    .champion-container {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: 0.75fr 0.75fr 1.5fr;
-      gap: 10px;
-      flex: 1;
-      overflow: hidden;
-      min-height: 0;
-    }
-
-    .champion-card {
-      background: white;
-      border-radius: 12px;
-      box-shadow: none;
-      padding: 12px 12px 18px 12px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      transition: all 0.3s ease;
-      position: relative;
-      overflow: hidden;
-      border: 1px solid #e9ecef;
-      border-top-width: 6px;
-      justify-content: flex-end;
-    }
-
-    .champion-card::before {
-      display: none;
-    }
-
-    .champion-card:hover {
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    }
-
-    .champion-card.rank-1 {
-      border-top-color: #ffd700;
-      border-color: #ffd700;
-      background: linear-gradient(135deg, #fffbf0 0%, #fff9e6 100%);
-      grid-column: 2;
-      grid-row: 1 / 4;
-    }
-
-    .champion-card.rank-2 {
-      border-top-color: #c0c0c0;
-      border-color: #c0c0c0;
-      background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
-      grid-column: 1;
-      grid-row: 2 / 4;
-    }
-
-    .champion-card.rank-3 {
-      border-top-color: #cd7f32;
-      border-color: #cd7f32;
-      background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
-      grid-column: 3;
-      grid-row: 3;
-    }
-
-    .rank-display {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 2px;
-      position: relative;
-      z-index: 2;
-    }
-
-    .medal {
-      font-size: 4.5rem;
-      line-height: 1;
-    }
-
-    .rank-number {
-      font-size: 1.9rem;
-      font-weight: 900;
-      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; }
-
-
-    .participant-info {
-      flex: 1;
-      min-width: 0;
-      text-align: center;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .participant-name {
-      font-size: 1rem;
-      font-weight: 700;
-      color: #2c3e50;
-      margin: 0;
-      word-wrap: break-word;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      line-height: 1.2;
-    }
-
-    .participant-details {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-
-    .participant-id {
-      background: #28a745;
-      color: white;
-      padding: 6px 12px;
-      border-radius: 12px;
-      font-size: 0.75rem;
-      font-weight: 700;
-      display: inline-block;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
-    }
-
-    .joker-badge {
-      background: #ffc107;
-      color: #856404;
-      padding: 6px 12px;
-      border-radius: 12px;
-      font-size: 0.75rem;
-      font-weight: 700;
-      display: inline-block;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
-    }
-
-    .score-display {
-      text-align: center;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 1px;
-    }
-
-    .score-number {
-      font-size: 1.8rem;
-      font-weight: 900;
-      color: #28a745;
-      line-height: 1;
-    }
-
-    .tens-count {
-      font-size: 1.2rem;
-      color: #ffc107;
-      font-weight: 700;
-    }
-
-    .total-score {
-      font-size: 0.8rem;
-      color: #ffc107;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-    }
-
-    .tens-count {
-      font-size: 0.8rem;
-      color: #ffc107;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-    }
-
-    .score-label {
-      font-size: 0.6rem;
-      color: #999;
-      text-transform: uppercase;
-      font-weight: 600;
-      letter-spacing: 0.3px;
-    }
-
-    /* Right Column - League Table */
-    .right-column {
-      background: white;
-      border-radius: 12px;
-      box-shadow: none;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      border: 1px solid #e9ecef;
-    }
-
-    .table-header {
-      background: #f8f9fa;
-      padding: 12px 15px;
-      border-bottom: 1px solid #dee2e6;
-      flex-shrink: 0;
-    }
-
-    .table-title {
-      font-size: 0.95rem;
-      font-weight: 600;
-      color: #2c3e50;
-      margin: 0;
-    }
-
-    .table-container {
-      flex: 1;
-      overflow-y: auto;
-    }
-
-    .league-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.75rem;
-    }
-
-    .league-table th,
-    .league-table td {
-      padding: 6px 4px;
-      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.6rem;
-      letter-spacing: 0.5px;
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-
-    .league-table th.player-col {
-      text-align: left;
-      width: 100px;
-    }
-
-    .league-table th.tournament-col {
-      width: 60px;
-    }
-
-    .league-table th.final-col {
-      width: 70px;
-      background: #e3f2fd;
-    }
-
-    .league-table th.tens-col {
-      width: 60px;
-      background: #fff3cd;
-    }
-
-    .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: 0.9rem;
-      font-weight: 700;
-      width: 45px;
-      text-align: center;
-    }
-
-    .rank-1 { color: #b8860b; }
-    .rank-2 { color: #6c757d; }
-    .rank-3 { color: #8b4513; }
-
-    .player-cell {
-      text-align: left !important;
-      padding-left: 10px !important;
-    }
-
-    .player-name {
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: #2c3e50;
-      word-break: keep-all;
-      overflow-wrap: break-word;
-      hyphens: none;
-    }
-
-    .player-id {
-      background: #28a745;
-      color: white;
-      padding: 2px 5px;
-      border-radius: 5px;
-      font-size: 0.6rem;
-      font-weight: 500;
-      display: inline-block;
-      margin-top: 2px;
-    }
-
-    .tournament-score {
-      font-size: 0.8rem;
-      font-weight: 600;
-      color: #333;
-      min-width: 35px;
-    }
-
-    .tournament-score.joker {
-      background: #ffc107;
-      color: #856404;
-      padding: 2px 5px;
-      border-radius: 3px;
-      font-size: 0.65rem;
-      font-weight: 600;
-    }
-
-    .tournament-score.excluded {
-      background: #dc3545;
-      color: white;
-      padding: 2px 5px;
-      border-radius: 3px;
-      text-decoration: line-through;
-      opacity: 0.8;
-      font-size: 0.65rem;
-    }
-
-    .tournament-score.counted {
-      background: #28a745;
-      color: white;
-      padding: 2px 5px;
-      border-radius: 3px;
-      font-weight: 600;
-      font-size: 0.7rem;
-    }
-
-    .final-score-cell {
-      background: #e3f2fd !important;
-      font-size: 1rem;
-      font-weight: 700;
-      color: #1976d2;
-    }
-
-    .tens-count-cell {
-      background: #fff3cd !important;
-      font-size: 0.9rem;
-      font-weight: 700;
-      color: #856404;
-    }
-
-    /* Tournament Headers */
-    .tournament-header-group {
-      background: #e3f2fd;
-      border-bottom: 2px solid #1976d2;
-    }
-
-    .tournament-header-group th {
-      background: #e3f2fd;
-      color: #1976d2;
-      font-weight: 700;
-    }
-
-    .tens-header-group {
-      background: #fff3cd;
-      border-bottom: 2px solid #856404;
-    }
-
-    .tens-header-group th {
-      background: #fff3cd;
-      color: #856404;
-      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: 15px;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-
-    .legend-item {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 0.75rem;
-      color: #495057;
-    }
-
-    .legend-box {
-      width: 18px;
-      height: 14px;
-      border-radius: 3px;
-      display: inline-block;
-    }
-
-    .legend-joker { background: #ffc107; }
-    .legend-excluded { background: #dc3545; }
-    .legend-counted { background: #28a745; }
-    .legend-final { background: #1976d2; }
-    .legend-tens { background: #856404; }
-
-    /* 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: #28a745;
-    }
-
-    /* Mobile responsive */
-    @media (max-width: 768px) {
-      .league-container {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr;
-      }
-
-      .league-meta {
-        gap: 10px;
-      }
-
-      .meta-number {
-        font-size: 1.4rem;
-      }
-
-      .champion-section {
-        padding: 20px 15px;
-      }
-
-      .league-table {
-        font-size: 0.7rem;
-      }
-
-      .league-table th,
-      .league-table td {
-        padding: 5px 3px;
-      }
-    }
-
-    /* PRINT STYLES */
-    @media print {
-      .navbar {
-        display: none !important;
-      }
-
-      html, body {
-        height: auto !important;
-        overflow: visible !important;
-        background: white !important;
-        margin: 0;
-        padding: 20px;
-      }
-
-      .league-container {
-        display: block !important;
-        height: auto !important;
-        padding: 0 !important;
-        gap: 0 !important;
-        margin: 0 !important;
-      }
-
-      .left-column {
-        display: block !important;
-        margin-bottom: 0;
-      }
-
-      .league-header {
-        background: white !important;
-        color: #333 !important;
-        box-shadow: none !important;
-        border: 2px solid #ddd !important;
-        padding: 20px;
-        margin-bottom: 20px;
-      }
-
-      .league-header::before {
-        display: none !important;
-      }
-
-      .header-logo {
-        height: 60px !important;
-        max-width: 160px !important;
-        background-color: transparent !important;
-        padding: 0 !important;
-        border: none !important;
-        filter: none !important;
-        margin-bottom: 15px;
-      }
-
-      .league-title {
-        font-size: 24pt !important;
-        font-weight: bold !important;
-        color: #333 !important;
-        text-shadow: none !important;
-        margin-bottom: 10px;
-      }
-
-      .league-subtitle {
-        font-size: 14pt !important;
-        color: #666 !important;
-        text-shadow: none !important;
-        margin-bottom: 15px;
-      }
-
-      .league-meta {
-        color: #333 !important;
-      }
-
-      .meta-number {
-        color: #333 !important;
-        text-shadow: none !important;
-        font-size: 16pt !important;
-      }
-
-      .meta-label {
-        color: #666 !important;
-        font-size: 10pt !important;
-      }
-
-      .champion-section {
-        display: none !important;
-      }
-
-      .right-column {
-        background: white !important;
-        border-radius: 0 !important;
-        box-shadow: none !important;
-        overflow: visible !important;
-        display: block !important;
-        margin: 0 !important;
-        padding: 0 !important;
-      }
-
-      .table-header {
-        display: none !important;
-      }
-
-      .league-table {
-        margin-top: 0 !important;
-      }
-
-      .print-title {
-        display: none !important;
-      }
-
-      .table-title {
-        display: none !important;
-      }
-    }
-  </style>
   <script src="/static/js/i18n.js"></script>
 </head>
 <body>

templates/mobile_streams.html

@@ -9,366 +9,7 @@
   <link rel="stylesheet" href="/static/css/buttons.css">
   <link rel="stylesheet" href="/static/css/components.css">
   <link rel="stylesheet" href="/static/css/responsive.css">
-  <style>
+  <link rel="stylesheet" href="/static/css/pages/mobile_streams.css">
-    /* Mobile streams specific styles */
-    * {
-      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: #28a745;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-      color: #28a745;
-    }
-
-    .nav-btn.active {
-      background: #28a745;
-      border-color: #1e7e34;
-      color: white;
-    }
-
-    .nav-btn.active:hover {
-      background: #1e7e34;
-      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: #28a745;
-      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;
-    }
-
-    /* Style for unavailable/empty streams - grey out the camera title */
-    .camera-option .stream-preview.unavailable ~ .camera-info .camera-title {
-      color: #999;
-    }
-
-    @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: 30px;
-      right: 30px;
-      width: 60px;
-      height: 60px;
-      background: rgba(0, 123, 255, 0.9);
-      border: none;
-      border-radius: 50%;
-      color: white;
-      font-size: 1.5rem;
-      cursor: pointer;
-      z-index: 1000;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      transition: all 0.3s ease;
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .floating-fullscreen-btn:hover {
-      background: rgba(0, 123, 255, 1);
-      transform: scale(1.1);
-      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
-    }
-
-    .floating-fullscreen-btn:active {
-      transform: scale(0.95);
-    }
-
-    .floating-fullscreen-btn.hidden {
-      opacity: 0;
-      pointer-events: none;
-      transform: scale(0.8);
-    }
-
-    /* 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: #28a745;
-      color: white;
-      padding: 2px 6px;
-      border-radius: 8px;
-      font-size: 0.7rem;
-      font-weight: bold;
-      margin-left: 5px;
-    }
-  </style>
   <script src="/static/js/i18n.js"></script>
 </head>
 <body>

templates/modern_archive_index.html

@@ -9,212 +9,7 @@
   <link rel="stylesheet" href="/static/css/buttons.css">
   <link rel="stylesheet" href="/static/css/components.css">
   <link rel="stylesheet" href="/static/css/responsive.css">
-  <style>
+  <link rel="stylesheet" href="/static/css/pages/modern_archive_index.css">
-    * { box-sizing: border-box; }
-
-    html, body {
-      margin: 0; padding: 0;
-      height: 100vh; overflow: hidden;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #f5f5f5;
-      color: #333;
-    }
-
-    .archive-layout {
-      display: flex;
-      height: calc(100vh - 50px);
-      gap: 8px;
-      padding: 8px 20px 30px 20px;
-    }
-
-    /* ── LEFT TREE PANEL ── */
-    .left-panel {
-      width: 270px;
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-      overflow: hidden;
-    }
-
-    .panel-header {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 7px 12px;
-      background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
-      border-radius: 12px 12px 0 0;
-      flex-shrink: 0;
-    }
-    .panel-header-title {
-      font-size: 0.8rem; font-weight: 700; color: white; letter-spacing: 0.3px;
-      white-space: nowrap;
-    }
-    .panel-header-count {
-      font-size: 0.7rem; font-weight: 600;
-      background: rgba(255,255,255,0.25); color: white;
-      padding: 2px 7px; border-radius: 10px;
-    }
-
-    .tree-sort-bar {
-      display: flex; flex-direction: column; gap: 5px;
-      padding: 6px 8px; border-bottom: 1px solid #e9ecef;
-      flex-shrink: 0; background: #f8f9fa;
-    }
-    .tree-sort-bar input {
-      width: 100%; border: 1px solid #dee2e6; border-radius: 6px;
-      padding: 5px 9px; font-size: 0.78rem; outline: none; background: white; box-sizing: border-box;
-    }
-    .tree-sort-bar input:focus { border-color: #28a745; }
-    .filter-tabs {
-      display: flex; gap: 4px;
-    }
-    .filter-tab {
-      flex: 1; padding: 2px 4px;
-      border: 2px solid #dee2e6; background: white;
-      cursor: pointer; font-size: 0.6rem; font-weight: 600; color: #666;
-      border-radius: 6px; transition: all 0.15s; white-space: nowrap; text-align: center;
-    }
-    .filter-tab.active { background: #28a745; border-color: #1e7e34; color: white; }
-    .filter-tab:hover:not(.active) { border-color: #28a745; color: #28a745; }
-
-    .tree-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
-    .tree-list::-webkit-scrollbar { width: 5px; }
-    .tree-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
-
-    .tree-group-header {
-      display: flex; align-items: center; gap: 5px;
-      padding: 7px 10px 3px;
-      font-size: 0.67rem; font-weight: 700; color: #999;
-      text-transform: uppercase; letter-spacing: 0.5px;
-      cursor: pointer; user-select: none;
-    }
-    .tree-group-header:hover { color: #666; }
-    .tree-toggle { font-size: 0.6rem; transition: transform 0.15s; }
-    .tree-group.collapsed .tree-toggle { transform: rotate(-90deg); }
-    .tree-group.collapsed .tree-group-items { display: none; }
-
-    .tree-item {
-      display: flex; align-items: center;
-      padding: 7px 10px 7px 14px;
-      cursor: pointer; border-left: 4px solid transparent;
-      gap: 7px; font-size: 0.8rem; color: #333; transition: all 0.15s;
-    }
-    .tree-item:hover { background: #f0faf3; border-left-color: #7dcf95; color: #1a6b30; }
-    .tree-item.active {
-      background: #28a745; border-left-color: #28a745;
-      font-weight: 700; color: white;
-    }
-    .tree-item.active .tree-item-date { color: white; }
-    .tree-item.active .tree-item-meta { color: rgba(255,255,255,0.75); }
-    .tree-item.active .tbadge { background: rgba(255,255,255,0.2); color: white; }
-
-    .tree-item-info { flex: 1; min-width: 0; }
-    .tree-item-date { display: block; font-size: 0.8rem; font-weight: 600; }
-    .tree-item-meta { display: block; font-size: 0.66rem; color: #999; }
-
-    .tbadge { padding: 2px 5px; border-radius: 6px; font-size: 0.6rem; font-weight: 700; flex-shrink: 0; }
-    .tbadge-40     { background: #e9d8fd; color: #6b21a8; }
-    .tbadge-20     { background: #fef9c3; color: #b45309; }
-    .tbadge-4      { background: #dcfce7; color: #166534; }
-    .tbadge-league { background: #dbeafe; color: #1d4ed8; }
-
-    .tree-empty { padding: 24px; text-align: center; color: #bbb; font-size: 0.82rem; }
-
-    .tree-view-btn {
-      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
-      width: 24px; height: 24px; border-radius: 6px;
-      background: rgba(0,0,0,0.06); color: #666;
-      font-size: 0.9rem; text-decoration: none; transition: all 0.15s;
-      border: 1px solid rgba(0,0,0,0.08);
-    }
-    .tree-view-btn:hover { background: #28a745; color: white; border-color: #1e7e34; }
-    .tree-item.active .tree-view-btn { background: rgba(255,255,255,0.2); color: white; border-color: rgba(255,255,255,0.3); }
-    .tree-item.active .tree-view-btn:hover { background: white; color: #28a745; }
-
-    /* ── RIGHT PANEL ── */
-    .right-panel {
-      flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
-    }
-
-    .result-placeholder {
-      flex: 1; display: flex; flex-direction: column;
-      align-items: center; justify-content: center;
-      color: #ccc; gap: 10px;
-      background: white; border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    }
-    .result-placeholder-icon { font-size: 2.5rem; }
-    .result-placeholder-text { font-size: 0.95rem; }
-
-    .loading-overlay {
-      flex: 1; display: flex; align-items: center; justify-content: center;
-      color: #bbb; font-size: 0.9rem;
-      background: white; border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    }
-
-    /* ── RESULTS CARD ── */
-    .tv-container {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      overflow: hidden;
-    }
-
-    /* Right Column */
-    .right-column {
-      background: white; border-radius: 12px; box-shadow: none;
-      overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e9ecef;
-    }
-    .table-header { background: #f8f9fa; padding: 8px 12px; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
-    .table-title { font-size: 0.95rem; font-weight: 600; color: #2c3e50; margin: 0; }
-    .table-container { flex: 1; overflow: auto; min-height: 0; }
-
-    .results-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
-    .results-table th, .results-table td {
-      padding: 4px 6px; text-align: center;
-      border-bottom: 1px solid #f1f3f4; border-right: 1px solid #f1f3f4;
-    }
-    .results-table th {
-      background: #f8f9fa; font-weight: 600; color: #495057;
-      text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.3px;
-      position: sticky; top: 0; z-index: 10;
-    }
-    .results-table th.rank-col  { width: auto; }
-    .results-table th.player-col { text-align: left; width: auto; }
-    .results-table th.score-col { width: auto; background: #e3f2fd; }
-    .results-table th.tens-col  { width: auto; background: #fff3cd; }
-
-    .results-table tbody tr:hover td { background: #f8f9fa; }
-    .results-table tbody tr:nth-child(1) td { background: #fff9e6; }
-    .results-table tbody tr:nth-child(1):hover td { background: #fff3cd; }
-    .results-table tbody tr:nth-child(2) td { background: #f5f5f5; }
-    .results-table tbody tr:nth-child(2):hover td { background: #e9ecef; }
-    .results-table tbody tr:nth-child(3) td { background: #fdf6f0; }
-    .results-table tbody tr:nth-child(3):hover td { background: #f8f1e6; }
-
-    .rank-cell { font-size: 1rem; font-weight: 700; text-align: center; }
-    .rank-1 { color: #b8860b; }
-    .rank-2 { color: #6c757d; }
-    .rank-3 { color: #8b4513; }
-    .player-cell { text-align: left !important; }
-    .player-name { font-size: 0.75rem; font-weight: 600; color: #2c3e50; }
-    .score-cell { background: #e3f2fd !important; font-size: 0.75rem; font-weight: 700; color: #1976d2; }
-    .tens-cell  { background: #fff3cd !important; font-size: 0.75rem; font-weight: 700; color: #856404; }
-    /* League extras */
-    .final-cell { background: #dbeafe !important; font-size: 0.75rem; font-weight: 700; color: #1d4ed8; }
-    .part-cell  { font-size: 0.72rem; color: #888; }
-
-    .stats-footer {
-      background: white; border-top: 1px solid #dee2e6;
-      padding: 6px 15px; display: flex; justify-content: space-around;
-      font-size: 0.7rem; color: #6c757d; flex-shrink: 0;
-    }
-    .stat-item { text-align: center; }
-    .stat-value { font-weight: 600; color: #28a745; }
-  </style>
   <script src="/static/js/i18n.js"></script>
 </head>
 <body>

templates/modern_player_analysis.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="/static/css/buttons.css">
     <link rel="stylesheet" href="/static/css/components.css">
     <link rel="stylesheet" href="/static/css/responsive.css">
+  <link rel="stylesheet" href="/static/css/pages/modern_player_analysis.css">
     <script src="/static/js/chart.min.js"></script>
     <script>
         // Fallback: if Chart.js fails to load, create a simple notification
@@ -27,809 +28,6 @@
             };
         }
     </script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            background: #f5f5f5;
-            height: 100vh;
-            overflow: hidden;
-            color: #333;
-        }
-
-/* 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;
-        }
-
-        /* Tab Navigation */
-        .tab-navigation {
-            display: flex;
-            gap: 15px;
-            margin-bottom: 25px;
-        }
-
-        .tab-btn {
-            flex: 1;
-            background: #f8f9fa;
-            border: 2px solid #e9ecef;
-            padding: 14px 24px;
-            cursor: pointer;
-            font-size: 1.05rem;
-            font-weight: 600;
-            color: #666;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            min-height: 50px;
-        }
-
-        .tab-btn.active {
-            background: #28a745;
-            border-color: #1e7e34;
-            color: white;
-            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
-        }
-
-        .tab-btn:hover {
-            background: #28a745;
-            border-color: #1e7e34;
-            color: white;
-            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
-            transform: translateY(-2px);
-        }
-
-        .tab-content {
-            display: none;
-        }
-
-        .tab-content.active {
-            display: block;
-        }
-
-        /* Tournament Leaders Section */
-        .tournament-leaders {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-            gap: 30px;
-            margin-bottom: 30px;
-        }
-
-        .tournament-card {
-            border-radius: 20px;
-            padding: 35px;
-            box-shadow:
-                0 12px 40px rgba(0, 0, 0, 0.15),
-                0 6px 20px rgba(0, 0, 0, 0.1);
-            border: none;
-            position: relative;
-            overflow: hidden;
-            transition: box-shadow 0.3s ease;
-            width: 100%;
-            margin: 0;
-        }
-
-        .tournament-card:hover {
-            box-shadow:
-                0 15px 45px rgba(0, 0, 0, 0.15),
-                0 8px 25px rgba(0, 0, 0, 0.1);
-        }
-
-        /* Different color themes for each tournament type */
-        .tournament-card[data-type="20_targets"] {
-            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
-        }
-
-        .tournament-card[data-type="40_targets"] {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-
-        .tournament-card[data-type="4_targets"] {
-            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-        }
-
-        .tournament-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 28px;
-            position: relative;
-            z-index: 3;
-        }
-
-        .tournament-name {
-            font-size: 1.6rem;
-            font-weight: 800;
-            color: white;
-            text-shadow:
-                0 2px 4px rgba(0, 0, 0, 0.3),
-                0 1px 2px rgba(0, 0, 0, 0.2);
-            position: relative;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .tournament-card[data-type="20_targets"] .tournament-name::before {
-            content: '⚡';
-            font-size: 1.8rem;
-            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-        }
-
-        .tournament-card[data-type="40_targets"] .tournament-name::before {
-            content: '💪';
-            font-size: 1.8rem;
-            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-        }
-
-        .tournament-card[data-type="4_targets"] .tournament-name::before {
-            content: '🎯';
-            font-size: 1.8rem;
-            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-        }
-
-        .tournament-date {
-            background: rgba(255, 255, 255, 0.25);
-            backdrop-filter: blur(10px);
-            color: white;
-            padding: 8px 16px;
-            border-radius: 25px;
-            font-size: 0.75rem;
-            font-weight: 700;
-            box-shadow:
-                0 4px 15px rgba(0, 0, 0, 0.2),
-                inset 0 1px 0 rgba(255, 255, 255, 0.3);
-            text-transform: uppercase;
-            letter-spacing: 0.8px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .leaders-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 25px;
-            position: relative;
-            z-index: 3;
-        }
-
-        .leader-category {
-            background: #ffffff;
-            border-radius: 16px;
-            padding: 28px;
-            text-align: center;
-            border: 2px solid #e9ecef;
-            transition: box-shadow 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
-        }
-
-        .leader-category:hover {
-            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
-        }
-
-        .leader-category {
-            border-color: #e9ecef;
-        }
-
-        /* Dynamic colors based on tournament type */
-        .tournament-card[data-type="20_targets"] .leader-category::before {
-            background: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%);
-        }
-
-        .tournament-card[data-type="40_targets"] .leader-category::before {
-            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-        }
-
-        .tournament-card[data-type="4_targets"] .leader-category::before {
-            background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
-        }
-
-        .leader-category::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            border-radius: 16px 16px 0 0;
-        }
-
-        .category-title {
-            font-size: 0.8rem;
-            font-weight: 700;
-            color: #6c757d;
-            margin-bottom: 18px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            position: relative;
-        }
-
-        .leader-info {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-
-        .leader-name {
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: #2c3e50;
-            margin-bottom: 8px;
-            line-height: 1.3;
-        }
-
-        .leader-score {
-            font-size: 1.8rem;
-            font-weight: 800;
-            padding: 12px 20px;
-            border-radius: 12px;
-            border: 2px solid;
-            position: relative;
-        }
-
-        /* Score colors based on tournament type */
-        .tournament-card[data-type="20_targets"] .leader-score {
-            border-color: #ff6b6b;
-            background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
-            color: #e53e3e;
-        }
-
-        .tournament-card[data-type="40_targets"] .leader-score {
-            border-color: #667eea;
-            background: linear-gradient(135deg, #f8f9ff 0%, #e8ebff 100%);
-            color: #667eea;
-        }
-
-        .tournament-card[data-type="4_targets"] .leader-score {
-            border-color: #11998e;
-            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
-            color: #059669;
-        }
-
-        /* Yellow styling for 10s (Most 10s category) */
-        .leader-category:nth-child(2) .leader-score {
-            border-color: #fbbf24 !important;
-            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
-            color: #d97706 !important;
-        }
-
-        .leader-category:nth-child(2)::before {
-            background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%) !important;
-        }
-
-        /* Stats Overview */
-        .stats-badges {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .stat-badge {
-            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-badge:hover {
-            transform: translateY(-2px);
-        }
-
-        .stat-icon {
-            font-size: 1.5rem;
-            margin-bottom: 8px;
-            display: block;
-        }
-
-        .stat-number {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: #333;
-            margin-bottom: 5px;
-        }
-
-        .stat-label {
-            color: #666;
-            font-size: 0.75rem;
-            font-weight: 500;
-        }
-
-        /* ── PLAYERS SPLIT LAYOUT ── */
-        .players-layout {
-            display: flex;
-            gap: 8px;
-            height: calc(100vh - 50px);
-            padding: 8px 20px 20px 20px;
-        }
-
-        .players-left-panel {
-            width: 260px;
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: column;
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-            overflow: hidden;
-            border: 1px solid #e9ecef;
-        }
-
-        .players-panel-header {
-            display: flex; align-items: center; justify-content: space-between;
-            padding: 8px 12px;
-            background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
-            border-radius: 12px 12px 0 0;
-            flex-shrink: 0;
-        }
-        .players-panel-header-title {
-            font-size: 0.8rem; font-weight: 700; color: white; letter-spacing: 0.3px;
-            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
-        }
-        .players-panel-count {
-            font-size: 0.7rem; font-weight: 600;
-            background: rgba(255,255,255,0.25); color: white;
-            padding: 2px 7px; border-radius: 10px;
-        }
-
-        .players-sort-bar {
-            padding: 6px 8px;
-            border-bottom: 1px solid #e9ecef;
-            flex-shrink: 0;
-            background: #f8f9fa;
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-        }
-        .players-search {
-            width: 100%; border: 1px solid #dee2e6; border-radius: 6px;
-            padding: 5px 9px; font-size: 0.78rem; outline: none; background: white;
-        }
-        .players-search:focus { border-color: #28a745; }
-
-        .players-sort-btns {
-            display: flex; gap: 4px;
-        }
-        .psort-btn {
-            flex: 1;
-            padding: 2px 7px;
-            border: 2px solid #dee2e6; background: white; border-radius: 6px;
-            cursor: pointer; font-size: 0.6rem; font-weight: 600; color: #666;
-            transition: all 0.15s; white-space: nowrap; text-align: center;
-        }
-        .psort-btn.active { background: #28a745; border-color: #1e7e34; color: white; }
-        .psort-btn:hover:not(.active) { border-color: #28a745; color: #28a745; }
-
-        .player-tree-list {
-            flex: 1; overflow-y: auto; overflow-x: hidden;
-        }
-        .player-tree-list::-webkit-scrollbar { width: 5px; }
-        .player-tree-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
-
-        .player-tree-item {
-            display: flex; align-items: center;
-            padding: 8px 10px 8px 14px;
-            cursor: pointer; border-left: 4px solid transparent;
-            gap: 8px; transition: all 0.15s;
-        }
-        .player-tree-item:hover { background: #f0faf3; border-left-color: #7dcf95; }
-        .player-tree-item.active {
-            background: #28a745; border-left-color: #28a745;
-            font-weight: 700; color: white;
-        }
-        .player-tree-avatar {
-            width: 28px; height: 28px; border-radius: 50%;
-            background: #e9ecef; display: flex; align-items: center; justify-content: center;
-            font-size: 0.75rem; font-weight: 700; color: #666; flex-shrink: 0;
-        }
-        .player-tree-item.active .player-tree-avatar { background: rgba(255,255,255,0.25); color: white; }
-        .player-tree-info { flex: 1; min-width: 0; }
-        .player-tree-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .player-tree-meta { font-size: 0.65rem; color: #999; }
-        .player-tree-item.active .player-tree-meta { color: rgba(255,255,255,0.75); }
-        .player-tree-score {
-            font-size: 0.75rem; font-weight: 700; color: #28a745; flex-shrink: 0;
-        }
-        .player-tree-item.active .player-tree-score { color: rgba(255,255,255,0.9); }
-        .player-tree-rank {
-            font-size: 1.1rem; flex-shrink: 0; line-height: 1;
-        }
-        .player-tree-rank-num {
-            width: 24px; height: 24px; border-radius: 50%;
-            background: #cfe2ff; color: #084298;
-            display: flex; align-items: center; justify-content: center;
-            font-size: 0.6rem; font-weight: 700; flex-shrink: 0;
-        }
-        .player-tree-item.active .player-tree-rank-num {
-            background: rgba(255,255,255,0.3); color: white;
-        }
-
-        .players-right-panel {
-            flex: 1; overflow: hidden; min-width: 0;
-            display: flex; flex-direction: column;
-        }
-        #playerDetailEmbed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
-        #playerDetailEmbed iframe { flex: 1; min-height: 0; height: 100%; width: 100%; border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
-
-        .player-placeholder {
-            flex: 1; display: flex; flex-direction: column;
-            align-items: center; justify-content: center;
-            color: #ccc; gap: 10px;
-            background: white; border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-            border: 1px solid #e9ecef;
-        }
-        .player-placeholder-icon { font-size: 2.5rem; }
-        .player-placeholder-text { font-size: 0.95rem; }
-
-        /* 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: #28a745;
-            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: #28a745;
-        }
-
-        .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: #28a745;
-            color: white;
-            border-color: #28a745;
-        }
-
-        .filter-btn:hover {
-            border-color: #28a745;
-            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 #28a745;
-            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-badges {
-                grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
-            }
-
-            .tournament-leaders {
-                grid-template-columns: 1fr;
-                gap: 20px;
-            }
-
-            .tournament-card {
-                padding: 25px;
-                margin: 0;
-            }
-
-            .tournament-name {
-                font-size: 1.3rem;
-                gap: 8px;
-            }
-
-            .tournament-header {
-                flex-direction: column;
-                align-items: center;
-                gap: 12px;
-                text-align: center;
-            }
-
-            .leaders-grid {
-                grid-template-columns: 1fr;
-                gap: 20px;
-            }
-
-            .leader-category {
-                padding: 24px;
-            }
-
-            .leader-score {
-                font-size: 1.6rem;
-                padding: 10px 16px;
-            }
-
-            .tab-navigation {
-                flex-direction: column;
-                gap: 10px;
-            }
-
-            .tab-btn {
-                padding: 12px 20px;
-                font-size: 0.95rem;
-                min-height: 45px;
-            }
-        }
-    </style>
     <script src="/static/js/i18n.js"></script>
 </head>
 <body>

templates/results_display.html

@@ -9,706 +9,7 @@
   <link rel="stylesheet" href="/static/css/buttons.css">
   <link rel="stylesheet" href="/static/css/components.css">
   <link rel="stylesheet" href="/static/css/responsive.css">
-  <style>
+  <link rel="stylesheet" href="/static/css/pages/results_display.css">
-    /* Results display specific styles */
-    * {
-      box-sizing: border-box;
-    }
-    
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: #f5f5f5;
-      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: #28a745;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transform: translateY(-1px);
-      color: #28a745;
-    }
-
-    .nav-btn.primary {
-      background: #28a745;
-      border-color: #1e7e34;
-      color: white;
-    }
-
-    .nav-btn.primary:hover {
-      background: #1e7e34;
-      color: white;
-    }
-
-    /* Main TV Layout */
-    .tv-container {
-      height: calc(100vh - 90px);
-      display: grid;
-      grid-template-columns: 1fr 2fr;
-      gap: 20px;
-      padding: 20px;
-    }
-
-    /* Left Column - Header & Podium */
-    .left-column {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      overflow: hidden;
-      flex: 1;
-      min-height: 0;
-    }
-
-    .results-header {
-      border-radius: 12px 12px 0 0;
-      box-shadow: none;
-      padding: 15px;
-      text-align: center;
-      flex-shrink: 0;
-      color: white;
-      position: relative;
-      overflow: hidden;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-
-    /* Dynamic header colors based on tournament type */
-    .results-header.tournament-4_targets {
-      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-    }
-
-    .results-header.tournament-20_targets {
-      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
-    }
-
-    .results-header.tournament-40_targets {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    }
-
-    .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: 60px;
-      max-width: 160px;
-      object-fit: contain;
-      margin-bottom: 12px;
-      filter: brightness(1.2) contrast(1.1);
-      background-color: white;
-      padding: 8px;
-      border-radius: 8px;
-      backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .results-title {
-      font-size: 2rem;
-      font-weight: 700;
-      color: rgb(255, 255, 255);
-      margin-bottom: 6px;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    }
-
-    .results-subtitle {
-      font-size: 1rem;
-      color: rgba(255, 255, 255, 0.95);
-      margin-bottom: 12px;
-      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-    }
-
-    .results-meta {
-      display: flex;
-      justify-content: space-around;
-      gap: 12px;
-    }
-
-    .meta-item {
-      text-align: center;
-    }
-
-    .meta-number {
-      font-size: 1.2rem;
-      font-weight: 700;
-      color: #ffffff;
-      display: block;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    }
-
-    .meta-label {
-      font-size: 0.65rem;
-      color: rgba(255, 255, 255, 0.9);
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-      font-weight: 500;
-    }
-
-    /* Modern Podium Design */
-    .podium-section {
-      background: white;
-      border-radius: 0 0 12px 12px;
-      padding: 12px;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: visible;
-      min-height: 0;
-      box-shadow: none;
-      border: 1px solid #e9ecef;
-    }
-
-    .podium-title {
-      text-align: center;
-      font-size: 0.9rem;
-      font-weight: 700;
-      color: #2c3e50;
-      margin-bottom: 8px;
-    }
-
-    .podium-container {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: 0.75fr 0.75fr 1.5fr;
-      gap: 10px;
-      overflow: hidden;
-      flex: 1;
-      min-height: 0;
-    }
-
-    .podium-card {
-      background: white;
-      border-radius: 12px;
-      box-shadow: none;
-      padding: 12px 12px 18px 12px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      transition: all 0.3s ease;
-      position: relative;
-      overflow: hidden;
-      border: 1px solid #e9ecef;
-      border-top-width: 6px;
-      justify-content: flex-end;
-    }
-
-    .podium-card::before {
-      content: '';
-      position: absolute;
-      top: 6px;
-      left: 1px;
-      right: 1px;
-      bottom: 1px;
-      background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
-      pointer-events: none;
-      z-index: 1;
-      border-radius: 0 0 11px 11px;
-    }
-
-    .podium-card:hover {
-      box-shadow: none;
-    }
-
-    .podium-card.rank-1 {
-      border-top-color: #ffd700;
-      border-color: #ffd700;
-      background: linear-gradient(135deg, #fffbf0 0%, #fff9e6 100%);
-      grid-column: 2;
-      grid-row: 1 / 4;
-    }
-
-    .podium-card.rank-2 {
-      border-top-color: #c0c0c0;
-      border-color: #c0c0c0;
-      background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
-      grid-column: 1;
-      grid-row: 2 / 4;
-    }
-
-    .podium-card.rank-3 {
-      border-top-color: #cd7f32;
-      border-color: #cd7f32;
-      background: linear-gradient(135deg, #fff5f0 0%, #ffe8dc 100%);
-      grid-column: 3;
-      grid-row: 3;
-    }
-
-    .rank-display {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 2px;
-      position: relative;
-      z-index: 2;
-    }
-
-    .medal {
-      font-size: 4.5rem;
-      line-height: 1;
-    }
-
-    .rank-number {
-      font-size: 1.9rem;
-      font-weight: 900;
-      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; }
-
-
-    .participant-info {
-      flex: 1;
-      min-width: 0;
-      text-align: center;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .participant-name {
-      font-size: 1rem;
-      font-weight: 700;
-      color: #2c3e50;
-      margin: 0;
-      word-wrap: break-word;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      line-height: 1.2;
-    }
-
-    .participant-id {
-      display: none;
-    }
-
-    .score-display {
-      text-align: center;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 1px;
-    }
-
-    .score-number {
-      font-size: 1.8rem;
-      font-weight: 900;
-      color: #28a745;
-      line-height: 1;
-    }
-
-    .tens-count {
-      font-size: 1.2rem;
-      color: #ffc107;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-    }
-
-    .score-label {
-      font-size: 0.6rem;
-      color: #999;
-      text-transform: uppercase;
-      font-weight: 600;
-      letter-spacing: 0.3px;
-    }
-
-    /* Right Column - Full Results Table */
-    .right-column {
-      background: white;
-      border-radius: 12px;
-      box-shadow: none;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      border: 1px solid #e9ecef;
-    }
-
-    .table-header {
-      background: #f8f9fa;
-      padding: 8px 12px;
-      border-bottom: 1px solid #dee2e6;
-      flex-shrink: 0;
-    }
-
-    .table-title {
-      font-size: 0.95rem;
-      font-weight: 600;
-      color: #2c3e50;
-      margin: 0;
-    }
-
-    .table-container {
-      flex: 1;
-      overflow: auto;
-      min-height: 0;
-    }
-
-    .results-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.75rem;
-    }
-
-    .results-table th,
-    .results-table td {
-      padding: 4px 6px;
-      text-align: center;
-      border-bottom: 1px solid #f1f3f4;
-      border-right: 1px solid #f1f3f4;
-    }
-
-    .results-table th {
-      background: #f8f9fa;
-      font-weight: 600;
-      color: #495057;
-      text-transform: uppercase;
-      font-size: 0.65rem;
-      letter-spacing: 0.3px;
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-
-    .results-table th.rank-col {
-      width: auto;
-    }
-
-    .results-table th.player-col {
-      text-align: left;
-      width: auto;
-    }
-
-    .results-table th.score-col {
-      width: auto;
-      background: #e3f2fd;
-    }
-
-    .results-table th.tens-col {
-      width: auto;
-      background: #fff3cd;
-    }
-
-    .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;
-      text-align: center;
-    }
-
-    .rank-1 { color: #b8860b; }
-    .rank-2 { color: #6c757d; }
-    .rank-3 { color: #8b4513; }
-
-    .results-table tbody {
-      display: table-row-group;
-    }
-
-    .player-cell {
-      text-align: left !important;
-    }
-
-    .player-name {
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: #2c3e50;
-    }
-
-    .score-cell {
-      background: #e3f2fd !important;
-      font-size: 0.75rem;
-      font-weight: 700;
-      color: #1976d2;
-    }
-
-    .tens-cell {
-      background: #fff3cd !important;
-      font-size: 0.75rem;
-      font-weight: 700;
-      color: #856404;
-    }
-
-    /* Tournament Stats Footer */
-    .stats-footer {
-      background: white;
-      border-top: 1px solid #dee2e6;
-      padding: 6px 15px;
-      display: flex;
-      justify-content: space-around;
-      font-size: 0.7rem;
-      color: #6c757d;
-      flex-shrink: 0;
-    }
-
-    .stat-item {
-      text-align: center;
-    }
-
-    .stat-value {
-      font-weight: 600;
-      color: #28a745;
-    }
-
-    /* Responsive styles */
-    @media (max-width: 768px) {
-      .tv-container {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr;
-      }
-
-      .results-meta {
-        gap: 15px;
-      }
-
-      .meta-number {
-        font-size: 1.5rem;
-      }
-
-      .podium-section {
-        padding: 20px 15px;
-      }
-
-      .results-table {
-        font-size: 0.8rem;
-      }
-
-      .results-table th,
-      .results-table td {
-        padding: 8px 6px;
-      }
-
-      .tens-cell,
-      .score-cell {
-        width: 60px;
-      }
-    }
-
-
-    /* PRINT STYLES */
-    @media print {
-      .navbar,
-      .debug-info {
-        display: none !important;
-      }
-
-      html, body {
-        height: auto !important;
-        overflow: visible !important;
-        background: white !important;
-        margin: 0;
-        padding: 20px;
-      }
-
-      .tv-container {
-        display: block !important;
-        height: auto !important;
-        padding: 0 !important;
-        gap: 0 !important;
-        margin: 0 !important;
-      }
-
-      .left-column {
-        display: block !important;
-        margin-bottom: 0;
-      }
-
-      .results-header {
-        background: white !important;
-        color: #333 !important;
-        box-shadow: none !important;
-        border: 2px solid #ddd !important;
-        border-radius: 8px !important;
-        padding: 16px 20px !important;
-        margin-bottom: 16px;
-        overflow: visible !important;
-        position: static !important;
-      }
-
-      .results-header::before {
-        display: none !important;
-      }
-
-      .results-header * {
-        position: static !important;
-        z-index: auto !important;
-      }
-
-      .header-logo {
-        display: block !important;
-        height: 50px !important;
-        max-width: 140px !important;
-        background-color: transparent !important;
-        padding: 0 !important;
-        border: none !important;
-        filter: none !important;
-        backdrop-filter: none !important;
-        margin-bottom: 10px;
-      }
-
-      .results-title {
-        font-size: 20pt !important;
-        font-weight: bold !important;
-        color: #111 !important;
-        text-shadow: none !important;
-        margin-bottom: 4px;
-      }
-
-      .results-subtitle {
-        font-size: 11pt !important;
-        color: #555 !important;
-        text-shadow: none !important;
-        margin-bottom: 10px;
-      }
-
-      .results-meta {
-        color: #333 !important;
-      }
-
-      .meta-number {
-        font-size: 14pt !important;
-        color: #111 !important;
-        text-shadow: none !important;
-      }
-
-      .meta-label {
-        font-size: 9pt !important;
-        color: #666 !important;
-      }
-
-      .podium-section {
-        display: none !important;
-      }
-
-      .right-column {
-        background: white !important;
-        border-radius: 0 !important;
-        box-shadow: none !important;
-        overflow: visible !important;
-        display: block !important;
-        margin: 0 !important;
-        padding: 0 !important;
-      }
-
-      .table-header {
-        display: none !important;
-      }
-
-      .results-table {
-        margin-top: 0 !important;
-      }
-
-      .print-title {
-        display: none !important;
-      }
-
-      .table-title {
-        display: none !important;
-      }
-    }
-  </style>
   <script src="/static/js/i18n.js"></script>
 </head>
 <body>