Fix center label positioning in responsive layout

Added chart-wrapper div to contain both chart-container and center-label,
allowing the center-label to be positioned relative to the chart area
regardless of the overall layout (side-by-side or stacked).

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

index.html

@@ -20,6 +20,7 @@
             <select id="month-select" style="display: none;"></select>
         </div>
         <div class="content-wrapper">
+            <div class="chart-wrapper">
                 <div id="chart-container"></div>
                 <div id="center-label" class="center-label">
                     <div class="center-month"></div>
@@ -32,6 +33,7 @@
                         <circle cx="12" cy="12" r="3"/>
                     </svg>
                 </button>
+            </div>
             <div id="details-box" class="details-box">
                 <div id="details-header" class="details-header">
                     <span class="hover-name">Hover over a segment to see details</span>

styles.css

@@ -132,9 +132,15 @@ body {
     position: relative;
 }
 
-#chart-container {
+.chart-wrapper {
+    position: relative;
     width: 70%;
     height: 80vh;
+}
+
+#chart-container {
+    width: 100%;
+    height: 100%;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -143,7 +149,7 @@ body {
 /* Center label overlay */
 .center-label {
     position: absolute;
-    left: 35%; /* Half of chart-container width (70% / 2) */
+    left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     text-align: left;
@@ -329,9 +335,9 @@ body {
         flex-direction: column;
     }
 
-    #chart-container {
+    .chart-wrapper {
         width: 100%;
-        height: 90lvw
+        height: 90lvw;
     }
 
     #details-box {