/* --- NEW CSS --- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-tap-highlight-color: transparent;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-behavior: smooth;
    font-family: 'Roboto Condensed', sans-serif; /* Keep existing font */
    font-style: normal;
    font-weight: 400;
    /* Apply gradient to html */
    background-image: linear-gradient(to right top, #241434, #2c1546, #341559, #3b146d, #411281, #46138c, #4a1598, #4f16a4, #541ba9, #5a20ae, #5f25b4, #642ab9);
    color: #f0f0f0; /* Add default text color */
    overflow: hidden; /* Prevent scrollbars if chart precisely fits */
}
body {
    margin: 0;
    min-height: 100vh; /* Ensure body tries to fill viewport */
    display: flex;
    flex-direction: column;
    padding: 20px; /* Body padding */
    overflow: hidden; /* Prevent body scrollbars */
}
#graph {
     width: 100%;
     line-height: 0;
     flex-grow: 1; /* Allow graph to take up space vertically */
     flex-shrink: 1; /* Allow graph to shrink */
     position: relative; 
     overflow: hidden; /* Hide anything spilling out of #graph */
}
svg {
    display: block;
    /* Width/Height attributes set by JS */
    position: absolute; /* Position SVG top-left within #graph */
    top: 0;
    left: 0;
}
.chart-controls {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding-left: 50px; /* Align content with SVG's margin.left */
    box-sizing: border-box;
    flex-shrink: 0;
    margin-top: 10px; /* Space above controls (KEEP THIS FOR OTHER CHARTS) */
}

/* <<< RENAME class for TLB >>> */
.tlb-controls {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding-left: 50px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-top: 5px; /* Keep specific margin */
}

/* --- Button Styles (These apply to buttons inside BOTH control divs) --- */
 .control-button {
    overflow: hidden; white-space: nowrap; margin: 0;
    background-color: #341963; /* Default background */
    color: #888dff;
    border: 2px solid #888dff;
    border-radius: 4px;
    padding: 5px 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.control-button:hover {
    background-color: #4a238c;
}
.control-button:active {
    background-color: #2a104e;
}
.control-button.active {
    background-color: #888dff; /* New background */
    color: #331962; /* New text color */
    border-color: #888dff; /* Keep border same as background or change e.g., #fff */
}
/* --- Axis & Label Styles (Keep these from previous version) --- */
.axis {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
}
.axis path {
    stroke: #888dff; /* Keep axis path subtle */
    shape-rendering: CrispEdges;
}
.axis .tick text {
    fill: #888dff; /* NEW COLOR */
}
.x.axis .tick line {
    stroke: #888dff; /* NEW COLOR */
    shape-rendering: CrispEdges;
}
.y-axis-baseline {
    stroke: #888dff !important; /* NEW COLOR */
}
.player-name-label {
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 16px;   /* NEW SIZE */
     font-weight: 700;
     /* stroke handled inline */
     /* fill handled inline */
}
.player-value-label {
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 13px;   /* NEW SIZE */
     font-weight: 700;
     fill: #333;
}