Fix white promotion menu layout drift and tile-size mismatch

[Copilot]

When playing as white, the promotion menu was horizontally misaligned, caused slight board width distortion when opened, and rendered promotion tiles larger than board tiles. This PR aligns the overlay to board columns and normalizes promotion tile geometry to match board tiles exactly.

• Promotion menu positioning and sizing

  • Replaced pixel-based horizontal placement with board-relative file width (100 / 8) so the menu aligns to the selected file regardless of board scaling.
  • Set promotion menu width to one board file and each option tile to width: 100% + aspect-ratio: 1 for exact square parity with board tiles.

• Border/layout isolation

  • Scoped board column border styling to actual board file elements only (via data-board-file), so the promotion overlay no longer participates in board border rules.
  • Removed overlay-induced border interactions that visually shrank/shifted the board when the menu appeared.

• Implementation note (key change)

  const FILE_WIDTH_PERCENT = 100 / 8;
  
  const PromotionMenuContainer = styled.div<{ position: Position }>`
      position: absolute;
      left: ${({ position }) =>
          mapFileToFileIndex(position.file) * FILE_WIDTH_PERCENT}%;
      width: ${FILE_WIDTH_PERCENT}%;
      display: flex;
      flex-direction: column;
  `;
  
  const PieceSquare = styled.div`
      width: 100%;
      aspect-ratio: 1;
      box-sizing: border-box;
      border: ${settings.borderStyle};
      & + & { border-top: none; }
  `;