The header element was width:100% so the gradient filled relative to the viewport, not the visible text. With centered text, low fill percentages fell entirely outside the text bounds — making the first player (12.5%) invisible and causing shifts at different resolutions. Changed to width:fit-content with translateX(-50%) centering so the gradient maps 1:1 to the text content. Made-with: Cursor