Reorganize player stats layout: place shot accuracy graph on top of performance chart

- Move shot accuracy distribution section above the tournament performance chart
- Restructure charts-panel into two distinct sections with clear visual separation:
  - accuracy-section: Shows shot accuracy bar chart and distribution stats at top
  - performance-section: Shows tournament performance chart at bottom
- Add CSS styling for both sections with consistent backgrounds and spacing
- Update chart-info styles to accommodate h3 heading in performance section
- Remove redundant panel-title since sections now have their own h3 headings
- Improve visual hierarchy and organization for better readability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

templates/modern_player_stats.html

@@ -191,20 +191,26 @@
 
         /* Chart Info Header */
         .chart-info {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
             margin-bottom: 15px;
-            padding: 12px;
+        }
-            background: #f8f9fa;
+
-            border-radius: 8px;
+        .chart-info h3 {
-            border: 1px solid #e9ecef;
+            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;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border: 1px solid #e9ecef;
         }
 
         .chart-stat {
@@ -361,6 +367,36 @@
             border: 1px dashed #dee2e6;
         }
 
+        /* Accuracy and Performance Sections */
+        .accuracy-section {
+            background: #f8f9fa;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 25px;
+            border: 1px solid #e9ecef;
+        }
+
+        .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;
+        }
+
         /* Bottom Section - History */
         .bottom-section {
             display: grid;
@@ -755,7 +791,9 @@
         <!-- Charts Section -->
         <div class="charts-section">
             <div class="charts-panel">
-                <div class="panel-title">📈 <span data-i18n="analysis.performance">Performance by Tournament Type</span></div>
+                <!-- Shot Accuracy Section (Top) -->
+                <div class="accuracy-section">
+                    <h3 data-i18n="analysis.shot_accuracy">📊 Shot Accuracy Distribution</h3>
 
                     <!-- Tournament Type Buttons -->
                     <div class="tournament-type-buttons">
@@ -770,26 +808,8 @@
                         </button>
                     </div>
 
-                <!-- Chart Info and Stats -->
-                <div class="chart-info" id="chartInfo">
-                    <div class="chart-stats">
-                        <div class="chart-stat">
-                            <div class="chart-stat-value" id="gameCount">0</div>
-                            <div class="chart-stat-label" data-i18n="tournament.tournaments">Games</div>
-                        </div>
-                        <div class="chart-stat">
-                            <div class="chart-stat-value" id="avgScore">0</div>
-                            <div class="chart-stat-label" data-i18n="results.average_score">Average</div>
-                        </div>
-                        <div class="chart-stat">
-                            <div class="chart-stat-value" id="bestScore">0</div>
-                            <div class="chart-stat-label" data-i18n="results.best_score">Best</div>
-                        </div>
-                    </div>
-                    
                     <!-- Shot Accuracy Bar Chart -->
                     <div class="accuracy-chart-container">
-                        <h4 data-i18n="analysis.shot_accuracy">Shot Accuracy Distribution</h4>
                         <div class="accuracy-bar-chart" id="accuracyBarChart"></div>
                     </div>
 
@@ -842,12 +862,34 @@
                     </div>
                 </div>
 
+                <!-- Performance Chart Section (Bottom) -->
+                <div class="performance-section">
+                    <div class="chart-info" id="chartInfo">
+                        <h3>📈 <span data-i18n="analysis.performance">Performance by Tournament Type</span></h3>
+
+                        <div class="chart-stats">
+                            <div class="chart-stat">
+                                <div class="chart-stat-value" id="gameCount">0</div>
+                                <div class="chart-stat-label" data-i18n="tournament.tournaments">Games</div>
+                            </div>
+                            <div class="chart-stat">
+                                <div class="chart-stat-value" id="avgScore">0</div>
+                                <div class="chart-stat-label" data-i18n="results.average_score">Average</div>
+                            </div>
+                            <div class="chart-stat">
+                                <div class="chart-stat-value" id="bestScore">0</div>
+                                <div class="chart-stat-label" data-i18n="results.best_score">Best</div>
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- Single Chart Container -->
                     <div class="chart-container">
                         <canvas id="tournamentChart"></canvas>
                     </div>
                 </div>
             </div>
+        </div>
 
         <!-- Bottom Section - History -->
         <div class="bottom-section">